/* ============================================================
   STONEKEPT — shared design system
   Used by every page. Authored once, cached forever.
   ============================================================ */
:root{
  /* stone neutrals */
  --ink:        #17150F;
  --ink-2:      #201D15;
  --stone-900:  #2B271D;
  --stone-700:  #4C4738;
  --stone-600:  #5E5747;
  --stone-500:  #756D5B;
  --stone-400:  #8E8675;
  --stone-300:  #B9B0A0;
  --stone-200:  #D8D0C0;
  --stone-150:  #E6DFD0;
  --paper:      #F4F0E6;
  --paper-2:    #ECE6D8;

  /* accents */
  --moss:       #6E7F4E;
  --moss-bright:#8AA063;
  --moss-deep:  #515E3A;
  --brass:      #B08A4F;
  --brass-soft: #C9A877;

  /* roles */
  --bg:         var(--paper);
  --fg:         var(--ink);
  --muted:      var(--stone-500);
  --line:       #D6CDBB;
  --line-soft:  #E2DACA;

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --r: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* page grain */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.4;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--moss); color:#fff}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.section{padding-block:clamp(72px, 11vw, 150px); position:relative}
.section--tight{padding-block:clamp(56px, 8vw, 104px)}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--moss-deep);
  display:inline-flex; align-items:center; gap:.7em;
  font-weight:500;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--brass); display:inline-block;
}
.eyebrow.center::before{display:none}

h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:-.018em; margin:0}
.h-display{ font-size:clamp(2.7rem, 7.2vw, 5.7rem); }
.h-section{ font-size:clamp(2.1rem, 4.6vw, 3.6rem); letter-spacing:-.022em }
h3{font-size:1.45rem; letter-spacing:-.01em}
em, .it{font-style:italic}
.lead{font-size:clamp(1.06rem,1.7vw,1.32rem); color:var(--stone-700); line-height:1.55; font-weight:400}
.kicker-num{font-family:var(--mono); font-size:12px; color:var(--brass); letter-spacing:.1em}

/* ---------- buttons ---------- */
.btn{
  --bg-btn:var(--ink); --fg-btn:var(--paper);
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--bg-btn); color:var(--fg-btn);
  font-family:var(--sans); font-weight:500; font-size:.97rem;
  padding:.95em 1.5em; border-radius:100px; border:1px solid transparent;
  cursor:pointer; transition:transform .35s var(--ease), background .3s, box-shadow .35s var(--ease), color .3s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(23,21,15,.6)}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translate(3px,-3px)}
.btn--moss{--bg-btn:var(--moss-deep)}
.btn--moss:hover{--bg-btn:var(--moss)}
.btn--ghost{ --bg-btn:transparent; --fg-btn:var(--ink); border-color:var(--line); }
.btn--ghost:hover{border-color:var(--ink); box-shadow:none; background:transparent}
.btn--lg{padding:1.05em 1.8em; font-size:1.02rem}

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em; font-weight:500; font-size:.96rem;
  color:var(--moss-deep); border-bottom:1px solid transparent; padding-bottom:2px;
  transition:gap .3s var(--ease), border-color .3s;
}
.link-arrow:hover{gap:.85em; border-color:var(--moss)}

