/*
Theme Name: LSC Electric Placeholder
Theme URI: https://lscelectric.com/
Author: BlueStar Communications Group
Author URI: https://bluestarcg.com/
Description: One-page placeholder for LSC Electric while the full site is built. Replaced by the full LSC theme at launch.
Version: 1.2
License: Proprietary
Text Domain: lsc-placeholder
*/

/* LSC Electric design tokens
 * GENERATED from lsc-electric-design-tokens.json by output/Lux/lsc-electric/design-system/gen_css.py
 * Do not hand-edit. Edit the JSON and re-run the generator.
 * BSCG-authored internal working system, 10/29/2026. Not a client brand guide.
 * Standard: BKM/expert-knowledge/lsc-electric-visual-brand.md
 */
/* Font files: input/LSC Electric/fonts/Archivo/ (Archivo-VariableFont_wdth,wght.ttf, Archivo-Italic-VariableFont_wdth,wght.ttf, OFL.txt).
 * Self-host as woff2 and declare the axis ranges, path relative to the theme:
 * @font-face { font-family: "Archivo"; src: url("fonts/archivo-variable.woff2") format("woff2-variations"), url("fonts/archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
 */
:root {
  /* Color: raw values */
  --lsc-navy: #01274C;
  --lsc-navy-deep: #001B36;
  --lsc-blue: #27A3F7;
  --lsc-link: #0A63A8;
  --lsc-navy-hover: #0A3563;
  --lsc-field-border: #7A8692;
  --lsc-error: #B42318;
  --lsc-ink: #14202E;
  --lsc-muted: #55616E;
  --lsc-muted-on-dark: #B8C4D1;
  --lsc-paper: #F4F6F8;
  --lsc-white: #FFFFFF;
  --lsc-line: #D5DBE2;
  --lsc-line-on-dark: rgba(255,255,255,0.18);

  /* Color: roles (the theme and the social kit use these, not the raw values) */
  --lsc-c-text: var(--lsc-ink);
  --lsc-c-text-muted: var(--lsc-muted);
  --lsc-c-heading: var(--lsc-navy);
  --lsc-c-link: var(--lsc-link);
  --lsc-c-link-hover: var(--lsc-navy);
  --lsc-c-surface: var(--lsc-white);
  --lsc-c-surface-alt: var(--lsc-paper);
  --lsc-c-surface-dark: var(--lsc-navy);
  --lsc-c-surface-darker: var(--lsc-navy-deep);
  --lsc-c-text-on-dark: var(--lsc-white);
  --lsc-c-text-muted-on-dark: var(--lsc-muted-on-dark);
  --lsc-c-accent-on-dark: var(--lsc-blue);  /* display type 32px+ at 700+, icons and rules only; never text on light */
  --lsc-c-rule: var(--lsc-line);
  --lsc-c-rule-on-dark: var(--lsc-line-on-dark);
  --lsc-c-btn-bg: var(--lsc-navy);
  --lsc-c-btn-text: var(--lsc-white);
  --lsc-c-btn-bg-hover: var(--lsc-blue);  /* bright blue sweeps in from the left; navy text on it is 5.5:1 (Bryan 11/05/2026) */
  --lsc-c-btn-text-hover: var(--lsc-navy);
  --lsc-c-btn-on-dark-bg: var(--lsc-white);
  --lsc-c-btn-on-dark-text: var(--lsc-navy);
  --lsc-c-btn-on-dark-bg-hover: var(--lsc-blue);
  --lsc-c-btn-on-dark-text-hover: var(--lsc-navy);
  --lsc-c-field-border: var(--lsc-field-border);
  --lsc-c-field-border-error: var(--lsc-error);
  --lsc-c-error-text: var(--lsc-error);
  --lsc-c-focus: var(--lsc-link);
  --lsc-c-focus-on-dark: var(--lsc-blue);
  --lsc-c-underline-hover: var(--lsc-blue);  /* hover underlines and nav rules on every ground (Bryan 11/05/2026); a mark, never text */

  /* Type: one variable family, Archivo (wdth 62..125, wght 100..900) */
  --lsc-font: "Archivo", Arial, sans-serif;
  --lsc-width-wide: 125%;    /* headlines */
  --lsc-width-normal: 100%;  /* reading */
  --lsc-width-narrow: 80%;   /* scanning: labels, nav, buttons, titles, facts, meta. Never body, never below 14px */
  --lsc-display-stretch: 80%;
  --lsc-display-weight: 800;
  --lsc-display-leading: 0.98;
  --lsc-display-tracking: 0;
  --lsc-h2-stretch: 80%;
  --lsc-h2-weight: 800;
  --lsc-h2-leading: 1.02;
  --lsc-h2-tracking: 0;
  --lsc-h3-stretch: 100%;
  --lsc-h3-weight: 700;
  --lsc-h3-leading: 1.15;
  --lsc-h3-tracking: 0;
  --lsc-h4-stretch: 80%;
  --lsc-h4-weight: 700;
  --lsc-h4-leading: 1.3;
  --lsc-h4-tracking: 0;
  --lsc-lede-stretch: 100%;
  --lsc-lede-weight: 400;
  --lsc-lede-leading: 1.5;
  --lsc-lede-tracking: 0;
  --lsc-body-stretch: 100%;
  --lsc-body-weight: 400;
  --lsc-body-leading: 1.6;
  --lsc-body-tracking: 0;
  --lsc-small-stretch: 100%;
  --lsc-small-weight: 400;
  --lsc-small-leading: 1.5;
  --lsc-small-tracking: 0;
  --lsc-label-stretch: 80%;
  --lsc-label-weight: 600;
  --lsc-label-leading: 1.3;
  --lsc-label-tracking: 0;
  --lsc-fact-stretch: 80%;
  --lsc-fact-weight: 700;
  --lsc-fact-leading: 1.2;
  --lsc-fact-tracking: 0;
  --lsc-meta-stretch: 80%;
  --lsc-meta-weight: 400;
  --lsc-meta-leading: 1.4;
  --lsc-meta-tracking: 0;
  --lsc-strong-weight: 600;
  --lsc-figures: tabular-nums;

  /* Type scale, web: fluid from a true 390 px phone to a 1280 px desktop */
  --lsc-fs-display: clamp(37px, 24.29px + 3.258vw, 66px);
  --lsc-fs-display-desktop: 66px;
  --lsc-fs-display-phone: 37px;
  --lsc-fs-h2: clamp(30px, 24.30px + 1.461vw, 43px);
  --lsc-fs-h2-desktop: 43px;
  --lsc-fs-h2-phone: 30px;
  --lsc-fs-h3: clamp(22px, 20.25px + 0.449vw, 26px);
  --lsc-fs-h3-desktop: 26px;
  --lsc-fs-h3-phone: 22px;
  --lsc-fs-h4: clamp(18px, 17.12px + 0.225vw, 20px);
  --lsc-fs-h4-desktop: 20px;
  --lsc-fs-h4-phone: 18px;
  --lsc-fs-lede: clamp(18px, 17.12px + 0.225vw, 20px);
  --lsc-fs-lede-desktop: 20px;
  --lsc-fs-lede-phone: 18px;
  --lsc-fs-body: clamp(17px, 16.56px + 0.112vw, 18px);
  --lsc-fs-body-desktop: 18px;
  --lsc-fs-body-phone: 17px;
  --lsc-fs-small: clamp(15px, 15.00px + 0.000vw, 15px);
  --lsc-fs-small-desktop: 15px;
  --lsc-fs-small-phone: 15px;
  --lsc-fs-label: clamp(15px, 15.00px + 0.000vw, 15px);
  --lsc-fs-label-desktop: 15px;
  --lsc-fs-label-phone: 15px;
  --lsc-fs-fact: clamp(22px, 20.25px + 0.449vw, 26px);
  --lsc-fs-fact-desktop: 26px;
  --lsc-fs-fact-phone: 22px;
  --lsc-fs-meta: clamp(14px, 13.56px + 0.112vw, 15px);
  --lsc-fs-meta-desktop: 15px;
  --lsc-fs-meta-phone: 14px;

  /* Type scale, social: sized off canvas width. Use cqw inside a container-type:inline-size canvas */
  --lsc-social-headline: 7.4cqw;
  --lsc-social-sub: 3.5cqw;
  --lsc-social-cta: 3.1cqw;
  --lsc-social-small: 2.9cqw;

  /* Space: 4 px base */
  --lsc-space-1: 4px;
  --lsc-space-2: 8px;
  --lsc-space-3: 12px;
  --lsc-space-4: 16px;
  --lsc-space-5: 24px;
  --lsc-space-6: 32px;
  --lsc-space-7: 48px;
  --lsc-space-8: 64px;
  --lsc-space-9: 96px;
  --lsc-space-10: 128px;
  --lsc-section-pad: clamp(56px, 38.47px + 4.494vw, 96px);
  --lsc-container: 1200px;
  --lsc-gutter: clamp(16px, 8.99px + 1.798vw, 32px);
  --lsc-measure: 66ch;

  /* Radius and borders: radius on buttons and fields only */
  --lsc-radius-control: 3px;
  --lsc-radius-none: 0;
  --lsc-hairline: 1px;
  --lsc-field-border-width: 1px;
  --lsc-focus-ring: 3px;
  --lsc-focus-offset: 2px;

  /* Motion: all of it off under prefers-reduced-motion */
  --lsc-drift-scale: 1.05;
  --lsc-drift-duration: 22s;
  --lsc-reveal-rise: 16px;
  --lsc-reveal-duration: 400ms;
  --lsc-reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lsc-hover-duration: 150ms;

  /* Imagery: one grade for every stock source */
  --lsc-photo-grade: saturate(0.85) contrast(1.06) brightness(0.97);
  --lsc-photo-tint: #01274C;
  --lsc-photo-tint-opacity: 0.12;
  --lsc-photo-block: rgba(1, 39, 76, 0.94);  /* flat navy block behind type on a photo */
}

