:root{
  --paper:#F6EFE0;
  --panel:#FFFFFF;
  --ink:#2B2A22;
  --ink-soft:#6E6A5A;
  --line:#E8DFC9;
  --line-strong:#D6C7A3;
  --orange:#C9542A;
  --orange-ink:#FFFFFF;
  --teal:#3E7C84;
  --teal-soft:#E3EFEF;
  --amber-soft:#F5E4D3;
  --sun:#D98A3D;
  --sun-soft:#F7E9D4;
  --focus:#1857C4;
  --sans:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --display:'Zilla Slab', Georgia, serif;
  --accent: var(--orange);
  --accent-soft: var(--amber-soft);
  --radius:12px;
}
/* Brand stays bright regardless of the viewer's system theme — a deliberate
   choice, not an oversight: dark mode reads heavy/industrial, which fights
   the lifestyle tone this site is going for. Tokens are still redefined
   under both selectors per the platform's theming contract, but intentionally
   left equal to the light values. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#F6EFE0; --panel:#FFFFFF; --ink:#2B2A22; --ink-soft:#6E6A5A;
    --line:#E8DFC9; --line-strong:#D6C7A3; --orange:#C9542A; --orange-ink:#FFFFFF;
    --teal:#3E7C84; --teal-soft:#E3EFEF; --amber-soft:#F5E4D3; --sun:#D98A3D; --sun-soft:#F7E9D4; --focus:#1857C4;
  }
}
:root[data-theme="dark"]{
  --paper:#F6EFE0; --panel:#FFFFFF; --ink:#2B2A22; --ink-soft:#6E6A5A;
  --line:#E8DFC9; --line-strong:#D6C7A3; --orange:#C9542A; --orange-ink:#FFFFFF;
  --teal:#3E7C84; --teal-soft:#E3EFEF; --amber-soft:#F5E4D3; --sun:#D98A3D; --sun-soft:#F7E9D4; --focus:#1857C4;
}
body.project{ --accent: var(--teal); --accent-soft: var(--teal-soft); }

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--display); margin:0; letter-spacing:-0.01em;}
p{margin:0;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
section{padding:80px 0;}
@media (max-width:720px){ section{padding:52px 0;} }
:focus-visible{outline:3px solid var(--focus); outline-offset:2px;}

header.site{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto; position:relative;}
.brand{display:flex; align-items:baseline; gap:8px; font-family:var(--display); font-weight:800; font-size:1.1rem; text-decoration:none;}
.brand .mark{color:var(--orange);}
.navlinks{display:flex; gap:24px; font-size:0.88rem; font-weight:500;}
.navlinks a{text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px;}
.navlinks a:hover, .navlinks a[aria-current="page"]{border-color:var(--orange);}
.nav-cta{background:var(--orange); color:var(--orange-ink); border:none; font-family:var(--sans); font-weight:600; font-size:0.85rem; padding:9px 16px; border-radius:var(--radius); cursor:pointer; text-decoration:none; white-space:nowrap;}
.nav-toggle{display:none; background:none; border:1px solid var(--line-strong); border-radius:var(--radius); width:38px; height:38px; cursor:pointer; color:var(--ink); font-size:1rem;}
@media (max-width:1520px){
  .nav-cta{margin-left:auto;margin-right:12px}
  .navlinks{display:none;}
  .nav-toggle{display:block;}
  .navlinks.mobile-open{display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); padding:8px 24px 16px;}
  .navlinks.mobile-open a{padding:12px 0; border-bottom:1px solid var(--line);}
}

.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:var(--radius); font-weight:600; font-size:0.95rem; text-decoration:none; cursor:pointer; border:1px solid var(--ink);}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn-ghost{background:transparent; color:var(--ink);}
.btn-ghost:hover{background:var(--accent-soft);}
.btn-small{padding:10px 16px; font-size:0.85rem;}

.kicker{font-family:var(--mono); font-size:0.78rem; color:var(--teal); display:block; margin-bottom:10px;}
.section-head{max-width:58ch; margin-bottom:40px;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800;}
.section-head p{margin-top:12px; color:var(--ink-soft); font-size:1.02rem;}

.crumb{font-family:var(--mono); font-size:0.78rem; color:var(--ink-soft); margin-bottom:14px;}
.crumb a{text-decoration:underline; text-underline-offset:3px;}

/* project card grid used on home + as cross-links on niche pages */
.project-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:900px){ .project-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .project-grid{grid-template-columns:1fr;} }
.project-card{background:var(--panel); text-decoration:none; color:var(--ink); display:flex; flex-direction:column; border-radius:16px; box-shadow:0 2px 10px rgba(60,50,30,0.06); transition:transform 0.15s, box-shadow 0.15s; overflow:hidden;}
.project-card:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(60,50,30,0.1);}
.project-card .thumb{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;}
.project-card .card-body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px;}
.project-card .icon{width:40px; height:40px;}
.project-card h3{font-size:1.02rem;}
.project-card p{font-size:0.88rem; color:var(--ink-soft);}
.project-card .go{font-family:var(--mono); font-size:0.78rem; color:var(--accent); margin-top:auto;}

