/* Tropic Web Design. Bright north Queensland: warm white, lagoon teal, a sunny yellow and a touch of coral. Geist only, Geist Mono for numbers. */
@font-face{font-family:"Geist";src:url(fonts/geist-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono-latin.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{
  color-scheme:light;
  --bg:#FFFCF6;--card:#FFFFFF;--bg2:#F7F2E7;--bg3:#EFE8D8;--sand:#F7F2E7;
  --acc:#0B7A72;--acc-l:#0A6B64;--acc-d:#08605A;--acc-ink:#FFFFFF;
  --lagoon:#2FC4B6;--teal-soft:#DDF3EF;--sun:#FFC93C;--sun-soft:#FFF0C2;--sun-ink:#3D2A00;--coral:#FF7A59;--coral-soft:#FFE5DC;--coral-d:#C4462A;--star:#F5A524;
  --tx:#12201F;--mu:#4A5856;--mu2:#5F6C69;--line:rgba(18,32,31,.09);--line2:rgba(18,32,31,.16);
  --cream:#12201F;--cmu:#4A5856;
  --amber-bg:#FFF4D6;--amber-bd:#D9982A;--amber-tx:#6E4300;
  --err:#B42318;
  --sh1:0 1px 2px rgba(18,32,31,.04),0 4px 12px rgba(18,32,31,.05);
  --sh2:0 2px 4px rgba(18,32,31,.04),0 12px 32px rgba(18,32,31,.08);
  --sh3:0 4px 8px rgba(18,32,31,.04),0 32px 80px rgba(18,32,31,.14);
  --e:cubic-bezier(.22,1,.36,1);--e2:cubic-bezier(.33,1,.68,1);--io:cubic-bezier(.65,0,.35,1);
  --sans:"Geist",ui-sans-serif,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;
  --wrap:1216px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:600;text-wrap:balance;letter-spacing:-.02em}
p,li,small,figcaption{text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.i{width:20px;height:20px;fill:currentColor;flex:none}
.mono{font-family:var(--mono);font-feature-settings:"tnum";letter-spacing:-.01em}
.wrap{width:min(100% - 32px,var(--wrap));margin-inline:auto}
@media(min-width:640px){.wrap{width:min(100% - 48px,var(--wrap))}}
@media(min-width:1024px){.wrap{width:min(100% - 64px,var(--wrap))}}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:16px;top:-64px;z-index:100;background:var(--acc);color:var(--acc-ink);padding:8px 12px;border-radius:8px;font-weight:600;transition:transform .3s var(--e)}
.skip:focus{transform:translateY(80px)}

/* Progress */
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:70;pointer-events:none}
.progress span{display:block;height:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border-radius:9999px;border:1px solid transparent;font-weight:600;font-size:16px;line-height:24px;text-decoration:none;white-space:nowrap;transition:transform .5s var(--e),background-color .3s var(--e),border-color .3s var(--e),color .3s var(--e),opacity .3s var(--e)}
.btn-lg{padding:12px 24px}
.btn-sm{font-size:14px;line-height:20px;padding:8px 12px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn-acc{background:var(--acc);color:var(--acc-ink);box-shadow:0 1px 2px rgba(11,122,114,.2),0 8px 24px rgba(11,122,114,.22)}
.btn-acc:hover{background:var(--acc-l)}
.btn-ghost{border-color:var(--line2);color:var(--tx);background:#FFFFFF;box-shadow:var(--sh1)}
.btn-glass{border-color:rgba(255,255,255,.3);color:#F1EEE6;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{border-color:rgba(18,32,31,.32);background:#FFFFFF}
.btn-ink{background:var(--warm);color:var(--tx)}
.btn-ink:hover{background:#000}
.btn-outline-ink{border-color:rgba(255,255,255,.3);color:var(--acc-ink)}
.btn-outline-ink:hover{background:rgba(255,255,255,.08)}
.btn .i{width:20px;height:20px}
.link-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:8px 0;color:var(--tx);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:6px;font-weight:600;font-size:14px;line-height:20px}
.link-btn .i{width:16px;height:16px;transition:transform .5s var(--e)}
.link-btn:hover .i{transform:translateX(4px)}
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.text-link .i{width:16px;height:16px}

/* Nav */
.nav-wrap{position:sticky;top:12px;z-index:50;display:flex;justify-content:center;padding:0 12px;margin-top:12px;height:0}
.nav{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-radius:9999px;background:rgba(255,255,255,.78);border:1px solid var(--line);box-shadow:var(--sh1);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);width:100%;max-width:960px;height:56px;transition:transform .5s var(--e),background-color .3s var(--e)}
.nav-wrap.down .nav{background:rgba(255,255,255,.92);box-shadow:var(--sh2)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;margin-right:auto}
.brand-mark{width:40px;height:auto}
.brand-word{width:96px;height:auto}
.nav-links{display:none}
.nav-cta{display:none}
.nav-call{display:grid;place-items:center;width:40px;height:40px;border-radius:9999px;background:var(--acc);color:var(--acc-ink);transition:transform .5s var(--e)}
.nav-call:hover{transform:scale(1.06)}
.nav-call:active{transform:scale(.98)}
.menu-toggle{position:relative;width:40px;height:40px;border-radius:9999px;border:1px solid var(--line2);background:transparent;padding:0}
.menu-toggle span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--tx);transition:transform .5s var(--e)}
.menu-toggle span:first-child{transform:translateY(-4px)}
.menu-toggle span:last-child{transform:translateY(4px)}
.menu-toggle[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
@media(min-width:1024px){
  .nav{width:auto;gap:4px;padding:8px 8px 8px 16px}
  .brand{margin-right:16px}
  .nav-links{display:flex;gap:4px}
  .nav-links a{display:block;padding:8px 12px;border-radius:9999px;font-size:14px;line-height:20px;font-weight:500;color:var(--mu);text-decoration:none;transition:color .3s var(--e),background-color .3s var(--e)}
  .nav-links a:hover{color:var(--tx);background:rgba(18,32,31,.05)}
  .nav-links a.on{color:var(--tx);background:rgba(18,32,31,.07)}
  .nav-cta{display:inline-flex;margin-left:8px}
  .menu-toggle{display:none}
}
.mobile-menu{position:fixed;inset:0;z-index:45;background:rgba(255,252,246,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:112px 24px 32px;display:flex;flex-direction:column;justify-content:space-between;opacity:0;transition:opacity .5s var(--e)}
.mobile-menu.open{opacity:1}
.mobile-menu ul li{opacity:0;transform:translateY(24px);transition:transform .5s var(--e),opacity .5s var(--e);transition-delay:calc(var(--n,0) * 50ms)}
.mobile-menu.open ul li{opacity:1;transform:none}
.mobile-menu ul a{display:block;padding:12px 0;font-size:30px;line-height:36px;font-weight:600;letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--line)}
.mm-foot{display:grid;gap:16px}
.mm-foot p{color:var(--mu);font-size:14px;line-height:20px;text-align:center}

/* Shared section bits */
section{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:600;color:var(--acc);margin-bottom:16px;letter-spacing:0}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:9999px;background:var(--sun);box-shadow:0 0 0 4px var(--sun-soft)}
.eyebrow .i{display:none}
.eyebrow .i{width:16px;height:16px}
.sec-head{max-width:680px;margin-bottom:48px}
.sec-head h2,section h2{font-size:36px;line-height:40px}
.lead{margin-top:16px;color:var(--mu);font-size:18px;line-height:28px;max-width:600px}
@media(min-width:768px){.sec-head h2,section h2{font-size:48px;line-height:1}}
.ph{background:var(--amber-bg);color:var(--amber-tx);border:1px dashed var(--amber-bd);border-radius:12px}
.ph-block{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;margin-top:24px;font-size:14px;line-height:20px;max-width:520px}
.ph-block b{display:block;font-weight:600}
.ph-block .i{width:20px;height:20px;margin-top:0}
.ph-inline{display:inline-block;background:var(--amber-bg);color:var(--amber-tx);border:1px dashed var(--amber-bd);border-radius:4px;padding:0 4px;font-size:12px;line-height:16px;font-weight:600}

/* Reveals */
.rv,.rv-card{opacity:0;transform:translateY(32px);filter:blur(4px);transition:opacity .8s var(--e2),transform .8s var(--e),filter .8s var(--e2)}
.rv-card{transform:translateY(24px) scale(.985);filter:blur(6px)}
.rv.in,.rv-card.in{opacity:1;transform:none;filter:none}
.no-js .rv,.no-js .rv-card{opacity:1;transform:none;filter:none}

/* FAQ */
.faq{background:var(--bg);padding:80px 0}
.faq-grid{display:grid;gap:40px}
.faq-list{display:grid;gap:8px}
.qa{background:#FFFFFF;box-shadow:var(--sh1);border:1px solid var(--line);border-radius:16px;transition:border-color .3s var(--e),opacity .8s var(--e2),transform .8s var(--e),filter .8s var(--e2)}
.qa[open]{border-color:var(--line2)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;font-weight:600;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa-ic{position:relative;width:24px;height:24px;flex:none;border-radius:9999px;background:var(--bg3)}
.qa-ic::before,.qa-ic::after{content:"";position:absolute;left:7px;right:7px;top:11px;height:2px;border-radius:2px;background:var(--tx);transition:transform .5s var(--e)}
.qa-ic::after{transform:rotate(90deg)}
.qa[open] .qa-ic::after{transform:rotate(0)}
.qa-a{padding:0 24px 16px;color:var(--mu)}
.faq .lead a{color:var(--tx);text-underline-offset:4px}
@media(min-width:1024px){.faq{padding:96px 0}.faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}.faq .sec-head{position:sticky;top:120px}}

/* QUOTE */
.quote{background:var(--card);padding:80px 0}
.q-grid{display:grid;gap:40px;align-items:start}
.call-card{display:inline-flex;align-items:center;gap:16px;margin-top:32px;padding:12px 24px 12px 12px;border-radius:9999px;background:#FFFFFF;box-shadow:var(--sh1);border:1px solid var(--line);text-decoration:none;transition:transform .5s var(--e),border-color .3s var(--e)}
.call-card:hover{transform:translateY(-2px);border-color:var(--line2)}
.cc-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:9999px;background:var(--acc);color:var(--acc-ink)}
.call-card small{display:block;color:var(--mu);font-size:12px;line-height:16px}
.call-card b{display:block;font-size:18px;line-height:28px;font-weight:600}
.q-card{background:#FFFFFF;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--sh2)}
#demo-form{display:grid;gap:24px}
.field{display:grid;gap:8px;min-width:0;border:0;margin:0;padding:0}
.field label,.field legend,.lbl{font-size:14px;line-height:20px;font-weight:600;padding:0}
.field small{font-weight:400;color:var(--mu2);margin-left:4px}
.field legend{margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;min-width:0;background:#FFFFFF;border:1px solid var(--line2);border-radius:12px;padding:12px 16px;font-size:16px;line-height:24px;transition:border-color .3s var(--e),background-color .3s var(--e)}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%234A5856'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.field textarea{resize:vertical;min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:var(--mu2)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(18,32,31,.32)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px rgba(11,122,114,.14)}
.field.bad input,.field.bad select{border-color:var(--err)}
.err{color:var(--err);font-size:14px;line-height:20px;min-height:0}
.err:empty{display:none}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick span{background:#FFFFFF;display:inline-flex;align-items:center;padding:8px 16px;border-radius:9999px;border:1px solid var(--line2);font-size:14px;line-height:20px;font-weight:500;color:var(--mu);transition:background-color .3s var(--e),color .3s var(--e),border-color .3s var(--e),transform .5s var(--e)}
.pick:hover span{border-color:rgba(18,32,31,.32);color:var(--tx)}
.pick:active span{transform:scale(.98)}
.pick input:checked + span{background:var(--acc);border-color:var(--acc-d);color:var(--acc-ink)}
.pick input:focus-visible + span{outline:2px solid var(--tx);outline-offset:2px}
.trade-pick.bad .pick span{border-color:var(--err)}
.row2{display:grid;gap:24px}
@media(min-width:640px){.row2{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:12px;background:var(--bg2);border:1px solid var(--line2)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:block;text-align:center;padding:8px;border-radius:8px;font-size:14px;line-height:20px;font-weight:500;color:var(--mu);transition:background-color .3s var(--e),color .3s var(--e)}
.seg input:checked + span{background:var(--tx);color:var(--bg2)}
.seg input:focus-visible + span{outline:2px solid var(--tx);outline-offset:2px}
.q-btn{position:relative;overflow:hidden;width:100%}
.q-load{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.5);transform-origin:0 50%;transform:scaleX(0)}
.q-btn.busy{pointer-events:none;opacity:.85}
.q-btn.busy .q-load{animation:qload .9s var(--io) forwards}
@keyframes qload{to{transform:scaleX(1)}}
.q-fine{color:var(--mu2);font-size:12px;line-height:16px;text-align:center}
.q-done{display:grid;gap:12px;justify-items:start;padding:24px 0}
.q-done h3{font-size:24px;line-height:32px}
.q-done p{color:var(--mu)}
.qd-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:9999px;background:var(--acc);color:var(--acc-ink)}
@media(min-width:1024px){.quote{padding:96px 0}.q-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px}.q-copy{position:sticky;top:120px}.q-card{padding:32px}}

/* FOOTER */
.foot{background:var(--sand);color:var(--mu);padding:80px 0 112px;font-size:14px;line-height:20px}
.foot-grid{display:grid;gap:40px}
.foot-brand{display:grid;gap:16px;max-width:320px}
.fb-mark{width:64px}
.fb-word{width:144px}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.foot a{text-decoration:none;transition:color .3s var(--e)}
.foot a:hover{color:var(--acc)}
.foot-ct{display:grid;gap:12px}
.foot-ct a{display:inline-flex;align-items:center;gap:8px}
.foot-ct .i{width:16px;height:16px}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line2);font-size:12px;line-height:16px}
@media(min-width:1024px){.foot{padding:64px 0 40px}.foot-grid{grid-template-columns:1.2fr 1fr .8fr}}

/* Callbar */
.callbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:9999px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line2);box-shadow:var(--sh2);transform:translateY(calc(100% + 24px));transition:transform .5s var(--e);padding-bottom:max(4px,env(safe-area-inset-bottom))}
.callbar.show{transform:none}
.callbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:9999px;font-weight:600;text-decoration:none;font-size:16px;line-height:24px}
.cb-call{background:var(--acc);color:var(--acc-ink)}
.cb-quote{color:var(--tx)}
@media(min-width:1024px){.callbar{display:none}}


