/* ============================================================
   Lumen Resources — 009 / Building Owners
   Design tokens lifted directly from the Figma file:
   teal #00566A is the single accent; neutrals are flat and
   deliberately un-tinted, which is the design's own register.
   Type: Neue Haas Grotesk Text/Display Pro, falling back to
   Helvetica Neue (the face NHG revives — near-identical on macOS).
   ============================================================ */
:root {
  --teal:      #00566A;   /* the .fig also uses #00576A, 1/255 apart — normalised */
  --teal-hi:   #04485a;
  /* second brand teal — the mobile Get In Touch band uses this, not --teal */
  --teal-deep: #004B5C;
  /* pale mint band, used on 7 other pages */
  --mint:      #D7F0EE;
  --grey:      #ECECEC;
  --offwhite:  #F7F7F7;
  --card:      #EEEEEE;
  --card-line: #DCDCDC;
  --ink:       #000000;
  --white:     #FFFFFF;
  --rule:      #E3E3E3;

  --sans: "Neue Haas Grotesk Text Pro", "Neue Haas Grotesk Display Pro",
          "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* the molecule mark the design uses as its bullet ("LR_Favicon-04" in the
     .fig). Declared here because .ticks reads it through a custom property;
     leaving it undefined silently rendered every bullet as an empty box. */
  --sparkle-img: url('assets/sparkle.png');

  --page:   1440px;
  --gutter: 33px;
  --colgap: 24px;
  --gap:    70px;   /* the design's column gap, x22 */
  --pad:    70px;

  /* Desktop type scale read out of the .fig, not measured off the PDF.
     The PDF-derived values were systematically 1-2px large, which is why
     every section rendered ~8-12px too tall. */
  --fs-promo:  14px;
  --fs-nav:    18px;
  --fs-hero:   61px;   /* was 60 */
  --fs-eyebrow:20px;
  --fs-h2:     41px;   /* was 40 */
  --fs-h2-cta: 41px;   /* was 44 — the CTA heading is the same 41px */
  --fs-h3card: 30px;   /* was 32 */
  --fs-h3:     19px;   /* was 20 */
  --fs-body:   16px;   /* was 17 */
  --fs-small:  14px;   /* was 15 */
  --fs-fine:   10px;   /* was 12 */
  --lh-body:   23px;   /* the design's exact 16/23 */

  color-scheme: light;
}

/* This page reproduces a fixed brand identity, so it commits to a
   single visual world in both themes rather than inverting and
   drifting away from the approved design. */
:root[data-theme="dark"], :root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height:auto is load-bearing: every <img> carries its intrinsic width/height
   attributes, so without it an image constrained by max-width keeps its full
   attribute height and stretches. That is how the 1920x631 photo on 010 came
   out 1374x631. */
img { display: block; max-width: 100%; height: auto; }
/* set here rather than inline, so the mobile full-bleed rule can override it */
figure { margin: 0; }
a { color: inherit; }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.band--teal :where(a, button, input, textarea):focus-visible {
  outline-color: var(--white);
}

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- layout primitives ---------- */
.wrap {
  /* width:100% is required, not decorative: `margin-inline:auto` on a flex
     item cancels align-self:stretch, which made this shrink-wrap and
     self-centre inside the flex-column hero. */
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--colgap);
}
.band { padding-block: var(--pad); }
.band--grey     { background: var(--grey); }
.band--offwhite { background: var(--offwhite); }
.band--white    { background: var(--white); }
.band--teal     { background: var(--teal); color: var(--white); }
.band--mint     { background: var(--mint); }
.band--deep     { background: var(--teal-deep); color: var(--white); }
.band--deep .ulink, .band--teal .ulink { color: inherit; }
/* a larger lead paragraph, used above body copy on several pages */
.lede--lg { font-size: 24px; line-height: 29px; }

/* ---------- type ---------- */
h1, h2, h3 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.015em;
  /* deliberately NOT text-wrap:balance — the approved design has specific
     line breaks ("Why Choose DALI for Building / Management") and balancing
     re-breaks every heading differently. Fidelity wins here. */
}
h2.h2 { font-size: var(--fs-h2); line-height: 1.24; }  /* Figma 100% = intrinsic */
p { margin: 0; }
.lede { max-width: 34em; }

/* ---------- promo bar ---------- */
.promo {
  background: var(--teal);
  color: var(--white);
  font-size: var(--fs-promo);
  text-align: center;
  padding-block: 13px;
  letter-spacing: 0.005em;
}

/* ---------- hero + header ---------- */
.hero {
  position: relative;
  min-height: 569px;
  display: flex;
  flex-direction: column;
  /* The photograph is the ORIGINAL asset from the .fig, not a crop of the
     PDF export — the PDF has the headline and scrim burned into the pixels,
     which double-printed against the real HTML text.
     The scrim is reproduced here in CSS, measured off the design at ~0.60
     alpha top and bottom easing to ~0.52 through the middle. */
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,.60) 0%,
      rgba(0,0,0,.52) 50%,
      rgba(0,0,0,.60) 100%),
    var(--hero-img, url('assets/hero.jpg'));
  background-size: cover;
  background-position: var(--hero-pos, center);
  color: var(--white);
  /* The band is measured off the 1440 design. Left at a fixed height it keeps
     that height on a wider monitor while the width grows, so `cover` crops the
     photograph harder and harder vertically — at 1900px only 55% of the frame's
     height survived, which beheaded the subject of 002's hero. Holding the
     design's proportion instead means a wide screen gets a taller band, not a
     tighter crop. min-height still floors it below 1440. */
  aspect-ratio: 1440 / 569;
  /* width is load-bearing. aspect-ratio + min-height on a width:auto block
     transfers the min-height through the 1440/569 ratio, so the used width
     becomes ~1440px. That is the mobile overflow that shoved the hamburger
     off-screen. A definite width lets the ratio grow height on wide screens
     (why it was added) and leaves min-height to floor the band on a phone. */
  width: 100%;
  max-width: 100%;
}