/* ============================================================
   HEADER + NAV (shared)
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  transition:background .4s, box-shadow .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled, .site-header.solid{
  background:rgba(244,240,230,.86);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--line-soft);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:24px; }
.brand{display:inline-flex; align-items:center; gap:.6em; font-family:var(--serif); font-size:1.42rem; letter-spacing:-.02em}
.brand .mark{width:26px; height:30px; flex:none}
.brand b{font-weight:500}
.nav-links{display:flex; gap:30px; align-items:center}
.nav-links > a, .nav-links .has-dropdown > .drop-trigger{
  font-size:.93rem; color:var(--stone-700); font-weight:450;
  position:relative; transition:color .25s; background:none; border:0; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; gap:.4em; font-family:inherit;
}
.nav-links > a::after, .drop-trigger::after{
  content:""; position:absolute; left:0; bottom:-5px; height:1.5px; width:0; background:var(--moss);
  transition:width .3s var(--ease);
}
.nav-links > a:hover, .drop-trigger:hover{color:var(--ink)}
.nav-links > a:hover::after, .has-dropdown:hover .drop-trigger::after{width:100%}
.nav-links > a[aria-current="page"]{color:var(--ink)}
.nav-links > a[aria-current="page"]::after{width:100%; background:var(--brass)}
.drop-caret{font-size:.6em; transition:transform .3s var(--ease)}

/* dropdown */
.has-dropdown{position:relative}
.dropdown{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:10px; min-width:230px; box-shadow:0 24px 50px -24px rgba(23,21,15,.4);
  opacity:0; visibility:hidden; transition:opacity .25s, transform .25s var(--ease); z-index:50;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .dropdown.open{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.has-dropdown:hover .drop-caret{transform:rotate(180deg)}
.dropdown a{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:8px; transition:background .2s;
}
.dropdown a:hover{background:var(--paper-2)}
.dropdown a b{font-size:.95rem; color:var(--ink); font-weight:500}
.dropdown a span{font-size:.8rem; color:var(--stone-500)}

.nav-cta{display:flex; align-items:center; gap:14px}
.nav-phone{font-size:.92rem; color:var(--stone-700); font-weight:450}
.nav-phone:hover{color:var(--ink)}
.burger{display:none; background:none; border:0; cursor:pointer; padding:8px; width:42px; height:42px}
.burger span{display:block; width:22px; height:1.6px; background:var(--ink); margin:5px auto; transition:.3s var(--ease)}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
  position:relative; background:var(--ink); color:var(--paper); overflow:hidden;
  padding-top:clamp(56px, 9vw, 110px); padding-bottom:clamp(0px, 4vw, 40px);
  border-bottom:1px solid var(--stone-900);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(176,138,79,.16), transparent 55%),
    radial-gradient(90% 70% at 8% 100%, rgba(110,127,78,.14), transparent 60%);
  pointer-events:none;
}
.hero .wrap{position:relative; z-index:2}
.hero-eyebrow{color:var(--brass-soft)}
.hero-eyebrow::before{background:var(--brass-soft)}
.hero h1{ color:var(--paper); margin:.5em 0 0; max-width:16ch; }
.hero h1 .it{color:var(--moss-bright)}
.hero h1 .brass{color:var(--brass-soft); font-style:italic}
.hero-sub{ margin-top:1.5rem; max-width:46ch; color:var(--stone-300); font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.6; }
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:2.3rem}
.hero .btn--ghost{--fg-btn:var(--paper); border-color:rgba(217,208,192,.28)}
.hero .btn--ghost:hover{border-color:var(--paper); background:rgba(255,255,255,.04)}
.hero-meta{ margin-top:clamp(48px,6vw,84px); border-top:1px solid var(--stone-900); padding-top:30px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.hero-meta .item .k{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-soft)}
.hero-meta .item .v{display:block; margin-top:8px; font-family:var(--serif); font-size:1.5rem; color:var(--paper); letter-spacing:-.01em}
.hero-meta .item .d{display:block; margin-top:3px; font-size:.86rem; color:var(--stone-400)}

/* ============================================================
   INTERIOR PAGE HERO
   ============================================================ */
.page-hero{
  position:relative; background:var(--ink); color:var(--paper); overflow:hidden;
  padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,80px);
  border-bottom:1px solid var(--stone-900);
}
.page-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(110% 80% at 85% 0%, rgba(176,138,79,.15), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(110,127,78,.13), transparent 60%);
}
.page-hero .wrap{position:relative; z-index:2}
.page-hero .eyebrow{color:var(--brass-soft)}
.page-hero .eyebrow::before{background:var(--brass-soft)}
.page-hero h1{color:var(--paper); margin:.45em 0 0; font-size:clamp(2.3rem,5.4vw,4.2rem); max-width:18ch}
.page-hero h1 .it{color:var(--moss-bright)}
.page-hero p{margin-top:1.2rem; max-width:52ch; color:var(--stone-300); font-size:clamp(1.04rem,1.5vw,1.2rem)}
.page-hero .hero-actions{margin-top:2rem}
.page-hero .btn--ghost{--fg-btn:var(--paper); border-color:rgba(217,208,192,.28)}
.page-hero .btn--ghost:hover{border-color:var(--paper); background:rgba(255,255,255,.04)}

