/* ============================================================
   lynettelewis.co
   Brand system, September 2026.
   Meaning lives in the family: green is the machine, fruit is
   the person, quartz is the signal. Hero is dark by default,
   darks never touch, and cards step toward light.
   ============================================================ */

:root{
  /* neutrals — belong to no family */
  --clearing:#FAFCFD;  --ice:#DCE6EC;  --fig-black:#1C1218;

  /* green — the work */
  --old-growth:#1B2B18;  --spruce:#2A4024;
  --moss:#5C7A45;        --sunlit-moss:#A3BE7A;

  /* fruit — the person */
  --fig-skin:#3A1428;  --damson:#6B1533;
  --fig-flesh:#A33B55; --bloom:#E0A0AE;

  /* honey — the tooling. a warm layer, no dark ground */
  --glint:#D9BFA0;  --honey:#C68A2A;

  /* quartz — the connector. goes with green or fruit */
  --quartz:#B3C9DC;       /* every eyebrow on dark  */
  --quartz-deep:#2F5268;  /* every eyebrow on light */

  /* scry — the signal. no family */
  --scry:linear-gradient(105deg,#DCE6EC 0%,#B3C9DC 34%,#B9AFD9 70%,#D9BFA0 100%);

  /* text on grounds — 1 heading, 2 body, 3 meta (neutral) */
  --on-clearing-1:#1C1218; --on-clearing-2:#463C43; --on-clearing-3:#6E6E6E;
  --on-ice-1:#1C1218;      --on-ice-2:#333E45;      --on-ice-3:#5F5F5F;
  --on-glint-1:#1C1218;    --on-glint-2:#463C43;    /* two tiers only */
  --on-og-1:#F0F3EC;       --on-og-2:#D3DACE;       --on-og-3:#A6A6A6;
  --on-fs-1:#F7ECF2;       --on-fs-2:#DCC9D4;       --on-fs-3:#9A9A9A;
  --on-dm-1:#FBEFF3;       --on-dm-2:#E4CBD6;

  /* semantic — internal tools */
  --ok:#3D8B5F;   --ok-dark:#2C6845;   --ok-lift:#7FC79C;
  --warn:#D9A227; --warn-dark:#7A570B; --warn-lift:#EFC463;
  --err:#C4453F;  --err-dark:#9A302B;  --err-lift:#EE8F89;
  --info:#4A7FA5; --info-dark:#2F5268; --info-lift:#93C0DA;

  /* radius — scales with element size */
  --r-pill:999px;  --r-hair:8px;  --r-card:14px;  --r-block:22px;
  --rule:rgba(28,18,24,.14);
  --rule-moss:rgba(92,122,69,.34);

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --max: 1120px;
  --gutter: clamp(20px, 5vw, 64px);
}

* , *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-optical-sizing: auto;
  color: var(--on-clearing-1);
  background: var(--clearing);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--damson); outline-offset: 3px; border-radius: 4px; }
.hero-top :focus-visible, .hero-stats :focus-visible, .ai :focus-visible, .ai-hero :focus-visible,
.cs-hero :focus-visible, .profile :focus-visible { outline-color: var(--sunlit-moss); }
img { max-width: 100%; display: block; }

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

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250,252,253,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.nav-name {
  font-weight: 800; font-size: 19px; letter-spacing: -.02em;
  text-decoration: none; white-space: nowrap; color: var(--quartz-deep);
  font-variation-settings: "opsz" 24, "wdth" 100;
}
/* overflow must stay visible or it clips the My Work dropdown; a scroll
   container on one axis clips the other too. */
.nav-links { display: flex; align-items: center; gap: 4px; overflow: visible; }
.nav-links a { text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--on-clearing-2); padding: 7px 11px; border-radius: var(--r-pill); white-space: nowrap; font-variation-settings: "opsz" 14, "wdth" 96; }
.nav-links a:hover { background: var(--ice); color: var(--on-clearing-1); }
.nav-links a.here { color: var(--quartz-deep); }
.nav-toggle { display: none; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--fig-black); border-radius: 2px; transition: transform .18s ease, opacity .18s ease; }

.nav-cta { background: var(--quartz) !important; color: var(--fig-black) !important; padding: 9px 16px !important; margin-left: 6px; }
.nav-cta:hover { background: #9DBACF !important; }

/* My Work dropdown. The link keeps its own route; the caret owns the menu. */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 26px; padding: 0; margin-left: -6px;
  background: none; border: 0; cursor: pointer; color: var(--on-clearing-2);
  border-radius: var(--r-pill);
}
.nav-caret::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.nav-caret:hover { background: var(--ice); color: var(--on-clearing-1); }
.nav-caret:focus-visible { outline: 2px solid var(--quartz-deep); outline-offset: 2px; }
.nav-group[data-open] .nav-caret::after { margin-top: 3px; transform: rotate(-135deg); }

