/* ============================================================
   STONEKEPT — shared design system
   Used by every page. Authored once, cached forever.
   ============================================================ */
:root{
  --head-h:     85px;   /* sticky header height — heroes pull up under it */
  /* 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}

/* skip-to-content — visually hidden until focused (keyboard users) */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:10px;
  font-family:var(--sans); font-size:.92rem; font-weight:500;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px; outline:2px solid var(--brass-soft); outline-offset:2px}

/* ---------- 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);
}
/* Overlay state: the header floats on the dark hero, so its logo, nav and CTA
   read light until you scroll (when it becomes a frosted light bar with dark text). */
.site-header .brand, .site-header .brand .mark path, .site-header .burger span,
.site-header .nav-links > a, .site-header .drop-trigger, .site-header .nav-phone,
.site-header .nav-cta .btn{ transition:color .3s, fill .3s, background .3s, border-color .3s; }
.site-header:not(.scrolled) .brand{color:var(--paper)}
.site-header:not(.scrolled) .brand .mark path{fill:var(--paper)}
.site-header:not(.scrolled) .burger span{background:var(--paper)}
.site-header:not(.scrolled) .nav-cta .btn{background:var(--paper); color:var(--ink)}
.site-header:not(.scrolled) .nav-cta .btn:hover{background:#fff}
@media (min-width:1041px){
  .site-header:not(.scrolled) .nav-links > a,
  .site-header:not(.scrolled) .nav-links .has-dropdown > .drop-trigger,
  .site-header:not(.scrolled) .nav-phone{color:var(--stone-300)}
  .site-header:not(.scrolled) .nav-links > a:hover,
  .site-header:not(.scrolled) .has-dropdown:hover .drop-trigger,
  .site-header:not(.scrolled) .nav-links > a[aria-current="page"],
  .site-header:not(.scrolled) .drop-trigger[aria-current="page"]{color:var(--paper)}
}
/* 3-column header: brand hard-left, nav links centered, CTA hard-right */
.nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:84px; gap:24px; }
.nav > .brand{ grid-column:1; justify-self:start }
.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:clamp(16px, 2.3vw, 34px); align-items:center; grid-column:2; justify-self:center}
.nav-links > a, .nav-links .has-dropdown > .drop-trigger{
  font-size:.93rem; color:var(--stone-700); font-weight:450; white-space:nowrap;
  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}
.drop-trigger[aria-current="page"]{color:var(--ink)}
.drop-trigger[aria-current="page"]::after{width:100%; background:var(--brass)}
/* invisible hover-bridge across the gap between the trigger and the menu —
   scoped to the trigger width (on .has-dropdown), so it never overlays the
   adjacent nav links the way a full-menu-width bridge would */
.has-dropdown::after{content:""; position:absolute; left:0; right:0; top:100%; height:18px; display:none;}
.has-dropdown:hover::after, .has-dropdown:focus-within::after{display:block;}
.dropdown{
  position:absolute; top:calc(100% + 6px); 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)}
/* mega variant — Locations (an "all" link + county-grouped city columns).
   Left-anchored to the trigger so the wider panel never clips the viewport. */
.dropdown--mega{min-width:430px; padding:12px; left:0; transform:translateX(0) translateY(8px);}
.has-dropdown:hover .dropdown--mega, .has-dropdown:focus-within .dropdown--mega, .dropdown--mega.open{transform:translateX(0) translateY(0);}
.dropdown--mega .drop-all{border-bottom:1px solid var(--line-soft); margin-bottom:8px}
.drop-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.drop-county{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--moss-deep); margin:10px 12px 3px}
.drop-col > .drop-county:first-child{margin-top:2px}
.drop-col a{padding:6px 12px}
.drop-col a b{font-weight:450; color:var(--stone-700)}
.drop-col a:hover b{color:var(--ink)}

.nav-cta{display:flex; align-items:center; gap:14px; grid-column:3; justify-self:end}
.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;
  /* pull up under the transparent header so the dark hero fills to the very top */
  margin-top:calc(var(--head-h) * -1);
  padding-top:calc(clamp(56px, 9vw, 110px) + var(--head-h)); 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;
  /* pull up under the transparent header so the dark hero fills to the very top */
  margin-top:calc(var(--head-h) * -1);
  padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,80px);
  padding-top:calc(clamp(56px,8vw,104px) + var(--head-h));
  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}

