/* =========================================================================
   CHASTELEIN COFFEE COMPANY — chasteleincoffee.com
   -------------------------------------------------------------------------
   Colour   Brandbook v1.0 palette, exact hex values.
   Type     Esperanto (headings) / Bahnschrift (body) declared first in every
            stack, with EB Garamond / Barlow behind them. Self-host the two
            brand faces and add an @font-face block to switch them on.
   Copy     English authored in the markup; Indonesian in the I18N dictionary
            at the foot of the file, keyed by data-i18n. Header switch toggles.
   Forms    Both post to contact.php. See README.md.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root{
  /* brandbook v1.0 */
  --green:#003f2d;
  --navy:#0c1d3a;
  --burgundy:#521417;
  --gold:#b88b2a;
  --ink:#161618;

  /* working tints, derived only */
  --green-dp:#002b1e;
  --green-lt:#0a5540;
  --gold-lt:#d7ab55;
  --gold-dp:#8f6b1f;
  --paper:#f6f3ec;
  --paper-2:#ece5d8;
  --bone:#e2dccd;
  --muted:#6f6a61;
  --cream:#f7f4ee;

  --display:"Esperanto","EB Garamond",Georgia,"Times New Roman",serif;
  --body:"Bahnschrift","Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --measure:66ch;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --maxw:1240px;
  --sec:clamp(4.5rem,10vw,9rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  font-weight:400;
  line-height:1.68;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:#fff}

/* ------------------------------------------------------------ typography */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(2.55rem,5.1vw,4.5rem);line-height:1.06}
h2{font-size:clamp(1.95rem,4.1vw,3.35rem);line-height:1.12}
h3{font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.22}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
em{font-style:italic}
.lede{font-size:clamp(1.04rem,1.55vw,1.25rem);line-height:1.62;font-weight:300}
.small{font-size:.92rem;color:var(--muted)}

.eyebrow{
  font-family:var(--body);font-size:.685rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  margin:0 0 1.15rem;
}
.rule{width:52px;height:1px;background:var(--gold);margin:1.7rem 0;border:0}
.rule.center{margin-left:auto;margin-right:auto}

/* crown ornament divider */
.orn{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin:0 auto}
.orn::before,.orn::after{content:"";height:1px;width:clamp(40px,9vw,130px);background:linear-gradient(90deg,transparent,rgba(184,139,42,.55))}
.orn::after{background:linear-gradient(270deg,transparent,rgba(184,139,42,.55))}
.orn img{width:34px;height:auto;opacity:.95}

