/* ============================================================
   12 · What We Do teaser. Mirrors the Who We Are teaser (14): the
   same --fu frame unit, copy block, headline and chip, on the moss
   and without the portraits. Fluid-unit layout, no motion.
   Built 2 Sep 2026 (Julian) when the Offer moved to its own page.
   DEV 07 (Fred, 9 Sep 2026): Maddie's curtain replaces the three
   paper cuttings — a woman peels back a moss curtain and the paper
   shows through the gap. Comp: 03. Design Assets/Website Sections/
   Landing Page/09_What We Do Teaser/wwd-teaser-curtain-comp.png
   (1434 × 872). The PNG's moss and paper are the tokens' exact
   values (#4A6042 / #FFFCF1), so the curtain disappears into the
   ground and only the gap and the figure read; its corners are
   transparent. Shipped at half the Figma export (2322 × 2577 —
   2× up to a 1160px draw); the full export is in the design folder.
   ============================================================ */

#wwd-teaser{--chapter-bg:var(--moss);color:var(--cream);
  /* --fu as the Who We Are teaser: 1vw down to a 16:10 window, then
     height-capped so the block sits above the fold on laptops */
  --fu:min(1vw, 1.51svh);
  /* --cu is the curtain unit: the width of the paper gap at the fold,
     measured off the comp — 373 of 1434 wide (26vw) and of 872 tall
     (42.8svh). The min keeps the comp's proportion against whichever
     edge is tighter, so the gap crowds neither the headline on tall
     windows nor the fold on wide ones; the clamp is --u's spread */
  --cu:clamp(220px, min(26vw, 42.8svh), 620px);
  isolation:isolate;
  /* padding and the copy block's geometry are the Who We Are teaser's,
     value for value: headline at the same top, chip anchored to the
     chapter's foot at the same 11.03 units, so the two mirror whatever
     their line counts (Julian, 2 Sep 2026) */
  padding:clamp(48px,calc(10.42*var(--fu)),170px) clamp(24px,calc(6.946*var(--fu)),110px)
          clamp(24px,calc(3*var(--fu)),56px)}

/* wider than the Who We Are teaser's 52.57 units — no portraits to
   clear — so the drawn three-line break holds: at 1440 the column is
   897px, "We build agency" runs 855 in Aqva / 774 in Archivo Black, and
   "in your organization." (1111 / 978) breaks in both (measured in-DOM,
   2 Sep 2026) */
#wwd-teaser .copy{position:absolute;z-index:2;
  top:clamp(48px,calc(10.42*var(--fu)),170px);left:clamp(24px,calc(6.946*var(--fu)),110px);bottom:0;
  width:clamp(280px, calc(66*var(--fu)), 1188px)}
#wwd-teaser .copy h2{font-family:var(--display);font-weight:900;
  font-size:clamp(44px,calc(8.333*var(--fu)),150px);line-height:.9167em;
  letter-spacing:-.015em;color:var(--cream)}
#wwd-teaser .copy h2 .name{color:inherit}   /* cream, with the line — the brand book's pairing on moss (acid from 4 Sep, coral before; 10 Sep 2026) */

/* the chip, as the Who We Are teaser's: paper on the ground, ink type,
   mono uppercase label */
#wwd-teaser .copy .btn{display:inline-flex;align-items:center;gap:.55em;position:absolute;
  bottom:clamp(32px,calc(11.03*var(--fu)),180px);
  left:clamp(2px,calc(0.797*var(--fu)),12px);cursor:pointer;
  font-family:var(--mono);font-size:clamp(12px,1vw,14px);
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  background:var(--cream);color:var(--ink);border:0;
  padding:clamp(13px,1.2vw,17px) clamp(18px,1.7vw,24px);
  border-radius:clamp(11px,1.05vw,17px);line-height:1}
/* DEV 02 (Fred, 9 Sep 2026): the chip read as a label, not a control. So:
   a slim arrow after the label, a hover fill, and one size up (type 13→14,
   box 43→48 tall at 1440; the contact Send keeps the old size). The fill
   CUTS paper → acid on hover / press / keyboard focus and cuts back when
   the pointer leaves — no transition (§4.2); the arrow is currentColor
   and never moves (§4.7). Hover is scoped to pointers that can hover, so
   a phone tap leaves no stuck lit state; :active carries the press. */
#wwd-teaser .copy .btn .arrow{flex:none;width:1.05em;height:.8em;overflow:visible}
#wwd-teaser .copy .btn .arrow path{fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){#wwd-teaser .copy .btn:hover{background:var(--acid)}}
#wwd-teaser .copy .btn:active,#wwd-teaser .copy .btn:focus-visible{background:var(--acid)}
/* the focus ring is acid, not base.css's coral: coral sits at 2.4:1 on
   the moss, acid at 6.2:1 — the contact Send made the same call */
