/* ==========================================================================
   Engage Healthcare — site stylesheet
   One file for every page. Edit tokens below to restyle the whole site.
   ========================================================================== */

:root{
  /* Brand */
  --accent:#3f7d29;          /* deep green — buttons, rules, counters */
  --navy:#0C546C;            /* brand navy, sampled from the logo */
  --navy-deep:#083b4d;
  --lime:#8DC63F;            /* brand lime, sampled from the logo */
  --lime-deep:#6fa62c;
  --accent-2:#5aa63c;        /* bright green — hover, toggle pill, kickers */

  /* Neutrals */
  --ink:#0e1d26;             /* headings, footer bg */
  --ink-2:#16303d;
  --soft:#5d7280;            /* body text */
  --line:#e2e9ed;            /* hairlines */
  --page:#ffffff;
  --wash:#f4f8f9;            /* alternating section background */

  /* Layout */
  --max:1180px;
  --pad:28px;
  --section-y:112px;

  --r-btn:4px;               /* buttons and small controls */
  --r-card:8px;              /* cards, panels, image blocks */

  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  line-height:1.6;
}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Scroll reveal ---------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(36px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none !important}
  html{scroll-behavior:auto}
}

/* Scroll progress -------------------------------------------------------- */
#prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent-2),var(--accent));z-index:200;transition:width .1s linear}

/* Header ----------------------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:120}

/* Utility strip */
.util{background:var(--ink);color:rgba(255,255,255,.78);font-size:11px;letter-spacing:1.4px;font-weight:600;overflow:hidden}
.util .wrap{display:flex;align-items:center;gap:26px;height:40px;transition:height .35s cubic-bezier(.4,0,.2,1),opacity .25s ease;will-change:height}
.util a{text-decoration:none;transition:color .3s}
.util a:hover{color:var(--lime)}
.util .live{display:flex;align-items:center;gap:9px;margin-right:auto}
.util .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);position:relative;flex:none}
.util .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--lime);opacity:0;animation:pulse 2.8s cubic-bezier(.2,.7,.3,1) infinite}
@media (prefers-reduced-motion:reduce){.util .dot::after{animation:none;opacity:.35}}
.util .sep{width:1px;height:14px;background:rgba(255,255,255,.22)}
@media(max-width:880px){.util .wrap{gap:16px;height:36px}.util .hide-sm{display:none}}
/* Below ~600px the tagline and phone number no longer both fit on one line
   and each wraps individually, making the bar look tall and broken. Hide
   the tagline (dot included) rather than let it wrap; the phone number
   still needs pushing to the right without .live's margin-right:auto. */
@media(max-width:620px){.util .live{display:none}.util a[href^="tel:"]{margin-left:auto}}

/* Main bar */
.mainbar{background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .4s}
.mainbar .wrap{display:flex;align-items:center;gap:34px;height:92px;transition:height .35s cubic-bezier(.4,0,.2,1);will-change:height}
.mainbar .logo img{height:52px;width:auto;transition:height .35s cubic-bezier(.4,0,.2,1)}

/* Compacted on scroll */
.scrolled .util .wrap{height:0;opacity:0}
.scrolled .mainbar .wrap{height:68px}
.scrolled .mainbar .logo img{height:40px}
.scrolled .mainbar{box-shadow:0 10px 30px rgba(8,30,40,.08)}

nav{margin-left:auto}
nav ul{display:flex;gap:24px;list-style:none;align-items:center}
nav a{
  text-decoration:none;font-size:13px;letter-spacing:.4px;font-weight:600;
  color:var(--navy);padding:8px 0;position:relative;white-space:nowrap;transition:color .3s;
}
nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--lime);transform:scaleX(0);transform-origin:right;
  transition:transform .38s cubic-bezier(.2,.7,.3,1);
}
nav a:hover{color:var(--lime-deep)}
nav a:hover::after{transform:scaleX(1);transform-origin:left}
nav a[aria-current="page"]{color:var(--lime-deep)}
nav a[aria-current="page"]::after{transform:scaleX(1)}

.head-cta{
  background:var(--navy);color:#fff;text-decoration:none;
  font-size:11.5px;letter-spacing:1.4px;font-weight:700;padding:15px 26px;border-radius:var(--r-btn);
  white-space:nowrap;transition:background .35s,transform .35s,box-shadow .35s;
}
.head-cta:hover{background:var(--lime);color:#12310a;transform:translateY(-2px);box-shadow:0 12px 24px rgba(141,198,63,.32)}

/* Burger */
.burger{display:none;margin-left:auto;background:none;border:none;cursor:pointer;padding:12px;z-index:140}
.burger i{display:block;width:26px;height:2px;background:var(--navy);margin:6px 0;transition:transform .4s cubic-bezier(.2,.7,.3,1),opacity .3s,background .3s}
.burger.on i{background:#fff}
.burger.on i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Mobile overlay */
#mob{
  position:fixed;inset:0;background:var(--navy);z-index:130;
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
}
#mob.open{opacity:1;visibility:visible}
#mob a.mlink{
  display:block;color:#fff;text-decoration:none;font-size:26px;font-weight:200;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.15);
  opacity:0;transform:translateY(20px);
}
#mob.open a.mlink{animation:mIn .5s cubic-bezier(.2,.7,.3,1) forwards}
#mob.open a.mlink:nth-child(1){animation-delay:.08s}
#mob.open a.mlink:nth-child(2){animation-delay:.14s}
#mob.open a.mlink:nth-child(3){animation-delay:.20s}
#mob.open a.mlink:nth-child(4){animation-delay:.26s}
#mob.open a.mlink:nth-child(5){animation-delay:.32s}
@keyframes mIn{to{opacity:1;transform:none}}
#mob .mfoot{margin-top:40px;opacity:0}
#mob.open .mfoot{animation:mIn .5s .4s cubic-bezier(.2,.7,.3,1) forwards}
#mob .mfoot .num{display:block;font-size:24px;color:var(--lime);text-decoration:none;font-weight:300;margin-bottom:10px}
#mob .mfoot p{font-size:12px;letter-spacing:1.6px;color:rgba(255,255,255,.6);font-weight:600}
body.locked{overflow:hidden}

@media(max-width:1180px){nav,.head-cta{display:none}.burger{display:block}}