/* ---------------------------------------------------------------- layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{padding-block:var(--sec)}
.narrow{max-width:var(--measure)}
.center{text-align:center}
.center .narrow{margin-inline:auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,6vw,5.5rem);align-items:center}
.split--rev .split__art{order:-1}
.split--top{align-items:start}
@media (max-width:880px){
  .split{grid-template-columns:1fr;gap:2.6rem}
  .split--rev .split__art{order:0}
}

/* --------------------------------------------------------------- surface */
.s-green{background:var(--green);color:var(--cream)}
.s-navy{background:var(--navy);color:var(--cream)}
.s-ink{background:var(--ink);color:var(--cream)}
.s-paper2{background:var(--paper-2)}
.s-green h2,.s-green h3,.s-navy h2,.s-navy h3,.s-ink h2,.s-ink h3{color:var(--cream)}
.s-green p,.s-navy p,.s-ink p{color:rgba(247,244,238,.78)}
.s-green .eyebrow,.s-navy .eyebrow,.s-ink .eyebrow{color:var(--gold-lt)}
.s-green .small,.s-navy .small,.s-ink .small{color:rgba(247,244,238,.62)}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;gap:.65em;
  font-family:var(--body);font-size:.75rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  padding:1.1em 2.2em;border:1px solid var(--gold);color:var(--gold);
  background:transparent;cursor:pointer;
  transition:background .4s cubic-bezier(.2,.7,.2,1),color .4s,border-color .4s;
}
.btn:hover,.btn:focus-visible{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn--solid{background:var(--gold);color:var(--ink)}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--gold-lt);border-color:var(--gold-lt)}
.btn--light{color:var(--cream);border-color:rgba(247,244,238,.42)}
.btn--light:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn--dark{color:var(--green);border-color:rgba(0,63,45,.35)}
.btn--dark:hover{background:var(--green);color:var(--cream);border-color:var(--green)}
.btn .arw{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.btn:hover .arw{transform:translateX(5px)}
.btns{display:flex;flex-wrap:wrap;gap:.9rem}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------------------------------------------------------------- header */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.05rem var(--pad);
  background:linear-gradient(rgba(10,8,6,.55),rgba(10,8,6,0));
  transition:background .45s ease,box-shadow .45s ease,padding .45s ease;
}
.hdr.stuck{
  background:var(--green);
  box-shadow:0 1px 0 rgba(184,139,42,.35),0 18px 40px -32px rgba(0,0,0,.9);
  padding-block:.55rem;
}
.hdr__logo img{height:64px;width:auto;transition:height .45s ease}
.hdr.stuck .hdr__logo img{height:46px}
@media (max-width:940px){.hdr__logo img{height:50px}.hdr.stuck .hdr__logo img{height:42px}}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav a{
  font-size:.735rem;font-weight:400;letter-spacing:.19em;text-transform:uppercase;
  text-decoration:none;color:var(--cream);opacity:.88;
  position:relative;padding-block:.45rem;transition:opacity .3s;
}
.nav a:hover{opacity:1}
.nav a::after{content:"";position:absolute;left:0;bottom:.1rem;height:1px;width:0;background:var(--gold-lt);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.nav a:hover::after{width:100%}
.hdr__right{display:flex;align-items:center;gap:1.35rem}
.lang{display:flex;align-items:center;gap:.3rem;font-size:.7rem;letter-spacing:.14em}
.lang button{
  background:none;border:0;cursor:pointer;padding:.25rem .15rem;
  font:inherit;letter-spacing:inherit;color:var(--cream);opacity:.5;transition:opacity .3s,color .3s;
}
.lang button:hover{opacity:.85}
.lang button[aria-pressed="true"]{opacity:1;color:var(--gold-lt)}
.lang span{opacity:.3;color:var(--cream)}
.hdr .btn{padding:.78em 1.55em;font-size:.68rem;color:var(--gold-lt);border-color:rgba(184,139,42,.75)}
.hdr .btn:hover{background:var(--gold);color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;width:44px;height:44px}
.burger i{display:block;height:1px;width:22px;background:var(--cream);margin:6px 0;transition:transform .35s,opacity .3s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1040px){
  .nav{
    position:fixed;inset:0;flex-direction:column;justify-content:center;
    background:var(--green-dp);gap:1.7rem;
    transform:translateY(-101%);transition:transform .55s cubic-bezier(.7,0,.2,1);
  }
  .nav.open{transform:none}
  .nav a{font-size:1.05rem;letter-spacing:.16em}
  .burger{display:block;z-index:90}
  .hdr__right .btn{display:none}
}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:0 0 clamp(3.2rem,7vw,6rem);
  background:var(--ink);overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img,.hero__media video{
  width:100%;height:100%;object-fit:cover;object-position:100% 50%;
  animation:kenburns 30s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.06) translate3d(-.8%,-.8%,0)}
}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(0,20,14,.92) 0%,rgba(0,20,14,.5) 30%,rgba(10,8,6,.1) 62%,rgba(10,8,6,.42) 100%),
    linear-gradient(to left,rgba(0,26,18,.74) 0%,rgba(0,26,18,.22) 40%,transparent 72%);
}
.hero .wrap{width:100%;position:relative}
.hero h1{color:var(--cream);max-width:23ch;text-wrap:balance;text-shadow:0 2px 30px rgba(0,16,11,.55)}
.hero h1 em{color:var(--gold-lt);font-style:italic}
.hero__sub{
  color:rgba(247,244,238,.85);font-size:clamp(1.02rem,1.65vw,1.28rem);
  max-width:52ch;margin:1.5rem 0 2.5rem;font-weight:300;text-shadow:0 2px 22px rgba(0,16,11,.6);
}
.scrollcue{
  position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);
  color:rgba(247,244,238,.5);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  display:flex;flex-direction:column-reverse;align-items:center;gap:.7rem;
}
.scrollcue i{display:block;width:1px;height:42px;background:linear-gradient(rgba(184,139,42,0),var(--gold-lt));animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);transform-origin:top;opacity:.35}50%{transform:scaleY(1);opacity:1}}
@media (max-width:860px){
  .scrollcue{display:none}
  .hero{padding-bottom:4.5rem}
  .hero__media img{object-position:50% 45%}
  .hero__scrim{background:
    linear-gradient(to top,rgba(0,20,14,.97) 0%,rgba(0,20,14,.9) 30%,rgba(0,20,14,.5) 58%,rgba(10,8,6,.45) 100%)}
}
@media (prefers-reduced-motion:reduce){.hero__media img,.scrollcue i{animation:none}}

