/* ============================================================================
   PREMIUM DESIGN LAYER  —  loaded LAST on every public page.
   A purely visual enhancement over the existing page CSS: a consistent design
   language (radius, depth, motion), intentional image framing, and refined
   typography. It changes NO content, images, links or functionality — every
   rule restyles existing render classes. Safe to remove to fully revert.
   ============================================================================ */

/* ---- Design tokens ------------------------------------------------------- */
:root{
  --p-radius:16px;        /* cards / panels            */
  --p-radius-img:12px;    /* framed media              */
  --p-radius-sm:10px;     /* buttons, chips            */
  --p-border:rgba(255,255,255,.10);
  --p-border-strong:rgba(255,255,255,.20);
  --p-shadow-sm:0 2px 6px rgba(0,0,0,.28);
  --p-shadow:0 14px 34px -12px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.30);
  --p-shadow-lg:0 34px 64px -16px rgba(0,0,0,.62), 0 10px 24px rgba(0,0,0,.35);
  --p-glow:0 12px 26px -8px rgba(225,22,29,.50);
  --p-ease:cubic-bezier(.22,.61,.36,1);
}
:root[data-theme="light"]{
  --p-border:rgba(16,24,40,.10);
  --p-border-strong:rgba(16,24,40,.18);
  --p-shadow-sm:0 1px 3px rgba(16,24,40,.08);
  --p-shadow:0 12px 30px -12px rgba(16,24,40,.20), 0 2px 8px rgba(16,24,40,.08);
  --p-shadow-lg:0 34px 60px -18px rgba(16,24,40,.26), 0 8px 18px rgba(16,24,40,.12);
}

/* ---- Base / typography --------------------------------------------------- */
body{
  font-family:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{ text-wrap:balance; }
::selection{ background:rgba(225,22,29,.30); color:#fff; }

/* Keyboard focus — visible and on-brand (mouse clicks stay clean) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,.theme-toggle:focus-visible{
  outline:2px solid var(--red); outline-offset:3px; border-radius:6px;
}

/* More generous vertical rhythm so sections breathe */
.section{ padding:clamp(66px,8vw,104px) 0; }
.lead{ margin-bottom:44px; }

/* Editorial section label: centred kicker gets flanking rules. Left-aligned
   kickers (which carry an inline style attr) are deliberately excluded. */
.kicker:not([style]){ display:flex; align-items:center; justify-content:center; gap:14px; }
.kicker:not([style])::before,.kicker:not([style])::after{
  content:""; width:26px; height:2px; background:var(--red); opacity:.65; border-radius:2px;
}
/* Left-hero eyebrow gets a leading accent bar */
.hero .eyebrow{ display:inline-flex; align-items:center; gap:11px; }
.hero .eyebrow::before{ content:""; width:30px; height:2px; background:var(--red); border-radius:2px; }

/* ---- Header / navigation ------------------------------------------------- */
header{ box-shadow:0 1px 0 rgba(255,255,255,.04), 0 18px 40px -28px rgba(0,0,0,.7); }
.brand{ transition:opacity .2s var(--p-ease); }
.brand:hover{ opacity:.88; }

/* Animated underline on top-level links (dropdown parents keep their ▾) */
.menu > a{ position:relative; transition:color .2s var(--p-ease); }
.menu > a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-7px; height:2px;
  background:var(--red); transition:right .32s var(--p-ease);
}
.menu > a:hover::after{ right:0; }
.menu .has-dropdown > a{ transition:color .2s var(--p-ease); }
.menu .has-dropdown:hover > a{ color:var(--red); }

/* Rounded, softly elevated dropdown */
.menu .dropdown{ border-radius:14px; overflow:hidden; box-shadow:var(--p-shadow-lg); border-color:var(--p-border-strong); }

/* Header CTA button — rounded with a confident hover */
.demo,.contact,.nav-actions .demo{
  border-radius:var(--p-radius-sm);
  transition:transform .25s var(--p-ease), box-shadow .25s var(--p-ease), background .25s var(--p-ease);
}
.demo:hover,.contact:hover{ transform:translateY(-2px); box-shadow:var(--p-glow); }
.theme-toggle{ transition:transform .25s var(--p-ease); }
.theme-toggle:hover{ transform:translateY(-1px) rotate(-8deg); }

/* ---- Unified card & panel system ---------------------------------------- */
.feature-card,.team-card,.report,.image-panel,.copy-panel,.service-media,
.service-gallery figure,.field-component,.photo-card,.yard-hero,.validation-copy,
.contact-form-wrap,.contact-info,.card,.benefit,.step,.compat div,
.architecture-main,.architecture-side,.architecture-integrated,.video-card,.video-tile{
  border-radius:var(--p-radius);
  border-color:var(--p-border);
  box-shadow:var(--p-shadow);
  transition:transform .4s var(--p-ease), box-shadow .4s var(--p-ease), border-color .4s var(--p-ease);
}
.step,.compat div,.meta{ border-radius:var(--p-radius-sm); }

/* Clip inner media to the rounded frame so nothing pokes past the corners */
.image-panel,.field-component,.architecture-main{ overflow:hidden; }

/* Lift on hover for the true "cards" (not full-bleed bands) */
.feature-card:hover,.team-card:hover,.report:hover,.field-component:hover,
.service-gallery figure:hover,.photo-card:hover,.card:hover,.benefit:hover{
  transform:translateY(-6px);
  box-shadow:var(--p-shadow-lg);
  border-color:var(--p-border-strong);
}

/* ---- Intentional image framing + motion --------------------------------- */
/* Cover-fit photos: gentle zoom on hover inside their clipped frame */
.feature-card img,.team-photo img,.report img,.field-component img,.service-media img,
.service-gallery img,.photo-card img,.image-panel img{
  transition:transform .6s var(--p-ease);
  backface-visibility:hidden;
}
.team-card:hover .team-photo img,.field-component:hover img,.photo-card:hover img,
.service-media:hover img,.image-panel:hover img{ transform:scale(1.055); }

/* Stand-alone images (not inside a clipping card) get their own frame */
.validation img,.portrait-wrap img{
  border-radius:var(--p-radius);
  box-shadow:var(--p-shadow);
}

/* Matted "product/diagram" panels (contain-fit) read as deliberate exhibits */
.report,.feature-card,.service-gallery figure{
  background-image:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.05),transparent 60%);
  background-repeat:no-repeat;
}

