/* EST.31 STUDIO® — Proposta 02 — pixel-faithful to Figma 1920 canvas */
/* ---------- Helvetica Now Display ---------- */
@font-face{font-family:'Instrument Sans';font-weight:400;font-style:normal;font-display:block;src:url('../assets/fonts/InstrumentSans-Regular.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:500;font-style:normal;font-display:block;src:url('../assets/fonts/InstrumentSans-Medium.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:600;font-style:normal;font-display:block;src:url('../assets/fonts/InstrumentSans-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Helvetica Now Display';font-weight:400;font-style:normal;font-display:block;src:url('../assets/fonts/HelveticaNowDisplay-Regular.woff2') format('woff2')}
@font-face{font-family:'Helvetica Now Display';font-weight:500;font-style:normal;font-display:block;src:url('../assets/fonts/HelveticaNowDisplay-Medium.woff2') format('woff2')}
@font-face{font-family:'Helvetica Now Display';font-weight:700;font-style:normal;font-display:block;src:url('../assets/fonts/HelveticaNowDisplay-Bold.woff2') format('woff2')}

/* ---------- scale: 1u = 1px on the 1920 Figma canvas ---------- */
:root{
  --u:calc(100vw / 1920);
  --dark:#1d1d1f; --black:#0e0e0e; --offw:#fcfcf4; --cream:#ece9e4;
  --mute:#6a6a6b; --mute2:#6a6a6a; --body:#4a4a4c; --ghost:#d8d4cb; --soft:#b4b4b4;
  --line:#3a3a3c; --hair:#d8d4cb; --white:#fff;
  --mx:calc(var(--u) * 60);
  --gut:calc(var(--u) * 40);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Helvetica Now Display','Helvetica Neue',Helvetica,Arial,sans-serif;background:var(--white);color:var(--dark);-webkit-font-smoothing:antialiased;font-size:calc(var(--u)*16);line-height:1.47}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---------- header (shared, Figma: 100 tall, logo 124x28 @60,38, nav Medium 14 @1384..1847, y46) ---------- */
.site-header{position:sticky;top:0;z-index:50;height:calc(var(--u)*100);background:var(--cream);color:var(--dark)}
.site-header.dark{background:#000;color:var(--offw)}
.site-header .logo{position:absolute;left:var(--mx);top:calc(var(--u)*38);display:block;color:var(--dark)}
.site-header.dark .logo{color:var(--cream)}
.site-header .logo svg{height:calc(var(--u)*28);width:auto;display:block}
.site-nav{position:absolute;left:calc(var(--u)*1384);top:calc(var(--u)*46);width:calc(var(--u)*463);display:flex;justify-content:space-between;font-size:calc(var(--u)*14);font-weight:500;letter-spacing:.01em;line-height:.9}
.site-nav a{transition:opacity .2s}
.site-nav a:hover{opacity:.55}

/* ---------- home: reel + statement ---------- */
.reel-band{background:var(--cream);height:calc(var(--u)*1080)}
.reel-band .media{width:100%;height:100%;border-radius:calc(var(--u)*4)}
.reel-band .media img{border-radius:calc(var(--u)*4)}
.play-tri{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--u)*48);height:calc(var(--u)*54);pointer-events:none}
.play-tri svg{width:100%;height:100%;display:block}
.statement-sec{background:var(--cream);height:calc(var(--u)*462);position:relative}
.statement-sec h1{position:absolute;left:var(--mx);top:calc(var(--u)*70);width:calc(var(--u)*834);font-size:calc(var(--u)*72);font-weight:500;line-height:1;letter-spacing:-.01em;color:var(--dark)}
.statement-sec .more{position:absolute;left:var(--mx);top:calc(var(--u)*330);font-size:calc(var(--u)*20);font-weight:500;line-height:1.47;color:var(--dark)}
.statement-sec .more:hover{opacity:.55}

/* ---------- media primitives ---------- */
.media{position:relative;overflow:hidden;background:#e8e4dc}
.media img{width:100%;height:100%;object-fit:cover}
.media.r-1013{aspect-ratio:1800/1013}
.media.r-1156{aspect-ratio:1800/1156}
.media.r-pair{aspect-ratio:880/1142}
.media.r-1503{aspect-ratio:1800/1503}
.is-video::after{content:"";position:absolute;inset:auto auto calc(var(--u)*18) calc(var(--u)*18);width:calc(var(--u)*44);height:calc(var(--u)*44);border-radius:50%;background:rgba(14,14,14,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23ece9e4'/%3E%3C/svg%3E") center/50% no-repeat;backdrop-filter:blur(4px);transition:transform .25s}
.media[data-drive]:hover::after{transform:scale(1.1)}
.drive-player{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.auto-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.feed{display:flex;flex-direction:column;gap:var(--gut);padding:0 var(--mx)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.trio{display:grid;grid-template-columns:601fr 496fr 623fr;gap:var(--gut)}
.trio .stack{display:flex;flex-direction:column;justify-content:space-between;gap:var(--gut)}
.trio .stack img{width:100%;height:auto;display:block;object-fit:cover}
.duo{display:grid;grid-template-columns:812fr 948fr;gap:var(--gut)}
.duo .panel{background:#d9e3f0;display:flex;align-items:center;justify-content:center;aspect-ratio:812/1291}
.duo .panel img{width:76%;height:auto;object-fit:contain}
.duo .media{aspect-ratio:948/1291}

/* ---------- home: work (cream) ---------- */
.work-sec{background:var(--cream);height:calc(var(--u)*1662);position:relative}
.work-sec h2{position:absolute;left:var(--mx);top:calc(var(--u)*70);font-size:calc(var(--u)*28);font-weight:500;letter-spacing:-.01em;line-height:1.47}
.work-grid{position:absolute;left:0;top:calc(var(--u)*164);width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0}
.tile{display:block;height:calc(var(--u)*742);position:relative}
.tile .media{aspect-ratio:960/611;background:#ddd8cf}
.tile .media img{transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.tile:hover .media img{transform:scale(1.04)}
.tile h3{position:absolute;left:var(--mx);top:calc(var(--u)*629);font-size:calc(var(--u)*17.5);font-weight:700;letter-spacing:0;line-height:1.47;white-space:nowrap}
.tile .desc{position:absolute;left:var(--mx);top:calc(var(--u)*655);width:calc(var(--u)*904);font-size:calc(var(--u)*15.3);font-weight:500;line-height:1.47;color:var(--dark);opacity:.4}
.tile.col2 h3,.tile.col2 .desc{left:calc(var(--u)*20)}

/* ---------- home: what we do (cream) ---------- */
.wwd{background:var(--cream);padding:calc(var(--u)*70) 0 calc(var(--u)*63)}
.wwd .statement{margin-left:var(--mx);width:calc(var(--u)*1500);font-size:calc(var(--u)*42);font-weight:400;line-height:1.05;letter-spacing:0}
/* flat 8-row accordion (one row per service, no category grouping) */
.acc{margin:calc(var(--u)*48) var(--mx) 0}
.acc details{position:relative}
.acc details::after{content:"";position:absolute;left:0;right:0;top:calc(var(--u)*119);height:1px;background:rgba(29,29,31,.18)}
.acc details:last-child::after{display:none}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*120);font-size:calc(var(--u)*24);font-weight:500;line-height:1.1}
.acc summary::-webkit-details-marker{display:none}
.acc summary .plus{font-family:'Instrument Sans',sans-serif;font-size:calc(var(--u)*28);font-weight:400;transition:transform .3s;line-height:1.21}
.acc details[open] summary .plus{transform:rotate(45deg)}
.acc .inner{padding:0 0 calc(var(--u)*44);display:grid;grid-template-columns:11fr 7fr;gap:var(--gut)}
.acc .inner .expl{font-size:calc(var(--u)*18);font-weight:500;color:var(--dark);max-width:calc(var(--u)*880);line-height:1.4}
.acc .inner .items{font-size:calc(var(--u)*14);color:var(--mute);line-height:1.6}

/* ---------- studio / technology: section titles + pillars + credentials grid ---------- */
.studio-sec{padding-top:calc(var(--u)*70)}
.sec-title{font-size:calc(var(--u)*90);font-weight:600;letter-spacing:-.02em;line-height:1;text-transform:uppercase;max-width:calc(var(--u)*1200);margin-top:calc(var(--u)*18)}
.pillars{font-size:calc(var(--u)*16);font-weight:500;color:var(--dark);margin-top:calc(var(--u)*40)}
.pillars span{margin-right:calc(var(--u)*40)}
.credentials{display:grid;grid-template-columns:calc(var(--u)*560) 1fr 1fr 1fr;gap:var(--gut);margin-top:calc(var(--u)*32);padding-top:calc(var(--u)*32);border-top:1px solid var(--hair)}
.credentials .video{background:var(--dark);aspect-ratio:560/270;position:relative;display:flex;align-items:center;justify-content:center;margin-top:calc(var(--u)*18)}
.credentials .video span{position:absolute;top:calc(var(--u)*20);right:calc(var(--u)*20);font-size:calc(var(--u)*13);color:var(--cream)}
.credentials .video .tri{width:0;height:0;border-style:solid;border-width:calc(var(--u)*13) 0 calc(var(--u)*13) calc(var(--u)*20);border-color:transparent transparent transparent var(--cream)}
.credentials .col h6{font-size:calc(var(--u)*13);font-weight:500;color:var(--mute);text-transform:uppercase;margin-bottom:calc(var(--u)*18)}
.credentials .col p,.credentials .col li{font-size:calc(var(--u)*18);font-weight:500;line-height:1.5}

/* ---------- technology page: posts list ---------- */
.posts{margin-top:calc(var(--u)*32);border-top:1px solid var(--hair)}
.post{display:grid;grid-template-columns:calc(var(--u)*270) 1fr calc(var(--u)*480);gap:var(--gut);align-items:center;border-bottom:1px solid var(--hair);padding:calc(var(--u)*32) 0}
.post .cat{font-size:calc(var(--u)*13);font-weight:500;color:var(--mute);text-transform:uppercase}
.post h3{font-size:calc(var(--u)*32);font-weight:500;letter-spacing:-.01em}
.post .meta{font-size:calc(var(--u)*14);color:var(--mute)}

/* ---------- case pages: sticky sidebar (absolute blocks, tops per page) + media column 640..1860 ---------- */
.case-split{display:grid;grid-template-columns:calc(var(--u)*580) calc(var(--u)*1220);gap:0;padding:calc(var(--u)*70) var(--mx) 0;align-items:start}
.case-split .sidebar{position:sticky;top:calc(var(--u)*170);height:calc(var(--u)*900)}
.case-split .sidebar>*{position:absolute;left:0}
.case-split .sidebar h1{top:0;font-size:calc(var(--u)*65);font-weight:500;letter-spacing:0;line-height:.98;text-transform:uppercase;white-space:nowrap}
.case-split .sidebar .support{width:calc(var(--u)*429);font-size:calc(var(--u)*18);font-weight:500;line-height:1.05;color:var(--dark)}
.case-split .sidebar .support p+p{margin-top:1.05em}
.case-split .sidebar .lbl{font-size:calc(var(--u)*12);font-weight:500;line-height:1.05;letter-spacing:0;color:var(--soft);text-transform:uppercase}
.case-split .sidebar .role,.case-split .sidebar .stats{width:calc(var(--u)*429);font-size:calc(var(--u)*18);font-weight:500;line-height:1.05}
.case-split .media-col{display:flex;flex-direction:column;gap:var(--gut)}
.case-split .media-col .media.full{aspect-ratio:1220/686}
.case-split .media-col .media.photo{aspect-ratio:1220/784}
.case-split .media-col .media.site{aspect-ratio:1220/1019}
.case-split .media-col .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.case-split .media-col .pair .media{aspect-ratio:590/766}
.case-split .media-col .trio{grid-template-columns:calc(var(--u)*407) calc(var(--u)*336) calc(var(--u)*422);column-gap:calc(var(--u)*27.5)}
.case-split .media-col .trio .stack{gap:calc(var(--u)*12)}
.case-split .media-col .duo{grid-template-columns:calc(var(--u)*550) calc(var(--u)*643);column-gap:calc(var(--u)*27);margin-bottom:calc(var(--u)*2)}
.case-split .media-col .duo .panel{aspect-ratio:550/875;align-items:flex-start}
.case-split .media-col .duo .panel img{margin-top:calc(var(--u)*218)}
.case-split .media-col .duo .media{aspect-ratio:643/875}

/* ---------- home: dark short bands ---------- */
.band{position:relative;display:block;background:var(--dark);color:var(--cream)}
.band.stu{height:calc(var(--u)*300)}
.band.mtd{height:calc(var(--u)*302)}
.band h2{position:absolute;left:var(--mx);top:calc(var(--u)*95);font-size:calc(var(--u)*48);font-weight:500;letter-spacing:0;line-height:1.47;color:var(--cream)}
.band .sub{position:absolute;left:var(--mx);top:calc(var(--u)*185);width:calc(var(--u)*760);font-size:calc(var(--u)*15);font-weight:500;line-height:1.35;color:var(--soft)}
.band.mtd .sub{width:calc(var(--u)*459);line-height:1.47}
.band .go{position:absolute;left:calc(var(--u)*1826);top:calc(var(--u)*95);font-size:calc(var(--u)*36);font-weight:400;line-height:1.47;color:var(--cream);transition:transform .3s}
.band:hover .go{transform:translate(calc(var(--u)*6),calc(var(--u)*-6))}

/* ---------- type shared (inner pages) ---------- */
.eyebrow{font-size:calc(var(--u)*13);font-weight:500;letter-spacing:.32em;color:var(--mute);text-transform:uppercase}
.giant{font-weight:600;letter-spacing:-.02em;line-height:.99;font-size:calc(var(--u)*140);text-transform:uppercase}
.lead{font-size:calc(var(--u)*28);line-height:1.25;max-width:calc(var(--u)*1240)}
.support{font-size:calc(var(--u)*16);line-height:1.5;color:var(--body)}
.arrow-link{font-weight:600;font-size:calc(var(--u)*20);display:inline-block;transition:opacity .2s}
.arrow-link:hover{opacity:.55}

/* ---------- case pages ---------- */
.case-top{padding:calc(var(--u)*70) var(--mx) 0}
.case-top .tag{margin-top:calc(var(--u)*28)}
.case-hero{margin:calc(var(--u)*32) var(--mx) 0}
.case-info{display:grid;grid-template-columns:2fr 1fr;gap:calc(var(--u)*60) var(--gut);padding:calc(var(--u)*86) var(--mx) 0}
.case-info .lead{grid-column:1/-1}
.case-info .support{max-width:calc(var(--u)*880)}
.role h5{margin-bottom:calc(var(--u)*16)}
.role ul{font-size:calc(var(--u)*16);font-weight:500;line-height:1.62}
.metrics{padding:calc(var(--u)*70) var(--mx) 0}
.metrics .rule{height:1px;background:var(--hair);margin-top:calc(var(--u)*16)}
.metrics .vals{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);padding-top:calc(var(--u)*22)}
.metrics .v{font-size:calc(var(--u)*160);font-weight:600;color:var(--ghost);letter-spacing:-.02em;line-height:1}
.metrics .c{font-size:calc(var(--u)*12);letter-spacing:.14em;color:var(--mute);text-transform:uppercase;margin-top:calc(var(--u)*16);max-width:calc(var(--u)*380)}
.narr{padding:calc(var(--u)*64) var(--mx) calc(var(--u)*56);max-width:calc(var(--u)*940 + var(--mx))}
.narr .support{margin-top:calc(var(--u)*16)}
.next-band{background:var(--dark);color:var(--cream);display:block;position:relative;height:calc(var(--u)*200);padding:calc(var(--u)*76) var(--mx) 0;font-size:calc(var(--u)*38);font-weight:500;letter-spacing:-.01em;line-height:1.47;margin-top:calc(var(--u)*60);transition:background .3s}
.next-band span{display:inline-block}
.next-band:hover{background:#000}

/* ---------- method / format pages ---------- */
.page-top{padding:calc(var(--u)*70) var(--mx) 0}
.page-top .lead{margin-top:calc(var(--u)*44)}
.page-top .cta{margin-top:calc(var(--u)*40);display:inline-block}
.sec{padding:calc(var(--u)*70) var(--mx) 0}
.sec .rule{height:1px;background:var(--hair);margin-bottom:calc(var(--u)*26)}
.cards5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gut);margin-top:calc(var(--u)*34)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);margin-top:calc(var(--u)*34)}
.cards5 .card h4,.cards3 .card h4{font-size:calc(var(--u)*20);font-weight:600;margin:calc(var(--u)*12) 0 calc(var(--u)*10)}
.cards5 .card p,.cards3 .card p{font-size:calc(var(--u)*14);color:var(--body);line-height:1.5}
.stages{margin-top:calc(var(--u)*40)}
.stage{display:grid;grid-template-columns:calc(var(--u)*270) 1fr calc(var(--u)*620);gap:var(--gut);align-items:center;border-top:1px solid var(--hair);padding:calc(var(--u)*30) 0 calc(var(--u)*44)}
.stage .num{font-size:calc(var(--u)*150);font-weight:600;color:var(--ghost);line-height:.9}
.stage h3{font-size:calc(var(--u)*56);font-weight:600;letter-spacing:-.01em}
.stage .gate{display:block;margin-top:calc(var(--u)*18);font-size:calc(var(--u)*12);letter-spacing:.3em;color:var(--mute)}
.stage p{font-size:calc(var(--u)*16);color:var(--body);line-height:1.5}
.stage .label{font-size:calc(var(--u)*32);font-weight:600;text-transform:uppercase;letter-spacing:-.01em;color:var(--dark)}
.rows{margin-top:calc(var(--u)*40)}
.rowi{display:grid;grid-template-columns:calc(var(--u)*520) 1fr calc(var(--u)*380);gap:var(--gut);align-items:center;border-top:1px solid var(--hair);padding:calc(var(--u)*36) 0}
.rowi:last-child{border-bottom:1px solid var(--hair)}
.rowi .v{font-size:calc(var(--u)*110);font-weight:600;color:var(--ghost);letter-spacing:-.01em;line-height:1}
.rowi h3{font-size:calc(var(--u)*36);font-weight:600;letter-spacing:-.01em;max-width:calc(var(--u)*560)}
.rowi .note{font-size:calc(var(--u)*12);letter-spacing:.22em;color:var(--mute);text-transform:uppercase;text-align:right}
.rowi .expl{grid-column:2/4;font-size:calc(var(--u)*15);color:var(--body);max-width:calc(var(--u)*560);margin-top:calc(var(--u)*-14);padding-bottom:calc(var(--u)*8)}
.closing{padding:calc(var(--u)*110) var(--mx) calc(var(--u)*120)}
.closing h2{font-size:calc(var(--u)*150);font-weight:600;letter-spacing:-.02em;line-height:1;text-transform:uppercase}

/* ---------- contact ---------- */
.page-dark{background:var(--black);color:var(--cream)}
.page-dark .eyebrow{color:var(--mute)}
.contact-intro{font-size:calc(var(--u)*24);color:var(--soft);max-width:calc(var(--u)*880);margin-top:calc(var(--u)*40)}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*44) var(--gut);margin-top:calc(var(--u)*64)}
.cform .field{display:flex;flex-direction:column;gap:calc(var(--u)*8)}
.cform .field.full{grid-column:1/-1}
.cform label{font-size:calc(var(--u)*11);letter-spacing:.26em;color:var(--mute);text-transform:uppercase}
.cform input,.cform select,.cform textarea{background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--offw);font-family:inherit;font-size:calc(var(--u)*19);padding:calc(var(--u)*8) 0 calc(var(--u)*14);border-radius:0;outline:none}
.cform select{appearance:none}
.cform textarea{resize:vertical;min-height:calc(var(--u)*52)}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--cream)}
.cform ::placeholder{color:var(--soft);opacity:.85}
.send{grid-column:1/-1;justify-self:start;margin-top:calc(var(--u)*8);background:var(--cream);color:var(--dark);border:0;font-family:inherit;font-weight:600;font-size:calc(var(--u)*19);padding:calc(var(--u)*18) calc(var(--u)*40);border-radius:999px;cursor:pointer;transition:transform .25s,background .25s}
.send:hover{background:var(--offw);transform:translateY(-2px)}
.contacts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);margin-top:calc(var(--u)*80)}
.contacts .c label{display:block;font-size:calc(var(--u)*11);letter-spacing:.26em;color:var(--mute);text-transform:uppercase;margin-bottom:calc(var(--u)*10)}
.contacts .c p,.contacts .c a{font-size:calc(var(--u)*19);color:var(--offw)}

