/* ==========================================================================
   FreeSiteCrew homepage
   Hand written, no build step. Breakpoints: 700px and 1040px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Section grounds, sampled from the design reference. The page alternates
     between warm off-white and white to separate sections without rules. */
  --bg-hero:#f9f8f6;
  --bg-why:#fdfdfc;
  --bg-steps:#f6f3ef;
  --bg-included:#ffffff;
  --bg-work:#fcfbf9;
  --bg-compare:#0f1010;
  --bg-faq:#f4f4f2;
  --bg-footer:#f6f6f2;

  --ink:#0f1010;
  --body:#54534f;
  /* Darkened from #8b8985 to clear WCAG AA (4.5:1) on every light ground
     the small eyebrow type sits on. */
  --faint:#6f6d69;
  --line:#e7e4df;
  --line-dark:rgba(255,255,255,.1);

  --lime:#cae804;
  --lime-deep:#b4cf00;

  /* One modern grotesk carries the whole page. Headings are the same
     family at heavier weights and tighter tracking, not a second face. */
  --font-sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:var(--font-sans);
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --radius:6px;
  /* 1378px at the default text size. In rem so the content width grows
     with a reader's larger text and the full header bar still fits. */
  --shell:86.125rem;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body,h1,h2,h3,h4,p,ul,ol,figure,figcaption,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}

body{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  color:var(--body);
  background:var(--bg-hero);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--ink);
  line-height:1.1;
  letter-spacing:-.025em;
}
h1,.section-head h2,.compare h2,.faq h2,.cta h2{font-weight:800;letter-spacing:-.035em}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.on-dark :focus-visible,.on-lime :focus-visible{outline-color:var(--ink)}
.on-dark :focus-visible{outline-color:var(--lime)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:.65rem 1rem;background:#fff;border:1px solid var(--ink);
  border-radius:var(--radius);color:var(--ink);font-weight:600;
}
.skip-link:focus{left:1rem;top:1rem}

/* --------------------------------------------------------------------------
   3. Shared pieces
   -------------------------------------------------------------------------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:24px}

.icon{display:block;width:28px;height:28px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon--lime{color:var(--lime-deep)}
.icon--sm{width:20px;height:20px}

.eyebrow{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);
}

/* Sharp editorial buttons: 6px radius, no shadow. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:46px;padding:.7rem 1.35rem;border-radius:var(--radius);
  font-size:.9375rem;font-weight:600;color:var(--ink);
  border:1px solid transparent;
  transition:background-color .18s,color .18s,border-color .18s;
}
.btn__arrow{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.btn--lime{background:var(--lime);border-color:var(--lime)}
.btn--lime:hover{background:var(--lime-deep);border-color:var(--lime-deep)}
.btn--ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--ink:hover{background:#000}
.btn--ghost{background:#fff;border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--lg{min-height:52px;padding:.85rem 1.6rem;font-size:1rem}

/* A quiet closing prompt for sections that end on a persuasive note. One
   button only, so it never competes with the final CTA band. */
.section-cta{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  margin-top:2.25rem;text-align:center;
}
.section-cta p{font-size:.9375rem;color:var(--body)}
.section-cta--dark p{color:rgba(255,255,255,.75)}

/* Centred section intro used by most sections. */
.section-head{text-align:center;max-width:56rem;margin-inline:auto}
.section-head h2{font-size:clamp(1.75rem,1.15rem + 2.2vw,2.5rem)}
.section-head p{margin-top:.85rem;font-size:1rem;color:var(--body)}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:60;
  background:var(--bg-hero);border-bottom:1px solid var(--line);
}
.header__bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:72px}

/* The logo is a supplied SVG (images/freesitecrew-logo-v2.svg), not text. Sized
   in rem so it grows with a reader's larger text, capped on small screens so
   it always leaves room for the menu button beside it. */
.logo{display:inline-block}
.logo img{display:block;width:12.5rem;max-width:calc(100vw - 7.5rem);height:auto}
/* The header logo is a link home; keep a 44px touch height. The footer .logo
   is a span and is left alone. */
a.logo{display:inline-flex;align-items:center;min-height:44px}

.header__nav,.header__actions{display:none}

.header__toggle{
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:1px solid var(--line);border-radius:var(--radius);
}
.header__toggle span{position:relative;display:block;width:20px;height:14px}
.header__toggle span i{
  position:absolute;left:0;width:100%;height:1.5px;background:var(--ink);
  transition:transform .2s,opacity .2s,top .2s;
}
.header__toggle span i:nth-child(1){top:0}
.header__toggle span i:nth-child(2){top:6px}
.header__toggle span i:nth-child(3){top:12px}
.header__toggle[aria-expanded="true"] i:nth-child(1){top:6px;transform:rotate(45deg)}
.header__toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.header__toggle[aria-expanded="true"] i:nth-child(3){top:6px;transform:rotate(-45deg)}

/* The page is locked while the menu is open and the header is sticky, so a
   panel taller than the screen (small phones, any phone or tablet held
   sideways) left its last links and buttons out of reach. It scrolls
   within the space under the bar instead. */
