/*

 * Adept Space: the house style.

 *

 * The same tokens, type and components as the Adept Observe site, so the two

 * read as one company. Written as plain CSS on purpose: the old site was a

 * drag-and-drop template and the whole point of this rebuild is that every

 * page is a file we own and can edit.

 *

 * Light by default, dark when the browser asks or when the toggle says so.

 */



:root {

  --bg: #f7f8f6;

  --card: #ffffff;

  --text: #1e2419;

  --muted: #656f60;

  --green: #6b9200;

  --green-text: #577700;

  --lime: #93c600;

  --ink: #374c00;

  --dark: #2c3d00;

  --tint: #eef5db;

  --amber: #c9821f;

  --line: #dde2d6;

  --hair: #e9ede2;

  --rule: #c9d0bd;

  --on-dark: #dee8c6;

  --on-dark-dim: #9cb26c;

  --shadow-lift: 0 6px 14px rgba(30, 36, 25, .10), 0 30px 70px rgba(30, 36, 25, .22);

  --ease: cubic-bezier(.22, 1, .36, 1);

  --wrap: 1340px;

}



@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) {

    --bg: #0d100a;

    --card: #171b12;

    --text: #e7ecdf;

    --muted: #98a290;

    --green: #9dcf1a;

    --green-text: #9dcf1a;

    --lime: #c3e963;

    --ink: #bcd382;

    --dark: #1a2209;

    --tint: #1c2214;

    --amber: #d99a3d;

    --line: #2c3325;

    --hair: #21271a;

    --rule: #39412d;

    --on-dark: #e4ecd0;

    --on-dark-dim: #a8bd77;

    --shadow-lift: 0 6px 14px rgba(0, 0, 0, .35), 0 30px 70px rgba(0, 0, 0, .5);

  }

}



:root[data-theme="dark"] {

  --bg: #0d100a;

  --card: #171b12;

  --text: #e7ecdf;

  --muted: #98a290;

  --green: #9dcf1a;

  --green-text: #9dcf1a;

  --lime: #c3e963;

  --ink: #bcd382;

  --dark: #1a2209;

  --tint: #1c2214;

  --amber: #d99a3d;

  --line: #2c3325;

  --hair: #21271a;

  --rule: #39412d;

  --on-dark: #e4ecd0;

  --on-dark-dim: #a8bd77;

  --shadow-lift: 0 6px 14px rgba(0, 0, 0, .35), 0 30px 70px rgba(0, 0, 0, .5);

}



* { box-sizing: border-box; }



body {

  margin: 0;

  background: var(--bg);

  color: var(--text);

  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-size: 17px;

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

}



img { max-width: 100%; display: block; }

a { color: var(--green-text); }



.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }



/* ---------------------------------------------------------------- header */



.nav {

  position: sticky; top: 0; z-index: 50;

  background: var(--dark);

  color: var(--on-dark);

}

.nav-inner { display: flex; align-items: center; gap: 22px; height: 64px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex-shrink: 0; }

.brand img { width: 34px; height: 34px; border-radius: 7px; }

.brand b { font-size: 17px; letter-spacing: .2px; }

.brand span { color: var(--on-dark-dim); font-size: 13.5px; padding-left: 11px; border-left: 1px solid rgba(255, 255, 255, .18); }

.nav-links { display: flex; gap: 20px; margin-left: auto; align-items: center; }

.nav-links a {

  color: var(--on-dark); text-decoration: none; font-size: 14.5px; padding: 6px 0;

  border-bottom: 2px solid transparent; white-space: nowrap;

}

.nav-links a:hover { border-bottom-color: var(--lime); }

.nav-links a[aria-current="page"] { border-bottom-color: var(--lime); font-weight: 600; }

.nav-cta {

  background: var(--lime); color: #24310a !important; border-radius: 8px;

  padding: 8px 15px !important; font-weight: 700; border-bottom: none !important;

}

.nav-cta:hover { filter: brightness(1.06); }

.nav-toggle, .theme-toggle {

  background: none; border: 1px solid rgba(255, 255, 255, .22); color: var(--on-dark);

  border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 14px; cursor: pointer;

}

