/* ============================================================
   Sapphireworld & Co. — Concept 1 "The Vault"
   Design system built on the client's REAL brand tokens, pulled
   from sapphireworld.com.au inline CSS (gold / copper / rose /
   ink ramps, Poppins + Montserrat + Great Vibes).
   ============================================================ */

:root{
  /* ---- exact tokens from the client's live stylesheet ---- */
  --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;
  --grad-gold:linear-gradient(100deg, var(--gold-pale) 0%, var(--gold-hi) 38%, var(--gold-mid) 58%, var(--gold-deep) 100%);
  --grad-copper:linear-gradient(120deg, var(--copper-deep) 0%, var(--copper) 42%, var(--copper-mid) 62%, var(--copper-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);

  /* ---- dark ground sampled from the client's own brand map ---- */
  --midnight:#010C20;
  --midnight-2:#01142E;
  --midnight-3:#04203F;
  --line:rgba(221,171,23,.20);
  --line-soft:rgba(255,255,255,.09);
  --body:rgba(238,240,248,.78);
  --nav-h:78px;
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--midnight); color:var(--body);
  font-family:var(--font-secondary); font-weight:300;
  font-size:16.5px; line-height:1.75;
  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; letter-spacing:.005em}
p{margin:0 0 1em}
.wrap{width:min(var(--wrap), calc(100% - 44px)); margin-inline:auto}
:focus-visible{outline:2px solid var(--gold-hi); outline-offset:3px; border-radius:4px}

/* gold text fill */
.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);
  font-family:var(--font-secondary); font-size:12.5px; line-height:1.6;
  color:rgba(255,255,255,.76); padding:9px 52px 9px 22px;
}
.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:sticky; top:0; z-index:50; background:rgba(1,12,32,.86); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-soft); transition:background .3s var(--ease)}
.hd-in{min-height:var(--nav-h); display:flex; align-items:center; gap:22px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; padding:6px 0}
.brand img{width:auto; height:38px}
.nav{display:flex; gap:26px; margin-inline:auto}
.nav a{
  text-decoration:none; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:400; color:rgba(255,255,255,.72); padding:10px 2px; position:relative;
}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:4px; height:1px;
  background:var(--grad-gold); transition:right .35s var(--ease)}
.nav a:hover{color:#fff} .nav a:hover::after{right:0}
.hd-cta{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.tel{display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-size:13.5px; color:rgba(255,255,255,.82); letter-spacing:.04em; padding:9px 4px}
.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:14px 26px; border-radius:2px; cursor:pointer; border:1px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  min-height:48px;
}
.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,.34); color:#fff; background:transparent}
.btn-o:hover{border-color:var(--gold-hi); color:var(--gold-hi); transform:translateY(-2px)}
.btn-sm{padding:11px 18px; font-size:11.5px; min-height:42px}
.btn-lg{padding:17px 34px; font-size:13.5px}

.burger{display:none; width:46px; height:46px; border:1px solid var(--line-soft);
  background:transparent; border-radius:3px; cursor:pointer; padding:12px 11px}
