/* DEL Hydraulics site. Dark shop-floor bands alternate with light product bands; brand yellow is the one accent. */
html{-webkit-text-size-adjust:100%;background:#121210}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
:root{
  --bg:#EFEFEA; --surface:#FFFFFF; --ink:#17160F; --muted:#5C5A50; --line:#D6D4CA;
  --yellow:#FFD326; --yellow-deep:#E5B800; --yellow-ink:#17160F;
  --band:#121210; --band-2:#1D1C18; --band-ink:#F4F2EA; --band-muted:#B5B2A5; --plate:#FFFFFF;
  --studio:radial-gradient(110% 85% at 50% 30%,#F7F6F2 0%,#E4E2DB 55%,#CDCAC1 100%);
  --ok:#1F7A3D; --link:#8A6A00; --shadow:0 18px 40px -18px rgba(18,18,16,.45);
  --f-display:"Oswald","Arial Narrow",Arial,sans-serif;
  --f-body:"Barlow","Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141411; --surface:#1E1D19; --ink:#F1EFE6; --muted:#A8A597; --line:#36342C;
  --band:#0B0B09; --band-2:#191814; --plate:#F4F3EE; --studio:radial-gradient(110% 85% at 50% 30%,#55534B 0%,#36352F 55%,#24231F 100%); --ok:#5CC27E; --link:#FFD326; --shadow:0 18px 40px -18px rgba(0,0,0,.8); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141411; --surface:#1E1D19; --ink:#F1EFE6; --muted:#A8A597; --line:#36342C;
  --band:#0B0B09; --band-2:#191814; --plate:#F4F3EE; --studio:radial-gradient(110% 85% at 50% 30%,#55534B 0%,#36352F 55%,#24231F 100%); --ok:#5CC27E; --link:#FFD326; --shadow:0 18px 40px -18px rgba(0,0,0,.8); color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--f-body)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--band)}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:.01em;line-height:1.05;text-wrap:balance;margin:0;text-transform:uppercase}
h1{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:1.2rem}
p{margin:0}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 .82rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:28px;height:4px;background:var(--yellow);transform:skewX(-30deg)}
.dark .eyebrow{color:var(--yellow)}
.mono{font-family:var(--f-mono);font-size:.92em}


header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--band) 92%,transparent);color:var(--band-ink);border-bottom:1px solid #2A2924}
header .wrap{display:flex;align-items:center;gap:20px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand img{height:46px;width:auto}
nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
nav a{position:relative;color:var(--band-ink);text-decoration:none;font:500 .95rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:12px 12px}
nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .25s}
nav a:hover::after,nav a[aria-current="page"]::after{transform:scaleX(1)}
nav a.cta{background:var(--yellow);color:var(--yellow-ink);margin-left:8px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);padding-inline:18px}
nav a.cta::after{display:none}

.btn{display:inline-flex;align-items:center;gap:10px;font:600 1rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:16px 24px;text-decoration:none;border:2px solid currentColor;color:inherit;background:transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn.primary{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink);box-shadow:0 6px 0 var(--yellow-deep)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--yellow-deep)}
.btn.primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--yellow-deep)}
.btn:not(.primary):hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
.row{display:flex;gap:14px;flex-wrap:wrap}

/* dark bands */
.dark{background:var(--band);color:var(--band-ink)}
.dark p.sub{color:var(--band-muted)}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--band)}
.hero-photo{position:absolute;top:0;bottom:0;left:52%;right:-12%;overflow:hidden;transform:skewX(-8deg);transform-origin:bottom left;border-left:18px solid var(--yellow)}
.hero-photo .hs{position:absolute;inset:0 0 0 -30%;background:center/cover no-repeat;opacity:0;transition:opacity 1.2s ease;transform:skewX(8deg);transform-origin:bottom left}
.hero-photo .hs.base{opacity:1;background-image:url(/img/hero.jpg)}
.hero-photo .hs.on{opacity:1}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--band) 0%,rgba(18,18,16,.55) 30%,rgba(18,18,16,.1) 70%)}
.hero-slash{display:none;position:absolute;top:0;bottom:0;left:calc(50% + 2%);width:18px;background:var(--yellow);transform:skewX(-8deg);transform-origin:bottom}
.hero .wrap{position:relative;padding-block:clamp(56px,10vw,120px)}
.hero h1{max-width:12ch;color:var(--band-ink)}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero p.sub{font-size:1.2rem;margin-block:20px 32px;max-width:40ch}
.hero .row .btn:not(.primary){color:var(--band-ink)}
.rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.rise.d2{animation-delay:.12s}.rise.d3{animation-delay:.24s}
@keyframes rise{from{transform:translateY(24px);opacity:.001}to{transform:none;opacity:1}}