.nav-toggle { display: none; margin-left: auto; }



@media (max-width: 560px) {

  /* The tagline would not shrink, so it pushed the header wider than the phone

     and the whole page scrolled sideways. The brand still reads without it. */

  .brand span { display: none; }

}



@media (max-width: 860px) {

  .nav-toggle { display: block; }

  .brand { min-width: 0; }

  .brand b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .nav-links {

    display: none; position: absolute; top: 64px; left: 0; right: 0;

    flex-direction: column; align-items: stretch; gap: 0;

    background: var(--dark); padding: 6px 20px 16px; margin-left: 0;

  }

  .nav-links.open { display: flex; }

  .nav-links a { padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }

  .nav-cta { text-align: center; margin-top: 10px; }

}



/* ------------------------------------------------------------------ hero */



.hero { background: linear-gradient(105deg, var(--green) 0%, var(--dark) 78%); color: #fff; }

.hero-inner { padding: 74px 0 78px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }

.hero h1 { font-size: clamp(34px, 5.2vw, 58px); line-height: 1.04; margin: 12px 0 18px; letter-spacing: -.5px; }

.hero p { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .92); margin: 0 0 26px; max-width: 48ch; }

.eyebrow {

  font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;

  color: var(--lime); margin: 0;

}

.hero-aside {

  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);

  border-radius: 14px; padding: 22px 24px; backdrop-filter: blur(3px);

}

.hero-aside h2 { font-size: 15px; margin: 0 0 10px; color: #fff; }

.hero-aside p { font-size: 15px; margin: 0 0 8px; color: rgba(255, 255, 255, .9); }



@media (max-width: 860px) {

  .hero-inner { grid-template-columns: 1fr; padding: 50px 0 54px; gap: 28px; }

}



/* --------------------------------------------------------------- buttons */



.btns { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.btn {

  display: inline-block; border-radius: 9px; padding: 13px 22px; font-size: 15.5px; font-weight: 700;

  text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .15s var(--ease);

}

.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--lime); color: #24310a; }

.btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .34); }

.btn-solid { background: var(--ink); color: #fff; }

/* Green, and obviously so. A secondary button is still this company's button,

   not a white box with a grey edge. It sits one shade lighter than .btn-solid

   so the two can stand side by side and still have an order. */

.btn-line { background: var(--green); color: #fff; border-color: var(--green); }

.btn-line:hover { background: var(--ink); border-color: var(--ink); }

/* In dark mode --green is a bright lime, so the label goes dark to stay legible. */

:root[data-theme="dark"] .btn-line { color: #12180a; }

@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) .btn-line { color: #12180a; }

}

.btn-sm { padding: 9px 16px; font-size: 14px; }



/* -------------------------------------------------------------- sections */



section { padding: 64px 0; }

section.tight { padding: 44px 0; }

.band { background: var(--card); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }

h2.sec { font-size: clamp(25px, 3.4vw, 34px); line-height: 1.15; margin: 0 0 8px; letter-spacing: -.3px; }

.lede { font-size: 17.5px; color: var(--muted); margin: 0 0 30px; max-width: 68ch; }

.rule { width: 92px; height: 4px; background: var(--lime); border-radius: 2px; margin: 0 0 22px; }



.grid { display: grid; gap: 18px; }

.g2 { grid-template-columns: repeat(2, 1fr); }

.g3 { grid-template-columns: repeat(3, 1fr); }

.g4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }



.card {

  background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 24px 24px 26px;

}

.card h3 { font-size: 19px; margin: 0 0 8px; color: var(--green-text); }

.card p { margin: 0 0 12px; font-size: 15.5px; color: var(--muted); line-height: 1.62; }

.card p:last-child, .card ul:last-child { margin-bottom: 0; }

/* Any element, not just an anchor: inside a card that is itself a link, the

   "read more" is a span, and it still has to look like the thing you click. */

.card .more { font-size: 14.5px; font-weight: 700; text-decoration: none; color: var(--green-text); display: inline-block; }

.card .more::after { content: "\2002\2192"; transition: transform .15s var(--ease); display: inline-block; }

a.card:hover .more::after { transform: translateX(3px); }



/* A card that is itself a link, for the service tiles. */

a.card { text-decoration: none; color: inherit; display: block; transition: border-color .15s, transform .15s var(--ease); }

a.card:hover { border-color: var(--green); transform: translateY(-2px); }



ul.ticks { list-style: none; padding: 0; margin: 0; }

ul.ticks li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: 15.5px; }

