/* ============================================================
   AMAZU — shared stylesheet
   Loaded by amazu-website.html and amazu-work.html.

   Dark values mirror the signed brand assets exactly:
   #0A0C0B ground, #22B573 accent, #F2F5F3 ink.
   ============================================================ */

/* ---------- tokens ---------- */
:root, :root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0a0c0b; --surface:#0f1311; --surface-2:#151a17;
  --ink:#f2f5f3; --muted:#9aa39e; --faint:#808a84;
  --accent:#22b573; --accent-deep:#0d6b43; --on-accent:#08120d;
  --line: rgba(242,245,243,.12);
  --line-strong: rgba(242,245,243,.26);
  --hair: rgba(242,245,243,.08);
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f6f8f6; --surface:#ffffff; --surface-2:#eef2ef;
  --ink:#0a0f0c; --muted:#55605a; --faint:#6a736e;
  --accent:#0d6b43; --accent-deep:#0a5535; --on-accent:#ffffff;
  --line: rgba(10,15,12,.14);
  --line-strong: rgba(10,15,12,.32);
  --hair: rgba(10,15,12,.09);
}
:root{
  --f-display:'Anton', Impact, sans-serif;
  --f-body:'Inter', system-ui, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, monospace;
  --r: 4px;
  --container: 1240px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4.5rem, 9vw, 8rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
figure{ margin:0; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; }
button{ cursor:pointer; }
section{ scroll-margin-top:88px; }
::selection{ background:var(--accent); color:var(--on-accent); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:1100;
  background:var(--accent); color:var(--on-accent);
  padding:.75rem 1.1rem; font-weight:600; border-radius:0 0 var(--r) 0;
}
.skip:focus{ left:0; }

/* grain, fixed and non-interactive so it never repaints on scroll */
.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* ---------- shared type ---------- */
.label{
  font-family:var(--f-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.section-title{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(2rem, 4.2vw, 3.4rem); line-height:1.05; letter-spacing:.005em;
}
.section-title .accent, .hero-title .accent{ color:var(--accent); }
.section-sub{ margin-top:1.1rem; color:var(--muted); font-size:1.02rem; max-width:56ch; }

/* ---------- brand mark ----------
   The signed logo SVGs all ship an opaque background rect, which is what
   made them read as bordered tiles. Every mark on the page is the real
   brand geometry inlined and coloured from tokens, so it has no background
   to blend against and no edge to show. */
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand svg{ height:30px; width:auto; flex:none; }
.bm-line{ fill:none; stroke:var(--ink); }
.bm-ink{ fill:var(--ink); }
.bm-accent{ fill:var(--accent); }

/* full lockup: mark, rule and the AMAZU wordmark as vectors */
.lockup{ padding:1.5rem 0; }
.lockup svg{ width:100%; max-width:210px; height:auto; margin:0 auto; display:block; }
.lg-line{ fill:none; stroke:var(--ink); }
.lg-ink{ fill:var(--ink); }
.lg-accent{ fill:var(--accent); }

.brand-name{
  font-family:var(--f-body); font-weight:700; letter-spacing:.14em;
  font-size:.95rem; line-height:1;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.6rem; border-radius:var(--r);
  font-weight:600; letter-spacing:.06em; font-size:.85rem;
  border:1px solid transparent; white-space:nowrap;
  transition:background-color .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ background:var(--accent-deep); color:var(--on-accent); }
.btn-ghost{ border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.arrow{ transition:transform .2s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }

.tag{
  font-family:var(--f-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.1em; color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background:color-mix(in srgb, var(--accent) 11%, transparent);
  padding:.28rem .55rem; border-radius:var(--r); display:inline-block;
}

/* ---------- nav ---------- */
.top-sentinel{ position:absolute; top:0; left:0; width:1px; height:1px; }
header{
  position:fixed; top:0; left:0; right:0; z-index:950;
  padding:.95rem 0;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease);
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--line); padding:.6rem 0;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.nav-links{ display:flex; align-items:center; gap:1.9rem; }
.nav-links a{
  font-size:.85rem; font-weight:500; letter-spacing:.06em;
  color:var(--muted); position:relative; padding:.2rem 0;
  transition:color .2s ease; text-transform:uppercase;
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px;
  background:var(--accent); transition:width .25s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:.75rem; }
.nav-cta .btn{ padding:.65rem 1.1rem; font-size:.8rem; }

.theme-toggle{
  width:38px; height:38px; border:1px solid var(--line-strong);
  background:transparent; color:var(--ink); border-radius:var(--r);
  display:inline-flex; align-items:center; justify-content:center; padding:0;
  transition:border-color .2s ease, color .2s ease;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .sun{ display:none; }
:root[data-theme="light"] .theme-toggle .sun{ display:block; }
:root[data-theme="light"] .theme-toggle .moon{ display:none; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none;
  border:1px solid var(--line-strong); border-radius:var(--r);
  padding:.6rem .55rem;
}
.nav-toggle span{ width:20px; height:2px; background:var(--ink); display:block; }

.mobile-menu{
  position:fixed; inset:0; background:var(--bg); z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.9rem; transform:translateY(-100%); opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); opacity:1; }
.mobile-menu a{
  font-family:var(--f-display); font-size:1.7rem;
  text-transform:uppercase; letter-spacing:.03em;
}
.mobile-close{
  position:absolute; top:1.3rem; right:1.3rem; background:none;
  border:0; color:var(--ink); font-size:2rem; line-height:1;
}

/* ---------- hero ---------- */
.hero{
  position:relative; display:flex; align-items:center;
  padding:6rem 0 5.5rem; overflow:hidden;
  min-height:100vh; min-height:100dvh;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center; width:100%;
}
.hero-copy > *{ opacity:0; animation:rise .8s var(--ease) forwards; }
.hero-copy > *:nth-child(1){ animation-delay:.05s; }
.hero-copy > *:nth-child(2){ animation-delay:.13s; }
.hero-copy > *:nth-child(3){ animation-delay:.21s; }
.hero-copy > *:nth-child(4){ animation-delay:.29s; }
@keyframes rise{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none; } }

.hero-title{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(2.5rem, 5.4vw, 4.2rem); line-height:1.03;
  letter-spacing:.004em; margin-top:1.1rem;
}
.hero-sub{ margin-top:1.4rem; font-size:1.1rem; color:var(--muted); max-width:44ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem; }

/* the rotating brand wheel, back at the top right of the hero */
.hero-visual{ position:relative; display:flex; flex-direction:column; align-items:center; }
.hero-ring{ width:100%; max-width:min(500px, 42vw); aspect-ratio:1/1; }
.hero-ring svg{ width:100%; height:100%; display:block; overflow:visible; }
.rk-spin{ transform-origin:200px 200px; animation:spin 100s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.rk-c{ fill:none; stroke:var(--line-strong); stroke-width:1; }
.rk-c-2{ stroke:var(--hair); }
.rk-text{
  fill:var(--accent); font-family:var(--f-mono); font-size:15px;
  font-weight:500; letter-spacing:.14em; opacity:.62;
}
.rk-tick{ fill:var(--accent); opacity:.7; }
.hero-visual figcaption{
  margin-top:1.1rem; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  text-align:center;
}

/* ---------- capability rail (the page's single marquee) ---------- */
.rail{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.rail-track{
  display:flex; width:max-content;
  animation:slide 38s linear infinite;
}
.rail-track:hover{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.rail-item{
  display:flex; align-items:center; gap:2.6rem;
  padding:1.05rem 1.3rem;
  font-family:var(--f-mono); font-size:.76rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap; transition:color .2s ease;
}
.rail-item:hover{ color:var(--accent); }
.rail-item::after{
  content:''; width:6px; height:6px; flex:none;
  background:var(--accent); transform:rotate(45deg);
}

/* ---------- about ---------- */
.about{ padding:var(--section-pad) 0; }
.section{ padding:var(--section-pad) 0; border-top:1px solid var(--line); }

.about-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2.5rem, 6vw, 5rem); align-items:start; }
.about-copy p{ color:var(--muted); font-size:1.04rem; margin-top:1.1rem; max-width:46ch; }

.principles{ display:grid; }
.principle{
  display:grid; grid-template-columns:auto 1fr; gap:1.3rem;
  padding:1.5rem 0; border-top:1px solid var(--line);
  transition:background-color .25s ease;
}
.principle:last-child{ border-bottom:1px solid var(--line); }
.principle .num{
  font-family:var(--f-mono); font-size:.72rem; color:var(--accent);
  padding-top:.35rem; letter-spacing:.08em;
}
.principle h4{ font-weight:600; letter-spacing:.02em; font-size:1.02rem; }
.principle p{ margin-top:.4rem; color:var(--muted); font-size:.93rem; max-width:52ch; }

/* ---------- services ---------- */
.division{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem, 4vw, 3.5rem); align-items:center; }
.division + .division{ margin-top:clamp(4rem, 8vw, 7rem); }
.division-visual{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:clamp(1.5rem, 3vw, 2.5rem);
  display:flex; align-items:center; justify-content:center;
}
.division-visual svg{ width:100%; max-width:330px; height:auto; }

/* pipeline diagram. Every stage box shares the x centre 152, every
   connector stops on the arrowhead base, and the return path leaves and
   re-enters on the vertical centre of its box, so nothing crosses. */
.dg-line{ fill:none; stroke:var(--line-strong); stroke-width:1.5; }
.dg-arrow{ fill:var(--line-strong); }
.dg-box{ fill:none; stroke:var(--line-strong); stroke-width:1.5; }
.dg-box-on{ fill:color-mix(in srgb, var(--accent) 12%, transparent); stroke:var(--accent); stroke-width:1.5; }
.dg-text{
  fill:var(--muted); font-family:var(--f-mono); font-size:11px;
  font-weight:500; letter-spacing:.16em;
}
.dg-text-on{ fill:var(--accent); font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.16em; }
.dg-return{
  fill:none; stroke:var(--accent); stroke-width:1.5;
  stroke-dasharray:5 6; opacity:.9;
  animation:dash 2.6s linear infinite;
}
.dg-arrow-on{ fill:var(--accent); }
@keyframes dash{ to{ stroke-dashoffset:-11; } }

.division h3{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(1.7rem, 3.2vw, 2.5rem); line-height:1.05;
}
.division-desc{ margin-top:1rem; color:var(--muted); max-width:52ch; }
.division-list{ margin-top:1.8rem; display:grid; }
.division-list li{
  display:flex; align-items:flex-start; gap:.9rem;
  padding:.85rem 0; border-top:1px solid var(--line);
  font-size:.96rem;
}
.division-list li:last-child{ border-bottom:1px solid var(--line); }
.division-list li::before{
  content:''; flex:none; margin-top:.45rem;
  width:.45rem; height:.45rem;
  border-top:1px solid var(--accent); border-right:1px solid var(--accent);
  transform:rotate(45deg);
}

/* analyst rows: a different layout family from the split above */
.roles{ margin-top:2rem; display:grid; }
.role-row{
  display:grid; grid-template-columns:minmax(0,15rem) 1fr;
  gap:1.5rem; padding:1.5rem 0; border-top:1px solid var(--line);
}
.roles .role-row:last-child{ border-bottom:1px solid var(--line); }
.role-row h4{
  font-weight:600; letter-spacing:.02em; font-size:1.05rem;
  display:flex; align-items:center; gap:.7rem;
}
.role-row .idx{
  font-family:var(--f-mono); font-size:.7rem; color:var(--accent);
  font-weight:500; letter-spacing:.1em;
}
.role-row p{ color:var(--muted); font-size:.95rem; max-width:56ch; }

/* ---------- process ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.process-step{ padding:2rem 1.6rem 0 0; border-top:1px solid var(--line); position:relative; }
.process-step::before{
  content:''; position:absolute; top:-1px; left:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease);
}
.process-step.in::before{ transform:scaleX(1); }
.process-num{
  font-family:var(--f-mono); font-weight:700; font-size:.78rem;
  color:var(--accent); letter-spacing:.1em;
}
.process-step h4{ margin-top:.7rem; font-weight:600; letter-spacing:.02em; font-size:1.08rem; }
.process-step p{ margin-top:.5rem; color:var(--muted); font-size:.93rem; max-width:30ch; }

/* ---------- projects (homepage featured + work index) ---------- */
.proj-head{ max-width:640px; }
.proj-head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:1.5rem; margin-bottom:2.75rem;
}
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.p-card{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--surface); display:flex; flex-direction:column;
  transition:border-color .25s ease, transform .25s var(--ease);
}
.p-card:hover{ border-color:var(--accent); transform:translateY(-3px); }
.p-card-media{
  aspect-ratio:16/10; background:var(--bg); display:flex;
  align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.p-card-media img{ width:100%; height:100%; object-fit:cover; }
.p-card-media .placeholder-ring{ width:52px; height:52px; opacity:.45; color:var(--faint); }
.p-card-body{ padding:1.3rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.p-card-body h4{ font-weight:600; letter-spacing:.01em; font-size:1.06rem; }
.p-card-body p{ color:var(--muted); font-size:.9rem; flex:1; }
.p-card-link{
  font-family:var(--f-mono); font-size:.75rem; color:var(--accent);
  margin-top:.3rem; letter-spacing:.06em;
}
.p-card-link:hover{ text-decoration:underline; }
.p-card-del{
  position:absolute; top:.65rem; right:.65rem; width:26px; height:26px; border-radius:50%;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border:1px solid var(--line-strong); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s ease; font-size:.85rem; line-height:1;
}
.p-card:hover .p-card-del, .p-card:focus-within .p-card-del{ opacity:1; }
.p-add{
  border:1px dashed var(--line-strong); border-radius:var(--r); min-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.85rem;
  color:var(--muted); background:transparent; padding:2.5rem 1.5rem; text-align:center;
  transition:border-color .25s ease, color .25s ease;
}
.p-add:hover{ border-color:var(--accent); color:var(--accent); }
.p-add .plus{
  width:40px; height:40px; border-radius:50%; border:1px solid currentColor;
  display:flex; align-items:center; justify-content:center; font-size:1.35rem; line-height:1;
}
.p-add .label{ color:inherit; }
.portfolio-empty{
  grid-column:1/-1; text-align:center; padding:3.5rem 1.5rem;
  border:1px dashed var(--line); border-radius:var(--r);
}
.portfolio-empty.show{ display:block; }
.portfolio-empty .eh{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:1.3rem; margin-bottom:.6rem;
}
.portfolio-empty p{ color:var(--muted); font-size:.92rem; max-width:40ch; margin:0 auto; }
.portfolio-note{ margin-top:1.5rem; font-size:.82rem; color:var(--faint); font-family:var(--f-mono); max-width:70ch; }

/* ---------- work page ---------- */
.work-hero{ padding:9rem 0 4.5rem; border-bottom:1px solid var(--line); }
.back-link{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  transition:color .2s ease;
}
.back-link:hover{ color:var(--accent); }
.back-link .arrow{ transition:transform .2s var(--ease); }
.back-link:hover .arrow{ transform:translateX(-3px); }
.work-hero .section-title{ margin-top:1.1rem; }

.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.25rem; }
.filter{
  border:1px solid var(--line-strong); background:transparent; color:var(--muted);
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.5rem .9rem; border-radius:var(--r);
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.filter:hover{ border-color:var(--accent); color:var(--accent); }
.filter[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
}
.work-count{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin-left:auto; align-self:center;
}

/* ---------- faq ---------- */
.faq-list{ max-width:820px; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:1.5rem; padding:1.5rem 0; cursor:pointer;
  font-weight:600; letter-spacing:.01em; font-size:1.05rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .icon{ flex:none; width:16px; height:16px; position:relative; }
.faq-item summary .icon::before, .faq-item summary .icon::after{
  content:''; position:absolute; background:var(--accent); top:50%; left:50%;
  transform:translate(-50%,-50%); transition:transform .25s var(--ease), opacity .25s ease;
}
.faq-item summary .icon::before{ width:14px; height:1.5px; }
.faq-item summary .icon::after{ width:1.5px; height:14px; }
.faq-item[open] summary .icon::after{ opacity:0; transform:translate(-50%,-50%) rotate(90deg); }
.faq-item p{ padding:0 0 1.6rem; color:var(--muted); max-width:70ch; font-size:.96rem; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem, 5vw, 4rem); align-items:start; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ margin-bottom:1.1rem; }
.field label{
  display:block; font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--surface); border:1px solid var(--line-strong);
  color:var(--ink); padding:.8rem .9rem; border-radius:var(--r); resize:vertical;
  transition:border-color .2s ease, background-color .2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--faint); }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--muted); }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);
}
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:var(--surface); color:var(--ink); }
.field-help{ margin-top:.45rem; font-size:.78rem; color:var(--faint); }

