/* ==================================================================
   MOBILE
   Measured at 375px, not guessed at. Three things were wrong: the page
   was ~26,000px tall because desktop section padding carried straight
   down, several controls were under a comfortable thumb size, and the
   hero filled the whole screen so nothing hinted there was more below.

   This block is last in the cascade on purpose — it overrides the
   inline <style> blocks the pages carry as well as the linked sheets.
   ================================================================== */

@media (max-width: 767px) {

  /* ---- rhythm ------------------------------------------------------
     var(--s32) is 128px of padding top and bottom on every section. On a
     phone that reads as dead space and adds ten screens of scrolling to
     the page, so the whole scale steps down one notch. */

  .section        { padding-block: var(--s16); }
  .section--tight { padding-block: var(--s12); }
  .intro          { padding-block: var(--s16); }
  .focus          { padding-block: var(--s16); }

  .section-head { margin-bottom: var(--s8); gap: var(--s4); }
  .section-intro { margin-top: var(--s5); }

  /* ---- the hero ----------------------------------------------------
     Capped so a strip of the next section shows. A hero that exactly
     fills the viewport reads as the whole page. */

  .hero { min-height: 0; }
  .hero__inner { padding-block: var(--s16) var(--s12); }
  .hero--page .hero__inner { padding-block: var(--s16) var(--s12); }

  /* the controls row sits under the copy rather than floating over it */
  .hero__controls { padding-bottom: var(--s6); }

  /* ---- touch targets ----------------------------------------------
     A text link styled as a button was 28px tall. It clears WCAG 2.2 AA
     at that size, but it is unpleasant to hit with a thumb, and these
     are the section-level calls to action. */

  .btn--tertiary {
    min-height: var(--hit);
    display: inline-flex;
    align-items: center;
  }

  .nav .logo { min-height: var(--hit); }

  .footer__col ul { gap: var(--s4); }
  .footer__col a { display: inline-block; padding-block: 3px; }

  .link-underline { display: inline-block; padding-block: var(--s2); }

  /* ---- the four-up intro ------------------------------------------
     Two up rather than one, so the four things still read as a set
     rather than as a long list you scroll through. */

  .intro__four { grid-template-columns: 1fr 1fr; gap: var(--s8) var(--s5); margin-top: var(--s10); }
  .intro__four h3 { font-size: var(--h3); }
  .intro__four p { font-size: 14px; }
  .intro__foot { margin-top: var(--s10); }

  /* ---- the focus bands --------------------------------------------
     Copy first, then artwork — the drawn pieces are supporting material
     on a phone, not the lead. */

  .focus__inner { gap: var(--s10); }
  .focus__title { max-width: none; }
  .focus__points { margin-bottom: var(--s6); }
  .focus__points li { grid-template-columns: 1fr; gap: var(--s1); }
  .focus__points li b { display: block; }

  /* ---- Tuesday ----------------------------------------------------- */

  .tues__col { padding: var(--s6) var(--s5); }
  .tues__list li { padding: var(--s4) 0; }

  /* ---- booking ------------------------------------------------------ */

  .book { margin-top: var(--s8); gap: var(--s10); }
  .book__cal { margin-top: var(--s5); }

  /* ---- the work logos ----------------------------------------------- */

  .logo-case__mark { min-height: 110px; padding: var(--s6); }
  .logo-case__mark img { height: 30px; }
  .logo-case:last-child .logo-case__mark img { height: 20px; }
}

/* ------------------------------------------------------------------
   Small phones. The gutter drops to 20px in tokens.css at this width,
   so the remaining work is type and anything still sitting two-up.
   ------------------------------------------------------------------ */

@media (max-width: 439px) {
  .intro__four { grid-template-columns: 1fr; gap: var(--s8); }
  .intro__statement { font-size: clamp(28px, 8.6vw, 36px); max-width: none; }
  .intro__lead { font-size: 16px; }

  .book__cal__grid { gap: 6px; }
  .book__cal__slot { padding: var(--s3) 4px; font-size: 13px; }

  .tline li { padding-bottom: var(--s6); }
  .faq summary { font-size: var(--h3); gap: var(--s4); }
}