/* Buttons ---------------------------------------------------------------- */
@property --border-angle{
  syntax:'<angle>';inherits:false;initial-value:0deg;
}
.cta{
  display:inline-block;background:transparent;color:var(--accent);text-decoration:none;
  border:1.5px solid var(--accent);cursor:pointer;font-family:inherit;
  font-size:12px;letter-spacing:2px;font-weight:700;padding:17px 38px;border-radius:var(--r-btn);
  position:relative;overflow:hidden;
  transition:transform .35s,box-shadow .35s,background .3s,color .3s;
}
.cta:hover{background:var(--accent);color:#fff;transform:translateY(-3px);box-shadow:0 16px 34px rgba(63,125,41,.34)}
.cta::before{content:"";position:absolute;inset:0 auto 0 -60%;width:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s;z-index:1}
.cta:hover::before{left:120%}
.cta.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff}
.cta.ghost:hover{background:rgba(255,255,255,.12);box-shadow:none;color:#fff}
.cta.dark{background:var(--ink);border-color:var(--ink);color:#fff}

/* Rotating glow border — always spinning, not just on hover.
   Uses a conic-gradient ring animated via @property; browsers without
   support for either just keep the plain bordered button, no fallback
   needed. Sits flush with the border (not bled outward) because .cta
   has overflow:hidden for the shine-sweep above — an outward halo would
   just get clipped. */
.cta::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:2px;background:conic-gradient(from var(--border-angle),
    var(--lime), var(--accent-2), var(--navy), var(--accent-2), var(--lime));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:2;
  animation:ctaGlowSpin 2.2s linear infinite;
}
@keyframes ctaGlowSpin{to{--border-angle:360deg}}
@media(prefers-reduced-motion:reduce){.cta::after{animation:none}}
.acts{display:flex;flex-wrap:wrap;gap:14px}

/* Hero — home ------------------------------------------------------------ */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;background:var(--ink);overflow:hidden}
.hero .bg{position:absolute;inset:0;background:linear-gradient(135deg,#0e1d26,#1d3b2a 60%,#2c5c33)}
.hero .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);animation:kb 20s ease-out forwards}
@keyframes kb{to{transform:scale(1)}}
@keyframes pulse{0%{transform:scale(.7);opacity:.75}70%{opacity:0}100%{transform:scale(2.1);opacity:0}}
.hero .veil{position:absolute;inset:0;background:linear-gradient(102deg,rgba(9,26,34,.93) 0%,rgba(9,26,34,.78) 48%,rgba(9,26,34,.3) 100%)}
.hero .wrap{position:relative;z-index:3;color:#fff;padding:118px var(--pad) 130px;flex:1 1 auto}
.kick{font-size:11px;letter-spacing:5px;color:var(--accent-2);font-weight:700;margin-bottom:24px}
.js .hero .kick{opacity:0;animation:up .8s .15s both}
h1.big{font-size:clamp(38px,6.4vw,72px);font-weight:200;line-height:1.06;margin-bottom:8px}
h1.big #ht span,h1.big.split-anim span{display:inline-block;opacity:0;transform:translateY(46px);animation:letterIn .95s both}
h1.big em{font-style:normal;font-weight:600;color:var(--accent-2)}
.hero .sub{max-width:540px;font-size:17.5px;line-height:1.85;color:rgba(255,255,255,.76);margin-top:32px;min-height:0}
.js .hero .sub{opacity:0;animation:up .9s 1.2s both}
.hero .acts{margin-top:30px}
.js .hero .acts{opacity:0;animation:up .9s 1.5s both}
@keyframes letterIn{to{opacity:1;transform:translateY(0)}}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

/* Audience switch */
.switch{display:inline-flex;padding:5px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);backdrop-filter:blur(6px);margin-top:34px}
.js .switch{opacity:0;animation:up .9s 1.35s both}
.switch button{background:none;border:none;cursor:pointer;font-family:inherit;color:rgba(255,255,255,.75);font-size:12px;letter-spacing:2px;font-weight:700;padding:15px 0;width:172px;text-align:center;transition:color .35s,background .35s}
.switch button:hover{color:#fff}
.switch button.on{color:#0d2606;background:var(--accent-2)}

.hero .strip{position:absolute;left:0;right:0;bottom:0;z-index:4;border-top:1px solid rgba(255,255,255,.16);background:rgba(6,18,24,.55);backdrop-filter:blur(8px)}
.hero .strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:22px var(--pad)}
.hero .strip b{display:block;font-size:11px;letter-spacing:2.4px;color:var(--accent-2);font-weight:700;margin-bottom:6px}
.hero .strip span{font-size:13.5px;color:rgba(255,255,255,.75);line-height:1.6}
@media(max-width:760px){
  .hero .strip .wrap{grid-template-columns:1fr;gap:14px}
  .hero .sub{min-height:0}
  /* Below this width the vertically-centered hero content and the absolutely-
     positioned bottom strip can collide on short screens (strip grows taller
     once it stacks to one column). Switch to plain block flow so the strip
     just follows the content instead of overlapping it — guaranteed no
     collision regardless of content length or viewport height. */
  .hero{display:block;min-height:0}
  .hero > .wrap{padding:100px var(--pad) 40px}
  .hero .strip{position:static;border-top:1px solid rgba(255,255,255,.16)}
}

/* Page banner — inner pages ---------------------------------------------- */
.banner{position:relative;background:var(--ink);color:#fff;padding:110px 0 90px;overflow:hidden}
.banner::before{content:"";position:absolute;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,rgba(90,166,60,.22),transparent 68%);top:-360px;right:-240px;filter:blur(20px)}
.banner .wrap{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center;
}
.banner .bcopy{min-width:0}

/* Facts panel on the right of every inner-page banner */
.bfacts{display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.08);border-radius:var(--r-card);overflow:hidden}
.bfact{
  background:rgba(9,26,34,.72);padding:22px 26px;
  transition:background .4s cubic-bezier(.2,.7,.3,1);
}
.bfact:hover{background:rgba(90,166,60,.16)}
.bfact b{
  display:block;font-size:10px;letter-spacing:2.4px;font-weight:700;
  color:var(--accent-2);margin-bottom:8px;
}
.bfact span{display:block;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.86);font-weight:300}
.bfact span em{font-style:normal;font-weight:600}
.bfact a{color:inherit;text-decoration:none}
.bfact a:hover{color:var(--accent-2)}

