@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300&family=Hanken+Grotesk:wght@400;500;600&display=swap');
@font-face{font-family:'Southing';src:url('/fonts/Southing.woff2') format('woff2'),url('/fonts/Southing.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap}
:root{
  --paper:#e2ddd2;--stone:#f3f1ea;--card:#faf9f5;--line:#c0bcb3;
  --ink:#221f20;--ink-soft:#4e453e;--ink-faint:#5f574f;
  --walnut:#60371b;--clay:#60371b;--on-clay:#f3f1ea;--brass:#b28b64;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:144px;
  --radius-sm:2px;--radius-md:6px;--radius-pill:999px;
  --font-serif:"Fraunces",Georgia,serif;--font-sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#221f20;--stone:#2c2829;--card:#332e2f;--line:#4e453e;
  --ink:#f3f1ea;--ink-soft:#cfc9bf;--ink-faint:#a5a097;
  --walnut:#d2b08c;--clay:#d2b08c;--on-clay:#221f20;--brass:#c9a17a;}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/26px var(--font-sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--space-6)}
h1,h2,h3{font-family:var(--font-serif);font-weight:300;margin:0;color:var(--walnut)}
h1{font-size:clamp(52px,8vw,96px);line-height:.98;letter-spacing:-.02em}
h2{font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:-.015em}
h3{font-size:26px;line-height:32px;font-weight:400}
em{font-style:italic;color:var(--ink)}
.lead{font-size:19px;line-height:30px;color:var(--ink-soft);max-width:520px}
.eyebrow{display:flex;align-items:center;gap:var(--space-3);font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:var(--space-6)}
.eyebrow b{font-weight:500;color:var(--clay)}.eyebrow i{width:32px;height:1px;background:var(--line)}
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:var(--space-2);font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;padding:12px 22px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:color .35s ease,border-color .35s ease}
/* fill sweep: on hover the --sweep color pours in from the left, like a finish going on */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sweep,var(--ink));transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.btn::before{transition:none}}
.btn--primary{--sweep:var(--ink);background:var(--clay);color:var(--on-clay)}.btn--primary:hover,.btn--primary:focus-visible{color:var(--paper)}
.btn--secondary{--sweep:var(--clay);border-color:var(--clay);color:var(--clay);background:none}.btn--secondary:hover,.btn--secondary:focus-visible{color:var(--on-clay)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
/* nav */
.nav{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{font:400 20px/24px var(--font-serif);color:var(--walnut);text-decoration:none}
.nav ul{display:flex;align-items:center;gap:var(--space-6);list-style:none;margin:0;padding:0}
.nav ul a:not(.btn){font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.nav ul a:not(.btn):hover{color:var(--clay)}
/* hero */
/* hero stays light in dark mode: the text sits on the pale shingle wall of the process photo (and on Warm Off-White on phones) */
.hero{
  --paper:#e2ddd2;--stone:#f3f1ea;--ink:#221f20;--ink-soft:#4e453e;--ink-faint:#5f574f;
  --walnut:#60371b;--clay:#60371b;--on-clay:#f3f1ea;
  background:var(--paper);color:var(--ink);display:flex;flex-direction:column}
.hero__text{text-align:center;width:100%}
.hero__text .eyebrow{justify-content:center}
.hero .eyebrow,.hero .lead{color:var(--ink)}
.hero .lead{margin:var(--space-5) auto var(--space-6);max-width:640px}
.hero__cta{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}
.hero__media{margin:0;overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover}
/* phones: photo first at full width, text and buttons below on Warm Off-White. The photo is square, so its height is
   capped at 115vw on tall phones: any taller and the sides crop into the hand on the slab or the back of Jim's head */
@media (max-width:767px){
  .hero__media{order:-1;height:min(60vh,115vw)}
  .hero__img{object-position:50% 50%} /* 6%: on wide phones (landscape) the photo is cropped top and bottom, and 50% cut off the top of the head */
  .hero .hero__text{padding-block:var(--space-7) var(--space-8)}
}
/* 768 and up: full-bleed photo with the text on the left, over the slab. The hero takes the photo's own 16:9 shape
   (2880 x 1620, so 56.25% as tall as it is wide), which shows the whole frame: the hand, the chisel and the slab's end.
   Where the text panel needs more height than that (around tablet width), the hero grows and the photo crops a little */
@media (min-width:768px){
  .hero{position:relative;min-height:56.25vw}
  .hero__media{position:absolute;inset:0}
  /* the horizontal value only matters on portrait tablets, where the photo is cropped at the sides: 55% keeps the
     fingertips on the left and the face on the right. The vertical value matters on landscape screens, where the
     photo is cropped top and bottom: 6% keeps the whole head plus a strip of wall above it (the top of the head is 5%
     down the photo), at the cost of the fingertips at the bottom */
  .hero__img{object-position:50% 50%}
  /* text sits high, where the wall is clear: the arm crosses the left half lower down. The wall's dark shingle gaps
     fall behind the text at every width (Ink on a gap is under 2:1), so the text gets a Warm Off-White panel, lined
     up with the .wrap content edge. Half the hero wide at most, so it never reaches Jim's face */
  .hero .hero__text{position:relative;z-index:1;align-self:flex-start;width:auto;max-width:min(600px,50%);text-align:left;
    margin:var(--space-8) 0 var(--space-8) calc(max(0px,(100% - 1280px) / 2) + var(--space-6));
    padding:var(--space-6);background:rgb(226 221 210 / .9);border-radius:var(--radius-sm)}
  .hero__text .eyebrow{justify-content:flex-start}
  .hero .lead{margin-inline:0}
  .hero .hero__cta{justify-content:flex-start}
}
/* sections */
section{padding:var(--space-9) 0;scroll-margin-top:72px}
.band{background:var(--stone)}
.sec-head{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-8);align-items:end;margin-bottom:var(--space-8)}
.sec-head p{margin:0;max-width:480px;color:var(--ink-soft);font-size:19px;line-height:30px;justify-self:end}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.card{color:inherit;text-decoration:none;display:block}
.card__img{aspect-ratio:4/5;background:var(--stone);border-radius:var(--radius-sm);overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.card:hover .card__img:not(.card__img--base) img{transform:scale(1.04)}
.card__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--line)}
.card__meta{font-size:13px;line-height:20px;color:var(--ink-faint);margin:var(--space-2) 0 0}
.tag{font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--clay);white-space:nowrap}
/* placeholder image box (bases section) until real photos are shot */
.card__img--ph{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);font:300 26px/32px var(--font-serif);color:var(--ink-faint)}
/* base photos are on white: keep the box light in dark mode and blend the white into it */
.card__img--base{background:#f3f1ea;border:1px solid var(--line)}
.card__img--base img{object-fit:contain;padding:var(--space-5);mix-blend-mode:multiply}
/* desktop: all five bases in one row with square photo boxes, so the section fits on one screen */
@media (min-width:901px){
  #bases .grid{grid-template-columns:repeat(5,1fr);gap:var(--space-4)}
  #bases .card__img{aspect-ratio:1}
  #bases .card__img--base img{padding:var(--space-4)}
  #bases .card__row{flex-wrap:wrap;gap:var(--space-1) var(--space-4)}
}
.card__img{position:relative}
.card__count{position:absolute;left:var(--space-3);bottom:var(--space-3);background:#f3f1ea;color:#221f20;font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:var(--radius-pill)}
/* product gallery (opened from a card; photos listed in each card's <template class="card__photos">) */
html.is-locked{overflow:hidden}
.gallery{border:0;padding:0;margin:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;background:#221f20;color:#f3f1ea}
.gallery::backdrop{background:#221f20}
.gallery[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.gallery__bar,.gallery__foot{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6)}
.gallery__bar{border-bottom:1px solid #4e453e}
.gallery__foot{border-top:1px solid #4e453e;justify-content:space-between;flex-wrap:wrap}
.gallery__title{flex:1;color:#f3f1ea}
.gallery__count{font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:#cfc9bf}
.gallery__meta{margin:0;font-size:15px;line-height:24px;color:#cfc9bf}
.gallery__close,.gallery__nav{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-pill);border:1px solid #4e453e;background:#221f20;color:#f3f1ea;font:300 28px/1 var(--font-sans);cursor:pointer;transition:border-color .2s,color .2s}
.gallery__close:hover,.gallery__nav:hover{border-color:#b28b64;color:#b28b64}
.gallery__nav:disabled{opacity:.35;cursor:default;border-color:#4e453e;color:#f3f1ea}
.gallery__nav[hidden],.gallery__count[hidden]{display:none}
.gallery__stage{position:relative;min-height:0}
.gallery__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:1}
.gallery__nav--prev{left:var(--space-5)}.gallery__nav--next{right:var(--space-5)}
.gallery__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__track img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;scroll-snap-align:center;padding:var(--space-5) 96px}
.gallery .btn--primary{--sweep:#b28b64;background:#f3f1ea;color:#221f20}.gallery .btn--primary:hover{color:#221f20}
.gallery :focus-visible{outline-color:#b28b64}
/* multi-page: product/trade page title matches the section h2 size; eyebrow link back to the work; left-aligned CTAs */
.sec-head h1{font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:-.015em}
.eyebrow a{text-decoration:none}.eyebrow a:hover{color:var(--clay)}
.product__cta{justify-content:flex-start;margin-top:var(--space-6)}
.spec th a{text-decoration:none}.spec th a:hover{color:var(--clay)}
/* terms, privacy, FAQ: one readable column; headings use the h3 scale */
.legal{max-width:760px}
.legal__intro{font-size:19px;line-height:30px;color:var(--ink-soft);margin:0 0 var(--space-7)}
.legal__toc ol{margin:0 0 var(--space-7);padding:0;list-style:none;columns:2;column-gap:var(--space-6);font-size:15px;line-height:24px;color:var(--ink-soft)}
.legal__toc a{text-decoration:none}.legal__toc a:hover{color:var(--clay)}
section.legal__sec{padding:var(--space-6) 0;border-top:1px solid var(--line);scroll-margin-top:88px}
.legal__sec h2{font-size:26px;line-height:32px;font-weight:400;letter-spacing:0}
.legal__sec p{color:var(--ink-soft);margin:var(--space-4) 0 0}
.legal__sec p[id]{scroll-margin-top:88px}
.legal__sec b{font-weight:600;color:var(--ink)}
.legal a:not(.btn),.sec-head p a:not(.btn){color:var(--walnut)}
.sec-head .legal__download{margin-top:var(--space-6)}
.legal__download .btn{padding:10px 20px;font-size:11px;letter-spacing:.12em}
/* breadcrumb: one low-emphasis line above the first section on secondary pages */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-6);font-size:13px;line-height:20px;color:var(--ink-soft)}
.breadcrumb a{color:var(--walnut);text-decoration:none}.breadcrumb a:hover{color:var(--clay);text-decoration:underline}
.breadcrumb + section{padding-top:var(--space-7)}
/* motion.js extras (only ever switched on by motion.js): sheen over the first product photo, reading-progress bar */
.card__img--sheen::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(circle at calc(var(--x,50) * 1%) calc(var(--y,50) * 1%),rgba(255,255,255,.28),rgba(255,255,255,0) 45%);mix-blend-mode:soft-light}
.card__img--sheen:hover::after{opacity:1}
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--clay);transform-origin:0 50%;z-index:11;pointer-events:none}
/* homepage #work: editorial 2-up gallery. Own class names, so .card/.grid everywhere else are untouched */
.feature-grid{grid-template-columns:1fr 1fr;gap:var(--space-7) var(--space-6)}
/* three across once the cards are wide enough to keep every name flag on one line. Six half-columns with each card
   spanning two (same card width as a plain 3-column grid), so a short last row can sit centered */
@media (min-width:1100px){
  .feature-grid{grid-template-columns:repeat(6,1fr)}
  .feature-card{grid-column:span 2}
  .feature-card:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2} /* last row of two: start one half-column in */
  .feature-card:nth-child(3n+1):last-child{grid-column:3 / span 2}        /* last row of one: dead center */
}
.feature-card{display:block;color:inherit;text-decoration:none}
.feature-card__media{position:relative;aspect-ratio:5/4;overflow:hidden;border-radius:var(--radius-sm);background:var(--stone)}
/* desktop: cap the photo height so the "Work" link can frame the heading plus the whole first row of cards on one
   screen (nav 73 + gap 24 + heading block ~304 + spec line 32 + gap 24 = ~460px of the window is taken) */
@media (min-width:901px){.feature-card__media{max-height:max(280px,calc(100vh - 470px));max-height:max(280px,calc(100svh - 470px))}}
.feature-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.feature-card:hover .feature-card__media img{transform:scale(1.04)}
/* soft shade along the bottom so the pill reads over any photo */
.feature-card__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(to top,rgba(34,31,32,.4),rgba(34,31,32,0));pointer-events:none}
.feature-card__media--placeholder{display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.feature-card__media--placeholder::after{display:none}
.feature-card__media--placeholder .feature-card__cta{border:1px solid var(--line)} /* the pill would vanish on the pale placeholder */
.feature-card__mark{font:300 clamp(32px,4vw,48px)/1 var(--font-serif);color:var(--ink-faint)}
/* name flag pinned to the top-left edge, with a notched tail like a tag */
.feature-card__flag{position:absolute;top:var(--space-4);left:0;z-index:1;padding:var(--space-2) var(--space-6) var(--space-2) var(--space-4);background:var(--clay);color:var(--on-clay);font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;max-width:calc(100% - var(--space-4));clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%)}
.feature-card__cta{position:absolute;right:var(--space-4);bottom:var(--space-4);z-index:1;padding:6px 12px;border-radius:var(--radius-pill);background:#f3f1ea;color:#221f20;font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.feature-card__blurb{font-size:13px;line-height:20px;color:var(--ink-faint);margin:var(--space-3) 0 0}
/* trade table */
.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{text-align:left;padding:var(--space-5) var(--space-4) var(--space-5) 0;border-top:1px solid var(--line);vertical-align:baseline}
.spec tr:last-child td,.spec tr:last-child th{border-bottom:1px solid var(--line)}
.spec th{font:400 26px/32px var(--font-serif)}
.spec td{color:var(--ink-soft)}
.note{font-size:13px;line-height:20px;color:var(--ink-faint);margin-top:var(--space-5)}
/* process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-5)}
/* five steps fit one row once "Conversation" fits a fifth of the page at h3 size; three across below that */
@media (min-width:901px) and (max-width:1180px){.steps{grid-template-columns:repeat(3,1fr);row-gap:var(--space-7)}}
.step{border-top:1px solid var(--ink);padding-top:var(--space-4)}
.step b{font:300 40px/46px var(--font-serif);color:var(--clay);display:block;margin-bottom:var(--space-5)}
.step h3{margin-bottom:var(--space-3)}.step p{margin:0;color:var(--ink-soft);font-size:15px;line-height:24px}
.process__photo{margin:var(--space-8) 0 0}
.process__photos{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.process__photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm)}
.process__photos{grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.process__photo img[src*="ProcessSlab"],.process__photo img[src*="Process_Shot"],.process__photo img[src*="EpoxyPour"]{aspect-ratio:1}
.process__photo img[src*="EpoxyPour"]{object-position:center 25%}
.process__photo img[src*="Process_Shot"]{filter:sepia(.18) saturate(1.05)} /* warms the cool white wall to sit with the other three */
@media (max-width:900px){.process__photos{grid-template-columns:1fr 1fr}}
.process__photo figcaption{font-size:13px;line-height:20px;color:var(--ink-faint);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line)}
/* about */
/* founder portrait floated left so the story runs beside it and then continues full width underneath, with no empty
   column under the photo. Kept at its own 4:5 shape, framed high and to the left so the face is never cropped. The
   text block is capped so lines under the photo don't run the full page width. Phones: photo on top, full width. */
.about{display:flow-root}
.about img{aspect-ratio:1;object-fit:cover;width:100%;border-radius:var(--radius-sm)}
.about .about__photo{float:left;width:min(40%,460px);aspect-ratio:4/5;height:auto;object-position:30% 25%;margin:0 var(--space-7) var(--space-5) 0}
.about > div{max-width:1040px}
.about p{color:var(--ink-soft);font-size:19px;line-height:30px;margin:var(--space-5) 0 0}
.about h3{font-size:20px;line-height:28px;margin:var(--space-6) 0 0}
.about ul{display:flow-root;margin:var(--space-3) 0 0;padding-left:var(--space-5);color:var(--ink-soft);font-size:19px;line-height:30px}
.about li+li{margin-top:var(--space-2)}
.about-signoff{margin-top:2.5rem}
.about-signoff .signoff-name{display:block;margin-top:1rem;font-family:'Southing',cursive;font-size:clamp(1.75em,6vw,2.4em);line-height:1.2;color:var(--ink)}
/* form */
.contact{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-9)}
form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
label{display:grid;gap:var(--space-2);font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.full{grid-column:1/-1}
input,select,textarea{font:400 16px/24px var(--font-sans);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;width:100%;letter-spacing:0;text-transform:none}
textarea{min-height:140px;resize:vertical}
/* "Interested in" checkboxes: the legend reads like the other field labels, each choice like the field text */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2) var(--space-5);margin:0;padding:0;border:0;min-width:0}
.choices legend{padding:0;margin-bottom:var(--space-3);font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.choices label{display:flex;align-items:center;gap:var(--space-3);min-height:44px;font:400 16px/24px var(--font-sans);letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer}
.choices input{flex:none;width:20px;height:20px;margin:0;padding:0;accent-color:var(--walnut);cursor:pointer}
@media (max-width:560px){.choices{grid-template-columns:1fr}}
/* footer */
footer{background:#221f20;color:#f3f1ea;padding:var(--space-9) 0 var(--space-6)}
.foot__mark{font:300 clamp(32px,4vw,56px)/1 var(--font-serif);letter-spacing:-.02em;margin:0 0 var(--space-8);color:var(--stone)}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);border-top:1px solid color-mix(in srgb,var(--paper) 25%,transparent);padding-top:var(--space-6)}
footer h4{font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--space-3);opacity:.7}
footer p,footer a{font-size:15px;line-height:24px;margin:0;display:block;text-decoration:none;color:#f3f1ea}
footer a:hover{color:var(--brass)}
footer .foot__cols a+a{margin-top:var(--space-1)}
.foot__legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid color-mix(in srgb,var(--paper) 25%,transparent)}
footer .foot__legal p,footer .foot__legal a{font-size:13px;line-height:20px;opacity:.7}
footer .foot__legal a:hover{opacity:1}
.foot__legal p:nth-child(2){margin-right:auto}
@media (prefers-color-scheme:dark){footer{background:var(--stone)}}
@media (max-width:900px){
  .wrap{padding:0 var(--space-4)}
  .nav ul li:not(:last-child){display:none}
  .hero .eyebrow{margin-bottom:var(--space-4)}
  .hero h1{font-size:44px}
  .hero .lead{margin:var(--space-4) auto var(--space-5)}
  .hero__cta{gap:var(--space-3)}
  .sec-head,.contact{grid-template-columns:1fr;gap:var(--space-7)}
  .sec-head p{justify-self:start}
  .grid,.steps,.foot__cols{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .legal__toc ol{columns:1}
  .foot__legal p:nth-child(2){margin-right:0;flex-basis:100%}
  .gallery__bar,.gallery__foot{padding:var(--space-3) var(--space-4)}
  .gallery__nav{display:none}
  .gallery__track img{padding:var(--space-4) 0}
  section{padding:var(--space-8) 0}
  form{grid-template-columns:1fr}
  .spec th,.spec td{display:block;padding-right:0}
  .spec th{padding-bottom:var(--space-1)}
  .spec td{border-top:0;padding-top:0}
  .spec tr:last-child th{border-bottom:0}
}
/* 768 to 900: the hero text stays left over the photo, and the About photo stays beside the story until phone width */
@media (min-width:768px) and (max-width:900px){
  .hero .lead{margin-inline:0}
  .about .about__photo{width:42%;margin-right:var(--space-6)}
}
@media (max-width:767px){.about .about__photo{float:none;width:100%;margin:0 0 var(--space-7)}}
/* mobile menu (built by nav.js): 900 and under, where the desktop links are hidden. Placed after the 900 block, and
   scoped to .nav__panel, so the desktop .nav ul rules (flex row, hidden items) don't reach the menu list */
.nav__toggle,.nav__panel{display:none}
@media (max-width:900px){
  .brand{white-space:nowrap}
  .nav__toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 var(--space-3) 0 auto;padding:0;border:0;border-radius:var(--radius-pill);background:none;color:var(--ink);cursor:pointer}
  .nav__toggle:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
  /* three bars, turning into an X while open */
  .nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{display:block;width:22px;height:2px;background:currentColor;transition:transform .2s,background .2s}
  .nav__toggle span{position:relative}
  .nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0}
  .nav__toggle span::before{top:-7px}.nav__toggle span::after{top:7px}
  .nav__toggle[aria-expanded="true"] span{background:transparent}
  .nav__toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
  .nav__toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
  /* full-width panel under the bar; stays in the DOM so it can fade, but hidden (and out of the tab order) when closed */
  .nav__panel{display:block;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;
    padding:var(--space-2) var(--space-4) var(--space-6);background:#221f20;border-top:1px solid #4e453e;
    visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
  .nav__panel.is-open{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s}
  .nav .nav__panel ul{display:block}
  .nav .nav__panel ul li{display:block}
  .nav .nav__panel li+li{border-top:1px solid #4e453e}
  .nav .nav__panel a:not(.btn){display:flex;align-items:center;min-height:52px;font:500 14px/20px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:#b28b64}
  .nav .nav__panel a:not(.btn):hover{color:#f3f1ea}
  /* light button on the dark panel, like the gallery's */
  .nav__panel .btn{display:flex;justify-content:center;width:100%;min-height:48px;margin-top:var(--space-5)}
  .nav__panel .btn--primary{--sweep:#b28b64;background:#f3f1ea;color:#221f20}.nav__panel .btn--primary:hover{color:#221f20}
  .nav__panel :focus-visible{outline-color:#b28b64}
}
/* phones: logo, Menu button and the CTA don't fit on one line, so the CTA moves into the menu */
@media (max-width:560px){
  .nav .wrap > ul{display:none}
  .nav__toggle{margin-right:calc(var(--space-2) * -1)} /* lines the bars up with the page edge */
}
/* ---- conversion pass (2026-09-30) ---- */
/* price lines: empty and hidden until products.js has a price for the piece */
.feature-card__price,.card__price{margin:var(--space-1) 0 0;font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
/* homepage collection: the board and coasters as a lighter second row, with a short line of their own */
.start-small{margin-top:var(--space-8);padding-top:var(--space-7);border-top:1px solid var(--line)}
.start-small__text p{margin:var(--space-4) 0 0;max-width:420px;color:var(--ink-soft);font-size:17px;line-height:28px}
/* three smaller pieces: the intro takes its own row, then the cards sit three across like the row above */
.start-small.start-small--three .start-small__text{grid-column:1/-1}
@media (min-width:1100px){.start-small.start-small--three .feature-card:nth-child(n){grid-column:span 2}}
@media (min-width:1100px){.start-small .start-small__text{grid-column:span 2;align-self:center;padding-right:var(--space-5)}}
@media (min-width:901px) and (max-width:1099px){.start-small__text{grid-column:1/-1}}
/* homepage "Two ways in": collection or custom */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.path{display:flex;flex-direction:column;align-items:flex-start;padding:var(--space-7) var(--space-6);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm)}
.path .eyebrow{margin-bottom:var(--space-4)}
.path p{flex:none;margin:var(--space-3) 0 var(--space-6);max-width:460px;color:var(--ink-soft);font-size:17px;line-height:28px}
.path > .btn,.path__cta{margin-top:auto}
.path__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-5)}
.path__link{font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--walnut);text-underline-offset:4px}
.path__link:hover{color:var(--ink)}
/* five base thumbnails inside the custom path: a quick look at the leg styles, each linking to the full set */
.path__bases{list-style:none;margin:0 0 var(--space-4);padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-3);width:100%}
.path__bases a{display:block;text-decoration:none;color:inherit}
.path__thumb{display:block;aspect-ratio:1;background:#f3f1ea;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.path__thumb img{display:block;width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:multiply}
.path__name{display:block;margin-top:var(--space-2);font:500 11px/14px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:center}
.path__bases a:hover .path__name{color:var(--ink)}
.path .path__note{margin:0 0 var(--space-6);font-size:15px;line-height:24px}
/* the collection as a short price list inside the first path, so the two cards carry the same weight */
.path__list{list-style:none;margin:0 0 var(--space-6);padding:0;width:100%;border-top:1px solid var(--line)}
.path__list li{border-bottom:1px solid var(--line)}
.path__list a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:6px 0;text-decoration:none;color:inherit}
.path__list-name{font-size:16px;line-height:24px;color:var(--ink)}
.path__list-price{font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--walnut);white-space:nowrap}
.path__list a:hover .path__list-name{text-decoration:underline;text-underline-offset:4px}
@media (max-width:520px){.path__bases{gap:var(--space-2)}.path__name{font-size:10px;letter-spacing:.06em}}
/* customer words (products.js fills .quotes; the sections stay hidden until there's at least one) */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)}
.quote{margin:0;padding-top:var(--space-5);border-top:1px solid var(--ink)}
.quote img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:var(--space-5)}
.quote blockquote{margin:0;font:300 22px/32px var(--font-serif);color:var(--ink)}
.quote figcaption{margin-top:var(--space-4);font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.kind-words--piece{padding-top:0}
.kind-words--piece .eyebrow{margin-bottom:var(--space-5)}
/* with no customer words yet, About and Trade are both on the page color: a rule keeps them apart */
#about + #kind-words[hidden] + #trade{border-top:1px solid var(--line)}
/* commission: what happens after sending, and who reads it */
.contact__lead{margin-top:var(--space-6)}
.contact__subhead{font-size:20px;line-height:28px;margin:var(--space-6) 0 0}
.next-steps{margin:var(--space-3) 0 0;padding:0;list-style:none;counter-reset:step;max-width:520px}
.next-steps li{counter-increment:step;display:grid;grid-template-columns:36px 1fr;gap:var(--space-2);padding:var(--space-3) 0;border-top:1px solid var(--line);color:var(--ink-soft);font-size:17px;line-height:28px}
.next-steps li::before{content:counter(step,lower-roman) ".";font:300 20px/28px var(--font-serif);color:var(--clay)}
.maker{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--line)}
.maker__photo{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center}
.maker p{margin:0;max-width:440px;font-size:15px;line-height:24px;color:var(--ink-soft)}
.maker a,.contact .note a,.product__info .note a{color:var(--walnut)}
.form__send{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-5)}
.form__after{margin:0;font-size:15px;line-height:24px;color:var(--ink-soft)}
input::placeholder,textarea::placeholder{color:var(--ink-faint);opacity:.8}
/* product pages: title, lead photo at its own shape, and the details beside it (stacked on phones and tablets) */
.product__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"media head" "media info";grid-template-rows:auto 1fr;column-gap:var(--space-8);align-items:start}
.product__head{grid-area:head}
.product__head .eyebrow{margin-bottom:var(--space-5)}
.product__head h1{font-size:clamp(36px,4vw,56px);line-height:1.02;letter-spacing:-.015em}
.product__lede{margin:var(--space-4) 0 0;max-width:520px;color:var(--ink-soft);font-size:19px;line-height:30px}
.product__lead{grid-area:media;grid-template-columns:1fr}
/* lead photo and "More photos" share the left column, so the extra photos sit right under the lead */
.product__media{grid-area:media;min-width:0}
.product__lead .card__img{aspect-ratio:auto}
.product__lead .card__img img{height:auto;max-height:min(78vh,820px);max-height:min(calc(100svh - 184px),820px);object-fit:contain}
/* product pages: tighter gap under the breadcrumb so the whole main photo fits the first screen */
.breadcrumb + section.product{padding-top:var(--space-5)}
.product__lead .card__img.product__ph{aspect-ratio:4/3;flex-direction:column;gap:var(--space-3);font-size:clamp(32px,4vw,48px);line-height:1}
.product__ph small{font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase}
.product__info{grid-area:info;margin-top:var(--space-6)}
.product__pricebox{padding-bottom:var(--space-5)}
.product__price{display:inline;margin:0 var(--space-4) 0 0;font:400 28px/34px var(--font-serif);color:var(--walnut)}
.product__buyrow{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3) var(--space-5)}
.product__buyrow .product__price{margin:0}
.product__buyrow .product__buy{flex:none}
@media (max-width:560px){.product__buyrow .product__buy{width:auto}}
.product__price-note{margin:var(--space-1) 0 0;font-size:15px;line-height:24px;color:var(--ink)}
.product__price-sub{margin:var(--space-2) 0 0;max-width:460px;font-size:15px;line-height:24px;color:var(--ink-soft)}
.facts{margin:0;border-top:1px solid var(--line)}
.facts > div{display:grid;grid-template-columns:minmax(104px,30%) 1fr;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.facts dt{font:500 12px/24px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.facts dd{margin:0;font-size:15px;line-height:24px;color:var(--ink)}
.facts a{color:var(--walnut)}
.product__info .product__cta{margin-top:var(--space-5)}
.assurances{list-style:none;margin:var(--space-5) 0 0;padding:0;font-size:15px;line-height:24px;color:var(--ink-soft)}
.assurances li{position:relative;padding-left:var(--space-5)}
.assurances li+li{margin-top:var(--space-1)}
.assurances li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:1px;background:var(--clay)}
.assurances a{color:var(--walnut)}
.product__more{margin-top:var(--space-5)}
.product__back{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--line)}
.product__back .eyebrow{margin-bottom:var(--space-4)}
.product__more .eyebrow{margin-bottom:var(--space-5)}
/* trade page: program details, same rows as the product facts with a wider label column */
.facts--wide > div{grid-template-columns:minmax(140px,24%) 1fr;padding:var(--space-4) 0}
.facts--wide dd{font-size:17px;line-height:28px;color:var(--ink-soft)}
.trade__sub{margin:var(--space-7) 0 var(--space-5);font-size:26px;line-height:32px;font-weight:400;letter-spacing:0}
.sec-head + .trade__sub{margin-top:0}
/* trade tagline beside the section title (homepage and trade page): the Southing script, as in Jim's sign-off */
.sec-head p.trade__tagline,.trade-top__side .trade__tagline{font-family:'Southing',cursive;font-size:clamp(32px,4vw,44px);line-height:1.2;color:var(--ink)}
/* FAQ: "Before you order" / "After you order" labels between the questions */
.faq__group{margin:var(--space-8) 0 var(--space-2)}
.faq__group:first-child{margin-top:0}
@media (max-width:900px){
  .paths{grid-template-columns:1fr}
  .path{padding:var(--space-6) var(--space-5)}
  .start-small{margin-top:var(--space-7);padding-top:var(--space-6)}
  .product__top{grid-template-columns:1fr;grid-template-areas:"media" "head" "info" "more";row-gap:var(--space-5)}
  .breadcrumb + section.product{padding-top:var(--space-4)}
  .product__media{display:contents}
  .product__media .product__more{grid-area:more}
  .product__info{margin-top:var(--space-2)}
  .product__lead .card__img img{max-height:72vh;max-height:calc(100svh - 168px)}
  .product__more{margin-top:var(--space-5)}
  /* five steps stacked: numeral beside the heading, so the list stays short on a phone */
  .step{display:grid;grid-template-columns:48px 1fr;column-gap:var(--space-2)}
  .step b{grid-row:span 2;margin:0;font-size:28px;line-height:32px}
}
@media (max-width:560px){
  .product__info .product__cta .btn{width:100%;justify-content:center}
  .form__send .btn{width:100%;justify-content:center}
}

