/* =========================================================
   Tidemark Practice — Deep Tide
   primary #0E3A53  secondary #7FD1C0  accent #FF6B57
   bg #F6F8F8  fg #0B1E29
   ONE accent (coral). ONE radius scale. ONE light theme.
   ========================================================= */
:root{
  --primary:#0E3A53;
  --primary-700:#0a2c40;
  --primary-900:#07202f;
  --secondary:#7FD1C0;
  --secondary-soft:#dff0eb;
  --accent:#FF6B57;
  --accent-700:#e8543f;
  --bg:#F6F8F8;
  --fg:#0B1E29;
  --ink:#0B1E29;
  --body:#26414e;
  --muted:#516571;
  --surface:#ffffff;
  --surface-alt:#eef3f3;
  --line:#dde6e7;
  --line-strong:#c6d4d6;

  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(14,58,83,.06), 0 2px 8px rgba(14,58,83,.05);
  --sh-2:0 6px 18px rgba(14,58,83,.08), 0 2px 6px rgba(14,58,83,.06);
  --sh-3:0 18px 50px rgba(7,32,47,.16), 0 6px 18px rgba(14,58,83,.10);

  --measure:65ch;
  --wrap:1180px;
  --pad:clamp(20px,5vw,40px);

  --ff-display:"Pathway Extreme", system-ui, sans-serif;
  --ff-body:"M PLUS 1 Code", ui-monospace, monospace;
  --ff-mono:"Nova Mono", ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--ff-body); font-weight:400; font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--primary); text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-display); color:var(--ink); font-weight:700; margin:0; letter-spacing:-.02em}
p{margin:0 0 1.1em}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.wrap-narrow{max-width:920px}
.skip{position:absolute; left:-999px; top:0; background:var(--primary); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em; justify-content:center;
  font-family:var(--ff-body); font-weight:600; font-size:.96rem; line-height:1;
  padding:.95em 1.5em; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; transition:transform .25s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
}
.btn svg{flex:0 0 auto}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(255,107,87,.28)}
.btn-primary:hover{background:var(--accent-700); transform:translateY(-2px); box-shadow:0 12px 26px rgba(255,107,87,.34)}
.btn-ghost{background:transparent; color:var(--primary); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--primary); background:var(--surface); transform:translateY(-2px)}
.btn-on-tide{background:transparent; color:#eaf6f3; border-color:rgba(127,209,192,.5)}
.btn-on-tide:hover{background:rgba(127,209,192,.14); border-color:var(--secondary); transform:translateY(-2px)}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:100; background:rgba(246,248,248,.86); backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--line)}
.head-inner{display:flex; align-items:center; gap:24px; min-height:72px}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-family:var(--ff-display); font-weight:700; letter-spacing:-.02em}
.brand-mark{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:var(--r-sm); background:var(--primary); color:var(--secondary)}
.brand-name{font-size:1.32rem}
.nav{display:flex; gap:6px; margin-left:auto}
.nav a{font-family:var(--ff-body); font-weight:500; font-size:.95rem; color:var(--body); padding:.5em .85em; border-radius:var(--r-sm); position:relative}
.nav a:hover{color:var(--primary); background:var(--surface-alt)}
.nav a[aria-current="page"]{color:var(--primary)}
.nav a[aria-current="page"]::after{content:""; position:absolute; left:.85em; right:.85em; bottom:.18em; height:2px; background:var(--accent); border-radius:2px}
.head-cta{padding:.7em 1.2em}
.menu-toggle{display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer}
.menu-toggle span{width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobnav{display:none; flex-direction:column; gap:4px; padding:12px var(--pad) 20px; border-bottom:1px solid var(--line); background:var(--bg)}
.mobnav a{padding:.7em .2em; font-family:var(--ff-body); font-weight:500; color:var(--ink); border-bottom:1px solid var(--line)}
.mobnav a.btn{justify-content:center; margin-top:8px; border-bottom:none; color:#fff}
@media (max-width:880px){
  .nav,.head-cta{display:none}
  .menu-toggle{display:flex}
  .mobnav[data-open="true"]{display:flex}
}

/* ---------- eyebrow ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:.6em; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--primary); margin:0 0 1rem}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); border-radius:2px}

/* ---------- section rhythm ---------- */
.section{padding-block:clamp(72px,10vw,128px)}
.section-head{max-width:62ch}
.section-head.center{margin-inline:auto; text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.04}
.section-head p{margin-top:1.1rem; font-size:1.08rem; color:var(--muted); max-width:var(--measure)}
.section-head.center p{margin-inline:auto}
.lede{font-size:1.18rem; color:var(--ink); max-width:var(--measure); line-height:1.6}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative; padding-top:clamp(34px,6vw,68px); padding-bottom:clamp(40px,6vw,68px); overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(80% 90% at 88% -10%, var(--secondary-soft) 0%, transparent 55%),
    radial-gradient(60% 70% at -5% 110%, #e7eef0 0%, transparent 60%),
    var(--bg);
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center; min-height:calc(100vh - 72px - 112px)}
.hero-copy{max-width:42ch}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem); line-height:1.0; letter-spacing:-.045em; color:var(--ink); margin:.15em 0 .5em}
.hero h1 .reveal-line + .reveal-line{margin-top:-.06em}
.hero h1 .accent{color:var(--accent)}
.hero h1 em{font-style:italic; font-weight:600}
.hero-sub{font-size:clamp(1.05rem,1.7vw,1.2rem); color:var(--body); max-width:32ch; margin-bottom:1.9rem; line-height:1.6}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero-note{margin-top:1.4rem; font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.06em; color:var(--muted); display:flex; align-items:center; gap:.6em}
.hero-note i{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--secondary)}
.hero-media{position:relative}
.hero-frame{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3); aspect-ratio:4/5; background:var(--primary-900)}
.hero-frame img{position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover; will-change:transform}
.hero-frame::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,32,47,0) 45%, rgba(7,32,47,.42) 100%)}
.hero-chip{position:absolute; left:18px; bottom:18px; z-index:2; display:flex; align-items:center; gap:12px; padding:12px 16px; background:rgba(246,248,248,.93); backdrop-filter:blur(6px); border-radius:var(--r-md); box-shadow:var(--sh-2)}
.hero-chip .ico{display:grid; place-items:center; width:38px; height:38px; border-radius:var(--r-sm); background:var(--secondary-soft); color:var(--primary)}
.hero-chip b{display:block; font-family:var(--ff-display); color:var(--ink); font-size:.98rem}
.hero-chip small{font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.05em; color:var(--muted)}
.hero-badge{position:absolute; right:-6px; top:22px; z-index:2; background:var(--primary); color:#eaf6f3; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; padding:9px 15px; border-radius:var(--r-pill); box-shadow:var(--sh-2)}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; min-height:0}
  .hero-media{order:-1}
  .hero-frame{aspect-ratio:16/11}
  .hero-copy{max-width:none}
}

