/* ============================================================
   Sapphireworld & Co. — Concept 3 "The Private Enquiry"
   A qualifier funnel built for paid traffic. Same REAL brand
   tokens from sapphireworld.com.au, tighter landing page rhythm.
   ============================================================ */

:root{
  --rose:#FCF0ED; --rose-2:#F7E2DB; --rose-3:#F2D5CB;
  --white:#FFFFFF; --platinum:#E8E8E8;
  --olive:#3D3D3D; --ink:#2B2A28; --muted:#6E6660;
  --gold:#DDAB17; --gold-deep:#B97E12; --gold-mid:#DFAD17;
  --gold-hi:#EBB81A; --gold-pale:#FFF885; --gold-text:#8F6A08;
  --copper:#A44B2C; --copper-deep:#6D2118; --copper-mid:#BF6036; --copper-light:#EBA67C;
  --sapphire:#1E3F9E;
  --midnight:#010C20; --midnight-2:#01142E; --midnight-3:#04203F;
  --grad-gold:linear-gradient(100deg, var(--gold-pale) 0%, var(--gold-hi) 38%, var(--gold-mid) 58%, var(--gold-deep) 100%);
  --font-primary:'Poppins', system-ui, sans-serif;
  --font-secondary:'Montserrat', system-ui, sans-serif;
  --font-script:'Great Vibes', cursive;
  --ease:cubic-bezier(.22,.61,.36,1);
  --line:rgba(255,255,255,.11);
  --line-gold:rgba(221,171,23,.26);
  --nav-h:72px;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--midnight); color:rgba(238,240,248,.76);
  font-family:var(--font-secondary); font-weight:300; font-size:16.5px; line-height:1.72;
  overflow-x:hidden; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block; height:auto}  /* height:auto or the HTML width/height attributes pin a pixel height and aspect-ratio is ignored */
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-primary); font-weight:400; color:#fff; margin:0; line-height:1.16}
p{margin:0 0 1em}
.wrap{width:min(var(--wrap), calc(100% - 40px)); margin-inline:auto}
:focus-visible{outline:2px solid var(--gold-hi); outline-offset:3px; border-radius:4px}
.gold{background:var(--grad-gold); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent}
.script{font-family:var(--font-script); font-weight:400}

/* ---------- concept notice ---------- */
.cnote{position:relative; z-index:60; background:var(--midnight-3); border-bottom:1px solid var(--line-gold);
  font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.76); padding:9px 52px 9px 20px}
.cnote strong{color:var(--gold-hi); font-weight:600}
.cnote button{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:44px; height:44px;
  border:0; background:transparent; color:rgba(255,255,255,.65); font-size:22px; line-height:1;
  cursor:pointer; border-radius:8px}
.cnote button:hover{background:rgba(255,255,255,.08); color:#fff}

/* ---------- header ---------- */
.hd{position:relative; z-index:40; border-bottom:1px solid var(--line)}
.hd-in{min-height:var(--nav-h); display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; text-decoration:none; padding:6px 0}
.brand img{height:38px; width:auto}
.hd-r{margin-left:auto; display:flex; align-items:center; gap:14px}
.hd-r .loc{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.tel{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-size:14px;
  color:#fff; padding:10px 4px; min-height:44px}
.tel:hover{color:var(--gold-hi)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-secondary); font-weight:500; font-size:13px; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; padding:15px 26px; border-radius:2px;
  cursor:pointer; border:1px solid transparent; min-height:50px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease)}
.btn-g{background:var(--grad-gold); color:#20180A; font-weight:600;
  box-shadow:0 14px 34px -18px rgba(235,184,26,.8)}
.btn-g:hover{transform:translateY(-2px); box-shadow:0 20px 44px -18px rgba(235,184,26,.95)}
.btn-o{border-color:rgba(255,255,255,.32); color:#fff}
.btn-o:hover{border-color:var(--gold-hi); color:var(--gold-hi); transform:translateY(-2px)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
.btn-lg{padding:17px 32px; font-size:13.5px}

/* ---------- hero + qualifier ---------- */
.hero{position:relative; overflow:hidden; isolation:isolate; padding:clamp(44px,5.4vw,76px) 0 clamp(56px,7vw,96px)}
.hero::before{content:""; position:absolute; inset:0; z-index:-2;
  background:radial-gradient(70% 58% at 78% 12%, rgba(30,63,158,.34) 0%, transparent 62%),
             radial-gradient(52% 46% at 12% 88%, rgba(185,126,18,.20) 0%, transparent 66%)}
.hero-tex{position:absolute; inset:0; z-index:-3; opacity:.16}
.hero-tex img{width:100%; height:100%; object-fit:cover}
.hero-in{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,60px); align-items:start}
.eyebrow{font-size:11.5px; letter-spacing:.30em; text-transform:uppercase; color:var(--gold-hi);
  font-weight:500; margin:0 0 18px}
.hero h1{font-size:clamp(35px,4.9vw,58px); font-weight:300; letter-spacing:-.014em; line-height:1.08}
.hero h1 .script{font-size:1.18em}
.hero .lede{font-size:clamp(15.5px,1.4vw,17.5px); color:rgba(255,255,255,.78); margin:22px 0 30px; max-width:50ch}
.ticks{list-style:none; margin:0 0 30px; padding:0; display:grid; gap:13px}
.ticks li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:rgba(255,255,255,.82)}
.ticks svg{flex:0 0 auto; margin-top:4px; color:var(--gold-hi)}
.hero-proof{display:flex; flex-wrap:wrap; gap:10px 26px; padding:24px 0 0; margin:0;
  border-top:1px solid var(--line); list-style:none}
.hero-proof li{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6)}
.hero-proof b{color:var(--gold-hi); font-weight:600}