.header__panel{
  background:var(--bg-hero);border-top:1px solid var(--line);
  max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);
  overflow-y:auto;overscroll-behavior:contain;
}
.header__panel[hidden]{display:none}
.header__panel .shell{padding-block:1.25rem 1.75rem}
.header__panel a.menu-link{
  display:block;padding:.95rem 0;font-size:1.0625rem;font-weight:500;
  color:var(--ink);border-bottom:1px solid var(--line);
}
.header__panel-actions{display:grid;gap:.75rem;margin-top:1.5rem}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero{background:var(--bg-hero);overflow:hidden}
.hero__grid{display:grid;gap:2rem;padding-block:2.25rem 2.75rem}
.hero h1{
  margin-top:1.5rem;
  font-size:clamp(2.25rem,1.3rem + 3.9vw,3.625rem);
  /* Loosened from 1.04. The marked line carries a background, and at the
     tighter setting its box rose far enough to clip the descender of
     "you." on the line above. */
  line-height:1.14;letter-spacing:-.04em;
  /* Hard breaks set the three lines, so this does nothing at desktop width.
     It earns its place on narrow screens, where a line wraps again and
     balancing evens the fragments out. Browsers without it fall back to
     ordinary wrapping, which still reads. */
  text-wrap:balance;
}
/* Below 360px the first line wraps and the three line shape falls apart into
   five. A smaller size there restores it, and no wider screen is affected. */
@media (max-width:359px){
  .hero h1{font-size:2rem}
}
/* A headline with longer lines than the homepage's, as on the US page.
   On phones it keeps the homepage size and the marked line breaks on
   purpose, "See it before / you pay.", instead of leaving "pay." alone on a
   line. From 600px the marked line fits whole, so the break is hidden and
   the size is held to what the column can take. */
/* Line the words of the marked line up with the lines above. Side padding
   pushes the text in by the padding width, so "See it" started to the right
   of "Your" and "built". The sides of the block are drawn with shadows in the
   gradient's end colours instead: the block still reaches past the words,
   but the words themselves share one left edge. Each wrapped piece gets the
   shadows too, through box-decoration-break. */