.nav {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-block: 22px;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0; padding: 0;
  list-style: none;
  font-size: var(--fs-nav);
}
.nav__list a { text-decoration: none; }
.nav__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav__logo { justify-self: center; }
.nav__logo img {
  width: 172px;
  /* the header lockup is the white version of the teal footer mark */
  filter: brightness(0) invert(1);
}
.nav__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  font-size: var(--fs-nav);
}
.nav__icon {
  background: none; border: 0; padding: 0;
  color: inherit; cursor: pointer;
  display: grid; place-items: center;
}
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 96px; height: 42px;
  padding-inline: 20px;
  background: var(--white);
  color: var(--ink);
  border-radius: 7px;
  font-size: 17px;
  text-decoration: none;
}
.pill:hover { background: #EFEFEF; }
/* ------------------------------------------------------------
   Nav dropdowns. The Figma nav has a Services menu (a review note
   references "the services drop down"), so it is built here rather
   than flattened. CSS-only: opens on hover and on keyboard focus.
   ------------------------------------------------------------ */
.nav__item { position: relative; }
.nav__menu {
  position: absolute;
  top: 100%; left: -14px;
  z-index: 20;
  min-width: 232px;
  margin: 0; padding: 8px 0;
  list-style: none;
  background: var(--white);
  color: var(--ink);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.nav__menu--right { left: auto; right: -14px; }
.nav__item--menu:hover > .nav__menu,
.nav__item--menu:focus-within > .nav__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__menu a {
  display: block;
  padding: 9px 18px;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.nav__menu a:hover, .nav__menu a:focus-visible { background: var(--grey); }
/* a menu parent keeps the pointer inside the gap between label and panel */
.nav__item--menu > a { position: relative; padding-bottom: 6px; }

.nav__burger { display: none; }

/* ------------------------------------------------------------
   Hero variants. The photo hero is the default; 014 / Contact Us
   has no photograph, so it is a documented variant rather than a
   one-off: flat band, dark text, teal logo and a solid pill.
   ------------------------------------------------------------ */
.hero--tall { min-height: 755px; aspect-ratio: 1440 / 755; }   /* 001 Homepage hero is 800 incl. promo */
.hero--flat {
  min-height: 0;
  aspect-ratio: auto;                /* a text hero has no photograph to protect */
  background-image: none;
  background: var(--grey);
  color: var(--ink);
}
.hero--flat .nav__logo img { filter: none; }
.hero--flat .pill { background: var(--teal); color: var(--white); }
.hero--flat .pill:hover { background: var(--teal-hi); }
.hero--flat .hero__eyebrow { color: #6F6F6F; }
.hero--flat .hero__body { padding-block: 24px 34px; }

.hero__body {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-bottom: 48px;
}
/* homepage-only: pairs the headline with a CTA on the same baseline */
.hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.hero__eyebrow {
  font-size: var(--fs-eyebrow);
  margin-bottom: 6px;
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.022em;
  max-width: 20em;
}

/* ---------- a labelled detail list (contact blocks) ---------- */
.details { display: grid; gap: 3px; }
.details dt { font-size: 14px; opacity: .82; margin-top: 16px; }
.details dt:first-child { margin-top: 0; }
.details dd { margin: 0; font-size: var(--fs-body); }
.details a { text-decoration: none; }
.details a:hover { text-decoration: underline; }

/* a smaller section heading, e.g. above a form. 24/23 in the .fig on all three
   pages that use it — an explicit pixel line height, not the 100% the headings
   carry, so it is set exactly rather than as a ratio. */
.h3-sm { font-size: 24px; line-height: 23px; font-weight: 500; margin: 0 0 22px; }

/* ---------- bullet lists with the design's sparkle marker ---------- */
/* the design's rows are 23px tall on a 31px pitch, with the text at x=35 */
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ticks li {
  display: grid;
  grid-template-columns: 23px 1fr;
  column-gap: 12px;
  align-items: start;
}
.ticks li::before {
  content: "";
  width: 23px; height: 20px;
  margin-top: 2px;
  background-image: var(--sparkle-img);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ---------- generic split section (text | image) ---------- */
/* ------------------------------------------------------------
   THE split. 523 / 70 / 781 sums to the 1374 content width and
   is the design's modal two-column ratio (13 sections, plus 3
   more within 3px). Section padding is 70px on 61 of 77
   sections. Ratios like 565/713 and 523/719 elsewhere in the
   file are drift of <=45px and normalise to this — one
   component, not one per page.
   ------------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 523fr 781fr;
  column-gap: var(--gap);
  row-gap: 44px;
  align-items: start;
}
.split__text  { display: grid; gap: 26px; align-content: start; }
.split__media { min-width: 0; }
.split__media img { width: 100%; height: auto; }
/* responsive 16:9 video embed, sized like the photos it sits beside */
.video-embed { width: 100%; aspect-ratio: 16 / 9; }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
/* click-to-play poster. The button carries the full-res 1280x720 still so it
   isn't the 480x360 one the iframe would have chosen for this box. */
.video-embed__play {
  display: block; position: relative;
  width: 100%; height: 100%; padding: 0;
  border: 0; background: #000; cursor: pointer;
}
/* Two classes deep on purpose. The mobile full-bleed rule sets
   `.split__media img { aspect-ratio: 393/331 }` for photos and ties with a
   single-class selector here, winning on source order — which stretched the
   poster 105px past its 16:9 box. This is a video frame, not one of those
   photos, so it outranks the rule instead of relying on ordering. */
.video-embed .video-embed__play img {
  width: 100%; height: 100%; max-width: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.video-embed__icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 68px; height: 48px; border-radius: 14px;
  background: rgba(255, 0, 0, .88);
  transition: background .15s ease;
}
/* the play triangle, drawn rather than shipped as an asset */
.video-embed__icon::after {
  content: "";
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}
.video-embed__play:hover .video-embed__icon,
.video-embed__play:focus-visible .video-embed__icon { background: #f00; }
/* media first, text second — same ratio, mirrored */
.split--reverse { grid-template-columns: 781fr 523fr; }
.split--reverse .split__text { order: 2; }
.split--reverse .split__media { order: 1; }
/* a narrow aside (the sparkle lists) rather than a media column */
.split--aside { grid-template-columns: 1fr 457px; column-gap: 218px; }
/* two columns of equal measure — 002's Australian Standard band sets its heading
   and body against the logo and benefits list at matching widths */
.split--even { grid-template-columns: 1fr 1fr; }
/* content that spans both columns, e.g. a full-width photo below the split */
.split__full { grid-column: 1 / -1; }
/* the text column stretches to the media column's height and pushes its last
   block to the foot of it — the design bottom-aligns 010's tick lists against
   the project photos rather than letting them follow the paragraph */
.split--between { align-items: stretch; }
.split--between .split__text { display: flex; flex-direction: column; gap: 18px; }
.split--between .split__text .h3-sm { margin-bottom: 0; }
.split--between .split__text > :last-child { margin-top: auto; }
/* heading measure that reproduces the design's line breaks in these sections */
.split__text h2 { max-width: 505px; }
/* the Planview screenshot is placed at its natural size in the design rather
   than filling the column, and sits centred in the band */
.split__media--narrow { align-self: center; }
.split__media--narrow img { max-width: 521px; margin-inline: auto; }

.stack-lg { display: grid; gap: 48px; }
.stack-sm { display: grid; gap: 18px; }

/* centre a stack and its text (002's Training Courses heading, Ready To Upskill band) */
.centred { text-align: center; justify-items: center; }
/* a section heading with a button sitting opposite it (002 Shop DALI Products) */
.band__head {
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center; justify-content: space-between;
}
/* a heading with a partner wordmark badged beside it, same line (003 ReadyToGo Kits) */
.h2--logo { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
/* Partner wordmarks sit at a fixed size of their own, as the design has them.
   Qualified with img so this beats `.split__media img { width:100% }`, which
   otherwise stretched the Standards Australia mark to the full column width and
   then squashed it flat against max-height. */
img.brandmark { width: auto; height: auto; max-width: 100%; }
img.brandmark--standards  { width: 260px; }
img.brandmark--zencontrol { width: 220px; }
/* 003's badges sit inline with heading text rather than opening a band, so they
   hold to roughly that text's scale instead of the wordmark sizes above */
img.brandmark--readytogo  { width: 54px; }
img.brandmark--readytogo-h { width: 130px; }
img.brandmark--lumenation { width: 130px; }

/* the larger section heading used on several pages (50px in the .fig) */
.h2--lg { font-size: 50px; line-height: 1.16; }
/* the 19px sub-heading used inside body copy */
.nabers-h3 { font-size: var(--fs-h3); line-height: 23px; font-weight: 500; }

/* ---------- category picker (001 Select Your Category) ---------- */
.categories { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.category { position: relative; display: block; overflow: hidden; text-decoration: none; color: var(--white); }
.category img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
/* the design tints these tiles toward the brand teal rather than showing full colour */
.category::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--teal-deep); opacity: .55; mix-blend-mode: multiply;
  transition: opacity .2s ease;
}
.category:hover::before { opacity: .35; }
.category span { z-index: 2; }
.category span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 22px 20px;
  font-size: var(--fs-h3card); line-height: 1.24; text-align: center;
}
.category:hover img { transform: scale(1.02); transition: transform .3s ease; }

/* an award / credential row — a divided list beside the "Awards" title (001),
   not a card grid: each row is label | description | year */
.awards { display: grid; margin: 0; padding: 0; list-style: none; }
.award {
  display: grid; grid-template-columns: 220px 1fr auto; gap: 24px; align-items: baseline;
  padding-block: 24px; border-top: 1px solid var(--card-line);
}
.award:first-child { border-top: 0; padding-top: 0; }
.award:last-child { padding-bottom: 0; }
.award h3 { font-size: var(--fs-h3); line-height: 1.24; }
.award__year { font-size: 14px; opacity: .7; }

/* the oversized opening statement on the homepage */
.statement { font-size: 31px; line-height: 1.3; max-width: 30em; }

/* ---------- FAQ accordion (002) ---------- */
.faq { display: grid; gap: 0; }
.faq details { border-top: 1px solid var(--card-line); }
.faq details:last-child { border-bottom: 1px solid var(--card-line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 20px 40px 20px 0; position: relative;
  font-size: var(--fs-h3); line-height: 1.3;
  color: var(--teal);          /* the design sets the questions in the brand teal */
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px; margin-top: -8px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg); transition: transform .16s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details > div { padding: 0 40px 22px 0; max-width: 46em; }

/* ---------- testimonials (011 Student Reviews) ---------- */
.quotes { display: grid; grid-template-columns: repeat(var(--quotes,3), minmax(0,1fr)); gap: 24px; }
.quote { display: grid; gap: 14px; align-content: start; }
.quote blockquote { margin: 0; font-size: var(--fs-h3); line-height: 1.36; }
.quote cite { font-size: 24px; line-height: 1.24; font-style: normal; }
.quote__org { font-size: var(--fs-body); opacity: .75; }

/* ---------- course blocks (011 Training) ---------- */
.course { background: var(--card); border: 1px solid var(--card-line); padding: 30px 26px; display: grid; gap: 20px; align-content: start; }
.course h3 { font-size: 24px; line-height: 1.24; }
.course__price { font-size: 24px; line-height: 1.24; color: var(--teal); }
.course__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ---------- product cards (004, 003, 001 featured products) ---------- */
/* the UA list defaults were never reset here, unlike every other list in this
   file: the 40px padding-left pushed the whole row out of alignment with its
   heading, the 14px margins added space the design doesn't have, and the li
   markers stayed visible because these li stay display:list-item (.tiles and
   .ticks escape it by being grid items). */
.products {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(var(--products, 5), minmax(0,1fr)); gap: 24px;
}
.product { display: grid; gap: 10px; align-content: start; text-decoration: none; }
.product img { width: 100%; height: auto; aspect-ratio: 7 / 8; object-fit: contain; background: var(--card); }
.product__brand { font-size: var(--fs-body); opacity: .7; }
.product__name { font-size: 18px; line-height: 1.24; }
/* live price from the store — sits under the name, quieter than it.
   Names wrap to 1-3 lines, so the name row absorbs the slack and the prices
   line up along the bottom of the row instead of stepping raggedly. Scoped
   with :has() so the four price-less product grids on other pages keep their
   original top-packed layout. */
.product__price { font-size: var(--fs-body); opacity: .7; }
.product:has(.product__price) {
  height: 100%;
  align-content: stretch;
  grid-template-rows: auto auto 1fr auto;
}
/* cards with no brand line (001 Featured Products) drop a row from the template */
.product:has(.product__price):not(:has(.product__brand)) {
  grid-template-rows: auto 1fr auto;
}
.product:hover .product__name { text-decoration: underline; }
/* the Featured Products CTA sits centred under its grid, unlike every other btn-row */
.products + .btn-row { justify-self: center; }

/* a hero that carries a short lede under the headline (003, 005) */
.hero__lede { font-size: var(--fs-body); max-width: 44em; margin-top: 14px; }

/* a compact three-up value bar (004) */
.valuebar { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.valuebar h3 { font-size: var(--fs-h3); line-height: 1.24; }
.valuebar p { font-size: var(--fs-body); line-height: 1.4; margin-top: 4px; opacity: .85; }
.valuebar__head { display: flex; align-items: center; gap: 12px; }
.valuebar__icon { width: 44px; height: 44px; flex: none; color: var(--teal); }

/* ---------- stats: a big figure with a caption (017 project facts) ---------- */
.stats { display: grid; grid-template-columns: repeat(var(--stats, 3), minmax(0,1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.stats--lg .stat__n { font-size: 80px; }
.stat__n { font-size: 60px; line-height: 1; letter-spacing: -0.02em; color: var(--teal); }
.stat__label { font-size: 14px; opacity: .75; margin-top: 6px; color: var(--teal); }
/* boxed stat variant (005 training stats) — a card-like tile with a dot marker */
.stat--box {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-line);
  padding: 30px 26px 26px;
}
.stat--box::after {
  content: "";
  position: absolute; top: 24px; right: 26px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--teal);
}
.stat--box .stat__n, .stat--box .stat__label { color: var(--ink); }
/* a value-over-label fact list, the inverse of .details */
.facts { display: grid; grid-template-columns: repeat(var(--facts, 4), minmax(0,1fr)); gap: 24px; }
.fact__v { font-size: var(--fs-h3); line-height: 1.24; }
.fact__k { font-size: 14px; opacity: .75; margin-top: 4px; }

/* ---------- prose: long-form copy (017 article, 018 terms) ---------- */
.prose { max-width: 46em; display: grid; gap: 20px; }
.prose h2 { font-size: 30px; line-height: 1.24; margin-top: 18px; }
.prose h3 { font-size: var(--fs-h3); line-height: 1.24; margin-top: 12px; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.prose img { width: 100%; height: auto; margin-block: 12px; }
/* legal clause numbering: the numbers are part of the contract, so they are
   content rather than decoration and are marked up explicitly */
.prose--legal { max-width: 52em; gap: 14px; }
.clauses { list-style: none; padding: 0; display: grid; gap: 10px; }
.clauses li { display: grid; grid-template-columns: 58px 1fr; column-gap: 12px; align-items: baseline; }
.clauses__n { font-variant-numeric: tabular-nums; opacity: .7; }
@media (max-width: 720px) {
  .clauses li { grid-template-columns: 46px 1fr; column-gap: 8px; }
}

/* ---------- timeline: a dated sequence (012 Our Story) ----------
   Numbering here is real information — the years are the content — so it is a
   sequence component rather than decorative numbering. The connecting rail is
   a single border on the list itself so it always spans the full height,
   however tall an individual entry's body grows; each item just adds a dot at
   its own top, rather than measuring a per-item line segment. */
.timeline { display: grid; gap: 34px; border-left: 1px solid var(--card-line); padding-left: 34px; }
.timeline__item { position: relative; display: grid; grid-template-columns: 110px 1fr; column-gap: 40px; align-items: start; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -39px; top: 14px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
}
.timeline__year { font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.015em; color: var(--ink); }
.timeline__body { display: grid; gap: 8px; }
.timeline__body h3 { font-size: var(--fs-h3); line-height: 1.24; }
.timeline__list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* ---------- tiles: an N-up text grid with no card chrome ---------- */
.tiles { display: grid; grid-template-columns: repeat(var(--tiles, 3), minmax(0,1fr)); gap: 34px 24px; }
.tiles--5 { --tiles: 5; }
.tiles--4 { --tiles: 4; }
.tiles--2 { --tiles: 2; }
.tiles--1 { --tiles: 1; }
.tile { display: grid; gap: 10px; align-content: start; }
.tile h3 { font-size: var(--fs-h3); line-height: 1.24; }
.tile img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* course tiles (001) crop taller, like .product — held to this ratio
   regardless of each source photo's own aspect ratio */
.tiles--course .tile img { aspect-ratio: 7 / 8; }
.tiles--course + .btn-row { justify-self: center; }

/* ---------- people: photo + name + role + bio (012 The Lumen Team) ---------- */
.people { display: grid; grid-template-columns: repeat(var(--people, 4), minmax(0,1fr)); gap: 24px; }
.person { display: grid; gap: 12px; align-content: start; }
.person img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.person h3 { font-size: var(--fs-h3); line-height: 1.24; }
.person__role { color: var(--teal); }

/* ---------- article cards (016 Blog, 017 related) ---------- */
.posts { display: grid; grid-template-columns: repeat(var(--posts, 3), minmax(0,1fr)); gap: 24px; }
.post { display: grid; gap: 14px; align-content: start; }
.post img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.post h3 { font-size: var(--fs-h3); line-height: 1.28; }
.post__meta { font-size: 14px; opacity: .7; }
.post a { text-decoration: none; }
.post a:hover h3 { text-decoration: underline; }
/* homepage "Latest News and Projects" scrolls across instead of wrapping to a
   second row (blog.html keeps the plain grid above) */
.posts--scroll {
  display: flex; gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.posts--scroll .post { flex: 0 0 320px; scroll-snap-align: start; }
/* the carousel steps itself, so a draggable scrollbar is just visual noise */
.posts--auto { scrollbar-width: none; }
.posts--auto::-webkit-scrollbar { display: none; }
.posts--auto + .btn-row { justify-self: center; }

/* ---------- project gallery: a scrolling photo row with captions (010) -------
   The design lays two 670px cards inside the 781px media column and clips the
   second at the column edge. That clip is the design's own answer to Melissa's
   26-07-10 note, "will this scroll across to show the other case studies?", so
   it is built as a scroller. 85.8% is 670/781, which keeps the peek of the next
   card at every width, and the 3:2 photo + 12px + 20px caption reproduces the
   478.8px card height that sets each band's height.
   ---------------------------------------------------------------------------- */
.gallery {
  margin: 0; padding: 0; list-style: none;
  display: flex; gap: 37px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.gallery__item { flex: 0 0 85.8%; scroll-snap-align: start; }
.gallery--one .gallery__item { flex: 0 0 100%; }
.gallery__item a { text-decoration: none; }
.gallery__item a:hover .gallery__cap { text-decoration: underline; }
.gallery__item img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* a card whose photograph the design has not supplied */
.gallery__ph { aspect-ratio: 3 / 2; background: var(--card); }
/* the caption's line box is 20px in the design, not the 23px body leading */
.gallery__cap { margin-top: 12px; line-height: 20px; }

/* ---------- a filter / sort toolbar ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.toolbar__search { flex: 1 1 320px; display: grid; grid-template-columns: 1fr auto;
  border: 1px solid #CFCFCF; border-radius: 3px; background: var(--white); overflow: hidden; }
.toolbar__search input { border: 0; padding: 11px 14px; font: inherit; font-size: var(--fs-body); background: transparent; min-width: 0; }
.toolbar__search button { border: 0; border-left: 1px solid #CFCFCF; background: var(--white);
  padding: 11px 18px; font: inherit; font-size: var(--fs-body); cursor: pointer; }
.toolbar select { font: inherit; font-size: var(--fs-body); padding: 11px 14px;
  border: 1px solid #CFCFCF; border-radius: 3px; background: var(--white); }

@media (max-width: 980px) {
  .categories { grid-template-columns: 1fr 1fr; }
  .quotes { --quotes: 1 !important; }
  .course__cols { grid-template-columns: 1fr; }
  .products { --products: 3 !important; }
  .stats { --stats: 3 !important; }
  .facts { --facts: 2 !important; }
  .tiles { --tiles: 2 !important; }
  .people { --people: 2 !important; }
  .posts { --posts: 2 !important; }
}
@media (max-width: 720px) {
  .categories { grid-template-columns: 1fr; }
  .award { grid-template-columns: 1fr; gap: 4px; }
  .statement { font-size: 22px; }
  .products { --products: 2 !important; }
  .valuebar { grid-template-columns: 1fr; gap: 18px; }
  .h2--lg { font-size: 27px; }
  .stat__n, .stats--lg .stat__n { font-size: 40px; }
  /* the large figures ('1000+') do not fit three columns at 393px */
  .stats--lg { --stats: 1 !important; }
  .stats { --stats: 3 !important; }
  .facts { --facts: 1 !important; }
  .tiles { --tiles: 1 !important; }
  .people { --people: 1 !important; }
  .posts { --posts: 1 !important; }
  .timeline__item { grid-template-columns: 1fr; row-gap: 6px; }
  .timeline { gap: 26px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px;
  background: var(--teal);
  color: var(--white);
  border: 0; border-radius: 4px;
  font-family: inherit; font-size: var(--fs-body);
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease;
}
.btn:hover { background: var(--teal-hi); }
.btn--light {
  background: var(--white);
  color: var(--teal);
}
.btn--light:hover { background: #EAF1F3; }
.btn-row { justify-self: start; }
.btn-pair { display: flex; flex-wrap: wrap; gap: 12px; }

.tlink { color: var(--teal); text-decoration: none; }
.tlink:hover { text-decoration: underline; }
.ulink { color: inherit; text-decoration: underline; text-underline-offset: 2px; }


/* ---------- NABERS block ---------- */
.nabers { display: grid; gap: 26px; }
.nabers__logo { width: 190px; height: auto; }
.nabers h3 { font-size: var(--fs-h3); }
.nabers__copy { display: grid; gap: 14px; }

/* ---------- feature cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(var(--cards, 3), minmax(0, 1fr));
  gap: 12px;
}
.cards--1 { --cards: 1; }
.cards--2 { --cards: 2; }
.cards--3 { --cards: 3; }
.cards--4 { --cards: 4; }
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-line);
  padding: 34px 26px 30px;
  display: grid;
  gap: 22px;
  align-content: start;
  text-decoration: none;
}
.card--dot::after {
  content: "";
  position: absolute; top: 32px; right: 30px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--teal);
}
.card__icon { width: 44px; height: 44px; color: var(--ink); }
/* cards whose body sits at the foot of a fixed-height card */
.card--tall { min-height: 333px; justify-content: space-between; }
.card__foot { display: grid; gap: 12px; justify-items: start; }
.card h3 {
  font-size: var(--fs-h3card);
  line-height: 1.16;
  /* clears the status dot; the line breaks themselves are explicit <br>s
     because the design sets them manually per card */
  padding-right: 50px;
}
/* The designed breaks are kept at every width. `display:none` on a <br>
   would join the words with no space ("ProactiveMaintenance"), and the
   breaks still fit comfortably in a full-width card on mobile. */
.card__copy { display: grid; gap: 18px; }

/* ---------- Get In Touch ---------- */
.cta { row-gap: 40px; align-items: start; }
.cta__text { grid-column: 1 / span 5; display: grid; gap: 20px; align-content: start; }
.cta__text h2 { font-size: var(--fs-h2-cta); line-height: 1.2; }
.cta__form { grid-column: 8 / span 5; }

.form { display: grid; gap: 12px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field {
  width: 100%;
  height: 45px;
  padding: 0 15px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 4px;
  color: var(--white);
  font-family: inherit;
  font-size: var(--fs-body);
}
textarea.field { height: 118px; padding-top: 12px; resize: vertical; }
.field::placeholder { color: rgba(255,255,255,.92); }
.field:hover { border-color: rgba(255,255,255,.7); }

.consent {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 12px;
  font-size: var(--fs-fine);
  line-height: 1.45;
}
.consent input {
  width: 16px; height: 16px; margin: 2px 0 0;
  accent-color: var(--white);
}
.finePrint {
  font-size: var(--fs-fine);
  line-height: 1.45;
  margin-top: 10px;
}
.form__submit { margin-top: 18px; justify-self: start; min-width: 102px; }
.form__error { font-size: var(--fs-fine); line-height: 1.45; color: #ff9d9d; }

/* ---------- closing photo + back to top ---------- */
.closing img { width: 100%; height: auto; }
.toTop {
  display: block;
  background: var(--teal);
  color: var(--white);
  text-align: center;
  padding-block: 23px;
  font-size: var(--fs-body);
  text-decoration: none;
}
.toTop:hover { background: var(--teal-hi); }

/* ---------- footer ---------- */
.footer { padding-block: 72px 60px; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.28fr 1fr 1fr 1fr 1.16fr;
  gap: 40px 24px;
}
.footer__brand { display: grid; gap: 30px; align-content: start; max-width: 260px; }
.footer__brand img { width: 158px; height: auto; }
.footer__brand p { font-size: var(--fs-body); line-height: 1.42; }
.footer h4 {
  margin: 0 0 22px;
  font-size: var(--fs-small);
  font-weight: 400;
}
.footer__links { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; font-size: var(--fs-small); }
.footer__links a { text-decoration: none; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__contact { display: grid; gap: 14px; font-size: var(--fs-small); align-content: start; }
.footer__contact a { text-decoration: none; }
.footer__contact a:hover { text-decoration: underline; }

.news { display: grid; gap: 16px; align-content: start; }
.news p { font-size: var(--fs-small); color: #8E8E8E; line-height: 1.42; }
.news__form {
  display: grid;
  grid-template-columns: 1fr auto;
  border: 1px solid #CFCFCF;
  border-radius: 3px;
  overflow: hidden;
  background: var(--white);
}
.news__form input {
  border: 0; padding: 11px 14px;
  font-family: inherit; font-size: var(--fs-small);
  background: transparent; color: var(--ink);
  min-width: 0;
}
.news__form input::placeholder { color: #6F6F6F; }
.news__form button {
  border: 0; border-left: 1px solid #CFCFCF;
  background: var(--white);
  padding: 11px 18px;
  font-family: inherit; font-size: var(--fs-small);
  color: var(--ink); cursor: pointer;
}
.news__form button:hover { background: #F2F2F2; }

.legal {
  border-top: 1px solid var(--rule);
}
.legal__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 56px;
  padding-block: 24px;
  font-size: var(--fs-small);
}
.legal__inner a { text-decoration: none; }
.legal__inner a:hover { text-decoration: underline; }
.legal__social { margin-left: auto; display: flex; gap: 12px; }
.legal__social a {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--ink);
}
.legal__social svg { width: 18px; height: 18px; fill: currentColor; }

/* ============================================================
   Responsive.
   The <=720px rules reproduce the approved `009M / Building
   Owners` frame, read directly out of the .fig rather than
   guessed: a 393px canvas, 12px gutters, and a rhythm of text
   band -> full-bleed 393x331 photo band. Design section heights
   are noted against each rule so they can be re-verified.
   ============================================================ */
@media (max-width: 1180px) {
  :root { --fs-hero: 48px; --fs-h2: 34px; --fs-h2-cta: 38px; --fs-h3card: 27px; --pad: 58px; }
  .nav__list { gap: 24px; }
  :root { --fs-nav: 16px; }
}

@media (max-width: 980px) {
  :root { --pad: 52px; }
  .cta__text, .cta__form { grid-column: 1 / -1; }
  .split, .split--reverse, .split--aside, .split--even { grid-template-columns: 1fr; column-gap: 0; }
  .split--reverse .split__text, .split--reverse .split__media { order: 0; }
  .cards { --cards: 1 !important; }
  .split__text h2 { max-width: none; }
  .split { row-gap: 34px; }
  .cards { grid-template-columns: 1fr; gap: 20px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 44px 24px; }
  .footer__brand { max-width: none; }
}

@media (max-width: 720px) {
  /* type scale read off 009M: 40/25/18/16/14/10 */
  :root {
    --gutter:     12px;
    --pad:         0px;
    --fs-promo:   12px;
    --fs-nav:     14px;
    --fs-hero:    40px;
    --fs-eyebrow: 14px;
    --fs-h2:      25px;
    --fs-h2-cta:  25px;
    --fs-h3card:  18px;
    --fs-h3:      16px;
    --fs-body:    14px;
    --fs-small:   14px;
    --fs-fine:    10px;
  }
  body { line-height: 19px; }               /* the design's exact 14/19 */

  /* Every section frame in 009M has 40px top and bottom padding. Sections
     that end in a full-bleed photo drop the bottom padding, because the
     photo is its own band in the design — the 40px sits above it instead. */
  .band { padding-block: 40px; }
  /* ...except a project gallery, which 010M insets and keeps padding below */
  .band:has(.split__media img, .split__full img):not(:has(.gallery)) { padding-bottom: 0; }
  /* the 40px margin below the text block IS the section rhythm here, so the
     split's own row-gap must not stack on top of it */
  .split, .split--reverse, .split--aside, .split--even { row-gap: 0; }
  .split__full, .split__media { margin-top: 40px; }
  /* NOTE: three bands change colour between breakpoints in the .fig (Planview
     off-white -> white on 009M; 013's opportunities plain -> mint on 013M). That is
     inconsistency, not a rule, so band colour is held stable across breakpoints. */

  /* ---- hero — 620px in the design, and that INCLUDES the promo bar ---- */
  .hero {
    min-height: calc(620px - 42px);
    /* the 1440-wide ratio is for large screens; on a phone it only exists
       to be transferred into a 1440px used width. Drop it. */
    aspect-ratio: auto;
  }
  .hero__title {
    font-size: var(--fs-hero); line-height: 1;
    letter-spacing: -0.02em; max-width: none;
  }
  .hero__eyebrow {
    font-size: var(--fs-eyebrow); line-height: 19px;
    color: var(--card); margin-bottom: 13px;
  }
  .hero__body { padding-bottom: 20px; }

  .nav { grid-template-columns: auto 1fr auto; padding-block: 14px; }
  .nav__list { display: none; }
  .nav__menu { display: none; }
  .nav__burger {
    display: grid; place-items: center; order: 3;
    background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
  }
  .nav__logo { justify-self: start; }
  .nav__logo img { width: 128px; }
  /* the design orders the mobile header logo | Sign In | search | menu */
  .nav__right { gap: 12px; }
  .nav__right .nav__more { display: none; }
  .nav__right .pill { order: 1; }
  .nav__right .nav__icon { order: 2; }
  .pill {
    min-width: 66px; height: 32px;
    padding-inline: 12px; font-size: 13px; border-radius: 5px;
  }

  /* ---- headings ----
     Figma reports lineHeight "100%", but that resolves to the font's own
     intrinsic leading, not the font size: a one-line H2 box measures 31px
     and a two-line box 62px. Using line-height:1 (25px) made every heading
     ~12px short per line-pair. */
  h2.h2, .cta__text h2 { font-size: var(--fs-h2); line-height: 31px; max-width: none; }
  .split__text h2 { max-width: none; }
  .card h3   { font-size: var(--fs-h3card); line-height: 23px; padding-right: 30px; }
  .nabers h3 { font-size: var(--fs-h3);     line-height: 23px; }

  /* ---- single column, with each section's own stack gap ---- */
  .grid { display: block; }
  /* NOTE: the section frames report stackSpacing:70, but each has only ONE
     child, so that 70 never applies. The real rhythm is the ~22px gap inside
     the content frame. Reading 70 as an internal gap doubled these sections. */
  .split__text { gap: 18px; }                                /* Frame 152 gap */
  /* 010M sets this heading at 18px — 014M agrees, 012M uses 16, which is drift */
  .h3-sm { font-size: 18px; }
  /* every 010M band puts its copy on a 10px rhythm and 60px above the ticks */
  .split--between .split__text { gap: 10px; }
  .split--between .split__text > :last-child { margin-top: 50px; }  /* 10 + 50 */
  .split--aside .ticks { margin-top: 30px; }                 /* Frame 168 gap */
  .split__text .ticks { margin-top: 4px; }                   /* 18 + 4 = 22 */
  /* NABERS block: 30px between the four blocks, 16px inside the copy */
  .nabers { gap: 16px; margin-top: 12px; }                   /* 18 + 12 = 30 */
  .nabers__copy { gap: 16px; }
  .nabers__logo { width: 188px; margin-bottom: 14px; }       /* 16 + 14 = 30 */
  .nabers .ticks { margin-top: 0; }
  .nabers .btn { margin-top: 14px; height: 47px; }           /* 16 + 14 = 30 */
  .cta__text { gap: 20px; }
  /* bullet rows measure 23px tall with an 8px gap in the design */
  .ticks { gap: 8px; }
  .ticks li { min-height: 23px; }

  /* ---- photos become full-bleed 393x331 bands between sections ---- */
  .split__full, .split__media, .split__media--narrow {
    margin-inline: calc(-1 * var(--gutter));
    width: calc(100% + 2 * var(--gutter));
    max-width: none;
  }
  .split__full img, .split__media img, .split__media--narrow img {
    width: 100%; max-width: none; height: auto;
    aspect-ratio: 393 / 331;
    object-fit: cover;
    margin-inline: 0;
  }
  /* a diagram (002's zencontrol network diagram) is reference material, not a
     photo: every label matters, so it opts out of the banner crop above and
     scales in full instead, whatever height that leaves it at */
  .split__media--diagram img { aspect-ratio: auto; object-fit: contain; }
  .closing img { width: 100%; aspect-ratio: 393 / 269; object-fit: cover; }

  /* the project gallery is the exception to the full-bleed rule above: 010M
     keeps it inside the 12px gutter, one 369x246 card per screen, caption 12/16 */
  .split__media:has(.gallery) { margin-inline: 0; width: 100%; }
  .gallery { gap: var(--gutter); }
  .gallery__item { flex: 0 0 100%; }
  .gallery__item img { aspect-ratio: 3 / 2; }
  .gallery__cap { margin-top: 7px; font-size: 12px; line-height: 16px; }

  /* ---- cards — design heights 147 / 204 / 241 with 12px between ---- */
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card  { padding: 25px 11px; gap: 12px; }
  /* tall cards keep a minimum so the button sits at a predictable place;
     264px is the stacked height in 013M */
  .card--tall { min-height: 264px; }
  .card__copy { gap: 12px; }
  .card h3 { padding-right: 26px; }
  .card::after { top: 10px; right: 10px; width: 8.4px; height: 8.4px; }

  /* ---- Get In Touch — mobile uses the darker teal ----
     design: heading block 81 | 20 | fields 572 | 26 | button 47 = 746 */
  .band--teal { background: var(--teal-deep); }
  .cta__text { gap: 12px; }
  .cta__form { margin-top: 20px; }
  .form__row { grid-template-columns: 1fr; }
  .field { height: 44px; font-size: var(--fs-body); }
  textarea.field { height: 96px; }
  .form__submit { margin-top: 26px; height: 47px; }

  /* ---- footer — Footer/Mobile is 851.8: 42 band + 651 body + 158.8 legal ---
     body:  20 pad | brand 133 | 40 | links 292 | 40 | newsletter 106 | 20 pad */
  .toTop { padding-block: 11px; }                      /* 42px band */
  .footer { padding-block: 20px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .footer__brand { grid-column: 1 / -1; max-width: none; gap: 24px; }
  .footer__brand img { width: 122px; }
  .news { grid-column: 1 / -1; gap: 12px; }
  .footer h4 { margin-bottom: 12px; }
  .footer__links, .footer__contact { gap: 7px; }
  /* legal items stack on a 30px rhythm with 24px above and below */
  .legal__inner {
    display: grid; gap: 14px;
    padding-block: 24px;
    line-height: 16px;
  }
  .legal__social { margin-left: 0; width: 100%; }
}

/* mobile nav disclosure — no JS dependency for the core page */
.mnav {
  display: none;
  position: relative; z-index: 3;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.mnav ul { margin: 0; padding: 10px 0 16px; list-style: none; display: grid; gap: 2px; }
.mnav a {
  display: block; padding: 11px var(--gutter);
  color: var(--white); text-decoration: none; font-size: 17px;
}
.mnav a:hover { background: rgba(255,255,255,.1); }
#mtoggle { position: absolute; opacity: 0; pointer-events: none; }
#mtoggle:checked ~ .hero .mnav { display: block; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}