:root{--ink:#14302e;--ink2:#2b4a47;--reed:#5f7a3a;--sail:#c4562b;--sand:#f6f1e7;--paper:#fffdf8;--line:#e3dccd;--muted:#5c6b68;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.6 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--sail);text-underline-offset:3px}a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--sail);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6em 1em;z-index:9}.skip:focus{left:8px;top:8px}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}.narrow{max-width:760px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}
.eyebrow{font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--reed);margin:0 0 1rem}
.eyebrow.light{color:#c9d9a7}
.h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}.intro{max-width:640px;color:var(--muted);font-size:1.08rem;margin:0 0 2.2rem}
/* header */
.top{position:sticky;top:0;z-index:5;background:rgba(255,253,248,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:66px;gap:1rem}
.brand{display:flex;align-items:center;gap:.55rem;font:700 1.22rem/1 var(--serif);color:var(--ink);text-decoration:none}
.brand .sail{width:30px;height:30px;color:var(--ink)}.brand.light,.brand.light .sail{color:#fff}
nav{display:flex;gap:1.5rem;align-items:center}nav a{color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:500}
nav a:hover{color:var(--sail)}
.navcta{background:var(--ink);color:#fff!important;padding:.55em 1.05em;border-radius:999px}.navcta:hover{background:var(--sail)}
/* buttons */
.btn{display:inline-block;background:var(--sail);color:#fff;font:600 1rem/1 var(--sans);padding:1em 1.5em;border-radius:999px;text-decoration:none;border:2px solid var(--sail);cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{background:#a8441d;border-color:#a8441d;color:#fff;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.sm{padding:.75em 1.15em;font-size:.92rem}
/* hero */
.hero{position:relative;background:linear-gradient(180deg,var(--sand),var(--paper));overflow:hidden;padding:72px 0 120px}
.hgrid{display:grid;grid-template-columns:1.25fr .9fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.3rem);margin-bottom:.4em}
.hero h1 em{font-style:italic;color:var(--sail);display:block}
.sub{font-size:1.18rem;color:var(--ink2);max-width:560px}
.ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.8rem 0}
.facts{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;color:var(--muted);font-size:.93rem}
.facts li:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--reed);margin-right:.5em;vertical-align:middle}
.reeds{position:absolute;left:0;right:0;bottom:0;height:90px;opacity:.9;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 60 Q150 40 300 58 T600 55 T900 60 T1200 52 V90 H0z' fill='%23dfe6d0'/%3E%3Cpath d='M0 72 Q200 58 400 70 T800 68 T1200 66 V90 H0z' fill='%2314302e' opacity='.12'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.mock{margin:0;display:flex;justify-content:center}
.phone{width:300px;background:var(--ink);border-radius:34px;padding:22px 16px 18px;box-shadow:0 30px 60px -20px rgba(20,48,46,.45),0 0 0 8px #0d2220;color:#fff;transform:rotate(2deg)}
.ptime{text-align:center;font-size:.8rem;opacity:.7;margin:0 0 14px}
.msg{border-radius:16px;padding:11px 13px;font-size:.88rem;line-height:1.45;margin-bottom:10px}
.msg b{display:block;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:3px}
.msg.in{background:#26443f;margin-right:26px;border-bottom-left-radius:4px}
.msg.out{background:var(--paper);color:var(--ink);margin-left:26px;border-bottom-right-radius:4px}
.link{display:inline-block;margin-top:8px;background:var(--sail);color:#fff;border-radius:999px;padding:.35em .9em;font-weight:600;font-size:.8rem}
.demo{text-align:center;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin:12px 0 0}
/* band */
.band{background:var(--ink);color:#e9efe8;padding:54px 0}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.band h2{font-size:1.3rem;color:#fff}.band p{margin:0;opacity:.82}
.band .three>div{border-left:3px solid var(--sail);padding-left:18px}
/* sections */
.sec{padding:92px 0}.tint{background:var(--sand)}
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pkg{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column}
.pkg.feat{border-color:var(--ink);box-shadow:0 18px 40px -22px rgba(20,48,46,.4)}
.pnum{font:600 .8rem/1 var(--sans);color:var(--reed);letter-spacing:.1em;margin:0 0 .8rem}
.pkg h3{font-size:1.45rem;margin-bottom:.3em}
.price{font:600 2.4rem/1 var(--serif);margin:.2em 0 .5em}.price span{font:500 .9rem var(--sans);color:var(--muted)}
.lead{color:var(--ink2);margin:0 0 1.1rem}
.ticks{list-style:none;padding:0;margin:0 0 1.2rem;flex:1}
.ticks li{display:flex;gap:.6rem;align-items:flex-start;padding:.38rem 0;font-size:.97rem}
.ticks svg{flex:none;width:18px;height:18px;margin-top:.22em;color:var(--reed)}
.ticks.big li{padding:.7rem 0;border-bottom:1px solid var(--line)}
.days{font-size:.88rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:1rem;margin:0}
.bundle{margin-top:26px;background:var(--ink);color:#fff;border-radius:20px;padding:28px 32px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.bundle h3{font-size:1.6rem;margin-bottom:.2em}.bundle p{margin:0;opacity:.85;max-width:620px}
.terms,.fine{font-size:.88rem;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:0 0 1.5rem 3.4rem}
.steps li:before{content:counter(s);position:absolute;left:0;top:-.15rem;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:grid;place-items:center;font:600 1.05rem var(--serif)}
.steps li:not(:last-child):after{content:"";position:absolute;left:1.1rem;top:2.3rem;bottom:.2rem;width:2px;background:var(--line)}
.straight{background:#fff;border-radius:20px;padding:30px;border:1px solid var(--line)}
.straight p{margin:0 0 1rem}.straight h3{font-size:1.5rem}
.exs,.res{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.res{grid-template-columns:repeat(2,1fr)}
.ex{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
.ex img{border-radius:12px;margin-bottom:1rem;border:1px solid var(--line)}
.ex h3{font-size:1.25rem}.ex p{color:var(--ink2);margin:0 0 1rem}
.tag{display:inline-block;font:700 .68rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--sail);background:#fbe9e0;padding:.5em .8em;border-radius:999px;margin-bottom:1rem}
/* enquiry */
.dark{background:var(--ink);color:#e9efe8}.dark .h2{color:#fff}.dark a{color:#f1a985}.dark a:hover{color:#fff}
.form{background:var(--paper);color:var(--ink);border-radius:20px;padding:30px;box-shadow:0 30px 60px -30px #000}
.form a{color:var(--sail)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
label{display:block;font-weight:600;font-size:.9rem;margin:.9rem 0 .35rem}
input,select,textarea{width:100%;font:inherit;font-size:1rem;padding:.7em .85em;border:1.5px solid #cfc7b6;border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(196,86,43,.25)}
.form .btn{width:100%;margin-top:.6rem}
/* docs */
.doc h1{font-size:clamp(2.2rem,4.5vw,3.2rem)}.doc h2{font-size:1.35rem;margin-top:2rem}.lede{font-size:1.18rem;color:var(--ink2)}
/* footer */
.foot{background:#0d2220;color:#b9c7c3;padding:56px 0 40px;font-size:.93rem}
.fgrid{display:grid;grid-template-columns:1.2fr 1.3fr 1fr;gap:40px}
.foot h2{font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 1rem}
.foot a{color:#fff}.foot .fine{color:#8fa29d}
/* responsive */
@media (max-width:900px){.hgrid,.two{grid-template-columns:1fr;gap:44px}.pkgs,.exs,.three,.fgrid{grid-template-columns:1fr}.hero{padding:48px 0 100px}.sec{padding:68px 0}.three{gap:26px}}
@media (max-width:640px){nav a:not(.navcta){display:none}.row{grid-template-columns:1fr}.res{grid-template-columns:1fr}.bundle{flex-direction:column;align-items:flex-start;padding:24px}.phone{width:270px;transform:none}body{font-size:16px}.ctas .btn{flex:1 1 100%;text-align:center}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
[id]{scroll-margin-top:80px}

.who{display:grid;grid-template-columns:200px 1fr;gap:56px;align-items:center;max-width:980px}
.who-mark{width:200px;height:200px;border-radius:50%;background:var(--ink);display:grid;place-items:center;box-shadow:inset 0 0 0 10px rgba(255,255,255,.08)}
.who-mark span{font:600 3.4rem/1 var(--serif);color:#f4ead6;letter-spacing:.04em}
.who-text{font-size:1.2rem;line-height:1.7;margin:0 0 1.2rem;max-width:62ch}
.who-sign{font-weight:600;color:var(--sail);margin:0}
@media (max-width:900px){.who{grid-template-columns:1fr;gap:28px;text-align:left}.who-mark{width:110px;height:110px}.who-mark span{font-size:2rem}}

/* hero demo animation */
.demo-mock{flex-direction:column;align-items:center;gap:12px}
.demo-flag{margin:0;font:700 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--sail);background:#fbe9e0;padding:.55em .9em;border-radius:999px}
.dphone{height:560px;display:flex;flex-direction:column;padding:16px 14px 16px}
.pbar{display:flex;justify-content:space-between;font-size:.72rem;opacity:.8;padding:0 6px 10px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:10px}
.pclock{font-weight:700}
.dstage{flex:1;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.dphone .msg{margin-bottom:8px;font-size:.82rem;padding:9px 12px}
.msg.short{align-self:flex-start}
.note{display:flex;align-items:center;gap:7px;font-size:.72rem;background:rgba(255,255,255,.08);border-radius:10px;padding:7px 10px;margin-bottom:8px}
.note b{color:#f1a985}.ndot{width:8px;height:8px;border-radius:50%;background:var(--sail)}
.typing{align-self:flex-end;background:var(--paper);border-radius:14px;padding:10px 14px;margin-bottom:8px;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink2);animation:dt 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dt{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.slots{display:flex;gap:6px;margin-top:8px}
.slot{border:1.5px solid var(--ink);border-radius:999px;padding:.25em .7em;font-weight:600;font-size:.76rem;transition:background .3s,color .3s,border-color .3s}
.cal,.inv{display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:14px;padding:9px 11px;margin-bottom:8px;font-size:.76rem;line-height:1.35}
.cal b,.inv b{display:block;font-size:.8rem}
.cicon{flex:none;width:34px;height:34px;border-radius:9px;background:var(--reed);color:#fff;display:grid;place-items:center;font:700 .62rem/1 var(--sans);letter-spacing:.06em}
.cicon.rust{background:var(--sail);font-size:.95rem}
.ctick{margin-left:auto;color:var(--reed);font-weight:700}
.caption{margin:8px 0 0;text-align:center;font-size:.74rem;color:#f4ead6;font-style:italic}
/* steps: without JS everything shows (final frame) */
.dphone.anim .d{display:none}
.dphone.anim[data-step="1"] .s1,.dphone.anim[data-step="2"] .s1,.dphone.anim[data-step="2"] .s2,.dphone.anim[data-step="3"] .s1,.dphone.anim[data-step="3"] .s3,.dphone.anim[data-step="4"] .s1,.dphone.anim[data-step="4"] .s3,.dphone.anim[data-step="4"] .s4,.dphone.anim[data-step="5"] .s1,.dphone.anim[data-step="5"] .s3,.dphone.anim[data-step="5"] .s4,.dphone.anim[data-step="5"] .s5,.dphone.anim[data-step="6"] .s1,.dphone.anim[data-step="6"] .s3,.dphone.anim[data-step="6"] .s4,.dphone.anim[data-step="6"] .s5,.dphone.anim[data-step="6"] .s6{display:block;animation:din .45s cubic-bezier(.2,.8,.2,1) both}
.dphone.anim .note.d,.dphone.anim .typing.d,.dphone.anim .cal.d,.dphone.anim .inv.d{}
.dphone.anim[data-step="2"] .s2,.dphone.anim[data-step="5"] .s5,.dphone.anim[data-step="6"] .s5,.dphone.anim[data-step="6"] .s6{display:flex}
.dphone.anim[data-step="1"] .s1.note,.dphone.anim[data-step="2"] .s1.note,.dphone.anim[data-step="3"] .s1.note,.dphone.anim[data-step="4"] .s1.note,.dphone.anim[data-step="5"] .s1.note,.dphone.anim[data-step="6"] .s1.note{display:flex}
.dphone .typing.d{display:none}.dphone.anim[data-step="2"] .typing{display:flex}
.dphone.anim[data-step="4"] .slot.pick,.dphone.anim[data-step="5"] .slot.pick,.dphone.anim[data-step="6"] .slot.pick,.dphone:not(.anim) .slot.pick{background:var(--sail);border-color:var(--sail);color:#fff}
.dphone.anim[data-step="5"] .caption,.dphone.anim[data-step="6"] .caption{display:block}
@keyframes din{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.dphone.reset .dstage,.dphone.reset .caption{opacity:0;transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.dphone .d{animation:none!important}.typing{display:none!important}}
@media (max-width:640px){.dphone{height:540px}}

/* example card mini demos */
.mini{background:var(--ink);color:#fff;border-radius:18px;padding:14px 14px 6px;margin:0 0 1.1rem;height:236px;overflow:hidden;box-shadow:0 14px 30px -18px rgba(20,48,46,.6)}
.mini .mtop{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 .74rem/1 var(--sans);color:#cfdcd8;opacity:1}
.mini .mtop span{font-weight:700;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sail);background:#fbe9e0;padding:.45em .7em;border-radius:999px}
.ex .mini p{color:inherit;margin:0 0 10px}
.mini .msg{font-size:.78rem;padding:8px 11px;margin-bottom:8px}.mini .msg.in{margin-right:18px}.mini .msg.out{margin-left:18px}
.mini .note,.mini .cal,.mini .inv{font-size:.74rem}
.mini .inv{justify-content:space-between}
.mic{flex:none;width:24px;height:24px;border-radius:50%;background:var(--reed);color:#fff;display:grid;place-items:center;font-weight:700}
.stars{flex:none;color:#e2a12b;letter-spacing:1px;font-size:.9rem}
.pill{flex:none;font-weight:700;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:.4em .7em;border-radius:999px}
.pill.late{background:#fbe9e0;color:var(--sail)}.pill.paid{background:#e4eed6;color:var(--reed)}
.mini .m1,.mini .m2,.mini .m3{animation:mloop 10s cubic-bezier(.2,.8,.2,1) infinite both}
.mini .m2{animation-name:mloop2}.mini .m3{animation-name:mloop3}
.exs .ex:nth-child(2) .mini *{animation-delay:.8s}.exs .ex:nth-child(3) .mini *{animation-delay:1.6s}
@keyframes mloop{0%{opacity:0;transform:translateY(8px)}5%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes mloop2{0%,20%{opacity:0;transform:translateY(8px)}26%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes mloop3{0%,42%{opacity:0;transform:translateY(8px)}48%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mini .m1,.mini .m2,.mini .m3{animation:none;opacity:1;transform:none}}
@media (max-width:900px){.mini{height:auto;padding-bottom:4px}}
/* QA polish 14 Oct */
.form .btn,.form .btn:hover{color:#fff;text-align:center;text-decoration:none}
.form .btn:hover{background:var(--ink);border-color:var(--ink)}
.brand,.navcta{white-space:nowrap}
h1,h2,h3{text-wrap:balance}p,li{text-wrap:pretty}
.foot li,.foot p a{line-height:1.5}
.foot ul a,.foot nav a{display:inline-block;padding:4px 0}
.mini .mbadge{display:inline-block;flex:none;margin-right:2px}
.mini .msg.in{background:#2f514b;color:#fff}.mini .msg.in b{color:#cfe0b3;opacity:1}
.mini .msg.out{background:var(--paper);color:var(--ink)}
@media (max-width:640px){.navcta .lg{display:none}.navcta{padding:.6em 1em;font-size:.92rem}.bar{gap:12px}.brand span{font-size:1.15rem}}
.foot p a{display:inline-block;padding:3px 0}
@media (max-width:400px){.eyebrow{letter-spacing:.1em;font-size:.72rem}}

/* live demos */
.dtabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 12px}
.dtab{border:1px solid #e3dccd;background:#fffdf8;color:#14302e;border-radius:99px;padding:9px 16px;font:600 14px Inter,system-ui,sans-serif;cursor:pointer}
.dtab small{font-weight:500;color:#5c6b68;margin-left:4px}
.dtab.on{background:#14302e;color:#fff;border-color:#14302e}.dtab.on small{color:#cfe0dc}
.dframe{position:relative;border:1px solid #e3dccd;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px -20px rgba(20,48,46,.45);background:#f6f1e7}
.dframe iframe{display:block;width:100%;height:min(820px,85vh);border:0}
.dflag{position:absolute;top:10px;right:12px;z-index:2;background:#c4562b;color:#fff;font:700 11px Inter,system-ui,sans-serif;letter-spacing:.06em;padding:5px 9px;border-radius:6px}
@media (max-width:700px){.dframe iframe{height:900px}}

/* founding */
.fbar{margin:0;background:#c4562b;color:#fff;text-align:center;font:600 14px Inter,system-ui,sans-serif;padding:9px 14px}.fbar a{color:#fff;text-decoration:none}.fbar a:hover{text-decoration:underline}
.found{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;background:#fffdf8;border:1px solid #e3dccd;border-left:6px solid #c4562b;border-radius:20px;padding:32px;box-shadow:0 18px 40px -24px rgba(20,48,46,.4)}
.fstatus{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px;color:#14302e;margin:16px 0 20px}
.fdot{width:14px;height:14px;border-radius:50%;background:#5f7a3a;display:inline-block}.fdot.taken{background:#e3dccd}.fstatus b{margin:0 4px}
.ftab{width:100%;border-collapse:collapse;font-size:15px}.ftab th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#5c6b68;border-bottom:1px solid #e3dccd;padding:8px 6px}
.ftab td{padding:10px 6px;border-bottom:1px solid #efe9dc}.ftab s{color:#8a9592}.ftab td b{color:#c4562b;font-size:17px}
@media (max-width:800px){.found{grid-template-columns:1fr;padding:22px}}