/* ----------------------------------------------------------- intro block */
.intro p{
  font-family:var(--display);font-size:clamp(1.35rem,2.5vw,2rem);
  line-height:1.44;font-weight:400;color:var(--green);
}
.intro p+p{color:var(--muted)}

/* --------------------------------------------------------------- figures */
.fig{position:relative;overflow:hidden;background:var(--bone)}
.fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.fig:hover img{transform:scale(1)}
.fig--tall{aspect-ratio:4/5}
.fig--wide{aspect-ratio:16/10}
.fig--sq{aspect-ratio:1/1}
.fig--frame{outline:1px solid rgba(184,139,42,.35);outline-offset:10px}

/* --------------------------------------------------------- key facts bar */
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(247,244,238,.16);border:1px solid rgba(247,244,238,.16);margin-top:2.8rem}
@media (max-width:620px){.keys{grid-template-columns:repeat(2,1fr)}}
.key{background:var(--green);padding:1.35rem 1.1rem;text-align:center}
.key b{display:block;font-family:var(--display);font-size:1.6rem;color:var(--gold-lt);line-height:1.1}
.key span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,244,238,.6)}

/* ---------------------------------------------------------- coffee cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.4vw,2.1rem);margin-top:3.6rem}
@media (max-width:940px){.cards{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.card{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid rgba(22,22,24,.1);
  transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s,border-color .6s;
}
.card:hover{transform:translateY(-7px);box-shadow:0 30px 60px -34px rgba(22,22,24,.55);border-color:rgba(184,139,42,.55)}
.card__img{aspect-ratio:1/1;overflow:hidden;background:var(--ink);position:relative}
.card__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__img img{transform:scale(1.09)}
.card__bar{height:4px;background:var(--c,var(--gold))}
.card__body{padding:1.9rem 1.7rem 2rem;display:flex;flex-direction:column;flex:1}
.card__origin{font-size:.61rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:.65rem}
.card h3{margin-bottom:.75rem;color:var(--c,var(--ink))}
.card p{font-size:.93rem;color:#4c4740}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 1.5rem}
.tag{font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;padding:.45em .85em;border:1px solid rgba(22,22,24,.16);color:var(--muted)}
.spec{margin-top:auto;border-top:1px solid rgba(22,22,24,.1);padding-top:1.25rem;display:grid;gap:.6rem}
.spec__row{display:grid;grid-template-columns:6.4rem 1fr;align-items:center;gap:.8rem;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.spec__row b{font-weight:500;color:#3c3831;letter-spacing:.08em}
.blank{display:block;height:1px;border-bottom:1px dashed rgba(22,22,24,.34);width:100%;max-width:130px}
.bars{display:flex;gap:4px}
.bars i{flex:1;height:3px;background:rgba(22,22,24,.14)}
.bars i.on{background:var(--c,var(--gold))}

/* ----------------------------------------------------------------- steps */
.brewband__note{text-align:center;font-family:var(--display);font-size:clamp(1.35rem,2.9vw,2rem);color:var(--gold-lt);letter-spacing:.02em;margin:clamp(2.8rem,6vw,4rem) 0 clamp(2.4rem,5vw,3.4rem)}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1.4rem,3vw,2.8rem);margin:0 auto;max-width:1100px;list-style:none;padding:0}
@media (max-width:940px){.steps{grid-template-columns:repeat(3,1fr);row-gap:2.6rem}}
@media (max-width:600px){.steps{grid-template-columns:repeat(2,1fr)}}
.step{position:relative;text-align:center}
.step__ico{display:block;width:clamp(82px,10vw,124px);height:auto;margin:0 auto clamp(1.1rem,2.4vw,1.7rem)}
.step__ico *{fill:none;stroke:var(--gold-lt);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.15s cubic-bezier(.35,0,.2,1)}
.step.in .step__ico *{stroke-dashoffset:0}
.step__ico>*:nth-child(1){transition-delay:.04s}
.step__ico>*:nth-child(2){transition-delay:.16s}
.step__ico>*:nth-child(3){transition-delay:.28s}
.step__ico>*:nth-child(4){transition-delay:.40s}
.step__ico>*:nth-child(5){transition-delay:.52s}
.step__ico>*:nth-child(6){transition-delay:.64s}
.step__ico>*:nth-child(7){transition-delay:.76s}
.step .drop,.step .steam{transform-box:fill-box;transform-origin:center}
.step.in .drop{animation:drip 2.4s 1.5s infinite cubic-bezier(.5,0,.9,.5)}
@keyframes drip{0%,8%{transform:translateY(0);opacity:1}44%{transform:translateY(9px);opacity:0}54%{transform:translateY(0);opacity:0}66%,100%{transform:translateY(0);opacity:1}}
.step.in .steam{animation:steamrise 3.6s 1.6s infinite ease-in-out}
.step.in .steam:nth-of-type(even){animation-delay:2.1s}
@keyframes steamrise{0%,100%{opacity:.28;transform:translateY(1px)}50%{opacity:.95;transform:translateY(-2.5px)}}
.step h4{font-family:var(--display);font-size:clamp(.95rem,1.7vw,1.15rem);font-weight:400;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-lt);margin-bottom:.5rem}
.step h4::before{counter-increment:s;content:counter(s) ". "}
.step p{font-size:.88rem;line-height:1.55;margin:0 auto;max-width:22ch;color:rgba(247,244,238,.6)}
@media (prefers-reduced-motion:reduce){
  .step__ico *{stroke-dashoffset:0;transition:none}
  .step.in .drop,.step.in .steam{animation:none}
}
.tips{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:3.2rem;border-top:1px solid rgba(22,22,24,.14);padding-top:2rem}
@media (max-width:820px){.tips{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.tips{grid-template-columns:1fr}}
.tips div{font-size:.88rem;color:#4c4740}
.tips b{display:block;font-family:var(--body);font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:.4rem}

/* ------------------------------------------------------------ pull quote */
.pull{
  font-family:var(--display);font-size:clamp(1.55rem,3.4vw,2.6rem);
  line-height:1.3;font-weight:400;font-style:italic;color:var(--gold-lt);max-width:20ch;margin:0;
}
.pull--dark{color:var(--green)}
.cite{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,244,238,.55);margin-top:1.6rem}

/* --------------------------------------------------------- business grid */
.segs{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(247,244,238,.16);margin-top:3.4rem;border:1px solid rgba(247,244,238,.16)}
@media (max-width:1000px){.segs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.segs{grid-template-columns:1fr}}
.seg{background:var(--navy);padding:2.1rem 1.5rem;transition:background .45s}
.seg:hover{background:#14294a}
.seg svg{margin-bottom:1.15rem}
.seg h4{font-family:var(--display);font-size:1.2rem;margin-bottom:.55rem;color:var(--cream)}
.seg p{font-size:.87rem;margin:0}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3.4rem;padding-top:2.5rem;border-top:1px solid rgba(247,244,238,.16)}
.facts--half{grid-template-columns:repeat(2,1fr);gap:1.8rem 2rem;margin-top:0;padding-top:0;border-top:0}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact b{display:block;font-family:var(--display);font-size:1.9rem;color:var(--gold-lt);line-height:1.1}
.fact .blank{border-color:rgba(215,171,85,.5);max-width:96px;margin:1.15rem 0 .55rem}
.fact span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,238,.6)}

