*{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--font-body);font-size:18px;line-height:1.4;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  figure{margin:0;}
  a{color:inherit;}
  .wrap{max-width:1140px;margin-inline:auto;padding-inline:24px;}
  /* The one place uppercase survives. Everything else on brightechome.com is
     sentence case - the template's uppercase headings belong to Big Shoulders,
     a condensed display face, and read as shouting in Ubuntu. */
  .eyebrow{
    display:block;margin-bottom:10px;
    font-family:var(--font-body);font-weight:400;font-size:13px;letter-spacing:1.5px;
    text-transform:uppercase;color:var(--ink-muted);
  }
  /* The Elementor kit's own ladder, in its own units: 3 / 2.45 / 1.95 / 1.55 /
     1.25 / 1rem, each dropping one step at the kit's 1024px breakpoint. The
     clamp bounds are those two steps, so nothing here is invented.

     Shifted down one level against the kit, deliberately. The kit's global h1
     is 90px, but no page renders it - Elementor pages set heading sizes per
     widget, and page titles land on the kit's h2 value. Our pages write plain
     semantic headings with no widget layer, so h1 takes the size a page title
     actually has on the live site.

     Do not read sizes off a rendered Elementor page to set these. Those are
     widget overrides, not the scale: doing exactly that is what shipped an h4
     larger than its h3. */
  h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:500;text-wrap:balance;margin:0;letter-spacing:normal;line-height:1.2;}
  h1{font-size:clamp(2.45rem,4vw,3rem);}
  h2{font-size:clamp(1.95rem,3.4vw,2.45rem);}
  h3{font-size:clamp(1.55rem,2.8vw,1.95rem);}
  h4{font-size:clamp(1.25rem,2.2vw,1.55rem);}
  h5{font-size:clamp(1rem,1.8vw,1.25rem);}
  h6{font-size:1rem;}
  p{margin:0;}
  .measure{max-width:60ch;}

  /* The header floats over the page and only takes a background once the
     visitor scrolls, so the home page's hero runs the full height behind it.
     header-scroll.js adds .is-scrolled past 40px.

     Fixed rather than sticky: sticky still occupies a row in the flow, which
     would push the hero down instead of letting it start at the top. The cost
     is that every page except the home page has to reserve the height itself,
     which --header-h below does. */
  :root{--header-h:87px;}
  header{
    position:fixed;top:0;left:0;right:0;z-index:20;
    background:transparent;border-bottom:1px solid transparent;
    transition:background-color 0.2s ease, border-color 0.2s ease;
  }
  header.is-scrolled{
    background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:blur(8px);border-bottom-color:var(--line);
  }
  /* The home page's hero supplies its own top padding and sits under the bar.
     Every other page starts with content that would otherwise be covered. */
  body:not(.is-home) main{padding-top:var(--header-h);}

  /* Over the dark hero the bar has to read light; once it turns solid it goes
     back to the normal ink colours. Scoped to the home page, because every
     other page has a light top and white-on-light would be invisible. */
  .is-home header:not(.is-scrolled) :is(a, summary){color:#fff;}
  /* No white logo exists in the media library - the live site puts the crimson
     one straight on the dark hero, where it barely reads. Inverting it costs
     nothing and loses only the two-tone degree mark. */
  .is-home header:not(.is-scrolled) .logo img{filter:brightness(0) invert(1);}
  .is-home header:not(.is-scrolled) .nav-toggle{background:transparent;border-color:rgba(255,255,255,0.55);color:#fff;}
  /* An open mobile menu needs a background of its own. Without this the links
     float over the hero video and collide with the headline underneath - the
     transparent bar is only safe while the menu is shut. Wins over the
     light-text rules above, so it is written after them. */
  header:has(#main-nav.is-open){
    background:var(--bg);
    backdrop-filter:none;
    border-bottom-color:var(--line);
  }
  .is-home header:has(#main-nav.is-open) :is(a, summary){color:var(--ink-muted);}
  .is-home header:has(#main-nav.is-open) .logo img{filter:none;}
  .is-home header:has(#main-nav.is-open) .nav-toggle{
    background:var(--surface);border-color:var(--line);color:var(--ink);
  }

  @media (prefers-reduced-motion: reduce){header{transition:none;}}
  .nav-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px;flex-wrap:wrap;}
  .logo{display:flex;align-items:center;}
  .logo img{height:55px;width:auto;display:block;}
  nav ul{list-style:none;display:flex;gap:24px;margin:0;padding:0;flex-wrap:wrap;}
  nav ul li{display:flex;align-items:center;}
  :is(header, footer) nav a{text-decoration:none;font-size:16px;font-weight:400;letter-spacing:normal;color:var(--ink-muted);border-bottom:2px solid transparent;padding-bottom:2px;transition:color 0.15s ease, border-color 0.15s ease;}
  :is(header, footer) nav a:hover, :is(header, footer) nav a:focus-visible{color:var(--ink);border-color:var(--accent);}
  :is(header, footer) nav a.is-current{color:var(--ink);border-color:var(--accent);}

  .nav-dropdown{position:relative;}
  .nav-dropdown summary{
    display:flex;align-items:center;gap:5px;cursor:pointer;list-style:none;
    text-decoration:none;font-size:16px;font-weight:400;letter-spacing:normal;
    color:var(--ink-muted);border-bottom:2px solid transparent;padding-bottom:2px;
    transition:color 0.15s ease, border-color 0.15s ease;
  }
  .nav-dropdown summary::-webkit-details-marker{display:none;}
  .nav-dropdown summary:hover, .nav-dropdown summary:focus-visible{color:var(--ink);border-color:var(--accent);}
  .nav-dropdown summary.is-current{color:var(--ink);border-color:var(--accent);}
  .nav-dropdown .chevron{flex:0 0 auto;transition:transform 0.15s ease;}
  .nav-dropdown[open] .chevron{transform:rotate(180deg);}
  .nav-dropdown ul{list-style:none;margin:0;padding:0;}
  @media (min-width:701px){
    .nav-dropdown ul{
      position:absolute;top:100%;left:0;margin-top:4px;padding:8px 0;
      background:var(--surface);border:1px solid var(--line);min-width:190px;
      box-shadow:0 12px 24px -12px rgba(0,0,0,0.45);
      display:flex;flex-direction:column;gap:0;z-index:30;
    }
    .nav-dropdown ul li{width:100%;}
    .nav-dropdown ul a{display:block;width:100%;padding:10px 16px;border-bottom:none;font-size:16px;}
    .nav-dropdown ul a:hover, .nav-dropdown ul a:focus-visible{background:var(--surface-2);color:var(--ink);}
  }
  .nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);color:var(--ink);cursor:pointer;flex:0 0 auto;}
  .nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .nav-toggle svg{width:20px;height:20px;}
  @media (max-width:700px){
    .nav-toggle{display:flex;}
    nav{width:100%;order:3;}
    nav ul{display:none;flex-direction:column;gap:0;width:100%;padding-top:8px;margin-top:8px;border-top:1px solid var(--line);}
    nav.is-open ul{display:flex;}
    nav ul li{width:100%;}
    nav a{display:block;padding:13px 2px;font-size:14px;border-bottom:1px solid var(--line);}
    nav ul li:last-child a{border-bottom:none;}
  }

  .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;font-family:var(--font-body);font-weight:500;font-size:14.5px;text-decoration:none;border-radius:2px;border:1px solid transparent;cursor:pointer;}
  .btn-primary{background:var(--accent);color:var(--accent-ink);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{border-color:var(--line);color:var(--ink);}
  .btn-ghost:hover{border-color:var(--ink-muted);}
  .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .btn-sm{padding:9px 16px;font-size:13px;gap:6px;}

  .hero{border-bottom:1px solid var(--line);padding-block:0 48px;}
  @media (max-width:640px){.hero{padding-bottom:36px;}}
  .hero-media{position:relative;width:100%;aspect-ratio:16/8.2;min-height:480px;max-height:680px;overflow:hidden;background:#0c0e10;}
  .hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;}
  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% center;background:#0c0e10;}
  @media (prefers-reduced-motion: reduce){.hero-video{display:none;}}
  .hero-scrim{
    position:absolute;inset:0;z-index:0;
    background:linear-gradient(100deg, rgba(6,8,9,0.92) 0%, rgba(6,8,9,0.72) 34%, rgba(6,8,9,0.28) 62%, rgba(6,8,9,0.05) 82%);
  }
  .hero-scan{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(100deg, transparent 42%, rgba(255,255,255,0.06) 50%, transparent 58%);
    background-size:260% 260%;background-position:130% 0%;
    animation:hero-scan-move 8s linear infinite;
  }
  @keyframes hero-scan-move{0%{background-position:130% 0%;}100%{background-position:-30% 0%;}}
  @media (prefers-reduced-motion: reduce){.hero-scan{display:none;}}
  .hero-content{position:absolute;inset:0;z-index:3;display:flex;align-items:center;}
  .hero-text{max-width:760px;}
  .hero-text > *{opacity:0;transform:translateY(14px);animation:hero-in 0.7s cubic-bezier(.2,.7,.2,1) both;}
  .hero-text .eyebrow{animation-delay:0.1s;}
  .hero-text h1{animation-delay:0.3s;}
  .hero-text .hero-sub{animation-delay:0.62s;}
  .hero-text .hero-cta{animation-delay:0.82s;}
  .hero-text > p:last-child{animation-delay:1s;}
  @keyframes hero-in{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @media (prefers-reduced-motion: reduce){.hero-text > *{animation:none;opacity:1;transform:none;}}
  .hero h1{font-size:clamp(32px,4.6vw,54px);line-height:1.04;text-transform:uppercase;margin-top:14px;max-width:27ch;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,0.55);}
  .hero-sub{max-width:52ch;color:#e7e9eb;font-size:16.5px;margin-top:18px;text-shadow:0 1px 6px rgba(0,0,0,0.5);}
  .hero-cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;}
  .btn-ghost.light{border-color:rgba(255,255,255,0.55);color:#fff;}
  .btn-ghost.light:hover{border-color:#fff;}
  @media (max-width:860px){
    .hero-media{aspect-ratio:auto;min-height:0;max-height:none;}
    .hero-fallback, .hero-video{object-position:center 30%;}
    .hero-content{position:relative;inset:auto;align-items:flex-end;min-height:68vh;padding-block:64px 32px;}
    .hero-scrim{background:linear-gradient(180deg, rgba(6,8,9,0.3) 0%, rgba(6,8,9,0.72) 45%, rgba(6,8,9,0.9) 100%);}
  }

  .photo{position:relative;overflow:hidden;background:var(--surface-2);}
  .photo img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
  .photo:hover img{transform:scale(1.045);}
  @media (prefers-reduced-motion: reduce){.photo img{transition:none;}.photo:hover img{transform:none;}}
  .photo figcaption{
    position:absolute;left:0;right:0;bottom:0;padding:10px 14px;
    background:linear-gradient(transparent, rgba(10,12,14,0.72));
    color:#f2f3f4;font-family:var(--font-body);font-size:11px;
    letter-spacing:0.07em;text-transform:uppercase;
  }

  .section-banner{position:relative;width:100%;aspect-ratio:16/7;min-height:280px;max-height:520px;overflow:hidden;margin-top:56px;background:var(--surface-2);}
  .section-banner img{width:100%;height:100%;object-fit:cover;object-position:center 32%;}
  .section-banner .banner-scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(10,12,14,0.8), rgba(10,12,14,0.05) 60%);}
  .section-banner .banner-caption{position:absolute;left:0;right:0;bottom:0;padding:22px 28px 26px;}
  .section-banner .banner-caption .eyebrow{color:rgba(255,255,255,0.8);}
  .section-banner .banner-caption h3, .section-banner .banner-caption .banner-title{margin-top:6px;color:#fff;font-family:var(--font-display);font-weight:700;font-size:clamp(19px,2.5vw,28px);text-transform:uppercase;line-height:1.06;}
  @media (max-width:640px){.section-banner{aspect-ratio:4/3;max-height:340px;}}
  .section-banner--wide{aspect-ratio:1920/522;min-height:0;}
  @media (max-width:640px){.section-banner--wide{aspect-ratio:16/9;max-height:none;}}
  .section-banner--bleed{width:100%;max-height:none;}

  .plate{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:32px;}
  .plate div{padding:16px 24px;border-right:1px solid var(--line);font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-muted);}
  .plate div:last-child{border-right:none;}
  .plate strong{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px;letter-spacing:0.02em;}
  @media (max-width:760px){.plate{grid-template-columns:repeat(2,1fr);}.plate div:nth-child(2){border-right:none;}}

  .stats{padding-block:40px;border-bottom:1px solid var(--line);}
  .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
  .stat b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.6vw,40px);font-variant-numeric:tabular-nums;line-height:1;color:var(--ink);}
  .stat span{display:block;margin-top:8px;font-size:13px;color:var(--ink-muted);max-width:24ch;}
  @media (max-width:760px){.stats-row{grid-template-columns:repeat(2,1fr);row-gap:32px;}}

  section{padding-block:60px;}
  @media (max-width:640px){section{padding-block:44px;}}
  .section-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin-bottom:32px;}
  .section-head--compact h2{font-size:22px;text-transform:none;font-family:var(--font-body);font-weight:500;letter-spacing:0.01em;}
  .section-head .measure{margin-inline:auto;max-width:90ch;}

  .cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .cap-card{background:var(--surface);border:1px solid var(--line);padding:28px 26px;display:flex;flex-direction:column;gap:14px;transition:border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;}
  .cap-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
  .cap-icon{flex:0 0 auto;color:var(--ink-muted);transition:transform 0.2s ease;}
  .cap-card h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:22px;letter-spacing:0.01em;color:var(--ink);}
  .cap-card p{color:var(--ink-muted);font-size:14px;line-height:1.55;}

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

  .flow-note{margin-top:40px;padding:24px 0 0;border-top:1px solid var(--line);max-width:74ch;}
  .flow-note p{color:var(--ink-muted);font-size:15px;line-height:1.55;margin:0;}
  .flow-note p + p{margin-top:10px;}

  .flow-note--plain{max-width:none;}

  .quote-block{margin-top:24px;padding-left:20px;border-left:3px solid var(--line);}
  .quote-block p{color:var(--ink-muted);font-size:15px;line-height:1.55;margin:0;}
  .quote-block p + p{margin-top:14px;}
  .flow-note-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
  .flow-note-cols.cols-2{grid-template-columns:repeat(2,1fr);gap:56px;}
  .flow-note-label{display:block;margin-bottom:10px;font-family:var(--font-body);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-muted);}
  @media (max-width:700px){.flow-note-cols.cols-2{grid-template-columns:1fr;gap:32px;}}

  .table-wrap{
    overflow-x:auto;border:1px solid var(--line);margin-bottom:28px;
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(0,0,0,0)),
      linear-gradient(to right, rgba(0,0,0,0), var(--surface) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.16), rgba(0,0,0,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.16), rgba(0,0,0,0)) 100% 0;
    background-repeat:no-repeat;
    background-size:36px 100%, 36px 100%, 12px 100%, 12px 100%;
    background-attachment:local, local, scroll, scroll;
  }
  .kv-list{margin:10px 0 0;padding:0;border-top:1px solid var(--line);}
  .kv-list > div{padding:12px 0;border-bottom:1px solid var(--line);}
  .kv-list dt{font-size:14.5px;font-weight:500;color:var(--ink);margin:0;line-height:1.35;}
  .kv-list dd{margin:3px 0 0;font-family:var(--font-body);font-size:12.5px;letter-spacing:0.02em;color:var(--ink-muted);line-height:1.45;}

  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .team-card{background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:border-color 0.2s ease;}
  .team-card:hover{border-color:var(--ink-muted);}
  .team-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%;background:var(--surface-2);}
  .team-card .name{margin:14px 16px 0;font-size:14.5px;font-weight:500;color:var(--ink);}
  .team-card .role{margin:2px 16px 0;font-size:12.5px;color:var(--ink-muted);}
  .team-card .meta{margin:10px 16px 16px;font-family:var(--font-body);font-size:11.5px;letter-spacing:0.02em;color:var(--ink-muted);line-height:1.5;overflow-wrap:break-word;word-break:break-word;}
  @media (max-width:700px){.team-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:420px){.team-grid{grid-template-columns:1fr;}}
  @media (max-width:640px){.team-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:420px){.team-grid{grid-template-columns:1fr;}}
  .table-hint{display:none;margin:0 0 10px;font-family:var(--font-body);font-size:11.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-muted);}
  @media (max-width:700px){.table-hint{display:block;}}
  table{width:100%;border-collapse:collapse;min-width:640px;font-size:14px;}
  .vis-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  caption{text-align:left;font-family:var(--font-body);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-muted);padding:14px 16px 10px;background:var(--surface);}
  thead th{
    text-align:left;font-family:var(--font-body);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
    color:var(--ink-muted);font-weight:500;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface);
  }
  tbody td{padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface);vertical-align:top;}
  tbody tr:last-child td{border-bottom:none;padding-bottom:22px;}
  td.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;}
  td.name{font-weight:500;white-space:nowrap;}
  td.name a{color:var(--accent);text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px;}
  td.name a .icon-arrow{opacity:0.7;}
  td.name a:hover{text-decoration-thickness:2px;}
  td.name a:hover::after{opacity:1;}

  .feature{display:grid;grid-template-columns:0.9fr 1.1fr;gap:44px;align-items:center;}
  .feature.feature--top{align-items:start;}
  .feature-media{aspect-ratio:4/3;}
  .feature.feature--tight{gap:32px;}
  .feature-media--portrait{max-height:480px;background:var(--surface-2);}
  .feature-media--portrait img{object-fit:contain;}
  .feature-media.is-full{height:100%;}
  @media (max-width:860px){.feature-media.is-full{aspect-ratio:5/4 !important;min-height:0 !important;height:auto;}}
  .feature-list{margin-top:22px;display:grid;gap:14px;}
  .feature-list div{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:14.5px;color:var(--ink-muted);}
  .feature-list b{color:var(--ink);font-weight:500;}
  .feature-list span.mark{color:var(--ink-muted);font-family:var(--font-mono);}
  .feature > *{min-width:0;}
  .feature.feature-split{grid-template-columns:1.35fr 0.9fr;align-items:stretch;}
  @media (max-width:860px){.feature, .feature.feature-split{grid-template-columns:1fr;}}
  @media (max-width:520px){.feature-media[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;aspect-ratio:auto !important;gap:8px;}.feature-media[style*="grid-template-columns:1fr 1fr"] .photo{aspect-ratio:5/4;}}

  .feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch;}
  .feed-card{background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none;color:inherit;}
  .feed-card:hover .feed-title{color:var(--accent);}
  .feed-media{aspect-ratio:16/10;}
  .feed-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 24px;border-top:1px solid var(--line);}
  .feed-tag{display:block;font-family:var(--font-body);font-size:10.5px;letter-spacing:0.09em;text-transform:uppercase;color:var(--ink-muted);}
  .feed-title{display:block;margin-top:8px;font-size:17px;font-weight:500;line-height:1.3;color:var(--ink);}
  .feed-title .icon-arrow{opacity:0.55;}
  .feed-sum{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--ink-muted);}
  @media (max-width:980px){.feed-grid{grid-template-columns:1fr 1fr;}}
  .feed-list{margin-top:32px;border-top:1px solid var(--line);}
  .feed-row{display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;}
  .feed-row:hover .feed-row-title, .feed-row:focus-visible .feed-row-title{color:var(--accent);}
  .feed-row-tag{font-size:11px;letter-spacing:0.09em;text-transform:uppercase;color:var(--ink-muted);}
  .feed-row-title{font-size:16px;font-weight:500;line-height:1.35;color:var(--ink);}
  .feed-row-title .icon-arrow{opacity:0.55;}
  @media (max-width:640px){.feed-row{grid-template-columns:1fr;gap:5px;}}
  @media (max-width:640px){.feed-grid{grid-template-columns:1fr;}}

  .park-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
  .park-card{background:var(--surface);padding:28px 26px;display:flex;flex-direction:column;}
  .park-card h3{margin-top:8px;font-size:22px;}
  .park-card > p{margin-top:16px;color:var(--ink-muted);font-size:14.5px;}
  .park-facts{margin-top:18px;padding-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;border-top:1px solid var(--line);}
  .park-facts span{display:block;font-family:var(--font-body);font-size:10.5px;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-muted);}
  .park-facts b{display:block;margin-top:4px;font-family:var(--font-mono);font-size:13px;color:var(--ink);}
  .park-machines{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 16px;}
  .park-machines a{font-size:13.5px;font-weight:500;color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;}
  .park-machines a:hover{border-bottom-color:currentColor;}
  .park-cta{margin-top:auto;padding-top:22px;}
  @media (max-width:820px){.park-grid{grid-template-columns:1fr;}}
  @media (max-width:420px){.park-facts{grid-template-columns:1fr 1fr;}}


  .timeline{display:grid;gap:0;border-top:1px solid var(--line);}
  .t-row{display:grid;grid-template-columns:120px 1fr;gap:24px;padding-block:22px;border-bottom:1px solid var(--line);}
  .t-row b{font-family:var(--font-mono);font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;}
  .t-row p{color:var(--ink-muted);font-size:15px;max-width:58ch;}
  @media (max-width:560px){.t-row{grid-template-columns:1fr;gap:6px;}}

  .quality{background:var(--surface-2);border-block:1px solid var(--line);}
  .quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
  .quality-grid ul{margin:0;padding:0;list-style:none;display:grid;gap:22px;}
  .quality-grid li{font-size:14.5px;line-height:1.5;color:var(--ink-muted);padding-left:18px;position:relative;}
  .quality-grid li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--ink-muted);}
  .tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
  .tag{display:inline-flex;align-items:center;padding:8px 14px;border:1px solid var(--line);border-radius:2px;font-family:var(--font-body);font-size:12.5px;letter-spacing:0.02em;color:var(--ink-muted);}
  .badge-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px;}
  .badge{display:block;background:var(--surface);border:1px solid var(--line);padding:18px;flex:1;min-width:160px;transition:border-color 0.2s ease;}
  a.badge:hover{border-color:var(--accent);}
  .badge b{display:block;font-family:var(--font-mono);font-size:15px;color:var(--ink);}
  .badge span{display:block;margin-top:6px;font-size:11.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-muted);}
  @media (max-width:800px){.quality-grid{grid-template-columns:1fr;}}

  .contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
  .contact-card{background:var(--surface);padding:22px;}
  .contact-card span{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px;}
  .contact-card a, .contact-card p{font-size:14.5px;font-weight:500;text-decoration:none;color:var(--ink);}
  .contact-card a:hover{color:var(--accent);}
  @media (max-width:900px){.contact-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.contact-grid{grid-template-columns:1fr;}}
  .contact-cta{margin-top:32px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
  .contact-cta--center{justify-content:center;}
  .brief{margin-top:36px;max-width:70ch;padding:22px 26px;border:1px dashed var(--line);}
  .brief p{font-size:14px;color:var(--ink-muted);}
  .brief b{color:var(--ink);}

  .contact-split{margin-top:40px;display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
  @media (max-width:860px){.contact-split{grid-template-columns:1fr;}}
  .contact-form{background:var(--surface);border:1px solid var(--line);padding:28px;}
  .contact-form .form-row{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media (max-width:520px){.contact-form .form-row{grid-template-columns:1fr;gap:16px;}.contact-form .form-row .field{margin-top:16px;}.contact-form .form-row .field:first-child{margin-top:0;}}
  .contact-form label{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:6px;}
  .contact-form .field{margin-top:16px;}
  .contact-form .field:first-child{margin-top:0;}
  .contact-form .form-row .field{margin-top:0;}
  .contact-form input,
  .contact-form textarea{
    width:100%;padding:11px 13px;background:var(--bg);border:1px solid var(--line);color:var(--ink);
    font-family:var(--font-body);font-size:14.5px;border-radius:2px;
  }
  .contact-form input:focus,
  .contact-form textarea:focus{outline:none;border-color:var(--accent);}
  .contact-form textarea{resize:vertical;min-height:110px;}
  .contact-form .form-foot{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .contact-form .form-note{margin-top:14px;font-size:12.5px;color:var(--ink-muted);}
  .contact-form .form-status{margin-top:14px;font-size:13px;font-weight:500;color:var(--accent);display:none;}
  .contact-form .form-status.is-visible{display:block;}

  footer{border-top:1px solid var(--line);padding-block:28px;}
  .foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-muted);}
  .foot-row a{color:inherit;text-decoration:none;}
  .foot-row a:hover{color:var(--accent);}

  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

  /* Machine detail page */
  .m-breadcrumb{display:flex;align-items:center;gap:8px;padding-block:18px;font-family:var(--font-body);font-size:12px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-muted);}
  .m-breadcrumb a{text-decoration:none;color:var(--ink-muted);}
  .m-breadcrumb .text-ink{font-weight:500;}
  .m-breadcrumb a:hover{color:var(--accent);}
  .m-top{background:transparent;border-bottom:none;padding-block:4px 0;}
  .m-top-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center;}
  .m-media-frame{border:1px solid var(--line);background:var(--bg);aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .m-media-frame img{width:100%;height:100%;object-fit:cover;object-position:center;}
  .m-top .m-hero-tag{display:block;font-family:var(--font-body);font-size:13px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-muted);font-weight:500;}
  .m-top h1{margin-top:10px;font-size:clamp(30px,4.2vw,46px);line-height:1.03;text-transform:uppercase;color:var(--ink);max-width:28ch;}
  .spec-line{margin-top:18px;font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--ink-muted);}
  .spec-line span{display:block;}
  .spec-line b{font-weight:500;color:var(--ink);}
  @media (max-width:860px){
    .m-top-grid{grid-template-columns:1fr;gap:24px;}
    .m-media-frame{aspect-ratio:16/10;}
  }
  .m-detail-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;margin-top:36px;padding-top:34px;border-top:1px solid var(--line);align-items:start;}
  .m-detail-grid h2{font-size:clamp(23px,2.6vw,32px);}
  .m-detail-grid > *, .m-top-grid > *, .cap-grid > *, .feed-grid > *, .quality-grid > *{min-width:0;}
  @media (max-width:900px){.m-detail-grid{grid-template-columns:1fr;}}
  .m-related{position:sticky;top:88px;}
  .m-related h3{font-size:16px;font-family:var(--font-body);}
  .m-related-list{margin-top:16px;display:grid;gap:10px;}
  .m-related-list a{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:500;font-family:var(--font-body);}
  .m-related-list a:hover{border-color:var(--accent);color:var(--accent);}
  .m-related-list span{font-family:var(--font-body);font-size:11px;color:var(--ink-muted);font-weight:400;}
  .back-link{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;}
  .back-link:hover{color:var(--accent);}

  /* Articles (E-E-A-T / expertise) */
  .article-byline{margin-top:18px;font-family:var(--font-body);font-size:12.5px;letter-spacing:0.03em;color:var(--ink-muted);}
  .article-body h2{margin-top:40px;font-size:23px;text-transform:none;letter-spacing:0;}
  .article-body p{margin-top:14px;color:var(--ink-muted);font-size:15.5px;line-height:1.7;max-width:70ch;}
  .article-body ul{margin-top:14px;padding:0;list-style:none;display:grid;gap:8px;max-width:70ch;}
  .article-body li{padding-left:18px;position:relative;color:var(--ink-muted);font-size:15.5px;line-height:1.6;}
  .article-body li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--ink-muted);}
  .article-related{margin-top:48px;padding-top:28px;border-top:1px solid var(--line);}

  /* Scroll-reveal */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity 0.6s ease, transform 0.6s ease;}
  .reveal.is-visible{opacity:1;transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none;}
  }

  /* Floating contact CTA */
  .float-cta{
    position:fixed;right:20px;bottom:20px;z-index:30;
    display:inline-flex;align-items:center;gap:8px;padding:14px 20px;
    background:var(--accent);color:var(--accent-ink);font-family:var(--font-body);font-weight:500;font-size:14px;
    text-decoration:none;border-radius:2px;box-shadow:0 8px 24px rgba(0,0,0,0.28);
    opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity 0.25s ease, transform 0.25s ease;
  }
  .float-cta.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
  .float-cta:hover{filter:brightness(1.06);}
  .float-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
  @media (max-width:600px){.float-cta{right:14px;bottom:14px;padding:13px 16px;font-size:13px;}}
  @media (prefers-reduced-motion: reduce){.float-cta{transition:opacity 0.15s linear;}}

  /* Skip to content */
  .skip-link{
    position:absolute;left:12px;top:-60px;z-index:100;
    background:var(--ink);color:var(--bg);padding:12px 18px;font-weight:500;font-size:13.5px;
    text-decoration:none;border-radius:2px;transition:top 0.15s ease;
  }
  .skip-link:focus{top:12px;}

