/* Homepage v2 — photographic, editorial */

/* Hero: full-bleed photo, headline pinned bottom-left */
.hero2{position:relative; min-height:min(100vh, 960px); display:flex; align-items:flex-end; color:#fff; background:var(--ink); overflow:hidden; isolation:isolate}
.hero2 img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; z-index:-2}
.hero2::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(27,31,36,.55) 0%, rgba(27,31,36,.05) 30%, rgba(27,31,36,.88) 100%)}
.hero2 .container{width:100%; padding-bottom:clamp(36px,5vw,64px); padding-top:120px}
.hero2 .kicker{font-size:14px; letter-spacing:.02em; color:#E8D3D7; margin-bottom:18px; display:flex; gap:14px; align-items:center}
.hero2 .kicker::before{content:""; width:36px; height:2px; background:var(--brass); display:inline-block}
.hero2 h1{font-size:clamp(46px,7.4vw,112px); line-height:.95; letter-spacing:-.035em; max-width:12ch; margin:0 0 22px; color:#fff}
.hero2 .row{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap}
.hero2 .lede{color:#E6EAEE; max-width:50ch; font-size:clamp(17px,1.4vw,20px); margin:0}
.hero2 .actions{display:flex; gap:12px; flex-wrap:wrap}
.hero2 .btn-light{border-color:#fff}

/* Ticker: the line sheet, scrolling */
.ticker{background:var(--garnet); color:#fff; overflow:hidden; border-top:4px solid var(--brass)}
.ticker .track{display:flex; gap:0; width:max-content; animation:ticker 70s linear infinite; padding:14px 0}
.ticker span{font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.01em; padding:0 28px; border-right:1px solid rgba(255,255,255,.3); white-space:nowrap}
.ticker span small{font-family:var(--body); font-weight:400; opacity:.75; margin-left:8px; font-size:13px}
.ticker:hover .track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .ticker .track{animation:none; flex-wrap:wrap; width:auto} }

/* Intro statement */
.statement{padding:clamp(64px,9vw,128px) 0 clamp(40px,6vw,80px)}
.statement .grid{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,6vw,96px); align-items:end}
.statement h2{font-size:clamp(32px,4.2vw,58px); letter-spacing:-.03em; line-height:1.02; margin:0}
.statement p{font-size:18px; color:var(--ink-2); margin:0 0 18px; max-width:48ch}
.statement .facts{display:flex; gap:36px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:22px; margin-top:8px}
.statement .facts b{display:block; font-family:var(--display); font-size:30px; letter-spacing:-.02em; line-height:1}
.statement .facts span{font-size:13px; color:var(--steel)}
@media (max-width:860px){ .statement .grid{grid-template-columns:1fr} }

/* Editorial category grid */
.line-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:260px; gap:12px}
.line-grid a{position:relative; display:block; overflow:hidden; border-radius:var(--r); background:var(--frost-2); color:#fff}
.line-grid a img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.line-grid a:hover img{transform:scale(1.03)}
.line-grid a .lbl{position:absolute; left:0; right:0; bottom:0; padding:18px 20px; background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0) 80%)}
.line-grid a .lbl b{font-family:var(--display); font-size:24px; font-weight:700; letter-spacing:-.015em; display:block; line-height:1.1}
.line-grid a .lbl span{font-size:13px; opacity:.9; display:block; margin-top:4px; max-width:40ch}
.line-grid a.big{grid-column:span 2; grid-row:span 2}
.line-grid a.big .lbl b{font-size:36px}
.line-grid a.wide{grid-column:span 2}
.line-grid a.all{background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--display); font-size:22px; font-weight:700; padding:20px}
.line-grid a.all small{display:block; font-family:var(--body); font-weight:400; font-size:14px; color:#B9C2CC; margin-top:6px}
@media (max-width:960px){ .line-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:220px} .line-grid a.big{grid-column:span 2; grid-row:span 1} .line-grid a.wide{grid-column:span 1} }
@media (max-width:520px){ .line-grid{grid-auto-rows:190px} .line-grid a.big .lbl b{font-size:28px} }