/* breadcrumb */
.crumbs{display:flex; gap:.5em; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone-400)}
.crumbs a{color:var(--brass-soft)}
.crumbs a:hover{color:var(--paper)}
.crumbs .sep{opacity:.5}

/* ============================================================
   STRIP / MARQUEE
   ============================================================ */
.strip{ background:var(--ink-2); color:var(--stone-300); border-bottom:1px solid var(--stone-900); overflow:hidden; padding-block:18px; }
.marquee{display:flex; gap:0; width:max-content; animation:scroll 38s linear infinite}
@media (prefers-reduced-motion: reduce){ .marquee{animation:none} }
.marquee span{ font-family:var(--serif); font-style:italic; font-size:1.15rem; padding:0 30px; display:inline-flex; align-items:center; gap:30px; white-space:nowrap; }
.marquee span::after{content:"✦"; color:var(--brass); font-style:normal; font-size:.7rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============================================================
   PHILOSOPHY
   ============================================================ */
.philosophy{background:var(--paper-2)}
.phil-grid{display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(40px,7vw,100px); align-items:start}
.phil-statement{ font-family:var(--serif); font-size:clamp(1.7rem,3.1vw,2.55rem); line-height:1.18; letter-spacing:-.02em; color:var(--ink); }
.phil-statement .it{color:var(--moss-deep)}
.phil-body p{color:var(--stone-700); margin:0 0 1.2em}
.phil-body p:last-child{margin-bottom:0}
.phil-signature{margin-top:26px; display:flex; align-items:center; gap:14px}
.phil-signature .mk{width:34px;height:40px}
.phil-signature .nm{font-family:var(--serif); font-style:italic; font-size:1.15rem}
.phil-signature .rl{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone-500)}

/* ============================================================
   SERVICES GRID
   ============================================================ */
