/* ============================================================
   HEL Management — shared site styles (Anchor direction)
   Used by: index.html, why.html, what.html, who.html
   ============================================================ */
:root{
  --paper: oklch(0.988 0.004 200);
  --paper-2: oklch(0.966 0.008 200);
  --ink: oklch(0.25 0.02 215);
  --navy: #005f6b;        /* HEL petrol */
  --navy-d: #00424b;
  --accent: oklch(0.55 0.095 205);
  --muted: oklch(0.50 0.02 215);
  --line: oklch(0.91 0.01 205);
  --line-2: oklch(0.85 0.013 205);
  --maxw: 1200px;
  --ease: cubic-bezier(.16,.84,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Libre Franklin",system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  letter-spacing:-0.006em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:color-mix(in oklab, var(--paper) 86%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand .logo{height:42px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink);opacity:.82;transition:opacity .2s;position:relative;}
.nav-links a:hover{opacity:1;}
.nav-links a[aria-current="page"]{opacity:1;}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-26px;height:2px;background:var(--navy);}
.nav-right{display:flex;align-items:center;gap:18px;}
.lang{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;}
.lang button{font:inherit;font-size:12.5px;font-weight:600;padding:6px 11px;background:none;border:none;color:var(--muted);cursor:pointer;letter-spacing:.04em;}
.lang button[aria-pressed="true"]{background:var(--navy);color:#fff;}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:11px 22px;border-radius:8px;white-space:nowrap;cursor:pointer;transition:transform .2s var(--ease), background .2s;}
.btn-primary{background:var(--navy);color:#fff;border:none;}
.btn-primary:hover{background:var(--navy-d);transform:translateY(-1px);}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink);background:none;}
.btn-ghost:hover{border-color:var(--navy);}
.btn .arr{transition:transform .25s var(--ease);}
.btn:hover .arr{transform:translateX(3px);}

/* ---------- hero (home) ---------- */
.hero{padding:84px 0 76px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
.hero h1{font-size:clamp(40px,5.2vw,68px);line-height:1.02;font-weight:800;letter-spacing:-0.03em;margin:22px 0 26px;color:var(--ink);text-wrap:balance;}
.hero p.sub{font-size:19px;line-height:1.6;color:var(--muted);max-width:36ch;}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
.hero-media{position:relative;aspect-ratio:5/6;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,66,75,.45);}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:68% 45%;display:block;}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(0,40,46,.55), transparent 42%);}
.hero-badge{position:absolute;left:22px;bottom:22px;z-index:2;background:color-mix(in oklab,var(--navy) 88%, transparent);color:#fff;border-radius:10px;padding:14px 18px;backdrop-filter:blur(4px);max-width:78%;}
.hero-badge b{font-weight:700;font-size:15px;display:block;}
.hero-badge span{font-size:13px;opacity:.8;}

/* ---------- page hero (subpages) ---------- */
.page-hero{padding:72px 0 24px;}
.page-hero .crumb{font-size:13px;letter-spacing:.04em;color:var(--muted);margin-bottom:22px;}
.page-hero .crumb a:hover{color:var(--navy);}
.page-hero h1{font-size:clamp(36px,5vw,64px);line-height:1.03;font-weight:800;letter-spacing:-.03em;margin:16px 0 22px;max-width:18ch;text-wrap:balance;}
.page-hero p.lede{font-size:20px;line-height:1.6;color:var(--muted);max-width:60ch;}
.page-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:end;}
.page-hero-media{aspect-ratio:16/11;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -34px rgba(0,66,75,.4);}
.page-hero-media img{width:100%;height:100%;object-fit:cover;display:block;}

/* image placeholders */
.ph{
  background:
    repeating-linear-gradient(135deg, oklch(0.88 0.01 205) 0 1px, transparent 1px 11px),
    linear-gradient(160deg, var(--paper-2), oklch(0.93 0.012 205));
  border:1px solid var(--line-2);
  display:grid;place-items:center;text-align:center;color:var(--muted);
}
.ph code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;letter-spacing:.02em;background:color-mix(in oklab,var(--paper) 70%,transparent);padding:5px 10px;border-radius:5px;border:1px solid var(--line);}

