/* ============================================================
   FROND — marketing site stylesheet (self-contained, portable).
   Edit values here once; they cascade everywhere. No build step.
   ============================================================ */

:root {
  /* Palette */
  --paper-50:#FBF8F1; --paper-100:#F6F1E7; --paper-200:#EFE8D8; --paper-300:#E5DCC9;
  --ink-900:#16201A; --ink-800:#1C2B22; --ink-700:#2C3A30; --ink-600:#3A4A3F; --ink-400:#6B7A6E; --ink-300:#93A096;
  --frond-900:#122A1B; --frond-800:#173621; --frond-700:#1F4A2D; --frond-600:#2A5C39; --frond-500:#387049;
  --frond-200:#BFD6C2; --frond-100:#DCEADD; --frond-50:#ECF3ED;
  --growth-600:#6E9A4E; --growth-500:#8CA86B; --growth-200:#CBDBB1; --growth-100:#E3ECD4;
  --clay-700:#A24A2B; --clay-600:#BD5B36; --clay-500:#D2734A; --clay-200:#EFCDB9; --clay-100:#F6E2D5;

  /* Semantic */
  --surface-card:#FFFDF8;
  --brand:var(--frond-600); --brand-strong:var(--frond-700);
  --accent:var(--clay-600); --secondary:var(--growth-500);
  --text-strong:var(--ink-900); --text-heading:var(--ink-800); --text-body:var(--ink-600); --text-muted:var(--ink-400);
  --border:rgba(28,43,34,.12); --border-strong:rgba(28,43,34,.22); --border-ondark:rgba(251,248,241,.16);
  --ring:rgba(42,92,57,.40);

  /* Type */
  --font-display:"Spectral",Georgia,serif;
  --font-sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  /* Radii / shadow / motion */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:28px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(22,32,26,.06);
  --shadow-sm:0 2px 6px rgba(22,32,26,.07);
  --shadow-md:0 6px 20px -6px rgba(22,32,26,.12);
  --shadow-lg:0 18px 44px -16px rgba(22,32,26,.20);
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper-100); color:var(--text-body);
  font-family:var(--font-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:500; color:var(--text-heading); line-height:1.2; letter-spacing:-.02em; margin:0; text-wrap:balance;}
p{margin:0; text-wrap:pretty;}
a{color:inherit; text-decoration:none;}
img,svg{display:block;}
::selection{background:var(--growth-200); color:var(--ink-900);}
:where(a,button,input,select,textarea):focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring);}

/* Layout */
.container{width:100%; max-width:1180px; margin:0 auto; padding:0 32px;}
.container--narrow{max-width:760px;}
.section{padding:96px 0;}