/* Order sheet showcase (dark) */
.showcase{background:var(--ink); color:#fff; padding:clamp(64px,8vw,112px) 0; overflow:hidden}
.showcase .grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,6vw,88px); align-items:center}
.showcase h2{color:#fff; font-size:clamp(32px,4vw,54px); letter-spacing:-.03em; line-height:1.02}
.showcase p{color:#C9D1DA; font-size:17px; max-width:46ch}
.showcase .pts{list-style:none; padding:0; margin:26px 0 30px; display:grid; gap:12px}
.showcase .pts li{padding-left:22px; position:relative; color:#E6EAEE; font-size:16px}
.showcase .pts li::before{content:""; position:absolute; left:0; top:9px; width:10px; height:10px; background:var(--garnet); border-radius:2px}
.sheet-demo{background:#fff; color:var(--ink); border-radius:var(--r-lg); box-shadow:0 40px 80px rgba(0,0,0,.45); overflow:hidden; transform:rotate(-1deg); margin:12px}
.sheet-demo .top{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); font-size:13px}
.sheet-demo .top b{font-family:var(--display); font-size:15px}
.sheet-demo .top .pill{background:var(--ok-soft); color:var(--ok); padding:4px 10px; border-radius:999px; font-weight:600; font-size:12px}
.sheet-demo table{width:100%; border-collapse:collapse; font-size:14px}
.sheet-demo th{text-align:left; font-size:12px; color:var(--steel); font-weight:600; background:var(--frost); padding:9px 18px}
.sheet-demo td{padding:11px 18px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.sheet-demo td img{width:44px; height:34px; object-fit:cover; border-radius:3px; display:block}
.sheet-demo td.num{text-align:right; font-variant-numeric:tabular-nums}
.sheet-demo .qtybox{display:inline-flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; font-size:13px}
.sheet-demo .qtybox span{padding:5px 9px; border-right:1px solid var(--line)} .sheet-demo .qtybox span:last-child{border:0}
.sheet-demo .qtybox span.v{min-width:34px; text-align:center; font-weight:600}
.sheet-demo .bottom{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:var(--frost); font-size:13px}
.sheet-demo .bottom b{font-family:var(--display); font-size:18px}
.sheet-demo .bottom .fake-btn{background:var(--garnet); color:#fff; padding:9px 14px; border-radius:4px; font-weight:600; font-size:13px}
@media (max-width:900px){ .showcase .grid{grid-template-columns:1fr} .sheet-demo{transform:none; margin:0} }

/* Who we serve: photo strip */
.serve2{padding:clamp(64px,8vw,112px) 0}
.serve2 .head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px}
.serve2 h2{font-size:clamp(32px,4vw,54px); letter-spacing:-.03em; margin:0; max-width:14ch; line-height:1.02}
.serve2 .head p{max-width:40ch; color:var(--steel); margin:0}
.serve-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.serve-strip a{display:block; color:var(--ink)}
.serve-strip .ph{aspect-ratio:3/4; border-radius:var(--r); overflow:hidden; background:var(--frost-2); margin-bottom:12px}
.serve-strip img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.serve-strip a:hover img{transform:scale(1.04)}
.serve-strip b{font-family:var(--display); font-size:19px; display:block; letter-spacing:-.01em}
.serve-strip span{font-size:14px; color:var(--steel); display:block; margin-top:3px; line-height:1.4}
@media (max-width:960px){ .serve-strip{grid-template-columns:repeat(3,1fr)} .serve2 .head{flex-direction:column; align-items:flex-start} }
@media (max-width:560px){ .serve-strip{display:flex; overflow-x:auto; gap:12px; padding-bottom:8px; scroll-snap-type:x mandatory} .serve-strip a{flex:0 0 68%; scroll-snap-align:start} }

/* Kitchen split: photo bleeds to edge */
.bleed{display:grid; grid-template-columns:1fr 1fr; min-height:620px}
.bleed .ph{position:relative; overflow:hidden; background:var(--frost-2)}
.bleed .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bleed .txt{padding:clamp(40px,6vw,96px) var(--gutter); display:flex; flex-direction:column; justify-content:center; max-width:640px}
.bleed .txt h2{font-size:clamp(30px,3.6vw,48px); letter-spacing:-.03em; line-height:1.03}
.bleed .txt p{color:var(--ink-2); font-size:17px}
.bleed .cert-row{display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin-top:22px; padding-top:22px; border-top:1px solid var(--line)}
.bleed .cert-row div{font-size:14px; color:var(--steel)}
.bleed .cert-row b{display:block; font-family:var(--display); font-size:17px; color:var(--ink)}
@media (max-width:860px){ .bleed{grid-template-columns:1fr; min-height:0} .bleed .ph{min-height:320px} }

/* Quotes: big pull quotes */
.pull{padding:clamp(64px,8vw,112px) 0; background:var(--frost)}
.pull .grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px)}
.pull blockquote{margin:0; font-family:var(--display); font-size:clamp(24px,2.6vw,34px); line-height:1.2; letter-spacing:-.02em; font-weight:500; color:var(--ink)}
.pull blockquote::before{content:"“"; color:var(--garnet); font-size:1.3em; line-height:0; margin-right:4px}
.pull cite{display:block; font-style:normal; font-family:var(--body); font-size:14px; color:var(--steel); margin-top:18px}
.pull cite b{color:var(--ink); font-weight:600}
.pull .rating{margin-top:48px; display:flex; gap:28px; align-items:center; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:24px}
.pull .rating b{font-family:var(--display); font-size:44px; letter-spacing:-.03em; line-height:1}
.pull .rating .stars{font-size:18px; margin:0}
@media (max-width:860px){ .pull .grid{grid-template-columns:1fr} }

/* Giant wordmark footer band */
.wordmark{background:var(--ink); color:#fff; padding:clamp(40px,6vw,80px) 0 0; overflow:hidden; border-bottom:1px solid #2A3139}
.wordmark .container{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; padding-bottom:20px}
.wordmark h2{font-size:clamp(28px,4vw,56px); letter-spacing:-.03em; line-height:1; color:#fff; margin:0; max-width:14ch}
.wordmark .big{font-family:var(--display); font-weight:800; font-size:clamp(48px,10.2vw,170px); letter-spacing:-.05em; line-height:.8; color:#fff; white-space:nowrap; opacity:.08; text-align:center; margin-top:10px; user-select:none}

.line-grid a.all{flex-direction:column}
@media (max-width:960px){ .line-grid a:not(.big) .lbl span{display:none} }