/* ---------- reveal ----------
   Base = fully visible (no-JS / fallback safe).
   .anim-on (added by JS only when motion is allowed) enables the
   hidden-then-reveal behaviour. So if JS or GSAP fail, all text shows. */
.reveal-line{display:block; overflow:hidden; padding-block:.08em}
.anim-on .reveal-line > *{display:block; transform:translateY(115%)}
.anim-on .reveal-line.in > *{transform:translateY(0); transition:transform .9s cubic-bezier(.16,1,.3,1)}
.anim-on .r-up{opacity:0; transform:translateY(22px)}
.anim-on .r-up.in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1)}

/* =========================================================
   STAT BAND
   ========================================================= */
.stat-band{background:var(--primary); color:#eaf6f3; position:relative; overflow:hidden}
.stat-band::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 100% 0%, rgba(127,209,192,.18) 0%, transparent 60%)}
.stat-grid{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,4vw,48px); padding-block:clamp(44px,6vw,72px)}
.stat b{display:block; font-family:var(--ff-display); font-size:clamp(2.1rem,4vw,3rem); line-height:1; color:#fff}
.stat span{display:block; margin-top:.5rem; font-size:.92rem; color:#bcd6d0; line-height:1.4}
.stat{position:relative; padding-left:18px}
.stat::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--accent); border-radius:3px}
@media (max-width:680px){.stat-grid{grid-template-columns:1fr 1fr; gap:28px}}

/* =========================================================
   SPLIT
   ========================================================= */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center}
.split.flip .split-media{order:2}
.split-media{position:relative}
.split-media .ph{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3); aspect-ratio:5/4; background:var(--primary-900)}
.split-media .ph img{position:absolute; inset:-10% 0; width:100%; height:120%; object-fit:cover; will-change:transform}
.split-media .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(127,209,192,.10), rgba(7,32,47,.18))}
.split-stat{position:absolute; right:-14px; bottom:-14px; background:var(--surface); border-radius:var(--r-md); padding:16px 20px; box-shadow:var(--sh-2); border:1px solid var(--line)}
.split-stat b{font-family:var(--ff-display); font-size:1.5rem; color:var(--primary); display:block; line-height:1}
.split-stat span{font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.split-copy h2{font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1.06; margin-bottom:1rem}
.tick{list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.85rem}
.tick li{display:flex; gap:.75rem; align-items:flex-start; color:var(--ink)}
.tick li .ico{flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:var(--r-xs); background:var(--secondary-soft); color:var(--primary); margin-top:1px}
@media (max-width:820px){
  .split{grid-template-columns:1fr; gap:36px}
  .split.flip .split-media{order:0}
  .split-stat{right:14px}
}

/* =========================================================
   CARDS
   ========================================================= */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,28px)}