/* Eyebrow */
.eyebrow{display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);}
.eyebrow::before{content:""; width:.45em; height:.45em; border-radius:999px; background:currentColor;}
.eyebrow--plain::before{display:none;}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-sans); font-weight:600; border-radius:var(--r-pill); padding:.7rem 1.25rem; height:46px; cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:background var(--ease-out) .14s, transform var(--ease-out) .14s, box-shadow var(--ease-out) .14s;}
.btn:active{transform:translateY(1px);}
.btn--lg{height:54px; padding:.9rem 1.6rem; font-size:1.0625rem;}
.btn--sm{height:36px; padding:.5rem .9rem; font-size:.875rem;}
.btn--primary{background:var(--brand); color:#FBF8F1; box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--brand-strong);}
.btn--accent{background:var(--accent); color:#FFF8F2; box-shadow:var(--shadow-sm);}
.btn--accent:hover{background:var(--clay-700);}
.btn--secondary{background:transparent; color:var(--brand-strong); border:1.5px solid var(--border-strong);}
.btn--secondary:hover{background:var(--frond-50);}
.btn .ico{width:1.05em; height:1.05em;}

/* Nav */
.nav{position:sticky; top:0; z-index:20; background:color-mix(in oklab, var(--paper-100) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
.nav__in{display:flex; align-items:center; justify-content:space-between; height:76px;}
.nav__links{display:flex; align-items:center; gap:30px;}
.nav__links a:not(.btn){font-size:15px; font-weight:500; color:var(--text-body);}
.nav__links a:hover{color:var(--brand);}

/* Logo lockup */
.logo{display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:500; font-size:30px; letter-spacing:-.01em; color:var(--text-strong); line-height:1;}
.logo svg{height:1em; width:auto; margin-left:.12em; color:var(--brand);}
.logo--cream{color:var(--paper-50);} .logo--cream svg{color:var(--growth-500);}

/* Hero */
.hero{padding:64px 0 88px;}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero h1{font-size:64px; line-height:1.02; letter-spacing:-.025em; margin:20px 0 0;}
.hero h1 em{font-style:italic; color:var(--brand);}
.hero p{font-size:19px; max-width:44ch; margin:22px 0 32px;}
.hero__cta{display:flex; gap:14px; flex-wrap:wrap;}
.hero__loc{display:flex; align-items:center; gap:10px; margin-top:30px; color:var(--text-muted); font-size:14px;}
.hero__loc svg{color:var(--growth-600); width:16px; height:16px;}
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.tile{border-radius:var(--r-lg); aspect-ratio:1/1.05; padding:20px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--shadow-md);}
.tile:nth-child(2),.tile:nth-child(4){transform:translateY(20px);}
.tile small{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.8;}
.tile b{font-family:var(--font-display); font-size:22px; font-weight:500; line-height:1.1;}

/* Section heading block */
.lead{max-width:620px; margin-bottom:48px;}
.lead h2{font-size:44px; margin:16px 0 12px;}
.lead p{font-size:18px; color:var(--text-muted);}
.lead--center{margin:0 auto 56px; text-align:center;}

/* Services */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.card{background:var(--surface-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-xs); transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out);}
.card--hover:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.card__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.card__icon{width:48px; height:48px; border-radius:var(--r-md); background:var(--frond-50); display:grid; place-items:center;}
.card__icon svg{width:24px; height:24px; color:var(--brand);}
.card__n{font-family:var(--font-mono); font-size:13px; color:var(--ink-300);}
.card h3{font-size:24px; margin:0 0 8px;}
.card p{font-size:15.5px; line-height:1.6;}

/* Process */
.process{background:var(--paper-200);}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.step__n{font-family:var(--font-display); font-size:56px; font-weight:500; color:var(--secondary); line-height:1; margin-bottom:14px;}
.step h3{font-size:23px; margin:0 0 10px;}
.step p{font-size:15.5px; line-height:1.65;}

/* Work */
.work__head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:40px;}
.work__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.proj{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--surface-card); border:1px solid var(--border);}
.proj__cover{aspect-ratio:4/3; padding:22px; display:flex; flex-direction:column; justify-content:space-between;}
.proj__cover .tag{align-self:flex-start; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.22); padding:.3em .7em; border-radius:var(--r-pill);}
.proj__cover b{font-family:var(--font-display); font-size:26px; font-weight:500; line-height:1.05;}
.proj__foot{padding:16px 18px; display:flex; align-items:center; justify-content:space-between; color:var(--text-muted); font-size:14px;}
.proj__foot svg{width:18px; height:18px; color:var(--brand);}

/* Testimonial */
.quote{background:var(--frond-800); color:var(--paper-50); text-align:center;}
.quote blockquote{font-family:var(--font-display); font-size:34px; line-height:1.3; font-weight:500; margin:22px 0 28px; letter-spacing:-.01em;}
.quote em{color:var(--growth-500); font-style:italic;}
.quote .who{display:flex; align-items:center; justify-content:center; gap:12px;}
.quote .avatar{width:44px; height:44px; border-radius:999px; background:var(--clay-500); display:grid; place-items:center; font-family:var(--font-display); font-weight:600; color:#fff;}
.quote .who div{text-align:left;}
.quote .who small{color:var(--growth-200);}

/* Contact */
.contact__grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start;}
.contact h2{font-size:44px; margin:16px 0 14px;}
.contact .sub{font-size:18px; line-height:1.65; max-width:38ch;}
.contact ul{list-style:none; padding:0; margin:28px 0 0; display:flex; flex-direction:column; gap:14px;}
.contact ul li{display:flex; gap:12px; align-items:center; font-size:15.5px;}
.contact ul svg{width:18px; height:18px; color:var(--growth-600);}
.form{background:var(--surface-card); border:1px solid var(--border); border-radius:var(--r-xl); padding:32px; box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:18px;}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{display:flex; flex-direction:column; gap:.4rem;}
.field label{font-size:14px; font-weight:600; color:var(--text-heading);}
.field input,.field select,.field textarea{width:100%; font-family:var(--font-sans); font-size:16px; color:var(--text-strong); background:var(--surface-card); border:1.5px solid var(--border-strong); border-radius:var(--r-md); padding:.7rem .95rem; transition:border-color .14s var(--ease-out), box-shadow .14s var(--ease-out);}
.field textarea{resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);}
.check{display:flex; align-items:center; gap:.6rem; font-size:.9375rem;}
.check input{width:20px; height:20px; accent-color:var(--brand);}