/* narrative / story sections used on niche pages */
.story{max-width:66ch;}
.story h2{font-size:clamp(1.6rem,3.2vw,2.1rem); margin-bottom:18px;}
.story p{color:var(--ink-soft); font-size:1.04rem; margin-bottom:18px;}
.story p:last-child{margin-bottom:0;}
.story strong{color:var(--ink); font-weight:600;}
.pullquote{border-left:3px solid var(--accent); padding-left:20px; font-family:var(--display); font-weight:700; font-size:1.35rem; margin:32px 0; max-width:44ch; color:var(--ink);}

.hero-illustration{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:0 4px 16px rgba(60,50,30,0.06);}
.hero-illustration.photo{padding:0; overflow:hidden; aspect-ratio:4/3;}
.hero-illustration.photo img{width:100%; height:100%; object-fit:cover; display:block;}
.page-banner{width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:20px; box-shadow:0 4px 16px rgba(60,50,30,0.08); margin-bottom:36px; display:block;}
.detail-shot{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:16px; margin-bottom:20px; display:block; box-shadow:0 4px 14px rgba(60,50,30,0.08);}
.step-image{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; margin-bottom:14px; display:block;}
.hero-illustration svg{width:100%; height:auto;}

.spec-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:0.85rem;}
.spec-table th{text-align:left; color:var(--ink-soft); font-weight:500; padding:9px 0; border-bottom:1px solid var(--line-strong);}
.spec-table td{padding:9px 0; border-bottom:1px solid var(--line);}

.step-list{counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);}
@media (max-width:800px){ .step-list{grid-template-columns:1fr;} }
.step{padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative;}
.step::before{counter-increment:step; content:counter(step,decimal-leading-zero); font-family:var(--mono); color:var(--accent); font-size:0.85rem; display:block; margin-bottom:10px;}
.step h3{font-size:1.05rem; margin-bottom:8px;}
.step p{color:var(--ink-soft); font-size:0.92rem;}

.faq-list details{border-bottom:1px solid var(--line); padding:16px 0;}
.faq-list summary{cursor:pointer; font-weight:600; font-size:1rem; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+"; font-family:var(--mono); color:var(--accent); font-size:1.15rem;}
.faq-list details[open] summary::after{content:"\2013";}
.faq-list details p{margin-top:10px; color:var(--ink-soft); max-width:60ch;}

.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:860px){ .product-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .product-grid{grid-template-columns:1fr;} }
.product-card{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:20px; display:flex; flex-direction:column; gap:10px;}
.product-card .swatch{height:90px; border-radius:4px; background:var(--amber-soft); border:1px solid var(--line); overflow:hidden;}
.product-card .swatch img{width:100%; height:100%; object-fit:cover; display:block;}
.product-card h3{font-size:1rem;}
.product-card .meta{font-family:var(--mono); font-size:0.78rem; color:var(--ink-soft);}
.product-card .price{font-family:var(--mono); font-weight:600; font-size:1.05rem; margin-top:auto;}
.filter-note{font-size:0.85rem; color:var(--ink-soft); background:var(--amber-soft); border:1px dashed var(--line-strong); padding:14px 18px; border-radius:6px; margin-bottom:32px;}

