/* Lime Pie Design — one page, one grid.
   Type: Newsreader for the display line and section titles (italic for the one
   lighter phrase); Inter for everything else, at body size, plus one small
   uppercase label style.
   Structure: numbered sections like a statement of work — label in columns 1–3,
   content in 4–12. Rhythm: cream, lime tint (services), dark (founder), dark footer. */

:root {
  --paper:#FAF8F2; --ink:#1A1C17; --mut:#5E6157; --line:#E2DFD3;
  --olive:#4A5E14; --rind:#3F5A1A; --pith:#EEF3C6; --flesh:#C5D94E; --hl:#DCEB7A;
  --tint:#EEF1D8; --deep:#1E2914; --on-deep:#F1EFE6; --on-deep-mut:#B4B9A4; --deep-line:rgba(241,239,230,.16);
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gap:32px; --sec:128px; --pad:48px;
  color-scheme:light;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; }
body {
  margin:0; background:var(--paper); color:var(--ink); overflow-x:hidden;
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; }
::selection { background:var(--flesh); color:var(--ink); }
:focus-visible { outline:2px solid var(--olive); outline-offset:3px; border-radius:2px; }
.skip { position:absolute; left:-9999px; top:12px; background:#fff; padding:10px 14px; border:1px solid var(--line); z-index:30; }
.skip:focus { left:16px; }

.wrap { max-width:1280px; margin:0 auto; padding-inline:var(--pad); }

/* ---------- type ---------- */
h1, h2 { font-family:var(--serif); font-weight:400; margin:0; text-wrap:balance; }
h1 { font-size:clamp(48px,6.6vw,96px); line-height:1; letter-spacing:-.03em; }
h2 { font-size:clamp(32px,4vw,56px); line-height:1.06; letter-spacing:-.022em; margin-bottom:56px; max-width:20ch; }
h2 em { font-style:italic; color:var(--rind); }
h3 { font-size:16px; font-weight:600; line-height:1.4; margin:0 0 6px; }
p { margin:0; }
.label, dt, .plan-hours {
  font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--mut);
}
.sec-num { display:inline-block; min-width:2.4em; color:var(--ink); }
.section-body p, .section-body li, dd { color:var(--mut); }
/* the highlighter: one phrase per page, in lime */
.hl { background:linear-gradient(transparent 60%, var(--hl) 60%, var(--hl) 92%, transparent 92%); -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 .04em; }

/* ---------- header: sticky, frosted ---------- */
.site-head { position:sticky; top:0; z-index:20; background:rgba(250,248,242,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .2s ease; }
.head-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:16px; padding-bottom:16px; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.wordmark-svg { display:block; height:34px; width:calc(34px * 7771 / 1689); }
.site-nav { display:flex; align-items:center; gap:28px; }
.site-nav a { font-size:15px; color:var(--mut); text-decoration:none; padding:10px 0; }
.site-nav a:hover { color:var(--ink); }
.site-nav .nav-cta { color:var(--paper); background:var(--ink); border-radius:999px; padding:9px 18px; }
.site-nav .nav-cta:hover { background:var(--rind); color:var(--paper); }

/* ---------- buttons and links ---------- */
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px 28px; }
.button {
  display:inline-flex; align-items:center; min-height:52px; padding:0 26px; border-radius:999px;
  background:var(--ink); color:var(--paper); text-decoration:none; font-weight:500;
  transition:background .2s ease, transform .2s ease;
}
.button:hover { background:var(--rind); transform:translateY(-1px); }
.button-light { background:var(--flesh); color:var(--deep); }
.button-light:hover { background:var(--pith); }
.text-link { color:var(--ink); text-decoration:underline; text-decoration-color:var(--olive); text-decoration-thickness:1.5px; text-underline-offset:5px; }
.text-link:hover { text-decoration-thickness:2.5px; }
.band-dark .text-link { color:var(--on-deep); text-decoration-color:var(--flesh); }

/* ---------- hero ---------- */
.hero { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); padding-top:64px; }
.hero-label { grid-column:1 / -1; margin-bottom:28px; }
.hero h1 { grid-column:1 / span 9; grid-row:2; }
.hero-pie { grid-column:10 / span 3; grid-row:2; align-self:center; width:100%; aspect-ratio:1; overflow:visible; }
.lp-slice { transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.hero:hover .lp-slice { transform:translate(46px,-110px); }
.hero-foot { grid-column:1 / -1; display:grid; grid-template-columns:subgrid; align-items:end; margin-top:56px; }
.lead { grid-column:1 / span 6; font-size:19px; line-height:1.55; color:var(--mut); }
.hero-foot .actions { grid-column:8 / -1; justify-content:flex-end; }
/* the facts a visitor checks first, in four columns */
.specs { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); margin:72px 0 0; padding:20px 0 28px; border-top:1px solid var(--ink); }
.specs dt { margin-bottom:6px; }
.specs dd { margin:0; color:var(--ink); }
.open { display:inline-flex; align-items:center; gap:7px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--flesh); box-shadow:0 0 0 1px var(--rind); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 5px rgba(197,217,78,.35), 0 0 0 1px var(--rind); } }