/* ---------- the qualifier card ---------- */
.q{background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
  border:1px solid var(--line-gold); border-radius:4px; overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85)}
.q-head{padding:22px 26px 0}
.q-head h2{font-size:19px; font-weight:500; letter-spacing:.01em}
.q-head p{font-size:13px; color:rgba(255,255,255,.6); margin:6px 0 0}
.q-bar{height:3px; background:rgba(255,255,255,.10); margin:18px 0 0; overflow:hidden}
.q-bar i{display:block; height:100%; width:33.33%; background:var(--grad-gold);
  transition:width .45s var(--ease)}
.q-steps{display:flex; gap:0; list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line)}
.q-steps li{flex:1; text-align:center; padding:13px 6px; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.42); transition:color .3s var(--ease)}
.q-steps li[aria-current="step"]{color:var(--gold-hi)}
.q-steps li b{display:inline-block; width:19px; height:19px; line-height:19px; border-radius:50%;
  border:1px solid currentColor; font-size:10px; font-weight:600; margin-right:6px}
.q-body{padding:26px}
.q-pane{display:none}
.q-pane.on{display:block; animation:qin .42s var(--ease)}
@keyframes qin{from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.q-pane.on{animation:none}}
.q-legend{font-family:var(--font-primary); font-size:21px; font-weight:400; color:#fff; margin:0 0 5px}
.q-hint{font-size:13px; color:rgba(255,255,255,.58); margin:0 0 20px}

.opts{display:grid; gap:9px; margin:0 0 4px; padding:0; list-style:none}
.opts.two{grid-template-columns:1fr 1fr}
.opt{display:block; position:relative}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt span{display:flex; align-items:center; gap:11px; border:1px solid var(--line);
  border-radius:2px; padding:14px 16px; font-size:14.5px; color:rgba(255,255,255,.86);
  cursor:pointer; min-height:52px; background:rgba(1,12,32,.4);
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease)}
.opt span::before{content:""; width:15px; height:15px; border-radius:50%; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.34); transition:.25s var(--ease)}
.opt input:checked + span{border-color:var(--gold-deep); background:rgba(221,171,23,.10); color:#fff}
.opt input:checked + span::before{border-color:var(--gold-hi); background:var(--gold-hi);
  box-shadow:inset 0 0 0 3px var(--midnight)}
.opt input:focus-visible + span{outline:2px solid var(--gold-hi); outline-offset:2px}
.opt span:hover{border-color:rgba(255,255,255,.3)}
.opt.sw span::before{border-radius:4px}
.opt.sw i{width:15px; height:15px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

.q-err{display:block; font-size:12.5px; color:var(--copper-light); margin:12px 0 0}
.q-err[hidden]{display:none}

.f{margin:0 0 15px}
.f label{display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin:0 0 8px}
.f input,.f select,.f textarea{width:100%; background:rgba(1,12,32,.55); border:1px solid var(--line);
  border-radius:2px; color:#fff; padding:14px 15px; font-family:var(--font-secondary);
  font-size:15px; font-weight:300; min-height:52px}
.f textarea{min-height:96px; resize:vertical}
.f select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DDAB17'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:20px; padding-right:42px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none; border-color:var(--gold-deep)}
.f-err{display:block; font-size:12px; color:var(--copper-light); margin-top:7px}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:15px}

.q-nav{display:flex; gap:11px; margin:22px 0 0}
.q-nav .btn{flex:1}
.q-nav .back{flex:0 0 auto; min-width:104px}
.q-foot{font-size:11.5px; color:rgba(255,255,255,.44); text-align:center; margin:16px 0 0;
  display:flex; align-items:center; justify-content:center; gap:7px}
.q-foot svg{color:var(--gold-deep); flex:0 0 auto}

.q-ok{display:none; padding:34px 26px 30px; text-align:center}
.q-ok.on{display:block}
.q-ok .tick{width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--gold-deep); color:var(--gold-hi)}
.q-ok h3{font-size:24px; font-weight:300; margin:0 0 8px}
.q-ok > p{font-size:14.5px; color:rgba(255,255,255,.68); max-width:42ch; margin:0 auto 22px}
.q-next{list-style:none; margin:0; padding:0; text-align:left; display:grid; gap:14px;
  border-top:1px solid var(--line); padding-top:22px}
