/* ============================================================
   NOYAN CAPITAL — Shared design system
   Cormorant Garamond (display) + Hanken Grotesk (text)
   Cream paper · forest-teal ink · copper accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@300;400;500;600&display=swap');

:root{
  /* palette — drawn from the wordmark */
  --paper:#F4F1E8;
  --paper-2:#ECE7DA;
  --paper-3:#E4DECE;
  --ink:#1D2A24;
  --forest:#223530;
  --forest-deep:#172420;
  --teal:#3C5852;
  --sage:#6C756E;
  --sage-soft:#8A938C;
  --copper:#A2682C;
  --copper-light:#C68A4D;
  --line:rgba(29,42,36,0.14);
  --line-soft:rgba(29,42,36,0.08);
  --line-cream:rgba(244,241,232,0.18);

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --maxw:1240px;
  --pad:clamp(1.5rem,5vw,5rem);
  --section:clamp(4.5rem,11vh,8.5rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-weight:400;
  line-height:1.65;
  font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--copper);color:var(--paper)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:var(--section)}
.rule{height:1px;background:var(--line);border:0;width:100%}
.lede{
  font-size:clamp(1.15rem,1.02rem + 0.7vw,1.5rem);
  line-height:1.55;color:var(--ink);font-weight:400;
  max-width:34ch;
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:0.72rem;font-weight:500;
  letter-spacing:0.24em;text-transform:uppercase;
  color:var(--copper);
  display:inline-flex;align-items:center;gap:0.7em;
}
.eyebrow::before{
  content:"";width:1.8em;height:1px;background:var(--copper);
  opacity:0.7;display:inline-block;
}
.eyebrow.nodash::before{display:none}

/* ---------- display type ---------- */
.display{
  font-family:var(--serif);font-weight:500;
  line-height:1.02;letter-spacing:-0.005em;
  font-size:clamp(2.6rem,1.6rem + 4.6vw,5.1rem);
}
h1,h2,h3{font-weight:500;font-family:var(--serif)}
.h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.9rem,1.4rem + 2.2vw,3.05rem);
  line-height:1.08;letter-spacing:-0.005em;
}
.h3{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  line-height:1.12;
}
.serif-quote{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(1.7rem,1.2rem + 2.2vw,2.9rem);
  line-height:1.22;letter-spacing:-0.005em;color:var(--forest);
}
.prose p{max-width:62ch;color:#2A382F}
.prose p + p{margin-top:1.2em}
.prose .big{color:var(--ink)}
.muted{color:var(--sage)}

/* ---------- wordmark (live text, matches logo) ---------- */
.wordmark{display:inline-flex;flex-direction:column;line-height:0.9;gap:0.18em}
.wm-main{
  font-family:var(--serif);font-weight:500;
  letter-spacing:0.10em;color:var(--forest);
  font-size:1.5rem;
}
.wm-main .y{color:var(--copper)}
.wm-sub{
  font-family:var(--sans);font-weight:500;
  letter-spacing:0.46em;text-transform:uppercase;
  font-size:0.5rem;color:var(--teal);padding-left:0.12em;
}
.on-dark .wm-main{color:var(--paper)}
.on-dark .wm-sub{color:var(--copper-light)}

/* ---------- top nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  height:74px;display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.nav .wm-main{font-size:1.32rem}
.nav-links{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem)}
.nav-links a{
  font-size:0.83rem;font-weight:400;letter-spacing:0.02em;color:var(--sage);
  position:relative;padding-block:0.4rem;transition:color .25s ease;
}
.nav-links a:hover{color:var(--forest)}
.nav-links a.active{color:var(--forest)}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--copper);
}
.nav-links a.cta{
  color:var(--forest);border:1px solid var(--line);
  padding:0.5rem 1.1rem;border-radius:999px;letter-spacing:0.08em;
  text-transform:uppercase;font-size:0.72rem;font-weight:500;
  transition:all .25s ease;
}
.nav-links a.cta:hover{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;font-family:var(--mono);
  font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--forest)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:0.7em;
  font-family:var(--sans);font-size:0.78rem;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;
  padding:1.05rem 1.9rem;border-radius:2px;
  border:1px solid var(--forest);color:var(--forest);background:transparent;
  cursor:pointer;transition:all .3s cubic-bezier(.2,.7,.3,1);white-space:nowrap;
}
.btn .arr{transition:transform .3s ease}
.btn:hover{background:var(--forest);color:var(--paper)}
.btn:hover .arr{transform:translateX(4px)}
.btn-copper{border-color:var(--copper);color:var(--copper)}
.btn-copper:hover{background:var(--copper);color:var(--paper)}
/* on dark */
.on-dark .btn{border-color:var(--line-cream);color:var(--paper)}
.on-dark .btn:hover{background:var(--copper);border-color:var(--copper);color:var(--forest-deep)}

/* text link with arrow */
.tlink{
  display:inline-flex;align-items:center;gap:0.5em;
  font-size:0.82rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--copper);border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .25s ease;
}
.tlink:hover{border-color:var(--copper)}
.tlink .arr{transition:transform .25s ease}
.tlink:hover .arr{transform:translateX(3px)}