@media(max-width:960px){
  .banner .wrap{grid-template-columns:1fr;gap:44px}
  .bfacts{flex-direction:row;flex-wrap:wrap}
  .bfact{flex:1 1 200px}
}
@media(max-width:560px){
  .bfacts{flex-direction:column}
}
.banner .kick{animation:none;opacity:1}
.banner h1{font-size:clamp(32px,5vw,54px);font-weight:200;line-height:1.12;margin-bottom:18px}
.banner h1 b{font-weight:600;color:var(--accent-2)}
.banner p{max-width:600px;font-size:17px;line-height:1.85;color:rgba(255,255,255,.74)}
.crumb{font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.5);margin-bottom:20px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--accent-2)}

/* Sections --------------------------------------------------------------- */
section.block{padding:var(--section-y) 0}
.alt{background:var(--wash)}
.head{margin-bottom:64px}
.head.mid{text-align:center}
.rule{width:52px;height:2px;background:var(--accent);margin-bottom:24px}
.head.mid .rule{margin:0 auto 24px}
.eyebrow{font-size:11px;letter-spacing:4px;color:var(--accent);font-weight:700;margin-bottom:16px}
.head h2{font-size:clamp(28px,4vw,44px);font-weight:200;line-height:1.15;margin-bottom:16px}
.head h2 b{font-weight:600}
.head p{color:var(--soft);font-size:16px;max-width:640px;line-height:1.85}
.head.mid p{margin:0 auto}

/* Two-column text + image ------------------------------------------------ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.split.reverse .shot{order:-1}
.split p{color:var(--soft);line-height:1.95;font-size:15.5px;margin-bottom:18px}
.shot{position:relative;overflow:hidden;border-radius:var(--r-card)}
.shot img{width:100%;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.shot:hover img{transform:scale(1.05)}
.promise{margin-top:26px;padding:22px 26px;border-left:3px solid var(--accent);border-radius:0 var(--r-card) var(--r-card) 0;background:var(--wash);font-size:16px;line-height:1.7}
.alt .promise{background:#fff}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:38px}.split.reverse .shot{order:0}}

/* Card grid (journey steps, values, why-us) ------------------------------ */
.grid{display:grid;gap:1px;background:var(--line);border-radius:var(--r-card);overflow:hidden}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.cell{background:var(--page);padding:40px 32px;position:relative;transition:background .45s}
.alt .cell{background:var(--wash)}
.cell:hover{background:rgba(90,166,60,.07)}
.cell .n{font-size:12px;letter-spacing:3px;color:var(--accent);font-weight:700;margin-bottom:18px}
.cell h3,.cell h4{font-size:19px;font-weight:500;margin-bottom:12px}
.cell p{font-size:14.5px;color:var(--soft);line-height:1.85}
.cell span.bar{display:block;width:26px;height:2px;background:var(--accent);margin-bottom:18px}
.cell::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent-2);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.cell:hover::after{transform:scaleX(1)}
@media(max-width:980px){.grid.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.grid.c3,.grid.c2{grid-template-columns:1fr}}
@media(max-width:560px){.grid.c4{grid-template-columns:1fr}}

/* Stats ------------------------------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;background:var(--line);border-radius:var(--r-card);overflow:hidden}
.stat{background:var(--page);padding:56px 26px;text-align:center;transition:background .4s}
.alt .stat{background:var(--wash)}
.stat:hover{background:rgba(90,166,60,.07)}
.num{font-size:58px;font-weight:200;color:var(--accent);line-height:1;letter-spacing:-.02em}
.num small{font-size:26px;font-weight:300}
.stat p{margin-top:16px;font-size:10.5px;letter-spacing:2.4px;color:var(--soft);font-weight:600;line-height:1.9}

/* Testimonials ----------------------------------------------------------- */
.quotes{max-width:820px;margin:0 auto;text-align:center;position:relative}
.q{display:none}
.q.on{display:block;animation:qin .6s cubic-bezier(.2,.7,.3,1)}
@keyframes qin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.q .mark{font-size:64px;line-height:1;color:var(--accent);opacity:.28;margin-bottom:10px}
.q blockquote{font-size:19px;line-height:1.9;color:var(--ink-2);font-weight:300}
.q .who{margin-top:26px;font-size:11px;letter-spacing:2.6px;font-weight:700;color:var(--soft)}
.dots{display:flex;gap:10px;justify-content:center;margin-top:38px}
.dots button{width:34px;height:3px;border:none;background:var(--line);cursor:pointer;padding:0;border-radius:2px;transition:background .35s}
.dots button.on{background:var(--accent)}

/* Role lists ------------------------------------------------------------- */
.roles{list-style:none;border-left:2px solid var(--accent)}
.roles li{padding:13px 0 13px 22px;font-size:14.5px;border-bottom:1px solid var(--line);transition:padding-left .3s,color .3s}
.roles li:hover{padding-left:30px;color:var(--accent)}
.roles li:last-child{border-bottom:none}

/* Contact ---------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}
.info .item{padding:24px 0;border-bottom:1px solid var(--line)}
.info .item:first-child{padding-top:0}
.info h4{font-size:11px;letter-spacing:2.6px;color:var(--accent);font-weight:700;margin-bottom:12px}
.info p,.info a{color:var(--soft);font-size:15px;line-height:1.85;text-decoration:none}
.info a:hover{color:var(--accent)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px;position:relative}
.field input,.field textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:transparent;border:none;border-bottom:1px solid var(--line);padding:14px 2px;outline:none;transition:border-color .35s}
.field textarea{resize:vertical;min-height:96px}
.field label{position:absolute;left:2px;top:14px;font-size:15px;color:var(--soft);pointer-events:none;transition:all .3s cubic-bezier(.2,.7,.3,1)}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{top:-11px;font-size:10.5px;letter-spacing:1.6px;color:var(--accent);font-weight:700}
.field.file{margin-bottom:26px}
.field.file label{position:static;display:block;font-size:11px;letter-spacing:1.6px;color:var(--soft);font-weight:700;text-transform:uppercase;margin-bottom:8px}
.field.file input[type=file]{width:100%;font-family:inherit;font-size:13.5px;color:var(--soft);border:1px dashed var(--line);border-radius:var(--r-btn);padding:12px;background:transparent}
.field.file .hint{display:block;font-size:12px;color:var(--soft);margin-top:6px}
.pick{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap}
.pick button{background:none;border:1px solid var(--line);cursor:pointer;font-family:inherit;font-size:11px;letter-spacing:1.6px;font-weight:700;color:var(--soft);padding:12px 20px;border-radius:var(--r-btn);transition:all .35s}
.pick button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.err{color:#c0392b;font-size:12.5px;margin-top:8px;display:none}
.done{display:none;padding:34px;border:1px solid rgba(90,166,60,.5);border-radius:var(--r-card);background:rgba(90,166,60,.08)}
.done b{display:block;font-size:19px;font-weight:500;margin-bottom:8px}
.done p{color:var(--soft);font-size:14.5px}
@media(max-width:880px){.contact{grid-template-columns:1fr;gap:44px}.row{grid-template-columns:1fr}}

/* CTA strip -------------------------------------------------------------- */
.cta-strip{background:var(--ink);color:#fff;padding:86px 0;text-align:center;position:relative;overflow:hidden}
.cta-strip::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(90,166,60,.2),transparent 70%);bottom:-320px;left:50%;transform:translateX(-50%);filter:blur(20px)}
.cta-strip .wrap{position:relative;z-index:2}
.cta-strip h2{font-size:clamp(24px,3.4vw,36px);font-weight:200;margin-bottom:16px}
.cta-strip h2 b{font-weight:600;color:var(--accent-2)}
.cta-strip p{color:rgba(255,255,255,.72);max-width:520px;margin:0 auto 32px;font-size:16px}
.cta-strip .acts{justify-content:center}

