/* ==========================================================================
   PRIOTO — design tokens
   Palette pulled from the brand mark (five-blade green shutter) and the
   product UI screenshots (dashboard red for urgent, amber for £ savings).
   Type: Poppins / Poppins SemiBold throughout, with IBM Plex Mono reserved
         for data figures and tags — this is a data-analytics product, and
         the mono treatment marks a number out as a live reading, not copy.
   ========================================================================== */

/* Fonts are loaded via <link> in base.njk, not @import: an @import here
   would make the browser wait for this file to parse before it even starts
   fetching them, delaying first paint. */

:root{
  --forest:#206828;      /* logo's darkest blade — headings, primary text-on-light */
  --forest-deep:#123018; /* deepened further for full-bleed dark sections/footer */
  --pine:#288830;        /* logo's 2nd blade — primary buttons, links */
  --sage:#38A838;        /* logo's mid blade — secondary accents, decorative */
  --leaf:#68C048;        /* logo's 4th blade — bright accent */
  --lime:#A8F080;        /* logo's lightest blade — sparingly, tints & dark-bg accents */
  --lime-soft:#E3F5D5;   /* pale tint of lime for chips/backgrounds */
  --paper:#F6F7F1;       /* page background */
  --paper-dim:#ECEEE3;   /* section alt background */
  --ink:#1B211C;         /* primary text */
  --ink-soft:#525C52;    /* secondary text */
  --line:#D9DCCF;        /* hairlines */
  --alert:#B23A2E;       /* urgent / red, from dashboard */
  --amber:#B87A24;       /* ROI amber, from dashboard */
  --white:#FFFFFF;

  --font-display:'Poppins', sans-serif;   /* Poppins SemiBold (600) for headings */
  --font-body:'Poppins', sans-serif;      /* Poppins Regular (400) for body copy */
  --font-mono:'IBM Plex Mono', monospace; /* reserved for data figures & tags */

  --radius:14px;
  --radius-sm:8px;
  --container:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600; /* Poppins SemiBold */
  color:var(--forest);
  line-height:1.16;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem,4.6vw,4rem);}
h2{font-size:clamp(1.7rem,3vw,2.5rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em; color:var(--ink-soft);}
a{color:inherit; text-decoration:none;}
/* height:auto is load-bearing. The width/height attributes on our <img>
   tags are presentational hints that apply whenever no CSS rule sets a
   height, so without this an image sized only by CSS width would be
   stretched to its full intrinsic pixel height. */
img{max-width:100%; height:auto; display:block;}
/* <picture> wraps images for WebP with a JPG/PNG fallback; display:contents keeps
   the img laid out as if it were still a direct child of its container. */
picture{display:contents;}
.container{max-width:var(--container); margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--forest);
  font-weight:600;
  display:inline-block;
  margin-bottom:14px;
}
.section{padding:96px 0;}
.section--tight{padding:64px 0;}
.section--dim{background:var(--paper-dim);}
.section--dark{background:var(--forest-deep); color:var(--paper);}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--white);}
.section--dark p{color:#C9D6CB;}
.mono{font-family:var(--font-mono);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  padding:13px 26px; border-radius:100px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--pine); color:var(--white);}
.btn-primary:hover{background:var(--forest);}
.btn-ghost{border-color:var(--forest); color:var(--forest); background:transparent;}
.btn-ghost:hover{background:var(--forest); color:var(--white);}
.section--dark .btn-ghost{border-color:var(--lime); color:var(--lime);}
.section--dark .btn-ghost:hover{background:var(--lime); color:var(--forest-deep);}

/* ---------- nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,247,241,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:var(--container); margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--forest);}
.brand-mark{width:32px; height:32px;}
.brand-logo{height:51px; width:auto; display:block;}
.footer-icon{height:30px; width:auto; display:block;}
.nav-links{display:flex; gap:30px; align-items:center;}
.nav-links a{
  font-family:var(--font-display); font-size:.92rem; font-weight:600;
  color:var(--ink-soft); padding:6px 2px; border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a.active{color:var(--forest); border-color:var(--lime);}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--forest); margin:5px 0; transition:.2s;}

@media (max-width:860px){
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--paper);
    flex-direction:column; align-items:flex-start; padding:18px 28px 26px;
    border-bottom:1px solid var(--line);
    display:none;
  }
  .nav-links.open{display:flex;}
}

/* ---------- diamond tag system (Carbon / Cost / Compliance) ---------- */
.diamond{width:11px; height:11px; transform:rotate(45deg); display:inline-block; flex:none;}
.diamond--carbon{background:var(--ink);}
.diamond--cost{background:var(--pine);}
.diamond--compliance{background:transparent; border:2px solid var(--sage);}
.diamond-stack{display:flex; flex-direction:column; gap:8px;}
.tag-row{display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; color:var(--ink-soft);}

