/* ===========================================================
   CERAMIC STORY
   Built from the client's approved single-page design.

   Every class carries a cs- prefix. base/assets/css/app.css is a
   7,700-line stylesheet loaded before this one, and the design's own
   names (.card, .btn, .form, .nav, .logo, .info) all collide with it —
   unprefixed, base reaches into this markup and rewrites it.
   =========================================================== */
/* ===========================================================
   CERAMIC STORY — brand tokens
   --ember sampled from the CS logo mark
   =========================================================== */
:root{
  --ember:#D15613;
  --ember-deep:#A8410C;
  --ember-tint:#F7E8DF;
  --ink:#574B44;
  --ink-soft:#7D726B;
  --cream:#FCFAF7;
  --linen:#F4EFEB;
  --stone:#E1D9D2;

  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Jost",system-ui,-apple-system,sans-serif;

  --gut:clamp(20px,5vw,56px);
  --maxw:1200px;

  --s-1:clamp(1.152rem,1.12rem + .1vw,1.248rem);
  --s0:clamp(1.52rem,1.472rem + .2vw,1.632rem);
  --s1:clamp(1.76rem,1.6rem + .4vw,2rem);
  --s2:clamp(1.6rem,1.3rem + 1.2vw,2.3rem);
  --s3:clamp(2.1rem,1.6rem + 2.2vw,3.4rem);
  --s4:clamp(2.6rem,1.8rem + 4vw,5rem);
}
.cs-page *, .cs-page *::before, .cs-page *::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
.cs-page section[id], .cs-page div[id]{scroll-margin-top:86px}
body.cs-page{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:var(--s0);font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased}
.cs-page img{display:block;max-width:100%}
.cs-page a{color:inherit}
.cs-page button{font:inherit;color:inherit}
.cs-page :focus-visible{outline:2px solid var(--ember);outline-offset:3px}

.cs-page .cs-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.cs-page h1, .cs-page h2, .cs-page h3{font-family:var(--display);font-weight:500;line-height:1.08;margin:0;letter-spacing:.005em}
.cs-page h1{font-size:var(--s4)}
.cs-page h2{font-size:var(--s3)}
.cs-page h3{font-size:var(--s1);font-family:var(--body);font-weight:500;letter-spacing:.01em;line-height:1.35}
.cs-page p{margin:0 0 1.6rem}
.cs-page .cs-lede{font-size:var(--s1);color:var(--ink-soft);font-weight:300;max-width:56ch}

.cs-page .cs-eyebrow{
  font-size:var(--s-1);letter-spacing:.3em;text-transform:uppercase;
  color:var(--ember);font-weight:500;margin:0 0 1.6rem;
  display:flex;align-items:center;gap:1.44rem;
}
.cs-page .cs-eyebrow::after{content:"";flex:1;height:1px;background:var(--stone);max-width:80px}
.cs-page .cs-eyebrow--c{justify-content:center}
.cs-page .cs-eyebrow--c::before{content:"";flex:1;height:1px;background:var(--stone);max-width:80px}

.cs-page .cs-center{text-align:center}
.cs-page .cs-center .cs-lede{margin-inline:auto}

/* ---------- buttons ---------- */
.cs-page .cs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.8rem;
  padding:1.52rem 3.04rem;background:var(--ember);color:#fff;border:1px solid var(--ember);
  font-size:var(--s-1);letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  text-decoration:none;cursor:pointer;transition:.22s ease;
}
.cs-page .cs-btn:hover{background:var(--ember-deep);border-color:var(--ember-deep)}
.cs-page .cs-btn--out{background:transparent;color:var(--ink);border-color:var(--ink)}
.cs-page .cs-btn--out:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.cs-page .cs-btn--onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.cs-page .cs-btn--onDark:hover{background:#fff;color:var(--ink);border-color:#fff}
.cs-page .cs-cta-row{display:flex;flex-wrap:wrap;gap:1.28rem;margin-top:3.2rem}
.cs-page .cs-center .cs-cta-row{justify-content:center}

/* ===========================================================
   IMAGE SLOTS — drop a file at the src path and it replaces
   the labelled placeholder automatically.
   =========================================================== */
.cs-page .cs-ph{position:relative;margin:0;overflow:hidden;background:var(--linen)}
.cs-page .cs-ph::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--stone) 1px,transparent 1px),linear-gradient(90deg,var(--stone) 1px,transparent 1px);
  background-size:44px 44px;opacity:.55;
}
.cs-page .cs-ph::after{
  content:attr(data-label);position:absolute;inset:auto 8% 12% 8%;
  font-size:var(--s-1);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.7;
}
.cs-page .cs-ph img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover}
.cs-page .cs-ph.cs-is-empty img{display:none}