.nav-menu {
  position: absolute; top: 100%; left: 0; z-index: 30;
  display: none; margin: 9px 0 0; padding: 6px; min-width: 262px;
  list-style: none;
  background: var(--clearing); border: 1px solid var(--rule);
  border-radius: var(--r-card); box-shadow: 0 12px 24px rgba(28,18,24,.10);
}
/* Bridges the gap under the link so the cursor can cross without it closing. */
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 11px; }
.nav-menu li { margin: 0; }
.nav-links .nav-menu a { display: block; padding: 8px 10px; font-size: 14px; border-radius: var(--r-hair); }
.nav-links .nav-menu a[aria-current="page"] { color: var(--quartz-deep); background: var(--ice); }
/* The company leads; the discipline follows it, divided and muted. */
.nav-kind { color: var(--on-clearing-3); font-weight: 600; }
.nav-kind::before { content: "|"; margin: 0 8px; color: rgba(28,18,24,.22); font-weight: 400; }
.nav-links .nav-menu a:hover .nav-kind { color: var(--on-clearing-2); }

@media (hover: hover) and (min-width: 901px) {
  .nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { display: block; }
}
.nav-group[data-open] .nav-menu { display: block; }

/* ---------- buttons: a pair always shares one colour ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  padding: 12px 24px; border-radius: var(--r-pill);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  font-variation-settings: "opsz" 16, "wdth" 96;
}
/* on Clearing — green */
.btn-solid { background: var(--spruce); color: var(--clearing); }
.btn-solid:hover { background: var(--old-growth); }
.btn-quiet { background: transparent; color: var(--spruce); border-color: rgba(42,64,36,.45); }
.btn-quiet:hover { border-color: var(--spruce); background: rgba(42,64,36,.06); }
/* Glint fill reads 1.39:1 on Ice, so the button edge comes from the border,
   not the fill: #A77A43 is the least darkening that clears 3:1 on Ice and Clearing. */
.btn-glint { background: var(--glint); color: var(--fig-black); border-color: #A77A43; }
.btn-glint:hover { background: #E7D2BB; border-color: #8A6A42; }
/* on green darks — Sunlit Moss */
.hero-top .btn-solid { background: var(--sunlit-moss); color: var(--fig-black); }
.ai .btn-solid, .ai-hero .btn-solid { background: var(--fig-skin); color: var(--on-fs-1); }
.profile .btn-solid { background: var(--bloom); color: var(--fig-skin); }
.hero-top .btn-solid:hover { background: #B6CE91; }
.ai .btn-solid:hover, .ai-hero .btn-solid:hover { background: #55203C; }
.profile .btn-solid:hover { background: #EBB8C3; }
.hero-top .btn-quiet { color: var(--sunlit-moss); border-color: rgba(163,190,122,.55); }
.ai .btn-quiet, .ai-hero .btn-quiet { color: var(--fig-skin); border-color: rgba(58,20,40,.45); }
.profile .btn-quiet { color: var(--bloom); border-color: rgba(224,160,174,.55); }
.hero-top .btn-quiet:hover { border-color: var(--sunlit-moss); background: rgba(163,190,122,.12); }
.ai .btn-quiet:hover, .ai-hero .btn-quiet:hover { border-color: var(--fig-skin); background: rgba(58,20,40,.08); }
.profile .btn-quiet:hover { border-color: var(--bloom); background: rgba(224,160,174,.12); }
/* on Ice — Damson */
/* on Fig Skin — Ice */

/* ---------- hero: full-bleed section, two tiers ----------
   Rule 4: a page-width section touches the edges. The 22px
   radius belongs to the portrait, an element inside it. */
.hero-top { background: var(--spruce); }
.hero-top .wrap {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 4vw, 48px); align-items: center;
  padding-block: clamp(44px, 5.4vw, 66px);
}
.hero-top h1 {
  margin: 0; font-family: var(--display);
  font-size: clamp(32px, 4.7vw, 49px); line-height: 1.02;
  letter-spacing: -.02em; font-weight: 800; color: var(--on-og-1);
  font-variation-settings: "opsz" 96, "wdth" 100;
}
.hero-top p { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--on-og-2); max-width: 44ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-block); }

.hero-stats { background: var(--old-growth); }
.hero-stats .wrap {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 26px);
  padding-block: clamp(26px, 3vw, 30px) clamp(30px, 3.4vw, 34px);
}
/* width:fit-content — without it each figure's gradient box is the
   full grid cell, so the number only shows the first slice of Scry. */
.hero-stats .fig b {
  display: inline-block; width: fit-content;
  font-size: clamp(40px, 3.6vw, 48px); font-weight: 800; line-height: 1;
  font-variation-settings: "opsz" 48, "wdth" 96;
  background: var(--scry); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stats .fig span { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.4; color: var(--on-og-3); }

/* ---------- section shell ---------- */
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.section h2 { margin: 0; font-size: clamp(25px, 3.3vw, 34px); letter-spacing: -.02em; line-height: 1.08; font-weight: 700; font-variation-settings: "opsz" 60, "wdth" 100; }
.section-head p { margin: 10px 0 0; font-size: 17px; color: var(--on-clearing-2); max-width: 56ch; }

/* ---------- business impact: Clearing takes no cards, only rules ---------- */
#work { background: var(--ice); color: var(--on-ice-1); }
#work .section-head p { color: var(--on-ice-2); }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wcard {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--clearing); border: 1px solid transparent; border-radius: var(--r-card);
  padding: 26px 26px 24px; text-decoration: none;
  transition: border-color .16s ease;
}
.wcard:hover { border-color: rgba(63,87,48,.45); }
.wcard:hover h3 { color: var(--spruce); }
.wcard h3 { transition: color .16s ease; }
.wcard .logo { height: 26px; display: flex; align-items: center; }
.wcard .logo img { max-height: 26px; width: auto; object-fit: contain; }
.wcard .logo span { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--quartz-deep); font-variation-settings: "opsz" 14, "wdth" 96; }
.wcard h3 { margin: 0; font-family: var(--sans); font-size: clamp(20px, 1.8vw, 23px); font-weight: 800; letter-spacing: -.015em; line-height: 1.16; color: var(--on-clearing-1); }
.wcard .meta, .demo .meta { margin: -2px 0 2px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--on-clearing-3); font-variation-settings: "opsz" 14, "wdth" 96; }
.wcard .say { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--on-clearing-2); }
.wcard .figs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: auto; padding-top: 14px; }
.wcard .figs span { display: flex; flex-direction: column; min-width: 0; font-size: 14px; letter-spacing: .02em; color: var(--on-clearing-3); line-height: 1.3; font-variation-settings: "opsz" 14, "wdth" 96; }
.wcard .figs b { font-size: 29px; font-weight: 800; color: var(--honey); line-height: 1; margin-bottom: 6px; font-variation-settings: "opsz" 48, "wdth" 96; }
.earlier { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 14px; letter-spacing: .02em; color: var(--on-ice-2); font-variation-settings: "opsz" 14, "wdth" 96; }
.earlier a { color: var(--spruce); }

