/* ==========================================================================
   EdBetter, site stylesheet. Concept A, institutional.
   Build v2. Shared across every page, so header rules exist in one place only.

   Palette is Amreena's stated brand palette, supplied 22 August 2026:
     #01196f navy   #7e7e7e grey   #000000 black   #ffffff white   #c85505 orange

   Note for whoever picks this up. Her logo FILE actually contains #242E61 and
   #E15F11, which are not the same colours as the palette she sent. The palette
   wins, and the logo assets were recoloured to match it. If she says the file
   is right instead, change --navy and --orange here and re-run buildlogo.ps1.

   Three values below are derived, because three of hers fail contrast at body
   size. Each keeps her hue and only shifts lightness.
   ========================================================================== */
:root{
  --white:#ffffff;
  --paper:#ffffff;       /* page base */
  --paper-2:#F5F6F8;     /* alternating bands and cards */
  --navy:#01196f; --navy-d:#010F45; --navy-lt:#2A3E96;
  --orange:#c85505;      /* display weight, fills and large type */
  --orange-t:#B04A05;    /* text weight. Hers is 4.39:1 on white, under the 4.5 floor. This is 5.49:1 */
  --orange-lt:#F0813A;   /* the same hue on navy. Hers is 3.47:1 there. This is 5.75:1 */
  --tint:#FCF0E6;
  --grey:#7e7e7e;        /* her grey. Rules and non text only, 4.08:1 fails as body copy */
  --ink:#16181D;         /* body. Softened from her #000000, pure black haloes over long paragraphs */
  --ink-2:#63666C;       /* secondary text, 5.73:1 */
  --ink-3:#6E7278;       /* meta and labels, 4.84:1 */
  --rule:rgba(1,25,111,.12); --rule-2:rgba(1,25,111,.24);
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:'Lato',-apple-system,'Segoe UI',system-ui,sans-serif;
  --mx:1140px; --gut:clamp(20px,5vw,52px);
  --bar:74px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}          /* clip, not hidden: hidden kills position:sticky */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--mx);margin:0 auto;padding-inline:var(--gut)}