/* ===========================================================
   HEADER
   =========================================================== */
.cs-page .cs-util{background:var(--ink);color:#E0D8D1;font-size:var(--s-1);letter-spacing:.1em}
.cs-page .cs-util__in{display:flex;justify-content:space-between;align-items:center;gap:1.6rem;padding:0.96rem 0;flex-wrap:wrap}
.cs-page .cs-util a{text-decoration:none}
.cs-page .cs-util a:hover{color:#fff}
.cs-page .cs-util__tag{color:#fff;letter-spacing:.26em;text-transform:uppercase;font-size:1.056rem}
@media(max-width:700px){.cs-page .cs-util__links{display:none}}

.cs-page .cs-hdr{position:sticky;top:0;z-index:80;background:var(--cream);border-bottom:1px solid var(--stone);transition:box-shadow .2s}
.cs-page .cs-hdr.cs-stuck{box-shadow:0 8px 26px rgba(32,25,21,.08)}
.cs-page .cs-hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;height:74px}
.cs-page .cs-logo{display:flex;align-items:center;gap:1.2rem;text-decoration:none}
.cs-page .cs-logo__mark{height:38px;width:auto;flex:none;display:block}
.cs-page .cs-logo__txt{line-height:1}
.cs-page .cs-logo__name{font-family:var(--body);font-weight:400;font-size:2.144rem;letter-spacing:-.005em;display:block;color:#2F2E2A}
.cs-page .cs-logo__sub{font-size:0.864rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ember);display:block;margin-top:4px}
.cs-page .cs-hdr__right{display:flex;align-items:center;gap:1.28rem}

.cs-page .cs-nav{display:flex;align-items:center;gap:3.04rem}
.cs-page .cs-nav a{font-size:1.12rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink);position:relative;padding:0.48rem 0}
.cs-page .cs-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ember);transition:width .25s}
.cs-page .cs-nav a:hover{color:var(--ember)}
.cs-page .cs-nav a:hover::after{width:100%}

.cs-page .cs-burger{display:none;width:42px;height:38px;border:1px solid var(--stone);background:transparent;border-radius:3px;cursor:pointer;padding:0;position:relative}
.cs-page .cs-burger span{position:absolute;left:11px;width:20px;height:1.5px;background:var(--ink);transition:transform .25s,opacity .2s}
.cs-page .cs-burger span:nth-child(1){top:13px}
.cs-page .cs-burger span:nth-child(2){top:18px}
.cs-page .cs-burger span:nth-child(3){top:23px}
.cs-page .cs-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.cs-page .cs-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.cs-page .cs-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media(max-width:1040px){.cs-page .cs-nav{gap:1.92rem}.cs-page .cs-nav a{font-size:1.024rem;letter-spacing:.12em}
}
@media(max-width:960px){.cs-page .cs-hdr__cta{padding:1.12rem 1.76rem;font-size:0.992rem;letter-spacing:.12em}.cs-page .cs-burger{display:block}.cs-page .cs-nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
       background:var(--cream);border-bottom:1px solid var(--stone);
       box-shadow:0 14px 30px rgba(32,25,21,.10);
       max-height:0;overflow:hidden;transition:max-height .3s ease}.cs-page .cs-nav.cs-is-open{max-height:340px}.cs-page .cs-nav a{padding:1.6rem 5vw;border-bottom:1px solid var(--linen);font-size:1.152rem;letter-spacing:.14em}.cs-page .cs-nav a:last-child{border-bottom:none}.cs-page .cs-nav a::after{display:none}
}
@media(max-width:420px){.cs-page .cs-logo__sub{display:none}.cs-page .cs-hdr__cta{padding:1.04rem 1.36rem;font-size:0.928rem}
}