/* ---------- building with AI: Glint, the tooling dark treatment ---------- */
.ai { background: var(--glint); color: var(--on-glint-1); padding-block: clamp(34px, 3.6vw, 52px); }
.ai .eyebrow, .ai-hero .eyebrow { margin: 0 0 14px; font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--quartz-deep); font-variation-settings: "opsz" 14, "wdth" 96; }
.ai h2 { color: var(--on-glint-1); font-family: var(--sans); font-weight: 800; letter-spacing: -.015em; line-height: 1.16; max-width: 16ch; }
.ai-lead { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: clamp(20px, 2.6vw, 36px); align-items: center; }
.ai-lead > div > p { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--on-glint-2); max-width: 42ch; }
.ai-lead .btn { margin-top: 26px; }
.ai-shot { margin-right: calc(-1 * var(--gutter)); }
.ai-shot img { width: 100%; height: auto; display: block; }

.ai-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(22px, 2.4vw, 32px);
  padding-top: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid var(--rule);
}
.ai-stat + .ai-stat { border-left: 1px solid var(--rule); padding-left: clamp(20px, 3vw, 44px); }
.ai-stat b {
  display: block; font-family: var(--display); font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 800; line-height: 1; color: var(--damson);
  font-variation-settings: "opsz" 48, "wdth" 96;
}
.ai-stat .stat-of {
  display: block; margin-top: 10px; font-family: var(--display);
  font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--on-glint-2);
  font-variation-settings: "opsz" 14, "wdth" 96;
}
.ai-stat .stat-cat { display: block; margin-top: 6px; font-size: 15px; color: var(--on-glint-1); }

/* ---------- fruit hero: one Fig Skin ground, no band ---------- */
.fruit-hero { background: var(--fig-skin); color: var(--on-fs-1); }
.fruit-hero .wrap {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 4vw, 48px); align-items: center;
  padding-block: 0 clamp(44px, 5.4vw, 66px);
}
.fruit-hero .hero-photo { align-self: start; }
.fruit-hero .eyebrow { margin: 0 0 14px; font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--quartz); font-variation-settings: "opsz" 14, "wdth" 96; }
.fruit-hero h1 {
  margin: 0; font-family: var(--display);
  font-size: clamp(34px, 5vw, 60px); line-height: 1.02;
  letter-spacing: -.02em; font-weight: 800; color: #FFFFFF;
  font-variation-settings: "opsz" 96, "wdth" 100;
}
.fruit-hero .hero-actions { margin-top: 26px; }
.fruit-hero .btn-solid { background: var(--bloom); color: var(--fig-skin); }
.fruit-hero .btn-solid:hover { background: #EBB8C3; }
.fruit-hero .btn-quiet { color: var(--bloom); border-color: rgba(224,160,174,.55); }
.fruit-hero .btn-quiet:hover { border-color: var(--bloom); background: rgba(224,160,174,.12); }
.fruit-hero .hero-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 46%; border-radius: 0 0 var(--r-block) var(--r-block); }

