/* AnyPhD theme styles. Extracted from the approved design. */

/* ============================================================
   ANYPHD  ·  design tokens transferred from the Carefinz kit
   ============================================================ */
:root{
  --primary:#1A1A1A;
  --secondary:#083B5C;
  --text:#737373;
  --accent:#ADE25D;
  --accent-2:#89CB24;
  --white:#FFFFFF;
  --border:#C6D9E5;
  --bg-light:#F0F5F8;
  --blue-1:#0F6BA7;
  --blue-2:#0B5382;
  --blue-3:#009CFF;

  --wrap:1280px;
  --r:4px;
  --r-card:8px;
  --shadow-btn:0 5px 10px rgba(0,0,0,.15);
  --shadow-btn-h:0 2px 5px rgba(0,0,0,.15);
  --shadow-card:0 18px 44px -26px rgba(8,59,92,.32);
  --shadow-lift:0 28px 60px -28px rgba(8,59,92,.45);
  --ease:cubic-bezier(.22,.61,.36,1);

  --h1:clamp(1.9375rem,1.4973rem + 1.9565vw,3.0625rem);
  --h2:clamp(1.625rem,1.3071rem + 1.413vw,2.4375rem);
  --h3:clamp(1.3125rem,1.0679rem + 1.087vw,1.9375rem);
  --h4:clamp(1.1875rem,1.0408rem + .6522vw,1.5625rem);
  --h5:clamp(1rem,.9022rem + .4348vw,1.25rem);
  --body:clamp(.875rem,.8261rem + .2174vw,1rem);
  --medium:clamp(1rem,.9511rem + .2174vw,1.125rem);
  --small:clamp(.75rem,.7011rem + .2174vw,.875rem);
  --btn:clamp(.8125rem,.7636rem + .2174vw,.9375rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:120px}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:Manrope,system-ui,sans-serif;font-size:var(--body);
  line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none;transition:color .3s}
a:hover{color:var(--accent-2)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
p{margin:0}
h1,h2,h3,h4,h5{
  font-family:'Libre Franklin',sans-serif;color:var(--primary);margin:0;
  line-height:1.25;letter-spacing:-1px;font-weight:600;
}
h1{font-size:var(--h1);text-transform:capitalize}
h2{font-size:var(--h2);text-transform:capitalize}
h3{font-size:var(--h3);line-height:1.27;letter-spacing:-.8px}
h4{font-size:var(--h4);line-height:1.27;letter-spacing:-.5px;font-weight:500}
h5{font-size:var(--h5);line-height:1.3;letter-spacing:-.5px;font-weight:500}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:var(--primary)}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.sec{padding:100px 0}
.sec-light{background:var(--bg-light)}

/* A dotted world map behind an otherwise white section. It is carried as an alpha mask rather
   than a grey picture, so the dots take a brand colour and cost one small file. The negative
   z-index puts it above the section background but under everything in the section, which is why
   the quote cards sit on it cleanly; isolation keeps it from slipping behind the page itself. */
.sec-map{position:relative;isolation:isolate;overflow:hidden}
.sec-map::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(1180px,100%);aspect-ratio:1100/606;
  background:var(--secondary);opacity:.13;
  -webkit-mask:url(../img/world-dots.png) no-repeat center/contain;
  mask:url(../img/world-dots.png) no-repeat center/contain;
}
@supports not (mask-image:url(a.png)){
  /* no mask support, no backdrop — better a plain white section than a navy slab */
  .sec-map::before{display:none}
}
@media (max-width:1100px){
  /* Below three columns the cards stack and fill the middle of the section, leaving the centred
     map as a sliver between them. It moves up behind the heading, where the white space actually
     is, and is allowed past the section edges so the dots still read as a map on a phone. */
  .sec-map::before{top:56px;transform:translate(-50%,0);width:max(100%,560px)}
}

/* The brand mark: one word, and always lower-case "any", whatever the surrounding style
   does with letter-spacing or capitalisation. Inside a button it is also a flex item, so
   the gap meant for icons has to be pulled back to a word space. */
.bn{letter-spacing:normal;white-space:nowrap;text-transform:none}
.btn .bn{margin-left:-5px}
/* "any" is the lettering cut out of the logo itself, carried as an alpha mask and painted with
   currentColor. That way one file serves navy body text, white footer text and button labels
   alike.

   In the logo the script sits with its top flush against the top of PHD and stands 66% as tall,
   which is what makes the two words read as one lockup. Sizing it in em could not reproduce that,
   because the cap height of the surrounding text is 0.745em in Libre Franklin, 0.72em in Manrope
   and 0.63em in the Cormorant eyebrow, so "any" ended up a different distance below the capitals
   in each. The cap unit is the cap height of whatever face the text is set in, so the same three
   numbers hold everywhere. Older browsers fall back to em sized for a cap height of .735. */
.bn i{
  display:inline-block;width:2.2609em;height:1.0271em;vertical-align:-.2685em;
  overflow:hidden;text-indent:-100em;
  background-color:currentColor;
  -webkit-mask:url(../img/brand-any.png) no-repeat center/100% 100%;
  mask:url(../img/brand-any.png) no-repeat center/100% 100%;
}
@supports (height:1cap){
  .bn i{width:3.0761cap;height:1.3974cap;vertical-align:-.3653cap}
}
@supports not (mask-image:url(a.png)){
  /* very old browsers get the plain word back rather than an empty gap */
  .bn i{width:auto;height:auto;vertical-align:baseline;overflow:visible;text-indent:0;background:none;font-style:italic}
}
.head{max-width:760px;margin-bottom:56px}
.head.mid{margin-inline:auto;text-align:center}
.head h2{margin:10px 0 16px}
.head p{font-size:var(--medium)}