ul.ticks li::before {

  content: ""; position: absolute; left: 3px; top: .55em;

  width: 9px; height: 9px; border-radius: 2px; background: var(--lime);

}



/* ----------------------------------------------------------------- stats */



.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--rule); border-radius: 13px; overflow: hidden; }

.stat { background: var(--card); padding: 22px 18px; text-align: center; }

.stat b { display: block; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.1; color: var(--green-text); letter-spacing: -.5px; }

.stat span { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-top: 6px; }

@media (max-width: 900px) {

  .stats { grid-template-columns: repeat(2, 1fr); }

  /* Five figures in a two-column grid leaves a dead cell; the last one takes

     the whole row instead. */

  .stat:last-child:nth-child(odd) { grid-column: span 2; }

}



.finding { border-left: 3px solid var(--amber); padding: 4px 0 4px 16px; margin-bottom: 20px; }

.finding b { display: block; font-size: 23px; color: var(--text); }

.finding span { font-size: 15px; color: var(--muted); }



/* ------------------------------------------------------------------- CTA */



.cta { background: var(--dark); color: #fff; }

.cta h2 { font-size: clamp(25px, 3.6vw, 36px); margin: 0 0 10px; line-height: 1.15; }

.cta p { color: var(--on-dark-dim); margin: 0 0 24px; font-size: 17px; max-width: 60ch; }



/* ---------------------------------------------------------------- footer */



footer { background: var(--card); border-top: 1px solid var(--hair); padding: 40px 0 30px; font-size: 14.5px; }

.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 26px; }

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

footer h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 0 0 12px; }

footer a { color: var(--text); text-decoration: none; display: block; margin-bottom: 8px; }

footer a:hover { color: var(--green-text); }

.foot-note { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 13.5px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; }



/* ----------------------------------------------------------- page header */



.page-head { background: var(--dark); color: #fff; padding: 54px 0 58px; }

.page-head h1 { font-size: clamp(30px, 4.6vw, 46px); margin: 10px 0 14px; line-height: 1.08; letter-spacing: -.4px; }

.page-head p { font-size: 17.5px; color: var(--on-dark); max-width: 62ch; margin: 0; }



/* Nothing is hidden without JavaScript: the motion classes only arm once the

   page has said it is running. */

html.js .reveal { opacity: 0; transform: translateY(14px); }

html.js .reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }

@media (prefers-reduced-motion: reduce) {

  html.js .reveal { opacity: 1; transform: none; }

  .btn:hover, a.card:hover { transform: none; }

}



/* =====================================================================

   Icons, motion and the richer components

   ===================================================================== */



.icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }

.icon-lg { width: 26px; height: 26px; }

.chip {

  width: 46px; height: 46px; border-radius: 12px; background: var(--tint); color: var(--green-text);

  display: grid; place-items: center; margin-bottom: 15px;

  transition: transform .2s var(--ease), background .2s;

}

a.card:hover .chip, .card:hover .chip { transform: translateY(-2px) rotate(-3deg); }

.chip-dark { background: rgba(255, 255, 255, .12); color: var(--lime); }



/* ---------------------------------------------------------- hero artwork */



.hero-art { width: 100%; height: auto; max-width: 430px; margin-left: auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .3)); }

.hero-art .wall { stroke: rgba(255, 255, 255, .72); fill: none; stroke-width: 1.4; }

.hero-art .room { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .3); stroke-width: .8; }

.hero-art .desk { fill: rgba(255, 255, 255, .34); }

/* Rooms and desks light up in turn: the survey passing through the floor. */

.hero-art .live { fill: var(--lime); opacity: 0; }

html.js .hero-art .live { animation: pulse 7s var(--ease) infinite; }