/* ----------------------------------------------------------- proof strip */
.proof{border-block:1px solid rgba(22,22,24,.12);padding-block:2.8rem;background:var(--paper)}
.proof__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(2rem,6vw,5rem)}
.proof__ph{
  width:130px;height:40px;border:1px dashed rgba(22,22,24,.28);
  display:grid;place-items:center;font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(22,22,24,.42);
}

/* --------------------------------------------------------------- journal */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-top:3.4rem}
@media (max-width:940px){.posts{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.post{text-decoration:none;display:block}
.post .fig{aspect-ratio:4/3}
.post__cat{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dp);margin:1.3rem 0 .55rem}
.post h3{font-size:1.3rem;margin-bottom:.5rem;transition:color .35s}
.post:hover h3{color:var(--green)}
.post p{font-size:.9rem;color:var(--muted);margin:0}
.post__date{font-size:.68rem;letter-spacing:.12em;color:var(--muted);margin-top:.9rem;text-transform:uppercase}

/* ------------------------------------------------------------ newsletter */
.news{background:var(--ink);color:var(--cream);padding-block:clamp(3rem,6vw,4.6rem)}
.news h2{color:var(--cream)}
.news .eyebrow{color:var(--gold-lt)}
.news .small{color:rgba(247,244,238,.62)}
.news .split{align-items:center}
.news form{display:flex;gap:1rem;max-width:520px}
@media (max-width:560px){.news form{flex-direction:column}}
.news input{flex:1;background:transparent;border:0;border-bottom:1px solid rgba(247,244,238,.32);color:var(--cream);font:inherit;font-size:.95rem;padding:.85rem .2rem}
.news input::placeholder{color:rgba(247,244,238,.4)}
.news input:focus{outline:0;border-color:var(--gold)}

/* ------------------------------------------------------------------ form */
.field{display:grid;gap:.45rem;margin-bottom:1.15rem}
.field label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,244,238,.6)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.95rem;color:var(--cream);
  background:transparent;border:0;border-bottom:1px solid rgba(247,244,238,.3);
  padding:.72rem .2rem;border-radius:0;transition:border-color .35s;
}
.field select option{color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--gold)}
.field textarea{resize:vertical;min-height:108px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (max-width:640px){.row2{grid-template-columns:1fr}}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.79rem;color:rgba(247,244,238,.66);margin:1rem 0 1.6rem;line-height:1.5}
.consent input{margin-top:.28rem;accent-color:var(--gold)}
.cond{display:none}
.cond.show{display:block}
.formnote{font-size:.8rem;color:var(--gold-lt);min-height:1.3em;margin-top:1rem}
.deets{display:grid;gap:1.6rem;margin-top:2.6rem}
.deet b{display:block;font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:.3rem;font-weight:500}
.deet a{text-decoration:none;border-bottom:1px solid rgba(184,139,42,.45);padding-bottom:2px;transition:border-color .3s}
.deet a:hover{border-color:var(--gold-lt)}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--ink);color:rgba(247,244,238,.6);padding-block:clamp(3.2rem,6vw,5rem) 2rem;font-size:.86rem;border-top:1px solid rgba(184,139,42,.22)}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.6rem}
@media (max-width:900px){.ftr__top{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.ftr__top{grid-template-columns:1fr}}
.ftr__logo{height:84px;width:auto;margin-bottom:1.4rem}
.ftr h5{font-family:var(--body);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);margin:0 0 1.1rem;font-weight:500}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.ftr a{text-decoration:none;transition:color .3s}
.ftr a:hover{color:var(--gold-lt)}
.ftr__bot{margin-top:3.4rem;padding-top:1.7rem;border-top:1px solid rgba(247,244,238,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.75rem;color:rgba(247,244,238,.42)}
.social{display:flex;gap:.8rem;margin-top:1.3rem}
.social a{width:36px;height:36px;border:1px solid rgba(247,244,238,.22);display:grid;place-items:center;transition:border-color .35s,background .35s}
.social a:hover{border-color:var(--gold);background:rgba(184,139,42,.16)}

/* ------------------------------------------------------------ reveal + a11y */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.fig img{transition:none}}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:.8rem 1.2rem;z-index:200}
.skip:focus{left:1rem;top:1rem}

