/* ============================================================================
   SEE Electrical — brand skin
   Dark theme off the supplied brand pack. Loaded LAST so it wins over the
   template's compiled Tailwind without touching that build.

   Palette (the only five approved):
     #080A09 base   #101312 surface   #6BEF72 accent   #F4F7F4 text   #68706B muted
   Two derived greys are used for TEXT only, because #68706B on #080A09 is
   3.89:1 and fails WCAG AA for body copy:
     #8B938E  6.30:1  muted body text
     #0E8114  the accent darkened for light surfaces (5.04:1 on white)
   ========================================================================== */

@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/chakra-petch-500.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/chakra-petch-600.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/chakra-petch-700.woff2) format('woff2')}
@font-face{font-family:'InterBrand';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'InterBrand';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'InterBrand';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'InterBrand';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-700.woff2) format('woff2')}

:root, .dark, [data-theme]{
  --se-base:#080A09; --se-surface:#101312; --se-accent:#6BEF72;
  --se-text:#F4F7F4; --se-muted:#68706B; --se-muted-text:#8B938E;
  --se-line:#232826;
  --se-accent-hover:#8AF390; --se-accent-press:#4FD657;
  --se-accent-12:rgba(107,239,114,.12); --se-accent-24:rgba(107,239,114,.24);

  /* shadcn tokens the template is built on — these do the heavy lifting */
  --background:150 11% 3.5%;
  --foreground:120 16% 96.3%;
  --card:160 9% 6.9%;            --card-foreground:120 16% 96.3%;
  --popover:160 9% 6.9%;         --popover-foreground:120 16% 96.3%;
  --primary:150 11% 3.5%;        --primary-foreground:120 16% 96.3%;
  --secondary:160 9% 6.9%;       --secondary-foreground:120 16% 96.3%;
  --muted:160 9% 6.9%;           --muted-foreground:143 4% 56.1%;
  --accent:123 80% 67.8%;        --accent-foreground:150 11% 3.5%;
  --destructive:0 72% 51%;       --destructive-foreground:120 16% 96.3%;
  --border:156 7% 14.7%;
  --input:156 7% 14.7%;
  --ring:123 80% 67.8%;
}

html,body{background:var(--se-base);color:var(--se-text)}
body{font-family:'InterBrand',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
     -webkit-font-smoothing:antialiased}

/* Headings echo the logo wordmark: wide-tracked technical sans.
   The lockup itself is tracked at 0.32em (measured); that is far too loose for
   running headings, so display type sits at 0.02-0.06em and only the small
   eyebrow labels go near the logo's tracking. */
h1,h2,h3,h4,h5,h6,.font-display{
  font-family:'Chakra Petch',ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.02em; text-wrap:balance;
}
h1{letter-spacing:.012em}
.text-xs.uppercase,.uppercase.tracking-widest,[class*="tracking-widest"]{letter-spacing:.22em!important}

/* --- the template's hardcoded light utilities ---------------------------- */
.bg-white{background-color:var(--se-surface)!important;color:var(--se-text)!important}
.text-white{color:var(--se-text)!important}
.border-white{border-color:var(--se-line)!important}
.bg-white\/10,.bg-white\/5{background-color:rgba(244,247,244,.06)!important}

/* --- links & focus ------------------------------------------------------- */
a{color:inherit}
a:hover{color:var(--se-accent)}
:focus-visible{outline:2px solid var(--se-accent);outline-offset:2px;border-radius:2px}

/* --- buttons: green reads as a live conductor, used sparingly ------------ */
.bg-accent{background-color:var(--se-accent)!important;color:var(--se-base)!important}
.bg-accent:hover{background-color:var(--se-accent-hover)!important}
.bg-accent:active{background-color:var(--se-accent-press)!important}
.text-accent{color:var(--se-accent)!important}
.border-accent{border-color:var(--se-accent)!important}

/* --- surfaces ------------------------------------------------------------ */
header{background:rgba(8,10,9,.88)!important;backdrop-filter:saturate(140%) blur(10px);
       border-bottom:1px solid var(--se-line)!important}
footer{background:var(--se-surface)!important;border-top:1px solid var(--se-line)}
.rounded-lg,.rounded-xl,.rounded-2xl{border-color:var(--se-line)}

/* Cards get a hairline and a faint conductor along the top edge on hover. */
.bg-card,.bg-secondary,.bg-muted{border:1px solid var(--se-line)}
.bg-card,.bg-secondary{position:relative;transition:border-color .18s ease,transform .18s ease}
.bg-card:hover,.bg-secondary:hover{border-color:var(--se-accent-24)}