/* Cormorant italic eyebrow — the kit's H6 style */
.eyebrow{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:700;
  font-size:clamp(1.125rem,1.0761rem + .2174vw,1.25rem);line-height:1;
  color:var(--blue-1);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.head.mid .eyebrow::after{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}

/* ---------- buttons (kit: 4px radius, lime, shadow) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Libre Franklin',sans-serif;font-size:var(--btn);font-weight:600;
  text-transform:capitalize;line-height:1.2;padding:15px 28px;border-radius:var(--r);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s,border-color .3s;
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn-accent{background:var(--accent);color:var(--primary);box-shadow:var(--shadow-btn)}
.btn-accent:hover{background:var(--accent-2);color:var(--white);box-shadow:var(--shadow-btn-h)}
.btn-navy{background:var(--secondary);color:var(--white);box-shadow:var(--shadow-btn)}
.btn-navy:hover{background:var(--blue-2);color:var(--white);box-shadow:var(--shadow-btn-h)}
.btn-line{background:transparent;color:var(--primary);border:1px solid var(--border)}
.btn-line:hover{border-color:var(--secondary);background:var(--white);color:var(--secondary)}
.btn-line-w{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.4)}
.btn-line-w:hover{background:var(--white);color:var(--secondary);border-color:var(--white)}
.btn-sm{padding:11px 20px}
/* While a form is on its way. The ring is drawn in the button's own text colour, so it shows on a
   green button, a navy one and an outlined one without a rule for each. */
.btn.is-sending{cursor:default;transform:none}
.btn.is-sending:hover{transform:none}
.btn-spin{
  display:inline-block;width:14px;height:14px;margin-right:9px;vertical-align:-2px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;opacity:.85;
  animation:hbspin .7s linear infinite;
}
@media (prefers-reduced-motion:reduce){.btn-spin{animation-duration:2s}}

/* ============================================================
   TOPBAR + HEADER
   ============================================================ */
.topbar{background:var(--secondary);color:rgba(255,255,255,.8);font-size:var(--small)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0;flex-wrap:wrap}
.topbar ul{display:flex;gap:26px;flex-wrap:wrap}
.topbar li{display:flex;align-items:center;gap:8px}
.topbar svg{width:14px;height:14px;color:var(--accent);flex:none}
.topbar a{color:inherit}
.topbar a:hover{color:var(--accent)}
.socials{display:flex;gap:8px}
.socials a{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;transition:.3s var(--ease);
}
.socials a:hover{background:var(--accent);color:var(--primary);transform:translateY(-2px)}
.socials svg{width:13px;height:13px}

.header{background:var(--white);position:sticky;top:0;z-index:80;transition:box-shadow .3s,padding .3s}
.header.stuck{box-shadow:0 6px 26px -14px rgba(8,59,92,.35)}
.nav{display:flex;align-items:center;gap:28px;padding:12px 0}
/* The full lockup, with the line under the mark set as type rather than baked into the picture:
   at the size a header allows, the words in the artwork would come out around 7px tall and read as
   a grey smudge. As text they stay sharp, and they can step aside on a phone. */
.logo{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1}
.logo img{height:46px;width:auto;display:block}
.logo-tag{
  font-family:'Libre Franklin',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.002em;color:#1B1C1E;white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links>li{position:relative}
/* the plain tabs and the ones that open a menu have to be indistinguishable */
.nav-links>li>a,.nav-links>li>.nav-top{
  display:flex;align-items:center;gap:5px;padding:10px 14px;border-radius:var(--r);
  font-family:'Libre Franklin',sans-serif;font-size:var(--body);font-weight:600;
  color:var(--primary);position:relative;background:none;border:0;cursor:pointer;
  line-height:1.2;
}
.nav-links>li>a::after,.nav-links>li>.nav-top::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-links>li>a:hover::after,.nav-links>li>.nav-top:hover::after,
.has-menu.open>.nav-top::after{transform:scaleX(1)}
.nav-caret{width:12px;height:12px;flex:none;transition:transform .3s var(--ease)}
.has-menu.open>.nav-top .nav-caret{transform:rotate(180deg)}

/* The panel is opened by a click, which is the only interaction that also works on a
   phone or a tablet. Hover is layered on top for a mouse, and the pad above the panel
   keeps that hover alive while the pointer crosses the gap. */
.submenu{
  position:absolute;top:100%;left:0;min-width:236px;padding:8px;margin-top:6px;
  background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow-lift);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
  z-index:90;
}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.has-menu.open>.submenu,.has-menu:focus-within>.submenu{opacity:1;visibility:visible;transform:none}
@media (hover:hover) and (pointer:fine){
  .has-menu:hover>.submenu{opacity:1;visibility:visible;transform:none}
  .has-menu:hover>.nav-top .nav-caret{transform:rotate(180deg)}
}
.submenu a{
  display:block;padding:9px 12px;border-radius:var(--r);
  font-family:'Libre Franklin',sans-serif;font-size:14px;font-weight:500;color:var(--primary);
  white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease);
}
.submenu a:hover,.submenu a:focus-visible{background:var(--bg-light);color:var(--secondary)}
.nav-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:var(--r);place-items:center}
.burger span{display:block;width:18px;height:2px;background:var(--secondary);margin:3px 0;transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--bg-light);position:relative;overflow:hidden;padding:84px 0 96px}
.hero::after{
  content:"";position:absolute;left:-120px;bottom:-150px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(15,107,167,.14),transparent 68%);
}
.hero-in{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero-in>*{min-width:0}
.hero h1{margin:14px 0 20px;text-transform:none}
.hero-lead{font-size:var(--medium);max-width:56ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* hero visual */
/* The navy card walks the visitor through a short brief rather than showing a blank form: three
   questions, then a drafted paragraph they can send or copy. The long form lives further down. */
.hero-card{
  background:linear-gradient(160deg,var(--secondary),var(--blue-2));
  border-radius:var(--r-card);padding:24px 24px 26px;color:#fff;position:relative;
  box-shadow:var(--shadow-lift);max-width:400px;margin-left:auto;
}
.hc-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.hc-top b{font-family:'Libre Franklin',sans-serif;font-size:var(--body);font-weight:600}
.hc-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--accent)}
.hc-live i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.2s infinite;font-style:normal}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(173,226,93,.6)}70%{box-shadow:0 0 0 10px rgba(173,226,93,0)}100%{box-shadow:0 0 0 0 rgba(173,226,93,0)}}
.hc-off{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the brief builder inside the card */
@keyframes qfade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hb-meta{
  font-family:'Libre Franklin',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:7px;
}
.hb-bar{height:3px;background:rgba(255,255,255,.16);border-radius:99px;overflow:hidden;margin-bottom:20px}
.hb-bar i{
  display:block;height:100%;width:33.33%;border-radius:99px;
  background:var(--accent);transition:width .45s var(--ease);
}
.hb-step{display:none}
/* the floor keeps the card from resizing under the cursor as the visitor moves between steps */
.hb-step.on{display:block;min-height:168px;animation:qfade .42s var(--ease)}
.hb-q{
  margin:0 0 13px;font-family:'Libre Franklin',sans-serif;font-size:15px;font-weight:600;
  color:#fff;outline:none;
}
.hb-pills{display:flex;flex-wrap:wrap;gap:8px}
.hb-pill{
  padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.11);
  color:rgba(255,255,255,.88);font-size:12.5px;font-weight:600;transition:.25s var(--ease);
}
.hb-pill:hover{background:rgba(255,255,255,.22);color:#fff}
.hb-pill[aria-pressed="true"]{background:var(--accent);color:var(--primary)}
.hb-in{
  width:100%;background:var(--white);border:0;border-radius:var(--r);
  padding:11px 14px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--primary);
  box-shadow:0 10px 24px -18px rgba(0,0,0,.7);transition:box-shadow .3s var(--ease);
}
textarea.hb-in{resize:vertical;min-height:58px;line-height:1.45}
.hb-in::placeholder{color:#9AAAB6}
.hb-in:focus{outline:none;box-shadow:0 0 0 3px var(--accent)}
.hb-tip{margin:9px 0 0;font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.6)}
.hb-sub{
  margin:15px 0 9px;font-family:'Libre Franklin',sans-serif;font-size:12px;font-weight:600;
  color:rgba(255,255,255,.72);
}
.hb-two{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}
.hb-sub + .hb-two{margin-top:0}
.hb-two + .hb-in{margin-top:9px}
/* Why an optional field is there at all. Without this line a number looks required. */
.hb-why{margin:6px 0 0;font-size:11px;line-height:1.5;color:rgba(255,255,255,.58)}
/* The field is white while the card around it is navy, so the picker needs the light scheme. */
input.hb-in[type="date"]{color-scheme:light;font-size:13px;padding-right:10px}
/* Editable, because a rewritten brief the visitor cannot correct is worse than none. */
.hb-out{
  display:block;width:100%;border:0;border-left:3px solid var(--accent);
  background:rgba(255,255,255,.1);border-radius:var(--r);padding:13px 15px;
  font-family:inherit;font-size:13px;line-height:1.62;color:rgba(255,255,255,.92);
  min-height:132px;max-height:200px;resize:vertical;transition:opacity .3s;
}
.hb-out:focus{outline:none;box-shadow:0 0 0 3px var(--accent)}
.hb-out[readonly]{opacity:.62}
.hb-note{
  display:flex;align-items:flex-start;gap:7px;margin:9px 0 0;
  font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.6);
}
.hb-note[hidden]{display:none}
.hb-note b{color:rgba(255,255,255,.86);font-weight:700}
.hb-spin{
  width:11px;height:11px;flex:none;margin-top:2px;border-radius:50%;
  border:2px solid rgba(255,255,255,.26);border-top-color:var(--accent);
  animation:hbspin .7s linear infinite;
}
.hb-spin[hidden]{display:none}
@keyframes hbspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hb-spin{animation:none}}
.hb-nav{
  display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:15px;
  border-top:1px solid rgba(255,255,255,.18);
}
.hb-back,.hb-copy{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:rgba(255,255,255,.72);transition:color .3s;
}
.hb-back:hover,.hb-copy:hover{color:var(--accent)}
.hb-back svg{width:13px;height:13px}
.hb-nav .btn{margin-left:auto}
.hb-nav .btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
/* the attribute has to beat the display set by .btn and by the flex children above */
.hb-back[hidden],.hb-copy[hidden],.hb-nav .btn[hidden]{display:none}
.hb-said{font-size:11.5px;font-weight:600;color:var(--accent);opacity:0;transition:opacity .3s}
.hb-said.on{opacity:1}
.hc-note{
  margin-bottom:14px;padding:11px 14px;border-radius:var(--r);font-size:13px;
  background:rgba(173,226,93,.16);color:#fff;border-left:3px solid var(--accent);
}
.hc-note b{display:block;font-family:'Libre Franklin',sans-serif;margin-bottom:3px}
.hc-note.bad{background:rgba(255,140,140,.18);border-left-color:#FF8C8C}
.hc-fine{margin:12px 0 0;font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.6)}
.hc-fine a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:2px}
.hc-fine a:hover{color:var(--accent)}

/* ============================================================
   TRUSTED BY
   ============================================================ */