/* ---------- pillar cards ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.pillar-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; position:relative; overflow:hidden;
}
.pillar-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
}
.pillar-card--carbon::before{background:var(--ink);}
.pillar-card--cost::before{background:var(--pine);}
.pillar-card--compliance::before{background:var(--sage);}
.pillar-card h3{display:flex; align-items:center; gap:10px;}

@media (max-width:860px){ .pillars{grid-template-columns:1fr;} }

/* ---------- hero triangle loop (signature element) ---------- */
.loop-wrap{position:relative; display:flex; align-items:center; justify-content:center;}
.loop-svg{width:100%; max-width:420px; height:auto;}
.loop-arrow{transform-origin:center; animation:loop-pulse 6s ease-in-out infinite;}
.loop-arrow.a2{animation-delay:.4s;}
.loop-arrow.a3{animation-delay:.8s;}
@keyframes loop-pulse{
  0%,100%{opacity:.55;}
  16%{opacity:1;}
  50%{opacity:.55;}
}
.loop-label{font-family:var(--font-mono); font-size:.78rem; font-weight:600; letter-spacing:.08em; fill:var(--forest);}

@media (prefers-reduced-motion:reduce){
  .loop-arrow{animation:none; opacity:1;}
}

/* ---------- data ticker card (mimics real product UI) ---------- */
/* Lighter, calmer treatment than a dark ops-dashboard — a clean card with a
   soft brand-green accent, so it reads as approachable product UI rather
   than an industrial control panel. */
.ticker-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; position:relative; overflow:hidden;
  box-shadow:0 24px 48px -30px rgba(32,104,40,.25);
}
.ticker-card::before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--pine);}
.ticker-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.ticker-top .site-name{font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--forest);}
.ticker-top .site-week{font-family:var(--font-mono); font-size:.68rem; color:var(--ink-soft);}
.ticker-urgent{
  background:#FBEDEB; border:1px solid #EFC9C3;
  color:#8A362B; border-radius:var(--radius-sm); padding:12px 14px;
  font-size:.82rem; margin-bottom:16px; line-height:1.5;
}
.ticker-urgent b{color:var(--alert);}
.ticker-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.ticker-stat{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 10px;}
.ticker-stat .k{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:6px;}
.ticker-stat .v{font-family:var(--font-mono); font-weight:600; font-size:1.05rem; color:var(--forest);}
@media (max-width:520px){ .ticker-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------- hero layout ---------- */
.hero{padding:80px 0 60px;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr;} }
.hero-stats{display:flex; gap:36px; margin-top:36px; flex-wrap:wrap;}
.hero-stat .num{font-family:var(--font-mono); font-size:2rem; font-weight:600; color:var(--forest); display:block;}
.hero-stat .label{font-size:.85rem; color:var(--ink-soft);}

/* Citations under a stat block. Deliberately quiet — the figure is what is
   being read; the source only has to be there when someone checks it. */
.stat-source{
  font-size:.72rem; line-height:1.5; color:var(--ink-soft);
  max-width:520px; margin:18px 0 0;
}
.text-link{
  color:var(--forest); text-decoration:underline;
  text-decoration-color:var(--line); text-underline-offset:2px;
}
.text-link:hover{text-decoration-color:var(--pine);}

/* Footnote references and the note list they point at. The marker has to be
   findable but must not fight the sentence it sits in. */