.svc-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:54px; flex-wrap:wrap}
.svc-head .lead{max-width:42ch}
.svc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.svc{ background:var(--paper); padding:clamp(28px,3.4vw,46px); display:flex; flex-direction:column; gap:16px; min-height:280px; transition:background .35s var(--ease); position:relative; }
.svc:hover{background:#FAF7EF}
.svc-ic{ width:48px; height:48px; border-radius:12px; background:var(--ink); color:var(--brass-soft); display:grid; place-items:center; flex:none; transition:transform .4s var(--ease), background .35s; }
.svc:hover .svc-ic{transform:translateY(-3px) rotate(-4deg); background:var(--moss-deep); color:#fff}
.svc-ic svg{width:24px;height:24px}
.svc h3{margin-top:4px}
.svc p{color:var(--stone-600); font-size:.98rem; margin:0; flex:1}
a.svc{color:inherit}
.svc .num{position:absolute; top:clamp(28px,3.4vw,46px); right:clamp(28px,3.4vw,46px); font-family:var(--mono); font-size:12px; color:var(--stone-300)}
.svc ul{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.svc ul li{font-size:.8rem; font-family:var(--mono); letter-spacing:.02em; color:var(--stone-600); background:var(--paper-2); border:1px solid var(--line-soft); padding:4px 10px; border-radius:100px}
.svc .more{font-size:.85rem; font-weight:500; color:var(--moss-deep); display:inline-flex; gap:.4em; align-items:center; transition:gap .3s var(--ease)}
a.svc:hover .more{gap:.8em}

/* ============================================================
   PROCESS
   ============================================================ */
.process{background:var(--ink); color:var(--paper)}
.process .eyebrow{color:var(--brass-soft)}
.process .eyebrow::before{background:var(--brass-soft)}
.process h2{color:var(--paper); max-width:14ch}
.proc-list{margin-top:60px; border-top:1px solid var(--stone-900)}
.proc-step{ display:grid; grid-template-columns:90px 1fr 1.1fr; gap:30px; align-items:baseline; padding:34px 0; border-bottom:1px solid var(--stone-900); transition:padding .4s var(--ease); }
.proc-step:hover{padding-left:14px}
.proc-step .pn{font-family:var(--mono); font-size:13px; color:var(--brass)}
.proc-step h3{color:var(--paper); font-size:1.7rem}
.proc-step p{color:var(--stone-300); margin:0; font-size:.98rem; max-width:46ch}
.proc-step.is-care h3{color:var(--moss-bright)}

/* ============================================================
   WORK
   ============================================================ */
.work-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:50px}
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.work-card{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper); transition:transform .45s var(--ease), box-shadow .45s var(--ease); display:flex; flex-direction:column; }
.work-card:hover{transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(23,21,15,.45)}
.work-thumb{aspect-ratio:4/3; position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.work-thumb svg{position:absolute; inset:0; width:100%; height:100%}
.work-body{padding:22px 24px 26px}
.work-body .cat{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--moss-deep)}
.work-body h3{font-size:1.3rem; margin-top:8px}
.work-body p{font-size:.92rem; color:var(--stone-700); margin:8px 0 0}
.work-note{margin-top:34px; font-size:.9rem; color:var(--stone-500); font-style:italic; text-align:center; font-family:var(--serif)}

/* ============================================================
   CARE
   ============================================================ */
.care{background:var(--paper-2)}
.care-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,84px); align-items:center}
.care-list{list-style:none; margin:30px 0 0; padding:0; columns:2; column-gap:34px}
.care-list li{ break-inside:avoid; margin-bottom:16px; padding-left:30px; position:relative; font-size:.96rem; color:var(--stone-700); }
.care-list li::before{
  content:""; position:absolute; left:0; top:7px; width:15px; height:15px; background:var(--moss-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.care-list li b{font-weight:600; color:var(--ink)}
.care-aside{ background:var(--ink); color:var(--paper); border-radius:var(--r); padding:clamp(30px,4vw,48px); position:relative; overflow:hidden; }
.care-aside::after{content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 100% 0, rgba(110,127,78,.2), transparent 60%)}
.care-aside .inner{position:relative; z-index:2}
.care-aside .big{font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.2rem); color:var(--paper); line-height:1}
.care-aside .big small{font-size:1rem; color:var(--stone-400); font-family:var(--mono); letter-spacing:.05em}
.care-aside h3{color:var(--paper); margin-top:18px}
.care-aside p{color:var(--stone-300); font-size:.95rem; margin:10px 0 0}
.care-aside ul{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:12px}
.care-aside ul li{display:flex; gap:12px; align-items:flex-start; font-size:.93rem; color:var(--stone-200)}
.care-aside ul li svg{flex:none; margin-top:3px; color:var(--moss-bright)}

/* ============================================================
   PRICING
   ============================================================ */