@keyframes pulse {

  0%, 8% { opacity: 0; }

  16%, 44% { opacity: .85; }

  56%, 100% { opacity: 0; }

}

.hero-art .scan { fill: rgba(147, 198, 0, .16); }

html.js .hero-art .scan { animation: scan 7s linear infinite; }

@keyframes scan {

  0% { transform: translateY(0); opacity: 0; }

  10% { opacity: 1; }

  90% { opacity: 1; }

  100% { transform: translateY(128px); opacity: 0; }

}

@media (prefers-reduced-motion: reduce) {

  html.js .hero-art .live { animation: none; opacity: .8; }

  html.js .hero-art .scan { animation: none; opacity: 0; }

}

@media (max-width: 860px) { .hero-art { max-width: 320px; margin: 0 auto; } }



/* --------------------------------------------------------------- numbers */



.stat b { font-variant-numeric: tabular-nums; }



/* ----------------------------------------------------------------- steps */



.steps { counter-reset: step; display: grid; gap: 0; }

.step {

  position: relative; padding: 0 0 30px 62px; counter-increment: step;

}

.step::before {

  content: counter(step, decimal-leading-zero);

  position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%;

  display: grid; place-items: center; font-size: 13px; font-weight: 800; letter-spacing: .4px;

  background: var(--tint); color: var(--green-text); border: 1px solid var(--line);

}

/* The line that joins them, stopping at the last one. */

.step::after { content: ""; position: absolute; left: 21px; top: 46px; bottom: 6px; width: 1px; background: var(--line); }

.step:last-child { padding-bottom: 0; }

.step:last-child::after { display: none; }

.step h3 { margin: 8px 0 6px; font-size: 18.5px; }

.step p { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 62ch; }

.step .when { font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--amber); }



/* ------------------------------------------------------------------- FAQ */



.faq { border-top: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {

  cursor: pointer; padding: 17px 40px 17px 0; position: relative; font-size: 17px; font-weight: 600;

  list-style: none; color: var(--text);

}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {

  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);

  font-size: 22px; font-weight: 400; color: var(--green-text); transition: transform .2s var(--ease);

}

.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq summary:hover { color: var(--green-text); }

.faq .answer { padding: 0 44px 20px 0; color: var(--muted); font-size: 16px; max-width: 82ch; }

.faq .answer p { margin: 0 0 12px; }

.faq .answer p:last-child { margin: 0; }



/* --------------------------------------------------------------- marquee */



.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

.marquee-track { display: flex; gap: 12px; width: max-content; }

html.js .marquee-track { animation: slide 46s linear infinite; }

@keyframes slide { to { transform: translateX(-50%); } }

.marquee:hover .marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) { html.js .marquee-track { animation: none; } }

.sector {

  border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; font-size: 14.5px;

  white-space: nowrap; background: var(--card); color: var(--muted);

}



/* ----------------------------------------------------------- feature row */



.feature { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }

.feature .chip { margin-bottom: 0; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; }

.feature h3 { margin: 4px 0 4px; font-size: 17px; }

.feature p { margin: 0; color: var(--muted); font-size: 15.5px; }



/* ----------------------------------------------------------------- quote */



.quote {

  border-left: 4px solid var(--lime); padding: 6px 0 6px 22px; margin: 0;

  font-size: clamp(19px, 2.4vw, 25px); line-height: 1.42; letter-spacing: -.2px;

}

.quote cite { display: block; margin-top: 12px; font-size: 14.5px; font-style: normal; color: var(--muted); }



/* ------------------------------------------------------------ small bits */



.pill {

  display: inline-block; border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 700;

  letter-spacing: .4px; background: var(--tint); color: var(--green-text); margin-bottom: 14px;

}

.pill-dark { background: rgba(255, 255, 255, .14); color: var(--lime); }

.note { font-size: 14px; color: var(--muted); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }

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



/* A staggered reveal: children arrive one after another, not all at once. */

html.js .stagger > * { opacity: 0; transform: translateY(12px); }

html.js .stagger.in > * { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }

html.js .stagger.in > *:nth-child(2) { transition-delay: .07s; }

