:root { --ink:#e8e1d6; --paper:#080807; --gold:#c99d5a; --soft:#9d978e; --panel:#11110f; --line:rgba(232,225,214,.16); --castrol-deep:#0d211b; --castrol-green:#1a3a2d; --section-space:clamp(3.5rem,7.5vw,7rem); --block-space:clamp(2.75rem,5.5vw,4.75rem); --mono:"DM Mono", monospace; --sans:"DM Sans", sans-serif; --serif:"Playfair Display", serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.45; }
a { color:inherit; }
.skip-link { position:absolute; transform:translateY(-150%); left:1rem; background:var(--acid); padding:.5rem .75rem; z-index:4; }
.skip-link:focus { transform:translateY(0); }
.site-header { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 4vw; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; background:color-mix(in srgb, var(--paper) 93%, transparent); backdrop-filter:blur(8px); }
.brand { text-decoration:none; font-weight:700; letter-spacing:-.04em; font-size:1.2rem; }
.site-nav { display:flex; gap:2rem; }
.site-nav a, .menu-toggle { font:500 .72rem/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; text-decoration:none; }
.menu-toggle { display:none; border:0; color:inherit; background:transparent; padding:.5rem 0; cursor:pointer; }
.section { padding:var(--section-space) 4vw; }
.hero { min-height:min(760px, calc(100svh - 76px)); display:grid; grid-template-rows:auto 1fr auto; padding-top:clamp(2.25rem, 4vw, 3.5rem); padding-bottom:clamp(2.25rem, 4vw, 3.5rem); position:relative; overflow:hidden; isolation:isolate; background:var(--paper); }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(8,8,7,.37); pointer-events:none; }
.hero-video { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; opacity:.72; }
.hero > :not(.hero-video) { position:relative; z-index:1; }
.eyebrow,.section-label { margin:0; font:500 .7rem/1.3 var(--mono); letter-spacing:.09em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { width:fit-content; max-width:min(1200px, 100%); margin:clamp(1rem,3.5vw,2.5rem) 0; align-self:center; font:700 clamp(3.45rem, 8vw, 8.5rem)/.88 var(--sans); letter-spacing:-.035em; text-transform:uppercase; }
h1 span { display:block; }
.hero-accent { color:var(--gold); font-weight:300; letter-spacing:-.02em; }
.hero-bottom { display:flex; justify-content:space-between; align-items:end; gap:1.5rem; border-top:1px solid var(--line); padding-top:.75rem; }
.hero-bottom p { max-width:270px; margin:0; font:500 .75rem/1.2 var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.arrow-link { font:500 .72rem/1 var(--mono); text-transform:uppercase; letter-spacing:.07em; text-underline-offset:.35rem; }
.arrow-link span { margin-left:.45rem; font-size:1rem; }
.section-grid { display:grid; grid-template-columns:20% 1fr; gap:1.5rem; border-top:1px solid var(--line); }
.section-content { max-width:780px; }
h2 { margin-bottom:1.7rem; font:700 clamp(2.5rem,5.2vw,5rem)/.9 var(--sans); letter-spacing:-.06em; text-transform:uppercase; }
.body-copy { max-width:630px; font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.47; }
.body-copy p { margin-bottom:1.1em; }
.pull-quote { margin:1.8em 0!important; padding:.9em 0; color:var(--gold); border-top:1px solid var(--gold); border-bottom:1px solid var(--gold); font:400 clamp(1.6rem,3vw,2.7rem)/1.12 var(--sans); letter-spacing:-.025em; }
.about.section-grid { grid-template-columns:13% 1fr; }
.about .section-content { max-width:665px; }
.about h2 { margin-bottom:1.4rem; font-size:clamp(2.1rem,4.4vw,4.25rem); }
.about .body-copy { max-width:535px; font-size:clamp(.94rem,1.275vw,1.15rem); line-height:1.42; }
.about .body-copy p { margin-bottom:.85em; }
.about .pull-quote { margin:1.2em 0!important; padding:.8em 0; font-size:clamp(1.36rem,2.55vw,2.3rem); line-height:1.14; }
.about-details { max-width:760px; margin-top:var(--block-space); }
.about-details h3 { margin:0 0 1rem; color:var(--gold); font:500 .7rem/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.facts-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); margin:0; border-top:1px solid var(--line); }
.facts-grid > div { min-height:90px; padding:.75rem 1rem 1rem 0; border-bottom:1px solid var(--line); }
.facts-grid > div:nth-child(odd) { border-right:1px solid var(--line); padding-right:1.25rem; }
.facts-grid > div:nth-child(even) { padding-left:1.25rem; }
.facts-grid dt { margin-bottom:1.1rem; color:var(--soft); font:500 .65rem/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.facts-grid dd { margin:0; font-size:1rem; line-height:1.32; }
.career { margin-top:var(--block-space); }
.career-table { border-top:1px solid var(--line); }
.career-row { display:grid; grid-template-columns:19% 1fr 22%; gap:1rem; align-items:baseline; padding:.85rem 0; border-bottom:1px solid var(--line); }
.career-row time { color:var(--soft); font:400 .65rem/1.3 var(--mono); letter-spacing:.05em; }
.career-row strong { font-weight:500; font-size:1rem; line-height:1.25; }
.career-row span { color:var(--soft); font-size:.92rem; line-height:1.25; }
.cv-link { display:inline-flex; align-items:center; gap:.7rem; margin-top:1.1rem; padding-bottom:.32rem; border-bottom:1px solid var(--gold); color:var(--gold); font:500 .7rem/1 var(--mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.cv-link:hover, .cv-link:focus-visible { color:var(--ink); border-color:var(--ink); }
.work { background:var(--panel); }
.work-intro { max-width:490px; font-size:1.15rem; }
.case-card { width:100%; min-height:330px; margin-top:2.5rem; padding:1.2rem; position:relative; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr auto; overflow:hidden; border:0; color:var(--ink); background:#232420; text-align:left; cursor:pointer; }
.case-card > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.case-card:hover > img, .case-card:focus-visible > img { transform:scale(1.035); }
.case-card-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 45%,rgba(0,0,0,.72)); }
.case-card > :not(img):not(.case-card-overlay) { position:relative; z-index:1; }
.case-card-meta,.case-card-action { color:var(--ink); font:500 .7rem/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.case-card-action { align-self:end; }
.case-card strong { grid-column:1/-1; align-self:end; font:700 clamp(2.7rem,6vw,6rem)/.86 var(--sans); letter-spacing:-.055em; text-transform:uppercase; }
.case-card-action { grid-column:2; grid-row:1; }
.case-card-santander { margin-top:1rem; }
body.modal-open { overflow:hidden; }
.case-modal { width:min(1440px,100%); height:min(100dvh,1100px); max-width:none; max-height:none; margin:auto; padding:0; border:0; background:var(--paper); color:var(--ink); overflow-y:auto; }
.case-modal::backdrop { background:rgba(0,0,0,.84); backdrop-filter:blur(5px); }
.case-report { padding-bottom:var(--section-space); }
.case-header { height:76px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:3; background:color-mix(in srgb,var(--paper) 94%,transparent); backdrop-filter:blur(8px); }
.case-header form { margin:0; }
.case-year-nav { display:flex; align-items:center; gap:.5rem; margin-left:auto; margin-right:2.2rem; color:var(--soft); font:500 .68rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.case-year-nav-label { color:var(--soft); margin-right:.15rem; }
.case-year-nav a { color:inherit; text-decoration:none; padding:.5rem 0; border-bottom:1px solid transparent; }
.case-year-nav a[aria-current="page"] { color:var(--gold); border-color:var(--gold); }
.case-year-nav a:hover,.case-year-nav a:focus-visible { color:var(--ink); }
.close-case { border:0; padding:.4rem 0; color:var(--ink); background:transparent; font:500 .7rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.close-case span { margin-left:.5rem; font-size:1.25rem; vertical-align:-.08em; }
.case-hero { min-height:min(730px,80dvh); position:relative; display:flex; align-items:end; padding:clamp(2rem,5vw,5rem) 4vw; overflow:hidden; }
.case-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.case-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.76)); }
.case-hero-copy { position:relative; z-index:1; }
.case-hero-copy .eyebrow { margin-bottom:1rem; }
.case-hero h2 { margin:0; color:var(--ink); font-size:clamp(4rem,10vw,10rem); line-height:.78; }
.case-layout { display:grid; grid-template-columns:13% minmax(0,620px); gap:1.5rem; padding:var(--block-space) 4vw; }
.case-intro { scroll-margin-top:76px; border-bottom:1px solid var(--line); }
.case-intro h3,.case-role h3 { margin:0 0 1.1rem; color:var(--gold); font:400 clamp(2rem,4vw,4.1rem)/.95 var(--sans); letter-spacing:-.035em; }
.case-intro p,.case-role p { max-width:580px; margin:0 0 .9rem; font-size:clamp(1rem,1.4vw,1.22rem); line-height:1.45; }
.case-gallery { padding:var(--block-space) 4vw; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.case-gallery figure { min-height:260px; margin:0; overflow:hidden; background:#1a1a17; }
.case-gallery .gallery-wide { grid-column:1/-1; min-height:420px; }
.case-gallery img { width:100%; height:100%; display:block; object-fit:cover; }
.year-transition { margin:0 4vw; padding:var(--block-space) 0; border-top:1px solid var(--gold); border-bottom:1px solid var(--gold); }
.year-transition p { margin:0; color:var(--ink); font:700 clamp(2.5rem,6.3vw,6.75rem)/.86 var(--sans); letter-spacing:-.055em; text-transform:uppercase; }
.year-transition p span { color:var(--gold); font-weight:300; }
.year-transition p b { color:var(--gold); font-weight:300; }
.case-2022-copy { border-bottom:0; }
.case-video { padding:0 4vw var(--block-space); }
.video-frame { position:relative; border:1px solid var(--gold); background:#000; }
.case-video video { width:100%; display:block; background:#000; }
.video-slate { position:absolute; top:0; left:0; right:0; z-index:1; display:flex; justify-content:space-between; padding:.75rem .9rem; color:var(--ink); font:500 .65rem/1 var(--mono); letter-spacing:.09em; text-shadow:0 1px 12px #000; text-transform:uppercase; pointer-events:none; }
.video-play-cue { position:absolute; top:50%; left:50%; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.65rem; transform:translate(-50%,-50%); padding:0; border:0; color:var(--ink); background:transparent; font:500 .7rem/1 var(--mono); letter-spacing:.09em; text-shadow:0 1px 10px #000; text-transform:uppercase; cursor:pointer; transition:opacity .2s ease,transform .2s ease; }
.video-play-icon { width:4.7rem; height:4.7rem; display:grid; place-items:center; padding-left:.18rem; border:1px solid var(--gold); border-radius:50%; color:var(--gold); background:rgba(8,8,7,.48); font-size:1rem; }
.video-play-cue:hover .video-play-icon,.video-play-cue:focus-visible .video-play-icon { color:var(--paper); background:var(--gold); }
.video-frame.is-playing .video-play-cue { opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.94); }
.case-video p { margin:.65rem 0 0; color:var(--soft); font:400 .65rem/1.3 var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.gallery-2022 { padding-top:0; }
.gallery-2022 figure:nth-child(4) { grid-column:span 2; min-height:360px; }
.case-role { margin:var(--block-space) 4vw 0; padding:var(--block-space) 0 0; border-top:1px solid var(--gold); }
.case-role h3 { font-size:clamp(1.25rem,2.2vw,2.1rem); line-height:1.05; }
.santander-hero::after { background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.82)); }
.santander-intro h3 { color:var(--ink); }
.santander-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:2rem 0 0; border-top:1px solid var(--gold); border-bottom:1px solid var(--gold); }
.santander-metrics div { padding:1rem .85rem 1rem 0; border-right:1px solid var(--line); }
.santander-metrics div + div { padding-left:.85rem; }
.santander-metrics div:last-child { border-right:0; }
.santander-metrics dt { margin-bottom:.45rem; color:var(--soft); font:500 .63rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.santander-metrics dd { margin:0; color:var(--gold); font:500 clamp(1.05rem,1.7vw,1.45rem)/1 var(--sans); letter-spacing:-.035em; }
.santander-metrics dd small { display:block; margin-top:.38rem; color:var(--ink); font:300 .72rem/1.2 var(--sans); letter-spacing:0; }
.case-chapter { align-items:start; padding-top:clamp(2rem,3.5vw,3rem); padding-bottom:1.1rem; }
.case-chapter h3 { margin:0 0 1rem; color:var(--ink); font-size:clamp(1.7rem,3.4vw,3.5rem); line-height:.9; letter-spacing:-.045em; }
.santander-report .case-video { width:min(100%, 1080px); margin-inline:auto; }
.santander-video-pair { display:grid; grid-template-columns:1fr; gap:1rem; padding-bottom:var(--block-space); }
.santander-video-pair .video-play-icon { width:3.7rem; height:3.7rem; }
.santander-cajero-copy { margin-top:var(--block-space); border-top:1px solid var(--gold); }
.santander-cajero-copy h3 { color:var(--gold); font-size:clamp(2.2rem,5vw,5.2rem); }
.santander-cajero-video { padding-bottom:0; }
.case-card-castrol { margin-top:1rem; background:var(--castrol-deep); }
.case-card-fpo { position:absolute!important; inset:0; z-index:0!important; display:grid; place-items:center; color:rgba(232,225,214,.72); background:linear-gradient(135deg,rgba(183,44,34,.4),transparent 40%),linear-gradient(125deg,var(--castrol-deep),var(--castrol-green)); font:500 .67rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.case-card-castrol .case-card-overlay { z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 45%,rgba(0,0,0,.76)); }
.case-card-castrol > :not(img):not(.case-card-fpo):not(.case-card-overlay) { z-index:2; }
.fpo-media { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.55rem; min-height:220px; overflow:hidden; border:1px solid rgba(201,157,90,.7); color:var(--ink); background:linear-gradient(135deg,rgba(183,44,34,.2),transparent 45%),linear-gradient(125deg,#10231d,#1a3024); text-align:center; isolation:isolate; }
.fpo-media::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.4; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),rgba(232,225,214,.14) 25%),repeating-linear-gradient(0deg,transparent 0,transparent calc(25% - 1px),rgba(232,225,214,.1) 25%); background-size:100% 100%; }
.fpo-media span { font:500 .7rem/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.fpo-media small { color:var(--soft); font:300 .72rem/1.2 var(--sans); letter-spacing:.01em; }
.castrol-hero { min-height:min(730px,80dvh); align-items:flex-start; padding:2rem 4vw; background:linear-gradient(120deg,rgba(183,44,34,.18),transparent 40%),linear-gradient(135deg,#10231d,#1a3024); }
.castrol-hero::before { background-size:33.333% 50%; opacity:.26; }
.castrol-hero > span,.castrol-hero > small { position:relative; z-index:1; align-self:flex-start; }
.castrol-hero > small { margin-top:-.35rem; }
.castrol-hero .case-hero-copy { margin-top:auto; }
.castrol-intro h3 { color:var(--ink); }
.castrol-chapter { padding:var(--block-space) 4vw; border-top:1px solid var(--line); }
.castrol-chapter-heading { display:grid; grid-template-columns:13% minmax(0,1fr); gap:1.5rem; align-items:start; }
.castrol-chapter-heading h3 { max-width:760px; margin:0; font:700 clamp(2.8rem,6.6vw,7.1rem)/.82 var(--sans); letter-spacing:-.065em; text-transform:uppercase; }
.castrol-timeline-section .castrol-chapter-heading h3 { letter-spacing:-.025em; }
.castrol-chapter-heading h3 span { color:var(--gold); font-weight:300; letter-spacing:-.03em; }
.castrol-timeline { position:relative; max-width:1060px; margin:clamp(2.5rem,6vw,5rem) 0 0 13%; padding:0; list-style:none; }
.castrol-timeline::before { content:""; position:absolute; top:0; bottom:0; left:1.55rem; width:1px; background:var(--gold); }
.timeline-stage { position:relative; display:grid; grid-template-columns:4.8rem minmax(200px,.78fr) minmax(280px,1.15fr); gap:1.5rem; padding:0 0 clamp(2.5rem,5vw,4.5rem); }
.timeline-stage:last-child { padding-bottom:0; }
.timeline-marker { position:relative; z-index:1; display:flex; justify-content:center; align-items:flex-start; }
.timeline-marker span { display:grid; width:3.1rem; height:3.1rem; place-items:center; border:1px solid var(--gold); border-radius:50%; color:var(--gold); background:var(--paper); font:500 .68rem/1 var(--mono); }
.timeline-kicker { margin:0 0 .75rem; color:var(--gold); font:500 .65rem/1.2 var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.timeline-copy h4 { margin:0 0 .85rem; font:500 clamp(1.8rem,3vw,3.1rem)/.9 var(--sans); letter-spacing:-.055em; text-transform:uppercase; }
.timeline-copy p:last-child,.autozone-copy p { max-width:390px; margin:0; font-size:1rem; line-height:1.42; }
.timeline-copy p + p,.autozone-copy p + p { margin-top:.75rem; }
.timeline-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.35rem 0 0; padding:.75rem 0; border-top:1px solid var(--gold); border-bottom:1px solid var(--line); }
.timeline-metrics div { min-width:0; }
.timeline-metrics dt { color:var(--gold); font:500 clamp(1.5rem,2.4vw,2.15rem)/.9 var(--sans); letter-spacing:-.06em; }
.timeline-metrics dd { margin:.42rem 0 0; color:var(--ink); font:300 .64rem/1.15 var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.timeline-photo,.timeline-hybrid-photos figure,.timeline-tour-fpo figure { min-height:0; margin:0; overflow:hidden; background:var(--castrol-deep); }
.timeline-photo { aspect-ratio:4/3; }
.timeline-photo img,.timeline-hybrid-photos img,.timeline-tour-fpo img { width:100%; height:100%; display:block; object-fit:cover; }
.timeline-hybrid-photos { display:grid; grid-template-columns:1.15fr .85fr; gap:.75rem; }
.timeline-hybrid-photos figure:first-child { aspect-ratio:16/10; }
.timeline-hybrid-photos figure:last-child { aspect-ratio:4/5; }
.timeline-stage-tour { grid-template-columns:4.8rem minmax(200px,.78fr) minmax(280px,1.15fr); }
.timeline-tour-fpo { display:grid; grid-template-columns:1.45fr 1fr; gap:.75rem; }
.timeline-tour-fpo .fpo-tour-wide { grid-column:1/-1; aspect-ratio:16/8; }
.timeline-tour-fpo .fpo-tour-detail { aspect-ratio:4/5; }
.castrol-video-fpo { padding:0 4vw var(--block-space); }
.fpo-video { width:min(100%,1080px); min-height:0; aspect-ratio:16/9; margin-inline:auto; }
.fpo-video b { display:grid; width:4rem; height:4rem; place-items:center; margin-top:.55rem; padding-left:.15rem; border:1px solid var(--gold); border-radius:50%; color:var(--gold); background:rgba(8,8,7,.45); font-size:.9rem; }
.castrol-video { width:min(100%,1080px); margin-inline:auto; }
.castrol-autozone { padding-bottom:clamp(2.5rem,5vw,4.5rem); }
.autozone-copy { max-width:620px; margin:clamp(2.2rem,4vw,3.5rem) 0 0 13%; }
.autozone-gallery { display:grid; grid-template-columns:1.35fr .7fr .95fr; grid-auto-rows:clamp(160px,20vw,290px); gap:.75rem; padding:0 4vw var(--block-space); }
.autozone-gallery figure { min-height:0; margin:0; overflow:hidden; background:var(--castrol-deep); }
.autozone-gallery img { width:100%; height:100%; display:block; object-fit:cover; }
.autozone-01 { grid-column:span 2; grid-row:span 2; }
.autozone-02 { grid-row:span 2; }
.autozone-03 { grid-column:span 1; }
.autozone-04 { grid-column:span 2; }
.autozone-05 { grid-column:span 1; }
.autozone-06 { grid-column:span 2; }
.castrol-role { margin-top:0; }
.ai-statement { display:grid; grid-template-columns:13% minmax(0,1fr); gap:1.5rem; border-top:1px solid var(--line); background:linear-gradient(180deg,var(--paper),#0b0c0a); }
.ai-statement > div { max-width:810px; }
.ai-statement h2 { margin:0 0 clamp(2.5rem,6vw,5.5rem); font-size:clamp(2.8rem,6.2vw,6.7rem); letter-spacing:-.055em; text-transform:none; }
.ai-statement h2 span { color:var(--gold); font-weight:300; letter-spacing:-.025em; }
.ai-copy { max-width:650px; font-size:clamp(1.1rem,1.65vw,1.42rem); line-height:1.43; }
.ai-copy p { margin:0 0 1.15em; }
.ai-copy .ai-closing { margin:clamp(2.75rem,6vw,5.5rem) 0 0; padding-top:1rem; border-top:1px solid var(--gold); color:var(--gold); font:300 clamp(1.35rem,2.5vw,2.35rem)/1.15 var(--sans); letter-spacing:-.025em; }
.contact { min-height:52svh; display:flex; flex-direction:column; align-items:flex-start; background:var(--gold); color:var(--paper); }
.contact h2 { margin:auto 0 1.3rem; }
.contact-link { font:700 clamp(2rem,5vw,4.8rem)/.9 var(--sans); letter-spacing:-.075em; text-transform:uppercase; text-decoration:none; border-bottom:2px solid; padding-bottom:.1em; }
.contact-note { margin:1rem 0 0; font-size:.73rem; }
.site-footer { display:flex; justify-content:space-between; gap:2rem; padding:1.1rem 4vw; background:#030302; color:var(--soft); font:400 .65rem/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:680px) { .site-header { height:64px; } .site-nav { display:none; position:absolute; top:64px; left:0; right:0; padding:1rem 4vw 1.5rem; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; gap:1.25rem; } .site-nav.is-open { display:flex; } .menu-toggle { display:none; gap:.65rem; align-items:center; } .hero { min-height:min(680px, calc(100svh - 64px)); padding-top:2.25rem; padding-bottom:2.25rem; } .hero-video { object-position:60% center; opacity:.56; } h1 { width:100%; margin-left:0; padding:0; font-size:clamp(3.1rem,15vw,5.2rem); line-height:.9; letter-spacing:-.04em; } .hero-accent { letter-spacing:-.015em; } .hero-bottom { align-items:start; flex-direction:column; gap:1rem; } .section-grid, .about.section-grid { grid-template-columns:1fr; gap:2.25rem; } .section-label { order:0; } .facts-grid { grid-template-columns:1fr; } .facts-grid > div, .facts-grid > div:nth-child(odd), .facts-grid > div:nth-child(even) { min-height:0; padding:.75rem 0; border-right:0; } .facts-grid dt { margin-bottom:.55rem; } .career-row { grid-template-columns:1fr; gap:.3rem; padding:.8rem 0; } .career-row strong { font-size:1rem; } .case-card { min-height:300px; padding:1rem; } .case-modal { width:100%; height:100dvh; } .case-header { height:64px; } .case-year-nav { margin-right:1.15rem; gap:.4rem; font-size:.64rem; } .case-year-nav-label { display:none; } .case-intro { scroll-margin-top:64px; } .case-hero { min-height:65dvh; padding:2rem 4vw; } .case-hero h2 { font-size:clamp(3.6rem,17vw,6rem); } .case-layout { grid-template-columns:1fr; gap:1.5rem; padding:2.75rem 4vw; } .case-gallery { grid-template-columns:1fr; gap:.75rem; padding:2.75rem 4vw; } .case-gallery .gallery-wide,.gallery-2022 figure:nth-child(4) { grid-column:auto; min-height:300px; } .case-gallery figure { min-height:300px; } .year-transition { padding:2.75rem 0; } .year-transition p { font-size:clamp(2.4rem,13vw,4.35rem); } .case-video { padding:0 4vw 2.75rem; } .video-slate { padding:.6rem .7rem; font-size:.58rem; } .video-play-icon { width:4rem; height:4rem; } .santander-metrics { grid-template-columns:1fr; margin-top:1.4rem; } .santander-metrics div,.santander-metrics div + div { padding:.75rem 0; border-right:0; border-bottom:1px solid var(--line); } .santander-metrics div:last-child { border-bottom:0; } .santander-video-pair { grid-template-columns:1fr; gap:.75rem; padding-bottom:2.75rem; } .santander-cajero-copy { margin-top:2.75rem; } .case-role { margin:2.75rem 4vw 0; padding-top:2.75rem; } .site-footer { flex-direction:column; gap:.75rem; } }
@media (prefers-reduced-motion:reduce) { .hero-video { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media (max-width:680px) { .menu-toggle { display:flex; } }
@media (max-width:680px) { .ai-statement { grid-template-columns:1fr; gap:1.5rem; } .ai-statement h2 { font-size:clamp(2.6rem,13vw,4.5rem); } .ai-copy { font-size:1.05rem; } }
@media (max-width:680px) { .castrol-hero { min-height:65dvh; padding:1.5rem 4vw; } .castrol-chapter-heading { grid-template-columns:1fr; gap:1.5rem; } .castrol-chapter-heading h3 { font-size:clamp(2.9rem,14vw,4.8rem); } .castrol-timeline { margin:2.75rem 0 0; } .castrol-timeline::before { left:1.25rem; } .timeline-stage,.timeline-stage-tour { grid-template-columns:3.7rem 1fr; gap:1rem; padding-bottom:2.75rem; } .timeline-marker span { width:2.5rem; height:2.5rem; font-size:.62rem; } .timeline-copy { grid-column:2; } .timeline-stage > .fpo-media,.timeline-tour-fpo { grid-column:2; } .timeline-tour-fpo { gap:.6rem; } .timeline-copy h4 { font-size:2rem; } .autozone-copy { margin:2.25rem 0 0; } .autozone-gallery { grid-template-columns:1fr 1fr; grid-auto-rows:170px; gap:.6rem; padding-bottom:2.75rem; } .autozone-01 { grid-column:span 2; grid-row:span 2; } .autozone-02 { grid-row:span 2; } .autozone-03 { grid-column:span 1; } .autozone-04 { grid-column:span 2; } .autozone-05 { grid-column:span 1; } .autozone-06 { grid-column:span 2; } .fpo-media span { font-size:.62rem; } .fpo-media small { font-size:.67rem; } }
@media (max-width:680px) { .timeline-stage > .timeline-photo,.timeline-hybrid-photos { grid-column:2; } .timeline-hybrid-photos { gap:.6rem; } }
@media (max-width:680px) { .timeline-metrics { gap:.6rem; } .timeline-metrics dt { font-size:clamp(1.35rem,8vw,1.8rem); } .timeline-metrics dd { font-size:.56rem; letter-spacing:.05em; } }