/* ============================================================
   NITERION — Acoustic Design & Consultancy
   Design system: warm paper base, deep pine ink, clay/terracotta
   accent, Fraunces (display) + Inter (body), swirl-mark motif.
   ============================================================ */

:root{
  --bg:            #FBFBFB;
  --bg-rgb:        251,251,251;
  --bg-soft:       #EFF1F4;
  --surface:       #FFFFFF;
  --surface-tint:  #F7F8FA;
  --border:        rgba(27,35,51,0.12);
  --border-strong: rgba(27,35,51,0.22);

  --ink:           #1B2333;
  --ink-soft:      #2A3346;
  --ink-muted:     #5B6478;
  --ink-faint:     #8A93A6;

  --accent:        #2F5496;
  --accent-soft:   #5D80B8;
  --accent-strong: #1F3A6E;
  --accent-dim:    rgba(47,84,150,0.12);
  --accent-line:   rgba(47,84,150,0.4);
  --accent-faint:  rgba(47,84,150,0.06);
  --accent-rgb:    47,84,150;
  --on-accent:     #FFFFFF;

  --dark:          #182842;
  --dark-2:        #1F3357;
  --on-dark:       #F3F5FA;
  --on-dark-muted: #A9B8D2;
  --on-dark-border:rgba(243,245,250,0.16);

  --shadow-rgb:    27,35,51;
  --shadow-sm:  0 8px 24px -14px rgba(var(--shadow-rgb),0.22);
  --shadow-md:  0 24px 50px -28px rgba(var(--shadow-rgb),0.3);
  --shadow-lg:  0 30px 70px -24px rgba(var(--shadow-rgb),0.28);
  --glow:       0 0 0 rgba(0,0,0,0);

  --grad-accent:      linear-gradient(135deg, var(--accent-soft), var(--accent) 55%, var(--accent-strong));
  --grad-accent-soft: linear-gradient(135deg, var(--accent), var(--accent-soft));
  --grad-text:        linear-gradient(120deg, var(--accent-strong), var(--accent) 55%, var(--accent-soft));
  --grad-surface:     linear-gradient(165deg, var(--surface), var(--surface-tint));
  --grad-hairline:    linear-gradient(90deg, transparent, var(--border-strong) 50%, transparent);

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 22px;

  --ease: cubic-bezier(.22,.68,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 180ms;
  --dur-med: 420ms;

  --container: 1180px;

  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg:            #0C1420;
  --bg-rgb:        12,20,32;
  --bg-soft:       #101B2B;
  --surface:       #141F30;
  --surface-tint:  #182438;
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);

  --ink:           #EEF2FA;
  --ink-soft:      #D7DFEE;
  --ink-muted:     #93A2BC;
  --ink-faint:     #5E6C86;

  --accent:        #6C9CF2;
  --accent-soft:   #9DC0FF;
  --accent-strong: #BBD4FF;
  --accent-dim:    rgba(108,156,242,0.16);
  --accent-line:   rgba(108,156,242,0.45);
  --accent-faint:  rgba(108,156,242,0.08);
  --accent-rgb:    108,156,242;
  --on-accent:     #071120;

  --dark:          #060A12;
  --dark-2:        #080D16;
  --on-dark:       #EEF2FA;
  --on-dark-muted: #8998B4;
  --on-dark-border:rgba(238,242,250,0.1);

  --shadow-rgb:    0,0,0;
  --shadow-sm:  0 8px 24px -12px rgba(0,0,0,0.5);
  --shadow-md:  0 24px 50px -20px rgba(0,0,0,0.6), 0 0 40px -18px rgba(var(--accent-rgb),0.35);
  --shadow-lg:  0 30px 80px -20px rgba(0,0,0,0.65), 0 0 60px -20px rgba(var(--accent-rgb),0.3);
  --glow:       0 0 32px -6px rgba(var(--accent-rgb),0.45);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, fill .35s ease, opacity .35s ease !important;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *:not(.motion-persist):not(.motion-persist *),
  *::before,
  *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.014em;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
  font-feature-settings:'ss01' 1, 'liga' 1;
}

p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent-strong);
  font-weight:700;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--accent);
  display:inline-block;
}
.eyebrow.on-dark{ color:var(--on-dark-muted); }
.eyebrow.on-dark::before{ background:var(--accent-soft); }

.section-head{
  max-width:640px;
  margin-bottom:64px;
}
.section-head h2{
  font-size:clamp(1.9rem, 3.4vw, 2.8rem);
  margin-top:16px;
}
.section-head p{
  margin-top:16px;
  color:var(--ink-muted);
  font-size:1.05rem;
  max-width:560px;
}

section{ position:relative; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 28px;
  border-radius:999px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:0.96rem;
  letter-spacing:0.01em;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space:nowrap;
  min-height:44px;
}
.btn-primary{
  background:var(--grad-accent-soft);
  background-size:160% 160%;
  background-position:0% 50%;
  color:var(--on-accent);
  box-shadow:0 12px 28px -14px rgba(var(--accent-rgb),0.55);
}
.btn-primary:hover{
  background-position:100% 50%;
  transform:translateY(-2px) scale(1.015);
  box-shadow:0 18px 36px -14px rgba(var(--accent-rgb),0.65), var(--glow);
}
.btn-primary:active{ transform:translateY(0) scale(1); }

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--border-strong);
}
.btn-ghost:hover{ border-color:var(--accent-line); color:var(--accent-strong); background:var(--accent-faint); transform:translateY(-2px); }

