/* ==========================================================
   AVV Global Trading — shared skin
   Palette: cobalt (container blue), harbour ink, mist, sea glass,
   one signal orange used only for route/vessel markers.
   Type: Bricolage Grotesque (display) + Hanken Grotesk (body).
   ========================================================== */

:root{
  --ink:#0C1F3F;
  --text:#1A2B47;
  --muted:#55647E;
  --cobalt:#2340E8;
  --cobalt-deep:#1A31B8;
  --mist:#EEF2F9;
  --glass:#DFF4EF;
  --sea:#9FE0CF;
  --signal:#FF5B2E;
  --line:rgba(12,31,63,.14);
  --line-dark:rgba(255,255,255,.22);
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.65;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,dl,dd,dt,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
[id]{scroll-margin-top:104px}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible{outline-color:var(--sea)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Type ---------- */
.display{font-family:var(--display);font-weight:650;letter-spacing:-.03em;line-height:1.03;font-variation-settings:"wdth" 90;color:var(--ink)}
.on-dark .display{color:#fff}
h1.display{font-size:clamp(2.55rem,5.2vw,4.7rem);font-weight:700}
.h2{font-size:clamp(2rem,3.9vw,3.3rem)}
.h2.sm{font-size:clamp(1.75rem,3.2vw,2.6rem)}
.h2.xl{font-size:clamp(2.3rem,5vw,4.2rem)}
.h3{font-family:var(--display);font-weight:600;font-size:1.35rem;line-height:1.2;letter-spacing:-.015em;color:var(--ink);font-variation-settings:"wdth" 94}
.on-dark .h3{color:#fff}
.lead{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.6}
.prose p+p{margin-top:1.1rem}
.muted{color:var(--muted)}
.on-dark p,.on-dark li{color:rgba(255,255,255,.9)}
.kicker{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;font-weight:600;font-size:.98rem;color:var(--cobalt)}
.kicker::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.on-dark .kicker{color:var(--sea)}
.text-link{display:inline-block;margin-top:1.25rem;font-weight:600;color:var(--cobalt);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.text-link:hover{color:var(--cobalt-deep)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 1.5rem;border:1.5px solid transparent;border-radius:999px;font-weight:600;font-size:1rem;line-height:1;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--cobalt);color:#fff}
.btn-primary:hover{background:var(--cobalt-deep)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--cobalt)}
.btn-sea{background:var(--sea);color:var(--ink)}
.btn-sea:hover{background:#fff}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-wa{background:#25D366;color:#052e14}
.btn-wa:hover{background:#4ee08a}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}

/* ---------- Header: floating island ---------- */
.site-header{position:fixed;top:14px;left:0;right:0;z-index:60;pointer-events:none;padding-inline:.75rem}
.bar{pointer-events:auto;max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:1rem;padding:.45rem .5rem .45rem 1rem;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:999px;box-shadow:0 14px 34px -10px rgba(12,31,63,.4),0 0 0 1px rgba(12,31,63,.06)}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;font-variation-settings:"wdth" 94}
.brand-mark{width:30px;height:30px;flex:none}
.nav{display:none;margin-left:auto;align-items:center;gap:.1rem}
.nav a{padding:.5rem .85rem;border-radius:999px;font-weight:500;font-size:.95rem;color:var(--text);transition:background .2s,color .2s}
.nav a:hover{background:var(--mist)}
.nav a[aria-current="page"]{background:var(--ink);color:#fff}
.nav-cta{display:none;padding:.7rem 1.2rem;font-size:.95rem}
.menu-btn{margin-left:auto;width:44px;height:44px;border:0;border-radius:50%;background:var(--mist);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.menu-btn svg{width:22px;height:22px}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.menu-btn[aria-expanded="true"] .hb{display:none}
.mobile-menu{pointer-events:auto;max-width:var(--wrap);margin:8px auto 0;padding:.6rem;background:#fff;border-radius:24px;box-shadow:0 18px 40px -12px rgba(12,31,63,.45),0 0 0 1px rgba(12,31,63,.06)}
.mobile-menu a{display:block;padding:.85rem 1rem;border-radius:14px;font-weight:500;color:var(--ink)}
.mobile-menu a:hover{background:var(--mist)}
.mobile-menu a.m-cta{margin-top:.35rem;background:var(--cobalt);color:#fff;text-align:center;font-weight:600}
@media(min-width:1024px){.nav{display:flex}.nav-cta{display:inline-flex}.menu-btn{display:none}.mobile-menu{display:none!important}}
@media(max-width:420px){.brand{font-size:.9rem}.brand-mark{width:26px;height:26px}.bar{padding-left:.75rem}}

/* ---------- Section scaffolding ---------- */
.section{padding-block:clamp(4rem,8vw,7rem)}
.section.tight{padding-block:clamp(3rem,6vw,4.5rem)}
.bg-mist{background:var(--mist)}
.bg-glass{background:var(--glass)}
.bg-ink{background:var(--ink)}
.bg-cobalt{background:var(--cobalt)}
.split-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,5vw,4rem);align-items:end;margin-bottom:clamp(2.25rem,5vw,4rem)}
.split-wide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.split-wide.flip{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
@media(max-width:860px){.split-head,.split-wide,.split-wide.flip{grid-template-columns:1fr;align-items:start}}

/* ---------- Hero (home) ---------- */
.hero{position:relative;background:var(--cobalt);color:#fff;padding-top:8.25rem;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.hero-chip{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.5rem;padding:.45rem 1rem .45rem .8rem;border:1px solid var(--line-dark);border-radius:999px;font-weight:500;font-size:.95rem;color:#fff;background:rgba(255,255,255,.08)}
.hero-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sea)}
.hero h1{color:#fff;max-width:13ch}
.hero .btn-row{margin-top:2.25rem}
.hero-band{margin-top:clamp(2.5rem,5vw,4.5rem);border-top:1px solid var(--line-dark)}
.hero-band-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:2rem clamp(2rem,5vw,4rem);align-items:center;padding-block:2.25rem 2.75rem}
.hero-band p{max-width:62ch}
.hero-band p+p{margin-top:1rem}
.pillars{display:grid;gap:.9rem}
.pillars li{display:flex;align-items:center;gap:.8rem;font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:-.015em;color:#fff;font-variation-settings:"wdth" 92}
.pillars li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--signal)}
@media(max-width:900px){.hero-grid,.hero-band-grid{grid-template-columns:1fr}.hero h1{max-width:16ch}}

/* Trade lane board */
.route{position:relative;width:100%;max-width:600px;margin-inline:auto;aspect-ratio:560/520}
.route svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lane-main{stroke-dasharray:1000;stroke-dashoffset:1000;animation:lane-draw 2.4s .35s cubic-bezier(.5,0,.2,1) forwards}
@keyframes lane-draw{to{stroke-dashoffset:0}}
.stop{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.stop span{position:absolute;white-space:nowrap;background:#fff;color:var(--ink);font-weight:600;font-size:.9rem;line-height:1.2;padding:.45rem .8rem;border-radius:10px}
.stop.s1 span{left:-6px;top:20px}
.stop.s2 span{right:16px;top:-46px}
.stop.s3 span{right:-6px;top:-52px}
@media(max-width:520px){.stop span{font-size:.78rem;padding:.35rem .6rem;border-radius:8px}.stop.s2 span{top:-40px}.stop.s3 span{top:-44px}}
@media(prefers-reduced-motion:reduce){.lane-main{animation:none;stroke-dashoffset:0}}

/* ---------- Stats ---------- */
.stats{background:#fff;border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:2.25rem 1.5rem 2.25rem 0}
.stat+.stat{padding-left:1.75rem;border-left:1px solid var(--line)}
.stat .num{font-family:var(--display);font-weight:650;font-size:clamp(2.6rem,5.2vw,4.2rem);line-height:1;letter-spacing:-.04em;color:var(--ink);font-variation-settings:"wdth" 88}
.stat .lbl{margin-top:.6rem;color:var(--muted);font-size:.98rem;line-height:1.4}
@media(max-width:760px){.stats-grid{grid-template-columns:1fr 1fr}.stat{padding:1.75rem 1rem 1.75rem 0}.stat+.stat{padding-left:1.25rem}.stat:nth-child(3){padding-left:0;border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---------- Origin story ---------- */
.origin-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.sticky-col{position:sticky;top:120px}
.story{border-left:2px solid var(--line-dark);display:grid;gap:2rem}
.story li{position:relative;padding-left:clamp(1.5rem,3vw,2.5rem);color:rgba(255,255,255,.88)}
.story li::before{content:"";position:absolute;left:-7px;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--sea)}
.story li:last-child::before{background:var(--signal)}
.story li:first-child{font-family:var(--display);font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.35;letter-spacing:-.015em;color:#fff;font-variation-settings:"wdth" 94}
@media(max-width:860px){.origin-grid{grid-template-columns:1fr}.sticky-col{position:static}}

/* ---------- Photos / about ---------- */
.photo{border-radius:28px;overflow:hidden;background:var(--mist);align-self:center}
.photo img{display:block;width:100%;height:auto}
.photo.fit{max-width:none}
.about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.about-grid .lead{margin-top:1.5rem}
@media(max-width:860px){.about-grid{grid-template-columns:1fr}}

/* ---------- Group teaser / link list ---------- */
.group-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.link-list li{border-top:1px solid var(--line)}
.link-list li:last-child{border-bottom:1px solid var(--line)}
.link-list a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem .25rem;font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.015em;color:var(--ink);transition:padding .2s,color .2s}
.link-list a svg{width:22px;height:22px;flex:none;color:var(--cobalt)}
.link-list a:hover{color:var(--cobalt);padding-left:.75rem}
@media(max-width:860px){.group-teaser{grid-template-columns:1fr}}

/* ---------- Focus areas (What we do) ---------- */
.areas{display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--ink)}
.area{padding:2rem 1.75rem 2.25rem 0}
.area+.area{padding-left:1.75rem;border-left:1px solid rgba(12,31,63,.2)}
.area .ico{width:60px;height:60px;color:var(--cobalt);margin-bottom:2.5rem}
.area p{margin-top:.8rem;color:var(--text);font-size:1rem}
@media(max-width:1000px){.areas{grid-template-columns:1fr 1fr}.area{padding:1.75rem 1.25rem 2rem 0}.area+.area{padding-left:1.25rem}.area:nth-child(3){padding-left:0;border-left:0}.area:nth-child(n+3){border-top:1px solid rgba(12,31,63,.2)}.area .ico{margin-bottom:1.75rem}}
@media(max-width:560px){.areas{grid-template-columns:1fr}.area,.area+.area{padding:1.75rem 0;border-left:0}.area+.area{border-top:1px solid rgba(12,31,63,.2)}.area:nth-child(3){padding-left:0}}

/* ---------- Catalogue ledger ---------- */
.catalogue-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.cat-head{position:sticky;top:120px}
.cat-head .btn{margin-top:1.75rem}
.ledger{border-top:1.5px solid var(--ink)}
.ledger li{border-bottom:1px solid var(--line)}
.ledger-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:1.1rem;padding:1rem .75rem;margin-inline:-.75rem;border-radius:16px;transition:background .2s}
.l-ico{width:56px;height:56px;border-radius:16px;background:var(--mist);color:var(--cobalt);display:grid;place-items:center;transition:background .2s,color .2s}
.l-ico svg{width:38px;height:38px}
.l-name strong{display:block;font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.2;letter-spacing:-.015em;color:var(--ink);font-variation-settings:"wdth" 94}
.l-name small{display:block;margin-top:.15rem;color:var(--muted);font-size:.95rem}
.l-go{font-weight:600;font-size:.95rem;color:var(--cobalt);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;white-space:nowrap}
.ledger-row:hover{background:var(--mist)}
.ledger-row:hover .l-ico{background:var(--cobalt);color:#fff}
@media(max-width:900px){.catalogue-grid{grid-template-columns:1fr}.cat-head{position:static}}
@media(max-width:520px){.ledger-row{grid-template-columns:48px minmax(0,1fr);gap:.9rem}.l-ico{width:48px;height:48px;border-radius:14px}.l-ico svg{width:28px;height:28px}.l-go{grid-column:2;margin-top:-.4rem;font-size:.9rem}}

/* ---------- Why / columns with a top rule ---------- */
.rule-cols{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:clamp(1.25rem,2.5vw,2.25rem)}
.rule-col{padding-top:1.25rem;border-top:4px solid var(--cobalt)}
.rule-col p{margin-top:.7rem}
.rule-col.ink{border-top-color:var(--ink)}
@media(max-width:1000px){.rule-cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rule-cols{grid-template-columns:1fr}}

/* ---------- Industries ---------- */
.ind-list{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem}
.ind{padding:1.35rem 0 1.5rem;border-top:1px solid var(--line)}
.ind p{margin-top:.4rem;color:var(--muted);font-size:1rem}
@media(max-width:620px){.ind-list{grid-template-columns:1fr}}

/* ---------- Reach / route stops ---------- */
.reach-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.reach-grid .lead{margin-top:1.5rem;max-width:34rem}
.stops{position:relative;display:grid;gap:1.75rem;padding-left:2.75rem}
.stops::before{content:"";position:absolute;left:11px;top:.9rem;bottom:.9rem;border-left:2px dashed rgba(12,31,63,.35)}
.stops li{position:relative}
.stops li::before{content:"";position:absolute;left:calc(-2.75rem + 4px);top:.35rem;width:16px;height:16px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 5px var(--glass)}
.stops li:nth-child(2)::before,.stops li:nth-child(4)::before{background:var(--ink)}
.stops p{margin-top:.2rem}
@media(max-width:860px){.reach-grid{grid-template-columns:1fr}}

/* ---------- Partner panels ---------- */
.partner-head{max-width:40rem;margin-bottom:clamp(2rem,4vw,3.25rem)}
.partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.panel{border-radius:32px;padding:clamp(1.75rem,4vw,3rem);display:flex;flex-direction:column;align-items:flex-start}
.panel.cobalt{background:var(--cobalt)}
.panel.ink{background:var(--ink)}
.panel .display{font-size:clamp(1.7rem,2.8vw,2.3rem)}
.ticks{display:grid;gap:.8rem;margin:1.5rem 0 2.25rem}
.ticks li{display:flex;gap:.75rem;line-height:1.5}
.ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:.2rem;border-radius:50%;background:var(--sea) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%230C1F3F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.4'/%3E%3C/svg%3E") center/100% no-repeat}
.ticks.dark li::before{background-color:var(--cobalt);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.4'/%3E%3C/svg%3E")}
.panel .ticks{margin-bottom:auto;padding-bottom:2.25rem}
@media(max-width:860px){.partner-grid{grid-template-columns:1fr}}

/* ---------- Testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink)}
.quote{display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;padding:2rem 1.75rem 2rem 0}
.quote+.quote{padding-left:1.75rem;border-left:1px solid var(--line)}
.quote blockquote{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,2.5vw,2.1rem);line-height:1.15;letter-spacing:-.025em;color:var(--ink);font-variation-settings:"wdth" 90}
.quote figcaption{display:flex;align-items:center;gap:1rem}
.logo-frame{flex:none;width:64px;height:64px;border-radius:50%;background:#fff;border:1px solid var(--line);padding:8px;display:grid;place-items:center}
.logo-frame img{width:100%;height:100%;object-fit:contain}
.quote strong{display:block;color:var(--ink);font-weight:600;line-height:1.3}
.quote small{display:block;color:var(--muted);font-size:.95rem;line-height:1.3}
@media(max-width:900px){.quotes{grid-template-columns:1fr}.quote,.quote+.quote{padding:1.75rem 0;border-left:0}.quote+.quote{border-top:1px solid var(--line)}}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden}
.cta-band::before,.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.2) 1.2px,transparent 1.6px) 0 0/28px 28px;-webkit-mask-image:linear-gradient(100deg,transparent 35%,#000);mask-image:linear-gradient(100deg,transparent 35%,#000);pointer-events:none}
.cta-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,5vw,4rem);align-items:center}
.cta-grid p{margin-top:1.25rem;max-width:34rem}
.btn-stack{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:flex-end}
@media(max-width:900px){.cta-grid{grid-template-columns:1fr}.btn-stack{justify-content:flex-start}}

/* ---------- Inner page hero ---------- */
.page-hero{position:relative;overflow:hidden;background:var(--cobalt);color:#fff;padding:9.25rem 0 clamp(3.5rem,6vw,5rem)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{max-width:18ch}
.page-hero .lead{max-width:50ch;margin-top:1.5rem;color:rgba(255,255,255,.9)}
.page-hero .btn-row{margin-top:2rem}
.page-hero .orn{position:absolute;right:-30px;bottom:-24px;width:min(660px,72vw);pointer-events:none}
@media(max-width:700px){.page-hero .orn{opacity:.55}}

/* ---------- About page ---------- */
.statements{border-top:1.5px solid var(--ink)}
.statement{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:1.5rem 3rem;padding:2rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.statement dt{font-size:clamp(1.8rem,3vw,2.6rem)}
.statement dd{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.35;letter-spacing:-.015em;color:var(--ink);font-variation-settings:"wdth" 94}
@media(max-width:700px){.statement{grid-template-columns:1fr;padding:1.6rem 0}}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,3vw,2.5rem)}
.portrait{width:min(100%,280px);aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--mist);margin:0 auto 1.5rem;box-shadow:0 0 0 6px var(--mist)}
.member{text-align:center}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:top}
.role{margin:.1rem 0 .6rem;font-weight:600;color:var(--cobalt);font-size:.98rem}
.member p:last-child{color:var(--text);font-size:1rem}
@media(max-width:820px){.team-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.team-grid{grid-template-columns:1fr}}

/* group tree */
.tree-top{display:flex;justify-content:center;position:relative;padding-bottom:34px}
.tree-top::after{content:"";position:absolute;bottom:0;left:50%;height:34px;border-left:2px dashed rgba(255,255,255,.45)}
.tree-kids{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;padding-top:34px}
.tree-kids::before{content:"";position:absolute;top:0;left:12.5%;right:12.5%;border-top:2px dashed rgba(255,255,255,.45)}
.node{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:1.4rem;border:1px solid var(--line-dark);border-radius:22px;background:rgba(255,255,255,.06);transition:background .2s,border-color .2s;color:#fff}
.node:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.5)}
.node h3,.node h4{font-family:var(--display);font-weight:600;font-size:1.15rem;line-height:1.25;letter-spacing:-.01em;color:#fff}
.node p{margin-top:.45rem;font-size:.95rem;line-height:1.5}
.node .visit{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:1rem;font-weight:600;font-size:.92rem;color:var(--sea)}
.node .visit svg{width:16px;height:16px}
.tree-top .node{width:min(380px,100%);background:var(--sea);border-color:var(--sea)}
.tree-top .node h3,.tree-top .node p,.tree-top .node .visit{color:var(--ink)}
.tree-top .node:hover{background:#fff;border-color:#fff}
.tree-kids .node{height:100%}
.tree-kids .node::before{content:"";position:absolute;top:-34px;left:50%;height:34px;border-left:2px dashed rgba(255,255,255,.45)}
.node.here{border:2px solid var(--signal)}
.here-chip{display:inline-block;margin-bottom:.7rem;padding:.2rem .7rem;border-radius:99px;background:var(--signal);color:var(--ink);font-weight:700;font-size:.78rem}
@media(max-width:1000px){.tree-kids{grid-template-columns:1fr 1fr;padding-top:0}.tree-kids::before,.tree-kids .node::before,.tree-top::after{display:none}.tree-top{padding-bottom:18px}}
@media(max-width:560px){.tree-kids{grid-template-columns:1fr}}

/* ---------- Services page ---------- */
.approach-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.approach-grid p+p{margin-top:1rem}
@media(max-width:860px){.approach-grid{grid-template-columns:1fr}}
.approach-grid .lead{margin-top:1.5rem}
.svc-index{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem;border-top:1.5px solid var(--ink)}
.svc-link{display:grid;grid-template-columns:52px minmax(0,1fr);gap:1.1rem;padding:1.5rem .75rem;margin-inline:-.75rem;border-bottom:1px solid var(--line);transition:background .2s}
.svc-link .l-ico{background:#fff;width:52px;height:52px}
.svc-link .l-ico svg{width:28px;height:28px}
.svc-link p{margin-top:.3rem;color:var(--muted);font-size:1rem;line-height:1.55}
.svc-link:hover{background:#fff}
.svc-link:hover .l-ico{background:var(--cobalt);color:#fff}
@media(max-width:820px){.svc-index{grid-template-columns:1fr}}
.service-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.service-grid.reverse .photo{order:2}
.service-grid h2{margin-bottom:1.25rem}
.service-grid p+p{margin-top:1rem}
.service-grid .ticks{margin:1.75rem 0 0}
.service-grid.reverse{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
/* photo box simply wraps the image at its own proportions: no crop, no empty space */
.photo.natural{aspect-ratio:auto;align-self:center}
.photo.natural img{position:static;height:auto;display:block}
@media(max-width:860px){.service-grid,.service-grid.reverse{grid-template-columns:1fr}.service-grid.reverse .photo{order:0}}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 2.25rem}
.mini{padding:1.35rem 0 1.6rem;border-top:1px solid var(--line)}
.mini p{margin-top:.4rem;color:var(--muted);font-size:1rem}
@media(max-width:620px){.mini-grid{grid-template-columns:1fr}}
.feature-cols{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-dark)}
.feature{padding:2rem 1.5rem 0 0}
.feature+.feature{padding-left:1.5rem;border-left:1px solid var(--line-dark)}
.feature .fi{width:48px;height:48px;color:var(--sea);margin-bottom:2.5rem}
.feature p{margin-top:.55rem;font-size:1rem}
@media(max-width:1000px){.feature-cols{grid-template-columns:1fr 1fr}.feature{padding:1.75rem 1.25rem 1.75rem 0}.feature+.feature{padding-left:1.25rem}.feature:nth-child(3){padding-left:0;border-left:0}.feature:nth-child(n+3){border-top:1px solid var(--line-dark)}.feature .fi{margin-bottom:1.5rem}}
@media(max-width:560px){.feature-cols{grid-template-columns:1fr}.feature,.feature+.feature{padding:1.5rem 0;border-left:0}.feature+.feature{border-top:1px solid var(--line-dark)}}
.coverage{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 3rem}
.coverage p{margin-top:.75rem;max-width:36rem}

/* process steps — a real sequence, so numbered */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:s}
.steps::before{content:"";position:absolute;top:21px;left:21px;right:calc(25% - 1.125rem - 22px);border-top:2px dashed rgba(12,31,63,.35)}
.step{position:relative;padding-top:4.1rem}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;background:var(--cobalt);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.1rem}
.step p{margin-top:.55rem;font-size:1rem}
@media(max-width:900px){.steps{grid-template-columns:1fr;gap:2rem}.steps::before{top:22px;bottom:22px;left:21px;right:auto;border-top:0;border-left:2px dashed rgba(12,31,63,.35)}.step{padding:.35rem 0 0 4rem}}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.35rem 0;font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%232340E8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M16 10v12M10 16h12'/%3E%3C/svg%3E") center/100% no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 3rem 1.5rem 0;max-width:60ch}
.faq-note{margin-top:1.5rem;font-size:.98rem;color:var(--muted)}
.faq-note a{font-weight:600;color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr}}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.form-panel{background:#fff;border-radius:32px;padding:clamp(1.5rem,4vw,2.75rem)}
.form-panel p.sub{margin:.5rem 0 1.75rem;color:var(--muted);font-size:1rem}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.fields .full{grid-column:1/-1}
.n-label{display:block;margin-bottom:.4rem;font-weight:600;font-size:.92rem;color:var(--ink)}
.n-input{width:100%;padding:.85rem 1rem;border:1.5px solid rgba(12,31,63,.22);border-radius:12px;background:#fff;color:var(--text);transition:border-color .2s,box-shadow .2s}
.n-input:hover{border-color:rgba(12,31,63,.45)}
.n-input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(35,64,232,.18)}
textarea.n-input{resize:vertical;min-height:130px}
.form-msg{margin-top:1.1rem;font-weight:600;font-size:.95rem;color:#B42318}
.form-panel .btn{width:100%;margin-top:1.5rem;padding:1.05rem 1.5rem}
@media(max-width:560px){.fields{grid-template-columns:1fr}}
.contact-list{border-top:1.5px solid var(--ink)}
.contact-item{display:grid;grid-template-columns:52px minmax(0,1fr);gap:1.1rem;padding:1.4rem .75rem;margin-inline:-.75rem;border-bottom:1px solid rgba(12,31,63,.18);transition:background .2s}
.contact-item .l-ico{background:#fff;width:52px;height:52px}
.contact-item .l-ico svg{width:26px;height:26px}
.contact-item p{margin-top:.2rem;line-height:1.55;overflow-wrap:anywhere}
a.contact-item:hover{background:#fff}
a.contact-item:hover .l-ico{background:var(--cobalt);color:#fff}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.hours{border-top:1.5px solid var(--ink)}
.hours-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:.4rem 2rem;padding:1.5rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.hours-row dt{color:var(--muted);font-weight:600;font-size:.98rem}
.hours-row dd:nth-of-type(1){font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,2.4vw,1.9rem);letter-spacing:-.02em;color:var(--ink);line-height:1.2;font-variation-settings:"wdth" 92}
@media(max-width:700px){.hours-row{grid-template-columns:1fr}}
.social-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.social{width:60px;height:60px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);display:grid;place-items:center;color:#fff;transition:background .2s,color .2s,border-color .2s}
.social svg{width:26px;height:26px}
.social:hover{background:var(--sea);border-color:var(--sea);color:var(--ink)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#fff;padding:clamp(3.5rem,7vw,5.5rem) 0 2rem}
.footer-grid{display:grid;grid-template-columns:1.25fr .7fr .9fr 1.35fr;gap:clamp(1.75rem,3.5vw,3rem);padding-bottom:3rem}
.f-title{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;font-family:var(--display);font-weight:650;font-size:1.2rem;line-height:1.2;letter-spacing:-.015em;color:#fff;font-variation-settings:"wdth" 92}
.f-title .brand-mark{width:34px;height:34px}
.f-head{margin-bottom:1.1rem;font-family:var(--display);font-weight:600;font-size:1.1rem;color:#fff;letter-spacing:-.01em}
.f-text{color:rgba(255,255,255,.75);font-size:1rem;line-height:1.65;max-width:30ch}
.f-list{display:grid;gap:.7rem}
.footer-link{color:rgba(255,255,255,.8);transition:color .2s}
.footer-link:hover{color:var(--sea)}
.f-contact li{display:flex;align-items:flex-start;gap:.7rem;color:rgba(255,255,255,.8)}
.f-contact svg{flex:none;width:20px;height:20px;margin-top:.15rem;color:var(--sea)}
.f-map{border-radius:22px;overflow:hidden;background:rgba(255,255,255,.08);height:100%;min-height:220px}
.f-map iframe{display:block;width:100%;height:100%;min-height:220px;border:0;filter:grayscale(.25) contrast(1.02)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;justify-content:space-between;padding-top:1.75rem;border-top:1px solid var(--line-dark);font-size:.95rem;color:rgba(255,255,255,.72)}
.footer-bottom button{background:none;border:0;padding:0;cursor:pointer;color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:4px}
.footer-bottom button:hover{color:var(--sea)}
@media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr}.f-map{grid-column:1/-1;min-height:260px}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed;right:1.25rem;bottom:1.5rem;z-index:55;display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.2rem .8rem .9rem;border-radius:999px;background:#25D366;color:#052e14;font-weight:700;font-size:.98rem;box-shadow:0 12px 28px -8px rgba(5,46,20,.55);transition:bottom .3s,background .2s}
.wa-float:hover{background:#4ee08a}
.wa-float svg{width:26px;height:26px}
.wa-float.lift{bottom:7.5rem}
@media(max-width:520px){.wa-float{right:.9rem;bottom:1rem;padding:.8rem}.wa-float span{display:none}.wa-float svg{width:28px;height:28px}}

/* ---------- Privacy dialog ---------- */
.modal{border:0;padding:0;border-radius:28px;max-width:640px;width:calc(100% - 2rem);background:#fff;color:var(--text);box-shadow:0 30px 80px -20px rgba(12,31,63,.6)}
.modal::backdrop{background:rgba(12,31,63,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 1.75rem;border-bottom:1px solid var(--line)}
.modal-head h2{font-family:var(--display);font-weight:650;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink)}
.modal-x{width:40px;height:40px;border:0;border-radius:50%;background:var(--mist);cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.modal-x svg{width:18px;height:18px}
.modal-body{padding:1.5rem 1.75rem;max-height:60vh;overflow-y:auto;font-size:1rem}
.modal-body h3{font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--ink);margin-top:1.1rem}
.modal-body h3:first-child{margin-top:0}
.modal-body p{margin-top:.25rem;color:var(--muted)}
.modal-foot{display:flex;justify-content:flex-end;padding:1.1rem 1.75rem;border-top:1px solid var(--line)}