@media (prefers-reduced-motion: reduce) {
  :root { --lsc-drift-scale: 1; --lsc-reveal-rise: 0px; --lsc-reveal-duration: 0ms; --lsc-hover-duration: 0ms; }
}

@font-face{font-family:"Archivo";src:url("assets/fonts/Archivo-Variable.ttf") format("truetype");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--lsc-c-surface);color:var(--lsc-c-text);font-family:var(--lsc-font);font-size:var(--lsc-fs-body);line-height:1.6;font-stretch:100%;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul{margin:0}
ul{padding:0;list-style:none}
.wrap{max-width:calc(var(--lsc-container) + 2 * var(--lsc-gutter));margin:0 auto;padding:0 var(--lsc-gutter)}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:var(--lsc-focus-ring) solid var(--lsc-c-focus);outline-offset:var(--lsc-focus-offset)}
/* Every hover underline is bright blue (Bryan 11/05/2026). The rules that turn the underline on set only the line, so this sets its color and weight once. */
a:hover,a:hover .h4{text-decoration-color:var(--lsc-c-underline-hover);text-decoration-thickness:2px}
.dark :focus-visible{outline-color:var(--lsc-c-focus-on-dark)}

/* Type roles */
.display{font-stretch:80%;font-weight:800;font-size:var(--lsc-fs-display);line-height:.98;letter-spacing:0;text-transform:uppercase}
.h2{font-stretch:80%;font-weight:800;font-size:var(--lsc-fs-h2);line-height:1.02;letter-spacing:0;text-transform:uppercase;color:var(--lsc-c-heading)}
.h3{font-stretch:100%;font-weight:700;font-size:var(--lsc-fs-h3);line-height:1.15;color:var(--lsc-c-heading)}
.h4{font-stretch:80%;font-weight:700;font-size:var(--lsc-fs-h4);line-height:1.3;color:var(--lsc-c-heading)}
.lede{font-size:var(--lsc-fs-lede);line-height:1.5}
.meta{font-stretch:80%;font-weight:400;font-size:var(--lsc-fs-meta);line-height:1.4}
.fact{font-stretch:80%;font-weight:700;font-size:var(--lsc-fs-fact);line-height:1.2;font-variant-numeric:tabular-nums}
.dark{background:var(--lsc-c-surface-dark);color:var(--lsc-c-text-on-dark)}
.dark .h2,.dark .h3,.dark .h4{color:var(--lsc-c-text-on-dark)}
.muted{color:var(--lsc-c-text-muted)}
.dark .muted{color:var(--lsc-c-text-muted-on-dark)}

/* Controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--lsc-radius-control);background:var(--lsc-c-btn-bg);color:var(--lsc-c-btn-text);font-stretch:80%;font-weight:600;font-size:17px;line-height:1.2;text-decoration:none;transition:background var(--lsc-hover-duration)}
.btn{position:relative;overflow:hidden;isolation:isolate}
/* Hover: bright blue sweeps in from the left and the text turns navy (Bryan 11/05/2026). Pure CSS, instant under reduced motion. */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lsc-c-btn-bg-hover);transform:scaleX(0);transform-origin:left;transition:transform 260ms cubic-bezier(.45,0,.2,1)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover,.btn:focus-visible{color:var(--lsc-c-btn-text-hover);transition:color 120ms 80ms}
.btn svg{transition:transform var(--lsc-hover-duration)}.btn:hover svg{transform:translateX(3px)}
.dark .btn,.btn.on-dark{background:var(--lsc-c-btn-on-dark-bg);color:var(--lsc-c-btn-on-dark-text)}
.dark .btn::before,.btn.on-dark::before{background:var(--lsc-c-btn-on-dark-bg-hover)}
.dark .btn:hover,.btn.on-dark:hover,.dark .btn:focus-visible{color:var(--lsc-c-btn-on-dark-text-hover)}
.more{display:inline-flex;align-items:center;gap:8px;font-stretch:80%;font-weight:600;font-size:17px;color:var(--lsc-c-link);text-decoration:none}
.more svg{transition:transform var(--lsc-hover-duration)}
.more:hover{color:var(--lsc-c-link-hover);text-decoration-line:underline;text-underline-offset:4px}
.more:hover svg{transform:translateX(3px)}
.dark .more{color:var(--lsc-c-text-on-dark)}