.contact-aside{ display:grid; gap:1.1rem; }
.c-card{
  border:1px solid var(--line); border-radius:var(--r); padding:1.25rem 1.35rem;
  background:var(--surface); transition:border-color .25s ease;
}
.c-card:hover{ border-color:var(--accent); }
.c-card h4{
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.c-card .value{
  display:block; margin-top:.45rem; font-weight:500; font-size:1rem;
  color:var(--ink); word-break:break-word;
}
a.value:hover{ color:var(--accent); }
.c-card .note{ margin-top:.35rem; color:var(--faint); font-size:.82rem; }

/* ---------- footer ---------- */
footer{ padding:3.5rem 0 1.75rem; border-top:1px solid var(--line); background:var(--surface); }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:2.5rem; }
.footer-brand p{ margin-top:1rem; color:var(--muted); font-size:.92rem; max-width:34ch; }
.footer-col h5{
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem;
}
.footer-col ul{ display:grid; gap:.65rem; }
.footer-col a{ font-size:.92rem; transition:color .2s ease; }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem; padding-top:1.75rem; border-top:1px solid var(--line);
  color:var(--faint); font-size:.8rem; font-family:var(--f-mono);
}

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(4,6,5,.78);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  z-index:1050; display:flex; align-items:center; justify-content:center; padding:1.5rem;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  width:100%; max-width:540px; max-height:88vh; overflow-y:auto; padding:2rem;
  transform:translateY(14px); transition:transform .25s var(--ease);
}
.modal-overlay.open .modal{ transform:none; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.modal-head h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.35rem; }
.modal-close{ background:none; border:0; color:var(--muted); font-size:1.6rem; line-height:1; }
.modal-close:hover{ color:var(--ink); }
.field-file{
  border:1px dashed var(--line-strong); border-radius:var(--r); padding:1.2rem;
  text-align:center; cursor:pointer; color:var(--faint); font-size:.85rem; position:relative;
  transition:border-color .2s ease, color .2s ease;
}
.field-file:hover{ border-color:var(--accent); color:var(--muted); }
.field-file input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-preview{ margin-top:.8rem; max-height:140px; border-radius:var(--r); overflow:hidden; display:none; }
.file-preview.show{ display:block; }
.modal-actions{ display:flex; justify-content:flex-end; gap:.9rem; margin-top:1.5rem; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn{ display:none; }
  .hero-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .hero{ padding-top:6.5rem; min-height:0; }
  .hero-ring{ max-width:min(400px, 76vw); margin:0 auto; }
  .about-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .division{ grid-template-columns:1fr; gap:2rem; }
  .division-visual{ max-width:420px; }
  .process-grid{ grid-template-columns:1fr 1fr; }
  .proj-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .role-row{ grid-template-columns:1fr; gap:.5rem; }
  .work-count{ margin-left:0; width:100%; }
}
@media (max-width:640px){
  .process-grid{ grid-template-columns:1fr; }
  .proj-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .hero-title{ font-size:clamp(2.3rem, 11vw, 3.2rem); }
  .rail-item{ gap:1.8rem; padding:.9rem 1rem; }
  .rk-text{ font-size:19px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero-copy > *{ opacity:1; }
  .reveal{ opacity:1; transform:none; }
  .rail-track{ animation:none; }
  .rk-spin{ animation:none; }
  .dg-return{ animation:none; }
  .process-step::before{ transform:scaleX(1); }
}