/* Hero stat + meta chips: soft, glassy, rounded */
.meta,.stat{
  border-radius:var(--p-radius-sm);
  border-color:var(--p-border-strong);
  backdrop-filter:blur(6px);
  box-shadow:var(--p-shadow-sm);
}

/* ---- Buttons / form controls -------------------------------------------- */
.btn,.contact-submit{
  border-radius:var(--p-radius-sm);
  transition:transform .25s var(--p-ease), box-shadow .25s var(--p-ease), background .25s var(--p-ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(0,0,0,.5); }
.contact-submit:hover{ transform:translateY(-2px); box-shadow:var(--p-glow); }
.card-link{ transition:transform .2s var(--p-ease); }
.card-link:hover{ transform:translateX(3px); }
.contact-field input,.contact-field textarea{ border-radius:var(--p-radius-sm); transition:border-color .2s var(--p-ease), box-shadow .2s var(--p-ease); }
.contact-field input:focus,.contact-field textarea:focus{ box-shadow:0 0 0 3px rgba(225,22,29,.18); }

/* ---- Motion: gentle reveal-on-scroll (progressive) ----------------------- */
/* Only active once JS confirms support (html.reveal-on); otherwise everything
   is fully visible. The hero is intentionally excluded to protect LCP. */
.reveal-on .section.reveal,
.reveal-on .architecture-integrated.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--p-ease), transform .7s var(--p-ease);
  will-change:opacity, transform;
}
.reveal-on .reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal-on .reveal{ opacity:1 !important; transform:none !important; }
  *{ scroll-behavior:auto; }
}

/* ---- Responsive polish --------------------------------------------------- */
/* Headings never clip: wrap long words as a safety net. */
h1,h2,h3,.hero h2,.section h2,.cta h2{ overflow-wrap:break-word; }

@media (max-width:640px){
  :root{ --p-radius:13px; }
  .section{ padding:52px 0; }

  /* Retune display type for narrow phones — the page CSS clamp() minimums were
     sized for desktop and overflowed small screens. !important because several
     page stylesheets set these at the same specificity; this layer is the single
     source of truth for the mobile scale. */
  h1{ font-size:clamp(30px,8.4vw,44px) !important; line-height:1.05; letter-spacing:-.02em; }
  .hero h2{ font-size:clamp(18px,5vw,25px) !important; margin:12px 0; }
  .hero p{ font-size:16px; }
  .section h2{ font-size:clamp(23px,6.2vw,34px) !important; }
  .cta h2{ font-size:clamp(25px,6.6vw,38px) !important; }
  .yard-copy h3,.arch-copy h3,.validation-copy h3,.copy-panel h3,.origin-copy h3{ font-size:clamp(22px,5.8vw,30px) !important; }
  .service-copy h2{ font-size:clamp(22px,5.8vw,30px) !important; }
  .lead{ font-size:16px; margin-bottom:32px; }
}

/* Services gallery: uniform 4:3 frames that fill edge-to-edge at a tasteful,
   balanced size (not the oversized natural-height fill). Center-crop trims only
   the extreme top/bottom, so the annotations (labels, arrows, callouts) stay
   within frame while the grid stays clean and consistent. */