.burger span{display:block; height:1.5px; background:#fff; margin:4px 0; transition:.3s var(--ease)}
.mmenu{display:none; flex-direction:column; padding:10px 22px 26px; background:var(--midnight-2);
  border-bottom:1px solid var(--line)}
.mmenu a{padding:15px 2px; text-decoration:none; font-size:14px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.86); border-bottom:1px solid var(--line-soft)}
.mmenu .mm-cta{margin-top:18px; border:0; text-align:center; background:var(--grad-gold);
  color:#20180A; font-weight:600; border-radius:2px; padding:16px}

/* ---------- hero ---------- */
.hero{position:relative; min-height:clamp(600px, 92vh, 880px); display:flex; align-items:center;
  overflow:hidden; isolation:isolate}
.hero-bg{position:absolute; inset:0; z-index:-2}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:60% 45%; transform:scale(1.06)}
.hero-scrim{position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(90% 70% at 22% 52%, rgba(1,12,32,.90) 0%, rgba(1,12,32,.62) 45%, rgba(1,12,32,.25) 100%),
    linear-gradient(180deg, rgba(1,12,32,.82) 0%, rgba(1,12,32,.30) 30%, rgba(1,12,32,.90) 100%);
}
.hero-in{padding:96px 0 84px; max-width:730px}
.eyebrow{font-size:11.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-hi); font-weight:500; margin:0 0 22px}
.hero h1{font-size:clamp(38px, 6.1vw, 74px); font-weight:300; letter-spacing:-.012em; line-height:1.08}
.hero h1 .script{display:block; font-size:1.16em; line-height:1.02; margin-top:.06em}
.hero .lede{font-size:clamp(15.5px,1.5vw,18px); color:rgba(255,255,255,.80); margin:26px 0 34px; max-width:56ch}
.hero-btns{display:flex; flex-wrap:wrap; gap:14px}
.hero-trust{list-style:none; display:flex; flex-wrap:wrap; gap:14px 30px; margin:44px 0 0; padding:0}
.hero-trust li{display:flex; align-items:center; gap:10px; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.hero-trust svg{flex:0 0 auto; color:var(--gold-hi)}
.hero-mark{position:absolute; right:5%; bottom:9%; z-index:1; width:min(240px,26vw); opacity:.9;
  pointer-events:none}

/* ---------- variety marquee ---------- */
.mq{background:var(--midnight-2); border-block:1px solid var(--line); padding:17px 0; overflow:hidden}
.mq-track{display:flex; gap:0; width:max-content; animation:mqx 52s linear infinite}
.mq-track span{font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.55); padding:0 26px; white-space:nowrap; position:relative}
.mq-track span::after{content:"\25C7"; position:absolute; right:-6px; color:var(--gold-deep); font-size:8px; top:2px}
@keyframes mqx{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}

/* ---------- section shell ---------- */
.sec{padding:clamp(72px,9vw,128px) 0; position:relative}
.sec-alt{background:var(--midnight-2)}
.sec-head{max-width:720px; margin:0 0 clamp(38px,5vw,62px)}
.sec-head.mid{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(29px,4.1vw,49px); font-weight:300; letter-spacing:-.01em}
.sec-head h2 .script{font-size:1.22em}
.sec-head p{margin-top:18px; font-size:16px; color:rgba(255,255,255,.66); max-width:60ch}
.sec-head.mid p{margin-inline:auto}
.rule{width:64px; height:1px; background:var(--grad-gold); margin:0 0 22px}
.sec-head.mid .rule{margin-inline:auto}

/* ---------- signature hues ---------- */
.hues{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.hue{
  position:relative; border:1px solid var(--line-soft); border-radius:3px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  padding:34px 28px 30px; transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.hue:hover{border-color:var(--line); transform:translateY(-5px)}
.hue-no{font-family:var(--font-primary); font-size:11.5px; letter-spacing:.28em;
  color:var(--gold-deep); text-transform:uppercase}
.hue-tag{font-family:var(--font-script); font-size:26px; color:var(--copper-light); margin:6px 0 2px}
.hue h3{font-size:26px; font-weight:300; margin:4px 0 4px}
.hue-cut{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.hue-stone{margin:24px auto 22px; width:150px; height:150px; display:grid; place-items:center;
  border-radius:50%; background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.10), transparent 62%)}
.hue-stone img{width:132px; height:132px; object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55))}
.hue p{font-size:14.5px; color:rgba(255,255,255,.70); margin:0 0 20px}
.hue-meta{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 20px; padding:0; list-style:none}
.hue-meta li{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--gold-hi); padding:5px 10px; border-radius:2px}
.hue-link{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:#fff; padding:8px 0; min-height:44px}
.hue-link::after{content:"\2192"; color:var(--gold-hi); transition:transform .3s var(--ease)}
.hue-link:hover::after{transform:translateX(5px)}
.hues-note{margin:26px 0 0; font-size:12.5px; color:rgba(255,255,255,.44); text-align:center}

/* ---------- heritage ---------- */
.her{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center}
.her-media{position:relative; border-radius:3px; overflow:hidden}
.her-media img{width:100%; aspect-ratio:4/5; object-fit:cover}
.her-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(1,12,32,.7) 100%)}
.her-badge{position:absolute; left:24px; bottom:24px; z-index:2; text-align:left}
.her-badge b{display:block; font-family:var(--font-primary); font-size:44px; font-weight:300; color:#fff; line-height:1}
.her-badge span{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-hi)}
.tl{list-style:none; margin:34px 0 0; padding:0; position:relative}
.tl::before{content:""; position:absolute; left:7px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg, var(--gold-deep), transparent)}
.tl li{position:relative; padding:0 0 30px 38px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:""; position:absolute; left:0; top:7px; width:15px; height:15px;
  border-radius:50%; background:var(--midnight); border:1px solid var(--gold-deep)}