/* stat strip */
.stats{background:var(--yellow);color:var(--yellow-ink)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-block:22px}
.stats .wrap > div{padding:4px 18px;border-left:2px solid rgba(23,22,15,.18)}
.stats .wrap > div:first-child{border-left:0;padding-left:0}
.stats b{display:block;font:700 2.2rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.stats .wrap > div > span{font:500 .95rem/1.3 var(--f-body)}

/* product grid */
.band{padding-block:72px}
.head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.head p{color:var(--muted);max-width:52ch;margin-top:10px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s;overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .3s;z-index:1}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card .plate{background:var(--studio);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:14px;max-width:100%}
.card .plate img{max-height:100%;object-fit:contain;transition:transform .4s}
.card:hover .plate img{transform:scale(1.07) rotate(-1.5deg)}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .num{font:500 .8rem/1 var(--f-mono);color:var(--muted)}
.card .body p{color:var(--muted);font-size:.95rem}
.card .tag{margin-top:auto;padding-top:8px;font:600 .8rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card.live .tag{color:var(--link)}

/* in the cab */
.cab .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;padding-block:80px}
.cab .wrap > *{min-width:0}
.cab figure{margin:0;position:relative}
.cab figure img{width:100%;display:block;box-shadow:var(--shadow)}
.cab figure::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:3px solid var(--yellow);z-index:-1}
.cab ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
.cab li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.cab li b{display:block;font:600 1.05rem/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.04em}
.cab li span{color:var(--muted)}
.cab li i{width:12px;height:12px;margin-top:6px;background:var(--yellow);transform:rotate(45deg)}

.config{background:linear-gradient(115deg,var(--band) 0 62%,var(--yellow) 62% 63.5%,var(--band-2) 63.5%);color:var(--band-ink)}
.config .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding-block:56px}
.config p{color:var(--band-muted);margin-top:10px;max-width:50ch}
.config .btn{color:var(--yellow)}
.config img{width:180px;background:var(--studio);padding:10px;transform:rotate(3deg);box-shadow:var(--shadow)}
.config .right{display:flex;align-items:center;gap:28px;flex-wrap:wrap}

/* product page */
.phead{position:relative;overflow:hidden}
.phead .wrap{display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:center;padding-block:56px}
.phead .wrap > *{min-width:0}
.phead p.sub{margin-top:14px}
.crumbs{font-size:.9rem;color:var(--band-muted);margin-bottom:14px}
.crumbs a{color:var(--band-muted)}
.phead .plate{background:var(--studio);padding:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{font:500 .85rem/1 var(--f-body);padding:8px 12px;border:1px solid #3A3931;color:var(--band-ink)}
.chip b{color:var(--yellow);font-weight:600}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding-block:48px 8px}
.specs ul{margin:12px 0 0;padding-left:20px;display:grid;gap:6px}
.subnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hh,67px));z-index:4;background:var(--bg);border-bottom:1px solid var(--line);margin-top:32px}
.subnav .wrap{display:flex;gap:6px;flex-wrap:wrap;padding-block:10px}
.subnav a{font:600 .875rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:9px 12px;border:1px solid var(--line);background:var(--surface)}
.subnav a:hover{border-color:var(--ink)}
.tablehead{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-top:40px;margin-bottom:12px;scroll-margin-top:140px}
.tablehead p{color:var(--muted);font-size:.92rem;margin-top:6px}
.search{font:inherit;padding:11px 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:min(100%,280px)}
.tbl{overflow-x:auto;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:.95rem}
/* Fixed column widths so every table on a page lines up. Description takes what is left. */
table{table-layout:fixed}th.c0{width:170px}th.c2{width:180px}th.c3,th.c4{width:84px}th.c5{width:18%}
th{font:600 .8rem/1.2 var(--f-display);letter-spacing:.1em;text-transform:uppercase;text-align:left;background:var(--band);color:var(--band-ink);padding:12px 14px;white-space:nowrap}
td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top;transition:background .15s}
tbody tr{box-shadow:inset 0 0 0 transparent;transition:box-shadow .15s}
tbody tr:hover{box-shadow:inset 5px 0 0 var(--yellow)}
tbody tr:hover td{background:color-mix(in srgb,var(--yellow) 10%,var(--surface))}
td.pn{white-space:nowrap}
.nw{white-space:nowrap}
.tbl .c2,.tbl .c3,.tbl .c4{text-align:center}
td.pn button{all:unset;cursor:pointer;font-family:var(--f-mono);font-weight:500;border-bottom:1px dashed var(--muted)}
td.pn button:focus-visible{outline:3px solid var(--yellow)}
td.notes{color:var(--muted);font-size:.9rem;max-width:34ch}
.empty{padding:14px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--band);color:var(--band-ink);padding:12px 18px;font-size:.95rem;border-left:5px solid var(--yellow);box-shadow:var(--shadow);z-index:20}