.btn-on-dark{
  color:var(--on-dark);
  border-color:var(--on-dark-border);
}
.btn-on-dark:hover{ border-color:var(--accent-soft); color:var(--accent-soft); transform:translateY(-2px); }

.btn-sm{ padding:11px 20px; font-size:0.88rem; }

/* ================= LOGO (shared) ================= */
.logo{
  display:flex;
  align-items:center;
}
.logo-img{
  height:34px;
  width:auto;
  display:block;
}
:root[data-theme="dark"] .theme-invert{ filter:invert(1); }

/* ================= NAV ================= */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(var(--bg-rgb),0.7);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
.nav.scrolled{
  border-bottom-color:var(--border);
  background:rgba(var(--bg-rgb),0.92);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:20px;
}
.nav-links a{
  font-size:0.89rem;
  font-weight:500;
  color:var(--ink-muted);
  position:relative;
  padding:6px 0;
  transition:color var(--dur-fast) var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; right:100%;
  bottom:0;
  height:2px;
  border-radius:2px;
  background:var(--accent);
  transition:right var(--dur-med) var(--ease);
}
.nav-links a:hover::after{ right:0; }
.nav-links a.active{ color:var(--accent-strong); font-weight:600; }
.nav-links a.active::after{ right:0; }

.nav-cta{ display:flex; align-items:center; gap:14px; }

.theme-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--border-strong);
  background:var(--surface-tint);
  color:var(--ink-muted);
  cursor:pointer;
  flex-shrink:0;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover{ border-color:var(--accent-line); color:var(--accent-strong); transform:translateY(-2px) rotate(-8deg); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--border-strong);
  border-radius:10px;
  color:var(--ink);
  cursor:pointer;
}
.nav-toggle svg{ width:20px; height:20px; }

.mobile-menu{
  display:none;
  position:fixed;
  inset:76px 0 0 0;
  background:var(--bg);
  z-index:99;
  padding:32px 24px;
  overflow-y:auto;
}
.mobile-menu.open{ display:block; }
.mobile-menu a{
  display:block;
  font-family:'Fraunces',Georgia,serif;
  font-size:1.6rem;
  font-weight:600;
  padding:16px 0;
  border-bottom:1px solid var(--border);
  color:var(--ink);
}
.mobile-menu a.active{ color:var(--accent-strong); }
.mobile-menu .btn{ margin-top:28px; width:100%; white-space:normal; text-align:center; padding:15px 20px; }

