/*
Theme Name: LRG Technology
Theme URI: https://lrgtechnology.com
Description: Custom theme for LRG Technology — machined-steel + Laser Blue design system, imported from the Claude Design "LRG Technology Style Guide" (v2.0). Built by BlueCrane / SiteForge. Phase-1 testbed.
Author: BlueCrane
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
Text Domain: lrg
*/

/* ============================================================
   LRG DESIGN SYSTEM — tokens, components, animations
   (consolidated from the Claude Design project + responsive layer)
   ============================================================ */

:root{
  --lrg-white:#ffffff; --lrg-cloud:#f5f5f7; --lrg-silver:#d2d2d7;
  --lrg-steel:#86868b; --lrg-graphite:#424245; --lrg-onyx:#1d1d1f;
  --lrg-laser:#0AB1FF; --lrg-laser-hover:#0098E6; --lrg-laser-tint:rgba(10,177,255,0.22); --lrg-laser-text:#0369a1;
  --lrg-live:#1d8a4e; --lrg-live-dot:#1fc26b;
  --lrg-line:#ededf0; --lrg-line2:#e2e2e6; --lrg-line3:#e7e7ea;
  --lrg-mute:#6e6e73; --lrg-mute2:#a0a0a5;
  --lrg-max:1280px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#fff; overflow-x:clip; }
body.lrg{ font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:var(--lrg-onyx); -webkit-font-smoothing:antialiased; }
.lrg img{ max-width:100%; height:auto; }
.lrg ::selection{ background:var(--lrg-laser-tint); }
.lrg a{ text-decoration:none; color:inherit; }
.lrg a:focus-visible,.lrg button:focus-visible,.lrg summary:focus-visible,.lrg .field:focus-visible{ outline:2px solid var(--lrg-laser-text); outline-offset:2px; border-radius:2px; }
.skip-link{ position:absolute; left:8px; top:-48px; z-index:200; background:var(--lrg-onyx); color:#fff; padding:10px 16px; font-size:14px; font-weight:600; transition:top .15s ease; }
.skip-link:focus{ top:8px; }

/* mono labels */
.mono{ font-family:'Space Mono',ui-monospace,Menlo,monospace; }

/* metal numerals + quote marks */
.metalnum{
  background-image:linear-gradient(155deg,#2a2a2d 0%,#6e6e73 38%,#b8b8bd 52%,#54545a 70%,#1d1d1f 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}

/* nav links */
.navlink{ color:var(--lrg-graphite); transition:color .18s ease; }
.navlink:hover,.navlink.active{ color:var(--lrg-onyx); }

/* buttons */
.btn-solid{ display:inline-block; background:var(--lrg-laser); color:#04141f; border:1px solid var(--lrg-laser);
  transition:background .18s ease, box-shadow .2s ease; box-shadow:0 2px 16px rgba(10,177,255,0.45); }
.btn-solid:hover{ background:var(--lrg-laser-hover); box-shadow:0 2px 24px rgba(10,177,255,0.62); }
.btn-line{ display:inline-block; background:#fff; color:var(--lrg-onyx); border:1px solid var(--lrg-silver);
  transition:background .18s ease, border-color .18s ease; }
.btn-line:hover{ background:var(--lrg-cloud); border-color:#c2c2c7; }

/* bento */
.bento{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.bento:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(20,20,30,0.10); border-color:var(--lrg-silver); }
.bento:hover .bento-arrow{ transform:translateX(5px); opacity:1; }
.bento-arrow{ transition:transform .2s ease, opacity .2s ease; opacity:.35; display:inline-block; }

/* pricing */
.price-col{ transition:background .2s ease; }
.price-col:hover{ background:#f0f0f2; }

/* form fields (contact) */
.field{ width:100%; font-family:inherit; font-size:15px; color:var(--lrg-onyx); background:#fbfbfc;
  border:1px solid var(--lrg-line2); padding:13px 14px; transition:border-color .18s ease, background .18s ease; }
.field::placeholder{ color:var(--lrg-mute2); }
.field:focus{ outline:none; border-color:var(--lrg-laser); background:#fff; }
.chip{ display:inline-flex; align-items:center; transition:background .18s ease, border-color .18s ease, color .18s ease; cursor:pointer; }
.chip:hover{ border-color:var(--lrg-laser); color:var(--lrg-onyx); }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip:has(input:checked){ border-color:var(--lrg-laser); color:var(--lrg-onyx); background:rgba(10,177,255,0.08); }
.chip:focus-within{ outline:2px solid var(--lrg-laser-tint); outline-offset:1px; }

/* animations */
@keyframes lrg-pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.pulse-dot{ animation:lrg-pulse 1.8s ease-in-out infinite; display:inline-block; border-radius:50%; }
@keyframes lrg-ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.ticker-track{ display:flex; width:max-content; animation:lrg-ticker 26s linear infinite; }
@keyframes lrg-glare-sweep{
  0%{transform:translateX(-150%) skewX(-13deg);opacity:0;} 10%{opacity:.40;} 40%{opacity:.20;}
  58%{transform:translateX(220%) skewX(-13deg);opacity:0;} 100%{transform:translateX(220%) skewX(-13deg);opacity:0;} }
.glare-sweep{ animation:lrg-glare-sweep 11s cubic-bezier(.33,0,.2,1) infinite; will-change:transform,opacity; }
@media (prefers-reduced-motion: reduce){
  .pulse-dot,.ticker-track,.glare-sweep{ animation:none !important; }
}

/* ===== shared layout shells ===== */
.lrg .wrap{ max-width:var(--lrg-max); margin:0 auto; padding-left:28px; padding-right:28px; }
.lrg .accentbar{ height:2px; background:linear-gradient(90deg,#0AB1FF 0%,#0AB1FF 18%,#e2e2e6 18%,#e2e2e6 100%); }
.lrg .blueprint{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.55) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.022) 1px,transparent 1px); background-size:100% 34px,34px 100%; opacity:.6; }

/* nav */
.lrg .site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--lrg-line); }
.lrg .nav-inner{ max-width:var(--lrg-max); margin:0 auto; height:68px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; }
.lrg .nav-links{ display:flex; align-items:stretch; gap:26px; height:68px; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.lrg .nav-item{ position:relative; display:flex; align-items:center; }
.lrg .nav-item > .navlink{ display:flex; align-items:center; gap:5px; }
.lrg .dd-caret{ font-size:9px; color:#a0a0a5; transition:transform .18s ease, color .18s ease; }
.lrg .nav-item.has-dd:hover .dd-caret,
.lrg .nav-item.has-dd:focus-within .dd-caret{ transform:rotate(180deg); color:#0AB1FF; }
/* dropdown panel */
.lrg .dropdown{ position:absolute; top:100%; left:0; padding-top:2px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:60; }
.lrg .nav-item.has-dd:hover .dropdown,
.lrg .nav-item.has-dd:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.lrg .dd-inner{ background:#fff; border:1px solid #e2e2e6; box-shadow:0 20px 44px rgba(20,20,30,0.12); padding:16px; min-width:240px; display:flex; flex-direction:column; gap:2px; }
.lrg .dd-inner.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:2px 22px; min-width:440px; }
.lrg .dd-link{ display:block; font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:#424245; padding:8px 10px; transition:background .15s ease, color .15s ease; }
.lrg .dd-link:hover{ background:#f5f5f7; color:var(--lrg-laser-text); }
.lrg .dd-all{ font-weight:600; color:var(--lrg-laser-text); text-transform:uppercase; font-size:11px; letter-spacing:.06em; padding-bottom:10px; margin-bottom:4px; border-bottom:1px solid #ededf0; }
.lrg .dd-inner.two-col .dd-all{ grid-column:1 / -1; }
.lrg .dd-head{ font-family:'Space Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#86868b; padding:4px 10px 10px; }
/* services mega */
.lrg .dropdown.mega{ left:0; }
.lrg .mega-inner{ display:grid; grid-template-columns:repeat(4, minmax(190px,1fr)); gap:8px 20px; min-width:820px; padding:22px; }
.lrg .dd-col{ display:flex; flex-direction:column; gap:1px; }
.lrg .dd-cta{ border-left:1px solid #ededf0; padding-left:20px; }
.lrg .nav-toggle{ display:none; background:none; border:0; cursor:pointer; font-size:22px; color:var(--lrg-onyx); }
.lrg .site-logo-img{ height:38px; width:auto; display:block; }
.lrg .logo-mark{ font-weight:700; font-size:21px; letter-spacing:-0.02em; color:var(--lrg-onyx); display:inline-flex; align-items:center; gap:7px; }
.lrg .logo-mark .dot{ width:9px; height:9px; background:var(--lrg-laser); display:inline-block; }
.lrg .logo-mark .thin{ font-weight:300; color:var(--lrg-graphite); }

/* responsive grids (named so media queries can restyle inline-free) */
.lrg .hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.lrg .bento-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:16px; }
.lrg .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--lrg-line2); border:1px solid var(--lrg-line2); }
.lrg .split-grid{ display:grid; grid-template-columns:1fr 1fr; }
.lrg .three-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.lrg .cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--lrg-line2); border:1px solid var(--lrg-line2); }
.lrg .cards3-gap{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.lrg .pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--lrg-line); border:1px solid var(--lrg-line); }
.lrg .footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
/* fat footer — link columns generated from the header nav data (see footer.php) */
.lrg .footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px 40px; align-items:start; }
/* brand + Company in col 1; the three long lists fill the rest, all tops aligned to the logo */
.lrg .footer-main{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px 40px; align-items:start; }
.lrg .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.lrg .two-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; }

/* feature photos — hero right cell + split-panel background (machined-steel framing) */
.lrg .hero-media{ position:relative; }
.lrg .hero-media-steel{ position:absolute; left:-14px; top:18px; right:18px; bottom:-18px; background-image:repeating-linear-gradient(115deg,#ebebee 0,#ebebee 2px,#e0e0e4 3px,#e0e0e4 5px); border:1px solid #cdced2; }
.lrg .hero-media-frame{ position:relative; background:#fff; border:1px solid var(--lrg-line2); box-shadow:0 24px 60px rgba(20,20,30,0.16); overflow:hidden; }
.lrg .hero-media-frame picture{ display:block; }
.lrg .hero-media-img{ display:block; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; }
.lrg .split-media-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.lrg .split-media-left{ object-position:left center; }
.lrg .split-media-right{ object-position:right center; }
.lrg .split-media-top{ object-position:center top; }

/* team grid — framed member cards, responsive 4 -> 3 -> 2 -> 1 */
.lrg .lrg-team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:48px 40px; }
.lrg .lrg-team-card{ display:flex; flex-direction:column; }
.lrg .lrg-team-frame{ position:relative; margin-bottom:24px; }
.lrg .lrg-team-steel{ position:absolute; left:-9px; top:-9px; right:9px; bottom:9px; background-image:repeating-linear-gradient(115deg,#ebebee 0,#ebebee 2px,#e0e0e4 3px,#e0e0e4 5px); border:1px solid #cdced2; z-index:0; }
.lrg .lrg-team-photo-wrap{ position:relative; z-index:1; border:1px solid #e2e2e6; box-shadow:0 16px 40px rgba(20,20,30,0.14); background:#fff; overflow:hidden; }
.lrg .lrg-team-photo-wrap::after{ content:''; position:absolute; left:0; right:0; top:0; height:4px; background:#0AB1FF; z-index:2; }
.lrg .lrg-team-photo{ display:block; width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; }
.lrg .lrg-team-photo-empty{ background-image:repeating-linear-gradient(115deg,#ebebee 0,#ebebee 2px,#e0e0e4 3px,#e0e0e4 5px); }
.lrg .lrg-team-name{ font-size:20px; font-weight:600; letter-spacing:-0.01em; color:#1d1d1f; }
.lrg .lrg-team-title{ font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:#0369a1; margin-top:5px; }
.lrg .lrg-team-note{ font-size:15px; line-height:1.55; color:#6e6e73; margin-top:12px; max-width:34ch; }
@media(max-width:1200px){ .lrg .lrg-team-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:900px){ .lrg .lrg-team-grid{ grid-template-columns:repeat(2,1fr); gap:40px 28px; } }
@media(max-width:600px){ .lrg .lrg-team-grid{ grid-template-columns:1fr; gap:44px; } }

/* client logo ticker — single row scrolling right-to-left (same lrg-ticker keyframe as the
   locations service-area strip), ~4-5 tiles in view. Grayscale at rest, full color on hover.
   Speed: the cities strip runs its 1598px group in 26s (61.5px/s, measured live); these durations
   hold the logo row at ~41px/s, i.e. 33% slower, at every breakpoint (group width tracks tile width). */
.lrg .lrg-logo-ticker{ max-width:1280px; margin:0 auto; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%); }
.lrg .lrg-logo-track{ animation-duration:63s; }              /* 2600px group / 63s = 41.3px/s */
.lrg .lrg-logo-ticker:hover .lrg-logo-track{ animation-play-state:paused; }
.lrg .lrg-logo-row{ display:flex; align-items:center; gap:20px; padding-right:20px; }
.lrg .lrg-logo-tile{ flex:0 0 240px; width:240px; background:#fff; border:1px solid #e7e7ea; height:120px; display:flex; align-items:center; justify-content:center; padding:22px; }
.lrg .lrg-logo-tile picture{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.lrg .lrg-logo-tile img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:grayscale(100%); opacity:0.55; transition:filter 0.25s ease, opacity 0.25s ease; }
.lrg .lrg-logo-tile:hover img{ filter:grayscale(0%); opacity:1; }
@media(max-width:1024px){
  .lrg .lrg-logo-row{ gap:18px; padding-right:18px; }
  .lrg .lrg-logo-tile{ flex-basis:200px; width:200px; }
  .lrg .lrg-logo-track{ animation-duration:53s; }             /* 2180px group */
}
@media(max-width:600px){
  .lrg .lrg-logo-ticker{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%); }
  .lrg .lrg-logo-row{ gap:14px; padding-right:14px; }
  .lrg .lrg-logo-tile{ flex-basis:150px; width:150px; height:96px; padding:16px; }
  .lrg .lrg-logo-track{ animation-duration:40s; }             /* 1640px group */
}
@media (prefers-reduced-motion: reduce), (hover:none){ .lrg .lrg-logo-tile img{ filter:none; opacity:0.85; } }
.lrg .split-media-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(18,18,22,0.42) 0%, rgba(18,18,22,0.10) 30%, rgba(18,18,22,0.03) 58%, rgba(18,18,22,0.28) 100%); }

/* home hero — right-edge background slider (36% of the viewport) + widened left content (44%).
   The title is deliberately wider than its container so it runs partially over the photo panel. */
/* The copy layer sits above the photo panel (z-index) and is NOT boxed into the 44% column —
   each element sets its own measure, so any of them can be widened to run over the photo.
   Nothing in this layer takes pointer events except the CTAs, otherwise the full-width wrap
   would swallow the slider's hover. */
.lrg .hero-home-wrap{ position:relative; z-index:1; pointer-events:none; }
.lrg .hero-home-content{ pointer-events:none; }
.lrg .hero-home-content a{ pointer-events:auto; }
/* text-wrap:balance evens the three lines out — without it the title strands "Coast" alone
   on the last line. Degrades to normal wrapping where unsupported. */
.lrg .hero-home-title{ font-size:clamp(40px,5.2vw,76px); max-width:min(1180px,82vw); text-wrap:balance; }
.lrg .hero-home-sub{ font-size:24px; line-height:1.3; font-weight:500; letter-spacing:-0.01em; color:#1d1d1f; max-width:34ch; }
/* trust row keeps a one-line measure at any desktop width. Uses the '·' motif rather than
   border dividers so a wrapped row never orphans a rule. */
.lrg .hero-home-trust{ max-width:760px; column-gap:16px; row-gap:12px; }
.lrg .hero-home-trust > div + div::before{ content:'·'; color:#c7c7cc; margin-right:16px; }

/* cross-fades 4 workspace photos on a slow loop: 15s per slide, 60s cycle, ~3s dissolve */
.lrg .hero-bg-slider{ position:absolute; top:0; right:0; width:40%; height:100%; overflow:hidden; z-index:0; }
/* legibility ramp: whitens the panel's left edge so the overlapping title stays readable
   (the night-earth slide is near-black at title height). Vertically masked to the title band
   only — a full-height ramp ate most of the panel and made a wider photo read as narrower.
   Below the title nothing overlaps, so the photo runs at full strength across its full width. */
.lrg .hero-bg-slider::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0.96) 0px, rgba(255,255,255,0.80) 140px, rgba(255,255,255,0.45) 260px, rgba(255,255,255,0) 420px);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,0) 60%);
  mask-image:linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,0) 60%); }
.lrg .hero-bg-slide{ position:absolute; inset:0; opacity:0; animation:lrgHeroFade 60s linear infinite; }
.lrg .hero-bg-slide picture{ position:absolute; inset:0; display:block; }
.lrg .hero-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(100%); transition:filter .5s ease; }
.lrg .hero-bg-slider:hover .hero-bg-img{ filter:grayscale(0%); }
@keyframes lrgHeroFade{ 0%{opacity:1;} 20%{opacity:1;} 25%{opacity:0;} 95%{opacity:0;} 100%{opacity:1;} }
@media (prefers-reduced-motion: reduce){
  .lrg .hero-bg-slide{ animation:none; }
  .lrg .hero-bg-slide:not(:first-child){ display:none; }
  .lrg .hero-bg-slide:first-child{ opacity:1; }
}
/* no hover on touch — show the photos in full colour rather than stranding them grey */
@media (hover:none){ .lrg .hero-bg-img{ filter:none; } }

/* nav collapses to a menu below desktop — prevents tablet-width (761–1023px) nav overflow */
@media (max-width:1024px){
  .lrg h1{ font-size:clamp(40px,8vw,64px) !important; }
  .lrg .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .lrg .hero-media-steel{ display:none; }
  /* home hero stacks: full-width copy, photo panel drops below as a banner (no overlap, so no ramp) */
  .lrg .hero-home-title{ max-width:none; }
  .lrg .hero-home-trust{ max-width:none; }
  .lrg .hero-home-sub{ font-size:21px; max-width:none; }
  .lrg .hero-home-wrap{ padding-bottom:44px !important; }
  .lrg .hero-bg-slider{ position:relative; width:100%; height:300px; border-top:1px solid #ededf0; }
  .lrg .hero-bg-slider::after{ display:none; }
  .lrg .lrg-callout-grid{ grid-template-columns:1fr; gap:32px; }
  .lrg .footer-cols{ grid-template-columns:repeat(2,1fr); }
  .lrg .footer-main{ grid-template-columns:1fr 1fr; }
  .lrg .split-grid{ grid-template-columns:1fr; }
  .lrg .two-grid{ grid-template-columns:1fr; gap:36px; }
  .lrg .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .lrg .bento-grid > a[style*="span 2"]{ grid-column:auto !important; }
  .lrg .nav-links{ display:none; }
  .lrg .nav-toggle{ display:block; }
  .lrg .nav-links.open{ display:flex; position:absolute; top:68px; left:0; right:0; height:auto; max-height:calc(100vh - 68px); overflow-y:auto; flex-direction:column; gap:0; background:#fff; border-bottom:1px solid var(--lrg-line); padding:8px 18px 24px; }
  .lrg .nav-links.open .nav-item{ display:block; }
  .lrg .nav-links.open > .nav-item > .navlink{ padding:14px 0; border-bottom:1px solid var(--lrg-line); }
  .lrg .nav-links.open .dd-caret{ display:none; }
  .lrg .nav-links.open .dropdown{ position:static; opacity:1; visibility:visible; transform:none; padding-top:0; }
  .lrg .nav-links.open .dd-inner, .lrg .nav-links.open .mega-inner{ display:block; box-shadow:none; border:none; min-width:0; padding:6px 0 10px 12px; }
  .lrg .nav-links.open .dd-cta{ border-left:none; padding-left:0; }
  .lrg .nav-links.open .dd-head{ padding:10px 0 4px; }
  .lrg .nav-links.open .dd-link{ padding:9px 0; }
  .lrg .nav-links.open .dd-all{ border-bottom:none; }
}
/* phone / small tablet */
@media (max-width:760px){
  .lrg .wrap, .lrg .nav-inner{ padding-left:18px; padding-right:18px; }
  .lrg .bento-grid,.lrg .three-grid,.lrg .cards3,.lrg .cards3-gap,.lrg .pricing-grid,.lrg .footer-grid{ grid-template-columns:1fr !important; }
  .lrg .footer-cols{ grid-template-columns:repeat(2,1fr); gap:30px 22px; }
  .lrg .footer-main{ grid-template-columns:1fr 1fr; gap:30px 22px; }
  .lrg .stats-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .lrg .contact-details{ grid-template-columns:1fr !important; }
  .lrg section[style]{ padding-left:18px !important; padding-right:18px !important; }
  .lrg h1{ font-size:clamp(34px,11vw,52px) !important; }
  .lrg h2{ font-size:clamp(30px,7vw,44px) !important; }
  .lrg .metalnum{ font-size:clamp(46px,15vw,64px) !important; }
}

/* ===== lead form (inline contact form + stepped popup) =====
   One field spec, two presentations — see inc/lead-form.php. */
/* The hidden attribute must win: .btn-solid/.btn-line set display:inline-block, and author
   styles beat the UA stylesheet's [hidden]{display:none} — without this the popup's Back and
   Send buttons stay on screen at every step. */
.lrg [hidden]{ display:none !important; }
.lrg .lrg-lbl{ display:block; font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:#6e6e73; margin-bottom:7px; }
.lrg .lrg-req{ color:#0369a1; }
.lrg .lrg-opt{ font-weight:400; letter-spacing:0.02em; text-transform:none; color:#a0a0a5; }
.lrg .lrg-lead-form > div,
.lrg .lrg-lead-form > .lrg-row-2{ margin-bottom:14px; }
.lrg .lrg-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lrg .lrg-fs{ border:0; padding:0; margin:0 0 18px; }
.lrg .lrg-fs .lrg-lbl{ padding:0; }
.lrg .lrg-lead-submit{ width:100%; font-size:14px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; padding:16px; cursor:pointer; margin-top:8px; }
.lrg .lrg-lead-fine{ font-size:12px; color:#6e6e73; text-align:center; margin-top:14px; line-height:1.5; }

/* service picker — checkbox tiles, laser-blue when chosen */
.lrg .lrg-svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lrg .lrg-svc{ position:relative; display:flex; align-items:center; font-size:13px; font-weight:500; line-height:1.35; color:#424245;
  background:#fff; border:1px solid #d2d2d7; padding:11px 13px; cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease; }
.lrg .lrg-svc:hover{ border-color:var(--lrg-laser); color:var(--lrg-onyx); }
.lrg .lrg-svc input{ position:absolute; opacity:0; width:0; height:0; }
.lrg .lrg-svc:has(input:checked){ border-color:var(--lrg-laser); background:rgba(10,177,255,0.08); color:var(--lrg-onyx); font-weight:600; }
.lrg .lrg-svc:focus-within{ outline:2px solid var(--lrg-laser-text); outline-offset:1px; }
@media(max-width:600px){ .lrg .lrg-svc-grid{ grid-template-columns:1fr; } .lrg .lrg-row-2{ grid-template-columns:1fr; } }

/* post-submit confirmation (inline form + popup share the mark/title/body) */
.lrg .lrg-inline-done,
.lrg .lrg-modal-done{ text-align:center; padding:26px 6px 10px; }
.lrg .lrg-done-mark{ width:54px; height:54px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff; background:var(--lrg-live); border-radius:50%; }
.lrg .lrg-done-title{ font-size:28px; font-weight:700; letter-spacing:-0.025em; color:#1d1d1f; margin:0 0 12px; outline:none; }
.lrg .lrg-done-body{ font-size:16px; line-height:1.6; font-weight:300; color:#424245; margin:0 auto 22px; max-width:38ch; }
.lrg .lrg-done-body a{ color:var(--lrg-laser-text); font-weight:600; }

/* ===== stepped popup ===== */
.lrg .lrg-modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px; }
.lrg .lrg-modal[hidden]{ display:none; }
.lrg .lrg-modal-backdrop{ position:absolute; inset:0; background:rgba(12,14,18,0.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.lrg .lrg-modal-panel{ position:relative; width:min(560px,100%); max-height:calc(100vh - 48px); overflow-y:auto;
  background:#fff; border:1px solid #e2e2e6; box-shadow:0 30px 80px rgba(12,14,18,0.34); padding:30px 30px 26px; }
.lrg .lrg-modal-panel::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:#0AB1FF; }
.lrg .lrg-modal-x{ position:absolute; right:12px; top:10px; background:none; border:0; font-size:26px; line-height:1; color:#a0a0a5; cursor:pointer; padding:6px 10px; }
.lrg .lrg-modal-x:hover{ color:#1d1d1f; }
.lrg .lrg-modal-eyebrow{ font-size:12px; font-weight:600; letter-spacing:0.12em; color:#6e6e73; text-transform:uppercase; }
.lrg .lrg-modal-title{ font-size:26px; font-weight:700; letter-spacing:-0.025em; color:#1d1d1f; margin:10px 0 18px; }
.lrg .lrg-modal-progress{ height:3px; background:#ededf0; }
.lrg .lrg-modal-bar{ display:block; height:3px; background:#0AB1FF; width:10%; transition:width .25s ease; }
.lrg .lrg-modal-count{ font-size:11px; font-weight:600; letter-spacing:0.1em; color:var(--lrg-mute); text-transform:uppercase; margin:8px 0 20px; }  /* #6e6e73 = AA at 11px; #a0a0a5 failed */
.lrg .lrg-step-q{ display:block; font-size:20px; font-weight:600; letter-spacing:-0.015em; color:#1d1d1f; margin-bottom:6px; }
.lrg .lrg-step-hint{ font-size:14px; line-height:1.5; color:#6e6e73; margin-bottom:14px; }
.lrg .lrg-step .field{ font-size:16px; }        /* 16px keeps iOS from zooming on focus */
.lrg .lrg-modal-err{ background:#fdecea; border:1px solid #d9503f; color:#a5291b; padding:11px 13px; margin-top:14px; font-size:14px; line-height:1.5; }
.lrg .lrg-modal-nav{ display:flex; align-items:center; gap:10px; margin-top:22px; }
.lrg .lrg-modal-nav .btn-solid,
.lrg .lrg-modal-nav .btn-line{ font-size:14px; font-weight:600; letter-spacing:0.03em; padding:13px 22px; cursor:pointer; }
.lrg .lrg-modal-nav .lrg-next,
.lrg .lrg-modal-nav .lrg-send{ margin-left:auto; }
.lrg .lrg-skip{ background:none; border:0; font-size:13px; font-weight:500; color:#6e6e73; text-decoration:underline; cursor:pointer; padding:6px; }
.lrg .lrg-skip:hover{ color:#1d1d1f; }
@media(max-width:600px){
  .lrg .lrg-modal{ padding:0; align-items:flex-end; }
  .lrg .lrg-modal-panel{ width:100%; max-height:92vh; padding:24px 20px 20px; }
  .lrg .lrg-modal-title{ font-size:22px; }
  .lrg .lrg-modal-nav{ flex-wrap:wrap; }
}