/* ============================================================
   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-body .more{display:inline-flex; align-items:center; gap:.4em; margin-top:14px; font-size:.85rem; font-weight:500; color:var(--moss-deep); transition:gap .3s var(--ease)}
.work-card:hover .more{gap:.8em}
.work-note{margin-top:34px; font-size:.9rem; color:var(--stone-500); font-style:italic; text-align:center; font-family:var(--serif)}
/* Portfolio / selected work (/work) — real homepage screenshots as thumbnails */
.work-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; background:var(--paper-2)}
.work-thumb .status{position:absolute; top:12px; left:12px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper); background:rgba(23,21,15,.72); border:1px solid rgba(244,240,230,.18); border-radius:100px; padding:4px 11px}
.work-tags{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0; list-style:none}
.work-tags li{font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--stone-600); border:1px solid var(--line); border-radius:100px; padding:3px 9px}
.work-body .more--muted{color:var(--stone-500); font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:none}
.work-card.is-soon{cursor:default}
.work-card.is-soon:hover{transform:none; box-shadow:none}
/* Sample tiles: a linked thumbnail + a two-link body (used on /industries + home) */
a.work-thumb{display:block}
.work-links{display:flex; flex-direction:column; align-items:flex-start; gap:9px; margin-top:14px}
.work-body .more-alt{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--stone-500); display:inline-flex; align-items:center; gap:.4em; transition:color .2s var(--ease)}
.work-body .more-alt:hover{color:var(--moss-deep)}
/* Sample preview lightbox */
body.lb-open{overflow:hidden}
.lightbox{position:fixed; inset:0; z-index:1000; background:rgba(11,10,7,.88); overflow:auto; padding:44px 20px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.lightbox[hidden]{display:none}
.lb-stage{max-width:1040px; margin:0 auto; min-height:100%; display:flex; align-items:flex-start; justify-content:center}
.lb-fig{margin:0; width:100%}
.lb-img{display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 40px 90px -30px rgba(0,0,0,.7); background:var(--paper-2)}
.lb-cap{margin:14px 0 0; text-align:center; color:var(--stone-300); font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.lb-close{position:fixed; top:16px; right:18px; z-index:2; width:44px; height:44px; border-radius:50%; border:1px solid rgba(244,240,230,.28); background:rgba(23,21,15,.62); color:var(--paper); font-size:26px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .2s var(--ease), transform .2s var(--ease)}
.lb-close:hover{background:rgba(23,21,15,.92); transform:scale(1.06)}
.lb-close:focus-visible{outline:2px solid var(--brass-soft); outline-offset:2px}

/* ============================================================
   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-annual{margin-top:26px; text-align:center; font-family:var(--serif); font-style:italic; font-size:1.08rem; color:var(--moss-deep)}
.price-annual b{font-style:normal; font-weight:600; color:var(--ink)}
.price-foot{margin-top:14px; text-align:center; font-size:.9rem; color:var(--stone-500)}
.price-foot b{color:var(--ink); font-weight:600}
/* "Custom builds" banner — the bigger-project lane below the three tiers */
.custom-tier{margin-top:26px; background:var(--ink); color:var(--paper); border-radius:var(--r); padding:clamp(28px,4vw,42px); display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; position:relative; overflow:hidden}
.custom-tier::after{content:""; position:absolute; inset:0; background:radial-gradient(70% 100% at 100% 0, rgba(176,138,79,.16), transparent 60%); pointer-events:none}
.custom-tier > *{position:relative; z-index:2}
.custom-tier .eyebrow{color:var(--brass-soft)}
.custom-tier .eyebrow::before{background:var(--brass-soft)}
.custom-tier h3{font-family:var(--serif); color:var(--paper); font-size:1.6rem; margin-top:10px}
.custom-tier p{color:var(--stone-300); margin:8px 0 0; max-width:56ch; font-size:.96rem}
.custom-tier .btn{--bg-btn:var(--moss); --fg-btn:#fff; flex:none}

/* ============================================================
   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}
/* Global a{color:inherit;text-decoration:none} makes in-copy links invisible.
   FAQ answers carry real links (industries, /about, /faq) — mark them. */
details .answer a{color:var(--moss-deep); border-bottom:1px solid var(--line)}
details .answer a:hover{border-bottom-color:var(--moss-deep)}

/* ============================================================
   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-500)}
.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)}

/* ============================================================
   COMPARISON TABLE  (custom-vs-wordpress)
   ============================================================ */
.cmp-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); -webkit-overflow-scrolling:touch}
.cmp{width:100%; border-collapse:collapse; min-width:680px}
.cmp th, .cmp td{text-align:left; padding:15px 18px; border-bottom:1px solid var(--line-soft); font-size:.92rem; line-height:1.45; vertical-align:top}
.cmp thead th{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone-600); background:var(--paper-2); font-weight:500; vertical-align:bottom}
.cmp thead th.is-us{color:var(--moss-deep)}
.cmp .col-feat{width:20%}
.cmp tbody th{font-family:var(--serif); font-weight:500; color:var(--ink); font-size:1.02rem}
.cmp td.is-us{color:var(--ink)}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover{background:#FAF7EF}
.cmp-note{margin-top:18px; font-size:.9rem; color:var(--stone-600); font-style:italic; max-width:70ch}
code{font-family:var(--mono); font-size:.88em; background:var(--paper-2); border:1px solid var(--line-soft); padding:.08em .4em; border-radius:5px; 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); }
/* light info panel with DARK lettering — for use on light sections (e.g. the
   contact page), where the card's default light text would be invisible.
   Double-class selectors so these beat the base .contact-card rules that come
   later in the file (equal specificity would otherwise let the base text win). */