.final-cta{background:linear-gradient(120deg, var(--sun-soft), var(--accent-soft)); border:1px solid var(--line-strong); color:var(--ink); border-radius:20px; padding:44px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;}
.final-cta h2{color:inherit; font-size:1.6rem;}
.final-cta p{color:var(--ink-soft); margin-top:8px;}

footer{padding:48px 0 36px; border-top:1px solid var(--line);}
.foot-grid{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.foot-links{display:flex; gap:20px; flex-wrap:wrap; font-size:0.86rem;}
.foot-links a{text-decoration:none;}
.foot-links a:hover{color:var(--orange);}
.legal{margin-top:24px; font-size:0.78rem; color:var(--ink-soft); max-width:70ch;}


.hero{padding-top:56px; padding-bottom:56px;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:36px;} }
.hero h1{font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.06; font-weight:800;}
.hero .lede{margin-top:18px; font-size:1.1rem; color:var(--ink-soft); max-width:48ch;}
.hero-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.diagram-caption{display:flex; justify-content:space-between; margin-top:14px; font-family:var(--mono); font-size:0.76rem; color:var(--ink-soft);}

.calc{background:var(--panel); border:1px solid var(--line); border-radius:20px; overflow:hidden; overflow:clip; box-shadow:0 4px 16px rgba(60,50,30,0.06);}
.shape-tabs{display:flex; flex-wrap:wrap; border-bottom:1px solid var(--line); background:var(--amber-soft);}
.shape-tab{font-family:var(--mono); font-size:0.8rem; font-weight:500; padding:13px 16px; background:transparent; border:none; border-right:1px solid var(--line); cursor:pointer; color:var(--ink-soft);}
.shape-tab[aria-selected="true"]{background:var(--panel); color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--orange);}
.unit-row{display:flex; align-items:center; gap:12px; padding:12px 32px; border-bottom:1px solid var(--line); font-size:0.8rem; color:var(--ink-soft);}
.unit-row .pillrow .pill{padding:5px 12px;}
.calc-body{display:grid; grid-template-columns:1fr 1fr; gap:0;}
@media (max-width:860px){ .calc-body{grid-template-columns:1fr;} }
.calc-inputs{padding:30px; border-right:1px solid var(--line);}
@media (max-width:860px){ .calc-inputs{border-right:none; border-bottom:1px solid var(--line);} }
.calc-preview{padding:30px; display:flex; flex-direction:column; gap:16px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
@media (max-width:420px){ .field-row{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:0.78rem; color:var(--ink-soft); font-weight:600;}
.field input[type="number"], .field select, .field textarea{font-family:var(--mono); font-size:0.95rem; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper); color:var(--ink);}
.field textarea{font-family:var(--sans); min-height:80px; resize:vertical;}
.pillrow{display:flex; gap:8px; flex-wrap:wrap;}
.pill{font-family:var(--mono); font-size:0.8rem; padding:8px 12px; border:1px solid var(--line-strong); border-radius:20px; background:var(--paper); cursor:pointer; color:var(--ink-soft);}
.pill[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper);}
fieldset{border:none; padding:0; margin:0 0 16px;}
legend{font-size:0.78rem; color:var(--ink-soft); font-weight:600; margin-bottom:8px; padding:0;}
.preview-box{border:1px dashed var(--line-strong); border-radius:14px; background:radial-gradient(circle, var(--line) 1px, transparent 1px) 0 0/16px 16px, var(--paper); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:16px;}
.preview-box svg, .preview-box canvas{width:100%; height:100%;}
.estimate{background:var(--amber-soft); border-radius:14px; padding:18px;}
.estimate .amount{font-family:var(--mono); font-size:1.6rem; font-weight:600; color:var(--teal);}
.estimate .note{font-size:0.8rem; color:var(--ink-soft); margin-top:6px;}
.estimate .breakdown{font-family:var(--mono); font-size:0.76rem; color:var(--ink-soft); margin-top:10px; line-height:1.7;}
.calc-actions{display:flex; gap:10px; flex-wrap:wrap;}
.quote-list{border-top:1px solid var(--line); padding:26px 30px;}
.quote-list h3{font-size:1.02rem; font-weight:700; margin-bottom:12px;}
.quote-item{display:flex; justify-content:space-between; align-items:center; gap:12px; font-family:var(--mono); font-size:0.84rem; padding:10px 0; border-bottom:1px solid var(--line);}
.quote-item button{background:none; border:none; color:var(--orange); cursor:pointer; font-family:var(--mono); font-size:0.78rem;}
.quote-total{display:flex; justify-content:space-between; font-weight:700; padding-top:14px; font-family:var(--mono);}
.quote-empty{color:var(--ink-soft); font-size:0.9rem;}
.sticky-bar{position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--panel); border-top:2px solid var(--accent); color:var(--ink); padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; justify-content:space-between; gap:16px; transform:translateY(100%); transition:transform 0.25s ease; font-family:var(--mono); font-size:0.86rem; box-shadow:0 -4px 16px rgba(0,0,0,0.08);}
.sticky-bar.visible{transform:translateY(0);}
.sticky-bar a{color:var(--accent); text-decoration:underline; text-underline-offset:3px; font-weight:600;}