/* Footer ----------------------------------------------------------------- */
footer{background:var(--ink);color:#fff;padding:60px 0 32px}
.fgrid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:34px;align-items:flex-start}
footer .brand{font-size:19px;letter-spacing:.18em;font-weight:300}
footer .brand small{display:block;font-size:12px;letter-spacing:2px;color:rgba(255,255,255,.6);margin-top:8px;font-weight:400}
footer .social{display:flex;gap:14px;margin-top:20px}
footer .social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;text-decoration:none;transition:all .3s}
footer .social a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-3px)}
.flinks{display:flex;flex-direction:column;gap:11px}
.flinks a{color:rgba(255,255,255,.72);text-decoration:none;font-size:11px;letter-spacing:1.6px;transition:color .3s}
.flinks a:hover{color:#fff}
.fbase{margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:rgba(255,255,255,.55)}
.fbase a{color:rgba(255,255,255,.75);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3)}
.fbase a:hover{color:#fff;text-decoration-color:#fff}

/* 404 -------------------------------------------------------------------- */
.oops{min-height:74vh;display:flex;align-items:center;text-align:center}
.oops .wrap{flex:1 1 auto}
.oops .code{
  font-size:110px;font-weight:200;color:var(--accent);line-height:1;
  display:flex;align-items:center;justify-content:center;gap:8px;
  animation:oopsFloat 4.5s ease-in-out infinite;
}
.oops .code .ring{width:.88em;height:.68em;position:relative;flex:none}
.oops .code .ring::before,.oops .code .ring::after{
  content:"";position:absolute;top:0;border-radius:50%;
  width:.6em;height:.6em;border:.09em solid;
}
.oops .code .ring::before{left:0;border-color:var(--navy)}
.oops .code .ring::after{left:.26em;border-color:var(--lime)}
@keyframes oopsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.oops .acts{justify-content:center;flex-wrap:wrap}
.oops-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin-top:30px}
.oops-links a{font-size:12.5px;letter-spacing:.3px;color:var(--soft);text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.oops-links a:hover{color:var(--accent);border-color:var(--accent)}
@media(prefers-reduced-motion:reduce){.oops .code{animation:none}}
@media(max-width:560px){.oops .code{font-size:74px}}

/* ==========================================================================
   Enhancement pass — richer homepage components
   ========================================================================== */

/* Hero rotating word ------------------------------------------------------ */
.rotator{
  display:block;position:relative;color:var(--accent-2);font-weight:600;
  height:1.1em;overflow:hidden;margin-top:.06em;
}
.rotator span{
  position:absolute;left:0;top:0;white-space:nowrap;
  opacity:0;transform:translateY(.42em);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1);
}
.rotator span.on{opacity:1;transform:none}

/* Trust band -------------------------------------------------------------- */
.trust{background:var(--ink);color:#fff;padding:34px 0;overflow:hidden}
.trust .label{text-align:center;font-size:10.5px;letter-spacing:3px;color:var(--accent-2);font-weight:700;margin-bottom:22px}
/* Fade gradient scoped to just the ticker row (not .trust as a whole) so it
   doesn't also darken the .label heading above it — that was the bug: the
   full-height fade made "STAFFING" and "SECTOR" at each end unreadable. */
.tickerwrap{position:relative;overflow:hidden}
.tickerwrap::before,.tickerwrap::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.tickerwrap::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.tickerwrap::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.ticker{display:flex;gap:56px;width:max-content;animation:slide 38s linear infinite}
.trust:hover .ticker{animation-play-state:paused}
.ticker span{font-size:15px;letter-spacing:1px;color:rgba(255,255,255,.66);white-space:nowrap;display:flex;align-items:center;gap:56px}
.ticker span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-2);opacity:.7}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Media cards ------------------------------------------------------------- */
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.mcard{
  position:relative;display:flex;align-items:stretch;text-decoration:none;overflow:hidden;
  background:var(--ink);aspect-ratio:3/4;border-radius:var(--r-card);
  transition:transform .55s cubic-bezier(.2,.7,.3,1),box-shadow .55s;
}
.mcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.62);transform:scale(1.04);transition:transform .9s cubic-bezier(.2,.7,.3,1),filter .6s}
.mcard::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,26,34,.95) 0%,rgba(9,26,34,.62) 46%,rgba(9,26,34,.15) 100%);z-index:1}
.mcard:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(14,29,38,.2)}
.mcard:hover img{transform:scale(1.12);filter:grayscale(0) brightness(.55)}

/* Content pinned to the bottom, with a fixed-height paragraph so the titles
   line up across all four cards regardless of copy length. */
.mcard .body{
  position:relative;z-index:2;padding:30px 28px;width:100%;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.mcard h3{font-size:21px;font-weight:500;margin-bottom:12px;line-height:1.25}
.mcard p{
  font-size:14px;color:rgba(255,255,255,.78);line-height:1.65;margin-bottom:20px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  height:calc(4 * 1.65em);
}
.mcard .go{
  font-size:10.5px;letter-spacing:2px;font-weight:700;color:var(--accent-2);
  display:inline-flex;align-items:center;gap:9px;transition:gap .35s;
}
.mcard:hover .go{gap:16px}
.mcard::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--accent-2);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.7,.3,1);z-index:3}
.mcard:hover::after{transform:scaleX(1)}