@media (max-width:1180px){
  .nav-links{ display:none; }
  .nav-cta .btn-primary{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ================= HERO ================= */
.hero{
  position:relative;
  padding:168px 0 110px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 84% -8%, var(--accent-dim), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 40%, var(--accent-faint), transparent 60%),
    var(--bg);
}

/* Animated acoustic waveform field — three sine traces of different
   "frequency" drifting past each other, like overlapping sound waves. */
.hero-wave-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  mask-image:linear-gradient(to bottom, transparent, black 18%, black 78%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, black 18%, black 78%, transparent);
}
.hero-wave-bg .wline{
  position:absolute;
  left:-5%;
  width:110%;
  height:90px;
  background-repeat:repeat-x;
  will-change:background-position;
}
.hero-wave-bg .wline.w1{
  top:14%;
  height:90px;
  opacity:0.4;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%2290%22%20viewBox%3D%220%200%20400%2090%22%3E%3Cpath%20d%3D%22M%200.00%2C45.00%20L%206.25%2C48.90%20L%2012.50%2C52.65%20L%2018.75%2C56.11%20L%2025.00%2C59.14%20L%2031.25%2C61.63%20L%2037.50%2C63.48%20L%2043.75%2C64.62%20L%2050.00%2C65.00%20L%2056.25%2C64.62%20L%2062.50%2C63.48%20L%2068.75%2C61.63%20L%2075.00%2C59.14%20L%2081.25%2C56.11%20L%2087.50%2C52.65%20L%2093.75%2C48.90%20L%20100.00%2C45.00%20L%20106.25%2C41.10%20L%20112.50%2C37.35%20L%20118.75%2C33.89%20L%20125.00%2C30.86%20L%20131.25%2C28.37%20L%20137.50%2C26.52%20L%20143.75%2C25.38%20L%20150.00%2C25.00%20L%20156.25%2C25.38%20L%20162.50%2C26.52%20L%20168.75%2C28.37%20L%20175.00%2C30.86%20L%20181.25%2C33.89%20L%20187.50%2C37.35%20L%20193.75%2C41.10%20L%20200.00%2C45.00%20L%20206.25%2C48.90%20L%20212.50%2C52.65%20L%20218.75%2C56.11%20L%20225.00%2C59.14%20L%20231.25%2C61.63%20L%20237.50%2C63.48%20L%20243.75%2C64.62%20L%20250.00%2C65.00%20L%20256.25%2C64.62%20L%20262.50%2C63.48%20L%20268.75%2C61.63%20L%20275.00%2C59.14%20L%20281.25%2C56.11%20L%20287.50%2C52.65%20L%20293.75%2C48.90%20L%20300.00%2C45.00%20L%20306.25%2C41.10%20L%20312.50%2C37.35%20L%20318.75%2C33.89%20L%20325.00%2C30.86%20L%20331.25%2C28.37%20L%20337.50%2C26.52%20L%20343.75%2C25.38%20L%20350.00%2C25.00%20L%20356.25%2C25.38%20L%20362.50%2C26.52%20L%20368.75%2C28.37%20L%20375.00%2C30.86%20L%20381.25%2C33.89%20L%20387.50%2C37.35%20L%20393.75%2C41.10%20L%20400.00%2C45.00%22%20fill%3D%22none%22%20stroke%3D%22%232F5496%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-size:400px 90px;
  animation:waveDriftL 8s linear infinite;
}
.hero-wave-bg .wline.w2{
  top:44%;
  height:70px;
  opacity:0.32;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22500%22%20height%3D%2270%22%20viewBox%3D%220%200%20500%2070%22%3E%3Cpath%20d%3D%22M%200.00%2C35.00%20L%207.81%2C38.48%20L%2015.62%2C41.67%20L%2023.44%2C44.28%20L%2031.25%2C46.09%20L%2039.06%2C46.94%20L%2046.88%2C46.77%20L%2054.69%2C45.58%20L%2062.50%2C43.49%20L%2070.31%2C40.66%20L%2078.12%2C37.34%20L%2085.94%2C33.82%20L%2093.75%2C30.41%20L%20101.56%2C27.39%20L%20109.38%2C25.02%20L%20117.19%2C23.52%20L%20125.00%2C23.00%20L%20132.81%2C23.52%20L%20140.62%2C25.02%20L%20148.44%2C27.39%20L%20156.25%2C30.41%20L%20164.06%2C33.82%20L%20171.88%2C37.34%20L%20179.69%2C40.66%20L%20187.50%2C43.49%20L%20195.31%2C45.58%20L%20203.12%2C46.77%20L%20210.94%2C46.94%20L%20218.75%2C46.09%20L%20226.56%2C44.28%20L%20234.38%2C41.67%20L%20242.19%2C38.48%20L%20250.00%2C35.00%20L%20257.81%2C31.52%20L%20265.62%2C28.33%20L%20273.44%2C25.72%20L%20281.25%2C23.91%20L%20289.06%2C23.06%20L%20296.88%2C23.23%20L%20304.69%2C24.42%20L%20312.50%2C26.51%20L%20320.31%2C29.34%20L%20328.12%2C32.66%20L%20335.94%2C36.18%20L%20343.75%2C39.59%20L%20351.56%2C42.61%20L%20359.38%2C44.98%20L%20367.19%2C46.48%20L%20375.00%2C47.00%20L%20382.81%2C46.48%20L%20390.62%2C44.98%20L%20398.44%2C42.61%20L%20406.25%2C39.59%20L%20414.06%2C36.18%20L%20421.88%2C32.66%20L%20429.69%2C29.34%20L%20437.50%2C26.51%20L%20445.31%2C24.42%20L%20453.12%2C23.23%20L%20460.94%2C23.06%20L%20468.75%2C23.91%20L%20476.56%2C25.72%20L%20484.38%2C28.33%20L%20492.19%2C31.52%20L%20500.00%2C35.00%22%20fill%3D%22none%22%20stroke%3D%22%235D80B8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-size:500px 70px;
  animation:waveDriftR 12s linear infinite;
}
.hero-wave-bg .wline.w3{
  top:72%;
  height:60px;
  opacity:0.28;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22360%22%20height%3D%2260%22%20viewBox%3D%220%200%20360%2060%22%3E%3Cpath%20d%3D%22M%200.00%2C30.00%20L%205.62%2C33.06%20L%2011.25%2C35.66%20L%2016.88%2C37.39%20L%2022.50%2C38.00%20L%2028.12%2C37.39%20L%2033.75%2C35.66%20L%2039.38%2C33.06%20L%2045.00%2C30.00%20L%2050.62%2C26.94%20L%2056.25%2C24.34%20L%2061.88%2C22.61%20L%2067.50%2C22.00%20L%2073.12%2C22.61%20L%2078.75%2C24.34%20L%2084.38%2C26.94%20L%2090.00%2C30.00%20L%2095.62%2C33.06%20L%20101.25%2C35.66%20L%20106.88%2C37.39%20L%20112.50%2C38.00%20L%20118.12%2C37.39%20L%20123.75%2C35.66%20L%20129.38%2C33.06%20L%20135.00%2C30.00%20L%20140.62%2C26.94%20L%20146.25%2C24.34%20L%20151.88%2C22.61%20L%20157.50%2C22.00%20L%20163.12%2C22.61%20L%20168.75%2C24.34%20L%20174.38%2C26.94%20L%20180.00%2C30.00%20L%20185.62%2C33.06%20L%20191.25%2C35.66%20L%20196.88%2C37.39%20L%20202.50%2C38.00%20L%20208.12%2C37.39%20L%20213.75%2C35.66%20L%20219.38%2C33.06%20L%20225.00%2C30.00%20L%20230.62%2C26.94%20L%20236.25%2C24.34%20L%20241.88%2C22.61%20L%20247.50%2C22.00%20L%20253.12%2C22.61%20L%20258.75%2C24.34%20L%20264.38%2C26.94%20L%20270.00%2C30.00%20L%20275.62%2C33.06%20L%20281.25%2C35.66%20L%20286.88%2C37.39%20L%20292.50%2C38.00%20L%20298.12%2C37.39%20L%20303.75%2C35.66%20L%20309.38%2C33.06%20L%20315.00%2C30.00%20L%20320.62%2C26.94%20L%20326.25%2C24.34%20L%20331.88%2C22.61%20L%20337.50%2C22.00%20L%20343.12%2C22.61%20L%20348.75%2C24.34%20L%20354.38%2C26.94%20L%20360.00%2C30.00%22%20fill%3D%22none%22%20stroke%3D%22%231B2333%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-size:360px 60px;
  animation:waveDriftL 6s linear infinite;
}
@keyframes waveDriftL{
  from{ background-position-x:0; }
  to{ background-position-x:-400px; }
}
@keyframes waveDriftR{
  from{ background-position-x:0; }
  to{ background-position-x:500px; }
}