/* trade page top (also the homepage Trade section): title and details on the left; tagline and photo on the right, starting at the top of the
   section so the title, tagline and photo all sit in the first screen. The photo is sized to end inside the window,
   cropped low enough to keep the bench in view. Phones: title, tagline, photo, then the details. */
.trade-top{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-8);align-items:start}
.trade-top .sec-head{display:block;margin-bottom:var(--space-7)}
.trade-top__main > .trade__sub{margin-top:0}
.trade-top__side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-5)}
.trade-top__side .trade__tagline{margin:0;max-width:none;text-align:right}
.trade-top__side .trade-intro__photo{width:100%}
.trade-top__side .trade-intro__photo img{aspect-ratio:auto;height:clamp(320px,calc(100vh - 300px),620px);height:clamp(320px,calc(100svh - 300px),620px);object-fit:cover;object-position:center 78%}
@media (max-width:900px){
  .trade-top{display:flex;flex-direction:column;gap:0}
  .trade-top__main,.trade-top__side{display:contents}
  .trade-top > * > *{order:4}
  .trade-top .sec-head{order:1;margin-bottom:var(--space-4)}
  .trade-top__side .trade__tagline{order:2;text-align:left;align-self:flex-start;margin-bottom:var(--space-6)}
  .trade-top__side .trade-intro__photo{order:3;margin-bottom:var(--space-7)}
  .trade-top__side .trade-intro__photo img{height:auto;aspect-ratio:4/3;object-position:center 72%}
}
/* homepage Trade section (trade-top--fit): the photo fills the right column to the height of the text beside it, so the
   section is only as tall as the title, details and buttons. Phones stack as above. */
