/* ============================================================
   SILICA WORKS - home.html below 1000px
   ------------------------------------------------------------
   Everything the home page does differently on phones and
   tablets, in one file, linked last so it wins over the shared
   stylesheets and the page's own <style> blocks at equal
   specificity.

   EVERY RULE IS INSIDE A max-width: 1000px QUERY. Desktop is
   the brief and is finished, so nothing here may reach past the
   breakpoint the rest of the site already switches at.

   The pinned card deck and the testimonial carousel are opt-in
   classes their scripts set (.is-mdeck, .is-carousel). With no
   script, or with reduced motion, neither class is ever written
   and the sections fall back to the plain stacked layouts the
   shared stylesheets draw.
   ============================================================ */

@media (max-width: 1000px) {

  /* ----------------------------------------------------------
     VIEWPORT
     ----------------------------------------------------------
     100vh on a phone is the LARGE viewport - the height with the
     browser's toolbars collapsed. With them showing, a section
     sized to it runs under the bottom bar and its foot is cut
     off. svh is the small viewport: always fully visible, and it
     does not change as the toolbars move, so nothing reflows
     mid-scroll. The vh line stays first as the fallback. */
  .ap {
    min-height: 100vh;
    min-height: 100svh;
  }

  .ap-who {
    min-height: 100vh;
    min-height: 100svh;
  }

  /* Until Söhne arrives the titles set in the fallback face, which
     runs wider, and the last word of a one-line title reached 27px
     past a 390px screen. A phone sizes the page to its widest
     content as it loads, so for that moment the whole page was
     wider than the screen - it could be panned sideways and the
     browser measured every trigger against the wrong width.
     clip, not hidden: it creates no scroll container, so the pins
     and the footer's reveal behave exactly as before. */
  .page {
    overflow-x: clip;
  }

  /* ----------------------------------------------------------
     SECTION TITLES - one line, sized to the device
     ----------------------------------------------------------
     The shared rule stacks the three words into a column below
     1000px. Here they stay on one row, spread edge to edge with
     space-between exactly as on desktop, and the SIZE gives way
     instead of the layout.

     One size for every title, solved for the widest of them:
     "Our full capabilities" measures 10.5em of ink in Söhne
     Extrabold at this tracking. 11.3em leaves two gaps of 0.4em
     between its words, and the 3rem is the sections' 1.5rem side
     gutters. The other four titles are shorter, so at the same
     size their words simply spread further apart - the way they
     do on desktop.

     Capped at 4.25rem so a tablet never sets it larger than the
     6.8vw the desktop rule gives at 1001px.

     Three classes deep so it beats the archive head's own
     column rule (.sw-archive-head .sw-featured-title). */
  .page .sw-section-title.sw-featured-title {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.35em;
    font-size: min(calc((100vw - 3rem) / 11.3), 4.25rem);
    line-height: 1;
    text-align: left;
  }

  /* The pills that hang off two of the titles, stepped down with
     the type so they stay a tag on the word rather than a second
     heading. */
  .page .sw-featured-title .sw-tag--title {
    font-size: clamp(0.9rem, 3.4vw, 1.2rem);
    --sw-tag-nose: 0.55rem;
  }

  /* "Real clients" hangs off "work", the LAST word, which sits
     hard against the right gutter. Anchored from its left edge
     it ran off the screen; from the right it hangs under the
     word instead. */
  .sw-featured--paper .sw-ft-word--c > .sw-tag--title {
    left: auto;
    right: 0;
    margin-top: 0.1em;
  }

  /* "Unedited" hangs off the middle word, "clients". The eyelet
     offset is in rem and was sized for the desktop pill. */
  .sw-testimonials .sw-tag--title {
    --sw-tag-eye: 0.95rem;
    top: 92%;
    margin-top: 0;
  }

  /* ----------------------------------------------------------
     HERO
     ----------------------------------------------------------
     The page's rule set the words at 15vw, which at 390px put
     "MAKING" and "BRANDS" 30px into each other and cut "BY
     DESIGN." off the edge. The size is solved from the widest
     row instead: "IMPACT" + "BY DESIGN." is 8.54em of ink, and
     8.95em leaves a 0.4em gap between them. The 2.5rem is the
     hero's own 1.25rem sides.

     The svh term keeps a phone on its side from setting words
     taller than the screen can hold with the reel between them. */
  .ap {
    --f: min(calc((100vw - 2.5rem) / 8.95), 12svh);
    row-gap: clamp(0.9rem, 2.2svh, 1.4rem);
  }

  /* The captions above and below the reel are sized off the word
     size on desktop; at this size that falls to its 2.1rem floor
     anyway, so it is stated plainly. */
  .ap-stage {
    --cap: 2.1rem;
  }

  /* The reel's corners follow the nav bar's smaller mobile bevel. */
  .ap-plate {
    --notch: 11px;
  }

  /* No zoom on a phone: the reel fades up at its own size and
     keeps its full 16:9 frame. The page's pre-paint state holds
     it at 35% for the desktop zoom, so that is undone here. */
  .ap-anim .ap-shutter {
    transform: none;
  }

  .ap-blurb {
    max-width: 34ch;
    font-size: 1rem;
  }

  /* On its side a phone (or a small tablet) is short, and a
     full-width 16:9 reel ran under the nav on the first screen.
     The reel's width is capped by the height instead and centred,
     so the words, the reel and the blurb read as one composition. */
  @media (orientation: landscape) {
    .ap {
      --f: min(calc((100vw - 2.5rem) / 8.95), 10svh);
    }

    .ap-stage {
      width: min(100%, 90svh);
      justify-self: center;
    }
  }

  /* A tablet on its side has the height for the desktop frame
     itself: six words holding the four edges with the reel dead
     centre. These restore the desktop grid the page's own narrow
     rule takes apart - the same tracks, rows and offsets as the
     desktop rules in home.html. The scroll dolly stays desktop
     only; here the hero simply scrolls away. */
  @media (orientation: landscape) and (min-height: 560px) {
    .ap {
      --f: min(9.4vw, 15.5svh);
      --avail: calc(100svh - var(--top) - var(--nav-clear) - 2 * var(--f) * var(--lh) - 2 * var(--cap) - 2 * var(--rg));
      height: 100svh;
      min-height: 0;
      grid-template-columns: minmax(0, 1fr) var(--pw) minmax(0, 1fr);
      grid-template-rows: auto auto auto;
      row-gap: var(--rg);
    }

    .ap-row--top { grid-row: 1; }
    .ap-row--bot { grid-row: 3; }

    .ap-idea {
      grid-column: 1;
      grid-row: 2;
      align-self: start;
      margin: calc(var(--cap) - 0.21em) 0 0;
    }

    .ap-to {
      grid-column: 3;
      grid-row: 2;
      align-self: end;
      margin: 0 0 calc(var(--cap) - 0.03em);
    }

    .ap-stage {
      grid-column: 2;
      grid-row: 2;
      width: auto;
      justify-self: stretch;
      --cap: max(2.1rem, calc(var(--f) * 0.25));
    }

    .ap-blurb {
      grid-column: 1;
      grid-row: 2;
      align-self: end;
      margin: 0 0 var(--cap);
      max-width: 22ch;
      font-size: 0.875rem;
    }
  }

  /* ----------------------------------------------------------
     WHO WE ARE
     ---------------------------------------------------------- */
  .ap-who {
    padding-top: var(--sw-sheet-top);
  }

  .ap-who-title {
    margin-bottom: clamp(4.5rem, 11svh, 6rem);
  }

  .ap-who .sw-section-body {
    font-size: 1.0625rem;
  }

  /* NAV BAR - the mark's 30px phone size and the trimmed bar padding
     now live in css/menu.css, so every page shares them. */

  /* ----------------------------------------------------------
     CAPABILITIES - the pinned deck (.is-mdeck, js/cards.js)
     ----------------------------------------------------------
     The title scrolls past on its own. Then the split pins to
     the screen: the card stack fills the top, nothing above it,
     and the "We design." line and its paragraph sit underneath.
     Each stretch of scroll throws the top card up and off the
     screen while the one behind rises into its place, and the
     word in the line under it turns over with the card.

     The split is exactly one small viewport tall, so the pin
     never holds more than is on the screen. Its bottom padding
     is the nav bar's clearance: 1.5rem off the edge, the bar's
     60px, and a band of air above it. */
  .sw-section--sticky.is-mdeck {
    min-height: 0;
    padding-top: clamp(3.5rem, 8svh, 5rem);
    padding-bottom: 0;
    justify-content: flex-start;
  }

  .sw-section--sticky.is-mdeck .sw-hww-title {
    margin-bottom: clamp(0.5rem, 2svh, 1.25rem);
  }

  .sw-section--sticky.is-mdeck .sw-split {
    flex: none;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: clamp(1.1rem, 3svh, 2rem);
    padding: clamp(1rem, 3svh, 1.75rem) 0 calc(1.5rem + 60px + clamp(1.25rem, 3.5svh, 2.25rem));
    /* Cards travel up and out of the pinned frame, so the frame
       must not clip them on either axis. */
    overflow: visible;
  }

  /* Images first, copy under them. The DOM keeps copy-then-images
     so a screen reader still hears the paragraph before the
     decorative stack. */
  .sw-section--sticky.is-mdeck .sw-split-media {
    grid-row: 1;
    grid-column: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 1.5rem;
  }

  .sw-section--sticky.is-mdeck .sw-split-copy {
    grid-row: 2;
    grid-column: 1;
    align-self: end;
    padding: 0 1.5rem;
  }

  .sw-section--sticky.is-mdeck .sw-split-media > .sw-cards {
    flex: 1;
    display: block;
    position: relative;
    height: auto;
    min-height: 0;
    perspective: 1100px;
  }

  /* Height leads and the 4:5 ratio gives the width, so the stack
     shrinks with the screen instead of cropping. 86% leaves room
     under the top card for the two behind it to show their
     edges. Centred a little high for the same reason. */
  .sw-section--sticky.is-mdeck .sw-card {
    position: absolute;
    top: 46%;
    left: 50%;
    height: 86%;
    width: auto;
    max-width: 100%;
    max-height: none;
    aspect-ratio: 4 / 5;
    transform: translate(-50%, -50%);
    --sw-card-notch: 11px;
    filter: drop-shadow(0 16px 28px rgba(20, 20, 15, 0.24));
  }

  .sw-section--sticky.is-mdeck .sw-card::after {
    display: block;
  }

  .sw-section--sticky.is-mdeck .sw-card-cap {
    padding: 1.75rem 1rem 0.9rem;
    font-size: 0.65rem;
  }

  /* The copy under the stack. The rotating word keeps its
     desktop tilt; the paragraph steps down so the block stays a
     caption to the cards rather than competing with them. */
  .sw-section--sticky.is-mdeck .sw-story {
    font-size: 1.85rem;
    margin-bottom: 0.35rem;
  }

  .sw-section--sticky.is-mdeck .sw-split-copy .sw-section-body {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 36em;
  }

  .sw-section--sticky.is-mdeck .sw-cap-cta {
    margin-top: 1.25rem;
  }

  /* A short phone cannot hold the stack, four lines of copy and a
     button in one screen. The button goes (the footer and the
     menu both carry the same ask) and the copy tightens, so the
     cards keep a size worth looking at. */
  @media (max-height: 700px) {
    .sw-section--sticky.is-mdeck .sw-cap-cta {
      display: none;
    }

    .sw-section--sticky.is-mdeck .sw-split-copy .sw-section-body {
      font-size: 0.9375rem;
      line-height: 1.45;
    }

    .sw-section--sticky.is-mdeck .sw-story {
      font-size: 1.6rem;
    }
  }

  /* A phone on its side: side by side, stack left, copy right,
     as on desktop. There is no height for one over the other. */
  @media (orientation: landscape) {
    .sw-section--sticky.is-mdeck .sw-split {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      grid-template-rows: minmax(0, 1fr);
      padding-bottom: calc(1.5rem + 60px + 1rem);
    }

    .sw-section--sticky.is-mdeck .sw-split-copy {
      grid-row: 1;
      grid-column: 2;
      align-self: center;
      padding-left: 0;
    }

    .sw-section--sticky.is-mdeck .sw-card {
      top: 48%;
      height: 90%;
    }
  }

  /* ----------------------------------------------------------
     FEATURED WORK - refined, same structure
     ----------------------------------------------------------
     The index keeps its rows and its tap-to-open image. What
     changes is the rhythm: the list sits closer under its title,
     each row gets a finger-sized height, and the number comes
     back as a quiet lead-in so the rows read as an index rather
     than as loose lines. */
  .sw-featured--paper {
    padding-bottom: 5rem;
  }

  .sw-featured--paper .sw-index-wrap {
    margin-top: clamp(3rem, 8svh, 5rem);
  }

  .sw-featured--paper .sw-index-row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    padding: 1.15rem 0;
    min-height: 4.25rem;
    align-items: center;
  }

  /* The top row gets the hairline the rows between carry, so the
     list opens on a rule the way it closes on one. */
  .sw-featured--paper .sw-index-row:first-child {
    border-top: 1px solid #e8e8e4;
  }

  .sw-featured--paper .sw-index-row:last-child {
    border-bottom: 1px solid #e8e8e4;
  }

  .sw-featured--paper .sw-ix-meta {
    gap: 0.35rem 0.4rem;
  }

  /* The category keeps its hand-drawn face, a step up so it reads
     as cleanly as the year beside it. */
  .sw-featured--paper .sw-ix-lab {
    font-size: 1.35rem;
    line-height: 1.1;
  }

  .sw-featured--paper .sw-ix-tags {
    gap: 0.3rem;
  }

  .sw-featured--paper .sw-index-row.is-open .sw-ix-media {
    margin-top: 1rem;
  }

  /* ----------------------------------------------------------
     TESTIMONIALS - the carousel (.is-carousel, js/testimonials.js)
     ----------------------------------------------------------
     Three cards in view: one square to the reader, one tucked
     behind it on each side and leaning away. The rest wait out
     of sight behind the front card. The arrows (and a swipe)
     deal the front card off to the side it is sent, the way a
     click deals one to the back of the desktop fan, and the next
     card rises into its place.

     The deck is a fixed-height stage and every card is placed on
     its centre by transform, so a turn never reflows the page. */
  .sw-testimonials.is-carousel {
    overflow-x: clip;
    gap: 1.75rem;
    padding-bottom: 3.5rem;
  }

  /* The section is a centred flex column here, which shrink-wraps
     the head to its words and bunched the title together. It
     takes the full measure, as every other title does. */
  .sw-testimonials .sw-archive-head {
    align-self: stretch;
    width: auto;
  }

  .sw-testimonials.is-carousel .sw-tm-deck {
    --tm-w: min(68vw, 320px);
    --tm-h: clamp(17.5rem, 80vw, 21rem);
    display: block;
    position: relative;
    width: 100%;
    height: calc(var(--tm-h) + 3.25rem);
    /* Vertical scrolling passes straight through; a horizontal
       drag is the deck's to handle. */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }

  .sw-testimonials.is-carousel .sw-tm-card {
    position: absolute;
    /* Clear of the pill hanging under the title. */
    top: 1.5rem;
    left: 50%;
    width: var(--tm-w);
    height: var(--tm-h);
    min-height: 0;
    padding: 1.4rem;
    cursor: grab;
    will-change: transform;
  }

  .sw-testimonials.is-carousel .sw-tm-quote {
    font-size: 1.125rem;
    line-height: 1.34;
  }

  .sw-testimonials.is-carousel .sw-tm-note {
    display: none;
  }

  /* The controls: previous, the count, next. Ink buttons cut with
     the same corner the page's other buttons carry, at a full
     finger's size. */
  .sw-tm-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
  }

  .sw-tm-btn {
    --btn-notch: 11px;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 0;
    padding: 0;
    background: var(--sw-ink);
    color: var(--sw-paper);
    cursor: pointer;
    clip-path: polygon(var(--btn-notch) 0, 100% 0, 100% calc(100% - var(--btn-notch)),
      calc(100% - var(--btn-notch)) 100%, 0 100%, 0 var(--btn-notch));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }

  .sw-tm-btn:active {
    transform: scale(0.94);
  }

  .sw-tm-btn:focus-visible {
    outline: none;
    background: var(--sw-accent);
    color: var(--sw-ink);
  }

  .sw-tm-btn svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: square;
  }

  .sw-tm-count {
    min-width: 4.5rem;
    font: 500 0.8rem/1 "Inter Tight", sans-serif;
    letter-spacing: 0.12em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: #76766f;
  }

  .sw-tm-count b {
    color: var(--sw-ink);
    font-weight: 600;
  }

  /* ----------------------------------------------------------
     INSPIRATION FILE - a manual horizontal strip
     ----------------------------------------------------------
     The three plates run side by side past the edge of the
     screen and are swiped through by hand, snapping one plate at
     a time. The strip bleeds to both screen edges; the padding
     and scroll-padding keep each snapped plate on the page's
     1.5rem gutter. */
  .sw-showcase .sw-sc-head {
    margin-bottom: var(--sw-title-gap);
  }

  .sw-showcase .sw-sc-row {
    display: flex;
    gap: 1rem;
    margin: 0 -1.5rem;
    padding: 0.5rem 1.5rem 2.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1.5rem;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sw-showcase .sw-sc-row::-webkit-scrollbar {
    display: none;
  }

  .sw-showcase .sw-sc-item {
    flex: 0 0 min(76vw, 340px);
    scroll-snap-align: start;
  }

  .sw-showcase .sw-sc-frame {
    aspect-ratio: 4 / 5;
  }

  .sw-showcase .sw-sc-body {
    padding-top: 1.1rem;
    gap: 0.45rem;
  }

  .sw-showcase .sw-sc-title {
    font-size: 1.05rem;
  }

  .sw-showcase .sw-sc-desc {
    font-size: 0.9375rem;
  }

  /* Where in the strip the reader is: a hairline with an ink run
     that fills as the strip scrolls (js/showcase.js). Mirrors the
     reel's progress rule in the hero. */
  .sw-sc-rail {
    position: relative;
    height: 1px;
    background: rgba(20, 20, 15, 0.16);
    overflow: hidden;
  }

  .sw-sc-rail > span {
    position: absolute;
    inset: 0;
    background: var(--sw-ink);
    transform-origin: 0 50%;
    transform: scaleX(var(--p, 0.33));
  }
}

/* The rail and the carousel controls only exist on narrow
   screens; above the breakpoint they are removed outright. */
@media (min-width: 1001px) {
  .sw-sc-rail,
  .sw-tm-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sw-tm-btn {
    transition: none;
  }
}