/* Photos: one grade for every stock source */
.ph{position:relative;overflow:hidden;background:var(--lsc-navy)}
.ph img{width:100%;height:100%;object-fit:cover;filter:var(--lsc-photo-grade)}
.ph::after{content:"";position:absolute;inset:0;background:var(--lsc-photo-tint);opacity:var(--lsc-photo-tint-opacity);mix-blend-mode:multiply;pointer-events:none}

/* ---------- Top bar ---------- */
.topbar{background:var(--lsc-c-surface-darker);color:var(--lsc-c-text-muted-on-dark)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:24px}
.topbar a{color:var(--lsc-c-text-on-dark);text-decoration:none;font-weight:600}
.topbar a:hover{text-decoration-line:underline;text-underline-offset:3px}
.topbar .r{display:flex;gap:28px}
.topbar strong{color:var(--lsc-c-text-on-dark);font-weight:700}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--lsc-c-surface);border-bottom:1px solid var(--lsc-c-rule)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:114px}
.brand{display:block;flex:none;padding:15px 0}
.brand img{width:220px;height:auto}
.brand .sm{display:none}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-stretch:80%;font-weight:600;font-size:17px;color:var(--lsc-c-heading);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.nav a{position:relative}
/* Hover: a bright blue line grows from the left under the nav item */
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--lsc-c-underline-hover);transform:scaleX(0);transform-origin:left;transition:transform 220ms cubic-bezier(.45,0,.2,1)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.head-actions{display:flex;align-items:center;gap:24px}
.head-phone{font-stretch:80%;font-weight:700;font-size:19px;color:var(--lsc-c-heading);text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.head-phone:hover{text-decoration-line:underline;text-underline-offset:4px}
.menu-btn,.call-btn{display:none;align-items:center;justify-content:center;gap:6px;height:44px;min-width:44px;padding:0 14px;border-radius:var(--lsc-radius-control);border:1px solid var(--lsc-c-field-border);background:var(--lsc-c-surface);color:var(--lsc-c-heading);font:600 16px/1 var(--lsc-font);font-stretch:80%;text-decoration:none;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:760px;display:flex;align-items:flex-end;background:var(--lsc-navy-deep)}
.hero .ph{overflow:hidden}
.hero .ph{position:absolute;inset:0}
.hero .ph img{object-position:64% 50%;transform-origin:70% 40%;animation:drift var(--lsc-drift-duration) ease-out forwards}
@keyframes drift{from{transform:scale(1)}to{transform:scale(var(--lsc-drift-scale))}}
.hero{--hero-block-w:min(100%, calc((100vw - var(--lsc-container)) / 2 + 820px))}
.hero-block{position:relative;z-index:1;width:var(--hero-block-w);background:var(--lsc-photo-block);padding:68px 64px 72px max(var(--lsc-gutter), calc((100vw - var(--lsc-container)) / 2))}
.hero h1{color:var(--lsc-c-text-on-dark);max-width:12.5em}
.hero h1 .accent{white-space:nowrap}
.hero h1 .accent{color:var(--lsc-c-accent-on-dark);display:block}
.hero .lede{margin-top:28px;max-width:34em;color:var(--lsc-c-text-muted-on-dark)}
.hero .lede a{color:var(--lsc-c-text-on-dark);font-weight:600;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.hero .lede a:hover{text-decoration-line:underline;text-underline-offset:3px}
.hero .actions{margin-top:40px}


/* Hero: the see-through block sits inside the photo, photo showing below it (Bryan picked this, 11/04) */
.hero--inset{padding-bottom:64px}
.hero--inset .hero-block{background:rgba(1,39,76,.9)}
/* ---------- Section scaffolding ---------- */
.section{padding:var(--lsc-section-pad) 0}
.alt{background:var(--lsc-c-surface-alt)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px}

/* ---------- Sector grid ---------- */
.sectors{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.sector{display:block;text-decoration:none}
.sector .ph{aspect-ratio:4/5}
.sector .ph img{transition:transform 600ms var(--lsc-reveal-ease)}
.sector:hover .ph img{transform:scale(1.035)}
.sector .h4{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0 14px;border-bottom:1px solid var(--lsc-c-rule)}
.sector .h4 svg{flex:none;color:var(--lsc-c-link);transition:transform var(--lsc-hover-duration)}
.sector:hover .h4 svg{transform:translateX(3px)}
.sector .h4{position:relative}
.sector .h4::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--lsc-c-underline-hover);transform:scaleX(0);transform-origin:left;transition:transform 300ms cubic-bezier(.45,0,.2,1)}
.sector:hover .h4::after,.sector:focus-visible .h4::after{transform:scaleX(1)}

/* ---------- Service rows ---------- */
.services{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px}
.services .intro .lede{margin-top:20px;color:var(--lsc-c-text-muted)}
.services .intro .more{margin-top:32px}
.rows{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;border-top:1px solid var(--lsc-c-rule)}
.rows li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:20px;align-items:start;padding:26px 0 28px;border-bottom:1px solid var(--lsc-c-rule)}
/* Service icons: bright blue, approved exception (Bryan 11/04/2026, see lsc-electric-visual-brand.md). Decorative, aria-hidden. */
.svc-icon{--svc-icon:var(--lsc-blue);color:var(--svc-icon);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:-5px}
/* Draw-on: each line traces in once, staggered, when the rows scroll into view. Off without JS and under reduced motion. */
.js .rows.draw .svc-icon{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1100ms cubic-bezier(.45,0,.2,1)}
.js .rows.draw.in .svc-icon{stroke-dashoffset:0}
.rows li:nth-child(2) .svc-icon{transition-delay:120ms}.rows li:nth-child(3) .svc-icon{transition-delay:240ms}.rows li:nth-child(4) .svc-icon{transition-delay:360ms}.rows li:nth-child(5) .svc-icon{transition-delay:480ms}.rows li:nth-child(6) .svc-icon{transition-delay:600ms}
@media (prefers-reduced-motion:reduce){.js .rows.draw .svc-icon{stroke-dashoffset:0;transition:none}}
/* Hover: the row's icon traces itself again */
@keyframes svc-redraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:no-preference){.rows .svc-icon{stroke-dasharray:1}.rows li:hover .svc-icon{animation:svc-redraw 900ms cubic-bezier(.45,0,.2,1)}}
.rows .h4{margin-bottom:6px}
.rows p{color:var(--lsc-c-text-muted)}