:target,section[id]{scroll-margin-top:calc(var(--bar) + 12px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:4px}

/* ---------- header ---------------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--bar)}
.logo{align-self:center;flex:0 0 auto;height:34px;width:auto;max-width:230px;object-fit:contain;object-position:left center}
.nav-right{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.nav-links{display:flex;gap:clamp(16px,2vw,28px);font-size:14.5px;font-weight:500;color:var(--ink-2)}
.nav-links a{padding-block:6px;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--orange-t)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--orange)}
/* Publications opens in a new tab. WCAG 3.2.5 says warn people when a link
   does that, so there is a visible arrow and a screen reader only phrase. */
.nav-links a[target="_blank"]::after{content:"\2197";margin-left:4px;font-size:11px;opacity:.6}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Log in has always pointed at edbetter.app/login, but as grey text it did
   not read as clickable. Now an outlined control in her orange.
   --orange-t rather than --orange, because the label is 13.5px and has to
   clear 4.5:1 against the paper ground. */
.nav-login{font-size:13.5px;font-weight:700;color:var(--orange-t);border:1px solid rgba(200,85,5,.5);
  border-radius:4px;padding:8px 15px;transition:color .2s,border-color .2s,background .2s}
.nav-login:hover{color:#fff;border-color:var(--orange-t);background:var(--orange-t)}

/* things we do not have yet. Visible on purpose, so nobody ships a gap by
   accident and Amreena can see exactly what is waiting on her. */
.tbc{display:inline-block;background:var(--tint);color:var(--orange-t);border:1px dashed rgba(200,85,5,.45);
  border-radius:3px;padding:1px 7px;font-size:.92em;font-style:normal}
.legal .tbc{font-size:.95em}

.btn{display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:#fff;font-size:14.5px;font-weight:700;padding:12px 20px;border-radius:4px;border:1px solid var(--navy);transition:background .2s,border-color .2s;cursor:pointer}
.btn:hover{background:var(--navy-d);border-color:var(--navy-d);color:#fff}
/* --orange-t, not --orange. White on her #c85505 is 4.41:1, which is under
   the 4.5 floor for 14.5px bold, and this is the primary call to action on
   every page. Her exact orange still carries every non text use: rules,
   dots, the book spine, icon hovers. Those only need 3:1. */
.btn-acc{background:var(--orange-t);border-color:var(--orange-t)}
.btn-acc:hover{background:#8F3C04;border-color:#8F3C04}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-ghost:hover{background:rgba(1,25,111,.05);color:var(--ink)}
.btn-lt{background:#fff;color:var(--navy);border-color:#fff}
.btn-lt:hover{background:var(--tint);color:var(--navy);border-color:var(--tint)}

/* menu for narrow screens, no javascript */
.nav-menu{position:relative;display:none}
.nav-menu>summary{list-style:none;cursor:pointer;width:42px;height:42px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 9px;border:1px solid var(--rule-2);border-radius:4px}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary span{display:block;height:2px;background:var(--ink);border-radius:2px}
.nav-menu-panel{position:absolute;right:0;top:52px;min-width:212px;background:var(--white);border:1px solid var(--rule);border-radius:6px;box-shadow:0 14px 34px rgba(1,25,111,.16);padding:8px;display:flex;flex-direction:column}
.nav-menu-panel a{padding:11px 12px;font-size:15px;border-radius:4px;color:var(--ink-2)}
.nav-menu-panel a:hover{background:var(--tint);color:var(--orange-t)}
.nav-menu-panel hr{border:0;border-top:1px solid var(--rule);margin:6px 4px}
@media(max-width:1000px){
  .nav-links,.nav-login{display:none}
  .nav-menu{display:block}
}
@media(max-width:460px){
  .nav-in .btn{display:none}
  .logo{height:30px}
}

/* ---------- type ------------------------------------------------------ */
section{padding-block:clamp(44px,6vw,86px)}
/* section labels, "Our work", "What we do". Deliberately larger than the
   usual eyebrow size so they read as section headers, not captions. */
.eyebrow,.sec-lab{font-size:clamp(13px,1.15vw,14.5px);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-t);margin:0 0 18px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(33px,5.2vw,60px);line-height:1.07;letter-spacing:-.022em;margin:0 0 22px;max-width:20ch;text-wrap:balance}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.6vw,42px);line-height:1.14;letter-spacing:-.018em;margin:0 0 18px;max-width:26ch;text-wrap:balance}
h3{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2vw,25px);line-height:1.22;margin:0 0 10px;text-wrap:balance}
p{margin:0 0 14px;line-height:1.65;color:var(--ink-2)}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(16.5px,1.6vw,19.5px);line-height:1.62;color:var(--ink-2);max-width:60ch;margin:0 0 30px}
.narrow{max-width:62ch}

/* ---------- hero ------------------------------------------------------ */
.hero{padding-block:clamp(46px,7vw,92px) clamp(30px,4vw,52px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- client strip ----------------------------------------------
   The background must stay pure #ffffff, hence var(--white) and not
   var(--paper-2). The MSDE SVG carries a baked in white background
   rectangle, fused into the same compound path as the white parts of the
   state flag, so it cannot be stripped out safely. On #ffffff it
   disappears. On any other ground it shows as a white block. */
.strip{border-block:1px solid var(--rule);background:var(--white)}
/* Static, and centred. The label sits above the row rather than beside it. */
.strip-in{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(14px,1.8vw,20px);padding-block:clamp(24px,3vw,32px)}
.strip-lab{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}
/* five marks now, so the gap comes in to keep the row on one line longer */
.strip-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(18px,2.3vw,34px)}
/* flex:0 0 auto, or each logo stretches to the row width */
.strip-logos img{flex:0 0 auto;width:auto;object-fit:contain;object-position:left center}
/* optically matched, not mathematically. Scoped so they beat the rule above. */
.strip-logos .lg-msde{height:38px}
.strip-logos .lg-tea{height:42px}
.strip-logos .lg-esc{height:46px}
@media(max-width:700px){
  .strip-logos .lg-msde{height:29px}
  .strip-logos .lg-tea{height:32px}
  .strip-logos .lg-esc{height:35px}
}

/* ---------- principles ------------------------------------------------ */
.principles{background:var(--paper-2);border-block:1px solid var(--rule)}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);margin-top:34px}
.pr{padding-top:20px;border-top:2px solid var(--orange)}
.pr-n{font-family:var(--serif);font-size:15px;color:var(--orange-t);margin-bottom:10px}

/* ---------- case studies ---------------------------------------------- */
.work{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px);margin-top:34px}
/* three case studies now that TSLA is in, two up before it gets cramped */
.work-3{grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px)}
@media(max-width:1040px){.work-3{grid-template-columns:1fr 1fr}}
.case{background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;padding:clamp(22px,2.6vw,34px)}
.case-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-t);background:var(--tint);padding:5px 10px;border-radius:3px;margin-bottom:16px}
/* Agency marks inside a case card. Each sits on its own white chip, which
   is not decoration: the MSDE SVG carries a white background rectangle that
   would otherwise show as a pale block against the card. The chip makes that
   deliberate, and gives the other two a consistent frame. */
