/* ============================================================
   rhythm.css, UX and UI pass 1
   22 Sep 2026

   Loaded last on every page, after nav.css. Rules are prefixed
   with html so they win over the inline sheets whatever the load
   order. Delete the <link> to revert the whole pass.

   1  vertical rhythm: one spacing scale for every page
   2  phone hero: headline inside the first screen
   3  Services questions: an accordion, first one open
   4  type floor: no label under 11px, greys lifted to AA
   5  logo wall: stacked marks scaled to the same optical weight
   6  three structure moves: outcome row on one line
   7  testimonial carousel: wider measure, one size down
   ============================================================ */

/* 1  vertical rhythm ---------------------------------------
   Home used --bay: clamp(104px, 17vh, 250px) (153px at 900 tall);
   inner pages used clamp(92px, 9.2vw, 136px) (132px at 1440 wide).
   Both tied to the viewport, both stacking into 250 to 390px of
   empty paper between sections. One scale now, in vw only. */
html:root{
  --bay:   clamp(64px, 6.6vw, 100px);   /* the default section */
  --bay-s: clamp(44px, 4.2vw, 60px);    /* evidence and marquee bands */
  --bay-m: clamp(56px, 6vw, 88px);      /* markets page */
  --bay-l: clamp(84px, 8.4vw, 128px);   /* the two dark argument bands */
}
html .tslide{padding:var(--bay) 0}
html .sysbuild{padding:clamp(56px,6vw,84px) 0 clamp(48px,5vw,72px)}
html .sysbuild + .moves{padding-top:clamp(48px,5vw,76px)}
html .enq{padding:var(--bay-l) 0}
html .enq .q{margin-top:clamp(32px,3.6vw,48px)}
html .phead{padding-top:clamp(80px,7.6vw,116px);padding-bottom:clamp(40px,4.6vw,66px)}
html .footer{padding-top:clamp(32px,4vw,52px)}
html .wk-case, html .wk-out, html .wk-live, html .wk-wall{padding:var(--bay) 0}
html .wk-priv, html .wk-next{padding:var(--bay-l) 0}

/* 2  phone hero ---------------------------------------------
   The portrait was a 4:4.5 box, 440px tall on a 390px phone, so
   the headline began at 670px and the button at about 1,000px.
   Face sits in the top of the frame (center 14%), so a shorter
   crop keeps it. */
@media(max-width:900px){
  html .arrive .pic{aspect-ratio:auto;height:clamp(300px,42svh,400px)}
  html .arrive .txt{padding-top:clamp(28px,4.5vh,40px);padding-bottom:clamp(40px,6vh,64px)}
  html .arrive .who{margin-bottom:clamp(18px,3vh,28px)}
  html .arrive .line{margin-top:clamp(20px,3vh,30px)}
  html .arrive .acts{margin-top:clamp(24px,3.6vh,38px)}
}

/* 3  Services questions accordion ----------------------------
   Nine answers were open at once, 3,186px of page. Each row is
   now a <details>: question and a plus on the left, answer on the
   right when open. Text stays in the DOM for search. */
html .caps details.r{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(20px,4vw,54px);
  align-items:start;padding:clamp(22px,2.4vw,30px) 0;border-bottom:1px solid var(--line);transition:padding-left .3s}
html .caps details.r summary.ct{list-style:none;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.15;cursor:pointer;display:flex;justify-content:space-between;
  align-items:flex-start;gap:20px;margin:0;outline-offset:6px}
html .caps details.r summary.ct::-webkit-details-marker{display:none}
html .caps details.r summary.ct::after{content:"+";flex:none;font-family:var(--sans);font-weight:300;
  font-size:1.5rem;line-height:1;margin-top:.2em;color:var(--muted);transition:transform .35s ease}
html .caps details.r[open] summary.ct::after{transform:rotate(45deg)}
html .caps details.r summary.ct:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
html .caps details.r .cd{margin:0;padding-top:.45em}
html .caps details.r:not([open]) .cd{display:none}
@media(max-width:860px){
  html .caps details.r{grid-template-columns:1fr;gap:12px}
  html .caps details.r .cd{padding-top:0}
}

/* 4  type floor and greys ------------------------------------
   Twenty-five labels on Home were 9 to 9.6px; stone grey at 12px
   measured 2.4:1 on paper. Floor is 11px; stone becomes muted
   where it carries words. */
html .label, html .label.rule, html .head-row .label.rule,
html .mvmenu-group b, html .mvmenu-fine, html footer .fine, html .footer .fine, html .fine span,
html .wk-go, html .ts-count{font-size:.72rem}
html .mv-c b, html .offer-meta dt, html .pg-seq li b, html .pg-kicker, html .pg-label, html .pg-note,
html .mk-city, html .mk-card .i, html .mkmap-head .code, html figcaption span, html .uni-note,
html .wk-ch, html .wk-meta span, html dl dt{font-size:.69rem}
html .mark-desc{font-size:.64rem}
html .band .meta, html .tslide .meta, html .index .meta, html .her .meta, html .ts-count,
html .pg-label, html .pg-note, html .mk-card .i{color:var(--muted)}
html .adv .adv-lede, html .adv p{color:rgba(250,250,249,.76)}

/* 5  logo wall ------------------------------------------------
   The marks are cut to one optical system already; the stacked
   two-line marks still read small beside the wide wordmarks. */
html .band .track img[src*="california-closets"]{height:calc(clamp(44px,4.4vw,60px)*1.34)}
html .band .track img[src*="fish-media-group"]{height:calc(clamp(44px,4.4vw,60px)*1.2)}
html .band .track img[src*="elekta"]{height:calc(clamp(44px,4.4vw,60px)*1.1)}
html .band .track img[src*="oracle"],
html .band .track img[src*="globe-and-mail"]{height:calc(clamp(44px,4.4vw,60px)*.9)}

/* 6  three structure moves ------------------------------------
   Each card has seven parts. Rows are shared across the three
   cards, so the outcome line and its rule sit level. */
@supports(grid-template-rows:subgrid){
  @media(min-width:961px){
    html .mv-grid{grid-template-rows:auto auto auto auto auto auto auto}
    html .mv{display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:12px;align-content:start}
    html .mv .mv-o{align-self:start}
    html .mv .mv-go{align-self:end}
  }
}

/* 7  testimonial carousel -------------------------------------
   The longest quote ran ten lines at 47px in a 25ch column. */
html .ts-q p{max-width:36ch;font-size:clamp(1.5rem,2.75vw,2.35rem);line-height:1.3}