/* ---------- How we work ---------- */
.plan-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:stretch}
.plan-photo{min-height:560px}
.plan-photo img{position:absolute;inset:0;object-position:0% 50%}
.plan-body{padding:8px 0}
.plan-body .h2{max-width:13em}
.plan-body .lede{margin-top:20px;max-width:32em;color:var(--lsc-c-text-muted)}
.steps{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;column-gap:40px;row-gap:36px;margin:44px 0 40px}
.steps li{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:10px;border-top:2px solid var(--lsc-c-heading);padding-top:20px}
.steps .h3{font-size:22px}
.steps p{color:var(--lsc-c-text-muted)}

/* ---------- Proof strip ---------- */
.proof{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--lsc-c-rule);border-bottom:1px solid var(--lsc-c-rule);margin-top:var(--lsc-section-pad)}
.proof li{padding:28px 28px 28px 0;color:var(--lsc-c-heading)}
.proof li+li{padding-left:28px;border-left:1px solid var(--lsc-c-rule)}
.proof li:last-child{padding-right:0}

/* ---------- Owner panel ---------- */
.owner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:center}
.portrait{margin:0;position:relative}
.portrait-slot{position:relative;aspect-ratio:4/5;background:#E4E8ED;overflow:hidden}
.portrait-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.06);transform-origin:50% 100%}
.portrait-slot svg.sil{position:absolute;inset:0;width:100%;height:100%;color:var(--lsc-muted-on-dark);opacity:.55}
.name-block{position:absolute;left:0;bottom:0;background:var(--lsc-photo-block);color:var(--lsc-c-text-on-dark);padding:22px 28px 24px;display:flex;flex-direction:column;gap:6px;min-width:62%}
.name-block .name{font-stretch:80%;font-weight:800;font-size:clamp(26px,20px + 1vw,34px);line-height:1;letter-spacing:0;text-transform:uppercase}
.name-block .role{color:var(--lsc-c-text-muted-on-dark)}
.owner-copy .h2{max-width:12em}
.owner-copy .lede{margin-top:24px;max-width:32em}
.owner-facts{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin:36px 0 36px;border-top:1px solid var(--lsc-c-rule)}
.owner-facts div{padding:18px 0;border-bottom:1px solid var(--lsc-c-rule)}
.owner-facts dt{color:var(--lsc-c-text-muted);margin-bottom:4px}
.owner-facts dd{margin:0}