/* ---------- positioning band ---------- */
.band{background:linear-gradient(110deg, rgba(0,56,63,.95) 35%, rgba(0,66,75,.72)), url("gbg-bridge.jpg") center 32%/cover;color:#fff;}
.band .wrap{padding:64px 40px;}
.band p{font-size:clamp(22px,2.6vw,30px);line-height:1.4;font-weight:500;letter-spacing:-.02em;max-width:30ch;text-wrap:balance;}
.band .eyebrow{color:color-mix(in oklab,var(--accent) 70%,white);}

/* ---------- section scaffolding ---------- */
section.blk{padding:96px 0;}
.sec-head{max-width:640px;margin-bottom:52px;}
.sec-head h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.025em;line-height:1.06;margin:14px 0 16px;text-wrap:balance;}
.sec-head p{font-size:18px;color:var(--muted);}
.kick{display:flex;align-items:center;gap:10px;}
.kick::before{content:"";width:26px;height:2px;background:var(--accent);display:inline-block;}

/* domains */
.dom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.dom{background:var(--paper);padding:30px 26px 34px;transition:background .25s;display:block;}
.dom:hover{background:var(--paper-2);}
.dom .ix{font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.08em;}
.dom h3{font-size:18.5px;font-weight:700;letter-spacing:-.01em;margin:14px 0 10px;}
.dom p{font-size:14.5px;line-height:1.55;color:var(--muted);}
a.dom .more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:600;color:var(--navy);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s;}
a.dom:hover .more{opacity:1;transform:none;}

/* why */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;}
.why-item .n{font-size:15px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;}
.why-item h3{font-size:20px;font-weight:700;letter-spacing:-.015em;margin:16px 0 10px;padding-top:18px;border-top:1px solid var(--line-2);}
.why-item p{font-size:15px;color:var(--muted);line-height:1.6;}

/* approach */
.approach{background:var(--paper-2);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px;}
.step{padding:30px 28px 30px 0;position:relative;border-top:2px solid var(--navy);}
.step + .step{padding-left:28px;}
.step .num{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:.1em;}
.step h3{font-size:20px;font-weight:700;margin:30px 0 10px;letter-spacing:-.015em;}
.step p{font-size:14.5px;color:var(--muted);line-height:1.55;}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.member .portrait{aspect-ratio:3/4;border-radius:12px;overflow:hidden;margin-bottom:18px;}
.member .portrait img{width:100%;height:100%;object-fit:cover;display:block;}
.member h3{font-size:18px;font-weight:700;letter-spacing:-.01em;}
.member .role{font-size:13.5px;color:var(--muted);line-height:1.5;margin:7px 0 12px;}
.member a.mail{font-size:13.5px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px;}
.member a.mail:hover{text-decoration:underline;}