.card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:clamp(24px,3vw,34px); box-shadow:var(--sh-1); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-strong)}
.card .ico{display:grid; place-items:center; width:52px; height:52px; border-radius:var(--r-sm); background:var(--secondary-soft); color:var(--primary); margin-bottom:18px}
.card .c-eyebrow{font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.4rem}
.card h3{font-size:1.32rem; margin-bottom:.55rem}
.card p{color:var(--body); font-size:.98rem; margin-bottom:1rem}
.card .tick{margin-top:0}
.card .tick li{font-size:.93rem; color:var(--body)}
@media (max-width:720px){.cards{grid-template-columns:1fr}}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px)}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:clamp(24px,3vw,32px); box-shadow:var(--sh-1)}
.step .n{font-family:var(--ff-mono); font-size:.8rem; letter-spacing:.1em; color:var(--accent)}
.step .ico{display:grid; place-items:center; width:46px; height:46px; border-radius:var(--r-sm); background:var(--primary); color:var(--secondary); margin:14px 0 16px}
.step h3{font-size:1.2rem; margin-bottom:.5rem}
.step p{color:var(--body); font-size:.96rem; margin:0}
@media (max-width:780px){.steps{grid-template-columns:1fr}}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,26px)}
.qcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:clamp(24px,3vw,32px); box-shadow:var(--sh-1); display:flex; flex-direction:column}
.qcard .qmark{color:var(--secondary)}
.qcard .stars{display:flex; gap:3px; color:var(--accent); margin:6px 0 14px}
.qcard blockquote{margin:0 0 18px; font-size:1.04rem; line-height:1.6; color:var(--ink)}
.qcard .who{margin-top:auto; display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line)}
.qcard .av{width:42px; height:42px; border-radius:50%; background:var(--primary); color:#eaf6f3; display:grid; place-items:center; font-family:var(--ff-display); font-size:.95rem}
.qcard .who b{font-family:var(--ff-display); color:var(--ink); font-size:.98rem; display:block; line-height:1.2}
.qcard .who span{font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.06em; color:var(--muted)}
@media (max-width:880px){.quotes{grid-template-columns:1fr}}

/* =========================================================
   ARTICLES
   ========================================================= */
.bg-alt{background:var(--surface-alt)}
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,30px)}
.pcard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-1); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease}
.pcard:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.pcard .pthumb{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--primary-900)}
.pcard .pthumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.pcard:hover .pthumb img{transform:scale(1.04)}
.pcard .pbody{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.pcard .pdate{font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem}
.pcard h3{font-size:1.16rem; line-height:1.22; margin-bottom:.6rem}
.pcard h3 a{color:var(--ink)}
.pcard h3 a:hover{color:var(--primary)}
.pcard p{font-size:.94rem; color:var(--body); margin-bottom:1rem}
.pcard .more{margin-top:auto; display:inline-flex; align-items:center; gap:.45em; font-family:var(--ff-body); font-weight:600; font-size:.9rem; color:var(--accent)}
.pcard .more svg{transition:transform .25s ease}
.pcard:hover .more svg{transform:translateX(3px)}
@media (max-width:880px){.posts{grid-template-columns:1fr}}

/* resources blogroll */
.blogroll{margin-top:clamp(34px,4vw,52px); border-top:1px solid var(--line); padding-top:28px}
.blogroll h3{font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:16px}
.blogroll ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 14px}
.blogroll a{display:inline-flex; align-items:center; gap:.5em; font-family:var(--ff-body); font-weight:500; font-size:.92rem; color:var(--primary); background:var(--surface); border:1px solid var(--line); padding:.55em 1em; border-radius:var(--r-pill)}
.blogroll a:hover{border-color:var(--accent); color:var(--accent-700)}
.blogroll a svg{color:var(--accent)}

/* =========================================================
   CTA band
   ========================================================= */