.case-logos{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.case-logos span{display:inline-flex;align-items:center;background:var(--white);
  border:1px solid var(--rule);border-radius:5px;padding:7px 11px}
.case-logos img{width:auto;flex:0 0 auto;display:block;object-fit:contain;object-position:left center}
/* optically matched, scoped so they beat the rule above */
.case-logos .lg-msde{height:22px}
.case-logos .lg-tea{height:25px}
.case-logos .lg-esc{height:27px}
.tick{margin:16px 0 0;padding:0;list-style:none}
.tick li{position:relative;padding-left:20px;margin-bottom:9px;font-size:15px;color:var(--ink-2);line-height:1.55}
.tick li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--orange);border-radius:50%}

/* ---------- services --------------------------------------------------
   Editorial rows, chosen over cards and over a numbered arc. Each row
   tints and shifts on hover. */
.tone-2{background:var(--paper-2);border-block:1px solid var(--rule)}
.svc{margin-top:34px;border-top:1px solid var(--rule)}
.svc-item{display:grid;grid-template-columns:auto 1fr 1.3fr;gap:clamp(16px,3vw,40px);align-items:start;
  padding:26px clamp(10px,1.4vw,16px);border-bottom:1px solid var(--rule);
  transition:background .25s ease,padding-left .25s ease}
.svc-item:hover{background:var(--tint);padding-left:clamp(20px,2.4vw,30px)}
.svc-n{font-family:var(--serif);font-size:clamp(24px,3vw,36px);color:var(--orange);line-height:1;min-width:2.2ch}
.svc-item h3{margin:0}
.svc-item p{margin:0}
@media(max-width:820px){
  /* ".svc-item p" also matches p.svc-n, the number. That pushed the number into
     column 2 and squeezed the copy into whatever was left, about 98px at 390px
     wide, one word per line. Stack the three parts instead. */
  .svc-item{grid-template-columns:1fr;gap:8px}
  .svc-item p,.svc-item h3{grid-column:1}
  .svc-n{font-size:22px;min-width:0}
  .svc-item{padding:22px clamp(10px,1.4vw,16px)}
}

/* ---------- founder --------------------------------------------------- */
.founder{background:var(--navy);color:#fff}
.founder .sec-lab{color:var(--orange-lt)}
.founder h2{color:#fff}
.founder p{color:rgba(255,255,255,.78)}
.f-grid{display:grid;grid-template-columns:320px 1fr;gap:clamp(26px,4vw,60px);align-items:start}
.f-photo{position:relative;border-radius:6px;overflow:hidden;background:var(--navy-d);box-shadow:0 18px 44px rgba(0,0,0,.3)}
/* height:auto is required. Without it the HTML height attribute wins and
   aspect-ratio is ignored, which rendered the portrait 320x1250. */
.f-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.f-photo::after{content:"";position:absolute;inset:0;border-radius:6px;border:1px solid rgba(255,255,255,.16);pointer-events:none}
.f-cap{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.6);border-left:2px solid var(--orange);padding-left:12px}
.f-quote{font-family:var(--serif);font-size:clamp(18px,2vw,23px);line-height:1.5;color:#fff;margin:0 0 22px}
.f-name{font-size:clamp(23px,2.6vw,32px);margin-bottom:6px}
.f-role{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-lt);margin:0 0 18px}
.f-cred{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.f-cred li{font-size:14.5px;color:rgba(255,255,255,.74);padding-left:18px;position:relative}
.f-cred li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--orange-lt);border-radius:50%}
.f-note{margin-top:20px;font-size:12.5px;color:rgba(255,255,255,.46);font-style:italic}

/* ---------- founder inside the team block ------------------------------
   Amreena asked for her bio to sit inside Meet the team rather than in its
   own section, so this is the light-ground version of .f-grid. */
.f-lite{display:grid;grid-template-columns:290px 1fr;gap:clamp(26px,4vw,56px);align-items:start;margin-top:34px}
.f-lite .f-photo{box-shadow:0 16px 38px rgba(1,25,111,.12)}
.f-lite .f-photo::after{border-color:var(--rule)}
.f-lite .f-quote{font-family:var(--serif);font-size:clamp(17px,1.9vw,21px);line-height:1.5;color:var(--navy);margin:0 0 18px}
.f-lite .f-name{font-family:var(--serif);font-size:clamp(22px,2.4vw,29px);margin:0 0 4px;color:var(--ink)}
.f-lite .f-role{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-t);margin:0 0 16px}
.f-lite p{color:var(--ink-2)}
.f-lite .f-cred li{color:var(--ink-2)}
.f-lite .f-cred li::before{background:var(--orange)}
@media(max-width:860px){.f-lite{grid-template-columns:1fr}.f-lite .f-photo{max-width:280px}}