/* --- circuit motif: section divider -------------------------------------- */
.se-trace{display:block;width:100%;height:14px;border:0;margin:0;
  background:
    linear-gradient(90deg,transparent,var(--se-line) 12%,var(--se-line) 88%,transparent) center/100% 1px no-repeat,
    radial-gradient(circle at 18% 50%,var(--se-accent) 0 3px,transparent 3.5px),
    radial-gradient(circle at 82% 50%,var(--se-accent) 0 3px,transparent 3.5px);
}

/* (the Google star SVGs this rule targeted were removed with the rest of the
   icon set; the rule is gone with them so no unapproved hex remains) */

/* --- mobile first: nothing may overflow at 320-430px --------------------- */
img,svg,video{max-width:100%;height:auto}
@media (max-width:430px){
  h1{font-size:clamp(1.9rem,8.4vw,2.5rem)!important;line-height:1.1!important}
  h2{font-size:clamp(1.4rem,6vw,1.9rem)!important}
  .container{padding-left:1rem;padding-right:1rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------------------------------------------------------------------------
   The template scopes an emerald accent (158 84% 44% / 160 84% 28%) inside the
   hero, dark bands, .bg-primary and the footer, and forces the button colour
   with !important. Those selectors beat a plain :root, so they are restated
   here with the brand green. This sheet loads last, so on equal specificity
   these win.
   ------------------------------------------------------------------------ */
#hero,.dark-band,.gradient-navy,.bg-primary,footer,header{
  --accent:123 80% 67.8%!important;
  --ring:123 80% 67.8%!important;
  --red:123 80% 67.8%!important;
  --red-light:123 80% 74%!important;
}
#hero .bg-accent,.dark-band .bg-accent,.gradient-navy .bg-accent,footer .bg-accent,
.bg-primary .bg-accent,#hero .hover\:bg-red-light:hover,.dark-band .hover\:bg-red-light:hover,
.bg-primary .hover\:bg-red-light:hover{
  background-color:var(--se-accent)!important;
  color:var(--se-base)!important;
}
#hero .bg-accent:hover,.dark-band .bg-accent:hover,footer .bg-accent:hover,
.bg-primary .bg-accent:hover{background-color:var(--se-accent-hover)!important}
.gradient-navy,.dark-band{background:linear-gradient(160deg,#080A09,#101312,#080A09)!important}

/* Typography has to beat the template's own .font-display (Outfit). */
body,body *{font-family:'InterBrand',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
h1,h2,h3,h4,h5,h6,.font-display,.font-display *{
  font-family:'Chakra Petch',ui-sans-serif,system-ui,sans-serif!important;
}

/* ---------------------------------------------------------------------------
   --primary is the dark page/footer ground in this skin, so the template's
   outline button (border-2 border-primary text-primary) rendered black on
   black. Those utilities are remapped to readable values; bg-primary itself
   is left alone because it is doing real work as a dark surface.
   ------------------------------------------------------------------------ */
.text-primary{color:var(--se-text)!important}
.border-primary{border-color:var(--se-muted)!important}
a.border-primary:hover,button.border-primary:hover,
.hover\:bg-primary:hover{background-color:var(--se-accent)!important;border-color:var(--se-accent)!important}
.hover\:bg-primary:hover,.hover\:text-primary-foreground:hover{color:var(--se-base)!important}
/* ============================================================================
   SEE Electrical — design layer
   Loaded after brand.css. Palette is inherited; no new colours are introduced,
   only documented alpha variants of the five approved values.
   ========================================================================== */

:root{
  /* 8px scale — every spacing value on the site resolves to one of these */
  --sp-1:8px;   --sp-2:16px;  --sp-3:24px;  --sp-4:32px;  --sp-5:40px;
  --sp-6:48px;  --sp-7:56px;  --sp-8:64px;  --sp-10:80px; --sp-12:96px;
  --sp-15:120px;
  /* type scale, 1.25 ratio off a 17px body */
  --t-eyebrow:12px; --t-body:17px; --t-lead:21px; --t-h3:21px;
  --t-h2:clamp(32px,4vw,56px); --t-h1:clamp(40px,6.4vw,76px);
  /* documented alphas of approved colours */
  --se-line-15:rgba(104,112,107,.15);
  --se-line-24:rgba(104,112,107,.24);
  --se-accent-06:rgba(107,239,114,.06);
}

/* --- rhythm: one section padding value per breakpoint --------------------- */
section{padding-top:var(--sp-7)!important;padding-bottom:var(--sp-7)!important}
@media(min-width:768px){section{padding-top:var(--sp-10)!important;padding-bottom:var(--sp-10)!important}}
@media(min-width:1024px){section{padding-top:var(--sp-15)!important;padding-bottom:var(--sp-15)!important}}
header,footer,.se-rail,#hero,section:has(#hero){padding-top:0!important;padding-bottom:0!important}
footer{padding-top:var(--sp-10)!important;padding-bottom:var(--sp-6)!important}

/* --- depth: alternate ground, hairline boundaries ------------------------- */
section{position:relative;border-top:1px solid var(--se-line-15)}
section:nth-of-type(even){background:var(--se-surface)!important}
section:nth-of-type(odd){background:var(--se-base)!important}
.se-rail{border-top:0;background:var(--se-base)!important}
/* a barely-there radial lift behind the first content section */
section:nth-of-type(3)::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 0%,var(--se-accent-06),transparent 70%);
}

/* --- the rail that replaced the four-icon trust strip --------------------- */
.se-rail{border-bottom:1px solid var(--se-line-15)}
.se-rail-in{
  max-width:80rem;margin:0 auto;padding:0 var(--sp-2);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  min-height:48px;
}
.se-rail-i{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--se-muted-text);white-space:nowrap;
  padding:var(--sp-2) var(--sp-3);position:relative;
}
.se-rail-i+.se-rail-i::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:var(--se-line-24);
}
@media(max-width:640px){
  .se-rail-i{padding:var(--sp-1) var(--sp-2);font-size:10px;letter-spacing:.14em}
}