@media(max-width:900px){.mcard{aspect-ratio:4/3}}
@media(max-width:560px){.mcard{aspect-ratio:3/2}.mcard p{-webkit-line-clamp:3;height:calc(3 * 1.65em)}}

/* Dual CTA split ---------------------------------------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;min-height:420px}
.duo > div{position:relative;overflow:hidden;padding:76px 56px;display:flex;flex-direction:column;justify-content:center;transition:flex .4s}
.duo .left{background:var(--ink);color:#fff}
.duo .right{background:var(--accent);color:#fff}
.duo > div::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.06);top:-180px;right:-140px;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.duo > div:hover::before{transform:scale(1.35)}
.duo h3{position:relative;z-index:2;font-size:clamp(24px,2.8vw,32px);font-weight:200;margin-bottom:16px}
.duo h3 b{font-weight:600}
.duo .left h3 b{color:var(--accent-2)}
.duo p{position:relative;z-index:2;font-size:15.5px;line-height:1.85;color:rgba(255,255,255,.78);margin-bottom:30px;max-width:38ch}
.duo .acts{position:relative;z-index:2}
.duo .right .cta{background:#fff;color:var(--accent)}
.duo .right .cta:hover{box-shadow:0 16px 34px rgba(0,0,0,.22)}
@media(max-width:860px){.duo{grid-template-columns:1fr}.duo > div{padding:56px var(--pad)}}

/* Review cards ------------------------------------------------------------ */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px}
.review{background:var(--page);border:1px solid var(--line);border-radius:var(--r-card);padding:36px 32px;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s,border-color .5s}
.alt .review{background:#fff}
.review:hover{transform:translateY(-8px);border-color:rgba(90,166,60,.5);box-shadow:0 26px 54px rgba(14,29,38,.1)}
.stars{color:var(--accent);letter-spacing:3px;font-size:15px;margin-bottom:20px}
.review blockquote{font-size:16px;line-height:1.85;color:var(--ink-2);font-weight:300;margin-bottom:24px;flex:1 0 auto}
.review .who{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--soft)}
.review .who b{display:block;color:var(--ink);margin-bottom:4px;font-size:13px;letter-spacing:.4px;font-weight:600}

/* Icon stats -------------------------------------------------------------- */
.stat .ico{width:44px;height:44px;margin:0 auto 18px;border-radius:50%;background:rgba(90,166,60,.12);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px}