/* ==================================================================
   MOBILE, PART TWO
   The first pass tightened spacing and won about 900px. It was not the
   problem. The page ran to 31 screens because sixteen desktop sections
   were reflowed into one column, and every one of them still carried its
   full desktop content.

   This pass removes content on a phone rather than shrinking it, and
   pairs with js/mobile.c07013b16e.js which folds the long blocks behind controls.
   ================================================================== */

@media (max-width: 767px) {

  /* ---- the drawn artwork comes off ---------------------------------
     Each focus band carried a browser mock, a phone thread, a fanned
     card stack or a brass still-life. At 375px they are a screen each
     and read as texture rather than as anything you could interpret.
     The copy beside them was always doing the work. */

  .focus__art { display: none; }
  .focus { padding-block: var(--s12); }
  .focus__inner { gap: 0; }
  .focus::after { display: none; }          /* the oversized ds too */

  /* ---- the hero ----------------------------------------------------
     Design's mobile crop is a fragment behind a heavy scrim, not the
     full composition scaled up. Push it back so the headline wins. */


  .hero__inner { padding-block: var(--s12) var(--s10); }
  .hero__controls { padding-bottom: var(--s5); }

  /* ---- folds --------------------------------------------------------
     One line each until asked for. Built by js/mobile.c07013b16e.js. */

  .fold { border-top: 1px solid var(--border); }
  .on-ink .fold, .footer .fold { border-top-color: rgba(251,250,247,0.18); }

  .fold summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--hit);
    font-family: var(--font-mono);
    font-size: var(--label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--accent);
  }
  .fold summary::-webkit-details-marker { display: none; }
  .fold summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 400;
    color: var(--brass-500);
  }
  .fold[open] summary::after { content: "–"; }
  .fold__body { padding-bottom: var(--s6); }

  .footer__col { margin: 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 0; padding-bottom: var(--s8); }
  .footer__col--wide { padding-bottom: var(--s6); }
  .footer .fold summary { color: var(--brass-300); }

  /* ---- Tuesday as tabs ---------------------------------------------- */

  .tues__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-bottom: none;
    margin-top: var(--s8);
  }

  .tues__tab {
    appearance: none;
    border: none;
    background: var(--page);
    padding: var(--s4) var(--s3);
    min-height: var(--hit);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-400);
    cursor: pointer;
  }

  .tues__tab.is-on { background: var(--ink-900); color: var(--brass-300); }

  .tues { grid-template-columns: 1fr; margin-top: 0; border-top: none; }
  .tues__col { display: none; }
  .tues__col.is-shown { display: flex; }
  .tues__col .tues__head { display: none; }   /* the tab says it now */

  /* ---- everything else, tightened ----------------------------------- */

  .intro__four { gap: var(--s6) var(--s5); margin-top: var(--s8); }
  .intro__lead { font-size: 16px; }
  .intro__foot { margin-top: var(--s8); padding-top: var(--s6); }

  .tline li { padding-block: var(--s6); }
  .tline h3 { margin-top: var(--s3); }

  .disc.disc--two .disc__item { padding: var(--s6) var(--s5); }
  .disc__list { margin-top: var(--s3); padding-top: var(--s4); }

  .logo-case { padding-bottom: var(--s6); }
  .logo-case p { font-size: 14px; }

  .book__cal iframe { min-height: 1150px; }
  .book__opt { padding: var(--s5); }
  .book__opt__note { font-size: 13px; }

  /* ---- sticky book bar ---------------------------------------------
     The page is long even after all of the above. This keeps the one
     thing we want people to do within reach the whole way down. */

  .bookbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s3) var(--gutter);
    padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    background: var(--ink-900);
    border-top: 3px solid var(--brass-500);
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
  }

  .bookbar.is-hidden { transform: translateY(120%); }

  .bookbar span { display: block; min-width: 0; }
  .bookbar b { display: block; font-size: 14px; font-weight: 600; color: var(--bone-50);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bookbar em { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 10px;
                letter-spacing: 0.1em; font-style: normal; color: var(--brass-300); }
  .bookbar .btn { flex: none; min-height: 44px; padding-inline: var(--s6); }

  /* the bar sits over the footer, so give the page somewhere to end */
  body { padding-bottom: 72px; }
}

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