html.js .stagger.in > *:nth-child(3) { transition-delay: .14s; }

html.js .stagger.in > *:nth-child(4) { transition-delay: .21s; }

html.js .stagger.in > *:nth-child(5) { transition-delay: .28s; }

html.js .stagger.in > *:nth-child(6) { transition-delay: .35s; }

html.js .stagger.in > *:nth-child(7) { transition-delay: .42s; }

@media (prefers-reduced-motion: reduce) {

  html.js .stagger > * { opacity: 1; transform: none; }

}



/* Everything settled: ?still on any page. */

html.still .reveal, html.still .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }

html.still .hero-art .live { animation: none !important; opacity: .85; }

html.still .hero-art .scan, html.still .marquee-track { animation: none !important; }

.hero-art .corridor { fill: rgba(255, 255, 255, .05); }

.hero-art .chair { fill: rgba(255, 255, 255, .22); }



/* ------------------------------------------------- real work, shown large */



.shot {

  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);

  background: var(--card); box-shadow: var(--shadow-lift); position: relative;

}

.shot img { width: 100%; height: auto; display: block; }

/* Under the image, not over it. A gradient caption works on a dark heatmap and

   turns to a grey smear on a white map, and these images are both. */

.shot figcaption {

  padding: 10px 14px 11px; border-top: 1px solid var(--hair);

  color: var(--muted); font-size: 12.5px; letter-spacing: .2px; background: var(--card);

}

.hero .shot figcaption { color: var(--muted); }

.hero .shot { border-color: rgba(255, 255, 255, .28); }



/* A service told as a full row: what it is, next to what it looks like. */

.row-block { display: grid; grid-template-columns: 1fr 1.15fr; gap: 46px; align-items: center; padding: 34px 0; }

.row-block.flip > :first-child { order: 2; }

@media (max-width: 900px) {

  .row-block { grid-template-columns: 1fr; gap: 24px; padding: 20px 0; }

  .row-block.flip > :first-child { order: 0; }

}

.row-block h3 { font-size: clamp(22px, 2.8vw, 28px); margin: 12px 0 10px; letter-spacing: -.3px; }

.row-block p { color: var(--muted); font-size: 16.5px; margin: 0 0 14px; max-width: 54ch; }

.row-block .ticks { margin-bottom: 18px; }

.hr-soft { height: 1px; background: var(--hair); border: 0; margin: 0; }

.pill { display: inline-flex; align-items: center; gap: 7px; }

.icon-inline { width: 15px; height: 15px; stroke-width: 1.9; }



/* -------------------------------------------------------- contact form */



.form { display: grid; gap: 14px; }

.form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 620px) { .form .pair { grid-template-columns: 1fr; } }

.field label {

  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .5px;

  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;

}

.field input, .field select, .field textarea {

  width: 100%; padding: 12px 13px; font: inherit; font-size: 15.5px;

  border: 1px solid var(--line); border-radius: 9px;

  background: var(--bg); color: var(--text);

}

.field textarea { min-height: 142px; resize: vertical; }

.field input:focus, .field select:focus, .field textarea:focus {

  outline: none; border-color: var(--green);

  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);

}

/* The honeypot: no person ever sees it, and a naive bot fills it in. */

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 13.5px; color: var(--muted); margin: 0; }

.form-msg { border-radius: 9px; padding: 13px 15px; font-size: 15px; margin: 0; }

.form-msg.ok { background: var(--tint); color: var(--green-text); border: 1px solid var(--line); }

.form-msg.bad { background: color-mix(in srgb, var(--amber) 14%, var(--card)); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--card)); }

.people { display: grid; gap: 14px; }

.person { display: flex; gap: 13px; align-items: flex-start; }

.person .chip { margin-bottom: 0; flex-shrink: 0; }

.person b { display: block; font-size: 16px; }

.person a { text-decoration: none; font-weight: 600; }

.person span { display: block; font-size: 13.5px; color: var(--muted); }


/* The hidden four-up page: every card the same shape, whatever the copy does. */
.four-up { align-items: stretch; }
a.card.four { display: flex; flex-direction: column; }