/* ============================================================
     CALMER EXPRESSION
     Three changes from the base version:
     1. Decoration that signals precision without adding value is removed
     2. The accent color is only used where something is clickable
     3. Card headings use the body font; the display font is
        reserved for section headings
     ============================================================ */

  /* 1. Remove decoration */
  .hero-scan{display:none;}

  /* ============================================================
     GEO: date, short answer, FAQ, footer navigation
     ============================================================ */

  .article-date{margin-top:7px;font-family:var(--font-body);font-size:12px;letter-spacing:0.03em;color:var(--ink-muted);}

  .tldr{margin:0 0 6px;padding:24px 0 0;border-top:1px solid var(--line);}
  .tldr .tldr-label{display:block;font-family:var(--font-body);font-size:10.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-muted);}
  .tldr p{margin-top:11px;font-size:16.5px;line-height:1.55;color:var(--ink);max-width:70ch;}

  .faq{margin-top:56px;}
  .faq > .eyebrow{display:block;margin-bottom:14px;}
  .faq-list{border-top:1px solid var(--line);}
  .faq-item{padding:22px 0;border-bottom:1px solid var(--line);}
  .faq-item h3{font-family:var(--font-body);font-weight:500;font-size:18px;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--ink);}
  .faq-item p{margin-top:9px;font-size:15.5px;line-height:1.6;color:var(--ink-muted);max-width:74ch;}
  .faq-item p + p{margin-top:9px;}

  .cap-card{text-decoration:none;color:inherit;}
  .cap-more{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--accent);}
  a.cap-card:hover .cap-more, a.cap-card:focus-visible .cap-more{text-decoration:underline;text-underline-offset:4px;}

  /* Shared arrow icon: replaces the old →/← text entities everywhere */
  .icon-arrow{flex:0 0 auto;display:inline-block;vertical-align:-2px;transition:transform 0.2s ease;}
  a:hover .icon-arrow-right, a:focus-visible .icon-arrow-right{transform:translateX(4px);}
  a:hover .icon-arrow-left, a:focus-visible .icon-arrow-left{transform:translateX(-4px);}

  .foot-top{display:flex;justify-content:space-between;gap:56px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--line);}
  .foot-logo img{height:28px;width:auto;display:block;}
  .foot-cols{display:flex;flex-wrap:wrap;gap:40px 56px;}
  .foot-cols .eyebrow{margin-bottom:14px;}
  .foot-cols nav{display:flex;flex-direction:column;gap:10px;}
  .foot-cols nav a{text-decoration:none;font-family:var(--font-body);font-size:14px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-muted);border-bottom:0;padding-bottom:0;}
  .foot-cols nav a:hover, .foot-cols nav a:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}

  /* ============================================================
     UTILITIES
     Extracted from former inline style="" attributes (structural
     cleanup only — no visual change). Compose these on elements
     instead of adding new inline styles.
     ============================================================ */

  /* Spacing */
  .mt-0{margin-top:0;}
  .mx-auto{margin-inline:auto;}
  .text-center{text-align:center;}
  .text-center .measure{margin-inline:auto;max-width:90ch;}
  .mt-8{margin-top:8px;}
  .mt-10{margin-top:10px;}
  .mt-12{margin-top:12px;}
  .mt-14{margin-top:14px;}
  .mt-16{margin-top:16px;}
  .mt-18{margin-top:18px;}
  .mt-20{margin-top:20px;}
  .mt-22{margin-top:22px;}
  .mt-24{margin-top:24px;}
  .mt-26{margin-top:26px;}
  .mt-32{margin-top:32px;}
  .mt-34{margin-top:34px;}
  .mt-56{margin-top:56px;}
  .mb-32{margin-bottom:32px;}
  .mt-n8{margin-top:-8px;}
  .p-0{padding:0;}
  .pb-48{padding-block:48px;}
  .pb-tight{padding-block:8px 0;}
  .pb-32-56{padding-block:32px 56px;}

  /* Width */
  .maxw-760{max-width:760px;}
  .measure-wide{max-width:74ch;}

  /* Text color */
  .text-ink{color:var(--ink);}
  .text-muted{color:var(--ink-muted);}
  .text-accent{color:var(--accent);}
  .link-accent{color:var(--accent);font-weight:500;}

  .related-links{margin-top:16px;display:flex;flex-direction:column;}
  .related-links a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:14.5px;font-weight:500;text-decoration:none;}
  .related-links a:last-child{border-bottom:none;}
  .related-links a:hover, .related-links a:focus-visible{color:var(--accent);}
  .link-plain{color:inherit;text-decoration:none;}

  /* Text size */
  .fs-12{font-size:12px;}
  .fs-12-5{font-size:12.5px;}
  .fs-14-5{font-size:14.5px;}
  .fs-15{font-size:15px;}
  .fs-15-5{font-size:15.5px;}
  .fs-16-5{font-size:16.5px;}
  .fs-24{font-size:24px;}

  /* Text style */
  .italic{font-style:italic;}
  .uppercase{text-transform:uppercase;}
  .block{display:block;}
  .ls-03{letter-spacing:0.03em;}
  .ls-04{letter-spacing:0.04em;}
  .mono-muted{font-family:var(--font-mono);color:var(--ink-muted);}

  /* Small one-off components */
  .page-h1{margin-top:14px;font-size:clamp(30px,4vw,46px);line-height:1.04;}
  .section-subtitle{margin-top:44px;font-size:clamp(23px,2.6vw,32px);}
  .pull-quote{margin:0;border-left:3px solid var(--accent);padding-left:18px;}
  .eyebrow-on-dark{color:#d7dbe0;}
  .img-crop-offset{object-position:26% center;}
  .media-tall{aspect-ratio:auto;min-height:420px;}

  /* ---- Home page sections --------------------------------------------------
     Built against the Elementor export's structure and the kit's own values:
     container 1140px, breakpoints 1024px and 767px, 20px between widgets. */

  /* The tinted bands are background images on the live site - soft wave shapes
     rather than flat fills. The colour underneath is the fallback while the
     image loads and for anything that cannot fetch it. */
  .section-alt{background:var(--surface) url("../images/bg-green.webp") center/cover no-repeat;}

  /* Hero. Elementor's settings: video background with a still as fallback, a
     black overlay at 0.4, min-height 300px, padding 220/150/200/150 desktop and
     200/0/140/0 mobile. The video sits under the still rather than replacing
     it, so a browser that refuses autoplay shows the image instead of black. */
  .hero-home{position:relative;overflow:hidden;min-height:300px;padding-block:220px 200px;display:flex;align-items:center;}
  .hero-home-media,.hero-home-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
  .hero-home-fallback{z-index:0;}
  .hero-home-media{z-index:1;}
  @media (prefers-reduced-motion: reduce){.hero-home-media{display:none;}}
  .hero-home-scrim{position:absolute;inset:0;z-index:2;background:rgba(0,0,0,0.4);}
  .hero-home-content{position:relative;z-index:3;text-align:center;}
  .hero-home-content h1{color:#fff;max-width:20ch;margin-inline:auto;}
  .hero-home-eyebrow{color:#fff;}
  .hero-home-cta{margin-top:28px;}
  @media (max-width:1024px){.hero-home{padding-block:120px;}}
  @media (max-width:767px){.hero-home{padding-block:200px 140px;}}

  /* Product tiles. The kit ships .bh-module-card as custom CSS - 24px radius,
     white, a 2px white border that darkens on hover - so this reuses those
     values rather than inventing a card style. */
  .module-grid{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(5,1fr);align-items:end;}
  /* Not cards. The live tiles are transparent product shots standing on the
     section background, with a label underneath - the kit's .bh-module-card
     belongs to the product pages, not here. */
  .module-card{text-align:center;}
  .module-card img{width:auto;max-width:100%;max-height:200px;margin:0 auto 14px;object-fit:contain;}
  .module-card{display:flex;flex-direction:column;justify-content:flex-end;}
  .module-card h3{font-size:1.25rem;}
  @media (max-width:1024px){.module-grid{grid-template-columns:repeat(3,1fr);}}
  @media (max-width:767px){.module-grid{grid-template-columns:repeat(2,1fr);}}

  /* Two text columns flanking the phone. Fixed aspect on the figure rather than
     stretching it to the columns' height - that pairing clipped text in the
     template repo. */
  .feature-split{display:grid;grid-template-columns:1fr minmax(0,320px) 1fr;gap:32px;align-items:center;margin-top:40px;}
  .feature-col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:32px;}
  .feature-col li{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon title" "icon body";column-gap:14px;row-gap:4px;}
  .feature-icon{grid-area:icon;width:26px;height:26px;color:var(--accent);margin-top:2px;}
  .feature-col h3{grid-area:title;font-size:1.25rem;}
  .feature-col p{grid-area:body;font-size:1rem;}
  .feature-figure img{width:100%;height:auto;display:block;}
  @media (max-width:1024px){
    .feature-split{grid-template-columns:1fr 1fr;}
    .feature-figure{grid-column:1 / -1;order:-1;max-width:280px;margin-inline:auto;}
  }
  @media (max-width:767px){.feature-split{grid-template-columns:1fr;}}

  /* The one full-bleed accent band on the site. */
  /* Two layers, as on the live site: the Brightec star field sits on top of the
     wave, contained and centred so it reads as texture rather than tiling. */
  .band-accent{
    background:
      url("../images/bg-pattern.webp") center/contain no-repeat,
      url("../images/bg-red.webp") center/cover no-repeat,
      var(--accent);
    color:var(--accent-ink);
  }
  .band-accent-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
  .band-accent h2{color:var(--accent-ink);}
  .band-accent-figure{margin:0;}
  .band-accent-figure img{width:100%;height:auto;display:block;}
  @media (max-width:767px){.band-accent-inner{grid-template-columns:1fr;gap:28px;}}

  .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:8px;}
  .story-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;}
  .story-card img{width:100%;aspect-ratio:16/10;object-fit:cover;}
  .story-card-body{padding:24px 26px 28px;}
  .story-quote{margin:14px 0 0;padding-left:16px;border-left:3px solid var(--accent);font-style:italic;color:var(--ink);}
  @media (max-width:767px){.story-grid{grid-template-columns:1fr;}}

  /* Customer logos. Most are white-on-transparent, so they need a dark plate to
     be visible at all - the live site puts them on the accent colour. */
  .logo-strip{list-style:none;margin:32px 0 0;padding:32px 28px;display:grid;grid-template-columns:repeat(5,1fr);gap:28px 32px;align-items:center;background:var(--accent);border-radius:24px;}
  .logo-strip img{width:100%;max-height:44px;object-fit:contain;}
  @media (max-width:1024px){.logo-strip{grid-template-columns:repeat(3,1fr);}}
  @media (max-width:767px){.logo-strip{grid-template-columns:repeat(2,1fr);padding:24px 20px;}}

  /* ---- Reference / customer story pages ----------------------------------- */

  .ref-article{padding-block:64px 48px;}
  .ref-head{max-width:64ch;}
  .ref-head h1{margin-top:6px;}
  .ref-body{max-width:68ch;margin-top:32px;}
  .ref-body p{margin-top:18px;color:var(--ink-muted);}
  .ref-body .article-lead{margin-top:0;color:var(--ink);font-size:1.25rem;line-height:1.45;}
  .ref-body h3{margin-top:36px;}
  /* The source marks quotes with <blockquote>, but they are dashed speech from
     the interview rather than pull quotes - so an accent rule, not big type. */
  .ref-body blockquote{margin:18px 0 0;padding-left:18px;border-left:3px solid var(--accent);}
  .ref-body blockquote p{margin-top:0;color:var(--ink);}
  .ref-body blockquote p + p{margin-top:12px;}

  .ref-app{display:grid;grid-template-columns:minmax(0,280px) 1fr;gap:48px;align-items:center;}
  .ref-app-figure{margin:0;}
  .ref-app-figure img{width:100%;height:auto;display:block;}
  @media (max-width:767px){
    .ref-app{grid-template-columns:1fr;gap:28px;}
    .ref-app-figure{max-width:220px;}
  }

  /* Reference and news listings: one card per story, image beside the text. */
  .ref-card-list{display:grid;gap:28px;margin-top:8px;}
  .ref-card{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:32px;align-items:center;
            background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;}
  .ref-card img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;}
  .ref-card-body{padding:28px 32px 30px;}
  .ref-card-quote{margin:16px 0 0;padding-left:18px;border-left:3px solid var(--accent);}
  .ref-card-quote p{color:var(--ink);}
  .ref-card-quote cite{display:block;margin-top:10px;font-style:normal;font-size:1rem;color:var(--ink-muted);}
  @media (max-width:767px){
    .ref-card{grid-template-columns:1fr;gap:0;}
    .ref-card img{aspect-ratio:16/9;}
  }

  .post-figure{margin:28px 0 0;}
  .post-figure img{width:100%;height:auto;border-radius:24px;}

  /* ---- Product page patterns ---------------------------------------------- */

  /* Lead block at the top of a product page: heading and copy over a tinted
     band, with the product shot beside it. */
  .page-intro{background:var(--surface);}
  .page-intro-inner{display:grid;grid-template-columns:1fr minmax(0,440px);gap:48px;align-items:center;}
  .page-intro h1{max-width:18ch;}
  .page-intro-figure{margin:0;}
  .page-intro-figure img{width:100%;height:auto;display:block;}
  @media (max-width:767px){.page-intro-inner{grid-template-columns:1fr;gap:28px;}}

  /* Alternating image / text rows. .is-flipped puts the image on the right. */
  .split-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
  .split-row + .split-row{margin-top:56px;}
  .split-row figure{margin:0;}
  .split-row img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px;display:block;}
  .split-row.is-flipped figure{order:2;}
  @media (max-width:767px){
    .split-row{grid-template-columns:1fr;gap:24px;}
    .split-row.is-flipped figure{order:0;}
  }

  /* Benefit lists marked with the Brightec star rather than a bullet. */
  .star-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;max-width:62ch;}
  .star-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;}
  .star-list img{width:18px;height:auto;margin-top:5px;}
  .star-list p{color:var(--ink-muted);}

  .app-badges{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
  .app-badges img{height:42px;width:auto;}
  .section-head--left{align-items:flex-start;text-align:left;}

  /* ---- Contact page -------------------------------------------------------- */

  .contact-top{display:grid;grid-template-columns:1fr minmax(0,400px);gap:48px;align-items:start;}
  .contact-facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:8px;}
  .contact-facts a{color:var(--accent);text-decoration:none;}
  .contact-facts a:hover{text-decoration:underline;}
  .contact-form-panel{background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:26px 24px;}
  .contact-embed{display:block;width:100%;max-width:360px;height:550px;border:0;margin-top:18px;}
  @media (max-width:767px){.contact-top{grid-template-columns:1fr;gap:28px;}}

  .people-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  .person-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:24px;}
  .person-card h3{margin-top:14px;}
  .person-card p{margin-top:4px;font-size:1rem;}
  .person-card a{color:var(--accent);text-decoration:none;word-break:break-word;}
  .person-card a:hover{text-decoration:underline;}
  @media (max-width:767px){.people-grid{grid-template-columns:1fr;}}

  .team-figure{margin:48px 0 0;}
  .team-figure img{width:100%;height:auto;border-radius:24px;}
  .team-figure figcaption{margin-top:10px;font-size:1rem;color:var(--ink-muted);}

  .support-top{display:grid;grid-template-columns:1fr minmax(0,380px);gap:48px;align-items:start;}
  .support-phone{margin-top:20px;font-family:var(--font-display);font-size:clamp(1.55rem,3vw,1.95rem);font-weight:500;}
  .support-phone a{color:var(--accent);text-decoration:none;}
  .support-phone a:hover{text-decoration:underline;}
  .support-cta{background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:28px 26px;}
  @media (max-width:767px){.support-top{grid-template-columns:1fr;gap:28px;}}