.trade-top--fit{column-gap:var(--space-7);align-items:stretch}
.trade-top--fit .sec-head{margin-bottom:var(--space-6)}
.trade-top--fit .trade-top__side .trade-intro__photo{position:relative;flex:1 1 auto;min-height:260px}
.trade-top--fit .trade-top__side .trade-intro__photo img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-position:center 72%}
@media (min-width:600px) and (max-width:900px){
  /* tablet: title and tagline beside the photo, details full width below */
  .trade-top--fit{display:grid;grid-template-columns:1fr 40%;grid-template-rows:auto 1fr auto auto;grid-template-areas:"head photo" "tag photo" "facts facts" "cta cta";gap:0 var(--space-5)}
  .trade-top--fit .sec-head{grid-area:head;order:0;margin-bottom:var(--space-3)}
  .trade-top--fit .trade-top__side .trade__tagline{grid-area:tag;order:0;margin:0;font-size:30px}
  .trade-top--fit .trade-top__side .trade-intro__photo{grid-area:photo;order:0;flex:none;min-height:0;height:clamp(240px,42vw,340px);margin:0 0 var(--space-6)}
  .trade-top--fit .facts{grid-area:facts}
  .trade-top--fit .hero__cta{grid-area:cta}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Trade page intro with photo */
.trade-intro{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-8);align-items:start}
.trade-intro__copy > .trade__sub:first-child{margin-top:0}
.trade-intro__photo{margin:0;overflow:hidden}
.trade-intro__photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
@media (max-width:900px){.trade-intro{grid-template-columns:1fr;gap:var(--space-7)}.trade-intro__photo{order:-1}.trade-intro__photo img{aspect-ratio:4/3;object-position:center 70%}}