a.card.four h3 { font-size: 18px; margin-bottom: 8px; }
a.card.four p { font-size: 15px; }
a.card.four ul.ticks { margin-bottom: 14px; }
a.card.four ul.ticks li { font-size: 14.5px; color: var(--muted); }
a.card.four .more { margin-top: auto; }

a.card.four .shot img { aspect-ratio: 3 / 2; background: #fff; }
a.card.four .shot img.fit-cover { object-fit: cover; object-position: top center; }
a.card.four .shot img.fit-contain { object-fit: contain; padding: 3px; }

/* Five across on a wide screen, folding down sensibly. */
.g5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1180px) { .g5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .g5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .g5 { grid-template-columns: 1fr; } }

/* A hero with no artwork: the cards underneath are the artwork. */
.hero-plain { padding: 62px 0 96px; }
.hero-plain h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.04; margin: 12px 0 16px; letter-spacing: -.5px; max-width: 18ch; }
.hero-plain p { font-size: 18.5px; max-width: 70ch; }
/* The cards lift into the hero so the two read as one block. */
.pull-up { margin-top: -62px; padding-top: 0; padding-bottom: 54px; }
.pull-up .card { box-shadow: var(--shadow-lift); }
@media (max-width: 820px) { .hero-plain { padding-bottom: 70px; } .pull-up { margin-top: -46px; } }

/* Five cards need more room than a reading column. The rest of the page keeps
   its narrower measure, because prose does not want to be 1,300px wide. */
@media (min-width: 1181px) { a.card.four p, a.card.four ul.ticks li { font-size: 15px; } }

/* The hook. Big enough to be the second thing read, quiet enough not to fight
   the headline it sits under. */
/* .hero p beats a lone .strapline on specificity, which is why this needs to
   be written as a descendant rather than on its own. */
.hero .strapline {
  font-size: clamp(21px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.3px;
  color: var(--lime); margin: 2px 0 16px; max-width: none;
}

/* The hero, reworked.
   The headline was running to three lines and the green band was so deep that
   it cut across the cards below at an arbitrary point. Now: a shorter band, a
   headline sized to break once, and only a shallow overlap so the cards sit ON
   the seam rather than being sliced by it. */
.hero-inner { padding: 56px 0 74px; }
.hero h1 { font-size: clamp(32px, 3.9vw, 48px); max-width: 15ch; margin: 10px 0 10px; }
.hero .strapline { font-size: clamp(19px, 2.1vw, 25px); margin: 0 0 14px; }
.hero p { font-size: 17.5px; max-width: 44ch; margin-bottom: 22px; }
.pull-up { margin-top: -34px; padding-bottom: 52px; }
@media (max-width: 820px) {
  .hero-inner { padding: 44px 0 56px; }
  .hero h1 { max-width: none; }
  .pull-up { margin-top: -26px; }
}

/* Two lines, not three: the headline needs a wider column than half the page,
   so the text side takes more of the grid and the type steps down a notch. */
.hero-inner { grid-template-columns: 1.4fr 1fr; }
.hero h1 { font-size: clamp(31px, 3.4vw, 42px); max-width: 24ch; }
.hero p { max-width: 50ch; }

/* The green deliberately runs behind the top of the cards. Deeper than a
   sliver so it reads as one band with cards sitting on it, and the hero gives
   back the height so the page does not grow. */
.hero-inner { padding: 52px 0 108px; }
.pull-up { margin-top: -78px; padding-bottom: 54px; }
@media (max-width: 820px) {
  .hero-inner { padding: 42px 0 84px; }
  .pull-up { margin-top: -62px; }
}

/* Spacing, settled: less dead green under the buttons, and the band stops
   where the card images start rather than slicing through them. */
.hero-inner { padding: 52px 0 88px; }
.pull-up { margin-top: -56px; padding-bottom: 56px; }
a.card.four { padding-top: 18px; }
@media (max-width: 820px) {
  .hero-inner { padding: 42px 0 72px; }
  .pull-up { margin-top: -48px; }
}

/* This must come last. The wider hero grid above was written after the mobile
   rule and so applied at every width, squeezing the map into a sliver on a
   phone with its caption stacked one word per line. */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 26px; }
  .hero .shot { max-width: 420px; }
}