/* Footer */
.footer{background:var(--frond-900); color:var(--paper-50); padding:64px 0 40px;}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px;}
.footer p{margin-top:18px; color:var(--growth-200); font-size:14px; max-width:28ch; line-height:1.6;}
.footer h4{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--growth-500); margin:0 0 16px; font-weight:500;}
.footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.footer ul a{font-size:14px; opacity:.85;}
.footer ul a:hover{opacity:1;}
.footer .contactline{display:flex; gap:8px; align-items:center; font-size:14px; margin-bottom:10px;}
.footer .contactline svg{width:15px; height:15px; color:var(--growth-500);}
.footer__bar{margin-top:48px; padding-top:22px; border-top:1px solid var(--border-ondark); display:flex; justify-content:space-between; color:var(--growth-200); font-size:13px;}
.footer__bar .mono{font-family:var(--font-mono);}

/* ============================================================
   MOTION — calm, "grows on you". Fades + soft lifts, never bouncy.
   All gated so reduced-motion & no-JS users see the finished state.
   ============================================================ */

/* Hover transitions on interactive bits */
.btn .ico{transition:transform .18s var(--ease-out);}
.btn:hover .ico{transform:translateX(3px);}

.card__icon{transition:transform .3s var(--ease-out), background .3s var(--ease-out);}
.card--hover:hover .card__icon{transform:scale(1.08) rotate(-4deg); background:var(--frond-100);}

.tile{transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);}
.tiles:hover .tile{opacity:.62; transform:scale(.98);}
.tiles .tile:hover{opacity:1; transform:scale(1.04); box-shadow:var(--shadow-lg); z-index:2;}
.tile:nth-child(2):hover,.tile:nth-child(4):hover{transform:translateY(20px) scale(1.04);}

.proj{transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);}
.proj:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.proj__cover b{transition:transform .3s var(--ease-out); transform-origin:left bottom;}
.proj:hover .proj__cover b{transform:scale(1.05);}
.proj__foot svg{transition:transform .25s var(--ease-out);}
.proj:hover .proj__foot svg{transform:translate(3px,-3px);}

/* Animated underline on nav links */
.nav__links a:not(.btn){position:relative;}
.nav__links a:not(.btn)::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease-out);}
.nav__links a:not(.btn):hover::after{transform:scaleX(1);}

/* Step numbers grow a touch when their card is hovered */
.step{transition:transform .3s var(--ease-out);}
.step:hover{transform:translateY(-3px);}
.step__n{transition:transform .3s var(--ease-out), color .3s var(--ease-out);}
.step:hover .step__n{transform:scale(1.06); color:var(--growth-600);}

/* The fiddlehead mark: unfurls on load, gently nods on logo hover */
@keyframes unfurl{from{transform:rotate(-22deg) scale(.6); opacity:0;} to{transform:none; opacity:1;}}
.logo svg{transition:transform .4s var(--ease-out);}
.logo:hover svg{transform:rotate(8deg) scale(1.08);}

/* Scroll reveal — only active when JS adds .js (else content shows normally) */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);}
.js .reveal.is-visible{opacity:1; transform:none;}

@media (prefers-reduced-motion: no-preference){
  .js .logo svg{animation:unfurl .7s var(--ease-out) both;}
}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1 !important; transform:none !important; transition:none;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ============================================================
   INNER PAGES — Services, About, Contact
   ============================================================ */