/* Pulsing equalizer strip — an unmistakably "live" acoustic-meter accent
   along the base of the hero, echoing a real audio level display. */
.hero-eq{
  position:absolute;
  left:0; right:0;
  bottom:36px;
  height:64px;
  z-index:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:8px;
  opacity:0.28;
  pointer-events:none;
}
.hero-eq .bar{
  width:6px;
  height:100%;
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg, var(--accent-soft), var(--accent));
  animation:eq 1.4s ease-in-out infinite;
  transform-origin:bottom center;
}
@media (max-width:960px){
  .hero-eq{ display:none; }
}

.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:60px;
  align-items:center;
}
.hero-copy h1{
  font-size:clamp(2.6rem, 5.2vw, 4.4rem);
}
.hero-copy .accent-word{
  font-style:italic;
  background-image:var(--grad-text);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.hero-eyebrow{ margin-bottom:22px; }
.hero-lede{
  margin-top:26px;
  font-size:1.15rem;
  color:var(--ink-muted);
  max-width:520px;
}
.hero-actions{
  margin-top:40px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.hero-position-line{
  margin-top:44px;
  padding-top:24px;
  border-top:1px solid var(--border);
  font-family:'Inter',sans-serif;
  font-size:0.95rem;
  color:var(--ink-faint);
  max-width:480px;
}
.hero-position-line strong{ color:var(--accent-strong); font-weight:600; }

/* waveform / logo visual */
.hero-visual{
  position:relative;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wave-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid var(--border);
}
.wave-ring.r2{ inset:12%; border-color:var(--border); }
.wave-ring.r3{ inset:24%; border-style:dashed; border-color:var(--accent-line); }

.wave-core{
  position:relative;
  z-index:2;
  width:60%;
  height:60%;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-lg);
  padding:14%;
}
.wave-core img{ width:100%; height:100%; object-fit:contain; }

.hero-visual .ripple{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid var(--accent-line);
  animation:ripple 3.6s var(--ease) infinite;
  opacity:0;
}
.hero-visual .ripple.d2{ animation-delay:1.2s; }
.hero-visual .ripple.d3{ animation-delay:2.4s; }
@keyframes ripple{
  0%{ transform:scale(0.64); opacity:0.6; }
  100%{ transform:scale(1.05); opacity:0; }
}
@keyframes eq{
  0%,100%{ transform:scaleY(0.35); }
  50%{ transform:scaleY(1); }
}

@media (max-width:960px){
  .hero{ padding:136px 0 80px; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ max-width:320px; margin:0 auto; order:-1; }
}

/* ================= STAT STRIP ================= */
.stat-strip{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-soft);
}
.stat-strip .container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.stat-item{
  padding:34px 20px;
  text-align:center;
  border-right:1px solid var(--border);
}
.stat-item:last-child{ border-right:none; }
.stat-num{
  font-family:'Fraunces',Georgia,serif;
  font-size:2.25rem;
  font-weight:700;
  display:block;
  background-image:var(--grad-text);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.stat-label{
  margin-top:6px;
  font-size:0.82rem;
  color:var(--ink-muted);
  letter-spacing:0.03em;
}
@media (max-width:700px){
  .stat-strip .container{ grid-template-columns:repeat(2,1fr); }
  .stat-item{ border-bottom:1px solid var(--border); }
}

/* ================= SCROLL REVEAL ================= */
.reveal{
  opacity:0;
  transform:translateY(28px) scale(0.98);
  transition:opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.in{ opacity:1; transform:translateY(0) scale(1); }
.reveal-stagger > *{ transition-delay:calc(var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ================= SERVICES ================= */
.services{ padding:130px 0 90px; background:var(--bg); }
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.service-card{
  background:var(--grad-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  padding:36px 30px 32px;
  position:relative;
  overflow:hidden;
  transition:border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.service-card::after{
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-accent);
  opacity:0;
  transition:opacity var(--dur-med) var(--ease);
}
.service-card:hover::after{ opacity:1; }
.service-card::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(400px 200px at 90% -10%, var(--accent-dim), transparent 60%);
  opacity:0;
  transition:opacity var(--dur-med) var(--ease);
}
.service-card:hover{ border-color:var(--accent-line); transform:translateY(-6px); box-shadow:var(--shadow-md); }
.service-card:hover::before{ opacity:1; }
.service-index{
  font-family:'Fraunces',Georgia,serif;
  font-size:0.82rem;
  color:var(--ink-faint);
  letter-spacing:0.08em;
}
.service-icon{
  width:52px; height:52px;
  border-radius:14px;
  background:var(--accent-dim);
  border:1px solid var(--accent-line);
  display:flex; align-items:center; justify-content:center;
  margin:18px 0 22px;
  color:var(--accent-strong);
}
.service-icon svg{ width:26px; height:26px; }
.service-card h3{
  font-size:1.32rem;
  position:relative; z-index:1;
}
.service-card p{
  margin-top:12px;
  color:var(--ink-muted);
  font-size:0.97rem;
  position:relative; z-index:1;
}
.service-link{
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:0.92rem;
  color:var(--accent-strong);
  position:relative; z-index:1;
}
.service-link svg{ width:15px; height:15px; transition:transform var(--dur-fast) var(--ease); }
.service-card:hover .service-link svg{ transform:translateX(4px); }

@media (max-width:900px){
  .services-grid{ grid-template-columns:1fr; }
}

/* ================= WHY HIRE US ================= */
.why{ padding:90px 0; background:var(--bg); }
.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  overflow:hidden;
}
.why-tile{
  background:var(--surface-tint);
  padding:32px 26px;
  transition:background var(--dur-med) var(--ease);
}
.why-tile:hover{ background:var(--surface); }
.why-tile .ic{
  width:42px; height:42px;
  color:var(--accent-strong);
  margin-bottom:18px;
}
.why-tile .ic svg{ width:100%; height:100%; }
.why-tile h4{
  font-size:1.02rem;
  font-weight:600;
  font-family:'Inter',sans-serif;
}
.why-tile p{
  margin-top:8px;
  font-size:0.87rem;
  color:var(--ink-muted);
  line-height:1.55;
}
@media (max-width:960px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* ================= SPACES ================= */
.spaces{ padding:90px 0 130px; background:var(--bg); }
.spaces-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:44px; }
.chip-grid{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.chip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 24px;
  border:1px solid var(--border-strong);
  border-radius:999px;
  font-family:'Inter',sans-serif;
  font-size:0.98rem;
  font-weight:500;
  color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  background:var(--surface);
}
.chip:hover{ border-color:var(--accent-line); background:var(--accent-dim); transform:translateY(-2px); }
.chip .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}

.space-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:56px;
}
.space-tile{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--radius-m);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.space-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.space-tile img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s var(--ease-out);
}
.space-tile:hover img{ transform:scale(1.06); }
.space-tile-label{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:16px 18px;
  background:linear-gradient(to top, rgba(10,14,22,0.78), transparent);
  color:#F5F7FB;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0.01em;
}
@media (max-width:900px){ .space-gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .space-gallery{ grid-template-columns:1fr; } }