.hero__h1--long .hero__mark{padding-inline:0;box-shadow:-.18em 0 0 #93ad00,.18em 0 0 var(--lime)}
@media (min-width:600px){
  .hero h1.hero__h1--long{font-size:clamp(2.25rem,1rem + 3.4vw,2.875rem)}
  .hero__h1--long .hero__br-narrow{display:none}
}
@media (min-width:1040px){
  .hero h1.hero__h1--long{font-size:clamp(2.125rem,-.35rem + 3.9vw,2.875rem)}
}
/* The last line sits on a lime block, like a marker line. box-decoration-break
   keeps the block whole if the line ever wraps, rather than leaving a gap
   through the middle of it. The padding is in em so it tracks the fluid
   heading size. */
.hero__mark{
  /* Deepest at the start, full brand lime under "free.", so the block has
     depth and the eye finishes on the brightest part. The dark stop is a
     deeper shade of the same hue rather than a second colour, which keeps
     it reading as one block. Ink on the darkest point is still 7.4:1. */
  background:linear-gradient(100deg,#93ad00,var(--lime) 78%);
  padding:.02em .22em .08em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.hero__lede{
  margin-top:1.5rem;max-width:25rem;
  font-size:1.0625rem;line-height:1.7;
}
/* The reasons to choose us, as a short list under the heading. The tick is a
   lime disc with an ink mark, the same pairing as the marked heading line, so
   it reads clearly on the pale hero where a lime outline alone would fade. */
.hero__points{display:grid;gap:.7rem;margin-top:1.6rem}
.hero__points li{
  display:flex;align-items:flex-start;gap:.65rem;
  font-size:1.0625rem;line-height:1.45;color:var(--ink);font-weight:500;
  text-wrap:pretty;
}
@media (max-width:419px){.hero__points li{font-size:1rem}}
.hero__points .icon{width:22px;height:22px;margin-top:.02rem;fill:var(--lime);color:var(--ink);stroke-width:1.8}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero__note{
  display:flex;align-items:center;gap:.5rem;margin-top:1.5rem;
  font-size:.875rem;color:var(--faint);
}
.hero__note .icon{width:17px;height:17px}
/* The US page's link back to the UK site. Offered as a plain link rather
   than a redirect by country, which would break ads and crawlers. Tall
   enough to tap, and underlined because nothing else marks it as a link. */
.hero__region{margin-top:.1rem;font-size:.875rem}
.hero__region a{display:inline-flex;align-items:center;min-height:44px;color:var(--body);text-decoration:underline;text-decoration-color:var(--lime-deep);text-decoration-thickness:2px;text-underline-offset:3px}
.hero__region a:hover{color:var(--ink)}
/* The collage sits inside a transparent surround (about 5% each side, 3%
   top and 6% bottom of the file). Scaling the element up by 1/0.898 and
   pulling that surround back off with negative margins makes the artwork
   itself fill the column, which is how it is sized in the reference. */
.hero__art img{width:111.36%;max-width:none;margin:-2.03% -5.8% -4.71% -5.51%}

/* --------------------------------------------------------------------------
   6. Proof strip
   -------------------------------------------------------------------------- */
.proof{background:var(--bg-hero);border-block:1px solid var(--line)}
.proof__list{display:grid;grid-template-columns:1fr 1fr}
.proof__item{
  display:flex;align-items:center;gap:.875rem;
  padding:1.25rem .5rem;
  border-top:1px solid var(--line);
}
/* The first row needs no rule above it; the strip already has one. */
.proof__item:nth-child(-n+2){border-top:0}
.proof__item b{display:block;color:var(--ink);font-size:.9375rem;font-weight:600;line-height:1.3}
.proof__item span{display:block;font-size:.875rem;color:var(--body);line-height:1.3}

/* --------------------------------------------------------------------------
   6a. Benefits strip (homepage)

   Takes the proof strip's place under the homepage hero only; the other
   pages keep .proof. One column, ruled between items, until three columns
   have room; then three equal columns with fine dividers. The outer columns
   lose their outside padding so the icons line up with the hero text.
   -------------------------------------------------------------------------- */
.benefits{background:var(--bg-hero);border-block:1px solid var(--line)}
.benefits__list{display:grid;grid-template-columns:minmax(0,1fr);list-style:none;padding:0}
.benefits__item{display:flex;align-items:flex-start;gap:1.125rem;padding-block:1.375rem}
.benefits__item + .benefits__item{border-top:1px solid var(--line)}
.benefits__icon{width:30px;height:30px;color:var(--ink)}
.benefits__copy{min-width:0}
.benefits__title{color:var(--ink);font-size:.9375rem;font-weight:600;line-height:1.35}
.benefits__text{margin-top:.3rem;font-size:.875rem;line-height:1.5;color:var(--body)}
@media (min-width:880px){
  .benefits__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .benefits__item{padding:2rem 2rem 2.125rem}
  .benefits__item:first-child{padding-left:0}
  .benefits__item:last-child{padding-right:0}
  .benefits__item + .benefits__item{border-top:0;border-left:1px solid var(--line)}
}

/* --------------------------------------------------------------------------
   6b. Welcome / how the offer works
   -------------------------------------------------------------------------- */
.intro{background:var(--bg-steps);padding-block:2.75rem}
.intro__grid{display:grid;gap:1.75rem}
.intro__head h2{
  margin-top:1rem;
  font-size:clamp(1.5rem,1.1rem + 1.7vw,2rem);
  font-weight:800;letter-spacing:-.03em;
}
/* A lime rule ties the block to the accent without adding another colour. */
.intro__body{
  display:grid;gap:1rem;
  border-left:2px solid var(--lime);padding-left:1.5rem;
}
.intro__body p{font-size:1.125rem;line-height:1.65}
.intro__close{color:var(--ink);font-weight:500}
.intro__br{display:none}
.intro__points{display:grid;gap:.8rem;margin-top:1.75rem}
.intro__points li{
  display:flex;align-items:flex-start;gap:.65rem;
  font-size:.9375rem;line-height:1.45;color:var(--ink);font-weight:500;
}
.intro__points .icon{width:20px;height:20px;margin-top:.1rem;color:var(--lime-deep)}

/* --------------------------------------------------------------------------
   7. Why free
   -------------------------------------------------------------------------- */
.why{background:var(--bg-why);padding-block:2.75rem}
.why__cards{display:grid;gap:1rem;margin-top:2.5rem}
.why__card{
  background:#fbfaf8;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.75rem;
}
.why__card h3{margin-top:1.15rem;font-size:1.25rem}
.why__card p{margin-top:.6rem;font-size:.9375rem}

/* --------------------------------------------------------------------------
   7a. Why free, illustrated (homepage)

   Replaces .why on the homepage only; the 404 page keeps the icon cards.
   The artwork is finished 4:3 paper illustration with its own cream ground,
   so it sits edge to edge at the top of each card and is never cropped:
   width:100% with height:auto, and the width/height attributes reserve the
   space before it loads. One column, capped at 560px, until three columns
   have room at 1000px; no two-plus-one step in between.
   -------------------------------------------------------------------------- */
.reasons{background:var(--bg-why);padding-block:clamp(2.75rem,1.6rem + 3.6vw,5rem)}
/* rem plus vw, not vw alone, so the heading still grows when someone
   raises their browser's text size. */
.reasons__head h2{font-size:clamp(1.875rem,1.35rem + 1.6vw,2.75rem)}
.reasons__head p{max-width:53rem;margin:1rem auto 0;font-size:1.0625rem;line-height:1.6;text-wrap:balance}
.reasons__cards{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem,2vw,1.5rem);
  max-width:35rem;margin:clamp(1.75rem,1.4rem + 1vw,2.5rem) auto 0;list-style:none;padding:0;
}
.reasons__card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.reasons__media{overflow:hidden}
.reasons__art{display:block;width:100%;height:auto}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .reasons__art{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .reasons__media:hover .reasons__art{transform:scale(1.04)}
}
/* Card padding tracks the card's width: on a phone the card is the screen
   less its gutters, so 6vw; once three cards share the row each is about a
   third of it, so 2.5vw. In px rather than rem: a reader who raises their
   text size wants the room spent on the text, not on bigger padding.
   (Container units would track the card directly, but a size container
   cannot also be a subgrid, which the row alignment needs.) */
.reasons__card{--pad:clamp(20px,6vw,30px)}
.reasons__card h3{
  padding:var(--pad) var(--pad) 0;
  color:var(--ink);font-size:clamp(1.25rem,1.1rem + .5vw,1.3125rem);
  font-weight:700;line-height:1.25;letter-spacing:-.015em;
}
.reasons__card p{
  padding:.7rem var(--pad) calc(var(--pad) + .25rem);
  font-size:1rem;line-height:1.6;color:var(--body);
}
/* In em, not px, so the three columns wait for a wider window when the
   reader has a larger default text size. 62.5em is 1000px at the default. */
@media (min-width:62.5em){
  /* Each card spans the same three rows (art, heading, text) through
     subgrid, so the heading row is as tall as the tallest heading and the
     paragraphs start level, with no space held when every heading fits on
     one line. Browsers without subgrid simply let each card size itself. */
  .reasons__cards{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:0;max-width:none}
  .reasons__card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;--pad:clamp(20px,2.5vw - 3px,30px)}
  .reasons__card h3{font-size:clamp(1.25rem,.9rem + .75vw,1.375rem)}
}


/* --------------------------------------------------------------------------
   8. How it works
   -------------------------------------------------------------------------- */
.steps{background:var(--bg-steps);padding-block:2.75rem}
.steps__wrap{position:relative;margin-top:2.5rem}
.steps__list{display:grid;gap:2rem}
.step{position:relative;padding-left:3.25rem}
/* Vertical rail on small screens; becomes horizontal at desktop. */
.step::before{
  content:"";position:absolute;left:15px;top:34px;bottom:-2rem;
  width:1px;background:var(--ink);opacity:.25;
}
.step:last-child::before{display:none}
.step__num{
  position:absolute;left:0;top:0;
  display:flex;align-items:center;justify-content:center;
  width:31px;height:31px;border-radius:50%;
  border:1.5px solid var(--lime);background:var(--bg-steps);
  font-size:.8125rem;font-weight:600;color:var(--ink);
}
.step__title{display:flex;align-items:center;gap:.55rem;color:var(--ink)}
.step__title h3{font-family:var(--font-sans);font-size:1rem;font-weight:600;letter-spacing:0}
.step__title .icon{width:22px;height:22px}

/* The four step icons drift slowly and continuously rather than reacting to
   hover. Negative delays stagger them so they start mid-cycle and never
   bob in unison. Transform-only, so the timeline never reflows. */
@keyframes step-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.step__title .icon{animation:step-float 4.5s ease-in-out infinite}
.step:nth-child(2) .step__title .icon{animation-delay:-1.15s}
.step:nth-child(3) .step__title .icon{animation-delay:-2.25s}
.step:nth-child(4) .step__title .icon{animation-delay:-3.35s}
.step p{margin-top:.5rem;font-size:.875rem}

/* --------------------------------------------------------------------------
   9. What's included
   -------------------------------------------------------------------------- */
.included{background:var(--bg-included);padding-block:2.75rem}
.included__grid{display:grid;gap:0;margin-top:2.5rem}
.included__item{display:flex;gap:.875rem;padding:1.25rem 0;border-top:1px solid var(--line)}

/* The lime icon lifts a little when its item is hovered. Pointer devices
   only, so it never sticks after a tap; transform-only, so nothing in the
   grid reflows. */
.included__item .icon{transition:transform .25s ease}
@media (hover:hover){
  .included__item:hover .icon{transform:translateY(-3px) scale(1.06)}
}
.included__item:first-child{border-top:0}
.included__item h3{font-size:1.0625rem}
.included__item p{margin-top:.35rem;font-size:.875rem}

/* --------------------------------------------------------------------------
   10. Work examples
   -------------------------------------------------------------------------- */
/* clip, not hidden: the screenshots' transparent surrounds overhang their
   cards by design (see .work__shot), and on a narrow window that invisible
   overhang reached past the screen edge and allowed a sliver of sideways
   scroll. clip trims it without making the section a scroll container. */
.work{background:var(--bg-work);padding-block:2.75rem;overflow-x:clip}
.work__grid{display:grid;gap:1.25rem;margin-top:2.25rem}

/* A quiet frame grounds the screenshots so they read as work rather than as
   images floating on the page. Flex column with the label pushed to the
   bottom keeps the divider rules level across all three cards, whose
   screenshots differ slightly in ratio. */
.work__card{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.25rem;height:100%;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

/* The screenshots are supplied as transparent PNGs carrying their own
   shadow, so they sit straight on the page rather than inside a card.
   Each file has a different transparent surround; scaling the element up
   and pulling that surround off with negative margins makes the artwork
   itself fill the card, so the three line up and read large. */
.work__shot{width:100%;max-width:none;transition:transform .25s ease}
.work__shot--restaurant{width:107.11%;margin:-2.30% -3.49% -4.60% -3.63%}
.work__shot--builder{width:111.71%;margin:-3.85% -5.82% -4.73% -5.89%}
.work__shot--wellness{width:109.17%;margin:-4.76% -4.55% -4.05% -4.62%}
.work__shot--tradesman{width:115.40%;margin:-0.90% -7.66% -1.43% -7.74%}
.work__shot--blogger{width:116.72%;margin:-3.19% -8.28% -2.36% -8.43%}
.work__shot--salon{width:109.01%;margin:-3.48% -4.47% -4.12% -4.54%}

/* Hover only where there is a real pointer, so the lift never sticks on a
   touch screen after a tap. The screenshot rises a little further than the
   card, so the preview lifts off the page rather than sliding with it. */
@media (hover:hover){
  .work__card:hover{
    transform:translateY(-4px);
    border-color:rgba(15,16,16,.22);
    box-shadow:0 12px 24px -18px rgba(15,16,16,.5);
  }
  .work__card:hover .work__shot{transform:translateY(-3px)}
}

.work__label{margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--line)}
.work__label h3{font-size:1.125rem;font-weight:700}
/* Each example label links to the page for that kind of business. */
.work__link{display:inline-flex;align-items:center;min-height:44px;margin-block:-.6rem}
.work__link:hover{text-decoration:underline;text-decoration-color:var(--lime-deep);text-decoration-thickness:2px}
.work__label p{margin-top:.35rem;font-size:.875rem}

/* --------------------------------------------------------------------------
   10b. Reviews
   -------------------------------------------------------------------------- */
.reviews{background:var(--bg-steps);padding-block:2.75rem}
.reviews__grid{display:grid;gap:1.25rem;margin-top:2.25rem}

.review{
  display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.75rem;
}
/* The only lime in the section, so the accent stays sharp. */
.review__mark{
  display:block;font-size:3.25rem;line-height:.5;
  color:var(--lime);font-weight:800;
}
/* Padding, not a margin on the figcaption, so the rule keeps clear of the
   last line of the longest quote as well as the shortest. */
.review__quote{margin-top:.7rem;padding-bottom:1.25rem}
.review__quote p{font-size:1rem;line-height:1.65;color:var(--ink)}
/* Pushed down so the attribution rules line up across all three cards. */
.review__by{margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--line)}
.review__name{display:block;font-size:.9375rem;font-weight:600;color:var(--ink)}
.review__meta{display:block;margin-top:.1rem;font-size:.8125rem;color:var(--body)}