.contact-card--panel{ background:var(--paper-2); border-color:var(--line); backdrop-filter:none; }
.contact-card.contact-card--panel .row{ border-bottom-color:var(--line); }
.contact-card.contact-card--panel .row .k{ color:var(--moss-deep); }
.contact-card.contact-card--panel .row a, .contact-card.contact-card--panel .row .v{ color:var(--ink); }
.contact-card.contact-card--panel .row a:hover{ color:var(--moss-deep); }
.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}
.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:44px 28px; border-top:1px solid var(--stone-900)}
.foot-top{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:28px; border-bottom:1px solid var(--stone-900)}
.foot-brand{max-width:30ch}
.foot-brand .brand{color:var(--paper); margin-bottom:12px}
.foot-brand p{font-size:.9rem; color:var(--stone-400); margin:0}
.foot-cols{display:flex; gap:clamp(28px,4.5vw,56px); 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 12px}
.foot-col a{display:block; font-size:.92rem; color:var(--stone-300); margin-bottom:8px; 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:20px; font-size:.84rem; color:var(--stone-400)}
.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} }
/* Honour reduced-motion everywhere: neutralise transitions/animations site-wide
   (hovers, icon spins, process/scroll effects) without removing hover styling. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ============================================================
   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:1040px){
  /* pages are hidden here, so drop the 3-column grid back to a simple
     brand-left / burger-right flex row (avoids the CTA squeezing on phones) */
  .nav{display:flex; justify-content:space-between}
  .nav-links, .nav-phone{display:none}
  .burger{display:block}
  /* compact the CTA + brand so brand + button + burger sit comfortably on a phone */
  .nav-cta .btn{padding:.66em 1.05em; font-size:.92rem}
  .nav-cta .btn .arrow{display:none}
  .nav > .brand{font-size:1.28rem}
  .nav-menu-open .nav-links{
    display:flex; flex-direction:column; align-items:flex-start; justify-self:stretch;
    position:absolute; top:84px; 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 .nav-links .has-dropdown > .drop-trigger{font-size:1.05rem; padding:10px 0; width:100%}
  .nav-menu-open .has-dropdown{width:100%}
  /* Services becomes a real accordion: collapsed until its trigger is tapped
     (JS toggles .open + aria-expanded), so it no longer sits permanently open. */
  .nav-menu-open .dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0; min-width:0; background:transparent; display:none}
  .nav-menu-open .dropdown.open{display:block; padding:2px 0 6px}
  .nav-menu-open .dropdown a{padding:9px 0 9px 16px; border-left:2px solid var(--line)}
  .nav-menu-open .dropdown a b{font-weight:450; color:var(--ink); font-size:.98rem}
  .nav-menu-open .dropdown a span{display:none}
  /* the Services caret flips to show expanded/collapsed state */
  .nav-menu-open .drop-trigger[aria-expanded="true"] .drop-caret{transform:rotate(180deg)}
  /* mobile: collapse the multi-column Industries & Locations mega-menus to just
     their trigger link (which goes to the /industries or /locations hub) */
  .nav-menu-open .dropdown--mega{display:none}
  .nav-menu-open a.drop-trigger .drop-caret{display:none}
}
@media (max-width:760px){
  .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}
}

/* ============================================================
   FREE TOOLS  (calculators, checkers & generators)
   Shared toolkit used by every /tools/* page. Built from the
   same tokens as the rest of the site so the tools feel native.
   ============================================================ */