.q-next li{display:flex; gap:13px; align-items:flex-start; font-size:14px}
.q-next b{display:block; color:#fff; font-weight:500}
.q-next .n{flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1px solid var(--line-gold);
  color:var(--gold-hi); font-size:11px; display:grid; place-items:center; margin-top:2px}
.q-demo{font-size:12px; color:rgba(255,255,255,.5); margin:22px 0 0; border-top:1px solid var(--line);
  padding-top:18px}

/* ---------- proof band ---------- */
.pb{background:var(--midnight-2); border-block:1px solid var(--line); padding:clamp(46px,5.4vw,66px) 0}
.pb-in{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; text-align:center}
.pb b{display:block; font-family:var(--font-primary); font-size:clamp(24px,3vw,34px);
  font-weight:300; color:#fff; line-height:1.1}
.pb span{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-hi)}
.pb p{font-size:13px; margin:9px 0 0; color:rgba(255,255,255,.58)}

/* ---------- sections ---------- */
.sec{padding:clamp(62px,7.4vw,104px) 0}
.sec-head{max-width:700px; margin:0 0 clamp(32px,4vw,52px)}
.sec-head.mid{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(28px,3.7vw,44px); font-weight:300}
.sec-head h2 .script{font-size:1.2em}
.sec-head p{margin-top:14px; color:rgba(255,255,255,.66)}
.rule{width:56px; height:1px; background:var(--grad-gold); margin:0 0 18px}
.sec-head.mid .rule{margin-inline:auto}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{border:1px solid var(--line); border-radius:3px; padding:30px 26px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  transition:border-color .35s var(--ease), transform .35s var(--ease)}
.card:hover{border-color:var(--line-gold); transform:translateY(-4px)}
.card .ico{width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line-gold);
  border-radius:50%; color:var(--gold-hi); margin:0 0 16px}
.card h3{font-size:19px; font-weight:400; margin:0 0 9px}
.card p{font-size:14.5px; color:rgba(255,255,255,.66); margin:0}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.4vw,64px); align-items:center}
.split-media{border-radius:3px; overflow:hidden; border:1px solid var(--line)}
.split-media img{width:100%; aspect-ratio:16/11; object-fit:cover}
.regs{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px}
.regs li{border-left:2px solid var(--gold-deep); padding:4px 0 4px 18px}
.regs h4{font-size:18px; font-weight:400; margin:0 0 4px}
.regs p{font-size:14px; margin:0; color:rgba(255,255,255,.62)}

/* ---------- closing band ---------- */
.band{position:relative; overflow:hidden; isolation:isolate; text-align:center;
  padding:clamp(64px,8vw,108px) 0}
.band-bg{position:absolute; inset:0; z-index:-2}
.band-bg img{width:100%; height:100%; object-fit:cover}
.band::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(1,12,32,.90), rgba(1,12,32,.80))}
.band h2{font-size:clamp(28px,4vw,48px); font-weight:300}
.band p{max-width:54ch; margin:18px auto 28px; color:rgba(255,255,255,.78)}
.band .btn{margin:0 6px 10px}