.fn-ref{font-size:.62em; line-height:0; vertical-align:super; margin-left:2px;}
.fn-ref a{
  color:var(--pine); text-decoration:none; font-family:var(--font-mono);
  font-weight:600; padding:0 1px;
}
.fn-ref a:hover{text-decoration:underline;}
.footnotes{
  list-style:decimal; padding-left:1.6em; margin:0;
  font-size:.78rem; line-height:1.6; color:var(--ink-soft); max-width:760px;
}
.footnotes li{margin-bottom:10px;}
.footnotes li:target{color:var(--ink);}
.fn-back{
  color:var(--pine); text-decoration:none; font-size:.8em; margin-right:4px;
}
.fn-back:hover{text-decoration:underline;}

/* ---------- generic grids/cards ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr;} .grid-3{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .grid-4{grid-template-columns:1fr;} }

.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px;}
.card--dark{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14);}

.chip{
  display:inline-flex; align-items:center; gap:8px; background:var(--lime-soft);
  color:var(--forest); font-family:var(--font-mono); font-size:.75rem; font-weight:600;
  padding:7px 14px; border-radius:100px;
}

/* ---------- market circles (target market page) ---------- */
.market-row{display:flex; align-items:flex-start; gap:22px; padding:22px 0; border-bottom:1px solid var(--line);}
.market-row:last-child{border-bottom:none;}
.market-badge{
  width:96px; height:96px; border-radius:50%; background:var(--pine); color:var(--white);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-display); font-weight:600; font-size:.85rem; flex:none; padding:6px;
}

/* ---------- phone-style feature cards (proactive/context/status/roi) ---------- */
.feature-col{text-align:center;}
.feature-icon{
  width:56px; height:56px; border-radius:14px; background:var(--forest-deep); color:var(--lime);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:1.4rem;
}
.feature-list{list-style:none; padding:0; margin:12px 0 0; font-family:var(--font-mono); font-size:.82rem; color:var(--ink-soft);}
.feature-list li{padding:4px 0;}

/* ---------- team ---------- */
.team-card{text-align:center;}
.team-photo{
  width:132px; height:132px; border-radius:50%; margin:0 auto 18px; background:var(--paper-dim);
  border:3px solid var(--white); box-shadow:0 0 0 1px var(--line);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700;
  font-size:2rem; color:var(--forest);
}
.role{font-family:var(--font-mono); font-size:.8rem; color:var(--sage); font-weight:600; margin-bottom:14px;}
.logo-strip{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px;}
.logo-pill{
  font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:100px; padding:6px 13px; background:var(--white);
}

/* ---------- team row (image placeholder + bio side-by-side) ---------- */
.team-row{
  display:flex; gap:32px; align-items:flex-start;
  padding:36px 0; border-bottom:1px solid var(--line);
}
.team-row:last-child{border-bottom:none;}
.team-photo-placeholder{
  flex:none; width:150px; height:150px; border-radius:16px;
  background:var(--paper-dim); border:2px dashed var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  overflow:hidden;
}
.team-photo-placeholder img{width:100%; height:100%; object-fit:cover; display:block;}
.team-photo-placeholder.has-photo{border-style:solid; border-color:var(--line);}
.team-photo-placeholder .initials{
  font-family:var(--font-display); font-weight:700; font-size:2rem; color:var(--forest);
}
.team-photo-placeholder .photo-label{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
.team-row-content h3{margin-bottom:4px;}
.team-row .role{margin-bottom:10px;}
@media (max-width:700px){
  .team-row{flex-direction:column; align-items:center; text-align:center;}
  .team-row-content{text-align:center;}
}

/* ---------- testimonials ---------- */
.quote-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:32px;}
.quote-mark{font-family:var(--font-display); font-size:3rem; color:var(--lime); line-height:0.5; display:block; margin-bottom:14px;}
.quote-attr{margin-top:18px; font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft);}
.placeholder-note{
  border:1.5px dashed var(--sage); background:var(--lime-soft); border-radius:var(--radius);
  padding:22px 26px; font-size:.92rem; color:var(--forest);
}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.field{margin-bottom:18px;}
.field label{display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;}
.field input, .field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:.95rem; background:var(--white); color:var(--ink);
}
.field input:focus, .field textarea:focus{outline:2px solid var(--lime); border-color:var(--pine);}
.contact-line{display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.15);}
.contact-line:last-child{border-bottom:none;}
.contact-icon{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; flex:none;}