.pricing .svc-head{margin-bottom:50px}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch}
.plan{ border:1px solid var(--line); border-radius:var(--r); padding:34px 30px 32px; background:var(--paper); display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.plan:hover{transform:translateY(-5px); box-shadow:0 24px 48px -30px rgba(23,21,15,.4)}
.plan.feat{background:var(--ink); color:var(--paper); border-color:var(--ink); transform:scale(1.015)}
.plan.feat:hover{transform:scale(1.015) translateY(-5px)}
.plan-top{display:flex; justify-content:space-between; align-items:flex-start}
.plan .pname{font-family:var(--serif); font-size:1.55rem; color:var(--ink)}
.plan.feat .pname{color:var(--paper)}
.plan .tag{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:var(--brass-soft); padding:5px 10px; border-radius:100px}
.plan .pdesc{font-size:.9rem; color:var(--stone-600); margin:10px 0 0; min-height:42px}
.plan.feat .pdesc{color:var(--stone-300)}
.plan .price{margin:22px 0 4px; display:flex; align-items:baseline; gap:6px}
.plan .price .amt{font-family:var(--serif); font-size:3rem; letter-spacing:-.02em; line-height:1; color:var(--ink)}
.plan.feat .price .amt{color:var(--paper)}
.plan .price .per{font-size:.85rem; color:var(--stone-500)}
.plan.feat .price .per{color:var(--stone-400)}
.plan .build{font-size:.88rem; color:var(--stone-600); font-family:var(--mono)}
.plan.feat .build{color:var(--brass-soft)}
.plan .divider{height:1px; background:var(--line); margin:24px 0}
.plan.feat .divider{background:var(--stone-900)}
.plan ul{list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:13px; flex:1}
.plan ul li{display:flex; gap:11px; align-items:flex-start; font-size:.93rem; color:var(--stone-700)}
.plan.feat ul li{color:var(--stone-200)}
.plan ul li svg{flex:none; margin-top:3px; color:var(--moss-deep)}
.plan.feat ul li svg{color:var(--moss-bright)}
.plan .btn{width:100%; justify-content:center}
.plan.feat .btn{--bg-btn:var(--moss); --fg-btn:#fff}
.price-foot{margin-top:34px; text-align:center; font-size:.9rem; color:var(--stone-500)}
.price-foot b{color:var(--ink); font-weight:600}

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(40px,6vw,80px); align-items:start}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{ list-style:none; cursor:pointer; padding:24px 0; display:flex; justify-content:space-between; gap:24px; align-items:center; font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.4rem); color:var(--ink); letter-spacing:-.01em; transition:color .25s; }
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--moss-deep)}
.faq-icon{flex:none; width:26px; height:26px; position:relative; transition:transform .35s var(--ease)}
.faq-icon::before,.faq-icon::after{content:""; position:absolute; background:var(--moss-deep); transition:opacity .3s}
.faq-icon::before{top:12px; left:4px; right:4px; height:2px}
.faq-icon::after{left:12px; top:4px; bottom:4px; width:2px}
details[open] .faq-icon::after{opacity:0}
details[open] .faq-icon{transform:rotate(180deg)}
details .answer{padding:0 0 26px; max-width:60ch; color:var(--stone-700); font-size:.98rem}
details .answer p{margin:0 0 .8em}
details .answer p:last-child{margin-bottom:0}

/* ============================================================
   PROSE (service + location content)
   ============================================================ */