/* ---------- GC band ---------- */
.gc-sec{border-bottom:1px solid var(--lsc-c-rule)}
.gc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.gc p{margin-top:18px;max-width:34em;color:var(--lsc-c-text-muted)}
.gc .mail{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-left:48px;border-left:1px solid var(--lsc-c-rule)}
.gc .mail .meta{color:var(--lsc-c-text-muted)}

/* ---------- Careers ---------- */
.careers{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}
.careers .intro p{margin-top:20px;max-width:28em}
.careers .intro .btn{margin-top:36px}
.jobs{border-top:1px solid var(--lsc-c-rule-on-dark)}
.jobs a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:26px 0;border-bottom:1px solid var(--lsc-c-rule-on-dark);text-decoration:none}
.jobs .meta{margin-top:4px;color:var(--lsc-c-text-muted-on-dark)}
.jobs svg{color:var(--lsc-c-accent-on-dark);transition:transform var(--lsc-hover-duration)}
.jobs a:hover .h4{text-decoration-line:underline;text-underline-offset:4px}
.jobs a:hover svg{transform:translateX(4px)}

/* ---------- Posts ---------- */
.posts{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.post{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start;text-decoration:none}
.post .ph{aspect-ratio:1/1}
.post .meta{color:var(--lsc-c-text-muted);margin-bottom:10px}
.post .h4{font-size:22px;line-height:1.25}
.post:hover .h4{text-decoration-line:underline;text-underline-offset:4px}

/* ---------- Quote band ---------- */
.quote{background:var(--lsc-c-surface-dark)}
.quote .wrap{display:flex;justify-content:space-between;align-items:center;gap:48px}
.quote p{margin-top:16px;color:var(--lsc-c-text-muted-on-dark)}
.quote p a{color:var(--lsc-c-text-on-dark);font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.quote .actions{flex:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--lsc-c-surface-darker);color:var(--lsc-c-text-muted-on-dark);border-top:1px solid var(--lsc-c-rule-on-dark)}
.foot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,2fr) minmax(0,2fr);gap:48px;padding:80px 0 64px}
.foot .logo img{width:300px}
.foot .line{margin-top:28px;max-width:22em}
.foot h3{font-stretch:80%;font-weight:600;font-size:15px;color:var(--lsc-c-text-on-dark);margin-bottom:16px}
.foot li+li{margin-top:10px}
.foot a{text-decoration:none;color:var(--lsc-c-text-muted-on-dark)}
.foot a:hover{color:var(--lsc-c-text-on-dark);text-decoration-line:underline;text-underline-offset:3px}
.foot address{font-style:normal}
.foot .contact a{color:var(--lsc-c-text-on-dark);font-weight:600}
.legal a{text-decoration:none}.legal a:hover{text-decoration-line:underline}
.legal .social{display:flex;gap:24px}
.legal .social a{display:inline-flex;align-items:center;gap:8px;color:inherit}
.legal .social svg{flex:none;color:var(--lsc-c-text-on-dark)}
.legal .social a:hover{color:var(--lsc-c-text-on-dark)}
.legal{display:flex;justify-content:space-between;gap:24px;padding:22px 0 26px;border-top:1px solid var(--lsc-c-rule-on-dark)}

