/* ============================================================
   ASTONY — design tokens
   Ink / Paper / Salmon. Puzzle & "connecting the dots" language.
   ============================================================ */
:root{
  --ink: #14100D;
  --ink-soft: #3A322D;
  --paper: #FBF5EF;
  --paper-dim: #F2E9DF;
  --salmon: #FF9D76;
  --salmon-deep: #E8623B;
  --salmon-pale: #FFDCC6;
  --line: rgba(20,16,13,0.14);
  --line-on-ink: rgba(251,245,239,0.18);

  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--ink); color:var(--paper); }

:focus-visible{
  outline:3px solid var(--salmon-deep);
  outline-offset:3px;
}

h1,h2,h3,h4{ margin:0; font-family:var(--font-head); font-weight:700; letter-spacing:-0.01em; }
p{ margin:0; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.72rem;
  display:inline-flex;
  align-items:center;
  gap:0.55em;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--salmon-deep);
  display:inline-block;
}

.section{ padding:clamp(64px,10vw,120px) 0; }
.section--tight{ padding:clamp(40px,6vw,72px) 0; }
.section--ink{ background:var(--ink); color:var(--paper); }
.section--salmon{ background:var(--salmon); color:var(--ink); }
.section--pale{ background:var(--paper-dim); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.rule--on-ink{ background:var(--line-on-ink); }

/* ---------- Modern line icons (original set, feather-style) ---------- */
.icon{
  width:1em; height:1em;
  stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-0.15em;
  flex-shrink:0;
}
.icon--lg{ width:28px; height:28px; }

.icon-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:var(--ink); color:var(--salmon);
  margin-bottom:18px;
}
.icon-chip .icon{ width:22px; height:22px; }
.section--ink .icon-chip{ background:var(--salmon); color:var(--ink); }

.btn .icon{ width:14px; height:14px; }

.contact-detail .icon{ width:18px; height:18px; color:var(--salmon); }
.footer-col a{ display:inline-flex; align-items:center; gap:10px; }
.footer-col .icon{ width:15px; height:15px; color:var(--salmon); flex-shrink:0; }

/* ---------- Photo placeholder (for client-supplied photography) ---------- */
.photo-slot{
  position:relative;
  border:1.5px dashed var(--line-on-ink, var(--line));
  background:
    repeating-linear-gradient(135deg, rgba(255,157,118,0.06) 0 2px, transparent 2px 14px);
  min-height:340px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  text-align:center; padding:32px;
  color:var(--ink-soft);
}
.section--ink .photo-slot{ color:rgba(251,245,239,0.65); border-color:var(--line-on-ink); }
.photo-slot .icon{ width:34px; height:34px; opacity:0.7; }
.photo-slot span{ font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; }
.photo-slot small{ font-family:var(--font-body); font-size:0.85rem; max-width:26ch; opacity:0.85; }

/* ---------- Diagram figures (content-driven illustrations) ---------- */
.diagram{
  border:1px solid var(--line);
  background:var(--paper-dim);
  padding:clamp(22px,4vw,44px);
}
.section--ink .diagram{ background:rgba(251,245,239,0.04); border-color:var(--line-on-ink); }
.diagram svg{ width:100%; height:auto; display:block; }
.diagram-cap{
  margin-top:16px; font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--salmon-deep);
}
.section--ink .diagram-cap{ color:var(--salmon); }

/* ---------- Puzzle piece signature mark ---------- */
.piece{
  display:inline-block;
  width:1em; height:1em;
  color:var(--salmon-deep);
}
.piece svg{ width:100%; height:100%; display:block; }
.piece--spin{ animation: piece-float 7s ease-in-out infinite; }
@keyframes piece-float{
  0%,100%{ transform: rotate(-6deg) translateY(0); }
  50%{ transform: rotate(4deg) translateY(-6px); }
}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,245,239,0.88);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gutter);
  max-width:var(--container); margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:700; font-size:1.05rem;
  text-decoration:none; letter-spacing:0.02em;
}
.brand img{ height:28px; width:auto; }
.nav-links{
  display:flex; align-items:center; gap:clamp(18px,3vw,34px);
  list-style:none; margin:0; padding:0;
  font-family:var(--font-mono); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em;
}
.nav-links a{
  text-decoration:none; position:relative; padding:4px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--salmon-deep); transition:right .25s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ right:0; }
.nav-cta{
  font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em;
  background:var(--ink); color:var(--paper); text-decoration:none;
  padding:10px 18px; border-radius:var(--radius);
  border:1px solid var(--ink);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nav-cta:hover{ background:transparent; color:var(--ink); transform:translateY(-1px); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--ink); border-radius:4px;
  width:40px; height:40px; padding:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ width:18px; height:2px; background:var(--ink); display:block; }

@media (max-width: 780px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:64px 0 auto 0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-links.is-open{ max-height:420px; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:16px var(--gutter); width:100%; border-bottom:1px solid var(--line); }
  .nav-links a::after{ display:none; }
  .nav-cta{ margin:16px var(--gutter) 20px; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--ink); color:var(--paper);
  overflow:hidden;
  padding:clamp(70px,12vw,140px) 0 clamp(56px,9vw,96px);
}
#dotfield{
  position:absolute; inset:0; width:100%; height:100%;
  display:block;
}
.hero-inner{ position:relative; z-index:2; }
.hero .eyebrow{ color:var(--salmon); }
.hero h1{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-weight:400;
  font-size:clamp(2.4rem, 6.6vw, 5rem);
  line-height:0.98;
  margin:20px 0 0;
  max-width:16ch;
}
.hero h1 .dotword{
  background-image: radial-gradient(circle, var(--salmon) 2.5px, transparent 2.6px);
  background-position: bottom 6px left;
  background-repeat: repeat-x;
  background-size: 14px 14px;
  padding-bottom:14px;
}
.hero-sub{
  margin-top:28px; max-width:52ch;
  font-size:clamp(1rem,1.6vw,1.2rem); color:rgba(251,245,239,0.82);
}
.hero-meta{
  margin-top:44px; display:flex; gap:clamp(24px,5vw,64px); flex-wrap:wrap;
  font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em;
  color:rgba(251,245,239,0.72);
}
.hero-meta strong{ display:block; color:var(--paper); font-family:var(--font-head); font-size:1rem; text-transform:none; letter-spacing:0; margin-top:4px; }