.service-gallery figure{ background:transparent; }
.service-gallery img{
  width:100%; aspect-ratio:3/2; height:auto;
  object-fit:cover; object-position:center; padding:0;
}

/* Feature-card imagery: uniform size AND no cropping. The sources are
   portrait/near-square of differing shapes, so each sits FULLY (object-fit:
   contain) inside one consistent square frame on a subtle matte that matches
   the card — so every card is the same size and nothing is cut. */
.feature-cards{ align-items:stretch; }
.feature-card img{
  width:100%; aspect-ratio:1/1; height:auto; max-height:none;
  object-fit:contain; object-position:center; padding:12px;
  background:#f1f3f6;
}
:root:not([data-theme="light"]) .feature-card img{ background:#111417; }

/* ---- Image mosaic / photo-wall section ----------------------------------- */
.mosaic-wrap.mosaic-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
.mosaic-left .mosaic-copy{ order:2; }                 /* images on the left */
.mosaic-copy .kicker{ margin-bottom:12px; }
.mosaic-copy h2{ margin:0 0 16px; font-size:clamp(28px,3.4vw,46px); line-height:1.06; }
.mosaic-lead{ font-size:16px; line-height:1.75; margin-bottom:22px; }
.mosaic-actions{ margin:6px 0 0; }
.mosaic-btn{
  display:inline-block; background:linear-gradient(180deg,#e5242b,#c50f15); color:#fff;
  padding:13px 24px; border-radius:var(--p-radius-sm); font-weight:800; font-size:13px; letter-spacing:.02em;
  box-shadow:0 10px 24px -10px rgba(225,22,29,.55); transition:transform .25s var(--p-ease), box-shadow .25s var(--p-ease);
}
.mosaic-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(225,22,29,.62); }
.mosaic-full .mosaic-copy{ text-align:center; max-width:820px; margin:0 auto 36px; }
.mosaic-full .mosaic-copy h2,
.mosaic-full .mosaic-copy .kicker{ text-align:center !important; }
.mosaic-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mosaic-full .mosaic-grid{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.mosaic-grid figure{
  margin:0; border-radius:14px; overflow:hidden;
  border:1px solid var(--p-border); box-shadow:var(--p-shadow-sm);
  transition:transform .35s var(--p-ease), box-shadow .35s var(--p-ease);
}
.mosaic-grid figure:hover{ transform:translateY(-3px); box-shadow:var(--p-shadow); }
.mosaic-grid img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
@media (max-width:820px){
  .mosaic-wrap.mosaic-split{ grid-template-columns:1fr; gap:26px; }
  .mosaic-left .mosaic-copy{ order:0; }
}

/* ==========================================================================
   REFINED BLACK THEME  —  layered "luxury black" surfaces (Linear / Vercel /
   Stripe direction). Scoped to the dark theme via :root:not([data-theme=light])
   so the light theme is completely untouched. Refines the design tokens the
   page CSS already uses, then layers depth on top.
   ========================================================================== */
:root:not([data-theme="light"]){
  --ink:#090909;                       /* base background            */
  --line:rgba(255,255,255,.08);        /* refined hairline borders   */
  --muted:#b4b4b4;                     /* neutral secondary text     */
  --p-border:rgba(255,255,255,.08);
  --p-border-strong:rgba(255,255,255,.16);
  --p-surface:linear-gradient(180deg,#191919,#131313);
  --p-elevated:linear-gradient(180deg,#212121,#181818);
  --p-hi:inset 0 1px 0 rgba(255,255,255,.06);   /* top highlight line */
  --p-shadow-sm:0 2px 8px rgba(0,0,0,.5);
  --p-shadow:0 20px 50px -20px rgba(0,0,0,.8), 0 6px 16px -8px rgba(0,0,0,.55);
  --p-shadow-lg:0 44px 90px -28px rgba(0,0,0,.9), 0 14px 34px -12px rgba(0,0,0,.6);
}

/* Ambient background — a whisper of brand light from the top, over near-black,
   so the page reads as layered depth rather than one flat colour. */
:root:not([data-theme="light"]) body{
  background:
    radial-gradient(1200px 680px at 50% -12%, rgba(225,22,29,.05), transparent 58%),
    #090909;
  background-attachment:fixed;
}

/* Layered card / panel surfaces + top highlight + premium shadow */
:root:not([data-theme="light"]) .feature-card,
:root:not([data-theme="light"]) .team-card,
:root:not([data-theme="light"]) .report,
:root:not([data-theme="light"]) .image-panel,
:root:not([data-theme="light"]) .copy-panel,
:root:not([data-theme="light"]) .service-media,
:root:not([data-theme="light"]) .field-component,
:root:not([data-theme="light"]) .photo-card,
:root:not([data-theme="light"]) .validation-copy,
:root:not([data-theme="light"]) .contact-info,
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .benefit,
:root:not([data-theme="light"]) .step,
:root:not([data-theme="light"]) .compat div,
:root:not([data-theme="light"]) .arch-point,
:root:not([data-theme="light"]) .architecture-side{
  background:var(--p-surface);
  border-color:var(--p-border);
  box-shadow:var(--p-hi), var(--p-shadow);
}
:root:not([data-theme="light"]) .feature-card:hover,
:root:not([data-theme="light"]) .team-card:hover,
:root:not([data-theme="light"]) .report:hover,
:root:not([data-theme="light"]) .field-component:hover,
:root:not([data-theme="light"]) .photo-card:hover,
:root:not([data-theme="light"]) .card:hover,
:root:not([data-theme="light"]) .benefit:hover{
  box-shadow:var(--p-hi), var(--p-shadow-lg);
  border-color:var(--p-border-strong);
}

/* Secondary surface for the alternating sections, with a hairline top light */
:root:not([data-theme="light"]) .alt{
  background:#0d0d0d;
  border-top:1px solid var(--p-border);
  border-bottom:1px solid var(--p-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.028);
}

/* Premium glass header */
:root:not([data-theme="light"]) header{
  background:rgba(10,10,10,.66);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid var(--p-border);
}

/* Elegant CTA band — dark and expensive, brand light as an accent glow rather
   than a flat red slab (keeps the accent from being overused). */
:root:not([data-theme="light"]) .cta{
  background:
    radial-gradient(760px 320px at 50% 128%, rgba(225,22,29,.24), transparent 60%),
    linear-gradient(180deg,#161616,#0b0b0b);
  border-top:1px solid var(--p-border);
  border-bottom:1px solid var(--p-border);
}
:root:not([data-theme="light"]) .cta p{ color:#c9c9c9; }

/* ---- Buttons ------------------------------------------------------------- */
/* Accent buttons: subtle gradient + soft brand-tinted shadow */
:root:not([data-theme="light"]) .demo,
:root:not([data-theme="light"]) .contact,
:root:not([data-theme="light"]) .contact-submit{
  background:linear-gradient(180deg,#e5242b,#c50f15);
  box-shadow:var(--p-hi), 0 10px 24px -10px rgba(225,22,29,.55);
}
:root:not([data-theme="light"]) .demo:hover,
:root:not([data-theme="light"]) .contact:hover,
:root:not([data-theme="light"]) .contact-submit:hover{
  box-shadow:var(--p-hi), 0 14px 30px -8px rgba(225,22,29,.62);
}
/* Ghost / outline button: refined glass */
:root:not([data-theme="light"]) .btn{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
:root:not([data-theme="light"]) .btn:hover{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.34); }

/* ---- Forms --------------------------------------------------------------- */
:root:not([data-theme="light"]) .contact-form-wrap{ background:linear-gradient(180deg,#161616,#101010); }
:root:not([data-theme="light"]) .contact-field input,
:root:not([data-theme="light"]) .contact-field textarea{
  background:#121212; border-color:var(--p-border); color:#f2f2f2;
}
:root:not([data-theme="light"]) .contact-field input::placeholder,
:root:not([data-theme="light"]) .contact-field textarea::placeholder{ color:#6f6f6f; }
:root:not([data-theme="light"]) .contact-field input:focus,
:root:not([data-theme="light"]) .contact-field textarea:focus{
  border-color:rgba(225,22,29,.6); background:#141414;
}

/* ---- Nav dropdown -------------------------------------------------------- */
:root:not([data-theme="light"]) .menu .dropdown{
  background:rgba(17,17,17,.92);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}

/* ---- Rich-text tables ---------------------------------------------------- */
:root:not([data-theme="light"]) .rte-content table td,
:root:not([data-theme="light"]) .rte-content table th{ border-color:var(--p-border); }
:root:not([data-theme="light"]) .rte-content table th{ background:rgba(255,255,255,.045); }
:root:not([data-theme="light"]) .rte-content tbody tr{ transition:background .2s var(--p-ease); }
:root:not([data-theme="light"]) .rte-content tbody tr:hover{ background:rgba(255,255,255,.03); }

/* ---- Premium scrollbar (dark) -------------------------------------------- */
:root:not([data-theme="light"]){ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
:root:not([data-theme="light"]) ::-webkit-scrollbar{ width:11px; height:11px; }
:root:not([data-theme="light"]) ::-webkit-scrollbar-track{ background:transparent; }
:root:not([data-theme="light"]) ::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14); border-radius:9px;
  border:3px solid transparent; background-clip:content-box;
}
:root:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.26); background-clip:content-box; }