.cta-band{position:relative; overflow:hidden; background:var(--primary); color:#eaf6f3; border-radius:var(--r-lg); padding:clamp(40px,6vw,72px); text-align:center; box-shadow:var(--sh-3)}
.cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 50% -20%, rgba(127,209,192,.22) 0%, transparent 60%)}
.cta-band .inner{position:relative; max-width:46ch; margin-inline:auto}
.cta-band h2{color:#fff; font-size:clamp(2rem,4vw,3rem); line-height:1.04; margin-bottom:1rem}
.cta-band p{color:#cfe6e0; margin-bottom:2rem; font-size:1.06rem}
.cta-band .hero-cta{justify-content:center}

/* =========================================================
   FOOTER
   ========================================================= */
.site-foot{background:var(--primary-900); color:#bcd1d4; padding-top:clamp(54px,7vw,80px)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:48px}
.foot-brand .brand--foot{color:#fff; margin-bottom:14px}
.foot-brand .brand-mark{background:var(--secondary); color:var(--primary-900)}
.foot-tag{color:#9fbcc0; max-width:34ch; margin-bottom:.8rem}
.foot-meta{font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.04em; color:#7fa3a8}
.foot-col h3{font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:#7fa3a8; font-weight:400; margin-bottom:14px}
.foot-col a,.foot-col .foot-line{display:block; color:#bcd1d4; padding:.3em 0; font-size:.94rem}
.foot-col a:hover{color:var(--secondary)}
.foot-base{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-block:22px; border-top:1px solid rgba(127,209,192,.16); font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.04em; color:#7fa3a8}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr; gap:30px}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* =========================================================
   PAGE HERO (inner)
   ========================================================= */
.page-hero{position:relative; padding-block:clamp(56px,8vw,104px); overflow:hidden}
.page-hero::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 90% at 90% -20%, var(--secondary-soft) 0%, transparent 55%), var(--bg)}
.page-hero h1{font-size:clamp(2.4rem,5.6vw,4.2rem); line-height:1; letter-spacing:-.04em; color:var(--ink); max-width:16ch}
.page-hero .lede{margin-top:1.4rem}
.crumb{font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:1.2rem; display:flex; gap:.6em; align-items:center}
.crumb a{color:var(--muted)} .crumb a:hover{color:var(--primary)}
.crumb i{color:var(--line-strong); font-style:normal}

/* =========================================================
   ABOUT
   ========================================================= */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,26px)}
.tcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:clamp(24px,3vw,32px); box-shadow:var(--sh-1)}
.tcard .av{width:58px; height:58px; border-radius:var(--r-md); background:var(--primary); color:var(--secondary); display:grid; place-items:center; font-family:var(--ff-display); font-size:1.2rem; margin-bottom:16px}
.tcard h3{font-size:1.2rem; margin-bottom:.15rem}
.tcard .role{font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:.8rem}
.tcard p{font-size:.95rem; color:var(--body); margin:0}
@media (max-width:780px){.team{grid-template-columns:1fr}}

.values{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,22px)}
.vcard{border:1px solid var(--line); border-radius:var(--r-md); padding:24px; background:var(--surface)}
.vcard b{font-family:var(--ff-display); font-size:1.1rem; color:var(--ink); display:block; margin-bottom:.4rem}
.vcard span{font-size:.92rem; color:var(--body)}
@media (max-width:820px){.values{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.values{grid-template-columns:1fr}}

/* =========================================================
   FAQ
   ========================================================= */
.faq{max-width:820px; margin-inline:auto; display:grid; gap:14px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-1); overflow:hidden}
.faq summary{list-style:none; cursor:pointer; padding:20px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--ff-display); font-weight:600; font-size:1.08rem; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line-strong); display:grid; place-items:center; position:relative; transition:.25s}
.faq summary .pm::before,.faq summary .pm::after{content:""; position:absolute; background:var(--primary); border-radius:2px}
.faq summary .pm::before{width:11px; height:2px}
.faq summary .pm::after{width:2px; height:11px; transition:transform .25s}
.faq details[open] summary .pm{background:var(--accent); border-color:var(--accent)}
.faq details[open] summary .pm::before,.faq details[open] summary .pm::after{background:#fff}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq .ans{padding:0 24px 22px; color:var(--body); font-size:.98rem}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:start}
.cinfo .ci-row{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line)}
.cinfo .ci-row:last-child{border-bottom:none}
.cinfo .ico{flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-sm); background:var(--secondary-soft); color:var(--primary)}
.cinfo .ci-row b{display:block; font-family:var(--ff-display); color:var(--ink); font-size:1rem; margin-bottom:.15rem}
.cinfo .ci-row a,.cinfo .ci-row span{color:var(--body); font-size:.95rem}
.cinfo .ci-row a:hover{color:var(--primary)}