.page-section{display:block;}
.page-section[hidden]{display:none !important;}
.page-section.project{ --accent: var(--teal); --accent-soft: var(--teal-soft); }

/* FOAM TAILOR: real logo + FT monogram watermark (page-anchored, one grid) */
.brand{align-items:center;line-height:0;color:var(--ink);flex:0 0 auto;margin-right:18px}
.navlinks{gap:15px;white-space:nowrap;margin-right:14px;font-size:0.85rem}
.ft-logo{height:32px;width:auto;display:block}
html{background:var(--paper)}
body{position:relative;background:transparent}
body::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;background:#DFD0AF;
  -webkit-mask:url(img/img-01-d03870b966.png) 0 0/240px 240px repeat;mask:url(img/img-01-d03870b966.png) 0 0/240px 240px repeat}
footer{position:relative;isolation:isolate;background:var(--ink);color:#E9E1CF;border-top:0;padding:56px 0 40px}
footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#403D33;
  -webkit-mask:url(img/img-01-d03870b966.png) var(--px,0px) var(--py,0px)/240px 240px repeat;mask:url(img/img-01-d03870b966.png) var(--px,0px) var(--py,0px)/240px 240px repeat}
footer .brand{color:#F6EFE0}
footer .ft-logo{height:52px}
footer .foot-links a{color:#E9E1CF}
footer .foot-links a:hover{color:#F2A27E}
footer .legal{color:#B9B09A}

/* LAYOUT: wider container and a Sleepsense-style hero (text near the left edge, photo bleeding off the right) */
.wrap{max-width:1440px;padding:0 clamp(20px,4vw,56px)}
.nav{max-width:1440px;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}
.ft-logo{height:42px}
@media (max-width:720px){.ft-logo{height:34px}}
.page-section:has(> .hero){padding-top:0}
/* HERO: matches the Sleepsense sites. Solid ground, text near the left edge, photo filling the right and fading in. */
.hero{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(560px,46vw,780px);display:flex;align-items:center;padding:0;background:transparent}
.hero .hero-grid{position:static;display:block;max-width:none;width:100%;margin:0;padding:clamp(48px,6vw,80px) clamp(20px,4vw,40px) clamp(48px,6vw,80px) clamp(20px,7vw,140px)}
.hero .hero-grid>div:first-child{max-width:min(36rem,calc(42vw - clamp(20px,7vw,140px)));position:relative;z-index:3}
.hero h1{font-size:clamp(2.8rem,5vw,4.4rem)}
.hero .lede{max-width:44ch}
.hero .hero-illustration.photo{position:absolute;top:0;right:0;bottom:0;width:62%;margin:0;border:0;border-radius:0;aspect-ratio:auto;box-shadow:none;overflow:hidden;background:transparent;padding:0}
.hero .hero-illustration.photo img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;border-radius:0;box-shadow:none}
.hero .hero-illustration.photo::before{display:none}
.hero .hero-illustration.photo::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to right,#F6EFE0 0%,rgba(246,239,224,.88) 14%,rgba(246,239,224,.4) 34%,rgba(246,239,224,0) 54%)}
@media (max-width:900px){
  .hero{flex-direction:column;align-items:stretch;min-height:0}
  .hero .hero-grid{padding-bottom:12px}
  .hero .hero-grid>div:first-child{max-width:none}
  .hero .hero-illustration.photo{position:relative;width:100%;aspect-ratio:4/3;top:auto;bottom:auto}
  .hero .hero-illustration.photo::after{background:linear-gradient(to bottom,#F6EFE0 0%,rgba(246,239,224,0) 30%)}
}

/* HERO v2: general-supplier cutting mat instead of a single project photo */
.hero .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center;padding-right:clamp(20px,5vw,80px)}
.hero .hero-grid>div:first-child{max-width:36rem}
@media (max-width:900px){.hero .hero-grid{grid-template-columns:1fr;padding-right:clamp(20px,4vw,40px);padding-bottom:36px}}

/* SHAPE PICKER */
.shape-bar{border-bottom:1px solid var(--line);background:var(--amber-soft);padding:16px 20px 18px}
.shape-bar-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:0.8rem;color:var(--ink-soft);font-weight:600;margin-bottom:12px}
.shape-current strong{color:var(--ink)}
.shape-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.shape-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 9px;background:var(--panel);border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--ink);font-family:var(--sans);font-size:0.76rem;line-height:1.25;text-align:center}
.shape-opt svg{width:56px;height:38px;color:var(--ink)}
.shape-opt:hover{border-color:var(--line-strong)}
.shape-opt[aria-checked="true"]{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange);background:#FFF9F4}
@media (max-width:520px){.shape-picker{grid-template-columns:repeat(3,1fr)}.shape-opt{font-size:0.72rem}}
.profile-note{font-size:0.8rem;color:var(--ink-soft);margin:-2px 0 14px}
fieldset[hidden],.field[hidden]{display:none}
.preview-box canvas{max-width:340px}


/* HERO: cutting mat + tailor's label */
.hero-art{position:relative;margin:0 0 30px 18px}
.hero-art .ft-hero-art{width:100%;height:auto;display:block;border-radius:22px;box-shadow:0 20px 40px rgba(40,50,45,.18)}
.hero-label{position:absolute;left:-22px;bottom:-40px;width:42%;min-width:190px;max-width:250px;transform:rotate(-3deg)}
.hero-label svg{width:100%;height:auto;display:block}
.hero-uses{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero-uses a{display:inline-block;font-family:var(--mono);font-size:.78rem;padding:6px 12px;border:1px dashed var(--line-strong);border-radius:999px;text-decoration:none;color:var(--ink-soft);background:var(--panel)}
.hero-uses a:hover{border-color:var(--orange);color:var(--ink)}
.ruler-rule{height:18px;background:
  repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 10px) bottom/100% 6px no-repeat,
  repeating-linear-gradient(90deg,var(--ink-soft) 0 1px,transparent 1px 50px) bottom/100% 12px no-repeat,
  repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 100px) bottom/100% 18px no-repeat;opacity:.5}
