/* Apex site — fluid token layer, shell, sections, states, motion.
   Every value that the .fig defines is reached through a design-system token;
   the clamp() ceilings below all resolve to the file's exact 1440 values.
   Motion, hover and press are additions — the source is a static comp. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-core);overflow-x:hidden}
img{display:block;max-width:100%}
:root{
  --ease-entrance:cubic-bezier(0.16,1,0.3,1);--ease-state:cubic-bezier(0.4,0,0.2,1);
  --dur-entrance:520ms;--dur-state:180ms;
  /* Fluid gutters and band rhythm — ceilings are the file's values */
  --gutter-nav:clamp(20px,4.72vw,68px);--gutter-page:clamp(20px,5.56vw,80px);
  --gutter-case:clamp(20px,5.42vw,78px);--gutter-footer-bar:clamp(20px,6.94vw,100px);
  --band-pad-sm:clamp(32px,3.47vw,50px);--band-pad:clamp(48px,5.83vw,84px);
  --band-pad-lg:clamp(56px,6.94vw,100px);--band-pad-xl:clamp(64px,7.64vw,110px);
  --cta-disc:clamp(96px,10.49vw,151px);
  /* Fluid type — line-heights become ratios, tracking becomes em, both exact at 1440 */
  --size-hero:clamp(44px,6.556vw,94.4px);--lh-hero:1.017;--ls-hero:-0.01818em;
  --size-large-title:clamp(40px,6.94vw,100px);--lh-large-title:1.13;--ls-large-title:-0.02em;
  --size-h1:clamp(40px,5.56vw,80px);--lh-h1:1.1625;--ls-h1:-0.025em;
  --size-h2:clamp(30px,4.17vw,60px);--lh-h2:1.283;--ls-h2:-0.0333em;
  --size-h3:clamp(24px,2.22vw,32px);--lh-h3:1.094;--ls-h3:-0.03125em;
  --size-h3-loose:clamp(24px,2.22vw,32px);--lh-h3-loose:1.375;
  --size-services:clamp(36px,5.56vw,80px);--lh-services:1.075;
  --size-subheadline:clamp(20px,1.67vw,24px);--lh-subheadline:1.333;--ls-subheadline:-0.04167em;
  --size-lede:clamp(17px,1.39vw,20px);--lh-lede:1.6;
  /* The file's literal 124.12px overflows its own 1119px text box (Switzer
     measures 2071px at that size). Sized to the box instead: 67.052px spans
     exactly 1119px of the 1440 band, i.e. the frame's 160px side margins. */
  --size-banner:clamp(16px,4.656vw,67.052px);--lh-banner:1.3;--ls-banner:0.00374em;
  /* Proportional scale factor for bands reproduced at the frame's 1440
     geometry. CSS cannot divide a length by a length to get a number, so
     motion.js keeps this in sync with the viewport; 1 is the desktop value. */
  --k:1;
}
a{color:var(--text-primary);text-decoration:none;transition:opacity var(--dur-state) var(--ease-state)}
/* The imported form library's fig-tokens.css redefines two brand ramp steps at
   :root and loads after tokens/colors.css, so its palette wins. Re-assert the
   Apex values here (this file is linked last). The library keeps its own copies
   as --neutral-200-2 / --neutral-400-2, so nothing in it breaks. */
:root{--neutral-200:rgb(217,217,217);--neutral-400:rgb(89,89,89)}
a:hover{opacity:.6}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Cursor: the Apex "A". Black on light bands, white on dark bands (motion.js sets html[data-cursor]
   from the background under the pointer); on photos and video it is black with a white keyline.
   Links, buttons and text fields keep their native cursors. Fine pointers only. */
