/* LandGrid.io — base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.wrap { width: min(1240px, 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 100; background: #fff; color: #000; padding: 6px 10px; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

/* Jump links (#features, #how, #faq) land below the sticky header */
section[id] { scroll-margin-top: 96px; }

/* LandGrid.io — page (served at landgrid.io and alexhammond.co.uk/landgrid/). Poppins + Alexandria, greens from the original site;
   rounded inset hero with the claimed-squares animation (landgrid.js), frosted sticky header, mint panels. */
:root {
  --bg: #fafbf7;
  --mint: #edf8e5;
  --mint-2: #e2f1d6;
  --sage: #77866e;
  --olive: #5a6543;
  --forest: #465239;
  --ink: #2f3528;
  --muted: #6b7363;
  --display: 'Alexandria', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --r: 28px;
}
body { background: var(--bg); color: var(--ink); font: 300 16px/1.65 var(--body); }

/* Sticky frosted header */
.top { position: sticky; top: 0; z-index: 10; padding: 12px clamp(12px, 2vw, 24px); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1320px; margin: 0 auto; padding: 8px 10px 8px 20px;
  background: rgba(250, 251, 247, .78); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(90, 101, 67, .12); border-radius: 999px; box-shadow: 0 4px 24px rgba(47, 53, 40, .06); }
.logo { width: 92px; }
.top nav { display: flex; gap: 6px; font: 400 15px/1 var(--body); }
.top nav a { padding: 10px 16px; border-radius: 999px; color: var(--muted); transition: background .2s, color .2s; }
.top nav a:hover { background: var(--mint); color: var(--forest); }
/* Contact: a plain text link, same weight as the menu (stays visible on phones when the menu hides) */
.top-contact { padding: 10px 16px; font: 500 15px/1 var(--body); color: var(--forest); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: rgba(70, 82, 57, .35); transition: text-decoration-color .2s; }
.top-contact:hover { text-decoration-color: currentColor; }
@media (max-width: 700px) { .top nav { display: none; } .logo { width: 80px; } }

/* Buttons */
.btn { display: inline-block; padding: 15px 26px; border-radius: 999px; background: var(--forest); color: #fff; font: 400 16px/1 var(--body); transition: background .2s, transform .2s, box-shadow .2s; }
.btn:hover { background: var(--olive); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(70, 82, 57, .25); }
.btn.light { background: #fff; color: var(--forest); font-weight: 600; }
.btn.light:hover { background: var(--mint); }

/* Inset rounded hero */
.hero { padding: 0 clamp(12px, 2vw, 24px); margin-top: -76px; }
.hero-card { position: relative; display: flex; align-items: flex-end; min-height: min(92svh, 900px); overflow: hidden; border-radius: var(--r); background: #6b7d5a; }
.hero-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(20deg, rgba(30, 38, 24, .7) 0%, rgba(30, 38, 24, .25) 45%, rgba(30, 38, 24, 0) 70%); }
.hero-inner { position: relative; z-index: 1; padding: clamp(28px, 5vw, 64px); color: #fff; }
/* Small line above the headline: plain text, not a pill */
.eyebrow { font: 500 13px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .88; }
.hero h1 { margin: 20px 0 10px; font: 600 clamp(44px, 6.6vw, 96px)/1.02 var(--body); letter-spacing: -.03em; max-width: 12ch; text-wrap: balance; }
.hero-sub { font: 300 clamp(18px, 1.8vw, 24px)/1.4 var(--body); opacity: .92; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* Intro split */
.intro { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(24px, 5vw, 72px); align-items: center; padding-top: clamp(80px, 10vw, 140px); }
.intro h2 { font: 300 clamp(34px, 3.8vw, 54px)/1.1 var(--display); color: var(--olive); letter-spacing: -.01em; }
.intro p { margin-top: 16px; color: var(--muted); font-size: 17px; }
.intro figure { margin: 0; }
@media (max-width: 900px) { .intro { grid-template-columns: 1fr; } }

/* Section heads */
.sec-head { margin-bottom: 40px; text-align: center; }
.sec-head h2 { font: 300 clamp(36px, 4.2vw, 58px)/1.1 var(--display); color: var(--olive); }
.sec-head p { margin-top: 10px; color: var(--muted); font-size: 18px; }

/* Feature cards */
.features { padding-top: clamp(80px, 10vw, 140px); }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { overflow: hidden; background: #fff; border: 1px solid rgba(90, 101, 67, .12); border-radius: 22px; transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(47, 53, 40, .1); }
.card img { width: 100%; aspect-ratio: 392 / 260; object-fit: cover; }
.card .txt { padding: 20px 22px 24px; }
.card h3 { font: 400 20px/1.25 var(--display); color: var(--olive); }
.card p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.6; }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  /* Phones: compact cards — picture on the left, text on a mint panel so each stands out from the white page */
  .cards { grid-template-columns: 1fr; gap: 10px; }
  .card { display: grid; grid-template-columns: 40% 1fr; align-items: center; border-radius: 16px; background: var(--mint); }
  .card img { width: calc(100% - 10px); margin-left: 10px; aspect-ratio: 392 / 260; border-radius: 10px; } /* whole picture — its labels stay readable */
  .card .txt { padding: 14px 14px 16px; }
  .card h3 { font-size: 16px; }
  .card p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; }
}

/* Steps */
.steps { padding-top: clamp(80px, 10vw, 140px); }
.step-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step-list li { display: flex; flex-direction: column; gap: 18px; padding: 28px; background: var(--mint); border-radius: 22px; }
.badge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--forest); color: #fff; font: 600 17px/1 var(--body); }
.step-list h3 { font: 400 21px/1.2 var(--display); color: var(--olive); }
.step-list p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) { .step-list { grid-template-columns: 1fr; } }