/* ---------- footer (Figma variant B: shared by all inner pages) ---------- */
.site-footer{background:var(--black);color:var(--offw);height:calc(var(--u)*1000);position:relative;margin-top:0}
.site-footer>*{position:absolute}
.site-footer h6{left:var(--mx);top:calc(var(--u)*80);font-size:calc(var(--u)*14);font-weight:500;line-height:.9;letter-spacing:.01em}
.site-footer address{left:var(--mx);top:calc(var(--u)*130);font-style:normal;font-size:calc(var(--u)*15);font-weight:500;color:var(--soft);line-height:1.1;letter-spacing:.01em}
.site-footer .menu-l{left:calc(var(--u)*700);top:calc(var(--u)*80);font-size:calc(var(--u)*12);font-weight:500;color:var(--mute2);text-transform:uppercase;line-height:1.47;letter-spacing:.02em}
.site-footer .menu{left:calc(var(--u)*700);top:calc(var(--u)*130);font-size:calc(var(--u)*15);font-weight:500;color:var(--soft);line-height:1.1;letter-spacing:.01em}
.site-footer .soc-l{left:calc(var(--u)*1100);top:calc(var(--u)*80);font-size:calc(var(--u)*12);font-weight:500;color:var(--mute2);text-transform:uppercase;line-height:1.47;letter-spacing:.02em}
.site-footer .soc{left:calc(var(--u)*1100);top:calc(var(--u)*130);font-size:calc(var(--u)*15);font-weight:500;color:var(--soft);line-height:1.1;letter-spacing:.01em}
.site-footer .start{left:calc(var(--u)*1500);top:calc(var(--u)*126);font-size:calc(var(--u)*20);font-weight:500;color:var(--offw);line-height:1.2}
.site-footer .copy{left:var(--mx);top:calc(var(--u)*330);font-size:calc(var(--u)*12);font-weight:500;color:var(--mute2);letter-spacing:.02em;line-height:1.47}
.site-footer .sq{left:var(--mx);top:calc(var(--u)*474);width:calc(var(--u)*22);height:calc(var(--u)*22);background:var(--cream)}
.site-footer .tmrw{left:calc(var(--u)*96);top:calc(var(--u)*472);font-size:calc(var(--u)*22);font-weight:500;color:var(--offw);line-height:1.47}
.site-footer .giant-close{left:calc(var(--u)*55);top:calc(var(--u)*550);font-size:calc(var(--u)*170);font-weight:500;letter-spacing:0;line-height:1;color:var(--cream);text-transform:uppercase;white-space:nowrap}
.site-footer a:hover{color:var(--offw)}