/* ------------------------------------------------- hero art direction (v3) */
.hero__media picture{display:block;width:100%;height:100%}
.hero .eyebrow{color:var(--gold-lt)}
@media (min-width:861px){
  .hero .wrap{display:flex;justify-content:flex-end}
  .hero__copy{width:min(600px,50%)}
  .hero h1{font-size:clamp(2.4rem,3.9vw,3.5rem)}
  .scrollcue{left:var(--pad);transform:none}
}

/* ------------------------------------------------ full-width photo banner */
.fig--banner{aspect-ratio:16/9}
@media (max-width:640px){.fig--banner{aspect-ratio:4/3}}

/* ------------------------------------------------------------ buy on Shopee */
.buy{margin-top:clamp(2.8rem,6vw,4.2rem);text-align:center}
.buy .btn--buy{gap:.7em}
.buy .shop-ico{width:18px;height:18px;flex:none}
.buy__note{margin:1.1rem auto 0;max-width:48ch;font-size:.88rem;color:var(--muted)}

/* --------------------------------------------------------------- WhatsApp */
.wa-ico{flex:none}
.btn--wa{background:rgba(247,244,238,.05);border-color:rgba(184,139,42,.6);color:var(--gold-lt)}
.btn--wa:hover,.btn--wa:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn--wa .wa-ico{width:17px;height:17px;fill:currentColor}
.wa-note{margin:1.1rem 0 0;font-size:.82rem;color:rgba(247,244,238,.6)}
.deet__who{display:block;margin-top:.3rem;font-size:.75rem;color:rgba(247,244,238,.55);letter-spacing:.02em}