@media(hover:hover) and (pointer:fine){
html{cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='-1%20-1%2050%2051'%3E%3Cpath%20d='M%200%2049%20L%2012.304%2049%20L%2036.608%200%20L%2024.304%200%20L%200%2049%20Z%20M%2036.608%200%20L%2036.608%2049%20L%2047.918%2049%20L%2047.918%200%20L%2036.608%200%20Z'%20fill='%23000'/%3E%3C/svg%3E") 10 1,auto}
html[data-cursor="dark"]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='-1%20-1%2050%2051'%3E%3Cpath%20d='M%200%2049%20L%2012.304%2049%20L%2036.608%200%20L%2024.304%200%20L%200%2049%20Z%20M%2036.608%200%20L%2036.608%2049%20L%2047.918%2049%20L%2047.918%200%20L%2036.608%200%20Z'%20fill='%23fff'/%3E%3C/svg%3E") 10 1,auto}
html[data-cursor="photo"]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='-1%20-1%2050%2051'%3E%3Cpath%20d='M%200%2049%20L%2012.304%2049%20L%2036.608%200%20L%2024.304%200%20L%200%2049%20Z%20M%2036.608%200%20L%2036.608%2049%20L%2047.918%2049%20L%2047.918%200%20L%2036.608%200%20Z'%20fill='%23fff'%20stroke='%23fff'%20stroke-width='5'%20stroke-linejoin='round'/%3E%3Cpath%20d='M%200%2049%20L%2012.304%2049%20L%2036.608%200%20L%2024.304%200%20L%200%2049%20Z%20M%2036.608%200%20L%2036.608%2049%20L%2047.918%2049%20L%2047.918%200%20L%2036.608%200%20Z'%20fill='%23000'/%3E%3C/svg%3E") 10 1,auto}
}
/* ── Reveals ───────────────────────────────────────────────────────────── */
/* Content is visible by default. JS arms the hidden state only when the
   document is visible, so a hidden/background load can never paint blank. */
/* ── Gradient rule (from "Cambios de color": blue → green → cyan → lavender → pink) ── */
:root{--grad-rule:linear-gradient(90deg,#0476E0 0%,#0476E0 14%,#00CFB6 29%,#3CE1D9 43%,#76ADDC 57%,#A073C0 71%,#CB3AA3 86%,#F50286 100%)}
.grad-line{display:block;height:1px;align-self:stretch;flex-shrink:0;background:var(--grad-rule);opacity:.7}
.grad-line--hero{opacity:.85}
/* Service cards: the hairline under the icon becomes the gradient rule. */
.svc>div:nth-child(2){background:var(--grad-rule)!important;opacity:.35!important}
/* Awards: rule sits between the heading and the marks, spanning the page gutters. */
.awards .grad-line{margin-inline:calc(var(--gutter-nav) - var(--gutter-page));margin-bottom:calc(16px * var(--k))}
/* Glass 3D accents: blend modes drop their flat backgrounds (black for the star, white for the others). */
.hero-star{position:absolute;right:calc(var(--gutter-nav) + min(.14vw,2px));top:50%;transform:translateY(-50%);margin-top:min(1.46vw,21px);width:min(18.8vw,271px);height:auto;mix-blend-mode:screen;pointer-events:none;user-select:none}
.work-head{position:relative}
.work-pencil{position:absolute;left:min(15.6vw,225px);top:min(16.8vw,242px);width:min(23vw,332px);height:auto;mix-blend-mode:multiply;pointer-events:none;user-select:none;z-index:0}
.work-head-row,.work-lede{position:relative;z-index:1}
.case-cta-wrap{position:relative}
.rocket{position:absolute;top:50%;left:calc(var(--gutter-page) + 2.28 * var(--size-large-title));width:calc(1.38 * var(--size-large-title));height:auto;transform:translateY(-50%);mix-blend-mode:multiply;pointer-events:none;user-select:none}
@media(max-width:1000px){.hero-star,.work-pencil{display:none}}
.reveal{opacity:1;transform:none}
.reveal.is-armed{opacity:0;transform:translateY(24px);transition:opacity var(--dur-entrance) var(--ease-entrance),transform var(--dur-entrance) var(--ease-entrance)}
.reveal.is-armed.is-in{opacity:1;transform:none}
/* ── Header ────────────────────────────────────────────────────────────── */
.apex-header{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-height);padding:0 var(--gutter-nav);background:var(--apex-white);box-shadow:none;transition:height var(--dur-state) var(--ease-state),box-shadow var(--dur-state) var(--ease-state)}
.apex-header[data-scrolled="true"]{height:60px;box-shadow:var(--hairline-nav),0 1px 0 0 var(--neutral-200)}
.apex-nav{display:flex;align-items:center;gap:clamp(24px,4.03vw,58px)}
.apex-nav a>span:last-child{display:none}
.apex-nav a{gap:0!important}
.apex-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px}
.apex-nav a::after,.apex-footer a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 260ms var(--ease-entrance)}
.apex-nav a:hover::after,.apex-nav a.is-active::after,.apex-footer a:hover::after{transform:scaleX(1)}
/* One rule under the active item: the underline sits under the text, so the
   component's own bottom border is suppressed. */