/* Her bio card gets the navy back, as a panel inside the light Meet the team
   section. Moving the bio into that section is what cost it the navy in the
   first place, and this puts it back without undoing the move.
   Home only. On About the navy Company block sits directly above, and two
   navy blocks stacked with a thin gap between reads as heavy. */
.f-panel{background:var(--navy);border-radius:12px;padding:clamp(24px,3.2vw,42px);
  margin-top:34px;box-shadow:0 24px 56px rgba(1,25,111,.2)}
.f-panel .f-lite{margin-top:0}
.f-panel .f-quote{color:#fff}
.f-panel .f-name{color:#fff}
.f-panel .f-role{color:var(--orange-lt)}
.f-panel p{color:rgba(255,255,255,.8)}
.f-panel .f-photo{box-shadow:0 16px 38px rgba(0,0,0,.32)}
.f-panel .f-photo::after{border-color:rgba(255,255,255,.18)}
.f-panel .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.f-panel .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.6)}

/* a sub-heading inside a section, above a grid */
.sub-h{font-family:var(--serif);font-size:clamp(19px,2.1vw,25px);margin:clamp(30px,3.4vw,44px) 0 6px;color:var(--ink)}

/* ---------- advisory bench -------------------------------------------- */
.bench{background:var(--paper-2);border-block:1px solid var(--rule)}
.bench-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);margin-top:32px}
.person{border:1px solid var(--rule);border-radius:6px;padding:22px;background:var(--paper)}
.person-top{display:flex;align-items:center;gap:14px;margin-bottom:15px}
/* flex:0 0 auto, or the avatar stretches to the column width */
.person-photo{flex:0 0 auto;width:62px;height:62px;border-radius:50%;object-fit:cover;object-position:50% 28%;border:1px solid var(--rule);background:var(--paper-2)}
.person-name{font-family:var(--serif);font-size:20.5px;margin:0 0 4px;color:var(--ink);line-height:1.15}
/* grey, not orange. Orange uppercase outshouted the name it belongs to. */
.person-role{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0}
.person p{font-size:14px;line-height:1.55;margin:0}

/* ---------- individual bio pages --------------------------------------
   The old site had one long paragraph per person at /tim, /melissa and so
   on. These are the same facts, broken into points. Old URLs redirect in,
   see _worker.js. */
a.person{display:block;color:inherit}
.person-more{margin-top:14px;font-size:13px;font-weight:700;color:var(--orange-t);display:flex;align-items:center;gap:6px}
a.person:hover .person-more{gap:10px}
.person-more span{transition:transform .25s ease}
a.person:hover .person-more span{transform:translateX(3px)}

.bio-grid{display:grid;grid-template-columns:320px 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.bio-photo{border-radius:10px;overflow:hidden;border:1px solid var(--rule);background:var(--paper-2);box-shadow:0 16px 38px rgba(1,25,111,.1)}
.bio-photo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.bio-facts{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.bio-facts li{padding:13px 2px;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.5;color:var(--ink-2)}
.bio-facts b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.bio-role{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-t);margin:0 0 14px}
.bio-lede{font-size:clamp(16.5px,1.6vw,19px);line-height:1.62;color:var(--ink-2);margin:0 0 8px}
.bio-block{margin-top:clamp(30px,3.4vw,44px)}
.bio-block h2{font-size:clamp(18px,1.9vw,23px);margin-bottom:14px;max-width:none}
.bio-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--orange-t);margin-bottom:20px}
.bio-back:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){.bio-grid{grid-template-columns:1fr}.bio-photo{max-width:300px}}

/* ---------- publication card, the book ------------------------------- */
.pub-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:center}
.book{position:relative;display:block;background:var(--navy);border-radius:4px 8px 8px 4px;padding:clamp(26px,3vw,38px) clamp(24px,3vw,34px) clamp(26px,3vw,38px) clamp(34px,4vw,48px);color:#fff;
      box-shadow:0 20px 46px rgba(21,26,51,.26);max-width:430px;transition:transform .25s ease,box-shadow .25s ease}
