/* dAIta Partners — site styles */

@font-face{font-family:Manrope;src:url(manrope-latin-400-normal.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(manrope-latin-500-normal.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url(manrope-latin-700-normal.woff2)format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url(manrope-latin-800-normal.woff2)format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Inter;src:url(inter-latin-400-normal.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(inter-latin-600-normal.woff2)format('woff2');font-weight:600;font-display:swap}

:root{
  --navy:#0A1B33; --navy2:#10294A; --blue:#0F5FD0; --bright:#1D7AFC;
  --pale:#E8F1FE; --body:#2B3440; --muted:#5A6573; --muteddk:#9FB0C7;
  --line:#DCE6F4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--body);font-size:18px;
  line-height:1.6;background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:Manrope,system-ui,sans-serif}
img{max-width:100%}

.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
.narrow{max-width:720px}
.center{text-align:center}
.center .narrow{margin-left:auto;margin-right:auto}
section{padding:104px 0}
.pale{background:var(--pale)}
.dark{background:var(--navy);color:#fff}

h1{font-size:52px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
h2{font-size:38px;line-height:1.2;font-weight:700;color:var(--navy2);letter-spacing:-.015em}
.dark h2{color:#fff}
h3{font-size:23px;line-height:1.3;font-weight:700;color:var(--navy2);margin-bottom:12px}
.dark h3{color:#fff}
h4{font-size:18px;font-weight:700;color:var(--navy2);margin-bottom:6px}
p{margin-bottom:18px}
p:last-child{margin-bottom:0}
.lede{font-size:20px;color:var(--muted)}
.dark .lede{color:var(--muteddk)}
.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  color:var(--bright);margin-bottom:16px;font-family:Inter}
a{color:var(--bright)}

.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;font-weight:600;
  padding:14px 28px;border-radius:6px;font-size:17px;border:1.5px solid var(--blue);cursor:pointer;
  font-family:Inter;transition:background .15s}
.btn:hover{background:#0C4EAE;border-color:#0C4EAE}
.btn-outline{background:transparent;color:var(--blue)}
.btn-outline:hover{background:rgba(15,95,208,.07);color:var(--blue)}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.45);color:#fff;
  padding:11px 22px;font-size:15px}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}
.btnrow{display:flex;gap:16px;flex-wrap:wrap}
.center .btnrow{justify-content:center}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:26px 0;gap:20px}
.nav-logo img{height:124px;display:block}
.nav ul{display:flex;gap:34px;list-style:none;align-items:center;margin:0}
.nav a{color:#D7E3F4;text-decoration:none;font-size:16px;font-weight:500}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px}

/* hero band texture — drawn in CSS, no image file */
.hero-band{position:relative;overflow:hidden}
.hero-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(118deg, transparent 0 46px,
      rgba(125,150,255,.10) 46px 47px),
    radial-gradient(62% 78% at 86% 46%, rgba(91,107,255,.30), transparent 62%),
    radial-gradient(38% 52% at 97% 22%, rgba(139,92,246,.20), transparent 66%);
  -webkit-mask-image:linear-gradient(to left, #000 8%, transparent 66%);
  mask-image:linear-gradient(to left, #000 8%, transparent 66%);
}
.hero-band > *{position:relative;z-index:1}
@media (max-width:760px){
  .hero-band::before{
    -webkit-mask-image:linear-gradient(to top, #000 4%, transparent 52%);
    mask-image:linear-gradient(to top, #000 4%, transparent 52%);
  }
}

/* hero */
.hero{text-align:center;padding:96px 0 118px}
.hero h1{max-width:900px;margin:0 auto 26px}
.hero .lede{max-width:760px;margin:0 auto 38px;font-size:19px;color:var(--muteddk)}
.hero-sm{padding:78px 0 90px}

/* grids */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:52px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:50px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 44px;margin-top:48px}
.card p{font-size:16.5px;color:var(--muted);line-height:1.65}
.rule{width:38px;height:3px;background:var(--bright);border-radius:2px;margin-bottom:22px}
.card a{text-decoration:none;font-weight:600;font-size:16px;display:inline-block;margin-top:14px}

.tile{background:#fff;border:1px solid var(--line);border-radius:10px;padding:30px 32px}
.tile h3{font-size:20px;margin-bottom:10px}
.tile p{font-size:16px;color:var(--muted)}
.num{font-family:Manrope;font-weight:800;font-size:15px;color:var(--bright);
  margin-bottom:14px;letter-spacing:.06em}
.step p{font-size:16.5px;color:var(--muted)}
.phone{display:inline-block;margin-top:26px;color:var(--bright);font-weight:600;
  text-decoration:none;font-size:17px}

/* services detail */
.svc{border-top:1px solid var(--line);padding-top:0}
.svc + .svc{margin-top:0}
.svc-lede{font-size:19px;color:var(--navy2);max-width:760px;margin-bottom:38px}
.deliver{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 44px}
.deliver p{font-size:16.5px;color:var(--muted)}

/* about */
.bio{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:start;margin-top:44px}
/* A subhead inside the bio flow, not a peer of the h2 above it: smaller, and
   with top space the global h3 (margin-bottom only) does not provide. */
.bio h3{margin-top:34px;font-size:21px}
/* height:auto is required — the width/height attributes on the <img> are
   presentational hints that set CSS height, which would otherwise beat
   aspect-ratio and render the photo at its full pixel height. */
.portrait{width:100%;height:auto;aspect-ratio:4/5;border-radius:12px;object-fit:cover;
  display:block;background:var(--navy)}
.portrait-ph{width:100%;aspect-ratio:4/5;border-radius:12px;background:var(--navy);
  display:flex;align-items:center;justify-content:center}
.portrait-ph img{width:34%;opacity:.55}

/* faq */
.faq{max-width:820px;margin:44px auto 0}
details{border-bottom:1px solid var(--line);padding:22px 0}
details summary{font-family:Manrope;font-weight:700;font-size:19px;color:var(--navy2);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--bright);font-size:24px;line-height:1;flex:none;font-weight:600}
details[open] summary::after{content:"–"}
details .ans{margin-top:14px;color:var(--muted);font-size:17px}

/* form */
.formwrap{max-width:620px;margin:40px auto 0;text-align:left}
label{display:block;font-size:14px;font-weight:600;color:var(--navy2);margin-bottom:7px}
input,textarea{width:100%;font-family:Inter;font-size:17px;color:var(--body);
  border:1px solid #C6D4E6;border-radius:6px;padding:13px 15px;background:#fff}
input:focus,textarea:focus{outline:2px solid var(--bright);outline-offset:1px;border-color:transparent}
textarea{min-height:150px;resize:vertical}
.field{margin-bottom:22px}
.formnote{font-size:14px;color:var(--muted);margin-top:16px}

/* auto-fit rather than a fixed count: the LinkedIn cell made four, and a hard
   repeat(3) dropped the fourth onto a row of its own. */
.details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:34px;margin-top:50px}
.details-grid .fh{font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--bright);margin-bottom:10px}
.details-grid a{color:var(--body);text-decoration:none}

/* commitment */
.commit p{font-size:21px;line-height:1.6;color:#DCE7F6}

/* footer */
footer{background:var(--navy);color:var(--muteddk);padding:64px 0 46px;font-size:15px}
footer .flogo{height:120px;margin-bottom:30px}
.fcols{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap}
.fcols a{color:var(--muteddk);text-decoration:none;display:block;margin-bottom:9px}
.fcols a:hover{color:#fff}
/* The glyph is an inline-block inside a display:block anchor, so the two need a
   flex row to sit on one baseline rather than stacking. */
.fcols a.flink{display:flex;align-items:center;gap:8px;margin-top:14px}
.fcols a.flink .li{flex:0 0 auto}
.fh{color:#fff;font-weight:600;margin-bottom:14px;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:24px;
  display:flex;justify-content:space-between;gap:20px;font-size:14px;flex-wrap:wrap}
.legal a{color:var(--muteddk);text-decoration:none;display:inline;margin-left:22px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .grid4{grid-template-columns:repeat(2,1fr);gap:32px}
  .grid3{grid-template-columns:1fr;gap:34px}
  .bio{grid-template-columns:1fr;gap:34px}
  .bio .portrait,.bio .portrait-ph{max-width:340px}
  .deliver{grid-template-columns:1fr;gap:24px}
  .details-grid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:760px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  section{padding:60px 0}
  h1{font-size:34px;line-height:1.15}
  h2{font-size:28px;line-height:1.25}
  h3{font-size:20px}
  .lede{font-size:17.5px}
  .hero{padding:52px 0 64px}
  .hero .lede{font-size:17.5px}
  .grid2,.grid4{grid-template-columns:1fr;gap:24px;margin-top:34px}
  .commit p{font-size:18.5px}

  .nav{flex-wrap:wrap;padding:18px 0}
  .nav-toggle{display:block;order:2}
  .nav ul{order:3;flex-basis:100%;display:none;flex-direction:column;align-items:flex-start;
    gap:4px;padding:14px 0 6px}
  .nav ul li{width:100%}
  .nav ul a{display:block;padding:11px 0;font-size:17px}
  .nav ul a.btn-ghost{display:inline-block;margin-top:10px}
  .nav.open ul{display:flex}

  .fcols{gap:30px}
  .legal{flex-direction:column;gap:10px}
  .legal a{margin-left:0;margin-right:20px}
}

/* ---------- entry offer + approach ---------- */
.offer-band{padding:88px 0}
.offer{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.offer h2{font-size:34px}
.offer-list{list-style:none;padding:0;margin:0}
.offer-list li{padding:15px 0 15px 30px;border-bottom:1px solid rgba(255,255,255,.14);
  position:relative;color:#DCE7F6;font-size:16.5px}
.offer-list li:last-child{border-bottom:0}
.offer-list li::before{content:"";position:absolute;left:0;top:23px;width:12px;height:2px;
  background:var(--bright);border-radius:2px}

.stages{display:grid;gap:0}
.stage{display:grid;grid-template-columns:120px 1fr;gap:34px;padding:38px 0;
  border-top:1px solid var(--line)}
.stage:last-child{border-bottom:1px solid var(--line)}
.stage-n{font-family:Manrope;font-weight:800;font-size:44px;line-height:1;
  color:var(--bright);opacity:.32}
.stage h3{font-size:26px;margin-bottom:10px}
.stage p{color:var(--muted);max-width:640px}

.creds{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px;text-align:left}
.cred h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--bright);
  margin-bottom:16px}
.cred ul{list-style:none;padding:0;margin:0}
.cred li{padding:11px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--body)}
.cred li:last-child{border-bottom:0}
.cred em{color:var(--muted);font-style:normal;font-size:13px}

@media (max-width:980px){
  .offer{grid-template-columns:1fr;gap:34px}
  .creds{grid-template-columns:1fr;gap:30px}
}
@media (max-width:760px){
  .offer-band{padding:56px 0}
  .offer h2{font-size:26px}
  .stage{grid-template-columns:1fr;gap:10px;padding:28px 0}
  .stage-n{font-size:30px}
  .stage h3{font-size:21px}
}

/* ---------- inline marks and diagrams ---------- */
.markwrap{color:var(--bright);margin-bottom:18px;line-height:0}
.markwrap .mark{width:44px;height:44px}
.markwrap.lg .mark{width:54px;height:54px}
.svc-head{display:flex;align-items:center;gap:20px}
.svc-head .markwrap{margin-bottom:0}
.svc-head h2{margin:0}

.figure{margin:38px 0 8px}
.figscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.diagram{display:block;width:100%;min-width:620px;height:auto}
.figcap{font-size:14px;color:var(--muted);margin-top:10px;text-align:center}
.d-lbl{font-family:Manrope,sans-serif;font-weight:700;font-size:15px}
.d-sub{font-family:Inter,sans-serif;font-size:13px}
.d-cap{font-family:Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:.09em}
.d-num{font-family:Manrope,sans-serif;font-weight:800;font-size:16px}

@media (max-width:760px){
  .svc-head{gap:14px}
  .markwrap.lg .mark{width:40px;height:40px}
  .figure{margin:26px 0 4px}
}

/* keep card links on a common baseline */
.grid4 .card{display:flex;flex-direction:column}
.grid4 .card p{flex:1 1 auto}
.grid4 .card a{margin-top:16px}

/* ---------- gradients: depth where it earns its place ---------- */

/* the logo's own gradient, echoed in the small details */
.markwrap .mark{stroke:url(#brandGrad)}
.rule{background:linear-gradient(90deg,#0F5FD0,#5B6BFF 60%,#8B5CF6)}
.num{background:linear-gradient(90deg,#0F5FD0,#7B5BFF);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stage-n{background:linear-gradient(135deg,#1D7AFC,#8B5CF6);
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.42}

/* pale bands: a breath of depth rather than a flat fill */
.pale{background:linear-gradient(180deg,#F4F8FE 0%,var(--pale) 46%,#DFEBFC 100%)}

/* mid-page dark bands — glow placed differently from the hero so they
   read as their own moment rather than a repeat */
.commit,.offer-band{position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0C2039 0%,var(--navy) 52%,#081426 100%)}
.commit::before,.offer-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 120% at 18% 108%, rgba(29,122,252,.24), transparent 64%),
    radial-gradient(38% 90% at 84% -10%, rgba(139,92,246,.20), transparent 66%);
}
.commit > *,.offer-band > *{position:relative;z-index:1}

/* footer: gradient ground, a lit edge, and the hero texture mirrored */
footer{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#0B1E38 0%,var(--navy) 38%,#060F1E 100%)}
footer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(118deg, transparent 0 46px, rgba(125,150,255,.07) 46px 47px),
    radial-gradient(56% 88% at 12% 8%, rgba(29,122,252,.17), transparent 62%),
    radial-gradient(40% 70% at 92% 96%, rgba(139,92,246,.15), transparent 68%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.35) 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.35) 70%,transparent 100%);
}
footer::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(29,122,252,.65) 22%,
    rgba(139,92,246,.55) 62%,transparent);}
footer > *{position:relative;z-index:1}

/* primary button: a whisper of depth, not a 2010 glossy pill */
.btn{background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0))}
.btn-ghost,.btn-outline{background-image:none}

/* ---------- contact form: honeypot, error, confirmation ---------- */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formerr{margin-top:16px;font-size:15px;color:#A4342B;background:#FDF0EE;
  border:1px solid #F2C9C3;border-radius:6px;padding:12px 14px}
button[type=submit]:disabled{opacity:.62;cursor:default}

.done{max-width:620px;margin:40px auto 0;text-align:center;padding:44px 34px;
  background:linear-gradient(180deg,#F4F8FE,#E8F1FE);border:1px solid #CFE0F8;
  border-radius:12px;outline:none}
.done-tick{color:var(--blue);line-height:0;margin-bottom:18px}
.done h3{font-size:22px;margin-bottom:10px}
.done p{font-size:16.5px;color:var(--muted)}

/* ---------- carded surfaces ---------- */
/* Appended deliberately: these must win over the base rules above. */

.grid4{gap:22px}
.grid4 .card{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:26px 22px 24px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.grid4 .card p{font-size:15.5px;line-height:1.62;hyphens:auto}
.grid4 .card h3{font-size:19.5px;letter-spacing:-.01em}
.grid4 .card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(15,45,80,.09);
  border-color:#BCD2EC;
}
.pale .grid4 .card{background:#fff}

/* pillar marks sit in a tinted chip */
.markwrap{
  width:52px;height:52px;display:grid;place-items:center;
  border-radius:13px;background:#EAF3FF;margin-bottom:20px;
}
.markwrap .mark{width:30px;height:30px}
.markwrap.lg{width:60px;height:60px;border-radius:15px}
.markwrap.lg .mark{width:36px;height:36px}

/* service deliverables become boxes too */
.deliver{gap:24px}
.deliver > div{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 26px;
}
.pale .deliver > div{background:#fff}

/* a little lift on the primary button */
.btn{box-shadow:0 8px 20px rgba(15,95,208,.15)}
.btn-ghost,.btn-outline{box-shadow:none}

@media (max-width:980px){
  .grid4{gap:20px}
}
@media (max-width:760px){
  .grid4{gap:16px}
  .grid4 .card{padding:24px 22px}
  .markwrap{width:46px;height:46px;border-radius:12px;margin-bottom:16px}
  .markwrap .mark{width:26px;height:26px}
  .deliver > div{padding:22px 20px}
}

/* ---------- accessibility ---------- */

/* skip link: invisible until focused, then a real target */
.skip{
  position:absolute;left:12px;top:-60px;z-index:50;
  background:#fff;color:var(--blue);font-weight:600;font-size:15px;
  padding:11px 18px;border-radius:0 0 8px 8px;text-decoration:none;
  box-shadow:0 6px 18px rgba(10,27,51,.22);transition:top .15s ease;
}
.skip:focus{top:0}

/* a visible focus ring for keyboard users, on every interactive element */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--bright);
  outline-offset:3px;
  border-radius:3px;
}
.dark a:focus-visible,
.dark button:focus-visible,
footer a:focus-visible{outline-color:#8FBBFF}

/* respect a reduced-motion preference */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .grid4 .card:hover{transform:none}
}

/* Approach page — per-stage detail. The homepage carries the one-line summary;
   this is what makes clicking through worth the visitor's time. */
.stage-body{max-width:760px}
.stage-detail{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:24px;
  padding-top:24px;border-top:1px solid var(--line)}
.stage-detail h4{font-family:Manrope;font-weight:700;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--blue);margin:0 0 12px}
.stage-detail ul{list-style:none;padding:0;margin:0}
.stage-detail li{position:relative;padding:0 0 10px 20px;color:var(--body);font-size:16px;
  line-height:1.55}
.stage-detail li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  border-radius:2px;background:url(#brandGrad);background:var(--bright)}
.stage-detail p{color:var(--muted);font-size:16px;line-height:1.6;margin:0}
@media (max-width:820px){
  .stage-detail{grid-template-columns:1fr;gap:26px}
}

/* ---------- photography ----------
   Pattern borrowed from the reference site: the photograph sits under a heavy
   brand wash so it reads as atmosphere rather than as subject. Nothing on the
   page refers to the image, and if the file is missing the band falls back to
   the gradient it had before. */

.hero-band.has-photo::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* Lighter than a flat overlay: heavy enough on the left to hold the headline,
     thin enough on the right that the photograph is actually visible. */
  background-image:
    /* top scrim so the nav stays readable where it crosses bright screens */
    linear-gradient(180deg, rgba(8,20,38,.62) 0%, rgba(8,20,38,.16) 15%,
                    transparent 28%),
    /* Wash strength is per page: a bright, window-lit photo needs more than a
       dark one before white text holds up. Overridden inline where needed. */
    linear-gradient(93deg,
      rgba(10,27,51,var(--w1,.93)) 0%, rgba(10,27,51,var(--w2,.84)) 26%,
      rgba(10,27,51,var(--w3,.58)) 46%, rgba(10,27,51,var(--w4,.34)) 66%,
      rgba(10,27,51,var(--w5,.26)) 100%),
    var(--hero-photo);
  background-size:cover, cover, cover;
  /* Push the framing right so the subject clears the headline column. */
  background-position:center, center, var(--hero-pos, 72% center);
}
.hero-band.has-photo::before{z-index:1}
.hero-band.has-photo > *{z-index:2}

/* With a photo behind it the copy moves left, onto the washed side, so the
   image is actually visible instead of being buried under an even overlay. */
.hero-band.has-photo .hero{text-align:left;padding:88px 0 104px}
.hero-band.has-photo .hero h1{margin:0 0 26px;max-width:620px}
.hero-band.has-photo .hero .lede{margin:0 0 38px;max-width:560px}

@media (max-width:860px){
  .hero-band.has-photo .hero{text-align:center;padding:72px 0 84px}
  .hero-band.has-photo .hero h1,
  .hero-band.has-photo .hero .lede{margin-left:auto;margin-right:auto}
  /* Centred copy runs the full width here, so the wash has to be even and
     heavier — and the lede lifts to near-white to clear the photo behind it. */
  .hero-band.has-photo::after{
    background-image:
      linear-gradient(180deg, rgba(8,20,38,.70) 0%, rgba(8,20,38,.30) 18%,
                      transparent 34%),
      linear-gradient(180deg,
        rgba(10,27,51,var(--m1,.80)) 0%, rgba(10,27,51,var(--m2,.86)) 45%,
        rgba(10,27,51,var(--m3,.90)) 100%),
      var(--hero-photo);
    background-position:center, center, var(--hero-pos-mobile, center 40%);
  }
  .hero-band.has-photo .hero .lede{color:#DCE7F5}
}

.grid4 .card.card-photo{
  position:relative;overflow:hidden;border-color:transparent;
  background-image:
    linear-gradient(175deg, rgba(10,27,51,.90) 0%, rgba(10,27,51,.93) 55%,
                    rgba(10,27,51,.97) 100%),
    var(--card-photo);
  background-size:cover, cover;
  background-position:center, center;
}
.card-photo h3{color:#fff}
.card-photo p{color:#C6D6EA}
.card-photo a{color:#7FB2FF}
.card-photo .markwrap{background:rgba(255,255,255,.10)}
.card-photo .markwrap .mark{stroke:#8FBBFF}
.grid4 .card.card-photo:hover{
  border-color:transparent;
  box-shadow:0 14px 34px rgba(10,27,51,.30);
}


/* ---------- photo heroes fill the first screen ----------
   Landing on a page should show the photograph, not the white section below
   it. The band is given a viewport-relative minimum and the copy centres
   inside whatever height is left after the nav. */
.hero-band.has-photo{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.hero-band.has-photo > .wrap:first-of-type{flex:0 0 auto}
/* .wrap carries margin:0 auto, and an auto cross-axis margin beats the flex
   container's default stretch — without this the nav shrinks to its content
   and the hamburger ends up next to the logo instead of at the right edge. */
.hero-band.has-photo > .wrap{width:100%}
.hero-band.has-photo .hero{
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  /* flex-start, not the default stretch: otherwise the button becomes a flex
     item and spans the whole column width. */
  align-items:flex-start;
  padding-top:0;padding-bottom:6vh;
}
@media (max-width:860px){
  /* phones: a full 92vh band pushes the first real content too far down */
  /* dvh tracks the visible area as mobile browser chrome shows and hides,
     which plain vh does not — without it the band overshoots the screen. */
  .hero-band.has-photo{min-height:100vh;min-height:100dvh}
  .hero-band.has-photo .hero{padding-bottom:4vh;align-items:center}
  .nav-logo img{height:92px}
  footer .flogo{height:96px}
}
@media (max-height:620px){
  /* short laptop windows and landscape phones */
  .hero-band.has-photo{min-height:auto}
  .hero-band.has-photo .hero{padding:64px 0 76px}
}

.hero-band.has-photo .hero .lede{color:#D3E0EF}

/* ---------- smaller-organizations band on the Services page ---------- */
.sb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 34px;margin-top:44px}
.sb-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 26px 24px}
.sb-item h3{font-size:19px;line-height:1.3;letter-spacing:-.01em;margin-bottom:10px}
.sb-item p{color:var(--muted);font-size:16px;line-height:1.62;margin:0}
@media (max-width:820px){
  .sb-grid{grid-template-columns:1fr;gap:18px}
}

/* ---------- publications ---------- */
.book{display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:start}
.book-cover img{width:100%;height:auto;border-radius:10px;display:block;
  box-shadow:0 14px 40px rgba(10,27,51,.26)}
.book-body h2{font-size:30px;line-height:1.18;margin:6px 0 8px}
.book-sub{font-size:18.5px;color:var(--muted);margin-bottom:22px;line-height:1.45}
.book-body p{margin-bottom:16px}
.book-body .btn{margin-top:12px}
.booknote{margin-top:22px;padding:16px 18px;border:1px solid var(--line);border-radius:10px;
  background:var(--pale);font-size:16px;color:var(--body)}
/* The line under the Amazon button: a caption, not a callout. The boxed
   .booknote above only suited standing in for the button. */
.bookmeta{margin-top:14px;font-size:15px;color:var(--muted)}
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.phase{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 22px}
.phase-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:10px}
.phase-h h3{font-size:19px;margin:0}
.phase-h span{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);
  font-weight:600;white-space:nowrap}
.phase p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0}
@media (max-width:900px){
  .book{grid-template-columns:1fr;gap:32px}
  .book-cover{max-width:280px}
  .phases{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .phases{grid-template-columns:1fr}
}

/* ---- brand line -------------------------------------------------------
   The one sentence the brief asks to give its own space. Set large, centred
   and alone on the page: a pull quote, not a paragraph. */
.brandline{background:var(--pale);padding:72px 0}
.brandline p{margin:0;font-size:34px;line-height:1.3;font-weight:700;
  letter-spacing:-.02em;color:var(--navy2);max-width:900px;margin:0 auto}
@media (max-width:760px){
  .brandline{padding:52px 0}
  .brandline p{font-size:24px}
}

/* ---- blog -------------------------------------------------------------
   The post column is capped at 68ch: long-form prose set the full width of
   the wrap is measurably harder to read, and this is the only page type on
   the site that is read rather than scanned. */
.postmeta{margin-top:18px;font-size:15px;color:var(--muteddk);letter-spacing:.02em}
.hero-sm .postmeta{color:#9FB0C7}

.post{max-width:68ch;margin:0 auto}
.post p{font-size:18.5px;line-height:1.72;color:var(--body);margin:0 0 22px}
.post h2{font-size:27px;line-height:1.25;margin:46px 0 16px;letter-spacing:-.015em}
.post ul{margin:0 0 24px;padding-left:22px}
.post li{font-size:18px;line-height:1.65;color:var(--body);margin-bottom:11px}
.post strong{color:var(--navy2);font-weight:700}

.postmore{max-width:68ch;margin:56px auto 0;padding-top:28px;
  border-top:1px solid var(--line)}
.postmore h3{font-size:16px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin-bottom:14px}
.postmore ul{list-style:none;padding:0;margin:0}
.postmore li{margin-bottom:9px}
.postmore a{color:var(--bright);text-decoration:none;font-weight:600}

.postlist{display:grid;gap:26px;max-width:860px;margin:0 auto}
.postcard{display:block;text-decoration:none;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:30px 32px;
  transition:border-color .15s, transform .15s}
.postcard:hover{border-color:var(--bright);transform:translateY(-2px)}
.postcard-meta{font-size:14px;color:var(--muted);letter-spacing:.03em;
  text-transform:uppercase;font-weight:600}
.postcard h2{font-size:25px;line-height:1.25;margin:10px 0 12px;
  letter-spacing:-.015em;color:var(--navy2)}
.postcard p{font-size:17px;line-height:1.6;color:var(--muted);margin:0}
.postcard-go{display:inline-block;margin-top:16px;color:var(--bright);
  font-weight:600;font-size:16px}

@media (max-width:760px){
  .post p{font-size:17px}
  .post h2{font-size:23px;margin-top:38px}
  .postcard{padding:24px 22px}
  .postcard h2{font-size:21px}
}