/* ===========================================================
   HERO
   =========================================================== */
.cs-page .cs-hero{position:relative;min-height:clamp(520px,82vh,780px);display:grid;align-items:center;overflow:hidden}
.cs-page .cs-hero .cs-ph{position:absolute;inset:0}
.cs-page .cs-hero .cs-ph::after{inset:auto 6% 6% auto;color:rgba(255,255,255,.75)}
.cs-page .cs-hero__scrim{position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,rgba(24,18,15,.82) 0%,rgba(24,18,15,.55) 48%,rgba(24,18,15,.2) 100%)}
.cs-page .cs-hero__in{position:relative;z-index:4;color:#fff;padding-block:clamp(4.8rem,8vw,8rem)}
.cs-page .cs-hero h1{max-width:14ch}
.cs-page .cs-hero h1 em{font-style:italic;color:#F3A882}
.cs-page .cs-hero__lede{font-size:var(--s1);color:#EFE9E4;max-width:44ch;margin-top:2.4rem;font-weight:300}
.cs-page .cs-hero .cs-eyebrow{color:#F3A882}
.cs-page .cs-hero .cs-eyebrow::after{background:rgba(255,255,255,.35)}

/* ---------- trust strip ---------- */
.cs-page .cs-strip{background:var(--ink);color:#E0D8D1}
.cs-page .cs-strip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14)}
.cs-page .cs-strip__i{background:var(--ink);padding:2.4rem 1.92rem;text-align:center}
.cs-page .cs-strip__i b{display:block;font-family:var(--display);font-size:var(--s2);color:#fff;font-weight:500;line-height:1}
.cs-page .cs-strip__i span{font-size:var(--s-1);letter-spacing:.16em;text-transform:uppercase;margin-top:0.8rem;display:block}
@media(max-width:760px){.cs-page .cs-strip__in{grid-template-columns:repeat(2,1fr)}}

/* ===========================================================
   SECTIONS
   =========================================================== */
.cs-page .cs-sec{padding-block:clamp(5.6rem,8vw,10.4rem)}
.cs-page .cs-sec--linen{background:var(--linen)}
.cs-page .cs-sec--ink{background:var(--ink);color:#E8E1DB}
.cs-page .cs-sec--ink h2{color:#fff}
.cs-page .cs-sec--ink .cs-lede{color:#E3DBD5}
.cs-page .cs-sec--ink .cs-eyebrow{color:#F3A882}
.cs-page .cs-sec--ink .cs-eyebrow::after, .cs-page .cs-sec--ink .cs-eyebrow::before{background:rgba(255,255,255,.28)}
.cs-page .cs-sec__head{margin-bottom:clamp(3.2rem,5vw,5.12rem)}

.cs-page .cs-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3.2rem,5vw,7.2rem);align-items:center}
.cs-page .cs-split--rev .cs-split__img{order:-1}
@media(max-width:880px){.cs-page .cs-split{grid-template-columns:1fr}.cs-page .cs-split--rev .cs-split__img{order:0}}
.cs-page .cs-split__img{aspect-ratio:4/5}
.cs-page .cs-split__img.cs-wide{aspect-ratio:5/4}
/* Matches the photo's own ratio, so the whole frame is shown with no crop
   and no empty letterbox bands. contain is belt-and-braces: even if the
   asset is swapped for one of a different shape, nothing gets cut off. */
.cs-page .cs-split__img.cs-whole{aspect-ratio:736/778;background:var(--linen)}
.cs-page .cs-split__img.cs-whole img{object-fit:contain}

.cs-page .cs-pull{
  font-family:var(--display);font-size:var(--s2);color:var(--ember);
  line-height:1.25;margin:2.88rem 0 0;max-width:24ch;
}

/* ---------- offer grid ---------- */
.cs-page .cs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
@media(max-width:900px){.cs-page .cs-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cs-page .cs-cards{grid-template-columns:1fr}}
.cs-page .cs-card{background:var(--cream);border:1px solid var(--stone);display:flex;flex-direction:column;text-decoration:none;transition:.25s ease}
.cs-page .cs-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(32,25,21,.1);border-color:var(--ember)}
.cs-page .cs-card .cs-ph{aspect-ratio:3/2}
.cs-page .cs-card__b{padding:2.24rem 2.24rem 2.56rem;flex:1;display:flex;flex-direction:column}
.cs-page .cs-card__b p{color:var(--ink-soft);font-size:1.504rem;margin:0.88rem 0 1.76rem}
.cs-page .cs-card__link{margin-top:auto;font-size:var(--s-1);letter-spacing:.18em;text-transform:uppercase;color:var(--ember);font-weight:500}

/* ---------- brands ---------- */
.cs-page .cs-brandset{margin-bottom:4.64rem}
.cs-page .cs-brandset__t{font-size:var(--s-1);letter-spacing:.26em;text-transform:uppercase;color:var(--ember);text-align:center;margin:0 0 0.64rem;
  display:flex;align-items:center;gap:1.6rem;justify-content:center}
.cs-page .cs-brandset__t::before, .cs-page .cs-brandset__t::after{content:"";height:1px;background:var(--ember);opacity:.55;flex:1 1 auto;max-width:150px}
.cs-page .cs-brandset__t + .cs-brandgrid{margin-top:2.4rem}

.cs-page .cs-brandgrid{display:flex;flex-wrap:wrap;gap:1px;background:var(--stone);border:1px solid var(--stone)}
/* the imported set has 9 logos - a 3-up basis divides evenly at every
   width, so no row is ever left with a single stretched tile */
.cs-page .cs-brandgrid--3 .cs-brandlogo{flex:1 1 31%}
.cs-page .cs-brandlogo{
  background:var(--cream);display:flex;align-items:center;justify-content:center;
  padding:2.4rem 1.92rem;min-height:104px;
  flex:1 1 190px;
}
.cs-page .cs-sec--linen .cs-brandlogo{background:var(--linen)}
.cs-page .cs-brandlogo img, .cs-page .cs-brandlogo svg{max-width:82%;max-height:52px;width:auto;height:auto;display:block;
  transition:transform .3s ease}
.cs-page .cs-brandlogo:hover img, .cs-page .cs-brandlogo:hover svg{transform:scale(1.04)}
/* fallback to the brand name if a logo file is missing */
.cs-page .cs-brandlogo__txt{display:none;font-size:1.312rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);text-align:center}
.cs-page .cs-brandlogo.cs-is-missing img{display:none}
.cs-page .cs-brandlogo.cs-is-missing .cs-brandlogo__txt{display:block}

.cs-page .cs-brandsep{display:flex;align-items:center;justify-content:center;gap:1.6rem;margin:0 0 4.64rem}
.cs-page .cs-brandsep::before, .cs-page .cs-brandsep::after{content:"";height:1px;background:var(--ember);opacity:.45;flex:1 1 auto;max-width:290px}
.cs-page .cs-brandsep i{width:9px;height:9px;background:var(--ember);transform:rotate(45deg);display:block}

@media(max-width:760px){.cs-page .cs-brandlogo{flex:1 1 150px;padding:2rem 1.6rem;min-height:94px}.cs-page .cs-brandlogo img, .cs-page .cs-brandlogo svg{max-height:44px}.cs-page .cs-brandsep::before, .cs-page .cs-brandsep::after{max-width:110px}
}
@media(max-width:560px){.cs-page .cs-brandset{margin-bottom:3.52rem}.cs-page .cs-brandlogo{flex:1 1 40%;padding:1.76rem 1.28rem;min-height:84px}.cs-page .cs-brandgrid--3 .cs-brandlogo{flex:1 1 40%}.cs-page .cs-brandlogo img, .cs-page .cs-brandlogo svg{max-height:38px}.cs-page .cs-brandset__t{font-size:0.96rem;letter-spacing:.18em}.cs-page .cs-brandset__t::before, .cs-page .cs-brandset__t::after{max-width:30px}.cs-page .cs-brandsep{margin-bottom:3.52rem}.cs-page .cs-brandsep::before, .cs-page .cs-brandsep::after{max-width:70px}
}
@media(max-width:380px){.cs-page .cs-brandlogo{padding:1.44rem 0.96rem;min-height:76px}.cs-page .cs-brandlogo img, .cs-page .cs-brandlogo svg{max-height:34px}
}

/* ---------- amenities ---------- */
.cs-page .cs-amen{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--stone);border:1px solid var(--stone);margin-top:3.2rem}
.cs-page .cs-amen__i{background:var(--cream);padding:1.76rem 1.92rem;display:flex;gap:1.36rem;align-items:flex-start;font-size:1.52rem;line-height:1.45}
.cs-page .cs-amen__i b{display:block;font-weight:500}
.cs-page .cs-amen__d{width:9px;height:9px;background:var(--ember);flex:none;margin-top:0.8rem;border-radius:1px}
@media(max-width:560px){.cs-page .cs-amen{grid-template-columns:1fr}}

/* ---------- audience ---------- */
.cs-page .cs-aud{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
@media(max-width:820px){.cs-page .cs-aud{grid-template-columns:repeat(2,1fr)}}
.cs-page .cs-aud__i{border-top:2px solid var(--ember);padding-top:1.76rem}
.cs-page .cs-aud__i p{color:inherit;opacity:.85;font-size:1.504rem;margin:0.8rem 0 0}

/* ---------- quote band ---------- */
.cs-page .cs-band{background:var(--ember);color:#fff;text-align:center;padding-block:clamp(4.8rem,7vw,7.68rem)}
.cs-page .cs-band h2{color:#fff;max-width:20ch;margin-inline:auto;font-style:italic}
.cs-page .cs-band p{color:#FBE3D9;margin-top:1.76rem}

/* ---------- feedback ---------- */
.cs-page .cs-stars{display:flex;gap:0.64rem;justify-content:center;margin:1.92rem 0 0.64rem}
.cs-page .cs-star{background:none;border:0;cursor:pointer;font-size:3.2rem;line-height:1;color:var(--stone);transition:.15s;padding:0}
.cs-page .cs-star.cs-on{color:var(--ember);transform:scale(1.08)}
.cs-page .cs-fb__msg{min-height:2.56rem;font-size:var(--s-1);letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}

/* ---------- lead modal ---------- */
.cs-page .cs-lm{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:1.6rem}
.cs-page .cs-lm.cs-open{display:flex}
.cs-page .cs-lm__veil{position:absolute;inset:0;background:rgba(24,18,15,.62);backdrop-filter:blur(3px);opacity:0;transition:opacity .28s}
.cs-page .cs-lm.cs-in .cs-lm__veil{opacity:1}
.cs-page .cs-lm__box{
  position:relative;width:min(540px,100%);max-height:calc(100dvh - 3.2rem);overflow-y:auto;
  background:var(--cream);border:1px solid var(--stone);
  box-shadow:0 30px 80px rgba(24,18,15,.34);
  transform:translateY(14px) scale(.985);opacity:0;transition:transform .3s ease,opacity .3s ease;
}
.cs-page .cs-lm.cs-in .cs-lm__box{transform:none;opacity:1}
.cs-page .cs-lm__x{
  position:absolute;top:0.72rem;right:0.72rem;z-index:2;width:34px;height:34px;
  border:1px solid transparent;background:transparent;color:var(--ink-soft);
  font-size:2.16rem;line-height:1;cursor:pointer;border-radius:2px;
}
.cs-page .cs-lm__x:hover{color:var(--ember);border-color:var(--stone)}
.cs-page .cs-lm__top{padding:2.4rem 2.56rem 0;text-align:center}
.cs-page .cs-lm__top h2{font-size:clamp(2.16rem,4vw,2.8rem);margin:0.24rem 0 0.56rem;font-style:italic;line-height:1.15}
.cs-page .cs-lm__top p{color:var(--ink-soft);font-size:1.408rem;margin:0;max-width:36ch;margin-inline:auto;line-height:1.45}
.cs-page .cs-lm__body{padding:1.76rem 2.56rem 2.24rem}

/* tighter form rhythm than the page form - this has to fit one screen */
.cs-page .cs-lm .cs-form{gap:0.96rem}
.cs-page .cs-lm .cs-field{gap:0.352rem}
.cs-page .cs-lm .cs-field label{font-size:0.96rem;letter-spacing:.14em}
.cs-page .cs-lm .cs-field input, .cs-page .cs-lm .cs-field select, .cs-page .cs-lm .cs-field textarea{
  background:#fff;width:100%;padding:0.96rem 1.2rem;font-size:1.44rem;
}
.cs-page .cs-lm .cs-field textarea{resize:vertical;min-height:52px}
.cs-page .cs-lm__row{display:grid;grid-template-columns:1fr 1fr;gap:0.96rem}
.cs-page .cs-lm .cs-btn{width:100%;justify-content:center;margin-top:0.56rem;padding:1.36rem 1.6rem}
.cs-page .cs-lm__err{display:none;font-size:1.152rem;letter-spacing:.02em;color:#B3391B;margin-top:0.08rem}
.cs-page .cs-field.cs-bad .cs-lm__err{display:block}
.cs-page .cs-field.cs-bad input, .cs-page .cs-field.cs-bad select{border-color:#B3391B}
.cs-page .cs-lm__foot{
  border-top:1px solid var(--stone);padding:1.12rem 2.56rem 1.44rem;text-align:center;
  font-size:1.152rem;letter-spacing:.03em;color:var(--ink-soft);line-height:1.55;margin:0;
}
/* success view */
.cs-page .cs-lm__done{display:none;padding:3.2rem 2.56rem 2.72rem;text-align:center}
.cs-page .cs-lm.cs-done .cs-lm__top, .cs-page .cs-lm.cs-done .cs-lm__body{display:none}
.cs-page .cs-lm.cs-done .cs-lm__done{display:block}
.cs-page .cs-lm__tick{
  width:52px;height:52px;margin:0 auto 1.44rem;border-radius:50%;
  background:var(--ember-tint);color:var(--ember);
  display:flex;align-items:center;justify-content:center;font-size:2.56rem;
}
.cs-page .cs-lm__done h3{font-family:var(--display);font-size:2.48rem;margin:0 0 0.64rem;font-weight:500}
.cs-page .cs-lm__done p{color:var(--ink-soft);font-size:1.44rem;margin:0 0 1.92rem;line-height:1.5}

/* narrow phones - stack the paired fields */
@media(max-width:430px){.cs-page .cs-lm{padding:0.96rem}.cs-page .cs-lm__top{padding:2rem 1.68rem 0}.cs-page .cs-lm__body{padding:1.44rem 1.68rem 1.84rem}.cs-page .cs-lm__foot{padding-inline:1.68rem}.cs-page .cs-lm__done{padding:2.72rem 1.68rem 2.24rem}.cs-page .cs-lm__row{grid-template-columns:1fr;gap:0.96rem}
}
/* short viewports - shed the optional parts before allowing a scrollbar */
@media(max-height:720px){.cs-page .cs-lm__top{padding-top:2rem}.cs-page .cs-lm__top h2{font-size:2.08rem}.cs-page .cs-lm .cs-field textarea{min-height:44px}
}
@media(max-height:620px){.cs-page .cs-lm__top p{display:none}.cs-page .cs-lm__foot{display:none}.cs-page .cs-lm .cs-form{gap:0.8rem}.cs-page .cs-lm__top h2{font-size:1.92rem;margin-bottom:0.4rem}
}
@media(max-height:520px){.cs-page .cs-lm__note{display:none}.cs-page .cs-lm__top .cs-eyebrow{display:none}
}

/* ---------- contact ---------- */
.cs-page .cs-form{display:grid;gap:1.44rem}
.cs-page .cs-f2{display:grid;grid-template-columns:1fr 1fr;gap:1.44rem}
@media(max-width:560px){.cs-page .cs-f2{grid-template-columns:1fr}}
.cs-page .cs-field{display:grid;gap:0.56rem}
.cs-page .cs-field label{font-size:var(--s-1);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.cs-page .cs-field input, .cs-page .cs-field select, .cs-page .cs-field textarea{
  font:inherit;font-size:1.536rem;padding:1.28rem 1.44rem;background:var(--cream);
  border:1px solid var(--stone);border-radius:0;color:var(--ink);
}
.cs-page .cs-field input:focus, .cs-page .cs-field select:focus, .cs-page .cs-field textarea:focus{border-color:var(--ember);outline:none}
.cs-page .cs-ok{display:none;border-left:3px solid var(--ember);background:var(--ember-tint);padding:1.36rem 1.6rem;font-size:1.504rem}
.cs-page .cs-ok.cs-show{display:block}
/* same box, used for the failure case when an enquiry could not be sent */
.cs-page .cs-ok.cs-bad{border-left-color:var(--ink);background:var(--linen)}
.cs-page .cs-info{border:1px solid var(--stone);padding:2.56rem;background:var(--cream)}
.cs-page .cs-info dl{margin:0;display:grid;gap:1.92rem}
.cs-page .cs-info dt{font-size:var(--s-1);letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
.cs-page .cs-info dd{margin:0.48rem 0 0;line-height:1.55}
.cs-page .cs-info dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--stone)}
.cs-page .cs-info dd a:hover{border-color:var(--ember)}

/* ---------- footer ---------- */
.cs-page .cs-foot{background:var(--ink);color:#DED6CF;padding-block:4.8rem 2.56rem;font-size:1.472rem}
.cs-page .cs-foot a{color:#DED6CF;text-decoration:none}
.cs-page .cs-foot a:hover{color:#fff}
.cs-page .cs-foot__g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:3.2rem}
@media(max-width:820px){.cs-page .cs-foot__g{grid-template-columns:1fr 1fr}}
.cs-page .cs-foot h4{font-size:var(--s-1);letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 0 1.6rem;font-weight:500}
.cs-page .cs-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:0.88rem}
.cs-page .cs-foot .cs-logo__name{color:#fff}
.cs-page .cs-foot__base{margin-top:4.16rem;padding-top:1.92rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;font-size:var(--s-1);letter-spacing:.1em}

/* ---------- floating whatsapp ---------- */
.cs-page .cs-float{
  position:fixed;right:18px;bottom:18px;z-index:90;
  display:inline-flex;align-items:center;gap:0.88rem;
  background:var(--ember);color:#fff;text-decoration:none;
  padding:1.36rem 1.92rem;font-size:var(--s-1);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 26px rgba(32,25,21,.24);
}
.cs-page .cs-float:hover{background:var(--ember-deep)}
@media(max-width:520px){.cs-page .cs-float{right:12px;bottom:12px;padding:1.28rem 1.6rem}}

/* ---------- small-phone corrections ---------- */
@media(max-width:600px){.cs-page /* the horizontal scrim leaves hero text on a pale edge once the
     image is narrow, .cs-page so darken it vertically instead */
  .cs-hero__scrim{background:linear-gradient(180deg,rgba(24,18,15,.45) 0%,rgba(24,18,15,.78) 100%)}.cs-page .cs-hero h1{max-width:none}.cs-page .cs-hero__lede{max-width:none}
}
@media(max-width:480px){.cs-page .cs-foot__g{grid-template-columns:1fr;gap:3.52rem}.cs-page .cs-foot__base{flex-direction:column;gap:0.8rem}.cs-page .cs-aud{grid-template-columns:1fr}.cs-page .cs-strip__i{padding:1.84rem 1.28rem}.cs-page /* keep the floating button clear of the last footer line */
  .cs-foot{padding-bottom:8.8rem}
}

/* ---------- reveal ---------- */
.cs-page .cs-rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.cs-page .cs-rv.cs-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cs-page *, .cs-page *::before, .cs-page *::after{transition-duration:.001ms!important;animation-duration:.001ms!important}.cs-page .cs-rv{opacity:1;transform:none}
}

/* ==========================================================================
   Legibility over photography

   app.css:209 sets `color: var(--color-heading)` directly on h1-h6. The hero
   only *inherited* white from .cs-hero__in, and an inherited value always
   loses to a rule that declares the property - so the headline rendered dark
   on a dark photograph. Every light-on-dark surface states its colour.
   ========================================================================== */
.cs-page .cs-hero__in,
.cs-page .cs-hero h1, .cs-page .cs-hero h2, .cs-page .cs-hero h3,
.cs-page .cs-band h1, .cs-page .cs-band h2, .cs-page .cs-band h3,
.cs-page .cs-sec--ink h1, .cs-page .cs-sec--ink h2, .cs-page .cs-sec--ink h3,
.cs-page .cs-strip h1, .cs-page .cs-strip h2, .cs-page .cs-strip b,
.cs-page .cs-foot h1, .cs-page .cs-foot h2, .cs-page .cs-foot h3, .cs-page .cs-foot h4 {
  color: #fff;
}
.cs-page .cs-hero h1 em { color: #F3A882; }

/* the gradient alone left the middle of the headline sitting on bright glass */
.cs-page .cs-hero__scrim {
  background:
    linear-gradient(90deg, rgba(20,15,12,.90) 0%, rgba(20,15,12,.74) 42%, rgba(20,15,12,.34) 78%, rgba(20,15,12,.20) 100%),
    linear-gradient(180deg, rgba(20,15,12,.30) 0%, rgba(20,15,12,0) 40%);
}
.cs-page .cs-hero__in { text-shadow: 0 1px 24px rgba(0,0,0,.35); }
.cs-page .cs-hero__lede { color: #F1EBE6; }

/* ==========================================================================
   Toast

   app.js used to write this inline, against --secondary, --error and
   --shadow-lg. This theme defines the first two but not --shadow-lg, so the
   box-shadow was an invalid declaration and the toast floated with no edge at
   all. Worse, it was pinned bottom-right: the mini-cart drawer opens on every
   add to cart and owns that corner, so the common case was a toast sitting on
   top of the Checkout button.

   Bottom centre, on the theme's own tokens, above the drawer.
   ========================================================================== */
.cs-page .cs-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 10050;              /* above .mini-cart-drawer (1000) and its overlay */
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: .95rem;
  line-height: 1.4;
  box-shadow: 0 12px 32px rgba(20, 15, 12, .28);
  animation: cs-toast-in .28s ease both;
}

/* The mark carries "it worked"; the panel stays neutral ink so a product name
   is legible and two adds in a row do not flash the page green. */
.cs-page .cs-toast__icon { flex: 0 0 auto; }
.cs-page .cs-toast--success .cs-toast__icon { color: #6FCF8B; }
.cs-page .cs-toast--error .cs-toast__icon { color: #F0907A; }
.cs-page .cs-toast--info .cs-toast__icon { color: var(--ember-tint); }

.cs-page .cs-toast--leaving { animation: cs-toast-out .24s ease both; }

@keyframes cs-toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes cs-toast-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-page .cs-toast,
  .cs-page .cs-toast--leaving { animation-duration: .01ms; }
}