.trust{padding:72px 0;border-bottom:1px solid var(--border)}
.trust-head{max-width:700px;margin:0 auto 48px;text-align:center}
.trust-lab{
  font-family:'Libre Franklin',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue-1);margin-bottom:14px;display:block;
}
.trust p{font-size:var(--medium)}
.trust p b{color:var(--primary);white-space:nowrap}

/* A quiet band of client wordmarks: no boxes, no borders, everything desaturated so the row
   reads as texture rather than as eight competing logos. Each mark keeps its own typography. */
.marks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:30px 64px}
.mark{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:58px;color:#9AA7B2;filter:grayscale(1);
  transition:color .35s var(--ease),transform .35s var(--ease);
}
.mark:hover{color:var(--secondary);transform:translateY(-3px)}
.mark-name{font-size:27px;line-height:1.05;white-space:nowrap}
.mark-sub{
  font-family:'Libre Franklin',sans-serif;font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;opacity:.75;
}
/* Each wordmark is lettered differently, the way real logotypes are. */
.mk-pwc .mark-name{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.035em;font-size:32px}
.mk-del .mark-name{font-family:'Libre Franklin',sans-serif;font-weight:600;letter-spacing:-.015em}
.mk-del .mark-name em{font-style:normal;font-size:1.15em;line-height:0}
.mk-nes .mark-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:700;font-size:33px}
.mk-hal .mark-name{font-family:'Libre Franklin',sans-serif;font-weight:300;letter-spacing:.34em;font-size:20px}
.mk-mer .mark-name{font-family:'Manrope',sans-serif;font-weight:700;letter-spacing:.01em;font-size:25px}

/* ============================================================
   NEEDS CHIPS
   ============================================================ */
.needs-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.need{
  display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;
  border:1px solid var(--border);background:var(--white);color:var(--primary);
  font-family:'Libre Franklin',sans-serif;font-weight:600;font-size:var(--btn);
  transition:.32s var(--ease);cursor:pointer;
}
.need svg{width:14px;height:14px;color:var(--accent-2);flex:none;transition:transform .32s var(--ease)}
.need:hover{background:var(--secondary);border-color:var(--secondary);color:#fff;transform:translateY(-3px);box-shadow:var(--shadow-card)}
.need:hover svg{color:var(--accent);transform:translateX(3px)}
.needs-note{text-align:center;margin-top:30px;font-size:var(--small)}

/* ============================================================
   DIFFERENCE / WHY  (split blocks)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split>*{min-width:0}
.stack{display:grid;gap:18px}
.stack p{font-size:var(--medium)}
/* The lockup sits above the box rather than inside it, so the section leads with the mark and the
   box stays a plain list. The artwork is stored on white, which is the colour of this section, so
   it needs no cut-out to blend. */
.serve-col{display:grid;gap:26px;justify-items:center}
.serve-col>.serve{width:100%}
.serve-logo{width:min(360px,80%);height:auto}
/* a box with no rules in it: the rows are separated by their own white cards */
.serve{
  background:linear-gradient(180deg,#F0F5F8 0%,rgba(240,245,248,.4) 100%);
  border:0;border-radius:var(--r-card);padding:34px 32px 30px;
  box-shadow:0 20px 46px -38px rgba(8,59,92,.65);
}
.serve h3{margin-bottom:20px}
.serve li{
  display:flex;align-items:center;gap:12px;padding:13px 16px;margin-bottom:8px;
  background:var(--white);border-radius:var(--r);box-shadow:0 1px 2px rgba(8,59,92,.05);
  font-family:'Libre Franklin',sans-serif;font-weight:500;color:var(--primary);font-size:var(--small);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.serve li:last-child{margin-bottom:0}
.serve li:hover{transform:translateX(4px);box-shadow:0 8px 20px -14px rgba(8,59,92,.6)}
.serve svg{width:16px;height:16px;color:var(--accent-2);flex:none}
.diff-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.diff-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);padding:26px 24px;
  transition:.4s var(--ease);
}
.diff-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card);border-color:transparent}
.diff-ico{
  width:48px;height:48px;border-radius:var(--r-card);display:grid;place-items:center;margin-bottom:16px;
  background:rgba(15,107,167,.1);color:var(--blue-1);transition:.4s var(--ease);
}
.diff-card:hover .diff-ico{background:var(--accent);color:var(--primary)}
.diff-ico svg{width:22px;height:22px}
.diff-card h5{margin-bottom:8px}
.diff-card p{font-size:var(--small)}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* the tint fading downwards, borderless, is how the cards are drawn in the theme */
.step{
  background:linear-gradient(180deg,#F0F5F8 0%,rgba(240,245,248,.21) 100%);
  border:0;border-radius:var(--r-card);
  padding:36px 30px 34px;position:relative;overflow:hidden;transition:.4s var(--ease);
}
.step::after{
  content:attr(data-n);position:absolute;right:14px;bottom:-18px;
  font-family:'Libre Franklin',sans-serif;font-weight:700;font-size:110px;line-height:1;
  color:var(--secondary);opacity:.07;transition:opacity .4s var(--ease);
}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.step:hover::after{opacity:.12}
.step h4{margin-bottom:10px}
.step p{position:relative;z-index:1}

/* ============================================================
   SERVICES  ·  hover-reveal tiles
   ============================================================ */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* borderless: a plain white card lifted off the tint by its shadow alone */
.svc{
  position:relative;border-radius:var(--r-card);z-index:1;border:0;background:var(--white);
  box-shadow:0 2px 3px rgba(8,59,92,.045),0 24px 46px -32px rgba(8,59,92,.55);
  height:430px;cursor:pointer;text-align:left;width:100%;display:block;
  transition:box-shadow .4s var(--ease),transform .4s var(--ease);
}
/* an accent rule that draws itself across the top on hover */
.svc-face::before{
  content:"";position:absolute;left:30px;top:0;height:3px;width:38px;border-radius:0 0 3px 3px;
  background:var(--accent);transition:width .5s var(--ease),background .4s;
}
.svc:hover,.svc:focus-within{
  z-index:30;transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(8,59,92,.05),var(--shadow-lift);outline:none;
}
.svc:hover .svc-face::before,.svc:focus-within .svc-face::before{
  width:calc(100% - 60px);background:var(--accent-2);
}
.svc:focus-visible{box-shadow:0 0 0 3px var(--accent),var(--shadow-lift)}
.svc-face{padding:34px 30px;display:flex;flex-direction:column;height:100%}
.svc-ico{
  width:56px;height:56px;border-radius:var(--r-card);display:grid;place-items:center;margin-bottom:22px;
  background:linear-gradient(145deg,var(--blue-2),var(--secondary));
  box-shadow:0 8px 18px -10px rgba(8,59,92,.75);
  color:#fff;transition:.4s var(--ease);flex:none;
}
.svc:hover .svc-ico{background:var(--accent);color:var(--primary);transform:rotate(-6deg)}
.svc-ico svg{width:26px;height:26px}
.svc-face h3{font-size:var(--h5);margin-bottom:12px}
.svc-face>p{font-size:var(--small);flex:1}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 18px}
.svc-tags span{
  font-size:11.5px;padding:5px 11px;border-radius:999px;background:var(--white);
  box-shadow:0 1px 2px rgba(8,59,92,.08);
  color:var(--blue-2);font-weight:600;font-family:'Libre Franklin',sans-serif;
}
.svc-more{
  display:flex;align-items:center;justify-content:flex-end;gap:12px;
  padding-top:16px;border-top:1px solid rgba(8,59,92,.09);
  font-family:'Libre Franklin',sans-serif;font-weight:600;font-size:var(--btn);color:var(--secondary);
}
.svc-more i{
  width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--primary);
  display:grid;place-items:center;font-style:normal;transition:.4s var(--ease);flex:none;
}
.svc:hover .svc-more i{transform:rotate(45deg)}
.svc-more svg{width:14px;height:14px}

