/* blauw. Dutch lessons with Tanya. White + cobalt, orange is reserved for booking actions. */
*{box-sizing:border-box;margin:0;padding:0;font-feature-settings:"locl" 0}
:root{
  --bg:#F4F7FC;--card:#fff;--ink:#0B1A3C;--muted:#5A6A8A;--blue:#2350E0;--sky:#E3EBFB;--line:#DCE4F2;
  --go:#F2650A;--go-d:#D95606;--ok:#1EB980;--soft:#8FB0FF;
  --w:1120px;--r:22px;
}
html{scroll-behavior:smooth;background:var(--bg)}
body{font-family:Onest,system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
em{font-family:Lora,serif;font-style:italic;font-weight:500;color:var(--blue);letter-spacing:-.02em}
:focus-visible{outline:3px solid var(--soft);outline-offset:3px;border-radius:8px}

/* language: both versions live in the markup, the html[data-lang] attribute shows one */
html[data-lang="en"] [data-l="bg"],html[data-lang="bg"] [data-l="en"]{display:none!important}

.wrap{width:min(var(--w),100% - 40px);margin-inline:auto}
.narrow{width:min(760px,100% - 40px);margin-inline:auto}
section{padding:88px 0}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
h1{font-size:clamp(44px,7.4vw,92px);line-height:.98;letter-spacing:-.05em;font-weight:600;text-wrap:balance}
h2{font-size:clamp(32px,4.4vw,52px);line-height:1.04;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
h3{font-size:19px;font-weight:600;letter-spacing:-.02em}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted);line-height:1.5;text-wrap:pretty}
.sh{max-width:640px;margin-bottom:40px}
.sh h2{margin-top:12px}
.sh .lead{margin-top:14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 26px;border-radius:16px;font-weight:600;font-size:16px;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.go{background:var(--go);color:#fff;box-shadow:0 16px 30px -14px rgba(242,101,10,.8)}
.btn.go:hover{background:var(--go-d)}
.btn.go .ar{transition:transform .15s}
.btn.go:hover .ar{transform:translateX(4px)}
.btn.s{background:#fff;border:1px solid var(--line)}
.btn.s:hover{border-color:var(--blue)}
.btn.big{height:66px;padding:0 34px;font-size:18px;border-radius:18px}
.btn.full{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* header */
.hd{position:sticky;top:0;z-index:50;background:rgba(244,247,252,.85);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.hd.scrolled{border-color:var(--line)}
.hd .in{display:flex;align-items:center;gap:28px;height:72px}
.logo{font-weight:700;font-size:26px;letter-spacing:-.04em}
.logo i{font-style:normal;color:var(--blue)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:8px 14px;border-radius:99px;font-size:15px;font-weight:500;color:var(--muted);transition:color .15s,background .15s}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);background:#fff;box-shadow:0 0 0 1px var(--line)}
.lang{display:flex;border:1px solid var(--line);border-radius:99px;padding:3px;background:#fff;font-size:12.5px;font-weight:600}
.lang button{padding:5px 10px;border-radius:99px;color:var(--muted)}
.lang button.on{background:var(--ink);color:#fff}
.hd .btn{height:44px;padding:0 18px;font-size:14.5px;border-radius:12px;box-shadow:none}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;place-items:center}
.burger b{display:block;width:16px;height:1.6px;background:var(--ink);box-shadow:0 5px 0 var(--ink),0 -5px 0 var(--ink);transition:.2s}
.burger b{position:relative}
.menu-open .burger b{box-shadow:none;transform:rotate(45deg)}
.menu-open .burger b::after{content:"";position:absolute;left:0;top:0;width:16px;height:1.6px;background:var(--ink);transform:rotate(90deg)}
.sheet{display:none}

/* hook */
.hook{min-height:calc(100svh - 72px);display:grid;align-items:center;padding:40px 0 80px}
.hook .eyebrow{display:block;margin-bottom:22px}
.hook h1 em{display:block}
.hook .lead{max-width:520px;margin:28px 0 40px}
.hook .act{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.fine{font-size:14px;color:var(--muted)}
.fine b{color:var(--ink);font-weight:600}
.tick{display:inline-flex;align-items:center;gap:8px}
.tick::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%232350E0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/100%}

/* goals */
.goals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.goal{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;min-height:210px;transition:border-color .15s,transform .15s,box-shadow .15s}
.goal:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(35,80,224,.6)}
.goal .ic{width:52px;height:52px;border-radius:14px;background:var(--sky);display:grid;place-items:center;color:var(--blue);font-weight:700;font-size:14px;margin-bottom:auto}
.goal h3{margin-top:22px}
.goal p{font-size:14.5px;color:var(--muted);margin-top:4px}
.goal .go-a{margin-top:14px;font-size:14px;font-weight:600;color:var(--blue)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.step{padding:28px 28px 0 0}
.step+.step{padding-left:28px;border-left:1px solid var(--line)}
.step .n{font-size:56px;font-weight:500;letter-spacing:-.05em;color:var(--blue);line-height:1}
.step h3{margin-top:18px;font-size:21px}
.step p{color:var(--muted);margin-top:6px;font-size:15.5px}

/* dark band */
.band{background:var(--ink);color:#fff;border-radius:32px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.band .eyebrow{color:var(--soft)}
.band h2{margin:12px 0 14px}
.band h2 em{color:var(--soft)}
.band p{color:#AFC0E6}
.band .btn{margin-top:26px}
.sample{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:24px}
.sample .q{font-size:24px;letter-spacing:-.02em;margin-bottom:16px}
.sample .q u{text-decoration:none;display:inline-block;min-width:70px;border-bottom:2px solid var(--soft)}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opts button,.opts a{text-align:center;padding:13px 6px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-weight:500;color:#fff;transition:.15s}
.opts button:hover{border-color:var(--soft)}
.opts .pick{background:var(--blue);border-color:var(--blue)}

/* reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column}
.rev p{font-size:17px;line-height:1.45;letter-spacing:-.01em}
.rev .who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px;font-size:13.5px;color:var(--muted)}
.rev .who span{width:38px;height:38px;border-radius:50%;background:var(--sky);display:grid;place-items:center;color:var(--blue);font-weight:600}
.rev .who b{color:var(--ink);display:block;font-size:14.5px}
.res{align-self:flex-start;font-size:12.5px;font-weight:600;color:#0F8F61;background:rgba(30,185,128,.12);padding:4px 10px;border-radius:99px;margin-bottom:14px}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-weight:400;font-size:20px;color:var(--blue);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{color:var(--muted);padding:0 54px 24px 0;max-width:680px}

/* final cta */
.final{text-align:center;padding:110px 0 120px}
.final h2{font-size:clamp(38px,6vw,76px);margin-bottom:34px}
.final .fine{margin-top:16px}

/* page head */
.ph{padding:64px 0 8px}
.ph h1{font-size:clamp(40px,6vw,72px);margin:14px 0 18px}
.ph .lead{max-width:560px}

/* pricing */
.seg{display:inline-grid;grid-auto-flow:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:5px;margin:34px 0 26px;font-size:15px;font-weight:600}
.seg button{padding:11px 22px;border-radius:12px;color:var(--muted);transition:.15s}
.seg button.on{background:var(--sky);color:var(--blue)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px;position:relative;display:flex;flex-direction:column}
.plan h3{font-size:21px}
.plan .per{font-size:14px;color:var(--muted)}
.plan .price{font-size:54px;font-weight:600;letter-spacing:-.05em;margin:18px 0 2px;line-height:1}
.plan .each{font-size:14.5px;color:var(--muted)}
.plan .save{font-size:13.5px;font-weight:600;color:#0F8F61;margin-top:6px;min-height:20px}
.plan ul{list-style:none;margin:22px 0 26px;display:grid;gap:10px;font-size:15px}
.plan li{display:flex;gap:10px}
.plan li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%232350E0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/100%}
.plan .btn{margin-top:auto;white-space:normal;text-align:center;height:auto;min-height:56px;padding:12px 16px}
.plan.star{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 34px 60px -34px rgba(11,26,60,.9)}
.plan.star .per,.plan.star .each{color:#AFC0E6}
.plan.star .save{color:#6BE3B4}
.plan.star li::before{background-color:rgba(143,176,255,.2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%238FB0FF' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.badge{position:absolute;top:-13px;left:28px;background:var(--blue);color:#fff;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:99px}
.guar{display:flex;gap:18px;align-items:center;padding:24px 28px;border-radius:24px;background:var(--sky);margin-top:18px}
.guar .ic{flex:none;width:52px;height:52px;border-radius:50%;background:var(--blue);display:grid;place-items:center}
.guar p{color:var(--muted);font-size:15px}
.pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.pay > span{font-size:13px;font-weight:600;padding:7px 12px;border-radius:10px;background:#fff;border:1px solid var(--line)}

/* about */
.about{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.about .photo{border-radius:32px;aspect-ratio:1/1.1;background:#cfd8ea center 30%/cover;position:relative}
.about .photo > span{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:16px;padding:12px 16px;font-size:13.5px;color:var(--muted)}
.about .photo span b{display:block;color:var(--ink);font-size:15px}
.story{font-size:20px;line-height:1.5;letter-spacing:-.01em}
.story p+p{margin-top:16px;color:var(--muted);font-size:17px}
.sig{font-family:Lora,serif;font-style:italic;font-size:30px;color:var(--blue);margin-top:22px}
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.creds div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}
.creds b{display:block;font-size:34px;letter-spacing:-.04em;font-weight:600;color:var(--blue);line-height:1.1}
.creds span{font-size:14.5px;color:var(--muted);line-height:1.35;display:block;margin-top:6px}

/* booking */
.book{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:start;padding:34px 0 100px}
.panel{background:#fff;border:1px solid var(--line);border-radius:26px;padding:26px}
.panel h3{margin-bottom:16px}
.stepno{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:600;margin-right:10px}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{padding:10px 0;border-radius:14px;text-align:center;font-size:12px;color:var(--muted);border:1px solid transparent;transition:.12s}
.day b{display:block;font-size:19px;color:var(--ink);font-weight:600}
.day small{display:block;font-size:11px}
.day:hover{border-color:var(--line)}
.day.off{opacity:.35;pointer-events:none}
.day.sel{background:var(--blue);color:#CFDBFF}
.day.sel b{color:#fff}
.calnav{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:600}
.calnav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);color:var(--muted)}
.calnav button:hover{border-color:var(--blue);color:var(--blue)}
.calnav button[disabled]{opacity:.3;pointer-events:none}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.slot{padding:13px 0;border-radius:12px;border:1px solid var(--line);font-weight:600;font-size:15px;transition:.12s}
.slot:hover{border-color:var(--blue)}
.slot.pick{border-color:var(--blue);background:var(--sky);color:var(--blue);box-shadow:0 0 0 1.5px var(--blue) inset}
.slot.gone{color:#B5C0D6;text-decoration:line-through;font-weight:500;pointer-events:none}
.tz{font-size:13px;color:var(--muted);margin-top:12px}
.lbl{display:block;font-size:14px;font-weight:600;margin:20px 0 9px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{font-size:14px;padding:9px 14px;border-radius:99px;background:#fff;border:1px solid var(--line);transition:.12s}
.chips button:hover{border-color:var(--ink)}
.chips button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.field{width:100%;height:54px;border-radius:14px;background:var(--bg);border:1px solid var(--line);padding:0 16px;font:inherit;color:var(--ink);margin-bottom:10px}
.field:focus{outline:0;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px var(--sky)}
.field.err{border-color:#E5484D}
.summary{position:sticky;top:96px}
.sumrow{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.sumrow span{color:var(--muted)}
.sumrow b{font-weight:600;text-align:right}
.done{text-align:center;padding:70px 0 110px}
.done .ok{width:84px;height:84px;border-radius:50%;background:rgba(30,185,128,.14);display:grid;place-items:center;margin:0 auto 26px}
.done h1{font-size:clamp(38px,5.4vw,64px)}
.done .card{display:inline-block;text-align:left;background:#fff;border:1px solid var(--line);border-radius:22px;padding:8px 24px;margin:30px 0;min-width:min(420px,100%)}

/* level test */
.quiz{background:var(--ink);color:#fff;border-radius:32px;padding:clamp(24px,4vw,48px);margin:30px 0 100px}
.quiz .prog{height:6px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden;margin-bottom:30px}
.quiz .prog i{display:block;height:100%;background:var(--soft);border-radius:9px;transition:width .3s}
.quiz .cnt{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.quiz .q{font-size:clamp(24px,3.4vw,38px);letter-spacing:-.03em;font-weight:600;margin:12px 0 8px;line-height:1.15}
.quiz .hint{color:#AFC0E6;margin-bottom:26px}
.quiz .opts{grid-template-columns:repeat(3,1fr);gap:10px}
.quiz .opts button{padding:18px 8px;font-size:17px}
.quiz .result b.lv{display:block;font-size:clamp(70px,12vw,130px);font-weight:600;letter-spacing:-.06em;line-height:1;color:var(--soft)}
.quiz .result p{color:#AFC0E6;max-width:520px;margin:14px 0 28px;font-size:18px}
.quiz .result .act{display:flex;gap:12px;flex-wrap:wrap}
.quiz .result .btn.s{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}

/* footer */
footer{border-top:1px solid var(--line);padding:44px 0 50px;color:var(--muted);font-size:14.5px}
footer .in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
footer .cols{display:flex;gap:56px;flex-wrap:wrap}
footer b{display:block;color:var(--ink);font-weight:600;margin-bottom:8px}
footer a{display:block;padding:3px 0}
footer a:hover{color:var(--blue)}
.demo{margin-top:30px;font-size:12.5px;opacity:.75}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
/* the hook and page heads animate on load, without waiting for the scroll observer */
@keyframes up{from{opacity:0;transform:translateY(22px)}}
.hook .rv,.ph .rv{opacity:1;transform:none;transition:none;animation:up .8s cubic-bezier(.2,.7,.2,1) both}
.hook .rv.d1,.ph .rv.d1{animation-delay:.08s}.hook .rv.d2,.ph .rv.d2{animation-delay:.16s}.hook .rv.d3,.ph .rv.d3{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){.rv,.hook .rv,.ph .rv{opacity:1;transform:none;transition:none;animation:none}html{scroll-behavior:auto}}

/* sticky mobile booking bar (appears after the hook has scrolled away) */
.bar{display:none}

@media (max-width:980px){
  .goals{grid-template-columns:repeat(2,1fr)}
  .revs,.plans{grid-template-columns:1fr}
  .band,.about,.book{grid-template-columns:1fr}
  .creds{grid-template-columns:repeat(2,1fr)}
  .summary{position:static}
}
@media (max-width:760px){
  section{padding:60px 0}
  .nav,.hd .btn{display:none}
  .burger{display:grid}
  .hd .in{height:64px;gap:12px}
  .lang{margin-left:auto}
  .sheet{display:block;position:fixed;inset:64px 0 0;z-index:49;background:var(--bg);padding:24px 20px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:.2s}
  .menu-open .sheet{transform:none;opacity:1;pointer-events:auto}
  .sheet a.l{display:block;font-size:32px;font-weight:600;letter-spacing:-.04em;padding:12px 0;border-bottom:1px solid var(--line)}
  .sheet .btn{margin-top:26px}
  .hook{min-height:calc(100svh - 64px);padding:20px 0 70px}
  .hook .act{flex-direction:column;align-items:stretch;gap:14px}
  .hook .act .fine{justify-content:center}
  .btn.big{height:62px;font-size:17px}
  .goals{grid-template-columns:1fr}
  .goal{min-height:0;display:grid;grid-template-columns:52px 1fr;column-gap:16px;align-items:center;padding:16px}
  .goal .ic{margin:0;grid-row:span 2}
  .goal h3{margin:0;align-self:end}
  .goal p{margin:0;align-self:start}
  .goal .go-a{display:none}
  .steps{grid-template-columns:1fr}
  .step,.step+.step{padding:22px 0;border-left:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:70px 1fr}
  .step .n{font-size:40px}
  .step h3{margin-top:0}
  .step p{grid-column:2}
  .faq summary{font-size:16.5px}
  .faq details > div{padding-right:0}
  .slots{grid-template-columns:repeat(3,1fr)}
  .quiz .opts{grid-template-columns:1fr}
  .panel{padding:18px}
  .days{gap:3px}
  .guar{align-items:flex-start;padding:20px}
  .bar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:40;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:18px;background:rgba(11,26,60,.95);backdrop-filter:blur(12px);color:#fff;box-shadow:0 18px 40px -16px rgba(11,26,60,.8);transform:translateY(140%);transition:transform .3s}
  .bar.show{transform:none}
  .bar div{font-size:12.5px;color:#AFC0E6;line-height:1.3}
  .bar div b{display:block;color:#fff;font-size:14px}
  .bar .btn{margin-left:auto;height:46px;padding:0 16px;font-size:14.5px;border-radius:12px;box-shadow:none}
  body.has-bar footer{padding-bottom:110px}
}

/* ---------- background life: soft glows, canal-house skyline, a tiny Dutch dialogue ---------- */
body{background:
  radial-gradient(900px 620px at 88% -6%,rgba(35,80,224,.13),transparent 65%),
  radial-gradient(700px 520px at -8% 38%,rgba(35,80,224,.07),transparent 65%),
  var(--bg);background-attachment:fixed}
.skyline{height:120px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22480%22 height=%22120%22 viewBox=%220 0 480 120%22%3E%3Cg fill=%22none%22 stroke=%22%232350E0%22 stroke-width=%221.4%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 118V60h7.75v-8h7.75v-8h7.75v-8h15.5v8h7.75v8h7.75v8h7.75V118M62 118V46L82.0 22v-7h10v7L112 46V118M112 118V68C126.0 68 127.4 46 138.0 44v-8h18v8C166.6 46 168.0 68 182 68V118M182 118V52h6.75v-8h6.75v-8h6.75v-8h13.5v8h6.75v8h6.75v8h6.75V118M236 118V40h17.92v-22h7.68v-8h12.8v8h7.68v22h17.92V118M300 118V62L319.0 38v-7h10v7L348 62V118M348 118V56C362.4 56 363.84 34 375.0 32v-8h18v8C404.16 34 405.6 56 420 56V118M420 118V48h7.5v-8h7.5v-8h7.5v-8h15.0v8h7.5v8h7.5v8h7.5V118%22/%3E%3Cpath stroke-width=%221%22 opacity=%22.7%22 d=%22M10.2 68.0h7v11h-7zM27.5 68.0h7v11h-7zM44.8 68.0h7v11h-7zM10.2 87.0h7v11h-7zM27.5 87.0h7v11h-7zM44.8 87.0h7v11h-7zM74.0 54.0h7v11h-7zM93.0 54.0h7v11h-7zM74.0 73.0h7v11h-7zM93.0 73.0h7v11h-7zM74.0 92.0h7v11h-7zM93.0 92.0h7v11h-7zM124.2 76.0h7v11h-7zM143.5 76.0h7v11h-7zM162.8 76.0h7v11h-7zM124.2 95.0h7v11h-7zM143.5 95.0h7v11h-7zM162.8 95.0h7v11h-7zM195.3 60.0h7v11h-7zM215.7 60.0h7v11h-7zM195.3 79.0h7v11h-7zM215.7 79.0h7v11h-7zM195.3 98.0h7v11h-7zM215.7 98.0h7v11h-7zM246.8 48.0h7v11h-7zM264.5 48.0h7v11h-7zM282.2 48.0h7v11h-7zM246.8 67.0h7v11h-7zM264.5 67.0h7v11h-7zM282.2 67.0h7v11h-7zM246.8 86.0h7v11h-7zM264.5 86.0h7v11h-7zM282.2 86.0h7v11h-7zM311.3 70.0h7v11h-7zM329.7 70.0h7v11h-7zM311.3 89.0h7v11h-7zM329.7 89.0h7v11h-7zM360.8 64.0h7v11h-7zM380.5 64.0h7v11h-7zM400.2 64.0h7v11h-7zM360.8 83.0h7v11h-7zM380.5 83.0h7v11h-7zM400.2 83.0h7v11h-7zM429.8 56.0h7v11h-7zM446.5 56.0h7v11h-7zM463.2 56.0h7v11h-7zM429.8 75.0h7v11h-7zM446.5 75.0h7v11h-7zM463.2 75.0h7v11h-7zM429.8 94.0h7v11h-7zM446.5 94.0h7v11h-7zM463.2 94.0h7v11h-7z%22/%3E%3Cpath d=%22M0 118H480%22/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom/auto 120px;opacity:.34;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hook{position:relative;overflow:hidden}
.hook .skyline{position:absolute;left:0;right:0;bottom:0;animation:drift 90s linear infinite}
.hook .water{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
@keyframes drift{to{background-position:-480px bottom}}
.hook .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.hook h1{font-size:clamp(44px,5.7vw,76px)}
.talk{display:grid;gap:14px;justify-items:start;padding:10px 0 60px}
.bub{max-width:300px;padding:14px 18px 13px;border-radius:22px 22px 22px 6px;background:#fff;border:1px solid var(--line);box-shadow:0 22px 44px -26px rgba(11,26,60,.45);
  opacity:0;transform:translateY(16px) scale(.96);animation:pop .6s cubic-bezier(.2,.8,.2,1) forwards,bob 7s ease-in-out infinite}
.bub b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.bub small{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.bub.me{justify-self:end;border-radius:22px 22px 6px 22px;background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 22px 44px -22px rgba(35,80,224,.7)}
.bub.me small{color:#CFDBFF}
.bub:nth-child(2){animation-delay:.5s,1.1s}
.bub:nth-child(3){animation-delay:1.3s,1.9s}
.bub:nth-child(4){animation-delay:2.1s,2.7s}
.bub:nth-child(5){animation-delay:2.9s,3.5s}
.talk .ok{justify-self:end;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#0F8F61;background:rgba(30,185,128,.12);padding:6px 12px;border-radius:99px;opacity:0;animation:pop .6s 3.8s forwards}
.talk .who{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:0;animation:pop .6s .3s forwards}
@keyframes pop{to{opacity:1;transform:none}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.final{position:relative;overflow:hidden}
.final .skyline{position:absolute;left:0;right:0;bottom:0;opacity:.26}
.final .wrap{position:relative;z-index:2}
.ghost{position:absolute;left:50%;top:50%;translate:-50% -54%;font-size:clamp(120px,24vw,340px);font-weight:700;letter-spacing:-.06em;line-height:1;color:rgba(35,80,224,.045);white-space:nowrap;pointer-events:none;user-select:none}
@media (max-width:980px){
  .hook .wrap{grid-template-columns:1fr}
  .talk{display:none}
}
@media (max-width:760px){
  .skyline{height:84px;background-size:auto 84px}
  .hook{padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){.bub,.talk .ok,.talk .who{animation:none;opacity:1;transform:none}.hook .skyline{animation:none}}

/* contact + legal */
footer .legal-l{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:13.5px}
footer .legal-l a{display:inline;padding:0}
.legal{padding:20px 0 90px}
.legal h2{font-size:24px;letter-spacing:-.02em;margin:40px 0 12px}
.legal p,.legal li{color:var(--muted);margin-bottom:10px;text-wrap:pretty}
.legal ul{padding-left:20px;margin-bottom:10px}
.legal b{color:var(--ink);font-weight:600}
.legal a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.legal .box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 22px;margin:14px 0}
.legal .box p{margin-bottom:4px}
.legal mark,.ph mark{background:#FFF1C2;color:var(--ink);border-radius:5px;padding:0 5px}
.consent{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.consent a,.summary .fine a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}

/* about: initial card until Tanya's photo arrives */
.about .photo.mono{background:radial-gradient(120% 90% at 20% 10%,#3E6BF0 0%,var(--blue) 45%,#16337F 100%);display:grid;place-items:center;overflow:hidden}
.about .photo.mono i{font-family:Lora,serif;font-style:italic;font-weight:500;font-size:clamp(160px,22vw,300px);color:rgba(255,255,255,.92);line-height:1;transform:translateY(-6%)}
.about .photo.quote{margin:0;background:radial-gradient(120% 90% at 20% 10%,#3E6BF0 0%,var(--blue) 45%,#16337F 100%);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,4vw,48px);color:#fff;overflow:hidden}
.about .photo.quote::before{content:"“";font-family:Lora,serif;font-style:italic;font-size:180px;line-height:.8;color:rgba(255,255,255,.28)}
.about .photo.quote blockquote{font-family:Lora,serif;font-style:italic;font-weight:500;font-size:clamp(26px,2.9vw,40px);line-height:1.18;letter-spacing:-.02em}
.about .photo.quote figcaption{font-size:14.5px;color:#C9D6FF;margin-top:24px}