/* 29Safety website: the shared look (home, construction, general industry, about, guides), English and Spanish.
   A dark site that reads like a well-lit shop at night: near-black ground, white type, one safety-orange accent.
   Page-specific styles live in each page or in their own file (home.css). The only diagonal on the site is the seam in
   the home page's first screen. */

/* Fonts served from this site (public/fonts). The "Fallback" faces are Arial sized to match, so text barely moves when
   the real font arrives. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-var.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/public-sans-400.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/public-sans-500.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/public-sans-600.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/public-sans-700.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/montserrat-800.woff2) format("woff2")}
@font-face{font-family:"Archivo Fallback";font-weight:100 649;src:local("Arial"),local("Liberation Sans"),local("Roboto");size-adjust:100.50%;ascent-override:87.36%;descent-override:20.90%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";font-weight:650 799;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Roboto Bold");size-adjust:98.20%;ascent-override:89.41%;descent-override:21.38%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";font-weight:800 875;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Roboto Bold");size-adjust:114.70%;ascent-override:76.55%;descent-override:18.31%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";font-weight:876 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Roboto Bold");size-adjust:121.00%;ascent-override:72.56%;descent-override:17.36%;line-gap-override:0%}
@font-face{font-family:"Public Sans Fallback";font-weight:100 599;src:local("Arial"),local("Liberation Sans"),local("Roboto");size-adjust:101.85%;ascent-override:93.27%;descent-override:22.09%;line-gap-override:0%}
@font-face{font-family:"Public Sans Fallback";font-weight:600 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Roboto Bold");size-adjust:98.60%;ascent-override:96.35%;descent-override:22.82%;line-gap-override:0%}

:root{
  --ground:#0E1319; --ground2:#11171F; --deep:#0A0F15; --panel:#151B23; --panel2:#1C232D; --line:#28303B;
  --band:#0E1520; --band2:#132033;
  --text:#F2F3F4; --soft:#DADEE3; --muted:#A9B0BA; --dim:#8E97A2;   /* --dim: 4.5:1 or better on --panel2 and --navy (Nov 2026) */
  --ember:#F26B1D; --ember-hi:#FF7E33; --ember-ink:#14110F; --paper:#FFFFFF; --navy:#12294F;
  --crit:#B3121F; --high:#E36414; --med:#F2C200; --low:#2E7D32;
  --crit-t:#3A0F1E; --high-t:#3A1A2E; --med-t:#2E2F3A; --low-t:#12302F;
  --glass:rgba(10,15,22,.84); --glass-line:rgba(255,255,255,.1);
  --display:"Archivo","Archivo Fallback","Arial Narrow",Arial,sans-serif;
  --body:"Public Sans","Public Sans Fallback","Segoe UI",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html{background:#06080B}
body{margin:0;background:transparent;color:var(--text);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:720;font-variation-settings:"wdth" 96;margin:0;line-height:1.05;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
img{max-width:100%}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:2px}
[hidden]{display:none !important}
.wrap{max-width:1180px;margin:0 auto;padding-inline:32px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ember);color:var(--ember-ink);padding:10px 16px;border-radius:4px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ember);color:var(--ember-ink);font-weight:700;text-decoration:none;padding:14px 24px;border-radius:4px;font-size:17px;line-height:1.2;border:0;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{background:var(--ember-hi);transform:translateY(-1px)}
.btn.sm{padding:10px 16px;font-size:15px}
.btn.line{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.line:hover{box-shadow:inset 0 0 0 1.5px var(--text);background:transparent}
.ln{color:var(--text);font-weight:600;text-underline-offset:6px;text-decoration-thickness:1.5px}
.ln:hover{text-decoration-color:var(--ember)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.seg button{background:transparent;color:var(--muted);border:0;padding:9px 16px;font:600 15px var(--body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--ground)}

/* header: solid bar on every page; the home page lays it over the photo until you scroll (.over) */
header.top{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:rgba(12,17,25,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s ease,border-color .3s ease}
header.top.over{position:fixed;inset:0 0 auto 0;background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
header.top.over.solid,header.top.over.cross,header.top.over.open{background:rgba(9,14,24,.74);border-color:rgba(255,255,255,.08);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
header.top .bar{display:flex;align-items:center;gap:30px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font:800 20px Montserrat,var(--display);letter-spacing:-.01em;text-decoration:none;color:#fff;flex:none;text-transform:uppercase}   /* the HTML says "29Safety"; the logo draws it in capitals */
.brand svg{flex:none}
.nav{display:flex;gap:26px;font-size:15.5px}
.nav a{text-decoration:none;color:#E4E6E2}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--ember)}
.nav .ph{display:none}
.nav a.wide{display:none}
@media (min-width:1240px){.nav a.wide{display:inline}}
.hright{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:15.5px}
.hright a.li{text-decoration:none;color:#E4E6E2}
.hright a.li:hover{color:#fff;text-decoration:underline;text-underline-offset:6px}
.menu{display:none;min-height:48px;padding:0 14px 0 10px;margin-right:-6px;gap:8px;align-items:center;background:rgba(7,11,18,.45);border:1px solid rgba(255,255,255,.55);color:#fff;cursor:pointer;border-radius:12px;font:700 16px var(--body)}
.menu svg{width:20px;height:20px;flex:none}
.hright a.lg{display:none;text-decoration:none;color:#fff;font-weight:700;font-size:16px;min-height:48px;align-items:center;padding:0 6px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.menu line{stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .25s ease,opacity .2s ease;transform-origin:center}
header.top.open .menu .l1{transform:translateY(5px) rotate(45deg)}
header.top.open .menu .l2{opacity:0}
header.top.open .menu .l3{transform:translateY(-5px) rotate(-45deg)}

/* footer */
footer.foot{padding-block:48px 40px;border-top:1px solid rgba(255,255,255,.08);color:var(--muted);font-size:15px;background:rgba(6,8,11,.55)}
footer.foot .row{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
footer.foot .links{display:flex;flex-wrap:wrap;gap:12px 20px}
footer.foot a{text-decoration:none;color:#E4E6E2}
footer.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
footer.foot .mail{user-select:all;color:var(--text)}
footer.foot .legal{margin-top:28px;font-size:13px;color:var(--dim);max-width:60em}

/* questions */
details.q{border-top:1px solid var(--line)}
details.q:last-of-type{border-bottom:1px solid var(--line)}
details.q summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-weight:650;font-size:19px;position:relative}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .3s ease}
details.q[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details.q .a{padding:0 0 22px;color:#CFD3CF;max-width:40em}
details.q .a a{color:var(--text)}

/* sections rise into place as they scroll in, where the browser supports it (they start visible, so nothing is hidden) */
@supports (animation-timeline: view()){
  .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
}
@keyframes rise{from{transform:translateY(34px);opacity:.4}to{transform:none;opacity:1}}
/* the owner's heatmap view (?heatmap=…; public/t.js puts .hm on <html>): the page holds still and everything sits in its final place */
html.hm .rise,html.hm .slow,html.hm .ihero .img,html.hm .close .img{animation:none}
@keyframes fadein{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}
@media (max-width:980px){
  .nav{gap:18px} header.top .bar{gap:22px} .hright{gap:16px}
}
@media (max-width:860px){
  body{font-size:17px}
  .wrap{padding-inline:16px}
  header.top .bar{height:64px;gap:10px}
  .hright{gap:6px}
  .hright a.li,.hright .btn.sm,.nav a.lgx{display:none}
  .hright a.lg{display:inline-flex}
  .menu{display:inline-flex}
  /* phones: big enough for a thumb; the page's one filled button is the only orange one on the screen */
  .btn{min-height:52px;border-radius:12px;padding:14px 22px}
  .ln{display:inline-flex;align-items:center;min-height:48px}
  footer.foot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  footer.foot .links{gap:2px 18px}
  footer.foot .links a{display:inline-flex;align-items:center;min-height:44px}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:6px 18px 18px;background:#0D1420;border-bottom:1px solid var(--line);font-size:18px}
  header.top.open .nav{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .nav .ph{display:block}
  .nav a.wide{display:block}
}
@media (max-width:380px){
  .brand span{display:none}
}

/* the live chat window (public/site/chat.js + chat.css) in the website's colors */
html .c29{--c-bg:var(--panel);--c-soft:var(--ground2);--c-line:var(--line);--c-ink:var(--text);--c-ink2:var(--soft);--c-ink3:var(--muted);--c-me:#1C2533;
  --c-cta:var(--ember);--c-cta-ink:var(--ember-ink);--c-head:#0E1520;--c-launch:#13284A;--c-launch-ink:#fff;--c-launch-line:#3A4E6E;--c-launch-icon:#FF8A4C;--c-ok:#4ADE80;--c-display:var(--display);--c-font:var(--body)}

/* the page background: blue at the top of the screen fading into black, fixed behind every section */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(38,78,140,.55), rgba(38,78,140,0) 62%),
    radial-gradient(900px 600px at 0% 0%, rgba(22,48,92,.45), rgba(22,48,92,0) 60%),
    linear-gradient(180deg,#0F1D33 0%,#0B1424 30%,#080B11 62%,#06080B 100%)}
header.top{background:rgba(9,14,24,.78);border-bottom-color:rgba(255,255,255,.08);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
header.top.over{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}

/* the phone bar (Update 26R): once the top of the page has scrolled away, the trial button, prices and the sample stay
   within reach of a thumb. Only on phones; public/site/home.js shows it, and lifts the chat button out of its way. */
.sbar{display:none}
@media (max-width:860px){
  .sbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));background:rgba(9,14,24,.92);border-top:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);transform:translateY(110%);transition:transform .25s ease}
  .sbar.on{transform:none}
  .sbar[hidden]{display:none}
  .sbar .wrap{display:flex;align-items:center;gap:6px 14px}
  .sbar .btn{flex:1 1 auto;min-height:48px;padding:10px 14px;font-size:16px;border-radius:10px}
  .sbar .sb{flex:0 0 auto;color:#fff;font-weight:700;font-size:15px;text-decoration:none;min-height:48px;display:inline-flex;align-items:center;padding:0 6px;text-underline-offset:5px}
  .sbar .sb:hover{text-decoration:underline}
  html.sbar-on{--c29-lift:70px}
  html.sbar-on .c29-launch{bottom:calc(16px + var(--c29-lift) + env(safe-area-inset-bottom,0px))}
  html.sbar-on footer.foot{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.sbar{transition:none}}