/* ================= TEAM / STORY ================= */
.team{ padding:130px 0; background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.team-top{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:70px;
  align-items:stretch;
  margin-bottom:56px;
}
.team-copy p{
  color:var(--ink-muted);
  margin-bottom:16px;
  font-size:1.02rem;
}
.team-copy p strong{ color:var(--ink); font-weight:600; }

.values-row{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.value-pill{
  text-align:center;
  padding:20px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  background:var(--surface);
}
.value-pill span{
  display:block;
  font-family:'Inter',sans-serif;
  font-weight:600;
  color:var(--accent-strong);
  font-size:0.95rem;
}

/* Dominic Lim — featured founder panel occupying the full right column */
.team-featured{
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  padding:32px;
  box-shadow:var(--shadow-sm);
  display:flex;
  align-items:flex-start;
  min-height:260px;
  transition:border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.team-featured:hover{ border-color:var(--accent-line); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.team-featured .hero-wave-bg{
  z-index:0;
  mask-image:linear-gradient(to bottom, transparent, transparent 42%, black 52%, black 92%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, transparent 42%, black 52%, black 92%, transparent);
}
.team-featured .wline.w1{ top:50%; }
.team-featured .wline.w2{ top:70%; }
.team-featured .wline.w3{ top:88%; }
.team-featured-content{ position:relative; z-index:1; width:100%; }
.team-featured-icon{
  width:40px; height:40px;
  border-radius:12px;
  background:var(--accent-dim);
  border:1px solid var(--accent-line);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-strong);
  margin-bottom:16px;
}
.team-featured-icon svg{ width:20px; height:20px; }
.team-featured-name{ font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:1.15rem; }
.team-featured-role{ margin-top:5px; font-size:0.85rem; color:var(--ink-muted); }
.team-featured-photo{
  position:relative;
  z-index:1;
  margin:22px auto 0;
  width:48%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius-m);
  display:block;
  box-shadow:var(--shadow-sm);
}

/* Rest of the team — one straight row along the bottom */
.team-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.team-member{
  text-align:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  padding:28px 20px;
  transition:border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.team-member:hover{ border-color:var(--accent-line); transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.team-member-icon{
  width:46px; height:46px;
  border-radius:50%;
  margin:0 auto 16px;
  background:var(--accent-dim);
  border:1px solid var(--accent-line);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-strong);
}
.team-member-icon svg{ width:21px; height:21px; }
.team-member-name{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.02rem; }
.team-member-role{ margin-top:4px; font-size:0.85rem; color:var(--ink-muted); }

@media (max-width:960px){
  .team-top{ grid-template-columns:1fr; }
  .team-featured-photo{ width:60%; max-width:280px; }
}
@media (max-width:700px){
  .team-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .values-row{ grid-template-columns:1fr; }
}

/* ================= ABOUT (mission/vision + proof) ================= */
.about{ padding:130px 0 90px; background:var(--bg); }
.mv-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-bottom:20px;
}
.mv-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  padding:30px 32px;
  transition:border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.mv-card:hover{ border-color:var(--accent-line); transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.mv-card .eyebrow{ margin-bottom:10px; }
.mv-card p{ color:var(--ink-muted); font-size:1rem; line-height:1.65; }
@media (max-width:800px){ .mv-grid{ grid-template-columns:1fr; } }

/* ================= TESTIMONIAL ================= */
.testimonial{
  padding:100px 0;
  background:var(--bg);
  position:relative;
}
.testimonial-inner{
  max-width:820px;
  margin:0 auto;
  text-align:center;
  position:relative;
}
.quote-mark{
  font-family:'Fraunces',Georgia,serif;
  font-size:5rem;
  color:var(--accent);
  opacity:0.5;
  line-height:1;
  margin-bottom:8px;
}
.testimonial blockquote{
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight:500;
  font-style:italic;
  line-height:1.45;
  color:var(--ink);
  margin:0;
}
.testimonial-attr{
  margin-top:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.attr-avatar{
  width:48px; height:48px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-soft));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',Georgia,serif;
  font-weight:700;
  color:var(--on-accent);
  flex-shrink:0;
}
.attr-text{ text-align:left; }
.attr-name{ font-family:'Inter',sans-serif; font-weight:600; font-size:0.98rem; }
.attr-role{ font-size:0.85rem; color:var(--ink-muted); margin-top:2px; }

.testimonial-carousel{
  overflow:hidden;
  touch-action:pan-y;
  cursor:grab;
}
.testimonial-carousel:active{ cursor:grabbing; }
.testimonial-track{
  display:flex;
  transition:transform 0.6s var(--ease-out);
}
.testimonial-slide{
  flex:0 0 100%;
  width:100%;
}
.testimonial-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:36px;
}
.testimonial-dot{
  width:9px; height:9px;
  border-radius:50%;
  background:var(--border-strong);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out);
}
.testimonial-dot:hover{ background:var(--accent-line); }
.testimonial-dot.active{ background:var(--accent); transform:scale(1.35); }