/* ---------- Phone action bar ---------- */
.mbar{display:none}

/* ---------- Reveal (only when JS runs; content is visible without it) ---------- */
.js .reveal{opacity:0;transform:translateY(var(--lsc-reveal-rise));transition:opacity var(--lsc-reveal-duration) var(--lsc-reveal-ease),transform var(--lsc-reveal-duration) var(--lsc-reveal-ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hero .ph img{animation:none}.js .reveal{opacity:1;transform:none}
  .btn,.btn::before,.btn svg,.nav a::after,.sector .h4::after{transition:none}}

/* ---------- Load and scroll motion (Bryan's picks from the motion study, 11/05/2026) ----------
   Everything here is scoped to html.motion, which the head script adds only when JS runs and the
   visitor has not asked for reduced motion. If the page script never finishes, the head script
   drops the class after 3 s and everything shows. */
.mw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.mw>span{display:inline-block}
/* Hero: the navy block wipes in, the headline rises word by word, then the lede and button fade in */
.motion .hero-block{clip-path:inset(0 100% 0 0);transition:clip-path 600ms cubic-bezier(.65,0,.25,1)}
.motion .hero.wipe .hero-block{clip-path:inset(0 0 0 0)}
.motion .hero h1 .mw>span,.motion h2.h2 .mw>span{transform:translateY(108%);transition:transform 700ms cubic-bezier(.2,.7,.1,1)}
.motion .hero.go h1 .mw>span,.motion h2.h2.in .mw>span{transform:none}
.motion .hero .lede,.motion .hero .actions{opacity:0;transition:opacity 600ms ease}
.motion .hero.go .lede{opacity:1;transition-delay:650ms}.motion .hero.go .actions{opacity:1;transition-delay:800ms}
/* Ruled lines draw across: the four step rules, then the job rows */
.motion .steps li{border-top-color:transparent;position:relative}
.motion .steps li::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--lsc-c-heading);transform:scaleX(0);transform-origin:left;transition:transform 900ms cubic-bezier(.45,0,.2,1)}
.motion .steps.in li::before{transform:scaleX(1)}
.motion .steps li:nth-child(2)::before{transition-delay:150ms}.motion .steps li:nth-child(3)::before{transition-delay:300ms}.motion .steps li:nth-child(4)::before{transition-delay:450ms}
.motion .jobs a{border-bottom-color:transparent;position:relative}
.motion .jobs a::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--lsc-c-rule-on-dark);transform:scaleX(0);transform-origin:left;transition:transform 900ms cubic-bezier(.45,0,.2,1)}
.motion .jobs.in a::before{transform:scaleX(1)}
.motion .jobs a:nth-child(2)::before{transition-delay:150ms}.motion .jobs a:nth-child(3)::before{transition-delay:300ms}
/* Photos wipe open from the left; Tony's name block follows */
.motion .plan-photo,.motion .portrait-slot{clip-path:inset(0 100% 0 0);transition:clip-path 1000ms cubic-bezier(.65,0,.25,1)}
.motion .plan-grid.in .plan-photo,.motion .portrait.in .portrait-slot{clip-path:inset(0 0 0 0)}
.motion .name-block{transform:translateX(-24px);opacity:0;transition:transform 600ms cubic-bezier(.2,.7,.1,1) 700ms,opacity 400ms ease 700ms}
.motion .portrait.in .name-block{transform:none;opacity:1}
/* Printing never scrolls, so print shows every end state */
@media print{.mw>span,.hero .lede,.hero .actions,.name-block,.js .reveal{opacity:1!important;transform:none!important}.hero-block,.plan-photo,.portrait-slot{clip-path:none!important}.motion .steps li::before,.motion .jobs a::before{transform:none!important}}