/* ---------- about body: Clearing, the copy on its own ---------- */
.about-body { background: var(--clearing); padding-bottom: clamp(30px, 3.4vw, 44px); }
.about-body .wrap { max-width: 820px; }
.about-body p { margin: 0 0 18px; font-size: 19px; line-height: 1.6; color: var(--on-clearing-2); max-width: 64ch; }
.about-body p:last-child { margin-bottom: 0; }
.fruit-hero .about-cred {
  max-width: none; margin: 18px 0 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .02em;
  color: var(--bloom); font-variation-settings: "opsz" 14, "wdth" 96;
}
.fruit-hero .about-cred span { color: var(--on-fs-1); }

/* ---------- about photos: full measure, not the text measure ---------- */
.about-photos { background: var(--clearing); padding-bottom: clamp(56px, 7vw, 96px); }
.about-photos .wrap { max-width: 820px; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.2vw, 14px); }
.about-photos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-block); }

/* ---------- how I work: Fig Skin, the ground does the work ---------- */
.profile { background: var(--fig-skin); color: var(--on-fs-1); }
.profile h2 { color: var(--on-fs-1); }
.profile .section-head p { color: var(--on-fs-2); }
.trait { border-top: 1px solid rgba(247,236,242,.18); padding-top: clamp(20px, 2.4vw, 28px); }
.trait h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--quartz); font-variation-settings: "opsz" 14, "wdth" 96; }
.trait .claim { margin: 0 0 14px; font-family: var(--sans); font-size: clamp(20px, 1.8vw, 23px); font-weight: 800; line-height: 1.16; letter-spacing: -.015em; color: var(--on-fs-1); max-width: 24ch; }
.trait p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.6; color: var(--on-fs-2); max-width: 64ch; }
.trait p:last-child { margin-bottom: 0; }
.trait-lead { margin-bottom: clamp(26px, 3.2vw, 40px); }
.trait-lead .claim { max-width: 46ch; }
.trait-lead p { max-width: none; }
.traits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); }

/* ---------- let's talk: Ice ---------- */

/* Form on Ice: fields sit on Clearing, the ground's accent is Damson. */
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; max-width: 560px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.contact-form label { font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--on-ice-2); font-variation-settings: "opsz" 14, "wdth" 96; }
.contact-form input, .contact-form textarea {
  font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--on-ice-1);
  background: var(--clearing); border: 1px solid rgba(28,18,24,.22); border-radius: var(--r-hair);
  padding: 11px 13px; width: 100%; -webkit-appearance: none;
}
.contact-form textarea { resize: vertical; min-height: 118px; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--damson); box-shadow: 0 0 0 3px rgba(107,21,51,.16); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; }
.form-note { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--on-ice-2); }
.form-note.is-ok { color: #1F5A34; }
.form-note.is-error { color: var(--damson); }
.contact-form button[disabled] { opacity: .6; cursor: default; }

/* ---------- footer ---------- */
/* The footer carries contact on every page: form left, links right. */
.footer { background: var(--ice); color: var(--on-ice-1); padding: clamp(48px, 6vw, 80px) 0 clamp(28px, 3vw, 40px); }
.footer .wrap { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.foot-talk h2 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.02em; line-height: 1.06; font-weight: 700; font-variation-settings: "opsz" 60, "wdth" 100; }
.foot-talk > p { margin: 0 0 22px; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--on-ice-2); max-width: 46ch; }

.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.foot-links > div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.foot-head { margin: 0 0 2px; font-family: var(--display); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: var(--on-ice-3); font-variation-settings: "opsz" 14, "wdth" 96; }
.foot-links a { font-family: var(--sans); font-size: 15.5px; color: var(--on-ice-1); text-decoration: none; }
.foot-links a:hover { color: var(--damson); text-decoration: underline; text-underline-offset: 3px; }

.foot-base { grid-column: 1 / -1; margin: clamp(28px, 3vw, 40px) 0 0; padding-top: 20px; border-top: 1px solid rgba(28,18,24,.14); font-family: var(--display); font-size: 13.5px; letter-spacing: .02em; color: var(--on-ice-3); font-variation-settings: "opsz" 14, "wdth" 96; }