.pagehero{padding:72px 0 56px; border-bottom:1px solid var(--border);}
.pagehero .eyebrow{margin-bottom:18px;}
.pagehero h1{font-size:60px; line-height:1.04; letter-spacing:-.025em;}
.pagehero h1 em{font-style:italic; color:var(--brand);}
.pagehero p{font-size:19px; color:var(--text-muted); max-width:52ch; margin-top:20px;}

/* Areas we cover */
.areas{background:var(--paper-200);}
.areas__list{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:840px; margin:0 auto;}
.areas__list span{font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; color:var(--ink-700); background:var(--surface-card); border:1px solid var(--border); border-radius:var(--r-pill); padding:9px 18px;}

/* 404 */
.notfound{min-height:62vh; display:flex; align-items:center; justify-content:center; text-align:center;}
.notfound .code{font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);}
.notfound h1{font-size:52px; letter-spacing:-.025em; margin:14px 0 12px;}
.notfound p{font-size:18px; color:var(--text-muted); max-width:44ch; margin:0 auto 28px;}

/* Service detail rows (alternating) */
.svc{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:64px 0; border-bottom:1px solid var(--border);}
.svc:nth-child(even) .svc__media{order:2;}
.svc__media{aspect-ratio:4/3; border-radius:var(--r-xl); display:flex; align-items:flex-end; padding:28px; box-shadow:var(--shadow-md);}
.svc__media b{font-family:var(--font-display); font-size:30px; font-weight:500; line-height:1.05;}
.svc__n{font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; color:var(--text-muted);}
.svc h2{font-size:34px; margin:10px 0 12px;}
.svc__body p{font-size:16.5px; line-height:1.65; color:var(--text-body);}
.ticks{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:11px;}
.ticks li{display:flex; gap:10px; align-items:flex-start; font-size:15.5px; color:var(--text-body);}
.ticks svg{width:18px; height:18px; color:var(--brand); flex:none; margin-top:3px;}

/* About */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;}
.about-grid .prose p{font-size:17px; line-height:1.7; margin-bottom:1em; color:var(--text-body);}
.about-grid .prose p:first-child{font-size:20px; color:var(--text-heading);}
.statement{background:var(--frond-800); color:var(--paper-50); border-radius:var(--r-xl); padding:44px 40px;}
.statement + .statement{margin-top:20px;}
.statement .eyebrow{color:var(--growth-500);}
.statement blockquote{font-family:var(--font-display); font-size:26px; line-height:1.32; font-weight:500; margin:16px 0 0; letter-spacing:-.01em;}
.statement em{color:var(--growth-200); font-style:italic;}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.value{background:var(--surface-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-xs); transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);}
.value:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.value .num{font-family:var(--font-display); font-size:40px; font-weight:500; color:var(--secondary); line-height:1;}
.value h3{font-size:22px; margin:12px 0 8px;}
.value p{font-size:15.5px; line-height:1.6;}

/* CTA band */
.cta{background:var(--frond-800); color:var(--paper-50); text-align:center;}
.cta h2{font-size:40px; letter-spacing:-.02em; margin:0 0 14px; color:var(--paper-50);}
.cta p{font-size:18px; color:var(--growth-200); margin:0 0 28px; max-width:46ch; margin-left:auto; margin-right:auto;}

/* Contact details strip */
.contact__details{display:flex; flex-direction:column; gap:14px; margin-top:26px;}
.contact__details a{display:flex; gap:12px; align-items:center; font-size:16px; color:var(--text-heading); font-weight:500;}
.contact__details svg{width:18px; height:18px; color:var(--brand);}

/* Responsive */
@media (max-width:900px){
  .hero__grid,.contact__grid{grid-template-columns:1fr; gap:40px;}
  .cards,.steps,.work__grid,.footer__grid{grid-template-columns:1fr;}
  .svc,.about-grid,.values{grid-template-columns:1fr; gap:32px;}
  .svc:nth-child(even) .svc__media{order:0;}
  .hero h1{font-size:48px;}
  .pagehero h1{font-size:42px;}
  .lead h2,.contact h2{font-size:34px;}
  .statement{padding:32px 26px;}
  .section{padding:64px 0;}
  .nav__links a:not(.btn){display:none;}
}