/* the reveal panel — expands wider than the tile so the whole list fits */
.svc-panel{
  position:absolute;top:0;left:0;width:calc(200% + 24px);min-height:100%;max-height:82vh;
  background:linear-gradient(165deg,var(--secondary),var(--blue-2));
  border-radius:var(--r-card);box-shadow:var(--shadow-lift);
  color:rgba(255,255,255,.86);padding:30px 30px 24px;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
  display:flex;flex-direction:column;
}
.svc:hover .svc-panel,.svc:focus-within .svc-panel{opacity:1;visibility:visible;transform:none}
.svc-panel h4{color:#fff;font-size:var(--h5);margin-bottom:16px}
.svc-list{
  columns:2;column-gap:34px;overflow-y:auto;flex:1;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:var(--accent) rgba(255,255,255,.14);
}
.svc-list::-webkit-scrollbar{width:6px}
.svc-list::-webkit-scrollbar-track{background:rgba(255,255,255,.12);border-radius:99px}
.svc-list::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px}
.svc-list li{
  display:flex;gap:10px;align-items:flex-start;font-size:13.2px;line-height:1.5;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08);
  break-inside:avoid;-webkit-column-break-inside:avoid;
}
.svc-list li::before{
  content:"";width:6px;height:6px;border-radius:1px;background:var(--accent);flex:none;margin-top:7px;
}
.svc-hint{
  margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);
  font-size:11.5px;color:rgba(255,255,255,.6);
  display:flex;align-items:center;gap:8px;
}
.svc-hint svg{width:13px;height:13px;color:var(--accent);flex:none}
/* tiles in the right-hand column open leftwards so the flyout stays in the grid */
@media (min-width:1101px){ .svc:nth-child(3n) .svc-panel{left:auto;right:0} }
@media (min-width:761px) and (max-width:1100px){ .svc:nth-child(2n) .svc-panel{left:auto;right:0} }
/* touch devices have no hover, so the tile opens the modal instead */
.on-touch{display:none}
@media (hover:none){
  .svc-panel{display:none}
  .on-hover{display:none}
  .on-touch{display:inline}
}

/* modal */
.modal{
  position:fixed;inset:0;z-index:200;display:none;padding:24px;
  align-items:center;justify-content:center;
}
.modal.on{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(8,59,92,.62);backdrop-filter:blur(3px)}
.modal-box{
  position:relative;background:var(--white);border-radius:var(--r-card);
  width:min(100%,720px);max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);animation:pop .35s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.modal-top{
  padding:26px 28px;border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
}
.modal-top h3{font-size:var(--h4)}
.modal-x{
  width:38px;height:38px;border-radius:50%;background:var(--bg-light);display:grid;place-items:center;
  color:var(--secondary);flex:none;transition:.3s var(--ease);
}
.modal-x:hover{background:var(--secondary);color:#fff;transform:rotate(90deg)}
.modal-x svg{width:16px;height:16px}
.modal-body{padding:24px 28px;overflow-y:auto}
.modal-body ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.modal-body li{
  display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;
  padding:8px 0;border-bottom:1px solid var(--bg-light);color:var(--primary);
}
.modal-body li svg{width:15px;height:15px;color:var(--accent-2);flex:none;margin-top:3px}
.modal-foot{padding:20px 28px;border-top:1px solid var(--border);display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.modal-foot p{font-size:var(--small)}

/* ============================================================
   MARQUEE  ·  toolchain
   ============================================================ */
.mq-sec{padding:74px 0;border-block:1px solid var(--border);overflow:hidden}
.mq-lab{
  display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:30px;
  font-family:'Libre Franklin',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue-1);
}
.mq-lab::before,.mq-lab::after{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.mq{overflow:hidden;margin-bottom:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:12px;width:max-content;animation:slide 60s linear infinite}
.mq-track.rev{animation-direction:reverse}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.mq-track span{
  padding:9px 20px;border:1px solid var(--border);border-radius:999px;background:var(--white);
  font-family:'Libre Franklin',sans-serif;font-size:13.5px;font-weight:600;color:var(--secondary);
  white-space:nowrap;transition:.3s var(--ease);
}
.mq-track span:hover{background:var(--accent);border-color:var(--accent);color:var(--primary)}

/* ============================================================
   STATS BAND
   ============================================================ */
.band{background:linear-gradient(120deg,var(--secondary),var(--blue-2));color:#fff;padding:74px 0;position:relative;overflow:hidden}
.band::before{
  content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(173,226,93,.18),transparent 68%);
}
.band-in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;position:relative;z-index:1}
.band h3{font-family:'Libre Franklin',sans-serif;font-size:clamp(2rem,3.4vw,2.9rem);color:var(--accent);letter-spacing:-1.5px}
.band p{margin-top:6px;font-size:var(--small);color:rgba(255,255,255,.78);text-transform:uppercase;letter-spacing:.12em}

/* ============================================================
   EDITORS
   ============================================================ */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.person{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);
  padding:32px 24px;text-align:center;transition:.4s var(--ease);
}
.person:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:transparent}
.ava{
  width:96px;height:96px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;
  font-family:'Libre Franklin',sans-serif;font-weight:600;font-size:28px;color:#fff;letter-spacing:-1px;
  transition:transform .4s var(--ease);
}
.person:hover .ava{transform:scale(1.05)}
/* photographic avatars: the portraits are pre-masked to a circle, and the ring keeps the
   one shot with a white studio background from bleeding into the white card */