/* catalog */
.cat .wrap{display:grid;grid-template-columns:420px 1fr;gap:64px;align-items:center;padding-block:72px}
.cat .wrap > *{min-width:0}
.book{position:relative;perspective:1600px;max-width:360px;margin:0 auto}
.book .back{position:absolute;inset:0;background:var(--plate);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font:600 1rem var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#5C5A50;padding:24px;text-align:center}
.book img{position:relative;width:100%;display:block;transform-origin:left center;transition:transform 1s cubic-bezier(.3,.7,.2,1);box-shadow:var(--shadow);backface-visibility:hidden}
.book:hover img,.book.open img{transform:rotateY(-38deg)}
.cat p.sub{margin-top:14px;max-width:48ch}
.note{margin-top:24px;padding:14px 16px;border:1px dashed #4A483F;color:var(--band-muted);font-size:.95rem}

/* forms */
.formband .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start;padding-block:56px 80px}
.formband .wrap > *{min-width:0}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:26px}
.formgrid .full{grid-column:1/-1}
label{display:block;font:600 .82rem/1.2 var(--f-display);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
label small{font:400 .85rem var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted)}
input,select,textarea{font:inherit;width:100%;padding:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--yellow) 60%,transparent)}
textarea{min-height:120px;resize:vertical}
.steps{display:flex;gap:0;margin-top:22px;border:1px solid var(--line);background:var(--surface)}
.steps div{flex:1;padding:12px 14px;font-size:.9rem;color:var(--muted);border-left:1px solid var(--line)}
.steps div:first-child{border-left:0}
.steps b{display:block;font:600 .95rem/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.aside{background:var(--band);color:var(--band-ink);padding:26px;position:sticky;top:100px}
.aside h2{margin-bottom:12px;color:var(--yellow)}
.aside ul{padding-left:18px;margin:0;display:grid;gap:8px;color:var(--band-muted)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumbs img{width:72px;height:72px;object-fit:cover;border:1px solid var(--line)}
.done{margin-top:24px;padding:22px;border:2px solid var(--ok);background:var(--surface);animation:rise .5s both}
.done b{font-family:var(--f-mono);font-size:1.5rem;color:var(--ok)}
.done p{margin-top:8px;color:var(--muted)}
dl.info{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0}
dl.info dt{font:600 .8rem/1.6 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
dl.info dd{margin:0}

footer{background:var(--band);color:var(--band-muted);font-size:.92rem;border-top:6px solid var(--yellow)}
footer .wrap{padding-block:32px;display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;align-items:center}
footer img{height:40px}

@media (max-width:960px){
  .cab .wrap,.phead .wrap,.cat .wrap,.formband .wrap{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .stats .wrap{grid-template-columns:repeat(2,1fr);row-gap:16px}
  .stats .wrap > div:nth-child(3){border-left:0;padding-left:0}
  .hero-photo{position:relative;inset:auto;height:52vw;max-height:360px;transform:none;border-left:0;clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
  .hero-photo .hs{inset:0;transform:none}
  .hero-photo::after{background:linear-gradient(0deg,var(--band) 0%,rgba(18,18,16,0) 45%)}
  .hero-slash{display:none}
  .hero .wrap{padding-block:24px 56px}
  .config{background:var(--band)}
  .config .wrap{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
  .aside{position:static}
  nav{margin-left:0}
}
@media (max-width:540px){
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .card .body{padding:12px}
  .card .body p{display:none}
  .formgrid{grid-template-columns:1fr}
  .steps{flex-direction:column}
  .steps div{border-left:0;border-top:1px solid var(--line)}
  .steps div:first-child{border-top:0}
  nav a{padding:10px 7px;font-size:.875rem;letter-spacing:.06em}
  nav a.cta{margin-left:4px;padding-inline:12px}
  nav a[data-v="home"]{display:none}
  .brand img{height:38px}
  .subnav{top:calc(env(safe-area-inset-top,0px) + var(--hh,108px))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* round 3: product pages, phone part lists */
.card .tag{color:var(--link)}
.dash{color:var(--muted)}
.plates{display:grid;gap:14px}
.phead .plate img{max-height:320px;margin:auto;display:block}
.plates .plate.small{width:52%;justify-self:end;margin-top:-70px;position:relative}
.plates .plate.small img{max-height:150px}
/* two photos side by side, no overlap */
.plates.two{grid-template-columns:1fr 1fr;align-items:center}
.plates.two .plate.small{width:auto;margin-top:0;justify-self:stretch}
.plates.two .plate img,.plates.two .plate.small img{max-height:260px}
.card .plate.two{gap:10px}
.card .plate.two img{min-width:0;flex:1 1 0;max-width:50%}
.mlist{display:none;gap:8px}
.mrow{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--line);transition:border-color .2s,box-shadow .2s}
.mrow[open]{border-left-color:var(--yellow);box-shadow:var(--shadow)}
.mrow summary{list-style:none;display:grid;grid-template-columns:1fr auto;gap:3px 14px;padding:14px;cursor:pointer}
.mrow summary::-webkit-details-marker{display:none}
.mpn{font:500 1rem/1.2 var(--f-mono)}
.mdesc{grid-column:1;color:var(--muted);font-size:.93rem;line-height:1.35}
.chev{grid-row:1/3;grid-column:2;align-self:center;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .2s}
.mrow[open] .chev{transform:rotate(-135deg)}
.mrow dl{margin:0;padding:2px 14px 4px;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;border-top:1px solid var(--line);padding-top:12px}
.mrow dt{font:600 .875rem/1.6 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mrow dd{margin:0;font-size:.95rem}
.mact{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px 14px}
.mbtn{font:600 .875rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:11px 12px;border:1px solid var(--ink);background:transparent;color:var(--ink);text-decoration:none;cursor:pointer}
.mbtn:first-child{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink)}
.hint-m{display:none}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}
.pager a{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink);font:600 1.1rem/1.1 var(--f-display);text-transform:uppercase}
.pager a span{font:500 .875rem var(--f-body);color:var(--muted);text-transform:none}
.pager a.nx{text-align:right}
.pager a:hover{border-color:var(--ink)}
@media (max-width:720px){
  .tbl{display:none}.mlist{display:grid}.hint-d{display:none}.hint-m{display:inline}.search{width:100%}
  .phead .plate,.plates .plate.small{transform:none}
  .plates{grid-template-columns:1fr auto;align-items:end}
  .plates.two{grid-template-columns:1fr 1fr;align-items:center}
  .plates.two .plate img,.plates.two .plate.small img{max-height:160px}
  .plates .plate.small{width:auto;margin-top:0}
  .phead .plate img{max-height:200px}
}

/* round 4: flipbook, about */
.cat .wrap.cathead{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;padding-block:48px 28px}
.cathead p.sub{margin-top:12px;max-width:52ch}
.cat .wrap.fbwrap{display:block;padding-block:0}
.fb{position:relative;width:100%;margin:0 auto;max-width:1060px;aspect-ratio:1400/906;perspective:2600px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.half{position:absolute;top:0;bottom:0;width:50%}
.half.l{left:0}.half.r{right:0}
.hot{position:absolute;z-index:2;background:transparent;border:0;padding:0;cursor:pointer}
.hot:hover,.hot:focus-visible{background:rgba(255,211,38,.28);outline:2px solid var(--yellow)}
.half img,.face img{width:100%;height:100%;object-fit:cover;display:block;background:#fff}
.half.empty img{visibility:hidden}
.half:not(.empty){box-shadow:0 24px 50px -20px rgba(0,0,0,.7)}
.half.l:not(.empty)::after,.half.r:not(.empty)::after{content:"";position:absolute;top:0;bottom:0;width:7%;pointer-events:none}
.half.l::after{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.18))}
.half.r::after{left:0;background:linear-gradient(270deg,transparent,rgba(0,0,0,.18))}
.leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.45,.05,.25,1);z-index:3}
.leaf.fwd{left:50%;transform-origin:left center}
.leaf.bwd{left:0;transform-origin:right center}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.face.back{transform:rotateY(180deg)}
.fb.single{max-width:520px;aspect-ratio:700/906;overflow:hidden}
.fb.single .half.l{display:none}
.fb.single .half.r,.fb.single .leaf{width:100%;left:0}
.fb.single .half.r::after{display:none}
.fbbar{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:22px;font:600 1rem var(--f-display);letter-spacing:.1em;text-transform:uppercase}
.fbbtn{font:inherit;letter-spacing:inherit;text-transform:inherit;background:transparent;color:var(--band-ink);border:2px solid #4A483F;padding:10px 16px;cursor:pointer}
.fbbtn:hover:not(:disabled){border-color:var(--yellow);color:var(--yellow)}
.fbbtn:disabled{opacity:.35;cursor:default}
#fbCount{min-width:11ch;text-align:center;color:var(--yellow);font-variant-numeric:tabular-nums}
.thumbs-strip{display:flex;gap:8px;overflow-x:auto;padding-block:20px 56px;scrollbar-width:thin}
.thumbs-strip button{flex:none;width:58px;padding:0;border:2px solid transparent;background:#fff;cursor:pointer;opacity:.6;transition:opacity .15s,border-color .15s}
.thumbs-strip button img{display:block;width:100%;aspect-ratio:700/906;object-fit:cover}
.thumbs-strip button:hover{opacity:1}
.thumbs-strip button.on{opacity:1;border-color:var(--yellow)}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:5px solid var(--yellow);background:var(--surface);box-shadow:var(--shadow)}
.why div{padding:24px;border-left:1px solid var(--line)}
.why div:first-child{border-left:0}
.why p{color:var(--muted);margin-top:10px}
.dl{display:grid;gap:8px;margin-top:22px}
.dl a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.dl a:hover{border-color:var(--ink);transform:translateX(4px)}
.dl b{font:600 1rem/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.04em}
.dl span{color:var(--muted);font-size:.9rem;white-space:nowrap}
@media (max-width:960px){.why{grid-template-columns:1fr 1fr}.why div:nth-child(3){border-left:0}.why div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:540px){.why{grid-template-columns:1fr}.why div{border-left:0;border-top:1px solid var(--line)}.why div:first-child{border-top:0}.fbbar{gap:10px}.fbbtn{padding:10px 12px}.dl a{flex-direction:column;align-items:flex-start}}

/* round 5: search, footer, help band, scroll touches */
.sbtn{margin-left:6px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--band-ink);border:1px solid #3A3931;cursor:pointer}
.sbtn:hover,.sbtn[aria-expanded="true"]{color:var(--yellow-ink);background:var(--yellow);border-color:var(--yellow)}
.spanel{background:var(--band-2);border-top:1px solid #2E2D27;box-shadow:0 20px 40px -10px rgba(0,0,0,.6)}
.spanel .wrap{display:grid;gap:10px;padding-block:18px 20px}
.slabel{color:var(--yellow)}
.sinput,.findbar input{font:500 1.15rem var(--f-mono);padding:14px 16px;background:var(--band);color:var(--band-ink);border:2px solid #4A483F}
.sinput:focus,.findbar input:focus{border-color:var(--yellow);box-shadow:none}
.sres{display:grid;gap:6px;max-height:min(60vh,520px);overflow:auto}
.shit{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:baseline;padding:12px 14px;background:var(--band);border:1px solid #2E2D27;color:var(--band-ink)}
.shit:hover,.shit:focus-visible{border-color:var(--yellow)}
.shit b{font:500 .98rem var(--f-mono);color:var(--yellow)}
.shit span{color:var(--band-muted);font-size:.92rem;min-width:0}
.shit i{font:600 .75rem var(--f-display);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--band-muted)}
.snone{color:var(--band-muted);font-size:.95rem;padding:6px 2px}
.findbar{display:grid;gap:10px;margin-bottom:32px;padding:22px;background:var(--band);color:var(--band-ink);border-left:6px solid var(--yellow)}
.findbar label{color:var(--yellow);margin:0}
.helpband{margin-top:48px;display:grid;grid-template-columns:1fr auto;gap:20px 32px;align-items:center;padding:28px;background:var(--band);color:var(--band-ink);border-left:6px solid var(--yellow)}
.helpband h3{color:var(--yellow);font-size:1.5rem}
.helpband p{color:var(--band-muted);margin-top:8px;max-width:56ch}
.helpband .btn:not(.primary){color:var(--band-ink)}
footer .wrap.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;padding-block:44px 28px;align-items:start}
footer .fbrand img{height:56px}
footer p{margin-top:10px;line-height:1.5}
footer h2{font:600 .85rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:var(--band-ink);text-decoration:none}
footer a:hover{color:var(--yellow)}
footer .fphone{font:600 1.35rem var(--f-display);letter-spacing:.04em;color:var(--band-ink)}
footer .ntea{font:600 .875rem/1.7 var(--f-display);letter-spacing:.1em;text-transform:uppercase;list-style:none;padding:0;margin:14px 0 0}
footer .wrap.fbottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:16px 24px;border-top:1px solid #2A2924;font-size:.875rem}
.pre{transform:translateY(26px)}
.card,.why div,.cab figure,.specs > div,.helpband,.dl a{transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.totop{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:6;width:48px;height:48px;font:700 1.3rem var(--f-display);background:var(--yellow);color:var(--yellow-ink);border:0;cursor:pointer;box-shadow:var(--shadow);clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%)}
@media (max-width:960px){footer .wrap.fcols{grid-template-columns:1fr 1fr}.helpband{grid-template-columns:1fr}}
@media (max-width:540px){footer .wrap.fcols{grid-template-columns:1fr}.shit{grid-template-columns:1fr}.sbtn{width:40px;height:40px;order:2;margin-left:auto}header nav{order:3;width:100%;margin-left:0}header .wrap{row-gap:6px}}
footer .wrap.fbottom{padding-right:72px}

/* real site additions */
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--yellow-ink);padding:10px 14px;z-index:30}
.skip:focus{left:8px;top:8px}
nav a.cta{color:var(--yellow-ink)}
.trap{position:absolute;left:-9999px}
.formerr{margin-top:12px;color:#C0392B;font-weight:600}
label small{font:400 .78rem var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted)}
.formgrid .bad{border-color:#C0392B}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fnote{margin:6px 0 0;font-size:.875rem;color:var(--muted)}
.addrbox{position:relative}
.addrlist{position:absolute;left:0;right:0;z-index:5;margin:0;padding:0;list-style:none;background:var(--surface);border:2px solid var(--ink);border-top:0;max-height:300px;overflow:auto;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.addrlist li{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--line);line-height:1.3}
.addrlist li small{display:block;color:var(--muted)}
.addrlist li.on,.addrlist li:hover{background:var(--yellow);color:#121210}
.addrlist li.on small,.addrlist li:hover small{color:#3a382f}
.addrlist li.by{cursor:default;padding:6px 14px;font-size:.875rem;color:var(--muted);text-align:right;background:var(--surface)}
.page404{padding-block:96px}
.page404 p{margin-top:16px;max-width:52ch;color:var(--muted)}
@media (max-width:960px){.cab figure::before{inset:10px -10px -10px 10px}}
.tablehead,.specs{scroll-margin-top:calc(var(--hh,67px) + var(--sh,60px) + 16px)}
/* phones: jump bar is one row you swipe sideways, so it never covers half the screen */
@media (max-width:720px){.subnav .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.subnav .wrap::-webkit-scrollbar{display:none}.subnav a{flex:none;white-space:nowrap}}

/* Products menu in the header */
.pm{display:inline-flex;align-items:center}
.pmb{background:transparent;border:0;color:var(--band-ink);padding:0;margin-left:-12px;min-width:44px;min-height:44px;align-items:center;justify-content:center;cursor:pointer;display:inline-flex}
.pmb svg{transition:transform .2s}
.pmb[aria-expanded="true"] svg{transform:rotate(180deg)}
.ppanel{position:absolute;left:0;right:0;top:100%;background:color-mix(in srgb,var(--band-2) 95%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid #2E2D27;border-bottom:3px solid var(--yellow);box-shadow:0 24px 40px -12px rgba(0,0,0,.6);visibility:hidden;opacity:0;transition:opacity .12s,visibility 0s .12s}
.ppanel.open{visibility:visible;opacity:1;transition-delay:0s}
@media (hover:hover) and (min-width:721px){.ppanel{transition:opacity .12s .25s,visibility 0s .37s}header:has(.pm:hover) .ppanel,.ppanel:hover{visibility:visible;opacity:1;transition-delay:0s}
  .pm{position:relative}.pm::after{content:"";position:absolute;left:-100vw;right:-24px;top:100%;height:30px}}
.ppanel .wrap{display:block;padding-block:22px 18px}
.pgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:18px 32px}
.pgrid h4{margin:0 0 10px;font:600 .75rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.pgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pgrid a{display:block;color:var(--band-ink);text-decoration:none;font:500 1rem/1.2 var(--f-body);padding:6px 0}
.pgrid a:hover{color:var(--yellow)}
.pall{display:inline-block;margin-top:14px;color:var(--yellow);text-decoration:none;font:600 .85rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase}
@media (max-width:720px){.pgrid{grid-template-columns:1fr 1fr;gap:14px 20px}.ppanel{max-height:calc(100vh - 140px);overflow-y:auto}.pgrid a{padding:7px 0}}

/* narrow screens: Returns moves up next to search so it never wraps onto a row of its own */
header a.rtop{display:none;font:500 .95rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;background:var(--yellow);color:var(--yellow-ink);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);padding:12px 18px}
@media (max-width:819px){
  header .wrap{row-gap:6px}
  header a.rtop{display:inline-block;order:2;margin-left:auto}
  header .sbtn{order:2;margin-left:6px}
  header nav{order:3;width:100%;margin-left:0}
  header nav a.cta{display:none}
}
@media (max-width:540px){header a.rtop{font-size:.875rem;letter-spacing:.06em;padding:11px 14px}}
/* product photos: soft studio panel (--studio) with a shadow under the part */
.card .plate img,.phead .plate img{filter:drop-shadow(0 12px 10px rgba(0,0,0,.28))}
footer .fbottom .tm{flex-basis:100%;font-size:.875rem;opacity:.8}
footer .ffax{margin-top:-6px;font-size:.9rem}

/* round 7: phone in the header, product groups, catalog downloads */
/* Phone number in the header: plain text, no tel: link (Matt 10/22: a link gets in the way of copying, and phones
   offer to call a number on their own). On narrow screens it sits in the top row next to Returns, without the box. */
header .hphone{display:inline-flex;align-items:center;gap:8px;margin-left:6px;height:44px;padding:0 4px;color:var(--band-ink);font:600 1rem/1 var(--f-display);letter-spacing:.06em;white-space:nowrap;user-select:all}
@media (max-width:819px){header .hphone{order:2;margin-left:auto;border:0;padding:0 4px;font-size:.95rem}header a.rtop{margin-left:6px}}
@media (max-width:540px){header .hphone{font-size:.875rem;gap:5px;padding:0;height:40px}header .hphone svg{width:15px;height:15px}}
@media (max-width:400px){header .wrap{gap:10px}header a.rtop{padding:11px 10px;margin-left:0}header .hphone{font-size:.875rem;margin-left:0}header .hphone svg{display:none}header .brand img{height:34px}}
.groups{display:grid;gap:18px}
.ghead{font:600 .85rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 -6px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.groups .ghead:first-child{margin-top:0}
.catdl{display:flex;gap:12px;flex-wrap:wrap}
.catdl .btn:not(.primary){color:var(--band-ink)}
.hpause{position:absolute;right:16px;bottom:14px;z-index:2;padding:8px 12px;font:600 .72rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;background:rgba(18,18,16,.7);color:var(--band-ink);border:1px solid rgba(244,242,234,.4);cursor:pointer}
.hpause:hover,.hpause[aria-pressed="true"]{background:var(--yellow);color:var(--yellow-ink);border-color:var(--yellow)}
@media (max-width:960px){.hpause{top:calc(52vw - 44px);bottom:auto;max-height:30px}}
/* accessibility pass (axe, 10/22): headings in order (h1, h2, h3), links told apart without color, contrast in the dark box */
.why h2,.aside h2{font-size:1.2rem}
footer .ntea a{text-decoration:underline;text-underline-offset:3px}
.aside a{color:var(--yellow)}
.story{padding-top:0}
.story p:last-child{max-width:70ch;margin-top:16px;font-size:1.1rem}

/* print: part tables and page text in plain black on white; no header, footer, photos or buttons */
@media print{
  header,footer,.subnav,.totop,.toast,.helpband,.pager,.hero-photo,.hero-slash,.hpause,.skip,.ppanel,.spanel,.search,.mlist,.hint-d,.hint-m,.chips,.plates,.btn,.fbbar,.thumbs-strip,.catdl,.findbar{display:none!important}
  body,section,.band,.dark,.phead,.hero,.cat,.stats{background:#fff!important;color:#000!important}
  body{font-size:10.5pt}
  .wrap{max-width:none;padding:0}
  h1,h2,h3,.eyebrow,.sub,p,li,dt,dd{color:#000!important}
  .hero .wrap,.phead .wrap{padding-block:12pt}
  .tbl{overflow:visible;border:0;box-shadow:none;background:none}
  table{width:100%;border-collapse:collapse;page-break-inside:auto}
  tr{page-break-inside:avoid}
  thead th{background:#eee!important;color:#000!important;border-bottom:1px solid #000}
  td{border-bottom:1px solid #bbb;color:#000}
  .pn button{border:0;background:none;padding:0;font:inherit;color:#000;text-decoration:none}
  a{color:#000;text-decoration:none}
  .specs{display:grid;grid-template-columns:1fr 1fr;gap:16pt;border:0;box-shadow:none;background:none}
  .groups,.grid{display:block}
  .card{display:block;page-break-inside:avoid;border:1px solid #bbb;margin-bottom:8pt}
  .card .plate{display:none}
}

/* round 8 (Impeccable review): Contact is the yellow header button, Returns a plain link; focus rings that show on yellow;
   Shop by job; contact form callout */
nav a.cta:focus-visible,header a.rtop:focus-visible{clip-path:none;outline:3px solid var(--band-ink);outline-offset:3px}
.btn.primary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.dark .btn.primary:focus-visible,.helpband .btn.primary:focus-visible{outline-color:var(--band-ink)}
.jobsband{padding-block:56px 0}
.jobsband h2{margin:0}
.jobsub{color:var(--muted);margin-top:8px}
.jobs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:22px}
.job{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:112px;padding:18px;background:var(--band);color:var(--band-ink);text-decoration:none;border:1px solid #2A2924;border-bottom:5px solid var(--yellow);transition:transform .15s}
.job b{font:600 1.25rem/1.15 var(--f-display);letter-spacing:.04em;text-transform:uppercase}
.job > span{color:var(--band-muted);font-size:.95rem}
.job:hover{transform:translateY(-3px)}
.job:hover > span{color:var(--yellow)}
@media (max-width:960px){.jobs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.jobs{grid-template-columns:1fr 1fr}.job{min-height:92px;padding:14px}.job b{font-size:1.05rem}}
.jobchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.jobchips a{font:600 .9rem/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:12px 14px;border:1px solid var(--line);background:var(--surface)}
.jobchips a:hover{border-color:var(--ink)}
.jobchips a[aria-current]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.jobnote{margin:0 0 18px;color:var(--muted)}
.endcta{padding-block:0 72px}
.endcta .helpband{margin-top:0}
.helpband h2{color:var(--yellow);font-size:1.5rem}
.callfirst{margin-top:14px;font-size:1.05rem;max-width:56ch}
/* nothing under 14px (Impeccable review: small labels on phones) */
.eyebrow,.ghead,.card .num,.card .tag,footer h2,.hpause,.chip,th,label,dl.info dt,.pgrid h4,.pall{font-size:.875rem}
label small{font-size:.875rem}
footer li a,.pgrid a{display:inline-block;padding-block:3px}
.pgrid a{display:block;padding-block:6px}
.pall{padding-block:6px}
.jobnote a{color:var(--ink)}
/* 761-1100 px: tighter header so the search button stays on the top row (review: header was 130 px tall at 900) */
@media (min-width:820px) and (max-width:1100px){header .wrap{gap:10px}nav a{padding-inline:9px;letter-spacing:.06em}nav a::after{left:9px;right:9px}nav a.cta{margin-left:4px;padding-inline:14px}header .hphone{margin-left:0;font-size:.95rem}.brand img{height:40px}}
/* the header blur sits on a layer behind it, so the header is not a backdrop root and the products menu can blur the page too */
header::before{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}