@media (max-width: 767px) {

  /* inline folds sit inside a card, so they are quieter than a section
     fold — a rule and a line of mono, no heavy top border */
  .fold--inline { border-top: 1px solid var(--border); margin-top: var(--s4); }
  .on-ink .fold--inline { border-top-color: rgba(251,250,247,0.18); }
  .fold--inline summary { min-height: 40px; font-size: 11px; }
  .fold--inline > *:not(summary) { margin-top: 0; padding-top: var(--s3); }
  .fold--inline .brands,
  .fold--inline .logo-case__brands,
  .fold--inline .disc__list { border-top: none; margin-top: 0; padding-top: var(--s2); }

  /* the remaining long sections, tightened rather than folded — these
     carry claims, so they stay readable in full */
  .process .process__step { padding-block: var(--s5); }
  .process p { font-size: 14px; }
  .three article { padding: var(--s6) var(--s5); }
  .three p { font-size: 14px; }
  .tline p { font-size: 14px; }
  .faq summary { padding-block: var(--s5); }
  .faq details p { font-size: 14px; padding-bottom: var(--s5); }
  .creds p { font-size: 15px; }
  .px .container { padding-block: 0; }
}

@media (max-width: 767px) {

  /* a folded section reads as a continuation of its heading, so it gets
     the brass rule rather than the plain border the inline folds use */
  .fold--section { border-top: 2px solid var(--brass-500); margin-top: var(--s6); }
  .fold--section > summary { min-height: var(--hit); font-size: var(--label); }
  .fold--section > *:not(summary) { margin-top: var(--s6); }
  .fold--section > *:first-of-type { margin-top: 0; }
  .on-ink .fold--section { border-top-color: var(--brass-500); }
  .fold--section[open] > summary { margin-bottom: var(--s2); }

  /* the sticky bar was running to 131px because the caption wrapped */
  .bookbar { padding-block: 10px; gap: var(--s3); }
  .bookbar span { flex: 1 1 auto; overflow: hidden; }
  .bookbar b { font-size: 13px; }
  .bookbar em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bookbar .btn { min-height: 42px; padding-inline: var(--s5); font-size: 14px; }
  body { padding-bottom: 78px; }
}

/* ==================================================================
   MOBILE, PART THREE — what the screenshots showed
   ================================================================== */

@media (max-width: 767px) {

  /* ---- kill the scroll reveals -------------------------------------
     This is what made the page look broken. Every block starts at
     opacity 0 and fades in when the observer notices it. On a desktop,
     where scrolling is slow and deliberate, that reads as polish. On a
     phone, where a flick moves you 2,000px, you arrive at a section
     before it has been told to appear — so you scroll through screens
     of black and assume the site is broken.

     There is no version of this worth keeping on a phone. The animation
     was never the point; the content is. */

  .rv, .rv-rule, .rv--up, .rv--left, .rv--scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    clip-path: none !important;
  }

  .split-word { opacity: 1 !important; transform: none !important; }

  /* ---- the hero ----------------------------------------------------
     44px display type put the headline on three tight lines and pushed
     everything else off the screen. The paragraph ran to five. Two
     full-width stacked buttons took another 120px. All of it competed
     with a facts row and the rotator controls on the same screen. */

  .hero .display-1,
  .hero .display-2 {
    font-size: clamp(28px, 8.4vw, 34px);
    line-height: 1.04;
    letter-spacing: -0.035em;
  }

  .hero .lead {
    font-size: 15px;
    line-height: 1.5;
    /* four lines is a glance; five is homework */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* buttons side by side — they are short enough and it saves 60px */
  .hero .btn-row { gap: var(--s2); flex-wrap: nowrap; }
  .hero .btn-row .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--s3);
    font-size: 14px;
    min-height: 46px;
  }

  /* the facts row repeats what the page says three sections later, and
     on a phone it collided with the rotator controls */
  .hero .facts { display: none; }

  .hero__controls { padding-block: 0 var(--s4); }
  .hero__inner { padding-block: var(--s10) var(--s6); }

  /* ---- the marquee -------------------------------------------------
     Label above the track rather than beside it — side by side left
     about 180px for the sectors, which truncated mid-word. */
  .marquee--labelled { padding-block: var(--s4); }
  .marquee--labelled .marquee__label { font-size: 10px; }

  /* ---- the intro ---------------------------------------------------
     778px for four short items. Two-up with tighter copy halves it. */
  .intro__four { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s4); }
  .intro__four h3 { font-size: 17px; letter-spacing: -0.02em; }
  .intro__four p { font-size: 13px; line-height: 1.45; }
  .intro__four li { padding-top: var(--s4); }
  .intro__price { padding-top: var(--s3); font-size: 10px; }
  .intro__statement { font-size: clamp(26px, 7.6vw, 32px); }
  .intro__lead { font-size: 15px; }
  .intro__foot p { font-size: 14px; }
}