.book::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--orange);border-radius:4px 0 0 4px}
.book::after{content:"";position:absolute;right:0;top:0;border-width:0 30px 30px 0;border-style:solid;border-color:transparent var(--paper) transparent transparent}
.book:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(21,26,51,.32)}
.book-lab{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-lt);margin:0 0 14px}
.book h3{color:#fff;margin-bottom:12px;max-width:16ch}
.book p{color:rgba(255,255,255,.72);font-size:14.5px}
.book-meta{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);font-size:12.5px;color:rgba(255,255,255,.6)}
.book-open{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;font-weight:700;color:var(--orange-lt)}

/* ---------- closing cta ----------------------------------------------- */
.end{background:var(--tint);border-top:1px solid rgba(226,95,17,.2)}
.end-in{text-align:center;max-width:660px;margin-inline:auto}
.end h2{margin-inline:auto}

/* ---------- footer ---------------------------------------------------- */
footer{background:var(--navy);color:rgba(255,255,255,.66);padding-block:clamp(38px,5vw,58px) 26px;font-size:14px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14)}
/* The lockup's own navy bar is the same colour as the footer, so it dissolved
   and the wordmark floated with no edge. A faint plate gives it a boundary.
   The plate lives on a wrapper, never on the img itself: padding on an image
   changes its own box ratio and reads as a stretched logo. */
.foot-logo-plate{display:inline-block;padding:8px 12px;border:1px solid rgba(255,255,255,.24);
  border-radius:5px;background:rgba(255,255,255,.05);line-height:0}
.foot-logo{height:34px;width:auto;max-width:230px;object-fit:contain;object-position:left center}
.foot-cols{display:flex;gap:clamp(26px,5vw,56px);flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-h{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.46);margin-bottom:3px}
.foot-col a:hover{color:var(--orange-lt)}
.social{display:flex;gap:10px;margin-top:18px}
.social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:5px;transition:background .2s,border-color .2s}
.social a:hover{background:var(--orange);border-color:var(--orange)}
.social svg{width:18px;height:18px;fill:#fff}
.foot-legal{margin:22px 0 0;font-size:12.5px;color:rgba(255,255,255,.44);max-width:80ch}
.foot-legal a{text-decoration:underline;text-underline-offset:2px}

/* ---------- interior page head ---------------------------------------- */
.page-head{padding-block:clamp(40px,6vw,76px) clamp(24px,3vw,40px)}
.page-head h1{font-size:clamp(30px,4.4vw,52px);max-width:22ch}

/* ---------- publications ----------------------------------------------
   The Issuu flipbook that used to live here is gone. Amreena asked for it
   removed and supplied the published PDF, and every piece has to be
   downloadable. Do not reintroduce an iframe reader. */
.pub-meta{font-size:13.5px;color:var(--ink-3);margin:0}

/* featured paper */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,58px);align-items:start}
.feat-cover{border-radius:8px;overflow:hidden;border:1px solid var(--rule);background:var(--paper-2);box-shadow:0 18px 44px rgba(1,25,111,.14)}
.feat-cover img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;display:block}
.feat h2{margin-bottom:10px}
.feat-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* the numbers, straight out of the paper. Two across because this sits under
   the cover in the left column, not across the full width. */
.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:22px;background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.fig{background:var(--paper);padding:18px 16px}
.fig b{display:block;font-family:var(--serif);font-size:clamp(21px,2.5vw,30px);line-height:1.05;color:var(--navy);letter-spacing:-.02em}
.fig span{display:block;margin-top:7px;font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.figs-src{margin-top:12px;font-size:12px;color:var(--ink-3);font-style:italic}

/* what is inside, the paper's own contents */
.toc{margin:0;padding:0;list-style:none}
.toc li{position:relative;padding:13px 0 13px 52px;border-top:1px solid var(--rule);font-size:15.5px;color:var(--ink-2);line-height:1.5}
.toc li:last-child{border-bottom:1px solid var(--rule)}
/* section numbers are the paper's own, not generated, so they live in markup */
.toc-n{position:absolute;left:0;top:15px;width:44px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-t)}
.toc li b{color:var(--ink);font-weight:700}

/* findings written out as real text, because a PDF is invisible to search */
.find{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px);margin-top:34px}
.find-item{padding-top:22px;border-top:2px solid var(--orange)}
.find-item h3{font-size:clamp(17px,1.8vw,21px);margin-bottom:9px}
.find-item p{font-size:14.5px}