/* ---------- footer ---------- */
.site-footer{background:var(--forest-deep); color:#A9C0AE; padding:56px 0 28px;}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.12);}
.footer-brand{display:flex; align-items:center; gap:10px; font-family:'Quantico', sans-serif; color:var(--white); font-weight:700; font-size:1.2rem; letter-spacing:.02em;}
.footer-links{display:flex; gap:28px; flex-wrap:wrap;}
.footer-links a{font-size:.88rem;}
.footer-links a:hover{color:var(--lime);}
.footer-bottom{padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.78rem; font-family:var(--font-mono);}
.footer-legal{padding-top:10px; font-size:.72rem; line-height:1.6; color:#8CA492; max-width:70ch;}
.footer-social{display:flex; gap:18px;}
.footer-social a{display:inline-flex; align-items:center; gap:7px; color:#A9C0AE;}
.footer-social a:hover{color:var(--lime);}
.social-icon{width:15px; height:15px; flex:none;}

/* Contact details on the dark panel of the contact page. */
.contact-details{margin-top:36px; padding-top:28px; border-top:1px solid rgba(255,255,255,.14);}
.contact-details dt{
  font-family:var(--font-mono); font-size:.7rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--lime);
  margin-top:18px;
}
.contact-details dt:first-child{margin-top:0;}
.contact-details dd{margin:5px 0 0; color:#C9D6CB; font-size:.95rem;}
.contact-details dd a{color:#fff; border-bottom:1px solid rgba(168,240,128,.45);}
.contact-details dd a:hover{color:var(--lime); border-bottom-color:var(--lime);}
.contact-details address{font-style:normal;}

/* ---------- reveal-on-scroll / scrollytelling ---------- */
.reveal{
  opacity:0; transform:translateY(32px) scale(.96);
  transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
  will-change:transform, opacity;
}
.reveal.in-view{opacity:1; transform:translateY(0) scale(1);}

/* a second, continuous pass: whichever card/block is most centred in the
   viewport gets a gentle spotlight zoom, so scrolling reads as moving
   through the content rather than a static page */
.zoom-target{transition:transform .5s cubic-bezier(.16,.84,.44,1), box-shadow .5s ease;}
.zoom-target.in-focus{transform:scale(1.035); box-shadow:0 28px 56px -28px rgba(18,48,24,.28);}
.pillar-card.zoom-target.in-focus{transform:translateY(-4px) scale(1.035);}

/* staggered entrance for grouped items */
:is(.pillars,.grid-2,.grid-3,.grid-4) > *:nth-child(1){transition-delay:.05s;}
:is(.pillars,.grid-2,.grid-3,.grid-4) > *:nth-child(2){transition-delay:.15s;}
:is(.pillars,.grid-2,.grid-3,.grid-4) > *:nth-child(3){transition-delay:.25s;}
:is(.pillars,.grid-2,.grid-3,.grid-4) > *:nth-child(4){transition-delay:.35s;}

@media (prefers-reduced-motion:reduce){
  .reveal, .zoom-target{transition:none !important; transform:none !important; opacity:1 !important;}
}

/* ---------- subtle parallax on photo backgrounds ---------- */
/* Shifts the crop position within the (fixed-size) background box, rather
   than moving the box itself, so there's never a gap at the section edge. */
.photo-bg::before{transition:background-position .1s linear;}
@media (prefers-reduced-motion:reduce){
  .photo-bg::before{background-position:center !important;}
}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:64px 0 48px; border-bottom:1px solid var(--line);}
.page-hero h1{max-width:820px;}
.page-hero p.lede{font-size:1.15rem; max-width:680px;}

/* ---------- bullet list (brand-styled, diamond markers) ---------- */
.bullet-list{list-style:none; padding:0; margin:0 0 20px;}
.bullet-list li{
  position:relative; padding-left:24px; margin-bottom:9px;
  color:var(--ink-soft); font-size:1.02rem;
}
.bullet-list li::before{
  content:''; position:absolute; left:2px; top:.42em;
  width:8px; height:8px; background:var(--pine); transform:rotate(45deg);
}
.bullet-list--compact{margin:16px 0 0;}
.bullet-list--compact li{font-size:.88rem; padding-left:20px; margin-bottom:7px;}
.bullet-list--compact li::before{width:6px; height:6px; top:.45em;}

/* ---------- problem statement callout ---------- */
.problem-statement{
  border-left:4px solid var(--pine); background:var(--paper-dim);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:24px 28px; max-width:680px; margin-top:20px;
}
.problem-statement p{font-size:1.15rem; color:var(--forest); margin:0; font-weight:500;}

/* ---------- photo backgrounds (from the original deck's stock imagery) ---------- */
/* These images already carry the exact fade/watermark treatment used in the
   original proposition deck (they were extracted straight from it) — so they
   are shown at full strength here, not dimmed further. The deck only ever
   paired this treatment with light backgrounds, so these classes are for
   light sections only. */
.photo-bg{position:relative; overflow:hidden;}
.photo-bg::before{
  content:''; position:absolute; inset:-3% -3%;
  background-size:cover; background-position:center calc(50% + var(--parallax-y, 0px));
  z-index:0;
}
.photo-bg > .container{position:relative; z-index:1;}

.photo-bg--skyline::before{background-image:url('../assets/img/bg-skyline-trees.jpg');background-image:image-set(url('../assets/img/bg-skyline-trees.webp') type('image/webp'), url('../assets/img/bg-skyline-trees.jpg') type('image/jpeg'));}
.photo-bg--street::before{background-image:url('../assets/img/bg-street-skyscrapers.jpg');background-image:image-set(url('../assets/img/bg-street-skyscrapers.webp') type('image/webp'), url('../assets/img/bg-street-skyscrapers.jpg') type('image/jpeg'));}
.photo-bg--table::before{background-image:url('../assets/img/bg-studio-table.jpg');background-image:image-set(url('../assets/img/bg-studio-table.webp') type('image/webp'), url('../assets/img/bg-studio-table.jpg') type('image/jpeg'));}
.photo-bg--easel::before{background-image:url('../assets/img/bg-studio-easel.jpg');background-image:image-set(url('../assets/img/bg-studio-easel.webp') type('image/webp'), url('../assets/img/bg-studio-easel.jpg') type('image/jpeg'));}
.photo-bg--alley::before{background-image:url('../assets/img/bg-alley.jpg');background-image:image-set(url('../assets/img/bg-alley.webp') type('image/webp'), url('../assets/img/bg-alley.jpg') type('image/jpeg'));}
.photo-bg--office::before{background-image:url('../assets/img/bg-office-building.jpg');background-image:image-set(url('../assets/img/bg-office-building.webp') type('image/webp'), url('../assets/img/bg-office-building.jpg') type('image/jpeg'));}

/* inset photographic element (not a background wash — full-colour, framed) */
.inset-photo{border-radius:var(--radius); overflow:hidden; box-shadow:0 24px 48px -24px rgba(18,48,24,.35);}
.inset-photo img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- phone mockups (real product screenshots) ---------- */
/* The four screenshots were captured at slightly different aspect ratios
   (0.459 to 0.465), so sizing on width alone gave each column a mock of a
   different height — which pushed the icon and heading beneath it out of
   line across the row. Pinning the frame's ratio keeps the four aligned;
   the images crop by under 1% to fit. */
.phone-mockup{
  width:100%; max-width:170px; aspect-ratio:551/1190; margin:0 auto 18px;
  border-radius:24px; overflow:hidden;
  box-shadow:0 20px 40px -20px rgba(18,48,24,.4); border:1px solid var(--line);
}
.phone-mockup img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}

/* ---------- testimonial cards ---------- */
.testimonial-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; display:flex; flex-direction:column; gap:18px; margin-bottom:24px;
}
.testimonial-card:last-child{margin-bottom:0;}
.testimonial-logo{height:44px; width:auto; max-width:180px; object-fit:contain; object-position:left center;}
.testimonial-card blockquote{margin:0; font-size:1rem; color:var(--ink-soft); line-height:1.7;}
.testimonial-card blockquote p{margin:0 0 1em; color:var(--ink-soft);}
.testimonial-card blockquote p:last-child{margin-bottom:0;}
.testimonial-attr{font-family:var(--font-mono); font-size:.8rem; color:var(--forest); font-weight:600;}

/* Figures pulled out of the quote. The numbers that sell these stories sat
   mid-paragraph — the £16,000 was word 92 of 179 — so they are lifted to the
   top of the card in the same mono treatment the hero stats use. */
.testimonial-stats{display:flex; flex-wrap:wrap; gap:16px 40px;}
.testimonial-stat{display:flex; flex-direction:column; gap:3px;}
.testimonial-stat .num{
  font-family:var(--font-mono); font-size:1.6rem; font-weight:600;
  color:var(--forest); line-height:1.1;
}
.testimonial-stat .label{font-size:.8rem; color:var(--ink-soft); max-width:24ch;}
/* Williams has no figures: its proof is what changed, not what was saved. */
.testimonial-stat--words .num{font-size:1.02rem; line-height:1.3; letter-spacing:.01em;}

/* Specificity note: `.testimonial-card blockquote p` already sets colour and
   margin, so these need the extra class to win rather than sitting on
   `.pull-quote` alone. */
.testimonial-card .pull-quote{
  font-family:var(--font-display); font-weight:500;
  font-size:1.2rem; line-height:1.45; color:var(--forest);
  margin:0 0 18px; text-wrap:balance;
}

/* The rest of the quote, collapsed. <details> gives keyboard support for
   free and needs no JavaScript, and search engines index what is inside it,
   so nothing is lost by folding 600 words away. */
.testimonial-more > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:.76rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--forest);
  padding:4px 0;
}
.testimonial-more > summary::-webkit-details-marker{display:none;}
.testimonial-more > summary::before{
  content:''; flex:none;
  border-left:6px solid var(--pine);
  border-top:4.5px solid transparent; border-bottom:4.5px solid transparent;
  transition:transform .18s ease;
}
.testimonial-more[open] > summary::before{transform:rotate(90deg);}
.testimonial-more[open] > summary{margin-bottom:16px;}
.testimonial-more > summary:hover{color:var(--pine);}
.testimonial-more > summary:focus-visible{outline:2px solid var(--pine); outline-offset:3px; border-radius:2px;}
.testimonial-more:not([open]) .more-hide{display:none;}
.testimonial-more[open] .more-show{display:none;}
@media (prefers-reduced-motion:reduce){
  .testimonial-more > summary::before{transition:none;}
}