/* ---------- reveal ---------- */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}

/* ---------- page-specific ---------- */
.bg-cream{background:#ECE9E4}
.bg-white{background:#fff}
.bg-cream .media{background:#e3dfd7}

/* ---------- institutional pages: canvas positioned 1:1 to the Figma frame (coordinates relative to Page Body top = 100) ---------- */
.canvas{position:relative;width:100%}
.canvas>*{position:absolute;margin:0}
.canvas h1,.canvas h2{text-transform:none}
.canvas .cta:hover{opacity:.55}
.canvas .rect{pointer-events:none}
.canvas img.img{object-fit:cover;display:block}
.canvas input.field{background:transparent;border:0;outline:0;padding:0;height:calc(var(--u)*24);font-family:inherit;font-size:calc(var(--u)*20);font-weight:500;line-height:1.2;color:var(--offw);border-radius:0}
.canvas input.field::placeholder{color:var(--soft);opacity:1}
.canvas button.submit{background:var(--cream);color:var(--dark);border:0;border-radius:999px;font-family:inherit;font-size:calc(var(--u)*20);font-weight:500;line-height:1.2;padding:0 0 0 calc(var(--u)*40);text-align:left;cursor:pointer;display:flex;align-items:center;gap:calc(var(--u)*14);transition:transform .25s,background .25s}
.canvas button.submit:hover{background:var(--offw);transform:translateY(-2px)}
.canvas p a:hover{opacity:.55}

/* ---------- mobile (≤900px): flow fallback. Desktop is the 1920 canvas; below 900px everything stacks. ---------- */
@media (max-width:900px){
  :root{--u:0.75px;--mx:20px;--gut:16px}
  html{font-size:14px}
  .site-header{height:64px}
  .site-header .logo{left:20px;top:20px}.site-header .logo svg{height:22px}
  .site-nav{left:auto;right:16px;top:24px;width:auto;gap:12px;font-size:11px;justify-content:flex-end}
  .reel-band{height:auto;aspect-ratio:16/9}
  .statement-sec{height:auto;padding:36px 20px 40px}
  .statement-sec h1,.statement-sec .more{position:static;width:100%;font-size:34px}
  .statement-sec .more{display:inline-block;margin-top:22px;font-size:15px}
  .work-sec{height:auto;padding:32px 0 40px}
  .work-sec h2{position:static;padding:0 20px;font-size:20px;margin-bottom:20px}
  .work-grid{position:static;grid-template-columns:1fr;gap:28px}
  .tile{height:auto}
  .tile h3,.tile .desc,.tile.col2 h3,.tile.col2 .desc{position:static;padding:0 20px;width:auto;margin-top:12px;font-size:14px;white-space:normal}
  .tile .desc{margin-top:4px;font-size:13px}
  .wwd{padding:36px 0 40px}
  .wwd .statement{width:auto;margin:0 20px;font-size:19px}
  .acc{margin:24px 20px 0}
  .acc summary{height:60px;font-size:16px}
  .acc details::after{top:59px}
  .acc summary .plus{font-size:20px}
  .acc .inner{grid-template-columns:1fr}
  .band.stu,.band.mtd{height:auto;padding:36px 20px 40px}
  .band h2,.band .sub,.band .go{position:static}
  .band h2{font-size:23px}
  .band .sub{width:100%;font-size:13px;margin-top:10px}
  .band .go{display:none}
  .canvas{height:auto!important;padding:28px 0 40px}
  .canvas>*{position:static!important;width:auto!important;white-space:normal!important;margin:0 20px 14px}
  .canvas h1,.canvas h2{font-size:38px!important;line-height:1!important;margin-bottom:22px}
  .canvas .rect{height:1px!important;margin:22px 20px}
  .canvas img.img{width:100%!important;height:auto!important;aspect-ratio:418/301}
  .canvas input.field{width:100%!important;border-bottom:1px solid var(--line);height:40px;margin-bottom:22px}
  .canvas button.submit{width:auto!important;height:52px!important;padding:0 28px;margin:8px 20px 30px}
  .case-split{grid-template-columns:1fr;padding:32px 20px 0}
  .case-split .sidebar{position:static;height:auto}
  .case-split .sidebar>*{position:static;width:auto}
  .case-split .sidebar h1{font-size:32px;white-space:normal}
  .case-split .sidebar .support{margin-top:22px}
  .case-split .sidebar .lbl{margin-top:26px}
  .case-split .sidebar .role,.case-split .sidebar .stats{margin-top:8px}
  .case-split .media-col{margin-top:30px}
  .case-split .media-col .pair,.case-split .media-col .trio,.case-split .media-col .duo{grid-template-columns:1fr}
  .case-split .media-col .trio .stack{flex-direction:row}
  .next-band{height:auto;padding:26px 20px;font-size:18px}
  .site-footer{height:auto;padding:40px 20px 40px}
  .site-footer>*{position:static}
  .site-footer h6,.site-footer .menu-l,.site-footer .soc-l{margin-top:22px}
  .site-footer address,.site-footer .menu,.site-footer .soc{margin-top:8px}
  .site-footer .start{display:inline-block;margin-top:26px}
  .site-footer .copy{margin-top:30px}
  .site-footer .sq{display:inline-block;vertical-align:middle;margin:30px 8px 0 0}
  .site-footer .tmrw{display:inline-block;margin-top:30px;font-size:16px}
  .site-footer .giant-close{font-size:44px;margin-top:24px;white-space:normal}
}