.layout{display:grid; grid-template-columns:1fr 320px; gap:clamp(40px,6vw,80px); align-items:start}
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.7rem,3vw,2.4rem); margin:0 0 .5em}
.prose h2:not(:first-child){margin-top:1.8em}
.prose h3{font-size:1.35rem; margin:1.6em 0 .4em}
.prose p{color:var(--stone-700); margin:0 0 1.1em}
.prose p:last-child{margin-bottom:0}
.prose ul{list-style:none; padding:0; margin:0 0 1.4em}
.prose ul li{position:relative; padding-left:30px; margin-bottom:13px; color:var(--stone-700)}
.prose ul li::before{
  content:""; position:absolute; left:0; top:7px; width:15px; height:15px; background:var(--moss-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.prose ul li b{color:var(--ink); font-weight:600}
.prose .stat-row{display:flex; gap:34px; flex-wrap:wrap; margin:0 0 1.6em; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.prose .stat-row .s .n{font-family:var(--serif); font-size:2rem; color:var(--ink); display:block; line-height:1}
.prose .stat-row .s .l{font-size:.82rem; color:var(--stone-500); margin-top:4px; display:block}

/* sticky aside card */
.aside-card{position:sticky; top:100px; background:var(--ink); color:var(--paper); border-radius:var(--r); padding:30px; overflow:hidden}
.aside-card::after{content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 100% 0,rgba(176,138,79,.16),transparent 60%)}
.aside-card .inner{position:relative; z-index:2}
.aside-card .eyebrow{color:var(--brass-soft)}
.aside-card .eyebrow::before{background:var(--brass-soft)}
.aside-card h3{color:var(--paper); margin:14px 0 0; font-size:1.5rem}
.aside-card p{color:var(--stone-300); font-size:.93rem; margin:10px 0 0}
.aside-card .btn{width:100%; justify-content:center; margin-top:20px; --bg-btn:var(--moss); --fg-btn:#fff}
.aside-card .meta{margin-top:22px; padding-top:20px; border-top:1px solid var(--stone-900); display:flex; flex-direction:column; gap:12px}
.aside-card .meta a, .aside-card .meta span{display:flex; flex-direction:column}
.aside-card .meta .k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-soft)}
.aside-card .meta .v{font-family:var(--serif); font-size:1.1rem; color:var(--paper)}
.aside-card .meta a:hover .v{color:var(--moss-bright)}

/* feature blocks on service pages */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:50px}
.feature{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:28px}
.feature .fic{width:42px;height:42px;border-radius:10px;background:var(--ink);color:var(--brass-soft);display:grid;place-items:center;margin-bottom:16px}
.feature .fic svg{width:21px;height:21px}
.feature h3{font-size:1.2rem; margin-bottom:8px}
.feature p{font-size:.92rem; color:var(--stone-700); margin:0}

/* ============================================================
   LOCATIONS HUB
   ============================================================ */
.loc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.loc-card{background:var(--paper); padding:30px; display:flex; flex-direction:column; gap:8px; transition:background .3s; position:relative}
.loc-card:hover{background:#FAF7EF}
.loc-card .co{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone-400)}
.loc-card h3{font-size:1.4rem}
.loc-card p{font-size:.9rem; color:var(--stone-600); margin:0; flex:1}
.loc-card .more{font-size:.85rem; font-weight:500; color:var(--moss-deep); display:inline-flex; gap:.4em; align-items:center; transition:gap .3s var(--ease); margin-top:6px}
.loc-card:hover .more{gap:.8em}

/* related links row */
.related{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.related a{font-size:.88rem; font-family:var(--mono); color:var(--stone-700); background:var(--paper-2); border:1px solid var(--line-soft); padding:8px 14px; border-radius:100px; transition:border-color .25s, color .25s}
.related a:hover{border-color:var(--moss); color:var(--ink)}

/* ============================================================
   CTA + CONTACT
   ============================================================ */
.cta{background:var(--ink); color:var(--paper); position:relative; overflow:hidden}
.cta::after{content:""; position:absolute; inset:0; background:
  radial-gradient(70% 90% at 85% 110%, rgba(176,138,79,.18), transparent 55%),
  radial-gradient(60% 80% at 0% 0%, rgba(110,127,78,.16), transparent 60%)}
.cta .wrap{position:relative; z-index:2}
.cta-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,90px); align-items:center}
.cta h2{color:var(--paper); font-size:clamp(2.3rem,5vw,4rem); max-width:14ch}
.cta h2 .it{color:var(--moss-bright)}
.cta p{color:var(--stone-300); margin:22px 0 0; max-width:44ch; font-size:1.1rem}
.cta-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.cta .btn--ghost{--fg-btn:var(--paper); border-color:rgba(217,208,192,.28)}
.cta .btn--ghost:hover{border-color:var(--paper); background:rgba(255,255,255,.04)}
.contact-card{ background:rgba(244,240,230,.04); border:1px solid var(--stone-900); border-radius:var(--r); padding:clamp(28px,3.5vw,40px); backdrop-filter:blur(6px); }
.contact-card .row{display:flex; flex-direction:column; gap:6px; padding:18px 0; border-bottom:1px solid var(--stone-900)}
.contact-card .row:first-child{padding-top:0}
.contact-card .row:last-child{border-bottom:0; padding-bottom:0}
.contact-card .row .k{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-soft)}
.contact-card .row a, .contact-card .row .v{font-family:var(--serif); font-size:1.32rem; color:var(--paper); transition:color .25s}
.contact-card .row a:hover{color:var(--moss-bright)}