#wwd-teaser .copy .btn:focus-visible{outline:2px solid var(--acid);outline-offset:3px}

/* the curtain: one PNG, bottom-anchored so the gap's base sits on the
   fold and the figure's feet are cut by it, as drawn; right-anchored in
   cu-multiples measured off the comp (the fluid strategy crops rather
   than shrinks). Geometry from the export (4645 × 5155): the gap's base
   runs x437–2321, 1884px = 1cu, so the image is 2.4655cu wide and its
   right edge runs 0.6062cu past the frame; the apex then lands at 0.73
   of the frame's width and 0.31 of its height, as in the comp. The moss
   above the fold overflows the chapter's top and is clipped by it. */
#wwd-teaser .curtain{position:absolute;z-index:1;bottom:0;
  right:calc(var(--cu) * -0.6062);width:calc(var(--cu) * 2.4655);height:auto;
  max-width:none;   /* base.css caps img at 100%: the curtain runs wider than the frame on phones */
  pointer-events:none}

#wwd-teaser .space{height:0}

/* 860, not the site's 760 (§3): the desktop comp is a landscape picture
   — copy left, cluster right — and it runs the headline into the
   cuttings on anything narrower than ~1200 (already so at 1024×768).
   The stacked layout covers portrait tablets until the comp is retuned
   in the §12 #17 design review of its twin; that retune retires this exception
   (Julian, 6 Sep 2026). */
@media(max-width:860px),(pointer:fine) and (max-height:560px){
  /* two halves (Julian, 6 Sep 2026): the copy centred in the top half
     (under the nav band), the curtain filling the bottom half. The gap
     runs 1.608cu tall, so 50lvh / 1.608 = 31.1lvh puts its apex on the
     halves' seam, just under the chip, and the feet on the fold; the
     image runs ~165vw wide and crops at the sides (Fred, 9 Sep 2026 —
     was 27.4lvh, and base.css's img cap squeezed it to 100vw besides,
     leaving a hole between the chip and the apex). */
  #wwd-teaser{--cu:31.1lvh;
    display:grid;grid-template-rows:50lvh 50lvh;grid-template-columns:100%;height:100lvh;padding:0}
  #wwd-teaser .copy{position:relative;grid-area:1/1;align-self:center;top:auto;left:auto;bottom:auto;
    width:min(88vw,520px);margin:0 clamp(20px,6vw,40px);padding-top:72px}   /* the band's height: centred in what is under it */
  #wwd-teaser .space{grid-area:2/1;height:auto}
  /* centred on the gap, whose centre sits at 0.2969 of the image's width */
  #wwd-teaser .curtain{right:auto;left:50%;transform:translateX(-29.69%)}
  #wwd-teaser .copy h2{font-size:clamp(36px,11.6vw,76px)}
  #wwd-teaser .copy .btn{position:static;margin-top:clamp(24px,7vw,44px);margin-left:0;
    min-height:44px;padding-left:24px;padding-right:24px}   /* the §8 tap floor */
}

/* a \n in a copy string forces a line break here (Julian, 5 Sep 2026 — copy.js, LINE BREAKS) */
#wwd-teaser .copy h2{white-space:pre-line}

/* ZOOMED (WCAG 1.4.4 — the zoom pass, Julian, 25 Sep 2026): on a computer
   at a narrow or short window — where 200% browser zoom lands — this
   section is in its stacked, still layout, and its type is set at the
   size the board draws it, in rem, so zoom enlarges it (the phone sizes
   above are fitted to the screen and would cancel the zoom). !important
   beats the sizes the js writes inline; utils.js zoomFit() then eases
   back any line whose longest word would run past the edge. */
@media(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){
  #wwd-teaser .copy h2{font-size:7rem!important;line-height:.95!important}
  #wwd-teaser .copy h2 .name{font-size:1em!important}   /* follows its line, so easing the line back eases the word too */
  #wwd-teaser .btn .label{font-size:.875rem!important;line-height:1.2!important}
  /* the copy row sizes to the enlarged headline; the curtain keeps a
     half-screen row (at least 320px) of its own beneath */
  #wwd-teaser{--row:max(50lvh,320px);--cu:calc(var(--row) / 1.608);
    height:auto!important;grid-template-rows:auto var(--row)!important}
  #wwd-teaser .copy{align-self:start;width:auto!important;max-width:none;margin:0 var(--m)!important;
    padding:max(96px,11svh) 0 32px!important}
}