/* Thryve: withthryve.com
   Main brand colour #0e5738 (confirmed 2026-11-04). Logo, fonts and other colours not final:
   every colour lives in the tokens below, so swap them there only. */

@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Brand */
  --green: #0e5738;          /* main colour */
  --green-deep: #0a4029;     /* hover, dark panels */
  --green-1: #e4ede5;        /* tints for backgrounds */
  --green-2: #cfe0d2;
  --green-3: #a9c7b1;
  --green-4: #6f9c7d;
  /* Neutrals */
  --bg: #fbf8f3;             /* warm cream */
  --paper: #ffffff;
  --ink: #131611;
  --muted: #5b6159;          /* 6.3:1 on --bg */
  --faint: #8d918a;
  --line: rgba(19, 22, 17, .09);
  /* Soft flat panel colours */
  --sand: #f3e7d1;
  --clay: #eedfd3;
  --mist: #dfe8e6;
  --sun: #f4e3b8;
  --ok: #138a52;
  --bad: #b8322a;

  --shadow: 0 1px 2px rgba(19,22,17,.04), 0 6px 16px rgba(19,22,17,.05), 0 24px 48px rgba(19,22,17,.06);
  --shadow-lift: 0 2px 4px rgba(19,22,17,.05), 0 12px 24px rgba(19,22,17,.07), 0 40px 80px rgba(19,22,17,.09);

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;

  --r-card: 28px;
  --r-big: 40px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --wrap: 1200px;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 8px; }

.skip { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 16px; border-radius: 999px; text-decoration: none; transition: top .3s var(--ease); }
.skip:focus { top: 16px; }
.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
.wrap.narrow { --wrap: 820px; }
.section { padding-block: 112px; position: relative; }
.center { text-align: center; justify-items: center; }

/* Paper grain: above a panel's background, below its content */
.grain { position: relative; isolation: isolate; }
.grain::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--noise); opacity: .16; mix-blend-mode: multiply; pointer-events: none; }