/* The landing page, tightened.
   Half the green above the label, the cards higher, and the band running
   further down behind them. The map sizing itself lives in one block further
   down, rather than being set here and corrected there. */
.hero-inner { padding: 26px 0 104px; align-items: stretch; }
.hero-inner > div:first-child { display: flex; flex-direction: column; justify-content: center; }
.hero .shot { display: flex; flex-direction: column; }
.pull-up { margin-top: -96px; padding-bottom: 58px; }
@media (max-width: 860px) {
  .hero-inner { padding: 22px 0 76px; }
  .pull-up { margin-top: -58px; }
}

/* The hook that closes the landing page. */
.hook { background: var(--card); border-top: 1px solid var(--hair); text-align: center; padding: 66px 0 74px; }
.hook-line {
  font-size: clamp(27px, 4.2vw, 46px); font-weight: 800; letter-spacing: -.8px;
  line-height: 1.1; margin: 0; color: var(--text);
}
.hook-lime { color: var(--green-text); }
.hook-sub { font-size: 17.5px; color: var(--muted); max-width: 62ch; margin: 18px auto 26px; }
.hook .btns { justify-content: center; }

/* The hero map. It is a map, so the whole world has to be in it: an earlier
   version stretched the figure to the full height of the hero and let
   object-fit: cover take up the slack, which on a wide screen cropped Australia
   and the Pacific clean off the right hand side.
   So the image keeps its own proportions and the figure is only as tall as the
   map needs. To stop that leaving it as a stamp in the corner, the hero now
   runs on the same width as the card row beneath it, which it never matched,
   and the map takes the larger share of the row. */
/* .hero-inner is the .wrap, and every padding shorthand above sets its
   horizontal padding to 0, which quietly cancelled the 20px gutter .wrap
   gives everything else. The hero text therefore sat outside the page margin,
   about 20px left of the cards under it, and on a phone it ran right up to the
   edge of the screen. A longhand, after all of them, so a future padding
   shorthand cannot take the gutter away again. */
.hero-inner { padding-inline: 20px; }
.hero-inner { grid-template-columns: 1fr 1.5fr; gap: 56px; }
.hero-inner > .shot { height: auto; align-self: center; }
.hero .shot img { width: 100%; height: auto; flex: 0 0 auto; min-height: 0; object-fit: contain; }
@media (max-width: 1100px) { .hero-inner { grid-template-columns: 1fr 1.2fr; gap: 44px; } }
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero .shot { max-width: 520px; margin-inline: auto; }
}

/* A squarer frame: one of these images is a portrait floor plan, and in a
   3:2 window it either shrank to a stamp or cropped into abstraction. */
a.card.four .shot img { aspect-ratio: 4 / 3; }
a.card.four .shot img.fit-contain { padding: 2px; }

/* The hero, given more presence.
   Nothing here moves or replaces anything: it is type scale, weight and button
   treatment only. The headline had been stepped down twice by earlier passes
   and had ended up quieter than the cards beneath it, which is the wrong way
   round for the first thing on the page.

   Deliberately no :hover transform below. The reduced-motion block above turns
   those off, and a more specific rule here would silently switch them back on
   for people who asked for no motion. Shadow only, which is safe. */
.hero .eyebrow { font-size: 12.5px; letter-spacing: 2.1px; }
.hero h1 { font-size: clamp(33px, 3.4vw, 45px); line-height: 1.0; letter-spacing: -1px; margin: 14px 0 10px; }
.hero .strapline { font-size: clamp(21px, 2.5vw, 31px); font-weight: 800; letter-spacing: -.5px; margin: 0 0 18px; }
.hero p { font-size: 18.5px; line-height: 1.62; color: rgba(255, 255, 255, .95); margin-bottom: 30px; }