/* ===== Brand ===== */
.logo{width:40px;height:40px;flex:none;display:block}
.brand{gap:12px}
.brand-word{width:auto;font-size:14px;line-height:20px;color:var(--mu);white-space:nowrap}
.brand-word b{color:var(--tx);font-weight:600}
@media(max-width:359px){.brand-word{display:none}}
.btn .i{transition:transform .5s var(--e)}
.btn:hover .i{transform:translateX(2px)}
.btn-acc:hover{background:var(--acc-l)}
.sec-head h2{font-weight:700;letter-spacing:-.035em}
.sec-c{margin-inline:auto;text-align:center}.sec-c .lead{margin-inline:auto}
@media(min-width:768px){.sec-head h2,section h2{font-size:48px;line-height:1.05}}
section:not(.hero):not(.tagline):not(.final){padding:96px 0}
@media(min-width:1024px){section:not(.hero):not(.tagline):not(.final){padding:144px 0}}

/* load ins (hero) */
.ld{opacity:0;transform:translateY(12px);filter:blur(4px);transition:transform 1.1s var(--e) var(--d,0s),opacity .8s var(--e2) var(--d,0s),filter .8s var(--e2) var(--d,0s)}
.ready .ld{opacity:1;transform:none;filter:none}
.no-js .ld{opacity:1;transform:none;filter:none}

