:root { --ink:#151713; --paper:#e8e5de; --acid:#d5ff43; --line:rgba(21,23,19,.22); --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
a:focus-visible, button:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
/* acid is only legible on the dark sections; ink everywhere else (was 1.03:1 on paper) */
.hero a:focus-visible, .material-section a:focus-visible, .nav-shell a:focus-visible,
.product-gallery button:focus-visible { outline-color:var(--acid); }
img { display:block; width:100%; }
.nav-shell { position:absolute; z-index:10; top:0; left:0; width:100%; padding:26px 3.2vw; color:white; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.32); }
.wordmark { font-size:25px; font-weight:800; letter-spacing:-1.7px; line-height:1; }
.wordmark span { font-size:8px; vertical-align:top; margin-left:3px; }
nav { display:flex; gap:36px; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
nav a { position:relative; transition:opacity 160ms ease; }
nav a:not(:last-child):after { content:""; position:absolute; left:0; right:100%; bottom:-7px; height:1px; background:currentColor; transition:right 220ms var(--ease-out); }
nav a:not(:last-child):hover:after { right:0; }
nav a:last-child { color:var(--acid); transition:transform 160ms var(--ease-out); }
nav a:last-child:active { transform:scale(.97); }
.hero { position:relative; min-height:100svh; background:#1a1d19; color:white; overflow:hidden; }
.hero>img { position:absolute; inset:0; height:100%; object-fit:cover; object-position:center; transform:scale(1.015); transition:transform 1400ms var(--ease-out), filter 700ms ease; }
.hero:hover>img { transform:scale(1); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,7,5,.76) 0%,rgba(5,7,5,.30) 46%,rgba(5,7,5,.07) 74%),linear-gradient(0deg,rgba(5,7,5,.55),transparent 38%); }
.hero-copy { position:absolute; z-index:2; left:3.2vw; bottom:12vh; max-width:850px; }
.hero-copy>* { transition:transform 900ms var(--ease-out), opacity 700ms ease; }
.hero-copy h1 { transition-delay:70ms; }
.hero-copy .intro { transition-delay:140ms; }
.hero-copy .hero-link { transition-delay:210ms; }
@starting-style { .hero-copy>* { opacity:0; transform:translateY(24px); } }
.eyebrow { margin:0 0 28px; font-size:11px; text-transform:uppercase; letter-spacing:.19em; font-weight:700; color:var(--acid); }
.eyebrow.dark { color:#51564d; }
h1 { font-size:clamp(58px,8.3vw,132px); letter-spacing:-.07em; line-height:.82; margin:0; font-weight:500; }
.hero-title-long { font-size:clamp(48px,6.3vw,94px); letter-spacing:-.055em; line-height:.9; }
.intro { margin:34px 0; max-width:600px; font-size:18px; line-height:1.5; color:rgba(255,255,255,.83); }
.hero-link,.text-link { display:inline-flex; gap:50px; align-items:center; border-bottom:1px solid currentColor; padding:0 0 8px; text-transform:uppercase; letter-spacing:.11em; font-size:11px; font-weight:700; transition:gap 220ms var(--ease-out), transform 140ms var(--ease-out); }
.hero-link:hover,.text-link:hover { gap:62px; }
.hero-link:active,.text-link:active { transform:scale(.98); }
.hero-link span { color:var(--acid); }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px 38px; }
.hero-index { position:absolute; z-index:2; right:3.2vw; bottom:34px; display:flex; gap:55px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.category-index { padding:100px 6.5vw; background:var(--paper); }
.category-index>a { position:relative; display:grid; grid-template-columns:90px 1fr 180px 30px; align-items:center; min-height:116px; padding:18px 0; border-top:1px solid var(--line); transition:padding 260ms var(--ease-out), background-color 180ms ease; }
.category-index>a:hover { padding-left:18px; padding-right:18px; background:rgba(255,255,255,.28); }
.category-index>a:last-child { border-bottom:1px solid var(--line); }
.category-index span { font-size:10px; letter-spacing:.16em; }
.category-index strong { font-size:clamp(31px,4.6vw,70px); font-weight:500; letter-spacing:-.025em; line-height:1.05; }
.category-index a>span:last-child { font-size:22px; transition:transform 220ms var(--ease-out); }
.category-index a:hover>span:last-child { transform:translate(4px,-4px); }
.category-thumb { height:80px; overflow:hidden; opacity:.66; transition:opacity 220ms ease, transform 300ms var(--ease-out); }
.category-thumb img { width:100%; height:100%; object-fit:cover; }
.category-index a:hover .category-thumb { opacity:1; transform:scale(1.04); }
.collection { background:#f4f2ec; padding:110px 3.2vw 70px; scroll-margin-top:0; }
.collection-awning { background:#dedbd3; }
.collection-gate { background:#f0eee8; }
.section-head { display:grid; grid-template-columns:2fr 1fr; align-items:end; gap:40px; padding:0 0 90px; }
.section-head h2,.material-copy h2,.contact h2 { font-size:clamp(48px,6.7vw,104px); line-height:.92; letter-spacing:-.06em; font-weight:500; margin:0; }
.section-head>p { max-width:380px; margin:0 0 8px; color:#5f635c; line-height:1.6; }
.product { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(330px,1fr); border-top:1px solid var(--line); padding:26px 0 110px; gap:5vw; }
.product:nth-child(even) { grid-template-columns:minmax(330px,1fr) minmax(0,1.8fr); }
.product:nth-child(even) .product-image { grid-column:2; grid-row:1; }
.product:nth-child(even) .product-info { grid-column:1; grid-row:1; }
.product-image { position:relative; overflow:hidden; aspect-ratio:1.35; background:#c8c5be; }
.product-image:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.18)); pointer-events:none; }
.product-image img { height:100%; object-fit:cover; transition:transform 700ms var(--ease-out), filter 300ms ease; }
.product-gallery { overflow:hidden; }
.image-track { display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-inline:contain; scrollbar-width:none; touch-action:pan-x pan-y; }
.image-track::-webkit-scrollbar { display:none; }
.image-track img { flex:0 0 100%; width:100%; scroll-snap-align:start; scroll-snap-stop:always; }
.gallery-arrow { position:absolute; z-index:3; top:50%; width:44px; height:44px; padding:0; display:grid; place-items:center; transform:translateY(-50%); border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(10,10,10,.58); color:white; font:500 20px/1 Arial,sans-serif; cursor:pointer; backdrop-filter:blur(8px); transition:transform 140ms var(--ease-out), background-color 180ms ease, opacity 180ms ease; }
.gallery-arrow-prev { left:16px; }
.gallery-arrow-next { right:16px; }
.gallery-arrow:active { transform:translateY(-50%) scale(.94); }
/* WCAG 2.2.2: moving content needs a persistent pause control */
.gallery-pause { position:absolute; z-index:3; bottom:16px; right:16px; width:34px; height:34px; padding:0; display:grid; place-items:center; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(10,10,10,.58); color:white; font:500 11px/1 Arial,sans-serif; cursor:pointer; backdrop-filter:blur(8px); transition:background-color 180ms ease, opacity 180ms ease; }
.gallery-pause:active { transform:scale(.94); }

.product:hover .product-image img { transform:scale(1.025); }
.image-index { position:absolute; z-index:2; top:18px; left:18px; color:white; background:rgba(10,10,10,.6); padding:7px 10px; font-size:9px; letter-spacing:.15em; }
.product-info { display:flex; flex-direction:column; min-height:100%; padding-bottom:4px; align-self:start; position:sticky; top:34px; }
.product-title>p:first-child { font-size:10px; letter-spacing:.16em; font-weight:700; color:#676b63; }
.product-title h3 { margin:12px 0 8px; font-size:clamp(36px,4vw,64px); line-height:.94; letter-spacing:-.05em; font-weight:500; }
.kicker { margin:16px 0 0; font-family:Georgia,serif; font-style:italic; font-size:21px; color:#64695f; }
.product-copy { margin:36px 0; max-width:470px; font-size:15px; line-height:1.6; }
dl { margin:auto 0 35px; border-top:1px solid var(--line); }
dl>div { display:grid; grid-template-columns:120px 1fr; padding:14px 0; border-bottom:1px solid var(--line); gap:18px; }
dt { text-transform:uppercase; font-size:9px; font-weight:700; letter-spacing:.14em; color:#696d65; }
dd { margin:0; font-size:12px; line-height:1.45; }
.material-section { min-height:90vh; display:grid; grid-template-columns:1.08fr 1fr; background:#171914; color:white; }
.material-visual { min-height:760px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.metal-panel { background:radial-gradient(circle at 30% 20%,#565b55 0,#242722 40%,#11130f 100%); position:relative; }
.metal-panel:after { content:"POWDER COATED STEEL"; position:absolute; bottom:30px; left:30px; font-size:9px; letter-spacing:.17em; color:#aaa; }
.wood-panel { background:repeating-linear-gradient(90deg,#5e361d 0,#81512d 3px,#4d2b17 8px,#8a5931 13px,#5a331d 18px); box-shadow:inset 30px 0 50px rgba(0,0,0,.35); position:relative; }
.wood-panel:after { content:"WOOD-TEXTURE ALUMINIUM"; position:absolute; bottom:30px; left:30px; font-size:9px; letter-spacing:.17em; color:#ddd; }
.material-copy { padding:9vw 7vw; display:flex; flex-direction:column; justify-content:center; }
.material-copy h2 { font-size:clamp(52px,6vw,92px); }
.material-copy>p:not(.eyebrow) { margin:45px 0; max-width:560px; color:#b4b7b0; line-height:1.7; }
.material-copy ul { list-style:none; padding:0; margin:0; border-top:1px solid #454840; }
.material-copy li { padding:17px 0; border-bottom:1px solid #454840; font-size:12px; letter-spacing:.07em; text-transform:uppercase; }
.material-copy li span { color:var(--acid); margin-right:30px; }
.contact { padding:130px 6.5vw 110px; min-height:75vh; display:flex; flex-direction:column; justify-content:center; }
.contact h2 { font-size:clamp(65px,10vw,155px); }
.brochure-link { margin-top:70px; padding:24px 0 20px; border-top:1px solid var(--ink); border-bottom:2px solid var(--ink); display:flex; align-items:center; justify-content:space-between; font-size:clamp(36px,6vw,92px); line-height:1; letter-spacing:-.055em; }
.brochure-link>span { color:#747a70; font-size:.6em; }
.contact-actions { align-self:flex-end; margin-top:60px; display:flex; flex-wrap:wrap; gap:18px 42px; }
.contact-actions a { padding-bottom:10px; border-bottom:2px solid var(--ink); font-size:clamp(20px,2.5vw,40px); letter-spacing:-.03em; transition:transform 160ms var(--ease-out); }
.contact-actions a:active { transform:scale(.98); }
.contact-note { align-self:flex-end; max-width:400px; margin:26px 0 0; color:#656a61; font-size:12px; line-height:1.6; }
footer { background:var(--acid); display:grid; grid-template-columns:2fr 1fr 1fr; align-items:end; padding:55px 3.2vw; min-height:230px; }
footer p { margin:0; font-size:10px; line-height:1.6; letter-spacing:.12em; text-transform:uppercase; }
.footer-wordmark { font-size:clamp(18px,2.2vw,30px); letter-spacing:-.055em; }
.footer-address { margin-top:18px; }

@media(hover:none){ .hero:hover>img,.product:hover .product-image img { transform:none; } }
@media(hover:hover) and (pointer:fine){ .gallery-arrow,.gallery-pause { opacity:.72; } .product-gallery:hover .gallery-arrow,.gallery-arrow:focus-visible,.product-gallery:hover .gallery-pause,.gallery-pause:focus-visible { opacity:1; background:rgba(10,10,10,.78); } }

@media(max-width:800px){
  .nav-shell{padding:22px 20px}.wordmark{font-size:20px}nav a:not(:last-child){display:none}nav{gap:0}
  .hero-copy{left:20px;right:20px;bottom:13vh}.hero h1{font-size:60px}.hero h1.hero-title-long{font-size:clamp(42px,9vw,54px);line-height:.93}.intro{font-size:15px;max-width:90%}.hero-index{left:20px;right:auto;bottom:22px}
  .category-index{padding:80px 20px}.category-index>a{grid-template-columns:48px minmax(0,1fr) 22px;min-height:92px;column-gap:10px}.category-index strong{font-size:clamp(29px,8vw,36px);letter-spacing:-.02em;line-height:1.08;overflow-wrap:break-word}.category-thumb{display:none}
  .collection{padding:85px 20px 55px}.section-head{grid-template-columns:1fr;padding-bottom:55px}.section-head>p{margin-top:10px}
  .product,.product:nth-child(even){grid-template-columns:1fr;gap:25px;padding-bottom:70px}.product:nth-child(even) .product-image,.product:nth-child(even) .product-info{grid-column:1;grid-row:auto}.product-image{aspect-ratio:1.05}.product-info{min-height:auto;position:static}.product-title h3{font-size:45px}.product-copy{margin:25px 0 32px}dl{margin:0 0 30px}
  .material-section{grid-template-columns:1fr}.material-visual{min-height:480px}.material-copy{padding:90px 20px}
  .contact{padding:100px 20px;min-height:65vh}.contact h2{font-size:64px}.brochure-link{margin-top:52px;padding:18px 0 16px;font-size:clamp(34px,10vw,54px)}.contact-actions,.contact-note{align-self:flex-start}.contact-actions{gap:16px 28px}
  footer{grid-template-columns:1fr 1fr;gap:55px 20px;padding:45px 20px}footer .footer-brand{grid-column:1/-1}
}

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