.footer .btn-solid { background: var(--damson); color: #F4E6EB; }
.footer .btn-solid:hover { background: var(--fig-skin); }
.footer :focus-visible { outline-color: var(--damson); }

@media (max-width: 900px) {
  .work-grid, .systems { grid-template-columns: 1fr; }
  .about-photos .wrap { grid-template-columns: 1fr 1fr; }
  .ai-lead { grid-template-columns: 1fr; }
  .ai-shot { margin-right: 0; }
  .ai-stats { grid-template-columns: 1fr; gap: 0; }
  .ai-stat + .ai-stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); margin-top: 22px; padding-top: 22px; }
}

/* ---------- case study: same two tiers, same full bleed ---------- */
.cs-hero { background: var(--spruce); color: var(--on-og-1); padding: clamp(32px, 4vw, 52px) 0 clamp(30px, 3.6vw, 44px); }
.back { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--on-og-3); text-decoration: none; margin-bottom: 22px; font-variation-settings: "opsz" 14, "wdth" 96; }
.back:hover { color: var(--sunlit-moss); }
.cs-logo { height: 26px; display: flex; align-items: center; margin-bottom: 14px; }
.cs-logo img { max-height: 26px; width: auto; }
.cs-logo span { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--quartz); font-variation-settings: "opsz" 14, "wdth" 96; }
.cs-hero h1 { margin: 0; font-family: var(--display); font-size: clamp(30px, 4.5vw, 47px); line-height: 1.02; letter-spacing: -.02em; font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 100; color: var(--on-og-1); max-width: 20ch; }
.cs-meta { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; letter-spacing: .02em; color: var(--on-og-3); font-variation-settings: "opsz" 14, "wdth" 96; }
.cs-meta span { display: inline-block; }
.cs-meta span + span { padding-left: 14px; border-left: 1px solid rgba(240,243,236,.24); }


/* ---------- case study, boxed variant (spacer only for now) ----------
   No sticky band here: a box can't pin, and that trade was made deliberately. */
.cs-hero-boxed { background: var(--clearing); color: var(--on-clearing-1); padding: clamp(20px, 2.6vw, 32px) 0 0; }
.cs-hero-boxed .back { color: var(--on-clearing-3); }
.cs-hero-boxed .back:hover { color: var(--damson); }
.cs-box { border-radius: var(--r-block); overflow: hidden; }
.cs-box .cs-claim { background: var(--spruce); padding: clamp(32px, 4vw, 54px) clamp(26px, 3.4vw, 46px); }
.cs-box .cs-claim h1 { max-width: 18ch; }
.cs-box .cs-meta { border: 0; }
.cs-box .cs-stats {
  background: var(--old-growth);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  padding: clamp(26px, 3vw, 34px) clamp(26px, 3.4vw, 46px) clamp(30px, 3.4vw, 38px);
}
.cs-box .cs-stats b {
  display: inline-block; width: fit-content;
  font-family: var(--display); font-size: clamp(40px, 3.6vw, 48px); font-weight: 800; line-height: 1;
  font-variation-settings: "opsz" 48, "wdth" 96;
  background: var(--scry); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-box .cs-stats span { display: block; margin-top: 8px; font-family: var(--display); font-size: 14px; letter-spacing: .02em; line-height: 1.4; color: var(--on-og-3); font-variation-settings: "opsz" 14, "wdth" 96; }

/* Impact reads as another cs-block; only its figures need styling.
   Scry needs a ground under ~15% lightness, so on Clearing the figures
   take the green family's light-ground value. */
.impact-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); margin-top: clamp(24px, 2.8vw, 32px); }
.impact-stats b { display: block; font-family: var(--display); font-size: clamp(32px, 3.2vw, 40px); font-weight: 800; line-height: 1; color: var(--moss); font-variation-settings: "opsz" 48, "wdth" 96; }
.impact-stats span, .demo .demo-note { display: block; margin-top: 9px; font-family: var(--display); font-size: 14px; letter-spacing: .02em; color: var(--on-clearing-3); font-variation-settings: "opsz" 14, "wdth" 96; }

.cs-body { background: var(--clearing); padding: clamp(44px, 5vw, 68px) 0; }
.cs-block { display: grid; grid-template-columns: 16ch minmax(0,1fr); gap: clamp(16px, 4vw, 48px); padding: clamp(28px, 3.5vw, 44px) 0; border-top: 1px solid var(--rule-moss); }
.cs-block:first-child { border-top: 0; padding-top: 0; }
.cs-block > h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--quartz-deep); letter-spacing: .02em; font-variation-settings: "opsz" 14, "wdth" 96; }
.cs-block p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; max-width: 64ch; color: var(--on-clearing-2); }
.cs-block p:last-child { margin-bottom: 0; }

