/* Pavlou Brothers | iSellHomes.com.au — core stylesheet */
:root{
  --ink:#0B0C0E; --charcoal:#111214; --charcoal-2:#17191C; --charcoal-3:#1F2226;
  --line:#2A2D33; --smoke:#C9CBD0; --mute:#8C9096; --white:#FFFFFF; --paper:#F5F5F3;
  --yellow:#FBE80F; --yellow-deep:#E2D000;
  --serif:"Cormorant Garamond",Didot,"Bodoni MT","Times New Roman",Georgia,serif;
  --sans:"Jost","Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,sans-serif;
  --wrap:1240px; --gut:clamp(20px,5vw,64px);
  --t:.45s cubic-bezier(.19,1,.22,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--charcoal);color:var(--smoke);font-family:var(--sans);font-size:16px;line-height:1.75;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--serif);color:var(--white);font-weight:300;margin:0 0 .5em;letter-spacing:.01em;line-height:1.12}
h1{font-size:clamp(2.4rem,6.2vw,4.6rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.85rem)}
h4{font-size:1.1rem;font-family:var(--sans);font-weight:500;letter-spacing:.12em;text-transform:uppercase}
p{margin:0 0 1.15em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--yellow);margin:0 0 1.1rem;font-weight:400}
.lede{font-size:clamp(1.05rem,1.7vw,1.28rem);color:#DDDFE3;font-weight:300}
.rule{width:74px;height:2px;background:var(--yellow);border:0;margin:0 0 1.6rem}
.center{text-align:center}.center .rule{margin-inline:auto}
section{padding:clamp(64px,9vw,132px) 0;position:relative}
.sec-light{background:var(--paper);color:#3A3D42}
.sec-light h1,.sec-light h2,.sec-light h3{color:var(--ink)}
.sec-light .eyebrow{color:#8A7B00}
.sec-alt{background:var(--charcoal-2)}
/* SKIP + HEADER */
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:#000;padding:12px 18px;z-index:999}
.skip:focus{left:8px;top:8px}
.site-head{position:fixed;inset:0 0 auto 0;z-index:120;transition:background var(--t),border-color var(--t),padding var(--t);border-bottom:1px solid transparent;padding:18px 0}
.site-head.is-stuck,.site-head.is-open{background:rgba(11,12,14,.94);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom-color:var(--line);padding:10px 0}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;flex-direction:column;line-height:1;flex:0 0 auto}
.brand-name{font-family:var(--serif);font-size:clamp(1.15rem,2.1vw,1.6rem);letter-spacing:.2em;color:var(--white);text-transform:uppercase}
.brand-sub{font-size:.55rem;letter-spacing:.42em;text-transform:uppercase;color:var(--yellow);margin-top:6px}
.head-right{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.rw-logo{width:clamp(46px,4.4vw,62px);height:auto;flex:0 0 auto;display:block}
.nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.nav>li{position:relative;list-style:none}
.nav a,.nav .navbtn{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#E7E8EA;padding:10px 0;background:none;border:0;cursor:pointer}
.nav a::after{content:"";display:block;height:1px;background:var(--yellow);width:0;transition:width var(--t);position:absolute;bottom:4px;left:0}
.nav>li>a:hover::after,.nav>li>a[aria-current="page"]::after{width:100%}
.nav a:hover,.nav .navbtn:hover{color:var(--yellow)}
.nav ul{position:absolute;top:100%;left:-22px;min-width:266px;background:rgba(11,12,14,.98);border:1px solid var(--line);padding:10px 0;margin:0;list-style:none;opacity:0;visibility:hidden;transform:translateY(10px);transition:var(--t)}
.nav li:hover>ul,.nav li:focus-within>ul,.nav ul.open{opacity:1;visibility:visible;transform:none}
.nav ul a{display:block;padding:11px 24px;letter-spacing:.14em;font-size:.72rem;position:relative}
.nav ul a::after{display:none}
.nav ul a:hover{background:var(--charcoal-3);color:var(--yellow)}
.menu-toggle{display:none;width:46px;height:40px;background:none;border:1px solid var(--line);color:var(--white);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:2px}
.menu-toggle span{display:block;width:20px;height:1px;background:currentColor;transition:var(--t)}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1024px){
  /* IMPORTANT: no backdrop-filter on the header at these widths. A filtered
     ancestor becomes the containing block for position:fixed descendants, which
     collapsed the drawer into the header's own height. Solid background instead. */
  .site-head,.site-head.is-stuck,.site-head.is-open{
    -webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(11,12,14,.97)}
  .site-head.is-open{background:var(--ink);border-bottom-color:var(--line)}
  .head-in{position:relative}
  .brand,.rw-logo,.menu-toggle{position:relative;z-index:3}
  .menu-toggle{display:flex}
  .nav{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;
    flex-direction:column;align-items:stretch;gap:0;background:var(--ink);
    padding:calc(env(safe-area-inset-top,0px) + 84px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 64px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    margin:0;list-style:none;transform:translateX(100%);visibility:hidden;
    transition:transform var(--t),visibility 0s linear .45s}
  .nav.open{transform:none;visibility:visible;transition:transform var(--t),visibility 0s}
  .nav>li{border-bottom:1px solid var(--line)}
  .nav>li>a::after{display:none}
  .nav a,.nav .navbtn{padding:17px 0;font-size:.86rem;width:100%;justify-content:space-between;
    letter-spacing:.16em}
  .nav .navbtn span{transition:transform var(--t);display:inline-block}
  .nav .navbtn[aria-expanded="true"] span{transform:rotate(45deg)}
  /* visibility:inherit, not visible — otherwise a submenu left expanded would
     still paint over the page after the drawer itself was hidden. */
  .nav ul{position:static;opacity:1;visibility:inherit;transform:none;border:0;background:none;
    padding:0 0 12px;display:none;min-width:0}
  .nav ul.open{display:block}
  .nav ul a{padding:12px 0 12px 16px;color:var(--smoke);border-left:1px solid var(--line);
    letter-spacing:.1em;text-transform:none;font-size:.85rem}
  .nav ul a:hover,.nav ul a:focus-visible{background:none;color:var(--yellow);border-left-color:var(--yellow)}
  body.nav-open{overflow:hidden}
}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 34px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--yellow);color:var(--yellow);background:transparent;transition:var(--t);cursor:pointer;text-align:center}
.btn:hover{background:var(--yellow);color:#000}
.btn-solid{background:var(--yellow);color:#000}
.btn-solid:hover{background:var(--white);border-color:var(--white)}
.btn-ghost{border-color:rgba(255,255,255,.35);color:var(--white)}
.btn-ghost:hover{border-color:var(--yellow);background:var(--yellow);color:#000}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}
/* HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#000}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.hero-media iframe{width:100vw;height:56.25vw;min-height:100%;min-width:177.77vh;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,12,14,.78) 0%,rgba(11,12,14,.55) 40%,rgba(11,12,14,.92) 100%)}
.hero-in{position:relative;z-index:2;padding-top:120px;padding-bottom:70px;width:100%}
.hero h1{margin-bottom:1rem}
.hero-word{font-size:clamp(2.6rem,8.4vw,7rem);letter-spacing:.14em;line-height:1.02;text-transform:uppercase}
.hero-sub{font-size:clamp(.68rem,1.5vw,.86rem);letter-spacing:.44em;text-transform:uppercase;color:var(--yellow);margin-bottom:1.6rem}
.page-hero{min-height:auto;min-height:auto;padding:0}
.page-hero .hero-in{padding-top:clamp(150px,17vw,230px);padding-bottom:clamp(56px,7vw,96px)}
.page-hero{background:var(--charcoal)}
.page-hero::after{background:linear-gradient(180deg,rgba(11,12,14,.9) 0%,rgba(11,12,14,.72) 55%,rgba(17,18,20,.97) 100%)}
/* BREADCRUMBS */
.crumbs{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:1.4rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.crumbs a:hover{color:var(--yellow)}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--line)}
/* GRIDS */
.grid{display:grid;gap:clamp(20px,3vw,34px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{background:var(--charcoal-2);border:1px solid var(--line);padding:clamp(26px,3vw,40px);transition:var(--t);height:100%}
.card:hover{border-color:var(--yellow);transform:translateY(-4px)}
.sec-light .card{background:var(--white);border-color:#E3E3DF;color:#4A4D52}
.card .num{font-family:var(--serif);font-size:2.4rem;color:var(--yellow);line-height:1;display:block;margin-bottom:.6rem}
.card h3{font-size:1.28rem}
.card p:last-child{margin-bottom:0}
.card-link{display:inline-flex;align-items:center;gap:9px;margin-top:1.1rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow)}
.card-link:hover{gap:16px}
/* STATS */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(18px,3vw,40px);text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:clamp(2.3rem,5vw,3.7rem);color:var(--yellow);line-height:1;font-weight:400}
.stat span{display:block;margin-top:.7rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
/* SPLIT */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(28px,5vw,72px);align-items:center}
.split figure{margin:0;position:relative}
.split figure{overflow:visible}
/* The frame used to be offset down-and-right (16px -16px -16px 16px), which read
   as a misaligned yellow box rather than a deliberate flourish. Now an even
   outline on all four sides, so it sits square around the photo. */
.split figure::before{content:"";position:absolute;inset:-14px;border:1px solid var(--yellow);opacity:.5;z-index:0}
.split figure img{position:relative;z-index:1}
.sec-light .split figure::before{border-color:#111}
figcaption{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:1rem}
/* LIST */
.ticks{list-style:none;padding:0;margin:0 0 1.4rem}
.ticks li{position:relative;padding-left:30px;margin-bottom:.85rem}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:1px;background:var(--yellow)}
/* QUOTE */
.quote{border-left:2px solid var(--yellow);padding-left:clamp(20px,3vw,36px);font-family:var(--serif);font-size:clamp(1.35rem,2.7vw,2.05rem);color:var(--white);line-height:1.4;font-style:italic}
/* TESTIMONIALS */
.tcard{background:var(--charcoal-2);border:1px solid var(--line);padding:clamp(26px,3vw,38px);height:100%}
.sec-light .tcard{background:var(--white);border-color:#E3E3DF}
.stars{color:var(--yellow);letter-spacing:.28em;font-size:.9rem;margin-bottom:1rem}
.tcard blockquote{margin:0 0 1.2rem;font-family:var(--serif);font-size:1.18rem;line-height:1.55;color:var(--white)}
.sec-light .tcard blockquote{color:var(--ink)}
.tcard cite{font-style:normal;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
/* TRUST STRIP */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0}
.trust div{text-align:center;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.trust b{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--white);letter-spacing:.02em;margin-bottom:.35rem;font-weight:400;text-transform:none}
/* FAQ */
.faq{border-top:1px solid var(--line)}
.sec-light .faq{border-color:#DEDEDA}
.faq details{border-bottom:1px solid var(--line)}
.sec-light .faq details{border-color:#DEDEDA}
.faq summary{cursor:pointer;list-style:none;padding:24px 46px 24px 0;position:relative;font-family:var(--serif);font-size:clamp(1.06rem,1.9vw,1.35rem);color:var(--white)}
.sec-light .faq summary{color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--yellow);font-size:1.5rem;font-family:var(--sans);font-weight:300;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--yellow)}
.faq .a{padding:0 46px 26px 0;color:var(--smoke)}
.sec-light .faq .a{color:#4A4D52}
.faq .a p:last-child{margin-bottom:0}
/* FORM */
/* The enquiry form sat in a 50/50 split, so on mid-width screens the column got
   narrow enough that every field stacked and the whole panel looked like a
   letterbox. A min-width makes the auto-fit grid drop to a single full-width
   column instead of squeezing the form. */
.form-wrap{background:var(--charcoal-2);border:1px solid var(--line);padding:clamp(26px,4vw,52px);
  min-width:min(100%,460px)}
.sec-light .form-wrap{background:var(--white);border-color:#E3E3DF}
.field{margin-bottom:20px}
.field label{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;background:var(--charcoal);border:1px solid var(--line);color:var(--white);padding:14px 16px;font-family:var(--sans);font-size:.95rem;font-weight:300;border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color var(--t)}
.sec-light .field input,.sec-light .field select,.sec-light .field textarea{background:var(--paper);border-color:#DCDCD8;color:var(--ink)}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--yellow) 50%),linear-gradient(135deg,var(--yellow) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--yellow)}
.field textarea{min-height:132px;resize:vertical}
.f2{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 20px}
/* The enquiry section's .split holds THREE children — the heading block, the
   text block and the form — so auto-fit gave it three equal tracks and the form
   was squeezed into a third of the row. Two explicit columns instead, with the
   form spanning both rows of the right-hand column. */
#contact-form .split{grid-template-columns:1fr 1.2fr;align-items:start}
#contact-form .split>.form-wrap{grid-column:2;grid-row:1/span 2}
@media (max-width:900px){
  #contact-form .split{grid-template-columns:1fr}
  #contact-form .split>.form-wrap{grid-column:1;grid-row:auto}
}
.split>.form-wrap{width:100%}
.form-wrap form{max-width:760px}
.form-wrap .field textarea{min-height:150px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.82rem;color:var(--mute);margin-bottom:22px}
.consent input{width:18px;height:18px;flex:0 0 auto;margin-top:4px;accent-color:var(--yellow)}
.form-note{font-size:.72rem;color:var(--mute);margin-top:16px;line-height:1.6}
.form-msg{display:none;padding:14px 18px;border:1px solid var(--yellow);margin-bottom:20px;font-size:.9rem}
.form-msg.show{display:block}
.form-msg.err{border-color:#E4572E;color:#F09B85}
.form-msg.ok{border-color:var(--yellow);color:var(--yellow)}
/* MAP */
.map-embed{width:100%;border:1px solid var(--line);filter:grayscale(1) contrast(1.08) brightness(.82);transition:filter var(--t)}
.map-embed:hover{filter:grayscale(0)}
.map-sm{height:230px}
.map-lg{height:clamp(340px,44vw,520px);filter:grayscale(1) contrast(1.05) brightness(.9)}
/* CTA BAND */
.band{background:var(--yellow);color:#000;text-align:center}
/* Every heading level, not just h2 — the CTA headings became h3 and were
   inheriting white, which is unreadable on yellow. */
.band h1,.band h2,.band h3,.band h4,.band h5,.band h6{color:#000}
.band h3{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.band p,.band .lede{color:#26261E}
.band .btn{border-color:#000;color:#000}
.band .btn:hover{background:#000;color:var(--yellow)}
/* FOOTER */
.site-foot{background:var(--ink);border-top:1px solid var(--line);padding:clamp(56px,7vw,88px) 0 0}
.foot-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.25fr;gap:clamp(26px,4vw,52px)}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.site-foot h4,.site-foot .foot-h{color:var(--white);font-size:.72rem;letter-spacing:.24em;margin-bottom:1.3rem;font-family:var(--sans);font-weight:500;text-transform:uppercase}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:.7rem;font-size:.9rem}
.site-foot a:hover{color:var(--yellow)}
.socials{display:flex;gap:12px;margin-top:1.4rem;flex-wrap:wrap}
.socials a{width:40px;height:40px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:var(--t)}
.socials a:hover{border-color:var(--yellow);background:var(--yellow)}
.socials svg{width:16px;height:16px;fill:var(--smoke)}
.socials a:hover svg{fill:#000}
.foot-map{margin-top:clamp(38px,5vw,58px)}
.foot-bottom{border-top:1px solid var(--line);margin-top:clamp(34px,4vw,54px);padding:24px 0;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.76rem;color:var(--mute)}
.foot-bottom a:hover{color:var(--yellow)}
/* REVEAL */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
::selection{background:var(--yellow);color:#000}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
@media print{.site-head,.socials,.map-embed,.btn{display:none}body{background:#fff;color:#000}}

/* Cross-browser hardening */
@media (max-width:640px){
  .split figure::before{inset:-8px}
  .hero-in{padding-top:112px}
  .btn{padding:14px 22px;font-size:.7rem}
  .btn-row .btn{flex:1 1 auto}
}
@supports not (inset:0){
  .hero-media{top:0;right:0;bottom:0;left:0}
  .site-head{top:0;right:0;left:0}
}
input,select,textarea,button{font-family:inherit}
select::-ms-expand{display:none}
details summary{-webkit-tap-highlight-color:transparent}
.wrap,.grid,.split,.stats,.trust,.foot-grid{min-width:0}
.grid>*,.split>*{min-width:0}

/* ---------------------------------------------------------------------------
   Light section contrast pass
   Yellow-on-white and white-on-white were unreadable. Inside .sec-light the
   accent and "white" tokens are redefined, so anything using them recolours,
   and every button becomes solid (yellow on light, dark for the ghost variant).
   --------------------------------------------------------------------------- */
/* NOTE: --white is deliberately NOT redefined here. It is used for card and panel
   BACKGROUNDS as well as text, so overriding it turned light cards black. Text that
   needs recolouring on light sections is handled explicitly below. */
.sec-light{--yellow:#7A6A00;--yellow-deep:#5E5200;--smoke:#4A4D52;--mute:#5A5D62}
.sec-light .btn,.sec-light .btn-solid{background:#FBE80F;border-color:#FBE80F;color:#111214}
.sec-light .btn:hover,.sec-light .btn-solid:hover{background:#111214;border-color:#111214;color:#FBE80F}
.sec-light .btn-ghost{background:#111214;border-color:#111214;color:#FFFFFF}
.sec-light .btn-ghost:hover{background:#FBE80F;border-color:#FBE80F;color:#111214}
.sec-light .rule{background:#111214}
.sec-light .quote{border-left-color:#FBE80F;color:var(--ink)}
.sec-light h1,.sec-light h2,.sec-light h3,.sec-light h4,.sec-light h5,.sec-light h6{color:var(--ink)}
.sec-light .card{background:#FFFFFF;border-color:#E3E3DF;color:#4A4D52}
.sec-light .card h3,.sec-light .card h4{color:var(--ink)}
.sec-light .tcard{background:#FFFFFF;border-color:#E3E3DF}
.sec-light .tcard blockquote{color:var(--ink)}
.sec-light .faq summary{color:var(--ink)}
.sec-light .form-wrap{background:#FFFFFF;border-color:#E3E3DF}
.sec-light .field input,.sec-light .field select,.sec-light .field textarea{background:var(--paper);border-color:#DCDCD8;color:var(--ink)}
.sec-light .stats-plain .stat b{color:var(--ink)}
.sec-light .stats-plain .stat b[data-count]{color:var(--ink)}
.sec-light .card .num,.sec-light .stat b{color:#7A6A00}
.sec-light .stars{color:#B39A00}
.sec-light .stat span,.sec-light figcaption,.sec-light .form-note,.sec-light .consent{color:#5A5D62}
.sec-light p,.sec-light li{color:#3A3D42}
.sec-light .trust{border-color:#DEDEDA}
.sec-light .trust div{color:#5A5D62}
.sec-light .trust b{color:var(--ink)}
.sec-light strong{color:var(--ink)}
.sec-light a:not(.btn):not(.card-link){color:#111214;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#FBE80F;text-decoration-thickness:2px}
.sec-light a:not(.btn):not(.card-link):hover{color:#7A6A00}
.sec-light .card-link{color:#111214}
.sec-light .card-link:hover{color:#7A6A00}
.sec-light .faq summary::after{color:#7A6A00}
/* Wide numbers (total sales) must not overflow on small screens */
.stat b{overflow-wrap:anywhere;font-size:clamp(1.7rem,4.4vw,3.1rem)}

/* Team member cards */
.card.person{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card.person img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.04);transition:filter var(--t)}
.card.person:hover img{filter:grayscale(0)}
/* Touch devices have no hover, so the portraits stay in colour there rather
   than sitting permanently in black and white. */
@media (hover:none){.card.person img{filter:none}}
.card.person .person-body{padding:clamp(22px,2.4vw,30px)}
.card.person h3{font-size:1.35rem;margin-bottom:.6rem}
.card.person h3 span{display:block;font-size:1rem;letter-spacing:.06em;color:var(--yellow);margin-top:.3rem}

/* ---------------------------------------------------------------------------
   Stats band
   Two tiers: the performance figures, then a separate darker panel carrying the
   credentials. Each tier is a two-row grid (figures on row 1, labels on row 2)
   with the .stat itself set to display:contents, so every number shares one
   baseline and every label starts at the same height regardless of wrapping.
   --------------------------------------------------------------------------- */
.stats{display:grid;gap:0 clamp(16px,2.6vw,38px);text-align:center}
.stats-row{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;
  grid-auto-flow:column;align-items:end}
.stats-row .stat{display:contents}
.stat b{display:block;font-family:var(--sans);font-weight:500;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;
  font-size:clamp(1.4rem,3.1vw,2.4rem);line-height:1.1;white-space:nowrap;color:var(--yellow)}
.stat span{display:block;margin-top:.9rem;font-size:.86rem;font-weight:400;letter-spacing:.015em;
  text-transform:none;color:#C3C7CD;line-height:1.55;max-width:22ch;margin-inline:auto;
  padding-bottom:.2rem}

/* Credential panel */
.stats-panel{margin-top:clamp(30px,4vw,48px);background:#08090A;border:1px solid var(--line);
  border-top:2px solid var(--yellow);padding:clamp(26px,3.4vw,42px) clamp(18px,3vw,38px) clamp(24px,3vw,36px)}
.panel-label{margin:0 0 clamp(20px,2.6vw,30px);text-align:center;font-size:.66rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--mute)}
/* One face across both rows — the serif on the credential row read as a
   different typeface rather than a second tier. */
.stats-plain .stat b,.stats-plain .stat b[data-count]{font-family:var(--sans);font-weight:500;
  color:var(--white);letter-spacing:-.005em;font-size:clamp(1.25rem,2.5vw,1.9rem)}
.stats-plain .stat span{color:#C3C7CD;font-size:.86rem}
.sec-light .stats-panel{background:#FFFFFF;border-color:#E3E3DF}
.sec-light .stat span{color:#4A4D52}

@media (max-width:760px){
  .stats-row{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;
    grid-auto-flow:row;gap:30px 18px}
  .stats-row .stat{display:block}
  .stat b{font-size:clamp(1.15rem,5.2vw,1.55rem)}
  .stat span{font-size:.76rem;max-width:18ch;margin-top:.6rem}
}
@media (max-width:380px){
  .stats-row{grid-template-columns:1fr}
}

/* Trust strip (inner pages) — matched to the panel styling */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 0}
.trust div{text-align:center;font-size:.84rem;font-weight:400;letter-spacing:.015em;
  text-transform:none;color:#C3C7CD;line-height:1.55}
.trust b{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--white);
  letter-spacing:.02em;margin-bottom:.45rem;font-weight:400}

/* Form legibility — labels and helper text were too dim against both grounds */
.form-wrap p{color:#D6D9DD}
.field label{color:#C9CBD0;font-size:.7rem;letter-spacing:.16em}
.consent,.form-note{color:#A9ADB3}
.form-wrap a{color:var(--yellow)}
.sec-light .form-wrap p{color:#3A3D42}
.sec-light .field label{color:#3A3D42}
.sec-light .consent,.sec-light .form-note{color:#4A4D52}
.field input::placeholder,.field textarea::placeholder{color:#7C8087}

/* ---------------------------------------------------------------------------
   Mobile header fit
   At 375px the row measured 385px wide, so the hamburger was pushed ~10px past
   the viewport and clipped by body{overflow-x:hidden} — half the tap target sat
   off-screen. The wordmark and logo scale down on small screens, and the brand
   is the element allowed to shrink so the toggle can never be the thing that
   gets cut off.
   --------------------------------------------------------------------------- */
.head-in{flex-wrap:nowrap;min-width:0}
/* The wordmark must never truncate — it is the brand. It only becomes the
   shrinkable element below the mobile breakpoint, where the nav is a drawer. */
.brand{flex:0 0 auto;min-width:0}
.brand-name{white-space:nowrap;display:block}
.head-right{flex:0 1 auto;min-width:0}
/* Between the mobile breakpoint and a comfortable desktop the full menu plus the
   wordmark is a tight fit, so the nav tightens rather than the brand clipping. */
@media (min-width:1025px) and (max-width:1430px){
  .brand-name{font-size:1.2rem;letter-spacing:.13em}
  .nav{gap:13px}
  .nav a,.nav .navbtn{font-size:.65rem;letter-spacing:.11em}
  .head-right{gap:14px}
  .rw-logo{width:50px}
}
@media (max-width:1024px){
  .brand{flex:1 1 auto}
  .brand-name{overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:560px){
  .head-in{gap:12px}
  .head-right{gap:10px}
  .brand-name{font-size:.95rem;letter-spacing:.12em}
  .brand-sub{font-size:.5rem;letter-spacing:.28em;margin-top:5px}
  .rw-logo{width:38px}
  .menu-toggle{width:42px;height:38px}
  .menu-toggle span{width:18px}
}
@media (max-width:370px){
  .brand-name{font-size:.85rem;letter-spacing:.07em}
  .brand-sub{letter-spacing:.2em}
  .rw-logo{width:34px}
  .head-right{gap:8px}
}

/* Navigation: keep multi-word items on a single line */
.nav>li>a,.nav .navbtn{white-space:nowrap}
.nav{flex-wrap:nowrap}
@media (min-width:1025px) and (max-width:1200px){
  .nav{gap:14px}
  .nav a,.nav .navbtn{font-size:.68rem;letter-spacing:.14em}
}
@media (max-width:1024px){
  .nav a,.nav .navbtn{white-space:normal}
}