/* LED4Everything Round 1 — lights-off showroom */
@font-face{font-family:"Barlow Condensed";src:url('/vendor/barlow-condensed/BarlowCondensed-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Narrow");size-adjust:105%;ascent-override:95%;descent-override:25%;line-gap-override:0%}

:root{
  --ink:#070b14;--night:#0b1526;--panel:#121e33;--navy:#112f47;
  --text:#eef2f8;--muted-dark:#aeb9ca;--light-text:#10202f;
  /* v2: ~2800K amber, nearer the logo orange; hover brightens instead of washing out. */
  --orange:#ffab5c;--orange-hover:#ffc68f;--signal:#ff7a1a;--warm:#ffe7c2;--cool:#ddebff;
  --hairline:rgba(255,255,255,.1);--max:1240px;
  --display:"Barlow Condensed","Barlow Condensed Fallback","Arial Narrow",sans-serif;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Product source photos have white studios; a pure-white plate makes their edges disappear. */
  --plate:#fff;
  --plate-shadow:0 0 0 1px rgba(255,255,255,.55),0 22px 44px -20px rgba(0,0,0,.85),0 0 60px -6px rgba(255,138,51,.34);
  --plate-shadow-sm:0 0 0 1px rgba(255,255,255,.5),0 8px 18px -10px rgba(0,0,0,.8),0 0 22px -4px rgba(255,138,51,.3);
  --stage:radial-gradient(62% 58% at 50% 56%,rgba(255,150,60,.2),rgba(255,122,26,.05) 55%,transparent 75%),linear-gradient(170deg,#121e33,#0b1526);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;background:var(--ink)}
body{margin:0;overflow-x:hidden;background:var(--ink);color:var(--text);font-family:var(--body);font-size:18px;line-height:1.6}
body>main,body>header,body>footer,.preview{width:100%}
img,svg{max-width:100%}
a{color:inherit;text-underline-offset:4px}
a[href^="tel:"],a[href^="sms:"],.phone-number,.mobile-number{white-space:nowrap}
button,input,select{font:inherit}
a,button,input,select{touch-action:manipulation}
:focus-visible{outline:3px solid var(--signal);outline-offset:4px}
::selection{background:var(--orange);color:var(--night)}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
p{max-width:65ch;text-wrap:pretty}
.icon{width:24px;height:24px;flex:0 0 24px;stroke-width:1.8}
.eyebrow{margin:0 0 12px;color:var(--orange);font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* Dark info strip with warm text: orange is kept for actions, not a full-width promo band. */
.preview{padding:9px 20px;border-bottom:1px solid var(--hairline);background:var(--ink);color:var(--warm);font-size:15px;font-weight:700;line-height:1.4;text-align:center;white-space:nowrap}
header{display:flex;flex-wrap:nowrap;align-items:center;gap:28px;max-width:none;margin:0;padding:14px max(24px,calc((100vw - var(--max))/2));border-bottom:1px solid var(--hairline);background:var(--night)}
.logo-plate,header>a:first-child{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:5px 9px;border-radius:4px;background:#f7f8f5}
header .logo{display:block;width:142px;height:auto;aspect-ratio:400/209;object-fit:contain}
header nav{display:flex;align-items:center;justify-content:flex-end;gap:28px;margin-left:auto;color:var(--text);font-size:16px;font-weight:600}
header nav a{display:flex;align-items:center;min-height:44px;transition:color .2s ease}
header nav a:hover{color:var(--orange)}
header .header-call{gap:8px}
header .header-call .icon{width:20px;height:20px;flex-basis:20px;color:var(--orange)}
header .button.small{display:inline-flex;flex:0 0 auto}
.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:54px;padding:14px 22px;border:1px solid transparent;border-radius:3px;background:var(--orange);color:var(--night);font-size:17px;font-weight:800;line-height:1.25;text-decoration:none;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.button:hover{background:var(--orange-hover);box-shadow:0 0 28px rgba(255,122,26,.22);transform:translateY(-2px)}
.button:active{transform:translateY(1px)}
.button.small{min-height:46px;padding:10px 18px;font-size:16px}

.hero-shell{position:relative;isolation:isolate;overflow:hidden;background:var(--ink)}
.hero-shell::before{position:absolute;z-index:-1;inset:-20% 45% 5% -20%;background:radial-gradient(ellipse at 55% 45%,rgba(255,122,26,.14),transparent 58%);content:""}
.hero-shell::after{position:absolute;z-index:-1;right:-8%;bottom:12%;width:65%;height:2px;background:linear-gradient(90deg,transparent,var(--warm),var(--signal),transparent);box-shadow:0 0 18px 4px rgba(255,171,92,.25);content:"";opacity:.6;animation:lightline 8s ease-in-out infinite alternate}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:64px;max-width:var(--max);margin:0 auto;padding:88px 24px 104px}
/* The H1 is sized to its own column (cqi), so "LOCAL EXPERTISE." never overflows into the hero card.
   ~14.5cqi keeps the longest line inside the column with margin for the fallback font; words may wrap, never overflow. */
.hero .intro{min-width:0;container-type:inline-size}
.hero h1{max-width:100%;margin:0 0 28px;color:var(--text);font-size:clamp(44px,6vw,80px);font-size:clamp(44px,14.5cqi,96px);line-height:.92;letter-spacing:.01em;overflow-wrap:normal;word-break:normal}
.hero h1 em{color:var(--orange);font-style:normal;white-space:normal}
.hero .lede{max-width:560px;margin:0 0 32px;color:var(--muted-dark);font-size:20px;line-height:1.65}
.hero-secondary{display:inline-flex;align-items:center;min-height:54px;margin-left:18px;padding:12px 4px;color:var(--text);font-size:17px;font-weight:700;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45)}
.hero-note{display:flex;align-items:flex-start;gap:14px;margin-top:32px;padding-top:24px;border-top:1px solid var(--hairline);color:var(--muted-dark);font-size:16px}
.hero-note .icon{margin-top:2px;color:var(--signal)}
.hero-note p{margin:0}
.hero-note strong{color:var(--text)}
.hero-image{position:relative;isolation:isolate;min-width:0;overflow:visible;border:1px solid var(--hairline);border-radius:6px;background:var(--panel);box-shadow:0 28px 70px rgba(0,0,0,.35),0 0 70px rgba(255,122,26,.08)}
.hero-image::before{position:absolute;z-index:-1;inset:14% -8% 12%;background:radial-gradient(circle,rgba(255,231,194,.24),rgba(255,122,26,.08) 38%,transparent 68%);filter:blur(18px);content:""}
.specimen-header{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--hairline);background:transparent;color:var(--text);font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.04em}
.specimen-header span{color:var(--muted-dark);font-weight:400}
#hero-photo{display:block;padding:5%;background:var(--stage)}
#hero-photo picture{display:contents}
#hero-photo img{display:block;width:100%;height:auto;aspect-ratio:1.45;padding:5%;border-radius:12px;background:var(--plate);box-shadow:var(--plate-shadow);object-fit:contain;mix-blend-mode:normal}
.hero-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;border-top:1px solid var(--hairline);background:var(--panel)}
.hero-specs>div{padding:14px 18px;border-right:1px solid var(--hairline)}
.hero-specs>div:last-child{border:0}
.hero-specs dt{margin-bottom:4px;color:var(--muted-dark);font-size:15px}
.hero-specs dd{margin:0;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;font-weight:700}
.image-caption{position:static;display:flex;padding:16px 18px;border-top:1px solid var(--hairline);border-radius:0;background:var(--night);font-size:16px}
.image-caption a{display:flex;align-items:center;justify-content:space-between;width:100%;color:var(--text);font-weight:700}
.image-caption .icon{color:var(--orange)}

.category-wrap{max-width:none;margin:0;padding:88px max(24px,calc((100vw - var(--max))/2));border-top:1px solid var(--hairline);background:var(--night)}
.category-heading{display:block;margin-bottom:36px}
.category-heading h2{margin:0;font-size:clamp(46px,5vw,64px);line-height:1}
.category-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.category-tile{display:flex;flex-direction:column;min-width:0;min-height:222px;overflow:hidden;border:1px solid var(--hairline);border-radius:4px;background:var(--panel);text-decoration:none;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.category-tile:hover{border-color:rgba(255,171,92,.55);box-shadow:0 16px 40px rgba(0,0,0,.25),0 0 30px rgba(255,122,26,.08);transform:translateY(-3px)}
.category-visual{position:relative;display:grid;place-items:center;flex:1;min-height:150px;padding:16px;overflow:hidden;background:var(--stage)}
.category-visual picture{display:contents}
.category-visual img{display:block;width:100%;max-width:150px;height:118px;object-fit:contain;padding:8px;border-radius:10px;background:var(--plate);box-shadow:var(--plate-shadow-sm);mix-blend-mode:normal;transition:transform .25s ease}
.category-tile:hover .category-visual img{transform:translateY(-2px)}
.category-tile.is-featured{grid-column:span 2}
.category-tile.is-featured .category-visual img{max-width:260px}
.category-icon{width:64px;height:64px;color:var(--orange);filter:drop-shadow(0 0 10px rgba(255,122,26,.55)) drop-shadow(0 0 22px rgba(255,122,26,.25))}
.category-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px;min-height:84px;padding:14px;border-top:1px solid var(--hairline)}
.category-copy strong{display:-webkit-box;min-width:0;overflow:hidden;font-size:17px;line-height:1.25;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.category-copy small{display:block;color:var(--muted-dark);font-family:var(--mono);font-size:15px;line-height:1.3}

.catalog{max-width:none;margin:0;padding:96px max(24px,calc((100vw - var(--max))/2)) 112px;background:var(--ink)}
.section-top{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:38px}
.section-top h2{margin:0;color:var(--text);font-size:clamp(48px,5.2vw,68px);line-height:.98}
/* :last-child matches style.brand.css's `.section-top p:last-child` specificity, which set #5d6c73 (3.6:1). */
.section-top>p,.section-top>p:last-child{margin:0;color:var(--muted-dark);font-size:18px}
.tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,320px);gap:14px;padding:20px;border:1px solid var(--hairline);border-radius:4px;background:var(--night)}
.search{display:flex;align-items:center;gap:12px;padding:0 16px;border:1px solid rgba(255,255,255,.16);border-radius:3px;background:var(--panel)}
.search .icon{color:var(--muted-dark)}
input,select{min-height:56px;color:var(--text);font-size:18px}
input{width:100%;padding:14px 0;border:0;background:transparent}
input::placeholder{color:#8997ab;opacity:1}
select{width:100%;max-width:none;padding:12px 42px 12px 16px;border:1px solid rgba(255,255,255,.16);border-radius:3px;background:var(--panel);color-scheme:dark}
.results{display:flex;align-items:center;justify-content:space-between;margin:18px 0 30px;color:var(--muted-dark);font-size:16px}
.text-button{min-height:44px;padding:8px 0;border:0;background:none;color:var(--orange);font-size:16px;font-weight:700;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 24px}
.card{display:flex;flex-direction:column;min-width:0;padding-top:0;border:0;color:var(--text);text-decoration:none}
.product-photo{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:auto;aspect-ratio:1.12;padding:9%;overflow:hidden;border:1px solid var(--hairline);border-radius:6px;background:var(--stage)}
.product-photo picture{display:contents}
.product-photo img{display:block;width:100%;height:100%;padding:5%;object-fit:contain;border-radius:10px;background:var(--plate);box-shadow:var(--plate-shadow);mix-blend-mode:normal;transition:transform .25s ease,box-shadow .25s ease}
.card:hover .product-photo img{transform:scale(1.025);box-shadow:0 0 0 1px rgba(255,255,255,.6),0 22px 44px -20px rgba(0,0,0,.85),0 0 72px -4px rgba(255,138,51,.46)}
.product-photo:has(.no-photo){padding:0}
/* Arrow is a quiet dark chip at rest and lights up orange on hover, instead of 16 solid orange squares. */
.product-photo .arrow{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,171,92,.4);border-radius:3px;background:rgba(7,11,20,.82);color:var(--orange);transition:transform .2s ease,background .2s ease,color .2s ease}
.product-photo:has(.no-photo) .arrow{top:12px;bottom:auto}
.card:hover .product-photo .arrow,.card:focus-visible .product-photo .arrow{border-color:var(--orange);background:var(--orange);color:var(--night);transform:translate(2px,-2px)}
.product-cat{margin-top:18px;color:var(--muted-dark);font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
/* Long names are clamped to 3 lines; the full name stays in the DOM and in the card's title attribute. */
.card h3{display:-webkit-box;margin:8px 0 18px;overflow:hidden;color:var(--text);font-family:var(--body);font-size:21px;font-weight:650;line-height:1.4;text-transform:none;overflow-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}
.card-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:auto;padding-top:16px;border-top:1px solid var(--hairline)}
.price-block{display:flex;flex-direction:column;justify-content:flex-start;min-height:0}
.price-line{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.price{color:var(--text);font-family:var(--body);font-size:24px;font-weight:750;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.currency,.price-note{color:var(--muted-dark);font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:0}
.price-note{display:block;margin-top:4px;line-height:1.3}
.confirm-text{color:var(--orange);font-size:15px;font-weight:700;white-space:nowrap}
/* Designed no-photo state: dark navy panel, glowing category line icon, real spec chips, honest caption. */
.product-photo .no-photo,.detail-main-wrap .no-photo,.no-photo{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;width:100%;height:100%;min-height:0;margin:0;padding:24px 16px;background:radial-gradient(55% 50% at 50% 38%,rgba(255,122,26,.16),transparent 70%),linear-gradient(170deg,#121e33,#0b1526);color:#a3afc2;font-size:15px;text-align:center}
.no-photo .category-icon{width:76px;height:76px;margin-bottom:14px;color:var(--signal);filter:drop-shadow(0 0 8px rgba(255,122,26,.7)) drop-shadow(0 0 24px rgba(255,122,26,.35))}
.no-photo .no-photo-cat{color:var(--text);font-size:17px;font-weight:700;line-height:1.3}
.no-photo .placeholder-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:100%;margin-top:12px}
.no-photo .chip{display:inline-block;max-width:100%;margin:0;padding:3px 8px;overflow:hidden;border:1px solid rgba(255,171,92,.3);border-radius:3px;background:rgba(255,171,92,.06);color:var(--warm);font-family:var(--mono);font-size:15px;font-weight:500;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.no-photo .no-photo-note{margin-top:12px;color:#a3afc2;font-size:15px;line-height:1.3}
.empty{grid-column:1/-1;padding:48px;border:1px solid var(--hairline);color:var(--muted-dark)}

/* Steps: numbered dots joined by a light line. Each step draws its own segment from its dot's bottom to the
   next dot's top, at left = dot/2, so the line always runs through the circle centres. */
.process{--dot:48px;--row:28px;position:relative;display:grid;grid-template-columns:1fr;gap:0;max-width:none;margin:0;padding:24px max(24px,calc((100vw - var(--max))/2)) 104px;background:var(--ink)}
.process::before{content:none}
.process-head{margin:0 0 28px}
.process-head h2{margin:0;color:var(--text);font-size:clamp(44px,5vw,64px);line-height:1}
.process>div{position:relative;display:grid;grid-template-columns:var(--dot) minmax(220px,.8fr) 1.4fr;align-items:start;gap:24px;padding:var(--row) 0;border-top:1px solid var(--hairline)}
.process>div:not(:last-child)::after{position:absolute;top:calc(var(--row) + var(--dot));bottom:calc(-1 * var(--row));left:calc(var(--dot) / 2 - 1px);width:2px;border-radius:1px;background:linear-gradient(var(--signal),rgba(255,171,92,.35));box-shadow:0 0 10px rgba(255,122,26,.45);content:""}
/* Only the step-number span is a dot; inline spans in the copy (e.g. .phone-number) stay plain text. */
.process p span{display:inline;width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--text);font:inherit;font-weight:700}
.process>div>span{z-index:1;display:grid;place-items:center;place-content:center;justify-content:center;width:var(--dot);height:var(--dot);margin:0;padding:0;border:1px solid var(--signal);border-radius:50%;background:var(--ink);box-shadow:0 0 18px rgba(255,122,26,.3),inset 0 0 12px rgba(255,122,26,.12);color:var(--orange);font-family:var(--mono);font-size:18px;font-weight:700;line-height:1;text-align:center}
.process h3{margin:0;padding-top:calc((var(--dot) - 34px) / 2);color:var(--text);font-size:34px;line-height:1}
.process p{margin:0;padding-top:calc((var(--dot) - 29px) / 2);color:var(--muted-dark);font-size:18px}

.visit{display:grid;grid-template-columns:1.15fr .85fr;gap:10%;max-width:none;padding:88px max(24px,calc((100vw - var(--max))/2));border-top:1px solid rgba(255,171,92,.25);background:var(--navy);color:var(--text)}
.visit h2{margin:0 0 24px;color:var(--text);font-size:clamp(58px,6vw,76px);line-height:.94}
.visit p{color:#c3cedb;font-size:18px}
.visit .inline-link{display:inline-flex;align-items:center;min-height:54px;margin-left:22px;color:var(--orange);font-size:17px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.visit address{padding:24px 0 24px 40px;border-left:1px solid rgba(255,255,255,.2);color:var(--text);font-style:normal}
.visit address strong{font-size:23px}
.visit address a{display:inline-flex;align-items:center;min-height:44px;color:var(--orange);font-size:18px;font-weight:700}

footer{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;max-width:none;margin:0;padding:42px max(24px,calc((100vw - var(--max))/2));border-top:1px solid var(--hairline);background:var(--ink);color:var(--muted-dark);font-size:15px}
footer .logo{width:140px;height:auto;padding:6px 9px;border-radius:4px;background:#f7f8f5}
footer p{margin:0;line-height:1.7}
footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--text)}
footer small{color:var(--muted-dark);font-size:15px}

.mobile-contact{display:none}

/* Product detail */
#detail{max-width:var(--max);margin:0 auto;padding:40px 24px 104px;background:var(--ink)}
.breadcrumb{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0 0 30px;color:var(--muted-dark);font-size:16px}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:7%}
.detail-grid>*{min-width:0;max-width:100%}
.detail-main-wrap{display:grid;place-items:center;min-width:0;width:100%;max-width:100%;height:auto;aspect-ratio:1;padding:8%;overflow:hidden;border:1px solid var(--hairline);border-radius:6px;background:var(--stage)}
.detail-main-wrap:has(.no-photo){padding:0}
.detail-main-wrap picture{display:contents}
.detail-main-wrap img{display:block;width:100%;height:100%;padding:5%;object-fit:contain;border-radius:14px;background:var(--plate);box-shadow:var(--plate-shadow)}
.detail-main-wrap .no-photo .category-icon{width:clamp(96px,22%,140px);height:auto;aspect-ratio:1;margin-bottom:22px}
.detail-main-wrap .no-photo .no-photo-cat{font-size:22px}
.detail-main-wrap .no-photo .placeholder-chips{gap:8px;margin-top:16px}
.detail-main-wrap .no-photo .chip{padding:5px 10px;font-size:16px}
.detail-main-wrap .no-photo .no-photo-note{margin-top:18px;font-size:16px}
.thumbnails{display:flex;max-width:100%;flex-wrap:wrap;gap:10px;margin-top:14px;overflow-x:auto;overscroll-behavior-inline:contain}
.thumbnails button{display:grid;place-items:center;width:76px;height:76px;padding:6px;overflow:visible;border:1px solid var(--hairline);border-radius:8px;background:var(--stage);cursor:pointer;transition:border-color .2s ease}
.thumbnails button:hover{border-color:rgba(255,171,92,.5)}
.thumbnails button[aria-current="true"]{border-color:var(--orange);outline:0;box-shadow:0 0 0 2px rgba(255,171,92,.25),0 0 18px rgba(255,122,26,.25)}
.thumbnails button:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.thumbnails picture{display:contents}
.thumbnails img{display:block;width:100%;height:100%;padding:4%;object-fit:contain;border-radius:5px;background:var(--plate);box-shadow:var(--plate-shadow-sm)}
.detail-info .location{margin:0 0 14px;color:var(--orange);font-family:var(--mono);font-size:15px;text-transform:none}
.detail-info h1{margin:0 0 24px;color:var(--text);font-size:clamp(48px,4.6vw,66px);line-height:1;overflow-wrap:anywhere}
.detail-info .price{font-size:30px}
.detail-info label{display:block;margin:26px 0 8px;color:var(--text);font-size:17px;font-weight:700}
.detail-info select{max-width:100%}
.price-date{margin:8px 0 0;color:var(--muted-dark);font-family:var(--body);font-size:15px;font-weight:400}
.specs{width:100%;margin:24px 0;border-collapse:collapse;color:var(--text);font-size:17px}
.specs td{padding:14px 8px 14px 0;border-bottom:1px solid var(--hairline);vertical-align:top;overflow-wrap:anywhere}
.specs td:first-child{width:34%;color:var(--muted-dark)}
.specs td:last-child{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.availability{margin:24px 0;padding:18px;border-left:3px solid var(--orange);border-radius:0;background:var(--panel);color:var(--muted-dark);font-size:16px;line-height:1.65}
.availability span{color:var(--text);font-weight:700}
.inquiry-options{display:grid;grid-template-columns:1fr;gap:8px;margin:26px 0}
.inquiry-options label{margin:8px 0 0}
.inquiry-options input{padding:12px 14px;border:1px solid rgba(255,255,255,.16);border-radius:3px;background:var(--panel)}
.detail-info .button{width:100%}
.detail-info>p a,.detail-info .description a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.call-link{margin-left:0}
.detail-address,.description{color:var(--muted-dark);font-size:17px;line-height:1.75}
.description{white-space:pre-line}
.detail-info h2{margin-top:36px;color:var(--text);font-size:34px}

/* Policy and 404 pages: content stays unchanged; only the frame changes. */
.policy-page{background:var(--ink);color:var(--text)}
.policy-hero{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:radial-gradient(circle at 75% 30%,rgba(255,122,26,.12),transparent 32%),var(--night)}
.policy-hero-inner{max-width:var(--max);margin:0 auto;padding:72px 24px 80px}
.policy-hero .breadcrumb{margin-bottom:40px}
.policy-hero h1{max-width:950px;margin:0 0 18px;color:var(--text);font-size:clamp(54px,7vw,88px);line-height:.95}
.policy-lede{margin:0;color:var(--muted-dark);font-size:20px}
.policy-hero-inner{max-width:calc(68ch + 48px)}
.policy-body{max-width:calc(68ch + 48px);margin:0 auto;padding:56px 24px 104px}
.policy-body section{padding:32px 0;border-top:0;border-bottom:1px solid var(--hairline)}
.policy-body section:last-child{border-bottom:0}
.policy-body h2{margin:0 0 12px;color:var(--text);font-family:var(--body);font-size:25px;font-weight:700;line-height:1.3;letter-spacing:0;text-transform:none}
.policy-body p,.policy-body li{max-width:68ch;margin:0 0 14px;color:var(--muted-dark);font-size:18px;line-height:1.75}
.policy-body p:last-child,.policy-body li:last-child{margin-bottom:0}
.policy-body ul,.policy-body ol{margin:0 0 14px;padding-left:1.3em}
.policy-body li::marker{color:var(--orange)}
.policy-body strong{color:var(--text)}
.policy-body a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.policy-cta{margin-top:28px;padding:34px!important;border:1px solid rgba(255,171,92,.25)!important;background:var(--panel)}
.policy-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.policy-actions .button{color:var(--night);text-decoration:none}
.policy-actions .secondary{border-color:rgba(255,255,255,.2);background:transparent;color:var(--text)}

/* Inline links on dark content surfaces never fall back to browser blue, including visited state. */
.policy-body a:not(.button):link,.policy-body a:not(.button):visited,
.detail-info>p a:link,.detail-info>p a:visited,.detail-info .description a:link,.detail-info .description a:visited,
.visit a:not(.button):link,.visit a:not(.button):visited{color:var(--orange);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.policy-body a:not(.button):hover,.detail-info>p a:hover,.detail-info .description a:hover,.visit a:not(.button):hover{color:var(--orange-hover);text-decoration-thickness:2px}
.policy-body a:not(.button):focus-visible,.detail-info>p a:focus-visible,.detail-info .description a:focus-visible,.visit a:not(.button):focus-visible{color:var(--orange-hover);outline-color:var(--orange)}

@keyframes lightline{from{opacity:.35;transform:translateX(-4%)}to{opacity:.7;transform:translateX(4%)}}

@media(min-width:1280px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 22px}
  .card h3{font-size:20px}
}

@media(max-width:1080px){
  header{padding-inline:24px}
  .category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{gap:40px}
}

@media(max-width:900px){
  header{gap:16px}
  header nav{gap:16px}
  header nav a:nth-child(2){display:none}
}

@media(max-width:760px){
  header nav a:nth-child(2){display:none}
  .hero{grid-template-columns:1fr;padding-block:64px 72px}
  .hero .intro{max-width:620px}
  .hero h1{font-size:clamp(44px,12vw,76px);font-size:clamp(44px,14.5cqi,76px)}
  .category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .detail-grid{grid-template-columns:minmax(0,1fr)}
  .visit{grid-template-columns:1fr}
  .detail-grid{gap:38px}
  .visit{gap:40px}
  .visit address{padding:28px 0 0;border-top:1px solid rgba(255,255,255,.2);border-left:0}
  .process>div{grid-template-columns:var(--dot) 1fr;row-gap:8px}
  .process p{grid-column:2;padding-top:0}
  footer{grid-template-columns:auto 1fr}
  footer>div{grid-column:1/-1}
}

@media(max-width:620px){
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom));font-size:18px}
  /* Top strip: one line on phones. */
  .preview{padding:7px 16px;font-size:15px;line-height:1.35;white-space:nowrap}
  .preview .strip-more{display:none}
  /* Header: one compact row — logo plate left, Call icon + Text us pill right. */
  header{flex-wrap:nowrap;min-height:0;padding:8px 16px;gap:10px}
  .logo-plate,header>a:first-child{padding:4px 7px;border-radius:4px}
  header .logo{width:auto;height:34px}
  header nav{gap:0;margin-left:auto}
  header nav a:not(.header-call){display:none}
  header .header-call{justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:999px}
  header .header-call .icon{width:20px;height:20px}
  header .header-call span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  header .button.small{display:inline-flex;min-height:44px;margin:0;padding:8px 18px;border-radius:999px;font-size:16px;white-space:nowrap}
  /* Hero: headline and lede, CTA row, then a compact product stage. */
  .hero{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:28px 20px 56px}
  .hero .intro{display:contents}
  /* "LOCAL EXPERTISE." measures 6.57em in Barlow Condensed; size it to the 20px-padded viewport so it stays on one line. */
  .hero h1{order:1;margin:0 0 16px;font-size:clamp(44px,calc((100vw - 40px) / 6.75),52px);line-height:.95}
  .hero .lede{order:2;margin:0 0 20px;font-size:18px;line-height:1.55}
  .hero .button{order:3;width:100%}
  .hero-secondary{order:4;justify-content:center;width:100%;margin:10px 0 18px}
  .hero-image{order:5;margin:0 0 24px}
  .hero-note{order:6;margin-top:24px;font-size:15px}
  .specimen-header{display:none}
  #hero-photo{padding:10px 14px}
  #hero-photo img{width:100%;height:clamp(160px,48vw,210px);aspect-ratio:auto;padding:4%;border-radius:10px;object-fit:contain}
  .hero-specs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-specs>div{min-width:0;padding:8px 8px}
  .hero-specs dt{font-size:15px}
  .hero-specs dd{overflow:hidden;font-size:15px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
  .image-caption{padding:12px 14px}
  .category-wrap{padding:56px 16px 64px}
  .category-heading{display:block;margin-bottom:26px}
  .category-heading h2{font-size:44px}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .category-tile{min-height:0}
  .category-visual{min-height:124px;padding:12px}
  .category-visual img{max-width:128px;height:100px;padding:6px}
  .category-tile.is-featured .category-visual img{max-width:220px}
  .category-icon{width:54px;height:54px}
  .category-copy{display:flex;min-height:72px;padding:12px}
  .category-copy strong{display:block;font-size:17px}
  .category-copy small{display:block;margin-top:4px}
  .catalog{padding:56px 16px 72px}
  .section-top{display:block;margin-bottom:26px}
  .section-top h2{font-size:44px;line-height:1}
  .section-top>p{margin-top:18px;font-size:16px}
  .tools{grid-template-columns:1fr;padding:12px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 12px}
  .product-photo{aspect-ratio:1;padding:8%}
  .product-photo img{padding:6px;border-radius:8px;box-shadow:var(--plate-shadow-sm)}
  .product-photo .arrow{right:6px;bottom:6px;width:36px;height:36px}
  .product-photo:has(.no-photo) .arrow{top:6px;bottom:auto}
  .product-photo .arrow .icon{width:20px;height:20px;flex-basis:20px}
  .product-cat{margin-top:12px;font-size:15px;letter-spacing:0;line-height:1.3}
  .card h3{margin:6px 0 12px;font-size:18px;line-height:1.35}
  .card-bottom{gap:6px;padding-top:10px}
  .price-block{min-height:0}
  .price-line{display:block;white-space:normal}
  .price{font-size:22px}
  .price-line .price{white-space:nowrap}
  .currency{display:block;margin-top:2px}
  .currency,.price-note{font-size:15px}
  .confirm-text{font-size:15px}
  .product-photo .no-photo{padding:10px 8px}
  .product-photo .no-photo .category-icon{width:46px;height:46px;margin-bottom:6px}
  .product-photo .no-photo .no-photo-cat{font-size:15px}
  .product-photo .no-photo .placeholder-chips{gap:4px;margin-top:6px}
  .product-photo .no-photo .chip{padding:1px 6px;font-size:15px}
  .product-photo .no-photo .chip:nth-child(n+2){display:none}
  .product-photo .no-photo .no-photo-note{margin-top:6px;font-size:15px}
  .process{--dot:44px;--row:24px;padding:8px 20px 64px}
  .process-head h2{font-size:44px}
  .process>div{gap:8px 14px}
  .process h3{font-size:28px;padding-top:calc((var(--dot) - 28px) / 2)}
  .process p{font-size:17px}
  .visit{padding:56px 20px 64px}
  .visit h2{font-size:54px}
  .visit .button{width:100%}
  .visit .inline-link{justify-content:center;width:100%;margin:10px 0 0}
  footer{display:block;padding:36px 20px 48px;font-size:15px}
  footer .logo,footer p{margin-bottom:20px}
  /* Sticky bar: [Text 626-788-2130] on one line + [Call]. 52px buttons, safe-area padding. */
  .mobile-contact{position:fixed;z-index:50;right:0;bottom:0;left:0;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.16);background:rgba(7,11,20,.97)}
  .mobile-contact a{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:52px;padding:0 10px;border:1px solid rgba(255,255,255,.18);border-radius:4px;background:var(--panel);color:var(--text);font-size:17px;font-weight:800;line-height:1;text-decoration:none;white-space:nowrap}
  .mobile-contact a .icon{width:20px;height:20px;flex:0 0 20px}
  .mobile-contact a:first-child{border-color:var(--orange);background:var(--orange);color:var(--night)}
  .mobile-contact .mobile-number{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  #detail{padding:16px 16px 72px}
  #detail .breadcrumb{margin-bottom:12px}
  .detail-grid{gap:24px}
  .detail-info h1{font-size:44px}
  .detail-info .price{font-size:27px}
  .detail-main-wrap{aspect-ratio:4/3;padding:4%}
  .detail-main-wrap img{padding:4%}
  .thumbnails{flex-wrap:nowrap;gap:8px;margin:10px 0 0;padding:3px 0 6px;scroll-padding-inline:0;scroll-snap-type:x mandatory;scrollbar-width:thin}
  .thumbnails button{flex:0 0 60px;width:60px;height:60px;scroll-snap-align:start}
  .specs{font-size:16px}
  .policy-hero-inner{padding:48px 20px 56px}
  .policy-hero h1{font-size:48px}
  .policy-lede{font-size:18px}
  .policy-body{padding:36px 20px 72px}
  .policy-cta{padding:24px!important}
  .policy-actions{display:grid}
  .policy-actions .button{width:100%}
}

@media(max-width:380px){
  header .logo{width:104px}
  header .button.small{padding-inline:12px}
  .grid{gap-inline:10px}
  .card h3{font-size:17px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* v2 accent consistency: older style.site.css / style.brand.css hard-code the previous #ffb56e; route them to the token. */
.button,.mobile-contact a:first-child,.detail-info .button,.hero .button,.visit .button{background:var(--orange)}
.button:hover,.hero .button:hover,.visit .button:hover,.detail-info .button:hover{background:var(--orange-hover)}
.hero .button.secondary,.visit .button.secondary{background:transparent;box-shadow:inset 0 0 0 2px var(--orange)}
.hero h1 em,.hero-note .icon,.policy-hero .breadcrumb,.policy-hero .eyebrow{color:var(--orange)}
::selection{background:var(--orange);color:var(--ink)}

/* logo v1 — transparent SVG lockups, sized for legibility without a sticker plate */
.logo-plate,header>a:first-child{padding:0;border-radius:0;background:transparent}
header>a:first-child:focus-visible{border-radius:3px;outline:3px solid var(--orange);outline-offset:5px}
header .logo{width:auto;height:56px;aspect-ratio:900/160;object-fit:contain}
footer .logo{width:180px;height:auto;padding:0;border-radius:0;background:transparent;aspect-ratio:900/430;object-fit:contain}

@media(max-width:1080px){header .logo{height:52px}}

@media(max-width:620px){
  header{padding:8px 16px;gap:10px}
  .logo-plate,header>a:first-child{min-width:0;padding:0}
  header .logo{width:auto;height:40px;max-width:calc(100vw - 119px)}
  header nav{display:none}
  header .button.small{min-height:44px;padding-inline:14px}
  footer .logo{width:170px}
}

@media(max-width:380px){
  header .logo{width:auto;height:38px;max-width:calc(100vw - 111px)}
  header .button.small{padding-inline:12px}
}

/* logo v1b (coordinator): horizontal SVG viewBox tightened to the artwork (900x122), so the mark fills the header box.
   Size by width on phones so it is as large as the space beside "Text us" allows. */
header .logo{aspect-ratio:900/122;height:50px;width:auto;max-width:none}
@media (max-width:1080px){header .logo{height:44px}}
@media (max-width:620px){header .logo{height:auto;width:min(300px,calc(100vw - 126px));max-width:none}header>.button.small{padding-left:12px;padding-right:12px}}