/* ---------- marquee ---------- */
.marquee { overflow:hidden; background:var(--deep); color:var(--on-deep); padding:22px 0; }
.marquee-track { display:flex; width:max-content; animation:marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee ul { display:flex; list-style:none; margin:0; padding:0; }
.marquee li { font-family:var(--serif); font-size:clamp(22px,2.2vw,30px); line-height:1.2; white-space:nowrap; padding-right:56px; position:relative; }
.marquee li::after { content:""; position:absolute; right:22px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:var(--flesh); clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ---------- sections ---------- */
.section { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); padding-top:var(--sec); padding-bottom:var(--sec); }
.section > .label { grid-column:1 / span 3; padding-top:14px; }
.section-body { grid-column:4 / span 9; }
.intro { max-width:40em; margin:-28px 0 56px; }

.band-tint { background:var(--tint); }
.band-dark { background:var(--deep); color:var(--on-deep); }
.band-dark .label, .band-dark dt, .band-dark .section-body p, .band-dark dd { color:var(--on-deep-mut); }
.band-dark .sec-num, .band-dark h3 { color:var(--on-deep); }
.band-dark h2 em { color:var(--flesh); }

/* 01 method: name and line, two columns of rows */
.methods { list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line); }
.methods li { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,6fr); column-gap:var(--gap); align-items:baseline; padding:18px 0; border-top:1px solid var(--line); }
.methods li:first-child { border-top-color:var(--ink); }
.methods h3 { margin:0; font-family:var(--serif); font-weight:400; font-size:24px; letter-spacing:-.01em; }

/* 02 services: three plans side by side */
.plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--ink); }
.plan { padding:24px 28px 8px 0; }
.plan + .plan { border-left:1px solid rgba(26,28,23,.16); padding-left:28px; }
.plan h3 { margin-bottom:12px; }
.plan-price { font-family:var(--serif); font-size:clamp(32px,3vw,44px); white-space:nowrap; line-height:1; letter-spacing:-.02em; color:var(--ink) !important; }
.plan-price span { font-family:var(--sans); font-size:15px; letter-spacing:0; color:var(--mut); }
.plan-hours { margin:10px 0 18px; }
.terms { list-style:none; margin:40px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.terms li { font-size:14px; color:var(--ink) !important; border:1px solid rgba(26,28,23,.22); border-radius:999px; padding:6px 14px; }

/* 03 process: a pie that fills step by step */
.process { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); }
.process li { border-top:1px solid var(--ink); padding-top:20px; }
.pie { display:block; width:36px; height:36px; border-radius:50%; margin-bottom:24px; border:1.5px solid var(--rind); background:conic-gradient(var(--flesh) 0 var(--p), var(--pith) var(--p) 100%); }

/* 04 founder */
.about { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,4fr); column-gap:var(--gap); }
.about p + p { margin-top:24px; }
.facts { margin:0; align-self:start; }
.facts div { padding:14px 0; border-top:1px solid var(--deep-line); }
.facts div:last-child { border-bottom:1px solid var(--deep-line); }
dt { margin-bottom:4px; }
dd { margin:0; }
.work-label { margin:72px 0 20px; }
.work-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); }
.work-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; column-gap:16px; }
.work-list a { grid-column:1 / -1; display:block; text-decoration:none; }
.work-list img { display:block; width:100%; height:auto; aspect-ratio:2.17; object-fit:cover; border-radius:6px; margin-bottom:18px; transition:transform .3s ease, box-shadow .3s ease; }
.work-list a:hover img { transform:translateY(-4px); box-shadow:0 18px 36px rgba(0,0,0,.35); }
.work-title { color:var(--on-deep); font-weight:600; text-decoration:underline; text-decoration-color:var(--flesh); text-decoration-thickness:1.5px; text-underline-offset:5px; }
.work-title::after { content:" ↗"; font-weight:400; }
.work-list a:hover .work-title { text-decoration-thickness:2.5px; }
.work-list p { grid-column:1; margin-top:6px; }
.year { grid-column:2; grid-row:2; align-self:start; margin-top:6px; font-size:14px; color:var(--on-deep-mut); font-variant-numeric:tabular-nums; }