/* Placeholder state: deliberately reads as an instruction, never as a
   quote. Remove the class once real copy is in. */
.review--placeholder .review__quote p,
.review--placeholder .review__name,
.review--placeholder .review__meta{
  font-style:italic;color:var(--faint);
}
.review--placeholder .review__mark{opacity:.4}

/* --------------------------------------------------------------------------
   11. Comparison
   -------------------------------------------------------------------------- */
.compare{background:var(--bg-compare);color:#fff;padding-block:3.25rem}
.compare h2{color:#fff;font-size:clamp(1.75rem,1.15rem + 2.2vw,2.5rem)}
.compare__scroll{margin-top:2rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* On a phone the table scrolls sideways, but nothing said so and the edge of
   the screen cut our column off mid-word, which read as broken. Narrower
   columns let the cut fall on a column rule, and the hint says there is
   more to see. */
@media (max-width:639px){
  .compare__scroll::before{
    content:"Swipe to compare \2192";display:block;margin-bottom:.75rem;
    font-family:var(--font-mono);font-size:.75rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--lime);
  }
  /* Fixed layout, so the widths below are kept rather than renegotiated
     around the longest cell. The first header row sets them. */
  .compare__scroll .compare__table{min-width:500px;table-layout:fixed}
  .compare__scroll .compare__table th,.compare__scroll .compare__table td{padding:.8rem .75rem}
  .compare__table thead tr > :first-child{width:96px}
}
.compare__table{
  min-width:720px;background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);overflow:hidden;
}
.compare__table th,.compare__table td{
  padding:.9rem 1.1rem;text-align:left;font-size:.875rem;
  border-bottom:1px solid var(--line-dark);border-right:1px solid var(--line-dark);
}
/* Scoped to tbody: the thead row is also a :last-child of its own
   section, and would otherwise lose its dividing rule. */
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td{border-bottom:0}
.compare__table th:last-child,.compare__table td:last-child{border-right:0}
.compare__table thead th,.compare__table thead td{
  padding-block:1.05rem;
  /* A firmer rule here stops the header reading as part of the first row. */
  border-bottom-color:rgba(255,255,255,.24);
}
.compare__table thead th{
  font-size:.9375rem;font-weight:700;letter-spacing:-.01em;
  color:rgba(255,255,255,.72);
}
.compare__table tbody th{font-weight:500;color:#fff;font-size:.8125rem;width:22%}
/* The rival columns sit back so the comparison reads at a glance. */
.compare__table td{color:#8d8d89}
.compare__cell{display:flex;align-items:center;gap:.55rem}
.compare__cell .icon{width:18px;height:18px;color:var(--lime)}

/* Our column is framed in lime and lit slightly, so the answer to the
   comparison is obvious before a word is read. Inset shadows draw the frame
   because real borders would merge with the collapsed table grid. */
.compare__table .is-us{
  background:rgba(202,232,4,.07);
  box-shadow:inset 1px 0 0 rgba(202,232,4,.3),inset -1px 0 0 rgba(202,232,4,.3);
}
.compare__table thead th.is-us{
  color:var(--lime);font-size:1rem;
  box-shadow:inset 0 2px 0 var(--lime),
             inset 1px 0 0 rgba(202,232,4,.3),inset -1px 0 0 rgba(202,232,4,.3);
}
.compare__table tbody tr:last-child td.is-us{
  box-shadow:inset 1px 0 0 rgba(202,232,4,.3),inset -1px 0 0 rgba(202,232,4,.3),
             inset 0 -2px 0 rgba(202,232,4,.3);
}
.compare__table td.is-us{color:#fff;font-weight:500}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq{background:var(--bg-faq);padding-block:2.75rem}
.faq h2{font-size:clamp(1.6rem,1.1rem + 2vw,2.25rem)}

/* Two columns of self-contained cards rather than one long list, so the
   section reads as substantial and every question is reachable without
   scrolling past the others. Cards size independently, so opening one
   never shifts its neighbour. */
.faq__list{display:grid;gap:1rem;margin-top:1.75rem}
.faq__item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.faq__item.is-open{
  border-color:rgba(15,16,16,.32);
  box-shadow:0 10px 22px -20px rgba(15,16,16,.55);
}
@media (hover:hover){
  .faq__item:hover{border-color:rgba(15,16,16,.28)}
}

.faq__q{margin:0;font:inherit;font-weight:400;letter-spacing:normal}
.faq__trigger{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;padding:1.15rem 1.25rem;text-align:left;
  font-size:1rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);
}
.faq__text{flex:1}

/* The lime only appears on the open card, so the accent stays sharp. */
.faq__toggle{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);color:var(--ink);
  transition:background-color .2s ease,border-color .2s ease;
}
.faq__chev{
  width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s ease;
}
.faq__trigger[aria-expanded="true"] .faq__toggle{
  background:var(--lime);border-color:var(--lime);
}
.faq__trigger[aria-expanded="true"] .faq__chev{transform:rotate(180deg)}

.faq__panel{
  padding:1.05rem 1.25rem 1.3rem;margin-inline:1.25rem;
  padding-inline:0;border-top:1px solid var(--line);
  font-size:.9375rem;line-height:1.6;color:var(--body);
}
.faq__panel[hidden]{display:none}

/* --------------------------------------------------------------------------
   13. Final CTA
   -------------------------------------------------------------------------- */
/* Centred and stacked, so the whole band funnels to one action. */
.cta{background:var(--lime);padding-block:3rem}
.cta__inner{max-width:54rem;margin-inline:auto;text-align:center}
.cta__eyebrow{color:rgba(15,16,16,.62)}
.cta h2{
  margin-top:.9rem;
  font-size:clamp(1.625rem,1.1rem + 2.2vw,2.5rem);line-height:1.12;
}
.cta__lede{
  margin-top:1rem;margin-inline:auto;max-width:36rem;
  font-size:1.0625rem;line-height:1.6;color:rgba(15,16,16,.78);
}
.cta__actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.75rem;
}
.cta .btn--ghost{background:#fbfbf7;border-color:rgba(15,16,16,.18)}
.cta .btn--ghost:hover{border-color:var(--ink)}
.cta__note{margin-top:1.25rem;color:rgba(15,16,16,.66)}  /* .60 lands at 4.49:1 on lime, just under AA */
.cta__br{display:none}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.footer{background:var(--bg-footer);padding-block:2.25rem}
.footer__grid{display:grid;gap:2rem;align-items:start}
.footer__descriptor{margin-top:.75rem;max-width:17rem;font-size:.875rem;line-height:1.5}
/* Row gap is 0 because each link now carries its own 44px touch height,
   which supplies the separation the gap used to. */
.footer__links{display:flex;flex-wrap:wrap;gap:0 2rem}
.footer__links a{
  display:inline-flex;align-items:center;justify-content:flex-start;
  min-height:44px;
  font-size:.9375rem;color:var(--body);
}
/* A short link like "FAQ" is narrower than a fingertip. Widen it only where
   there is no fine pointer, so a mouse user keeps the tighter spacing. Start
   aligned rather than centred, or the spare width would push the text off
   the left edge that the row above lines up on. */
@media (pointer:coarse){
  .footer__links a{min-width:44px}
}
.footer__links a:hover{color:var(--ink)}
.footer__social{display:flex;gap:.6rem}
.footer__social a{
  position:relative;
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);
  transition:border-color .18s;
}
/* Keep the 38px bordered square the design calls for, but extend the touch
   area to 44px so it is comfortable on a phone. */
.footer__social a::after{content:"";position:absolute;inset:-4px}
.footer__social a:hover{border-color:var(--ink)}
.footer__base{margin-top:2rem;font-size:.8125rem;color:var(--faint)}
/* Privacy, the cookie policy and the settings control sit together on the
   copyright line rather than in the main nav, which was nine items wide and
   orphaned the last one onto a row of its own. Separators trail the item
   they follow, so a wrapped row never opens with a stranded dot. */
.footer__legal{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-left:.35rem}
.footer__legal > *:not(:last-child)::after{content:"·";margin-left:.5rem;color:var(--faint)}
.footer__legal a{color:var(--body)}
.footer__legal a:hover{color:var(--ink)}
/* Reads as part of the copyright line, but it is a real control. */
.footer__settings{font:inherit;color:var(--body);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.2em;padding:0}
.footer__settings:hover{color:var(--ink);text-decoration-color:var(--ink)}
/* The legal links are standalone controls, not links inside a sentence,
   so they need a full touch row like every other footer link. */
@media (pointer:coarse){
  .footer__legal a,.footer__settings{display:inline-flex;align-items:center;min-height:44px}
  .footer__legal{row-gap:0}
}

/* --------------------------------------------------------------------------
   14b. Narrow screens: buttons stack full width rather than wrapping ragged
   -------------------------------------------------------------------------- */
@media (max-width:599px){
  .hero__actions,.cta__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn,.cta__actions .btn{width:100%}
}

/* --------------------------------------------------------------------------
   15. Tablet (700px)
   -------------------------------------------------------------------------- */
@media (min-width:700px){
  .shell{padding-inline:32px}
  .proof__list{grid-template-columns:repeat(4,1fr)}
  .proof__item{border-top:0}
  .proof__item + .proof__item{border-left:1px solid var(--line)}
  .proof__item{padding-inline:1.25rem;justify-content:center}
  .why__cards{grid-template-columns:repeat(3,1fr)}
  .section-cta{flex-direction:row;justify-content:center;gap:1.25rem;margin-top:2.5rem}
  .included__grid{grid-template-columns:1fr 1fr;column-gap:2rem}
  .faq__list{grid-template-columns:1fr 1fr;align-items:start;gap:1rem}
  .included__item:nth-child(2){border-top:0}
  .work__grid{grid-template-columns:1fr 1fr}
  .reviews__grid{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr auto;gap:2.5rem}
  .footer__social{justify-self:end}
}

/* The six footer links need 629px to sit on one row, and the nav column only
   reaches that around 1220px, because the 1040px layout hands 18rem back to
   the descriptor. Below that the row has to break, and left alone it broke
   unevenly, stranding the last link or two under a full row.
   Capping the nav so only three links fit splits it evenly down the middle.
   Each wrapped row is centred independently by the justify-content set at
   1040px, so both come out centred with no further work.
   25rem clears three links and stops short of four in both gap regimes:
   312 to 464px at the 2rem tablet gap, 328 to 488px at the 2.5rem desktop one.
   The cap runs all the way down rather than starting at 1040: it is inert once
   the nav is narrower than it, and there is a band near 1000px that does fit
   one row, so without it widening the window flipped one row to two and back
   to one. */
@media (max-width:1219px){
  .footer__links{max-width:25rem}
}

/* Under 375px the six links are too unevenly sized to wrap tidily: "Who we
   build for" is 120px against 29px for "FAQ", and three links need 312px in a
   312px column, so a rounding error decides the layout. The result flipped
   between 2+3+1 and 2+2+2 over a 40px range. Two fixed columns take the wrap
   out of the browser's hands: always three rows of two, at any width down to
   320px, where the widest pair needs 240px of the 272px available. */
@media (max-width:374px){
  .footer__links{
    display:grid;
    grid-template-columns:repeat(2,auto);
    justify-content:start;
    column-gap:2rem;
  }
}

/* --------------------------------------------------------------------------
   16. Desktop (1040px): the reference composition
   -------------------------------------------------------------------------- */
/* The header switches to the full bar later than everything else, at 1232px
   rather than 1040. Six nav items, the logo and two buttons need about 1226px
   of window on one line; any narrower and the last button ran into the right
   margin. The menu button is a better answer at those widths than a crushed
   navigation.
   Written as 77em (1232px at the default text size) because the bar is sized
   in rem: a reader with larger text needs a proportionally wider window, and
   a px breakpoint let the buttons run off the right edge. app.js listens for
   the same 77em to close the open menu when the bar takes over. */
@media (min-width:77em){
  .header__bar{height:85px}
  .header__toggle,.header__panel{display:none}
  .header__nav{display:block}
  .header__nav ul{display:flex;align-items:center;gap:2rem}
  .header__nav a{font-size:.9375rem;color:var(--body);white-space:nowrap}
  .header__nav a:hover{color:var(--ink)}
  .header__actions{display:flex;align-items:center;gap:.75rem}
  .header__actions .btn{min-height:42px;padding:.5rem 1.1rem;font-size:.875rem;white-space:nowrap}
}

@media (min-width:1040px){
  /* Hero: copy left, collage right. */
  /* From here the copy sits in a .42 column, so the headline has far less
     room than the viewport suggests. Keep it scaling rather than letting it
     sit at its cap, or it breaks into four ragged lines around 1100px. */
  .hero h1{font-size:clamp(2.75rem,.7rem + 3.35vw,3.625rem)}
  .hero__grid{
    grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
    gap:1.25rem;align-items:center;padding-block:3.25rem 3.75rem;
  }
  /* The collage runs out to the container edge, as in the design reference.
     .hero has overflow:hidden so this can never widen the page. */
  .hero__art{justify-self:end;width:100%}
  .hero__art img{margin-left:auto}

  .proof__item{padding-block:1.75rem}

  .intro{padding-block:3.5rem}
  .intro__grid{grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:3rem;align-items:start}
  .intro__br{display:inline}
  .intro__body{padding-left:2.25rem}

  .why{padding-block:3.5rem}
  .why__cards{gap:1.25rem;margin-top:2.25rem}
  .why__card{padding:2rem}

  /* Steps become a horizontal timeline. */
  .steps{padding-block:3.5rem}
  .steps__wrap{margin-top:2.25rem}
  .steps__list{grid-template-columns:repeat(4,1fr);gap:1.5rem}
  .step{padding-left:0;padding-top:3.25rem}
  .step::before{
    left:calc(15px + 1.5rem);right:calc(-1.5rem - 15px);
    top:15px;bottom:auto;width:auto;height:1px;
  }
  .step__num{left:0;top:0}

  .included{padding-block:3.5rem}
  .included__grid{grid-template-columns:repeat(4,1fr);column-gap:0;margin-top:2.25rem}
  .included__item{
    padding:1.75rem 1.5rem;border-top:1px solid var(--line);
    border-left:1px solid var(--line);
  }
  .included__item:first-child,
  .included__item:nth-child(2),
  .included__item:nth-child(3),
  .included__item:nth-child(4){border-top:0}
  .included__item:nth-child(4n+1){border-left:0;padding-left:0}
  .included__item:nth-child(4n){padding-right:0}

  .reviews{padding-block:3.5rem}
  .review{padding:2rem}

  .work{padding-block:3.5rem}
  .work__grid{grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.25rem}
  .work__card{padding:1.5rem}
  .work__label{padding-top:1.5rem}

  .compare{padding-block:3.5rem}
  .compare__table{min-width:0}
  .compare__table th,.compare__table td{padding:1.05rem 1.4rem;font-size:.9375rem}
  .compare__table thead th{font-size:1.1875rem}

  .faq{padding-block:3.5rem}
  .faq__grid{max-width:none}
  .faq__list{margin-top:2rem;gap:1.25rem}
  .faq__trigger{padding:1.35rem 1.5rem;font-size:1.0625rem}
  .faq__panel{margin-inline:1.5rem;padding:1.15rem 0 1.5rem}

  .cta{padding-block:4rem}
  .cta__br{display:inline}

  .footer{padding-block:2.75rem}
  .footer__grid{grid-template-columns:minmax(0,18rem) 1fr auto;gap:3rem;align-items:center}
  .footer__links{justify-content:center;gap:2.5rem}
  .footer__base{margin-top:1.75rem;text-align:center}
}


/* --------------------------------------------------------------------------
   17. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .work__card:hover,.work__card:hover .work__shot{transform:none;box-shadow:none}
  .included__item:hover .icon{transform:none}
  .step__title .icon{animation:none;transform:none}
  .faq__chev{transition:none}
  .faq__item.is-open{box-shadow:none}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   18. Cookie consent
   A bar at the foot rather than a full screen blocker: it does not stop
   anyone reading, and nothing non-essential runs until a choice is made
   anyway. Accept and Reject are the same size and sit together, because a
   rejection has to be as easy to give as an acceptance.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Live chat launcher

   Ours, not Crisp's. Nothing from crisp.chat loads until this is pressed,
   so this is a plain button until then. Crisp's own bubble replaces it once
   the client arrives, which is why it does not try to match their styling:
   the two are never on screen together.
   -------------------------------------------------------------------------- */
.chat-launch{
  /* Lifted clear of the cookie bar while that is up. --consent-h is measured
     and set by crisp.js, because the bar's height depends on how its text
     wraps, which depends on the viewport. It is 0 when there is no bar. */
  position:fixed;right:1rem;bottom:calc(1rem + var(--consent-h, 0px));z-index:70;
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:48px;padding:.7rem 1.15rem;
  background:var(--lime);color:var(--ink);
  border:1px solid var(--lime-deep);border-radius:999px;
  font-size:.9375rem;font-weight:700;
  box-shadow:0 10px 30px -12px rgba(15,16,16,.45);
  cursor:pointer;
  transition:background .18s,transform .18s;
}
.chat-launch svg{width:20px;height:20px}
.chat-launch:hover{background:var(--lime-deep)}
.chat-launch:active{transform:translateY(1px)}
.chat-launch.is-loading{opacity:.7;cursor:progress}
@media (prefers-reduced-motion:reduce){
  .chat-launch{transition:none}
  .chat-launch:active{transform:none}
}
/* With nothing left to scroll, the launcher sat on the footer's last row
   (the legal links and cookie settings). The extra room lets that row clear
   it. Declared after the footer's own rules so it wins at every width. */
.footer{padding-bottom:5.75rem}
/* It also sat over the open mobile menu. */
body:has(.header__toggle[aria-expanded="true"]) .chat-launch{display:none}

.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--bg-compare);color:#fff;
  border-top:2px solid var(--lime);
  box-shadow:0 -8px 30px -20px rgba(0,0,0,.8);
}
.consent__inner{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding:1.1rem 24px 1.25rem;
  display:grid;gap:1rem;
}
.consent__title{font-size:1.0625rem;color:#fff;letter-spacing:-.02em}
.consent__text{margin-top:.4rem;font-size:.875rem;line-height:1.6;color:rgba(255,255,255,.76);max-width:60ch}
.consent__text a{color:#fff;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:.15em}
.consent__text a:hover{text-decoration-color:#fff}

.consent__options{display:grid;gap:.6rem;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line-dark)}
.consent__options[hidden]{display:none}
.consent__opt{display:flex;gap:.6rem;align-items:flex-start;font-size:.8125rem;line-height:1.5;color:rgba(255,255,255,.76)}
.consent__opt input{margin-top:.15rem;width:16px;height:16px;flex:none;accent-color:var(--lime)}
.consent__opt b{display:block;color:#fff;font-weight:600}

.consent__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.consent__btn{flex:1 1 auto;min-width:9rem}
.consent .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.consent .btn--ghost:hover{border-color:#fff}
.consent__more{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:.5rem .9rem;
  font-size:.875rem;font-weight:600;color:#fff;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:.2em;
}
.consent__more:hover{text-decoration-color:#fff}

@media (min-width:700px){
  .consent__inner{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem;padding-block:1.25rem}
  .consent__actions{flex-wrap:nowrap}
  .consent__btn{flex:0 0 auto}
}
@media (min-width:1040px){
  .consent__inner{padding-inline:32px}
}