/* --- type hierarchy ------------------------------------------------------- */
body{font-size:var(--t-body);line-height:1.65;letter-spacing:0}
h1{font-size:var(--t-h1)!important;line-height:1.05!important;letter-spacing:-.005em!important}
h2{font-size:var(--t-h2)!important;line-height:1.06!important;letter-spacing:-.004em!important}
h3{font-size:var(--t-h3)!important;line-height:1.15!important;letter-spacing:0}
p{max-width:68ch}
.text-accent.uppercase,[class*="tracking-[0.15em]"],[class*="tracking-[0.18em]"]{
  font-size:var(--t-eyebrow)!important;letter-spacing:.15em!important;font-weight:700;
}

/* --- kill the stranded-left-column void ----------------------------------- */
@media(min-width:1024px){
  .container>div:has(>h2):is(.max-w-xl,.max-w-2xl,.max-w-3xl){
    max-width:none!important;
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    column-gap:var(--sp-8);align-items:end;
  }
  .container>div:has(>h2):is(.max-w-xl,.max-w-2xl,.max-w-3xl)>span:first-child{grid-column:1;grid-row:1}
  .container>div:has(>h2):is(.max-w-xl,.max-w-2xl,.max-w-3xl)>h2{grid-column:1;grid-row:2;margin-bottom:0}
  .container>div:has(>h2):is(.max-w-xl,.max-w-2xl,.max-w-3xl)>p{
    grid-column:2;grid-row:2;align-self:end;margin:0;padding-bottom:.4em;max-width:46ch;
  }
}

/* --- tracked tabular numerals replacing card clip-art --------------------- */
.se-num{
  display:block;font-family:'Chakra Petch',sans-serif;font-variant-numeric:tabular-nums;
  font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--se-muted-text);
  margin-bottom:var(--sp-2);transition:color .15s ease;
}
.group:hover .se-num{color:var(--se-accent)}

/* --- the hero specimen card ----------------------------------------------- */
#hero ul{counter-reset:hc;list-style:none}
#hero li{counter-increment:hc;position:relative;padding-left:var(--sp-6)}
#hero li::before{
  content:counter(hc,decimal-leading-zero);
  position:absolute;left:0;top:.15em;
  font-family:'Chakra Petch',sans-serif;font-variant-numeric:tabular-nums;
  font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--se-muted-text);
}

/* --- details that cost money ---------------------------------------------- */
::selection{background:var(--se-accent);color:var(--se-base)}
:focus-visible{outline:2px solid var(--se-accent);outline-offset:3px;border-radius:2px}
a,button,summary,input,select,textarea,.group{transition:color .15s ease,background-color .15s ease,border-color .15s ease,opacity .15s ease,transform .15s ease}
.se-chev{transition:transform .15s ease}
.dd:hover .se-chev,details[open] .se-chev{transform:rotate(180deg)}
/* optical, not mathematical: the lockup's trace tail reads low without this */
header img[alt="SEE Electrical"]{position:relative;top:-1px}
@media(min-width:1024px){
  *{scrollbar-width:thin;scrollbar-color:var(--se-line-24) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:var(--se-base)}
  ::-webkit-scrollbar-thumb{background:var(--se-line-24);border-radius:99px;border:3px solid var(--se-base)}
  ::-webkit-scrollbar-thumb:hover{background:var(--se-muted)}
}