/* Plain descriptor, no-obligation note, coming-soon labels */
.hero__note{margin:var(--space-4) 0 0;font-size:15px;line-height:24px;color:var(--ink-soft);text-align:center}
@media (min-width:768px){.hero .hero__note{text-align:left}}
.ph-soon,.card__img--ph small{font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.feature-card__media--placeholder{flex-direction:column;gap:var(--space-3)}
.card__img--ph{flex-direction:column;gap:var(--space-2)}

/* FAQ: short-version strip, jump links, numbered questions, closing card */
.faq-facts{list-style:none;margin:0 0 var(--space-6);padding:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--card)}
.faq-facts li{padding:var(--space-6) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);border-left:1px solid var(--line)}
.faq-facts li:first-child{border-left:0}
.faq-facts b{font:300 clamp(28px,3vw,38px)/1.05 var(--font-serif);color:var(--walnut)}
.faq-facts span{font-size:14px;line-height:20px;color:var(--ink-soft)}
.faq-jump{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-8)}
.faq-jump a{font:500 12px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft);border:1px solid var(--line);padding:8px 14px;transition:background .2s,color .2s,border-color .2s}
.faq-jump a:hover,.faq-jump a:focus-visible{background:var(--walnut);border-color:var(--walnut);color:var(--on-clay)}
.faq{counter-reset:q}
.faq .faq__group{display:flex;align-items:center;gap:var(--space-4)}
.faq .faq__group::after{content:"";flex:1;height:1px;background:var(--brass)}
section.faq .legal__sec,.faq section.legal__sec{counter-increment:q;position:relative;padding-left:64px}
.faq section.legal__sec::before{content:counter(q,decimal-leading-zero);position:absolute;left:0;top:var(--space-6);font:300 28px/32px var(--font-serif);color:var(--brass)}
.faq-ask{display:grid;grid-template-columns:140px 1fr;gap:var(--space-6);align-items:center;margin-top:var(--space-8);padding:var(--space-6);background:var(--card);border:1px solid var(--line)}
.faq-ask img{display:block;width:140px;height:175px;object-fit:cover;object-position:center 20%}
.faq-ask h2{font-size:28px;line-height:34px}
.faq-ask p{margin:var(--space-3) 0 var(--space-5);color:var(--ink-soft)}
.faq-ask .hero__cta{justify-content:flex-start}
@media (max-width:900px){.faq-facts{grid-template-columns:repeat(2,1fr)}.faq-facts li:nth-child(3){border-left:0}.faq-facts li:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:560px){.faq .legal__sec,.faq section.legal__sec{padding-left:0}.faq section.legal__sec::before{position:static;display:block;margin-bottom:var(--space-2)}.faq-ask{grid-template-columns:1fr}.faq-ask img{width:100%;height:240px;object-position:center 25%}}