.hero .btns { gap: 14px; }
.hero .btn {
  padding: 16px 28px; font-size: 16.5px; border-radius: 11px;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.hero .btn-primary { box-shadow: 0 10px 26px rgba(0, 0, 0, .26); }
.hero .btn-primary:hover { box-shadow: 0 15px 34px rgba(0, 0, 0, .34); }
.hero .btn-ghost { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .46); }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .22); }

/* Every page after the landing page reads the same way: a title with a piece
   of real work beside it, then the detail underneath. Same gradient as the
   hero, so the top of the site feels like one thing rather than six. */
.page-head { background: linear-gradient(105deg, var(--green) 0%, var(--dark) 78%); }
.page-head.with-art .wrap {
  display: grid; grid-template-columns: 1.06fr .94fr; gap: 46px; align-items: center;
}
.page-head.with-art .shot { margin: 0; }
.page-head.with-art .shot img { width: 100%; height: auto; display: block; }
.page-head.with-art .shot figcaption { color: var(--muted); }
@media (max-width: 900px) {
  .page-head.with-art .wrap { grid-template-columns: 1fr; gap: 26px; }
  .page-head.with-art .shot { max-width: 520px; margin-inline: auto; }
}

/* Cards in a grid should fill their cell, so a row of them has one baseline at
   the bottom instead of three ragged ones. */
.grid.equal > * { display: flex; flex-direction: column; }
.grid.equal > * > p:last-child { margin-bottom: 0; }

/* The page-head headline sits in a narrower column once there is artwork
   beside it, so it steps down a size. At the full 46px "portfolio" dropped
   onto a third line on its own. */
.page-head.with-art h1 { font-size: clamp(29px, 3.3vw, 40px); }

/* The Observe showcase on the utilisation page. Adept Observe is the thing
   being sold, so it gets the hero's own treatment rather than a card halfway
   down a white page: the same gradient, light type, and the report itself at
   the size you can actually read it. */
.showcase { background: linear-gradient(105deg, var(--green) 0%, var(--dark) 78%); color: #fff; padding: 64px 0 70px; }
/* Same width as the rest of this page, not the landing page's wider band:
   a section that starts 70px left of the one above it reads as a mistake. */
.showcase-top { display: grid; grid-template-columns: 1fr 1.25fr; gap: 50px; align-items: center; }
.showcase h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.02; letter-spacing: -1px; margin: 10px 0 14px; }
.showcase .lede { font-size: 18.5px; line-height: 1.6; color: rgba(255, 255, 255, .94); margin: 0 0 24px; }
.showcase .note { color: var(--on-dark-dim); }
.showcase .shot { margin: 0; }
.showcase .shot img { width: 100%; height: auto; display: block; }
.showcase .shot figcaption { color: var(--muted); }

/* The four feature cards sit on the band, so they are a lighter version of the
   dark rather than white boxes punched out of it. */
.showcase-grid { margin-top: 44px; }
.showcase-grid .card {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #fff;
}
.showcase-grid .card h3 { color: var(--lime); }
.showcase-grid .card p { color: rgba(255, 255, 255, .88); }
.showcase-grid .card .icon-chip { background: rgba(255, 255, 255, .12); }
.showcase-grid .card .icon-chip svg { stroke: var(--lime); }

@media (max-width: 960px) {
  .showcase-top { grid-template-columns: 1fr; gap: 28px; }
  .showcase { padding: 48px 0 54px; }
}

/* One figure on its own, held to a readable width rather than stretched the
   full page. */
.one-up { max-width: 780px; margin: 0 auto; }

/* A button for something that genuinely is not ready. It looks like a button
   so the row still reads as a row, but it is a span with no href, it does not
   respond to the pointer, and it is announced as disabled. */
.btn-soon {
  cursor: default; opacity: .62; box-shadow: none;
  pointer-events: none; user-select: none;
}
.btn-soon:hover { transform: none; box-shadow: none; }

/* A caveat inside a step. `.step p` beats `.note` on specificity, so without
   this the qualifier ran straight on from the description as a fourth line of
   the same paragraph and read as part of the promise rather than a limit on
   it. */
.step .note {
  margin-top: 14px; font-size: 14.5px; line-height: 1.5;
  padding-left: 14px; border-left: 3px solid var(--rule);
}