.form-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3.4vw,40px); box-shadow:var(--sh-2)}
.form-card h2{font-size:1.5rem; margin-bottom:.4rem}
.form-card .fhint{color:var(--muted); font-size:.95rem; margin-bottom:1.6rem}
.field{margin-bottom:18px}
.field label{display:block; font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); margin-bottom:8px}
.field label .req{color:var(--accent)}
.field input,.field textarea{width:100%; font-family:var(--ff-body); font-size:1rem; color:var(--ink); background:var(--bg); border:1.5px solid var(--line-strong); border-radius:var(--r-sm); padding:.85em 1em; transition:border-color .2s ease, box-shadow .2s ease}
.field textarea{min-height:130px; resize:vertical; line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#8fa3aa}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(14,58,83,.12)}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--accent)}
.form-card .btn-primary{width:100%; padding:1.05em 1.5em; font-size:1rem}
.form-note{margin-top:14px; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.03em; color:var(--muted); text-align:center}
.form-ok{display:none; align-items:center; gap:14px; background:var(--secondary-soft); border:1px solid var(--secondary); border-radius:var(--r-md); padding:18px 20px; margin-top:18px}
.form-ok.show{display:flex}
.form-ok .ico{flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--primary); color:#fff}
.form-ok b{font-family:var(--ff-display); display:block; color:var(--ink)}
.form-ok span{font-size:.9rem; color:var(--body)}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* =========================================================
   ARTICLE
   ========================================================= */
.article-hero{position:relative; padding-top:clamp(40px,6vw,72px); padding-bottom:clamp(28px,4vw,44px)}
.article-hero::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 80% at 85% -10%, var(--secondary-soft) 0%, transparent 55%), var(--bg)}
.article-hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.04; letter-spacing:-.035em; color:var(--ink); max-width:20ch; margin-top:1rem}
.article-meta{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:1.4rem; font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.05em; color:var(--muted)}
.article-meta span{display:inline-flex; align-items:center; gap:.5em}
.article-lead-img{margin-top:clamp(24px,3vw,40px); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3); aspect-ratio:16/8; background:var(--primary-900)}
.article-lead-img img{width:100%; height:100%; object-fit:cover}

.article-body{max-width:var(--measure); margin:clamp(32px,4vw,52px) auto 0; font-size:1.05rem; line-height:1.78}
.article-body > *{margin-inline:auto}
.article-body p{color:var(--body); margin:0 0 1.3em}
.article-body h2{font-size:clamp(1.5rem,3vw,2.05rem); line-height:1.12; margin:2.2em 0 .7em; color:var(--ink)}
.article-body h3{font-size:1.28rem; margin:1.8em 0 .55em; color:var(--ink)}
.article-body a{color:var(--primary); font-weight:600; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px}
.article-body a:hover{color:var(--accent-700)}
.article-body strong{color:var(--ink); font-weight:600}
.article-body em{font-style:italic}
.article-body ul,.article-body ol{margin:0 0 1.4em; padding-left:1.3em; color:var(--body)}
.article-body li{margin-bottom:.55em}
.article-body ul li::marker{color:var(--accent)}
.article-body img{border-radius:var(--r-md); box-shadow:var(--sh-2); margin:1.6em auto; width:100%; height:auto}
.article-body p:has(> img){margin-block:1.8em}
.article-body table{width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.94rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.article-body th{background:var(--primary); color:#eaf6f3; text-align:left; font-family:var(--ff-body); font-weight:600; padding:12px 14px; font-size:.86rem}
.article-body td{padding:12px 14px; border-top:1px solid var(--line); color:var(--body); vertical-align:top}
.article-body section{margin:0}
.article-body section h2{margin-top:1.6em}
.article-body section h3{font-size:1.12rem; margin:1.4em 0 .4em}
.article-body section[itemscope]{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 20px; margin:.7em auto}

.article-cta{margin:clamp(40px,5vw,64px) auto 0; max-width:var(--measure)}
.article-foot-nav{max-width:var(--measure); margin:clamp(36px,4vw,56px) auto 0; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px}
.article-foot-nav a{display:inline-flex; align-items:center; gap:.5em; font-family:var(--ff-body); font-weight:600; color:var(--primary)}
.article-foot-nav a:hover{color:var(--accent-700)}
.related{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:24px}
@media (max-width:680px){.related{grid-template-columns:1fr}}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .reveal-line > *{transform:none !important}
  .r-up{opacity:1 !important; transform:none !important}
  .hero-frame img,.split-media .ph img{position:static; inset:auto; height:auto; width:100%; transform:none !important}
  .hero-frame{aspect-ratio:16/11}
  .split-media .ph{aspect-ratio:5/4}
  *{scroll-behavior:auto !important}
  .btn,.card,.pcard,.qcard{transition:none !important}
}