@media (min-width:1000px){
.legal.faq{max-width:none;display:grid;grid-template-columns:minmax(0,760px) 1fr;column-gap:var(--space-9,96px)}
.legal.faq>*{grid-column:1}
.legal.faq>.faq-ask{grid-column:2;grid-row:1 / span 40;align-self:start;position:sticky;top:96px;margin-top:0;grid-template-columns:1fr;max-width:340px;justify-self:end}
.legal.faq>.faq-ask img{width:100%;height:380px;object-position:center 20%}
}

/* Compact footer: wordmark and columns share one row on desktop */
footer{padding:var(--space-7) 0 var(--space-5)}
.foot__mark{font-size:clamp(28px,3vw,40px);margin:0 0 var(--space-5)}
.foot__cols{gap:var(--space-5);padding-top:var(--space-5)}
footer h4{margin-bottom:var(--space-2)}
.foot__legal{margin-top:var(--space-5);padding-top:var(--space-4)}
@media (min-width:901px){
  footer .wrap{display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-9);align-items:start}
  .foot__mark{margin:0;white-space:nowrap}
  .foot__cols{border-top:0;padding-top:6px;gap:var(--space-6)}
  .foot__legal{grid-column:1 / -1}
}

/* Spam honeypot field: off-screen, never shown */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Download button under a legal page title stays left, under the heading */
.sec-head .legal__download{justify-self:start;max-width:none}

/* Hero panel, editorial pass: a little more air above and below, tighter at the sides, a hairline under the eyebrow,
   a clear step from the descriptor to the tagline, and a touch more of the photo showing through (.9 to .85) */