/* ---------- lozenge badges (Carbon / Cost / Compliance, large) ---------- */
.lozenge-stack{display:flex; flex-direction:column; gap:16px;}
.lozenge{
  display:flex; align-items:center; gap:16px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
  border-radius:100px; padding:16px 26px;
}
.lozenge .diamond{width:16px; height:16px;}
.lozenge .lozenge-text{font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--white);}

/* ---------- contact form: honeypot + submit status ---------- */
/* Off-screen rather than display:none — bots skip hidden fields, but happily
   fill one that is technically rendered. Kept out of the tab order and the
   accessibility tree by the markup. */
.hp-field{
  position:absolute; left:-9999px; width:1px; height:1px;
  opacity:0; pointer-events:none;
}
.form-status{font-size:.85rem; margin-top:12px; color:var(--ink-soft); min-height:1.2em;}
.form-status--pending{color:var(--ink-soft);}
.form-status--ok{color:var(--pine); font-weight:600;}
.form-status--error{color:var(--alert); font-weight:600;}
#contact-form button[disabled]{opacity:.6; cursor:progress;}

/* ---------- promo video (click to play) ---------- */
/* Placeholder and player are one element. A <video> with preload="metadata"
   paints its own first frame and downloads nothing else, so the thumbnail is
   always the actual video — no poster image to re-export when the edit
   changes — and handing over to the browser's controls on click doesn't move
   or resize anything. The frame's ratio is pinned so the page doesn't reflow
   while the metadata is still in flight; contain rather than cover, so a file
   that isn't 16:9 letterboxes against the dark frame instead of being cropped. */