.levers { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 36px; }
.lever h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--on-clearing-1); font-variation-settings: "opsz" 16, "wdth" 100; }
.lever p { margin: 0; }
.outcomes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.outcomes li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.6; max-width: 64ch; color: var(--on-clearing-2); }
.outcomes li::before { content: ""; position: absolute; left: 0; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--moss); }

/* A live prototype, boxed so it reads as an exhibit rather than the page.
   The iframe renders at desktop width and scales to the column; dividing
   a container width by a length yields the unitless number scale() needs. */
/* Compact two-column variant: the example reads as supporting evidence,
   not another section — no outlined card, no browser chrome. */
/* The figure carries no ground; the panel holds the evidence and the note
   sits under it as a caption. */
.demo.demo-split { display: block; padding: 0; background: none; border: 0; }
.demo-panel { display: grid; grid-template-columns: minmax(0,30fr) minmax(0,70fr); gap: clamp(18px, 2.2vw, 30px); align-items: stretch;
  padding: clamp(16px, 1.8vw, 22px); background: var(--ice); border-radius: var(--r-card); }
.demo-split .demo-text { min-width: 0; display: flex; flex-direction: column; }
.demo.demo-split .demo-label { margin: 0 0 6px; }
.demo.demo-split .demo-text p:not(.demo-label):not(.meta):not(.demo-note) { margin: 0; font-family: var(--sans); font-size: 14.5px; line-height: 1.55; color: var(--on-ice-2); }
.demo.demo-split .demo-text .meta { margin: 8px 0 0; color: var(--on-ice-3); }
/* Spruce, the site's green link colour — 8.92:1 on Ice. */
.demo-link { display: inline-block; margin-top: 12px; font-family: var(--display); font-size: 14px; font-weight: 600;
  letter-spacing: .02em; color: var(--spruce); text-decoration: none; font-variation-settings: "opsz" 14, "wdth" 96; }
.demo-link::after { content: "\2197"; display: inline-block; margin-left: 6px; transition: transform .18s ease; }
.demo-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.demo-link:hover::after { transform: translate(2px, -2px); }
.demo.demo-split .demo-note { margin: auto 0 0; padding-top: clamp(16px, 2vw, 24px); max-width: none; color: var(--on-ice-3); }
/* align-self keeps the border hugging the screenshot: without it the media
   stretches to the taller text column and the border encloses empty space. */
.demo-split .demo-media { align-self: start; min-width: 0; border-radius: var(--r-hair); overflow: hidden; border: 1px solid rgba(28,18,24,.12); }
.demo-split .demo-media img, .demo-split .demo-media video { display: block; width: 100%; height: auto; }
/* A bleed asset: the collage is drawn running off its own edges, so it runs
   to the panel edges too. Contained with padding around it, the cut photos
   stop in open space and read as broken. */
/* A cut-out asset needs no frame, but a rule at the cut edge makes the
   clipped photos read as continuing past it rather than as broken. */
.demo-media.demo-bare { border: 0; border-left: 1px solid rgba(28,18,24,.12); border-radius: 0; overflow: visible; padding-left: clamp(14px, 1.6vw, 20px); }
/* The live embed still needs a scaling frame: the prototype renders at its
   own width and is scaled into the column, with the review banner clipped. */
.demo-media .demo-frame { container-type: inline-size; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--clearing); }
.demo-media .demo-frame iframe { position: absolute; top: 0; left: 0; width: 1180px; height: 880px; border: 0; transform-origin: 0 0; transform: scale(calc(100cqw / 1180px)) translateY(-106px); }
.demo { grid-column: 2; margin: 0; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--clearing); }
.demo figcaption { margin-bottom: 18px; }
.demo .demo-label { margin: 0 0 8px; font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--quartz-deep); font-variation-settings: "opsz" 14, "wdth" 96; }
.demo figcaption .meta { margin: 10px 0 0; }
.demo figcaption p:not(.demo-label):not(.meta) { margin: 0; max-width: none; font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--on-clearing-2); }
.demo-frame { container-type: inline-size; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--clearing); }
/* translateY sits inside the scale, so it hides exactly 106px of page:
   the prototype's own review banner, which is addressed to a PartySlate
   reviewer rather than to a reader of this case study. */