/* ---------- footer ---------- */
.ft{background:var(--midnight-2); border-top:1px solid var(--line); padding:52px 0 0}
.ft-top{display:grid; grid-template-columns:1.5fr 1fr; gap:34px; padding-bottom:38px}
.ft-logo{height:42px; width:auto; margin:0 0 16px}
.ft-top p{font-size:14px; color:rgba(255,255,255,.6); max-width:44ch}
.ft-top h5{font-family:var(--font-primary); font-size:11.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-hi); margin:0 0 14px; font-weight:500}
.ft-top ul{list-style:none; margin:0; padding:0}
.ft-top li a, .ft-top li span{display:inline-block; text-decoration:none; font-size:14px;
  color:rgba(255,255,255,.68); padding:9px 0; min-height:42px; line-height:24px}
.ft-top li a:hover{color:var(--gold-hi)}
.ft-bot{border-top:1px solid var(--line); padding:20px 0 26px; display:flex; flex-wrap:wrap;
  gap:12px 22px; align-items:center; justify-content:space-between}
.ft-bot small{font-size:12.5px; color:rgba(255,255,255,.44)}
.by{font-size:12.5px; color:rgba(255,255,255,.44); text-decoration:none; display:inline-block;
  padding:10px 2px; min-height:44px; line-height:24px; font-family:var(--font-secondary)}
.by b{color:var(--gold-hi); font-weight:600}
.by:hover b{color:var(--gold-pale)}

/* ---------- sticky mobile call bar ---------- */
.sticky{display:none; position:fixed; left:0; right:0; bottom:0; z-index:65;
  background:rgba(1,20,46,.97); backdrop-filter:blur(12px); border-top:1px solid var(--line-gold);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)); gap:10px}
.sticky a{flex:1; min-height:50px; font-size:12.5px; padding:14px 10px}

/* ---------- motion ---------- */
.sprog{position:fixed; left:0; top:0; height:2px; width:100%; z-index:70;
  background:var(--grad-gold); transform:scaleX(0); transform-origin:0 50%}
html.js .reveal{opacity:0; transform:translateY(20px); filter:blur(6px);
  transition:opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease);
  transition-delay:var(--d,0ms)}
html.js .reveal.in{opacity:1; transform:none; filter:none}
html.js .word{display:inline-block; opacity:0; transform:translateY(.4em);
  transition:opacity .8s var(--ease), transform .8s var(--ease)}
html.js .word.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal,html.js .word{opacity:1!important; transform:none!important; filter:none!important}
}

/* ============================================================
   RESPONSIVE — usability first
   ============================================================ */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr; gap:40px}
  .q{max-width:600px}
  .cards{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .pb-in{grid-template-columns:1fr 1fr; gap:30px 20px}
}
@media (max-width:700px){
  .hd-r .loc{display:none}
  .tel span{display:none}
  .tel{padding:11px; border:1px solid var(--line); border-radius:3px; min-height:46px;
    min-width:46px; justify-content:center}
}
@media (max-width:640px){
  body{font-size:16px; padding-bottom:74px}
  .wrap{width:calc(100% - 32px)}
  .cnote{font-size:12px; padding:10px 50px 10px 16px}
  .hero{padding:36px 0 48px}
  .hero h1{font-size:clamp(31px,8.6vw,40px)}
  .hero .lede{font-size:15.5px; margin:18px 0 24px}
  .hero-proof{gap:9px 20px; padding-top:20px}
  .hero-proof li{width:100%; font-size:11px}
  .q-head{padding:20px 20px 0}
  .q-body{padding:22px 20px}
  .q-legend{font-size:19px}
  .opts.two{grid-template-columns:1fr}
  .q-nav{flex-direction:column-reverse}
  .q-nav .btn{width:100%}
  .q-nav .back{min-width:0}
  .frow{grid-template-columns:1fr; gap:0}
  .cards{grid-template-columns:1fr}
  .pb-in{grid-template-columns:1fr 1fr; gap:26px 16px}
  .pb b{font-size:24px}
  .sec{padding:54px 0}
  .sec-head h2{font-size:clamp(26px,7.4vw,34px)}
  .band .btn{width:100%; margin:0 0 12px}
  .sticky{display:flex}
  .ft{padding-top:46px}
  .ft-top{grid-template-columns:1fr; gap:30px; padding-bottom:30px}
  .ft-bot{justify-content:flex-start; gap:4px 20px; padding-bottom:30px}
}
@media (max-width:380px){
  .pb-in{grid-template-columns:1fr}
}