.video-frame{
  position:relative; aspect-ratio:var(--video-aspect, 16/9);
  background:var(--forest-deep); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 24px 48px -24px rgba(18,48,24,.35);
}
.video-frame video{width:100%; height:100%; object-fit:contain; display:block;}

.video-play{
  position:absolute; inset:0; width:100%; border:0; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(18,48,24,.18), rgba(18,48,24,.5));
  transition:background .25s ease;
}
.video-play:hover{background:linear-gradient(180deg, rgba(18,48,24,.06), rgba(18,48,24,.4));}
.video-play:focus-visible{outline:3px solid var(--lime); outline-offset:-3px;}
.video-play .disc{
  width:84px; height:84px; border-radius:50%; background:var(--pine);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.55);
  transition:transform .25s ease, background .25s ease;
}
.video-play:hover .disc{transform:scale(1.08); background:var(--forest);}
/* Optical centring: the triangle's visual mass sits left of its bounding box. */
.video-play svg{width:34px; height:34px; fill:var(--white); margin-left:5px;}
.video-frame.is-playing .video-play{display:none;}

@media (prefers-reduced-motion: reduce){
  .video-play, .video-play .disc{transition:none;}
  .video-play:hover .disc{transform:none;}
}
@media (max-width:600px){
  .video-play .disc{width:64px; height:64px;}
  .video-play svg{width:26px; height:26px;}
}