.wa-float{
  position:fixed;right:clamp(1rem,2.4vw,1.7rem);bottom:clamp(1rem,2.4vw,1.7rem);z-index:90;
  display:inline-flex;align-items:center;gap:.65rem;
  height:56px;padding:0 20px 0 17px;
  background:var(--green);color:var(--cream);text-decoration:none;
  border:1px solid rgba(184,139,42,.5);border-radius:999px;
  box-shadow:0 16px 36px -14px rgba(0,0,0,.65);
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}
.wa-float:hover,.wa-float:focus-visible{background:var(--green-lt);border-color:var(--gold);transform:translateY(-2px)}
.wa-float .wa-ico{width:25px;height:25px;fill:var(--gold-lt)}
.wa-float__label{font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
@media (max-width:700px){
  .wa-float{height:52px;padding:0 15px;gap:0}
  .wa-float__label{display:none}
}
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}}
@media (min-width:701px){.ftr__bot{padding-right:200px}}

/* --------------------------------------------------------------- devnotes */

/* ==========================================================================
   WordPress + Elementor compatibility layer
   Everything above this line is the original brandbook stylesheet, unchanged.
   ========================================================================== */

/* --- admin bar ----------------------------------------------------------- */
body.admin-bar .hdr{top:32px}
@media screen and (max-width:782px){body.admin-bar .hdr{top:46px}}

/* --- fixed header clearance ---------------------------------------------- */
/* The hero sits under the header on purpose. Every other page needs air. */
.ch-main{padding-top:clamp(88px,9vw,116px);min-height:40vh}
body:has(.hero) .ch-main,
body.has-hero .ch-main{padding-top:0}

/* --- Hello Elementor resets ---------------------------------------------- */
/* Hello's templates open their own <main class="site-main"> inside ours. */
.site-main{margin:0;max-width:none;padding-inline:0}

/* Archive and blog titles, in the brand voice. */
.page-header{max-width:var(--maxw);margin:0 auto clamp(2rem,4vw,3rem);padding-inline:var(--pad);text-align:center}
.page-header .entry-title,
.page-header h1{font-family:var(--display);font-weight:400;font-size:clamp(1.95rem,4.1vw,3.35rem);line-height:1.12;margin:0}

/* --- Elementor containers ------------------------------------------------ */
/* Elementor draws <div class="e-con">, not <section>, so section padding
   does not apply automatically. Add "sec" in the CSS Classes field. */
.sec{padding-block:var(--sec)}
.sec-sm{padding-block:clamp(2.6rem,6vw,4.6rem)}
.sec-none{padding-block:0}

.e-con,.elementor-section{--container-default-padding-inline:var(--pad)}
.elementor-widget:not(:last-child){margin-block-end:0}

/* Elementor's text-editor wraps paragraphs; keep the brand measure. */
.elementor-widget-text-editor{font-family:var(--body)}
.elementor-widget-text-editor p:last-child{margin-bottom:0}
.elementor-heading-title{font-family:var(--display);font-weight:400}

/* Elementor buttons, wearing the brand button. */
.elementor-button{
  font-family:var(--body);font-size:.75rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
  padding:1.1em 2.2em;border:1px solid var(--gold);color:var(--gold);
  background:transparent;border-radius:0;
  transition:background .4s cubic-bezier(.2,.7,.2,1),color .4s,border-color .4s;
}
.elementor-button:hover,.elementor-button:focus-visible{background:var(--gold);color:var(--ink)}

/* Reveal-on-scroll works on Elementor elements too — add "rv" as a CSS class. */

/* --- header extras ------------------------------------------------------- */
.cartlink{
  position:relative;display:inline-flex;align-items:center;
  color:var(--cream);text-decoration:none;opacity:.88;transition:opacity .3s,color .3s;
}
.cartlink:hover{opacity:1;color:var(--gold-lt)}
.cartlink__n{
  position:absolute;top:-6px;right:-9px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--gold);color:var(--ink);
  font-family:var(--body);font-size:.6rem;font-weight:600;letter-spacing:0;line-height:1;
}
.cartlink__n.is-empty{display:none}
@media (max-width:1040px){.hdr__right .cartlink{margin-right:.4rem}}

/* --- nav: WordPress menu markup ------------------------------------------ */
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:1.9rem}
.nav li{margin:0}
.nav .current-menu-item > a{opacity:1}
.nav .current-menu-item > a::after{width:100%}
@media (max-width:1040px){
  .nav ul{flex-direction:column;gap:1.7rem}
}

