/* Exo 2, self-hosted (SIL Open Font License), latin and latin-ext */
@font-face{font-family:'Exo 2';font-style:italic;font-weight:300 500;font-display:swap;src:url(/fonts/exo2-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Exo 2';font-style:italic;font-weight:300 500;font-display:swap;src:url(/fonts/exo2-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/exo2-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/exo2-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Layout: an open page, not a deck of boxes. Full-bleed bands (the living field, a pale band, the team photo, the night field)
   alternate with plain white, and the work is the main event: ten real projects with their own images.
   The mockup keeps one fixed light look in every theme, so the dark-mode blocks restate the same values. */
:root{
  --white:#ffffff; --navy:#0d2a5e; --ink:#1e2a4e; --muted:#56638a;
  --indigo:#363f6a; --pale:#dbe2ea; --blue:#7498f0; --deep:#305389; --lilac:#d0cdea;
  --f:"Exo 2", "Trebuchet MS", Arial, sans-serif;
  --g:clamp(20px, 5.4vw, 92px);
  --gl:max(var(--g), env(safe-area-inset-left, 0px));
  --gr:max(var(--g), env(safe-area-inset-right, 0px));
  --gap:clamp(14px, 1.6vw, 24px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --white:#ffffff; --navy:#0d2a5e; --ink:#1e2a4e; --muted:#56638a; color-scheme:light }
}
:root[data-theme="dark"]{ --white:#ffffff; --navy:#0d2a5e; --ink:#1e2a4e; --muted:#56638a; color-scheme:light }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--white); color:var(--ink); font-family:var(--f); font-weight:300; font-size:18px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{list-style:none; padding:0}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue); outline-offset:4px; border-radius:8px}
.wrap{padding-left:var(--gl); padding-right:var(--gr)}
.grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap)}
.label{font-size:14px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.h2{font-weight:600; font-size:clamp(34px, 4.6vw, 72px); line-height:1.02; letter-spacing:-.025em; color:var(--navy); text-wrap:balance}
.h2 em{font-weight:300; font-style:italic}
.sec{padding-top:clamp(96px, 11vw, 176px)}
.head{align-items:end; row-gap:24px}
.head > div{grid-column:1 / span 7}
.head > p{grid-column:9 / span 4; font-size:18px}
.head .h2{margin-top:18px}

.btn{display:inline-flex; align-items:center; gap:12px; height:54px; padding:0 26px; border-radius:14px; font-size:16px; font-weight:500;
  transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease}
.btn:active{transform:scale(.97)}
.btn svg{width:16px; height:16px; transition:transform .35s ease}
.btn:hover svg{transform:translateX(4px)}
.btn.solid{background:#fff; color:var(--navy)}
.btn.solid:hover{background:var(--lilac)}
.btn.line{border:1px solid rgba(255,255,255,.75); color:#fff}
.btn.line:hover{border-color:#fff; background:rgba(255,255,255,.1)}

/* ---------- header ---------- */
.hdr{position:fixed; inset:0 0 auto 0; z-index:60; height:80px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 var(--gr) 0 var(--gl); color:#fff;
  transition:background-color .45s ease, color .45s ease, box-shadow .45s ease}
.hdr.solid{background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); color:var(--navy); box-shadow:0 1px 0 rgba(13,42,94,.08)}
.hdr.dark{background:rgba(16,28,70,.55); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); color:#fff; box-shadow:none}
/* the wordmark from the user's SVG, in two layers: letters in the text colour, swash in brand teal.
   Over the hero, where teal on blue would fade, the whole mark turns white (the usual reversed logo). */
.logo{position:relative; display:block; flex:none; width:152px; aspect-ratio:185.32 / 32.97}
.logo i{position:absolute; inset:0; -webkit-mask:var(--m) center / contain no-repeat; mask:var(--m) center / contain no-repeat; transition:background-color .45s ease}
.logo .wm{--m:url(/assets/brand/andalus-letters.svg?v=e52fb6f98a); background:currentColor}
.logo .sw{--m:url(/assets/brand/andalus-swash.svg?v=d61ff74a9d); background:var(--sw, #2ca995)}
.hdr:not(.solid):not(.dark) .logo{--sw:currentColor}
.nav{display:flex; align-items:center; gap:clamp(20px, 2.6vw, 40px); font-size:16px; font-weight:400}
.nav a:not(.btn){position:relative; padding:6px 0}
.nav a:not(.btn)::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav .btn{height:44px; padding:0 20px; font-size:15px; background:currentColor}
.nav .btn span{color:var(--navy)}
.hdr.solid .nav .btn span{color:#fff}
.menu-btn{display:none; width:46px; height:46px; border:0; border-radius:12px; background:rgba(255,255,255,.14); color:inherit; cursor:pointer}
.hdr.solid .menu-btn{background:rgba(13,42,94,.07)}
.menu-btn i{display:block; width:20px; height:1.5px; margin:5px auto; background:currentColor; transition:transform .3s ease}
.menu-open .menu-btn i:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-open .menu-btn i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ---------- the living field ---------- */
.field{position:absolute; inset:0; width:100%; height:100%; display:block}
.veil{position:absolute; inset:0; pointer-events:none}

/* ---------- hero ---------- */
.hero{position:relative; isolation:isolate; overflow:hidden; height:max(640px, 100svh); background:#4a6cbc; color:#fff}
.hero .veil{background:linear-gradient(100deg, rgba(18,34,88,.42), rgba(18,34,88,.12) 55%, rgba(18,34,88,0) 75%)}
.hero-in{position:absolute; left:var(--gl); right:var(--gr); bottom:clamp(44px, 10vh, 112px)}
.hero h1{font-weight:500; font-size:clamp(44px, 8.1vw, 146px); line-height:.94; letter-spacing:-.035em}
.hero h1 em{font-weight:300; font-style:italic; letter-spacing:-.02em}
.hero-row{display:flex; flex-wrap:wrap; align-items:flex-end; gap:28px clamp(32px, 5vw, 80px); margin-top:30px}
.hero-row p{max-width:36ch; font-size:clamp(17px, 1.45vw, 21px); color:rgba(255,255,255,.92)}
.hero .acts{display:flex; flex-wrap:wrap; gap:14px}

/* ---------- services: open columns ---------- */
.svc-cols{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(36px, 5vw, 88px); margin-top:clamp(56px, 6vw, 96px)}
.svc svg{width:64px; height:64px; fill:none; stroke:var(--navy); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.svc:hover svg{transform:translateY(-6px)}
.svc .n{display:block; margin-top:32px; font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums}
.svc h3{margin-top:8px; font-size:clamp(24px, 2vw, 30px); font-weight:600; line-height:1.15; letter-spacing:-.01em; color:var(--navy)}
.svc p{margin-top:14px; font-size:17px}
.svc .inc{margin-top:16px; font-size:15px; line-height:1.6; color:var(--muted)}

/* ---------- work ---------- */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(36px, 4vw, 56px)}
.chip{height:44px; padding:0 18px; border-radius:12px; border:1px solid rgba(13,42,94,.18); background:#fff; color:var(--navy); font:inherit; font-size:15px; font-weight:400; cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease}
.chip:hover{border-color:var(--navy)}
.chip[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}
.chip small{margin-left:6px; font-size:13px; opacity:.6}
.projects{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(56px, 6vw, 96px) var(--gap); margin-top:clamp(32px, 3.4vw, 48px)}
.pj{grid-column:span var(--c, 6); min-width:0}
.pj[hidden]{display:none}
.projects.filtered .pj{grid-column:span 6}
.projects.filtered .media{height:clamp(320px, 32vw, 520px)}
.media{position:relative; overflow:hidden; isolation:isolate; border-radius:14px; background:#e9edf3}
.h-tall{height:clamp(400px, 44vw, 720px)}
.h-mid{height:clamp(320px, 32vw, 520px)}
.media .cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.pj:hover .media .cover{transform:scale(1.03)}
.media.shade::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,18,48,.66), rgba(10,18,48,0) 55%)}
.num{position:absolute; left:clamp(18px, 2vw, 30px); bottom:clamp(14px, 2vw, 26px); z-index:1; color:#fff; font-size:clamp(46px, 5.4vw, 92px); font-weight:500; line-height:.95; letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.num small{display:block; margin-top:8px; font-size:clamp(14px, 1.2vw, 17px); font-weight:400; letter-spacing:0}
/* website screenshots scroll through the whole page on hover */
.scr{background:#eef1f6}
.scr img{position:absolute; left:0; top:0; width:100%; transform:translateY(0); transition:transform var(--back, .9s) cubic-bezier(.45,.05,.55,.95); will-change:transform}
.pj:hover .scr img, .scr.play img{transform:translateY(var(--end, 0px)); transition-duration:var(--dur, 6s)}
.scr .hint{position:absolute; right:16px; bottom:16px; z-index:1; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(13,42,94,.82); color:#fff; transition:opacity .4s ease}
.scr .hint svg{width:18px; height:18px}
.pj:hover .scr .hint, .scr.play .hint{opacity:0}
/* before and after */
.ba{cursor:ew-resize; --p:50%}
.ba .before{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-line{position:absolute; top:0; bottom:0; left:var(--p); z-index:2; width:2px; margin-left:-1px; background:#fff; pointer-events:none}
.ba-line i{position:absolute; top:50%; left:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:#fff; box-shadow:0 8px 30px rgba(10,18,48,.3); display:grid; place-items:center; color:var(--navy)}
.ba-line svg{width:24px; height:24px}
.ba input{position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize}
.ba .tag{position:absolute; top:18px; z-index:1; padding:7px 12px; border-radius:10px; background:rgba(255,255,255,.88); color:var(--navy); font-size:13px; font-weight:500; pointer-events:none}
.ba .tag.l{left:18px}
.ba .tag.r{right:18px}
.meta{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-top:22px}
.meta .k{font-size:14px; color:var(--muted)}
.meta h3{margin-top:6px; font-size:clamp(22px, 1.9vw, 30px); font-weight:500; line-height:1.15; letter-spacing:-.015em; color:var(--navy)}
.meta .res{flex:none; max-width:18ch; text-align:right; font-size:14px; line-height:1.4; color:var(--muted)}
.meta .res b{display:block; font-size:24px; font-weight:600; letter-spacing:-.02em; color:var(--navy)}
.desc{margin-top:12px; max-width:56ch; font-size:16.5px}
.voice{grid-column:1 / -1; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); row-gap:28px; align-items:start; padding-top:clamp(8px, 2vw, 24px)}
.voice .aj{grid-column:1 / span 3; width:170px; height:62px; background:var(--navy); -webkit-mask:url(/assets/deck/logos/aljazeera.png?v=a6c0219268) left center / contain no-repeat; mask:url(/assets/deck/logos/aljazeera.png?v=a6c0219268) left center / contain no-repeat}
.voice > div{grid-column:4 / span 8}
.voice .k{font-size:14px; color:var(--muted)}
.voice blockquote{margin-top:14px; font-size:clamp(24px, 2.6vw, 42px); font-weight:300; line-height:1.25; letter-spacing:-.015em; color:var(--navy)}
.who{display:flex; align-items:center; gap:14px; margin-top:24px; font-size:14px; line-height:1.35; color:var(--muted)}
.who img{width:52px; height:52px; border-radius:50%; object-fit:cover}
.who b{display:block; font-size:15px; font-weight:600; color:var(--navy)}

/* ---------- partners ---------- */
.logos{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:clamp(20px, 3vw, 48px) clamp(16px, 2.4vw, 40px); margin-top:clamp(48px, 5vw, 80px); align-items:center}
.logos li{display:grid; place-items:center; min-height:clamp(64px, 6vw, 92px)}
.logos img{max-height:clamp(34px, 3.3vw, 54px); max-width:min(86%, 150px); width:auto; height:auto; object-fit:contain; opacity:var(--o, .5); transition:opacity .25s ease}
.praise{margin-top:clamp(72px, 8vw, 128px); row-gap:28px; align-items:end}
.praise blockquote{grid-column:1 / span 9; font-size:clamp(26px, 3vw, 48px); font-weight:300; line-height:1.22; letter-spacing:-.015em; color:var(--navy)}
.praise blockquote em{font-style:italic; font-weight:500}
.praise .who{grid-column:10 / span 3; margin:0}
.praise .who img{width:64px; height:64px}

/* ---------- process: a full-width pale band ---------- */
.band{margin-top:clamp(96px, 11vw, 176px); padding-top:clamp(80px, 8vw, 128px); padding-bottom:clamp(80px, 8vw, 128px); background:var(--pale)}
.steps{position:relative; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:var(--gap); margin-top:clamp(56px, 6vw, 96px); --prog:0}
.steps::before, .steps::after{content:""; position:absolute; left:8px; right:8px; top:8px; height:2px; border-radius:2px; background:rgba(13,42,94,.14)}
.steps::after{background:var(--navy); right:auto; width:calc((100% - 16px) * var(--prog))}
.steps li{position:relative; padding-top:44px}
.steps li::before{content:""; position:absolute; left:0; top:0; z-index:1; width:18px; height:18px; border-radius:50%; background:var(--pale); border:2px solid var(--navy); transition:background-color .4s ease}
.steps li.on::before{background:var(--navy)}
.steps .n{font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums}
.steps h3{margin-top:6px; font-size:clamp(22px, 1.8vw, 27px); font-weight:600; letter-spacing:-.01em; color:var(--navy)}
.steps p{margin-top:10px; font-size:16px}

/* ---------- story: the team photo, full bleed ---------- */
.story{position:relative; isolation:isolate; min-height:max(680px, 92svh); display:flex; align-items:flex-end; color:#fff; overflow:hidden}
.story .bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 40%}
.story::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(16,26,66,.88) 0%, rgba(16,26,66,.62) 38%, rgba(16,26,66,.05) 70%), linear-gradient(to top, rgba(16,26,66,.6), rgba(16,26,66,0) 45%)}
.story-in{width:100%; padding-top:clamp(120px, 14vw, 200px); padding-bottom:clamp(56px, 7vw, 104px)}
.story .txt{grid-column:1 / span 6}
.story .label{color:rgba(255,255,255,.75)}
.story .h2{margin-top:18px; color:#fff; font-size:clamp(34px, 3.8vw, 60px)}
.story p.p{margin-top:22px; font-size:17px; color:rgba(255,255,255,.9)}
.ceo{margin-top:32px; padding-left:20px; border-left:2px solid rgba(255,255,255,.5)}
.ceo blockquote{font-size:18px; font-style:italic; line-height:1.5}
.ceo p{margin-top:10px; font-size:14px; color:rgba(255,255,255,.78)}
.ceo b{font-weight:600; color:#fff}
.story .stats{grid-column:9 / span 4; align-self:end; display:grid; grid-template-columns:1fr 1fr; gap:28px 24px}
.story .stats b{display:block; font-size:clamp(36px, 3.6vw, 56px); font-weight:500; line-height:1; letter-spacing:-.03em}
.story .stats span{display:block; margin-top:8px; font-size:14px; color:rgba(255,255,255,.8)}

/* ---------- night: contact and footer, full bleed ---------- */
.night{position:relative; isolation:isolate; overflow:hidden; color:#fff; background:#1d2f66}
.night .veil{background:linear-gradient(90deg, rgba(10,20,60,.42), rgba(10,20,60,0) 70%), linear-gradient(to top, rgba(8,16,48,.65), rgba(8,16,48,0) 45%)}
.night-in{position:relative; padding-top:clamp(120px, 14vw, 220px); padding-bottom:32px}
.night .label{color:rgba(255,255,255,.72)}
.night h2{margin-top:18px; font-weight:500; font-size:clamp(44px, 6.9vw, 124px); line-height:.95; letter-spacing:-.035em; max-width:13em; text-wrap:balance}
.night h2 em{font-weight:300; font-style:italic}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; margin-top:40px}
.cta-row p{max-width:44ch; font-size:18px; color:rgba(255,255,255,.88)}
.cta-row .acts{display:flex; flex-wrap:wrap; align-items:center; gap:22px}
.mail{font-size:17px; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:3px}
.foot{margin-top:clamp(96px, 11vw, 176px); padding-top:40px; border-top:1px solid rgba(255,255,255,.2); row-gap:40px; font-size:15px}
.foot .logo{width:184px}
.foot-a{grid-column:1 / span 5}
.foot-a p{margin-top:16px; max-width:34ch; color:rgba(255,255,255,.75)}
.foot-b{grid-column:7 / span 2}
.foot-c{grid-column:9 / span 4}
.foot h4{margin:0 0 14px; font-size:13px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6)}
.foot li{padding:3px 0}
.foot li a:hover{text-decoration:underline; text-underline-offset:4px}
.legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 40px; margin-top:56px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.6)}
.legal p:last-child{max-width:72ch}

/* ---------- reveal ---------- */
.js [data-r]{opacity:0; transform:translateY(24px); transition:opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js [data-r].in{opacity:1; transform:none}
.js .hero h1, .js .hero-row{animation:up 1.4s cubic-bezier(.2,.7,.2,1) both}
.js .hero-row{animation-delay:.2s}
@keyframes up{ from{opacity:0; transform:translateY(26px)} }
@media (prefers-reduced-motion: reduce){
  .js [data-r]{opacity:1; transform:none; transition:none}
  .js .hero h1, .js .hero-row{animation:none}
  .scr img{transition:none !important}
}

/* ---------- smaller screens ---------- */
@media (max-width: 1100px){
  .steps{gap:16px}
  .logos{grid-template-columns:repeat(4, minmax(0,1fr))}
}
@media (max-width: 900px){
  .nav{display:none}
  .menu-btn{display:block}
  .menu-open .nav{display:flex; position:fixed; top:80px; left:var(--gl); right:var(--gr); flex-direction:column; align-items:stretch; gap:0; padding:12px 24px 24px;
    border-radius:20px; background:#fff; color:var(--navy); font-size:22px; box-shadow:0 24px 60px -20px rgba(13,42,94,.35)}
  .menu-open .nav a:not(.btn){padding:12px 0}
  .menu-open .nav .btn{margin-top:12px; justify-content:center; background:var(--navy)}
  .menu-open .nav .btn span{color:#fff}
  .head > div, .head > p, .praise blockquote, .praise .who, .story .txt, .story .stats, .foot-a, .voice .aj, .voice > div{grid-column:1 / -1}
  .svc-cols{grid-template-columns:1fr; gap:56px}
  .pj, .projects.filtered .pj{grid-column:1 / -1}
  .h-tall, .h-mid, .projects.filtered .media{height:auto; aspect-ratio:4 / 3.4}
  .steps{grid-template-columns:1fr; gap:0; padding-left:40px}
  .steps::before, .steps::after{left:8px; right:auto; top:8px; bottom:8px; width:2px; height:auto}
  .steps::after{height:calc((100% - 16px) * var(--prog)); bottom:auto}
  .steps li{padding:0 0 36px}
  .steps li::before{left:-40px}
  .story{display:block; min-height:0}
  .story .bg{position:relative; z-index:0; height:clamp(300px, 70vw, 520px)}
  .story::before{display:none}
  .story-in{background:#1f2c62; padding-top:48px}
  .story .stats{margin-top:12px}
  .foot-b, .foot-c{grid-column:span 6}
}
@media (max-width: 560px){
  body{font-size:17px}
  .hdr{height:72px}
  .menu-open .nav{top:72px}
  .logo{width:128px}
  .hero h1{font-size:11vw}
  .hero .acts{width:100%}
  .hero .acts .btn{flex:1 1 auto; justify-content:center}
  .meta{flex-direction:column; gap:10px}
  .meta .res{text-align:left; max-width:none}
  .logos{grid-template-columns:repeat(3, minmax(0,1fr))}
  .foot-b, .foot-c{grid-column:1 / -1}
}

/* ======================= inner pages ======================= */
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hero.page{height:clamp(540px, 72svh, 780px)}
.hero.page h1{font-size:clamp(42px, 6.4vw, 112px); line-height:.98; max-width:15em; text-wrap:balance}
.hero.photo{background:#1f2c62}
.hero.photo .bg{position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; object-position:50% 40%}
.hero.photo .veil{background:linear-gradient(90deg, rgba(16,26,66,.85), rgba(16,26,66,.45) 50%, rgba(16,26,66,.1)), linear-gradient(to top, rgba(16,26,66,.6), rgba(16,26,66,0) 50%)}
.crumb{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; font-size:14px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.82)}
.crumb a:hover{color:#fff}
.crumb span[aria-hidden]{opacity:.6}
.hero .sub{margin-top:26px; max-width:46ch; font-size:clamp(17px, 1.5vw, 21px); color:rgba(255,255,255,.92)}
.more{display:inline-flex; align-items:center; gap:10px; margin-top:28px; font-size:16px; font-weight:500; color:var(--navy)}
.more svg{width:16px; height:16px; transition:transform .35s ease}
.more:hover svg{transform:translateX(4px)}
.pj a.hit{display:block; color:inherit}
.pj a.hit:hover h3{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px}
.all{display:flex; justify-content:flex-end; margin-top:clamp(40px, 4vw, 64px)}

/* full-bleed cover image */
.cover-band{position:relative; height:clamp(320px, 54vw, 860px); overflow:hidden; background:#e9edf3}
.cover-band img{width:100%; height:100%; object-fit:cover}

/* facts */
.facts{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); margin:0; padding-top:clamp(56px, 6vw, 96px)}
.facts div{padding-top:16px; border-top:2px solid var(--navy)}
.facts dt{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.facts dd{margin:10px 0 0; font-size:17px; font-weight:400; line-height:1.4; color:var(--navy)}
.facts dd b{display:block; font-size:clamp(30px, 2.8vw, 44px); font-weight:600; line-height:1.05; letter-spacing:-.02em}

/* label on the left, text on the right */
.split{padding-top:clamp(80px, 9vw, 150px); row-gap:24px}
.split > .l{grid-column:1 / span 3}
.split > .r{grid-column:5 / span 8}
.lead{font-size:clamp(22px, 2.1vw, 33px); line-height:1.35; font-weight:300; letter-spacing:-.01em; color:var(--navy)}
.prose{margin-top:28px}
.prose p{max-width:62ch; font-size:clamp(17px, 1.3vw, 19px); line-height:1.65}
.prose p + p{margin-top:16px}
.did{display:grid; grid-template-columns:1fr 1fr; gap:40px 56px}
.did h3{font-size:clamp(21px, 1.7vw, 25px); font-weight:600; color:var(--navy)}
.did p{margin-top:8px; font-size:16.5px}
.sig{margin-top:32px; font-size:15px; color:var(--muted)}
.sig b{display:block; font-size:19px; font-weight:600; color:var(--navy)}

/* galleries */
.gal{padding-top:clamp(64px, 7vw, 112px); row-gap:var(--gap); align-items:start}
.gal figure{grid-column:span var(--c, 6); min-width:0}
.gal figure.start3{grid-column:3 / span 8}
.gal img{width:100%; border-radius:14px}
.gal figcaption{margin-top:12px; font-size:14px; color:var(--muted)}
.gal .media{border-radius:14px}
.screen{height:clamp(480px, 62vw, 900px)}
.screen.short{height:clamp(420px, 44vw, 680px)}
.pale-band{background:var(--pale); margin-top:clamp(64px, 7vw, 112px); padding:clamp(40px, 6vw, 96px) var(--gr) clamp(40px, 6vw, 96px) var(--gl)}
.pale-band img{display:block; width:100%; max-width:1200px; margin:0 auto}

/* results */
.results{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap)}
.results div{padding-top:16px; border-top:2px solid var(--navy)}
.results b{display:block; font-size:clamp(48px, 6vw, 104px); font-weight:500; line-height:1; letter-spacing:-.045em; color:var(--navy); font-variant-numeric:tabular-nums}
.results span{display:block; margin-top:12px; font-size:16px; color:var(--muted)}

/* a large quote */
.bigq{padding-top:clamp(80px, 9vw, 150px); row-gap:28px; align-items:end}
.bigq blockquote{grid-column:1 / span 9; font-size:clamp(25px, 2.8vw, 44px); font-weight:300; line-height:1.25; letter-spacing:-.015em; color:var(--navy)}
.bigq .who{grid-column:10 / span 3; margin:0}

/* next project */
.next{position:relative; isolation:isolate; display:block; overflow:hidden; height:clamp(380px, 44vw, 640px); margin-top:clamp(96px, 11vw, 176px); color:#fff}
.next img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.next:hover img{transform:scale(1.03)}
.next::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(10,18,48,.82), rgba(10,18,48,.2) 65%)}
.next .in{position:absolute; left:var(--gl); right:var(--gr); bottom:clamp(32px, 5vw, 72px)}
.next .label{color:rgba(255,255,255,.78)}
.next h2{margin-top:12px; font-size:clamp(34px, 4.8vw, 76px); font-weight:500; line-height:1; letter-spacing:-.03em}
.next .more{color:#fff}

/* services page */
.svc-sec{padding-top:clamp(96px, 11vw, 176px); row-gap:56px; align-items:start}
.svc-sec.band{margin-top:clamp(96px, 11vw, 176px)}
.svc-sec .l{grid-column:1 / span 6}
.svc-sec .r{grid-column:8 / span 5}
.svc-sec .n{font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.svc-sec .h2{margin-top:16px}
.svc-sec .lead{margin-top:24px}
.incl{display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; margin-top:36px; padding-top:28px; border-top:1px solid rgba(13,42,94,.14)}
.incl li{display:flex; gap:10px; align-items:baseline; font-size:16.5px}
.incl li::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--navy); transform:translateY(-2px)}
.r .label{margin-bottom:18px}
.rel{display:grid; grid-template-columns:132px 1fr; gap:18px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(13,42,94,.12)}
.rel:first-of-type{border-top:1px solid rgba(13,42,94,.12)}
.rel img{width:132px; height:92px; object-fit:cover; border-radius:10px; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rel:hover img{transform:scale(1.04)}
.rel b{display:block; font-size:18px; font-weight:500; color:var(--navy)}
.rel span{font-size:14px; color:var(--muted)}
.seasons{margin-bottom:48px}
.seasons ul{border-top:2px solid var(--navy)}
.seasons li{display:grid; grid-template-columns:1fr auto; column-gap:16px; padding:16px 0; border-bottom:1px solid rgba(13,42,94,.12)}
.seasons .s-name{font-size:19px; font-weight:500; color:var(--navy)}
.seasons .s-date{grid-column:1; font-size:15px; color:var(--muted)}
.seasons .s-left{grid-column:2; grid-row:1 / span 2; align-self:center; font-size:30px; font-weight:600; letter-spacing:-.02em; color:var(--navy); font-variant-numeric:tabular-nums}
.seasons .s-left small{margin-left:5px; font-size:14px; font-weight:300; letter-spacing:0; color:var(--muted)}
.seasons .note{margin-top:12px; font-size:14px; color:var(--muted)}

/* FAQ */
.faq{margin-top:clamp(40px, 4vw, 64px); border-top:2px solid var(--navy)}
.faq details{border-bottom:1px solid rgba(13,42,94,.14)}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; list-style:none; cursor:pointer; font-size:clamp(19px, 1.6vw, 24px); font-weight:500; color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none; position:relative; width:22px; height:22px}
.faq summary i::before, .faq summary i::after{content:""; position:absolute; left:3px; right:3px; top:50%; height:1.6px; margin-top:-.8px; background:var(--navy); transition:transform .3s ease}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0deg)}
.faq details p{max-width:68ch; padding:0 0 26px; font-size:17px}

/* about page */
.values{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(28px, 3vw, 56px); margin-top:clamp(48px, 5vw, 80px)}
.value svg{width:56px; height:56px; fill:none; stroke:var(--navy); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.value h3{margin-top:28px; font-size:21px; font-weight:600; color:var(--navy)}
.value p{margin-top:10px; font-size:16.5px}
.why{display:grid; grid-template-columns:1fr 1fr; gap:44px 72px; margin-top:clamp(48px, 5vw, 80px)}
.why h3{font-size:clamp(21px, 1.7vw, 25px); font-weight:600; color:var(--navy)}
.why p{margin-top:10px; font-size:17px}
.voices{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(32px, 3.4vw, 64px); margin-top:clamp(48px, 5vw, 80px); align-items:start}
.voices blockquote{font-size:clamp(18px, 1.45vw, 21px); font-weight:300; line-height:1.5; color:var(--navy)}
.voices blockquote em{font-weight:500}

/* contact page */
.contact-sec{padding-top:clamp(80px, 9vw, 140px); row-gap:64px; align-items:start}
.contact-sec form, .contact-sec .sent{grid-column:1 / span 7}
.contact-sec aside{grid-column:9 / span 4}
.fld{display:grid; gap:8px; margin-top:24px}
.fld > label, .fld > legend{padding:0; font-size:15px; font-weight:500; color:var(--navy)}
.fld .opt{font-weight:300; color:var(--muted)}
fieldset.fld{border:0; margin:24px 0 0; padding:0; min-width:0}
.fld input, .fld select, .fld textarea{width:100%; padding:15px 16px; border-radius:12px; border:1px solid rgba(13,42,94,.16); background:#f5f7fb; color:var(--navy); font:inherit; font-size:16px; font-weight:400;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease}
.fld textarea{min-height:150px; resize:vertical}
.fld input:focus, .fld select:focus, .fld textarea:focus{outline:none; border-color:var(--navy); background:#fff; box-shadow:0 0 0 4px rgba(116,152,240,.3)}
.fld.bad input{border-color:#b42318}
.err{display:none; font-size:14px; color:#b42318}
.fld.bad .err{display:block}
.row2{display:grid; grid-template-columns:1fr 1fr; column-gap:var(--gap)}
.opts{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
.opts label{position:relative}
.opts input{position:absolute; opacity:0; pointer-events:none}
.opts span{display:inline-flex; align-items:center; height:44px; padding:0 16px; border-radius:12px; border:1px solid rgba(13,42,94,.18); font-size:15px; font-weight:400; color:var(--navy); cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease}
.opts span:hover{border-color:var(--navy)}
.opts input:checked + span{background:var(--navy); border-color:var(--navy); color:#fff}
.opts input:focus-visible + span{outline:2px solid var(--blue); outline-offset:2px}
.btn.navy{background:var(--navy); color:#fff; border:0; cursor:pointer; font-family:var(--f)}
.btn.navy:hover{background:var(--deep)}
form .btn.navy{margin-top:32px}
.small{margin-top:14px; font-size:14px; color:var(--muted)}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.form-err{margin-top:24px; font-size:17px; font-weight:500; color:#b42318}
.form-err:empty{display:none}
#brief[aria-busy="true"] button[type=submit]{opacity:.55; cursor:progress}
.sent{display:none}
.done form{display:none}
.done .sent{display:block}
.sent b{display:block; font-size:clamp(30px, 3vw, 44px); font-weight:600; letter-spacing:-.02em; color:var(--navy)}
.sent p{margin-top:14px; max-width:46ch; font-size:18px}
.direct{border-top:2px solid var(--navy)}
.direct div{padding:18px 0; border-bottom:1px solid rgba(13,42,94,.12)}
.direct dt{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.direct dd{margin:6px 0 0; font-size:17px; font-weight:400; color:var(--navy)}
.direct a:hover{text-decoration:underline; text-underline-offset:4px}
.night.end .night-in{padding-top:clamp(64px, 7vw, 104px)}
.night.end .foot{margin-top:0; padding-top:0; border-top:0}

@media (max-width: 900px){
  .split > .l, .split > .r, .svc-sec .l, .svc-sec .r, .bigq blockquote, .bigq .who, .contact-sec form, .contact-sec .sent, .contact-sec aside{grid-column:1 / -1}
  .gal figure, .gal figure.start3{grid-column:1 / -1}
  .facts{grid-template-columns:1fr 1fr; row-gap:32px}
  .did, .why{grid-template-columns:1fr}
  .results{grid-template-columns:1fr; row-gap:32px}
  .values{grid-template-columns:1fr 1fr}
  .voices{grid-template-columns:1fr}
  .screen, .screen.short{height:clamp(420px, 120vw, 640px)}
  .all{justify-content:flex-start}
}
@media (max-width: 560px){
  .hero.page h1{font-size:11vw}
  .incl{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .rel{grid-template-columns:96px 1fr}
  .rel img{width:96px; height:72px}
}

/* ======================= phase 1 pages ======================= */
.hero-acts{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.meta-line{margin-top:22px; font-size:15px; color:rgba(255,255,255,.82)}
.cover-band.contain{background:var(--pale); padding:clamp(28px, 5vw, 80px) var(--gr) clamp(28px, 5vw, 80px) var(--gl); height:auto}
.cover-band.contain img{width:100%; max-width:1100px; height:auto; max-height:min(70vh, 760px); margin:0 auto; object-fit:contain}

/* proof numbers under a service hero */
.proof{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); margin:0; padding-top:clamp(56px, 6vw, 96px)}
.proof div{padding-top:16px; border-top:2px solid var(--navy)}
.proof dt{font-size:clamp(30px, 3vw, 48px); font-weight:600; line-height:1.05; letter-spacing:-.025em; color:var(--navy)}
.proof dd{margin:10px 0 0; font-size:16px; color:var(--muted)}

/* link rows to services and guides */
.srow{display:grid; grid-template-columns:1fr auto; column-gap:24px; row-gap:4px; align-items:center; padding:20px 0; border-bottom:1px solid rgba(13,42,94,.12); color:var(--navy)}
.srow:first-child{border-top:1px solid rgba(13,42,94,.12)}
.srow b{grid-column:1; font-size:clamp(19px, 1.6vw, 23px); font-weight:500}
.srow span{grid-column:1; font-size:15.5px; color:var(--muted)}
.srow svg{grid-column:2; grid-row:1 / span 2; width:18px; height:18px; transition:transform .35s ease}
.srow:hover b{text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px}
.srow:hover svg{transform:translateX(5px)}
.sublinks{margin-top:16px; display:grid; gap:6px}
.sublinks a{font-size:16px; font-weight:400; color:var(--navy); text-decoration:underline; text-decoration-color:rgba(13,42,94,.3); text-underline-offset:4px}
.sublinks a:hover{text-decoration-color:var(--navy)}
.svc h3 a:hover{text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px}

/* long-form guides and legal pages */
.article{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); padding-top:clamp(64px, 7vw, 112px); align-items:start}
.toc-side{grid-column:1 / span 3; position:sticky; top:104px}
.toc-side ol{margin-top:14px; display:grid; gap:2px; counter-reset:t}
.toc-side li{counter-increment:t}
.toc-side a{display:flex; gap:10px; padding:6px 0; font-size:15px; line-height:1.4; color:var(--muted)}
.toc-side a::before{content:counter(t, decimal-leading-zero); flex:none; font-variant-numeric:tabular-nums; color:rgba(86,99,138,.6)}
.toc-side a:hover{color:var(--navy)}
.long{grid-column:5 / span 8; max-width:72ch}
.long h2{margin-top:56px; font-size:clamp(25px, 2.2vw, 34px); font-weight:600; line-height:1.15; letter-spacing:-.015em; color:var(--navy); scroll-margin-top:100px}
.long h2:first-child{margin-top:0}
.long p, .long li{font-size:clamp(17px, 1.3vw, 19px); line-height:1.7}
.long p{margin-top:16px}
.long ul, .long ol{margin-top:16px; padding-left:22px; display:grid; gap:8px}
.long ul{list-style:disc}
.long ol{list-style:decimal}
.long li::marker{color:var(--blue)}
.long b{font-weight:600; color:var(--navy)}
.long a{color:var(--deep); text-decoration:underline; text-underline-offset:4px}
.checklist{margin-top:56px; padding-top:8px}
.checklist ul{list-style:none; padding:0}
.checklist li{position:relative; padding:12px 0 12px 36px; border-bottom:1px solid rgba(13,42,94,.12)}
.checklist li::before{content:""; position:absolute; left:2px; top:16px; width:20px; height:20px; border-radius:6px; border:1.6px solid var(--navy)}
.cta-inline{margin-top:64px; padding-top:28px; border-top:2px solid var(--navy)}
.cta-inline .lead{margin-top:10px}
.doc{padding-top:clamp(56px, 6vw, 96px)}
.doc .long{max-width:72ch}
.draft{display:inline-block; margin-bottom:32px; padding:6px 12px; border-radius:8px; background:var(--pale); font-size:14px; color:var(--navy)}

/* giving calendar */
.cal{overflow-x:auto; border-top:2px solid var(--navy)}
.cal table{width:100%; min-width:760px; border-collapse:collapse}
.cal th{padding:14px 12px 14px 0; text-align:left; font-size:13px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid rgba(13,42,94,.14)}
.cal td{padding:18px 12px 18px 0; vertical-align:top; border-bottom:1px solid rgba(13,42,94,.12); font-size:16px}
.cal td b{display:block; font-size:19px; font-weight:500; color:var(--navy)}
.cal td a:hover b{text-decoration:underline; text-underline-offset:4px}
.cal td span{display:block; margin-top:4px; color:var(--muted); font-size:15px}
.cal td.d{white-space:nowrap; color:var(--navy); font-variant-numeric:tabular-nums}
.cal td.cd{white-space:nowrap; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums}
.cal tr.past td{opacity:.45}
.cal tr.soon td{background:linear-gradient(90deg, rgba(116,152,240,.12), rgba(116,152,240,0))}
.cal-note{margin-top:20px; max-width:70ch; font-size:15px; color:var(--muted)}

/* clients by name, sitemap */
.crows{margin-top:clamp(40px, 4vw, 64px); border-top:2px solid var(--navy)}
.crow{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); padding:18px 0; border-bottom:1px solid rgba(13,42,94,.12)}
.crow b{grid-column:1 / span 4; font-size:19px; font-weight:500; color:var(--navy)}
.crow div{grid-column:6 / span 7; display:grid; gap:6px}
.crow a{color:var(--deep); text-decoration:underline; text-decoration-color:rgba(48,83,137,.3); text-underline-offset:4px}
.crow a:hover{text-decoration-color:var(--deep)}
.crow span{color:var(--muted)}
.smaps{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:48px var(--gap)}
.smap h2{font-size:15px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding-bottom:12px; border-bottom:2px solid var(--navy)}
.smap ul{margin-top:12px; display:grid; gap:4px}
.smap a{display:block; padding:6px 0; color:var(--navy); line-height:1.4}
.smap a:hover{text-decoration:underline; text-underline-offset:4px}

/* footer with four columns */
.foot-a{grid-column:1 / span 4}
.foot-b{grid-column:5 / span 3}
.foot-c{grid-column:8 / span 2}
.foot-d{grid-column:10 / span 3}
.legal a{color:rgba(255,255,255,.8)}
.legal a:hover{color:#fff}

@media (max-width: 900px){
  .proof{grid-template-columns:1fr; row-gap:24px}
  .toc-side{position:static; grid-column:1 / -1; margin-bottom:40px}
  .long{grid-column:1 / -1}
  .crow b, .crow div{grid-column:1 / -1}
  .crow div{margin-top:8px}
  .smaps{grid-template-columns:1fr 1fr}
  .foot-a{grid-column:1 / -1}
  .foot-b, .foot-c{grid-column:span 6}
  .foot-d{grid-column:1 / -1}
}
@media (max-width: 560px){
  .smaps{grid-template-columns:1fr}
  .foot-b, .foot-c{grid-column:1 / -1}
}

/* inner heroes size to their content, so long titles never slide under the header */
.hero.page{height:auto; min-height:clamp(540px, 72svh, 780px); display:flex; align-items:flex-end}
.hero.page .hero-in{position:relative; left:auto; right:auto; bottom:auto; width:100%; max-width:none; padding:140px var(--gr) clamp(44px, 9vh, 104px) var(--gl)}
.hero.page .hero-in > *{max-width:1120px}
@media (max-width: 560px){ .hero.page{min-height:520px} .hero.page .hero-in{padding-top:120px; padding-bottom:40px} }
.steps.four{grid-template-columns:repeat(4, minmax(0,1fr))}
@media (max-width: 900px){ .steps.four{grid-template-columns:1fr} }

/* ======================= phase 2: tools ======================= */
.tool{padding-top:clamp(56px, 6vw, 96px); row-gap:48px; align-items:start}
.tool .tool-l{grid-column:1 / span 7}
.tool .tool-r{grid-column:9 / span 4; position:sticky; top:104px}
#planner .tool-r{grid-column:1 / span 4}
#planner .tool-l{grid-column:6 / span 7}
.checks{margin-top:16px; border-top:2px solid var(--navy); counter-reset:c}
.checks li{counter-increment:c; border-bottom:1px solid rgba(13,42,94,.12)}
.checks label{display:grid; grid-template-columns:28px 1fr; gap:16px; align-items:start; padding:18px 0; cursor:pointer}
.checks input{width:22px; height:22px; margin:2px 0 0; accent-color:var(--navy); cursor:pointer}
.checks b{display:block; font-size:clamp(17px, 1.35vw, 19px); font-weight:400; line-height:1.5; color:var(--navy)}
.checks b::before{content:counter(c, decimal-leading-zero) "  "; color:var(--muted); font-variant-numeric:tabular-nums}
.checks input:checked + span b{color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(86,99,138,.5)}
.score{display:flex; align-items:baseline; gap:12px; padding-top:16px; border-top:2px solid var(--navy)}
.score b{font-size:clamp(64px, 7vw, 112px); font-weight:500; line-height:1; letter-spacing:-.05em; color:var(--navy); font-variant-numeric:tabular-nums}
.score span{font-size:20px; color:var(--muted)}
.score-line{margin-top:12px; font-size:18px; color:var(--navy)}
.fixes{margin-top:10px; padding-left:20px; list-style:decimal; display:grid; gap:8px}
.fixes li{font-size:16px; line-height:1.5}
.fixes li[hidden]{display:none}
.plan{margin-top:16px; border-top:2px solid var(--navy)}
.plan li{display:grid; grid-template-columns:minmax(0,190px) 1fr; gap:20px; padding:16px 0; border-bottom:1px solid rgba(13,42,94,.12)}
.plan time{font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums}
.plan li.today{background:linear-gradient(90deg, rgba(116,152,240,.14), rgba(116,152,240,0))}
.plan li.past{opacity:.5}
@media (max-width: 900px){
  .tool .tool-l, .tool .tool-r, #planner .tool-l, #planner .tool-r{grid-column:1 / -1; position:static}
  .plan li{grid-template-columns:1fr; gap:4px}
}
/* ======================= phase 3: the Ramadan report, the RFP template and careers ======================= */
.btn.line-navy{border:1px solid rgba(13,42,94,.28); background:#fff; color:var(--navy); cursor:pointer; font-family:var(--f)}
.btn.line-navy:hover{border-color:var(--navy)}
.btn.line-navy svg{width:20px; height:20px}

/* ---- the next-project band: a deeper shade, so the heading always reads over the picture ---- */
.next::after{background:linear-gradient(to top, rgba(10,18,48,.9), rgba(10,18,48,.5) 70%, rgba(10,18,48,.32))}

/* ---- report: headline numbers ---- */
.kpis{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px var(--gap); margin:0; padding-top:clamp(56px, 6vw, 96px)}
.kpis div{padding-top:16px; border-top:2px solid var(--navy)}
.kpis dt{font-size:clamp(44px, 5vw, 84px); font-weight:500; line-height:1; letter-spacing:-.045em; color:var(--navy); font-variant-numeric:tabular-nums}
.kpis dd{margin:12px 0 0; max-width:32ch; font-size:16px; color:var(--muted)}
.kpis dd a{color:var(--navy); text-decoration:underline; text-underline-offset:3px}
.r .kpis{padding-top:0; margin-top:clamp(32px, 3vw, 48px)}
.r .kpis dt{font-size:clamp(36px, 3.6vw, 60px)}
.report-acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:48px}
.fh{margin-bottom:20px; font-size:clamp(30px, 3.4vw, 52px); font-weight:600; line-height:1.05; letter-spacing:-.025em; color:var(--navy); text-wrap:balance}
.src{margin-top:24px; font-size:14px; color:var(--muted)}

/* ---- report: charts. One axis each, thin bars with rounded data ends, values labelled at the end, a tooltip on hover and focus ---- */
.viz{--s1:#3a62d0; --s2:#d0569b; margin-top:clamp(32px, 3vw, 48px)}
.viz-t{margin-bottom:16px; font-size:15px; font-weight:500; color:var(--navy)}
.bars{display:grid; gap:12px}
.bars li{position:relative; display:grid; grid-template-columns:minmax(0, 16em) minmax(0,1fr) 4.6em; gap:16px; align-items:center; padding:4px 0; border-radius:8px; outline:none}
.bl{font-size:15px; line-height:1.3; color:var(--ink)}
.bl small{display:block; margin-top:2px; font-size:13px; color:var(--muted)}
.bt{height:20px; border-radius:4px; background:rgba(13,42,94,.06); overflow:hidden}
.bt i{display:block; width:var(--v); height:100%; border-radius:0 4px 4px 0; background:var(--s1)}
.bt i.s2{background:var(--s2)}
.bv{font-size:16px; font-weight:600; text-align:right; color:var(--navy); font-variant-numeric:tabular-nums}
.bars li:hover .bt i, .bars li:focus-visible .bt i{filter:brightness(1.1)}
.bars li:focus-visible{box-shadow:0 0 0 2px var(--blue)}
.bars li:hover::after, .bars li:focus-visible::after{content:attr(data-tip); position:absolute; left:calc(16em + 16px); bottom:calc(100% + 2px); z-index:3; max-width:min(92vw, 520px);
  padding:8px 12px; border-radius:10px; background:var(--navy); color:#fff; font-size:13.5px; line-height:1.4; box-shadow:0 10px 30px -12px rgba(13,42,94,.5); pointer-events:none}
.viz-key{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:clamp(32px, 3vw, 48px); font-size:14px; color:var(--ink)}
.viz-key i{display:inline-block; width:12px; height:12px; margin-right:8px; border-radius:3px; vertical-align:-1px; background:#3a62d0}
.viz-key i.s2{background:#d0569b}
.viz-pair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 3vw, 56px)}
.viz-pair .viz{margin-top:20px}
.viz-pair .bars li{grid-template-columns:6.5em minmax(0,1fr) 4em}
.viz-pair .bars li:hover::after, .viz-pair .bars li:focus-visible::after{left:0}
.viz-scale{margin-top:8px; font-size:13px; color:var(--muted)}
.viz-table{margin-top:18px; font-size:15px}
.viz-table summary{cursor:pointer; font-weight:500; color:var(--navy)}
.viz-table table, .ctab{width:100%; border-collapse:collapse; font-size:15px}
.viz-table table{margin-top:12px}
.viz-table caption, .ctab caption{padding-bottom:12px; caption-side:top; text-align:left; font-size:15px; font-weight:500; color:var(--navy)}
.viz-table th, .viz-table td, .ctab th, .ctab td{padding:10px 8px 10px 0; border-bottom:1px solid rgba(13,42,94,.12); text-align:left; font-weight:400}
.viz-table th{font-weight:600; color:var(--navy)}
.ctab{margin-top:clamp(32px, 3vw, 48px)}
.ctab tbody{border-top:2px solid var(--navy)}
.ctab th{color:var(--ink)}
.ctab td{text-align:right; font-size:clamp(22px, 2vw, 30px); font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums}

/* ---- report: recommendations and citation ---- */
.recs{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px 56px; margin-top:clamp(48px, 5vw, 80px); counter-reset:r}
.recs li{counter-increment:r; padding-top:16px; border-top:2px solid var(--navy)}
.recs h3{font-size:clamp(21px, 1.7vw, 25px); font-weight:600; color:var(--navy)}
.recs h3::before{content:counter(r, decimal-leading-zero); display:block; margin-bottom:12px; font-size:14px; font-weight:400; letter-spacing:.12em; color:var(--muted)}
.recs p{max-width:52ch; margin-top:8px; font-size:16.5px}
.cite{padding:20px 24px; border-radius:14px; background:#f5f7fb; font-size:17px; color:var(--navy); overflow-wrap:anywhere}

/* ---- RFP template: the form on the left, the brief building itself on the right ---- */
.tool.rfp .tool-l{grid-column:1 / span 6}
.tool.rfp .tool-r{grid-column:8 / span 5; max-height:calc(100vh - 128px); overflow:auto; overscroll-behavior:contain}
.tool.rfp .fld:first-of-type{margin-top:14px}
.opts.col{display:grid; gap:8px}
.opts.col span{height:auto; min-height:44px; padding:10px 16px; line-height:1.35}
.doc-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:2px solid var(--navy)}
.doc-acts{display:flex; gap:8px}
.doc-acts .chip{height:38px; padding:0 14px; font-size:14px}
.rfp-doc{margin-top:16px; padding:clamp(20px, 2vw, 32px); border-radius:16px; background:#f5f7fb; font-size:15px; line-height:1.55; color:var(--ink)}
.rfp-doc h3{font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--navy)}
.rfp-doc h4{margin-top:22px; font-size:12.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.rfp-doc p{margin-top:8px}
.rfp-doc ul{margin-top:8px; padding-left:20px; list-style:disc}
.rfp-doc li + li{margin-top:4px}
.rfp-doc .gap{font-style:italic; color:var(--muted)}

@media (max-width: 900px){
  .kpis{grid-template-columns:1fr 1fr}
  .viz-pair, .recs{grid-template-columns:1fr}
  .tool.rfp .tool-l, .tool.rfp .tool-r{grid-column:1 / -1; position:static; max-height:none; overflow:visible}
}
@media (max-width: 600px){
  .kpis, .r .kpis{grid-template-columns:1fr; row-gap:28px}
  .bars li{grid-template-columns:minmax(0,1fr) 4.6em; row-gap:6px}
  .bars .bl{grid-column:1 / -1}
  .bars li:hover::after, .bars li:focus-visible::after{left:0}
  .ctab td{font-size:22px}
}

/* ---- print: the report prints as a clean document; the RFP button prints only the brief ---- */
@media print{
  .hdr, .hero canvas, .hero .veil, .night, .report-acts, .viz-table summary, .doc-bar, .tool.rfp .tool-l, .split .srow{display:none !important}
  .hero, .hero.page{min-height:0; height:auto; background:none; color:var(--navy)}
  .hero.page .hero-in{padding:0 0 24px}
  [data-r]{opacity:1 !important; transform:none !important}
  .viz-table{display:block}
  .viz-table table{display:table}
  .bt{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  body.print-doc > *{display:none !important}
  body.print-doc > main, body.print-doc main > *{display:none !important}
  body.print-doc main > #rfp, body.print-doc #rfp .tool-r{display:block !important; max-height:none; overflow:visible}
  body.print-doc .rfp-doc{background:none; padding:0}
  body.print-doc > main{display:block !important}
}