@media (max-width:900px){.hero-art{margin:10px 0 40px 8px}.hero-label{left:-10px;bottom:-34px}}

/* LOGO v2: heavier wordmark, solid FT block with orange offset frame */
.ft-logo .ft-knock{fill:#F6EFE0}
footer .ft-logo .ft-knock{fill:#2B2A22}
footer .ft-logo .ft-slot, footer .ft-logo .ft-cut{stroke:#E07A4F}
.ft-logo{height:46px}
@media (max-width:720px){.ft-logo{height:38px}}
footer .ft-logo{height:58px}

/* BRAND LAYER: the cell-and-cut system carried through the site */
.kicker{display:inline-flex; align-items:center; gap:8px; color:#A8421E; letter-spacing:.04em}
.kicker::before{content:""; width:22px; height:16px; flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Crect x='1' y='1' width='12' height='12' rx='2' fill='none' stroke='%23C9542A' stroke-width='1.6' stroke-dasharray='3 2'/%3E%3Crect x='6' y='5' width='12' height='12' rx='2' fill='%232B2A22'/%3E%3C/svg%3E") center/contain no-repeat}
.project-card{outline:2px dashed transparent; outline-offset:5px; transition:transform .15s, box-shadow .15s, outline-color .15s}
.project-card:hover, .project-card:focus-visible{outline-color:var(--orange)}
.estimate{outline:1.5px dashed rgba(201,84,42,.5); outline-offset:-8px}
.shape-opt[aria-checked="true"]{border-style:dashed; border-width:2px; box-shadow:none}
.foot-brand{display:flex; flex-direction:column; gap:10px}
.foot-tag{font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:#E07A4F; margin:0}
.page-rule{margin:-18px 0 34px}

/* DRAW YOUR OWN */
.draw-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px}
.draw-label{font-size:.78rem;font-weight:600;color:var(--ink-soft);margin-right:2px}
.draw-sp{flex:1}
.draw-snap{font-size:.78rem;color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px}
.draw-snap select{font-size:.78rem;padding:4px 6px;border-radius:8px;border:1px solid var(--line-strong);background:var(--paper)}
.draw-wrap{border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;background:#FBF8F1}
#draw-svg{display:block;width:100%;height:auto;aspect-ratio:4/3;touch-action:none;cursor:crosshair;user-select:none}
#draw-svg .pt{cursor:grab}
#draw-svg .lbl, #draw-svg text, #draw-svg image, #draw-svg line, #draw-svg path, #draw-svg polyline{pointer-events:none}
#draw-svg .add text{pointer-events:none}
.draw-help{font-size:.78rem;color:var(--ink-soft);margin:8px 0}
.draw-size{font-family:var(--mono);font-size:.8rem;color:var(--ink);margin-bottom:8px}
.tbl-scroll{overflow-x:auto}
.draw-table{width:100%;border-collapse:collapse;font-size:.8rem;min-width:380px}
.draw-table th{text-align:left;font-weight:600;color:var(--ink-soft);padding:4px 4px;border-bottom:1px solid var(--line)}
.draw-table td{padding:3px 4px;border-bottom:1px solid var(--line)}
.draw-table input{width:100%;min-width:60px;font-family:var(--mono);font-size:.8rem;padding:5px 6px;border:1px solid var(--line-strong);border-radius:6px;background:var(--paper)}
.draw-table button{background:none;border:none;color:#A33A16;cursor:pointer;font-size:1rem;padding:2px 6px}
.draw-trace{margin-top:10px;font-size:.82rem}
.draw-trace summary{cursor:pointer;font-weight:600;color:var(--ink-soft)}
/* CUT FILES */
.qi-btns{display:inline-flex;gap:6px;flex:none}
.qi-btns button[data-dxf], .qi-btns button[data-cf]{border:1px dashed var(--orange);color:#A8421E;font-family:var(--mono);font-weight:600}
/* MOBILE CALCULATOR: swipeable shapes, live preview + price pinned while you type */
.calc-live{display:flex; flex-direction:column; gap:16px}
.preview-box canvas{aspect-ratio:340/250; height:auto !important}
@media (max-width:860px){
  .shape-bar{padding:14px 0 14px 16px}
  .shape-bar-head{padding-right:16px}
  .shape-picker{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:8px; padding:2px 16px 8px 2px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .shape-picker::-webkit-scrollbar{display:none}
  .shape-opt{flex:0 0 92px; scroll-snap-align:start}
  .calc-body{display:flex; flex-direction:column}
  .calc-preview{display:contents}
  .calc-live{order:-1; position:sticky; top:var(--hdr,62px); z-index:6; background:var(--panel); border-bottom:1px solid var(--line); padding:10px 16px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:center; box-shadow:0 6px 14px rgba(60,50,30,.08)}
  .calc-live .preview-box{aspect-ratio:auto; border-radius:10px}
  .calc-live .estimate{padding:10px 12px; border-radius:10px}
  .calc-live .estimate .amount{font-size:1.15rem}
  .calc-live .estimate .note{font-size:.72rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .calc-live .estimate .breakdown{display:none}
  .calc-inputs{padding:20px 16px}
  .calc-body > .calc-preview > .calc-actions, .calc-body .calc-actions{order:1; padding:0 16px 20px}
}
/* TRADE */
.trade-btn{flex:0 0 auto;background:none;border:1px solid var(--line-strong);border-radius:var(--radius);padding:8px 14px;font-family:var(--sans);font-size:0.82rem;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;margin-right:10px;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.trade-btn:hover{background:var(--teal-soft)}
@media (max-width:1520px){.trade-btn{margin-left:auto}.nav-cta{margin-left:0}}
.nav-trade-m{display:none}
@media (max-width:560px){.trade-btn{display:none}.navlinks.mobile-open .nav-trade-m{display:block}}
.trade-banner{background:var(--teal-soft);color:var(--ink);font-size:0.86rem;padding:12px 24px;border-bottom:1px solid var(--line)}
.trade-dialog{border:1px solid var(--line-strong);border-radius:16px;padding:0;max-width:440px;width:calc(100% - 32px);color:var(--ink);background:var(--panel);box-shadow:0 20px 50px rgba(40,35,20,.25)}
.trade-dialog::backdrop{background:rgba(43,42,34,.45)}
.trade-dialog .td-body{padding:28px}
.trade-dialog h2{font-size:1.4rem;margin-bottom:8px}
.trade-dialog p{color:var(--ink-soft);font-size:0.9rem;margin-bottom:16px}
.trade-dialog .field{margin-bottom:14px}
.trade-dialog input{font-family:var(--sans);font-size:0.95rem;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.td-error{color:#A33A16;font-size:0.85rem;min-height:1.2em;margin-bottom:10px}
.td-demo{font-size:0.8rem;background:var(--amber-soft);border-radius:8px;padding:10px 12px;color:var(--ink-soft);margin-top:18px}
.td-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--ink-soft)}

/* ROCK & ROLL BUILDER */
.rr{display:grid;grid-template-columns:1fr 1fr;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 4px 16px rgba(60,50,30,0.06)}
@media (max-width:900px){.rr{grid-template-columns:1fr}}
.rr-inputs{padding:30px;border-right:1px solid var(--line)}
@media (max-width:900px){.rr-inputs{border-right:none;border-bottom:1px solid var(--line)}}
.rr-out{padding:30px;display:flex;flex-direction:column;gap:18px}
.rr-help{font-size:0.8rem;color:var(--ink-soft);margin:-6px 0 14px}
.rr-plan{border:1px dashed var(--line-strong);border-radius:14px;background:var(--paper);padding:14px}
.rr-plan svg{width:100%;height:auto;max-height:420px}
.rr-lbl{font:600 12px var(--sans);fill:#2B2A22}
.rr-dim{font:11px var(--mono);fill:#6E6A5A}
.rr-table{width:100%;border-collapse:collapse;font-size:0.86rem}
.rr-table th{text-align:left;color:var(--ink-soft);font-weight:500;padding:8px 0;border-bottom:1px solid var(--line-strong);font-size:0.78rem}
.rr-table td{padding:9px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:0.82rem}
.rr-table td:first-child{font-family:var(--sans);font-weight:600}
.rr-swatch{display:inline-block;width:12px;height:12px;border:1px solid #2B2A22;border-radius:3px;margin-right:8px;vertical-align:-1px}
.rr-errors{background:#FBEAE2;border:1px solid #E7B9A5;border-radius:10px;padding:12px 14px;font-size:0.86rem;color:#7A2E12}
.rr-errors p+p{margin-top:6px}
.rr-added{font-size:0.88rem;color:var(--teal)}
/* ===== Oct 2026 edits: clearer spec tables, sheets page, R&R side view ===== */
.spec-table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--sans);font-size:0.95rem;line-height:1.45;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;overflow:hidden}
.spec-table caption{caption-side:top;text-align:left;font-weight:700;font-size:0.95rem;color:var(--ink);padding:0 0 8px}
.spec-table thead th{background:var(--amber-soft);color:var(--ink);font-weight:700;font-size:0.78rem;letter-spacing:0.05em;text-transform:uppercase;text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-strong)}
.spec-table td,.spec-table tbody th{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink);text-align:left}
.spec-table tbody tr:last-child td,.spec-table tbody tr:last-child th{border-bottom:0}
.spec-table tbody tr:nth-child(even) td{background:rgba(245,228,211,0.28)}
.spec-table td:first-child{font-weight:700}
.spec-table td:last-child:not(:first-child){font-weight:600;color:var(--teal);white-space:nowrap}
.spec-table.contact-table tbody th{font-weight:700;width:38%;background:var(--amber-soft)}
.spec-table.contact-table td:last-child{color:var(--ink);white-space:normal;font-weight:400}
.spec-table .inch,.sheet-card .inch{color:var(--ink-soft);font-weight:400}
.table-stack{display:flex;flex-direction:column;gap:22px}
.tbl-scroll{overflow-x:auto}
@media (max-width:640px){.spec-table td:last-child:not(:first-child){white-space:normal}.spec-table td,.spec-table tbody th,.spec-table thead th{padding:10px}}
@media (max-width:860px){.wrap[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;gap:32px !important}}
.price-table td{text-align:right}
.price-table td:first-child,.price-table thead th:first-child{text-align:left}
.price-table thead th:not(:first-child){text-align:right}
.price-table td:not(:first-child){font-family:var(--mono);font-weight:600;color:var(--teal);white-space:nowrap}
.price-table caption{font-weight:400;font-size:0.85rem;color:var(--ink-soft)}
.sheet-card .swatch{position:relative}
.size-badge{position:absolute;right:10px;top:10px;height:96px;width:auto;background:rgba(246,239,224,.92);border-radius:8px;padding:4px 6px;box-shadow:0 2px 8px rgba(40,30,10,.18)}
.size-badge .sb-t{font:600 11px var(--mono);fill:#2B2A22}
.sheet-card .swatch .sheet-photo{width:100%;height:100%;display:block}
.ph-t{font:700 40px var(--mono);fill:#fff}
.sheet-card .swatch .sheet-art{width:100%;height:100%;display:block}
.sa-t{font:600 24px var(--mono);fill:#2B2A22}
.sa-big{font-size:30px;fill:#A8421E}
.sa-g{font:600 20px var(--mono);fill:#9C8F74}

.delivery-strip{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;background:var(--ink);color:var(--paper);font-size:0.8rem;padding:7px 16px;text-align:center}
.delivery-strip strong{color:#F3C98B}
.ds-sep{opacity:.5}
.ds-mob{display:none}
@media (max-width:640px){.ds-wide{display:none}.ds-mob{display:inline}}
.hero-delivery{margin-top:18px;font-size:0.95rem;font-weight:600;color:var(--teal)}
.hero-delivery span{display:inline-block;margin-right:4px}
.ft-logo .ft-hook rect{fill:#C9542A}.ft-logo .ft-rivet{fill:#F6EFE0}footer .ft-logo .ft-hook rect{fill:#E07A4F}footer .ft-logo .ft-rivet{fill:#2B2A22}
.thick-shot{width:100%;border-radius:12px;margin-bottom:18px;border:1px solid var(--line)}
.sheet-tables{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
@media (max-width:900px){.sheet-tables{grid-template-columns:1fr}}
.sheet-card{gap:12px;border-radius:12px}
.sheet-card .swatch{height:170px;border-radius:8px}
.sheet-card h3{font-size:1.2rem}
.sheet-blurb{font-size:0.9rem;color:var(--ink-soft)}
.sheet-card fieldset{border:0;padding:0;margin:0}
.sheet-card legend{font-size:0.78rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.sheet-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.sheet-price .amount{font-family:var(--mono);font-weight:600;font-size:1.6rem;color:var(--teal)}
.sheet-price .incl{font-size:0.82rem;color:var(--ink-soft)}
.sheet-spec{font-size:0.85rem;color:var(--ink)}
.sheet-added{font-size:0.88rem;color:var(--teal)}
.pill-note{font-size:0.8rem;color:#7A2E12;margin-top:6px}
.pill[disabled]{opacity:0.4;cursor:not-allowed}
.rr-views{display:flex;flex-direction:column;gap:14px}
.rr-plan{margin:0}
.rr-plan figcaption{font-size:0.78rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.rr-table{font-size:0.92rem}
.rr-table th{font-size:0.78rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink);background:var(--amber-soft);padding:10px}
.rr-table td{padding:10px;font-size:0.9rem}

.rr-added a{font-weight:600}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* Footer links to terms and policies */
.foot-legal-links{margin:18px 0 6px;font-size:.85rem}
.foot-legal-links a{color:inherit}