/* --- Tools hub grid --- */
.tools-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px}
.tools-cat{margin-top:clamp(40px,6vw,72px)}
.tools-cat:first-of-type{margin-top:0}
.tools-cat > .eyebrow{display:inline-flex; margin-bottom:22px}
.tool-card{
  display:flex; flex-direction:column; gap:12px; border:1px solid var(--line); border-radius:var(--r);
  padding:28px 26px; background:var(--paper); color:inherit; text-decoration:none;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.tool-card:hover{transform:translateY(-5px); box-shadow:0 24px 48px -30px rgba(23,21,15,.4); border-color:var(--stone-300)}
.tool-card .tool-ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--paper-2); border:1px solid var(--line-soft); color:var(--moss-deep)}
.tool-card .tool-ic svg{width:22px; height:22px}
.tool-card h3{font-size:1.28rem; margin:0; letter-spacing:-.015em}
.tool-card p{margin:0; font-size:.93rem; color:var(--stone-600); line-height:1.55; flex:1}
.tool-card .more{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--moss-deep); display:inline-flex; gap:.5em; align-items:center}
.tool-card.soon{opacity:.6; pointer-events:none}
.tool-card .pill{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); border:1px solid var(--line); border-radius:100px; padding:3px 9px; align-self:flex-start}

/* --- Calculator / tool workspace --- */
.tk{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,52px); align-items:start}
.tk-panel{display:flex; flex-direction:column; gap:26px}
.tk-field{display:flex; flex-direction:column; gap:12px}
.tk-field > .lab{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--stone-500); display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.tk-field > .lab .hint{text-transform:none; letter-spacing:0; color:var(--stone-500); font-family:var(--sans); font-size:.82rem}

/* segmented choice buttons */
.tk-seg{display:flex; flex-wrap:wrap; gap:8px}
.tk-seg button{
  font-family:var(--sans); font-size:.92rem; color:var(--stone-700); background:var(--paper);
  border:1px solid var(--line); border-radius:100px; padding:9px 16px; cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.tk-seg button:hover{border-color:var(--stone-400)}
.tk-seg button.is-on{background:var(--moss-deep); border-color:var(--moss-deep); color:var(--paper)}
.tk-seg.grid{display:grid; grid-template-columns:repeat(2,1fr)}
.tk-seg.grid button{border-radius:11px; text-align:left; padding:13px 16px; line-height:1.35}
.tk-seg.grid button b{display:block; font-weight:500}
.tk-seg.grid button span{display:block; font-size:.8rem; color:var(--stone-500)}
.tk-seg.grid button.is-on span{color:var(--stone-200)}

/* checkbox option rows (feature pickers, checklists) */
.tk-opts{display:flex; flex-direction:column; gap:10px}
.tk-opt{
  display:flex; align-items:flex-start; gap:13px; border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; cursor:pointer; transition:border-color .2s, background .2s; background:var(--paper);
}
.tk-opt:hover{border-color:var(--stone-400)}
.tk-opt input{position:absolute; opacity:0; width:0; height:0}
.tk-opt .box{flex:none; width:22px; height:22px; border-radius:6px; border:1.5px solid var(--stone-400); display:grid; place-items:center; margin-top:1px; transition:background .2s, border-color .2s}
.tk-opt .box svg{width:14px; height:14px; color:#fff; opacity:0; transition:opacity .15s}
.tk-opt input:checked ~ .box{background:var(--moss-deep); border-color:var(--moss-deep)}
.tk-opt input:checked ~ .box svg{opacity:1}
.tk-opt input:focus-visible ~ .box{outline:2px solid var(--moss); outline-offset:2px}
.tk-opt .txt b{font-weight:500; font-size:.98rem; display:block}
.tk-opt .txt span{font-size:.85rem; color:var(--stone-500); display:block; margin-top:2px}
.tk-opt .txt .amt{font-family:var(--mono); font-size:.82rem; color:var(--stone-500)}
.tk-opt.on-brand input:checked ~ .box{background:var(--moss-deep)}

/* sliders */
.tk-range{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:100px; background:var(--line); outline:none}
.tk-range:focus-visible{outline:2px solid var(--moss); outline-offset:4px}
.tk-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--moss-deep); border:3px solid var(--paper); box-shadow:0 2px 8px -1px rgba(23,21,15,.4); cursor:pointer}
.tk-range::-moz-range-thumb{width:22px; height:22px; border:3px solid var(--paper); border-radius:50%; background:var(--moss-deep); box-shadow:0 2px 8px -1px rgba(23,21,15,.4); cursor:pointer}
.tk-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--moss); outline-offset:2px}
.tk-rangeval{font-family:var(--serif); font-size:1.5rem; color:var(--ink); line-height:1}
.tk-rangeval small{font-family:var(--mono); font-size:.8rem; color:var(--stone-500)}