/* Bigger footer ----------------------------------------------------------- */
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.5fr;gap:44px}
.fcols h5{font-size:10.5px;letter-spacing:2.4px;color:var(--accent-2);font-weight:700;margin-bottom:20px}
.fcols p{font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.9}
.fcols a{color:rgba(255,255,255,.72);text-decoration:none;font-size:13px;transition:color .3s,padding-left .3s;display:block;padding:5px 0}
.fcols a:hover{color:#fff;padding-left:5px}
.news-in{display:flex;border-bottom:1px solid rgba(255,255,255,.25);margin-top:6px}
.news-in input{flex:1;background:none;border:none;outline:none;color:#fff;font-family:inherit;font-size:14px;padding:12px 2px}
.news-in input::placeholder{color:rgba(255,255,255,.4)}
.news-in button{background:none;border:none;color:var(--accent-2);cursor:pointer;font-family:inherit;font-size:11px;letter-spacing:1.6px;font-weight:700;padding:0 4px}
.news-note{font-size:11.5px;color:rgba(255,255,255,.4);margin-top:12px;line-height:1.7}
@media(max-width:980px){.fcols{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:560px){.fcols{grid-template-columns:1fr}}

/* ==========================================================================
   Ambient background — soft green blobs and outlined rings
   Decorative only: pointer-events off, sits under all content.
   Alpha values below control strength. Raise/lower them together.
   ========================================================================== */

section.block{position:relative;overflow:hidden;isolation:isolate}
section.block > .wrap{position:relative;z-index:1}

section.block::before,
section.block::after{
  content:"";position:absolute;border-radius:50%;
  pointer-events:none;z-index:0;
}

/* --- White sections ---------------------------------------------------- */
section.block:not(.alt)::before{
  width:660px;height:660px;
  background:radial-gradient(circle,rgba(90,166,60,.30),rgba(90,166,60,.10) 45%,transparent 70%);
  top:-250px;right:-190px;
}
section.block:not(.alt)::after{
  width:520px;height:520px;
  background:radial-gradient(circle,rgba(63,125,41,.24),rgba(63,125,41,.08) 48%,transparent 72%);
  bottom:-210px;left:-160px;
}
section.block:not(.alt):nth-of-type(even)::before{right:auto;left:-210px}
section.block:not(.alt):nth-of-type(even)::after{left:auto;right:-180px}

/* --- Wash sections ------------------------------------------------------ */
section.block.alt::before{
  width:580px;height:580px;
  background:radial-gradient(circle,rgba(90,166,60,.18),transparent 70%);
  top:-230px;left:-170px;
}
section.block.alt::after{
  width:440px;height:440px;
  background:radial-gradient(circle,rgba(63,125,41,.14),transparent 72%);
  bottom:-190px;right:-140px;
}

/* --- Bubble cluster ------------------------------------------------------
   Four outlined rings per section. Every ring sits at least its own radius
   from each edge of its box, so nothing is clipped by overflow:hidden. The
   box bleeds sideways into the page margins but never vertically.          */
section.block > .wrap::before{
  content:"";position:absolute;inset:0 -300px;
  pointer-events:none;z-index:-1;
  background:
    radial-gradient(circle 110px at 165px 155px,
      transparent 108px, rgba(90,166,60,.34) 109px, rgba(90,166,60,.34) 110px, transparent 111px),
    radial-gradient(circle 80px at calc(100% - 135px) 205px,
      transparent 78px, rgba(90,166,60,.28) 79px, rgba(90,166,60,.28) 80px, transparent 81px),
    radial-gradient(circle 58px at calc(100% - 265px) calc(100% - 115px),
      transparent 56px, rgba(63,125,41,.30) 57px, rgba(63,125,41,.30) 58px, transparent 59px),
    radial-gradient(circle 95px at 305px calc(100% - 135px),
      transparent 93px, rgba(90,166,60,.24) 94px, rgba(90,166,60,.24) 95px, transparent 96px);
  background-repeat:no-repeat;
}
section.block:nth-of-type(even) > .wrap::before{transform:scaleX(-1)}

/* Short sections can't fit the lower pair without clipping */
section.block.short > .wrap::before{display:none}

@media(max-width:900px){
  section.block::before,section.block::after{transform:scale(.65)}
  section.block > .wrap::before{inset:0 -60px;opacity:.7}
}
@media(max-width:600px){
  section.block > .wrap::before{display:none}
}

/* ==========================================================================
   Process timeline — Employers and Candidates
   Rows light up as they scroll into view and a spine fills down the page.
   Without JS every row is fully visible, so nothing is hidden.
   ========================================================================== */

.tl{position:relative;max-width:940px;margin:0 auto}
.tl .spine{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--line);transform:translateX(-50%)}
.tl .spine i{
  position:absolute;top:0;left:0;width:100%;height:0;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:0 0 14px rgba(90,166,60,.45);
}

.tlrow{display:grid;grid-template-columns:1fr 78px 1fr;align-items:center;margin-bottom:70px}
.tlrow:last-child{margin-bottom:0}
.js .tlrow{opacity:.35;transition:opacity .5s}
.js .tlrow.live{opacity:1}

.tlcard{
  background:var(--page);border:1px solid var(--line);border-radius:var(--r-card);padding:32px 30px;
  transition:border-color .5s,box-shadow .5s;
}
.alt .tlcard{background:var(--wash)}
.tlrow.live .tlcard{border-color:rgba(90,166,60,.5);box-shadow:0 20px 44px rgba(14,29,38,.08)}
.tlrow.left .tlcard{grid-column:1;text-align:right}
.tlrow.right .tlcard{grid-column:3}
.tlrow .gap{grid-column:3}
.tlrow.right .gap{grid-column:1}

.tldot{
  grid-column:2;justify-self:center;width:54px;height:54px;border-radius:50%;
  background:var(--page);border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;color:var(--soft);z-index:2;
  transition:all .5s cubic-bezier(.2,.7,.3,1);
}
.alt .tldot{background:var(--wash)}
.tlrow.live .tldot{
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  border-color:transparent;color:#fff;transform:scale(1.12);
  box-shadow:0 0 0 7px rgba(90,166,60,.13);
}

.tlcard .n{font-size:10px;letter-spacing:2.6px;color:var(--accent);font-weight:700;margin-bottom:10px}
.tlcard h3{font-size:20px;font-weight:500;margin-bottom:10px}
.tlcard p{font-size:14.5px;color:var(--soft);line-height:1.8}
.tlcard ul{list-style:none;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.tlcard li{font-size:13px;color:var(--soft);padding:5px 0;line-height:1.6}

@media(max-width:820px){
  .tl .spine{left:26px}
  .tlrow{grid-template-columns:54px 1fr;gap:20px;margin-bottom:44px}
  /* grid-row:1 forced on both: without it, auto-placement's "sparse" packing
     depends on DOM order vs column order, and .tlrow.left has them reversed
     (card=col2 appears before dot=col1 in the markup) — that pushes the dot
     into a second grid row instead of alongside its card. Right rows only
     "worked" by DOM-order coincidence. */
  .tlrow .tlcard,.tlrow.left .tlcard,.tlrow.right .tlcard{grid-column:2;grid-row:1;text-align:left}
  .tldot{grid-column:1;grid-row:1;justify-self:start}
  .tlrow .gap{display:none}
}

/* ==========================================================================
   Meet the team
   ========================================================================== */

/* Department filter */
.teamfilter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:56px}
.teamfilter button{
  background:none;border:1px solid var(--line);cursor:pointer;font-family:inherit;
  font-size:11px;letter-spacing:1.6px;font-weight:700;color:var(--soft);
  padding:13px 22px;border-radius:var(--r-btn);transition:all .35s;
}
.teamfilter button:hover{border-color:var(--accent);color:var(--accent)}
.teamfilter button.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* Group heading */
.teamgroup{margin-bottom:70px}
.teamgroup:last-child{margin-bottom:0}
.teamgroup > h3{
  font-size:11px;letter-spacing:3.4px;color:var(--accent);font-weight:700;
  padding-bottom:16px;margin-bottom:32px;border-bottom:1px solid var(--line);
}

/* Grid */
.teamgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:24px}

.member{
  background:var(--page);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s,border-color .5s;
}
.alt .member{background:#fff}
.member:hover{transform:translateY(-6px);border-color:rgba(90,166,60,.5);box-shadow:0 22px 46px rgba(14,29,38,.1)}

.member .shotwrap{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--wash)}
.member .shotwrap img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35);transition:transform .8s cubic-bezier(.2,.7,.3,1),filter .5s}
.member:hover .shotwrap img{transform:scale(1.06);filter:grayscale(0)}

/* Placeholder portrait — shown until a real photo is dropped in */
.member .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(90,166,60,.16),rgba(63,125,41,.07));
}
.member .ph svg{width:58px;height:58px;opacity:.45}
.member .ph::after{
  content:"PHOTO";position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  font-size:9px;letter-spacing:2.4px;font-weight:700;color:var(--accent);opacity:.6;
}

.member .body{padding:22px 22px 24px}
.member .tag{
  display:inline-block;font-size:9.5px;letter-spacing:2px;font-weight:700;
  color:var(--accent);background:rgba(90,166,60,.1);
  padding:5px 10px;border-radius:var(--r-btn);margin-bottom:14px;
}
.member h4{font-size:17px;font-weight:600;margin-bottom:4px}
.member .role{font-size:13.5px;color:var(--soft);line-height:1.6}
.member .email{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:10px;letter-spacing:1.6px;font-weight:700;color:var(--soft);
  text-decoration:none;transition:color .3s;
}
.member .email:hover{color:var(--accent)}

@media(max-width:560px){
  .teamgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
  .member .body{padding:16px 16px 18px}
  .member h4{font-size:15px}
}

/* ==========================================================================
   Jobs board
   ========================================================================== */