.apex-nav a{border-bottom-color:transparent!important}
.apex-utility{display:flex;align-items:center;gap:24px}
.apex-utility button,.apex-utility a{transition:opacity var(--dur-state) var(--ease-state),transform var(--dur-state) var(--ease-state)!important}
.apex-utility button:hover,.apex-utility a:hover{opacity:.6}
.apex-utility button:active,.apex-utility a:active{transform:scale(.96)}
.apex-burger{display:none;flex-direction:column;width:44px;height:44px;align-items:center;justify-content:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;color:var(--apex-black)}
.apex-burger span{display:block;width:22px;height:1px;flex-shrink:0;background:currentColor;transition:transform var(--dur-state) var(--ease-state),opacity var(--dur-state) var(--ease-state)}
.apex-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.apex-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.apex-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.apex-scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity var(--dur-state) var(--ease-state)}
.apex-scrim[data-open="true"]{opacity:1;pointer-events:auto}
.apex-panel{position:fixed;top:0;right:0;bottom:0;z-index:58;width:min(86vw,360px);background:var(--apex-white);padding:calc(var(--nav-height) + 16px) var(--gutter-nav) 40px;display:flex;flex-direction:column;gap:32px;transform:translateX(100%);transition:transform 340ms var(--ease-entrance);box-shadow:var(--hairline-nav)}
.apex-panel[data-open="true"]{transform:none}
.apex-panel-items{display:flex;flex-direction:column;gap:8px}
.apex-panel-items a{display:flex;align-items:center;min-height:44px;font-family:var(--font-display);font-size:24px;letter-spacing:-1px;opacity:0;transform:translateX(16px);transition:opacity 320ms var(--ease-entrance),transform 320ms var(--ease-entrance)}
.apex-panel[data-open="true"] .apex-panel-items a{opacity:1;transform:none}
@media(max-width:980px){.apex-nav,.apex-utility{display:none}.apex-burger{display:flex}}
/* ── Buttons and cards: hover / press / disabled ───────────────────────── */
.btn{transition:transform var(--dur-state) var(--ease-state),opacity var(--dur-state) var(--ease-state),box-shadow var(--dur-state) var(--ease-state)!important;min-height:44px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4!important;transform:none;cursor:default;pointer-events:none}
.btn-spinner{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:apex-spin 700ms linear infinite}
@keyframes apex-spin{to{transform:rotate(360deg)}}
.svc{transition:box-shadow var(--dur-state) var(--ease-state),transform var(--dur-state) var(--ease-state)!important}
.svc:hover{box-shadow:var(--hairline-inverse),0 8px 24px rgba(0,0,0,.45)!important;transform:translateY(-2px)}
/* The PDF renders service glyphs bare on the card — no black icon tile. */
.ms-icon{font-family:"Material Symbols Rounded";font-weight:400;font-size:36px;line-height:1;color:var(--apex-white);font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 40}
.svc>div:first-child{background:transparent!important}
.svc h3{font-size:22px!important;line-height:28px!important;letter-spacing:-1px!important}
.svc p{font-size:18px!important;line-height:26px!important;letter-spacing:-1px!important}
/* Awards band at the frame's own geometry: 448px tall, 115/114 padding, a 62px
   gap under the 60px heading, and each mark at its measured size over an uneven
   gap — AwardsRow's uniform 158px boxes and 100px gap are overridden here. */
