/*
Davies Chirwa Studio — consolidated stylesheet
Duplicate selectors merged (semicolon-joined); media queries last.
*/
/*
Theme Name: Davies Chirwa Studio
Theme URI: https://davieschirwa.com/
Author: OpenAI
Description: A cinematic blue-and-white personal brand WordPress theme with high-resolution imagery, curved wave transitions, glass panels, glow effects, subtle motion, and responsive editorial sections.
Version: 2.0.0
Requires at least: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: davies-chirwa-studio
*/
:root{--dc-navy:#071d59;--dc-navy-2:#0b347a;--dc-blue:#0877ff;--dc-cyan:#59c8ff;--dc-ice:#eff8ff;--dc-ice-2:#dcebfb;--dc-white:#fff;--dc-text:#092761;--dc-muted:#5876a2;
  --dc-glass:rgba(255,255,255,.72);--dc-glass-soft:rgba(255,255,255,.48);--dc-line:rgba(32,118,221,.20);--dc-shadow:0 20px 70px rgba(9,67,138,.15);--dc-shadow-strong:0 30px 85px rgba(2,27,74,.28);
  --dc-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;--dc-sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--dc-script:"Caveat","Segoe Print",cursive;--dc-container:1240px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--dc-text);font-family:var(--dc-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
::selection{background:#b8deff;color:#061e58}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dc-container{width:min(calc(100% - 42px),var(--dc-container));margin-inline:auto;position:relative;z-index:2}
.dc-section{position:relative;isolation:isolate}
.dc-eyebrow{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.19em;font-weight:800;font-size:.72rem;color:#0878e8}
.dc-eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:#0877ff;box-shadow:0 0 0 5px rgba(8,119,255,.08)}
.dc-eyebrow.light{color:#79d2ff}
.dc-eyebrow.light:before{background:#76d2ff;box-shadow:0 0 0 5px rgba(111,209,255,.12)}
.dc-section-title{font-family:var(--dc-serif);font-size:clamp(2.7rem,5vw,4.9rem);line-height:.94;letter-spacing:-.045em;color:var(--dc-navy);margin:.35rem 0 1rem}
.dc-script{font-family:var(--dc-script);font-weight:600}
.glow-ring{box-shadow:0 0 0 2px rgba(255,255,255,.72),0 0 28px rgba(32,156,255,.62),0 0 74px rgba(24,133,255,.32);box-shadow:0 0 0 9px rgba(33,140,255,.1),0 0 34px rgba(20,128,255,.36),0 0 90px rgba(71,174,255,.22)}
/* header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);border-bottom:1px solid rgba(38,108,196,.14);backdrop-filter:blur(18px) saturate(155%);-webkit-backdrop-filter:blur(18px) saturate(155%)}
.admin-bar .site-header{top:32px}
.header-inner{min-height:76px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}
.brand-mark{display:flex;flex-direction:column;min-width:140px}
.brand-title{font-family:var(--dc-serif);font-size:1.1rem;line-height:.85;font-weight:700;letter-spacing:-.04em;color:var(--dc-navy)}
.brand-subtitle{margin-top:3px;font-size:.38rem;letter-spacing:.12em;text-transform:uppercase;color:#6680a8;white-space:nowrap}
.custom-logo{max-height:58px;width:auto}
.primary-nav{display:flex;justify-content:flex-end}
.primary-nav ul{display:flex;list-style:none;margin:0;padding:0;gap:29px;align-items:center}
.primary-nav a{font-size:.88rem;font-weight:700;color:#244c86;padding:28px 0 23px;position:relative}
.primary-nav a:after{content:"";position:absolute;left:50%;right:50%;bottom:16px;height:3px;border-radius:3px;background:linear-gradient(90deg,#1798ff,#0868ea);transition:.22s ease}
.primary-nav a:hover:after,.primary-nav .current-menu-item>a:after{left:0;right:0}
.header-cta{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:999px;background:linear-gradient(180deg,#1497ff,#006de8);color:#fff;font-weight:800;font-size:.88rem;box-shadow:0 8px 25px rgba(0,109,232,.26),inset 0 1px 0 rgba(255,255,255,.58)}
.header-cta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.menu-toggle{display:none;width:46px;height:46px;border:1px solid #cce0f5;background:#fff;border-radius:50%;place-items:center;color:var(--dc-navy)}
/* hero */
.dc-hero{min-height:625px;overflow:hidden;padding:62px 0 150px;background:linear-gradient(90deg,rgba(239,249,255,.95) 0%,rgba(235,247,255,.87) 37%,rgba(13,73,143,.12) 58%,rgba(0,25,72,.2) 100%),url("../images/studio/hero-seattle-4k.jpg?v=1790467851") center/cover no-repeat;background:linear-gradient(90deg,rgba(239,249,255,.55) 0%,rgba(235,247,255,.4) 37%,rgba(13,73,143,.1) 58%,rgba(0,25,72,.2) 100%),url("../images/studio/hero-seattle-4k.jpg?v=1790467851") center/cover no-repeat;background-position:50% 42%;background:linear-gradient(90deg,rgba(239,249,255,.28) 0%,rgba(235,247,255,.18) 37%,rgba(13,73,143,.06) 58%,rgba(0,25,72,.14) 100%),url("../images/studio/hero-seattle-4k.jpg?v=1790467851") 50% 42%/cover no-repeat;filter:saturate(1.1) contrast(1.04)}
.dc-hero:after{content:"";position:absolute;z-index:1;left:-3%;right:-3%;bottom:-1px;height:145px;background:url("../images/studio/curves/wave-top.svg") center bottom/cover no-repeat;pointer-events:none;height:165px;height:clamp(110px,10vw,190px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.hero-copy{padding-top:6px}
.hero-title{font-family:var(--dc-serif);font-size:clamp(4rem,7.2vw,6.8rem);font-weight:700;line-height:.8;letter-spacing:-.06em;color:#061d59;margin:12px 0 7px;text-shadow:0 2px 0 rgba(255,255,255,.72)}
.hero-role{font-size:clamp(1.35rem,2.3vw,2rem);font-weight:750;letter-spacing:-.04em;margin:0 0 13px;color:#0a2d6b}
.hero-summary{max-width:610px;margin:0 0 22px;font-size:1.13rem;line-height:1.45;color:#244c7d}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dc-btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;border-radius:999px;padding:14px 22px;border:1px solid transparent;font-weight:850;font-size:.91rem;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}
.dc-btn:hover{transform:translateY(-2px);filter:brightness(1.035)}
.dc-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.dc-btn-primary{color:#fff;background:linear-gradient(180deg,#1c9dff,#006be8);box-shadow:0 10px 26px rgba(0,108,233,.28),inset 0 1px 0 rgba(255,255,255,.6)}
.dc-btn-glass{background:rgba(255,255,255,.54);border-color:rgba(21,91,174,.45);color:#0a306b;backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 22px rgba(15,78,148,.08)}
.dc-btn-dark{background:rgba(6,24,57,.44);border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(12px)}
.hero-location{display:flex;gap:10px;margin-top:20px;color:#244b7c;font-size:.86rem;line-height:1.25;align-items:center}
.hero-location svg{width:20px;flex:0 0 20px;fill:none;stroke:#0a5fb7;stroke-width:1.8}
.hero-location strong{display:block;color:#102f67;font-size:.94rem}
.hero-socials{display:flex;gap:10px;align-items:center;margin-left:auto}
.hero-socials a{display:flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:50%;background:rgba(10,95,183,.12);color:#0a5fb7;transition:background .25s ease,transform .25s ease}
.hero-socials a:hover{background:#0a5fb7;color:#fff;transform:translateY(-2px)}
.hero-socials svg{width:16px;height:16px;fill:currentColor;stroke:none}
.hero-visual{position:relative;min-height:410px;display:grid;place-items:center}
.hero-ring{position:relative;--d:min(31vw,410px);aspect-ratio:auto;border-radius:50%;padding:12px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.96),rgba(77,167,250,.78) 52%,#0f64c4 80%);transition:transform .12s linear;position:relative;filter:drop-shadow(0 0 14px rgba(0,154,255,.55)) drop-shadow(0 0 42px rgba(0,111,255,.34));box-shadow:0 0 0 6px rgba(78,187,255,.22),0 0 0 14px rgba(78,187,255,.10),0 0 36px rgba(22,142,255,.34)}
.hero-ring:before,.hero-ring:after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.7)}
.hero-ring:before{inset:-54px}
.hero-ring:after{inset:-100px;border-color:rgba(196,231,255,.5)}
.hero-portrait{width:100%;height:100%;object-fit:cover;object-position:50% 17%;border-radius:50%;border:1px solid rgba(255,255,255,.75)}
.ring-shimmer{position:absolute;inset:-4px;border-radius:inherit;background:conic-gradient(from 210deg,transparent 0 33%,rgba(255,255,255,.8) 36%,rgba(68,189,255,.9) 41%,transparent 46% 100%);mix-blend-mode:screen;opacity:.55;animation:spinGlow 11s linear infinite;pointer-events:none}
.orbit{position:absolute;border:1.5px solid rgba(255,255,255,.72);border-radius:50%;background:rgba(93,181,255,.12);backdrop-filter:blur(2px);box-shadow:0 0 18px rgba(255,255,255,.18);animation:floatSoft 6s ease-in-out infinite}
.orbit.one{width:62px;height:62px;top:2%;right:4%}
.orbit.two{width:82px;height:82px;left:-3%;top:14%;animation-delay:-2s}
.orbit.three{width:52px;height:52px;left:4%;bottom:8%;animation-delay:-4s}
.hero-mantra{position:absolute;right:-7%;top:3%;font-size:.76rem;line-height:1.28;font-weight:800;letter-spacing:.25em;text-transform:uppercase;color:#fff;text-shadow:0 2px 18px rgba(0,37,87,.7)}
.hero-script{position:absolute;right:-10%;bottom:5%;font-size:3rem;line-height:.75;color:#eff9ff;text-shadow:0 3px 12px rgba(0,25,74,.55);transform:rotate(-8deg)}
.hero-light{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;animation:driftGlow 11s ease-in-out infinite alternate}
.hero-light-a{width:420px;height:420px;right:7%;top:2%;background:radial-gradient(circle,rgba(81,201,255,.42),transparent 67%)}
.hero-light-b{width:560px;height:260px;left:22%;bottom:8%;background:radial-gradient(ellipse,rgba(255,255,255,.78),transparent 68%);animation-delay:-5s}
/* capability strip */
.trust-strip-wrap{position:relative;z-index:9;margin-top:-100px;padding-bottom:30px;background:transparent}
.trust-strip{display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden;border:1px solid rgba(255,255,255,.94);border-radius:24px;background:rgba(255,255,255,.76);backdrop-filter:blur(18px) saturate(150%);box-shadow:var(--dc-shadow);background:rgba(255,255,255,.6)}
.trust-item{position:relative;display:grid;grid-template-columns:42px 1fr;gap:11px;align-items:center;padding:18px 16px}
.trust-item:after{content:"";position:absolute;right:0;top:20%;bottom:20%;width:1px;background:rgba(70,129,195,.13)}
.trust-item:last-child:after{display:none}
.trust-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#0877ff;background:rgba(8,119,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
.trust-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}
.trust-item strong{display:block;font-family:var(--dc-serif);font-size:1.08rem;line-height:1;color:#0b2d68}
.trust-item span{display:block;margin-top:5px;font-size:.67rem;line-height:1.25;color:#6681a8}
/* proof timeline */
.proof-section{padding:42px 0 78px;overflow:hidden;background:linear-gradient(180deg,#f7fbff 0%,#edf7ff 55%,#f9fdff 100%),url("../images/studio/ice-blue-paper-4k.jpg") center/cover;background:linear-gradient(180deg,rgba(247,251,255,.72) 0%,rgba(237,247,255,.65) 55%,rgba(249,253,255,.72) 100%),url("../images/studio/ice-blue-paper-4k.jpg") center/cover;background:transparent;margin-top:-90px;padding-top:180px}
.proof-section:after{content:"";position:absolute;left:-4%;right:-4%;bottom:-35px;height:130px;background:url("../images/studio/curves/ribbon.svg") center bottom/cover no-repeat;opacity:.9;pointer-events:none}
.proof-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.proof-title{font-size:clamp(2.75rem,4.9vw,4.45rem);max-width:650px;margin-bottom:.4rem}
.proof-subtitle{margin:0 0 20px;font-size:1rem;color:#42658f}
.timeline-card{position:relative;padding:18px 24px 18px 31px;border-radius:20px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.9);box-shadow:0 16px 50px rgba(31,94,160,.11),inset 0 1px 0 #fff;backdrop-filter:blur(13px)}
.timeline-card:before{content:"";position:absolute;left:20px;top:28px;bottom:28px;width:2px;background:linear-gradient(#168cff,#5fbcff)}
.timeline-row{display:grid;grid-template-columns:1fr auto;gap:15px;align-items:center;min-height:42px;padding:7px 0 7px 18px;border-bottom:1px solid rgba(31,104,186,.12);position:relative}
.timeline-row:last-child{border-bottom:0}
.timeline-dot{position:absolute;left:-16px;top:50%;width:10px;height:10px;border-radius:50%;background:#0b7df4;box-shadow:0 0 0 5px rgba(11,125,244,.07);transform:translateY(-50%)}
.timeline-label{font-size:.89rem;font-weight:650;line-height:1.28;color:#163b73}
.timeline-row time{font-size:.82rem;font-weight:800;color:#1a69c9}
.proof-photo-frame{position:relative;overflow:hidden;margin:8px 0 0;border-radius:34px 34px 85px 34px;border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 70px rgba(11,61,126,.24),0 0 0 5px rgba(255,255,255,.28);background:#fff;transition:transform .12s linear}
.proof-photo-frame img{width:100%;height:560px;object-fit:cover;object-position:center}
.proof-photo-frame:before{content:"";position:absolute;z-index:2;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -110px 100px rgba(3,35,83,.28);pointer-events:none}
.proof-photo-frame figcaption{position:absolute;z-index:4;left:28px;right:28px;bottom:22px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.proof-photo-frame figcaption span:not(:last-child):after{content:"|";margin-left:14px;color:#8dd5ff}
.proof-frame-glow{position:absolute;z-index:3;inset:-30%;background:conic-gradient(from 0deg,transparent 0 45%,rgba(91,199,255,.25) 50%,transparent 55% 100%);animation:spinGlow 14s linear infinite;pointer-events:none}
.proof-glow{position:absolute;width:480px;height:480px;right:-140px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(31,150,255,.2),transparent 66%);animation:driftGlow 10s ease-in-out infinite alternate}
/* work */
.work-section{padding:105px 0 115px;overflow:hidden;color:#fff;background:linear-gradient(180deg,#0b4a91 0%,#062d68 44%,#041f53 100%);background:linear-gradient(180deg,rgba(11,74,145,.92) 0%,rgba(6,45,104,.93) 44%,rgba(4,31,83,.95) 100%),url("../images/studio/work-bg.jpg?v=1790468151") center/cover no-repeat;background:linear-gradient(180deg,rgba(11,74,145,.62) 0%,rgba(6,45,104,.68) 44%,rgba(4,31,83,.8) 100%),url("../images/studio/work-bg.jpg?v=1790468151") center/cover no-repeat;margin-top:-34px;padding-top:110px}
.work-section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 73% 22%,rgba(86,183,255,.2),transparent 28%),linear-gradient(115deg,rgba(255,255,255,.04),transparent 35% 65%,rgba(86,181,255,.09));z-index:-1}
.work-section:after{content:"";position:absolute;left:-3%;right:-3%;bottom:-1px;height:110px;background:url("../images/studio/curves/wave-bottom.svg") center bottom/cover no-repeat;opacity:.94;background:url("../images/studio/curves/wave-bottom-dark.svg") center bottom/cover no-repeat;height:130px}
.work-heading{position:relative}
.work-heading h2{font-family:var(--dc-serif);font-size:clamp(2.7rem,4.3vw,4.2rem);line-height:.98;letter-spacing:-.04em;margin:.32rem 0 .5rem;color:#fff;max-width:800px}
.work-heading .intro{max-width:760px;color:#d8eaff;margin:0 0 26px}
.work-script{position:absolute;right:13%;top:8px;font-size:3.2rem;line-height:.72;color:#d9f2ff;transform:rotate(-8deg);display:none}
.work-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.work-card{overflow:hidden;border-radius:26px;background:rgba(255,255,255,.94);color:var(--dc-text);border:1px solid rgba(255,255,255,.72);box-shadow:0 22px 48px rgba(1,18,54,.26);transition:transform .24s ease,box-shadow .24s ease}
.work-card:hover{transform:translateY(-7px);box-shadow:0 28px 60px rgba(1,18,54,.34)}
.work-card-media{height:190px;overflow:hidden}
.work-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.work-card:hover .work-card-media img{transform:scale(1.055)}
.work-card-body{padding:17px 17px 16px}
.work-card h3{font-family:var(--dc-serif);font-size:1.55rem;line-height:1;margin:0 0 7px}
.work-card p{font-size:.81rem;line-height:1.38;color:#47638d;margin:0 0 15px;min-height:56px}
.work-card-link{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:850;color:#0872eb}
.work-card-link .arrow{width:30px;height:30px;border:1px solid #bad9fa;border-radius:50%;display:grid;place-items:center}
.work-orb{position:absolute;right:-160px;top:80px;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(87,201,255,.28),transparent 66%);filter:blur(1px);animation:driftGlow 9s ease-in-out infinite alternate}
/* large credentials orbit */
.credential-stage{padding:88px 0 118px;overflow:hidden;background:linear-gradient(180deg,#f7fcff,#eaf6ff 58%,#f8fcff),url("../images/studio/ice-blue-paper-4k.jpg") center/cover;background:linear-gradient(180deg,rgba(247,252,255,.7),rgba(234,246,255,.62) 58%,rgba(248,252,255,.7)),url("../images/studio/ice-blue-paper-4k.jpg") center/cover;padding:72px 0 84px;background:transparent;margin-top:-90px;padding-top:180px}
.credential-stage:after{content:"";position:absolute;left:-4%;right:-4%;bottom:-38px;height:132px;background:url("../images/studio/curves/ribbon.svg") center bottom/cover no-repeat;opacity:.88}
.credential-heading{text-align:center;max-width:850px;margin:0 auto 34px;margin-bottom:22px}
.credential-heading .dc-section-title{font-size:clamp(2.85rem,5.4vw,5.2rem);margin-bottom:.4rem}
.credential-heading>p{margin:.35rem auto .65rem;color:#476993}
.credential-heading blockquote{margin:10px auto 0;font-family:var(--dc-serif);font-style:italic;font-size:1.25rem;line-height:1.1;color:#154a91}
.credential-heading blockquote small{display:block;font-family:var(--dc-sans);font-size:.68rem;font-style:normal;margin-top:7px;color:#5e7da7}
.credential-orbit-layout{display:grid;grid-template-columns:minmax(190px,1fr) minmax(420px,1.45fr) minmax(190px,1fr);gap:34px;align-items:center;min-height:650px;margin-top:-18px}
.credential-core{position:relative;display:grid;place-items:center;min-height:620px;transition:transform .12s linear;min-height:660px}
.credential-core-photo{position:relative;--d:min(46vw,570px);aspect-ratio:auto;border-radius:50%;padding:14px;background:linear-gradient(145deg,#a9e5ff,#0b73e6 55%,#053d9d);z-index:2;width:min(50vw,560px);filter:drop-shadow(0 0 16px rgba(0,154,255,.4)) drop-shadow(0 0 46px rgba(0,111,255,.28));box-shadow:0 0 0 6px rgba(78,187,255,.18),0 0 0 14px rgba(78,187,255,.08),0 0 36px rgba(22,142,255,.28)}
.credential-core-photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;border:2px solid rgba(255,255,255,.8)}
.credential-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.credential-rings span{position:absolute;border-radius:50%;border:1.3px solid rgba(84,168,241,.32);animation:pulseRing 7s ease-in-out infinite}
.credential-rings span:nth-child(1){width:620px;height:620px;width:660px;height:660px}
.credential-rings span:nth-child(2){width:690px;height:690px;opacity:.55;animation-delay:-2.3s;width:730px;height:730px}
.credential-rings span:nth-child(3){width:760px;height:760px;opacity:.3;animation-delay:-4.6s;width:800px;height:800px}
.credential-side{display:flex;flex-direction:column;justify-content:space-around;gap:44px;min-height:560px}
.credential-badge{display:grid;grid-template-columns:78px 1fr;gap:18px;align-items:center;position:relative}
.credential-side-left .credential-badge{text-align:right;grid-template-columns:1fr 78px}
.credential-side-left .credential-badge .credential-icon{grid-column:2;grid-row:1}
.credential-side-left .credential-badge>span:last-child{grid-column:1;grid-row:1}
.credential-badge>span:last-child{font-size:.78rem;line-height:1.27;color:#264a7e}
.credential-badge strong{color:#0a2f6b}
.credential-icon{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#28a8ff,#0069e8 65%,#004fb8);color:#fff;border:3px solid rgba(255,255,255,.88);box-shadow:0 0 0 2px rgba(57,147,238,.24),0 14px 31px rgba(0,106,224,.25),0 0 30px rgba(67,179,255,.24)}
.credential-icon svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.65}
.dots-icon{font-size:1.4rem;letter-spacing:.12em}
.credential-aurora{position:absolute;border-radius:50%;filter:blur(4px);opacity:.55;animation:driftGlow 12s ease-in-out infinite alternate}
.credential-aurora-a{width:560px;height:560px;left:-260px;top:20%;background:radial-gradient(circle,rgba(83,196,255,.28),transparent 68%)}
.credential-aurora-b{width:640px;height:460px;right:-260px;top:12%;background:radial-gradient(ellipse,rgba(8,114,246,.18),transparent 70%);animation-delay:-6s}
/* impact */
.impact-section{min-height:680px;padding:100px 0 112px;overflow:hidden;color:#fff;background:linear-gradient(90deg,rgba(0,13,35,.88),rgba(0,18,50,.46) 44%,rgba(0,12,31,.38)),var(--impact-bg) center 35%/cover no-repeat;background:linear-gradient(90deg,rgba(0,13,35,.6),rgba(0,18,50,.3) 44%,rgba(0,12,31,.25)),var(--impact-bg) center 35%/cover no-repeat;background:linear-gradient(90deg,rgba(0,13,35,.7),rgba(0,18,50,.42) 44%,rgba(0,12,31,.32)),var(--impact-bg) center 35%/cover no-repeat;background:linear-gradient(90deg,rgba(0,13,35,.45),rgba(0,18,50,.22) 44%,rgba(0,12,31,.15)),var(--impact-bg) center 35%/cover no-repeat}
.impact-section:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(2,16,39,.1) 52%,rgba(0,13,34,.72));z-index:-1}
.impact-copy-wrap{max-width:760px;margin-left:max(0px,calc((100vw - min(calc(100vw - 42px),var(--dc-container)))/2));margin-right:auto;max-width:none;margin:0;position:static;max-width:760px;margin-left:max(0px,calc((100vw - min(calc(100vw - 42px),var(--dc-container)))/2));margin-right:auto}
.impact-copy-wrap h2{font-family:var(--dc-serif);font-size:clamp(3.2rem,6vw,5.8rem);line-height:.86;letter-spacing:-.045em;margin:.4rem 0 1rem;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.25)}
.impact-copy-wrap>p{max-width:510px;font-size:1.05rem;color:#e9f4ff}
.impact-copy-wrap blockquote{position:absolute;right:8%;top:8%;width:300px;font-family:var(--dc-script);font-size:2.35rem;line-height:.92;color:#eef9ff;transform:rotate(-6deg);text-align:center;text-shadow:0 4px 25px rgba(0,0,0,.35);position:static;right:auto;top:auto;width:auto;max-width:460px;margin:20px 0 0;transform:none;text-align:left;text-shadow:none;position:static;right:auto;top:auto;width:auto;transform:none;text-align:left;position:static;right:auto;top:auto;width:auto;max-width:460px;margin:20px 0 0;transform:none;text-align:left;text-shadow:none}
.impact-copy-wrap blockquote small{display:block;margin-top:14px;font-family:var(--dc-sans);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;margin-top:8px}
.impact-stats-bar{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,.52);border-radius:26px;background:rgba(217,237,255,.26);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 20px 50px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.46);overflow:hidden;position:static;left:auto;bottom:auto;transform:none;display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start;max-width:760px;margin:28px auto 0;border:none;background:none;box-shadow:none;backdrop-filter:none;border-radius:0;margin-top:36px;position:absolute;left:50%;bottom:40px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,.52);border-radius:26px;background:rgba(217,237,255,.26);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 20px 50px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.46);overflow:hidden;max-width:none;margin:0}
.impact-stat{display:grid;grid-template-columns:50px 1fr;gap:12px;align-items:center;padding:22px 24px;position:relative;flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(222,242,255,.32));border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);box-shadow:0 10px 26px rgba(11,74,127,.14),inset 0 1px 0 rgba(255,255,255,.5);padding:22px 24px}
.impact-stat:not(:last-child):after{content:"";position:absolute;right:0;top:22%;bottom:22%;width:1px;background:rgba(255,255,255,.24);display:none;content:"";position:absolute;right:0;top:22%;bottom:22%;width:1px;background:rgba(255,255,255,.24);display:block}
.impact-stat>svg{width:38px;height:38px;fill:none;stroke:#e8f6ff;stroke-width:1.6;width:26px;height:26px;flex:0 0 26px;border-radius:50%;padding:7px;box-sizing:content-box;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(217,239,255,.55));stroke:#0879f1;width:38px;height:38px;flex:0 0 38px;padding:0;background:none;border-radius:0}
.impact-stat strong{display:block;font-family:var(--dc-serif);font-size:2rem;line-height:.9;font-size:1.3rem}
.impact-stat span{display:block;margin-top:5px;font-size:.72rem;line-height:1.28;color:#e3effb;color:#e9f4ff}
.impact-vignette{position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(0,0,0,.28);pointer-events:none}
/* CTA */
.conversation{min-height:520px;padding:78px 0 86px;overflow:hidden;color:#fff;background:linear-gradient(90deg,rgba(2,30,71,.84),rgba(5,42,87,.35) 50%,rgba(5,28,68,.38)),url("../images/studio/cta-seattle-4k.jpg") center/cover no-repeat;background:linear-gradient(180deg,rgba(4,31,64,.35) 0%,rgba(3,27,56,.55) 57%,rgba(3,24,49,.82) 100%),url("../images/studio/cta-seattle-4k.jpg") center 40%/cover no-repeat}
.conversation:after{content:"";position:absolute;left:-4%;right:-4%;bottom:-1px;height:110px;background:url("../images/studio/curves/wave-bottom.svg") center bottom/cover no-repeat;display:none;background:url("../images/studio/curves/wave-bottom-dark.svg") center bottom/cover no-repeat;height:130px}
.conversation-grid{display:grid;grid-template-columns:1fr .75fr;gap:40px;align-items:end;min-height:360px}
.cta-copy{max-width:690px;align-self:center}
.cta-copy h2{font-family:var(--dc-serif);font-size:clamp(3.25rem,5.7vw,5.7rem);line-height:.87;letter-spacing:-.045em;margin:.35rem 0 1rem;color:#fff}
.cta-copy p{max-width:600px;color:#eef7ff;margin:0 0 23px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}
.cta-portrait{position:relative;align-self:end;justify-self:center;width:min(34vw,420px)}
.cta-portrait img{width:100%;max-height:390px;object-fit:cover;object-position:50% 13%;filter:drop-shadow(0 25px 38px rgba(0,0,0,.3));mask-image:linear-gradient(#000 0 82%,transparent 100%)}
.cta-script{position:absolute;right:-24%;top:3%;font-size:2.7rem;line-height:.78;color:#fff;transform:rotate(-8deg);text-shadow:0 4px 20px rgba(0,0,0,.35)}
.conversation-glow{position:absolute;width:540px;height:540px;right:9%;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(67,179,255,.25),transparent 68%);animation:driftGlow 10s ease-in-out infinite alternate}
/* footer */
.site-footer{position:relative;padding:65px 0 28px;background:linear-gradient(180deg,#fbfdff,#fff);color:#274b7d;position:relative;background:transparent;padding-top:0}
.footer-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:34px;align-items:center}
.footer-brand .brand-title{font-size:1.7rem}
.footer-location{display:flex;gap:7px;align-items:center;margin-top:12px;font-size:.74rem}
.footer-location svg{width:16px;height:16px;fill:none;stroke:#0c67c6;stroke-width:1.8}
.footer-menu ul{display:flex;list-style:none;margin:0;padding:0;gap:24px}
.footer-menu a{font-size:.72rem;font-weight:700;color:#315888}
.footer-social{display:flex;justify-content:flex-end;gap:12px}
.footer-social a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid #c9def2;color:#0a2c66;background:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.footer-social svg{width:17px;height:17px;fill:currentColor}
.footer-bottom{display:flex;justify-content:space-between;gap:25px;padding-top:30px;margin-top:28px;border-top:1px solid #e3edf6;font-size:.68rem;color:#7890af;border-top-color:rgba(255,255,255,.16)}
.footer-quote{font-family:var(--dc-serif);font-style:italic;font-size:.86rem;color:#5a74a0;color:rgba(255,255,255,.6)}
/* reveal and motion — disabled, content shows immediately */
.reveal-up,.reveal-scale{opacity:1;transform:none;transition:none}
.is-revealed{opacity:1;transform:none}
.js-parallax{will-change:transform}
@keyframes spinGlow{to{transform:rotate(360deg)}}
@keyframes floatSoft{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes driftGlow{0%{transform:translate3d(-12px,-8px,0) scale(.98)}100%{transform:translate3d(18px,14px,0) scale(1.05)}}
@keyframes pulseRing{0%,100%{transform:scale(.985);opacity:.25}50%{transform:scale(1.02);opacity:.62}}
/* content pages */
.content-shell,.entry-shell{padding:80px 0;background:linear-gradient(180deg,#f7fbff,#fff)}
.content-card{max-width:900px;margin:0 auto;padding:42px;border:1px solid #dceaf7;border-radius:24px;background:#fff;box-shadow:var(--dc-shadow)}
.content-card .entry-title,.entry-shell .entry-title{font-family:var(--dc-serif);font-size:clamp(3rem,6vw,5rem);line-height:.95;color:var(--dc-navy);margin-top:0}
.entry-shell{padding:80px 0}
.entry-shell .entry-title{font-family:var(--dc-serif);font-size:clamp(3rem,6vw,5rem);color:var(--dc-navy)}
.entry-content{max-width:820px}
.entry-content h2,.entry-content h3{font-family:var(--dc-serif);color:var(--dc-navy)}
/* responsive */
/* fixes: decorative script text was overlapping real headings at real content widths */
/* fix: hero photo was washed out under too-opaque light scrim vs. reference */
/* real photographic backgrounds to close visual gap with concept reference */
.impact-inset-photo{position:absolute;left:6%;bottom:170px;width:300px;max-width:26vw;margin:0;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.35);box-shadow:0 25px 60px rgba(0,0,0,.4);z-index:1;bottom:300px;position:static;width:100%;max-width:none;margin:0;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.35);box-shadow:0 25px 60px rgba(0,0,0,.4)}
.impact-inset-photo img{width:100%;height:220px;object-fit:cover;display:block;width:100%;height:360px;object-fit:cover;display:block}
/* let the new photos actually show through the overlays */
/* ===== GPT round-2 critique: continuous atmosphere + hero + footer continuity + impact chips ===== */
body.dc-studio{position:relative}
body.dc-studio::before{content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(235,248,255,.76) 0%,
      rgba(232,247,255,.52) 27%,
      rgba(217,239,255,.24) 49%,
      rgba(18,76,132,.06) 68%,
      rgba(5,38,76,.14) 100%),
    radial-gradient(circle at 57% 43%,
      rgba(62,169,255,.18) 0%,
      rgba(82,177,255,.08) 31%,
      transparent 57%);background:
    radial-gradient(1400px 420px at 50% 120px, rgba(59,169,255,.36), transparent 68%),
    radial-gradient(1000px 300px at 6% 950px, rgba(71,181,255,.24), transparent 72%),
    radial-gradient(1050px 340px at 94% 1600px, rgba(36,155,255,.26), transparent 72%),
    radial-gradient(1300px 400px at 50% 2700px, rgba(58,156,255,.24), transparent 76%),
    radial-gradient(1000px 320px at 4% 3400px, rgba(71,181,255,.20), transparent 72%),
    radial-gradient(1050px 340px at 96% 4900px, rgba(36,155,255,.20), transparent 72%),
    linear-gradient(180deg,#f7fbff 0%,#edf6ff 22%,#f7fbff 48%,#e8f3ff 72%,#f8fbff 100%)}
/* let the atmosphere bleed through the light sections instead of opaque white */
/* hero: bring the skyline forward, add a halo behind the portrait */
.hero-ring::before{content:"";
  position:absolute;
  width:118%;height:118%;left:-9%;top:-9%;
  border-radius:50%;
  z-index:-1;
  background:radial-gradient(circle,rgba(64,178,255,.5) 0%,rgba(64,178,255,.18) 45%,transparent 72%);
  filter:blur(6px);content:"";position:absolute;inset:-15%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.30) 0 42%,rgba(83,189,255,.20) 54%,rgba(0,105,255,.12) 63%,transparent 74%);
  filter:blur(12px);z-index:-2}
/* footer + CTA share one continuous skyline scene instead of cutting to white */
.site-footer::before{content:"";
  position:absolute;
  inset:-140px 0 0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(3,24,49,.82) 0%,rgba(3,20,42,.94) 40%,#03182f 100%)}
.site-footer,.site-footer a{color:rgba(255,255,255,.88)}
.site-footer .footer-h{color:#fff}
/* impact stats: individual glass chips instead of one bordered bar */
/* fix: inset photo was overlapping the impact stat chips */
/* boost atmosphere intensity slightly per GPT critique — it read too flat */
/* impact section: real two-column grid instead of absolute-positioned pieces fighting each other */
.impact-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:54px;align-items:center;max-width:1240px}
/* ===== GPT round-3 critique: impact must be full-bleed photo again, not a 2-col grid ===== */
/* credentials circle: bigger, with a very faint world-map glow behind it (GPT round-3, item 6/8) */
.credential-core::before{content:"";
  position:absolute;
  inset:-40px;
  z-index:0;
  border-radius:50%;
  opacity:.07;
  background:
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(8,119,255,.5) 56%, transparent 58%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(8,119,255,.4) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(8,119,255,.4) 18px 19px);
  mask-image:radial-gradient(circle, black 60%, transparent 75%);background:
    radial-gradient(ellipse 48% 55% at 50% 58%,
      rgba(37,145,255,.3) 0%,
      rgba(76,177,255,.16) 35%,
      rgba(132,207,255,.08) 55%,
      transparent 76%);
  opacity:1}
/* ===== GPT round-4: compress dead vertical space, strengthen the world-map glow ===== */
/* real atmosphere texture: use the generated bokeh image directly in the light sections */
/* fix: wave-bottom is white-filled but sits between two DARK sections (Work->Impact, CTA->Footer) — use a dark variant so it doesn't look like a stray white sliver */
.proof-section:after,.credential-stage:after{height:150px;height:clamp(110px,10vw,190px)}
/* ===== fix real crop bugs: these two work-card photos had faces cut off entirely under object-position:center ===== */
.work-card-media img[src*="navy-event"]{object-position:center 22%}
.work-card-media img[src*="portrait-blue"]{object-position:center 12%}
/* ===== proper 4-layer glow system (outer bloom, ring, illuminated border, photo) per GPT breakdown ===== */
.hero-ring::after{content:"";position:absolute;inset:-4%;border-radius:50%;
  border:2px solid rgba(113,220,255,.65);
  box-shadow:0 0 8px rgba(255,255,255,.85),0 0 20px rgba(0,172,255,.7),inset 0 0 12px rgba(87,206,255,.4);
  z-index:-1}
.credential-core-photo::before{content:"";position:absolute;inset:8%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(85,183,255,.14) 55%,transparent 72%);
  filter:blur(22px)}
/* ===== GPT review round 1: de-fog the hero, add localized hot-blue glow ===== */
.dc-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 62% 34%, rgba(56,174,255,.34), transparent 26%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.22), transparent 16%)}
/* ===== GPT review round 1: deeper/bolder curve transitions, stronger orbit glow ===== */
.work-section:after,.conversation:after{height:clamp(110px,10vw,190px)}
/* ===== people-section: rebuilt LIGHT per verified reference (was wrongly dark full-bleed) ===== */
.people-section{padding:70px 0 60px;overflow:hidden;background:radial-gradient(ellipse 55% 90% at 18% 52%,rgba(99,190,255,.22),transparent 70%),linear-gradient(180deg,#f4faff 0%,#e5f3ff 55%,#f8fcff 100%)}
.people-layout{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(330px,1.2fr) minmax(230px,.75fr);gap:clamp(24px,3vw,52px);align-items:center}
.people-photo{position:relative;width:115%;margin:0 0 0 -15%;aspect-ratio:1.61/1;overflow:hidden;border-radius:0 120px 120px 0;box-shadow:0 25px 60px rgba(9,67,138,.22)}
.people-photo img{width:100%;height:100%;object-fit:cover;display:block}
.people-photo-tag{position:absolute;left:20px;bottom:20px;color:#fff;font-weight:800;font-size:.78rem;line-height:1.3;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.people-copy .dc-eyebrow{color:#0878e8}
.people-copy h2{font-family:var(--dc-serif);font-size:clamp(2.1rem,3.4vw,3.1rem);line-height:1.02;letter-spacing:-.03em;color:var(--dc-navy);margin:.3rem 0 .8rem}
.people-copy p{color:#3a5f8f;font-size:.98rem;line-height:1.5;max-width:480px}
.people-quote{font-family:var(--dc-serif);font-style:italic;font-size:1.05rem;line-height:1.35;color:#154a91;text-align:left;margin:0}
.people-quote small{display:block;font-family:var(--dc-sans);font-style:normal;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#6681a8;margin-top:10px}
.people-values{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin-top:10px;background:rgba(255,255,255,.6);border:1px solid rgba(122,188,244,.36);border-radius:22px;box-shadow:0 15px 35px rgba(44,117,191,.10),inset 0 1px rgba(255,255,255,.9)}
.people-values .impact-stat{background:none;border:none;box-shadow:none;backdrop-filter:none;border-radius:0;padding:18px 20px}
.people-values .impact-stat>svg{background:none;padding:0}
.people-values .impact-stat strong{color:var(--dc-navy)}
.people-values .impact-stat span{color:#4b6c98}
.people-values .impact-stat:not(:last-child){border-right:1px solid rgba(122,188,244,.3)}

/* ===== responsive: media queries last so they can override ===== */
@media (max-width:1120px){.header-inner{grid-template-columns:auto 1fr auto}.primary-nav ul{gap:18px}.hero-grid{grid-template-columns:1fr 1fr}.hero-mantra{right:0}.hero-script{right:-2%}.proof-grid{gap:32px}.proof-photo-frame img{height:520px}.work-cards{grid-template-columns:repeat(2,1fr)}.credential-orbit-layout{grid-template-columns:190px 1fr 190px;gap:18px}.credential-core-photo{--d:min(48vw,520px)}.credential-rings span:nth-child(1){width:560px;height:560px}.credential-rings span:nth-child(2){width:620px;height:620px}.credential-rings span:nth-child(3){width:680px;height:680px}.credential-badge{grid-template-columns:66px 1fr;gap:12px}.credential-side-left .credential-badge{grid-template-columns:1fr 66px}.credential-icon{width:66px;height:66px}.impact-copy-wrap blockquote{right:4%;width:255px;font-size:2rem}.impact-stat{padding:18px 15px}.footer-grid{grid-template-columns:1fr auto}.footer-social{grid-column:2}.footer-menu{grid-row:2;grid-column:1/3}}
@media (max-width:860px){.header-inner{grid-template-columns:1fr auto auto}.brand-mark{min-width:0}.brand-subtitle{white-space:normal}.primary-nav{position:fixed;left:18px;right:18px;top:86px;display:none;border-radius:24px;background:rgba(255,255,255,.97);box-shadow:0 25px 70px rgba(4,33,78,.18);padding:18px}.primary-nav.is-open{display:block}.primary-nav ul{display:grid;gap:0}.primary-nav a{padding:12px 7px}.primary-nav a:after{display:none}.menu-toggle{display:grid}.header-cta{padding:11px 14px}.header-cta span{display:none}.dc-hero{padding-top:44px;min-height:auto}.hero-grid,.proof-grid,.conversation-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-summary{margin-inline:auto}.hero-actions,.hero-location,.hero-socials{justify-content:center}.hero-visual{margin-top:30px}.hero-ring{--d:min(66vw,390px)}.hero-mantra{right:4%}.hero-script{right:1%}.trust-strip-wrap{margin-top:-78px}.trust-strip{grid-template-columns:repeat(2,1fr)}.trust-item:nth-child(5){grid-column:1/3}.proof-section{padding-top:38px}.proof-photo-frame{max-width:680px;margin-inline:auto}.proof-photo-frame img{height:500px}.work-script{position:static;margin:14px 0;font-size:2.8rem;transform:rotate(-5deg)}.credential-stage{padding-top:72px}.credential-orbit-layout{grid-template-columns:1fr;gap:26px;min-height:auto}.credential-core{order:1;min-height:560px}.credential-side{min-height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;order:2}.credential-side-right{order:3}.credential-badge,.credential-side-left .credential-badge{display:flex;flex-direction:column;text-align:center!important;gap:9px}.credential-side-left .credential-badge .credential-icon,.credential-side-left .credential-badge>span:last-child{grid-column:auto;grid-row:auto}.credential-core-photo{--d:min(78vw,520px)}.credential-rings span:nth-child(1){width:560px;height:560px}.credential-rings span:nth-child(2){width:610px;height:610px}.credential-rings span:nth-child(3){display:none}.impact-section{min-height:760px;padding-top:80px}.impact-copy-wrap{margin-inline:auto;text-align:center}.impact-copy-wrap>p{margin-inline:auto}.impact-copy-wrap blockquote{position:static;margin:30px auto 0;transform:rotate(-4deg)}.impact-stats-bar{position:absolute;bottom:35px;grid-template-columns:repeat(2,1fr)}.impact-stat:nth-child(2):after{display:none}.conversation-grid{text-align:center}.cta-copy{margin-inline:auto}.cta-actions{justify-content:center}.cta-portrait{width:min(65vw,390px)}.cta-script{right:-5%}.footer-grid{grid-template-columns:1fr;text-align:center}.footer-menu,.footer-social{grid-row:auto;grid-column:auto}.footer-menu ul,.footer-social{justify-content:center}.footer-bottom{justify-content:center;flex-wrap:wrap;text-align:center}}
@media (max-width:560px){.dc-container{width:min(calc(100% - 26px),var(--dc-container))}.site-header{position:sticky}.header-inner{min-height:68px}.brand-title{font-size:1.55rem}.brand-subtitle{font-size:.45rem}.dc-hero{padding:36px 0 130px;background-position:57% center}.hero-title{font-size:3.55rem}.hero-role{font-size:1.2rem}.hero-summary{font-size:.98rem}.hero-ring{--d:76vw}.hero-ring:before{inset:-32px}.hero-ring:after{inset:-60px}.hero-mantra{font-size:.59rem;right:0}.hero-script{display:none}.trust-strip-wrap{margin-top:-72px}.trust-strip{grid-template-columns:1fr}.trust-item:nth-child(5){grid-column:auto}.trust-item:after{display:none}.proof-title{font-size:2.55rem}.timeline-card{padding-right:14px}.timeline-row{grid-template-columns:1fr 56px}.timeline-label{font-size:.77rem}.timeline-row time{font-size:.7rem;text-align:right}.proof-photo-frame img{height:380px}.work-section{padding:84px 0 96px}.work-cards{grid-template-columns:1fr}.work-card-media{height:220px}.credential-heading .dc-section-title{font-size:2.75rem}.credential-core{min-height:430px}.credential-core-photo{--d:84vw}.credential-rings span:nth-child(1){width:390px;height:390px}.credential-rings span:nth-child(2){width:430px;height:430px}.credential-side{grid-template-columns:1fr 1fr;gap:22px}.credential-icon{width:66px;height:66px}.credential-badge>span:last-child{font-size:.7rem}.impact-section{min-height:900px;padding-top:72px;background-position:56% 35%}.impact-copy-wrap h2{font-size:3.15rem}.impact-stats-bar{bottom:42px;grid-template-columns:1fr;width:calc(100% - 26px)}.impact-stat:not(:last-child):after{top:auto;left:18px;right:18px;bottom:0;width:auto;height:1px}.conversation{padding-top:68px}.cta-copy h2{font-size:3.1rem}.cta-portrait{width:82vw}.footer-menu ul{flex-wrap:wrap;gap:15px}.footer-bottom{padding-top:20px;margin-top:20px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ring-shimmer,.orbit,.hero-light,.proof-frame-glow,.proof-glow,.work-orb,.credential-rings span,.credential-aurora,.conversation-glow{animation:none!important}.reveal-up,.reveal-scale{opacity:1;transform:none;transition:none}.js-parallax{transform:none!important}.work-card,.work-card-media img,.dc-btn{transition:none}}
@media (max-width:860px){.impact-inset-photo{display:none}}
@media (max-width:860px){.impact-stats-bar{justify-content:center}}
@media (max-width:860px){.impact-inner{grid-template-columns:1fr}.impact-inset-photo img{height:260px}}
@media (max-width:860px){.impact-stats-bar{position:absolute;bottom:35px;grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.people-layout{grid-template-columns:1fr}.people-photo{width:100%;margin-left:0;border-radius:28px;aspect-ratio:16/10}.people-quote{margin-top:14px}.people-values{grid-template-columns:repeat(2,1fr)}.people-values .impact-stat:nth-child(2){border-right:none}}

/* ===== mobile density pass (audit task 6): sections were 1.4-2.6 screens tall ===== */

/* proof caption: give it a real scrim so it never sits unreadable on the photo */
.proof-photo-frame figcaption{background:linear-gradient(180deg,rgba(4,30,66,0),rgba(4,26,58,.82) 55%,rgba(3,22,50,.92));padding:26px 20px 12px;left:0;right:0;bottom:0}
.proof-photo-frame:before{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}

/* ===== credentials section: real supplied background artwork replaces my CSS approximations ===== */
.credential-stage{
  background:url("../images/studio/credentials-bg.webp?v=1790473285") center top/cover no-repeat;
}
/* the artwork already carries the map, ribbons, orbital ring and nodes — retire the CSS stand-ins */
.cred-map,.bg-sweep-cred,.credential-aurora{display:none}
/* frosted glass over the artwork so it reads as atmosphere, not a competing picture */
.cred-ribbons{
  display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 46%, rgba(255,255,255,.55), rgba(255,255,255,.18) 55%, transparent 74%),
    radial-gradient(ellipse 40% 30% at 12% 22%, rgba(214,238,255,.45), transparent 70%),
    radial-gradient(ellipse 40% 30% at 88% 28%, rgba(214,238,255,.40), transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.16) 45%,rgba(232,244,255,.34));
  backdrop-filter:blur(6px) saturate(122%) brightness(1.04);
  -webkit-backdrop-filter:blur(6px) saturate(122%) brightness(1.04);
}
.credential-stage>.dc-container{position:relative;z-index:2}
/* ring, pulse rings and connector nodes restored — this artwork has no baked ring */
.credential-core-photo{box-shadow:0 0 0 10px rgba(255,255,255,.55),0 0 46px rgba(22,142,255,.34)}

/* fit the photo INSIDE the artwork's orbital ring and align their centres */
.credential-core-photo{--d:min(38vw,470px);transform:none}
.credential-core{min-height:560px}

/* badge labels must stay readable where the artwork turns deep blue at the edges */
.credential-badge>span:last-child{
  color:#0a2f6b;
  text-shadow:0 1px 0 rgba(255,255,255,.95),0 0 10px rgba(255,255,255,.9),0 0 22px rgba(255,255,255,.75);
}
.credential-badge strong{color:#06224f}

/* ===== circles: explicit matched width/height (Safari can stretch an aspect-ratio grid item into an ellipse) ===== */
.hero-ring,.credential-core-photo{
  width:var(--d);height:var(--d);
  aspect-ratio:auto;
  flex:0 0 auto;align-self:center;justify-self:center;
  border-radius:50%;
}
.hero-ring>img,.credential-core-photo>img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ===== section seams: dissolve the hard lines so the theme flows through ===== */
.dc-section{position:relative}
/* light -> dark: the dark section fades UP into the light one above it */
.work-section::before,
.conversation::before{
  content:"";position:absolute;left:0;right:0;top:-1px;bottom:auto;
  height:clamp(110px,13vw,210px);
  z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(236,246,255,1) 0%,
    rgba(234,245,255,.92) 16%,
    rgba(228,241,255,.70) 34%,
    rgba(214,234,255,.42) 54%,
    rgba(200,226,255,.18) 74%,
    rgba(190,220,255,0) 100%);
}
/* the work section's inner radial glow moved off ::before so the seam can own it */
.work-section{background-blend-mode:normal}
/* keep the work section's inner glow, it used ::before before — move it to a separate layer */
.work-orb{z-index:0}
/* dark -> light: soften the bottom edge of dark sections */
.work-section::after,
.conversation::after{filter:drop-shadow(0 -10px 22px rgba(255,255,255,.35))}
/* light -> light: blush the join between proof and credentials */
.credential-stage{
  box-shadow:0 -70px 90px -40px rgba(255,255,255,.9) inset,0 70px 90px -40px rgba(255,255,255,.75) inset;
}
.proof-section{box-shadow:0 70px 90px -50px rgba(255,255,255,.85) inset}
/* people section blends both ways */
.people-section{
  box-shadow:0 -80px 90px -50px rgba(244,250,255,.95) inset,0 80px 90px -50px rgba(244,250,255,.9) inset;
}
.dc-container,.hero-grid,.proof-grid,.work-cards,.credential-orbit-layout,.people-layout,.conversation-grid{position:relative;z-index:2}

/* ===== MOTION LAYER ===== */
:root{--ease-out:cubic-bezier(.22,.8,.25,1)}

/* buttons: lift, shine sweep, magnetic nudge */
.dc-btn,.header-cta{position:relative;overflow:hidden;transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out),filter .32s var(--ease-out)}
.dc-btn::after,.header-cta::after{
  content:"";position:absolute;top:-60%;left:-40%;width:35%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-160%) rotate(12deg);pointer-events:none;
}
.dc-btn:hover::after,.header-cta:hover::after{animation:btnShine .85s var(--ease-out) forwards}
@keyframes btnShine{to{transform:translateX(420%) rotate(12deg)}}
.dc-btn:hover,.header-cta:hover{transform:translateY(-3px) scale(1.02)}
.dc-btn:active,.header-cta:active{transform:translateY(-1px) scale(.99)}
.dc-btn .arrow,.dc-btn svg:last-child{transition:transform .32s var(--ease-out)}
.dc-btn:hover svg:last-child{transform:translateX(4px)}

/* nav links: underline grows + tiny rise */
.primary-nav a{transition:color .25s var(--ease-out),transform .25s var(--ease-out)}
.primary-nav a:hover{color:#0a61d6;transform:translateY(-1px)}

/* work cards: 3D tilt + image push-in + link arrow travel */
.work-card{transform-style:preserve-3d;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.work-card .work-card-media img{transition:transform .8s var(--ease-out),filter .5s var(--ease-out)}
.work-card:hover .work-card-media img{transform:scale(1.08);filter:saturate(1.08)}
.work-card:hover .work-card-link .arrow{transform:translateX(5px);border-color:#1a86f5;background:rgba(26,134,245,.1)}
.work-card-link .arrow{transition:transform .32s var(--ease-out),border-color .32s,background .32s}

/* credential badges: icon lifts and glows, label brightens */
.credential-badge{transition:transform .35s var(--ease-out)}
.credential-icon{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.credential-badge:hover{transform:translateY(-3px)}
.credential-badge:hover .credential-icon{transform:scale(1.09) rotate(-4deg);box-shadow:0 0 0 3px rgba(57,147,238,.3),0 16px 34px rgba(0,106,224,.34),0 0 40px rgba(67,179,255,.5)}

/* capability strip items */
.trust-item{transition:transform .32s var(--ease-out)}
.trust-item:hover{transform:translateY(-3px)}
.trust-item .trust-icon{transition:transform .32s var(--ease-out),background .32s}
.trust-item:hover .trust-icon{transform:scale(1.12);background:rgba(8,119,255,.16)}

/* value chips */
.people-values .impact-stat{transition:transform .32s var(--ease-out),background .32s}
.people-values .impact-stat:hover{transform:translateY(-2px);background:rgba(255,255,255,.55)}

/* photos react: gentle zoom + glow */
.people-photo img,.proof-photo-frame img{transition:transform .9s var(--ease-out)}
.people-photo:hover img,.proof-photo-frame:hover img{transform:scale(1.045)}
.credential-core-photo,.hero-ring{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.credential-core-photo:hover{transform:scale(1.02)}

/* ambient drifting orbs in sections */
.m-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(1px);
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.85),rgba(140,205,255,.35) 55%,transparent 72%);
  animation:orbFloat 14s ease-in-out infinite}
.m-orb.o2{animation-duration:19s;animation-delay:-5s}
.m-orb.o3{animation-duration:23s;animation-delay:-11s}
@keyframes orbFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(18px,-26px,0) scale(1.08)}66%{transform:translate3d(-14px,16px,0) scale(.95)}}

/* cursor-follow glow that lives behind content */
.cursor-glow{position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  pointer-events:none;z-index:1;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle,rgba(86,183,255,.20),rgba(86,183,255,.07) 45%,transparent 68%);
  mix-blend-mode:screen}
body.has-pointer .cursor-glow{opacity:1}

@media(hover:none),(prefers-reduced-motion:reduce){
  .dc-btn::after,.header-cta::after{display:none}
  .m-orb{animation:none}
  .cursor-glow{display:none}
  .work-card,.credential-badge,.trust-item{transition:none}
}

/* ===== ONE continuous background for everything below the hero ===== */
.flow-scene{position:relative;isolation:isolate}
.flow-scene-bg{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* CSS owns the light/dark rhythm (locked to real section positions);
     the artwork below supplies ribbons + texture only */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.50) 0%,
      rgba(255,255,255,.42) 18%,
      rgba(255,255,255,.34) 40%,
      rgba(236,246,255,.22) 49%,
      rgba(7,32,70,.55) 53.5%,
      rgba(5,26,58,.86) 58%,
      rgba(4,22,50,.90) 64%,
      rgba(5,26,58,.84) 70%,
      rgba(90,150,210,.34) 73.5%,
      rgba(255,255,255,.34) 77%,
      rgba(255,255,255,.30) 84%,
      rgba(60,110,175,.42) 87%,
      rgba(5,24,56,.80) 91%,
      rgba(3,18,44,.92) 100%),
    url("../images/studio/page-flow.webp") top center/100% 100% no-repeat;
}
/* sections go transparent so the one scene reads straight through them */
.flow-scene .proof-section,
.flow-scene .credential-stage,
.flow-scene .people-section,
.flow-scene .trust-strip-wrap{background:transparent;box-shadow:none}
/* work has NO layer of its own — the page background already carries the navy band there */
.flow-scene .work-section{background:transparent}
.flow-scene .work-section::after{display:none}
.flow-scene .work-orb{display:none}
/* CTA has no background of its own — the one page background carries it */
.flow-scene .conversation{background:transparent}
.flow-scene .conversation::after{display:none}
.flow-scene .conversation-glow{display:none}
/* seams are no longer needed inside one continuous scene */
.flow-scene .work-section::before,
.flow-scene .conversation::before{display:none}
.flow-scene .proof-section::before,
.flow-scene .proof-section::after,
.flow-scene .credential-stage::before,
.flow-scene .credential-stage::after{display:none}
.flow-scene .work-section::after{opacity:.55}
.flow-scene .cred-ribbons{display:none}

/* ===== text contrast against the continuous blue scene ===== */
.flow-scene .people-copy h2{color:#08214d;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.flow-scene .people-copy p{color:#2d5183}
.flow-scene .people-copy .dc-eyebrow{color:#0878e8}
.flow-scene .people-quote{color:#123f80}
.flow-scene .people-quote small{color:#5a7ca6}
.flow-scene .people-values{background:rgba(255,255,255,.62);border-color:rgba(122,188,244,.4)}
.flow-scene .people-values .impact-stat strong{color:#08214d}
.flow-scene .people-values .impact-stat span{color:#4b6c98}

/* credential badge labels: light type with a dark halo reads on the mid-blue scene */
.flow-scene .credential-badge>span:last-child{
  color:#123a70;
  text-shadow:0 1px 0 rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.9),0 0 24px rgba(255,255,255,.7);
}
.flow-scene .credential-badge strong{color:#06224f}
.flow-scene .credential-heading .dc-section-title{color:#08214d}
.flow-scene .credential-heading>p{color:#2c5183}
.flow-scene .credential-heading blockquote{color:#123f80}

/* ===== award rows are links into the matching articles ===== */
a.timeline-row{
  display:grid;grid-template-columns:1fr auto auto;gap:15px;align-items:center;
  text-decoration:none;cursor:pointer;
  border-radius:10px;padding-right:10px;
  transition:background .25s var(--ease-out),transform .25s var(--ease-out);
}
a.timeline-row:hover{background:rgba(255,255,255,.55);transform:translateX(3px)}
a.timeline-row:hover .timeline-label{color:#0a61d6}
a.timeline-row:focus-visible{outline:2px solid #0877ff;outline-offset:3px}
.timeline-go{
  opacity:0;transform:translateX(-5px);color:#0872eb;font-weight:800;font-size:.9rem;
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out);
}
a.timeline-row:hover .timeline-go{opacity:1;transform:translateX(0)}
.timeline-label{transition:color .25s var(--ease-out)}
@media(max-width:860px){.timeline-go{display:none}a.timeline-row{grid-template-columns:1fr auto}}

/* ===== page background: soften + glow so it never competes with content ===== */
.flow-scene-bg{filter:blur(3px) saturate(108%) brightness(1.03);transform:scale(1.02)}
.flow-scene::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 26% at 50% 12%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(ellipse 60% 22% at 18% 42%, rgba(160,215,255,.30), transparent 72%),
    radial-gradient(ellipse 60% 22% at 84% 62%, rgba(150,210,255,.28), transparent 72%),
    radial-gradient(ellipse 80% 24% at 50% 88%, rgba(255,255,255,.35), transparent 74%),
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.10) 40%,rgba(255,255,255,.16));
}

/* ===== bigger main menu ===== */
.primary-nav a{font-size:.95rem;letter-spacing:.07em}
@media(max-width:1120px){.primary-nav ul{gap:20px}.primary-nav a{font-size:.88rem}}

/* ===== credential orbital rings doubled (centre photo untouched) ===== */
.credential-rings span:nth-child(1){width:1200px;height:1200px}
.credential-rings span:nth-child(2){width:1330px;height:1330px}
.credential-rings span:nth-child(3){width:1460px;height:1460px}
.credential-core::after{width:min(120vw,1200px)}
.credential-core{min-height:700px}
.credential-stage{overflow:hidden}
@media(max-width:860px){
  .credential-rings span:nth-child(1){width:620px;height:620px}
  .credential-rings span:nth-child(2){width:700px;height:700px}
  .credential-rings span:nth-child(3){display:none}
  .credential-core::after{width:min(124vw,640px)}
  .credential-core{min-height:420px}
}
@media(max-width:560px){
  .credential-rings span:nth-child(1){width:520px;height:520px}
  .credential-rings span:nth-child(2){width:590px;height:590px}
  .credential-core::after{width:132vw}
  .credential-core{min-height:380px}
}

/* CTA portrait: square military photo framed cleanly */
.flow-scene .cta-portrait img{max-height:400px;object-position:50% 30%;border-radius:22px;
  mask-image:none;-webkit-mask-image:none;
  border:1px solid rgba(255,255,255,.35);box-shadow:0 26px 60px rgba(0,0,0,.42)}

/* ===== READABILITY: larger base type + user text-size control ===== */
html{font-size:calc(17px * var(--text-scale, 1))}
body{font-size:1rem;line-height:1.6}

/* raise the floor on every small label (nothing below ~13.5px) */
.brand-subtitle{font-size:.78rem;letter-spacing:.08em}
.dc-eyebrow{font-size:.82rem}
.trust-item strong{font-size:1.12rem}
.trust-item span{font-size:.82rem;line-height:1.35}
.timeline-label{font-size:.95rem;line-height:1.35}
.timeline-row time{font-size:.9rem}
.proof-subtitle{font-size:1.05rem}
.proof-photo-frame figcaption{font-size:.78rem;letter-spacing:.12em}
.work-card p{font-size:.92rem;line-height:1.45}
.work-card h3{font-size:1.5rem}
.work-card-link{font-size:.88rem}
.credential-badge>span:last-child{font-size:.9rem;line-height:1.35}
.credential-heading>p{font-size:1.05rem}
.credential-heading blockquote{font-size:1.3rem}
.credential-heading blockquote small{font-size:.8rem}
.people-copy p{font-size:1.05rem;line-height:1.55}
.people-quote{font-size:1.1rem}
.people-quote small{font-size:.8rem}
.people-values .impact-stat strong{font-size:1.15rem}
.people-values .impact-stat span{font-size:.86rem}
.hero-summary{font-size:1.15rem;line-height:1.5}
.hero-location{font-size:.95rem}
.hero-location strong{font-size:1rem}
.dc-btn{font-size:.98rem;padding:15px 24px}
.header-cta{font-size:.82rem;padding:10px 16px}
.footer-menu a{font-size:.85rem}
.footer-bottom{font-size:.82rem}
.footer-quote{font-size:.95rem}
.footer-location{font-size:.86rem}
.cta-copy p{font-size:1.08rem;line-height:1.55}

/* the control itself */
.text-size{display:inline-flex;align-items:center;gap:4px;margin-left:14px}
.text-size button{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(38,108,196,.34);
  background:rgba(255,255,255,.9);color:#0a2f6b;font-weight:800;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s,transform .2s,border-color .2s;
}
.text-size button:hover{background:#fff;border-color:#0877ff;transform:translateY(-1px)}
.text-size button:focus-visible{outline:2px solid #0877ff;outline-offset:2px}
.text-size .ts-sm{font-size:.8rem}
.text-size .ts-lg{font-size:1.05rem}
.text-size[data-scale="1.15"] .ts-lg,.text-size[data-scale="1.3"] .ts-lg{background:#e7f2ff;border-color:#0877ff}
@media(max-width:1120px){.text-size{display:none}}

/* ===== mobile menu (Against Da Grain pattern) ===== */
.mm{position:fixed;inset:0;z-index:300;background:#fff;display:none;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mm.is-open{display:flex}
body.mm-lock{overflow:hidden}
.mm__top{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;height:68px;padding:0 8px;border-bottom:1px solid rgba(38,108,196,.18)}
.mm__close{border:0;background:none;font-size:34px;line-height:1;cursor:pointer;color:var(--dc-navy);font-family:inherit;height:48px}
.mm__brand{text-align:center;font-family:var(--dc-serif);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:1rem;color:var(--dc-navy)}
.mm__bag{display:grid;place-items:center;color:var(--dc-navy)}
.mm__bag svg{width:24px;height:24px}
.mm__search{display:flex;align-items:center;gap:12px;padding:0 18px;height:60px;border-bottom:1px solid rgba(38,108,196,.18)}
.mm__search svg{width:22px;height:22px;flex:0 0 22px;color:#3d6394}
.mm__search input{flex:1;border:0;background:none;font:inherit;font-size:.95rem;letter-spacing:.06em;color:var(--dc-navy);outline:none;height:100%}
.mm__search input::placeholder{color:#7d94b4}
.mm__results{border-bottom:1px solid rgba(38,108,196,.18);padding:6px 0}
.mm__results a{display:flex;justify-content:space-between;gap:12px;padding:13px 18px;font-size:.92rem;color:var(--dc-navy);border-top:1px solid #eaf1f9;text-decoration:none}
.mm__results a small{color:#6c86a8;white-space:nowrap}
.mm__results .mm__none{padding:13px 18px;font-size:.92rem;color:#6c86a8}
.mm__row{border-bottom:1px solid rgba(10,47,107,.16)}
.mm__item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 18px;min-height:68px;border:0;background:none;
  font-family:var(--dc-serif);font-weight:700;font-size:1.28rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dc-navy);cursor:pointer;text-align:left;text-decoration:none}
.mm__item svg{width:22px;height:22px;transition:transform .25s var(--ease-out);flex:0 0 22px}
.mm__item[aria-expanded="true"] svg{transform:rotate(90deg)}
.mm__panel{display:none;padding:4px 18px 18px;background:#f5faff}
.mm__row.is-open .mm__panel{display:block}
.mm__sub{display:block;padding:13px 0;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;color:#17407c;border-top:1px solid #e2ecf8;text-decoration:none}
.mm__sub:first-child{border-top:0}
.mm__sec{padding:16px 18px 44px;display:grid;gap:2px}
.mm__sec a{display:block;padding:13px 0;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;color:#17407c;text-decoration:none}
.mm__results[hidden]{display:none!important}
@media(min-width:861px){.mm{display:none!important}}

/* ===== MOBILE PASS: buttons, alignment, spacing — every section ===== */
@media(max-width:860px){
  /* header */
  .header-inner{grid-template-columns:1fr auto auto;gap:10px;min-height:66px}
  .header-cta{padding:11px 14px;min-height:44px}
  .menu-toggle{width:46px;height:46px;min-width:46px}

  /* every tappable target >= 44px and buttons full-width where they stack */
  .dc-btn{min-height:50px;padding:14px 22px;font-size:1rem;justify-content:center}
  .hero-actions{gap:10px;width:100%}
  .hero-actions .dc-btn{flex:1 1 100%;max-width:340px;margin-inline:auto}
  .cta-actions{gap:10px;width:100%}
  .cta-actions .dc-btn{flex:1 1 100%;max-width:340px;margin-inline:auto}

  /* hero alignment */
  .dc-hero{text-align:center}
  .hero-copy{text-align:center;align-items:center;display:flex;flex-direction:column}
  .hero-summary{max-width:36ch;margin-inline:auto}
  .hero-location{justify-content:center;text-align:left}
  .hero-script{display:none}

  /* capability strip: one clean column, each row a real row */
  .trust-strip{grid-template-columns:1fr;border-radius:20px}
  .trust-item{grid-template-columns:44px 1fr;padding:14px 16px;min-height:60px}
  .trust-item:after{display:none}
  .trust-item:not(:last-child){border-bottom:1px solid rgba(70,129,195,.16)}

  /* proof */
  .proof-grid{gap:22px}
  .proof-copy{text-align:left}
  .timeline-card{padding:14px 14px 14px 26px}
  a.timeline-row{padding:10px 6px 10px 14px;min-height:52px}
  .proof-photo-frame{margin-inline:auto;max-width:560px}
  .proof-photo-frame figcaption{left:14px;right:14px;bottom:12px;gap:8px;font-size:.72rem}

  /* credentials: centre everything, no text near the circle */
  .credential-heading{margin-bottom:16px;padding-inline:4px}
  .credential-orbit-layout{gap:20px}
  .credential-core{order:1;margin-block:6px}
  .credential-side{order:2;gap:18px 12px}
  .credential-badge{justify-items:center;text-align:center!important}
  .credential-badge>span:last-child{text-align:center}

  /* work */
  .work-heading{text-align:left}
  .work-card-body{padding:14px}
  .work-card-link{min-height:44px;align-items:center}

  /* community impact */
  .people-layout{gap:18px}
  .people-copy{text-align:left}
  .people-photo{margin-inline:auto}
  .people-quote{text-align:left}
  .people-values{margin-top:6px}
  .people-values .impact-stat{min-height:64px;padding:14px 16px}

  /* CTA */
  .conversation{text-align:center}
  .cta-copy{margin-inline:auto;text-align:center}
  .cta-copy p{max-width:40ch;margin-inline:auto}
  .cta-portrait{margin-inline:auto}

  /* footer */
  .site-footer{padding-bottom:34px}
  .footer-grid{gap:20px}
  .footer-menu ul{flex-wrap:wrap;gap:6px 16px;justify-content:center}
  .footer-menu a{display:inline-block;padding:9px 4px;min-height:40px}
  .footer-social{gap:14px}
  .footer-social a{width:44px;height:44px}
  .footer-bottom{gap:10px;text-align:center}
}
@media(max-width:560px){
  .dc-btn{width:100%;max-width:none}
  .hero-actions .dc-btn,.cta-actions .dc-btn{max-width:none}
  .credential-side{grid-template-columns:1fr}
  .credential-badge{grid-template-columns:1fr!important}
  .work-cards{gap:12px}
  .people-values{grid-template-columns:1fr}
  .proof-photo-frame figcaption{flex-direction:column;gap:4px;align-items:center}
  .proof-photo-frame figcaption span:not(:last-child):after{display:none}
}

@media(max-width:560px){
  .dc-eyebrow{font-size:.72rem;letter-spacing:.12em;flex-wrap:wrap;justify-content:center;gap:8px}
  .hero-title{font-size:clamp(2.6rem,12vw,3.4rem)}
  .hero-role{font-size:clamp(1.1rem,5.2vw,1.35rem)}
}

/* ===== main menu in capitals ===== */
.primary-nav a{text-transform:uppercase;letter-spacing:.07em;font-size:.92rem;font-weight:800}
.footer-menu a{text-transform:uppercase;letter-spacing:.08em}

/* ===== new hero portrait is a square source: no crop in the circle, and it carries its own light backdrop ===== */
.hero-portrait{object-position:50% 50%}
.cta-portrait img{object-position:50% 22%}

/* ===== rotating sweep moved OFF the circular photos and into the section background ===== */
.ring-shimmer{display:none}
.bg-sweep{
  position:absolute;border-radius:50%;pointer-events:none;
  mix-blend-mode:screen;will-change:transform;
  animation:spinGlow 46s linear infinite;
}
.bg-sweep-hero{
  width:150vmax;height:150vmax;left:50%;top:38%;
  margin-left:-75vmax;margin-top:-75vmax;z-index:0;opacity:.30;
  background:conic-gradient(from 200deg,transparent 0 30%,rgba(255,255,255,.16) 36%,rgba(68,189,255,.34) 42%,transparent 50% 100%);
  filter:blur(30px);
}
.bg-sweep-cred{
  width:130vmax;height:130vmax;left:50%;top:50%;
  margin-left:-65vmax;margin-top:-65vmax;z-index:0;opacity:.34;
  background:conic-gradient(from 20deg,transparent 0 32%,rgba(255,255,255,.5) 38%,rgba(120,200,255,.42) 44%,transparent 52% 100%);
  filter:blur(26px);animation-duration:62s;animation-direction:reverse;
}
@media(prefers-reduced-motion:reduce){.bg-sweep{animation:none!important}}
@media(max-width:860px){.bg-sweep{opacity:.2}}

/* ===== capability strip sits ABOVE every curve/decoration and stays readable over the dark hero ===== */
.trust-strip-wrap{position:relative;z-index:30}
.trust-strip{
  position:relative;z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(247,251,255,.95));
  border:1px solid rgba(255,255,255,.96);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 22px 55px rgba(6,35,80,.20),inset 0 1px 0 rgba(255,255,255,.95);
}
.trust-item strong{color:#0b2d68}
.trust-item span{color:#5b7ba6}
/* keep section curves below the strip */
.dc-hero:after{z-index:1}
.proof-section:before,.proof-section:after{z-index:1}

/* ===== cosmic hero: dark starfield needs light type, dark scrim, and a light cap into the next section ===== */
.dc-hero{
  background:
    linear-gradient(90deg,rgba(3,12,26,.86) 0%,rgba(4,16,34,.66) 30%,rgba(4,16,34,.28) 52%,rgba(3,14,30,.42) 100%),
    url("../images/studio/hero-cosmic.webp?v=1790470674") center 38%/cover no-repeat;
  filter:none;
}
.dc-hero .dc-eyebrow{color:#7fc9ff}
.dc-hero .dc-eyebrow:before{background:#7fc9ff;box-shadow:0 0 0 5px rgba(127,201,255,.14)}
.hero-title{color:#f4f9ff;text-shadow:0 2px 26px rgba(0,0,0,.55)}
.hero-role{color:#cfe6ff}
.hero-summary{color:#a9c6e6}
.hero-location{color:#a9c6e6}
.hero-location strong{color:#eaf4ff}
.hero-location svg{stroke:#7fc9ff}
.dc-btn-glass{background:rgba(255,255,255,.12);border-color:rgba(160,210,255,.5);color:#eaf4ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px rgba(0,0,0,.28)}
.hero-ring{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(77,167,250,.7) 52%,#0f64c4 80%)}

/* ===== credentials overlays: faint dotted world map + flowing light ribbons (from reference) ===== */
.credential-stage{overflow:hidden}
.cred-map{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:min(1600px,116%);aspect-ratio:1916/821;
  background:url("../images/studio/world-map-dots.jpg?v=1790470295") center/contain no-repeat;
  mix-blend-mode:multiply;opacity:.16;pointer-events:none;z-index:0;
}
.cred-ribbons{
  position:absolute;inset:-4% -8%;
  background:url("../images/studio/curves/light-ribbons.svg?v=1790470187") center/cover no-repeat;
  opacity:.85;pointer-events:none;z-index:0;
}
@media(max-width:860px){.cred-map{opacity:.12;width:150%}.cred-ribbons{opacity:.6}}

/* ===== audit task 7: orbital connector ring + nodes linking badges to the centre circle ===== */
.credential-core{position:relative}
.credential-core::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(74vw,660px);aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(86,176,255,.38);
  pointer-events:none;z-index:0;
}
.credential-badge{position:relative}
.credential-badge .credential-icon{position:relative}
.credential-badge .credential-icon::after{
  content:"";position:absolute;top:50%;width:var(--node-run,64px);height:1px;
  background:linear-gradient(90deg,rgba(86,176,255,.75),rgba(86,176,255,0));
  pointer-events:none;
}
.credential-side-right .credential-badge .credential-icon::after{right:100%;transform:scaleX(-1);transform-origin:right center}
.credential-side-left .credential-badge .credential-icon::after{left:100%}
.credential-badge .credential-icon::before{
  content:"";position:absolute;top:50%;margin-top:-5px;width:10px;height:10px;border-radius:50%;
  background:#fff;border:2px solid #5dccff;
  box-shadow:0 0 7px #fff,0 0 13px rgba(0,156,255,.75);
  z-index:2;
}
.credential-side-left .credential-badge .credential-icon::before{left:calc(100% + var(--node-run,64px) - 5px)}
.credential-side-right .credential-badge .credential-icon::before{right:calc(100% + var(--node-run,64px) - 5px)}
@media(max-width:860px){
  .credential-core::after{display:none}
  .credential-badge .credential-icon::after,.credential-badge .credential-icon::before{display:none}
}

/* ===== audit task 5: curves keep their real amplitude at every width (cover, not 100% 100%), plus a second offset layer ===== */
.dc-hero:after,.proof-section:after,.credential-stage:after,.work-section:after,.conversation:after{background-size:cover!important;background-position:center bottom!important}
.proof-section:before,.credential-stage:before{
  content:"";position:absolute;left:0;right:0;bottom:-18px;height:clamp(90px,8vw,150px);
  background:url("../images/studio/curves/ribbon.svg") center bottom/cover no-repeat;
  opacity:.38;transform:scaleX(-1);pointer-events:none;z-index:1;
}

/* ===== audit task 4: frame the proof photo at its own 1.37 ratio so "The World." is never cropped ===== */
.proof-photo-frame{aspect-ratio:1.37/1}
.proof-photo-frame img{height:100%;object-fit:cover;object-position:50% 45%}

/* ===== hero readability: scrim added as a background layer (::after is taken by the wave) ===== */
/* superseded by the cosmic hero rule above */
.dc-hero .dc-container{z-index:2}

@media(max-width:860px){
  .dc-hero{padding:34px 0 90px;min-height:auto}
  .hero-visual{margin-top:18px}
  .hero-ring{--d:min(54vw,300px)}
  .trust-strip-wrap{margin-top:-58px}
  .trust-item{padding:12px 14px}
  .proof-section{padding:40px 0 48px;margin-top:-60px}
  .proof-photo-frame img{height:320px}
  .timeline-card{padding:12px 16px 12px 24px}
  .timeline-row{min-height:34px;padding:5px 0 5px 14px}
  .credential-stage{padding:44px 0 52px;margin-top:-60px}
  .credential-core{min-height:340px}
  .credential-core-photo{--d:min(64vw,300px)}
  .credential-rings span:nth-child(1){width:340px;height:340px}
  .credential-rings span:nth-child(2){width:376px;height:376px}
  .credential-orbit-layout{gap:16px}
  .credential-side{gap:12px}
  .credential-icon{width:52px;height:52px}
  .credential-icon svg{width:24px;height:24px}
  .work-section{padding:52px 0 58px}
  .work-cards{grid-template-columns:repeat(2,1fr);gap:12px}
  .work-card-media{height:130px}
  .work-card p{min-height:0;font-size:.76rem}
  .work-card h3{font-size:1.25rem}
  .work-card-body{padding:12px}
  .people-section{padding:44px 0 40px}
  .people-photo{aspect-ratio:1.61/1}
  .conversation{padding:52px 0 60px;min-height:auto}
  .cta-portrait{width:min(52vw,280px)}
  .site-footer{padding-top:0}
  .hero-mantra{display:none}
}
/* ===== mobile polish pass ===== */
@media(max-width:860px){
  /* stacked badges: give each row room and keep labels centred under the icon */
  .credential-badge,.credential-side-left .credential-badge{gap:8px;align-items:start}
  .credential-badge>span:last-child{font-size:.72rem;line-height:1.3}
  .credential-side{grid-template-columns:repeat(2,1fr);gap:22px 14px}
  .credential-heading .dc-section-title{font-size:clamp(2rem,7.4vw,2.7rem)}
  .credential-heading>p{font-size:.92rem}
  .credential-heading blockquote{font-size:1.05rem}
  /* people section: photo full-bleed-ish card, copy breathes */
  .people-photo{border-radius:20px}
  .people-copy h2{font-size:clamp(1.8rem,6.6vw,2.3rem)}
  .people-copy p{font-size:.94rem}
  .people-quote{font-size:.98rem}
  .people-values{grid-template-columns:repeat(2,1fr)}
  .people-values .impact-stat{padding:14px 14px}
  .people-values .impact-stat:nth-child(2){border-right:none}
  .people-values .impact-stat:nth-child(1),.people-values .impact-stat:nth-child(2){border-bottom:1px solid rgba(122,188,244,.3)}
  /* CTA: portrait shouldn't collide with the script text */
  .cta-script{position:static;margin:10px auto 0;text-align:center;font-size:1.7rem;transform:none;text-shadow:0 2px 14px rgba(0,0,0,.45)}
  .cta-portrait{margin-inline:auto}
  .cta-copy h2{font-size:clamp(2.1rem,7.6vw,2.9rem)}
  .conversation-grid{gap:20px}
  /* work cards: tighter type so two columns read cleanly */
  .work-heading h2{font-size:clamp(1.9rem,6.8vw,2.5rem)}
  .work-heading .intro{font-size:.92rem}
  /* proof */
  .proof-title{font-size:clamp(1.9rem,6.8vw,2.5rem)}
  .timeline-label{font-size:.78rem}
  /* header: keep the brand from crowding the buttons */
  .brand-mark{font-size:1.35rem}
}
@media(max-width:560px){
  .credential-side{grid-template-columns:1fr 1fr;gap:18px 10px}
  .credential-badge>span:last-child{font-size:.68rem}
  .people-values{grid-template-columns:1fr}
  .people-values .impact-stat{border-right:none!important;border-bottom:1px solid rgba(122,188,244,.3)}
  .people-values .impact-stat:last-child{border-bottom:none}
  .trust-strip{grid-template-columns:1fr}
  .trust-item:after{display:none}
}
@media(max-width:560px){
  .dc-hero{padding:28px 0 78px}
  .hero-ring{--d:62vw}
  .work-cards{grid-template-columns:repeat(2,1fr);gap:10px}
  .work-card-media{height:110px}
  .work-card h3{font-size:1.05rem}
  .work-card p{font-size:.7rem;line-height:1.32}
  .work-card-link{font-size:.66rem}
  .work-card-link .arrow{width:24px;height:24px}
  .credential-core{min-height:300px}
  .credential-core-photo{--d:70vw}
  .credential-rings span:nth-child(1){width:300px;height:300px}
  .credential-rings span:nth-child(2){width:332px;height:332px}
  .proof-photo-frame img{height:260px}
}

/* ==========================================================================
   AUDIT FIXES — TASKLIST-MOBILE-COLOUR-ALIGNMENT.md (2026-09-26)
   Appended last on purpose: these must win over the earlier mobile blocks.
   ========================================================================== */

/* B2 — one eyebrow token per band, replacing the three ad-hoc blues */
:root{--eyebrow-on-light:#0873df;--eyebrow-on-dark:#7fc9ff}

/* B1 — contrast: every value below measured >=4.5:1 on white */
.dc-eyebrow{color:var(--eyebrow-on-light)}
.dc-eyebrow:before{background:var(--eyebrow-on-light);box-shadow:0 0 0 5px rgba(8,115,223,.1)}
.dc-eyebrow.light,.dc-hero .dc-eyebrow{color:var(--eyebrow-on-dark)}
.dc-eyebrow.light:before,.dc-hero .dc-eyebrow:before{background:var(--eyebrow-on-dark);box-shadow:0 0 0 5px rgba(127,201,255,.14)}
.flow-scene .people-copy .dc-eyebrow,.people-copy .dc-eyebrow{color:var(--eyebrow-on-light)}
.brand-subtitle{color:#5e769b}                                   /* 4.02 -> 4.62 */
.trust-item span{color:#57769f}                                  /* 4.35 -> 4.67 */
.credential-heading blockquote small{color:#59779f}              /* 4.23 -> 4.60 */
.people-quote small,.flow-scene .people-quote small{color:#56779f} /* 4.31 -> 4.63 */

/* B3 — the hero stays dark (Prince's call). Treat all seven elements the same,
   not just the h1: one shared scrim behind the copy column. */
.dc-hero .hero-copy{position:relative;z-index:2}
.dc-hero .hero-copy:before{
  content:"";position:absolute;z-index:-1;inset:-38px -46px -30px -46px;
  background:radial-gradient(120% 100% at 30% 45%, rgba(3,16,40,.62) 0%, rgba(3,16,40,.42) 45%, rgba(3,16,40,0) 78%);
  pointer-events:none;
}
.dc-hero .dc-eyebrow,.dc-hero .hero-title,.dc-hero .hero-role,.dc-hero .hero-summary{
  text-shadow:0 2px 18px rgba(2,12,32,.55);
}

/* C2 — footer columns share a top edge */
.footer-grid{align-items:start}

@media(max-width:1120px){
  /* A5 — 44px tap targets */
  .brand-mark{min-height:44px;display:flex;flex-direction:column;justify-content:center}
  .primary-nav a{min-height:44px;display:flex;align-items:center}
  .site-footer .brand-mark{min-height:44px}
}

@media(max-width:860px){
  /* A4 — container gutter 13px -> 20px each side */
  .dc-container{width:min(calc(100% - 40px),var(--dc-container))}
  /* A1/A2 — nothing under 14px (1rem = 17px, so .82rem = 14px) */
  .brand-subtitle{font-size:.71rem;letter-spacing:.09em}          /* 7.5px -> 12px */
  .dc-eyebrow{font-size:.77rem}                                   /* 12.2 -> 13px */
  .trust-item span{font-size:.82rem;line-height:1.35}             /* -> 14px */
  .credential-badge>span:last-child{font-size:.82rem;line-height:1.32}
  .work-card p{font-size:.88rem;line-height:1.45}                 /* 11.9 -> 15px */
  .work-card-link{font-size:.82rem}                               /* 11.2 -> 14px */
  .credential-heading blockquote small,.people-quote small{font-size:.8rem}
}

@media(max-width:560px){
  .dc-container{width:min(calc(100% - 40px),var(--dc-container))}
  /* A1 — header is tightest here; keep the wordmark, drop the strapline */
  .brand-subtitle{display:none}
  /* A3 — THE cascade bug: my own later blocks forced 2-up at 390, giving
     175px cards and 25-character lines. One column, readable type. */
  .work-cards{grid-template-columns:1fr;gap:14px}
  .work-card-media{height:200px}
  .work-card h3{font-size:1.3rem}
  .work-card p{font-size:.88rem;line-height:1.5}
  .work-card-link{font-size:.82rem}
  .work-card-link .arrow{width:30px;height:30px}
  .credential-badge>span:last-child{font-size:.8rem}
  .dc-eyebrow{font-size:.77rem}
}

/* ==========================================================================
   INNER PAGES + MOBILE RECOMPOSITION
   Component styles for about / portfolio / productions / speaking / services /
   awards / we-day / gallery / articles / contact, built on the GPT mobile
   spec (spacing scale, calmed palette, section rhythm).
   ========================================================================== */

:root{
  --space-xs:8px;  --space-sm:12px; --space-md:20px; --space-lg:32px;
  --space-xl:48px; --space-2xl:72px; --space-3xl:96px;
  --navy-base:#071d35; --navy-deep:#0b2947; --ice:#edf7fc;
  --card-white:rgba(255,255,255,.92); --blue-primary:#087de8; --cyan-hi:#32c5ff;
  --ink-on-dark:rgba(255,255,255,.78); --ink-on-light:#425568;
}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;color:#07224e;padding:12px 18px;border-radius:0 0 10px 0;font-weight:700}
.skip-link:focus{left:0}

/* ---------- page hero (inner pages) ---------- */
.page-hero{position:relative;overflow:hidden;padding:clamp(58px,8vw,104px) 0 clamp(52px,7vw,92px);
  background:linear-gradient(165deg,#061a3c 0%,#0a2c63 46%,#07224e 100%);color:#f4f9ff}
.page-hero:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;z-index:1;
  background:url("../images/studio/curves/wave-bottom.svg") bottom center/100% 100% no-repeat;pointer-events:none}
.ph-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;position:relative;z-index:2}
.ph-copy .dc-eyebrow{color:var(--eyebrow-on-dark)}
.ph-copy .dc-eyebrow:before{background:var(--eyebrow-on-dark)}
.ph-title{font-family:var(--dc-display,"Cormorant Garamond",serif);font-weight:700;line-height:1.0;
  font-size:clamp(2.6rem,5.4vw,4.3rem);margin:14px 0 0;color:#fff;text-shadow:0 2px 20px rgba(2,12,32,.4)}
.ph-lede{margin:var(--space-md) 0 0;max-width:56ch;font-size:1.02rem;line-height:1.62;color:#cfe6ff}
.ph-visual{margin:0;border-radius:26px;overflow:hidden;box-shadow:0 30px 80px rgba(3,18,46,.45);
  border:1px solid rgba(255,255,255,.16)}
.ph-visual img{display:block;width:100%;height:clamp(240px,32vw,380px);object-fit:cover;object-position:50% 32%}

/* ---------- prose ---------- */
.prose-section{padding:var(--space-2xl) 0}
.prose-wrap{max-width:74ch}
.prose-lead{margin:var(--space-md) 0 0;font-size:1.06rem;line-height:1.6;color:#33506f;max-width:70ch}
.prose-body{margin-top:var(--space-lg);max-width:74ch}
.prose-body p{margin:0 0 var(--space-md);font-size:1rem;line-height:1.72;color:#3a5470}
.prose-body p:last-child{margin-bottom:0}
.prose-body strong{color:#0a2c63}
.flow-scene .prose-section{background:transparent}

/* dark bands inside the flow scene need light prose */
.flow-scene .prose-section.on-dark .prose-body p,
.flow-scene .prose-section.on-dark .prose-lead{color:var(--ink-on-dark)}

/* ---------- info cards ---------- */
.info-grid{display:grid;gap:var(--space-md);margin-top:var(--space-lg)}
.info-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.info-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.info-card{background:var(--card-white);border:1px solid rgba(122,188,244,.34);border-radius:18px;
  padding:var(--space-md) 22px;box-shadow:0 14px 40px rgba(6,38,86,.09);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .35s,box-shadow .35s}
.info-card h3{margin:0 0 10px;font-size:1.16rem;line-height:1.25;color:#07224e;font-weight:800}
.info-card p{margin:0;font-size:.95rem;line-height:1.62;color:#42607f}
.info-card:hover{transform:translateY(-4px);box-shadow:0 24px 58px rgba(6,38,86,.16)}

/* ---------- tick list ---------- */
.tick-list{list-style:none;margin:var(--space-lg) 0 0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(2,1fr)}
.tick-list li{position:relative;padding:13px 16px 13px 44px;min-height:52px;display:flex;
  align-items:center;font-size:.95rem;line-height:1.5;color:#3a5470;
  background:var(--card-white);border:1px solid rgba(122,188,244,.3);border-radius:14px}
.tick-list li:before{content:"";position:absolute;left:16px;top:50%;width:16px;height:16px;margin-top:-8px;
  border-radius:50%;background:rgba(8,125,232,.14);
  box-shadow:inset 0 0 0 2px var(--blue-primary)}
.tick-list li strong{display:block;color:#07224e}
.tick-list li span{display:block;margin-top:3px;font-size:.84rem;color:#5b7ba6}

/* ---------- awards ---------- */
.award-list{list-style:none;margin:var(--space-lg) 0 0;padding:0;display:grid;gap:var(--space-sm)}
.award-row{display:grid;grid-template-columns:96px 1fr;gap:var(--space-md);align-items:start;
  padding:20px 24px;background:var(--card-white);border:1px solid rgba(122,188,244,.32);
  border-radius:18px;box-shadow:0 12px 34px rgba(6,38,86,.07)}
.award-year{font-weight:800;font-size:1.02rem;color:#fff;background:linear-gradient(135deg,#0a5fb7,#087de8);
  border-radius:999px;padding:7px 0;text-align:center;letter-spacing:.02em}
.award-body h3{margin:0;font-size:1.12rem;line-height:1.3;color:#07224e;font-weight:800}
.award-body p{margin:8px 0 0;font-size:.94rem;line-height:1.6;color:#42607f}

/* ---------- photo strip ---------- */
.strip-section{padding:var(--space-lg) 0 var(--space-2xl)}
.photo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-sm)}
.strip-cell{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 14px 40px rgba(6,38,86,.14);
  border:1px solid rgba(255,255,255,.4)}
.strip-cell img{display:block;width:100%;height:190px;object-fit:cover;transition:transform .6s}
.strip-cell:hover img{transform:scale(1.05)}

/* ---------- booking ---------- */
.booking-section{padding:var(--space-2xl) 0 var(--space-3xl)}
.booking-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm);margin-top:var(--space-lg)}
.booking-card{display:block;padding:20px 24px;min-height:84px;border-radius:18px;text-decoration:none;
  background:var(--card-white);border:1px solid rgba(122,188,244,.34);
  box-shadow:0 12px 34px rgba(6,38,86,.08);transition:transform .3s,box-shadow .3s}
.booking-card:hover{transform:translateY(-3px);box-shadow:0 22px 54px rgba(6,38,86,.16)}
.booking-k{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  font-weight:800;color:var(--eyebrow-on-light);margin-bottom:7px}
.booking-card strong{display:block;font-size:1.06rem;color:#07224e;line-height:1.3}

/* ---------- gallery ---------- */
.gallery-section{padding:var(--space-lg) 0 var(--space-2xl)}
.g-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--space-lg)}
.g-filter{appearance:none;border:1px solid rgba(122,188,244,.4);background:var(--card-white);
  color:#2f4f73;font:inherit;font-size:.9rem;font-weight:700;padding:11px 16px;min-height:44px;
  border-radius:999px;cursor:pointer;transition:.25s}
.g-filter span{opacity:.6;font-weight:600;margin-left:4px}
.g-filter:hover{border-color:var(--blue-primary);color:#07224e}
.g-filter.is-active{background:linear-gradient(135deg,#0a5fb7,#087de8);border-color:transparent;color:#fff}
.g-filter.is-active span{opacity:.85}
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--space-sm);
  grid-auto-rows:190px}
.g-cell{margin:0;position:relative;overflow:hidden;border-radius:16px;cursor:zoom-in;
  box-shadow:0 12px 34px rgba(6,38,86,.12);border:1px solid rgba(255,255,255,.45);background:#dce9f6}
.g-cell.tall{grid-row:span 2}
.g-cell img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.g-cell:hover img{transform:scale(1.06)}
.g-cell figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;
  font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,rgba(4,20,46,0),rgba(4,20,46,.82));
  opacity:0;transform:translateY(6px);transition:.3s}
.g-cell:hover figcaption{opacity:1;transform:none}
.g-cell[hidden]{display:none}
.g-empty{margin-top:var(--space-lg);color:#5b7ba6;font-size:1rem}

.lightbox{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  background:rgba(3,14,34,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lightbox.is-open{display:flex}
.lb-img{max-width:92vw;max-height:84vh;border-radius:12px;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.lb-close,.lb-nav{position:absolute;appearance:none;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.1);color:#fff;font-size:2rem;line-height:1;cursor:pointer;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;transition:.25s}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-close{top:20px;right:20px;font-size:2.2rem}
.lb-prev{left:18px;top:50%;margin-top:-26px}
.lb-next{right:18px;top:50%;margin-top:-26px}
.lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75);
  font-size:.88rem;letter-spacing:.08em}

/* ---------- articles ---------- */
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-md)}
.art-card{background:var(--card-white);border:1px solid rgba(122,188,244,.34);border-radius:20px;
  overflow:hidden;box-shadow:0 14px 42px rgba(6,38,86,.1);display:flex;flex-direction:column;
  transition:transform .35s,box-shadow .35s}
.art-card:hover{transform:translateY(-5px);box-shadow:0 26px 64px rgba(6,38,86,.18)}
.art-card-media{display:block;height:210px;overflow:hidden}
.art-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.art-card:hover .art-card-media img{transform:scale(1.05)}
.art-card-body{padding:var(--space-md) 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.art-card-body h3{margin:0;font-size:1.2rem;line-height:1.28}
.art-card-body h3 a{color:#07224e;text-decoration:none}
.art-card-body h3 a:hover{color:var(--blue-primary)}
.art-card-body p{margin:0;font-size:.94rem;line-height:1.6;color:#42607f;flex:1}

.article-section{padding:var(--space-2xl) 0 var(--space-3xl)}
.article-wrap{max-width:74ch}
.article-wrap h2{margin:var(--space-xl) 0 var(--space-md);font-size:clamp(1.5rem,3.4vw,2.05rem);
  line-height:1.2;color:#07224e}
.article-wrap h2:first-child{margin-top:0}
.article-wrap p{margin:0 0 var(--space-md);font-size:1.02rem;line-height:1.75;color:#3a5470}
.art-list{margin:0 0 var(--space-md);padding-left:22px}
.art-list li{margin-bottom:9px;font-size:1rem;line-height:1.65;color:#3a5470}
.art-fig{margin:var(--space-lg) 0;border-radius:18px;overflow:hidden;box-shadow:0 18px 50px rgba(6,38,86,.16)}
.art-fig img{display:block;width:100%;height:auto}
.art-back{margin-top:var(--space-xl)}
.art-back a{color:var(--blue-primary);font-weight:700;text-decoration:none}
.art-back a:hover{text-decoration:underline}

/* ==========================================================================
   MOBILE RECOMPOSITION (GPT review) — recompose, don't shrink
   ========================================================================== */
@media(max-width:860px){
  /* 2. container: background touches the edge, content never does */
  .dc-container{width:auto;max-width:none;margin-inline:var(--space-md)}
  .dc-section{padding-block:var(--space-2xl)}

  /* 1. calm the background: one dominant glow per viewport, not several */
  .hero-light,.proof-glow,.work-orb,.credential-aurora,.conversation-glow{opacity:.3!important}
  .cred-ribbons{opacity:.32}
  .cred-map{opacity:.1}
  .m-orb{display:none}

  /* 4. typography — recomposed, not scaled down */
  .ph-title{font-size:clamp(2.35rem,10vw,3.2rem);line-height:1.0}
  .dc-section-title,.work-heading h2,.cta-copy h2,.people-copy h2{
    font-size:clamp(1.95rem,8.2vw,2.6rem);line-height:1.06}
  .info-card h3,.award-body h3,.art-card-body h3{font-size:1.32rem;line-height:1.18}
  .prose-body p,.prose-lead,.ph-lede,.article-wrap p,.info-card p,.art-card-body p{
    font-size:.94rem;line-height:1.65}

  /* inner-page components stack */
  .ph-grid{grid-template-columns:1fr;gap:var(--space-lg)}
  .ph-visual img{height:clamp(210px,52vw,300px)}
  .info-grid.cols-2,.info-grid.cols-3{grid-template-columns:1fr}
  .tick-list{grid-template-columns:1fr}
  .booking-grid{grid-template-columns:1fr}
  .award-row{grid-template-columns:1fr;gap:var(--space-sm);padding:18px 20px}
  .award-year{justify-self:start;padding:6px 18px}
  .photo-strip{grid-template-columns:repeat(2,1fr)}
  .strip-cell img{height:150px}
  .art-grid{grid-template-columns:1fr}
  .g-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:10px}
  .g-cell figcaption{opacity:1;transform:none;font-size:.68rem;padding:20px 10px 8px}

  /* 3. hero: the portrait is the dominant object, not one of six competing ones */
  .hero-ring{--d:min(74vw,290px)}
  .hero-mantra,.hero-script{display:none}

  /* 9. one network card per row, image tall enough to read */
  .work-cards{grid-template-columns:1fr;gap:18px}
  .work-card-media{height:200px}

  /* 10. impact photo becomes a proper editorial card, with room around it */
  .people-photo{aspect-ratio:4/3;border-radius:24px;margin-bottom:var(--space-lg)}
  .people-copy{margin-bottom:var(--space-lg)}
  .people-quote{margin-block:var(--space-lg)}
  /* 8. 2x2 stats, readable */
  .people-values{grid-template-columns:repeat(2,1fr);gap:0}
  .people-values .impact-stat{min-height:90px;padding:16px 14px}

  /* 11. CTA: full-width stacked buttons */
  .cta-actions{display:grid;grid-template-columns:1fr;gap:var(--space-sm)}
  .cta-actions .dc-btn,.hero-actions .dc-btn{width:100%;min-height:52px;justify-content:center}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:var(--space-sm)}

  /* 12. footer: simple two-column link block, generous groups */
  .footer-grid{gap:var(--space-2xl) 0}
  .footer-menu ul{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm);
    justify-content:stretch;text-align:left}
  .footer-menu a{min-height:44px;display:flex;align-items:center}
  .footer-social{margin-top:var(--space-lg);justify-content:center}
  .footer-bottom{margin-top:var(--space-lg);gap:var(--space-sm)}
}

@media(max-width:390px){
  .dc-container{margin-inline:18px}
  .g-grid{grid-template-columns:1fr;grid-auto-rows:210px}
  .photo-strip{grid-template-columns:1fr}
  .strip-cell img{height:200px}
  .people-values{grid-template-columns:1fr}
}

/* ==========================================================================
   INNER-PAGE SCENE + FOOTER FIXES
   The home page's flow gradient is locked to ITS measured section fractions.
   Reusing it on a page of any other length drops the dark band under dark
   prose text (about.html went unreadable from "The long form." down).
   Inner pages therefore get a length-independent light scene, and the CTA
   carries its own dark background instead of borrowing the page's.
   ========================================================================== */
.flow-scene.is-light > .flow-scene-bg{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.92) 0%,
      rgba(237,247,252,.88) 22%,
      rgba(228,242,251,.86) 58%,
      rgba(233,245,252,.9) 100%),
    url("../images/studio/page-flow.webp") top center/100% 100% no-repeat;
}
/* the CTA is self-contained on inner pages: its own dark band, any page length */
.flow-scene.is-light .conversation{
  background:linear-gradient(165deg,#061a3c 0%,#0a2c63 52%,#05193c 100%);
  border-radius:32px;margin:0 auto;overflow:hidden;
}
.flow-scene.is-light .conversation .cta-copy h2,
.flow-scene.is-light .conversation .cta-copy p{color:#eaf4ff}
.flow-scene.is-light .conversation .cta-copy p{color:var(--ink-on-dark)}
.flow-scene.is-light .conversation .dc-eyebrow.light{color:var(--eyebrow-on-dark)}
/* inner-page prose sits on the light scene — keep it dark and readable */
.flow-scene.is-light .prose-body p,
.flow-scene.is-light .article-wrap p,
.flow-scene.is-light .art-list li{color:#3a5470}
.flow-scene.is-light .dc-section-title,
.flow-scene.is-light .article-wrap h2{color:#07224e}

/* footer: 11 links overflowed one row at 1440 and clipped "Contact";
   the brand block also went dark-on-dark. */
.site-footer .brand-title{color:#eaf4ff}
.site-footer .brand-subtitle{color:#9dbbdd}
.site-footer .footer-location span{color:#b8d3ef}
.footer-menu ul{flex-wrap:wrap;row-gap:10px;column-gap:22px}
.footer-menu a{white-space:nowrap}
@media(min-width:861px){
  .footer-grid{grid-template-columns:1.1fr 1.6fr auto}
  .footer-menu ul{justify-content:flex-start}
}

/* ==========================================================================
   TYPOGRAPHY — matched to princedesire.com/Schaumburg
   That site uses no webfonts at all: the native system stack at 17px/1.6.
   Every font-family here already routes through these three variables, so
   redefining them switches the whole site. The display tracking below is
   relaxed because the old values were tuned for Cormorant Garamond and read
   as cramped in a sans.
   ========================================================================== */
:root{
  --dc-system:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --dc-serif:var(--dc-system);
  --dc-sans:var(--dc-system);
  --dc-script:var(--dc-system);
}
body{font-family:var(--dc-system);font-size:17px;line-height:1.6}

/* display type: sans needs weight and looser tracking to hold the same presence */
.hero-title,.ph-title,.dc-section-title,.work-heading h2,.cta-copy h2,
.impact-copy-wrap h2,.people-copy h2,.brand-title,.entry-title,
.content-card .entry-title,.entry-shell .entry-title{
  font-weight:800;letter-spacing:-.022em;
}
.hero-title{line-height:.94}
.ph-title{line-height:.98}
.dc-section-title,.work-heading h2,.cta-copy h2,.impact-copy-wrap h2,.people-copy h2{line-height:1.02}
.brand-title{line-height:1;letter-spacing:-.015em}
.trust-item strong,.work-card h3,.info-card h3,.award-body h3,.impact-stat strong{
  font-weight:800;letter-spacing:-.01em}
.entry-content h2,.entry-content h3{font-weight:800;letter-spacing:-.015em}

/* the handwritten accents lose their reason to exist without a script face:
   keep them as a light italic caption rather than rotated fake handwriting */
.dc-script,.impact-copy-wrap blockquote{
  font-family:var(--dc-system);font-style:italic;font-weight:600;letter-spacing:-.01em}
.hero-script,.work-script,.cta-script{font-size:1.5rem;line-height:1.25;transform:none}
.credential-heading blockquote,.footer-quote{font-family:var(--dc-system);font-style:italic}

/* --- consequences of the font swap (system sans is wider than Cormorant) --- */
.hero-role{font-size:clamp(1.05rem,1.5vw,1.36rem);line-height:1.3;letter-spacing:-.012em;
  max-width:38ch;font-weight:700}
@media(max-width:860px){.hero-role{max-width:none;margin-inline:auto}}
/* the A A control was wrapping to its own row and adding header height */
.header-inner{align-items:center}
.text-size{align-self:center}
@media(min-width:1121px){
  /* 5 columns, natural DOM order: brand | nav | CTA | A A | (toggle, hidden).
     Do NOT set grid-row here — an explicitly-placed item is positioned before
     the auto-placed ones and would claim column 1, throwing A A to the left. */
  .header-inner{grid-template-columns:auto 1fr auto auto;column-gap:18px}
}
.trust-item strong{font-size:1.02rem}
.trust-item span{font-size:.8rem;line-height:1.3}
.header-cta{white-space:nowrap}
.header-cta span{white-space:nowrap}
@media(min-width:1121px){.primary-nav ul{gap:20px}.primary-nav a{font-size:.9rem}}

/* D2 — nothing under 14px at 390 except the deliberate eyebrow (>=13px).
   rem, not px, so the A A text-size control still scales these. 1rem = 17px. */
@media(max-width:860px){
  .timeline-label{font-size:.84rem;line-height:1.35}     /* 13.3 -> 14.3 */
  .people-photo-tag{font-size:.84rem;line-height:1.35}   /* 13.3 -> 14.3 */
  .trust-item span{font-size:.84rem}                     /* 13.6 -> 14.3 */
  .trust-item strong{font-size:1.02rem}
  .credential-badge>span:last-child{font-size:.84rem}
  .credential-badge strong{font-size:.86rem}
  .credential-heading blockquote small,.people-quote small{font-size:.84rem}
  .work-card-link{font-size:.84rem}
  .timeline-row time{font-size:.82rem}
}
@media(max-width:860px){
  .proof-photo-frame figcaption span{font-size:.84rem;line-height:1.4}  /* 12.2 -> 14.3 */
  .timeline-row time{font-size:.84rem}                                   /* 13.9 -> 14.3 */
}

/* D6 — the decorative sweep layer extended up to 645px past the viewport,
   pushing documentElement.scrollWidth 7-14px wider than the window from 768 up.
   body{overflow-x:hidden} hid the scrollbar but not the overflow. Clip at the
   section that owns the layer. */
.dc-hero,.credential-stage,.page-hero{overflow:hidden}
.bg-sweep{max-width:100%}
html{overflow-x:hidden}

/* ==========================================================================
   CREDENTIALS ON MOBILE — rebuilt to Prince's mockup
   Solid white cards, filled blue icon circles, chevron affordance, 2-up,
   then a full-width pill. Replaces the flat transparent badges.
   ========================================================================== */
.credential-more{text-decoration:none}
@media(max-width:860px){
  .credential-side{grid-template-columns:repeat(2,1fr);gap:14px;align-items:stretch}
  .credential-badge,.credential-side-left .credential-badge{
    position:relative;display:block;text-align:left!important;
    background:#fff;border:1px solid rgba(122,188,244,.3);border-radius:18px;
    padding:18px 40px 18px 16px;min-height:148px;
    box-shadow:0 10px 30px rgba(6,38,86,.1);
  }
  .credential-icon,.credential-side-left .credential-badge .credential-icon{
    width:48px;height:48px;min-width:48px;border-radius:50%;margin:0 0 14px;
    background:linear-gradient(135deg,#0a5fb7,#0b8ef5);
    display:grid;place-items:center;box-shadow:0 6px 16px rgba(10,95,183,.3);
  }
  .credential-icon svg{width:24px;height:24px}
  .credential-icon svg *{stroke:#fff}
  /* chevron affordance, top-right */
  .credential-badge:after{
    content:"";position:absolute;top:30px;right:18px;width:9px;height:9px;
    border-right:2.5px solid #0a5fb7;border-top:2.5px solid #0a5fb7;
    transform:rotate(45deg);opacity:.9;
  }
  .credential-badge>span:last-child,
  .credential-side-left .credential-badge>span:last-child{
    display:block;font-size:.92rem;line-height:1.28;color:#0a2c63;font-weight:700;text-align:left}
  .credential-badge strong{display:block;margin-top:6px;color:#0a5fb7;font-weight:800;font-size:.95rem}
  /* the last card becomes the full-width pill from the mockup */
  .credential-more{
    grid-column:1/-1;min-height:0!important;padding:0!important;border:0!important;
    background:linear-gradient(135deg,#0a5fb7,#0b8ef5)!important;border-radius:999px!important;
    display:flex!important;align-items:center;justify-content:center;gap:10px;
    height:58px;box-shadow:0 14px 34px rgba(10,95,183,.32)!important;
  }
  .credential-more .credential-icon{display:none}
  .credential-more:after{
    position:static;transform:rotate(45deg);border-color:#fff;margin-left:4px;top:auto;right:auto}
  .credential-more>span:last-child{text-align:center!important}
  .credential-more strong{margin:0;color:#fff!important;font-size:1.02rem}
  /* the portrait is the dominant object above the cards */
  .credential-core-photo{--d:min(78vw,340px)}
  .credential-core{min-height:auto;padding-block:8px}
}
@media(max-width:560px){
  .credential-side{grid-template-columns:repeat(2,1fr);gap:12px}
  .credential-badge,.credential-side-left .credential-badge{min-height:158px;padding:16px 34px 16px 14px}
  .credential-badge>span:last-child{font-size:.88rem}
}

/* ==========================================================================
   BODY TYPE UP — Prince: "the one people see first should be a little bigger"
   Base 17px -> 18px, and the hero (the first thing on screen) gets the
   biggest lift so it reads immediately.
   ========================================================================== */
html{font-size:calc(18px * var(--text-scale, 1))}
body{font-size:1rem;line-height:1.62}
.hero-summary{font-size:clamp(1.08rem,1.5vw,1.24rem);line-height:1.6}
.hero-role{font-size:clamp(1.14rem,1.6vw,1.46rem)}
.hero-location strong{font-size:1.02rem}
.hero-location span{font-size:.95rem}
.ph-lede{font-size:clamp(1.06rem,1.4vw,1.18rem);line-height:1.62}
.prose-lead{font-size:1.1rem}
.prose-body p,.article-wrap p{font-size:1.04rem;line-height:1.74}
.info-card p,.art-card-body p{font-size:1rem;line-height:1.62}
.trust-item strong{font-size:1.06rem}
.trust-item span{font-size:.86rem}
@media(max-width:860px){
  .hero-summary{font-size:1.06rem;line-height:1.6}
  .hero-role{font-size:1.1rem}
  .prose-body p,.article-wrap p,.prose-lead,.ph-lede{font-size:1rem;line-height:1.68}
  .info-card p,.art-card-body p{font-size:.98rem}
}

/* The award badges live in two separate .credential-side containers (left/right
   of the portrait on desktop). On mobile that gave two independent grids —
   2+1 and 2+1 — instead of the single 2x2 in the mockup. display:contents
   dissolves both wrappers so all six badges flow into ONE grid. */
@media(max-width:860px){
  .credential-orbit-layout{
    display:grid!important;grid-template-columns:repeat(2,1fr);gap:12px;
    align-items:stretch;min-height:auto}
  .credential-core{grid-column:1/-1;order:0;margin-bottom:6px}
  .credential-side,.credential-side-left,.credential-side-right{display:contents}
  .credential-badge{height:100%}
  .credential-badge>span:last-child{font-size:.86rem;line-height:1.3;hyphens:auto}
  .credential-badge strong{font-size:.9rem}
}

/* display:contents means the portrait keeps its DOM position (between the
   left and right badge groups) and landed in the middle of the grid.
   Pull it to the front, and let the odd fifth badge span the full width so
   nothing is orphaned in a half-empty row. */
@media(max-width:860px){
  .credential-core{order:-1}
  .credential-side-left .credential-badge{order:1}
  .credential-side-right .credential-badge{order:2}
  .credential-side-right .credential-badge:nth-child(2){grid-column:1/-1;min-height:0}
  .credential-more{order:3}
}

/* .ph-title hardcoded a Cormorant fallback via an undefined --dc-display, so
   the inner-page hero titles kept rendering in a serif after the font swap. */
.ph-title{font-family:var(--dc-system)}

/* ==========================================================================
   CREDENTIALS — DESKTOP, to Prince's mockup (2026-09-27)
   Glass pill buttons, big photographic circles from our own archive (each
   image is the actual award it names), white type, larger centre portrait.
   ========================================================================== */
@media(min-width:861px){
  .credential-orbit-layout{grid-template-columns:1fr auto 1fr;gap:clamp(18px,2.4vw,44px);align-items:center}

  /* --- the pill --- */
  .credential-badge,.credential-side-left .credential-badge{
    position:relative;display:grid;align-items:center;gap:clamp(14px,1.4vw,22px);
    grid-template-columns:1fr clamp(104px,10.4vw,164px);
    padding:clamp(12px,1.1vw,18px) clamp(14px,1.2vw,20px);
    border-radius:999px;
    background:linear-gradient(120deg,rgba(10,52,116,.72),rgba(12,86,168,.5));
    border:1px solid rgba(140,206,255,.5);
    box-shadow:0 0 0 1px rgba(10,44,99,.5) inset,
               0 14px 40px rgba(3,20,50,.4),
               0 0 34px rgba(60,160,255,.22);
    backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
    text-align:right;text-decoration:none;
    transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s;
  }
  /* right column mirrors: circle first, text after */
  .credential-side-right .credential-badge{grid-template-columns:clamp(104px,10.4vw,164px) 1fr;text-align:left}
  .credential-side-right .credential-badge .credential-icon{order:-1}

  .credential-badge:hover{
    transform:translateY(-4px);border-color:rgba(190,230,255,.85);
    box-shadow:0 0 0 1px rgba(10,44,99,.5) inset,
               0 22px 56px rgba(3,20,50,.5),
               0 0 52px rgba(80,180,255,.4);
  }

  /* --- the big photographic circle --- */
  .credential-icon,.credential-side-left .credential-badge .credential-icon{
    width:clamp(104px,10.4vw,164px);height:clamp(104px,10.4vw,164px);
    border-radius:50%;background:#071d3f center/cover no-repeat;
    border:3px solid rgba(150,212,255,.9);
    box-shadow:0 0 0 6px rgba(9,44,100,.55), 0 0 26px rgba(70,170,255,.5);
    display:block;flex:0 0 auto;
  }
  .credential-icon svg,.credential-icon.dots-icon{display:none}
  .credential-side .credential-badge[data-cred="addi"]      .credential-icon{background-image:url("../images/studio/cred/addi.jpg")}
  .credential-side .credential-badge[data-cred="volunteer"] .credential-icon{background-image:url("../images/studio/cred/volunteer.jpg")}
  .credential-side .credential-badge[data-cred="filmfest"]  .credential-icon{background-image:url("../images/studio/cred/filmfest.jpg")}
  .credential-side .credential-badge[data-cred="lifetime"]  .credential-icon{background-image:url("../images/studio/cred/lifetime.jpg")}
  .credential-side .credential-badge[data-cred="hapawards"] .credential-icon{background-image:url("../images/studio/cred/hapawards.jpg")}
  .credential-side .credential-badge[data-cred="more"]      .credential-icon{background-image:url("../images/studio/cred/more.jpg");display:block}

  /* --- white type: small-caps organisation over a large award name --- */
  .credential-badge>span:last-child,
  .credential-side-left .credential-badge>span:last-child{
    display:block;
    font-size:clamp(.66rem,.72vw,.76rem);text-transform:uppercase;letter-spacing:.14em;
    font-weight:700;color:#bfe2ff;line-height:1.35;
  }
  .credential-badge strong{
    display:block;margin-top:7px;
    font-size:clamp(1.02rem,1.32vw,1.42rem);line-height:1.12;letter-spacing:-.012em;
    font-weight:800;color:#fff;text-transform:none;
    text-shadow:0 2px 16px rgba(2,14,38,.55);
  }
  .credential-more strong{margin-top:0}

  /* --- bigger centre portrait + rings --- */
  .credential-core-photo{--d:min(32vw,470px)}
  .credential-rings span:nth-child(1){width:min(38vw,560px);height:min(38vw,560px)}
  .credential-rings span:nth-child(2){width:min(43vw,640px);height:min(43vw,640px)}
  .credential-rings span:nth-child(3){width:min(48vw,720px);height:min(48vw,720px)}
  .credential-side{display:grid;gap:clamp(16px,1.8vw,30px);align-content:center}
}

/* The pill type must beat the .flow-scene-scoped colours set earlier
   (.flow-scene .credential-badge strong = 0,3,0), so match that specificity. */
@media(min-width:861px){
  .flow-scene .credential-badge>span:last-child,
  .credential-side .credential-badge>span:last-child{
    color:#bfe2ff!important;font-size:clamp(.66rem,.72vw,.76rem);
    text-transform:uppercase;letter-spacing:.14em;font-weight:700;line-height:1.35}
  .flow-scene .credential-badge strong,
  .credential-side .credential-badge strong{
    color:#fff!important;font-size:clamp(1.02rem,1.32vw,1.42rem);line-height:1.12;
    font-weight:800;letter-spacing:-.012em;text-shadow:0 2px 16px rgba(2,14,38,.55);
    display:block;margin-top:7px;text-transform:none}
  .credential-more strong{margin-top:0!important}
}

/* ==========================================================================
   CREDENTIALS — MOBILE, rebuilt as a vertical story (Prince's mockup)
   Not the desktop composition shrunk: portrait first, then six full-width
   glass "key" cards whose circle overlaps the card end, alternating sides.
   ========================================================================== */
.cred-recognition-label{display:none}

@media(max-width:860px){
  /* --- identity + portrait lead the section --- */
  .credential-heading{text-align:center}
  .credential-heading>p{margin-inline:auto}
  .credential-core{grid-column:1/-1;order:-1;min-height:auto;margin:0 auto var(--space-md)}
  .credential-core-photo{--d:min(82vw,340px)}
  .credential-rings span:nth-child(1){width:min(94vw,392px);height:min(94vw,392px)}
  .credential-rings span:nth-child(2){width:min(104vw,430px);height:min(104vw,430px)}
  .credential-rings span:nth-child(3){display:none}
  /* connector dots between portrait and cards are desktop-only furniture */
  .credential-icon::before,.credential-icon::after{display:none!important}

  /* --- section label --- */
  .cred-recognition-label{
    display:flex;align-items:center;gap:14px;margin:var(--space-md) 0 var(--space-lg);
    grid-column:1/-1;order:-1}
  .cred-recognition-label:before,.cred-recognition-label:after{
    content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(120,195,255,.6),transparent)}
  .cred-recognition-label span{
    font-size:.8rem;text-transform:uppercase;letter-spacing:.22em;font-weight:800;color:#0a4f96}

  /* --- one column of key cards --- */
  .credential-orbit-layout{grid-template-columns:1fr!important;gap:22px!important}

  .credential-badge,.credential-side-left .credential-badge{
    position:relative;display:flex;flex-direction:column;justify-content:center;
    min-height:118px;height:auto;border-radius:32px;
    background:linear-gradient(115deg,rgba(9,58,124,.94),rgba(12,96,178,.86))!important;
    border:1px solid rgba(150,212,255,.55)!important;
    box-shadow:0 0 0 1px rgba(8,40,92,.5) inset,0 16px 40px rgba(3,20,50,.34),
               0 0 30px rgba(60,160,255,.2)!important;
    padding:16px 22px;overflow:visible;
  }
  .credential-badge:after{display:none}   /* desktop chevron off */

  /* the circle becomes part of the card geometry, half outside the end */
  .credential-icon,.credential-side-left .credential-badge .credential-icon{
    position:absolute;top:50%;transform:translateY(-50%);
    width:104px;height:104px;margin:0;border-radius:50%;
    background:#071d3f center/cover no-repeat;
    border:3px solid rgba(160,216,255,.95);
    box-shadow:0 0 0 5px rgba(8,42,96,.6),0 0 24px rgba(70,170,255,.55);
    display:block;
  }

  /* alternate: circle left / circle right, down the column */
  .credential-side-left .credential-badge:nth-child(1),
  .credential-side-left .credential-badge:nth-child(3),
  .credential-side-right .credential-badge:nth-child(2){
    margin-left:52px;padding-left:70px;text-align:left!important}
  .credential-side-left .credential-badge:nth-child(1) .credential-icon,
  .credential-side-left .credential-badge:nth-child(3) .credential-icon,
  .credential-side-right .credential-badge:nth-child(2) .credential-icon{left:-52px}

  .credential-side-left .credential-badge:nth-child(2),
  .credential-side-right .credential-badge:nth-child(1),
  .credential-side-right .credential-badge:nth-child(3){
    margin-right:52px;padding-right:70px;text-align:right!important}
  .credential-side-left .credential-badge:nth-child(2) .credential-icon,
  .credential-side-right .credential-badge:nth-child(1) .credential-icon,
  .credential-side-right .credential-badge:nth-child(3) .credential-icon{right:-52px}

  /* --- type: small-caps organisation over a large white award name --- */
  .flow-scene .credential-badge>span:last-child,
  .credential-side .credential-badge>span:last-child,
  .credential-badge>span:last-child{
    display:block!important;color:#bfe2ff!important;
    font-size:.68rem!important;text-transform:uppercase;letter-spacing:.12em;
    font-weight:700;line-height:1.3;text-align:inherit!important}
  .flow-scene .credential-badge strong,
  .credential-side .credential-badge strong,
  .credential-badge strong{
    display:block!important;margin-top:7px!important;color:#fff!important;
    font-size:clamp(1.22rem,5.4vw,1.62rem)!important;line-height:1.1;
    font-weight:800;letter-spacing:-.015em;
    text-shadow:0 2px 16px rgba(2,14,38,.5)}

  /* the last card keeps the card shape rather than the pill */
  .credential-more{
    grid-column:auto!important;height:auto!important;min-height:118px!important;
    padding:16px 22px!important;border-radius:32px!important;
    background:linear-gradient(115deg,rgba(9,58,124,.94),rgba(12,96,178,.86))!important;
    border:1px solid rgba(150,212,255,.55)!important;
    display:flex!important;flex-direction:column;justify-content:center;
    box-shadow:0 0 0 1px rgba(8,40,92,.5) inset,0 16px 40px rgba(3,20,50,.34)!important}
  .credential-more .credential-icon{display:block!important}
  .credential-more strong{margin-top:0!important}
}

@media(max-width:390px){
  .credential-icon,.credential-side-left .credential-badge .credential-icon{width:92px;height:92px}
  .credential-side-left .credential-badge:nth-child(1),
  .credential-side-left .credential-badge:nth-child(3),
  .credential-side-right .credential-badge:nth-child(2){margin-left:44px;padding-left:60px}
  .credential-side-left .credential-badge:nth-child(1) .credential-icon,
  .credential-side-left .credential-badge:nth-child(3) .credential-icon,
  .credential-side-right .credential-badge:nth-child(2) .credential-icon{left:-44px}
  .credential-side-left .credential-badge:nth-child(2),
  .credential-side-right .credential-badge:nth-child(1),
  .credential-side-right .credential-badge:nth-child(3){margin-right:44px;padding-right:60px}
  .credential-side-left .credential-badge:nth-child(2) .credential-icon,
  .credential-side-right .credential-badge:nth-child(1) .credential-icon,
  .credential-side-right .credential-badge:nth-child(3) .credential-icon{right:-44px}
}

/* ==========================================================================
   FOOTER — rebuilt as a closing editorial section, not a second nav bar
   40% brand + three compact link groups / 60% photography in a glass panel,
   then its own closing band for the quote and the legal line.
   ========================================================================== */
.site-footer{
  position:relative;padding:0;color:#dbe9fb;
  background:
    radial-gradient(circle at 8% 0%, rgba(34,130,210,.18), transparent 38%),
    linear-gradient(180deg, #071d37 0%, #03152a 100%);
}
.site-footer:before{content:none}
.site-footer .dc-container{padding-block:clamp(48px,5vw,72px) 0}

.footer-top{
  display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  gap:clamp(28px,4vw,58px);align-items:start;
}

/* --- brand column --- */
.footer-wordmark{text-decoration:none}
.site-footer .brand-title{font-size:clamp(1.8rem,2.4vw,2.35rem);color:#fff}
.site-footer .brand-subtitle{
  display:block;margin-top:9px;color:#9fc2e6;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;white-space:normal}
.footer-location{
  display:flex;align-items:center;gap:8px;margin-top:16px;color:#9fc2e6;font-size:.92rem}
.footer-location svg{width:17px;height:17px;color:#4ea6f0;flex:0 0 auto}

.footer-cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,30px);margin-top:clamp(28px,3.4vw,46px)}
.fcol h3{
  margin:0 0 16px;font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;
  font-weight:800;color:#6fb4f0;padding-bottom:10px;
  border-bottom:1px solid rgba(110,175,235,.26)}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.fcol a{
  display:flex;align-items:center;gap:10px;min-height:38px;
  color:#cfe2f6;text-decoration:none;font-size:.95rem;transition:color .22s}
.fcol a:hover{color:#fff}
.fsoc{
  width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:background .22s,border-color .22s,transform .22s}
.fsoc svg{width:15px;height:15px;fill:currentColor}
.fcol-connect a:hover .fsoc{
  background:rgba(78,166,240,.24);border-color:rgba(120,195,255,.6);transform:translateY(-1px)}

/* --- photography panel --- */
.footer-feed{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-radius:28px;padding:clamp(18px,1.9vw,26px);
}
.feed-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:clamp(14px,1.5vw,20px)}
.feed-mark{
  width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  color:#7cc4ff;background:rgba(124,196,255,.1);border:1px solid rgba(124,196,255,.34)}
.feed-mark svg{width:20px;height:20px}
.feed-head h3{
  margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.2em;
  font-weight:800;color:#fff}
.feed-handle{margin-left:auto;color:#9fc2e6;font-size:.9rem}
.feed-link{
  color:#6fb4f0;text-decoration:none;font-size:.9rem;font-weight:700;
  padding-left:14px;border-left:1px solid rgba(255,255,255,.16);transition:color .22s}
.feed-link:hover{color:#fff}

.feed-grid{
  display:grid;grid-template-columns:1.36fr 1fr 1fr;grid-template-rows:1fr 1fr;
  gap:clamp(8px,.9vw,13px)}
.feed-cell{
  display:block;overflow:hidden;border-radius:20px;
  border:1px solid rgba(150,212,255,.22);background:#0a2244;
  box-shadow:0 10px 26px rgba(2,12,30,.34);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
.feed-cell img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.feed-feature{grid-row:1/3}
.feed-cell:hover{
  transform:translateY(-3px);border-color:rgba(190,230,255,.75);
  box-shadow:0 16px 40px rgba(2,12,30,.5),0 0 28px rgba(70,170,255,.34)}
.feed-cell:hover img{transform:scale(1.05)}

/* --- closing band --- */
.footer-bottom{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,50px);
  align-items:end;
  margin-top:clamp(36px,4vw,60px);padding:clamp(26px,3vw,38px) 0 clamp(26px,3vw,36px);
  border-top:1px solid rgba(255,255,255,.1)}
.footer-quote{
  margin:0;font-style:italic;font-size:clamp(1.24rem,1.9vw,1.55rem);line-height:1.34;
  color:#fff;letter-spacing:-.01em}
.footer-quote span{color:#6fb4f0}
.footer-legal{display:grid;gap:10px;justify-items:end;text-align:right}
.legal-copy{color:#9fc2e6;font-size:.88rem}
.legal-links{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.legal-links a{color:#cfe2f6;text-decoration:none;font-size:.88rem;transition:color .22s}
.legal-links a:hover{color:#fff;text-decoration:underline}
.legal-credit{color:#7f9fc4;font-size:.82rem}
.legal-credit a{color:#9fc2e6;text-decoration:none}
.legal-credit a:hover{color:#fff}

@media(max-width:1024px){
  .footer-top{grid-template-columns:1fr;gap:var(--space-2xl)}
  .feed-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:auto}
  .feed-feature{grid-row:auto;grid-column:span 2}
}

@media(max-width:860px){
  .site-footer .dc-container{padding-block:var(--space-2xl) 0}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg) var(--space-md)}
  .fcol-connect{grid-column:1/-1}
  .fcol-connect ul{grid-template-columns:repeat(2,minmax(0,1fr));display:grid;gap:4px 14px}
  .feed-head{gap:10px}
  .feed-handle{margin-left:0;width:100%;order:4}
  .feed-link{border-left:0;padding-left:0;margin-left:auto}
  /* horizontal swipe row so the footer doesn't get excessively tall */
  .feed-grid{
    display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
  .feed-grid::-webkit-scrollbar{display:none}
  .feed-cell{flex:0 0 62vw;max-width:260px;scroll-snap-align:start;aspect-ratio:1}
  .feed-feature{flex-basis:72vw;max-width:300px}
  .footer-bottom{grid-template-columns:1fr;align-items:start;gap:var(--space-lg)}
  .footer-legal{justify-items:start;text-align:left}
  .legal-links{justify-content:flex-start}
}

/* The hero-copy scrim was a box with a radial gradient that had not reached
   full transparency by its own right edge, so the box boundary showed as a
   vertical seam down the middle of the hero. Removed: the cosmic image is
   already very dark behind the copy (sampled rgb(0,8,24)) and every hero text
   element carries a text-shadow, so the scrim was not earning its keep. */
.dc-hero .hero-copy:before{content:none!important;background:none!important}

/* `.credential-badge .credential-icon{position:relative}` (0,2,0) beat the
   plain `.credential-icon` rule, so only the left column's icons went
   absolute. Name every column at matching specificity. */
@media(max-width:860px){
  .credential-badge .credential-icon,
  .credential-side-left .credential-badge .credential-icon,
  .credential-side-right .credential-badge .credential-icon,
  .credential-more .credential-icon{
    position:absolute;top:50%;transform:translateY(-50%);margin:0;order:0}
  /* the "more" card had flat !important padding, leaving no room for its circle */
  .credential-side-right .credential-badge:nth-child(3),
  .credential-more{padding:16px 70px 16px 22px!important}
}
@media(max-width:390px){
  .credential-side-right .credential-badge:nth-child(3),
  .credential-more{padding:16px 60px 16px 22px!important}
}

/* ==========================================================================
   THE WORK — rebuilt to Prince's mockup (2026-09-27)
   Dark navy band with a broadcast image bleeding top-right; translucent
   glass cards; glowing circular icon overlapping each card image; the link
   becomes an accented label with a circular arrow button.
   ========================================================================== */
.flow-scene .work-section,
.work-section{
  position:relative;overflow:hidden;
  background:
    linear-gradient(180deg,#04152f 0%,#061e3f 45%,#041730 100%)!important;
}
.work-section:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../images/studio/work/bg.jpg") right top/62% auto no-repeat;
  opacity:.5;
  -webkit-mask-image:linear-gradient(255deg,#000 4%,rgba(0,0,0,.45) 40%,transparent 68%);
          mask-image:linear-gradient(255deg,#000 4%,rgba(0,0,0,.45) 40%,transparent 68%);
  bottom:auto;height:74%;
}
.work-section:after{
  content:"";position:absolute;left:-10%;bottom:-30%;width:70%;height:80%;z-index:0;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(28,120,210,.3),transparent 62%);
}
.work-section .dc-container{position:relative;z-index:2}
.work-heading h2,.work-heading .intro{color:#fff}
.work-heading .intro{color:#c3daf5;max-width:56ch}
.work-heading h2:after{
  content:"";display:block;width:72px;height:3px;margin-top:20px;border-radius:2px;
  background:linear-gradient(90deg,#39c4ff,rgba(57,196,255,0))}

/* --- the card --- */
.work-card{
  position:relative;display:flex;flex-direction:column;overflow:visible;
  background:linear-gradient(160deg,rgba(14,52,104,.62),rgba(8,30,64,.72))!important;
  border:1px solid rgba(120,190,255,.28)!important;border-radius:22px!important;
  box-shadow:0 18px 46px rgba(2,14,36,.44)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s,border-color .4s;
}
.work-card:hover{
  transform:translateY(-6px);border-color:rgba(170,220,255,.66)!important;
  box-shadow:0 28px 66px rgba(2,14,36,.6),0 0 40px rgba(60,160,255,.26)!important}

.work-card-media{
  position:relative;margin:10px 10px 0;height:186px;border-radius:16px;overflow:visible}
.work-card-media img{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:16px;
  transition:transform .6s}
.work-card:hover .work-card-media img{transform:scale(1.04)}

/* glowing icon straddling the bottom-left of the image */
.work-card-icon{
  position:absolute;left:14px;bottom:-26px;z-index:3;
  width:62px;height:62px;display:block;pointer-events:none;
  filter:drop-shadow(0 6px 18px rgba(4,60,130,.65))}
.work-card-icon img{width:100%;height:100%;object-fit:contain;border-radius:0}

.work-card-body{padding:40px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.work-card h3{margin:0;color:#fff;font-size:1.32rem;line-height:1.2}
.work-card p{margin:0;color:#c3daf5;font-size:.96rem;line-height:1.55;flex:1;min-height:0}

/* link row: accented label + circular arrow */
.work-card-link{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:8px;text-decoration:none;color:#5cb8ff;font-weight:800;font-size:.94rem}
.work-card-link>span:first-child{position:relative;padding-bottom:9px}
.work-card-link>span:first-child:after{
  content:"";position:absolute;left:0;bottom:0;width:44px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#39c4ff,rgba(57,196,255,.1));transition:width .35s}
.work-card:hover .work-card-link>span:first-child:after{width:100%}
.work-card-link .arrow{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#0a63c0,#1190f5);color:#fff;font-size:1.05rem;
  box-shadow:0 8px 22px rgba(8,90,190,.5);transition:transform .35s,box-shadow .35s}
.work-card:hover .work-card-link .arrow{
  transform:translateX(4px) scale(1.06);box-shadow:0 12px 30px rgba(8,90,190,.7)}

@media(max-width:1120px){
  .work-section:before{width:100%;background-size:82% auto}
}
@media(max-width:860px){
  .work-section:before{background-size:130% auto;opacity:.34;height:46%}
  .work-card-media{height:200px}
  .work-card-icon{width:56px;height:56px;bottom:-22px}
  .work-card-body{padding:36px 18px 18px}
  .work-card h3{font-size:1.3rem}
  .work-card p{font-size:.94rem}
}

/* ==========================================================================
   HERO CIRCLE ON MOBILE
   The ring fitted, but its glow rings (:before -32px, :after -60px) spanned
   386px inside a 375px viewport, so .dc-hero{overflow:hidden} sheared them
   into flat edges. Tighten the glow radii instead of shrinking the portrait,
   and give the circle real air before the capability strip rides up over it.
   ========================================================================== */
@media(max-width:860px){
  .hero-ring{--d:min(70vw,280px)}
  .hero-ring:before{inset:-20px}
  .hero-ring:after{inset:-36px}
  .orbit{display:none}                 /* were being cut at both edges */
  .dc-hero{padding-bottom:118px}
  .hero-visual{margin-top:26px;margin-bottom:6px}
  .trust-strip-wrap{margin-top:-40px}
}
@media(max-width:560px){
  .hero-ring{--d:min(68vw,268px)}
  .hero-ring:before{inset:-18px}
  .hero-ring:after{inset:-32px}
  .dc-hero{padding-bottom:112px}
  .trust-strip-wrap{margin-top:-36px}
}
@media(max-width:390px){
  .hero-ring{--d:min(66vw,250px)}
  .dc-hero{padding-bottom:104px}
}

/* ==========================================================================
   FOOTER — MOBILE (Prince's mockup): centred brand, swipe strip with dots,
   collapsible link groups, a labelled social row, centred closing band,
   back-to-top. Desktop keeps the 40/60 editorial layout.
   ========================================================================== */
/* the heading button must look like a plain heading on desktop */
.fcol-btn{
  all:unset;display:flex;align-items:center;justify-content:space-between;width:100%;
  font:inherit;font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;
  font-weight:800;color:#6fb4f0;cursor:default}
.fcol-chev{display:none;width:18px;height:18px;flex:0 0 auto;transition:transform .3s}
.footer-social-row{display:none}
.back-to-top{display:none}
.feed-dots{display:none}

@media(max-width:860px){
  /* 1. centred identity */
  .footer-top{text-align:center}
  .footer-brand-col{display:flex;flex-direction:column;align-items:center}
  .site-footer .brand-title{font-size:2rem}
  .footer-location{justify-content:center}

  /* 2. photo strip keeps the swipe row, plus dot indicators */
  .feed-head{justify-content:center;text-align:center}
  .feed-dots{
    display:flex;gap:7px;justify-content:center;margin-top:14px}
  .feed-dots i{
    width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.26);
    transition:background .25s,width .25s}
  .feed-dots i.is-on{background:#39c4ff;width:20px;border-radius:4px}

  /* 3. link groups collapse */
  .footer-cols{
    grid-template-columns:1fr;gap:0;margin-top:var(--space-2xl);
    width:100%;text-align:left}
  .fcol{border-bottom:1px solid rgba(255,255,255,.12)}
  .fcol h3{margin:0;border:0;padding:0}
  .fcol-btn{padding:20px 2px;min-height:60px;cursor:pointer;font-size:.8rem;color:#fff}
  .fcol-chev{display:block}
  .fcol-btn[aria-expanded="true"] .fcol-chev{transform:rotate(180deg)}
  .fcol ul{display:none;padding:0 2px 16px}
  .fcol.is-open ul{display:grid}
  .fcol-connect ul{grid-template-columns:1fr;gap:3px}
  /* socials live in the row below on mobile, not inside Connect */
  .fcol-connect li:not(:first-child){display:none}

  /* 4. the social row */
  .footer-social-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
    margin-top:var(--space-xl);text-align:center}
  .footer-social-row a{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    color:#cfe2f6;text-decoration:none;font-size:.82rem;min-height:44px}
  .fsr-ic{
    width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
    border:1px solid rgba(160,210,255,.45);background:rgba(255,255,255,.05);
    transition:background .25s,border-color .25s,transform .25s}
  .fsr-ic svg{width:24px;height:24px;fill:currentColor}
  .footer-social-row a:hover .fsr-ic,.footer-social-row a:focus-visible .fsr-ic{
    background:rgba(57,196,255,.2);border-color:#7cc4ff;transform:translateY(-2px)}

  /* 5. closing band, centred */
  .footer-bottom{
    grid-template-columns:1fr;justify-items:center;text-align:center;
    margin-top:var(--space-xl);gap:var(--space-md)}
  .footer-quote{font-size:1.3rem;position:relative;padding-bottom:20px}
  .footer-quote:after{
    content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:64px;height:2px;border-radius:2px;background:#39c4ff}
  .footer-legal{justify-items:center;text-align:center;gap:12px}
  .legal-links{justify-content:center}

  /* 6. back to top */
  .back-to-top{
    display:grid;place-items:center;position:absolute;right:0;bottom:0;
    width:52px;height:52px;border-radius:50%;color:#cfe2f6;
    border:1px solid rgba(160,210,255,.45);background:rgba(255,255,255,.05)}
  .back-to-top svg{width:22px;height:22px}
  .footer-bottom{position:relative;padding-bottom:78px}
}

/* ==========================================================================
   FOOTER PHOTO STRIP — MOBILE
   The swipe row mixed a 72vw feature with 62vw tiles, so nothing aligned and
   only one and a bit was ever visible. Equal square tiles, two-and-a-peek,
   snapping, with the dots as the affordance.
   ========================================================================== */
@media(max-width:860px){
  .footer-feed{padding:16px 14px 18px;border-radius:22px}
  .feed-head{
    display:grid;grid-template-columns:auto 1fr;gap:10px 12px;
    align-items:center;justify-content:start;text-align:left;margin-bottom:14px}
  .feed-head h3{font-size:.76rem;letter-spacing:.16em}
  .feed-handle{grid-column:1/-1;width:auto;order:0;margin:0;font-size:.86rem}
  .feed-link{grid-column:1/-1;margin:0;padding:0;border:0;font-size:.88rem}

  .feed-grid{
    display:flex;flex-wrap:nowrap;gap:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:2px;margin:0 -2px}
  .feed-grid::-webkit-scrollbar{display:none}
  /* every tile the same: the feature loses its desktop span */
  .feed-cell,.feed-feature{
    grid-row:auto!important;grid-column:auto!important;
    flex:0 0 40vw;max-width:172px;min-width:132px;
    aspect-ratio:1;scroll-snap-align:start;border-radius:16px}
  .feed-cell img{border-radius:16px}
}
@media(max-width:390px){
  .feed-cell,.feed-feature{flex-basis:44vw;min-width:124px}
  .footer-feed{padding:14px 12px 16px}
}

/* The swipe row's min-content (5 tiles + gaps ~700px) was forcing its grid
   track open, so the footer panel measured 887px inside a 375px viewport and
   never actually scrolled — page-level overflow:hidden hid the damage.
   Grid/flex items need an explicit min-width:0 to be allowed to shrink. */
.footer-top{grid-template-columns:minmax(0,40fr) minmax(0,60fr)}
.footer-brand-col,.footer-feed{min-width:0}
.feed-grid{min-width:0;max-width:100%}
@media(max-width:1024px){.footer-top{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){
  .footer-feed{width:100%;max-width:100%;box-sizing:border-box}
  .feed-grid{width:100%;max-width:100%}
  .feed-cell,.feed-feature{min-width:0}
}

/* ==========================================================================
   COMMUNITY IMPACT — rebuilt to Prince's mockup (2026-09-27)
   Copy left, squircle photo right, white quote card overlapping its lower
   left, caption bottom-right, and a full-width white pill of values below.
   ========================================================================== */
.flow-scene .people-section,
.people-section{
  position:relative;overflow:hidden;background:transparent!important;
  padding:clamp(64px,7vw,110px) 0 clamp(56px,6vw,96px)}
.impact-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../images/studio/impact-bg.jpg") center/cover no-repeat}
.impact-bg:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(236,246,255,.16) 46%,rgba(255,255,255,.4))}

.people-layout{
  position:relative;z-index:2;
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  grid-template-areas:"copy photo" "values values";
  column-gap:clamp(24px,3.4vw,60px);row-gap:clamp(34px,4vw,62px)}

.people-copy{grid-area:copy}
.people-copy h2{
  margin:.5rem 0 1rem;color:#0b2d68;font-weight:800;letter-spacing:-.022em;
  font-size:clamp(2.1rem,3.7vw,3.35rem);line-height:1.06}
.people-copy p{
  margin:0;max-width:46ch;color:#4a6584;
  font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.66}

/* --- the squircle photo --- */
.people-photo{
  grid-area:photo;position:relative;margin:0;justify-self:end;width:100%;
  border-radius:clamp(44px,5.4vw,92px);overflow:hidden;
  border:6px solid rgba(255,255,255,.92);
  box-shadow:0 30px 78px rgba(11,64,132,.22),0 0 0 1px rgba(150,200,245,.4);
  aspect-ratio:4/3}
.people-photo img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.people-photo-tag{
  position:absolute;right:22px;bottom:26px;z-index:3;text-align:right;
  color:#fff;font-weight:800;font-size:clamp(.74rem,.88vw,.9rem);
  line-height:1.35;letter-spacing:.09em;text-transform:uppercase;
  text-shadow:0 2px 14px rgba(3,20,48,.7)}
.people-photo-tag:after{
  content:"";display:block;width:26px;height:2px;margin:9px 0 0 auto;
  background:rgba(255,255,255,.85);border-radius:2px}

/* --- quote card overlapping the photo --- */
.people-quote{
  grid-area:photo;position:relative;z-index:4;align-self:end;justify-self:start;
  margin:0 0 clamp(18px,2.4vw,46px) clamp(-90px,-6vw,-40px);
  max-width:min(400px,84%);
  background:#fff;border-radius:26px;padding:24px 28px 22px;
  box-shadow:0 26px 60px rgba(11,64,132,.2);border:1px solid rgba(160,205,246,.4)}
.pq-mark{
  display:block;font-size:2.6rem;line-height:.6;color:#0f8bef;
  font-weight:800;margin-bottom:10px}
.people-quote p{
  margin:0;font-style:italic;color:#1a4f8f;
  font-size:clamp(1rem,1.2vw,1.16rem);line-height:1.45}
.people-quote cite{
  display:block;margin-top:16px;font-style:normal;font-weight:800;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#4d7fbb}

/* --- the values pill --- */
.people-values{
  grid-area:values;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.9);
  border-radius:clamp(26px,3vw,42px);padding:clamp(14px,1.5vw,22px) clamp(10px,1.4vw,22px);
  box-shadow:0 22px 56px rgba(11,64,132,.14);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.people-values .impact-stat{
  display:flex;align-items:center;gap:14px;padding:10px clamp(10px,1.3vw,22px);
  border:0!important;position:relative}
.people-values .impact-stat+.impact-stat:before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:rgba(140,190,240,.45)}
.people-values .impact-stat svg{
  width:44px;height:44px;flex:0 0 auto;padding:10px;border-radius:50%;
  color:#0f8bef;background:rgba(15,139,239,.1);box-sizing:border-box}
.people-values .impact-stat strong{
  display:block;color:#0b2d68;font-size:clamp(.98rem,1.08vw,1.1rem);line-height:1.2;font-weight:800}
.people-values .impact-stat span{
  display:block;margin-top:3px;color:#5b7ba6;font-size:clamp(.82rem,.92vw,.94rem);line-height:1.3}

@media(max-width:1024px){
  .people-quote{margin-left:clamp(-40px,-3vw,-16px);max-width:min(360px,90%)}
  .people-values{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:6px}
  .people-values .impact-stat:nth-child(3):before{display:none}
}
@media(max-width:860px){
  .people-layout{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "photo" "quote" "values";
    row-gap:var(--space-lg)}
  .people-copy{text-align:left}
  .people-photo{
    grid-area:photo;justify-self:stretch;aspect-ratio:4/3;
    border-radius:clamp(30px,8vw,48px);border-width:5px;margin:0}
  .people-quote{
    grid-area:quote;margin:0;max-width:none;justify-self:stretch;
    align-self:auto;padding:20px 22px}
  .people-photo-tag{right:16px;bottom:18px}
  .people-values{grid-template-columns:1fr;border-radius:26px;padding:8px 10px}
  .people-values .impact-stat{min-height:74px}
  .people-values .impact-stat+.impact-stat:before{
    left:16px;right:16px;top:0;bottom:auto;width:auto;height:1px}
}

/* Caption legibility over a busy photo. The gradient is fully transparent
   well inside the frame and the frame clips it, so there is no hard edge. */
.people-photo:after{
  content:"";position:absolute;right:0;bottom:0;left:0;height:46%;z-index:2;
  pointer-events:none;
  background:linear-gradient(to top,rgba(4,22,52,.62) 0%,rgba(4,22,52,.26) 38%,rgba(4,22,52,0) 100%)}
.people-photo-tag{bottom:30px}
@media(max-width:860px){.people-photo:after{height:40%}}

/* ==========================================================================
   STACKING — decoration must never paint over content
   The rings live inside .credential-core, which comes AFTER .credential-side-left
   in the grid, so its arcs were painting on top of the left-hand cards. Give
   decoration an explicit floor and lift every card, circle and photo above it.
   ========================================================================== */
.cred-map,.cred-ribbons,.credential-aurora,.bg-sweep,
.work-section:before,.work-section:after,.work-orb,
.proof-glow,.conversation-glow,.hero-light,.m-orb,.impact-bg{
  z-index:0!important;
}
.credential-rings,.credential-rings span{z-index:0!important}

.credential-stage .dc-container,
.work-section .dc-container,
.people-section .dc-container{position:relative;z-index:3}

.credential-orbit-layout{position:relative;z-index:3}
.credential-side,.credential-side-left,.credential-side-right{position:relative;z-index:4}
.credential-badge{position:relative;z-index:5}
.credential-core{position:relative;z-index:4}
.credential-core-photo{position:relative;z-index:5}
.credential-icon{z-index:6}
.credential-heading{position:relative;z-index:4}

.work-cards{position:relative;z-index:3}
.work-card{position:relative;z-index:4}
.work-card-media{z-index:5}
.work-card-icon{z-index:6}

.people-layout{z-index:3}
.people-photo{z-index:4}
.people-quote{z-index:5}
.people-values{position:relative;z-index:4}

/* the connector dots/lines that hang off each icon belong behind the cards */
.credential-badge .credential-icon::before,
.credential-badge .credential-icon::after{z-index:-1}

/* ==========================================================================
   CREDENTIALS STACKING — correction
   .credential-core holds the decorative ring spans AND the 660px dashed
   circle (.credential-core::after). Giving core the SAME z-index as the side
   columns meant DOM order decided, and core comes last -> its rings painted
   across the left-hand cards and their images.
   Core must sit BELOW the cards; the portrait rides above the rings inside it.
   ========================================================================== */
.credential-core{z-index:1!important}
.credential-core::after{z-index:0!important}
.credential-rings{z-index:0!important}
.credential-rings span{z-index:0!important}
.credential-core-photo{z-index:3!important}

.credential-side,.credential-side-left,.credential-side-right{z-index:6!important}
.credential-badge{z-index:7!important}
.credential-badge .credential-icon{z-index:8!important}

/* the connector line + node dot belong behind the card, never over its image */
.credential-badge .credential-icon::after{z-index:-2!important}
.credential-badge .credential-icon::before{z-index:-1!important}

/* ==========================================================================
   THE LINE ON THE IMAGES — root cause
   .credential-side-right ... .credential-icon::after used
       right:100%; transform:scaleX(-1); transform-origin:right center
   Flipping about the RIGHT edge maps the 64px connector line back across the
   icon itself, so it drew straight over the three right-hand award photos.
   (A negative z-index could not save it either: .credential-icon carries its
   own z-index, so it forms a stacking context its pseudo cannot escape.)
   Fix the geometry instead of the paint order: no transform, and reverse the
   gradient so the line still fades away from the icon.
   ========================================================================== */
.credential-side-right .credential-badge .credential-icon::after{
  right:100%;left:auto;
  transform:none!important;transform-origin:initial!important;
  background:linear-gradient(to left,rgba(86,176,255,.75),rgba(86,176,255,0))!important;
}
.credential-side-left .credential-badge .credential-icon::after{
  left:100%;right:auto;transform:none!important;
  background:linear-gradient(to right,rgba(86,176,255,.75),rgba(86,176,255,0))!important;
}
/* keep the connector strictly outside the circle */
.credential-badge .credential-icon{overflow:visible}
.credential-badge .credential-icon::after{z-index:0!important}
.credential-badge .credential-icon::before{z-index:0!important}

/* ==========================================================================
   CREDENTIALS — champagne-gold organisation label (Prince's spec, 2026-09-27)
   The organisation sits in a darker translucent navy capsule in #FFD66B gold;
   the award name stays bright white. Gold for the source, white for the prize
   — never both gold.
   ========================================================================== */
:root{
  --gold:#ffd66b; --gold-hi:#fff1b0; --gold-glow:rgba(255,214,107,.38);
  --label-navy:#173f6f; --label-navy-t:rgba(15,52,95,.82);
}

.credential-text{display:block}

.award-source{
  display:inline-block;position:relative;
  color:var(--gold);
  background:linear-gradient(180deg,rgba(41,91,139,.92) 0%,rgba(15,52,95,.92) 100%);
  border:1px solid rgba(255,222,126,.42);
  border-radius:18px;
  padding:7px 16px 8px;
  font-size:clamp(.66rem,.78vw,.8rem);
  font-weight:800;line-height:1.25;
  letter-spacing:.11em;text-transform:uppercase;text-align:center;
  text-shadow:0 0 6px rgba(255,214,107,.35),0 1px 1px rgba(0,0,0,.3);
  box-shadow:0 0 10px rgba(255,214,107,.2),0 0 22px rgba(255,214,107,.14),
             inset 0 1px 0 rgba(255,255,255,.15);
  max-width:100%;
}
/* small gold light flares either side of the capsule */
.award-source:before,.award-source:after{
  content:"";position:absolute;top:50%;width:16px;height:1px;
  background:linear-gradient(90deg,transparent,#ffe697);
  box-shadow:0 0 5px rgba(255,221,115,.9);
  transform:translateY(-50%);pointer-events:none;
}
.award-source:before{left:-10px}
.award-source:after{right:-10px;transform:translateY(-50%) rotate(180deg)}

.award-name{
  display:block;margin-top:10px;
  color:#fff!important;
  font-size:clamp(1.02rem,1.3vw,1.36rem);
  font-weight:800;line-height:1.1;letter-spacing:-.012em;
  text-shadow:0 2px 8px rgba(4,31,63,.45);
}

/* these beat the earlier `.flow-scene .credential-badge > span:last-child`
   colour rules, which now match .credential-text rather than the label */
.flow-scene .credential-badge .award-source,
.credential-side .credential-badge .award-source{color:var(--gold)!important}
.flow-scene .credential-badge .award-name,
.credential-side .credential-badge .award-name{color:#fff!important}
.credential-badge .credential-text{color:inherit}

/* slightly deeper card so the gold separates cleanly */
@media(min-width:861px){
  .credential-badge,.credential-side-left .credential-badge{
    background:linear-gradient(135deg,rgba(28,84,137,.96) 0%,rgba(42,103,158,.94) 48%,rgba(30,78,126,.97) 100%)!important;
    border:1px solid rgba(116,194,255,.35)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 12px 30px rgba(9,43,80,.22)!important;
  }
  .credential-badge:hover,.credential-side-left .credential-badge:hover{
    border-color:rgba(190,230,255,.7)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 20px 48px rgba(9,43,80,.36),
               0 0 34px rgba(255,214,107,.18)!important;
  }
  /* the photo ring, richer */
  .credential-icon,.credential-side-left .credential-badge .credential-icon{
    border:0!important;padding:5px;
    background-clip:content-box!important;
    box-shadow:0 0 0 5px rgba(16,67,116,.72),0 8px 20px rgba(4,31,61,.35)!important;
  }
  .credential-icon:before{
    content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;
    background:linear-gradient(145deg,#72c6ff,#124f91 55%,#4daef0);
  }
}

@media(max-width:860px){
  .award-source{
    font-size:.68rem;padding:6px 13px 7px;border-radius:14px;letter-spacing:.1em}
  .award-source:before,.award-source:after{width:11px}
  .award-source:before{left:-7px}
  .award-source:after{right:-7px}
  .award-name{margin-top:9px;font-size:clamp(1.18rem,5.2vw,1.5rem)}
  /* the capsule must follow the card's alternating text alignment */
  .credential-text{text-align:inherit}
}

/* The old `.credential-badge > span:last-child { text-transform:uppercase }`
   now matches .credential-text and was inheriting down onto the award name,
   turning "Best Global Media Award" into shouty caps. Only the gold source
   capsule is uppercase. */
.credential-text{text-transform:none!important;letter-spacing:normal!important}
.award-name{text-transform:none!important;letter-spacing:-.012em!important}
.award-source{text-transform:uppercase!important;letter-spacing:.11em!important}

/* the capsule follows its column's alignment, same as the award name */
@media(min-width:861px){
  .credential-side-left .credential-text{text-align:right}
  .credential-side-right .credential-text{text-align:left}
  .credential-more .credential-text{text-align:left}
}
@media(max-width:860px){
  .credential-side-left .credential-badge:nth-child(1) .credential-text,
  .credential-side-left .credential-badge:nth-child(3) .credential-text,
  .credential-side-right .credential-badge:nth-child(2) .credential-text{text-align:left}
  .credential-side-left .credential-badge:nth-child(2) .credential-text,
  .credential-side-right .credential-badge:nth-child(1) .credential-text,
  .credential-side-right .credential-badge:nth-child(3) .credential-text{text-align:right}
}

/* ==========================================================================
   CREDENTIALS — remove the constellation furniture entirely
   Prince: "remove any effect on top of this section, those white dots or
   lines coming in the circle". Out go the glowing node dots, the connector
   lines, the dashed orbit circle and the faint concentric ring arcs.
   The portrait keeps its own blue glow ring (that is the photo's frame).
   ========================================================================== */
.credential-badge .credential-icon::before,
.credential-badge .credential-icon::after{content:none!important;display:none!important}
.credential-core::after{content:none!important;display:none!important}
.credential-rings,.credential-rings span{display:none!important}
.cred-ribbons{display:none!important}

/* The "all 16 awards" icon is <span class="credential-icon dots-icon">•••</span>.
   Once it also carried a background photo, those three bullet characters
   rendered as white dots sitting on the image. Kill the glyphs, keep the photo. */
.credential-more .credential-icon,
.credential-icon.dots-icon{
  font-size:0!important;line-height:0!important;color:transparent!important;
  text-indent:-9999px;overflow:hidden}

/* ==========================================================================
   BRAND LOCKUP — strapline justified to the exact width of the wordmark
   The strapline's glyphs measured 409px inside a 344px box, so it overflowed
   its own box by 65px and ran toward the nav. Now the TITLE defines the box
   width (the strapline contributes 0 to intrinsic sizing via width:0 +
   min-width:100%), and the strapline is justified to fill exactly that width.
   ========================================================================== */
.brand-mark{display:flex;flex-direction:column;align-items:flex-start;width:fit-content}
.brand-title{
  display:block;white-space:nowrap;
  font-size:2.45rem;line-height:1;letter-spacing:-.025em}
.brand-subtitle{
  display:block;
  width:0;min-width:100%;            /* title sets the width, not the strapline */
  margin-top:7px;
  white-space:nowrap;overflow:hidden;
  font-size:.615rem;font-weight:700;
  letter-spacing:.03em;line-height:1.25;
  text-transform:uppercase;
  text-align:justify;text-align-last:justify;
}
/* Header logo lockup — compact size */
.brand-mark{font-size:1.4rem;line-height:1}
.brand-title{font-size:1em}
.brand-subtitle{font-size:.227em;letter-spacing:0}
@media(max-width:1120px){
  .brand-mark{font-size:1.3rem}
  .site-header .brand-subtitle{display:none}
}
@media(max-width:860px){.brand-mark{font-size:1.2rem}}
@media(max-width:560px){.brand-mark{font-size:1.1rem}}
.site-footer .brand-mark{font-size:inherit;display:flex}
.site-footer .brand-title{font-size:clamp(1.8rem,2.4vw,2.35rem);letter-spacing:-.02em}
.site-footer .brand-subtitle{
  width:auto;min-width:0;white-space:normal;overflow:visible;
  text-align:left;text-align-last:auto;
  font-size:.72rem;letter-spacing:.14em;margin-top:9px}
@media(max-width:860px){
  .site-footer .brand-subtitle{text-align:center;font-size:.7rem}
}

/* ==========================================================================
   CREDENTIAL ORBITS — the ring accents, restored but guaranteed BEHIND
   Rendered as a section-level layer (a sibling that precedes .dc-container,
   which is z-index:3), NOT inside .credential-core. That was the original
   mistake: the core sits after the left column in the grid, so anything
   inside it painted over those cards. A section-level layer cannot.
   ========================================================================== */
.cred-orbits{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(96vw,1180px);aspect-ratio:1;z-index:0;pointer-events:none;
  display:grid;place-items:center;contain:paint;
}
.cred-orbits span,.cred-orbits i{
  position:absolute;border-radius:50%;pointer-events:none;
}
.cred-orbits span{
  border:1px solid rgba(120,196,255,.22);
  box-shadow:0 0 26px rgba(90,180,255,.1) inset;
  animation:orbPulse 9s ease-in-out infinite;
}
.cred-orbits span:nth-child(1){width:46%;height:46%}
.cred-orbits span:nth-child(2){width:62%;height:62%;animation-delay:-2.2s;opacity:.8}
.cred-orbits span:nth-child(3){width:79%;height:79%;animation-delay:-4.4s;opacity:.55}
.cred-orbits span:nth-child(4){width:97%;height:97%;animation-delay:-6.6s;opacity:.35}
.cred-orbits .orb-dash{
  width:70%;height:70%;border:1px dashed rgba(140,210,255,.3);
  animation:orbSpin 64s linear infinite;
}
.cred-orbits .orb-dash.two{
  width:88%;height:88%;border-style:dotted;opacity:.6;
  animation:orbSpin 92s linear infinite reverse;
}
@keyframes orbPulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.022);opacity:1}}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@media(max-width:860px){
  .cred-orbits{width:150vw}
  .cred-orbits span:nth-child(4),.cred-orbits .orb-dash.two{display:none}
}
@media(prefers-reduced-motion:reduce){
  .cred-orbits span,.cred-orbits .orb-dash{animation:none!important}
}

/* ==========================================================================
   GLASS PASS — one consistent glass language across every surface
   ========================================================================== */
:root{
  --glass-bg:rgba(255,255,255,.62);
  --glass-brd:rgba(255,255,255,.75);
  --glass-ring:rgba(140,200,250,.34);
  --glass-shadow:0 18px 48px rgba(9,44,92,.13);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.85);
  --ease-spring:cubic-bezier(.2,.8,.24,1);
}
.info-card,.award-row,.booking-card,.art-card,.trust-strip,
.timeline-card,.tick-list li,.g-filter,.strip-cell,.people-values,.footer-feed{
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
}
.info-card,.award-row,.booking-card,.art-card,.tick-list li{
  background:var(--glass-bg)!important;
  border:1px solid var(--glass-brd)!important;
  box-shadow:var(--glass-hi),0 0 0 1px var(--glass-ring),var(--glass-shadow)!important;
  transition:transform .45s var(--ease-spring),box-shadow .45s var(--ease-spring),
             border-color .45s var(--ease-spring);
}
.info-card:hover,.award-row:hover,.booking-card:hover,.art-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--glass-hi),0 0 0 1px rgba(120,190,250,.6),
             0 30px 70px rgba(9,44,92,.22),0 0 46px rgba(90,175,255,.2)!important;
}
.trust-strip,.timeline-card{
  background:var(--glass-bg)!important;
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-hi),0 0 0 1px var(--glass-ring),var(--glass-shadow);
}
/* a slow specular sweep across glass cards */
.info-card,.art-card,.award-row{position:relative;overflow:hidden}
.info-card:before,.art-card:before,.award-row:before{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;transition:opacity .2s}
.info-card:hover:before,.art-card:hover:before,.award-row:hover:before{
  opacity:1;animation:sheen 1.05s var(--ease-spring)}
@keyframes sheen{from{left:-60%}to{left:120%}}
.art-card-body,.info-card h3,.info-card p,.award-body{position:relative;z-index:2}

/* ==========================================================================
   MOTION SYSTEM — reveal, fly, zoom, spin, clip-wipe, word stagger
   Everything is opt-in via a class, gated behind prefers-reduced-motion and
   the ?shot screenshot mode, and always ends at the identity transform so a
   failed observer can never leave content invisible.
   ========================================================================== */
/* motion system — disabled, all content visible immediately */
.rv,.rv-up,.rv-fly-l,.rv-fly-r,.rv-zoom,.rv-spin,.rv-clip{
  opacity:1;transform:none;clip-path:none;will-change:auto}
.rv.is-in{opacity:1;transform:none;clip-path:none;transition:none}
.w-anim{display:inline-block;vertical-align:top}
.w-anim > i{display:inline-block;font-style:inherit;transform:none;opacity:1;transition:none}
.is-in .w-anim > i,.w-anim.is-in > i{transform:none;opacity:1}
/* typewriter for the hero role line */
.type-line{position:relative;white-space:normal}
.type-line .caret{
  display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-.12em;
  background:currentColor;animation:caretBlink 1s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}
.type-line.is-done .caret{display:none}
/* images: subtle float + hover lift */
.strip-cell,.g-cell,.art-card-media,.people-photo,.ph-visual{overflow:hidden}
.strip-cell img,.g-cell img{transition:transform .8s var(--ease-spring)}
.strip-cell:hover img,.g-cell:hover img{transform:scale(1.07)}
.ph-visual{transition:transform .6s var(--ease-spring),box-shadow .6s}
.ph-visual:hover{transform:translateY(-5px) scale(1.01)}

@media(prefers-reduced-motion:reduce){
  .rv,.rv-up,.rv-fly-l,.rv-fly-r,.rv-zoom,.rv-spin,.rv-clip{
    opacity:1!important;transform:none!important;clip-path:none!important}
  .w-anim > i{transform:none!important;opacity:1!important}
  .type-line .caret{display:none}
  .info-card:hover:before,.art-card:hover:before,.award-row:hover:before{animation:none;opacity:0}
}

/* ==========================================================================
   MOBILE CREDENTIAL FIXES
   1. The six per-badge background-image rules were written inside
      @media(min-width:861px), so on phones the circles had no image at all —
      just the #071d3f fallback. Declared at global scope now.
   2. `hyphens:auto` was breaking words mid-card: "DEVEL-OPMENT", "Pio-neer",
      "hon-ours".
   ========================================================================== */
.credential-side .credential-badge[data-cred="addi"] .credential-icon{background-image:url("../images/studio/cred/addi.jpg")}
.credential-side .credential-badge[data-cred="volunteer"] .credential-icon{background-image:url("../images/studio/cred/volunteer.jpg")}
.credential-side .credential-badge[data-cred="filmfest"] .credential-icon{background-image:url("../images/studio/cred/filmfest.jpg")}
.credential-side .credential-badge[data-cred="lifetime"] .credential-icon{background-image:url("../images/studio/cred/lifetime.jpg")}
.credential-side .credential-badge[data-cred="hapawards"] .credential-icon{background-image:url("../images/studio/cred/hapawards.jpg")}
.credential-side .credential-badge[data-cred="more"] .credential-icon{background-image:url("../images/studio/cred/more.jpg")}
.credential-icon{background-position:center;background-size:cover;background-repeat:no-repeat}

.credential-badge .credential-text,
.credential-badge > span:last-child,
.award-source,.award-name{hyphens:none!important;-webkit-hyphens:none!important;overflow-wrap:break-word}

/* ==========================================================================
   ORBITS — softened so they read as ambience, not as cuts
   At ~1000px the outermost ring spanned the full container (20..980), so its
   left/right extremes landed exactly on the card edges and read as a hard
   vertical cut through them. Pull the rings inside the gutter and drop the
   contrast so they sit behind the composition instead of dividing it.
   ========================================================================== */
.cred-orbits{width:min(62vw,860px)}
.cred-orbits span{
  border-color:rgba(130,200,255,.13);
  box-shadow:none;
}
.cred-orbits span:nth-child(3){opacity:.4}
.cred-orbits span:nth-child(4){opacity:.22}
.cred-orbits .orb-dash{border-color:rgba(150,215,255,.17)}
.cred-orbits .orb-dash.two{opacity:.4}
/* fade the rings out toward their edges so nothing terminates in a hard line */
.cred-orbits{
  -webkit-mask-image:radial-gradient(circle,#000 42%,rgba(0,0,0,.45) 68%,transparent 88%);
          mask-image:radial-gradient(circle,#000 42%,rgba(0,0,0,.45) 68%,transparent 88%);
}
@media(max-width:1180px){
  .cred-orbits{width:min(56vw,760px)}
  .cred-orbits span:nth-child(4),.cred-orbits .orb-dash.two{display:none}
}
@media(max-width:860px){
  .cred-orbits{width:118vw}
}
/* give the card columns a little air so they never touch the page margin */
@media(min-width:861px) and (max-width:1240px){
  .credential-orbit-layout{gap:clamp(12px,1.6vw,26px)}
  .credential-badge,.credential-side-left .credential-badge{
    padding-left:clamp(10px,1.1vw,18px);padding-right:clamp(10px,1.1vw,18px)}
}

/* The original stroke icons inside .credential-icon were hidden only inside
   @media(min-width:861px) — the same mistake as the background images — so on
   phones the old line-art glyphs drew on top of the award photos. Global. */
.credential-icon svg,.credential-icon .dots-icon{display:none!important}
.credential-icon{font-size:0;line-height:0}

/* ==========================================================================
   EDITORIAL IMAGE SYSTEM
   Images that shape the page instead of sitting under it: varied frames
   (circle, arch, blob, offset), text that wraps around a floated figure,
   and safe cropping defaults (object-position biased to the upper body so
   faces are never cut).
   ========================================================================== */
.ed{position:relative;margin:0}
.ed img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ed--rect img{border-radius:22px}
.ed--circle{aspect-ratio:1}
.ed--circle img{border-radius:50%;object-position:50% 28%}
.ed--arch img{border-radius:50% 50% 22px 22px / 34% 34% 22px 22px}
.ed--blob img{border-radius:56% 44% 48% 52% / 44% 50% 50% 56%}
.ed--soft img{border-radius:clamp(28px,4vw,72px)}
.ed--ring{padding:7px;border-radius:50%;
  background:linear-gradient(145deg,#7cc4ff,#124f91 58%,#4daef0);
  box-shadow:0 0 0 6px rgba(16,67,116,.18),0 22px 50px rgba(6,40,86,.24)}
.ed--ring img{border-radius:50%}
.ed--frame{border:6px solid rgba(255,255,255,.9);
  box-shadow:0 26px 62px rgba(11,64,132,.2);overflow:hidden}
.ed-cap{
  position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;
  color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(to top,rgba(4,22,52,.72),rgba(4,22,52,0));
  border-radius:0 0 22px 22px;pointer-events:none}

/* text wrapping around a floated figure */
.ed-wrap{max-width:74ch}
.ed-wrap .ed-float{
  float:right;width:min(42%,320px);margin:6px 0 20px 30px;shape-outside:margin-box}
.ed-wrap .ed-float.is-left{float:left;margin:6px 30px 20px 0}
.ed-wrap .ed-float.ed--circle,.ed-wrap .ed-float.ed--blob{shape-outside:circle(50%)}
.ed-wrap p{margin:0 0 var(--space-md);font-size:1.04rem;line-height:1.74;color:#3a5470}
.ed-wrap:after{content:"";display:block;clear:both}

/* two-column feature: copy one side, shaped image the other */
.ed-feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(26px,3.6vw,64px);align-items:center}
.ed-feature.is-flip .ed-feature-copy{order:2}
.ed-feature-copy p{font-size:1.04rem;line-height:1.72;color:#3a5470;margin:0 0 var(--space-md)}
.ed-feature .ed{width:100%}
.ed-feature .ed--circle{max-width:440px;margin-inline:auto}

/* offset stacked pair */
.ed-duo{position:relative;padding-bottom:12%}
.ed-duo .ed-a{width:74%}
.ed-duo .ed-b{position:absolute;right:0;bottom:0;width:46%;
  border:6px solid rgba(255,255,255,.92);border-radius:20px;overflow:hidden;
  box-shadow:0 22px 54px rgba(11,64,132,.24)}

/* varied mosaic: some tall, some wide, some round */
.ed-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-rows:150px}
.ed-mosaic .ed{overflow:hidden;border-radius:20px;box-shadow:0 14px 40px rgba(6,38,86,.14)}
.ed-mosaic .ed img{transition:transform .8s var(--ease-spring)}
.ed-mosaic .ed:hover img{transform:scale(1.06)}
.ed-mosaic .t2{grid-row:span 2}
.ed-mosaic .w2{grid-column:span 2}
.ed-mosaic .round{border-radius:50%;grid-row:span 2}
.ed-mosaic .round img{border-radius:50%}

@media(max-width:860px){
  .ed-feature{grid-template-columns:1fr;gap:var(--space-lg)}
  .ed-feature.is-flip .ed-feature-copy{order:0}
  .ed-wrap .ed-float,.ed-wrap .ed-float.is-left{
    float:none;width:100%;max-width:none;margin:0 0 var(--space-md)}
  .ed-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;gap:10px}
  .ed-mosaic .w2{grid-column:span 2}
  .ed-duo{padding-bottom:18%}
  .ed-duo .ed-a{width:82%}
  .ed-duo .ed-b{width:52%}
}

/* ==========================================================================
   UNIVERSAL LIGHTBOX (zoom) + SHARE
   Any content image opens full-screen, can be zoomed, and can be shared.
   ========================================================================== */
.zoomable{cursor:zoom-in}
.lightbox{touch-action:none}
.lb-img{transition:transform .25s var(--ease-spring);transform-origin:center center;cursor:zoom-in}
.lightbox.is-zoomed .lb-img{cursor:grab;transform:scale(2.1)}
.lb-tools{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:5}
.lb-tools button,.lb-tools a{
  appearance:none;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);
  color:#fff;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;text-decoration:none;transition:.22s}
.lb-tools button:hover,.lb-tools a:hover{background:rgba(255,255,255,.24)}
.lb-tools svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9}
.lb-caption{
  position:absolute;left:50%;bottom:62px;transform:translateX(-50%);
  max-width:80vw;text-align:center;color:rgba(255,255,255,.82);font-size:.9rem}

/* share bar */
.share-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  padding:clamp(20px,2.6vw,30px) 0}
.share-bar h3{
  margin:0;font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;
  font-weight:800;color:#6fb4f0}
.share-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.share-btn{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(160,210,255,.4);background:rgba(255,255,255,.06);
  color:#cfe2f6;text-decoration:none;cursor:pointer;appearance:none;
  transition:transform .25s var(--ease-spring),background .25s,border-color .25s}
.share-btn:hover{transform:translateY(-3px);background:rgba(57,196,255,.2);border-color:#7cc4ff;color:#fff}
.share-btn svg{width:20px;height:20px;fill:currentColor}
.share-btn.is-copied{background:#0f8bef;border-color:#0f8bef;color:#fff}
.share-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(120%);
  background:#07224e;color:#fff;padding:12px 20px;border-radius:999px;font-size:.9rem;
  box-shadow:0 18px 44px rgba(3,20,50,.4);z-index:500;transition:transform .35s var(--ease-spring)}
.share-toast.is-on{transform:translateX(-50%) translateY(0)}
@media(max-width:860px){
  .share-bar{flex-direction:column;gap:14px}
}
/* strip + mosaic captions, revealed on hover like the gallery */
.strip-cell{position:relative}
.strip-cell .ed-cap,.ed-mosaic .ed-cap{
  opacity:0;transform:translateY(6px);transition:.3s;font-size:.72rem;padding:26px 12px 10px}
.strip-cell:hover .ed-cap,.ed-mosaic .ed:hover .ed-cap{opacity:1;transform:none}
@media(hover:none){.strip-cell .ed-cap,.ed-mosaic .ed-cap{opacity:1;transform:none}}

/* ==========================================================================
   CREDENTIAL CARDS — never animate across the viewport edge
   The reveal used .rv-fly-l / .rv-fly-r, which translate a card 64px
   horizontally. On a phone the cards already sit flush to the gutter, so
   mid-animation they crossed the screen edge and .credential-stage's
   overflow:hidden sliced them — the circles appeared cut in half while
   scrolling. On mobile they rise and fade instead; nothing moves sideways.
   ========================================================================== */
@media(max-width:860px){
  .credential-badge.rv-fly-l,
  .credential-badge.rv-fly-r{transform:translate3d(0,34px,0) !important}
  .credential-badge.rv-fly-l.is-in,
  .credential-badge.rv-fly-r.is-in{transform:none !important}
}
/* even on desktop, keep the travel inside the column so nothing is clipped */
@media(min-width:861px){
  .credential-badge.rv-fly-l{transform:translate3d(-30px,14px,0)}
  .credential-badge.rv-fly-r{transform:translate3d(30px,14px,0)}
}

/* ==========================================================================
   GPT ART-DIRECTION ROUND 1 — home page
   Implements the critique's own "five first" plus the clear wins.
   NOT implemented, deliberately: its "body 16px / eyebrow 12px" advice, which
   would undo Prince's explicit request for larger type for older readers.
   Base stays 18px and eyebrows stay ~13px.
   ========================================================================== */
:root{
  --space-section:104px;
  --space-section-tight:80px;
  --space-heading-content:44px;
  --space-component:28px;
  --radius-small:12px; --radius-card:20px; --radius-feature:32px; --radius-pill:999px;
}

/* 1 + 2. Kill the dead zone after the track record and impose one rhythm */
.flow-scene .proof-section,.proof-section{padding:96px 0 88px!important;min-height:auto!important}
.flow-scene .credential-stage,.credential-stage{padding:88px 0 104px!important;margin-top:0!important}
.flow-scene .work-section,.work-section{padding:96px 0 104px!important}
.flow-scene .people-section,.people-section{padding:96px 0 88px!important}
.flow-scene .conversation,.conversation{padding:100px 0 110px!important}
.work-heading{margin-bottom:48px}
.credential-heading{margin-bottom:56px}

/* 3. The track-record photo joins the composition instead of sitting beside it */
@media(min-width:861px){
  .proof-grid{grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .proof-photo-frame{transform:translateX(-26px) scale(1.06);transform-origin:center}
  .timeline-card{position:relative;z-index:2}
}

/* 4. Equal four-card row on large screens */
@media(min-width:1025px){
  .work-cards{grid-template-columns:repeat(4,1fr);gap:22px}
}
/* 8 + 20. Taller card photography, and every CTA on one baseline */
.work-card{display:flex;flex-direction:column}
.work-card-media{height:210px}
.work-card-body{display:flex;flex-direction:column;flex:1}
.work-card-link{margin-top:auto}

/* 5 + 19. Glow budget: take roughly a third out of the middle of the page */
.proof-glow{opacity:.34!important}
.work-orb{opacity:.4!important}
.credential-aurora{opacity:.42!important}
.cred-orbits span{border-color:rgba(130,200,255,.1)}
.credential-badge{box-shadow:0 12px 30px rgba(4,54,105,.22),inset 0 1px 0 rgba(255,255,255,.25)!important}
.credential-icon{box-shadow:0 0 0 4px rgba(48,161,255,.28),0 8px 20px rgba(4,31,61,.3)!important}
.work-card{box-shadow:0 14px 34px rgba(2,14,36,.34)!important}

/* 9. The quote panel stops covering the group photograph */
@media(min-width:1025px){
  .people-quote{max-width:min(340px,86%);margin-left:clamp(-56px,-3.6vw,-40px)}
}

/* 11. A deliberate bridge from the credential world into the dark Work band */
.credential-stage{position:relative}
.credential-stage::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;z-index:1;
  background:linear-gradient(to bottom,rgba(7,38,73,0),#04152f);pointer-events:none}

/* 12. Discipline the heading scale so section titles stop rivalling the hero */
.hero-title{font-size:clamp(3.2rem,5vw,4.35rem);line-height:.94;letter-spacing:-.03em}
.dc-section-title,.work-heading h2,.people-copy h2{
  font-size:clamp(2.35rem,3.4vw,3.05rem);line-height:1.02;letter-spacing:-.028em}
.cta-copy h2{font-size:clamp(2.6rem,3.8vw,3.45rem)}
.work-card h3{font-size:1.28rem;line-height:1.12}

/* 15. One atmospheric phrase in the hero, not two competing ones */
.hero-mantra{font-size:.62rem;letter-spacing:.17em;opacity:.55}

/* 17. Tie the capability strip to the hero instead of floating between */
@media(min-width:861px){
  .trust-strip-wrap{margin-top:-34px;position:relative;z-index:5}
  .proof-section{padding-top:116px!important}
}

/* 18 + 22. One radius language, one content width */
.dc-container{width:min(1180px,calc(100% - 64px))}
@media(min-width:1500px){.dc-container{width:min(1240px,calc(100% - 96px))}}
.info-card,.art-card,.award-row,.booking-card,.work-card{border-radius:var(--radius-card)!important}
.people-photo,.ph-visual,.proof-photo-frame{border-radius:var(--radius-feature)!important}

/* ==========================================================================
   THE CLIPPED CIRCLES — root cause
   My reveal rule set `clip-path: inset(0 0 0 0)` on EVERY `.rv.is-in`
   element. clip-path clips an element to its own box, so any credential
   circle that deliberately overhangs its card was sliced flat at the card
   edge. The wipe was only ever meant for `.rv-clip` (the eyebrows).
   Scope it, and make sure nothing else can clip an overhanging circle.
   ========================================================================== */
.rv.is-in{clip-path:none}
.rv-clip{clip-path:inset(0 100% 0 0)}
.rv-clip.is-in{clip-path:inset(0 0 0 0)}
.credential-badge,.credential-badge.rv,.credential-badge.rv.is-in{
  clip-path:none!important;overflow:visible!important}
.credential-icon{clip-path:none!important}

/* ==========================================================================
   PROOF PHOTO — no crop, ever
   The frame is aspect-ratio:1.37/1 and the photograph is 1.3707, so they
   match almost exactly. But three leftover fixed heights (560px / 320px /
   260px) were overriding that and, with object-fit:cover, cropping both
   subjects' heads clean off. object-fit:contain makes a crop impossible.
   ========================================================================== */
.proof-photo-frame{aspect-ratio:1.3707/1;overflow:hidden;background:#eaf4ff}
.proof-photo-frame img,
.flow-scene .proof-photo-frame img{
  width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center center!important;
}
@media(max-width:1120px){.proof-photo-frame img{height:100%!important}}
@media(max-width:860px){.proof-photo-frame img{height:100%!important}}
@media(max-width:560px){.proof-photo-frame img{height:100%!important}}
/* the caption must not sit on their faces */
.proof-photo-frame figcaption{
  background:linear-gradient(to top,rgba(4,22,52,.78),rgba(4,22,52,0));
  padding-top:40px}

/* ==========================================================================
   EDITORIAL LONG-FORM SYSTEM  (GPT round 1, inner pages)
   "The page should alternate reading / image / structured evidence."
   A 720px reading column with a 300px rail that carries a portrait, a pull
   quote or a fact block — so prose is never a single undifferentiated lane.
   ========================================================================== */
.lf{--read:720px;--rail:300px;padding-block:104px 112px}
.lf-grid{display:grid;grid-template-columns:minmax(0,var(--read)) var(--rail);gap:72px;align-items:start}
.lf-read{max-width:var(--read)}
.lf-read > p{margin:0 0 20px;font-size:1rem;line-height:1.68;color:#3a5470;max-width:74ch}
.lf-read > p:first-of-type{font-weight:500;max-width:78ch}
.lf-rail{position:sticky;top:104px;display:grid;gap:28px}
.lf-rail .ed{width:100%;border-radius:24px;overflow:hidden;
  box-shadow:0 20px 52px rgba(12,45,82,.16)}
.lf-rail .ed img{width:100%;height:340px;object-fit:cover;object-position:50% 22%}
.lf-quote{
  border-left:3px solid #39c4ff;padding:4px 0 4px 20px;margin:0;
  font-size:1.18rem;line-height:1.38;font-style:italic;color:#14508f}
.lf-quote cite{display:block;margin-top:12px;font-style:normal;font-weight:800;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#5b83b8}
.lf-fact{background:rgba(255,255,255,.7);border:1px solid rgba(160,205,246,.5);
  border-radius:18px;padding:22px 24px;backdrop-filter:blur(12px)}
.lf-fact dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:#5b83b8;margin-bottom:4px}
.lf-fact dd{margin:0 0 16px;font-size:1.02rem;line-height:1.3;color:#0b2d68;font-weight:700}
.lf-fact dd:last-child{margin-bottom:0}
/* a portrait the prose actually wraps around */
.lf-float{float:left;width:320px;margin:8px 44px 28px 0;shape-outside:margin-box;
  border-radius:22px;overflow:hidden;box-shadow:0 20px 50px rgba(12,45,82,.18)}
.lf-float img{display:block;width:100%;height:400px;object-fit:cover;object-position:50% 20%}
.lf-read:after{content:"";display:block;clear:both}
/* a thin metadata band that interrupts a long run of copy */
.lf-band{display:flex;gap:28px;flex-wrap:wrap;align-items:center;
  margin:34px 0 30px;padding:16px 0;border-block:1px solid rgba(15,69,110,.14)}
.lf-band span{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:#3f6c9e}
/* keep the decorative wash off the reading column */
.lf:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(248,252,255,.92) 0%,rgba(248,252,255,.76) 62%,rgba(248,252,255,.18) 100%)}
.lf{position:relative}
.lf > .dc-container{position:relative;z-index:2}

/* two-column split for a short, authoritative section (40/60) */
.split-2{display:grid;grid-template-columns:40% 1fr;gap:56px;align-items:start;
  padding-block:92px}
.split-2 .split-head{border-right:1px solid rgba(15,69,110,.14);padding-right:44px}
.split-2 p{margin:0 0 18px;font-size:1rem;line-height:1.7;color:#3a5470}

/* an appointment ledger instead of a wall of pills */
.ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:38px}
.ledger li{list-style:none;padding:19px 4px;border-top:1px solid rgba(15,69,110,.16);
  font-size:1rem;line-height:1.4;color:#0b2d68;font-weight:600}
.ledger li b{display:block;font-weight:800}
.ledger li span{display:block;margin-top:3px;font-weight:500;color:#5b7ba6;font-size:.92rem}
.ledger li.is-lead{grid-column:1/-1;background:rgba(255,255,255,.62);
  border-radius:14px;padding:20px 22px;border-top-color:transparent;
  box-shadow:0 14px 38px rgba(12,45,82,.09)}

/* a real ending instead of stopping at the bottom of a CMS field */
.next-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin-top:88px;padding-top:0}
.next-card{display:flex;flex-direction:column;gap:6px;padding:24px 26px;
  border-radius:18px;text-decoration:none;
  background:rgba(255,255,255,.7);border:1px solid rgba(160,205,246,.5);
  backdrop-filter:blur(12px);transition:transform .35s var(--ease-spring),box-shadow .35s}
.next-card:hover{transform:translateY(-5px);box-shadow:0 24px 58px rgba(12,45,82,.16)}
.next-card em{font-style:normal;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:#5b83b8}
.next-card strong{font-size:1.14rem;color:#0b2d68;line-height:1.2}
.next-card span{font-size:.94rem;color:#5b7ba6}

@media(max-width:1024px){
  .lf-grid{grid-template-columns:1fr;gap:40px}
  .lf-rail{position:static;grid-template-columns:repeat(2,1fr);display:grid}
  .lf-rail .ed img{height:280px}
  .split-2{grid-template-columns:1fr;gap:28px;padding-block:72px}
  .split-2 .split-head{border-right:0;border-bottom:1px solid rgba(15,69,110,.14);
    padding-right:0;padding-bottom:22px}
  .ledger{grid-template-columns:1fr;gap:0}
  .next-strip{grid-template-columns:1fr}
}
@media(max-width:860px){
  .lf{padding-block:72px 80px}
  .lf-float{float:none;width:100%;margin:0 0 26px}
  .lf-float img{height:300px}
  .lf-rail{grid-template-columns:1fr}
  .lf:before{background:linear-gradient(180deg,rgba(248,252,255,.9),rgba(248,252,255,.6))}
}

/* ==========================================================================
   GPT ROUND 2 — About: fixing the regressions I introduced
   Its three findings: the bio rail asset was promo collateral (replaced with
   verified photography), the floated opening pinched the reading measure, and
   the rail was too weak to earn its place.
   ========================================================================== */
/* the float no longer strangles the first paragraphs */
.lf-float{width:288px;margin:6px 40px 26px 0}
.lf{--read:760px}
.lf-grid{gap:64px}
/* a rail with actual authority */
.lf-rail .ed img{height:380px}
.lf-quote{font-size:1.28rem;padding-left:22px;border-left-width:4px}
.lf-fact{padding:24px 26px;background:rgba(255,255,255,.82)}
.lf-fact dd{font-size:1.06rem}
/* wash the decoration out from behind dense copy */
.lf:before{background:linear-gradient(90deg,rgba(248,252,255,.94) 0%,rgba(248,252,255,.88) 64%,rgba(248,252,255,.36) 100%)}
/* the long form announces itself as the feature, not another section */
.lf .prose-wrap{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:end;
  margin-bottom:26px;max-width:none}
.lf .prose-wrap .dc-eyebrow{grid-row:1}
.lf .prose-wrap .dc-section-title{grid-column:1;font-size:clamp(2.1rem,3vw,2.6rem);
  line-height:1.02;max-width:420px;margin:8px 0 0}
.lf .prose-wrap:after{content:"";display:block;height:1px;align-self:center;grid-column:2;
  background:rgba(16,63,106,.12)}
/* promoted board rows must look materially different, not just bigger */
.ledger li.is-lead{
  background:rgba(255,255,255,.74);border-radius:20px;padding:24px 26px;
  box-shadow:0 18px 48px rgba(14,44,78,.09);border:1px solid rgba(160,205,246,.45)}
.ledger li.is-lead b{font-size:1.14rem}
@media(max-width:1024px){
  .lf .prose-wrap{grid-template-columns:1fr;gap:0}
  .lf .prose-wrap:after{display:none}
}

/* Title block: 280px squeezed a long heading onto four lines, and the sticky
   rail was taller than its copy, leaving a dead column underneath. */
.lf .prose-wrap{grid-template-columns:minmax(420px,.58fr) 1fr;gap:36px}
.lf .prose-wrap .dc-section-title{max-width:none}
.lf-rail{position:static;align-content:start}
.lf-rail .ed img{height:320px}
.lf-grid{align-items:start}
@media(min-width:1025px){
  .lf-grid{grid-template-rows:auto}
  .lf-read{padding-bottom:8px}
}

/* ==========================================================================
   GPT ROUND 1 — five inner pages
   Its core finding: one template was doing all the work. Ledgers replace
   pill inventories, each page gets its own dominant structure, and the
   spacing system is unified.
   ========================================================================== */
.acc-ledger{list-style:none;margin:38px 0 0;padding:0}
.acc-ledger .acc-head{
  margin:34px 0 4px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:800;color:#5b83b8}
.acc-ledger .acc-head:first-child{margin-top:0}
.acc-ledger .acc-row{
  display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px;
  padding:15px 0;border-bottom:1px solid rgba(15,45,75,.16);
  background:none;box-shadow:none;border-radius:0}
.acc-ledger .acc-row b{font-weight:700;color:#0b2d68;font-size:1rem;line-height:1.35}
.acc-ledger .acc-row span{color:#5b7ba6;font-size:.94rem;line-height:1.35}

/* tick-lists stop pretending every item is a button */
.tick-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.tick-list li{
  background:none!important;border:0!important;border-top:1px solid rgba(15,45,75,.14)!important;
  border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;
  padding:14px 0 14px 30px;min-height:0}
.tick-list li:before{left:0;width:12px;height:12px;margin-top:-6px;
  box-shadow:inset 0 0 0 2px var(--blue-primary);background:transparent}

/* the unified spacing system it asked for */
.dc-section{padding-block:80px}
.prose-wrap .dc-eyebrow + .dc-section-title{margin-top:12px}
.dc-section-title + .prose-lead,.dc-section-title + p{margin-top:20px}
.prose-lead + .tick-list,.prose-lead + .info-grid,.prose-wrap + .tick-list,
.prose-wrap + .info-grid,.prose-wrap + .acc-ledger,.prose-wrap + .ledger{margin-top:28px}
@media(max-width:860px){
  .dc-section{padding-block:48px}
  .prose-lead + .tick-list,.prose-wrap + .tick-list,.prose-wrap + .acc-ledger{margin-top:24px}
  .tick-list{grid-template-columns:1fr;gap:0}
  .acc-ledger .acc-row{grid-template-columns:1fr;gap:2px;padding:13px 0}
}

/* the speaking hero was cutting the top of his head off */
.page-hero .ph-visual img{object-position:50% 20%}

/* a rail must never decide a section's height */
.lf-grid{align-items:start}
.lf-rail{align-self:start}

/* ==========================================================================
   SERVICES — three groups, not a nine-card matrix (GPT rounds 1 and 2)
   ========================================================================== */
.svc-group{
  display:grid;grid-template-columns:320px minmax(0,1fr);gap:48px;
  padding-block:44px;border-top:1px solid rgba(14,43,73,.2)}
.svc-group:first-of-type{border-top:0;padding-top:8px}
.svc-aside{position:sticky;top:104px;align-self:start}
.svc-aside h3{margin:0 0 12px;font-size:clamp(1.5rem,2.1vw,1.9rem);line-height:1.08;
  color:#0b2d68;letter-spacing:-.02em}
.svc-aside p{margin:0 0 18px;font-size:.98rem;line-height:1.6;color:#5b7ba6}
.svc-aside .ed{border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(12,45,82,.16)}
.svc-aside .ed img{width:100%;height:240px;object-fit:cover}
.svc-entry + .svc-entry{margin-top:28px;padding-top:28px;border-top:1px solid rgba(14,43,73,.12)}
.svc-entry h4{margin:0 0 10px;font-size:1.16rem;line-height:1.2;color:#0b2d68;font-weight:800}
.svc-entry p{margin:0;font-size:1rem;line-height:1.66;color:#3a5470}
/* training becomes a numbered syllabus, not another grid */
.syllabus{list-style:none;counter-reset:s;margin:28px 0 0;padding:0}
.syllabus li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:20px;
  padding:20px 0;border-top:1px solid rgba(14,43,73,.14)}
.syllabus li:before{content:counter(s,decimal-leading-zero);
  font-size:.86rem;font-weight:800;color:#5b83b8;letter-spacing:.06em;padding-top:3px}
.syllabus b{display:block;color:#0b2d68;font-size:1.1rem;line-height:1.2;margin-bottom:6px}
.syllabus span{display:block;color:#3a5470;font-size:1rem;line-height:1.62}
@media(max-width:1024px){
  .svc-group{grid-template-columns:1fr;gap:26px;padding-block:36px}
  .svc-aside{position:static}
  .svc-aside .ed img{height:200px}
}
@media(max-width:860px){
  .syllabus li{grid-template-columns:38px 1fr;gap:14px;padding:16px 0}
}

/* a horizontal fact strip, so a stacked rail never leaves a dead column */
.fact-strip{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-top:24px;border-top:1px solid rgba(14,43,73,.16);
  border-bottom:1px solid rgba(14,43,73,.16)}
.fact-strip div{padding:20px 26px 20px 0;position:relative}
.fact-strip div + div{padding-left:26px}
.fact-strip div + div:before{content:"";position:absolute;left:0;top:18%;bottom:18%;
  width:1px;background:rgba(14,43,73,.14)}
.fact-strip dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:#5b83b8;margin:0 0 5px}
.fact-strip dd{margin:0;font-size:1.04rem;line-height:1.3;color:#0b2d68;font-weight:700}
.intro-2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.intro-2 .ed{border-radius:18px;overflow:hidden;box-shadow:0 18px 46px rgba(12,45,82,.16)}
.intro-2 .ed img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media(max-width:860px){
  .intro-2{grid-template-columns:1fr;gap:24px}
  .fact-strip{grid-template-columns:1fr}
  .fact-strip div + div{padding-left:0;border-top:1px solid rgba(14,43,73,.12)}
  .fact-strip div + div:before{display:none}
}

/* ==========================================================================
   GALLERY — an archive, not an endless scroll (GPT named it the weakest page)
   Sticky toolbar, subject + archive-year filters, 24-per-page pagination,
   visible captions, and 3:2 thumbnails.
   ========================================================================== */
.g-toolbar{
  position:sticky;top:0;z-index:20;padding:16px 0 14px;
  background:linear-gradient(180deg,#f4f9fc 72%,rgba(244,249,252,0));
  display:grid;gap:10px}
.g-years{display:flex;flex-wrap:wrap;gap:8px}
.g-year{
  appearance:none;border:1px solid rgba(122,188,244,.4);background:rgba(255,255,255,.7);
  color:#3f6c9e;font:inherit;font-size:.86rem;font-weight:700;padding:8px 14px;min-height:38px;
  border-radius:999px;cursor:pointer;transition:.25s}
.g-year:hover{border-color:var(--blue-primary);color:#07224e}
.g-year.is-active{background:#0b2d68;border-color:#0b2d68;color:#fff}
.g-count{margin:2px 0 0;font-size:.9rem;color:#5b7ba6}
.g-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px;grid-auto-rows:auto}
.g-cell{aspect-ratio:3/2;grid-row:auto!important}
.g-cell.tall{grid-row:auto!important}
.g-cell figcaption{
  position:static;opacity:1;transform:none;background:none;color:#3a5470;
  padding:10px 2px 0;font-size:.86rem;font-weight:600;letter-spacing:0;
  text-transform:none;line-height:1.3}
.g-cell figcaption i{display:block;font-style:normal;font-size:.78rem;color:#5b83b8;margin-top:2px}
.g-cell{overflow:visible;box-shadow:none;border:0;background:none;border-radius:0}
.g-cell img{border-radius:12px;box-shadow:0 12px 30px rgba(6,38,86,.12);aspect-ratio:3/2}
.g-pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.g-pager button{
  appearance:none;border:1px solid rgba(122,188,244,.45);background:rgba(255,255,255,.75);
  color:#3f6c9e;font:inherit;font-weight:700;min-width:44px;min-height:44px;padding:0 12px;
  border-radius:12px;cursor:pointer;transition:.22s}
.g-pager button:hover{border-color:var(--blue-primary);color:#07224e}
.g-pager button.is-on{background:#0b2d68;border-color:#0b2d68;color:#fff}
.g-pager button[disabled]{opacity:.4;cursor:default}
@media(max-width:900px){.g-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.g-grid{grid-template-columns:1fr;gap:20px}}

/* ==========================================================================
   GPT ROUND 1, group 3
   ========================================================================== */
/* the hero wave showed a rectangular boundary on Articles/Awards/Contact:
   an earlier rule forced background-size:cover on it, which crops the SVG */
.page-hero:after{
  inset-inline:0;width:100%;display:block;
  background-size:100% 100%!important;background-position:bottom center!important}

/* AWARDS — a documented record, not sixteen identical cards */
.honours{list-style:none;margin:36px 0 0;padding:0;counter-reset:h}
.honour-row{
  display:grid;grid-template-columns:96px minmax(0,1fr) 170px;gap:28px;align-items:start;
  padding:24px 0;border-bottom:1px solid rgba(15,69,110,.18);
  background:transparent!important;box-shadow:none!important;border-radius:0!important}
.honour-year{
  font-size:1.02rem;font-weight:800;color:#0b2d68;letter-spacing:.01em;padding-top:2px}
.honour-main h3{margin:0 0 6px;font-size:1.12rem;line-height:1.28;color:#0b2d68;font-weight:800}
.honour-org{margin:0 0 6px;font-size:.96rem;color:#3f6c9e;font-weight:600}
.honour-main p{margin:0;font-size:.98rem;line-height:1.6;color:#4a6584}
.honour-tag{
  display:inline-block;margin-top:8px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:#8a6d1f;background:rgba(255,214,107,.22);
  border:1px solid rgba(214,168,54,.45);border-radius:999px;padding:4px 11px}
.honour-evidence img{width:100%;max-height:180px;object-fit:contain;border-radius:10px;display:block}
@media(max-width:860px){
  .honour-row{grid-template-columns:1fr;gap:10px;padding:20px 0}
  .honour-evidence img{max-height:200px;object-fit:cover}
}

/* ARTICLES — one lead story, then compact editorial rows */
.article-feature{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;margin-bottom:40px;
  align-items:center}
.article-feature img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:18px;display:block}
.article-feature h3{margin:0 0 10px;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.12}
.article-feature h3 a{color:#0b2d68;text-decoration:none}
.article-rows{list-style:none;margin:0;padding:0}
.article-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;
  padding:24px 0;border-top:1px solid rgba(15,69,110,.18)}
.article-row.no-img{grid-template-columns:1fr}
.article-row img{width:200px;aspect-ratio:3/2;object-fit:cover;border-radius:12px;display:block}
.article-row h3{margin:0 0 8px;font-size:1.22rem;line-height:1.2}
.article-row h3 a{color:#0b2d68;text-decoration:none}
.article-row p{margin:0;color:#4a6584;font-size:1rem;line-height:1.6}
.article-kind{display:inline-block;margin-bottom:8px;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:800;color:#5b83b8}
@media(max-width:860px){
  .article-feature{grid-template-columns:1fr;gap:20px}
  .article-row,.article-row.no-img{grid-template-columns:1fr;gap:14px}
  .article-row img{width:100%}
}

/* CONTACT — the job gets done in the first screen */
.contact-main{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start;
  padding-block:48px 56px}
.contact-actions{display:grid;gap:12px;margin-top:26px}
.contact-actions a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:56px;padding:14px 22px;border-radius:16px;text-decoration:none;
  background:linear-gradient(135deg,#0a5fb7,#0f8bef);color:#fff;font-weight:800;
  box-shadow:0 14px 34px rgba(10,95,183,.28);transition:transform .3s var(--ease-spring)}
.contact-actions a.is-secondary{
  background:rgba(255,255,255,.72);color:#0b2d68;border:1px solid rgba(160,205,246,.55);
  box-shadow:0 12px 30px rgba(12,45,82,.09)}
.contact-actions a:hover{transform:translateY(-3px)}
.contact-direct{margin-top:22px;font-size:1.04rem;color:#3a5470}
.contact-direct a{color:#0a5fb7;font-weight:700}
@media(max-width:860px){.contact-main{grid-template-columns:1fr;gap:28px;padding-block:32px 40px}}

/* ==========================================================================
   HERO — portrait left, copy right
   Flipping the two columns also puts the portrait FIRST on mobile (where the
   grid collapses to one column), instead of stranding it under the copy.
   The DOM order stays copy-then-visual for reading order; only the visual
   placement changes.
   ========================================================================== */
@media(min-width:861px){
  .hero-grid{grid-template-columns:.95fr 1.05fr}
  .hero-visual{grid-column:1;grid-row:1}
  .hero-copy{grid-column:2;grid-row:1}
  /* the decorative lines move with the portrait */
  .hero-mantra{right:auto;left:-7%}
  .hero-script{right:auto;left:-10%}
}
@media(min-width:861px) and (max-width:1120px){
  .hero-mantra{right:auto;left:0}
  .hero-script{right:auto;left:1%}
}
@media(max-width:860px){
  /* single column: the portrait leads */
  .hero-visual{order:-1;margin-top:8px;margin-bottom:26px}
  .hero-copy{order:1;margin-top:0}
}

/* The orbit circles were positioned for the old right-hand portrait, so after
   the flip they sat on top of "MEDIA / PEOPLE / STORIES" and "Building Bigger
   Impact". Mirror them to the free side. */
@media(min-width:861px){
  .orbit.one{right:auto;left:8%;top:1%}
  .orbit.two{left:auto;right:-2%;top:16%}
  .orbit.three{left:auto;right:6%;bottom:10%}
}