/* the grid she asked for, to push out more pieces */
.pubs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,30px);margin-top:32px}
.pub-card{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--paper);transition:transform .25s ease,box-shadow .25s ease}
a.pub-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(1,25,111,.14)}
.pub-card img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;display:block;border-bottom:1px solid var(--rule)}
.pub-card-in{padding:20px;display:flex;flex-direction:column;flex:1}
.pub-card-lab{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-t);margin:0 0 10px}
.pub-card h3{font-size:19px;margin-bottom:8px}
.pub-card p{font-size:14px;margin:0}
.pub-card-foot{margin-top:auto;padding-top:16px;font-size:12.5px;color:var(--ink-3)}
/* Published pieces sitting below the white paper. Two columns rather than the
   three used for upcoming slots, so a single card does not float in a third of
   the row with two empty columns beside it. */
.also{margin-top:clamp(38px,5vw,58px)}
.pubs-2{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}
.also-note{padding:clamp(16px,2vw,24px) 0 0}
.also-note p{color:var(--ink-2);margin:0 0 14px}
.also-note p:last-child{margin-bottom:0}
@media(max-width:860px){.pubs-2{grid-template-columns:1fr}.also-note{padding-top:2px}}

/* slots stand in for pieces not published yet. Deliberately dashed so nobody
   mistakes them for real, finished cards. */
.pub-card.slot{border-style:dashed;border-color:var(--rule-2);background:transparent;box-shadow:none}
.pub-card.slot img{opacity:.4;filter:saturate(.35)}
.pub-card.slot .pub-card-lab{color:var(--ink-3)}
.pub-card.slot h3{color:var(--ink-3)}

.cite{margin-top:34px;border-left:3px solid var(--orange);background:var(--paper-2);padding:20px 22px;border-radius:0 5px 5px 0}
.cite-lab{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-t);margin:0 0 10px}
.cite-body{font-family:var(--serif);font-size:15.5px;line-height:1.6;color:var(--ink);margin:0;word-break:break-word}
.cite-note{margin:12px 0 0;font-size:12.5px;font-style:italic;color:var(--ink-3)}

/* ---------- form -------------------------------------------------------
   Posts to our own origin at /api/lead, handled by _worker.js, which
   forwards to hello@edbetter.com. The submit handler awaits a real 200
   before navigating. Never redirect on a timer, an earlier build on
   another project lost leads that way. */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:start}
.form-card{background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:clamp(22px,3vw,34px);box-shadow:0 18px 44px rgba(1,25,111,.08)}
.field{margin-bottom:18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink);margin-bottom:7px}
.field .req{color:var(--orange-t)}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--sans);font-size:15.5px;color:var(--ink);background:var(--white);
  border:1px solid var(--rule-2);border-radius:5px;padding:11px 13px;transition:border-color .18s,box-shadow .18s}