@media (max-width: 379px) {
  .intro__four { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {

  /* ---- hero height ---------------------------------------------------
     .hero__slide and .hero__inner both carry height:100%. With the slides
     min-height removed for mobile the grid track collapses, the content
     overflows it, and the copy lands on top of the rotator controls —
     which is why "Book a call" was sitting in the middle of the arrows.
     On a phone the hero should simply be as tall as its content. */

  .hero__inner  { height: auto; }

  /* ---- hero buttons --------------------------------------------------
     base.css turns every .btn full-width and .btn-row into a column below
     520px. Sensible as a default; wrong for two short hero buttons, which
     cost 110px stacked and 46px side by side. */

  .hero .btn-row { flex-direction: row; flex-wrap: nowrap; gap: var(--s2); }
  .hero .btn-row .btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 46px;
    padding-inline: var(--s3);
    font-size: 14px;
  }
}

@media (max-width: 767px) {

  /* ---- rotator controls ---------------------------------------------
     .hero__controls carries margin-top:-64px so it tucks into the hero
     bottom padding on desktop. With the hero now sized to its content on
     mobile there is no padding to tuck into, so it was landing on top of
     the buttons — which is what put an arrow through "Book a call".
     Sits below the copy instead, left-aligned with it. */

  .hero__controls {
    margin-top: 0;
    padding-top: var(--s4);
    padding-bottom: var(--s5);
    justify-content: flex-start;
    border-top: 1px solid rgba(251,250,247,0.14);
  }

  .hero__count { margin-right: var(--s3); }
}

@media (max-width: 767px) {

  /* full-bleed scheduler — a month grid in 335px is cramped, and the
     gutter is worth more to Calendly than it is to us here */
  .book__cal {
    margin-inline: calc(var(--gutter) * -1);
    border-inline: none;
  }

  .book__cal iframe { min-height: 1150px; }
}

@media (max-width: 767px) {
  /* four lines on a phone too — the clamp already caps it there */
  .hero .lead { min-height: calc(1.5em * 4); }
}

@media (max-width: 767px) {
  /* two lines on a phone, which is the tallest any of the four runs to */
  .hero .display-1, .hero .display-2 { min-height: calc(1.04em * 2); }
}

@media (max-width: 767px) {

  /* ---- hero field, not hero fragment --------------------------------
     Design drew these compositions for a 2200px artboard with the material
     right of centre. Scaling one up 2.1x and cropping it to a 375px frame
     does not give you a detail of the artwork — it gives you an unlabelled
     pale rectangle behind the headline that reads as a rendering fault.
     Same conclusion as the focus bands: the drawn pieces come off, the
     field they sit on stays. The gradient is doing the work anyway. */

  .hero__board > *:not(.art-field) { display: none; }
  .hero__art { opacity: 1; }
  .hero__board {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: none;
  }

  /* with no artwork to sit over, the scrim only has to keep the type
     comfortable rather than fight a composition */
  .hero__scrim {
    background: linear-gradient(180deg, rgba(14,15,14,0.35) 0%, rgba(14,15,14,0.72) 55%, rgba(14,15,14,0.88) 100%);
  }
}

@media (max-width: 767px) {

  /* The interior heads are static now, so there is nothing here to
     collapse — only the padding is still wanted. */

  .hero--page .hero__inner { padding-block: var(--s10) var(--s10); }
}