/* 05 FAQ */
.faq { border-bottom:1px solid var(--line); }
.faq details { border-top:1px solid var(--line); }
.faq details:first-child { border-top-color:var(--ink); }
.faq summary { display:grid; grid-template-columns:minmax(0,1fr) 40px; align-items:center; padding:22px 0; cursor:pointer; list-style:none; font-family:var(--serif); font-size:24px; letter-spacing:-.01em; color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--rind); }
.faq details p { max-width:40em; padding:0 40px 26px 0; }
.faq details[open] p { animation:open .35s ease; }
.toggle { position:relative; width:18px; height:18px; justify-self:end; }
.toggle::before, .toggle::after { content:""; position:absolute; left:0; top:50%; width:18px; height:1.5px; background:currentColor; transition:transform .3s ease; }
.toggle::after { transform:rotate(90deg); }
details[open] > summary .toggle::after { transform:rotate(0); }
@keyframes open { from { opacity:0; transform:translateY(-6px); } }

/* ---------- closing footer ---------- */
.site-foot { background:var(--deep); color:var(--on-deep); overflow:hidden; border-top:1px solid var(--deep-line); }
.foot-contact { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); padding-top:var(--sec); padding-bottom:96px; }
.foot-contact > .label { grid-column:1 / span 3; padding-top:14px; color:var(--on-deep-mut); }
.foot-contact .sec-num { color:var(--on-deep); }
.foot-contact h2 { max-width:22ch; margin-bottom:48px; }
.foot-contact h2 em { font-style:italic; color:var(--flesh); }
.foot-contact .actions { margin-top:40px; }
.email {
  font-family:var(--serif); font-size:clamp(30px,4.4vw,64px); line-height:1.1; letter-spacing:-.02em; color:var(--on-deep);
  text-decoration:none; background:linear-gradient(var(--flesh),var(--flesh)) 0 92% / 100% 2px no-repeat;
  transition:background-size .3s ease; overflow-wrap:anywhere;
}
.email:hover { background-size:100% .5em; color:var(--deep); }
.giant { display:block; width:100%; height:auto; aspect-ratio:7771 / 1689; --logo-ink:var(--flesh); }
.foot-row { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--deep-line); padding:22px 0 32px; margin-top:28px; font-size:14px; color:var(--on-deep-mut); }

/* ---------- reveal on scroll (only when JS runs) ---------- */
.js .reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity:1; transform:none; }

/* ---------- tablet ---------- */
@media (max-width:1000px) {
  .section > .label, .foot-contact > .label { grid-column:1 / -1; padding-top:0; margin-bottom:24px; }
  .section-body { grid-column:1 / -1; }
  .lead { grid-column:1 / span 8; }
  .hero-foot .actions { grid-column:1 / -1; justify-content:flex-start; margin-top:32px; }
  .specs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .process { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---------- phone ---------- */
@media (max-width:720px) {
  :root { --gap:24px; --sec:80px; --pad:20px; }
  .site-nav a:not(.nav-cta) { display:none; }
  .hero { padding-top:28px; }
  .hero-label { grid-row:2; margin:0 0 16px; }
  .hero h1 { grid-column:1 / -1; grid-row:3; font-size:clamp(40px,11.4vw,56px); }
  .hero-pie { grid-column:9 / -1; grid-row:1; width:100%; margin:0 0 16px; }
  .wordmark-svg { height:26px; width:calc(26px * 7771 / 1689); }
  .hero-foot { margin-top:28px; }
  .lead { grid-column:1 / -1; font-size:17px; }
  .specs { margin-top:48px; gap:20px; }
  h2 { margin-bottom:36px; }
  .intro { margin:-16px 0 36px; }
  .methods li { grid-template-columns:1fr; row-gap:4px; }
  .methods h3 { font-size:22px; }
  .plans { grid-template-columns:1fr; }
  .plan, .plan + .plan { padding:24px 0; border-left:0; }
  .plan + .plan { border-top:1px solid rgba(26,28,23,.16); }
  .process, .about, .work-list { grid-template-columns:1fr; }
  .facts { margin-top:32px; }
  .work-label { margin-top:56px; }
  .work-list { gap:40px; }
  .faq summary { font-size:20px; }
  .foot-contact { padding-bottom:64px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .marquee-track, .dot { animation:none; }
  .lp-slice, .button, .work-list img { transition:none; }
  .js .reveal { opacity:1; transform:none; transition:none; }
}