.field textarea{min-height:104px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(1,25,111,.13)}
.field input:invalid:not(:placeholder-shown){border-color:#B3261E}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:24px}
.form-note{font-size:12.5px;line-height:1.55;color:var(--ink-3);margin:16px 0 0}
.form-msg{display:none;margin-top:16px;padding:12px 14px;border-radius:5px;font-size:14px;line-height:1.5}
.form-msg.show{display:block}
.form-msg.err{background:#FCEBEA;border:1px solid #E5B4B0;color:#8C1D18}
.btn[aria-busy="true"]{opacity:.72;pointer-events:none}

/* the honeypot. Off screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* what to expect, beside the form */
.expect{margin:26px 0 0;padding:0;list-style:none;counter-reset:ex}
.expect li{counter-increment:ex;position:relative;padding:0 0 20px 46px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.expect li::before{content:counter(ex);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;
  background:var(--tint);color:var(--orange-t);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.expect li b{color:var(--ink)}

/* thank you page */
.thanks{min-height:52vh;display:flex;align-items:center}
.thanks-in{text-align:center;max-width:620px;margin-inline:auto}
.thanks-mark{width:62px;height:62px;margin:0 auto 24px;border-radius:50%;background:var(--tint);
  display:flex;align-items:center;justify-content:center}
.thanks-mark svg{width:28px;height:28px;stroke:var(--orange-t);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- legal prose ------------------------------------------------
   Ported verbatim from edbetter.com/terms-and-conditions. Wording is not
   ours to edit. Note the body says "EdBetter, Inc." and section 15 says
   "EdBetter, LLC." Both are preserved deliberately, because a legal entity
   name is Amreena's to correct, not ours. */
.legal{max-width:74ch}
.legal h2{font-size:clamp(20px,2.2vw,26px);margin:38px 0 12px;max-width:none}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:17px;margin:22px 0 8px}
.legal p{font-size:15.5px;line-height:1.72}
.legal ul{margin:12px 0 16px;padding:0;list-style:none}
.legal ul li{position:relative;padding-left:20px;margin-bottom:9px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.legal ul li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;background:var(--orange);border-radius:50%}
.legal strong{color:var(--ink)}
.legal a{color:var(--orange-t);text-decoration:underline;text-underline-offset:2px}
.legal-meta{font-size:13px;color:var(--ink-3);margin:0 0 8px}
.legal-addr{margin:12px 0 0;padding:16px 18px;background:var(--paper-2);border-radius:6px;font-size:15px;line-height:1.7;color:var(--ink-2)}

/* ---------- call to action treatment -----------------------------------
   Every "Request a demo" button carries .cta on top of .btn or .btn-acc.
   Two effects, both slow enough to read as considered rather than salesy:
     ::after  a sheen that sweeps across every few seconds
     ::before a light travelling around the edge
   Both are switched off under prefers-reduced-motion at the foot of this
   file. The edge needs @property so the angle can animate smoothly. */
@property --cta-a{syntax:'<angle>';initial-value:0deg;inherits:false}

.cta{position:relative;overflow:hidden;isolation:isolate}
.cta::after{
  content:"";position:absolute;top:0;left:-130%;width:58%;height:100%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:cta-sheen 4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes cta-sheen{0%,62%{left:-130%}100%{left:145%}}

/* Faster and brighter than the first pass, which was 7s and too faint to
   register. 2.5px of travelling light on a 3s loop, with a hot core so the
   leading edge actually reads. */
.cta::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2.5px;z-index:1;
  background:conic-gradient(from var(--cta-a),
    transparent 0deg 232deg,
    rgba(255,255,255,.45) 282deg,
    #ffffff 312deg,
    rgba(255,255,255,.45) 340deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;
  animation:cta-edge 3s linear infinite}
@keyframes cta-edge{to{--cta-a:360deg}}
/* pausing on hover stops it competing with the click */
.cta:hover::before{animation-duration:1.6s}
.cta:hover::after{animation-play-state:paused}

/* ---------- hover movement ---------------------------------------------
   One shared lift so the whole site responds the same way. */
.case,.person,.svc-item,.pr,.find-item,.fig,.pub-card,.book,.f-photo,.feat-cover{
  transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1)}
.case:hover,.pub-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(1,25,111,.14)}
.person:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(1,25,111,.13)}
.svc-item:hover,.pr:hover,.find-item:hover{transform:translateY(-3px)}
.fig:hover{transform:translateY(-2px)}
.feat-cover:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(1,25,111,.2)}
.f-photo:hover{transform:translateY(-4px)}
.pub-card.slot:hover{transform:none;box-shadow:none}
.strip-logos img{transition:transform .28s ease,filter .28s ease;filter:saturate(.9)}
.strip-logos img:hover{transform:translateY(-2px) scale(1.03);filter:saturate(1)}
.tick li,.f-cred li{transition:transform .2s ease}
.case:hover .tick li,.person:hover .tick li{transform:translateX(2px)}

/* ---------- the team frame ---------------------------------------------
   Cards travel through a framed strip. The track holds the six advisors
   twice so the loop is seamless, hence the -50% minus half a gap. Anything
   added to the first half must be added to the second half too. */
.marquee{position:relative;overflow:hidden;border:1px solid var(--rule);border-radius:10px;
  background:var(--paper);padding-block:26px;margin-top:34px}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:clamp(40px,7vw,96px);z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--paper) 12%,rgba(255,255,255,0))}
.marquee::after{right:0;background:linear-gradient(270deg,var(--paper) 12%,rgba(255,255,255,0))}
.marquee-track{display:flex;gap:20px;width:max-content;padding-inline:20px;animation:marquee 54s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee .person{width:326px;flex:0 0 auto;background:var(--paper-2)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 10px))}}
.marquee-note{margin:12px 2px 0;font-size:12.5px;color:var(--ink-3)}

/* ---------- blue hero --------------------------------------------------
   She liked the navy cover page of the review PDF and asked for the first
   block on the home page to carry it. Hero only, the trust strip below
   stays white, which the Maryland mark needs anyway. */
.hero-navy{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero-navy::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 88% 8%,rgba(200,85,5,.22),rgba(1,25,111,0) 60%)}
.hero-navy .wrap{position:relative;z-index:1}
.hero-navy .eyebrow{color:var(--orange-lt)}
.hero-navy h1{color:#fff}
.hero-navy .lede{color:rgba(255,255,255,.82)}
.hero-navy .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.hero-navy .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.6)}