/* ================= TRUSTED BY ================= */
.trusted{ padding:90px 0 130px; background:var(--bg); }
.trusted .eyebrow{ display:flex; justify-content:center; margin-bottom:56px; }
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Monochrome scrolling logo marquee — always animates, regardless of the
   OS-level "reduce motion" setting (see .motion-persist exemption below),
   since this is the section's only content and needs to visibly move. */
.marquee{
  margin-top:8px;
  padding:36px 0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marqueeScroll 46s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-set{
  display:flex;
  align-items:center;
  gap:96px;
  padding-right:96px;
  flex-shrink:0;
}
.marquee-set img{
  height:56px;
  width:auto;
  object-fit:contain;
  opacity:0.68;
  flex-shrink:0;
  transition:opacity var(--dur-fast) var(--ease);
}
.marquee-set img:hover{ opacity:1; }
@media (max-width:640px){
  .marquee-set{ gap:56px; padding-right:56px; }
  .marquee-set img{ height:38px; }
}
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width:560px){ .marquee-set img{ height:26px; } }

/* ================= CTA BAND (dark accent block) ================= */
.cta-band{
  padding:110px 0;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, rgba(var(--accent-rgb),0.18), transparent 65%),
    var(--dark);
  border-top:1px solid var(--on-dark-border);
}
.cta-band-inner{
  text-align:center;
  max-width:700px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.cta-band h2{ font-size:clamp(2rem, 4vw, 3rem); color:var(--on-dark); }
.cta-band p{ margin-top:18px; color:var(--on-dark-muted); font-size:1.08rem; }
.cta-band .btn{ margin-top:36px; }
.cta-waves{
  position:absolute;
  bottom:-1px; left:0; right:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  height:64px;
  opacity:0.35;
  pointer-events:none;
}
.cta-waves .bar{
  width:5px;
  background:var(--accent-soft);
  border-radius:3px 3px 0 0;
  animation:eq 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .cta-waves .bar{ animation:none; } }

/* ================= FOOTER ================= */
.footer{
  background:var(--dark-2);
  padding:80px 0 34px;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 0.8fr 0.8fr 1fr;
  gap:40px;
  padding-bottom:56px;
  border-bottom:1px solid var(--on-dark-border);
}
.footer-brand .logo{ margin-bottom:16px; }
.footer-brand p{
  color:var(--on-dark-muted);
  font-size:0.95rem;
  max-width:280px;
}
.footer-socials{
  display:flex;
  gap:10px;
  margin-top:22px;
}
.footer-socials a{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--on-dark-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--on-dark-muted);
  transition:all var(--dur-fast) var(--ease);
}
.footer-socials a:hover{ border-color:var(--accent-soft); color:var(--accent-soft); background:rgba(var(--accent-rgb),0.12); }
.footer-socials svg{ width:17px; height:17px; }

.footer-col h5{
  font-family:'Inter',sans-serif;
  font-size:0.9rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--on-dark-muted);
  margin-bottom:18px;
}
.footer-col ul li{ margin-bottom:12px; }
.footer-col a{
  color:var(--on-dark-muted);
  font-size:0.94rem;
  transition:color var(--dur-fast) var(--ease);
}
.footer-col a:hover{ color:var(--accent-soft); }
.footer-col .contact-line{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:var(--on-dark-muted);
  font-size:0.94rem;
  margin-bottom:14px;
}
.footer-col .contact-line svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; color:var(--accent-soft); }

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:28px;
  flex-wrap:wrap;
  gap:12px;
}
.footer-bottom p{ color:var(--on-dark-muted); font-size:0.85rem; }

@media (max-width:860px){
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .footer-top{ grid-template-columns:1fr; }
}