/* plain inputs (numbers, text, hex) */
.tk-input, .tk-select{
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:10px; padding:13px 15px; width:100%;
  transition:border-color .25s, box-shadow .25s;
}
.tk-input:focus, .tk-select:focus{outline:none; border-color:var(--moss); box-shadow:0 0 0 3px rgba(110,127,78,.14)}
.tk-inputwrap{position:relative; display:flex; align-items:center}
.tk-inputwrap .pre, .tk-inputwrap .post{position:absolute; font-family:var(--mono); font-size:.9rem; color:var(--stone-500); pointer-events:none}
.tk-inputwrap .pre{left:15px}
.tk-inputwrap .pre ~ .tk-input{padding-left:30px}
.tk-inputwrap .post{right:15px}

/* --- Output panel (dark, sticky) --- */
.tk-out{
  background:var(--ink); color:var(--paper); border-radius:var(--r); padding:clamp(28px,3.4vw,42px);
  position:sticky; top:96px; overflow:hidden;
}
.tk-out::after{content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 100% 0, rgba(110,127,78,.22), transparent 60%); pointer-events:none}
.tk-out > *{position:relative; z-index:2}
.tk-out .oe{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-soft)}
.tk-out .big{font-family:var(--serif); font-size:clamp(2.6rem,5.2vw,3.7rem); line-height:1; color:var(--paper); margin:14px 0 0; letter-spacing:-.02em}
.tk-out .big small{font-family:var(--mono); font-size:.9rem; color:var(--stone-400); letter-spacing:.03em}
.tk-out .osub{color:var(--stone-300); font-size:.95rem; margin:10px 0 0}
.tk-out .odiv{height:1px; background:var(--stone-900); margin:24px 0}
.tk-rows{display:flex; flex-direction:column; gap:14px}
.tk-row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:.94rem}
.tk-row .k{color:var(--stone-300)}
.tk-row .v{font-family:var(--mono); color:var(--paper); font-size:.95rem; text-align:right}
.tk-row.big-row .v{font-family:var(--serif); font-size:1.3rem}
.tk-row .k small{display:block; font-family:var(--sans); color:var(--stone-500); font-size:.8rem; letter-spacing:0; text-transform:none; margin-top:2px}
.tk-out .btn{width:100%; justify-content:center; margin-top:26px}
.tk-out .foot{font-size:.82rem; color:var(--stone-400); margin:16px 0 0; text-align:center}

/* stacked bar comparison (WP vs custom, etc.) */
.tk-bars{display:flex; flex-direction:column; gap:18px; margin-top:4px}
.tk-bar .top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; font-size:.9rem; color:var(--stone-300)}
.tk-bar .top b{font-family:var(--serif); font-size:1.15rem; color:var(--paper); font-weight:400}
.tk-bar .track{height:12px; border-radius:100px; background:var(--stone-900); overflow:hidden}
.tk-bar .fill{height:100%; border-radius:100px; background:var(--stone-500); transition:width .5s var(--ease)}
.tk-bar.us .fill{background:linear-gradient(90deg,var(--moss),var(--moss-bright))}
.tk-bar.them .fill{background:linear-gradient(90deg,var(--brass),var(--brass-soft))}

