:root{
  --ink:#1C1814; --slate:#5C564E; --mute:#877F74; --line:#E8E2DA;
  --orange:#E8501A; --orange-deep:#C23E0E; --orange-soft:#FFF1E8; --orange-line:#F6CDB6;
  --cream:#FBF6F0; --cream-deep:#F5EBDF;
  --dark:#191512; --paper:#FFFFFF; --green:#1E8A5A;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
body h1,body h2,body h3,body h4,body .display{font-family:'Bricolage Grotesque',sans-serif;line-height:1.12;letter-spacing:-0.015em}
.wrap{max-width:1150px;margin:0 auto;padding:0 24px}
section{padding:96px 0}
section[id]{scroll-margin-top:62px}
.sec-cream{background:var(--cream)}
.accent{color:var(--orange)}
a{color:inherit}

/* ---- section header: eyebrow, h2, one lede line. Nothing else. ---- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-deep);background:var(--paper)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.h2{font-size:clamp(29px,3.7vw,42px);font-weight:800;margin:18px 0 0}
.lede{font-size:clamp(16.5px,1.75vw,19px);line-height:1.68;font-weight:400;color:var(--slate);max-width:62ch;margin-top:13px}
.lede strong{color:var(--ink);font-weight:600}
.sec-head{margin-bottom:44px;padding-bottom:26px;border-bottom:1.5px solid var(--line)}

/* ---- buttons ---- */
.btn{display:inline-block;font-weight:700;font-size:15.5px;border-radius:12px;padding:15px 28px;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;border:none;cursor:pointer;font-family:'Inter',sans-serif}
.btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(232,80,26,.28)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* ---- callout strip ---- */
.callout{background:var(--orange-soft);border:1.5px solid var(--orange-line);border-radius:14px;padding:17px 21px;font-size:14.6px;color:var(--ink);line-height:1.72;margin:18px 0}
.callout b{font-weight:700}
.callout.plain{background:var(--cream);border-color:var(--cream-deep)}
.sec-cream .callout.plain{background:var(--paper);border-color:var(--line)}

/* ============ STATS BAND ============
   Shared V2A component, copied verbatim from the live service pages.
   Do not restyle it here and do not rename the classes. */
.stats-band{background:var(--dark)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr}
.stat{padding:34px 30px;color:#fff}
.stat:nth-child(even){background:var(--orange)}
.stat .st-num{font-family:'Bricolage Grotesque',sans-serif;font-size:34px;font-weight:800;line-height:1.05}
.stat .st-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:8px}
.stat .st-sub{font-size:12.5px;margin-top:6px;color:rgba(255,255,255,.78);line-height:1.62}

/* ============ JUMP NAV ============ */
/* No horizontal scrolling anywhere on this nav. On desktop it is one sticky
   row. Below 900px it becomes a static grid so every option is visible on
   one screen without swiping sideways. */
.jump{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(9px);border-bottom:1.5px solid var(--line)}
.jump-in{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.jump a{flex-shrink:1;min-width:0;padding:15px 13px;font-size:13px;font-weight:600;color:var(--slate);text-decoration:none;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .18s,border-color .18s}
.jump a:hover{color:var(--ink);border-bottom-color:var(--orange)}
.jump .j-cta{margin-left:auto;background:var(--orange);color:#fff;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;border-bottom:none}
.jump .j-cta:hover{border-bottom-color:transparent;color:#fff}

/* ============ QUOTE BAND ============ */
.quote-band{position:relative;background:var(--dark);color:#fff;padding:84px 0;text-align:center;overflow:hidden}
.quote-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#241E19 1.3px,transparent 1.3px);background-size:24px 24px;opacity:.9}
.quote-band>.wrap{position:relative}
.quote-band .qm{font-family:'Bricolage Grotesque',sans-serif;font-size:60px;font-weight:800;color:var(--orange);line-height:.55;display:block;margin-bottom:16px}
.quote-band h2{font-size:clamp(28px,3.8vw,42px);font-weight:800;max-width:19ch;margin:0 auto 16px;color:#fff}
.quote-band p{color:#C9C2B8;max-width:54ch;margin:0 auto 28px;font-size:16px;line-height:1.75}
.quote-band p strong{color:#fff}
.quote-band cite{display:block;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9A9288;margin-bottom:26px}

/* ============ FAQ ============ */
.qgroup{margin-bottom:26px}
.qgroup>h3{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;padding-bottom:9px;border-bottom:1.5px solid var(--line);font-family:'Inter',sans-serif}
.qflow{display:flex;flex-direction:column;gap:9px}
.qitem{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:17px 21px;transition:border-color .3s,box-shadow .3s,opacity .3s}
.qitem-head{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.qitem-head h3{font-size:15.6px;font-weight:700;margin:0;color:var(--ink);line-height:1.4}
.qitem-mark{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);position:relative;transition:border-color .3s,background .3s}
.qitem-mark::before,.qitem-mark::after{content:"";position:absolute;background:var(--slate);transition:background .3s,transform .3s}
.qitem-mark::before{left:5px;right:5px;top:9px;height:2px}
.qitem-mark::after{top:5px;bottom:5px;left:9px;width:2px}
.qitem-body{max-height:1400px;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s}
.qitem-body p{color:var(--slate);font-size:14.6px;margin:14px 0 0;line-height:1.8;max-width:76ch}
.qitem-body p+p{margin-top:11px}
.qitem-body p strong{color:var(--ink)}
.qitem-body p.pts{color:var(--ink);font-size:14.2px;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:12px;padding:12px 15px;line-height:1.7}
.qitem-body p a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.qitem-body p a:hover{text-decoration:underline}
.qflow-js .qitem{opacity:.72}
.qflow-js .qitem .qitem-body{max-height:0;opacity:0}
.qflow-js .qitem.active{opacity:1;border-color:var(--orange);box-shadow:0 14px 32px rgba(232,80,26,.1)}
.qflow-js .qitem.active .qitem-mark{border-color:var(--orange);background:var(--orange)}
.qflow-js .qitem.active .qitem-mark::before,.qflow-js .qitem.active .qitem-mark::after{background:#fff}
.qflow-js .qitem.active .qitem-mark::after{transform:rotate(90deg)}
.qflow-js .qitem.active .qitem-body{max-height:1400px;opacity:1}

/* ============ CONTACT ============ */
.cta-band{position:relative;background:var(--dark);color:#fff;padding:96px 0;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#241E19 1.3px,transparent 1.3px);background-size:24px 24px}
.cta-grid{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.cta-band .eyebrow{background:transparent;border-color:#3A332C;color:#F1A07E}
.cta-band h2{font-size:clamp(29px,3.9vw,44px);margin:18px 0 14px;font-weight:800;color:#fff}
.cta-band h2 .accent{color:var(--orange)}
.cta-band .cta-sub{color:#C9C2B8;max-width:54ch;margin-bottom:24px;font-size:16px;line-height:1.75}
.cta-band .cta-sub strong{color:#fff}
.cta-list{list-style:none;margin-bottom:22px}
.cta-list li{position:relative;padding:8px 0 8px 30px;font-size:15px;color:#E8E2DA;line-height:1.65}
.cta-list li::before{content:"\2713";position:absolute;left:0;top:9px;width:20px;height:20px;border-radius:6px;background:rgba(232,80,26,.18);border:1.5px solid var(--orange);color:#F1A07E;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.cta-micro{font-size:13px;color:#9A9288;margin-top:18px;line-height:1.7}
.cta-micro a{color:#F1A07E;font-weight:700;text-decoration:none}
.cta-micro a:hover{text-decoration:underline}
.form-card{background:var(--paper);border-radius:20px;padding:32px;color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.32)}
.form-card h3{font-size:20px;font-weight:800;margin-bottom:6px}
.form-card .fc-sub{font-size:13.5px;color:var(--slate);margin-bottom:20px;line-height:1.6}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.f-field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.f-field input,.f-field select,.f-field textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-family:'Inter';font-size:14px;background:var(--cream);color:var(--ink)}
.f-field textarea{min-height:84px;resize:vertical}
.f-help{font-size:11.5px;color:var(--mute);margin-top:5px;line-height:1.55}
.form-card .btn{width:100%;text-align:center;margin-top:6px}
.form-note{text-align:center;font-size:12px;color:var(--mute);margin-top:12px;line-height:1.6}

/* footer. Copied from the live homepage so this page ends exactly as every
   other V2A page does: cream ground under the dark contact band, orange
   top rule, four column nav, ghost wordmark. Do not restyle it here. */
.ft{background:var(--cream);color:var(--slate);border-top:3px solid var(--orange);position:relative;overflow:hidden}
.ft-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:end;padding:80px 0 60px}
.ft-say{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.042em;line-height:1.02;font-size:clamp(1.9rem,4vw,3.15rem);color:var(--ink);max-width:14ch;margin:0}
.ft-say em{font-style:normal;color:var(--orange)}
.ft-line{position:relative;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.32rem,2.5vw,1.95rem);letter-spacing:-.042em;color:var(--ink);line-height:1.1;margin:0;max-width:19ch;background:var(--orange-soft);border:1.5px solid var(--orange-line);border-radius:22px;padding:30px 32px 32px}
.ft-line em{font-style:normal;color:var(--orange);display:block}
.ft-line::before{content:"";display:block;width:26px;height:3px;border-radius:2px;background:var(--orange);margin-bottom:16px}
.ft-em{display:inline-flex;align-items:center;gap:7px}
.ft-em a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--orange)}
.ft-em a:hover{color:var(--orange-deep)}
.ft-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;padding:52px 0 56px;border-top:1.5px solid var(--cream-deep)}
.ft h4{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;font-size:.98rem;font-weight:700;letter-spacing:-.022em;text-transform:none;margin-bottom:22px;padding:0;border:0}
.ft h4::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
.ft ul{list-style:none}
.ft li{margin-bottom:13px}
.ft-nav a{display:inline-block;font-size:.94rem;color:var(--slate);text-decoration:none;transition:color .2s,transform .2s}
.ft-nav a:hover{color:var(--orange-deep);transform:translateX(4px)}
.ft-base{border-top:1.5px solid var(--cream-deep);padding:24px 0;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--mute);position:relative;z-index:2}
.ft-base a{color:var(--mute);text-decoration:none}
.ft-base a:hover{color:var(--ink)}
.soc{display:flex;gap:9px}
.soc a{width:38px;height:38px;border:1.5px solid var(--cream-deep);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--slate);background:#fff;transition:all .2s}
.soc a:hover{border-color:var(--orange);color:#fff;background:var(--orange)}
.soc svg{width:17px;height:17px;fill:currentColor;display:block}
.ft-mark{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.055em;font-size:clamp(3.6rem,15.5vw,13rem);line-height:.78;color:var(--cream-deep);white-space:nowrap;user-select:none;padding-bottom:.06em;margin-top:14px;overflow:hidden}

/* ============ SHARED RESPONSIVE ============ */
@media(max-width:880px){
  .cta-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  section{padding:66px 0}
}
@media(max-width:640px){
  .f-row{grid-template-columns:1fr}
}
/* ============================================================
   ADDITIONS FOR THE ABOUT PAGE
   Everything above is the shared V2A stylesheet, copied verbatim
   from the live Meta Ads page. Nothing above is used except the
   tokens, .wrap, .btn and the footer. .stats-band, .jump, .qflow
   and .form-card are all present and all deliberately unused. See
   the note at the top of the file before reaching for one.
   ============================================================ */

/* ============================================================
   THE HERO. DARK, FULL BLEED, NO GRADIENT, NO DOT TEXTURE, NO
   TWO COLUMN SPLIT, NO PILL EYEBROW. Every service page on this
   site opens on cream. This one opens on the same black ground and
   the same orange backlight that sits behind both directors in
   their photographs, so the hero and the portraits below it read
   as one picture. That is the whole idea. Do not convert this back
   to the cream hero.
   The 210px of bottom padding is not spare space. It is the room
   the portraits overlap into. See .duo.
   ============================================================ */
.ahero{position:relative;background:var(--dark);color:#fff;padding:74px 0 206px;overflow:hidden;text-align:center}
.ahero::before{content:"";position:absolute;left:50%;top:-6%;width:min(1180px,132%);aspect-ratio:1/1;transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%, rgba(255,146,74,.62) 0%, rgba(232,80,26,.34) 26%, rgba(232,80,26,.10) 46%, rgba(25,21,18,0) 66%);
  pointer-events:none}
.ahero>.wrap{position:relative;max-width:940px}
.ahero .lab{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#F1A07E;margin-bottom:34px}
.ahero h1{font-size:clamp(24px,2.9vw,35px);font-weight:800;line-height:1.24;letter-spacing:-.022em;margin:40px auto 16px;max-width:44ch;color:#fff}
.ahero h1 em{font-style:normal;color:var(--orange)}
.ahero p{color:#C9C2B8;font-size:16.4px;line-height:1.74;max-width:60ch;margin:0 auto}
.ahero p strong{color:#fff;font-weight:600}

/* ============================================================
   THE DIRECTORS, IMMEDIATELY UNDER THE HERO AND OVERLAPPING IT.
   The negative margin is what pulls the two photographs up into
   the dark. It is paired with the hero's bottom padding: change
   one and change the other.
   THE IMAGE FILES ARE THE ORIGINAL STUDIO PHOTOGRAPHS AND ARE NOT
   TO BE EDITED. The two were shot at slightly different framings,
   so the matching is done here in CSS with a fixed ratio and
   object-position, never by re-cutting the files.
   ============================================================ */
.duo{position:relative;z-index:2;margin-top:-168px;padding-bottom:96px}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.dcard{display:flex;flex-direction:column}
.dphoto{aspect-ratio:77/100;border-radius:20px;overflow:hidden;background:#0F0C0A;box-shadow:0 28px 64px rgba(0,0,0,.42)}
.dphoto img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.dname{display:flex;align-items:baseline;flex-wrap:wrap;gap:11px;margin:26px 0 14px}
.dname h2{font-family:'Bricolage Grotesque',sans-serif;font-size:27px;font-weight:800;letter-spacing:-.024em}
.drole{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep);background:var(--orange-soft);border:1.5px solid var(--orange-line);border-radius:999px;padding:4px 11px}
.dcard p{font-size:16px;color:var(--slate);line-height:1.74}
.dcard p+p{margin-top:12px}
.dcard p strong{color:var(--ink);font-weight:600}
/* LinkedIn button on the name row. Same shape and hover as the footer
   social buttons, so it reads as house furniture rather than a new
   component. margin-left:auto parks it at the right edge of the row. */
.dli{margin-left:auto;align-self:center;flex:none;width:36px;height:36px;border:1.5px solid var(--line);border-radius:11px;display:inline-flex;align-items:center;justify-content:center;color:var(--slate);background:var(--paper);transition:background .2s,border-color .2s,color .2s}
.dli:hover,.dli:focus-visible{border-color:var(--orange);background:var(--orange);color:#fff}
.dli svg{width:16px;height:16px;fill:currentColor;display:block}
.dchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;padding-top:18px;border-top:1.5px solid var(--line)}
.dchips b{font-weight:700;font-size:12.8px;color:var(--ink);background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:9px;padding:6px 11px}

/* ============================================================
   THE WORDMARK IN THE HERO. THE ONE BIG MOMENT ON THE PAGE.
   The name at display size, with the distance between its two
   halves drawn as a real gap. Nothing else on this site uses type
   this large. It sits inside the dark hero on purpose: the point
   of the page is what the company is called and why, so it is the
   first thing on screen rather than a section three scrolls down.
   The outline on "Visual" degrades to a flat tint where
   text-stroke is unsupported, which still reads correctly.
   ============================================================ */
.gword{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(40px,10.4vw,124px);line-height:.94;letter-spacing:-.028em;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.6vw,34px);flex-wrap:nowrap}
/* the outlined word needs looser tracking than the solid one: at tight
   tracking the stroke of the V and the i overlap and read as a smudge */
.gword .w1{color:transparent;-webkit-text-stroke:2px #6E5B4C;paint-order:stroke fill;letter-spacing:-.012em}
@supports not ((-webkit-text-stroke:1px #000)){ .gword .w1{color:#5C4B3E} }
.gword .w2{color:var(--orange)}
.gword .rule{flex:0 0 clamp(26px,6vw,96px);height:3px;border-radius:2px;background:linear-gradient(90deg,#6E5B4C,var(--orange));position:relative;top:-.05em}

/* ---- the three dates. One strip, three lines, whole history. ---- */
.dates{padding:0 0 88px}
.dgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;border-top:1.5px solid var(--line);padding-top:34px}
.dgrid3 b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--orange-deep);margin-bottom:9px}
.dgrid3 span{display:block;font-size:15.4px;color:var(--slate);line-height:1.68}

/* ---- #saw: four lines. A heading and one sentence each. ---- */
.saw{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-top:1.5px solid var(--line)}
.saw>div{padding:30px 0;border-bottom:1.5px solid var(--line);display:grid;grid-template-columns:52px 1fr;gap:18px}
.saw .n{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:800;line-height:1;color:var(--orange-line);letter-spacing:-.03em}
.saw h3{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.saw p{font-size:15.6px;color:var(--slate);line-height:1.72}
.saw a{color:var(--orange-deep);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--orange-line)}

/* ---- #team ---- */
.bench{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:42px;align-items:start}
.bench p{font-size:16.4px;color:var(--slate);line-height:1.76}
.bench p strong{color:var(--ink);font-weight:600}
.bench a{color:var(--orange-deep);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--orange-line)}
.bench a:hover{border-bottom-color:var(--orange)}
.blist{display:flex;flex-wrap:wrap;gap:9px}
.blist span{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:11px 16px;font-size:14px;font-weight:600;color:var(--ink)}
.blist span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}

/* ---- the ending. One line, two links, never a form. ---- */
.endnote{background:var(--dark);color:#fff;padding:88px 0;text-align:center;position:relative;overflow:hidden}
.endnote::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#241E19 1.3px,transparent 1.3px);background-size:24px 24px}
.endnote>.wrap{position:relative;max-width:760px}
.endnote h2{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:-.026em;line-height:1.14;margin-bottom:26px;color:#fff}
.endnote h2 em{font-style:normal;color:var(--orange)}
.endnote .go{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.endnote .btn-ghost{border-color:#4A423A;color:#fff}
.endnote .btn-ghost:hover{background:#fff;color:var(--ink)}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  .bench{grid-template-columns:1fr;gap:26px}
  .saw{grid-template-columns:1fr;gap:0}
  .dgrid3{grid-template-columns:1fr;gap:22px}
}
@media(max-width:900px){
  section{padding:66px 0}
  .ahero{padding:80px 0 176px}
  .duo{margin-top:-140px;padding-bottom:70px}
  .dgrid{gap:26px}
  .dates{padding-bottom:66px}
  .ft-top{grid-template-columns:1fr;gap:36px;align-items:start;padding:60px 0 44px}
  .ft-line{max-width:100%}
  .ft-nav{grid-template-columns:repeat(2,1fr);gap:32px;padding:44px 0 46px}
}
@media(max-width:760px){
  /* The two directors stack. Akash stays first. Only the top card
     overlaps the hero, so the pull-up shrinks with it. */
  .dgrid{grid-template-columns:1fr;gap:44px}
  .ahero{padding:70px 0 150px}
  .duo{margin-top:-112px}
  .dphoto{aspect-ratio:1/1}
  .dphoto img{object-position:center 14%}
}
@media(max-width:680px){
  section{padding:56px 0}
  .ahero h1{font-size:clamp(21px,5.6vw,26px);max-width:100%;margin-top:30px}
  .ahero p{font-size:16px}
  .ahero .lab{letter-spacing:.16em}
  .h2{font-size:clamp(25px,7.2vw,31px)}
  .lede{font-size:16px}
  .sec-head{margin-bottom:30px;padding-bottom:20px}
  .dname h2{font-size:24px}
  .dcard p{font-size:15.6px}
  .dates{padding-bottom:56px}
  .gword{gap:12px}
  .gword .rule{flex-basis:26px;height:2.5px}
  .gword .w1{-webkit-text-stroke-width:1.5px}
  .saw>div{padding:24px 0;grid-template-columns:40px 1fr;gap:14px}
  .saw .n{font-size:26px}
  .saw h3{font-size:18.5px}
  .endnote{padding:68px 0}
  .endnote h2{font-size:clamp(24px,7vw,31px)}
  .endnote .btn{width:100%;text-align:center}
  .blist span{font-size:13.4px;padding:10px 13px}
  .ft-base{justify-content:flex-start;gap:14px}
}
@media(max-width:480px){
  .wrap{padding:0 18px}
  .ft-top{padding:48px 0 38px}
  .ft-nav{grid-template-columns:1fr;gap:26px;padding:36px 0 40px}
  .ft-line{padding:24px 24px 26px}
}
@media(max-width:360px){
  .wrap{padding:0 15px}
  .ahero h1{font-size:20px}
  .dchips b{font-size:12.2px;padding:6px 9px}
  .blist span{font-size:13px;padding:9px 12px}
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }