/* Pine Point: site styles
   Layout: notch header, painterly time-of-day forest hero, ruled services list, quote band, Roots section, CTA band, wordmark footer
   Accent: Moss #A3B57A on dark surfaces, Moss Deep #4A6530 on light surfaces (Moss is ~2:1 on Frost: never use it on light) */
:root {
  --bg: #EEF2EE;
  --fg: #0F2A22;
  --muted: #4F6259;
  --line: #CBD6CE;
  --accent: #4A6530;
  --pine: #1B3F2E;
  --band: #17251F;
  --band-fg: #E7EFE9;
  --band-muted: #93A89C;
  --band-line: rgba(231,239,233,.16);
  --moss: #A3B57A;
  --moss-light: #BCCB98;
  --moss-deep: #4A6530;
  --on-moss: #0A1612;
  /* footer + logo: light theme puts the Pine logo on Frost; dark theme uses the reversed (Mist) logo */
  --foot-bg: var(--bg);
  --foot-fg: var(--fg);
  --foot-muted: var(--muted);
  --foot-line: var(--line);
  --logo-disc: var(--pine);
  --logo-cut: var(--bg);
  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0A1612; --fg: #E7EFE9; --muted: #93A89C; --line: #1E332B; --accent: #A3B57A; --foot-bg: var(--band); --foot-fg: var(--band-fg); --foot-muted: var(--band-muted); --foot-line: var(--band-line); --logo-disc: var(--band-fg); --logo-cut: var(--band); color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #0A1612; --fg: #E7EFE9; --muted: #93A89C; --line: #1E332B; --accent: #A3B57A; --foot-bg: var(--band); --foot-fg: var(--band-fg); --foot-muted: var(--band-muted); --foot-line: var(--band-line); --logo-disc: var(--band-fg); --logo-cut: var(--band); color-scheme: dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; }
[id] { scroll-margin-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 20; padding: 10px 16px; border-radius: 999px; background: var(--moss); color: var(--on-moss); text-decoration: none; font-weight: 500; font-size: 14px; transition: top .2s; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* always-dark surfaces get Moss; light surfaces get Moss Deep via --accent (Moss would be ~2:1 on Frost) */
.skip:focus-visible, .nav :focus-visible, .hero :focus-visible, .quote :focus-visible { outline-color: var(--moss); }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 20px; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* Desktop: an Apple-style notch hanging from the top edge, centred, always Night in both themes.
   Straight top corners against the screen edge, rounded lower corners, small concave "ears" where it meets the edge.
   Centred without a transform so iOS Safari keeps it on the visual viewport when the toolbar collapses.
   Below 760px the notch is replaced by a full-width bar. Inner padding here is desktop only (28px left, 18px right). */
.nav { position: fixed; top: 0; left: 0; right: 0; margin-inline: auto; z-index: 10; width: max-content; max-width: calc(100% - 24px); color: var(--band-fg); --notch: #0A1612; }
.notch { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 32px; min-height: 54px; padding: env(safe-area-inset-top, 0px) 18px 0 28px; background: var(--notch); border: 1px solid rgba(231,239,233,.13); border-top: 0; border-radius: 0 0 20px 20px; box-shadow: 0 12px 32px -14px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.25); }
.notch::before, .notch::after { content: ""; position: absolute; top: 0; width: 16px; height: 16px; pointer-events: none; }
.notch::before { left: -16px; background: radial-gradient(circle at 0 100%, transparent 15.5px, var(--notch) 16px); }
.notch::after { right: -16px; background: radial-gradient(circle at 100% 100%, transparent 15.5px, var(--notch) 16px); }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--f-display); font-weight: 500; font-size: 19px; letter-spacing: -.01em; white-space: nowrap; }
.brand svg { width: 26px; height: 26px; flex: none; }
/* v4: the wordmark is the logo's own outlined PINE POINT letterforms (symbol #pp-word, cut from the master lockup), not a webfont */
.brand svg.bn { width: 109px; height: 11px; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.nav ul a { display: inline-block; padding: 6px 0; text-decoration: none; color: color-mix(in srgb, var(--band-fg) 80%, transparent); transition: color .2s; }
.nav ul a:hover { color: var(--band-fg); }
.nav .pill.cream { justify-self: end; padding: 8px 16px; font-size: 14px; }
.burger { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--band-line); background: transparent; color: var(--band-fg); cursor: pointer; place-items: center; padding: 0; }
.burger svg { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.burger path { transition: transform .24s ease; transform-box: view-box; transform-origin: center; }
.burger .b1 { transform: rotate(0deg) translateY(0); }
.burger .b2 { transform: rotate(0deg) translateY(0); }
.burger[aria-expanded="true"] .b1 { transform: rotate(45deg) translateY(3px); }
.burger[aria-expanded="true"] .b2 { transform: rotate(-45deg) translateY(-3px); }
.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 9px 18px; font-weight: 500; font-size: 14px; text-decoration: none; border: 1px solid transparent; transition: transform .2s, background .2s, border-color .2s; font-family: var(--f-body); cursor: pointer; white-space: nowrap; }
.pill.solid { background: var(--moss); color: var(--on-moss); }
.pill.solid:hover { transform: translateY(-1px); background: var(--moss-light); }
.pill.cream { background: #EFE9DD; color: #17251F; }
.pill.cream:hover { background: #fff; }
.pill.ghost { border-color: var(--band-line); color: var(--band-fg); background: transparent; }
.pill.ghost:hover { border-color: var(--moss); }

/* hero: dusk forest in mist, drawn on canvas */
.hero { position: relative; color: var(--band-fg); overflow: hidden; background: #1B3F2E linear-gradient(180deg, #2A4A66 0%, #7FA8B0 45%, #2F5B47 62%, #12281D 100%); min-height: clamp(560px, 78svh, 820px); padding-top: clamp(88px, min(8vw, 12vh), 116px); padding-bottom: clamp(72px, 6vw, 88px); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,16,16,.22) 0%, rgba(8,16,16,0) 45%); }
.hero .wrap { position: relative; z-index: 1; }
/* toning behind the copy: keeps the headline, lede and eyebrow readable over the live sky, sun glow and rays at every hour */
.hero .wrap::before { content: ""; position: absolute; z-index: -1; left: -140px; top: -90px; bottom: -90px; width: min(calc(100% + 140px), 900px); pointer-events: none; background: radial-gradient(closest-side, rgba(6,14,12,.34) 0%, rgba(6,14,12,.26) 48%, rgba(6,14,12,.1) 78%, rgba(6,14,12,0) 100%); }
.clock { position: absolute; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 2; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(10,20,18,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--band-line); color: var(--band-fg); }
.clock .mono { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 5ch; }
.clock input[type=range] { width: clamp(110px, 18vw, 200px); accent-color: var(--moss); }
.clock button { border: 1px solid var(--band-line); background: transparent; color: var(--band-fg); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.clock button:hover { border-color: var(--moss); }
.clock button[aria-pressed="false"] { opacity: .6; }
/* eyebrow sits on the live sky: Moss Light keeps it >= 4.5:1 at the brightest daytime sky (Moss alone dips to ~3.6:1 on mobile around midday) */
.hero .eyebrow { color: var(--moss-light); text-shadow: 0 0 2px rgba(4,10,8,.6), 0 1px 3px rgba(4,10,8,.45), 0 0 14px rgba(4,10,8,.4); display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.hero .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--moss); }
.hero h1 { text-shadow: 0 0 3px rgba(4,10,8,.35), 0 2px 24px rgba(4,10,8,.32); font-family: var(--f-display); font-weight: 400; font-size: clamp(2.6rem, min(6.4vw, 9vh), 5.3rem); line-height: 1.02; letter-spacing: -.02em; margin: 0; max-width: 15ch; text-wrap: balance; }
.hero p.lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: #F3F7F4; text-shadow: 0 0 2px rgba(4,10,8,.6), 0 1px 3px rgba(4,10,8,.45), 0 0 16px rgba(4,10,8,.42); max-width: 44ch; margin: 20px 0 0; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; align-items: center; }
.hero .pill { padding: 12px 24px; font-size: 15px; }

/* services: ruled list, label left, copy right */
.section { padding-block: clamp(72px, 10vw, 128px); }
.section h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.2rem); letter-spacing: -.02em; line-height: 1.05; margin: 0; text-wrap: balance; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.sec-head .mono { color: var(--muted); }
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; padding-block: 36px; border-bottom: 1px solid var(--line); align-items: start; transition: background .25s; }
.row h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.01em; line-height: 1.15; margin: 0; }
.row .tag { color: var(--accent); display: block; margin-bottom: 14px; }
.row p { margin: 0; color: var(--muted); max-width: 56ch; font-size: 1.05rem; }

/* quote band: a real blockquote, typographic quotes, a large Moss opening mark hanging in the margin */
.quote { background: var(--pine); color: var(--band-fg); padding-block: clamp(80px, 12vw, 160px); }
.quote blockquote { position: relative; margin: 0; padding-left: .78em; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.1rem, 5.4vw, 4.4rem); line-height: 1.05; letter-spacing: -.02em; }
.quote blockquote p { margin: 0; max-width: 20ch; text-wrap: balance; }
.quote .oq { position: absolute; left: -.02em; top: -.06em; font-size: 2.3em; line-height: .8; color: var(--moss); font-weight: 300; }
.quote em { color: var(--moss); font-style: italic; }
@media (min-width: 1320px) { .quote blockquote { margin-left: -.78em; } }

/* about / roots: same ruled rhythm as services, faint growth rings as decoration */
.roots { position: relative; overflow: hidden; }
.roots .wrap { position: relative; z-index: 1; }
.roots .growth { position: absolute; z-index: 0; width: clamp(380px, 48vw, 680px); height: auto; aspect-ratio: 1; right: max(-140px, calc(50% - 780px)); top: 50%; transform: translateY(-50%); color: var(--line); pointer-events: none; }
.roots-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; align-items: start; padding-bottom: 48px; }
.roots .eyebrow { color: var(--accent); margin: 0 0 14px; }
.roots-body p { margin: 0 0 1.1em; color: var(--muted); max-width: 56ch; font-size: 1.05rem; }
.roots-body p:first-child { color: var(--fg); }
.roots-body p:last-child { margin-bottom: 0; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts > div { padding: 24px 24px 24px 0; }
.facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.facts dt { color: var(--muted); margin-bottom: 6px; }
.facts dd { margin: 0; font-size: 1.05rem; }

/* closing statement + CTA */
.close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: center; }
.close p { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.4; max-width: 34ch; margin: 0; letter-spacing: -.01em; }
.cta { border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: grid; gap: 18px; background: color-mix(in srgb, var(--bg) 70%, var(--line)); }
.cta h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.cta .mail { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cta code { font-family: var(--f-mono); font-size: 14px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); user-select: all; overflow-wrap: anywhere; }
.cta .pill.solid { background: var(--fg); color: var(--bg); }
.cta .pill.solid:hover { background: var(--accent); color: var(--bg); }
.cta .pill.ghost { border-color: var(--line); color: var(--fg); }
.cta .pill.ghost:hover { border-color: var(--accent); }
.cta .write { justify-self: start; }

/* footer */
.foot { background: var(--foot-bg); color: var(--foot-fg); border-top: 1px solid var(--foot-line); padding-top: 56px; overflow: hidden; }
.foot .top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 80px); align-items: start; padding-bottom: 48px; }
.foot .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 40px; min-width: 0; }
.foot .col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.foot .col .mono { color: var(--foot-muted); }
.foot .col a, .foot .col span.t { color: var(--foot-fg); text-decoration: none; font-size: 16px; overflow-wrap: anywhere; }
.foot .col a:hover { color: var(--accent); }
.foot .col .tagline { color: var(--foot-muted); max-width: 30ch; }
/* logo: no ring. Reversed (Mist disc, tree cut in surface colour) on dark surfaces; Pine disc on light */
.lg-disc { fill: var(--logo-disc); }
.lg-cut { fill: var(--logo-cut); stroke: var(--logo-cut); stroke-width: 1.5; }
.nav { --logo-disc: var(--band-fg); --logo-cut: var(--band); }
.foot .lockup-link { display: block; line-height: 0; border-radius: 8px; }
.foot .lockup { display: block; width: clamp(150px, 20vw, 240px); height: auto; aspect-ratio: 980 / 716; }
.foot .legal { border-top: 1px solid var(--foot-line); padding-block: 20px; color: var(--foot-muted); font-size: 14px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

@media (max-width: 760px) {
  .hero .wrap::before { left: 0; right: 0; width: auto; top: -60px; bottom: -70px; background: linear-gradient(180deg, rgba(6,14,12,0) 0%, rgba(6,14,12,.22) 16%, rgba(6,14,12,.24) 42%, rgba(6,14,12,.34) 62%, rgba(6,14,12,.34) 84%, rgba(6,14,12,0) 100%); }
  [id] { scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px)); }
  .hero { min-height: clamp(540px, 78svh, 720px); padding-top: calc(88px + env(safe-area-inset-top, 0px)); padding-bottom: 96px; }
  /* Full-width bar. No notch, no ears. Side padding matches the extra room v5 gave the notch, plus safe area. */
  .nav { width: auto; max-width: none; margin-inline: 0; }
  .notch { grid-template-columns: 1fr auto auto; column-gap: 8px; width: 100%; min-height: 52px; border-radius: 0; border-width: 0 0 1px; box-shadow: 0 8px 18px -16px rgba(0,0,0,.7); padding: env(safe-area-inset-top, 0px) calc(16px + env(safe-area-inset-right, 0px)) 0 calc(22px + env(safe-area-inset-left, 0px)); }
  .notch::before, .notch::after { content: none; }
  .burger { display: grid; }
  .burger[hidden] { display: none; }
  /* Open in place: the panel grows down inside the bar and stays the bar's width. */
  .menu { display: grid; grid-template-rows: 0fr; grid-column: 1 / -1; grid-row: 2; width: 0; min-width: 100%; overflow: hidden; visibility: hidden; transition: grid-template-rows .24s ease, visibility 0s linear .24s; }
  .nav.open .menu { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .24s ease, visibility 0s linear 0s; }
  .menu > ul { min-height: 0; overflow: hidden; }
  .nav ul { flex-direction: column; gap: 0; padding: 0; border-top: 0; margin-top: 0; font-size: 17px; font-family: var(--f-display); }
  .nav ul li:first-child { border-top: 1px solid var(--band-line); margin-top: 18px; padding-top: 4px; }
  .nav ul li:last-child { padding-bottom: 10px; }
  .nav ul a { display: block; padding: 12px 8px; min-height: 44px; border-radius: 10px; }
  .foot .top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .foot .lockup { width: 170px; }
  .hero::after { background: linear-gradient(180deg, rgba(8,16,16,.3) 0%, rgba(8,16,16,.1) 60%, rgba(8,16,16,0) 100%); }
  .clock { left: calc(16px + env(safe-area-inset-left, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); justify-content: space-between; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .clock input[type=range] { flex: 1; width: auto; }
  .row, .close, .roots-grid { grid-template-columns: minmax(0, 1fr); }
  .roots-grid { gap: 20px; padding-bottom: 36px; }
  .roots .growth { width: 420px; right: -210px; top: 120px; transform: none; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > div, .facts > div + div { padding: 18px 0; border-left: 0; }
  .facts > div + div { border-top: 1px solid var(--line); }
  .row { gap: 14px; padding-block: 28px; }
}
@media (max-width: 360px) { .brand .bn { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pill, .skip, .nav ul a, .burger path, .menu, .nav.open .menu { transition: none; } .pill.solid:hover { transform: none; } }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero .eyebrow { margin-top: 0; }