/* ---------- process track (sales & onboarding journey) ---------- */
/* The rotated square is the logo's blade shape, and is already the site's
   bullet marker, pillar glyph and lozenge dot — so using it as the node here
   makes the journey read as part of the same family rather than a diagram
   bolted on. The node colours walk the logo's blades in order, forest through
   to lime, which means the payoff step is also the brightest one. */
.process{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  --process-bg:var(--paper);
}
.process-step{position:relative; padding:0 8px; text-align:center;}

/* The connector is drawn per-step rather than as one line behind the track,
   so it can stop dead at the first and last node instead of overshooting. */
.process-step::before{
  content:'';
  position:absolute; top:26px; left:0; right:0;
  height:2px; background:var(--line); z-index:0;
}
.process-step:first-child::before{left:50%;}
.process-step:last-child::before{right:50%;}

.process-node{
  position:relative; z-index:1;
  width:38px; height:38px; margin:7px auto 16px;
  transform:rotate(45deg); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  /* Punches the node out of the connector. The halo rotates with the node,
     so the line is cut at 45 degrees rather than squared off. */
  box-shadow:0 0 0 7px var(--process-bg);
}
/* The halo has to match whatever the section is sitting on, or it shows as a
   pale square around each node instead of just clearing the connector. */
.section--dim .process{--process-bg:var(--paper-dim);}
.process-num{
  transform:rotate(-45deg); /* counter-rotate, so the digits sit upright */
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  color:var(--white);
}
.process-node--1{background:var(--forest-deep);}
.process-node--2{background:var(--forest);}
.process-node--3{background:var(--pine);}
.process-node--4{background:var(--sage);}
.process-node--5{background:#4FB840;} /* between sage and leaf, to keep the walk even */
.process-node--6{background:var(--leaf);}
.process-node--7{background:var(--lime);}
.process-node--7 .process-num{color:var(--forest-deep);}

.process-step h3{font-size:.95rem; margin:0 0 6px; line-height:1.3;}
.process-step p{font-size:.78rem; margin:0; line-height:1.5;}

/* The phase bar is a sibling of the track, not a child of it: as a child it
   would take the grid's first cell, pushing step 07 onto a second row and
   stopping :first-child from matching step 01. It spans the same width as the
   track, and 3fr + 2fr + 2fr totals the track's 7 columns, so each label
   still covers exactly its own steps and its underline lands between nodes. */
.process-phases{display:grid; grid-template-columns:3fr 2fr 2fr; margin-bottom:14px;}
.process-phase{
  margin:0 8px; padding:0 0 10px;
  border-bottom:2px solid var(--line);
  font-family:var(--font-mono); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); text-align:center;
}

/* Seven columns stop being legible well before phone width, so the track
   turns vertical and the connector runs down through the node centres. */
@media (max-width:900px){
  .process{grid-template-columns:1fr;}
  .process-phases{display:none;}
  .process-step{
    display:grid; grid-template-columns:52px 1fr; gap:16px;
    text-align:left; padding:0 0 26px;
  }
  .process-step::before{
    top:0; bottom:0; left:25px; right:auto; width:2px; height:auto;
  }
  .process-step:first-child::before{top:26px; left:25px;}
  .process-step:last-child::before{bottom:auto; height:26px;}
  .process-node{margin:7px auto 0;}
  .process-step h3{font-size:1.05rem;}
  .process-step p{font-size:.9rem;}
}