/* ---------- Page hero (sub pages, no canvas) ---------- */
.page-hero{
  background:var(--ink); color:var(--paper);
  padding:clamp(64px,10vw,110px) 0 clamp(48px,7vw,72px);
  position:relative; overflow:hidden;
}
.page-hero h1{
  font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(2.2rem,7vw,4.6rem); line-height:0.98; margin-top:18px;
}
.page-hero .eyebrow{ color:var(--salmon); }
.page-hero .piece{ position:absolute; top:20%; right:6%; font-size:min(14vw,160px); opacity:0.18; color:var(--salmon); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.08em; font-size:0.82rem;
  padding:14px 26px; border-radius:var(--radius); text-decoration:none;
  border:1px solid currentColor; transition:transform .2s ease, background .2s ease, color .2s ease;
}
.btn-primary{ background:var(--salmon-deep); border-color:var(--salmon-deep); color:var(--ink); }
.btn-primary:hover{ background:var(--ink); border-color:var(--ink); color:var(--salmon); transform:translateY(-2px); }
.btn-ghost-on-ink{ color:var(--paper); }
.btn-ghost-on-ink:hover{ background:var(--paper); color:var(--ink); transform:translateY(-2px); }
.btn-ghost{ color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.btn svg{ width:14px; height:14px; }

/* ---------- Grid / layout helpers ---------- */
.split{
  display:grid; grid-template-columns: 1fr 1fr; gap:clamp(32px,6vw,80px); align-items:start;
}
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }

.kicker-block h2{
  font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(1.9rem,4.2vw,3.1rem); line-height:1.02;
}
.lede{
  font-family:var(--font-head); font-weight:600; font-size:clamp(1.1rem,2vw,1.5rem);
  margin-top:18px; max-width:34ch;
}
.body-copy{ font-size:1.02rem; color:var(--ink-soft); }
.body-copy + .body-copy{ margin-top:1.1em; }
.section--ink .body-copy{ color:rgba(251,245,239,0.78); }

/* ---------- Cards (pillars / services) ---------- */
.pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:48px;
}
@media (max-width:860px){ .pillars{ grid-template-columns:1fr; } }
.pillar{
  background:var(--paper); padding:36px 30px; position:relative;
  transition:background .25s ease, transform .25s ease;
}
.pillar:hover{ background:var(--salmon-pale); transform:translateY(-3px); }
.pillar .piece{ font-size:2rem; margin-bottom:20px; }
.pillar h3{ font-size:1.2rem; }
.pillar p{ margin-top:10px; color:var(--ink-soft); font-size:0.96rem; }

/* ---------- Process steps (genuine sequence) ---------- */
.steps{ counter-reset: step; margin-top:48px; display:grid; gap:0; }
.step{
  display:grid; grid-template-columns:110px 1fr; gap:24px; padding:34px 0;
  border-top:1px solid var(--line-on-ink);
}
.steps .step:last-child{ border-bottom:1px solid var(--line-on-ink); }
.step-num{
  font-family:var(--font-mono); font-size:0.85rem; color:var(--salmon);
  letter-spacing:0.05em;
}
.step h3{ font-size:1.3rem; color:var(--paper); }
.step p{ margin-top:10px; color:rgba(251,245,239,0.75); max-width:56ch; }

/* ---------- Quote / manifesto block ---------- */
.manifesto{
  font-family:var(--font-head); font-weight:600;
  font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.35;
  max-width:26ch;
}
.manifesto .mark{ color:var(--salmon-deep); }
.section--salmon .manifesto .mark{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink); text-decoration-thickness:2px; text-underline-offset:5px; }

/* ---------- Illustration (custom, brand-drawn) ---------- */
.figure{
  border:1px solid var(--line);
  background:var(--paper-dim);
  padding:clamp(20px,4vw,40px);
  position:relative;
}
.figure svg{ width:100%; height:auto; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--paper); padding:clamp(48px,8vw,80px) 0 28px; }
.footer-top{
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
  padding-bottom:40px; border-bottom:1px solid var(--line-on-ink);
}
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-brand img{ height:34px; }
.footer-tag{ font-family:var(--font-head); font-weight:600; font-size:1.15rem; max-width:26ch; margin-top:14px; }
.footer-cols{ display:flex; gap:clamp(30px,6vw,80px); flex-wrap:wrap; }
.footer-col h4{ font-family:var(--font-mono); text-transform:uppercase; font-size:0.75rem; letter-spacing:0.1em; color:var(--salmon); }
.footer-col ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.footer-col a{ text-decoration:none; color:rgba(251,245,239,0.85); }
.footer-col a:hover{ color:var(--salmon); }
.footer-bottom{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding-top:22px; font-family:var(--font-mono); font-size:0.74rem; color:rgba(251,245,239,0.55);
  text-transform:uppercase; letter-spacing:0.06em;
}

/* ---------- Utility ---------- */
.center{ text-align:center; }
.mt-lg{ margin-top:clamp(40px,6vw,72px); }