/* contact form */
.form{display:grid; gap:18px}
.form .field{display:flex; flex-direction:column; gap:7px}
.form .field.two{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form label{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone-500)}
.form input, .form select, .form textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:10px; padding:13px 15px; transition:border-color .25s, box-shadow .25s;
}
.form input:focus, .form select:focus, .form textarea:focus{outline:none; border-color:var(--moss); box-shadow:0 0 0 3px rgba(110,127,78,.14)}
.form textarea{resize:vertical; min-height:130px}
.form .btn{justify-self:start; margin-top:6px}
.form .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}
.form-note{font-size:.84rem; color:var(--stone-500); margin-top:4px}
.form-status{font-size:.92rem; margin:2px 0 0; padding:12px 15px; border-radius:10px; border:1px solid var(--line)}
.form-status.ok{color:var(--moss-deep); background:rgba(110,127,78,.1); border-color:rgba(110,127,78,.35)}
.form-status.err{color:#9a3b2e; background:rgba(154,59,46,.08); border-color:rgba(154,59,46,.3)}
.form-status.err a{color:#9a3b2e; text-decoration:underline}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink-2); color:var(--stone-300); padding-block:60px 36px; border-top:1px solid var(--stone-900)}
.foot-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid var(--stone-900)}
.foot-brand{max-width:30ch}
.foot-brand .brand{color:var(--paper); margin-bottom:14px}
.foot-brand p{font-size:.92rem; color:var(--stone-400); margin:0}
.foot-cols{display:flex; gap:clamp(34px,6vw,76px); flex-wrap:wrap}
.foot-col h4{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-soft); font-weight:500; margin:0 0 16px}
.foot-col a{display:block; font-size:.94rem; color:var(--stone-300); margin-bottom:11px; transition:color .25s}
.foot-col a:hover{color:var(--paper)}
.foot-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px; font-size:.84rem; color:var(--stone-500)}
.foot-bottom a:hover{color:var(--stone-200)}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .phil-grid,.care-grid,.cta-grid,.faq-grid,.layout{grid-template-columns:1fr}
  .aside-card{position:static}
  .work-grid,.loc-grid,.feature-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr; max-width:460px; margin-inline:auto}
  .plan.feat{transform:none}
  .plan.feat:hover{transform:translateY(-5px)}
  .care-list{columns:1}
  .care-aside{order:-1}
  .hero-meta{grid-template-columns:repeat(2,1fr); gap:30px 24px}
  .proc-step{grid-template-columns:60px 1fr; gap:14px 20px}
  .proc-step p{grid-column:2}
}
@media (max-width:760px){
  .nav-links, .nav-phone{display:none}
  .burger{display:block}
  .nav-menu-open .nav-links{
    display:flex; flex-direction:column; align-items:flex-start; position:absolute; top:74px; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:24px var(--gut) 30px; gap:18px;
    box-shadow:0 20px 40px -24px rgba(0,0,0,.3); max-height:80vh; overflow:auto;
  }
  .nav-menu-open .nav-links > a, .nav-menu-open .drop-trigger{font-size:1.05rem}
  .nav-menu-open .has-dropdown{width:100%}
  .nav-menu-open .dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:10px 0 0; min-width:0; background:transparent}
  .nav-menu-open .dropdown a{padding:8px 0}
  .nav-menu-open .dropdown a b{font-weight:450; color:var(--stone-700); font-size:.98rem}
  .nav-menu-open .dropdown a span{display:none}
  .svc-grid{grid-template-columns:1fr}
  .work-grid,.loc-grid,.feature-grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto}
  .foot-top{flex-direction:column}
  .form .field.two{grid-template-columns:1fr}
}
@media (max-width:430px){
  .hero-actions .btn, .page-hero .hero-actions .btn{width:100%; justify-content:center}
}