/* --- footer: WordPress menu markup --------------------------------------- */
.ftr .menu{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.ftr .menu li{margin:0}

/* --- Elementor layout helpers -------------------------------------------- */
/* Layout comes from these classes, not from Elementor's own flex controls,
   so an imported template lands the same way on every Elementor version.
   Set every container to "Full Width" and add "wrap" for the page gutter. */
.e-con.wrap,
.e-con.split,
.e-con.cards-con{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

.e-con.split{
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.2rem,6vw,5.5rem);
  align-items:center;
}
.e-con.split--top{align-items:start}
.e-con.split > .e-con{width:auto!important;max-width:none!important;padding:0}
.e-con.split > *{min-width:0}
@media (max-width:880px){
  .e-con.split{grid-template-columns:1fr!important;gap:2.6rem}
  .e-con.split--rev > .e-con:first-child{order:2}
}

.e-con.narrow{max-width:var(--measure);margin-inline:auto}
.e-con.center{text-align:center}

/* Button variants for the Elementor button widget. Put these on the widget's
   CSS Classes field — the anchor inside picks them up. */
.btn-solid .elementor-button{background:var(--gold);color:var(--ink)}
.btn-solid .elementor-button:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--ink)}
.btn-light .elementor-button{color:var(--cream);border-color:rgba(247,244,238,.42)}
.btn-light .elementor-button:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-dark .elementor-button{color:var(--green);border-color:rgba(0,63,45,.35)}
.btn-dark .elementor-button:hover{background:var(--green);color:var(--cream);border-color:var(--green)}
.btns-row .elementor-widget-container{display:flex;flex-wrap:wrap;gap:.9rem}

/* Image widget: let the brand figure treatment apply. */
.elementor-widget-image img{display:block;width:100%}
.fig-frame .elementor-widget-container{overflow:hidden;background:var(--paper-2)}
.fig-frame img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.fig-frame:hover img{transform:scale(1.035)}
/* ==========================================================================
   Chastelein — brand styling for Elementor forms
   Scoped to the contact and newsletter sections, which sit on dark ground.
   Targets real elements rather than Elementor class names, so it survives
   Elementor updates and works with Atomic Forms, classic Pro forms, or any
   form plugin you drop into those sections.
   ========================================================================== */

/* ---------------------------------------------------------------- labels */
#contact label,
.news label {
  font-family: var(--body) !important;
  font-size: .68rem !important;
  font-weight: 400 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(247, 244, 238, .6) !important;
  display: block;
  margin-bottom: .45rem;
  line-height: 1.4;
}

/* ---------------------------------------------------------------- fields */
#contact input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
#contact select,
#contact textarea,
.news input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.news select,
.news textarea {
  font: inherit !important;
  font-size: .95rem !important;
  color: var(--cream) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(247, 244, 238, .3) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: .72rem .2rem !important;
  width: 100%;
  transition: border-color .35s;
}

#contact input:focus,
#contact select:focus,
#contact textarea:focus,
.news input:focus,
.news select:focus,
.news textarea:focus {
  outline: 0 !important;
  border-bottom-color: var(--gold) !important;
}

#contact ::placeholder,
.news ::placeholder { color: rgba(247, 244, 238, .4); opacity: 1 }

/* The dropdown list itself renders on white in most browsers. */
#contact select option,
.news select option { color: var(--ink); background: #fff }

#contact textarea,
.news textarea { resize: vertical; min-height: 108px }

/* Kill the native select chevron box, keep a subtle one of our own. */
#contact select,
.news select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(247,244,238,.55) 50%),
                    linear-gradient(135deg, rgba(247,244,238,.55) 50%, transparent 50%) !important;
  background-position: calc(100% - 12px) calc(50% + 2px), calc(100% - 7px) calc(50% + 2px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  padding-right: 28px !important;
}

/* ------------------------------------------------------------ checkboxes */
#contact input[type="checkbox"],
.news input[type="checkbox"] {
  accent-color: var(--gold);
  width: 15px; height: 15px;
  margin-top: .28rem;
  flex: none;
}

/* Consent and opt-in read as fine print, not as field labels. */
#contact input[type="checkbox"] + label,
#contact label:has(input[type="checkbox"]),
.news input[type="checkbox"] + label,
.news label:has(input[type="checkbox"]) {
  font-size: .79rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(247, 244, 238, .66) !important;
  line-height: 1.5;
  display: inline;
  margin: 0;
}