.hero .lead__tag{display:block;margin-top:var(--space-3);font-size:17px;line-height:28px;color:var(--ink-soft)}
.hero .lead{line-height:32px}
@media (min-width:768px){
  .hero .hero__text{max-width:min(620px,52%);padding:var(--space-7) var(--space-5) var(--space-6);background:rgb(226 221 210 / .85)}
  .hero .hero__text .eyebrow{padding-bottom:var(--space-4);margin-bottom:var(--space-6);border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
  .hero .hero__text h1{line-height:1.02}
  .hero .lead{margin:var(--space-6) 0 var(--space-7);max-width:none}
  .hero .hero__note{margin-top:var(--space-5)}
}
@media (max-width:767px){
  .hero .lead{margin:var(--space-5) auto var(--space-6)}
  .hero .hero__note{margin-top:var(--space-5)}
}

/* Hero headline: sized to sit on one line inside the panel (balanced if it ever has to wrap), so no stray word on line two */
.hero h1{font-size:clamp(44px,4.6vw,72px);text-wrap:balance}

/* photo display (2026-10-03): About portrait as an arch with an offset frame */
.about .about__photo{border-radius:140px 140px var(--radius-sm) var(--radius-sm);box-shadow:14px 14px 0 0 var(--brass);margin-bottom:var(--space-6)}
@media (min-width:768px){.about .about__photo{margin-top:calc(var(--space-7) * -1);margin-right:var(--space-8)}}
@media (min-width:768px) and (max-width:900px){.about .about__photo{margin-right:var(--space-7)}}
@media (max-width:767px){.about .about__photo{width:calc(100% - 14px);margin:0 0 var(--space-7);border-radius:110px 110px var(--radius-sm) var(--radius-sm)}}

/* Process photos: soft lifted shadow and 4px corners */
.process__shot{position:relative}
.process__photo .process__shot img{border-radius:4px;box-shadow:0 14px 28px -14px rgb(34 31 32 / .45),0 2px 6px rgb(34 31 32 / .12)}
@media (prefers-color-scheme:dark){.process__photo .process__shot img{box-shadow:0 14px 28px -14px rgb(0 0 0 / .6)}}

/* Soft lifted shadow and 4px corners on the remaining single photos (Trade photo on home and /trade/, quote photos, the
   photo in the "ask me" card on FAQ and legal pages). Same treatment as the Process row. */
.trade-intro__photo{border-radius:4px;box-shadow:0 14px 28px -14px rgb(34 31 32 / .45),0 2px 6px rgb(34 31 32 / .12)}
.quote img,.faq-ask img{border-radius:4px;box-shadow:0 14px 28px -14px rgb(34 31 32 / .45),0 2px 6px rgb(34 31 32 / .12)}
@media (prefers-color-scheme:dark){.trade-intro__photo,.quote img,.faq-ask img{box-shadow:0 14px 28px -14px rgb(0 0 0 / .6)}}
/* "Two ways in" boxes: same finish as the photos (4px corners, soft lifted shadow, no outline) */
.path{border:0;border-radius:4px;box-shadow:0 14px 28px -14px rgb(34 31 32 / .45),0 2px 6px rgb(34 31 32 / .12)}
@media (prefers-color-scheme:dark){.path{box-shadow:0 14px 28px -14px rgb(0 0 0 / .6)}}
/* product names sit under the photos, not on them */
.feature-card__title{margin:var(--space-4) 0 0;font:400 22px/28px var(--font-serif);color:var(--ink)}
.feature-card__title + .feature-card__blurb{margin-top:var(--space-1)}
/* hero text panel: same finish as the non-gallery photos (4px corners, soft lifted shadow) */
@media (min-width:768px){.hero .hero__text{border-radius:4px;box-shadow:0 14px 28px -14px rgb(34 31 32 / .45),0 2px 6px rgb(34 31 32 / .12)}}
/* smaller "See the piece" pill on the product cards */
.feature-card__cta{right:var(--space-3);bottom:var(--space-3);padding:4px 9px;font-size:10px;line-height:14px;letter-spacing:.12em}
/* hero panel: tighter vertical spacing */
@media (min-width:768px){
  .hero .hero__text{padding:var(--space-6) var(--space-5) var(--space-5)}
  .hero .hero__text .eyebrow{padding-bottom:var(--space-3);margin-bottom:var(--space-4)}
  .hero .lead{margin:var(--space-4) 0 var(--space-5)}
  .hero .lead__tag{margin-top:var(--space-2)}
  .hero .hero__note{margin-top:var(--space-4)}
}
/* process photo row: five across on desktop (the phone photo leads); on tablets and phones it spans the top, the other four sit two by two */
.process__photo img[src*="SlabApprovalPhone"]{aspect-ratio:1}
@media (min-width:901px){.process__photos{grid-template-columns:repeat(5,1fr)}}
@media (max-width:900px){
  .process__shot:nth-child(3){grid-column:1 / -1}
  .process__photo .process__shot:nth-child(3) img{aspect-ratio:4/3;object-position:center 45%}
}

/* scale drawings (drawings.js): colors follow the page theme; inside the gallery they are always light-on-dark */
.bwc-draw{display:block;width:100%;height:auto;--d-line:var(--ink-soft);--d-dim:var(--clay);--d-inlay:#221f20;--d-ground:var(--line)}
@media (prefers-color-scheme:dark){.bwc-draw{--d-inlay:#0e0c0d}}
.bwc-draw .d-line{fill:none;stroke:var(--d-line);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.bwc-draw .d-ground{stroke:var(--d-ground);stroke-width:2}
.bwc-draw .d-grain{stroke-width:1.6}
.bwc-draw .d-dim{stroke:var(--d-dim);stroke-width:2}
.bwc-draw .d-fill{fill:var(--d-inlay)}
.bwc-draw .d-text{fill:var(--d-dim);font:500 26px/1 var(--font-sans);letter-spacing:.04em}
.bwc-draw .d-sub{fill:var(--ink-faint);font-size:22px}
.bwc-draw.is-prep .d-line{stroke-dasharray:1;stroke-dashoffset:1}
.bwc-draw.is-prep .d-fill,.bwc-draw.is-prep .d-text{opacity:0}
.bwc-draw.is-play .d-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease-out var(--d,0s)}
.bwc-draw.is-play .d-fill,.bwc-draw.is-play .d-text{opacity:1;transition:opacity .6s ease var(--d,0s)}
.gallery .bwc-draw{--d-line:#cfc9bf;--d-dim:#d2b08c;--d-inlay:#0e0c0d;--d-ground:#4e453e}
.gallery .bwc-draw .d-sub{fill:#a5a097}
.gallery__drawing{flex:0 0 100%;min-width:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;padding:var(--space-5) 96px}
.gallery__drawing .bwc-draw{max-width:1000px;max-height:100%}
.has-drawing{position:relative;display:flex;align-items:center;justify-content:center}
.has-drawing .ph-soon,.has-drawing small,.card__img--drawing small{position:absolute;top:var(--space-4);left:var(--space-4);font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.feature-card__media.has-drawing .bwc-draw{height:100%}
.feature-card__media.has-drawing .feature-card__cta{border:1px solid var(--line)}
.product__lead .card__img.product__ph.has-drawing{aspect-ratio:5/4}
.card__img--drawing{display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.bwc-draw .d-line,.bwc-draw .d-fill,.bwc-draw .d-text{transition:none!important}}
@media (max-width:700px){.gallery__drawing{padding:var(--space-5) var(--space-3)}.gallery__drawing .bwc-draw .d-text{font-size:32px}.gallery__drawing .bwc-draw .d-sub{font-size:28px}}

/* Panel wipes (homepage collection, built by work-wipes.js): a pinned carousel after each card group.
   The cards stay in the page for no-JS and reduced motion; with the carousels running they're hidden
   (the "Start with something smaller" text stays, as the second carousel's heading). */
.work--wipes .feature-grid:not(.start-small),.work--wipes .start-small > .feature-card{display:none}
.work--wipes .start-small{margin-bottom:var(--space-6)}
.work--wipes .start-small .start-small__text{grid-column:1/-1;padding-right:0}
.work--wipes .note{text-align:center}
.pw{position:relative}
.pw-stage{--img-w:min(52.8vh,36vw);position:relative;height:calc(100vh - var(--nav-h,0px));height:calc(100svh - var(--nav-h,0px));overflow:hidden}
@media (max-width:767px){.pw-stage{--img-w:min(68vw,40svh,calc((100svh - var(--nav-h,0px) - 210px) * .8))}}
.pw-base{position:absolute;inset:0;z-index:2}
.pw-panels{position:absolute;inset:0;z-index:3;pointer-events:none}
.pw-panel{position:absolute;inset:0;clip-path:inset(var(--reveal,100%) 0 0 0);will-change:clip-path;pointer-events:auto} /* --reveal: 100% hidden → 0% shown */
.pw-frame{position:absolute;left:50%;top:calc(50% + var(--fy,0px));width:var(--img-w);aspect-ratio:4/5;transform:translate(-50%,-50%);display:block;color:inherit;text-decoration:none}
.pw-frame .feature-card__media{height:100%;aspect-ratio:auto;max-height:none}
.pw-frame:hover .feature-card__media img{transform:scale(1.04)}
.pw-frame .has-drawing .bwc-draw{width:100%;height:auto}
.pw-frame:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
.pw-title{position:absolute;inset:0;z-index:20;pointer-events:none}
.pw-side{position:absolute;left:50%;top:50%;transform:translate(var(--sx,0px),var(--sy,0px))}
.pw-col{position:absolute;left:0;top:0;will-change:transform}
.pw-cell{position:absolute;left:0;top:0;text-align:center;transform:translate(-50%,-50%) translateY(calc(var(--i) * var(--slot,100vh)))}
.pw-word{font:300 clamp(24px,2.6vw,40px)/1.05 var(--font-serif);color:var(--walnut);white-space:nowrap}
.pw-side--right .pw-word{font-style:italic;color:var(--ink)}
.pw-sub{position:absolute;top:100%;left:50%;margin-top:var(--space-3);transform:translateX(-50%);font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.pw-side--right .pw-sub{color:var(--clay)}
.pw-count{position:absolute;top:var(--space-5);right:var(--space-6);z-index:21;font:500 12px/16px var(--font-sans);letter-spacing:.14em;color:var(--ink-faint);font-variant-numeric:tabular-nums;pointer-events:none}
.pw-count b{font-weight:500;color:var(--clay)}
/* collection heading inside the first carousel's stage: one line on wide screens, above the panels */
.pw-head{position:absolute;left:0;right:0;top:0;z-index:22;padding-top:var(--space-6);pointer-events:none}
.pw-head .sec-head{display:block;margin:0}
.pw-head .eyebrow{margin-bottom:var(--space-4)}
.pw-head h2{font-size:clamp(32px,3.4vw,52px);max-width:none}
.pw-head a{pointer-events:auto}
@media (max-width:767px){.pw-head{padding-top:var(--space-4)}.pw-head .eyebrow{margin-bottom:var(--space-3)}.pw-head h2{font-size:30px}}
@media (max-width:767px){.pw-count{top:var(--space-3);right:var(--space-4)}.pw-word{font-size:26px}}

/* Footer, tighter vertical rhythm (all pages) */
footer{padding:var(--space-6) 0 var(--space-4)}
footer p,footer a{line-height:22px}
footer .foot__cols a+a{margin-top:0}
footer h4{margin-bottom:6px}
.foot__legal{margin-top:var(--space-4);padding-top:var(--space-3)}
footer .foot__legal p,footer .foot__legal a{line-height:18px}
@media (min-width:901px){.foot__cols{padding-top:2px}}
@media (max-width:900px){.foot__mark{margin:0 0 var(--space-4)}.foot__cols{gap:var(--space-4);padding-top:var(--space-4)}}

/* Footer, second tightening pass */
footer{padding:var(--space-5) 0 var(--space-3)}
footer p,footer a{line-height:20px}
footer h4{margin-bottom:4px}
.foot__legal{margin-top:var(--space-3);padding-top:var(--space-2)}
footer .foot__legal p,footer .foot__legal a{line-height:16px}
.foot__mark{font-size:clamp(26px,2.6vw,34px)}
@media (min-width:901px){.foot__cols{padding-top:0}}
@media (max-width:900px){.foot__mark{margin:0 0 var(--space-3)}.foot__cols{gap:var(--space-3);padding-top:var(--space-3)}}

/* Slim quote bar on product pages (product-bar.js): phones and small tablets only */
.quote-bar{display:none}
@media (max-width:900px){
  .quote-bar{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
    padding:10px var(--space-4) calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line);
    box-shadow:0 -6px 18px -10px rgb(34 31 32 / .35);transform:translateY(110%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s}
  .quote-bar.is-visible{transform:none;visibility:visible;transition:transform .3s ease}
  .quote-bar__info{min-width:0;display:flex;flex-direction:column}
  .quote-bar__info b{font:400 16px/20px var(--font-serif);color:var(--walnut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .quote-bar__info span{font-size:13px;line-height:18px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .quote-bar .btn{flex:none;padding:12px 20px}
}
@media (prefers-reduced-motion:reduce){.quote-bar,.quote-bar.is-visible{transition:none}}

/* Size note under the main product photo */
.product__sizenote{margin:calc(-1 * var(--space-2)) 0 0;text-align:left;color:var(--ink-soft);font-size:14px;line-height:22px;max-width:none}

/* trade page "Request a quote" closer: tighter vertical rhythm */
#trade-quote{padding:var(--space-7) 0 var(--space-8)}
#trade-quote .sec-head{margin-bottom:var(--space-5);align-items:center}
#trade-quote .product__cta{margin-top:0}
@media (max-width:900px){#trade-quote{padding:var(--space-6) 0 var(--space-7)}#trade-quote .sec-head{margin-bottom:var(--space-4);gap:var(--space-4)}}
@media (min-width:901px){#trade-quote .sec-head{margin-bottom:var(--space-6)}}

/* trade quote closer + the band above it: tighter still */
#bases{padding-bottom:var(--space-5)}
#trade-quote{padding:var(--space-5) 0 var(--space-6)}
#trade-quote .sec-head{margin-bottom:var(--space-4);gap:var(--space-5)}
#trade-quote .eyebrow{margin-bottom:var(--space-3)}
@media (min-width:901px){#trade-quote .sec-head{margin-bottom:var(--space-4)}}
@media (max-width:900px){#trade-quote{padding:var(--space-5) 0 var(--space-6)}#trade-quote .sec-head{margin-bottom:var(--space-3)}}
#trade-quote h2{text-wrap:balance}@media (min-width:901px){#trade-quote .sec-head{gap:var(--space-8)}}

.trade-collection{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--space-8,48px);align-items:start}
.trade-collection__photo img{aspect-ratio:4/5;object-fit:cover;object-position:center 60%}
@media (max-width:900px){.trade-collection{grid-template-columns:1fr;gap:var(--space-6)}.trade-collection__photo{order:-1}.trade-collection__photo img{aspect-ratio:4/3;object-position:center 62%}}

/* product pages: "Back to the collection" band (replaces the old More work grid) */
.back-to-work .sec-head{margin-bottom:0}
.back-to-work__end{justify-self:end;display:grid;gap:var(--space-5);justify-items:start;max-width:480px}
.back-to-work__end p{justify-self:start}
@media (max-width:900px){.back-to-work__end{justify-self:start}}

/* delivery and shipping at a glance (Trade, FAQ) */
.ship{width:100%;border-collapse:collapse;margin:var(--space-2) 0 var(--space-3);font-size:inherit;line-height:1.45}
.ship th,.ship td{text-align:left;vertical-align:top;padding:8px 16px 8px 0;border-top:1px solid var(--line)}
.ship tr:last-child th,.ship tr:last-child td{border-bottom:1px solid var(--line)}
.ship th{font-weight:500;width:48%}
@media (max-width:600px){.ship th,.ship td{display:block;width:auto;padding:6px 0}.ship td{border-top:0;padding-top:0;color:var(--ink-soft)}}

/* 404 page */
.notfound{padding:var(--space-9,96px) 0}
.notfound h1{font-size:clamp(40px,5vw,64px);line-height:1.05;margin:var(--space-4) 0}
.notfound .lead{max-width:560px}
.notfound__cta{justify-content:flex-start;margin:var(--space-6) 0}

/* FAQ Ledger (2026-10): sticky photo frame on the left swaps to the question in focus; accordion rows with thumbnails */
.fq-head h1{font-size:clamp(48px,6.4vw,88px);line-height:.98}
.fq-facts{list-style:none;margin:0;padding:var(--space-6) 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--walnut);color:var(--on-clay)}
.fq-facts li{padding:0 var(--space-6);display:flex;flex-direction:column;gap:6px}
.fq-facts li+li{border-left:1px solid color-mix(in srgb,var(--on-clay) 30%,transparent)}
.fq-facts b{font:300 clamp(26px,2.8vw,38px)/1.05 var(--font-serif)}
.fq-facts span{font-size:14px;line-height:20px;opacity:.85}
.fq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-8);padding-top:var(--space-8)}
.fq-frame{position:sticky;top:96px;align-self:start}
.fq-stack{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--card)}
.fq-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.fq-stack img.on{opacity:1;transform:scale(1)}
.fq-cap{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:14px;font-size:13px;line-height:18px;color:var(--ink-faint)}
.fq-cap b{font-weight:500;color:var(--ink-soft)}
.fq-jump{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-5)}
.fq-jump a{font:500 11px/14px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft);border:1px solid var(--line);padding:7px 12px;border-radius:var(--radius-pill);transition:background .25s,color .25s,border-color .25s}
.fq-jump a:hover,.fq-jump a:focus-visible,.fq-jump a.on{background:var(--walnut);border-color:var(--walnut);color:var(--on-clay)}
.fq-group{display:flex;align-items:center;gap:var(--space-4);margin:var(--space-8) 0 var(--space-2)}
.fq-group:first-child{margin-top:0}
.fq-group::after{content:"";flex:1;height:1px;background:var(--brass)}
.fq-item{border-bottom:1px solid var(--line);scroll-margin-top:96px}
.fq-q{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:56px minmax(0,1fr) 28px;gap:20px;align-items:center;padding:18px 0}
.fq-q:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.fq-q img{width:56px;height:56px;object-fit:cover;filter:grayscale(.65) contrast(1.05);transition:filter .4s,transform .4s cubic-bezier(.2,.7,.2,1)}
.fq-q:hover img,.fq-item.open .fq-q img{filter:none;transform:scale(1.06)}
.fq-q h2{font-size:clamp(21px,2.2vw,26px);line-height:1.25;font-weight:400;transition:color .3s}
.fq-q:hover h2{color:var(--ink)}
.fq-plus{position:relative;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;transition:background .3s,border-color .3s,transform .45s cubic-bezier(.2,.7,.2,1)}
.fq-plus::before,.fq-plus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:var(--walnut);transform:translate(-50%,-50%)}
.fq-plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.fq-item.open .fq-plus{transform:rotate(180deg);background:var(--walnut);border-color:var(--walnut)}
.fq-item.open .fq-plus::before,.fq-item.open .fq-plus::after{background:var(--on-clay)}
.fq-item.open .fq-plus::after{transform:translate(-50%,-50%) rotate(0)}
.fq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.fq-item.open .fq-panel{grid-template-rows:1fr}
.fq-panel>div{overflow:hidden;min-width:0}
.fq-ans{padding:0 48px 26px 76px;opacity:0;transform:translateY(-6px);transition:opacity .4s ease .1s,transform .5s cubic-bezier(.2,.7,.2,1) .1s}
.fq-item.open .fq-ans{opacity:1;transform:none}
.fq-ans p{margin:0 0 14px;color:var(--ink-soft)}.fq-ans p:last-child{margin-bottom:0}
.fq-ans a{color:var(--walnut)}
.fq-ans .note{font-size:14px}
.fq-ans .ship{margin:4px 0 16px}
.no-js .fq-panel{grid-template-rows:1fr}.no-js .fq-ans{opacity:1;transform:none}
.fq-ask{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);margin-top:var(--space-9);background:var(--card);border:1px solid var(--line);overflow:hidden}
.fq-ask img{width:100%;height:100%;min-height:320px;object-fit:cover;object-position:center 22%}
.fq-ask__body{padding:clamp(28px,5vw,56px);display:flex;flex-direction:column;justify-content:center;gap:var(--space-4)}
.fq-ask h2{font-size:clamp(30px,3.4vw,42px);line-height:1.1}
.fq-ask p{margin:0;color:var(--ink-soft);max-width:40ch}
.fq-ask .signoff-name{font-family:'Southing',cursive;font-size:38px;line-height:1.2;color:var(--ink)}
.fq-ask .hero__cta{justify-content:flex-start;margin-top:var(--space-2)}
@media (max-width:900px){
 .fq-facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-5)}.fq-facts li:nth-child(3){border-left:0}
 .fq{grid-template-columns:1fr;gap:0;padding-top:var(--space-6)}
 .fq-frame{position:static;margin-bottom:var(--space-6)}.fq-stack,.fq-cap{display:none}.fq-jump{margin-top:0}
 .fq-ans{padding:0 0 22px}
 .fq-ask{grid-template-columns:1fr}.fq-ask img{min-height:0;aspect-ratio:4/3}
}
@media (max-width:480px){.fq-facts li{padding:0 var(--space-4)}.fq-q{grid-template-columns:44px minmax(0,1fr) 26px;gap:14px}.fq-q img{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.fq-stack img,.fq-panel,.fq-ans,.fq-q img,.fq-plus,.fq-plus::after{transition:none}}

/* Trade Program (2026-10): fanned photo stack, term tiles, photo cards with a floating room preview, and a base selector */
.tb-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-7);align-items:center;padding:var(--space-6) 0 var(--space-8)}
.tb-hero .eyebrow{margin-bottom:var(--space-4)}
.tb-hero h1{font-size:clamp(46px,6vw,80px);line-height:1;letter-spacing:-.015em;animation:tb-rise .9s cubic-bezier(.2,.7,.2,1) both}
.tb-hero .trade__tagline{display:block;margin:var(--space-5) 0 var(--space-6);animation:tb-rise .9s cubic-bezier(.2,.7,.2,1) .15s both}
.tb-hero .hero__cta{justify-content:flex-start}
@keyframes tb-rise{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
.tb-fan{position:relative;height:clamp(340px,40vw,520px)}
.tb-fan figure{position:absolute;margin:0;width:56%;aspect-ratio:4/5;overflow:hidden;border:6px solid var(--card);box-shadow:0 24px 48px -28px color-mix(in srgb,var(--ink) 60%,transparent);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tb-fan img{width:100%;height:100%;object-fit:cover}
.tb-fan figure:nth-child(1){left:2%;top:10%;transform:rotate(-7deg);animation:tb-f1 1.1s cubic-bezier(.2,.7,.2,1) .2s both}
.tb-fan figure:nth-child(2){left:40%;top:16%;transform:rotate(6deg);animation:tb-f2 1.1s cubic-bezier(.2,.7,.2,1) .35s both}
.tb-fan figure:nth-child(3){left:20%;top:0;transform:rotate(-1deg);z-index:2;animation:tb-f3 1.1s cubic-bezier(.2,.7,.2,1) .5s both}
@keyframes tb-f1{from{transform:rotate(-1deg) translate(18%,0)}}
@keyframes tb-f2{from{transform:rotate(-1deg) translate(-18%,0)}}
@keyframes tb-f3{from{transform:rotate(-1deg) translateY(16px)}}
.tb-fan:hover figure:nth-child(1){transform:rotate(-10deg) translateX(-6%)}
.tb-fan:hover figure:nth-child(2){transform:rotate(9deg) translateX(6%)}
.tb-h2{font-size:clamp(30px,3.4vw,44px);line-height:1.1;margin:0 0 var(--space-5)}
.tb-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:0}
.tb-tile{background:var(--card);padding:28px 26px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:background .35s}
.tb-tile:hover{background:var(--stone)}
.tb-tile dt{font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--walnut);display:flex;align-items:center;gap:10px}
.tb-tile dt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brass);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tb-tile:hover dt::before{transform:scale(1.6)}
.tb-tile dd{margin:0;color:var(--ink-soft);font-size:16px;line-height:26px}
.tb-tile dd a{color:var(--walnut)}
.tb-tile--wide{grid-column:span 2;grid-row:span 2}
.tb-tile .ship{margin:0}
.tb-after{margin-top:var(--space-5);justify-content:flex-start}
.tb-coll{padding-top:var(--space-9)}
.tb-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tb-card{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:14px;min-width:0}
.tb-card__img{aspect-ratio:4/5;overflow:hidden;background:var(--card);position:relative}
.tb-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tb-card:hover .tb-card__img img{transform:scale(1.05)}
.tb-card__img::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--walnut);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tb-card:hover .tb-card__img::after{transform:scaleX(1)}
.tb-card__img--draw{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--stone);padding:var(--space-5)}
.tb-card h3{font-size:22px;line-height:1.25;font-weight:400}
.tb-card p{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.tb-peek{position:fixed;left:0;top:0;width:220px;aspect-ratio:4/5;pointer-events:none;z-index:50;opacity:0;transform:translate(-9999px,0);transition:opacity .25s;overflow:hidden;box-shadow:0 20px 40px -20px color-mix(in srgb,var(--ink) 60%,transparent);border:5px solid var(--card)}
.tb-peek img{width:100%;height:100%;object-fit:cover}
.tb-peek.on{opacity:1}
@media (hover:none){.tb-peek{display:none}}
#bases.band{margin-top:var(--space-9);padding:var(--space-9) 0}
.tb-picker{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-7);align-items:center}
.tb-names{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.tb-names button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:18px 0;border-bottom:1px solid var(--line);position:relative}
.tb-names button::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--walnut);transform:scaleX(0);transform-origin:left}
.tb-names button[aria-selected="true"]::before{transform:scaleX(1);transition:transform 4s linear}
.tb-picker.paused .tb-names button[aria-selected="true"]::before{transition:none}
.tb-names h3{font-size:clamp(24px,2.6vw,32px);font-weight:300;color:var(--ink-faint);transition:color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.tb-names button[aria-selected="true"] h3,.tb-names button:hover h3{color:var(--walnut);transform:translateX(6px)}
.tb-names p{grid-column:1/-1;margin:0;font-size:14px;line-height:20px;color:var(--ink-soft);max-height:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .4s}
.tb-names button[aria-selected="true"] p{max-height:60px;opacity:1}
.tb-names .tag{align-self:center}
.tb-names button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.tb-stage{position:relative;aspect-ratio:1;background:#f6f5f1;overflow:hidden}
.tb-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:multiply;opacity:0;transform:translateY(16px) scale(.96);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.tb-stage img.on{opacity:1;transform:none}
.tb-quote{background:var(--walnut);color:var(--on-clay);padding:var(--space-9) 0}
.tb-quote .sec-head{margin-bottom:var(--space-6)}
.tb-quote .eyebrow{color:color-mix(in srgb,var(--on-clay) 75%,transparent)}
.tb-quote .eyebrow i{background:currentColor}
.tb-quote h2{color:var(--on-clay)}
.tb-quote .sec-head p{color:color-mix(in srgb,var(--on-clay) 85%,transparent)}
.tb-quote .sec-head p a{color:var(--on-clay);text-decoration:underline}
.tb-quote .hero__cta{justify-content:flex-start}
.tb-quote .btn--primary{--sweep:var(--ink);background:var(--on-clay);color:var(--walnut)}.tb-quote .btn--primary:hover,.tb-quote .btn--primary:focus-visible{color:var(--on-clay)}
.tb-quote .btn--secondary{--sweep:var(--on-clay);border-color:var(--on-clay);color:var(--on-clay)}.tb-quote .btn--secondary:hover,.tb-quote .btn--secondary:focus-visible{color:var(--walnut)}
@media (max-width:900px){.tb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tb-tile--wide{grid-column:1/-1;grid-row:auto}.tb-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.tb-picker{grid-template-columns:1fr}.tb-stage{order:-1}}
@media (max-width:820px){.tb-hero{grid-template-columns:1fr;gap:var(--space-5);padding:var(--space-5) 0 var(--space-7)}}
@media (max-width:560px){.tb-tiles{grid-template-columns:1fr}.tb-cards{gap:14px}.tb-card h3{font-size:18px}}
@media (prefers-reduced-motion:reduce){.tb-fan figure,.tb-hero h1,.tb-hero .trade__tagline{animation:none}.tb-names button[aria-selected="true"]::before{transition:none}}
.tb-hero .trade__tagline{font-family:'Southing',cursive;font-size:clamp(32px,4vw,44px);line-height:1.2;color:var(--ink);margin:var(--space-4) 0 var(--space-6)}
@media (max-width:820px){.tb-fan{margin:0 7%;height:clamp(300px,80vw,420px)}}

/* product pages on phones and tablets: the lead photo and "More photos" become one row you swipe through */
@media (max-width:900px){
  .product__top{grid-template-areas:"media" "head" "info"}
  .product__media{grid-area:media;display:flex;gap:var(--space-3);min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .product__media::-webkit-scrollbar{display:none}
  .product__lead,.product__more,.product__more .grid{display:contents}
  .product__more .eyebrow{display:none}
  .product__media .card{flex:0 0 100%;min-width:0;scroll-snap-align:center}
  .product__media .card__img:not(.product__ph){aspect-ratio:4/5}
  .product__media .card__img:not(.product__ph) img{height:100%;max-height:none;object-fit:contain}
  .swipe-dots{grid-area:media;align-self:end;justify-self:center;z-index:2;display:flex;gap:8px;margin-bottom:var(--space-3);padding:7px 11px;border-radius:999px;background:rgba(34,31,32,.5);pointer-events:none}
  .swipe-dots[hidden]{display:none}
  .swipe-dots i{width:6px;height:6px;border-radius:50%;background:rgba(226,221,210,.5);transition:background .2s,transform .2s}
  .swipe-dots i.is-on{background:#e2ddd2;transform:scale(1.25)}
}
@media (min-width:901px){.swipe-dots{display:none}}

/* product pages on desktop: the main photo is a slider (swipe, drag or arrows) through every photo; the photos stay below it */
.lead-slider{display:none}
@media (min-width:901px){
  .product__lead .card__img > img{display:none}
  .lead-slider{display:block;position:relative;height:min(calc(100svh - 184px),820px)}
  .lead-track{display:flex;height:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
  .lead-track::-webkit-scrollbar{display:none}
  .lead-track.is-drag{cursor:grabbing;scroll-snap-type:none}
  .lead-track > img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;scroll-snap-align:center;user-select:none;-webkit-user-drag:none}
  .lead-art{flex:0 0 100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:var(--space-6);scroll-snap-align:center}
  .lead-art svg{width:100%;height:auto;max-height:100%}
  .lead-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(34,31,32,.55);color:#e2ddd2;font:300 28px/1 var(--font-sans);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s,background .2s;padding:0 0 3px}
  .lead-nav--prev{left:var(--space-3)}
  .lead-nav--next{right:var(--space-3)}
  .lead-slider:hover .lead-nav,.lead-slider:focus-within .lead-nav{opacity:1}
  .lead-nav:hover{background:rgba(34,31,32,.8)}
  .lead-nav[disabled]{opacity:0!important;pointer-events:none}
  .lead-dots{position:absolute;left:50%;bottom:var(--space-3);transform:translateX(-50%);display:flex;gap:8px;padding:7px 11px;border-radius:999px;background:rgba(34,31,32,.5);pointer-events:none}
  .lead-dots i{width:6px;height:6px;border-radius:50%;background:rgba(226,221,210,.5);transition:background .2s,transform .2s}
  .lead-dots i.is-on{background:#e2ddd2;transform:scale(1.25)}
}

/* Trade hero photo fan: click (or Enter) a photo to bring it to the front; the others fan out behind it */
.tb-fan figure[data-slot]{cursor:pointer;transition:transform .7s cubic-bezier(.2,.7,.2,1),left .7s cubic-bezier(.2,.7,.2,1),top .7s cubic-bezier(.2,.7,.2,1)}
.tb-fan figure[data-slot]:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
.tb-fan figure[data-slot="l"]{left:2%;top:10%;transform:rotate(-7deg);z-index:1}
.tb-fan figure[data-slot="r"]{left:40%;top:16%;transform:rotate(6deg);z-index:2}
.tb-fan figure[data-slot="f"]{left:20%;top:0;transform:rotate(-1deg);z-index:3}
.tb-fan:hover figure[data-slot="l"]{transform:rotate(-10deg) translateX(-6%)}
.tb-fan:hover figure[data-slot="r"]{transform:rotate(9deg) translateX(6%)}
.tb-fan:hover figure[data-slot="f"]{transform:rotate(-1deg)}