/* ===== Hero ===== */
.hero{padding:136px 0 0;overflow:clip;background:var(--bg)}
.hero-sun{position:absolute;width:340px;height:340px;right:-170px;top:72px;fill:var(--sun-soft);pointer-events:none;will-change:transform}

@media(min-width:768px){.hero-sun{width:520px;height:520px;right:-200px;top:40px}}
@media(min-width:1024px){.hero{padding-top:152px}.hero-sun{width:640px;height:640px;right:-120px;top:24px}}
.hero-copy{position:relative;display:grid;justify-items:center;text-align:center}
.hero-eye{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:9999px;background:#FFFFFF;border:1px solid var(--line);box-shadow:var(--sh1);font-size:14px;line-height:20px;font-weight:500;color:var(--mu)}
.hero-eye .dot{width:20px;height:20px;border-radius:9999px;background:var(--teal-soft);position:relative}
.hero-eye .dot::after{content:"";position:absolute;inset:6px;border-radius:9999px;background:var(--acc)}
.hero-h{margin-top:24px;max-width:960px;font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.045em;color:var(--tx)}
@media(min-width:768px){.hero-h{font-size:60px;line-height:1}}
@media(min-width:1024px){.hero-h{font-size:76px;line-height:1}}
.br-d{display:none}@media(min-width:768px){.br-d{display:inline}}
.hero-h .w{display:inline-block;opacity:0;transform:translateY(.32em);filter:blur(6px);transition:transform 1s var(--e) calc(var(--i)*55ms + .1s),opacity .7s var(--e2) calc(var(--i)*55ms + .1s),filter .7s var(--e2) calc(var(--i)*55ms + .1s)}
.hero-h.go .w,.no-js .hero-h .w{opacity:1;transform:none;filter:none}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-h .w{background-image:linear-gradient(90deg,#12201F 0%,#12201F 38%,#0B7A72 100%);background-size:var(--gw,100%) 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.06em}
}
.hero-sub{margin-top:24px;max-width:620px;font-size:18px;line-height:28px;color:var(--mu);text-wrap:pretty}
@media(min-width:1024px){.hero-sub{font-size:20px;line-height:30px}}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.hero-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:28px;font-size:14px;line-height:20px;color:var(--mu)}
.hero-proof li{display:inline-flex;align-items:center;gap:6px}
.hero-proof .i{width:18px;height:18px;color:var(--acc)}

/* three promises under the hero */
.promise{position:relative;margin-top:64px}
@media(min-width:1024px){.promise{margin-top:80px}}
.pm-card{position:relative;display:grid;max-width:1040px;margin-inline:auto;background:#FFFFFF;border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh2)}
.pm{display:grid;grid-template-columns:44px 1fr;column-gap:16px;row-gap:4px;padding:24px}
.pm+.pm{border-top:1px solid var(--line)}
.pm-ic{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--teal-soft);color:var(--acc)}
.pm:nth-child(2) .pm-ic{background:var(--sun-soft);color:var(--sun-ink)}
.pm:nth-child(3) .pm-ic{background:var(--coral-soft);color:var(--coral-d)}
.pm-ic .i{width:22px;height:22px}
.pm-big{font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.02em;color:var(--tx)}
.pm-big .mono{font-weight:600;letter-spacing:-.03em}
.pm p{font-size:15px;line-height:23px;color:var(--mu);text-wrap:pretty}
.pm p .mono{color:var(--tx)}
.pm a{color:var(--acc-l);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap}
.pm a:hover{color:var(--acc)}
@media(min-width:900px){.pm-card{grid-template-columns:repeat(3,1fr)}.pm{grid-template-columns:1fr;row-gap:8px;padding:32px}.pm-ic{grid-row:auto;margin-bottom:12px}.pm+.pm{border-top:0;border-left:1px solid var(--line)}.pm-big{font-size:22px;line-height:30px}}

/* ===== Includes ===== */
.inc{background:var(--bg)}
.feats{display:grid;gap:16px}
@media(min-width:768px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.feats{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.ft-wide{grid-column:span 2}}
.ft{display:grid;align-content:start;gap:12px;padding:28px;border-radius:24px;background:#FFFFFF;border:1px solid var(--line);box-shadow:var(--sh1);transition:opacity .8s var(--e2),transform .8s var(--e),filter .8s var(--e2),box-shadow .5s var(--e2),border-color .5s var(--e2)}
.ft.in:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--line2)}
.ft h3{margin-top:12px;font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.02em}
.ft p{color:var(--mu);text-wrap:pretty}
.ft-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px}
.ft-ic .i{width:24px;height:24px}
.t1{background:var(--teal-soft);color:var(--acc)}.t2{background:var(--sun-soft);color:#8A5A00}.t3{background:var(--coral-soft);color:var(--coral-d)}
.ft-wide{background:var(--teal-soft);border-color:transparent;box-shadow:none}
.ft-wide .ft-ic{background:#FFFFFF}
.ft-wide h3{font-size:24px;line-height:32px}
.ft-wide p{color:#2E4A47;max-width:420px}

/* ===== Tagline (B11) ===== */
.tagline{background:var(--sand);padding:112px 0}
@media(min-width:1024px){.tagline{padding:160px 0}}
.tl-text{max-width:960px;font-size:36px;line-height:40px;font-weight:700;letter-spacing:-.04em;text-wrap:balance}
@media(min-width:768px){.tl-text{font-size:52px;line-height:1.05}}
@media(min-width:1024px){.tl-text{font-size:64px;line-height:1.02}}
.tw{color:rgba(18,32,31,.16);transition:color .7s var(--e)}
.tw.on{color:var(--tx)}
.tw.hl.on{color:var(--acc)}
.tw.hm.on{color:var(--coral-d)}

/* ===== How ===== */
.how{background:var(--bg)}
.how-grid{display:grid;gap:48px}
@media(min-width:1024px){.how-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:start}.how .sec-head{position:sticky;top:128px}}
.how-cta{margin-top:32px}
.steps{position:relative;display:grid;gap:16px;padding-left:44px}
.steps::before,.steps::after{content:"";position:absolute;left:13px;top:24px;bottom:24px;width:2px;border-radius:2px;background:var(--bg3)}
.steps::after{background:var(--acc);transform-origin:50% 0;transform:scaleY(var(--rp,0))}
.step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:16px;padding:28px;border-radius:24px;background:#FFFFFF;border:1px solid var(--line);box-shadow:var(--sh1);transition:border-color .5s var(--e2),box-shadow .5s var(--e2)}
.step::before{content:"";position:absolute;left:-38px;top:32px;width:16px;height:16px;border-radius:9999px;background:var(--bg);border:2px solid var(--bg3);transition:background-color .5s var(--e2),border-color .5s var(--e2),transform .7s var(--e)}
.step.on{border-color:rgba(11,122,114,.28);box-shadow:var(--sh2)}
.step.on::before{background:var(--acc);border-color:var(--acc);transform:scale(1.15)}
.st-n{font-size:14px;line-height:28px;font-weight:600;color:var(--acc)}
.step h3{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.02em}
.step p{margin-top:8px;color:var(--mu);text-wrap:pretty}

/* ===== Pricing ===== */
.pricing{background:var(--sand)}
.plans{display:grid;gap:20px;max-width:960px;margin-inline:auto}
@media(min-width:768px){.plans{grid-template-columns:1fr 1fr}}
.plan{display:grid;align-content:start;gap:4px;padding:32px;border-radius:28px;background:#FFFFFF;border:1px solid var(--line);box-shadow:var(--sh1)}
.plan-rec{border:2px solid var(--acc);box-shadow:var(--sh3)}
.pl-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
.pl-top h3{font-size:18px;line-height:28px;font-weight:600}
.pl-badge{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:9999px;background:var(--sun);color:var(--sun-ink);font-size:12px;line-height:16px;font-weight:600}
.pl-price{display:flex;align-items:baseline;gap:8px;margin-top:20px}
.pl-price .mono{font-size:60px;line-height:1;font-weight:600;letter-spacing:-.05em}
.pl-price b{font-weight:600}
.pl-price small{font-size:16px;color:var(--mu)}
.pl-plus{margin-top:8px;color:var(--mu)}
.pl-plus b{color:var(--tx);font-weight:600}
.pl-sum{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);color:var(--mu);text-wrap:pretty}
.pl-list{display:grid;gap:12px;margin-top:20px}
.pl-list li{display:flex;align-items:center;gap:10px}
.pl-list .i{width:20px;height:20px;padding:3px;border-radius:9999px;background:var(--teal-soft);color:var(--acc);box-sizing:border-box}
.pl-btn{margin-top:28px;justify-content:center}
.pl-foot{display:grid;justify-items:center;gap:0;margin-top:40px;text-align:left}
.pl-foot>p:first-child{display:flex;align-items:flex-start;gap:8px;max-width:640px;color:var(--mu)}
.pl-foot>p:first-child .i{color:var(--acc);margin-top:2px}
.pl-foot b{color:var(--tx);font-weight:600}
.pl-foot .ph-block b{color:var(--amber-tx)}

/* ===== Work ===== */
.work{background:var(--bg)}
.kelso{display:grid;gap:40px;padding:32px;border-radius:32px;background:var(--teal-soft);overflow:hidden}
@media(min-width:1024px){.kelso{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;padding:56px;align-items:center}}
.kx-tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:9999px;background:var(--sun);color:var(--sun-ink);font-size:12px;line-height:16px;font-weight:600}
.kx-copy h3{margin-top:16px;font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.03em}
.kx-copy p{margin-top:12px;color:#2E4A47;max-width:440px;text-wrap:pretty}
.kx-feat{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 32px}
.kx-feat li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;background:#FFFFFF;font-size:14px;line-height:20px}
.kx-feat .i{width:16px;height:16px;color:var(--acc)}
.kx-shots{position:relative;display:grid;gap:16px}
.kx-shot{border-radius:14px;background:#FFFFFF;border:1px solid var(--line);box-shadow:var(--sh2);overflow:hidden}
.sf-dots{display:inline-flex;gap:6px;flex:none}.sf-dots i{border-radius:9999px;background:#FF7A59}.sf-dots i:nth-child(2){background:#FFC93C}.sf-dots i:nth-child(3){background:#2BB3A3}
.kx-shot .sf-dots{display:flex;padding:10px 12px;border-bottom:1px solid var(--line)}
.kx-shot .sf-dots i{width:8px;height:8px}
.kx-shot img{display:block;width:100%;height:auto}
@media(min-width:1024px){.kx-shot.s2{margin-left:48px;margin-right:-24px}}

/* recent builds gallery */
.gal{margin-top:96px}
.gal-head{display:grid;gap:8px;max-width:640px;margin-bottom:32px}
.gal-head h3{font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.03em}
.gal-head p{color:var(--mu)}
.gal-grid{display:grid;gap:24px}
@media(min-width:768px){.gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.gal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gx-card{display:grid;gap:12px}
.gx-frame{border-radius:14px;background:#FFFFFF;border:1px solid var(--line);box-shadow:var(--sh1);overflow:hidden;transition:box-shadow .5s var(--e2),transform .6s var(--e)}
.gx-frame .sf-dots{display:flex;padding:10px 12px;border-bottom:1px solid var(--line)}
.gx-frame .sf-dots i{width:8px;height:8px}
.gx-frame img{display:block;width:100%;height:auto}
.gx-card.in:hover .gx-frame{transform:translateY(-4px);box-shadow:var(--sh2)}
.gx-card figcaption{font-size:14px;line-height:20px;color:var(--mu)}
.gx-card figcaption b{display:block;color:var(--tx);font-weight:600;font-size:16px;line-height:24px}

.soon{display:grid;gap:16px;margin-top:48px}
@media(min-width:768px){.soon{grid-template-columns:1fr 1fr}}
.soon-card{display:grid;justify-items:start;gap:8px;padding:24px;border-radius:20px}
.soon-ic .i{width:24px;height:24px}
.soon-card p{font-size:14px;line-height:20px}

/* ===== About ===== */
.about{background:var(--sand)}
.ab-grid{display:grid;gap:48px;align-items:center}
@media(min-width:1024px){.ab-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px}}
.ab-card{padding:16px;border-radius:28px;background:#FFFFFF;border:1px solid var(--line);box-shadow:var(--sh2);max-width:460px}
.ab-logo{position:relative;display:grid;place-content:center;justify-items:center;aspect-ratio:4/5;border-radius:18px;text-align:center;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#FFFFFF 0%,var(--teal-soft) 55%,#C9EDE6 100%)}
.ab-logo::before{content:"";position:absolute;width:70%;aspect-ratio:1;left:50%;top:14%;transform:translateX(-50%);border-radius:9999px;background:var(--sun-soft);opacity:.7}
.ab-logo-mark{position:relative;display:block;width:clamp(128px,42%,184px);aspect-ratio:1;border-radius:22%;box-shadow:0 1px 2px rgba(18,32,31,.08),0 18px 40px -12px rgba(11,122,114,.45)}
.ab-logo-mark .logo{display:block;width:100%;height:100%}
.ab-logo-word{position:relative;margin-top:28px;font-size:26px;line-height:32px;letter-spacing:-.03em;color:var(--tx);font-weight:400}
.ab-logo-word b{font-weight:700}
.ab-logo-sub{position:relative;margin-top:6px;font-size:14px;line-height:20px;color:var(--acc-l);font-weight:600}
.ab-who{display:flex;align-items:center;gap:12px;padding:16px 8px 4px}
.ab-who>span:nth-child(2){display:grid;flex:1}
.ab-who b{font-weight:600}.ab-who small{font-size:14px;line-height:20px;color:var(--mu)}
.av{display:grid;place-items:center;width:44px;height:44px;border-radius:9999px;background:var(--acc);color:#FFFFFF;font-weight:600}
.ab-tel{font-size:14px;color:var(--acc);text-decoration:none;font-weight:600}
.ab-copy .lead+.lead{margin-top:16px}
.ab-trades{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.ab-trades li{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:9999px;background:#FFFFFF;border:1px solid var(--line);font-size:14px;line-height:20px}
.ab-trades .i{width:16px;height:16px;color:var(--acc)}

/* ===== FAQ / contact ===== */
.faq{background:var(--bg)}
@media(min-width:1024px){.faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px}.faq .sec-head{position:sticky;top:128px;align-self:start}}
.contact{background:var(--sand)}
@media(min-width:1024px){.q-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px}}
.ct-area{display:flex;align-items:center;gap:8px;margin-top:24px;color:var(--mu);font-size:14px;line-height:20px}
.ct-area .i{width:16px;height:16px;color:var(--acc)}
.cc-ic{background:var(--acc)!important;color:#FFFFFF!important}
.q-noemail code{font-family:var(--mono);font-size:12px}
.q-done .btn{margin-top:8px}

/* ===== Final scene ===== */
.final{background:var(--bg);padding:128px 0 0;overflow:clip;text-align:center}
.fn-copy{display:grid;justify-items:center;gap:32px}
.fn-copy h2{max-width:760px;font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.045em}
@media(min-width:768px){.fn-copy h2{font-size:60px;line-height:1}}
.fn-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
.scene{display:block;width:100%;height:220px;margin-top:64px}
@media(min-width:1024px){.scene{height:320px}}
.sc-sun{fill:var(--sun);transform-box:view-box;transform:translateY(calc(var(--sp,0) * 120px));transition:transform .2s linear}
.sc-isl{fill:#9ED9CF}.sc-hill{fill:#7CCBBE}.sc-sea{fill:#2FB3A6}
.sc-wv{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;opacity:.55}
.sc-wv.w2{opacity:.35}
.final.play .w1{animation:drift 9s linear infinite}.final.play .w2{animation:drift 13s linear infinite reverse}
@keyframes drift{to{transform:translateX(-160px)}}

/* footer */
.foot .logo{width:48px;height:48px}
.foot-brand p{color:var(--mu)}
.foot-brand b{color:var(--tx);font-weight:600}
.foot-nav a{color:var(--tx)}
.foot-ct{color:var(--tx)}
.foot-ct a,.foot-ct span{display:inline-flex;align-items:center;gap:8px}
.foot-ct .i{width:16px;height:16px;color:var(--acc)}

/* ===== Reduced motion: final states, no movement ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .ld,.hero-h .w,.rv,.rv-card{opacity:1!important;transform:none!important;filter:none!important}
  .hero-sun{transform:none!important}
}