.tl li::after{content:""; position:absolute; left:5px; top:12px; width:5px; height:5px;
  border-radius:50%; background:var(--gold-hi)}
.tl h4{font-size:19px; font-weight:400; margin:0 0 7px}
.tl p{font-size:14.5px; color:rgba(255,255,255,.66); margin:0}

/* ---------- provenance ---------- */
.prov{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(34px,5vw,64px); align-items:center}
.prov-map{border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--midnight)}
.prov-map img{width:100%}
.regions{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.regions li{border:1px solid var(--line-soft); border-left:2px solid var(--gold-deep);
  padding:22px 24px; border-radius:2px; background:rgba(255,255,255,.022);
  transition:border-left-color .35s var(--ease), background .35s var(--ease)}
.regions li:hover{border-left-color:var(--gold-hi); background:rgba(255,255,255,.045)}
.regions .prv{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--copper-light)}
.regions h4{font-size:23px; font-weight:300; margin:5px 0 8px}
.regions p{font-size:14.5px; color:rgba(255,255,255,.66); margin:0}

/* ---------- services ---------- */
.svcs{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft)}
.svc{background:var(--midnight); padding:38px 32px 36px; transition:background .4s var(--ease)}
.sec-alt .svc{background:var(--midnight-2)}
.svc:hover, .sec-alt .svc:hover{background:var(--midnight-3)}
.svc-ico{width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:50%; color:var(--gold-hi); margin:0 0 20px}
.svc h3{font-size:20px; font-weight:400; margin:0 0 10px}
.svc p{font-size:14.5px; color:rgba(255,255,255,.66); margin:0}

/* ---------- why strip ---------- */
.why{display:grid; grid-template-columns:repeat(5,1fr); gap:24px}
.why div{text-align:center}
.why .n{font-family:var(--font-primary); font-size:12px; letter-spacing:.22em;
  color:var(--gold-deep); display:block; margin:0 0 12px}
.why h4{font-size:17px; font-weight:400; margin:0 0 9px}
.why p{font-size:13.5px; color:rgba(255,255,255,.62); margin:0}

/* ---------- viewing band ---------- */
.band{position:relative; overflow:hidden; isolation:isolate; text-align:center;
  padding:clamp(76px,9vw,124px) 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,.78))}
.band h2{font-size:clamp(30px,4.4vw,52px); font-weight:300}
.band h2 .script{font-size:1.2em}
.band p{max-width:56ch; margin:20px auto 32px; color:rgba(255,255,255,.78)}
.band .btn{margin:0 6px 10px}

/* ---------- enquiry ---------- */
.enq{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,66px); align-items:start}
.enq-side .rule{margin-bottom:20px}
.enq-side h2{font-size:clamp(29px,3.8vw,44px); font-weight:300}
.enq-side p{font-size:15px; color:rgba(255,255,255,.68)}
.contacts{list-style:none; margin:30px 0 0; padding:0; display:grid; gap:16px}
.contacts a, .contacts span{display:flex; gap:13px; align-items:flex-start; text-decoration:none;
  font-size:15px; color:rgba(255,255,255,.86); padding:6px 0; min-height:44px}
.contacts a:hover{color:var(--gold-hi)}
.contacts svg{flex:0 0 auto; margin-top:4px; color:var(--gold-deep)}
.form{border:1px solid var(--line); border-radius:3px; padding:clamp(26px,3.4vw,40px);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012))}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.f{margin:0 0 16px}
.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,.6); border:1px solid var(--line-soft);
  border-radius:2px; color:#fff; padding:14px 15px; font-family:var(--font-secondary);
  font-size:15px; font-weight:300; min-height:50px; transition:border-color .3s var(--ease);
}
.f textarea{min-height:112px; 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}
.form .btn{width:100%; margin-top:6px}
.form-note{font-size:12px; color:rgba(255,255,255,.45); margin:16px 0 0; text-align:center}
.f-ok{display:none; gap:14px; align-items:flex-start; border:1px solid var(--gold-deep);
  background:rgba(221,171,23,.09); border-radius:2px; padding:20px 22px; margin:0 0 20px}
