@font-face{font-family:Vollkorn;src:url(../fonts/vollkorn-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Cookie;src:url(../fonts/cookie-400.woff2) format('woff2');font-weight:400;font-display:swap}

:root{
  --red:#E83939;
  --red-2:#C92B2B;
  --ink:#2B2B2B;
  --body:#606060;
  --line:#E2E2E2;
  --bg:#FFFFFF;
  --bg-2:#F7F7F7;
  --display:Vollkorn,Georgia,'Times New Roman',serif;
  --script:Cookie,'Brush Script MT',cursive;
  --sans:Karla,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap:1180px;
  --r:10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--body);background:var(--bg);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);color:var(--ink);line-height:1.15;margin:0;font-weight:600}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;z-index:99;border-radius:8px}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* top bar */
.topbar{background:var(--ink);color:rgba(255,255,255,.8);font-size:13.5px}
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:9px 24px;flex-wrap:wrap}
.tb-oils{color:#fff;text-decoration:none;font-weight:700;border-bottom:1px solid rgba(255,255,255,.4)}
.tb-oils:hover{color:#FFC9C9}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.hdr-in{display:flex;align-items:center;gap:22px;min-height:84px}
.brand{text-decoration:none;display:flex;flex-direction:column;margin-right:auto;line-height:1.05}
.brand-name{font-family:var(--display);font-size:clamp(22px,3vw,31px);color:var(--ink);letter-spacing:-.01em}
.verse-sm{font-family:var(--script);font-size:21px;color:var(--red);margin-top:2px}
.call{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.call-label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--body);font-weight:700}
.call-num{font-family:var(--display);font-size:clamp(19px,2.6vw,27px);color:var(--red);text-decoration:none;font-weight:600;white-space:nowrap}
.call-num:hover{color:var(--red-2)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* nav */
.nav{background:var(--red)}
.nav-in{display:flex;flex-wrap:wrap;gap:0}
.nav a{color:#fff;text-decoration:none;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:14px 13px;border-bottom:3px solid transparent}
.nav a:hover{background:var(--red-2);border-color:rgba(255,255,255,.85)}

/* hero */
.hero{background:var(--bg-2);border-bottom:1px solid var(--line);padding:72px 0}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.verse-script{font-family:var(--script);font-size:clamp(30px,4.4vw,44px);color:var(--red);margin:0 0 10px;line-height:1.1}
.hero h1{font-size:clamp(34px,5.2vw,56px);margin:0 0 10px}
.hero-sub{font-family:var(--display);font-size:clamp(19px,2.4vw,25px);color:var(--body);margin:0 0 32px}
.cta-row{display:flex;gap:13px;flex-wrap:wrap}
.hero-pic img{border-radius:var(--r);width:100%;aspect-ratio:3/4;object-fit:cover;max-height:520px;box-shadow:0 22px 50px -26px rgba(0,0,0,.42)}

.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:15.5px;padding:14px 27px;border-radius:6px;border:2px solid transparent;cursor:pointer;font-family:var(--sans);transition:.2s;letter-spacing:.02em}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-2)}
.btn-out{border-color:var(--ink);color:var(--ink)}
.btn-out:hover{background:var(--ink);color:#fff}
.btn-out-red{border-color:var(--red);color:var(--red)}
.btn-out-red:hover{background:var(--red);color:#fff}
.btn-white{background:#fff;color:var(--red)}
.btn-white:hover{background:#FFE9E9}
.full{width:100%}

/* sections */
.sect{padding:84px 0}
.h2{font-size:clamp(27px,3.8vw,40px);margin-bottom:18px}
.center{text-align:center}
.sub{max-width:68ch;margin:0 auto 42px;font-size:17.5px}
.kicker{color:var(--red);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin:0 0 26px}
.big{font-size:18.5px;max-width:74ch;margin:0 0 36px}

.types{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px}
.types li{font-family:var(--display);font-size:18px;color:var(--ink);background:var(--bg-2);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:6px;padding:12px 24px}

/* sales split */
.sales{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sales-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.sales-img img{border-radius:var(--r);width:100%}
.sales-txt p{margin:0 0 18px}
.sales-txt .btn{margin-top:10px}

/* brands */
.brands{padding:52px 0;border-bottom:1px solid var(--line)}
.brand-row{display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,58px);flex-wrap:wrap}
.brand-row img{height:32px;width:auto;object-fit:contain;opacity:.78;filter:grayscale(1);transition:.25s}
.brand-row img:hover{opacity:1;filter:none}

/* cabinetry */
.cab{background:var(--bg-2)}
.styles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:940px;margin-inline:auto}
.styles li{background:#fff;border:1px solid var(--line);border-radius:6px;padding:15px 18px;text-align:center;font-size:15px;color:var(--ink)}

/* gallery */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gal-grid figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:1;background:var(--bg-2)}
.gal-grid img{width:100%;height:100%;object-fit:cover;transition:.4s}
.gal-grid figure:hover img{transform:scale(1.05)}

/* reviews */
.reviews{background:var(--bg-2)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev-grid blockquote{margin:0;background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);border-radius:var(--r);padding:28px}
.stars{color:var(--red);letter-spacing:2px;margin-bottom:12px;font-size:15px}
.rev-grid p{margin:0 0 15px;font-size:15.5px}
.rev-grid cite{font-style:normal;font-weight:700;color:var(--ink);font-size:14.5px}

/* strips */
.strip{background:var(--red);color:#fff;padding:54px 0}
.strip .h2{color:#fff;margin-bottom:8px}
.strip p{margin:0;color:rgba(255,255,255,.92)}
.strip-in,.oils-in{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.oils{padding:54px 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.oils p{margin:6px 0 0;max-width:62ch}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.info-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.info-card h3{font-size:22px;margin-bottom:18px}
.info-card h3.mt{margin-top:30px}
.facts{display:grid;gap:18px;margin:0}
.facts div{display:grid;grid-template-columns:86px 1fr;gap:14px;align-items:start}
.facts dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:700;padding-top:4px}
.facts dd{margin:0;font-size:16px;color:var(--ink)}
.facts a{color:var(--ink)}
.dim{color:var(--body);font-size:14.5px}
.hours{width:100%;border-collapse:collapse;font-size:15.5px}
.hours th,.hours td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:400}
.hours th{font-weight:700;width:42%}
.qform{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:0 18px 44px -30px rgba(0,0,0,.45)}
.qform h3{font-size:22px;margin-bottom:20px}
.qform label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:15px;letter-spacing:.06em;text-transform:uppercase}
.qform input,.qform textarea{width:100%;margin-top:7px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:15.5px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink);background:#fff}
.qform textarea{resize:vertical}
.form-note{background:#FFF4F4;border:1px solid var(--red);border-radius:6px;padding:14px 16px;font-size:14.5px;margin:15px 0 0;color:var(--ink)}

/* footer */
.ftr{background:var(--ink);color:rgba(255,255,255,.66);padding:52px 0 34px;text-align:center;font-size:14px}
.ftr-brand{font-family:var(--display);font-size:25px;color:#fff;margin:0 0 6px}
.verse-script.small{font-family:var(--script);font-size:23px;color:#FF9C9C;max-width:60ch;margin:0 auto 20px;line-height:1.35}
.ftr-line{margin:0 0 20px;color:rgba(255,255,255,.85)}
.ftr a{color:#fff}
.ftr-fine{font-size:12.5px;color:rgba(255,255,255,.45);max-width:80ch;margin:0 auto 8px}

@media(max-width:1000px){
  .styles{grid-template-columns:repeat(3,1fr)}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .hero-in,.sales-in,.contact-grid{grid-template-columns:1fr;gap:40px}
  .hero-pic{max-width:440px}
  .rev-grid{grid-template-columns:1fr}
  .sales-img{order:-1}
}
@media(max-width:760px){
  body{font-size:16px}
  .burger{display:block}
  .nav{display:none}
  .nav.open{display:block}
  .nav-in{flex-direction:column;padding-top:4px;padding-bottom:10px}
  .nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.25);width:100%}
  .nav a:hover{background:transparent}
  .call{align-items:flex-end}
  .brand-name{font-size:19px}
  .verse-sm{font-size:17px}
  .hdr-in{gap:12px}
  .call-label{display:none}
  .sect{padding:60px 0}
  .hero{padding:48px 0}
  .styles{grid-template-columns:1fr 1fr}
  .topbar-in{justify-content:center;text-align:center;gap:6px}
  .tb-note{display:none}
  .strip-in,.oils-in{flex-direction:column;align-items:flex-start}
  .info-card,.qform{padding:24px}
  .facts div{grid-template-columns:1fr;gap:3px}
}

/* ---- production additions ---- */
.hero-meta{margin:22px 0 0;font-size:14.5px;color:var(--body)}
.sub-left{max-width:68ch;margin:0 0 40px;font-size:17.5px}
.flooring{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.card-img{aspect-ratio:3/2;overflow:hidden;background:var(--bg-2)}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-body{padding:22px 24px 26px}
.card-body h3{font-size:21px;margin-bottom:9px}
.card-body p{margin:0;font-size:15.5px}
.brand-list{text-align:center;margin:26px auto 0;max-width:80ch;font-size:14.5px;color:var(--body);line-height:2}
.cab-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cab-img img{border-radius:var(--r);width:100%}
.areas p{max-width:80ch;font-size:17.5px}
.faq{background:var(--bg-2);border-top:1px solid var(--line)}
.faq-list{display:grid;gap:4px;max-width:88ch}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;margin-bottom:12px}
.faq-item h3{font-size:19px;margin-bottom:7px}
.faq-item p{margin:0;font-size:16px}
.map-slot{margin-top:26px}
.map-btn{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:6px;padding:14px 18px;font:inherit;font-size:15.5px;color:var(--ink);cursor:pointer;width:100%;text-align:left}
.map-btn:hover{background:#FFF4F4}
.map-slot iframe{width:100%;height:300px;border:0;border-radius:var(--r);margin-top:12px}
address{font-style:normal;margin:0 0 16px;color:rgba(255,255,255,.85)}
.ftr-links{margin:0 0 18px;font-size:14px}
.ftr-links a{color:#fff;text-decoration:underline}
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--red);color:#fff;text-decoration:none;font-weight:700;padding:15px;text-align:center;align-items:center;justify-content:center;gap:9px;font-size:16.5px;box-shadow:0 -3px 14px rgba(0,0,0,.18)}
.callbar svg{width:19px;height:19px;fill:currentColor}
@media(max-width:1000px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.cab-in{grid-template-columns:1fr;gap:38px}}
@media(max-width:760px){
  .cards{grid-template-columns:1fr}
  .callbar{display:flex}
  body{padding-bottom:62px}
  .ftr{padding-bottom:26px}
}

/* ---- legal pages ---- */
.legal{padding:56px 0 80px}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(28px,4vw,40px);margin-bottom:8px}
.legal .eff{color:var(--body);font-size:15px;margin:0 0 34px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.legal h2{font-family:var(--display);font-size:22px;color:var(--ink);margin:36px 0 10px}
.legal p,.legal li{font-size:16.5px}
.legal ul{padding-left:20px}
.legal li{margin-bottom:7px}
.legal blockquote{margin:16px 0;padding:16px 20px;background:var(--bg-2);border-left:4px solid var(--red);border-radius:0 6px 6px 0;font-size:16px}
.crumbs{font-size:14px;color:var(--body);margin:0 0 20px}
.crumbs a{color:var(--red)}

/* ---- suppliers ---- */
.suppliers{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sup{display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:26px 26px 22px;text-decoration:none;transition:.2s;min-height:186px}
.sup:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(0,0,0,.34)}
/* A fixed 72px box so the six cards line up, but each logo sets its OWN height
   inline (see SUPPLIERS in _build/pages.py) because their proportions run from
   1:1 to 6:1 — one shared cap always leaves somebody looking half-size.
   Logos render in full brand colour: these are the manufacturers' real marks
   and Shaw's and Southwind's are the whole point of the section. */
.sup-logo{display:flex;align-items:center;justify-content:flex-start;height:72px;margin-bottom:12px}
.sup-logo img{width:auto;max-width:175px;object-fit:contain;object-position:left center}
.sup-name{font-family:var(--display);font-size:21px;color:var(--ink);line-height:1.2}
.sup-what{font-size:14.5px;color:var(--body);flex:1}
.sup-go{display:inline-flex;align-items:center;gap:7px;color:var(--red);font-weight:700;font-size:14.5px;margin-top:10px}
.sup-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:.2s}
.sup:hover .sup-go svg{transform:translateX(4px)}

/* Same inline arrow as .sup-go, used in body copy. It MUST carry an explicit
   svg size: the icon is a bare 24x24 viewBox with no width/height attributes,
   so with no rule at all it stretches to fill its container — this one shipped
   rendering 1132px square on the home page. */
.link-arrow{display:inline-flex;align-items:center;gap:7px;color:var(--red);font-weight:700;text-decoration:none}
.link-arrow:hover{text-decoration:underline}
.link-arrow svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:.2s}
.link-arrow:hover svg{transform:translateX(4px)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:1000px){.sup-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.sup-grid{grid-template-columns:1fr}.sup{min-height:0}}

/* ---- multi-page chrome ---- */
.crumbs{font-size:13.5px;color:var(--body);padding:16px 0 0}
.crumbs a{color:var(--red);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{color:var(--body)}
.nav a[aria-current=page]{background:var(--red-2);border-bottom-color:rgba(255,255,255,.9)}
.page-head{padding-bottom:0}
.page-head h1{font-size:clamp(30px,4.6vw,46px);margin-bottom:14px}
.page-head .big{max-width:72ch}
.narrow{max-width:740px}
.center-block{text-align:center}
.center-block .h2{margin-bottom:12px}
.h3-like{font-family:var(--display);font-size:22px;color:var(--ink);margin:0 0 18px}
.h3-like.mt{margin-top:30px}
.two-col{display:grid;grid-template-columns:1fr 330px;gap:52px;align-items:start}
.side{display:grid;gap:18px;position:sticky;top:120px}
.side-card{background:var(--bg-2);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--r);padding:24px}
.side-card h3{font-size:19px;margin-bottom:10px}
.side-card p{font-size:15.5px}
.side-card .btn{margin-top:6px}
.ticks{list-style:none;padding:0;margin:14px 0 26px}
.ticks li{position:relative;padding-left:26px;margin-bottom:9px;font-size:16.5px}
.ticks li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:2px;background:var(--red)}
.steps{margin:18px 0 0;padding-left:22px;max-width:76ch}
.steps li{margin-bottom:14px;font-size:16.5px}
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{margin-bottom:6px}
.note-line{margin-top:22px;font-size:13.5px;color:var(--body);font-style:italic}
.miniform{background:var(--bg-2);border-top:1px solid var(--line)}
.mini-in{display:grid;grid-template-columns:1fr 440px;gap:52px;align-items:start}
.mini-alt{margin-top:18px;font-size:15.5px}
.ftr-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;text-align:left;margin-bottom:34px}
.ftr-h{font-family:var(--display);color:#fff;font-size:16px;margin:0 0 10px}
.ftr-h.mt{margin-top:22px}
.ftr-cols ul{list-style:none;padding:0;margin:0;font-size:14.5px}
.ftr-cols li{margin-bottom:7px}
.ftr-cols a{color:rgba(255,255,255,.85);text-decoration:none}
.ftr-cols a:hover{color:#fff;text-decoration:underline}
.ftr address{margin:0}
@media(max-width:1000px){
  .two-col{grid-template-columns:1fr;gap:34px}
  .side{position:static}
  .mini-in{grid-template-columns:1fr;gap:30px}
  .ftr-cols{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:600px){.ftr-cols{grid-template-columns:1fr}}

/* ---- Salt CRM embedded form ----
   The embed renders plain HTML into the page (no iframe) and deliberately
   ships almost no CSS of its own, so these rules are what make it look like
   the rest of the site. Class hooks come from api/embed/[token].js:
   .saltcrm-form / .saltcrm-field / .saltcrm-consent / .saltcrm-check /
   .saltcrm-group / .saltcrm-errors / .saltcrm-submit  (.saltcrm-hp is hidden
   by the embed itself and must stay hidden). */
.saltcrm-form{display:block}
.saltcrm-field{display:block;font-size:12.5px;font-weight:700;color:var(--ink);
  margin-bottom:15px;letter-spacing:.06em;text-transform:uppercase}
.saltcrm-field > span,.saltcrm-group > legend{display:block;margin-bottom:7px}
.saltcrm-form input[type=text],.saltcrm-form input[type=email],.saltcrm-form input[type=tel],
.saltcrm-form input[type=number],.saltcrm-form input[type=date],
.saltcrm-form textarea,.saltcrm-form select{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:6px;
  font:inherit;font-size:15.5px;font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--ink);background:#fff;-webkit-appearance:none;appearance:none}
.saltcrm-form textarea{resize:vertical;min-height:104px}
.saltcrm-form input:focus-visible,.saltcrm-form textarea:focus-visible,.saltcrm-form select:focus-visible{
  outline:3px solid var(--red);outline-offset:1px;border-color:var(--red)}
.saltcrm-group{border:0;padding:0;margin:0 0 15px}
.saltcrm-consent,.saltcrm-check{display:flex;gap:10px;align-items:flex-start;
  font-size:13.5px;font-weight:400;line-height:1.5;color:var(--body);
  text-transform:none;letter-spacing:0;margin-bottom:16px;cursor:pointer}
.saltcrm-consent input,.saltcrm-check input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--red)}
.saltcrm-errors{background:#FFF4F4;border:1px solid var(--red);border-radius:6px;
  padding:12px 14px;font-size:14.5px;color:var(--ink);margin:0 0 15px;
  font-weight:400;text-transform:none;letter-spacing:0}
.saltcrm-submit{display:block;width:100%;background:var(--red);color:#fff;border:0;
  border-radius:6px;padding:15px 24px;font:inherit;font-weight:700;font-size:15.5px;
  letter-spacing:.02em;cursor:pointer;transition:.2s}
.saltcrm-submit:hover{background:var(--red-2)}
.saltcrm-submit[disabled]{opacity:.65;cursor:default}
.saltcrm-done{background:#FFF4F4;border:1px solid var(--red);border-radius:6px;
  padding:18px 20px;font-size:16px;color:var(--ink)}