:root{--ix-canvas:#211e1c;--ix-cream:#f4eee6;--ix-ink-soft:#c5bbb2;--ix-accent:#dcae90;--ix-accent-hover:#efc5a7;--ix-muted:#a8988b;--ix-field-border:#7a6b60;--ix-font-display:'NC Oswald',Arial,sans-serif;--ix-font-text:Arial,Helvetica,sans-serif;--ix-gutter:64px;--ix-gap:clamp(32px,5vw,96px);--ix-section-pad:clamp(72px,9vw,128px);--ix-nav-h:88px;--ix-display:clamp(52px,6.6vw,96px);--ix-h3:clamp(26px,2.4vw,34px);--ix-lead:clamp(20px,1.6vw,24px);--ix-body:17px;--ix-label:11px;--ix-collab-line-h:114px}
@media(min-width:1101px){:root{--ix-body:18px}}
@media(max-width:1100px){:root{--ix-gutter:32px;--ix-collab-line-h:90px}}
@media(max-width:900px){:root{--ix-collab-line-h:0px}}
@media(max-width:760px){:root{--ix-gutter:24px;--ix-nav-h:64px}}
html{scroll-padding-top:24px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(.ix-nav,.ix-chapter,.ix-footer) img{display:block;max-width:100%;height:auto}
:where(.ix-nav,.ix-chapter,.ix-footer) a{color:inherit}
:where(.ix-nav,.ix-chapter,.ix-footer) :where(p,h1,h2,h3,figure,ul){margin:0}
:where(.ix-form) :is(button,input,select){font:inherit;color:inherit}
.ix-wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--ix-gutter)}
.ix-skip{position:absolute;top:8px;left:8px;transform:translateY(-200%);background:#f4eee6;color:#211e1c;padding:14px;z-index:100}
.ix-skip:focus{transform:none}

/* Chapter shell and tone tokens. Every chapter is a size container so "vw" in
   the v4 art brief can be read as cqw of a full-width chapter (BUILD-BRIEF-v4-ART
   section 4). Sections that break out of .ix-wrap (hero, family, chains) use
   that container directly; mission scopes its own container to .ix-wrap
   instead, since its fit formula targets the wrap, not the viewport. */
.ix-chapter{padding-block:var(--ix-section-pad);container-type:inline-size}
.ix-dark{background:var(--ix-canvas);--ix-fg:#f4eee6;--ix-fg-soft:#c5bbb2;--ix-accent-text:#dcae90;--ix-focus:#dcae90;--ix-display-lh:1.07;--ix-body-lh:1.65;color:var(--ix-fg)}
.ix-light{background:#eae2d7;--ix-fg:#211e1c;--ix-fg-soft:#66584c;--ix-accent-text:#805434;--ix-focus:#805434;--ix-display-lh:1.02;--ix-body-lh:1.6;color:var(--ix-fg)}
.ix-collab.ix-light,.ix-mission.ix-light{background:#f4eee6}

/* Type tokens, applied identically in every chapter */
.ix-display{font:600 var(--ix-display)/var(--ix-display-lh,1.02) var(--ix-font-display);letter-spacing:-.03em;text-transform:uppercase;margin:0 0 28px;text-wrap:balance;color:var(--ix-fg)}
.ix-lead{font-size:var(--ix-lead)!important;line-height:1.4!important;letter-spacing:-.02em;color:var(--ix-fg);margin:0 0 20px}
.ix-kicker{font:700 var(--ix-label)/1.5 Arial,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:var(--ix-accent-text);margin:0 0 20px}
.ix-chapter p:not(.ix-kicker):not(.ix-lead):not(.ix-hero-statement):not(.ix-hero-stage-line):not(.ix-footer-tagline):not(.ix-family-caption):not(.ix-campaign-caption):not(.ix-footer-left){font-size:var(--ix-body);line-height:var(--ix-body-lh,1.6);color:var(--ix-fg-soft);margin:0 0 20px;max-width:52ch}
.ix-text-link{color:inherit;font:600 14px Arial,sans-serif;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-bottom:6px;border-bottom:1px solid currentColor;transition:color .2s}
@media(hover:hover){.ix-text-link:hover{color:var(--ix-accent-text,#dcae90)}}

/* Buttons: shape lock, 6px radius, 56px tall, no pills */
.ix-btn{display:inline-flex;align-items:center;justify-content:center;height:56px;min-width:44px;padding-inline:28px;border-radius:6px;font:600 15px/1 Arial,sans-serif;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.ix-btn-fill{background:var(--ix-accent);color:#211e1c;border:1px solid var(--ix-accent)}
@media(hover:hover){.ix-btn-fill:hover{background:var(--ix-accent-hover);border-color:var(--ix-accent-hover)}}
.ix-btn-outline{background:transparent;color:#f4eee6;border:1px solid var(--ix-field-border)}
@media(hover:hover){.ix-btn-outline:hover{border-color:var(--ix-accent);color:var(--ix-accent)}}
.ix-btn:active{transform:translateY(1px)}
:where(.ix-wrap,.ix-form) :is(a,button,input,select).ix-btn:focus-visible,.ix-wrap :is(a,button,input,select):focus-visible{outline:2px solid var(--ix-accent,#dcae90);outline-offset:4px}
.ix-light :is(a,button,input,select):focus-visible{outline-color:#805434}
.ix-submit:disabled{opacity:.65;cursor:not-allowed}

/* Nav: template chrome, carries no art, stays one line under 88px, not sticky */
.ix-nav{display:flex;align-items:center;justify-content:space-between;gap:32px;height:var(--ix-nav-h)}
.ix-brand{display:flex;align-items:center;gap:14px;color:#f4eee6;font-size:15px;letter-spacing:.08em;font-weight:700;text-decoration:none}
.ix-brand span{white-space:nowrap}
.ix-brand small{display:block;font-size:10px;margin-top:8px;letter-spacing:.18em;color:#c5bbb2}
.ix-nav-links{display:flex;align-items:center;gap:32px}
.ix-nav-links>a:not(.ix-nav-action){color:#d6ccc2;font-size:13px;min-height:44px;display:flex;align-items:center;text-decoration:none}
@media(hover:hover){.ix-nav-links>a:not(.ix-nav-action):hover{color:#dcae90}}
.ix-nav-action{height:44px;padding-inline:22px;white-space:nowrap}
@media(max-width:760px){
.ix-nav{gap:12px}
.ix-brand{font-size:13px;gap:10px}
.ix-brand span{white-space:nowrap}
.ix-nav-action{padding-inline:16px}
.ix-nav-links{gap:0}
.ix-nav-links>a:not(.ix-nav-action,.ix-brand){display:none}
}

/* ============================================================
   HERO: the stage IS the first screen. Full bleed, no ring, no
   box, no radius. Mark monumental upper left, statement + CTA
   bottom left, right side left for the film (documented, not built).
   ============================================================ */
.ix-hero.ix-chapter{padding-block:0}
.ix-hero-stage{position:relative;width:100%;height:calc(100vh - var(--ix-nav-h));height:calc(100svh - var(--ix-nav-h));min-height:480px;overflow:hidden;border-radius:0;box-shadow:none;background:radial-gradient(ellipse 110% 85% at 34% 42%,#2b2724 0%,#211e1c 58%,#1a1816 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:64px var(--ix-gutter) 64px}
/* F3 fix (v4 fix round): a real, full-bleed photo instead of the empty
   charcoal field. object-position keeps Harry's face and the cows upper
   right, clear of the mark (top left) and the statement/CTA (bottom left),
   so words never sit over a face. A dark scrim keeps the statement and CTA
   readable over the photo, same treatment the Addendum A hero spec already
   asked for once footage landed; it now also carries the still. */
.ix-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 12%;z-index:0}
.ix-hero-stage::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top right,rgba(33,30,28,.86) 0%,rgba(33,30,28,.5) 32%,rgba(33,30,28,.08) 58%,rgba(33,30,28,.35) 100%)}
.ix-hero-mark{position:absolute;top:64px;left:var(--ix-gutter);height:296px;width:auto;max-width:56%;z-index:2}
.ix-hero-stage-line{position:absolute;top:64px;right:var(--ix-gutter);margin:0;font:700 11px/1.5 Arial,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#f4eee6;opacity:.6;z-index:2;display:none}
.ix-hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:min(90%,820px)}
.ix-hero-statement{font:600 124px/.94 'NC Oswald',Arial,sans-serif;letter-spacing:-.03em;text-transform:uppercase;color:#f4eee6;margin:0}
.ix-hero-statement span{color:#a8988b}
@media(max-width:1100px){
.ix-hero-stage{padding-top:48px;padding-bottom:48px}
.ix-hero-mark{top:48px;height:332px}
.ix-hero-stage-line{top:48px}
.ix-hero-statement{font-size:96px}
/* Below 1100 the stage's own aspect flips portrait (height > width once the
   nav and mark grow relative to a narrower viewport), so a square cover
   photo can no longer be cropped vertically at all: the full image height
   shows no matter what object-position is picked, putting the dog's head
   in the same band as the mark. Rather than risk a mark-over-face
   collision at any of 1100/900/768/375, the photo is desktop-only above
   this breakpoint; narrower widths keep the dark ground plus mark and
   statement, which was already the shipped v3 treatment there. */
.ix-hero-photo{display:none}
}
@media(max-width:900px){.ix-hero-mark{height:408px}}
@media(max-width:760px){
.ix-hero-stage{padding-top:32px;padding-bottom:32px;min-height:420px}
.ix-hero-mark{height:328px;top:32px}
.ix-hero-stage-line{top:32px;display:none}
.ix-hero-statement{font-size:50px}
.ix-hero-copy{max-width:100%}
}
@media(max-width:480px){.ix-hero-cta{width:100%}}

/* ============================================================
   COLLABORATION: type staircase on light cream. Line 1 flush left,
   line 2 flush right, lead+link bottom-left in line 2's row. Kinetic
   word arrival stays (device 1 of 2); the kicker/lead/link fade cues
   are removed, they only faded, nothing left to hold once static.
   ============================================================ */
.ix-collab{background:#f4eee6}
.ix-collab-stair{max-width:none;padding-block:120px}
.ix-collab-headwrap{position:relative}
.ix-collab-head{margin:0;font-size:128px}
.ix-collab-line1{display:block;text-align:left}
.ix-collab-line2{display:block;text-align:right}
/* F1 fix (v4 fix round): the foot used to sit position:absolute, bottom:0
   of the headwrap, which put it directly on top of line2's own box (the
   kinetic split never changes the box, only reveals words inside it, so
   this was a static layout bug, not a motion one). It now sits in normal
   flow below the headwrap, so it can never be under the headline at any
   scroll progress, at any width. Reserves real block height instead of
   overlapping it. */
.ix-collab-foot{position:static;max-width:45%;margin-top:48px}
.ix-collab-foot .ix-lead{margin:0 0 16px}
.ix-collab-foot .ix-text-link{margin:0}
@media(max-width:1100px){.ix-collab-stair{padding-block:96px}.ix-collab-head{font-size:100px}}
@media(max-width:900px){
.ix-collab-stair{padding-block:96px}
.ix-collab-head{font-size:96px}
.ix-collab-foot{max-width:none;margin-top:32px}
}
@media(max-width:760px){
.ix-collab-stair{padding-block:72px}
/* 60px per the brief's own 375 table would set "THE INCREDIBULLZ" past the
   viewport edge once the kinetic word-split engine locks each line to a
   single non-wrapping unit at mount (measured: 416px of text in a 327px
   gutter-to-gutter space). 44px is the largest size that keeps both lines
   inside the gutter without fighting the engine's own line splitting. */
.ix-collab-head{font-size:44px}
}

/* ============================================================
   FAMILY: the held peak (pin kept, device 2 of 2). Full-bleed photo
   left/top/bottom, headline crosses the photo's right edge and its
   ink swaps from charcoal to cream as the photo grows underneath it.
   ============================================================ */
.ix-family[data-sc-act]{min-height:0;padding-block:0}
.ix-family-stage{container-type:inline-size;position:relative}
.ix-family-caption{font:700 11px/1.5 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ix-fg-soft);margin-top:16px;display:block}
:root{--ix-family-overlap:84px}
@media(max-width:1100px){:root{--ix-family-overlap:64px}}
@media(min-width:901px){
.ix-family-stage{display:grid;grid-template-columns:58cqw 1fr;grid-template-rows:auto 1fr;grid-template-areas:"photo headwrap" "photo copy";height:100%}
/* The photo's own box (not just its image content) widens from 82 to 100
   percent of its 58cqw track as --sc-p runs 0 to 1 (transform-origin 0 0
   keeps top/left bled); the track itself stays fixed so cream shows through
   the gap at p=0. The image inside is pinned at the FULL 58cqw width and
   just gets progressively revealed, so object-position math for face zones
   can assume a constant 58cqw image box. */
.ix-family-photo{grid-area:photo;justify-self:start;position:relative;overflow:hidden;height:100%;margin:0;width:calc(58cqw * (0.82 + (0.18 * clamp(0,var(--sc-p,1),1))))}
.ix-family-photo img{position:absolute;inset:0 auto auto 0;width:58cqw;max-width:none;height:100%;object-fit:cover;object-position:20% 50%}
.ix-family-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to left,rgba(33,30,28,.65) 0%,rgba(33,30,28,0) 30%);-webkit-mask-image:linear-gradient(to bottom,#000 0 45%,transparent 58%);mask-image:linear-gradient(to bottom,#000 0 45%,transparent 58%)}
.ix-family-headwrap{grid-area:headwrap;align-self:start;min-width:0;padding:12svh var(--ix-gutter) 0 48px}
/* Fitted, not fixed: "to someone." (the widest of the 3 lines, 4.941em at
   100px per evidence/v4-spec/type-widths.json) must fit the actual column
   width (42cqw minus the headwrap's own paddings, plus the fixed overlap
   that extends the box leftward), the same way the mission line is fitted
   to its wrap. A flat 124px overflowed that column and force-wrapped the
   line internally, doubling its box height (measured, fixed here). */
.ix-family-head{position:relative;margin:0 0 0 calc(-1 * var(--ix-family-overlap));font:600 min(124px,calc((42cqw - var(--ix-gutter) - 48px + var(--ix-family-overlap)) / 4.941))/.92 'NC Oswald',Arial,sans-serif;letter-spacing:-.03em;text-transform:uppercase}
.ix-family-copy{grid-area:copy;align-self:start;min-width:0;padding:24px var(--ix-gutter) 40px 48px}
.ix-family-copy p{max-width:36ch}
}
.ix-family-line-row{position:relative;display:block}
/* NC Oswald's own internal font metrics are taller than the .92 line-height
   used here; a plain inline span sizes to those raw glyph metrics and can
   bleed into the next line's box. inline-block forces it to respect the
   line-height like ink-B (which is already block-ified by position:absolute),
   so both inks agree on the line's real height. */
.ix-ink-a{display:inline-block;color:#211e1c}
.ix-family-line-deep.ix-ink-a{color:#805434}
/* ink-B sits at the same (overlapping) left edge as ink-A. Its own box is
   auto-width (shrink to the text), so "100%" in the clip-path below is that
   text's own width; --edge is computed in absolute px (via cqw) as how much
   of the headwrap's overlap the growing photo box has reached, which is
   exactly the visible width of ink-B, so it stays a valid fraction of 100%. */
.ix-ink-b{position:absolute;inset:0 auto auto 0;color:#f4eee6;pointer-events:none;--p:clamp(0,var(--sc-p,1),1);--edge:max(0px,calc(58cqw * (0.18 * var(--p) - 0.18) + var(--ix-family-overlap) - 48px));clip-path:inset(0 calc(100% - var(--edge)) 0 0)}
.ix-family-line-deep.ix-ink-b{color:#dcae90}
@media(max-width:900px){
.ix-family-stage{display:flex;flex-direction:column;height:auto!important;min-height:0!important}
.ix-family-photo{order:2;margin:0;height:clamp(220px,46svh,420px);overflow:hidden}
.ix-family-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 43%;transform-origin:50% 0;transform:scale(calc(0.82 + (0.18 * var(--sc-p,1))))}
.ix-family-headwrap{order:1;padding:32px var(--ix-gutter) 0}
.ix-family-head{font:600 64px/.92 'NC Oswald',Arial,sans-serif;letter-spacing:-.03em;text-transform:uppercase;margin:0}
.ix-family-copy{order:3;padding:20px var(--ix-gutter) 32px}
.ix-family-copy p{max-width:none}
.ix-ink-b{display:none}
}
@media(max-width:900px) and (min-width:761px){.ix-family-head{font-size:104px}.ix-family-photo{height:clamp(260px,60svh,520px)}}
@media(prefers-reduced-motion:reduce){
.ix-family[data-sc-act]{height:auto!important}
.ix-family[data-sc-act] .sc-stage{position:static!important;top:auto!important}
.ix-family-photo img{transform:none!important}
.ix-family-line-deep{color:var(--ix-accent-text)}
.ix-family-line{opacity:1!important;transform:none!important}
.ix-ink-b{--p:1}
}

/* ============================================================
   PROGRAM: portrait wall. Harry stands tall in the left column with
   the "GRCH DIRTY HARRY" ghost type bleeding off the left edge behind
   him; Houdini and Thing cascade diagonally in the right column with
   their own ghost names. Nothing moves here (parallax/stagger removed).
   ============================================================ */
/* F2/F3/F5 fix (v4 fix round): the ix-wrap gutter is dropped from the whole
   grid (was ".ix-wrap ix-program-grid" in the HTML, now just
   "ix-program-grid") so Harry can bleed to the true page edge and read as
   the one dominant, full-bleed element the art brief asked for, matching
   the family/chains pattern. Gutter padding moves onto the pieces that are
   actually text (intro, foot, every figcaption) so those still read with a
   margin; the photos themselves (Harry, Houdini, Thing) stay edge-clean.
   This also fixes F5 (program photos were inset 24px at 375, only family
   was edge to edge; now Harry and the cascade pair are flush at every
   width). The ghost name labels (GRCH/DIRTY/HARRY, HOUDINI, THING) are
   removed outright per F2: they collided and clipped at every width tried
   and were not worth re-anchoring a third time. */
.ix-program-grid{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:var(--ix-gap);align-items:center}
.ix-program-portrait{position:relative;min-width:0}
.ix-dog-harry{position:relative;z-index:1;margin:0;display:flex;flex-direction:column}
.ix-dog-harry .ix-photo{aspect-ratio:.82;overflow:hidden}
.ix-dog-harry .ix-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.ix-dog-harry figcaption{order:-1;position:relative;z-index:1;padding-top:0;margin-bottom:16px;font:600 22px/1.2 'NC Oswald',Arial,sans-serif;text-transform:uppercase}
.ix-dog-harry figcaption small{display:block;font:11px/1.5 Arial,sans-serif;letter-spacing:.12em;margin-top:6px;color:var(--ix-fg-soft)}
.ix-program-right{min-width:0}
.ix-program-intro{margin-bottom:64px;padding-inline:var(--ix-gutter)}
.ix-program-intro .ix-display{max-width:none;font-size:88px}
.ix-program-copy p{max-width:52ch}
@media(max-width:1100px){.ix-program-intro .ix-display{font-size:70px}}
@media(max-width:900px){.ix-program-intro .ix-display{font-size:92px}}
@media(max-width:760px){.ix-program-intro .ix-display{font-size:56px}}
.ix-program-cascade{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--ix-gap);align-items:start;margin-bottom:56px;padding-inline:var(--ix-gutter)}
.ix-dog-houdini{grid-column:1;grid-row:1;margin:0;position:relative;z-index:1}
.ix-dog-thing{grid-column:2;grid-row:1;margin:0;margin-top:74%;position:relative;z-index:1}
.ix-dog-houdini .ix-photo,.ix-dog-thing .ix-photo{aspect-ratio:1;overflow:hidden}
.ix-dog-houdini .ix-photo img,.ix-dog-thing .ix-photo img{width:100%;height:100%;object-fit:cover}
.ix-dog figcaption{padding-top:16px;font:600 20px/1.2 'NC Oswald',Arial,sans-serif;text-transform:uppercase}
.ix-dog figcaption small{display:block;font:11px/1.5 Arial,sans-serif;letter-spacing:.12em;margin-top:6px;color:var(--ix-fg-soft)}
.ix-program-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-inline:var(--ix-gutter)}
.ix-program-foot p{font-size:16px;margin:0;max-width:34ch}
.ix-bullymax{display:flex;align-items:center;gap:16px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ix-bullymax img{width:56px;height:56px}
@media(max-width:900px){
.ix-program-grid{grid-template-columns:1fr;gap:0}
.ix-program-portrait{margin-bottom:48px}
.ix-dog-harry .ix-photo{aspect-ratio:1}
.ix-program-intro{margin-bottom:36px}
}
@media(max-width:760px){
.ix-program-cascade{column-gap:12px}
.ix-dog-thing{margin-top:0}
.ix-dog-houdini figcaption,.ix-dog-thing figcaption{font-size:16px}
.ix-program-foot{flex-direction:column;align-items:flex-start;gap:20px}
}

/* ============================================================
   MISSION: type is the picture. One drenched line at 761px and up,
   fitted to the wrap by a container-query formula; two lines on
   phones. The v3 wipe and the aside rise are removed, nothing moves.
   ============================================================ */
.ix-mission .ix-wrap{container-type:inline-size}
.ix-mission-line{font:600 calc(100cqi / 8.2)/.86 'NC Oswald',Arial,sans-serif;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;margin:0 0 32px;color:var(--ix-fg)}
.ix-mission-dot{color:#805434}
.ix-mission-brk{display:none}
.ix-mission-below{display:grid;grid-template-columns:30fr 70fr;gap:var(--ix-gap)}
.ix-mission-below .ix-lead{grid-column:1;max-width:28ch}
.ix-mission-aside{grid-column:2;display:grid;grid-template-columns:56px 1fr;gap:32px;align-items:start}
.ix-mission-copy{min-width:0}
.ix-mission-copy p{max-width:56ch}
.ix-mission-copy h3{font:600 var(--ix-h3)/1.2 'NC Oswald',Arial,sans-serif;text-transform:uppercase;margin:0 0 20px;color:var(--ix-fg)}
.ix-rescue-logo{width:56px;height:auto}
@media(max-width:1100px){.ix-mission-below{grid-template-columns:22fr 78fr}}
@media(max-width:900px){
.ix-mission-below{grid-template-columns:1fr;gap:32px}
.ix-mission-below .ix-lead{max-width:none}
.ix-mission-aside{grid-template-columns:48px 1fr}
}
/* The single-line drench formula holds all the way down to 761px (BUILD-BRIEF-v4-ART
   section 9: "white-space nowrap ... at 761 and up"); only true phone widths
   switch to the two-line phone formula, so this is its own 760 breakpoint,
   not the 900 one the aside stacking uses. */
@media(max-width:760px){
.ix-mission-line{font-size:calc(100cqi / 4.85);white-space:normal}
.ix-mission-brk{display:block}
}

/* ============================================================
   BIG DOG CHAINS: the poster bleeds to the left viewport edge and now
   also top-to-bottom of the section (F3 fix, v4 fix round: it used to
   float in the chapter's own block padding, a standard 50/50 split with
   air on all four sides). The tower headline overlaps the poster's own
   right edge by a small, deliberate amount so type reads as crossing the
   art, not sitting politely beside it. No motion here, the campaign art
   holds still.
   ============================================================ */
.ix-chains.ix-chapter{padding-block:0}
.ix-chains-row{display:flex;align-items:flex-start;gap:var(--ix-gap);flex-wrap:wrap}
.ix-campaign{flex:0 0 auto;width:min(36cqw,520px);margin:0}
.ix-campaign img{width:100%;height:auto;display:block}
.ix-campaign figcaption{font-size:13px;line-height:1.5;color:var(--ix-fg-soft);margin-top:16px;max-width:40ch;padding-left:var(--ix-gutter)}
.ix-chain-copy{flex:1 1 420px;min-width:280px;box-sizing:border-box;padding-block:var(--ix-section-pad);padding-right:var(--ix-gutter);padding-left:var(--ix-gap);container-type:inline-size;display:flex;flex-direction:column;justify-content:center}
.ix-chain-logo{width:88px;height:auto;margin-bottom:24px}
/* Fitted, not fixed: "purpose." (the widest of the tower's 4 words, 3.776em
   at 100px per type-widths.json) sized against the copy column's OWN
   container width, which is whatever the poster/gap flex math leaves it at
   each breakpoint. A flat per-breakpoint guess overflowed the column by
   40px at 768 (measured); this guarantees it never can. */
.ix-chains-tower{font:600 min(128px,calc(100cqi / 3.776))/.88 'NC Oswald',Arial,sans-serif;letter-spacing:-.03em;text-transform:uppercase;margin:0 0 28px;color:var(--ix-fg);position:relative}
.ix-chain-copy p:not(.ix-lead):not(.ix-kicker){max-width:38ch}
@media(min-width:901px){
/* The crossing: the tower's default left edge sits one row-gap plus one
   copy-padding to the right of the poster (2 * var(--ix-gap)); pulling it
   back by that plus 24px more laps its own left edge 24px onto the
   poster's right margin, so type visibly crosses the art instead of
   sitting politely beside it. Only the headline crosses, the kicker above
   it and the lead/paragraph/link below stay inside the copy column, so
   nothing legible lands on top of the poster's own dense artwork. */
.ix-chains-tower{margin-left:calc(-2 * var(--ix-gap) - 24px)}
}
@media(max-width:760px){
.ix-chains-row{flex-direction:column;gap:32px;padding-top:32px}
.ix-chains.ix-chapter{padding-block:var(--ix-section-pad)}
.ix-campaign{order:2;width:100%}
.ix-campaign figcaption{padding-left:var(--ix-gutter);padding-right:var(--ix-gutter)}
.ix-chain-copy{order:1;padding-block:0;padding-left:var(--ix-gutter);padding-right:var(--ix-gutter)}
}

/* ============================================================
   CONTACT: a monumental three-line ask on the left, a quiet single
   column form on the right, top aligned to the headline's cap.
   ============================================================ */
.ix-contact-grid{display:grid;grid-template-columns:1fr;gap:48px}
.ix-contact-intro p{max-width:52ch}
.ix-contact-head{font-size:128px;margin:0 0 28px}
.ix-field-grid{display:grid;grid-template-columns:1fr;gap:0 var(--ix-gap);margin-bottom:32px}
.ix-field{margin-bottom:24px}
.ix-field label,.ix-field-label{display:block;font-size:13px;font-weight:600;margin:0 0 10px;color:var(--ix-fg-soft)}
.ix-field input,.ix-field select{width:100%;box-sizing:border-box;background:#2b2725;border:1px solid var(--ix-field-border);border-radius:6px;color:#f4eee6;font:16px/1.4 Arial,sans-serif;min-height:54px;padding:14px 16px}
.ix-field input::placeholder{color:#b7a99c}
.ix-flavor-summary{margin:0;font-size:13px;line-height:1.5;color:var(--ix-fg-soft);min-height:20px}
.ix-submit{width:100%;max-width:320px}
.ix-form-note{font-size:13px;line-height:1.6;color:var(--ix-fg-soft);margin:16px 0 0;max-width:52ch}
.ix-form-status{font-size:16px;line-height:1.6;margin-top:20px;color:#f4eee6}
@media(min-width:901px){.ix-contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,553px);gap:var(--ix-gap);align-items:start}}
@media(max-width:1100px){.ix-contact-head{font-size:111px}}
@media(min-width:761px) and (max-width:900px){.ix-field-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.ix-contact-head{font-size:66px}.ix-field-grid{grid-template-columns:1fr}}

/* ============================================================
   FOOTER: full-height soft landing. Tagline lockup on top, the mark
   returns beside it (the through-line anchor closes the loop), three
   zones pinned to the bottom row.
   ============================================================ */
.ix-footer{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;border-top:1px solid #3a342f;padding-block:120px 48px}
.ix-footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.ix-footer-tagline{font:600 128px/.92 'NC Oswald',Arial,sans-serif;text-transform:uppercase;margin:0;max-width:none}
.ix-footer-brk{display:none}
.ix-footer-accent{color:var(--ix-accent)}
.ix-footer-mark{width:148px;height:auto;flex:none}
/* F4 fix (v4 fix round): every item in this row is now single-line and
   the row itself is align-items:center, so the tagline-left text, the nav
   links and the preview-note/back-to-top pair all share one visual
   baseline off the same 64px gutter, instead of ix-footer-right's own
   two-line stack (a paragraph over a 44px-tall tap-target link) reading
   as two extra baselines above and below the row's real center. */
.ix-footer-bottom-row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:32px;margin-top:auto}
.ix-footer-nav{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.ix-footer-nav a,.ix-footer-left,.ix-footer-right p{color:#d6ccc2;font-size:13px}
.ix-footer-left{margin:0}
.ix-footer-nav a{min-height:44px;display:flex;align-items:center;text-decoration:none}
@media(hover:hover){.ix-footer-nav a:hover{color:#dcae90}}
.ix-footer-right{display:flex;flex-direction:row;align-items:center;gap:20px}
.ix-footer-right p{margin:0!important}
@media(max-width:1100px){.ix-footer-tagline{font-size:117px}.ix-footer-mark{width:120px}}
@media(max-width:900px){
.ix-footer{padding-block:96px 48px}
.ix-footer-top{flex-direction:column;gap:32px}
.ix-footer-tagline{font-size:128px}
.ix-footer-mark{width:120px}
}
@media(max-width:760px){
.ix-footer{padding-block:64px 32px}
.ix-footer-tagline{font-size:65px}
.ix-footer-mark{width:96px}
.ix-footer-bottom-row{flex-direction:column;align-items:flex-start;gap:16px}
.ix-footer-right{align-items:center}
}
@media(prefers-reduced-motion:reduce){:is(.ix-text-link,.ix-btn,.ix-nav-links a,.ix-footer-nav a){transition:none!important}}

/* v5 carry-forward fixes and new intake surfaces */
.ix-program-mark{display:block;width:auto;height:120px;max-width:100%;object-fit:contain;object-position:left;margin:0 0 24px}
.ix-dog-harry figcaption{padding-left:var(--ix-gutter);padding-right:var(--ix-gutter)}

@media(max-width:1100px){
  .ix-hero-stage{padding:0;justify-content:flex-end}
  .ix-hero-photo{display:block;object-position:72% 12%}
  .ix-hero-mark{display:none}
  .ix-hero-stage-line{display:none}
  .ix-hero-stage::after{background:linear-gradient(to bottom,rgba(33,30,28,.08) 0%,rgba(33,30,28,.12) 34%,rgba(33,30,28,.76) 66%,#211e1c 100%)}
  .ix-hero-copy{max-width:100%;padding:0 var(--ix-gutter) 48px;gap:24px}
  .ix-hero-statement{font-size:clamp(50px,8vw,96px)}
}
@media(max-width:760px){
  .ix-hero-copy{padding:0 24px 32px;gap:16px}
  .ix-hero-statement{font-size:50px}
  .ix-program-mark{height:72px;margin-bottom:20px}
  /* F2 fix (v5 fix round): 72% 12% cut Harry's face at the left edge on
     phones. 35% 12% keeps the whole head and face in frame while the
     statement band still lands on chest/background, not the face. */
  .ix-hero-photo{object-position:35% 12%}
}

/* Contact picker lives outside the form so the native radio group has no
   form owner. It stays immediately above the fields on wide screens. */
#contact .ix-contact-grid{grid-template-columns:1fr;row-gap:0}
#contact .ix-contact-intro{grid-column:1;grid-row:1}
#contact .ix-giveback{grid-column:1;grid-row:2;max-width:60ch;margin:0 0 32px}
#contact .ix-giveback-label{display:block;margin:0 0 10px;color:var(--ix-accent);font:700 var(--ix-label)/1.5 Arial,sans-serif;letter-spacing:.17em;text-transform:uppercase}
#contact .ix-giveback p{margin:0;max-width:60ch;color:var(--ix-fg-soft);font-size:var(--ix-body);line-height:var(--ix-body-lh,1.6)}
#contact .ix-flavors{grid-column:1;grid-row:3;border:0;padding:0;min-inline-size:0;margin:0 0 32px}
#contact .ix-flavors legend{padding:0;margin:0 0 14px;color:var(--ix-fg);font:600 20px/1.2 'NC Oswald',Arial,sans-serif;text-transform:uppercase}
#contact .ix-flavor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#contact .ix-flavor{position:relative;display:block;min-width:0;padding:0 0 14px;background:#2b2725;border-radius:6px;color:var(--ix-fg);cursor:pointer;box-shadow:inset 0 0 0 1px #554b45}
#contact .ix-flavor input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
#contact .ix-flavor-product{display:block;aspect-ratio:3/4;overflow:hidden;background:#282320;border-radius:6px 6px 0 0}
#contact .ix-flavor-product img{display:block;width:100%;height:100%;object-fit:contain}
#contact .ix-flavor-label{display:block;padding:12px 36px 0 14px;font:600 14px/1.35 Arial,sans-serif;color:var(--ix-fg)}
#contact .ix-flavor-selected{position:absolute;right:12px;bottom:15px;width:14px;height:14px;border:2px solid #c5bbb2;border-radius:50%;z-index:2;pointer-events:none}
#contact .ix-flavor:has(input:checked){box-shadow:inset 0 0 0 2px var(--ix-accent)}
#contact .ix-flavor input:checked~.ix-flavor-selected{border-color:var(--ix-accent);background:var(--ix-accent);box-shadow:inset 0 0 0 3px #211e1c}
#contact .ix-flavor:has(input:focus-visible){outline:2px solid var(--ix-accent);outline-offset:4px}
#contact .ix-choice-status{min-height:18px;margin:12px 0 0;color:var(--ix-fg-soft);font:12px/1.5 Arial,sans-serif}
#contact .ix-form{grid-column:1;grid-row:4;min-width:0}
@media(hover:hover){#contact .ix-flavor:hover{box-shadow:inset 0 0 0 1px var(--ix-accent)}#contact .ix-flavor:hover .ix-flavor-product img{transform:scale(1.02)}}
#contact .ix-flavor:active{transform:translateY(1px)}
@media(min-width:761px) and (max-width:900px){#contact .ix-flavor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* F5 fix (v5 fix round): three tiles in one row at 375/430 instead of
   three tall stacked tiles. Square wells (aspect-ratio 1) keep each card
   compact at a ~100px column width; the 3/4 portrait well from the
   desktop layout only fit stacked at one per row. */
@media(max-width:480px){
  #contact .ix-flavor-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  #contact .ix-flavor-product{aspect-ratio:1/1}
  #contact .ix-flavor-label{padding:8px 30px 0 8px;font-size:12px}
}
@media(min-width:901px){
  #contact .ix-contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,553px);column-gap:var(--ix-gap);align-items:start}
  #contact .ix-contact-intro{grid-column:1;grid-row:1 / span 3}
  #contact .ix-giveback,#contact .ix-flavors,#contact .ix-form{grid-column:2}
}
@media(prefers-reduced-motion:reduce){#contact .ix-flavor,#contact .ix-flavor-product img{transition:none!important}#contact .ix-flavor:active{transform:none}}

/* F6 fix (v5 fix round): .ix-footer-top and .ix-footer-bottom-row are
   .ix-wrap divs whose only sizing is max-width:1440+margin-inline:auto.
   .ix-footer is display:flex;flex-direction:column, so on the cross axis
   (inline/horizontal) those auto margins stop the item from stretching:
   per the flex spec, a cross-axis auto margin skips stretch and the item
   is sized fit-content instead of filling the container. That shrank the
   bottom row to the width of its own children and then centered that
   narrow box with the leftover space as equal outer margins, which is
   why the row start measured at x=208 (144px outer margin + 64 gutter)
   instead of the 64px gutter alone. An explicit width:100% is not "auto"
   so the quirk no longer applies; max-width:1440 + margin-inline:auto
   still cap and center the box exactly as elsewhere on the page. */
.ix-footer-top,.ix-footer-bottom-row{width:100%}
.ix-footer-bottom-row{align-items:center;row-gap:16px}
.ix-footer-left{display:flex;align-items:center;min-height:44px}
.ix-footer-bottom-row>*,.ix-footer-nav,.ix-footer-right{align-self:center}
.ix-footer-right{height:44px}
.ix-footer-right .ix-text-link{padding-bottom:0}
@media(max-width:760px){
  .ix-footer-bottom-row{align-items:stretch}
  /* .ix-footer-bottom-row>* above sets align-self:center for the desktop
     single row (vertical centering). At this breakpoint the row becomes a
     column stack (v4 rule above), where align-self is the HORIZONTAL
     axis, so that same center rule was centering "Innovation 121. The
     Incredibullz." instead of holding it at the gutter like the nav grid
     and the note/back-to-top row beside it. Reset to flex-start here so
     all three stacked zones share the same left edge. */
  .ix-footer-left{align-self:flex-start}
  .ix-footer-nav{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:0 16px;padding-left:0}
  .ix-footer-right{height:auto;align-self:flex-start;align-items:baseline}
}

/* scrollcraft device CSS, reproduced scoped from preview/scrollcraft.css
   (the stylesheet itself is not linked, Addendum A isolation). v4 keeps only
   the two devices in use: the pin stage and the flow act's cue/kinetic split
   mechanism. data-sc-in, data-sc-reveal and data-sc-parallax device rules are
   removed along with the attributes, per BUILD-BRIEF-v4-ART section 15. */
.sc-act--pinned{position:relative}
.sc-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;z-index:1}
[data-sc-cue]{opacity:0;will-change:opacity,transform}
.sc-ready [data-sc-cue]{transition:none}
.sc-split{display:inline-block;overflow:hidden;vertical-align:top}
.sc-split--line{display:block;padding-bottom:.14em;margin-bottom:-.14em}
.sc-split__i{display:inline-block;will-change:transform,opacity}
.sc-is-split{opacity:1!important}
@media(prefers-reduced-motion:reduce){
.sc-split__i{transform:none!important}
}