/* A still, where the source site forbids framing. Same box, no scaling. */
.demo-shot { aspect-ratio: auto; }
.demo-shot img, .demo-shot video { display: block; width: 100%; height: auto; }
.demo-frame iframe { position: absolute; top: 0; left: 0; width: 1180px; height: 880px; border: 0; transform-origin: 0 0; transform: scale(calc(100cqw / 1180px)) translateY(-106px); }
.cs-next { background: var(--ice); color: var(--on-ice-1); padding: clamp(36px, 4vw, 56px) 0; }
.cs-next .btn-solid { background: var(--spruce); color: var(--clearing); }
.cs-next .btn-solid:hover { background: var(--old-growth); }
.cs-next .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; }
.cs-next p { margin: 0; }
.next-label { font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--quartz-deep); margin-bottom: 8px !important; font-variation-settings: "opsz" 14, "wdth" 96; }
.next-name { font-family: var(--sans); font-size: clamp(21px, 2.2vw, 26px); font-weight: 800;
  letter-spacing: -.015em; line-height: 1.16; color: var(--on-ice-1); }
.next-copy { margin-top: 12px !important; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--on-ice-2); max-width: 62ch; }

/* Trial on Spacer: the closing block on a green ground instead of Ice.
   Green darks take a Quartz eyebrow and Sunlit Moss buttons. */
.cs-next-green { background: var(--old-growth); color: var(--on-og-1); border-top: 0; }
.cs-next-green .next-label { color: var(--quartz); }
.cs-next-green .next-name { color: var(--on-og-1); }
.cs-next-green .btn-solid { background: var(--sunlit-moss); color: var(--fig-black); }
.cs-next-green .btn-solid:hover { background: #B6CE91; }
.cs-next-green .next-copy { color: var(--on-og-2); }
.cs-next-green :focus-visible { outline-color: var(--sunlit-moss); }

@media (max-width: 760px) {
  .cs-block { grid-template-columns: 1fr; gap: 14px; }
  .demo { grid-column: 1; }
  .demo-panel { grid-template-columns: 1fr; }
  /* stacked, the cut-edge rule would run down the side of the image */
  .demo-media.demo-bare { border-left: 0; padding-left: 0; }
}

/* ---------- AI page ---------- */
.ai-hero { background: var(--glint); color: var(--on-glint-1); padding: clamp(34px, 3.6vw, 52px) 0; }
.ai-hero .wrap { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 0 clamp(18px, 2.2vw, 30px); align-items: center; }
.ai-hero .eyebrow { grid-column: 1 / -1; }
/* Centred against the headline, and inside the wrap rather than bleeding past it. */
.ai-hero .ai-shot { align-self: center; margin-right: 0; }
.ai-hero h1 { margin: 0; font-family: var(--display); font-size: clamp(32px, 4.5vw, 47px); line-height: 1.02; letter-spacing: -.02em; font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 100; max-width: 20ch; }
.ai-hero p { margin: 20px 0 0; font-size: clamp(16px, 1.35vw, 17px); line-height: 1.6; color: var(--on-glint-2); max-width: 52ch; }
.ai-hero p + p { margin-top: 14px; }

.cat { background: var(--clearing); padding: clamp(38px, 4.2vw, 60px) 0; }
.cat + .cat { border-top: 1px solid var(--rule); }
.cat.b-ice + .cat, .cat + .cat.b-ice { border-top: 0; }
.cat-head { max-width: 64ch; margin-bottom: clamp(22px, 2.5vw, 30px); }
.cat-head h2 { margin: 0 0 12px; font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -.02em; line-height: 1.08; font-weight: 700; font-variation-settings: "opsz" 60, "wdth" 100; }
.cat-head p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--on-clearing-2); }

/* Ice — the card-bearing light ground. Cards step to Clearing. */
.cat.b-ice { background: var(--ice); color: var(--on-ice-1); }
.cat.b-ice .cat-head p { color: var(--on-ice-2); }

/* A repeating parallel set is a card grid. On Clearing: outlined, no fill. */
.systems { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.2vw, 26px); align-items: start; }

/* Each project is a disclosure. The trigger is a link with an arrow, not a box. */
.system { background: none; border: 0; border-radius: 0; }
.system > summary { list-style: none; cursor: pointer; padding: 0; }
.system > summary::-webkit-details-marker { display: none; }
.system h3 {
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .01em;
  color: var(--honey); font-variation-settings: "opsz" 16, "wdth" 96;
}
/* The arrow rides in the text flow, so it follows the last word on a wrap. */
.system h3::after {
  content: "\2192"; display: inline-block; margin-left: 9px;
  transition: transform .18s ease;
}
.system[open] h3::after { transform: rotate(90deg); }
.system > summary:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.system-body { padding: 14px 0 0; }

/* No crop — the screenshots keep their own proportions. */
.system img { width: 100%; max-width: 660px; height: auto; display: block; border-radius: var(--r-hair); margin: 16px 0 18px; }
.system .result { margin: 0; font-family: var(--sans); font-size: 21px; font-weight: 800; line-height: 1.28; letter-spacing: -.015em; color: var(--on-clearing-1); max-width: 46ch; }
.system p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--on-clearing-2); max-width: 78ch; }
.system .btn { margin-top: 16px; }