/* ---------- Type ---------- */
.display, .h2, .h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.display { font-size: clamp(50px, 7.4vw, 96px); line-height: .98; }
.h2 { font-size: clamp(40px, 5.2vw, 66px); line-height: 1.02; }
.h3 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.04; }
.display em, .h2 em, .h3 em { font-style: italic; }
.display em { color: var(--green); }
.lede { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.5; color: var(--muted); max-width: 34em; }
.sub { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 36em; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.eyebrow.on-dark { color: rgba(255,255,255,.65); }
.head { display: grid; gap: 16px; margin-bottom: 64px; }
@media (max-width: 760px) { .br-lg { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  --lift: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer;
  transform: translateY(var(--lift));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { --lift: -2px; }
.btn:active { --lift: 1px; transition-duration: .1s; }
.btn .arr { width: 16px; height: 16px; fill: currentColor; transition: transform .5s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 1px 2px rgba(14,87,56,.25), 0 8px 24px rgba(14,87,56,.2); }
.btn-primary:hover { background: var(--green-deep); box-shadow: 0 2px 4px rgba(14,87,56,.25), 0 16px 32px rgba(14,87,56,.26); }
.btn-light { background: rgba(255,255,255,.85); color: var(--ink); border-color: rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(19,22,17,.06), 0 10px 30px rgba(19,22,17,.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-light:hover { background: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: rgba(19,22,17,.16); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 14px; }

/* ---------- Nav: floating white pill ---------- */
.nav-wrap { position: fixed; top: 28px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding-inline: 16px; pointer-events: none; }
.nav {
  pointer-events: auto; display: flex; align-items: center; gap: 40px;
  padding: 8px 8px 8px 24px; border-radius: 999px; max-width: 100%;
  background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 2px rgba(19,22,17,.04), 0 8px 24px rgba(19,22,17,.08);
  transition: box-shadow .5s var(--ease);
}
.scrolled .nav { box-shadow: 0 1px 2px rgba(19,22,17,.05), 0 12px 32px rgba(19,22,17,.13); }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -.04em; }
.logo { color: var(--green); }
.logo { --lh: 30px; gap: calc(var(--lh) * .28); }   /* --lh: logo height; icon and wordmark keep the lockup's proportions */
.logo-mk { display: block; flex: none; width: calc(var(--lh) * 1.063); height: var(--lh); }
.logo-mk svg { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; transition: transform .9s var(--spring); }
.logo:hover .logo-mk svg, .logo:focus-visible .logo-mk svg { transform: rotate(360deg) scale(1.12); }   /* spins and pops on hover, spins back on leave */
.logo-wm { display: block; height: calc(var(--lh) * .62); width: auto; aspect-ratio: 2.958; }
.logo-icon-sm { width: 18px; height: 18px; flex: none; color: var(--green); }
.nav-links { display: flex; gap: 4px; }
.nav-links a { display: block; padding: 8px 12px; border-radius: 999px; font-size: 15px; color: var(--ink); text-decoration: none; opacity: .78; transition: opacity .3s var(--ease), background-color .3s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="true"] { opacity: 1; background: var(--green-1); }
.burger { display: none; position: relative; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--green); cursor: pointer; }
.burger span { position: absolute; left: 12px; width: 16px; height: 2px; border-radius: 2px; background: #fff; transition: transform .6s var(--ease); }
.burger span:first-child { top: 16px; } .burger span:last-child { top: 22px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.menu { pointer-events: auto; position: fixed; inset: 0; z-index: -1; background: rgba(251,248,243,.88); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .6s var(--ease); }
.menu.open { opacity: 1; }
.menu ul { display: grid; gap: 4px; text-align: center; }
.menu li { opacity: 0; transform: translateY(48px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.menu.open li { opacity: 1; transform: none; }
.menu.open li:nth-child(2) { transition-delay: .05s; } .menu.open li:nth-child(3) { transition-delay: .1s; }
.menu.open li:nth-child(4) { transition-delay: .15s; } .menu.open li:nth-child(5) { transition-delay: .2s; } .menu.open li:nth-child(6) { transition-delay: .25s; }
.menu a:not(.btn) { display: block; padding: 4px 24px; font-family: var(--serif); font-size: 44px; line-height: 1.2; text-decoration: none; }
.menu .btn { margin-top: 24px; }

/* ---------- Hero: framed scene ---------- */
.hero { padding: 16px 16px 0; }
.hero-frame {
  position: relative; overflow: hidden; border-radius: var(--r-big);
  min-height: min(980px, 118vh);
  padding: 168px 24px 0;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, #d5e5d8 0%, #e6efe4 46%, #f1f1e6 100%);
}
.scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
/* Hero slideshow: five photos stacked in place. Each one fades in, pans upward while it shows, then cross-fades
   into the next. 8s per photo, 40s loop; photo N starts (N-1) x 8s later. Photo 1 starts 2s in, so the page opens on it. */
.scene-roll { position: absolute; left: 0; right: 0; top: -80px; bottom: 0; opacity: .63; will-change: transform; }   /* parallax layer (site.js) */
.scene-roll img { position: absolute; left: 0; top: 0; width: 100%; height: 112%; object-fit: cover; opacity: 0; animation: scene-fade 40s linear infinite; will-change: opacity, transform; }
.scene-roll img:nth-child(1) { animation-delay: -2s; }
.scene-roll img:nth-child(2) { animation-delay: 6s; }
.scene-roll img:nth-child(3) { animation-delay: 14s; }
.scene-roll img:nth-child(4) { animation-delay: 22s; }
.scene-roll img:nth-child(5) { animation-delay: 30s; }
@keyframes scene-fade {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  5%   { opacity: 1; }                                       /* 2s fade in */
  20%  { opacity: 1; }
  25%  { opacity: 0; transform: translate3d(0, -9%, 0); }    /* 2s cross-fade into the next photo; pans the whole time it shows */
  100% { opacity: 0; transform: translate3d(0, -9%, 0); }
}
.hero-copy { display: grid; justify-items: center; text-align: center; gap: 24px; max-width: 880px; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink); background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; box-shadow: 0 0 0 4px rgba(14,87,56,.14); }
.hero .lede { color: #30352f; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ---------- Who we help: drifting cards ---------- */
.who .h2 { margin-bottom: 56px; }
.drift { overflow: hidden; outline-offset: -4px; }
.drift-track { display: flex; gap: 24px; width: max-content; padding-block: 16px 24px; }
.drift.looping .drift-track { animation: drift 64s linear infinite; }
.drift:hover .drift-track, .drift:focus-within .drift-track, .drift:focus .drift-track { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(calc(-50% - 12px)); } }
.who-card { width: 260px; flex: none; display: grid; justify-items: center; align-content: start; text-align: center; gap: 8px; }
.who-art {
  width: 240px; height: 240px; border-radius: 32px; display: grid; place-items: center; margin-bottom: 16px;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.who-art::after { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .14; mix-blend-mode: multiply; }
.who-art svg { width: 88px; height: 88px; fill: var(--green-deep); transition: transform .9s var(--spring); }
.who-card:hover .who-art { transform: translateY(-6px) rotate(-1.5deg); box-shadow: var(--shadow-lift); }
.who-card:hover .who-art svg { transform: scale(1.08) rotate(4deg); }
.c1 .who-art { background: var(--green-2); } .c2 .who-art { background: var(--sand); } .c3 .who-art { background: var(--clay); }
.c4 .who-art { background: var(--mist); } .c5 .who-art { background: var(--sun); } .c6 .who-art { background: var(--green-1); }
.who-k { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.who-v { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.2; max-width: 11em; }

/* ---------- Logo marquee ---------- */
.logos { padding-block: 24px 16px; }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.marquee-track { display: flex; flex: none; gap: 72px; padding-right: 72px; animation: marquee 45s linear infinite; }
.marquee-track li { flex: none; font-size: 20px; font-weight: 600; letter-spacing: -.03em; color: #b5b8ae; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- Service panels ---------- */
.panel {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center;
  padding: 64px; border-radius: var(--r-big); margin-bottom: 40px; overflow: hidden;
  box-shadow: var(--shadow);
}
.panel.flip .panel-visual { order: 2; }
.p-ads { background: var(--green-2); }
.p-web { background: var(--sand); }
.p-seo { background: var(--mist); }
.p-email { background: var(--clay); }
.panel-copy { display: grid; gap: 20px; align-content: center; }
.panel-copy > p:not(.eyebrow) { color: #474c45; font-size: 17px; max-width: 30em; }
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 12px; }
.feats li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; line-height: 1.3; }
.feats svg { width: 32px; height: 32px; flex: none; fill: var(--ink); }
.panel-visual { position: relative; min-height: 360px; display: grid; place-items: center; }

/* Mock pieces (shared) */
.m-line { height: 8px; border-radius: 99px; background: rgba(19,22,17,.1); margin-bottom: 8px; }
.m-line.dark { background: rgba(19,22,17,.22); }
.m-line.big { height: 14px; }
.w40 { width: 40%; } .w55 { width: 55%; } .w70 { width: 70%; } .w90 { width: 90%; }
.m-btn { width: 96px; height: 28px; border-radius: 99px; background: var(--green); margin-top: 12px; }

/* Paid media mock */
.m-search { width: min(420px, 100%); background: #fff; border-radius: 22px; padding: 20px; box-shadow: var(--shadow-lift); display: grid; gap: 14px; transform: rotate(-1.5deg); }
.m-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 99px; border: 1px solid var(--line); font-size: 14px; min-height: 42px; }
.m-bar svg { width: 16px; height: 16px; fill: var(--muted); flex: none; }
.m-bar .typed::after { content: ""; display: inline-block; width: 1px; height: 1em; background: var(--ink); margin-left: 1px; vertical-align: -2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.m-ad { padding: 14px 16px; border-radius: 14px; background: #f7f8f4; }
.m-ad.dim { opacity: .7; }
.m-spons { font-size: 12px; color: var(--muted); }
.m-head { font-size: 17px; color: #1f4fbf; font-weight: 500; line-height: 1.3; margin: 2px 0 4px; }
.m-desc { font-size: 13px; color: var(--muted); line-height: 1.45; }
.m-social { position: absolute; right: -8px; bottom: 0; width: 200px; background: #fff; border-radius: 18px; padding: 12px; box-shadow: var(--shadow-lift); transform: rotate(4deg); font-size: 12px; }
.m-sh { display: flex; align-items: center; gap: 8px; line-height: 1.25; color: var(--muted); margin-bottom: 10px; }
.m-sh b { color: var(--ink); }
.m-img { height: 110px; border-radius: 12px; background: linear-gradient(135deg, var(--green-3), var(--green) 140%); }
.m-cta { margin-top: 10px; text-align: center; padding: 8px; border-radius: 10px; background: var(--green-1); color: var(--green); font-weight: 700; }

/* Website mock */
.m-browser { width: min(440px, 100%); background: #fff; border-radius: 18px; box-shadow: var(--shadow-lift); overflow: hidden; }
.m-chrome { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: #f4f3ef; font-size: 11px; color: var(--muted); }
.m-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #dcdcd4; }
.m-chrome span { margin-left: 12px; padding: 3px 12px; border-radius: 99px; background: #fff; }
.m-page { padding: 28px; }
.m-page > *, .m-phone > * { transform-origin: left; }
.m-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.m-tiles i { height: 72px; border-radius: 12px; background: var(--green-1); }
.m-tiles i:nth-child(2) { background: var(--sand); } .m-tiles i:nth-child(3) { background: var(--clay); }
.m-phone { position: absolute; right: 0; bottom: -12px; width: 150px; height: 280px; border-radius: 28px; background: #fff; border: 6px solid var(--ink); padding: 24px 14px; box-shadow: var(--shadow-lift); transform: rotate(5deg); }
.m-pimg { display: block; height: 90px; border-radius: 12px; margin-top: 16px; background: var(--green-2); }

/* SEO mock */
.m-map { width: min(420px, 100%); background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lift); }
.m-mapimg { position: relative; height: 170px; background:
  linear-gradient(90deg, transparent 48%, #fff 48%, #fff 52%, transparent 52%) 0 0 / 120px 100%,
  linear-gradient(0deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%) 0 0 / 100% 90px,
  #e3eadf; }
.pin { position: absolute; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--faint); box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.pin.p1 { left: 46%; top: 34%; background: var(--green); width: 30px; height: 30px; }
.pin.p2 { left: 20%; top: 56%; } .pin.p3 { left: 74%; top: 22%; }
.m-results { padding: 12px; display: grid; gap: 8px; }
.m-results li { padding: 12px 14px; border-radius: 12px; background: #f7f8f4; }
.m-results li.top { background: var(--green-1); display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.m-results li.top b { color: var(--ink); font-size: 15px; }
.stars { color: #b07b0c; letter-spacing: 2px; }

/* Email panel mock: an inbox with the basket reminder on top */
.m-inbox { width: min(420px, 100%); background: #fff; border-radius: 22px; padding: 18px; box-shadow: var(--shadow-lift); transform: rotate(1.5deg); }
.m-inbox-h { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 2px 4px 12px; }
.m-mails { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.m-mails li { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #f7f8f4; font-size: 13px; color: var(--muted); }
.m-mails li.top { background: var(--green-1); gap: 6px; padding: 16px; }
.m-from { display: flex; align-items: center; gap: 8px; }
.m-from b { color: var(--ink); font-size: 13px; }
.m-from i { margin-left: auto; font-style: normal; font-size: 12px; }
.m-from .logo-icon-sm { width: 20px; height: 20px; }
.m-subj { color: var(--ink); font-size: 14px; }
.m-mails li.top .m-subj { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.15; }
.m-btn-sm { justify-self: start; margin-top: 4px; padding: 8px 14px; border-radius: 999px; background: var(--green); color: #fff; font-size: 12px; font-weight: 600; }

/* Mock motion: plays once when a panel scrolls into view (.play added by JS) */
.js .panel .m-search, .js .panel .m-browser, .js .panel .m-map, .js .panel .m-inbox { opacity: 0; transform: translateY(40px) scale(.96); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js .panel .m-social, .js .panel .m-phone { opacity: 0; transform: translate(40px, 60px) rotate(12deg); transition: opacity 1s var(--ease) .35s, transform 1.4s var(--spring) .35s; }
.js .panel.play .m-search { opacity: 1; transform: rotate(-1.5deg); }
.js .panel.play .m-browser, .js .panel.play .m-map { opacity: 1; transform: none; }
.js .panel.play .m-inbox { opacity: 1; transform: rotate(1.5deg); }
.js .panel.play .m-social { opacity: 1; transform: rotate(4deg); }
.js .panel.play .m-phone { opacity: 1; transform: rotate(5deg); }
.js .panel .m-ad { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .panel.ad-in .m-ad { opacity: 1; transform: none; }
.js .panel.ad-in .m-ad.dim { opacity: .7; transition-delay: .15s; }
.js .panel .m-page > *, .js .panel .m-phone > * { transform: scaleX(0); opacity: 0; transition: transform .9s var(--ease), opacity .6s var(--ease); }
.js .panel.play .m-page > *, .js .panel.play .m-phone > * { transform: none; opacity: 1; }
.js .panel.play .m-page > :nth-child(1) { transition-delay: .3s; } .js .panel.play .m-page > :nth-child(2) { transition-delay: .4s; }
.js .panel.play .m-page > :nth-child(3) { transition-delay: .5s; } .js .panel.play .m-page > :nth-child(4) { transition-delay: .6s; }
.js .panel.play .m-page > :nth-child(5) { transition-delay: .7s; } .js .panel.play .m-phone > * { transition-delay: .8s; }
.js .panel .pin { opacity: 0; translate: 0 -40px; transition: opacity .4s var(--ease), translate .9s var(--spring); }
.js .panel.play .pin { opacity: 1; translate: 0 0; }
.js .panel.play .pin.p2 { transition-delay: .5s; } .js .panel.play .pin.p3 { transition-delay: .65s; } .js .panel.play .pin.p1 { transition-delay: .85s; }
.js .panel .m-results li { opacity: 0; transform: translateX(-16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .panel.play .m-results li { opacity: 1; transform: none; }
.js .panel.play .m-results li:nth-child(1) { transition-delay: 1s; } .js .panel.play .m-results li:nth-child(2) { transition-delay: 1.1s; } .js .panel.play .m-results li:nth-child(3) { transition-delay: 1.2s; }
.js .feats li { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .panel.play .feats li { opacity: 1; transform: none; }
.js .panel.play .feats li:nth-child(2) { transition-delay: .08s; } .js .panel.play .feats li:nth-child(3) { transition-delay: .16s; } .js .panel.play .feats li:nth-child(4) { transition-delay: .24s; }


/* ---------- Testimonial quote ---------- */
.quote { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; max-width: 980px; margin: 96px auto; }
.quote blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.2; letter-spacing: -.01em; }
.quote figcaption { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 17px; white-space: nowrap; }
.q-line { width: 64px; height: 1px; background: var(--green-3); }
.avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--green-2); color: var(--green); font-weight: 700; box-shadow: var(--shadow); }

/* ---------- Process (deep green) ---------- */
.dark-panel {
  background: radial-gradient(70% 80% at 100% 0%, rgba(169,199,177,.22), transparent 60%), var(--green);
  color: #fff; border-radius: var(--r-big); padding: 88px 64px; overflow: hidden;
}
.dark-panel .sub { color: rgba(255,255,255,.75); }
.dark-panel.grain::before { mix-blend-mode: overlay; opacity: .3; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { display: grid; align-content: start; gap: 12px; padding: 28px 24px; border-radius: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background-color .5s var(--ease), transform .7s var(--ease); }
.step:hover { background: rgba(255,255,255,.1); transform: translateY(-4px); }
.num { font-family: var(--serif); font-style: italic; font-size: 52px; line-height: 1; color: var(--green-3); }
.step h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; }
.step p { color: rgba(255,255,255,.75); font-size: 15px; }

/* ---------- Tagline reveal ---------- */
.tagline { padding-block: 120px; }
.tag-text { max-width: 20em; margin-inline: auto; text-align: center; font-family: var(--serif); font-size: clamp(36px, 5vw, 64px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.tag-text .w { color: rgba(19,22,17,.18); transition: color .9s var(--ease); }
.tag-text .w.on { color: var(--ink); }

/* ---------- Case study (template) ---------- */
.case { padding: 48px; border-radius: var(--r-big); background: var(--green-1); display: grid; gap: 40px; }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.case-logo { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; height: 48px; padding: 0 20px; border-radius: 14px; background: var(--paper); color: var(--faint); font-size: 14px; font-weight: 600; }
.case-logo img { max-height: 32px; width: auto; }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.case-tags li { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.case-body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.case-story { display: grid; gap: 32px; }
.cs-block { display: grid; gap: 10px; }
.cs-block h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; }
.cs-block p { color: #474c45; font-size: 16px; line-height: 1.6; }
.case .ticks { gap: 12px; font-size: 16px; }
.case .ticks li { color: #474c45; }
.case .ticks li::before { background-color: var(--green); }
.case-visual { display: grid; gap: 16px; }
.case-shot { aspect-ratio: 4 / 3; border-radius: var(--r-card); background: var(--green-2); display: grid; place-items: center; padding: 32px; text-align: center; color: #474c45; font-size: 15px; overflow: hidden; box-shadow: var(--shadow); }
.case-shot img { width: 100%; height: 100%; object-fit: cover; }
.case-shot:has(img) { padding: 0; }
.case-chart { padding: 24px; border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow); display: grid; gap: 16px; }
.cc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; }
.cc-key { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 500; }
.cc-key i { width: 10px; height: 10px; border-radius: 3px; background: var(--green); margin-left: 8px; }
.cc-key i.b { background: var(--green-3); margin-left: 0; }
.mini-bars { display: flex; align-items: flex-end; gap: 8px; height: 72px; }
.mini-bars i { flex: 1; height: var(--h); border-radius: 8px 8px 4px 4px; background: var(--green-3); transform-origin: bottom; transition: transform 1s var(--spring); }
.case-chart .mini-bars { height: 120px; }
.case-chart .mini-bars i { background: var(--green); }
.case-chart .mini-bars i.b { background: var(--green-3); }
.js .case:not(.in) .mini-bars i { transform: scaleY(.1); }
.case.in .mini-bars i:nth-child(2) { transition-delay: .06s; } .case.in .mini-bars i:nth-child(3) { transition-delay: .12s; }
.case.in .mini-bars i:nth-child(4) { transition-delay: .18s; } .case.in .mini-bars i:nth-child(5) { transition-delay: .24s; }
.case.in .mini-bars i:nth-child(6) { transition-delay: .3s; } .case.in .mini-bars i:nth-child(7) { transition-delay: .36s; }
.case.in .mini-bars i:nth-child(8) { transition-delay: .42s; }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.case-stats li { display: grid; gap: 6px; padding: 32px; border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cs-num { font-family: var(--serif); font-size: clamp(56px, 6vw, 84px); line-height: .95; letter-spacing: -.03em; color: var(--green); }
.cs-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; }
.cs-note { color: var(--muted); font-size: 15px; }
.case-quote { display: grid; justify-items: center; gap: 24px; max-width: 820px; margin: 80px auto 0; text-align: center; }
.case-quote blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.2; letter-spacing: -.01em; }
.case-quote figcaption { display: flex; align-items: center; gap: 14px; text-align: left; color: var(--muted); font-size: 15px; }
.case-quote figcaption b { color: var(--ink); }
.case-cta { display: flex; justify-content: center; margin-top: 40px; }
@media (max-width: 1080px) { .case-body { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 860px) { .case-stats { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .case { padding: 32px 20px; border-radius: 28px; gap: 32px; }
  .case-stats li { padding: 24px; }
  .case-quote { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) { .js .case .mini-bars i { transform: none; } }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 28px 64px 28px 0; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; border-radius: 8px; transition: color .3s var(--ease); }
.faq summary:hover { color: var(--green); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .6s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(45deg); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.faq .ans > p { overflow: hidden; color: var(--muted); max-width: 40em; font-size: 17px; }
.faq .ans > p::after { content: ""; display: block; height: 28px; }
.faq details[open]:not(.closing):not(.pre) .ans { grid-template-rows: 1fr; }

/* ---------- Final CTA ---------- */
.final-panel {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
  padding: 72px 64px; border-radius: var(--r-big); overflow: hidden;
  background:
    radial-gradient(50% 90% at 0% 100%, rgba(255,255,255,.35), transparent 70%),
    radial-gradient(40% 70% at 95% 0%, rgba(14,87,56,.12), transparent 70%),
    var(--green-2);
  box-shadow: var(--shadow);
}
.final-copy { display: grid; gap: 16px; }
.final-copy .h2 { font-size: clamp(48px, 6vw, 80px); }
.final-sub { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: #2f3a31; max-width: 18em; }
.enquiry-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 32px; border-radius: var(--r-card); background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow); }
.fld { display: grid; gap: 8px; }
.fld label { font-size: 14px; font-weight: 600; }
.opt { font-weight: 400; color: var(--muted); }
.fld input { width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(19,22,17,.14); background: #fff; font: 16px/1.4 var(--sans); color: var(--ink); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.fld input::placeholder { color: #8f938b; }
.fld input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(14,87,56,.15); }
.fld.invalid input { border-color: var(--bad); }
.err { font-size: 14px; color: var(--bad); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ts-slot:empty { display: none; }
.enquiry-form .submit { width: 100%; }
.enquiry-form[aria-busy="true"] .submit { opacity: .6; pointer-events: none; }
.status { font-size: 14px; color: var(--bad); }
.status:empty { display: none; }
.fine { font-size: 13px; color: var(--muted); }
.form-success { display: grid; gap: 8px; padding: 32px; border-radius: var(--r-card); background: rgba(255,255,255,.8); }
.form-success h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; }
.form-success p { color: var(--muted); }

/* ---------- Footer: dark rounded panel ---------- */
.footer { margin: 112px 16px 16px; padding-top: 72px; border-radius: var(--r-big); background: #10140f; color: #e9ebe5; overflow: hidden; }
.footer.grain::before { opacity: .3; mix-blend-mode: screen; }
.foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 48px; }
.foot-brand { display: grid; gap: 12px; align-content: start; }
.footer .logo { color: #fffef2; }
.footer .logo { --lh: 40px; }
.foot-brand p { color: #9ea398; font-size: 15px; max-width: 22em; }
.footer h3 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer nav ul { display: grid; gap: 10px; }
.footer nav a { color: #b9beb3; text-decoration: none; font-size: 15px; transition: color .3s var(--ease); }
.footer nav a:hover { color: #fff; }
.copy { font-size: 13px; color: #8a9084; padding-block: 24px; border-top: 1px solid rgba(255,255,255,.08); }
.wordmark { font-family: var(--serif); font-size: clamp(110px, 26vw, 380px); line-height: .75; letter-spacing: -.04em; text-align: center; margin-bottom: -.1em; user-select: none; background: linear-gradient(180deg, rgba(169,199,177,.32), rgba(169,199,177,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(32px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }

/* Placeholder highlighting: add ?ph to the URL to outline every value still to replace */
.show-ph [data-ph] { outline: 2px dashed #e5484d; outline-offset: 2px; border-radius: 4px; }

/* ---------- Inner pages (404, privacy) ---------- */
.page { min-height: 100vh; padding-top: 160px; padding-bottom: 96px; }
.page-inner { display: grid; gap: 24px; justify-items: start; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin-top: 16px; }
.prose p { color: var(--muted); max-width: 40em; }
.prose a:not(.btn) { color: var(--green); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .panel { grid-template-columns: 1fr; gap: 48px; padding: 48px; }
  .panel.flip .panel-visual { order: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .final-panel { grid-template-columns: minmax(0, 1fr); }
  .final-panel > * { min-width: 0; }
}
@media (max-width: 860px) {
  .foot-cols { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .section { padding-block: 88px; }
  .quote { grid-template-columns: 1fr; margin-block: 72px; }
}
@media (max-width: 640px) {
  .nav { gap: 16px; padding-left: 16px; }
  .nav-cta { display: none; }
  .burger { display: block; }
  .hero { padding: 8px 8px 0; }
  .hero-frame { padding-top: 120px; padding-inline: 16px; min-height: 0; border-radius: 28px; }
  .wrap { width: min(100% - 32px, var(--wrap)); }
  .who-art { width: 200px; height: 200px; }
  .who-card { width: 216px; }
  .panel { padding: 32px 20px; border-radius: 28px; gap: 32px; }
  .panel-visual { min-height: 300px; }
  .feats { grid-template-columns: 1fr; gap: 14px; }
  .m-social { width: 150px; right: -4px; bottom: -24px; }
  .m-img { height: 70px; }
  .m-phone { width: 110px; height: 210px; padding: 18px 10px; right: -4px; }
  .steps { grid-template-columns: 1fr; }
  .dark-panel, .final-panel { padding: 48px 20px; border-radius: 28px; }
  .enquiry-form { padding: 24px; }
  .head { margin-bottom: 40px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .footer { margin: 80px 8px 8px; border-radius: 28px; }
  .tagline { padding-block: 80px; }
  .cta-row .btn { flex: 1 1 auto; }
}
@media (min-width: 641px) { .menu { display: none !important; } }

/* ---------- Reduced motion: everything still, nothing hidden ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .scene-roll img:first-child { opacity: 1; }
  .js .reveal { opacity: 1; transform: none; filter: none; }
  .tag-text .w { color: var(--ink); }
  .js .panel .m-search, .js .panel .m-browser, .js .panel .m-map, .js .panel .m-inbox, .js .panel .m-ad,
  .js .panel .m-page > *, .js .panel .m-phone > *, .js .panel .m-results li, .js .feats li { opacity: 1; transform: none; }
  .js .panel .m-social { opacity: 1; transform: rotate(4deg); }
  .js .panel .m-phone { opacity: 1; transform: rotate(5deg); }
  .js .panel .m-ad.dim { opacity: .7; }
  .js .panel .pin { opacity: 1; translate: none; }
  .drift { overflow-x: auto; }
  .marquee { flex-wrap: wrap; justify-content: center; }
  .marquee-track[aria-hidden="true"] { display: none; }
}

/* Paid media mock: keep the Meta card clear of the Google ad text on wide screens */
@media (min-width: 1081px) {
  .p-ads .m-search { justify-self: start; width: 380px; }
  .p-ads .m-social { width: 180px; right: 0; bottom: -16px; }
}

/* Enquiry form extras */
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fld textarea { width: 100%; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(19,22,17,.14); background: #fff; font: 16px/1.5 var(--sans); color: var(--ink); resize: vertical; min-height: 96px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.fld textarea::placeholder { color: #8f938b; }
.fld textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(14,87,56,.15); }
.picks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.picks legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.picks label { position: relative; }
.picks input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.picks label > span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(19,22,17,.16); background: #fff; font-size: 14px; font-weight: 500; transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .4s var(--spring); }
.picks label:hover > span { border-color: var(--green); }
.picks input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.picks input:active + span { transform: scale(.96); }
.picks input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 3px; }

@media (max-width: 640px) { .fld-row { grid-template-columns: 1fr; } }


/* ---------- Pricing band (no prices, by choice) ---------- */
.ticks { display: grid; gap: 10px; font-size: 15px; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23ffffff' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / 10px no-repeat; }
.price-band {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center;
  padding: 64px; border-radius: var(--r-big); overflow: hidden; color: #fff;
  background: radial-gradient(70% 90% at 100% 0%, rgba(169,199,177,.25), transparent 60%), var(--green);
  box-shadow: var(--shadow-lift);
}
.price-band.grain::before { mix-blend-mode: overlay; opacity: .3; }
.pb-copy { display: grid; gap: 16px; }
.pb-copy > p:last-child { color: rgba(255,255,255,.8); font-size: 17px; max-width: 32em; }
.pb-side { display: grid; gap: 28px; justify-items: start; }
.pb-side .ticks { font-size: 16px; gap: 14px; }
@media (max-width: 860px) { .price-band { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 640px) { .price-band { padding: 40px 20px; border-radius: 28px; } .pb-side .btn { width: 100%; } }

/* Hero call button: frosted, see-through glass pill (Craft style) */
.btn-glass {
  position: relative; color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.18));
  border: 1px solid rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),      /* top highlight */
    inset 0 -1px 0 rgba(255,255,255,.2),
    0 1px 2px rgba(19,22,17,.06),
    0 10px 30px rgba(19,22,17,.10),
    0 24px 60px rgba(14,87,56,.10);
}
.btn-glass:hover { background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.28)); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(19,22,17,.06), 0 16px 40px rgba(19,22,17,.13), 0 30px 70px rgba(14,87,56,.12); }
.btn-lg { min-height: 56px; padding: 16px 32px; font-size: 17px; }

/* =====================================================================
   LIQUID GLASS: one material, used by the nav, badge, glass buttons,
   mobile menu and the phone's notifications and widgets
   ===================================================================== */
.lg, .nav, .badge, .btn-glass, .notif, .widget, .dock-card {
  --lg-tint: rgba(255,255,255,.22);
  position: relative;
  background:
    radial-gradient(120% 140% at var(--mx, 30%) var(--my, -20%), rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, rgba(255,255,255,.34), var(--lg-tint) 45%, rgba(255,255,255,.14));
  -webkit-backdrop-filter: blur(14px) saturate(200%) brightness(1.06);
          backdrop-filter: blur(14px) saturate(200%) brightness(1.06);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35),
    inset 0 0 0 .5px rgba(255,255,255,.45),
    inset 0 -12px 24px -14px rgba(255,255,255,.6),
    inset 0 10px 18px -14px rgba(255,255,255,.7),
    0 1px 2px rgba(19,22,17,.06),
    0 10px 30px rgba(19,22,17,.10);
  isolation: isolate;
}
/* gradient edge: bright top left, faint bottom right, like light bending at the rim */
.lg::after, .nav::after, .badge::after, .btn-glass::after, .notif::after, .widget::after, .dock-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.15) 40%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.btn-glass:hover { --lg-tint: rgba(255,255,255,.34); }

/* Nav as liquid glass, with a sliding glass pill behind the links */
.nav { --lg-tint: rgba(255,255,255,.26); gap: 32px; }
.scrolled .nav { --lg-tint: rgba(255,255,255,.4); }
.nav-links { position: relative; }
.nav-links a { position: relative; z-index: 1; opacity: .8; background: none !important; }
.nav-links a:hover, .nav-links a[aria-current="true"] { opacity: 1; }
.nav-pill {
  position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: 0; border-radius: 999px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.42));
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(19,22,17,.08), 0 4px 12px rgba(19,22,17,.08);
  transition: transform .55s var(--spring), width .55s var(--spring), opacity .3s var(--ease);
}
/* Primary nav button: tinted green glass */
.nav .btn-primary {
  background: linear-gradient(180deg, rgba(30,120,82,.95), rgba(14,87,56,.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 2px rgba(14,87,56,.3), 0 6px 16px rgba(14,87,56,.28);
}
.nav .btn-primary:hover { background: linear-gradient(180deg, rgba(36,134,92,.98), rgba(10,64,41,.98)); }
.burger { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(14,87,56,.3); }
.menu { background: rgba(251,248,243,.55); -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%); }
.badge { --lg-tint: rgba(255,255,255,.2); }

/* =====================================================================
   HERO: copy left, phone right
   ===================================================================== */
.hero-frame { min-height: 0; padding: 136px 48px 96px; }
.hero-grid { width: min(1200px, 100%); display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero-grid .hero-copy { justify-items: start; text-align: left; }
.hero-grid .cta-row { justify-content: flex-start; }
.hero-grid .display { font-size: clamp(50px, 6.4vw, 92px); }
@media (max-width: 1080px) {
  .hero-frame { padding: 128px 24px 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 56px; justify-items: center; }
  .hero-grid .hero-copy { justify-items: center; text-align: center; }
  .hero-grid .cta-row { justify-content: center; }
}
@media (max-width: 640px) { .hero-frame { padding: 112px 16px 48px; } }

/* =====================================================================
   PHONE
   ===================================================================== */
.phone-wrap { display: grid; justify-items: center; gap: 16px; }
.js .phone-wrap.reveal { transform: translateY(60px) rotate(2deg); transition: opacity 1.2s var(--ease) .25s, transform 1.4s var(--ease) .25s, filter 1s var(--ease) .25s; }
.js .phone-wrap.reveal.in { transform: none; }
.phone {
  --pw: 330px;
  width: var(--pw); height: calc(var(--pw) * 2.06); padding: 11px; border-radius: 56px;
  background: linear-gradient(145deg, #2a2d2b, #0d0f0e 40%, #1d201e);
  box-shadow: inset 0 0 0 1.5px #3b3f3c, inset 0 0 0 3px #0b0c0b, 0 2px 4px rgba(19,22,17,.2), 0 30px 60px rgba(19,22,17,.25), 0 60px 120px rgba(14,87,56,.18);
  user-select: none; -webkit-user-select: none;
}
.phone-hint { font-size: 13px; color: #3d423b; text-align: center; max-width: 26em; padding: 8px 16px; border-radius: 16px; background: rgba(251,248,243,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.phone-screen {
  position: relative; height: 100%; border-radius: 45px; overflow: hidden; isolation: isolate;
  font-family: var(--sans); font-size: 13px; line-height: 1.4; color: var(--ink);
  background: radial-gradient(120% 70% at 20% 0%, #3f8f66 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, #c8b06a 0%, transparent 60%), linear-gradient(170deg, #1e6b48, #0e5738 55%, #0a3d28);
}
.island { position: absolute; z-index: 30; top: 10px; left: 50%; translate: -50% 0; width: 96px; height: 28px; border-radius: 20px; background: #000; }
.ph-status { position: absolute; z-index: 25; top: 0; left: 0; right: 0; height: 48px; padding: 16px 26px 0 30px; display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; pointer-events: none; transition: color .3s; }
.on-home .ph-status { color: #fff; }
.st-icons { display: flex; align-items: center; gap: 6px; }
.sig { display: flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.sig b { width: 3px; border-radius: 1px; background: currentColor; }
.sig b:nth-child(1) { height: 4px; } .sig b:nth-child(2) { height: 6px; } .sig b:nth-child(3) { height: 8px; } .sig b:nth-child(4) { height: 10px; }
.bat { position: relative; width: 22px; height: 11px; border-radius: 3.5px; border: 1px solid currentColor; opacity: .9; padding: 1.5px; }
.bat::after { content: ""; position: absolute; right: -3px; top: 3.5px; width: 1.5px; height: 3px; border-radius: 0 1px 1px 0; background: currentColor; }
.bat b { display: block; height: 100%; width: 78%; border-radius: 1.5px; background: currentColor; }

/* Home screen */
.home { position: absolute; inset: 0; padding: 60px 18px 40px; display: flex; flex-direction: column; gap: 22px; }
.widget { border-radius: 24px; padding: 16px 18px; color: #fff; --lg-tint: rgba(255,255,255,.12); }
.wd-date { font-size: 13px; opacity: .85; font-weight: 500; }
.wd-time { font-size: 54px; font-weight: 300; letter-spacing: -.03em; line-height: 1.05; }
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; }
.apps button { display: grid; justify-items: center; gap: 6px; width: 100%; border: 0; background: none; padding: 0; color: #fff; font: 500 11px/1.2 var(--sans); cursor: pointer; }
.apps button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 16px; }
.ic { position: relative; width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.18); transition: transform .35s var(--spring), filter .2s; }
.ic svg { width: 30px; height: 30px; fill: #fff; }
.apps button:hover .ic { transform: translateY(-2px) scale(1.04); }
.apps button:active .ic { transform: scale(.92); filter: brightness(.85); }
.ic-ads { background: linear-gradient(160deg, #3d9bff, #1f63d6); }
.ic-social { background: linear-gradient(160deg, #ff8a5c, #e2463a); }
.ic-leads { background: linear-gradient(160deg, #4bd583, #1c9a54); }
.ic-web { background: linear-gradient(160deg, #a78bfa, #6d4ae0); }
.ic-chess { background: linear-gradient(160deg, #f0dcb1, #c49a5b); }
.ic-chess svg { fill: #3b2a14; }
.ic-hop { background: linear-gradient(160deg, #ffd34d, #f59e0b); }
.badge-n { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3b30; color: #fff; font: 700 12px/22px var(--sans); text-align: center; box-shadow: 0 0 0 2px rgba(14,87,56,.6); }
.dock-card { margin-top: auto; border-radius: 24px; padding: 14px 18px; color: #fff; --lg-tint: rgba(255,255,255,.1); }
.dc-k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.dc-v { font-size: 16px; } .dc-v span { font-size: 30px; font-weight: 600; letter-spacing: -.03em; margin-right: 4px; }
.dc-s { font-size: 11px; opacity: .65; }
.home-bar { position: absolute; z-index: 40; bottom: 8px; left: 50%; translate: -50% 0; width: 128px; height: 18px; border: 0; background: none; cursor: pointer; padding: 0; }
.home-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 5px; border-radius: 3px; background: rgba(19,22,17,.85); }
.on-home .home-bar::before { background: rgba(255,255,255,.9); }

/* Apps */
.app { position: absolute; inset: 0; z-index: 10; background: #f4f5f1; display: flex; flex-direction: column; overflow: hidden; }
.app-in { animation: app-in .5s var(--ease) both; }
.app-out { animation: app-in .38s var(--ease) reverse both; }
@keyframes app-in { from { transform: scale(.18); opacity: 0; border-radius: 40px; } to { transform: none; opacity: 1; } }
.ap-head { display: flex; align-items: center; gap: 6px; padding: 52px 14px 10px; background: rgba(244,245,241,.85); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(19,22,17,.06); }
.ap-head h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ap-head p { font-size: 11px; color: var(--muted); }
.ap-back { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: var(--green); }
.ap-back svg { width: 20px; height: 20px; fill: currentColor; }
.ap-back:hover { background: rgba(14,87,56,.08); }
.ap-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 36px; display: grid; align-content: start; gap: 14px; scrollbar-width: none; }
.ap-body::-webkit-scrollbar { display: none; }
.ap-sub { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 4px 2px -6px; }
.ap-note { font-size: 11px; color: var(--muted); text-align: center; }
.ph-toast { position: absolute; z-index: 60; left: 50%; bottom: 40px; translate: -50% 12px; padding: 8px 14px; border-radius: 999px; background: rgba(19,22,17,.86); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .3s var(--ease), translate .4s var(--spring); pointer-events: none; }
.ph-toast.show { opacity: 1; translate: -50% 0; }

/* Ads app */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 10px; background: rgba(19,22,17,.07); }
.seg button { border: 0; background: none; border-radius: 8px; padding: 6px 0; font: 600 12px var(--sans); color: var(--muted); cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; }
.seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(19,22,17,.12); }
.k3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.k3 div { background: #fff; border-radius: 12px; padding: 10px; display: grid; gap: 2px; box-shadow: 0 1px 2px rgba(19,22,17,.05); }
.k3 span { font-size: 10px; color: var(--muted); }
.k3 b { font-size: 16px; letter-spacing: -.02em; }
.ch-box { position: relative; background: #fff; border-radius: 14px; padding: 12px 10px 8px; box-shadow: 0 1px 2px rgba(19,22,17,.05); }
.ch { width: 100%; height: 120px; touch-action: none; cursor: crosshair; overflow: visible; }
.ch-grid line { stroke: rgba(19,22,17,.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ch-line { fill: none; stroke: var(--green); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ch-line.draw { stroke-dasharray: 1; animation: drawline 1.1s var(--ease) both; }
@keyframes drawline { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ch-cursor { stroke: rgba(14,87,56,.35); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0; }
.ch-dot { fill: #fff; stroke: var(--green); stroke-width: 2.5; vector-effect: non-scaling-stroke; opacity: 0; }
.ch-tip { position: absolute; top: 4px; translate: -50% 0; padding: 4px 8px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.ch-cap { font-size: 10px; color: var(--muted); text-align: center; margin-top: 2px; }
.camps { display: grid; gap: 1px; background: rgba(19,22,17,.06); border-radius: 14px; overflow: hidden; }
.camps li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #fff; }
.camps li div { display: grid; transition: opacity .3s; }
.camps b { font-size: 13px; } .camps span { font-size: 11px; color: var(--muted); }
.camps li.off div { opacity: .45; }
.sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; border: 0; background: #d5d8d2; cursor: pointer; transition: background-color .3s var(--ease); padding: 0; }
.sw i { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .35s var(--spring); }
.sw[aria-checked="true"] { background: #34c759; }
.sw[aria-checked="true"] i { transform: translateX(18px); }

/* Social app */
.so-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; scrollbar-width: none; border-radius: 16px; }
.so-track::-webkit-scrollbar { display: none; }
.so-card { scroll-snap-align: center; background: #fff; border-radius: 16px; padding: 12px; display: grid; gap: 10px; box-shadow: 0 1px 2px rgba(19,22,17,.05); }
.so-top { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.2; }
.so-top div { display: grid; } .so-top span { color: var(--muted); }
.so-av { width: 28px; height: 28px; border-radius: 50%; background: var(--green); flex: none; }
.so-img { height: 170px; border-radius: 12px; display: flex; align-items: flex-end; padding: 12px; color: #fff; font-family: var(--serif); font-size: 24px; line-height: 1.05; }
.so-img.g1 { background: linear-gradient(150deg, #6f9c7d, #0e5738); }
.so-img.g2 { background: linear-gradient(150deg, #f2b46b, #c4622d); }
.so-img.g3 { background: linear-gradient(150deg, #8fb3d9, #3a5f8f); }
.so-b { font-size: 12px; color: var(--muted); }
.so-cta { border: 0; border-radius: 8px; padding: 8px; background: #eef1ec; font: 700 12px var(--sans); color: var(--green); cursor: pointer; }
.so-m { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid rgba(19,22,17,.06); padding-top: 8px; }
.so-m div { text-align: center; } .so-m dt { font-size: 10px; color: var(--muted); } .so-m dd { margin: 0; font-weight: 700; font-size: 14px; }
.so-dots { display: flex; justify-content: center; gap: 6px; }
.so-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(19,22,17,.2); transition: background-color .3s, width .3s var(--spring); }
.so-dots i.on { background: var(--green); width: 16px; }

/* Leads app */
.leads { display: grid; gap: 8px; }
.leads li { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(19,22,17,.05); overflow: hidden; animation: lead-in .5s var(--spring) both; }
@keyframes lead-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.leads li > button { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 12px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ld-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--green-1); color: var(--green); font-weight: 700; }
.ld-main { display: grid; min-width: 0; }
.ld-s { font-size: 11px; color: var(--green); font-weight: 600; }
.ld-m { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leads li.open .ld-m { white-space: normal; }
.ld-t { font-size: 11px; color: var(--faint); }
.leads li.unread .ld-t::after { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: #0a84ff; margin: 6px 0 0 auto; }
.ld-act { display: none; gap: 8px; padding: 0 12px 12px 56px; }
.leads li.open .ld-act { display: flex; }
.ld-act button { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; padding: 6px 12px; background: var(--green); color: #fff; font: 600 12px var(--sans); cursor: pointer; }
.ld-act button + button { background: #eef1ec; color: var(--green); }
.ld-act svg { width: 14px; height: 14px; fill: currentColor; }

/* Website app */
.wb-big { background: #fff; border-radius: 14px; padding: 14px; display: grid; box-shadow: 0 1px 2px rgba(19,22,17,.05); }
.wb-big span { font-size: 11px; color: var(--muted); }
.wb-big b { font-size: 34px; letter-spacing: -.03em; line-height: 1.1; }
.wb-big em { font-style: normal; font-size: 11px; color: var(--ok); font-weight: 600; }
.wb-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; padding: 0 4px; }
.wb-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #8b6cf0, #6d4ae0); transform-origin: bottom; }
.app-web.grow .wb-bars i { animation: bar-grow .8s var(--spring) both; animation-delay: calc(var(--i) * 50ms); }
@keyframes bar-grow { from { transform: scaleY(.05); } }
.wb-src { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 1px 2px rgba(19,22,17,.05); }
.wb-src circle { fill: none; stroke-width: 14; }
.wb-src ul { display: grid; gap: 4px; font-size: 11px; }
.wb-src li { display: flex; align-items: center; gap: 6px; } .wb-src li i { width: 8px; height: 8px; border-radius: 2px; } .wb-src li b { margin-left: auto; }
.wb-pages { margin: 0; padding: 0; list-style: none; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(19,22,17,.05); }
.wb-pages li { display: flex; justify-content: space-between; padding: 9px 12px; font-size: 12px; border-bottom: 1px solid rgba(19,22,17,.05); }

/* Chess app */
.cz-status { text-align: center; font-weight: 600; font-size: 13px; min-height: 18px; }
.cz-board { display: grid; grid-template-columns: repeat(8, 1fr); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 3px #7a5a35, 0 6px 16px rgba(0,0,0,.18); aspect-ratio: 1; }
.cz-sq { position: relative; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; aspect-ratio: 1; }
.cz-sq.lt { background: #efe2c6; } .cz-sq.dk { background: #b58a5a; }
.cz-sq.last { box-shadow: inset 0 0 0 100px rgba(255,214,79,.35); }
.cz-sq.sel { box-shadow: inset 0 0 0 100px rgba(14,87,56,.35); }
.cz-sq.chk { box-shadow: inset 0 0 12px 4px rgba(220,38,38,.75); }
.cz-sq.tg::after { content: ""; width: 30%; height: 30%; border-radius: 50%; background: rgba(14,87,56,.45); }
.cz-sq.tg.cap::after { position: absolute; inset: 6%; width: auto; height: auto; background: none; border: 3px solid rgba(14,87,56,.55); }
.cz-sq:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; z-index: 1; }
.pc { font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", var(--sans); font-size: 27px; line-height: 1; pointer-events: none; }
.pc.w { color: #fff; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 1px 1px #000, 0 1px 2px rgba(0,0,0,.4); }
.pc.b { color: #1b1a17; text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.cz-foot { display: flex; align-items: center; justify-content: space-between; }
.cz-new { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--green); color: #fff; font: 600 12px var(--sans); cursor: pointer; }
.cz-new svg { width: 14px; height: 14px; fill: currentColor; }
.cz-cap { font-size: 11px; color: var(--muted); }

/* Hop app */
.app-hop { background: #c4dfb0; }
.hp-bar { display: flex; justify-content: space-between; padding: 8px 18px; font-size: 12px; font-weight: 600; background: #f4f5f1; }
.hp-bar b { font-size: 15px; }
.hp-stage { position: relative; flex: 1; overflow: hidden; }
.hp-cv { display: block; outline: none; }
.hp-stage:focus-within { box-shadow: inset 0 0 0 2px rgba(14,87,56,.5); }
.hp-over { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; padding: 24px; background: rgba(14,40,26,.35); color: #fff; pointer-events: none; }
.hp-title { font-family: var(--serif); font-size: 44px; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.hp-msg { font-size: 13px; font-weight: 600; max-width: 18em; }

/* Notifications */
.notif-slot { position: absolute; z-index: 50; top: 46px; left: 8px; right: 8px; }
.notif { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border-radius: 22px; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  --lg-tint: rgba(255,255,255,.55); animation: nf-in .6s var(--spring) both; }
.notif.out { animation: nf-out .45s var(--ease) both; }
@keyframes nf-in { from { transform: translateY(-120%) scale(.9); opacity: 0; } }
@keyframes nf-out { to { transform: translateY(-120%) scale(.95); opacity: 0; } }
.nf-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
.nf-ic svg { width: 18px; height: 18px; fill: #fff; }
.nf-t { display: grid; min-width: 0; font-size: 12px; line-height: 1.3; }
.nf-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; }
.nf-now { font-size: 10px; color: var(--muted); align-self: start; }

@media (max-width: 640px) { .phone { --pw: 296px; } .apps { gap: 16px 4px; } .ic { width: 52px; height: 52px; } .wd-time { font-size: 46px; } }
@media (prefers-reduced-motion: reduce) {
  .js .phone-wrap.reveal { transform: none; }
  .nav-pill { transition: none; }
}

/* =====================================================================
   PHONE v2: clipping fix, lock screen, on-brand look
   ===================================================================== */
/* Clip everything to the rounded screen. overflow + border-radius alone does not clip
   children that create their own compositing layer (blur, animation), so use clip-path. */
.phone-screen { clip-path: inset(0 round 45px); -webkit-clip-path: inset(0 round 45px); }
.app { border-radius: 45px; }
.hp-cv { max-width: 100%; }

/* Wallpaper: brand green with soft hills, echoing the hero */
.phone-screen {
  background:
    radial-gradient(140% 55% at 15% 108%, #6f9c7d 0 48%, transparent 48.5%),
    radial-gradient(130% 50% at 95% 112%, #4f8a65 0 50%, transparent 50.5%),
    radial-gradient(90% 45% at 85% 8%, rgba(244,227,184,.38), transparent 70%),
    linear-gradient(175deg, #1c6a47 0%, #0e5738 50%, #0b4a2f 100%);
}

/* On-brand app icons: soft tiles with deep green symbols */
.ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 4px rgba(14,87,56,.12), 0 6px 14px rgba(0,0,0,.18); }
.ic svg { fill: var(--green-deep); width: 28px; height: 28px; }
.ic-ads    { background: linear-gradient(160deg, #ffffff, #e4ede5); }
.ic-social { background: linear-gradient(160deg, #fbf3e4, #f3e7d1); }
.ic-leads  { background: linear-gradient(160deg, #e9f2ea, #cfe0d2); }
.ic-web    { background: linear-gradient(160deg, #eef3f2, #dfe8e6); }
.ic-chess  { background: linear-gradient(160deg, #f7ebe2, #eedfd3); }
.ic-hop    { background: linear-gradient(160deg, #fbf0d4, #f4e3b8); }
.ic-chess svg { fill: var(--green-deep); }
.nf-ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.nf-ic svg { fill: var(--green-deep); }
.wd-time { font-family: var(--serif); font-weight: 400; font-size: 60px; letter-spacing: -.01em; }
.dc-v span { font-family: var(--serif); font-weight: 400; font-size: 34px; }

/* Brand colours inside the apps */
.app { background: var(--bg); }
.ap-head { background: rgba(251,248,243,.86); }
.sw[aria-checked="true"] { background: var(--green); }
.leads li.unread .ld-t::after { background: var(--green); }
.wb-bars i { background: linear-gradient(180deg, var(--green-4), var(--green)); }
.so-img.g2 { background: linear-gradient(150deg, #e2c27f, #b07b2c); }
.so-img.g3 { background: linear-gradient(150deg, #a9c7b1, #3f6b52); }
.ap-head h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -.01em; }

/* Ads: growth headline and change badges */
.ad-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 14px; border-radius: 16px; background: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(14,87,56,.25); }
.ad-hero div { display: grid; }
.ad-hero span { font-size: 11px; opacity: .8; }
.ad-hero i { font-style: normal; }
.ad-hero b { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; }
.ad-hero .up { background: rgba(255,255,255,.18); color: #fff; }
.up { font-style: normal; font-size: 10px; font-weight: 700; color: var(--green); background: var(--green-1); border-radius: 999px; padding: 2px 7px; justify-self: start; white-space: nowrap; }
.k3 .up { margin-top: 2px; }

/* Chess: board edge to edge, trays above and below */
.cz-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 8px 6px 34px; overflow: hidden; }
.cz-board { border-radius: 8px; box-shadow: 0 0 0 2px #7a5a35, 0 8px 20px rgba(0,0,0,.2); }
.pc { font-size: 32px; }
.cz-tray { min-height: 26px; padding: 0 6px; letter-spacing: -6px; }
.cz-tray .pc { font-size: 22px; }
.cz-status { margin-top: 4px; }
.cz-foot { padding: 0 6px; }

/* Lock screen */
.lock { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; padding: 64px 14px 30px; color: #fff; }
.lock.unlocking { animation: lk-away .55s var(--ease) both; }
@keyframes lk-away { to { transform: translateY(-100%); opacity: .2; } }
.locked .home { visibility: hidden; }
.locked .ph-status { color: #fff; }
.waking .apps li { animation: wake .6s var(--spring) both; }
.waking .apps li:nth-child(2) { animation-delay: .03s; } .waking .apps li:nth-child(3) { animation-delay: .06s; }
.waking .apps li:nth-child(4) { animation-delay: .09s; } .waking .apps li:nth-child(5) { animation-delay: .12s; } .waking .apps li:nth-child(6) { animation-delay: .15s; }
.waking .widget, .waking .dock-card { animation: wake .7s var(--spring) both; }
@keyframes wake { from { transform: scale(.85); opacity: 0; } }
.lk-top { text-align: center; }
.lk-date { font-size: 15px; font-weight: 500; opacity: .9; }
.lk-time { font-family: var(--serif); font-size: 96px; line-height: .95; letter-spacing: -.02em; }
.lk-notes { display: grid; gap: 8px; margin-top: 28px; }
.lk-note { animation: lk-note-in .6s var(--spring) both; }
.lk-note:nth-child(2) { transform: scale(.97); opacity: .92; }
.lk-note:nth-child(3) { transform: scale(.94); opacity: .8; }
@keyframes lk-note-in { from { transform: translateY(-14px) scale(.96); opacity: 0; } }
.lk-slide {
  --p: 0;
  position: relative; margin-top: auto; height: 60px; border-radius: 999px; display: grid; align-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.26), rgba(255,255,255,.1));
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.18);
}
.lk-text {
  text-align: center; padding-left: 40px; font-size: 16px; font-weight: 500; letter-spacing: .01em; opacity: calc(1 - var(--p) * 1.6);
  background: linear-gradient(90deg, rgba(255,255,255,.45) 0%, #fff 45%, rgba(255,255,255,.45) 60%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 2.6s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.lk-knob {
  position: absolute; left: 4px; top: 4px; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: grab;
  display: grid; place-items: center; touch-action: none;
  background: linear-gradient(180deg, #fff, #eef3ee); color: var(--green);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0,0,0,.2);
  transition: transform .5s var(--spring);
}
.lk-slide.drag .lk-knob { transition: none; cursor: grabbing; }
.lk-knob svg { width: 22px; height: 22px; fill: currentColor; }
.lk-knob:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 640px) { .lk-time { font-size: 82px; } }
@media (prefers-reduced-motion: reduce) { .lk-text { animation: none; color: #fff; background: none; } }

/* ---------- HERO v3: centred copy, half a phone (overrides the two column hero above) ----------
   The phone sits under the copy and the hero frame crops it, so only the top ~56% shows.
   It stays on its lock screen: no swipe bar, no home bar, and the screen is see-through to the hero photos. */
.hero-frame { padding: 176px 48px 0; }
.hero-grid { grid-template-columns: 1fr; justify-items: center; gap: 56px; }
.hero-grid .hero-copy { justify-items: center; text-align: center; }
.hero-grid .cta-row { justify-content: center; }
.hero .phone-wrap { margin-bottom: calc(330px * 2.06 * -.34); }   /* a third of the phone hangs below the frame; the lock screen and all three notifications show */
.hero .phone { background: none; padding: 0; border: 11px solid #121513; box-shadow: 0 2px 4px rgba(19,22,17,.2), 0 30px 60px rgba(19,22,17,.22); }
.hero .phone-screen { background: transparent; }
.hero .lock { color: var(--ink); padding-top: 58px; }
.hero .locked .ph-status { color: var(--ink); }
.hero .lk-time { font-size: 72px; }
.hero .lk-notes { margin-top: 22px; }
.hero .lk-slide, .hero .home-bar { display: none; }
@media (max-width: 1080px) { .hero-frame { padding: 168px 24px 0; } }
@media (max-width: 640px) {
  .hero-frame { padding: 100px 16px 0; }
  .hero-grid { gap: 28px; }
  /* Origin-style phone hero: compact copy, so a near full width phone starts high on the screen */
  .hero-grid .hero-copy { gap: 16px; }
  .hero-grid .display { font-size: clamp(38px, 11vw, 46px); line-height: 1; }
  .hero .lede { font-size: 16px; line-height: 1.5; }
  .hero .cta-row .btn { flex: 0 0 auto; }
  .hero .phone-wrap { margin-bottom: calc(296px * 2.06 * -.34); }
  .hero .lk-time { font-size: 64px; }
}
.hero .lk-note { cursor: default; }
@media (max-width: 640px) { .nav-wrap { top: 18px; } }
@media (min-width: 370px) and (max-width: 640px) { .hero .phone-wrap { zoom: 1.12; } }   /* 10px clear of the hero frame, which sits 8px in on phones */

/* ---------- HERO v4: full screen on desktop, big phone (like useorigin.com) ----------
   From 900px wide the hero runs edge to edge and is exactly one screen tall; the phone is scaled up and cut off by the
   bottom of the screen. zoom scales the whole phone (frame, lock screen, notifications) so its insides stay in proportion. */
@media (min-width: 900px) {
  .hero { padding: 14px; }   /* margin round the frame, like craft.do */
  .hero-frame { height: calc(100vh - 28px); height: calc(100svh - 28px); min-height: 740px; border-radius: 32px; padding: 104px 48px 0;
    border: 2px solid #fff; box-shadow: 0 1px 2px rgba(19,22,17,.06), 0 12px 40px -12px rgba(19,22,17,.18); }
  .hero-grid .hero-copy { max-width: 1160px; }
  .hero-grid { gap: 36px; }
  .hero-grid .hero-copy { gap: 20px; }
  .hero-grid .display { font-size: clamp(56px, 5.4vw, 96px); line-height: .95; }
  .hero .lede { font-size: 19px; }
  /* Phone size follows the screen HEIGHT so the lock screen and all three notifications are always in view */
  .hero .phone-wrap { zoom: 1; margin-bottom: 0; }
  .hero .lock { padding-top: 50px; }
  .hero .lk-time { font-size: 64px; }
  .hero .lk-notes { margin-top: 14px; }
}
@media (min-width: 900px) and (min-height: 820px) { .hero .phone-wrap { zoom: 1.1; } }
@media (min-width: 1100px) and (min-height: 880px) { .hero .phone-wrap { zoom: 1.3; } }
@media (min-width: 1200px) and (min-height: 960px) { .hero .phone-wrap { zoom: 1.5; } }
@media (min-width: 1200px) and (min-height: 1040px) { .hero .phone-wrap { zoom: 1.75; } }
@media (min-width: 1400px) and (min-height: 1150px) { .hero .phone-wrap { zoom: 2; } }

/* Services: "No bundles" card under the three panels, Craft style: soft white card, serif title, pill chips */
.mix { margin: 72px auto 0; max-width: 880px; display: grid; justify-items: center; gap: 18px; text-align: center;
  padding: 56px 48px; border-radius: var(--r-big); background: var(--paper); border: 1px solid rgba(19,22,17,.06);
  box-shadow: 0 1px 2px rgba(19,22,17,.04), 0 24px 60px -20px rgba(19,22,17,.14); }
.mix-title { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.02; }
.mix-title em { color: var(--green); }
.mix-copy { max-width: 34em; font-size: 18px; line-height: 1.55; color: #474c45; }
.mix-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; padding: 0; }
.mix-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 500;
  background: var(--green-1); color: var(--green-deep); }
.mix-chips li.all { background: var(--green); color: #fff; }
.mix-chips svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
@media (max-width: 640px) { .mix { margin-top: 48px; padding: 40px 20px; border-radius: 28px; } .mix-copy { font-size: 16px; } }

/* ---------- Hero phone frame: real device look (assets/phone-frame.svg) ----------
   The SVG draws the titanium band, black bezel and side buttons over the see-through screen.
   It is 12px wider than the phone because the buttons stick out 6px on each side. */
.hero .phone { position: relative; border: 0; padding: 11px; border-radius: 56px; background: none; box-shadow: none; }   /* a box shadow shows as a pale box behind the see-through screen */
.phone-frame { position: absolute; z-index: 40; top: 0; left: -6px; width: calc(100% + 12px); max-width: none; height: 100%; pointer-events: none; user-select: none; }   /* max-width:none: the global img cap squeezed it and shifted the frame 6px left */

/* ---------- Hero text on stronger photos (photo layer at 78%) ----------
   Dark text no longer reads on the dark forest, so the hero copy and the phone's lock screen go light, like a real lock screen. */
.hero .display { color: #fbf8f3; text-shadow: 0 2px 24px rgba(10,20,14,.35); }
.hero .display em { color: #bfe6cb; }
.hero .lede { color: rgba(251,248,243,.92); text-shadow: 0 1px 12px rgba(10,20,14,.45); }
.hero .lock, .hero .locked .ph-status { color: #fbf8f3; text-shadow: 0 1px 10px rgba(10,20,14,.3); }
.hero .lk-note { text-shadow: none; }
/* Soft shade behind the hero copy so light text reads on the foggy photos too */
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 46% at 50% 26%, rgba(12,28,19,.42), rgba(12,28,19,.18) 60%, transparent 100%); }
/* Hero phone: no status bar (time, signal, battery); Dynamic Island sits clear of the bezel like the real one */
.hero .ph-status { display: none; }
.hero .island { display: none; }   /* no Dynamic Island on the hero phone (Ioan) */
.hero .lk-note:nth-child(n) { transform: none; }   /* same width cards, so the stack reads as centred */

/* Case study (real client, anonymised): headline turnover card and a two-bar enquiries chart */
.case-big { display: grid; gap: 8px; padding: 32px; border-radius: var(--r-card); color: #fff; box-shadow: var(--shadow);
  background: radial-gradient(80% 100% at 100% 0%, rgba(255,255,255,.14), transparent 60%), linear-gradient(160deg, #1e6b48, var(--green) 55%, #0a3d28); }
.cb-k { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.cb-num { font-family: var(--serif); font-size: clamp(48px, 5.4vw, 76px); line-height: 1; letter-spacing: -.03em; }
.cb-num span { opacity: .6; }
.cb-note { font-size: 15px; opacity: .85; max-width: 30em; }
.cc-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; height: 190px; }
.cc-bars > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; height: 100%; }
.cc-bars b { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; color: var(--ink); }
.cc-bars i { width: 100%; height: calc(var(--v) * 1px);   /* --v = enquiries; 123 fits the 190px chart */ border-radius: 12px 12px 6px 6px; background: var(--green-3); transform-origin: bottom; transition: transform 1s var(--spring); }
.cc-bars i.now { background: var(--green); transition-delay: .15s; }
.cc-bars span { font-size: 14px; color: var(--muted); }
.js .case:not(.in) .cc-bars i { transform: scaleY(.1); }
@media (max-width: 640px) { .case-big { padding: 24px; } }
.cc-up { font-family: var(--sans); font-style: normal; font-size: 13px; font-weight: 700; color: var(--green); background: var(--green-1); padding: 3px 8px; border-radius: 999px; vertical-align: middle; margin-left: 4px; }
.cb-days { list-style: none; margin: 12px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.18); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cb-days li { display: grid; gap: 2px; }
.cb-days b { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; }
.cb-days span { font-size: 12px; opacity: .75; }
@media (max-width: 400px) { .cb-days { grid-template-columns: repeat(2, 1fr); row-gap: 14px; } }