/* PRODUCTS — "Spec Room": deep pine, sap green, technical */
.page-products{--bg:#0E1F17;--fg:#EEF0E2;--muted:rgba(238,240,226,.62);--line:rgba(238,240,226,.14);--accent:#D3E3A2}

.sp-head{padding:150px 0 50px}
.sp-head__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end}
.sp-head__title{font-size:clamp(80px,12.6vw,216px)}
.sp-head__title .serif{color:var(--accent)}
.sp-head__side .lede{margin-top:20px}
@media (max-width:900px){.sp-head{padding-top:120px}.sp-head__grid{grid-template-columns:1fr}}

/* configurator */
.cfg{padding:30px 0 clamp(90px,10vw,150px)}
.cfg__grid{display:grid;grid-template-columns:1.45fr 1fr;gap:0;border:1px solid var(--line)}
.cfg__stage{position:relative;min-height:620px;overflow:hidden;cursor:grab;touch-action:pan-y;background:radial-gradient(ellipse at 50% 55%,#1B3A2B 0%,#0E1F17 70%)}
.cfg__stage:active{cursor:grabbing}
.cfg__grid-bg{position:absolute;inset:-40%;background-image:linear-gradient(rgba(211,227,162,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(211,227,162,.07) 1px,transparent 1px);background-size:44px 44px;transform:perspective(900px) rotateX(64deg) translateY(22%);transform-origin:center}
.board-wrap{position:absolute;inset:0;display:grid;place-items:center;perspective:1500px}
.board{position:relative;transform-style:preserve-3d;transition:width .7s var(--ease),height .7s var(--ease)}
.f{position:absolute;left:50%;top:50%;backface-visibility:hidden;transition:all .7s var(--ease)}
/* long faces: flat-sawn grain */
.f-front,.f-back{background-color:#E3BE84;background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='300'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0018 0.055' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .3 0 0 0 0 .12 2.2 0 0 0 -.95'/%3E%3C/filter%3E%3Crect width='900' height='300' filter='url(%23g)'/%3E%3C/svg%3E"),
  linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.08));background-size:100% 100%}
.f-back{filter:brightness(.8)}
/* narrow edges: edge grain */
.f-top,.f-bottom{background-color:#DDB57A;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='60'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002 0.25' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .27 0 0 0 0 .1 2.4 0 0 0 -1.1'/%3E%3C/filter%3E%3Crect width='900' height='60' filter='url(%23g)'/%3E%3C/svg%3E");background-size:100% 100%}
.f-top{filter:brightness(1.12)}
.f-bottom{filter:brightness(.62)}
/* ends: growth rings */
.f-left,.f-right{background:repeating-radial-gradient(circle at 30% -60%,#E8C48A 0 5px,#B9773F 6px 8px,#E2BB80 9px 13px),#d9b07a;box-shadow:inset 0 0 0 1px rgba(80,40,10,.25)}
.f-left{filter:brightness(.85)}
.cfg__dim{position:absolute;left:24px;top:22px;font-size:12px;letter-spacing:.08em;padding:8px 12px;border:1px solid var(--line);color:var(--accent)}
.cfg__hint{position:absolute;left:24px;bottom:20px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cfg__panel{padding:clamp(24px,3vw,42px);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:26px;background:#0B1A13}
.seg{border:0;margin:0;padding:0;min-width:0}
.seg legend{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;padding:0}
.seg legend b{color:var(--accent);font-weight:500}
.seg__opts{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line)}
.seg__opts--grade{grid-template-columns:1fr 1fr 1fr 1.6fr}
.seg__opts button{height:48px;font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:.02em;border-right:1px solid var(--line);transition:background .3s,color .3s;color:var(--fg)}
.seg__opts--grade button{font-family:var(--f-body);font-weight:500;font-size:14px}
.seg__opts button:last-child{border-right:0}
.seg__opts button:hover{background:rgba(211,227,162,.08)}
.seg__opts button.on{background:var(--accent);color:#0E1F17}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line);outline:none;margin:14px 0 10px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);border:5px solid #0B1A13;box-shadow:0 0 0 1px var(--accent);cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:5px solid #0B1A13;box-shadow:0 0 0 1px var(--accent);cursor:pointer}
.ticks{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted)}
.read{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1px solid var(--line)}
.read div{padding:16px 0;border-bottom:1px solid var(--line)}
.read div:nth-child(odd){padding-right:16px;border-right:1px solid var(--line)}
.read div:nth-child(even){padding-left:16px}
.read dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.read dd{margin:6px 0 0;display:flex;flex-direction:column}
.read dd b{font-family:var(--f-display);font-weight:800;font-size:30px;line-height:1.05}
.read dd small{font-size:12px;color:var(--muted)}
.read__use{margin:0;color:var(--muted);font-size:15px;min-height:4.5em}
.cfg__cta{align-self:flex-start;color:#0E1F17}
@media (max-width:1000px){
  .cfg__grid{grid-template-columns:1fr}
  .cfg__stage{min-height:420px}
  .cfg__panel{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:520px){
  .seg__opts{grid-template-columns:repeat(3,1fr)}
  .seg__opts button:nth-child(3){border-right:0}
  .seg__opts button:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .seg__opts--grade{grid-template-columns:1fr 1fr}
  .seg__opts--grade button:nth-child(2){border-right:0}
  .seg__opts--grade button:nth-child(3){border-right:1px solid var(--line);border-bottom:0}
  .seg__opts--grade button:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .read dd b{font-size:24px}
  .cfg__cta{height:auto;padding:16px 22px;line-height:1.3}
}

/* product lines index */
.lines{padding:clamp(80px,10vw,140px) 0;position:relative}
.lines__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.lines__note{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lines__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lines__list li{display:grid;grid-template-columns:70px 1fr 1fr 40px;align-items:center;gap:20px;padding:30px 0;border-bottom:1px solid var(--line);position:relative;transition:padding .5s var(--ease),color .4s}
.lines__list li::before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1}
.lines__list{position:relative;z-index:1}
.lines__list li:hover{color:#0E1F17;padding-left:24px;padding-right:24px}
.lines__list li:hover::before{transform:scaleY(1)}
.lines__list li:hover p{color:rgba(14,31,23,.75)}
.lines__list span{font-size:12px;color:var(--accent);transition:color .4s}
.lines__list li:hover span{color:#0E1F17}
.lines__list h3{font-size:clamp(36px,4.6vw,76px)}
.lines__list p{margin:0;color:var(--muted);transition:color .4s}
.lines__list i{font-style:normal;font-size:28px;justify-self:end;transition:transform .4s var(--ease)}
.lines__list li:hover i{transform:rotate(-45deg)}
.lines__peek{position:fixed;left:0;top:0;width:320px;height:220px;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .35s,transform .35s var(--ease);overflow:hidden;border-radius:4px}
.lines__peek.on{opacity:1}
.lines__peek img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.lines__list li{grid-template-columns:44px 1fr;gap:6px 14px}.lines__list p{grid-column:2}.lines__list i{display:none}.lines__peek{display:none}}

/* spec sheet */
.sheet{padding:clamp(80px,10vw,140px) 0;background:#EEF0E2;color:#0E1F17;--muted:rgba(14,31,23,.6);--line:rgba(14,31,23,.15)}
.sheet__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,6vw,100px)}
.sheet__title{position:sticky;top:120px;align-self:start}
.sheet__title h2{font-size:clamp(50px,6vw,100px);margin-top:22px}
.sheet__title .serif{color:#2F6A47;font-size:.8em;display:inline-block;margin-top:.1em;line-height:1}
.sheet__list{margin:0;border-top:1.5px solid #0E1F17}
.sheet__list div{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:20px 0;border-bottom:1px dashed var(--line);font-size:14px}
.sheet__list dt{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;padding-top:2px}
.sheet__list dd{margin:0}
@media (max-width:860px){.sheet__grid{grid-template-columns:1fr}.sheet__title{position:static}.sheet__list div{grid-template-columns:1fr;gap:4px}}

/* custom cut band */
.custom{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.custom__in{display:flex;flex-direction:column;padding-top:clamp(70px,9vw,130px);padding-bottom:clamp(70px,9vw,130px)}
.custom__in .mono{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.custom__big{font-size:clamp(52px,8.6vw,150px);transition:color .4s}
.custom__big .serif{color:var(--accent)}
.custom__big i{font-style:normal;display:inline-block;transition:transform .5s var(--ease);color:var(--accent)}
.custom__in:hover .custom__big i{transform:translate(10px,-10px)}