/* Elementor wraps checkbox + label in an inline <span class="elementor-field-option">.
   Make that the flex row, not the label, or the text drops below the box. */
#contact .elementor-field-option,
.news .elementor-field-option {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
#contact .elementor-field-subgroup,
.news .elementor-field-subgroup { display: grid; gap: .5rem }

#contact a,
.news a { color: var(--gold-lt) }

/* ---------------------------------------------------------------- button */
#contact button[type="submit"],
#contact input[type="submit"],
#contact .elementor-button,
.news button[type="submit"],
.news input[type="submit"],
.news .elementor-button {
  display: inline-flex; align-items: center; gap: .65em;
  font-family: var(--body) !important;
  font-size: .75rem !important;
  font-weight: 500 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  padding: 1.1em 2.2em !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  background: var(--gold) !important;
  color: var(--ink) !important;
  width: auto !important;
  cursor: pointer;
  transition: background .4s cubic-bezier(.2,.7,.2,1), border-color .4s, color .4s;
}

#contact button[type="submit"]:hover,
#contact input[type="submit"]:hover,
#contact .elementor-button:hover,
.news button[type="submit"]:hover,
.news input[type="submit"]:hover,
.news .elementor-button:hover {
  background: var(--gold-lt) !important;
  border-color: var(--gold-lt) !important;
  color: var(--ink) !important;
}

/* --------------------------------------------------------------- spacing */
/* Elementor wraps each field; give them the original vertical rhythm. */
#contact .elementor-field-group,
#contact [class*="field-group"],
#contact [class*="form-field"],
.news .elementor-field-group,
.news [class*="field-group"],
.news [class*="form-field"] { margin-bottom: 1.15rem }

/* Two-up rows, as the original had for Name/Email and the business fields. */
#contact .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem }
@media (max-width: 640px) { #contact .row2 { grid-template-columns: 1fr } }

/* Newsletter block sits inline on one line, as before. */
.news form { display: flex; gap: 1rem; max-width: 520px; align-items: flex-end; flex-wrap: wrap }
.news form > * { flex: 1 1 auto }
.news button[type="submit"], .news input[type="submit"] { flex: 0 0 auto }
@media (max-width: 560px) { .news form { flex-direction: column; align-items: stretch } }

/* ------------------------------------------------------- success / error */
#contact [class*="message-success"],
.news [class*="message-success"] { color: var(--gold-lt) !important; font-size: .85rem }
#contact [class*="message-error"],
#contact [class*="field-required"],
.news [class*="message-error"] { color: #e2a0a2 !important; font-size: .85rem }

/* ==========================================================================
   Fixes — v1.1.0
   ========================================================================== */

/* --- nav list markers ---------------------------------------------------- */
/* The menu renders as <li> elements; without list-style they show as bullets. */
.nav ul,
.nav ol,
.nav__list{list-style:none!important;margin:0;padding:0;display:flex;align-items:center;gap:1.9rem}
.nav li{list-style:none!important;margin:0}
.nav li::marker{content:none}
@media (max-width:1040px){
  .nav ul,.nav__list{flex-direction:column;gap:1.7rem}
}

/* --- button text colour -------------------------------------------------- */
/* Elementor emits its global link colour as `.elementor-kit-N a {...}`, which
   outranks a plain `.btn--solid`. Result: gold text on a gold button, legible
   only on hover. These :link/:visited forms win the specificity fight. */
.btn:link,.btn:visited{color:var(--gold)}
.btn--solid:link,.btn--solid:visited{color:var(--ink)}
.btn--light:link,.btn--light:visited{color:var(--cream)}
.btn--dark:link,.btn--dark:visited{color:var(--green)}
.btn--wa:link,.btn--wa:visited{color:var(--gold-lt)}
.hdr .btn:link,.hdr .btn:visited{color:var(--gold-lt)}

.btn:hover,.btn:focus-visible,
.btn--solid:hover,.btn--solid:focus-visible{color:var(--ink)}
.btn--light:hover,.btn--light:focus-visible{color:var(--ink)}
.btn--dark:hover,.btn--dark:focus-visible{color:var(--cream)}
.hdr .btn:hover,.hdr .btn:focus-visible{color:var(--ink)}

/* Same protection for the other places the kit's link colour would bleed in. */
.nav a:link,.nav a:visited{color:var(--cream)}
.ftr a:link,.ftr a:visited{color:inherit}
.post:link,.post:visited{color:inherit}
.s-green .deet a:link,.s-navy .deet a:link,.s-ink .deet a:link{color:inherit}