/* skip link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--accent);
  color:var(--on-accent);
  padding:12px 20px;
  z-index:1000;
  border-radius:0 0 8px 0;
  font-weight:600;
}
.skip-link:focus{ left:0; }

@media (max-width:520px){
  .container{ padding:0 18px; }
  .hero{ padding-top:120px; }
  .services, .why, .spaces, .team, .about, .testimonial, .cta-band{ padding-top:80px; padding-bottom:80px; }
}

/* ================= PROCESS ================= */
.process{ padding:130px 0; background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.process-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  margin-top:24px;
}
.process-line-h{
  position:absolute;
  top:26px; left:10%; right:10%;
  height:2px;
  background:var(--border);
  z-index:0;
}
.process-line-fill{
  position:absolute;
  top:26px; left:10%;
  height:2px;
  background:var(--grad-accent);
  z-index:0;
}
.process-line-fill.reveal{ opacity:1; transform:none; width:0; transition:width 1.3s var(--ease-out) .15s; }
.process-line-fill.reveal.in{ width:80%; }
.process-step{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.process-num{
  width:52px; height:52px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid var(--accent-line);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',Georgia,serif;
  font-weight:700;
  font-size:1.1rem;
  color:var(--accent-strong);
  margin-bottom:18px;
  box-shadow:var(--shadow-sm);
  flex-shrink:0;
}
.process-text{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.process-icon{
  display:block;
  width:34px; height:34px;
  color:var(--accent-strong);
  margin-bottom:14px;
  flex-shrink:0;
}
.process-icon svg{ width:100%; height:100%; display:block; }
.process-step h4{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:1rem;
}
.process-step p{
  margin-top:8px;
  font-size:0.88rem;
  color:var(--ink-muted);
  line-height:1.55;
  max-width:220px;
}
@media (max-width:900px){
  .process-track{ grid-template-columns:1fr; gap:0; margin-top:36px; }
  .process-line-h, .process-line-fill{ display:none; }
  .process-step{
    flex-direction:row;
    text-align:left;
    align-items:flex-start;
    gap:20px;
    padding-bottom:36px;
    position:relative;
  }
  .process-step:not(:last-child)::before{
    content:'';
    position:absolute;
    left:25px; top:52px; bottom:0;
    width:2px;
    background:var(--border);
  }
  .process-num{ margin-bottom:0; }
  .process-text{ display:flex; flex-direction:column; align-items:flex-start; }
  .process-icon{ margin-bottom:8px; }
  .process-step p{ max-width:none; }
}

/* ================= FAQ ================= */
.faq{ padding:130px 0; background:var(--bg); }
.faq-list{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  overflow:hidden;
}
.faq-item{ background:var(--surface); }
.faq-item summary{
  padding:22px 26px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-size:1.04rem;
  list-style:none;
  transition:color var(--dur-fast) var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--accent-strong); }
.faq-item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:4px; }
.faq-item .chev{
  width:20px; height:20px;
  flex-shrink:0;
  color:var(--accent-strong);
  transition:transform var(--dur-med) var(--ease-out);
}
.faq-item[open] .chev{ transform:rotate(180deg); }
.faq-answer{
  padding:0 26px 24px;
  color:var(--ink-muted);
  font-size:0.97rem;
  line-height:1.65;
  max-width:640px;
}

/* ================= CONTACT (two-column) ================= */
.contact-intro{ padding:130px 0 90px; background:var(--bg); }
.contact-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:60px;
  align-items:start;
}
.contact-info h3{ font-size:1.4rem; margin-bottom:20px; }
.contact-info .contact-line{
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:var(--ink-muted);
  font-size:0.98rem;
  margin-bottom:16px;
}
.contact-info .contact-line svg{ width:19px; height:19px; flex-shrink:0; margin-top:2px; color:var(--accent-strong); }
.contact-info .contact-line a{ color:var(--ink); transition:color var(--dur-fast) var(--ease); }
.contact-info .contact-line a:hover{ color:var(--accent-strong); }
.contact-socials{ display:flex; gap:10px; margin:22px 0 32px; }
.contact-socials a{
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-muted);
  transition:all var(--dur-fast) var(--ease);
}
.contact-socials a:hover{ border-color:var(--accent-line); color:var(--accent-strong); background:var(--accent-dim); }
.contact-socials svg{ width:17px; height:17px; }
.contact-direct{
  padding:24px 26px;
  background:var(--surface-tint);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
}
.contact-direct p{ font-weight:600; font-family:'Fraunces',Georgia,serif; margin-bottom:14px; }