.jobtools{
  background:var(--page);border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 28px;margin-bottom:34px;
}
.alt .jobtools{background:#fff}
.jobrow{display:grid;grid-template-columns:1.4fr 1fr auto;gap:18px;align-items:end}
.jf label{display:block;font-size:10px;letter-spacing:2px;font-weight:700;color:var(--accent);margin-bottom:9px}
.jf input,.jf select{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:transparent;
  border:none;border-bottom:1px solid var(--line);padding:11px 2px;outline:none;
  transition:border-color .35s;
}
.jf input:focus,.jf select:focus{border-color:var(--accent)}
.jf select{cursor:pointer}
.jobrow .clear{
  background:none;border:1px solid var(--line);cursor:pointer;font-family:inherit;
  font-size:11px;letter-spacing:1.6px;font-weight:700;color:var(--soft);
  padding:12px 20px;border-radius:var(--r-btn);transition:all .35s;white-space:nowrap;
}
.jobrow .clear:hover{border-color:var(--accent);color:var(--accent)}

.divfilter{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.divfilter button{
  background:none;border:1px solid var(--line);cursor:pointer;font-family:inherit;
  font-size:10.5px;letter-spacing:1.6px;font-weight:700;color:var(--soft);
  padding:11px 18px;border-radius:var(--r-btn);transition:all .35s;
}
.divfilter button:hover{border-color:var(--accent);color:var(--accent)}
.divfilter button.on{background:var(--ink);border-color:var(--ink);color:#fff}

.jobmeta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.jobmeta .count{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--soft)}
.jobmeta .count em{font-style:normal;color:var(--accent)}
.jobmeta .sortwrap{display:flex;align-items:center;gap:10px}
.jobmeta .sortwrap span{font-size:10.5px;letter-spacing:1.6px;font-weight:700;color:var(--soft)}
.jobmeta select{
  font-family:inherit;font-size:13px;color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:var(--r-btn);padding:8px 12px;cursor:pointer;outline:none;
}

/* Job card */
.joblist{display:flex;flex-direction:column;gap:16px}
.job{
  background:var(--page);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;transition:border-color .4s,box-shadow .4s,transform .4s cubic-bezier(.2,.7,.3,1);
}
.alt .job{background:#fff}
.job:hover{border-color:rgba(90,166,60,.5);box-shadow:0 18px 40px rgba(14,29,38,.09);transform:translateY(-3px)}

.jobhead{width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:26px 28px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start}
.jobhead .top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.jobtag{
  font-size:9.5px;letter-spacing:1.8px;font-weight:700;color:var(--accent);
  background:rgba(90,166,60,.1);padding:5px 10px;border-radius:var(--r-btn);
}
.jobnew{font-size:9.5px;letter-spacing:1.8px;font-weight:700;color:#fff;background:var(--accent);padding:5px 10px;border-radius:var(--r-btn)}
.job h3{font-size:20px;font-weight:500;margin-bottom:8px;transition:color .3s}
.job:hover h3{color:var(--accent)}
.jobfacts{display:flex;flex-wrap:wrap;gap:18px;font-size:13.5px;color:var(--soft)}
.jobfacts b{font-weight:600;color:var(--ink)}
.jobfacts .dist{color:var(--accent);font-weight:600}
.job .summary{font-size:14.5px;color:var(--soft);line-height:1.8;margin-top:12px;max-width:70ch}

.jobtoggle{
  flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;position:relative;transition:all .4s;
}
.jobtoggle::before,.jobtoggle::after{content:"";position:absolute;background:var(--soft);transition:transform .4s cubic-bezier(.2,.7,.3,1),background .3s}
.jobtoggle::before{width:12px;height:1.5px}
.jobtoggle::after{width:1.5px;height:12px}
.job.open .jobtoggle{background:var(--accent);border-color:var(--accent)}
.job.open .jobtoggle::before,.job.open .jobtoggle::after{background:#fff}
.job.open .jobtoggle::after{transform:rotate(90deg)}

.jobbody{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.3,1)}
.jobinner{padding:0 28px 30px;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;border-top:1px solid var(--line);padding-top:26px;margin:0 28px;padding-left:0;padding-right:0}
.jobinner p{font-size:14.5px;color:var(--soft);line-height:1.9;margin-bottom:14px}
.jobinner h4{font-size:10.5px;letter-spacing:2px;color:var(--accent);font-weight:700;margin-bottom:14px}
.jobinner ul{list-style:none;border-left:2px solid var(--accent)}
.jobinner li{padding:9px 0 9px 18px;font-size:13.5px;border-bottom:1px solid var(--line)}
.jobinner li:last-child{border-bottom:none}
.jobinner .ref{margin-top:18px;font-size:11px;letter-spacing:1.6px;color:var(--soft);font-weight:600}
.jobinner .acts{margin-top:22px}

/* Empty and loading states */
.jobempty{
  display:none;text-align:center;padding:64px 30px;
  border:1px dashed var(--line);border-radius:var(--r-card);
}
.jobempty h3{font-size:20px;font-weight:400;margin-bottom:10px}
.jobempty p{color:var(--soft);font-size:14.5px;max-width:46ch;margin:0 auto 24px}
.geonote{font-size:12px;color:var(--soft);margin-top:12px;display:none}
.geonote.show{display:block}
.geonote.err{color:#c0392b}

@media(max-width:820px){
  .jobrow{grid-template-columns:1fr;gap:16px}
  .jobrow .clear{justify-self:start}
  .jobinner{grid-template-columns:1fr;gap:24px}
  .jobhead{padding:22px 20px}
  .jobinner{margin:0 20px}
}

/* Applying-for notice on the contact form ---------------------------------- */
.applying{
  display:none;position:relative;
  padding:18px 22px;margin-bottom:26px;
  border:1px solid rgba(90,166,60,.45);border-left:3px solid var(--accent);
  border-radius:var(--r-card);background:rgba(90,166,60,.07);
}
.applying.show{display:block;animation:spaneIn .45s cubic-bezier(.2,.7,.3,1)}
@keyframes spaneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.applying b{display:block;font-size:10px;letter-spacing:2.2px;color:var(--accent);font-weight:700;margin-bottom:7px}
.applying span{display:block;font-size:16px;font-weight:500;line-height:1.5}
.applying span em{font-style:normal;font-weight:400;color:var(--soft);font-size:13.5px;display:block;margin-top:3px}
.applying a{
  position:absolute;top:18px;right:20px;
  font-size:10px;letter-spacing:1.6px;font-weight:700;color:var(--soft);
  text-decoration:none;transition:color .3s;
}
.applying a:hover{color:var(--accent)}
@media(max-width:560px){.applying a{position:static;display:inline-block;margin-top:10px}}

/* Blog ---------------------------------------------------------------------- */
.postfilter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:44px}
.postfilter button{
  background:none;border:1px solid var(--line);cursor:pointer;font-family:inherit;
  font-size:11px;letter-spacing:1.6px;font-weight:700;color:var(--soft);
  padding:12px 20px;border-radius:var(--r-btn);transition:all .35s;
}
.postfilter button:hover{border-color:var(--accent);color:var(--accent)}
.postfilter button.on{background:var(--ink);border-color:var(--ink);color:#fff}

.postgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.postcard{
  display:block;background:var(--page);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .4s,box-shadow .4s,transform .4s cubic-bezier(.2,.7,.3,1);
}
.postcard:hover{border-color:rgba(90,166,60,.5);box-shadow:0 18px 40px rgba(14,29,38,.09);transform:translateY(-4px)}
.postcard .shot{aspect-ratio:16/10;overflow:hidden;background:var(--wash)}
.postcard .shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.postcard:hover .shot img{transform:scale(1.06)}
.postcard .body{padding:24px 26px 26px}
.postcard .posttag{
  display:inline-block;font-size:9.5px;letter-spacing:1.8px;font-weight:700;color:var(--accent);
  background:rgba(90,166,60,.1);padding:5px 10px;border-radius:var(--r-btn);margin-bottom:14px;
}
.postcard h3{font-size:19px;font-weight:500;margin-bottom:10px;line-height:1.3;transition:color .3s}
.postcard:hover h3{color:var(--accent)}
.postcard .excerpt{font-size:14px;color:var(--soft);line-height:1.75;margin-bottom:18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.postmeta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--soft)}
.postmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--soft);flex:none}

.postempty{display:none;text-align:center;padding:64px 30px;border:1px dashed var(--line);border-radius:var(--r-card)}
.postempty.show{display:block}
.postempty h3{font-size:20px;font-weight:400;margin-bottom:10px}
.postempty p{color:var(--soft);font-size:14.5px;max-width:46ch;margin:0 auto}

/* Article page */
.article-head{max-width:78ch}
.article-head .crumb{color:var(--soft)}
.article-head .crumb a{color:var(--soft)}
.article-head .crumb a:hover{color:var(--accent)}
.article-head .posttag{
  display:inline-block;font-size:9.5px;letter-spacing:1.8px;font-weight:700;color:var(--accent);
  background:rgba(90,166,60,.1);padding:5px 10px;border-radius:var(--r-btn);margin-bottom:18px;
}
.article-head h1{font-size:clamp(28px,4.2vw,46px);font-weight:200;line-height:1.15;margin-bottom:20px}
.article-cover{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--r-card);margin:36px 0 8px;background:var(--wash)}
.article-body{max-width:72ch}
.prose{font-size:16px;line-height:1.9;color:var(--ink)}
.prose p{margin-bottom:22px;color:var(--soft)}
.prose h2{font-size:26px;font-weight:500;margin:40px 0 18px;color:var(--ink)}
.prose h3{font-size:20px;font-weight:600;margin:32px 0 14px;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 22px 22px;color:var(--soft)}
.prose li{margin-bottom:8px;line-height:1.8}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(90,166,60,.4)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose img{width:100%;border-radius:var(--r-card);margin:28px 0}
.prose blockquote{border-left:3px solid var(--accent);padding:4px 0 4px 22px;margin:28px 0;color:var(--ink);font-size:18px;font-style:italic}
.prose table{width:100%;border-collapse:collapse;margin:0 0 28px;font-size:14.5px}
.prose th,.prose td{text-align:left;padding:10px 16px 10px 0;border-bottom:1px solid var(--line)}
.prose th{color:var(--ink);font-weight:600;font-size:11px;letter-spacing:1.2px;text-transform:uppercase}
.prose td{color:var(--soft)}
.prose h4{font-size:15px;font-weight:700;color:var(--ink);margin:20px 0 4px}
.prose ol[type="a"]{margin-left:22px}
.prose ol[type="a"] li{margin-bottom:14px}
.prose strong{color:var(--ink);font-weight:600}
.article-foot{margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}

@media(max-width:560px){.article-cover{aspect-ratio:4/3}}

/* Link grid (FAQ "find your way around" cards) ---------------------------- */
a.cell{display:block;text-decoration:none;color:inherit}
.cell .go{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:1.6px;font-weight:700;color:var(--accent);margin-top:14px;transition:gap .3s}
.cell:hover .go{gap:12px}

/* FAQ ----------------------------------------------------------------------- */
.faqfilter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:44px}
.faqfilter button{
  background:none;border:1px solid var(--line);cursor:pointer;font-family:inherit;
  font-size:11px;letter-spacing:1.6px;font-weight:700;color:var(--soft);
  padding:12px 20px;border-radius:var(--r-btn);transition:all .35s;
}
.faqfilter button:hover{border-color:var(--accent);color:var(--accent)}
.faqfilter button.on{background:var(--ink);border-color:var(--ink);color:#fff}

.faqgroup{margin-bottom:56px}
.faqgroup h2{font-size:22px;font-weight:500;margin-bottom:22px}
.faqlist{display:flex;flex-direction:column;gap:12px}
.faq{
  background:var(--page);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;transition:border-color .35s;
}
.faq[open],.faq:hover{border-color:rgba(90,166,60,.5)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 26px;font-size:16px;font-weight:500;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.faq summary::-webkit-details-marker{display:none}
.faq .plus{flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;position:relative;transition:all .35s}
.faq .plus::before,.faq .plus::after{content:"";position:absolute;background:var(--soft);transition:transform .35s cubic-bezier(.2,.7,.3,1),background .3s}
.faq .plus::before{top:50%;left:8px;right:8px;height:1.5px;transform:translateY(-50%)}
.faq .plus::after{left:50%;top:8px;bottom:8px;width:1.5px;transform:translateX(-50%)}
.faq[open] .plus{background:var(--accent);border-color:var(--accent)}
.faq[open] .plus::before,.faq[open] .plus::after{background:#fff}
.faq[open] .plus::after{transform:translateX(-50%) rotate(90deg)}
.faq .a{padding:0 26px 24px;font-size:14.5px;color:var(--soft);line-height:1.9;max-width:70ch}
.faq .a a{color:var(--accent)}
.faq .a p+p{margin-top:12px}

/* Cookie notice ------------------------------------------------------------- */
.cookie-note{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--ink);color:#fff;padding:20px 0;
  transform:translateY(120%);transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.cookie-note.show{transform:translateY(0)}
.cookie-note .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cookie-note p{font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.6;max-width:68ch;margin:0}
.cookie-note a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}
.cookie-note a:hover{text-decoration-color:#fff}
.cookie-note .acts{flex:none}
.cookie-note .cta{flex:none}
@media(max-width:560px){
  .cookie-note .wrap{flex-direction:column;align-items:stretch;text-align:center}
  .cookie-note .acts{flex-direction:column;width:100%}
  .cookie-note .cta{width:100%}
}