/* --- motion: fade-and-rise only ------------------------------------------- */
@media(prefers-reduced-motion:no-preference){
  .se-rise{opacity:0;transform:translateY(16px);
    transition:opacity .5s cubic-bezier(.2,.6,.2,1),transform .5s cubic-bezier(.2,.6,.2,1)}
  .se-rise.se-in{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .se-rise{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------------------------------------------------------------------------
   Corrections after the first visual pass.
   ------------------------------------------------------------------------ */

/* The nav sits inside a <section>, so the global section rhythm was pushing a
   120px void above the page. Chrome sections are excluded from the rhythm. */
section:has(header),section:has(>header),section:has(.se-rail){
  padding-top:0!important;padding-bottom:0!important;border-top:0!important;background:transparent!important;
}

/* Green is a conductor, not a highlighter. The full-bleed accent announcement
   bar alone was more green than the whole rest of the page. */
div.relative.z-10.bg-accent{
  background:var(--se-surface)!important;
  color:var(--se-accent)!important;
  border-bottom:1px solid var(--se-line-15);
}
div.relative.z-10.bg-accent .bg-white{background:var(--se-accent)!important}
div.relative.z-10.bg-accent span{color:var(--se-accent)!important}

/* 4px slab under the hero -> hairline */
.absolute.bottom-0.left-0.right-0.h-1.bg-accent{height:1px!important;opacity:.55}

/* the specimen card's deliberate 40x1 detail, not a 48x4 slab */
.absolute.-top-px.-left-px.w-12.h-1.bg-accent{width:40px!important;height:1px!important}

/* specimen card: real padding, stronger blur, inner hairline */
#hero .backdrop-blur-sm,#hero [class*="backdrop-blur"]{
  backdrop-filter:blur(18px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(130%)!important;
}
#hero ul{margin-top:var(--sp-1)}
#hero li{padding-left:var(--sp-5)}
#hero li::before{top:.1em}

/* An empty <section aria-live> toast region sits above the nav; the global
   section rhythm was giving it 120px top and bottom, i.e. a 240px void at the
   top of every page. */
section:empty,section[aria-live],section[aria-label^="Notifications"]{
  padding:0!important;border:0!important;background:transparent!important;min-height:0!important;
}

/* The announcement bar lives inside #hero, so the earlier "#hero .bg-accent"
   rule was winning. Same element, higher specificity: green type on the raised
   surface instead of a full-bleed slab of accent. */
#hero div.relative.z-10.bg-accent{
  background:rgba(16,19,18,.92)!important;
  border-bottom:1px solid var(--se-line-15);
  backdrop-filter:blur(8px);
}
#hero div.relative.z-10.bg-accent *{color:var(--se-accent)!important}
#hero div.relative.z-10.bg-accent .bg-white{background:var(--se-accent)!important}

/* the specimen card was clipping its own eyebrow against the top edge */
#hero .backdrop-blur-sm:has(ul),#hero [class*="backdrop-blur"]:has(ul){
  padding:var(--sp-5) var(--sp-4) var(--sp-4)!important;
  border:1px solid var(--se-line-15)!important;
}

/* Hero imagery: the client's own job photos, so they stay - but the display
   type needs a real scrim or it fights the window frames behind it.
   Scoped to the GRADIENT layer only: the sibling .bg-cover div carries the
   photo as an inline background-image, and an earlier version of this rule
   matched both and painted over the picture. Nothing here may set position or
   z-index on #hero's children - they are absolutely positioned backdrops. */
#hero>div.bg-gradient-to-r[aria-hidden="true"]{
  background-image:linear-gradient(90deg,rgba(8,10,9,.97) 0%,rgba(8,10,9,.90) 34%,rgba(8,10,9,.58) 60%,rgba(8,10,9,.80) 100%)!important;
}
#hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(8,10,9,.5) 0%,transparent 20%,transparent 68%,rgba(8,10,9,.9) 100%);
}
/* the specimen card needs its own ground, not just blur over a photo */
#hero [class*="backdrop-blur"]:has(ul){background:rgba(8,10,9,.82)!important}

/* --- accessibility corrections found by Lighthouse ------------------------ */
/* footer links were rendering at 45% of the foreground: under 4.5:1 */
footer a,footer .text-primary-foreground\/45,footer [class*="text-primary-foreground/45"],
footer [class*="text-primary-foreground/50"],footer [class*="text-primary-foreground/70"]{
  color:var(--se-muted-text)!important;
}
footer a:hover{color:var(--se-accent)!important}
footer p,footer [class*="text-primary-foreground/50"]{color:var(--se-muted-text)!important}
/* 44px minimum touch target on the footer's tappable links */
footer a{display:inline-flex;align-items:center;min-height:44px}
footer nav a,footer ul a{min-height:44px}