.contact-form-wrap{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  padding:36px;
  box-shadow:var(--shadow-sm);
}
.form-row{ margin-bottom:20px; }
.form-row label{
  display:block;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:0.88rem;
  margin-bottom:8px;
  color:var(--ink);
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  padding:13px 16px;
  border-radius:var(--radius-s);
  border:1px solid var(--border-strong);
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:0.96rem;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.form-row textarea{ resize:vertical; min-height:120px; }
.form-row.has-error input,
.form-row.has-error select,
.form-row.has-error textarea{ border-color:#D14343; }
.field-error{
  display:block;
  min-height:1.2em;
  margin-top:6px;
  font-size:0.82rem;
  color:#D14343;
}
.form-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; }
.form-row-full{ grid-column:1 / -1; }
.form-status{
  margin-top:18px;
  padding:14px 18px;
  border-radius:var(--radius-s);
  font-size:0.92rem;
  display:none;
}
.form-status.is-success{ display:block; background:rgba(46,160,90,0.12); color:#1E7A43; border:1px solid rgba(46,160,90,0.3); }
:root[data-theme="dark"] .form-status.is-success{ color:#7EE2A8; }
.form-status.is-error{ display:block; background:rgba(209,67,67,0.1); color:#D14343; border:1px solid rgba(209,67,67,0.3); }
:root[data-theme="dark"] .form-status.is-error{ color:#FF9B9B; }
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-cols{ grid-template-columns:1fr; }
}

/* ================= ARTICLES ================= */
.articles{ padding:130px 0; background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.articles-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.article-card{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  overflow:hidden;
  transition:border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.article-card:hover{ border-color:var(--accent-line); transform:translateY(-5px); box-shadow:var(--shadow-md); }
.article-card-img{
  aspect-ratio:4/3;
  width:100%;
  overflow:hidden;
  background:var(--surface-tint);
}
.article-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease-out); }
.article-card:hover .article-card-img img{ transform:scale(1.05); }
.article-card-body{
  padding:22px 24px 26px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.article-tag{
  align-self:flex-start;
  font-family:'Inter',sans-serif;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent-strong);
  background:var(--accent-dim);
  padding:5px 11px;
  border-radius:999px;
}
.article-card h3{
  font-size:1.12rem;
  margin-top:12px;
  line-height:1.3;
}
.article-card p{
  margin-top:8px;
  font-size:0.9rem;
  color:var(--ink-muted);
  line-height:1.55;
  flex:1;
}
.article-card .read-more{
  margin-top:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:0.88rem;
  color:var(--accent-strong);
}
.article-card .read-more svg{ width:14px; height:14px; transition:transform var(--dur-fast) var(--ease); }
.article-card:hover .read-more svg{ transform:translateX(4px); }
@media (max-width:960px){ .articles-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .articles-grid{ grid-template-columns:1fr; } }

/* ================= ARTICLE PAGE (shared with articles/*.html) ================= */
.article-hero{
  padding:160px 0 50px;
  background:var(--bg-soft);
  border-bottom:1px solid var(--border);
}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:0.9rem;
  color:var(--accent-strong);
  margin-bottom:24px;
}
.back-link svg{ width:16px; height:16px; }
.article-hero h1{ font-size:clamp(2rem, 4vw, 2.9rem); max-width:820px; }
.article-meta{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  color:var(--ink-muted);
  font-size:0.9rem;
}
.article-lead-img{
  margin:-20px 0 0;
  padding:0 0 60px;
  background:var(--bg-soft);
}
.article-lead-img img{
  width:100%;
  max-height:460px;
  object-fit:cover;
  border-radius:var(--radius-l);
  display:block;
}
.article-body{
  padding:70px 0 40px;
  max-width:760px;
  margin:0 auto;
}
.article-body h2{ font-size:1.6rem; margin-top:48px; margin-bottom:18px; }
.article-body h2:first-child{ margin-top:0; }
.article-body h3{ font-size:1.25rem; margin-top:34px; margin-bottom:14px; }
.article-body h4{ font-family:'Inter',sans-serif; font-size:1.02rem; margin-top:26px; margin-bottom:10px; }
.article-body p{ color:var(--ink-soft); font-size:1.05rem; line-height:1.75; margin-bottom:20px; }
.article-body ul, .article-body ol{ margin:0 0 20px; padding-left:1.3em; color:var(--ink-soft); font-size:1.02rem; line-height:1.7; }
.article-body li{ margin-bottom:8px; }
.article-body a{ color:var(--accent-strong); text-decoration:underline; text-underline-offset:2px; }
.article-figure{ margin:32px 0; }
.article-figure img{ width:100%; border-radius:var(--radius-m); display:block; }
.article-quote{
  margin:36px 0;
  padding:28px 32px;
  border-left:3px solid var(--accent);
  background:var(--surface-tint);
  border-radius:0 var(--radius-m) var(--radius-m) 0;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-size:1.2rem;
  color:var(--ink);
}
.article-quote cite{ display:block; margin-top:12px; font-family:'Inter',sans-serif; font-style:normal; font-size:0.85rem; font-weight:600; color:var(--ink-muted); }
.article-refs{ font-size:0.88rem; color:var(--ink-faint); word-break:break-word; }
.article-note{ font-size:0.9rem; color:var(--ink-muted); background:var(--accent-faint); border:1px solid var(--accent-line); border-radius:var(--radius-s); padding:14px 18px; }
dl.db-scale{ display:grid; grid-template-columns:auto 1fr; gap:10px 18px; margin:24px 0; }
dl.db-scale > div{ display:contents; }
dl.db-scale dt{ font-family:'Fraunces',Georgia,serif; font-weight:700; color:var(--accent-strong); white-space:nowrap; }
dl.db-scale dd{ margin:0; color:var(--ink-soft); }
.table-scroll{ overflow-x:auto; margin:28px 0; border:1px solid var(--border); border-radius:var(--radius-m); }
.table-scroll table{ width:100%; border-collapse:collapse; font-size:0.92rem; }
.table-scroll caption{ text-align:left; padding:14px 18px 0; font-weight:600; color:var(--ink); caption-side:top; }
.table-scroll th, .table-scroll td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.table-scroll thead th{ background:var(--surface-tint); font-family:'Inter',sans-serif; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-muted); }
.table-scroll tbody tr:last-child td{ border-bottom:none; }
.article-footer-cta{ padding:70px 0 110px; }
@media (max-width:640px){
  .article-hero{ padding:130px 0 40px; }
  .article-body{ padding:50px 0 20px; }
  .article-quote{ padding:22px 24px; font-size:1.08rem; }
}