/* CTA */
.cta { padding: clamp(80px, 10vw, 140px) 0 clamp(48px, 6vw, 80px); }
.cta-panel { padding: clamp(48px, 7vw, 96px) 24px; border-radius: var(--r); text-align: center; background: radial-gradient(120% 140% at 0% 0%, var(--mint-2), var(--mint) 60%); }
.cta-panel h2 { font: 300 clamp(40px, 5.6vw, 76px)/1.05 var(--display); color: var(--olive); }
.cta-panel p { margin: 12px 0 30px; color: var(--muted); font-size: 18px; }

/* Footer */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; max-width: 1320px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 32px); color: var(--muted); font-size: 14px; }
.foot a { text-decoration: underline; text-underline-offset: .2em; }
.foot a:hover { color: var(--forest); }

/* Claimed squares: white, traced from the grid drawn in the photo — a cluster grows from one square (see landgrid.js) */
.grid-overlay { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.grid-overlay polygon { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.35);
  transition: opacity .4s ease, transform .5s cubic-bezier(.2, .9, .3, 1.35); }
.grid-overlay polygon.on { opacity: .97; transform: none; }
.tag { animation: tag-in .35s ease both; transition: opacity .4s ease; filter: drop-shadow(0 2px 6px rgba(20, 28, 16, .3)); }
.tag.out { opacity: 0; }
.tag rect, .tag path { fill: #fff; }
.tag text { fill: var(--forest); font: 600 14px var(--body); }
@keyframes tag-in { from { opacity: 0; } }
.hero-inner { z-index: 2; }
.hero-sub, .actions { width: fit-content; } /* so squares can be claimed right beside them */

/* Tablets: shift the photo a little so the grid (right of centre) has room to grow rightwards */
@media (min-width: 701px) and (max-width: 1100px) { .hero-bg { object-position: 64% 50%; } }

/* On phones: the header pill sits above the photo card (not over it), the photo slides across so the
   drawn grid is in view, and the text goes at the top of the card */
@media (max-width: 700px) {
  .hero { margin-top: 0; }
  .hero-bg { object-position: 50% 50%; } /* phones load mobile-1.webp, already cropped around the grid */
  .hero-card { align-items: flex-start; min-height: max(540px, calc(100svh - 96px)); }
  .hero-inner { padding: 26px 20px 24px; }
  .actions .btn { padding: 13px 15px; font-size: 14.5px; white-space: nowrap; }   /* side by side, leaving open field above the white square for the upward loop */
  .actions { flex-wrap: nowrap; gap: 8px; }
  .hero-card::after { background: linear-gradient(180deg, rgba(30, 38, 24, .72) 0%, rgba(30, 38, 24, .45) 38%, rgba(30, 38, 24, 0) 62%); } /* text sits over the sky here */
  .hero h1 { margin: 12px 0 8px; font-size: 46px; }
  .eyebrow { font-size: 10.5px; letter-spacing: .12em; }
  .actions { margin-top: 18px; }
}
/* Reduce Motion: landgrid.js shows a still cluster of claimed squares instead of animating */
.grid-overlay.still polygon { transition: none; }

/* The photo's own white square: invisible, but pulses once as each loop starts from it */
.grid-overlay .seed { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.grid-overlay .seed.pulse { animation: seed-pulse 1.1s ease-out; }
@keyframes seed-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

/* FAQ — plain questions and answers (also published as FAQPage structured data for search and AI answers) */
.faq { padding-top: clamp(80px, 10vw, 140px); }
.faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid rgba(90, 101, 67, .12); border-radius: 18px; transition: box-shadow .2s; }
.faq details[open] { box-shadow: 0 10px 28px rgba(47, 53, 40, .07); }
.faq summary { position: relative; padding: 20px 56px 20px 24px; list-style: none; cursor: pointer; font: 400 18px/1.35 var(--display); color: var(--olive); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--mint); color: var(--forest); font: 400 18px/1 var(--body); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 24px 22px; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.faq summary:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 18px; }

/* Back link above the header — same as the Imagefactory page's "← Alex Hammond" */
.back-row { max-width: 1320px; margin: 0 auto; padding: 14px clamp(24px, 3vw, 44px) 0; }
.back { font: 400 13px/1.4 var(--body); color: var(--muted); }
.back:hover { color: var(--forest); text-decoration: underline; text-underline-offset: .2em; }

/* Phones: a slow sequence of five still frames (public/landgrid/img/mobile-1…5.webp, made by tools/mobile-frames.mjs)
   instead of the live animation. Frame 1 is the photo; frames 2–5 each add squares and fade in over it, then all fade
   back to frame 1. 16s loop. */
.frames { display: none; }
@media (max-width: 700px) {
  .grid-overlay { display: none; }
  .frames { display: block; position: absolute; inset: 0; pointer-events: none; }
  .frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; animation: 16s ease-in-out infinite both; }
  .frames picture:nth-child(1) img { animation-name: frame2; }
  .frames picture:nth-child(2) img { animation-name: frame3; }
  .frames picture:nth-child(3) img { animation-name: frame4; }
  .frames picture:nth-child(4) img { animation-name: frame5; }
}
@keyframes frame2 { 0%, 14% { opacity: 0; } 21.5%, 87% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes frame3 { 0%, 30% { opacity: 0; } 37.5%, 87% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes frame4 { 0%, 46% { opacity: 0; } 53.5%, 87% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes frame5 { 0%, 62% { opacity: 0; } 69.5%, 87% { opacity: 1; } 95%, 100% { opacity: 0; } }
/* Reduce Motion on a phone: just the last frame (two clusters), standing still */
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .frames picture:nth-child(4) img { opacity: 1; } }