/* contact */
.contact{background:var(--navy);color:#fff;}
.contact .wrap{padding:96px 40px;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.contact h2{font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:16px 0 18px;text-wrap:balance;}
.contact p.sub{font-size:18px;opacity:.82;max-width:36ch;}
.contact .eyebrow{color:color-mix(in oklab,var(--accent) 70%,white);}
.experts{margin-top:40px;border-top:1px solid color-mix(in oklab,white 18%,transparent);padding-top:26px;}
.experts .lbl{font-size:13px;text-transform:uppercase;letter-spacing:.12em;opacity:.6;font-weight:600;}
.experts ul{list-style:none;margin-top:16px;display:grid;gap:12px;}
.experts li{display:flex;justify-content:space-between;gap:16px;font-size:15px;padding-bottom:12px;border-bottom:1px solid color-mix(in oklab,white 12%,transparent);}
.experts li a{opacity:.78;font-size:14px;}
.experts li a:hover{opacity:1;}
form{display:grid;gap:16px;background:color-mix(in oklab,white 6%,transparent);padding:30px;border-radius:14px;border:1px solid color-mix(in oklab,white 14%,transparent);}
form label{font-size:13px;font-weight:600;letter-spacing:.03em;opacity:.85;display:block;margin-bottom:7px;}
form input,form textarea{width:100%;font:inherit;font-size:15px;background:color-mix(in oklab,white 9%,transparent);border:1px solid color-mix(in oklab,white 20%,transparent);border-radius:8px;padding:12px 14px;color:#fff;transition:border-color .2s,background .2s;}
form input::placeholder,form textarea::placeholder{color:color-mix(in oklab,white 55%,transparent);}
form input:focus,form textarea:focus{outline:none;border-color:var(--accent);background:color-mix(in oklab,white 14%,transparent);}
form textarea{min-height:120px;resize:vertical;}
form button{justify-self:start;margin-top:6px;background:#fff;color:var(--navy);font-weight:700;}
form button:hover{transform:translateY(-1px);}

/* ---------- CTA band (subpage tail) ---------- */
.cta{background:linear-gradient(115deg, var(--navy) 40%, var(--navy-d));color:#fff;}
.cta .wrap{padding:84px 40px;display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap;}
.cta h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.025em;line-height:1.06;max-width:18ch;text-wrap:balance;}
.cta p{font-size:17px;opacity:.82;margin-top:12px;max-width:42ch;}
.cta .btn-light{background:#fff;color:var(--navy);}
.cta .btn-light:hover{background:var(--paper-2);transform:translateY(-1px);}

/* ---------- prose / content rows (subpages) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.split + .split{margin-top:84px;}
.split.flip .split-media{order:-1;}
.split-media{aspect-ratio:4/3;border-radius:14px;overflow:hidden;}
.split-media img{width:100%;height:100%;object-fit:cover;display:block;}
.split h3{font-size:clamp(24px,2.8vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-bottom:16px;text-wrap:balance;}
.split p{font-size:17px;color:var(--muted);line-height:1.65;}
.split p + p{margin-top:14px;}

/* domain detail (what page) */
.detail{display:grid;grid-template-columns:auto 1fr;gap:0 40px;padding:40px 0;border-top:1px solid var(--line-2);}
.detail:last-child{border-bottom:1px solid var(--line-2);}
.detail .dx{font-size:14px;font-weight:700;color:var(--navy);letter-spacing:.06em;font-variant-numeric:tabular-nums;padding-top:6px;}
.detail h3{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin-bottom:14px;}
.detail .d-body{max-width:62ch;}
.detail p{font-size:17px;color:var(--muted);line-height:1.65;}
.detail ul.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.detail ul.tags li{font-size:13px;font-weight:500;color:var(--navy);background:color-mix(in oklab,var(--navy) 8%,var(--paper));border:1px solid color-mix(in oklab,var(--navy) 18%,transparent);padding:6px 12px;border-radius:999px;}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;}
.stat .num{font-size:clamp(36px,4.4vw,54px);font-weight:800;letter-spacing:-.03em;color:var(--navy);line-height:1;}
.stat .lbl{font-size:14.5px;color:var(--muted);margin-top:12px;line-height:1.45;}

/* values list (why page) */
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.value{background:var(--paper);padding:38px 36px;}
.value .n{font-size:14px;font-weight:700;color:var(--accent);}
.value h3{font-size:22px;font-weight:800;letter-spacing:-.015em;margin:14px 0 12px;}
.value p{font-size:15.5px;color:var(--muted);line-height:1.62;}

/* footer */
footer{background:var(--navy-d);color:color-mix(in oklab,white 78%,transparent);}
footer .wrap{padding:56px 40px 40px;}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start;}
.foot-brand img{height:56px;width:auto;display:block;margin-bottom:16px;}
.foot-brand p{font-size:14px;margin-top:8px;opacity:.7;}
.foot-col{font-size:14px;line-height:1.9;}
.foot-col a:hover{color:#fff;}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid color-mix(in oklab,white 12%,transparent);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;opacity:.6;}

/* reveal — kept as a no-op class so markup/scripts stay valid.
   (Entrance animations removed: content must never depend on JS or an
   animation clock to become visible.) */
.reveal{opacity:1;transform:none;}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .hero-media{aspect-ratio:16/10;}
  .page-hero-grid{grid-template-columns:1fr;gap:36px;}
  .dom-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);gap:30px 36px;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .step + .step{padding-left:0;}
  .step:nth-child(n+2){padding-left:0;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;gap:40px;}
  .split{grid-template-columns:1fr;gap:32px;}
  .split.flip .split-media{order:0;}
  .values{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);gap:32px;}
  .detail{grid-template-columns:1fr;gap:8px;}
  .detail .dx{padding-top:0;}
  .nav-links{display:none;}
  .nav-links a[aria-current="page"]::after{display:none;}
}
@media(max-width:560px){
  .wrap{padding:0 22px;}
  .dom-grid,.why-grid,.team-grid,.steps,.stats{grid-template-columns:1fr;}
  .hero{padding:54px 0 50px;}
  section.blk{padding:64px 0;}
  .cta .wrap{flex-direction:column;align-items:flex-start;gap:24px;}
}