img.ava{
  display:block;object-fit:cover;background:var(--bg-light);
  box-shadow:0 0 0 1px var(--border),0 12px 26px -16px rgba(8,59,92,.75);
}
.ava.a1{background:linear-gradient(145deg,#0F6BA7,#009CFF)}
.ava.a2{background:linear-gradient(145deg,#0B5382,#0F6BA7)}
.ava.a3{background:linear-gradient(145deg,#89CB24,#0F6BA7)}
.ava.a4{background:linear-gradient(145deg,#083B5C,#0B5382)}
.person h4{font-size:var(--h5);margin-bottom:6px}
.person .uni{
  font-family:'Libre Franklin',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-2);display:block;margin-bottom:14px;
}
.person p{font-size:var(--small)}
.person-links{display:flex;gap:8px;justify-content:center;margin-top:18px}
.person-links a{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-light);color:var(--blue-1);transition:.3s var(--ease);
}
.person-links a:hover{background:var(--accent);color:var(--primary);transform:translateY(-3px)}
.person-links svg{width:15px;height:15px}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote{
  background:var(--white);border:1px solid var(--border);border-left:4px solid var(--blue-1);
  border-radius:var(--r-card);padding:30px 28px;display:flex;flex-direction:column;gap:16px;
  transition:.4s var(--ease);
}
.quote:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-left-color:var(--accent)}
.stars{display:flex;gap:3px;color:var(--accent-2)}
.stars svg{width:15px;height:15px}
.quote p{color:var(--primary);flex:1;font-size:var(--body)}
.quote-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding-top:14px;border-top:1px solid var(--border);
}
.quote-by{font-family:'Libre Franklin',sans-serif;color:var(--text);font-size:15px;line-height:1.45}
.quote-by b{display:block;font-weight:600;color:var(--secondary);font-size:var(--body)}
/* The pale quote mark sitting in the bottom corner of every card, traced off the theme's own: a
   chunky geometric pair rather than a serif comma, and in the same #C6D9E5 the theme uses, which
   the palette already carries as the border colour. It is decoration rather than punctuation,
   which is why the sentence no longer carries quote marks of its own and why this is hidden from
   screen readers. Drawn rather than typed: a text quote glyph inks at about a fifth of its font
   size, so matching this at 40px would mean setting it at 200px and fighting the line box. */
.quote-mark{
  flex:none;width:40px;height:auto;color:var(--border);
  transition:color .4s var(--ease);
}
.quote:hover .quote-mark{color:var(--blue-1)}

/* ============================================================
   CTA
   ============================================================ */
.cta{background:var(--bg-light);text-align:center;padding:96px 0}
.cta h2{margin:12px auto 16px;max-width:20ch;text-transform:none}
.cta p{max-width:62ch;margin-inline:auto;font-size:var(--medium)}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--secondary);color:rgba(255,255,255,.72);padding:76px 0 0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.25fr;gap:44px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-logo{display:inline-block;margin-bottom:22px}
.foot-logo img{height:62px;width:auto}
.foot-about p{font-size:var(--small);max-width:38ch}
.footer h5{color:#fff;font-family:'Libre Franklin',sans-serif;font-size:var(--body);font-weight:600;margin-bottom:20px;letter-spacing:0}
.foot-col li{margin-bottom:11px}
.foot-col a{color:rgba(255,255,255,.72);font-size:var(--small)}
.foot-col a:hover{color:var(--accent);padding-left:4px;display:inline-block;transition:.3s var(--ease)}
.foot-contact li{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;font-size:var(--small)}
.foot-contact svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:3px}
.foot-contact a{color:inherit}
.foot-contact a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0;font-size:var(--small)}
.foot-bottom a{color:rgba(255,255,255,.72)}
.foot-bottom a:hover{color:var(--accent)}

/* ============================================================
   REVEAL
   ============================================================ */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .mq-track{animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   PROMISE TILES  —  straddle the seam below the hero
   ============================================================ */
/* the pull-up is half the tile's rendered height, so the row sits astride the hero edge */
.promise-wrap{position:relative;z-index:5;margin-top:-93px}
.promise{
  display:grid;grid-template-columns:repeat(3,1fr);background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);overflow:hidden;
}
.promise-item{display:flex;gap:16px;padding:30px 28px;transition:background .3s var(--ease)}
.promise-item+.promise-item{border-left:1px solid var(--border)}
.promise-item:hover{background:var(--bg-light)}
.promise-ico{
  flex:none;width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--bg-light);color:var(--blue-1);transition:.3s var(--ease);
}
.promise-item:hover .promise-ico{background:var(--secondary);color:var(--accent)}
.promise-ico svg{width:22px;height:22px}
.promise-item h5{margin-bottom:7px}
.promise-item p{font-size:var(--small)}

/* ============================================================
   NAVY SECTION
   ============================================================ */
/* A dark band used to lift a section out of the run of white ones. The tinted circles keep the
   navy from reading as a flat slab at full width. */
.navy{
  background:linear-gradient(125deg,#052436,var(--secondary) 46%,var(--blue-2));
  color:#fff;position:relative;overflow:hidden;
}
.navy::before{
  content:'';position:absolute;inset:0;opacity:.35;
  background:radial-gradient(circle at 18% 22%,rgba(173,226,93,.20),transparent 42%),
             radial-gradient(circle at 84% 78%,rgba(0,156,255,.24),transparent 46%);
}
.navy>.wrap{position:relative;z-index:1}
.navy .eyebrow{color:var(--accent)}
.navy h2{color:#fff}
.navy .head p{color:rgba(255,255,255,.78)}

/* ============================================================
   COMMITMENT
   ============================================================ */
.vow-state{
  max-width:900px;margin:0 auto 48px;text-align:center;
  font-family:'Libre Franklin',sans-serif;font-size:var(--h4);font-weight:600;
  color:var(--primary);letter-spacing:-.5px;line-height:1.4;
}
.vow-state b{color:var(--accent-2)}
.vow-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vow-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);
  padding:34px 32px;transition:.4s var(--ease);
}
.vow-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:transparent}
.vow-card h4{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.vow-badge{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
}
.vow-badge svg{width:17px;height:17px}
.vow-card.yes .vow-badge{background:rgba(137,203,36,.16);color:#4C7C10}
.vow-card.no  .vow-badge{background:rgba(184,74,66,.12);color:#B04A42}
.vow-list li{display:flex;gap:12px;align-items:flex-start;font-size:var(--small)}
.vow-list li+li{margin-top:14px;padding-top:14px;border-top:1px solid var(--bg-light)}
.vow-list .ic{flex:none;margin-top:3px;width:16px;height:16px}
.vow-card.yes .ic{color:#6FA81C}
.vow-card.no  .ic{color:#B04A42}

/* ============================================================
   FAQs — used by the FAQs page template, not the front page
   ============================================================ */
/* The accordion is a <details> element, so opening, closing, keyboard control and screen-reader
   announcement all come from the browser and the page needs no script at all. What is styled here
   is only the appearance: the native marker is removed and replaced with the same chevron the
   header menus use. */
.faq-groups{display:grid;gap:64px;max-width:880px;margin-inline:auto}
.faq-group>h3{
  margin-bottom:8px;padding-bottom:16px;border-bottom:2px solid var(--secondary);
  font-size:var(--h4);letter-spacing:-.5px;
}
.acc{border-bottom:1px solid var(--border)}
.acc-q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:24px 2px;cursor:pointer;list-style:none;
  font-family:'Libre Franklin',sans-serif;font-size:var(--body);font-weight:600;
  color:var(--primary);transition:color .3s var(--ease);
}
.acc-q::-webkit-details-marker{display:none}
.acc-q:hover,.acc[open]>.acc-q{color:var(--secondary)}
.acc-q:focus-visible{outline:2px solid var(--blue-1);outline-offset:3px;border-radius:var(--r)}
.acc-ic{
  flex:none;width:20px;height:20px;margin-top:2px;color:var(--blue-1);
  transition:transform .3s var(--ease);
}
.acc[open]>.acc-q .acc-ic{transform:rotate(180deg)}
.acc-a p{padding:0 56px 26px 2px;color:var(--text);font-size:var(--small)}
.acc-a a{color:var(--secondary);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.acc-a a:hover{color:var(--blue-1)}
@media (prefers-reduced-motion:no-preference){
  .acc[open] .acc-a{animation:accIn .32s var(--ease)}
}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}}
.faq-cta{
  max-width:880px;margin:72px auto 0;padding:44px 40px;text-align:center;
  background:var(--bg-light);border-radius:var(--r-card);
}
.faq-cta h3{margin-bottom:10px;letter-spacing:-.5px}
.faq-cta p{color:var(--text);margin-bottom:26px}
.faq-cta-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
/* buttons capitalise every word, which is wrong for an address */
.faq-cta-btns .btn-line{text-transform:none}
@media (max-width:760px){
  .faq-groups{gap:48px}
  /* the room kept clear for the chevron on a wide screen is wasted on a phone */
  .acc-a p{padding-right:10px}
  .faq-cta{margin-top:52px;padding:34px 22px}
  .faq-cta-btns .btn{width:100%}
}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
/* A button that follows the page and a panel that writes the first message. The panel is a
   composer, not a chat window: nothing arrives back here, so it says as much rather than
   pretending to be a live conversation and leaving someone waiting in it. WhatsApp's own green is
   used deliberately -- the mark is only recognised in that colour. */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.wa{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;
  align-items:flex-end;gap:14px}
.wa-fab{
  position:relative;width:58px;height:58px;border:0;border-radius:50%;cursor:pointer;
  background:#25D366;color:#fff;box-shadow:0 12px 26px -10px rgba(2,18,29,.5),0 2px 6px rgba(2,18,29,.2);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.wa-fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 18px 34px -12px rgba(2,18,29,.55)}
.wa-fab svg{position:absolute;inset:0;width:32px;height:32px;margin:auto;transition:opacity .25s var(--ease),transform .3s var(--ease)}
.wa-shut{opacity:0;transform:rotate(-40deg)}
.wa.on .wa-mark{opacity:0;transform:rotate(40deg)}
.wa.on .wa-shut{opacity:1;transform:none}
/* A single ring, once every few seconds -- enough to be noticed, not enough to nag. It stops for
   anyone who has asked their system for less movement. */
.wa-fab::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:waRing 3.4s var(--ease) infinite;
}
.wa.on .wa-fab::after{display:none}
@keyframes waRing{
  0%{opacity:.55;transform:scale(1)}
  55%,100%{opacity:0;transform:scale(1.65)}
}
@media (prefers-reduced-motion:reduce){.wa-fab::after{animation:none}}

.wa-panel{
  width:320px;background:#fff;border-radius:20px;overflow:hidden;color:var(--text);
  box-shadow:0 30px 60px -22px rgba(2,18,29,.55),0 2px 8px rgba(2,18,29,.18);
  animation:waIn .32s var(--ease) both;
}
.wa-panel[hidden]{display:none}
@keyframes waIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
.wa-top{display:flex;align-items:center;gap:11px;padding:14px 14px 14px 16px;background:#075E54;color:#fff}
.wa-ava{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:#25D366;color:#fff;
}
.wa-ava svg{width:23px;height:23px}
.wa-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.wa-who b{font-family:'Libre Franklin',sans-serif;font-size:13.5px;font-weight:700}
.wa-who small{font-size:10.5px;color:rgba(255,255,255,.72);margin-top:2px}
.wa-x{
  margin-left:auto;flex:none;width:26px;height:26px;display:grid;place-items:center;
  background:none;border:0;color:rgba(255,255,255,.8);cursor:pointer;border-radius:50%;
}
.wa-x:hover{background:rgba(255,255,255,.14);color:#fff}
.wa-x svg{width:15px;height:15px}
/* WhatsApp's own paper: a warm ground with the bubble's tail cut into its corner. */
.wa-body{
  display:grid;gap:8px;padding:18px 16px 14px;background:#ECE5DD;
  min-height:96px;max-height:210px;overflow-y:auto;
}
.wa-bubble{
  position:relative;background:#fff;border-radius:10px 10px 10px 2px;padding:11px 13px;
  font-size:13px;line-height:1.6;color:var(--text);max-width:255px;margin:0;
  box-shadow:0 1px 1px rgba(2,18,29,.16);
}
/* what the visitor just handed to WhatsApp, in WhatsApp's colour for an outgoing message */
.wa-bubble.wa-mine{background:#DCF8C6;border-radius:10px 10px 2px 10px;margin-left:auto}
.wa-note{margin:2px 0 0;text-align:center;font-size:10.5px;color:#54707F}
.wa-foot{display:grid;grid-template-columns:1fr auto;gap:9px;padding:12px 14px 13px;background:#fff}
.wa-in{
  width:100%;resize:none;border:1px solid rgba(8,59,92,.16);border-radius:14px;
  padding:9px 12px;font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.45;
  color:var(--primary);background:#fff;transition:border-color .25s var(--ease)
}
.wa-in:focus{outline:0;border-color:#25D366}
.wa-in::placeholder{color:#9AAAB6}
.wa-send{
  align-self:end;flex:none;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:#25D366;color:#fff;display:grid;place-items:center;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.wa-send:hover{transform:scale(1.06)}
.wa-send:disabled{background:#C6D2DA;cursor:default;transform:none}
.wa-send svg{width:17px;height:17px}
.wa-fine{grid-column:1/-1;margin:0;font-size:10.5px;color:var(--muted)}
@media (max-width:600px){
  .wa{right:14px;bottom:14px}
  .wa-panel{width:min(320px,calc(100vw - 28px))}
}

/* ============================================================
   SQUARE GRID ACCENT
   ============================================================ */
/* The chequered artwork, redrawn in brand green and navy. It is pure decoration, so nothing in the
   markup carries it: it is one pseudo-element behind the panel it belongs to, which is what leaves
   only a corner of the grid showing, the way the photograph covers most of it in the original. The
   squares keep their own 16px size rather than being scaled, so the window crops the artwork
   instead of shrinking it. 240 by 80 is eight columns by three rows exactly, so no square is cut
   in half at the edges.

   Of the three trial placements only this one was kept: the hero and the Who We Serve box were
   both asked for back. */
/* start a project: a band under the navy panel, in the room the section already leaves at its
   foot. Painted from the grid rather than from the panel, because a sticky element makes a
   stacking context of its own and would sit on top of it. */
.pf-grid{position:relative}
.pf-grid::before{
  content:"";position:absolute;pointer-events:none;
  background-image:url(../img/squares.svg);background-repeat:no-repeat;
  width:240px;height:80px;bottom:-96px;left:0;background-position:left bottom;
}

/* on a narrow screen the panel fills the width, so there is nowhere for a corner to show */
@media (max-width:1100px){
  .pf-grid::before{display:none}
}

/* ============================================================
   THE PhD ORACLE
   ============================================================ */
/* The band had no colour of its own and sat between two white sections, so it read as a
   continuation of the form above it. It is kept light on purpose: the experts band, the stats
   band, the panel beside the form and the footer are all navy already, and a fifth dark stripe
   this close to the end of the page would be heavy. A soft lime glow behind the heading picks up
   the bulb in the answer instead. */
.oracle-sec{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#EEF5F9 0%,#E4EEF5 100%);
  border-block:1px solid var(--border);
}
.oracle-sec::before{
  content:"";position:absolute;left:50%;top:-250px;width:940px;height:560px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(173,226,93,.22),transparent 62%);
}
.oracle-sec>*{position:relative}
/* body copy sitting straight on the tint rather than on the white card: #737373 only just
   clears the contrast floor on white and drops under it here, so it is darkened */
.oracle-sec .head p,.oracle-sec .oracle-foot{color:#566873}
.oracle-shell{
  max-width:860px;margin:0 auto;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:36px 40px 32px;
}
.oracle-form{display:flex;gap:12px;flex-wrap:wrap}
.oracle-input{
  flex:1 1 340px;min-width:0;padding:15px 20px;border:1px solid var(--border);
  border-radius:var(--r);background:var(--white);color:var(--primary);
  font-family:Manrope,system-ui,sans-serif;font-size:var(--body);
  transition:border-color .3s,box-shadow .3s;
}
.oracle-input::placeholder{color:#9AA7B0}
.oracle-input:focus{outline:none;border-color:var(--secondary);box-shadow:0 0 0 3px rgba(8,59,92,.12)}
.oracle-try{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:18px;font-size:12.5px}
.oracle-try>span{color:var(--text)}
.oracle-chip{
  padding:7px 15px;border-radius:99px;border:1px solid var(--border);background:var(--bg-light);
  font-size:12.5px;color:var(--primary);transition:.3s var(--ease);
}
.oracle-chip:hover{background:var(--secondary);border-color:var(--secondary);color:#fff;transform:translateY(-2px)}
.oracle-answer{
  display:none;margin-top:28px;padding:24px 26px;background:var(--bg-light);
  border-left:3px solid var(--accent);border-radius:0 var(--r-card) var(--r-card) 0;
  font-size:var(--body);line-height:1.72;color:#566873;
}
.oracle-answer.on{display:block;animation:qfade .42s var(--ease)}
.oracle-who{
  display:flex;align-items:center;gap:9px;margin-bottom:14px;
  font-family:'Libre Franklin',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);
}
.oracle-who svg{width:15px;height:15px}
.caret{
  display:inline-block;width:2px;height:1em;vertical-align:-2px;
  background:var(--accent-2);animation:blink 1s steps(1) infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.oracle-next{
  display:none;margin-top:22px;padding-top:22px;border-top:1px solid var(--border);
  align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.oracle-next.on{display:flex}
.oracle-next p{font-size:var(--small);max-width:46ch}
.oracle-foot{margin-top:20px;font-size:12.5px;color:var(--text);text-align:center}

/* ============================================================
   EXPERT SPOTLIGHT CAROUSEL
   ============================================================ */
/* Four doctorates, shown side by side. This is an introduction to the people, not a hiring
   board, so the cards carry no call to action. They are plain white against the navy band, and
   depth comes from the shadow alone. */
.spot{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
/* A face, a name and a university at rest; the fields and the whole biography on hover. The four
   sit in one grid row, so the height is fixed rather than a minimum: were a card to grow as it
   opened, the row would grow with it and the other three would jump. That is also why the detail
   is laid over the card instead of added underneath it -- over the card it has the full height to
   use, and the longest of these biographies needs almost all of it. */
.spot-card{
  position:relative;overflow:hidden;background:#fff;
  border-radius:24px;padding:30px 22px;text-align:center;height:300px;
  box-shadow:0 1px 2px rgba(2,18,29,.14),0 18px 38px -24px rgba(2,18,29,.7);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  /* the band around these cards is navy and sets white type, which the card has to undo */
  color:var(--text);display:flex;flex-direction:column;justify-content:center;
}
.spot-card:hover,.spot-card:focus-within{
  transform:translateY(-6px);
  box-shadow:0 1px 2px rgba(2,18,29,.16),0 32px 54px -28px rgba(2,18,29,.75);
}
.spot-card:focus{outline:0}
.spot-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.spot-card .ava{
  width:112px;height:112px;border-radius:50%;object-fit:cover;margin:0 auto 18px;display:block;
  box-shadow:0 0 0 6px rgba(255,255,255,.92),0 12px 24px -14px rgba(8,59,92,.6);
}
/* Two lines held open for the name, so the four cards keep step whether a name wraps or not. */
.spot-card h4{margin-bottom:5px;min-height:2.56em;line-height:1.28}
.spot-uni{display:block;font-size:12.5px;font-weight:600;color:var(--blue-1)}
.spot-more{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:24px 20px;background:#fff;border-radius:24px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .34s var(--ease),transform .42s var(--ease),visibility .34s var(--ease);
}
.spot-card:hover .spot-more,.spot-card:focus-within .spot-more{
  opacity:1;visibility:visible;transform:none;
}
/* The name again, because the detail covers the one below it. Hidden from screen readers, which
   have the real one a line above. */
.spot-who{
  display:block;margin-bottom:12px;font-family:'Libre Franklin',sans-serif;
  font-size:12.5px;font-weight:700;color:var(--secondary);letter-spacing:-.1px;
}
.spot-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:12px}
.spot-badges span{
  padding:4px 11px;border-radius:99px;background:rgba(8,59,92,.06);color:var(--secondary);
  font-family:'Libre Franklin',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.spot-bio{font-size:12.5px;line-height:1.6;margin:0}
/* The cue that there is more to see. It goes as the card opens, or it would be read as part of
   the biography. */
.spot-hint{
  position:absolute;left:0;right:0;bottom:14px;
  font-family:'Libre Franklin',sans-serif;font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(8,59,92,.32);
  transition:opacity .3s var(--ease);
}
.spot-card:hover .spot-hint,.spot-card:focus-within .spot-hint{opacity:0}
/* Nothing hovers on a touch screen, so there the card simply shows everything at once. The width
   is checked as well as the pointer, because some touch devices claim a hover they do not have,
   and by that width the cards are one to a row with room for the lot. Tapping a card works in any
   case: they are focusable, and focus opens the detail the same way hovering does. */
@media (hover:none),(max-width:760px){
  .spot-card{height:auto}
  .spot-more{
    position:static;padding:18px 0 0;background:none;
    opacity:1;visibility:visible;transform:none;
  }
  .spot-who,.spot-hint{display:none}
}

/* The wider network. Fifty profiles will not sit in a grid, so they run in a scroller that
   snaps: native overflow brings touch, trackpad and keyboard scrolling with it, and the arrows
   only nudge it along a page at a time. The four above are solid white and these are glass, so
   the featured names stay the featured names. */
.roster{margin-top:72px}
.roster-head{margin-bottom:26px}
.roster-head h3{color:#fff;margin:0;font-size:clamp(1.2rem,2.2vw,1.55rem)}
.roster-head p{margin:7px 0 0;font-size:var(--small);color:rgba(255,255,255,.64)}
/* The controls sit under the row they drive, the rail taking up whatever the arrows leave. */
.roster-foot{display:flex;align-items:center;gap:24px;margin-top:26px}
.roster-nav{display:flex;gap:10px;flex:none}
.roster-btn{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.roster-btn svg{width:17px;height:17px}
.roster-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--primary)}
.roster-btn[disabled]{opacity:.3;cursor:default}
.roster-btn[disabled]:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);color:#fff}
/* Snapping is left to the browser, but the smooth easing is not: a mandatory snap and an
   animated scrollTo argue with each other, and the loser is whichever button press gets
   swallowed. The script asks for the easing itself, aiming at an exact card edge. */
.roster-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 64px)/5);gap:16px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:4px 0 6px;scrollbar-width:none;
}
.roster-track::-webkit-scrollbar{display:none}
.roster-track:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}
/* Light enough to read as a card rather than as a patch of the gradient behind it. */
.rc{
  scroll-snap-align:start;border-radius:18px;padding:22px 18px 20px;
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  box-shadow:0 14px 30px -24px rgba(0,0,0,.9);
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.rc:hover{background:rgba(255,255,255,.2);border-color:rgba(173,226,93,.6);transform:translateY(-4px)}
.rc-ini{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:14px;
  font-family:'Libre Franklin',sans-serif;font-size:14px;font-weight:700;letter-spacing:.04em;
  color:var(--primary);background:var(--accent);
}
/* three tones on rotation, so a long row of initials does not read as wallpaper */
.rc:nth-child(3n+2) .rc-ini{background:var(--blue-1);color:#fff}
.rc:nth-child(3n+3) .rc-ini{background:rgba(255,255,255,.9);color:var(--secondary)}
/* Each block is held to a set number of lines so the fifty cards keep a common rhythm however
   long a name or a university happens to be. */
.rc h4{color:#fff;font-size:14.5px;line-height:1.35;margin:0 0 5px;min-height:2.7em}
.rc-uni{
  display:block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);margin-bottom:11px;line-height:1.45;min-height:2.9em;
}
.rc-field{
  font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.8);margin:0 0 14px;
  min-height:4.8em;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
}
/* pushed to the foot so the bottom row of tags is on one line across the whole row of cards */
.rc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.rc-tags span{
  padding:4px 9px;border-radius:99px;background:rgba(255,255,255,.14);
  font-family:'Libre Franklin',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.85);
}
.roster-rail{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.roster-rail i{display:block;height:100%;width:25%;border-radius:99px;background:var(--accent)}

/* ============================================================
   EXPERT RECRUITMENT
   ============================================================ */
.recruit-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.recruit h2{text-transform:none;letter-spacing:-1.2px;margin:14px 0 0}
.recruit-body p+p{margin-top:16px}
.recruit-body .lead{font-size:var(--medium);color:var(--primary);font-weight:500}
.recruit-body .run b{color:var(--primary)}
.recruit-actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}

/* ============================================================
   START A PROJECT FORM
   ============================================================ */
.pf-sec{background:var(--white);padding:100px 0}
.pf{max-width:720px;margin:0 auto}
.pf-row{margin-bottom:22px}

/* On the front page the form shares the section with a navy panel that answers the questions
   people ask before they send anything. The expert application reuses .pf on its own page, so
   the width override is scoped to this layout rather than applied to .pf itself. */
.pf-grid{display:grid;grid-template-columns:0.86fr 1.14fr;gap:40px;align-items:start}
.pf-main .pf{max-width:none;margin:0}
.pf-aside{
  background:linear-gradient(160deg,var(--secondary),var(--blue-2));
  border-radius:var(--r-card);padding:36px 34px 34px;color:#fff;
  box-shadow:var(--shadow-lift);position:sticky;top:104px;
}
.pf-aside h3{color:#fff;margin-bottom:7px}
.pf-aside-lead{font-size:var(--small);color:rgba(255,255,255,.7);margin-bottom:26px}
.pf-facts{display:grid;gap:19px}
.pf-facts li{display:flex;gap:14px}
.pf-facts svg{width:19px;height:19px;color:var(--accent);flex:none;margin-top:2px}
.pf-facts b{
  display:block;font-family:'Libre Franklin',sans-serif;font-size:13.5px;font-weight:600;
  color:#fff;margin-bottom:4px;
}
.pf-facts span{font-size:12.5px;line-height:1.68;color:rgba(255,255,255,.72)}
.pf-vow{
  margin-top:24px;padding:14px 16px;border-radius:var(--r);font-size:12.5px;line-height:1.68;
  background:rgba(173,226,93,.13);border-left:3px solid var(--accent);color:rgba(255,255,255,.86);
}
.pf-vow a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.pf-reach{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.pf-rtitle{
  display:block;font-family:'Libre Franklin',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:12px;
}
.pf-reach>a{
  display:flex;align-items:center;gap:12px;padding:6px 0;
  font-family:'Libre Franklin',sans-serif;font-size:15px;font-weight:600;color:#fff;
  transition:color .3s;
}
.pf-reach>a:hover{color:var(--accent)}
.pf-reach>a svg{width:17px;height:17px;color:var(--accent);flex:none}
.pf-hours{margin-top:13px;font-size:12px;line-height:1.65;color:rgba(255,255,255,.6)}
.pf-hours a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:2px}
.pf-hours a:hover{color:var(--accent)}
/* used by the expert application, which is long enough to need grouping */
.pf-legend{
  font-size:16px;color:var(--secondary);margin:38px 0 18px;padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.pf-legend:first-of-type{margin-top:0}
.pf-two{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.pf-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.pf-label{
  display:block;margin-bottom:8px;
  font-family:'Libre Franklin',sans-serif;font-size:12.5px;font-weight:600;color:var(--primary);
}
.pf-req{color:#C0392B}
.pf-in{
  width:100%;padding:14px 16px;border:1px solid transparent;border-radius:var(--r);
  background:var(--bg-light);color:var(--primary);
  font-family:Manrope,system-ui,sans-serif;font-size:var(--body);line-height:1.5;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.pf-in::placeholder{color:#9AA7B0}
.pf-in:focus{
  outline:none;background:var(--white);border-color:var(--secondary);
  box-shadow:0 0 0 3px rgba(8,59,92,.12);
}
textarea.pf-in{min-height:132px;resize:vertical;display:block}
select.pf-in{
  appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23083B5C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:16px 16px;
}
.pf-help{margin-top:7px;font-size:12px;color:var(--blue-1)}
.pf-check{display:flex;gap:11px;align-items:flex-start;font-size:var(--small);color:var(--text);cursor:pointer}
.pf-check input{flex:none;width:16px;height:16px;margin:3px 0 0;accent-color:var(--accent-2)}
.pf-check a{text-decoration:underline}

.pf-drop{
  display:block;padding:34px 20px;text-align:center;cursor:pointer;
  background:var(--bg-light);border:1px dashed var(--border);border-radius:var(--r);
  transition:.3s var(--ease);
}
.pf-drop:hover,.pf-drop.over{background:#E6EEF4;border-color:var(--secondary)}
.pf-drop svg{width:30px;height:30px;color:var(--blue-1);margin:0 auto 10px}
.pf-drop span{font-size:var(--small);color:var(--text)}
.pf-drop b{color:var(--blue-1);font-weight:600;text-decoration:underline}
.pf-picked{margin-top:12px;font-size:12.5px;color:var(--primary);display:none}
.pf-picked.on{display:block}
.pf-picked li{display:flex;align-items:center;gap:9px;padding:5px 0}
.pf-picked svg{width:15px;height:15px;color:var(--accent-2);flex:none}
.pf-picked em{color:var(--text);font-style:normal}
.pf-picked button{color:var(--text);text-decoration:underline;font-size:12px;margin-left:auto}
.pf-picked button:hover{color:#C0392B}

/* The navy panel beside the form is a fixed length and the form used to overrun it by about
   four hundred pixels, which left the section looking lopsided. The four short fields are paired
   into two rows and everything in between is a notch tighter. The expert application reuses .pf
   on a page of its own where there is nothing to sit level with, so it keeps the roomier rhythm
   and none of this is allowed to reach it. */
.pf-main .pf-row{margin-bottom:18px}
.pf-main .pf-label{margin-bottom:7px}
.pf-main .pf-in{padding:13px 16px}
.pf-main select.pf-in{padding-right:44px}
.pf-main textarea.pf-in{min-height:0}
.pf-main .pf-help{margin-top:5px}
.pf-main .pf-drop{padding:26px 20px}
.pf-main .pf-drop svg{width:27px;height:27px;margin-bottom:8px}
.pf-main .pf-actions{margin-top:28px}

.pf-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px}
.pf-draft{font-size:var(--small);color:var(--text);text-decoration:underline;transition:color .3s}
.pf-draft:hover{color:var(--secondary)}
.pf-said{font-size:var(--small);font-weight:600;color:var(--accent-2)}

/* the honeypot and the file input itself: reachable by code, invisible to people */
.pf-off{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pf-note{
  max-width:720px;margin:0 auto 32px;padding:18px 22px;border-radius:var(--r-card);
  font-size:var(--small);border-left:3px solid var(--accent);background:var(--bg-light);
}
.pf-note.bad{border-left-color:#C0392B;background:#FBEDEC}
.pf-note b{display:block;font-family:'Libre Franklin',sans-serif;color:var(--primary);margin-bottom:4px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .hero-in,.split{grid-template-columns:1fr;gap:44px}
  .hero-card{margin-inline:auto}
  .svcs,.steps,.quotes{grid-template-columns:repeat(2,1fr)}
  .people,.band-in{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .promise{grid-template-columns:1fr}
  .promise-item+.promise-item{border-left:0;border-top:1px solid var(--border)}
  .promise-wrap{margin-top:-48px}
  .vow-grid{grid-template-columns:1fr}
  .recruit-in{grid-template-columns:1fr;gap:48px}
  .spot{grid-template-columns:repeat(2,1fr)}
  .roster-track{grid-auto-columns:calc((100% - 32px)/3)}
  .pf-grid{grid-template-columns:1fr;gap:36px}
  .pf-aside{position:static}
}
@media (max-width:1024px){
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:2px;background:var(--white);border-top:1px solid var(--border);
    padding:12px 20px 20px;box-shadow:0 22px 40px -26px rgba(8,59,92,.6);
  }
  .nav-links.show{display:flex}
  .burger{display:grid}
  .nav{position:relative}
  /* the mark alone on a phone: there is no room for the line and it would only shrink further */
  .logo img{height:38px}
  .logo-tag{display:none}
  .nav-links>li{width:100%}
  .nav-links>li>a,.nav-links>li>.nav-top{padding:13px 12px;width:100%}
  .nav-links>li>.nav-top{justify-content:space-between}
  .nav-links>li>a::after,.nav-links>li>.nav-top::after{display:none}
  .nav-links>li>a:hover,.nav-links>li>.nav-top:hover{background:var(--bg-light)}
  /* on a phone the panel drops into the flow, so the menu reads as an accordion */
  .submenu{
    position:static;min-width:0;margin:0;padding:0 0 0 12px;box-shadow:none;background:none;
    border-left:2px solid var(--border);border-radius:0;
    display:none;opacity:1;visibility:visible;transform:none;transition:none;
  }
  .has-menu.open>.submenu{display:block;margin-bottom:8px}
  .submenu::before{display:none}
  .submenu a{padding:10px 12px;white-space:normal}
  .marks{gap:30px 44px}
}
@media (max-width:760px){
  .sec{padding:72px 0}
  .svcs,.steps,.quotes,.people,.diff-cards{grid-template-columns:1fr}
  .band-in{grid-template-columns:1fr 1fr;gap:32px}
  .spot{grid-template-columns:1fr;gap:20px}
  /* a sliver of the next card showing is what tells a thumb the row scrolls */
  .roster-track{grid-auto-columns:82%}
  .marks{gap:26px 34px}
  .mark-name{font-size:22px}
  .mk-pwc .mark-name{font-size:26px}
  .mk-nes .mark-name{font-size:27px}
  .mk-hal .mark-name{font-size:17px}
  .mk-mer .mark-name{font-size:21px}
  .foot-grid{grid-template-columns:1fr}
  .modal-body ul{grid-template-columns:1fr}
  .topbar-in{justify-content:center;text-align:center}
  .topbar ul{justify-content:center;gap:16px}
  .hero{padding:60px 0 80px}
  .svc{height:auto}
  .svc-panel{display:none}
  .oracle-shell{padding:28px 22px 24px}
  /* the glow is sized for a wide band; left alone it washes a whole phone screen green */
  .oracle-sec::before{width:560px;height:400px;top:-190px;opacity:.65}
  .pf-sec{padding:72px 0}
  .pf-actions{gap:14px}
  .pf-two,.pf-opts{grid-template-columns:1fr}
  .pf-aside{padding:30px 24px 28px}
  .hb-two{grid-template-columns:1fr}
  .hb-pill{font-size:12px;padding:8px 12px}
  .nav-cta .btn{display:none}
  .nav-cta .btn.m-show{display:inline-flex}
}

/* ============================================================
   RESILIENCE AGAINST PLUGIN CSS
   ============================================================
   Some installs carry plugins left over from a previous theme that style bare element
   selectors (`body > header`) and generic class names (`.btn`, `.btn-sm`). This theme's
   stylesheet loads after them, so it already wins on every property it declares — the
   damage only comes from properties it never declared at all, plus one plugin rule whose
   selector is more specific than ours.

   Everything below either declares a property this theme previously left open, or matches
   a plugin selector exactly so that load order decides it in our favour. Removing the
   offending plugin is still the better fix; this only stops it mattering.
   ============================================================ */

/* `body > header { height:350px; display:flex }` made the header a full-height banner. */
.header {
	height: auto;
	min-height: 0;
	display: block;
}

/* `.btn { border-style:solid; background-color:#379CF4 }` added a border and colour to
   every button. The modifiers are re-asserted below because they must come after this. */
.btn {
	border: 0 solid transparent;
	background-color: transparent;
	background-image: none;
	margin: 0;
	width: auto;
	float: none;
	text-decoration: none;
}

.btn-accent { background: var(--accent); color: var(--primary); }
.btn-navy   { background: var(--secondary); color: var(--white); }
.btn-line   { background: transparent; color: var(--primary); border: 1px solid var(--border); }
.btn-line-w { background: transparent; color: var(--white); border: 1px solid rgba(255, 255, 255, .4); }

/* `.btn-sm { font-size: ... }` shrank the small buttons. */
.btn-sm {
	font-size: var(--btn);
	line-height: 1.2;
}

/* `.btn + .btn { margin-top:15px }` and the `:not(.full-width)` variant knocked side-by-side
   buttons out of alignment. These selectors match the plugin's exactly, so we win on order. */
.btn + .btn { margin: 0; }
.btn:not(.full-width) + .btn:not(.full-width) { margin-left: 0; margin-top: 0; }

/* The plugin resets margins on h1–h6 and p; this theme only declared h1–h5. */
h6 { margin: 0; }

/* The header menus are the one part of the page that has to sit above everything and stay
   clickable, so nothing a plugin does to `ul ul`, `button` or stacking order may reach them. */
/* `body > header { overflow:hidden }` clips the dropdown panels away entirely, so this has to
   outrank it on specificity rather than only on source order. */
body > .header, .header { position: sticky; z-index: 80; overflow: visible; }
.header .nav, .header .nav-links, .header .has-menu { overflow: visible; }

.nav-links > li > .nav-top {
	background: none;
	background-image: none;
	border: 0;
	box-shadow: none;
	width: auto;
	margin: 0;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
}

.nav-links .submenu {
	list-style: none;
	z-index: 90;
}

.nav-links .submenu li {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

/* WooCommerce, Elementor and the block library each ship their own `.screen-reader-text`.
   Ours is only used by the search form label, so pin it down. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}