/* Oakmyre - shared styles for programmatic location pages.
   Matches the /new homepage: petrol palette, Fraunces + Inter. */
:root{
  --brand:#155F82;--deep:#103E52;--deeper:#0B2F40;--bright:#1E7BA6;
  --ice:#DCEBF2;--ice-soft:#EEF5F9;--ink:#162A33;--muted:#5C6F77;
  --line:#E2ECF1;--paper:#fff;--paper-2:#F6FAFC;
  --shadow:0 18px 50px -24px rgba(11,47,64,.45);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--bright);display:inline-block;margin:0 0 16px}
.eyebrow.light{color:#BFE0EF}
.ar{display:inline-block;transition:transform .3s}
.tlink{font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:9px}
.tlink:hover .ar{transform:translateX(5px)}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding-block:clamp(12px,2vw,18px);padding-inline:28px;background:var(--deep);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.55)}
.brand-logo img{height:32px;width:auto}
.nav{display:flex;align-items:center;gap:30px}
.nav a{color:#fff;font-size:.85rem;font-weight:500;letter-spacing:.04em;opacity:.85}
.nav a:hover{opacity:1}
.nav .nav-cta{border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:9px 20px;opacity:1}
.nav .nav-cta:hover{background:#fff;color:var(--deep);border-color:var(--brand)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;padding:14px 26px;border-radius:999px;transition:.25s}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--deep);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.32)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-outline{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}
.btn-outline:hover{background:var(--brand);color:#fff;border-color:var(--deep);transform:translateY(-2px)}
.btn:hover .ar{transform:translateX(5px)}

/* breadcrumb */
.crumb{font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:22px}
.crumb a{color:rgba(255,255,255,.8)}.crumb a:hover{color:#fff}

/* hero */
.hero{background:linear-gradient(150deg,#16607F 0%,#103E52 58%,#0C3142 100%);color:#fff;position:relative;overflow:hidden;
  padding:150px 0 86px}
.hero::after{content:"";position:absolute;right:-90px;bottom:-110px;width:420px;height:420px;
  background:url("../img/leaf-icon.png") center/contain no-repeat;opacity:.08;transform:rotate(-8deg);pointer-events:none}
.hero .inner{position:relative;max-width:760px}
.hero h1{font-size:clamp(2.4rem,5vw,3.8rem);margin:6px 0 22px}
.hero p.lede{font-size:1.18rem;color:rgba(255,255,255,.86);max-width:60ch;margin:0 0 32px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}

/* values strip */
.strip{background:var(--deeper);color:#fff}
.strip .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;padding:22px 28px}
.strip span{font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.9)}
.strip span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bright)}

section{padding:92px 0}
.section-head{max-width:680px;margin:0 0 46px}
.section-head h2{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:16px}
.section-head p{color:var(--muted);font-size:1.08rem;margin:0}
.lead-quote{font-family:var(--serif);font-size:1.3rem;color:var(--brand);font-style:italic;line-height:1.4}

/* intro split with image */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split img{border-radius:18px;box-shadow:var(--shadow);width:100%;object-fit:cover}
.split h2{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:18px}
.split p{color:var(--muted);margin:0 0 16px}
.photo-slot{position:relative}

/* sectors */
.sectors{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sector{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;display:flex;gap:14px;align-items:flex-start}
.sector .leaf{width:26px;height:26px;flex-shrink:0;background:url("../img/leaf-icon.png") center/contain no-repeat;opacity:.9;margin-top:2px}
.sector b{display:block;font-size:1.04rem;color:var(--deep)}
.sector span{font-size:.9rem;color:var(--muted)}

/* service cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cards.cards-3{grid-template-columns:repeat(3,1fr)}
.card .price{display:block;margin-top:18px;font-weight:600;color:var(--deep);font-size:.92rem}

/* tick list (who it's for) */
.ticklist{display:grid;grid-template-columns:1fr 1fr;gap:4px 36px}
.ticklist div{display:flex;gap:13px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line);font-size:1rem;color:var(--ink)}
.ticklist .leaf{width:20px;height:20px;flex-shrink:0;margin-top:3px;background:url("../img/leaf-icon.png") center/contain no-repeat}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 26px;transition:.3s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#CFE2EC}
.card .num{font-family:var(--serif);color:var(--bright);font-size:1rem;display:block;margin-bottom:12px}
.card h3{font-size:1.22rem;margin-bottom:10px}
.card p{color:var(--muted);font-size:.95rem;margin:0}

/* authority */
.authority{background:var(--deep);color:#fff}
.authority .split p{color:rgba(255,255,255,.82)}
.authority .split h2{color:#fff}
.authority img{aspect-ratio:1/1;object-fit:cover;object-position:center top}
.authority .q{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:#BFE0EF;line-height:1.4;margin-top:8px}
.authority .photo-slot img{border-radius:18px;box-shadow:var(--shadow)}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 28px;display:flex;flex-direction:column}
.quote .mark{font-family:var(--serif);font-size:2.6rem;line-height:.6;color:var(--ice);height:24px}
.quote p{color:#33454c;font-size:.98rem;margin:10px 0 20px}
.quote .who{margin-top:auto;font-weight:600;color:var(--deep);font-size:.92rem}
.quote .who span{display:block;font-weight:400;color:var(--muted);font-size:.84rem}

/* track record */
.record{background:var(--paper-2);border-top:1px solid var(--line)}
.record-list{column-count:2;column-gap:46px}
.record-list div{break-inside:avoid;padding:12px 0;border-top:1px solid var(--line);font-size:.98rem}
.record-list b{font-weight:600;color:var(--deep)}
.record-list span{color:var(--muted)}

/* faq */
.faq details{border-top:1px solid var(--line);padding:6px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-weight:600;font-size:1.06rem;color:var(--deep);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:1.4rem;color:var(--bright);transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin:0 0 18px;max-width:75ch}

/* areas grid (hub) */
.areas{background:var(--paper-2);border-top:1px solid var(--line)}
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.area-grid a{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 16px;font-size:.94rem;font-weight:500;color:var(--deep);display:flex;justify-content:space-between;align-items:center;transition:.2s}
.area-grid a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.area-grid a .ar{color:var(--bright)}

/* contact */
.contact{text-align:center}
.contact .wrap{max-width:760px}
.contact h2{font-size:clamp(2rem,3.4vw,2.8rem);margin-bottom:18px}
.contact p.invite{font-size:1.1rem;color:var(--muted);margin:0 auto 34px;max-width:58ch}
.contact-card{display:inline-block;background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:32px 44px;box-shadow:var(--shadow)}
.contact-card .name{font-family:var(--serif);font-size:1.4rem;color:var(--deep)}
.contact-card .role{color:var(--muted);font-size:.9rem;letter-spacing:.03em;margin-bottom:16px}
.contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.contact-links a{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.96rem;color:var(--brand);border:1px solid var(--line);background:#fff;border-radius:999px;padding:12px 22px;transition:.25s}
.contact-links a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.contact-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:0 auto 34px}
/* form pages (Engage / Register) */
.form-wrap{max-width:820px}
.form-intro{max-width:640px;margin:0 auto 40px;text-align:center}
.form-intro p{color:var(--muted);font-size:1.08rem;margin:0 0 14px}
.form-embed{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.form-embed iframe{display:block;border-radius:12px;background:#fff}
.form-cross{text-align:center;margin-top:32px;color:var(--muted)}
.form-cross a{color:var(--brand);font-weight:600;white-space:nowrap}
.form-cross a:hover{text-decoration:underline}
/* testimonials page */
.testi-list{max-width:840px;margin:0 auto;display:grid;gap:26px}
.testi{margin:0;background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:36px 40px}
.testi .k{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.testi .qmark{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--brand);opacity:.35;margin:6px 0 8px}
.testi p{margin:0 0 14px}
.testi p:last-of-type{margin-bottom:20px}
.testi .who{font-weight:600;color:var(--deep)}
.testi .who span{display:block;font-weight:400;font-size:.85rem;color:var(--muted);margin-top:2px}
@media(max-width:600px){.testi{padding:26px 22px}}
.testi-more{text-align:center;margin-top:34px}
.testi-more a{font-weight:600;color:var(--brand)}
.testi-more a:hover{text-decoration:underline}
.testi-more .ar{display:inline-block;transition:transform .25s}
.testi-more a:hover .ar{transform:translateX(4px)}

/* footer */
.site-footer{background:var(--deeper);color:rgba(255,255,255,.66);padding:44px 0;text-align:center}
.site-footer img{height:28px;margin:0 auto 16px}
.site-footer p{margin:5px 0;font-size:.82rem;line-height:1.6}
.site-footer .reg{opacity:.55;max-width:560px;margin:14px auto 0}
.site-footer a{color:rgba(255,255,255,.8)}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;max-width:820px;margin:0 auto 22px;font-size:.88rem}
.foot-nav a{color:rgba(255,255,255,.8)}
.foot-nav a:hover{color:#fff}
.foot-frameworks{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:24px auto 10px}
.foot-frameworks img{height:40px;width:auto;background:#fff;border-radius:10px;padding:8px 14px;box-sizing:content-box}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;max-width:820px;margin:18px auto 4px;font-size:.78rem}
.foot-legal a{color:rgba(255,255,255,.55)}
.foot-legal a:hover{color:#fff}

/* ---------- articles (insights + case studies) ---------- */
.article-hero{background:linear-gradient(150deg,#16607F 0%,#103E52 58%,#0C3142 100%);color:#fff;padding:148px 0 72px;position:relative;overflow:hidden}
.article-hero::after{content:"";position:absolute;right:-90px;bottom:-110px;width:420px;height:420px;background:url("../img/leaf-icon.png") center/contain no-repeat;opacity:.08;transform:rotate(-8deg);pointer-events:none}
.article-hero .wrap{max-width:820px;position:relative}
.article-hero h1{font-size:clamp(2.1rem,4vw,3.2rem);margin:6px 0 20px}
.article-hero .lead{font-size:1.18rem;color:rgba(255,255,255,.88);max-width:62ch;margin:0}
.article-meta{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.7);margin-top:24px}
.article-meta b{color:#BFE0EF;font-weight:600}
.article{padding:78px 0}
.article .wrap{max-width:760px}
.ablock+.ablock{margin-top:40px}
.article h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 16px;color:var(--deep)}
.article .ablock h3{font-size:1.12rem;margin:22px 0 8px;color:var(--brand)}
.legal-updated{font-size:.82rem;color:rgba(255,255,255,.6);margin:18px 0 0}
.article.legal .ablock>p{color:#3a4b52;font-size:1.02rem}
.article.legal a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.legal-note{display:block;background:var(--ice-soft);border-left:3px solid var(--bright);border-radius:6px;padding:10px 14px;margin:10px 0;font-size:.92rem;color:var(--muted)}
.article .ablock>p{margin:0 0 16px;color:#33454c;font-size:1.06rem;line-height:1.7}
.article .ablock ul{margin:0 0 4px;padding:0;list-style:none}
.article .ablock li{position:relative;padding:11px 0 11px 32px;border-top:1px solid var(--line);font-size:1.02rem;color:var(--ink)}
.article .ablock li::before{content:"";position:absolute;left:0;top:15px;width:18px;height:18px;background:url("../img/leaf-icon.png") center/contain no-repeat}
.article .lead-quote{margin:6px 0;font-size:1.3rem}
.stats{background:var(--deep);color:#fff;border-radius:18px;padding:34px 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:24px;text-align:center;margin:8px 0}
.stats b{display:block;font-family:var(--serif);font-size:2.4rem;color:#9FD3E6;line-height:1}
.stats span{display:block;font-size:.84rem;color:rgba(255,255,255,.78);margin-top:8px}
.takeaways{counter-reset:tk}
.article .ablock ul.takeaways li{padding-left:48px}
.article .ablock ul.takeaways li::before{counter-increment:tk;content:counter(tk);background:none;left:2px;top:9px;width:auto;height:auto;color:var(--bright);font-family:var(--serif);font-size:1.5rem;line-height:1}
.related{background:var(--paper-2);border-top:1px solid var(--line);padding:70px 0}
.related .wrap{max-width:1040px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.rel-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;transition:transform .3s,box-shadow .3s,border-color .3s}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#CFE2EC}
.rel-card .k{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bright);font-weight:700}
.rel-card h3{font-size:1.14rem;margin:10px 0 0;color:var(--deep)}
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.insight-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s}
.insight-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#CFE2EC}
.insight-card .k{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bright);font-weight:700}
.insight-card h3{font-size:1.28rem;margin:12px 0 12px;color:var(--deep)}
.insight-card p{color:var(--muted);font-size:.96rem;margin:0 0 18px;flex:1}

/* Reveal-on-scroll is progressive enhancement ONLY: content is visible by
   default and hidden only once JS confirms it is running (html.js). If the
   script fails, loads late, or the visitor lands on an anchor, nothing can
   ever be stuck invisible. */
html.js [data-rv]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
html.js [data-rv].in{opacity:1;transform:none}

@media (max-width:960px){
  .split{grid-template-columns:1fr;gap:34px}
  .sector-grid{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr}
  .area-grid{grid-template-columns:1fr 1fr}
  .rel-grid,.insight-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  body{font-size:16px}
  .nav{display:none;position:absolute;top:100%;right:14px;left:14px;flex-direction:column;gap:0;background:var(--deep);border-radius:14px;padding:10px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
  .nav.open{display:flex}
  .nav a{padding:13px 14px;width:100%;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav a:last-child{border-bottom:0}
  .nav .nav-cta{border:0;text-align:left}
  .nav-toggle{display:block}
  section{padding:66px 0}
  .sector-grid,.cards,.cards-3,.area-grid,.record-list,.ticklist,.rel-grid,.insight-grid{grid-template-columns:1fr;column-count:1}
  .contact-card{padding:26px 22px;display:block}
}
@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none}}