/* --- Speed test gauge --- */
.tk-gauge{display:grid; place-items:center; text-align:center}
.tk-ring{
  --v:0; --c:var(--stone-500);
  width:190px; height:190px; border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--v)*1%), var(--stone-900) 0);
  display:grid; place-items:center; position:relative; transition:background .7s var(--ease);
}
.tk-ring::before{content:""; position:absolute; inset:14px; border-radius:50%; background:var(--ink)}
.tk-ring .n{position:relative; font-family:var(--serif); font-size:3.4rem; line-height:1; color:var(--paper)}
.tk-ring .lab{position:relative; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone-400); margin-top:4px}
.g-good{--c:var(--moss-bright) !important}
.g-avg{--c:var(--brass-soft) !important}
.g-poor{--c:#c9603f !important}
.tk-score-cap{font-family:var(--serif); font-size:1.5rem; margin-top:20px; color:var(--paper)}
.tk-metrics{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:22px}
.tk-metric{border:1px solid var(--stone-900); border-radius:11px; padding:14px 16px}
.tk-metric .k{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-400)}
.tk-metric .v{font-family:var(--serif); font-size:1.5rem; color:var(--paper); margin-top:4px; line-height:1}
.tk-metric .v.good{color:var(--moss-bright)} .tk-metric .v.avg{color:var(--brass-soft)} .tk-metric .v.poor{color:#d1795a}
.tk-loading{display:flex; align-items:center; gap:12px; color:var(--stone-300); font-size:.95rem}
.tk-spin{width:20px; height:20px; border:2px solid var(--stone-700); border-top-color:var(--moss-bright); border-radius:50%; animation:tkspin 1s linear infinite}
@keyframes tkspin{to{transform:rotate(360deg)}}
.tk-err{color:#d1795a; font-size:.92rem; line-height:1.5}

/* --- SERP preview --- */
.serp{background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 24px; max-width:600px}
.serp .fav{display:flex; align-items:center; gap:11px; margin-bottom:6px}
.serp .fav .dot{width:26px; height:26px; border-radius:50%; background:#f1f3f4; display:grid; place-items:center; color:#5f6368; font-family:var(--serif); font-size:.9rem}
.serp .fav .site{font-size:.82rem; color:#202124; line-height:1.2}
.serp .fav .site .u{color:#5f6368; font-size:.75rem}
.serp .s-title{color:#1a0dab; font-size:1.25rem; line-height:1.3; margin:2px 0 3px; font-family:arial,sans-serif; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.serp .s-desc{color:#4d5156; font-size:.87rem; line-height:1.58; font-family:arial,sans-serif; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.serp.mob{max-width:400px}
.serp.mob .s-title{font-size:1.1rem}
.len-row{display:flex; gap:10px; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--stone-500); margin-top:8px}
.len-chip{padding:3px 10px; border-radius:100px; border:1px solid var(--line)}
.len-chip.ok{color:var(--moss-deep); border-color:rgba(110,127,78,.4); background:rgba(110,127,78,.08)}
.len-chip.warn{color:#9a3b2e; border-color:rgba(154,59,46,.35); background:rgba(154,59,46,.07)}

/* --- Contrast checker --- */
.cc-preview{border-radius:var(--r); padding:38px 32px; display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); transition:background .2s, color .2s}
.cc-preview .big{font-family:var(--serif); font-size:2rem; line-height:1.2}
.cc-preview .small{font-size:.95rem}
.cc-swatch{display:flex; gap:14px; align-items:center}
.cc-color{display:flex; align-items:center; gap:10px}
.cc-color input[type=color]{-webkit-appearance:none; appearance:none; width:46px; height:46px; border:1px solid var(--line); border-radius:10px; padding:0; background:none; cursor:pointer}
.cc-color input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
.cc-color input[type=color]::-webkit-color-swatch{border:none; border-radius:7px}
.cc-ratio{font-family:var(--serif); font-size:clamp(2.6rem,6vw,3.6rem); line-height:1; color:var(--paper)}
.cc-ratio small{font-family:var(--mono); font-size:.9rem; color:var(--stone-400)}
.cc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:22px}
.cc-cell{border:1px solid var(--stone-900); border-radius:11px; padding:13px 15px; display:flex; justify-content:space-between; align-items:center}
.cc-cell .k{font-size:.85rem; color:var(--stone-300)}
.cc-cell .b{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:100px}
.cc-cell .b.pass{color:#062915; background:var(--moss-bright)}
.cc-cell .b.fail{color:#fff; background:#9a3b2e}

/* --- Business name generator --- */
.bng-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
.bng-name{
  display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--stone-900);
  border-radius:11px; padding:15px 18px; background:rgba(244,240,230,.03);
}
.bng-name .nm{font-family:var(--serif); font-size:1.22rem; color:var(--paper); line-height:1.15}
.bng-copy{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-400); background:none; border:1px solid var(--stone-700); border-radius:100px; padding:5px 11px; cursor:pointer; transition:color .2s, border-color .2s; flex:none}
.bng-copy:hover{color:var(--moss-bright); border-color:var(--moss)}
.bng-copy.done{color:var(--moss-bright); border-color:var(--moss)}

/* --- scorecard result --- */
.tk-verdict{font-family:var(--serif); font-size:1.9rem; line-height:1.2; color:var(--paper); margin:14px 0 0}
.tk-reco{display:flex; flex-direction:column; gap:11px; margin-top:6px}
.tk-reco li{display:flex; gap:11px; align-items:flex-start; font-size:.92rem; color:var(--stone-200); list-style:none}
.tk-reco li svg{flex:none; margin-top:3px; color:var(--brass-soft); width:16px; height:16px}

/* shared small print / assumptions */
.tk-note{font-size:.86rem; color:var(--stone-500); line-height:1.55; margin-top:6px}
.tk-assume{border:1px solid var(--line); border-radius:12px; background:var(--paper-2); padding:2px 20px; margin-top:8px}
.tk-assume summary{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-600); padding:16px 0}
.tk-assume[open] summary{color:var(--ink)}
.tk-assume .body{padding:0 0 18px; font-size:.9rem; color:var(--stone-600); line-height:1.6}
.tk-assume .body p{margin:0 0 .7em}
.tk-disclaimer{border-top:1px solid var(--line); margin-top:clamp(40px,6vw,64px); padding-top:26px; font-size:.86rem; color:var(--stone-500); max-width:70ch; line-height:1.6}

@media (max-width:900px){
  .tools-grid{grid-template-columns:repeat(2,1fr)}
  .tk{grid-template-columns:1fr; gap:32px}
  .tk-out{position:static}
  .cc-grid, .tk-metrics{grid-template-columns:1fr}
}
@media (max-width:560px){
  .tools-grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto}
  .tk-seg.grid{grid-template-columns:1fr}
}

/* ---- Tools: image optimizer, Open Graph generator, on-page checker ---- */
.io-drop{display:flex;align-items:center;justify-content:center;border:2px dashed var(--brass-soft);border-radius:14px;padding:34px 20px;cursor:pointer;text-align:center;transition:border-color .15s,background .15s;background:var(--paper)}
.io-drop.is-over,.io-drop:hover{border-color:var(--moss);background:var(--paper-2)}
.io-dropinner{display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.io-dropinner svg{width:34px;height:34px;color:var(--brass);stroke-width:1.4}
.io-dropinner b{font-size:1.02rem}
.io-dropinner span{color:var(--muted);font-size:.9rem}
.io-prevwrap{margin-top:14px;text-align:center;background:var(--paper-2);border-radius:12px;padding:14px}
.io-prev{max-width:100%;max-height:300px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.1)}
.og-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;max-width:420px;box-shadow:0 2px 14px rgba(0,0,0,.08)}
.og-card .og-img{width:100%;aspect-ratio:1.91/1;object-fit:cover;background:#e7e2d6;display:block}
.og-card .og-noimg{width:100%;aspect-ratio:1.91/1;display:flex;align-items:center;justify-content:center;background:#e7e2d6;color:#9a917d;font-size:.85rem}
.og-card .og-meta{padding:11px 14px}
.og-card .og-dom{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:#8a8a8a}
.og-card .og-t{font-size:.98rem;font-weight:600;color:#1d2129;margin:3px 0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.og-card .og-d{font-size:.86rem;color:#606770;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.op-row{display:flex;gap:12px;align-items:flex-start;padding:11px 2px;border-top:1px solid var(--line-soft)}
.op-badge{flex:none;width:56px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 0;text-align:center;border-radius:6px;margin-top:1px}
.op-badge.pass{background:rgba(110,127,78,.16);color:var(--moss-deep)}
.op-badge.warn{background:rgba(201,168,119,.24);color:#6d4f16}
.op-badge.fail{background:rgba(178,58,58,.13);color:#a23b3b}
.op-body b{display:block;font-size:.93rem}
.op-body span{font-size:.85rem;color:var(--muted)}
.op-tree{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.82rem;line-height:1.7;white-space:pre-wrap;margin-top:6px}

/* ---- On-site chat assistant widget ---- */
.sk-chat{position:fixed;right:20px;bottom:20px;z-index:110}
.sk-fab{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);border:0;border-radius:100px;padding:12px 20px 12px 14px;cursor:pointer;font:inherit;font-size:.95rem;font-weight:500;box-shadow:0 10px 26px rgba(23,21,15,.28);transition:transform .16s,box-shadow .16s}
.sk-fab:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(23,21,15,.32)}
.sk-fab .mk{width:22px;height:25px;flex:none;display:block}
.sk-fab .fab-dot{width:8px;height:8px;border-radius:50%;background:#8DBF6A;box-shadow:0 0 0 3px rgba(141,191,106,.28)}
.sk-panel{position:absolute;right:0;bottom:calc(100% + 12px);width:min(390px,calc(100vw - 40px));height:min(600px,calc(100vh - 120px));background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 64px rgba(23,21,15,.30);display:flex;flex-direction:column;overflow:hidden;animation:skchat-in .18s ease}
.sk-panel[hidden]{display:none}
@keyframes skchat-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;background:var(--ink);color:var(--paper);border-bottom:2px solid var(--brass)}
.sk-ident{display:flex;align-items:center;gap:11px;min-width:0}
.sk-avatar{width:40px;height:40px;flex:none;border-radius:12px;background:#211d15;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(201,168,119,.35)}
.sk-avatar .mk{width:21px;height:24px}
.sk-headtext{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.sk-title{font-family:var(--serif);font-size:1.18rem;font-weight:500}
.sk-status{display:flex;align-items:center;gap:6px;font-size:.74rem;color:#c7bfad;margin-top:2px}
.sk-status .live{width:7px;height:7px;border-radius:50%;background:#8DBF6A;flex:none;box-shadow:0 0 0 2px rgba(141,191,106,.25)}
.sk-x{flex:none;width:34px;height:34px;border-radius:9px;border:0;background:transparent;color:#c7bfad;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s}
.sk-x:hover{background:rgba(255,255,255,.08);color:var(--paper)}
.sk-x svg{width:18px;height:18px}
.sk-log{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px}
.sk-row{display:flex;gap:9px;align-items:flex-end;max-width:100%}
.sk-row.user{justify-content:flex-end}
.sk-mini{width:26px;height:26px;flex:none;border-radius:8px;background:var(--ink);display:grid;place-items:center;margin-bottom:2px}
.sk-mini .mk{width:14px;height:16px}
.sk-bubble{padding:11px 14px;border-radius:16px;line-height:1.5;font-size:.94rem;max-width:82%;word-wrap:break-word;overflow-wrap:anywhere}
.sk-bubble.bot{background:var(--paper-2);color:var(--ink);border-bottom-left-radius:5px}
.sk-bubble.user{background:var(--moss-deep);color:#fff;border-bottom-right-radius:5px}
.sk-bubble.err{background:#f6e6e6;color:#8a3b3b}
.sk-bubble.bot a{color:var(--moss-deep);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.sk-bubble p{margin:0 0 8px}
.sk-bubble p:last-child{margin-bottom:0}
.sk-bubble ul,.sk-bubble ol{margin:7px 0 3px;padding-left:18px}
.sk-bubble li{margin:4px 0}
.sk-bubble strong{font-weight:600}
.sk-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 2px 35px}
.sk-chip{font:inherit;font-size:.85rem;background:transparent;color:var(--moss-deep);border:1px solid var(--line);border-radius:100px;padding:7px 13px;cursor:pointer;transition:border-color .15s,background .15s}
.sk-chip:hover{border-color:var(--moss);background:rgba(110,127,78,.08)}
.sk-typing{display:inline-flex;gap:4px;padding:13px 15px;background:var(--paper-2);border-radius:16px;border-bottom-left-radius:5px}
.sk-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:skblink 1.2s infinite}
.sk-typing i:nth-child(2){animation-delay:.2s}
.sk-typing i:nth-child(3){animation-delay:.4s}
@keyframes skblink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.sk-input{display:flex;align-items:flex-end;gap:9px;padding:12px;border-top:1px solid var(--line);background:var(--paper)}
.sk-input textarea{flex:1;resize:none;max-height:120px;min-height:44px;border:1px solid var(--line);border-radius:14px;padding:11px 14px;font:inherit;font-size:.94rem;background:#fff;color:var(--ink);line-height:1.4}
.sk-input textarea::placeholder{color:#9b917d}
.sk-input textarea:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(110,127,78,.16)}
.sk-send{flex:none;width:44px;height:44px;border-radius:13px;border:0;background:var(--moss-deep);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s,transform .1s}
.sk-send:hover{background:#454f30}
.sk-send:active{transform:scale(.94)}
.sk-send:disabled{opacity:.5;cursor:default}
.sk-send svg{width:19px;height:19px}
.sk-foot{margin:0;padding:0 14px 11px;font-size:.7rem;color:var(--muted);text-align:center;background:var(--paper)}
.sk-foot a{color:var(--muted);text-decoration:underline}
@media (max-width:520px){.sk-chat{right:12px;bottom:12px}.sk-panel{width:calc(100vw - 24px);height:min(76vh,600px)}.sk-fab{padding:13px}}
@media (prefers-reduced-motion:reduce){.sk-panel{animation:none}.sk-typing i{animation:none}.sk-fab{transition:none}.sk-send{transition:none}}