/* ---------- trust bar, five marks -------------------------------------
   Commit and ESC Region 20 added per Amreena. Commit publish only a white
   logo, so their wordmark is recoloured to #002a4d, which is their OWN
   brand navy from their own stylesheet, not a value we picked. */
.strip-logos .lg-commit{height:26px}
.strip-logos .lg-esc20{height:38px}
.case-logos .lg-commit{height:19px}
.case-logos .lg-esc20{height:27px}

/* ---------- hover, made actually visible -------------------------------
   The first pass moved things 3px with no change of ground, which reads as
   nothing. Anything hoverable now also changes surface, so the eye has
   something to catch. */
.pr{padding:20px 16px 16px;margin-inline:-16px;border-radius:0 0 8px 8px;
  transition:transform .26s cubic-bezier(.4,0,.2,1),background .26s ease,box-shadow .26s ease,border-color .26s ease}
.pr:hover{transform:translateY(-6px);background:var(--tint);box-shadow:0 18px 38px rgba(1,25,111,.11)}

.find-item{padding:22px 16px 16px;margin-inline:-16px;border-radius:0 0 8px 8px;
  transition:transform .26s cubic-bezier(.4,0,.2,1),background .26s ease,box-shadow .26s ease}
.find-item:hover{transform:translateY(-6px);background:var(--tint);box-shadow:0 18px 38px rgba(1,25,111,.11)}

.book:hover{transform:translateY(-8px);box-shadow:0 32px 64px rgba(1,25,111,.34)}
.book::before{transition:width .26s ease}
.book:hover::before{width:18px}

.fig{transition:transform .24s ease,background .24s ease}
.fig:hover{transform:translateY(-4px);background:var(--tint)}

.toc li{transition:background .22s ease,padding-left .22s ease,color .22s ease;border-radius:6px}
.toc li:hover{background:var(--tint);padding-left:12px}

.expect li{transition:padding-left .22s ease}
.expect li:hover{padding-left:52px}

.feat-cover:hover{transform:translateY(-6px) scale(1.01)}

.case:hover{transform:translateY(-7px);box-shadow:0 26px 52px rgba(1,25,111,.16);border-color:rgba(200,85,5,.34)}
.case{transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s ease,border-color .26s ease}

.person:hover{transform:translateY(-6px);box-shadow:0 22px 42px rgba(1,25,111,.16);border-color:rgba(200,85,5,.34)}
.person{transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s ease,border-color .26s ease}

.pub-card:not(.slot):hover{transform:translateY(-7px);box-shadow:0 26px 52px rgba(1,25,111,.16)}

.cite{transition:border-color .24s ease,background .24s ease}
.cite:hover{border-color:var(--orange-t);background:var(--tint)}

.social a{transition:background .22s ease,border-color .22s ease,transform .22s ease}
.social a:hover{transform:translateY(-3px)}

.f-cred li,.tick li{transition:transform .2s ease,color .2s ease}
.f-cred li:hover,.tick li:hover{transform:translateX(4px)}

/* ---------- reveals --------------------------------------------------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

@media(max-width:980px){
  .find,.pubs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .pr-grid,.work,.svc,.bench-grid,.pub-grid{grid-template-columns:1fr}
  .f-grid,.feat,.form-grid{grid-template-columns:1fr}
  .f-photo{max-width:300px}
}
@media(max-width:480px){
  .field-row{grid-template-columns:1fr}
}
@media(max-width:620px){
  .find,.pubs{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .book,.book:hover{transform:none;transition:none}
  /* every motion added for polish comes off, the site still works */
  .cta::before,.cta::after{animation:none;display:none}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .marquee{overflow:visible}
  .marquee::before,.marquee::after{display:none}
  .case,.person,.svc-item,.pr,.find-item,.fig,.pub-card,.book,.f-photo,.feat-cover,
  .strip-logos img,.tick li,.f-cred li,.toc li,.expect li,.cite,.social a{transition:none}
  .case:hover,.pub-card:hover,.pub-card:not(.slot):hover,.person:hover,.svc-item:hover,
  .pr:hover,.find-item:hover,.fig:hover,.feat-cover:hover,.f-photo:hover,.book:hover,
  .strip-logos img:hover,.social a:hover,.tick li:hover,.f-cred li:hover{transform:none}
  .toc li:hover,.expect li:hover,.svc-item:hover{padding-left:inherit}
}