/* external site link */
.sitelink{
  font-family:var(--mono);font-size:0.74rem;letter-spacing:0.06em;
  color:var(--teal);border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
.sitelink:hover{color:var(--copper);border-color:var(--copper)}

/* ---------- dark section / end block ---------- */
.dark{background:var(--forest-deep);color:var(--paper)}
.dark .muted{color:rgba(244,241,232,0.6)}
.dark .h2,.dark h2,.dark .serif-quote{color:var(--paper)}
.dark .eyebrow{color:var(--copper-light)}
.dark .eyebrow::before{background:var(--copper-light)}

.endblock{background:var(--forest-deep);color:var(--paper);position:relative;overflow:hidden}
.endblock .wrap{padding-block:clamp(4.5rem,10vh,7.5rem);position:relative;z-index:2}
.endblock .tag{
  font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,1.4rem + 3vw,3.7rem);
  line-height:1.08;letter-spacing:-0.01em;max-width:18ch;color:var(--paper);
}
.endblock .tag em{font-style:italic;color:var(--copper-light)}
.endrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2.5rem}
.endblock .glow{
  position:absolute;inset:auto -10% -60% auto;width:60%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(162,104,44,0.22),transparent 65%);
  z-index:1;pointer-events:none;
}

/* ---------- image placeholder ---------- */
.ph{
  background-color:var(--paper-2);
  background-image:repeating-linear-gradient(135deg,transparent 0,transparent 13px,rgba(60,88,82,0.07) 13px,rgba(60,88,82,0.07) 14px);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;text-align:center;
  position:relative;overflow:hidden;
}
.ph span{
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--sage);padding:1rem 1.4rem;
  border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 70%,transparent);
}
.ph.dark-ph{background-color:#1d2c27;background-image:repeating-linear-gradient(135deg,transparent 0,transparent 13px,rgba(198,138,77,0.10) 13px,rgba(198,138,77,0.10) 14px);border-color:var(--line-cream)}
.ph.dark-ph span{color:rgba(244,241,232,0.55);border-color:var(--line-cream);background:rgba(23,36,32,0.5)}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- hero ---------- */
.hero{padding-top:clamp(3rem,7vh,6rem);padding-bottom:clamp(3rem,7vh,5rem)}
.hero h1{margin-block:0.3em 0}
.geo-line{
  font-size:clamp(1.02rem,0.95rem + 0.4vw,1.18rem);
  line-height:1.62;color:var(--teal);max-width:60ch;font-weight:400;
}

/* ---------- generic grid utilities ---------- */
.grid{display:grid;gap:clamp(1.6rem,3vw,3rem)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.split{display:grid;grid-template-columns:0.42fr 0.58fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.split-even{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}

/* ---------- pillars (Build / Back / Hold) ---------- */
.pillar{border-top:1px solid var(--line);padding-top:1.6rem}
.pillar .num{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.1em;color:var(--copper)}
.pillar h3{margin-top:0.7rem;margin-bottom:0.5rem}
.pillar p{color:var(--sage);max-width:34ch}

/* ---------- business card ---------- */
.biz{display:flex;flex-direction:column;height:100%}
.biz .biz-top{border-top:1px solid var(--line);padding-top:1.4rem;flex:1}
.biz .cat{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--copper);margin-bottom:1rem}
.biz h3{margin-bottom:0.7rem}
.biz p{color:var(--sage);margin-bottom:1.4rem}

/* ---------- numbered list (approach) ---------- */
.principle{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,3vw,3rem);
  padding-block:clamp(1.8rem,3vw,2.6rem);border-top:1px solid var(--line);align-items:baseline}
.principle .pnum{font-family:var(--serif);font-size:clamp(2rem,3vw,3rem);color:var(--copper);font-weight:500;line-height:1}
.principle h3{margin-bottom:0.5rem}
.principle p{color:var(--sage);max-width:52ch}

/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--line);padding-block:clamp(1.6rem,3vw,2.3rem)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{font-family:var(--serif);font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);font-weight:500;
  line-height:1.18;color:var(--forest);margin-bottom:0.7rem}
.faq-a{color:#2A382F;max-width:60ch}
.faq-a .ph-note{color:var(--copper);font-style:italic}

/* ---------- contact form ---------- */
.form{display:grid;gap:1.6rem}
.field{display:flex;flex-direction:column;gap:0.5rem}
.field label{font-size:0.74rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--sage);font-weight:500}
.field input,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:0.6rem 0;transition:border-color .25s ease;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--copper)}
.field textarea{resize:vertical;min-height:120px}
.nap{font-family:var(--mono);font-size:0.82rem;letter-spacing:0.03em;color:var(--teal);line-height:1.9}
.nap .ph-note{color:var(--copper)}

/* ---------- placeholder note inline ---------- */
.ph-note{color:var(--copper);font-style:italic}

/* ---------- disclaimer / small print ---------- */
.smallprint{font-size:0.8rem;color:var(--sage-soft);max-width:60ch;line-height:1.6}
.smallprint.box{border-left:2px solid var(--line);padding-left:1.3rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .cols-3{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  .split,.split-even{grid-template-columns:1fr}
  .nav-links{
    position:fixed;inset:74px 0 auto 0;background:var(--paper);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:1rem var(--pad) 2rem;border-bottom:1px solid var(--line);
    transform:translateY(-120%);transition:transform .35s cubic-bezier(.2,.7,.3,1);
    box-shadow:0 24px 40px -28px rgba(23,36,32,0.4);
  }
  .nav-links.open{transform:none}
  .nav-links a{width:100%;padding:0.95rem 0;border-bottom:1px solid var(--line-soft);font-size:1rem}
  .nav-links a.active::after{display:none}
  .nav-links a.cta{border:1px solid var(--line);text-align:center;justify-content:center;margin-top:1rem;padding:0.85rem;border-radius:2px}
  .nav-toggle{display:block}
  .principle{grid-template-columns:1fr;gap:0.6rem}
  .endrow{flex-direction:column;align-items:flex-start;gap:2rem}
}