/* ================= Tablet ================= */
@media (max-width:1180px){
  .nav{gap:22px}
  .head-phone{display:none}
  .sectors{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
}
@media (max-width:1020px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .sectors{grid-template-columns:repeat(3,1fr)}
  .services,.plan-grid,.gc,.careers,.owner{grid-template-columns:1fr;gap:40px}
  .plan-photo{min-height:0;aspect-ratio:16/9}
  .portrait{max-width:440px}

  .proof{grid-template-columns:1fr 1fr;justify-content:stretch}
  .proof li,.proof li+li{padding:20px 0;border-left:0;border-bottom:1px solid var(--lsc-c-rule)}
  .proof li:nth-last-child(-n+1){border-bottom:0}
  .gc .mail{padding-left:0;border-left:0}
  .posts{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}

/* ================= Phone ================= */
@media (max-width:640px){
  body{padding-bottom:64px}
  .topbar{display:none}
  .site-header .wrap{min-height:76px;gap:12px}
  .brand{padding:11px 0}
  .brand .lg{display:none}
  .brand .sm{display:block;width:140px}
  .head-actions{gap:8px}
  .head-actions .btn{display:none}
  .call-btn,.menu-btn{display:inline-flex;padding:0 12px;font-size:15px}
  .hero{min-height:0;display:block;padding-bottom:0;background:var(--lsc-navy-deep)}
  .hero .hero-block{background:var(--lsc-photo-block)}

  .hero .ph{position:relative;inset:auto;height:260px}
  .hero .ph img{object-position:72% 50%}
  .hero-block{width:100%;padding:36px var(--lsc-gutter) 44px}
  .hero h1 .accent{display:inline;white-space:normal}
  .hero h1 br.d{display:none}
  .hero .lede{margin-top:20px}
  .hero .actions{margin-top:28px}
  .hero .actions .btn{width:100%}
  .sec-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:28px}
  .sectors{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--lsc-gutter);gap:12px;margin:0 calc(-1 * var(--lsc-gutter));padding:0 var(--lsc-gutter) 6px;scrollbar-width:none}
  .sectors::-webkit-scrollbar{display:none}
  .sector{flex:0 0 66%;scroll-snap-align:start}
  .rows{grid-template-columns:1fr}
  .rows li{padding:20px 0 22px}
  .steps{grid-template-columns:1fr;grid-template-rows:none;row-gap:28px;margin:32px 0}
  .steps li{grid-row:auto;grid-template-rows:auto auto}
  .proof{grid-template-columns:1fr}
  .proof li,.proof li+li{padding:16px 0}
  .proof li:nth-last-child(-n+1){border-bottom:0}
  .portrait{max-width:none}
  .owner-facts{grid-template-columns:1fr}
  .post{grid-template-columns:96px 1fr;gap:18px}
  .post .h4{font-size:19px}
  .quote .wrap{flex-direction:column;align-items:flex-start;gap:28px}
  .quote .actions,.quote .actions .btn,.careers .intro .btn,.gc .mail .btn{width:100%}
  .foot{grid-template-columns:1fr 1fr;gap:36px 24px;padding:56px 0 40px}
  .foot>div:nth-child(-n+2){grid-column:1 / -1}
  .foot .logo img{width:240px}
  .legal{flex-direction:column;gap:6px}
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--lsc-c-surface);border-top:1px solid var(--lsc-c-rule);padding:8px var(--lsc-gutter) calc(8px + env(safe-area-inset-bottom));gap:8px}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:var(--lsc-radius-control);font:600 17px/1 var(--lsc-font);font-stretch:80%;text-decoration:none}
  .mbar .call{border:1px solid var(--lsc-c-heading);color:var(--lsc-c-heading)}
  .mbar .quote-link{background:var(--lsc-c-btn-bg);color:var(--lsc-c-btn-text)}
}
/* ---------- Placeholder adjustments ---------- */
.mbar{grid-template-columns:1fr!important}
.site-header .wrap{justify-content:space-between}
.foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.legal{justify-content:flex-start}
.plan .plan-grid{margin-bottom:0}
.gc-sec{border-bottom:0}