.awards{gap:calc(28px * var(--k))!important;padding:calc(86px * var(--k)) var(--gutter-page) calc(98px * var(--k))!important}
.awards h2{font-size:var(--size-h2)!important;line-height:var(--lh-h2)!important;letter-spacing:var(--ls-h2)!important}
.awards>div:last-child{gap:0!important;align-items:center!important;flex-wrap:nowrap!important;position:relative;left:calc(-8px * var(--k))}
.awards>div:last-child>div{background-size:contain!important;background-position:center!important}
.awards>div:last-child>div:nth-child(1){width:calc(158px * var(--k))!important;height:calc(88px * var(--k))!important}
.awards>div:last-child>div:nth-child(2){width:calc(175px * var(--k))!important;height:calc(65px * var(--k))!important;margin-left:calc(101px * var(--k))}
.awards>div:last-child>div:nth-child(3){width:calc(140px * var(--k))!important;height:calc(81px * var(--k))!important;margin-left:calc(117px * var(--k))}
.awards>div:last-child>div:nth-child(4){width:calc(107px * var(--k))!important;height:calc(114px * var(--k))!important;margin-left:calc(130px * var(--k))}
@media(max-width:560px){
  .awards>div:last-child{flex-wrap:wrap!important;justify-content:center;row-gap:32px}
  .awards>div:last-child>div{margin-left:0!important;margin-right:32px}
}
.gcard>div:first-child{transition:opacity 320ms var(--ease-state)}
.gcard>div:last-child>span:last-child{margin:6px 0 -2px}
.gcard:hover{opacity:1}
.gcard:hover>div:first-child{opacity:.84}
.gcard span:first-child{position:relative;display:inline-block}
.gcard span:first-child::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--ease-entrance)}
.gcard:hover span:first-child::after{transform:scaleX(1)}
/* ── Bands ─────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--apex-black);color:var(--apex-white);min-height:clamp(520px,39.17vw,564px);display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:clamp(28px,3.26vw,47px);padding:clamp(88px,7.92vw,114px) var(--gutter-nav) 90px}
.hero-inner{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,32px);max-width:1137px;width:100%}
.hero h1{margin:0;max-width:939px;font-family:var(--font-core);font-weight:400;font-size:var(--size-hero);line-height:var(--lh-hero);letter-spacing:var(--ls-hero);text-wrap:pretty}
.hero p{margin:0;max-width:760px;font-family:var(--font-core);font-weight:400;font-size:var(--size-lede);line-height:var(--lh-lede);letter-spacing:-.01em;text-wrap:pretty}
.statement{background:var(--apex-white);padding:clamp(28px,2.78vw,40px) 0 0}
.statement-inner{display:flex;flex-direction:column;gap:clamp(48px,6.94vw,100px);padding:0 var(--gutter-page)}
.statement-row{display:flex;flex-direction:row;column-gap:clamp(32px,14.8vw,213px);row-gap:32px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.statement-row p{margin:2px 0 0;max-width:813px;font-family:var(--font-core);font-weight:400;font-size:var(--size-subheadline);line-height:1.3333;letter-spacing:-.04167em}
.services{background:var(--apex-black);padding:var(--band-pad) clamp(20px,6.67vw,96px) clamp(96px,11.8vw,170px);display:flex;justify-content:center}
.services-inner{width:min(1248px,100%);padding:0;display:flex;flex-direction:column;gap:clamp(40px,4.44vw,64px)}
.services-head{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:24px}
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:900px){.services-grid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}}
.services-grid>.reveal,.work-grid>.reveal,.campaign-col>.reveal{display:flex;flex-direction:column;min-width:0}
.services-grid>.reveal>*{flex:1}
.work{background:var(--apex-white);padding:var(--band-pad-sm) var(--gutter-page) calc(var(--band-pad-lg) + 1px);display:flex;flex-direction:column;gap:clamp(48px,6.32vw,91px);align-items:center}
.work-head{display:flex;flex-direction:column;gap:clamp(32px,3.33vw,48px);align-self:stretch}
.work-head-row{display:grid;grid-template-columns:minmax(0,1fr) min(687px,47.7vw);gap:0;align-items:start}
@media(max-width:1000px){.work-head-row{grid-template-columns:1fr;gap:32px}}
.work-shot{min-width:0;width:100%;aspect-ratio:687/398;background-position:center;background-size:cover;background-repeat:no-repeat}
.work-lede{display:flex;justify-content:flex-end}
.work-lede p{margin:0;max-width:698px;font-family:var(--font-core);font-weight:400;font-size:var(--size-subheadline);line-height:1.35;letter-spacing:-.042em}
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:53px;width:min(1280px,100%)}
.campaign{background:var(--surface-muted);padding:var(--band-pad-xl) var(--gutter-page)}
.campaign-row{display:flex;flex-direction:row;gap:clamp(32px,4.72vw,68px);align-items:flex-start}
.campaign-col{display:flex;flex-direction:column;gap:24px;flex:1 1 420px;min-width:0}
.campaign-col p{margin:0;max-width:565px;font-family:var(--font-core);font-weight:400;font-size:var(--size-subheadline);line-height:1.3333;letter-spacing:var(--ls-subheadline);color:var(--neutral-400)}
.campaign-shot{flex:1 1 420px;min-height:clamp(320px,45.3vw,652px);background-position:center;background-size:cover;background-repeat:no-repeat;background-color:var(--neutral-100)}
@media(max-width:900px){.campaign-row{flex-direction:column}.campaign-shot{align-self:stretch}}
/* ── About ─────────────────────────────────────────────────────────────── */
.about-film{height:clamp(200px,23.06vw,332px);background:var(--apex-black);display:flex;align-items:center;justify-content:center;padding:0 var(--gutter-page)}
.about-lead{background:var(--apex-white);padding:0 0 clamp(32px,2.7vw,39px);display:flex;flex-direction:column;gap:32px}
.about-row{display:flex;flex-direction:row;gap:clamp(32px,4vw,58px);justify-content:center;align-items:center;flex-wrap:wrap;padding:clamp(24px,2.78vw,40px) var(--gutter-page) 0}
.about-row h1{flex:1 1 420px;max-width:624px;min-width:0;font-size:clamp(22px,2.85vw,41px)!important;line-height:1.244!important;letter-spacing:-.0512em!important}
.about-shot{flex:1 1 420px;max-width:652px;aspect-ratio:656/298;min-width:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.about-block{padding:32px var(--gutter-page)}
.about-block>div>p{flex:1 1 651px!important;text-wrap:wrap!important;font-size:24px!important;line-height:32px!important;letter-spacing:-1.3px!important}
.about-block>div>div{gap:34px!important;flex:0 1 447px!important;max-width:447px!important}
.about-block>div>div>p{font-size:18px!important;line-height:27px!important;letter-spacing:-1px!important}
/* ── Case study ────────────────────────────────────────────────────────── */
/* Band-driven case-study pages. Geometry measured off the exported frame:
   full-bleed images, a 575px square pair on the grey strip, and a 324/575/326
   trio on white. Widths stay proportional below 1440 and stack on mobile. */
.cs-full{background-repeat:no-repeat;background-size:cover;background-position:center}
.cs-pair{background:var(--surface-strip);padding:clamp(24px,4.44vw,64px) clamp(20px,8.33vw,120px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3.19vw,46px)}
.cs-pair.on-inverse{background:var(--apex-black)}
.cs-pair.on-strip{background:var(--surface-strip)}
.cs-pair.on-dim,.cs-trio.on-dim{background:var(--neutral-400)}
.cs-pair.on-mid,.cs-trio.on-mid{background:var(--neutral-300)}
.cs-pair.on-muted,.cs-trio.on-muted{background:var(--neutral-100)}
.cs-trio{background:var(--apex-white);padding:clamp(28px,4.72vw,68px) var(--gutter-nav) 0;display:grid;grid-template-columns:324fr 575fr 326fr;gap:clamp(14px,2.78vw,40px)}
/* Each frame is sized by the aspect of its own slot in the Figma frame, so a
   band's images stay side by side and complete at every width — the column
   ratios make their natural heights match without cropping. */
.cs-pair>.reveal,.cs-trio>.reveal{aspect-ratio:var(--ar,1/1);background-size:cover;background-repeat:no-repeat}
.cs-trio.on-inverse{background:var(--apex-black);padding:clamp(28px,4.72vw,68px) var(--gutter-nav)}
.cs-trio.on-strip{background:var(--surface-strip);padding:clamp(28px,3.75vw,54px) var(--gutter-nav)}
/* Only stack on genuinely narrow screens — the two- and three-up bands read
   as the frame intends well below tablet width. */
@media(max-width:560px){.cs-pair,.cs-trio{grid-template-columns:1fr!important}}
.case-hero{height:clamp(280px,47.3vw,681px);background-repeat:no-repeat}
.case-strip{background:var(--surface-strip);padding:clamp(32px,4.72vw,68px) var(--gutter-page);display:flex;flex-direction:row;gap:clamp(16px,2.78vw,40px);justify-content:center;flex-wrap:wrap}
.case-story{flex:0 1 324px;aspect-ratio:324/576;min-width:200px;background-position:center;background-size:cover;background-repeat:no-repeat}
.case-wide{height:clamp(320px,59.3vw,854px);background-repeat:no-repeat}
.case-cta{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:var(--band-pad-lg) var(--gutter-page);background:var(--apex-white)}
/* ── Let's talk ────────────────────────────────────────────────────────── */
/* The Let's talk band is reproduced at the frame's exact 1440 geometry and
   scaled proportionally, because the 558px form panel cannot reflow without
   changing the composition: 34px below the 76px header, a 284px white band,
   a 617px panel overhanging 367px into the 412px photo. */
.contact-scale{position:relative;z-index:2;height:calc(284px * var(--k));background:var(--apex-white)}
.contact{--size-h1:80px;position:absolute;top:0;left:0;width:1440px;height:651px;transform:scale(var(--k));transform-origin:top left;padding:31px 68px 0;display:flex;flex-direction:row;gap:56px;align-items:flex-start;flex-wrap:nowrap;box-sizing:border-box}
.contact h1{flex:1 1 320px;min-width:0;margin-top:16px!important}
.contact-panel textarea{height:156px!important}
.btn-submit{min-height:40px!important}
.contact-panel{flex:0 1 558px;width:min(558px,100%);border-radius:var(--radius-field);background:var(--surface-form);box-shadow:inset 0 0 0 1px var(--neutral-100);padding:20px;display:flex;flex-direction:column;gap:24px;position:relative;z-index:2}
.contact-row{display:flex;flex-direction:row;gap:28px;flex-wrap:wrap}
.contact-row>*{flex:1 1 180px;min-width:0}
.contact-shot{height:calc(412px * var(--k));background-position:center;background-size:cover;background-repeat:no-repeat;background-color:var(--neutral-100)}
/* Below 700px the scale would render the form illegibly small, so the band
   reverts to normal flow and the panel sits above the photo. */
@media(max-width:700px){
  .contact-scale{height:auto}
  .contact{position:static;transform:none;width:auto;height:auto;flex-wrap:wrap;padding:24px var(--gutter-nav) 32px;gap:32px;--size-h1:clamp(40px,9vw,80px)}
  .contact .reveal:last-child{flex:1 1 100%!important;width:100%!important}
  .contact-panel{width:100%}
  .contact-shot{height:clamp(220px,40vw,412px)}
}
.contact-panel input:focus-visible,.contact-panel textarea:focus-visible,.contact-panel button:focus-visible{outline:2px solid var(--apex-black);outline-offset:2px}
.contact-panel input,.contact-panel textarea{transition:box-shadow var(--dur-state) var(--ease-state)}
.contact-panel input:hover,.contact-panel textarea:hover{box-shadow:inset 0 0 0 1px var(--neutral-300)}
.field-error input,.field-error textarea,.field-error button{box-shadow:inset 0 0 0 1px var(--apex-black)!important}
.field-msg{font-family:var(--font-display);font-size:var(--size-footnote);line-height:var(--lh-footnote);color:var(--apex-black)}
/* The banner line is sentence case in Google Sans in the PDF, not uppercase Switzer. */
.banner{padding-top:24px!important;box-sizing:border-box!important}
.banner span{text-transform:none!important;font-family:var(--font-core)!important;font-weight:400!important}
/* The pill arrow points right; the source glyph is an up-right arrow. */
.btn-r>span:last-child svg{transform:rotate(45deg)}
.btn-submit>span:last-child{background:transparent!important;color:var(--apex-white)!important}
.about-film{background:var(--apex-black);padding:0;overflow:hidden}
.av{display:block;width:100%;height:100%;object-fit:cover;background:var(--apex-black)}
.about-film .av{aspect-ratio:auto}
.cs-media{position:relative;overflow:hidden}
.cs-media>.av{position:absolute;inset:0}
.case-video{background:var(--apex-white);padding:clamp(28px,4.9vw,70px) clamp(20px,12.5vw,180px) clamp(28px,5vw,72px)}
.case-video .av{height:auto;aspect-ratio:3/1}
.contact-sent{display:flex;flex-direction:column;gap:12px;padding:24px 4px}
.contact-sent h2{margin:0;font-family:var(--font-display);font-size:var(--size-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);text-transform:uppercase}
.contact-sent p{margin:0;max-width:420px;font-family:var(--font-core);font-size:var(--size-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--neutral-400)}
/* ── Footer ────────────────────────────────────────────────────────────── */
.apex-footer a{position:relative}
/* SiteFooter pins the lockup block to width:389 / flex-shrink:0 and the columns to
   171px (Figma), so the row needs ~1390px. Below that, wrap the lockup onto its own
   row and let the columns share the width. */
@media(max-width:1369px){
  .apex-footer>div:nth-child(2) a{white-space:normal!important}
  .apex-footer>div:nth-child(2){flex-wrap:wrap}
  .apex-footer>div:nth-child(2)>div:first-child{min-width:0}
  .apex-footer>div:nth-child(2)>div:not(:first-child){flex:1 1 0;min-width:0}
}
@media(max-width:1320px){
  .apex-footer>div:nth-child(2){row-gap:48px}
  .apex-footer>div:nth-child(2)>div:first-child{flex:0 0 100%!important;width:auto!important}
}
@media(max-width:900px){.campaign-col,.campaign-shot{flex:0 0 auto}}
@media(max-width:700px){.about-block>div{gap:32px!important}.about-block>div>div{gap:24px!important}}
@media(max-width:560px){
  .services-head{gap:16px}
  .case-video{padding:24px var(--gutter-page) 0}
  /* Full-bleed case-study images are 1440x~660 on desktop; at phone width that is a thin strip, so give them a 4:3 frame. */
  .cs-full{height:auto!important;aspect-ratio:4/3}
  .apex-footer>div:nth-child(3){padding-left:var(--gutter-page)!important;padding-right:var(--gutter-page)!important}
  .services-head>span:last-child{width:88px!important;height:34px!important}
}
@media(max-width:768px){
  /* Footer link columns: the desktop row squeezes each column to ~40px on a phone. Two-up grid instead. */
  .apex-footer>div:nth-child(2){display:grid!important;grid-template-columns:1fr 1fr;gap:40px 24px}
  .apex-footer>div:nth-child(2)>div:first-child{grid-column:1/-1;flex:none!important}
  .apex-footer>div:nth-child(2)>div:not(:first-child){width:auto!important;min-width:0;flex:none}
  .apex-footer>div:nth-child(2)>div>span,.apex-footer>div:nth-child(2)>div>a{white-space:normal!important}
  .hero{min-height:520px;padding-top:88px}
  .work-grid{gap:32px}
  .case-strip{gap:16px}
  .apex-footer>div:nth-child(3){flex-direction:column!important;align-items:flex-start!important;gap:16px;height:auto!important;padding-top:20px!important;padding-bottom:28px!important}
  .apex-footer>div:nth-child(2)>div:nth-child(3){order:5}
  .apex-footer>div:nth-child(2)>div:nth-child(5){order:6}
}
@media(prefers-reduced-motion:reduce){
  .reveal.is-armed{transform:none;transition:opacity 200ms linear}
  .btn:hover,.btn:active,.svc:hover,.apex-utility a:active,.apex-utility button:active{transform:none}
  .apex-panel{transition:transform 1ms linear}
  .apex-panel-items a{transform:none;transition:opacity 200ms linear}
  .apex-nav a::after,.apex-footer a::after,.gcard span:first-child::after{transition:none}
  html{scroll-behavior:auto}
}