.f-ok[hidden]{display:none}
.f-ok.show{display:flex}
.f-ok svg{flex:0 0 auto; color:var(--gold-hi); margin-top:2px}
.f-ok b{display:block; color:#fff; font-weight:500; margin-bottom:4px}
.f-ok p{font-size:13.5px; margin:0; color:rgba(255,255,255,.72)}

/* ---------- footer ---------- */
.ft{background:var(--midnight-2); border-top:1px solid var(--line); padding:64px 0 0}
.ft-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:46px}
.ft-logo{height:44px; width:auto; margin:0 0 18px}
.ft-top p{font-size:14px; color:rgba(255,255,255,.6); max-width:38ch}
.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 18px; font-weight:500}
.ft-top ul{list-style:none; margin:0; padding:0}
.ft-top li{margin:0 0 4px}
.ft-top li a{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-soft); padding:22px 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-family:var(--font-secondary); 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}
.by b{color:var(--gold-hi); font-weight:600}
.by:hover b{color:var(--gold-pale)}

/* ---------- motion layer ---------- */
.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(22px); filter:blur(7px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s 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) rotate(2deg);
  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:1080px){
  .hues{grid-template-columns:1fr 1fr}
  .svcs{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:repeat(3,1fr); gap:34px 24px}
  .prov{grid-template-columns:1fr}
  .prov-map{max-width:520px; margin-inline:auto}
}
@media (max-width:900px){
  .nav{display:none}
  .tel span{display:none}
  .tel{padding:11px; border:1px solid var(--line-soft); border-radius:3px; min-height:46px; min-width:46px;
    justify-content:center}
  .burger{display:block}
  .hd-cta{margin-left:auto}
  /* the burger menu already carries the booking CTA; keeping the button here
     squeezed the logo and pushed the burger off a 390px screen */
  .hd-cta > .btn{display:none}
  .mmenu{display:none}
  .mmenu.open{display:flex}
  .her{grid-template-columns:1fr}
  .her-media img{aspect-ratio:16/11}
  .enq{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr 1fr}
  .ft-top > div:first-child{grid-column:1 / -1}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{width:calc(100% - 34px)}
  .cnote{font-size:12px; padding:10px 50px 10px 16px}
  .hero{min-height:auto}
  .hero-in{padding:64px 0 62px; max-width:none}
  .hero h1{font-size:clamp(33px,9.4vw,44px)}
  .hero .lede{font-size:15.5px; margin:20px 0 28px}
  .hero-btns{flex-direction:column; align-items:stretch; gap:12px}
  .hero-btns .btn{width:100%}
  .hero-trust{gap:12px 20px; margin-top:34px}
  .hero-trust li{font-size:11.5px; width:100%}
  .hero-mark{display:none}
  .hero-bg img{object-position:62% 42%}
  .sec{padding:62px 0}
  .sec-head h2{font-size:clamp(27px,7.6vw,36px)}
  .sec-head p{font-size:15px}
  .hues{grid-template-columns:1fr; gap:16px}
  .hue{padding:28px 22px 26px}
  .hue-stone{width:132px; height:132px; margin:20px auto 18px}
  .hue-stone img{width:116px; height:116px}
  .svcs{grid-template-columns:1fr}
  .svc{padding:30px 24px}
  .why{grid-template-columns:1fr 1fr; gap:30px 18px}
  .why p{font-size:13px}
  .band .btn{width:100%; margin:0 0 12px}
  .frow{grid-template-columns:1fr; gap:0}
  .form{padding:26px 22px}
  .ft{padding-top:52px}
  .ft-top{grid-template-columns:1fr; gap:34px; padding-bottom:36px}
  .ft-bot{justify-content:flex-start; gap:4px 20px; padding-bottom:30px}
  .tl li{padding-left:34px}
}
@media (max-width:400px){
  .why{grid-template-columns:1fr}
}