.tools { background: var(--glint); color: var(--on-glint-1); padding: clamp(32px, 4vw, 52px) 0; }
.tools .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; }
.tools h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--quartz-deep); font-variation-settings: "opsz" 14, "wdth" 96; }
.tools ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.tools li { font-size: 14px; font-weight: 600; letter-spacing: .02em; background: var(--clearing); border-radius: var(--r-pill); padding: 7px 14px; font-variation-settings: "opsz" 14, "wdth" 96; }


/* ---------- type system ----------
   Bricolage is for seeing, Inter is for reading. Headings past
   roughly 30 characters take Inter 800 and carry an explicit
   font-family above, so they are absent from this list. */
.nav-name, .nav-links, .btn,
h2, h3,
.hero-stats .fig b, .hero-stats .fig span, .cs-box .cs-stats b, .cs-box .cs-stats span, .wcard .figs b, .wcard .figs span,
.system h3, .wcard .logo span, .wcard .meta, .demo .meta, .cs-logo span, .tools h2, .tools li,
.trait h3, .fruit-hero .about-cred, .fruit-hero .about-cred span,
.ai-stat b, .ai-stat .stat-of, .ai .eyebrow, .ai-hero .eyebrow,
.cs-block > h2, .earlier, .back, .cs-meta, .lever h3,
.hero-top h1, .cs-hero h1, .ai-hero h1, .fruit-hero h1 { font-family: var(--display); }

.ai h2,
.wcard h3, .trait .claim, .next-name, .system .result { font-family: var(--sans); }

.wcard .say, .hero-top p,
.cs-block p, .outcomes li, .lever p,
.cat-head p, .ai-hero p, .about-body p,
.section-head p, .system p, .ai-lead > div > p, .ai-stat .stat-cat, .trait p { font-family: var(--sans); }

/* ---------- mobile overrides (must stay last) ---------- */
@media (max-width: 800px) {
  .systems { grid-template-columns: 1fr; }
  .hero-stats .wrap { gap: 20px 18px; }
  .hero-stats .fig b, .cs-box .cs-stats b, .impact-stats b { font-size: 28px; }
  .hero-top .wrap, .fruit-hero .wrap { grid-template-columns: 1fr; }
  .hero-photo { max-width: 300px; }
  .fruit-hero .wrap { padding-block: clamp(30px, 6vw, 44px) clamp(30px, 6vw, 44px); }
  .fruit-hero .hero-photo img { border-radius: var(--r-block); }
  .levers { grid-template-columns: 1fr; gap: 24px; }
  .footer .wrap { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .cs-next .wrap { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cat-head { max-width: none; }
  .tools .wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
  .traits { grid-template-columns: 1fr; gap: 24px; }
  .trait .claim, .trait-lead .claim { max-width: none; }
  .work-grid { grid-template-columns: 1fr; }
  .cs-meta span + span { padding-left: 0; border-left: 0; }
}

/* .ai-hero .wrap is declared below the 900px block, and a media query adds no
   specificity — so these overrides have to come after it in source order. */
@media (max-width: 900px) {
  .ai-hero .wrap { grid-template-columns: 1fr; }
  .ai-hero .ai-shot { display: none; }
}

/* ---------- mobile nav ----------
   Must sit after the .nav-links rules above; a media query adds no specificity. */
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 11px; margin-right: -11px;
    background: none; border: 0; cursor: pointer; border-radius: var(--r-hair);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-links {
    display: none; overflow: visible;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 8px var(--gutter) 18px;
    background: var(--clearing); border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 24px rgba(28,18,24,.10);
  }
  .nav-links[data-open] { display: flex; }
  .nav-links a { padding: 13px 2px; font-size: 16px; border-radius: var(--r-hair); }
  .nav-group { display: block; }
  .nav-group > a { display: block; padding-right: 48px; }
  .nav-caret { position: absolute; top: 2px; right: 0; width: 46px; height: 46px; margin: 0; }
  .nav-menu { position: static; margin: 0 0 6px; padding: 0 0 0 12px; min-width: 0;
    background: none; border: 0; border-left: 1px solid var(--rule); border-radius: 0; box-shadow: none; }
  .nav-menu::before { content: none; }
  .nav-links .nav-menu a { padding: 11px 2px; font-size: 15px; }
  .nav-cta { margin-left: 0 !important; margin-top: 10px; text-align: center; justify-content: center; }
}

/* ---------- stat grids: four across or two by two, never three and one ----------
   auto-fit packed as many columns as would fit, which orphaned the fourth stat
   at in-between widths. Fixed counts instead. Must stay after every stat-grid
   declaration above — a media query adds no specificity. */
@media (max-width: 900px) {
  .hero-stats .wrap,
  .cs-box .cs-stats,
  .impact-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}