/* ==========================================================================
   Doctor Chando · Kusasa Brands
   One font, one palette: the logo's navy and ice. Quiet, editorial, lots of air.
   ========================================================================== */
:root{
  --bg:#061633; --bg-2:#0a2a5c; --bg-3:#123d80;
  --ice:#9fd8ff; --text:#eef5fb; --muted:rgba(238,245,251,.74); --faint:rgba(238,245,251,.14);
  --font:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad:clamp(22px,6vw,96px); --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:var(--bg) radial-gradient(120% 70% at 50% 0%,var(--bg-2) 0%,var(--bg) 60%) no-repeat;background-attachment:fixed}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ice);color:var(--bg)}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:760px;margin:0 auto;padding:0 var(--pad)}

/* type */
.label{font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.title{font-size:clamp(36px,5vw,68px);font-weight:600;letter-spacing:-.03em;line-height:1.04}
.h2{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.02em;line-height:1.14}
.body{font-size:clamp(16px,1.3vw,18px);color:var(--muted);max-width:60ch}
.body p+p{margin-top:1.1em}
.link{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid var(--faint);transition:border-color .3s,color .3s,gap .3s}
.link:hover{border-color:var(--ice);color:var(--ice)}
.quote{text-align:center}
.quote q{display:block;font-size:clamp(22px,2.6vw,34px);font-weight:500;letter-spacing:-.01em;line-height:1.35;max-width:30ch;margin:0 auto;quotes:"“" "”"}
.quote cite{display:block;margin-top:20px;font-style:normal}

/* sections */
.sec{padding:clamp(60px,7vw,104px) 0}
.rule{height:1px;background:var(--faint);border:0}
.ph{color:var(--ice);opacity:.75}

/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:50;transition:background .4s,backdrop-filter .4s}
.hdr.solid.lt{background:rgba(244,250,255,.82);box-shadow:0 1px 0 rgba(10,42,92,.08)}
.hdr.lt .logo,.hdr.lt .nav a{color:#0a2a5c}.hdr.lt .nav a{opacity:.7}.hdr.lt .nav a:hover,.hdr.lt .nav a[aria-current="page"]{opacity:1}.hdr.lt .burger span{background:#0a2a5c}
.hdr.solid{background:rgba(6,22,51,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad)}
.logo{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;letter-spacing:.28em;text-transform:uppercase}
.logo img{width:52px;height:52px;object-fit:contain}
.nav{display:flex;gap:34px}
.nav a{font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.burger{display:none;width:40px;height:40px;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:1.5px;background:var(--text);transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:23px}
.open .burger span:nth-child(1){top:20px;transform:rotate(45deg)}
.open .burger span:nth-child(2){top:20px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:49;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:26px;padding:0 var(--pad);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.open .mnav{opacity:1;visibility:visible}
.mnav a{font-size:28px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:820px){.nav{display:none}.burger{display:block}}

/* footer */
.ftr{padding:80px 0 32px;text-align:center}
.ftr .logo{justify-content:center}
.ftr nav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin:40px 0}
.ftr nav a{font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.ftr nav a:hover{color:var(--text)}
.ftr .by{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.ftr .by b{display:block;color:var(--text);font-size:18px;letter-spacing:.18em;margin-top:8px;font-weight:600}
.zim{display:flex;height:2px;max-width:220px;margin:48px auto 26px;opacity:.8}
.zim i{flex:1}
.zim i:nth-child(1),.zim i:nth-child(7){background:#1f9a48}.zim i:nth-child(2),.zim i:nth-child(6){background:#ffd200}
.zim i:nth-child(3),.zim i:nth-child(5){background:#de2010}.zim i:nth-child(4){background:#000}
.ftr small{font-size:12px;color:var(--muted)}

/* WhatsApp button */
.fab{position:fixed;right:22px;bottom:22px;z-index:40}
.fab-btn{width:56px;height:56px;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:box-shadow .2s ease}
.fab-btn:hover{box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 0 3px rgba(159,216,255,.5)}
.fab-btn svg{width:26px;height:26px}
.fab-pop{position:absolute;right:0;bottom:70px;width:280px;background:var(--text);color:var(--bg);border-radius:18px;padding:10px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.fab.on .fab-pop{opacity:1;visibility:visible;transform:none}
.fab-pop a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px}
.fab-pop a:hover{background:rgba(6,22,51,.07)}
.fab-pop img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.fab-pop b{display:block;font-size:14.5px}
.fab-pop small{font-size:12.5px;opacity:.65}

/* reveal: a gentle fade only */
.js .rv{opacity:0;transform:translateY(10px);transition:opacity .4s ease-out,transform .4s ease-out}
.js .rv.in{opacity:1;transform:none}

/* packs */
.pack{width:100%;height:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.35))}

/* contact */
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}
.contact .label{margin-bottom:14px}
.contact p{font-size:17px}
.contact a:hover{color:var(--ice)}
@media(max-width:760px){.contact{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){*,::view-transition-old(root),::view-transition-new(root){transition:none!important;animation:none!important}.js .rv{opacity:1;transform:none}}

/* white "frost" panels for variety between the navy sections */
.frost{background:linear-gradient(180deg,#ffffff 0%,#f1f8ff 55%,#e2f1ff 100%);color:#0a2a5c;border-radius:clamp(24px,4vw,48px);margin:0 clamp(8px,1.4vw,20px);position:relative;overflow:hidden}
.frost::before{content:"";position:absolute;inset:-20% -10% auto auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(159,216,255,.45),transparent 65%);pointer-events:none}
.frost>*{position:relative}
.frost .label{color:rgba(10,42,92,.78)}
.frost .body,.frost p{color:#3d5677}
.frost .h2,.frost h3{color:#0a2a5c}
.frost .link{border-color:rgba(10,42,92,.25)}
.frost .link:hover{color:#0a2a5c;border-color:#0a2a5c}
.frost .ph{color:#1b5bb8}

/* ===================== v4: living background, sky headers, page transitions ===================== */
/* aurora behind every page: slow ice + white glows over the navy */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.aurora i:nth-child(1){width:60vw;height:60vw;left:-15vw;top:10vh;background:radial-gradient(circle,#1b5bb8,transparent 65%)}
.aurora i:nth-child(2){width:50vw;height:50vw;right:-12vw;top:40vh;background:radial-gradient(circle,#5aa8f2,transparent 65%);opacity:.35}
.aurora i:nth-child(3){width:40vw;height:40vw;left:30vw;bottom:-15vh;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 65%);opacity:.18}
body{background:var(--bg)}

/* sky: the ice-blue header used on every page */
.sky{position:relative;overflow:hidden;color:#0a2a5c;isolation:isolate;
  background:radial-gradient(60% 40% at 50% 62%,rgba(255,255,255,.55),transparent 70%),
    linear-gradient(180deg,#f4fbff 0%,#d6efff 30%,#a3d7ff 58%,#5aa8f2 80%,#1f5fb5 93%,#0a2a5c 100%)}
.sky>*{position:relative;z-index:2}
.sky .label{color:rgba(10,42,92,.8)}
.sky .body{color:#2b4c78}
.sky .link{border-color:rgba(10,42,92,.25)}
.sky .link:hover{color:#0a2a5c;border-color:#0a2a5c}
.sky .snow{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.sky .cloud{position:absolute;z-index:0;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.5) 45%,rgba(255,255,255,0))}

/* sub-page header */
.phead{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(118px,14vw,150px) var(--pad) clamp(70px,8vw,96px)}
.phead .title{color:#0a2a5c;margin-top:14px}
.phead .body{margin:16px auto 0}
.phead .txt{animation:up .35s ease-out both}
@keyframes up{from{opacity:0;transform:translateY(10px)}}

/* page-to-page transition (Chrome, Edge, Safari 18+) */
@view-transition{navigation:auto}
.hdr{view-transition-name:hdr}
::view-transition-old(root){animation:vt-out .18s ease-out both}
::view-transition-new(root){animation:vt-in .25s ease-out both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* page cards (links to the other pages) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{display:flex;flex-direction:column;justify-content:space-between;min-height:240px;padding:30px;border-radius:24px;border:1px solid var(--faint);background:rgba(255,255,255,.03);transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.card:hover{background:rgba(255,255,255,.07);border-color:rgba(159,216,255,.4)}
.card h3{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:14px 0 8px}
.card p{color:var(--muted);font-size:15.5px}
.card .go{font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;margin-top:30px;display:flex;justify-content:space-between}
.card .go span{transition:transform .25s ease}
.card:hover .go span{transform:translateX(3px)}
@media(max-width:820px){.cards{grid-template-columns:1fr}}


/* mobile polish */
@media(max-width:620px){
  .sec{padding:56px 0}
  .h2{font-size:26px}
  .phead{padding:108px 20px 64px}
  .ftr{padding:80px 0 110px}
  .fab{right:16px;bottom:16px}
  .fab-btn{width:54px;height:54px}
  .link{padding-top:6px;padding-bottom:8px}
  .mnav a{font-size:24px}
}

/* ===================== launch refinement: access, ordering shortcuts ===================== */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:4px}
.sky :focus-visible,.frost :focus-visible,.hdr.lt :focus-visible{outline-color:#0a2a5c}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;background:#0a2a5c;color:#fff;padding:15px 28px;border-radius:99px;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:background .2s ease,box-shadow .2s ease}
.btn-primary:hover{background:#1b5bb8;box-shadow:0 8px 24px rgba(10,42,92,.25)}
.on-dark .btn-primary{background:var(--text);color:var(--bg)}
.on-dark .btn-primary:hover{background:var(--ice)}
.fab-order{display:none}
.fab{display:flex;align-items:center;gap:10px}
@media(max-width:760px){
  .fab{left:12px;right:12px;bottom:12px;padding:8px;border-radius:99px;background:rgba(6,22,51,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .fab-order{display:flex;flex:1;align-items:center;justify-content:center;min-height:48px;border-radius:99px;background:var(--text);color:var(--bg);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
  .fab-btn{width:48px;height:48px;flex:none;box-shadow:none;background:rgba(255,255,255,.12);color:#fff}
  .fab-pop{right:0;left:0;width:auto;bottom:66px}
  .ftr{padding-bottom:120px}
}
.nav a,.mnav a,.ftr nav a{padding-block:8px}
@media(max-width:360px){.hdr .logo{letter-spacing:.16em;font-size:13px;gap:8px}.hdr .logo img{width:42px;height:42px}}
@media(max-width:760px){.fab.solo{left:auto;padding:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.fab.solo .fab-btn{width:54px;height:54px;background:var(--text);color:var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.3)}.fab.solo .fab-pop{left:auto;width:280px}}
.fwa{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;margin:-12px 0 36px;font-size:14px}.fwa a{color:var(--muted)}.fwa a:hover{color:var(--ice)}

/* ===================== v5: smoother motion (owner, 11 Nov 2026). Nothing moves behind the page while scrolling; everything shows without JS and stays still for reduced motion ===================== */
.js .rv{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none;filter:none}
/* headers: label, title and text arrive one after another, once, on load */
.phead .txt,.khero>*{animation:rise .9s cubic-bezier(.16,1,.3,1) both}
.phead .txt:nth-child(2),.khero>*:nth-child(2){animation-delay:.08s}
.phead .txt:nth-child(3),.khero>*:nth-child(3){animation-delay:.16s}
.phead .txt:nth-child(4),.khero>*:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}
/* photos open upwards as they appear, then lean in slightly on hover */
.ph-img{transform:translateZ(0)}
.ph-img img{transition:transform 1.2s cubic-bezier(.16,1,.3,1),clip-path 1.1s cubic-bezier(.16,1,.3,1)}
.js .rv .ph-img img{clip-path:inset(18% 0 0 0);transform:scale(1.06)}
.js .rv.in .ph-img img{clip-path:inset(0);transform:none;transition-delay:var(--d,0s)}
@media(hover:hover){.person:hover .ph-img img{transform:scale(1.03);transition-delay:0s}}
/* buttons and cards lift under the pointer */
.btn-primary,.card,.fab-btn{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,background .25s ease,border-color .25s ease}
@media(hover:hover){.btn-primary:hover,.fab-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(10,42,92,.28)}.card:hover{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.js .rv,.js .rv .ph-img img{opacity:1;transform:none;filter:none;clip-path:none}.phead .txt,.khero>*{animation:none!important}}

/* frost on glass: graded clip (white crystals on black) screened onto each sky banner, flipped so it grows from the
   top of the page down; fades in, grows once, holds */
.sky>.frostvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none;transform:scaleY(-1);
  mix-blend-mode:screen;opacity:0;transition:opacity 1.8s cubic-bezier(.22,1,.36,1);will-change:opacity;
  -webkit-mask-image:linear-gradient(0deg,#000 0,#000 50%,transparent 100%);mask-image:linear-gradient(0deg,#000 0,#000 50%,transparent 100%)}
.sky>.frostvid.on{opacity:.8}
.phead>.frostvid.on{opacity:.65}
/* keep the words crisp over the frost */
.sky .title{text-shadow:0 2px 24px rgba(255,255,255,.85),0 1px 2px rgba(255,255,255,.6)}
.sky .label,.sky .body{text-shadow:0 1px 14px rgba(255,255,255,.9)}
/* faint frost from the top of the site down, fading out before the content; the footer gets it the normal way, rising */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(frost-poster.webp) center top/cover no-repeat;
  transform:scaleY(-1);mix-blend-mode:screen;opacity:.06;
  -webkit-mask-image:linear-gradient(0deg,#000 0,transparent 60%);mask-image:linear-gradient(0deg,#000 0,transparent 60%)}
.ftr{position:relative;isolation:isolate}
.ftr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(frost-poster.webp) center bottom/cover no-repeat;
  mix-blend-mode:screen;opacity:.22;-webkit-mask-image:linear-gradient(0deg,#000 0,transparent 85%);mask-image:linear-gradient(0deg,#000 0,transparent 85%)}

/* visit us: map with the bear pin, plus one-tap directions */
.visit .vhead{text-align:center;margin-bottom:22px}
.visit .vhead h2{font-size:clamp(28px,4vw,40px);color:#0a2a5c;letter-spacing:-.02em;margin:8px 0 6px}
.visit .vhead p{color:#4a6283;font-size:17px}
.mapcard{position:relative;max-width:980px;margin:0 auto;height:clamp(300px,46vw,420px);border-radius:28px;overflow:hidden;
  border:1px solid rgba(10,42,92,.12);box-shadow:0 30px 60px rgba(10,42,92,.12);background:#dceefc}
.mapcard iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.75) contrast(.95)}
.mapcard .tint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(214,239,255,.0),rgba(214,239,255,.0) 70%,rgba(214,239,255,.35));mix-blend-mode:multiply}
.pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);pointer-events:none;z-index:2;
  animation:pinDrop .9s var(--ease) both .3s;filter:drop-shadow(0 12px 14px rgba(10,42,92,.35))}
.pin .head{width:68px;height:68px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#0a2a5c;border:4px solid #fff;display:grid;place-items:center}
.pin img{width:54px;height:54px;border-radius:50%;background:#e8f6ff;object-fit:contain;transform:rotate(45deg)}
.pin .dot{position:absolute;left:50%;bottom:-16px;width:14px;height:6px;margin-left:-7px;border-radius:50%;background:rgba(10,42,92,.35);filter:blur(1px)}
@keyframes pinDrop{from{opacity:0;transform:translate(-50%,-160%)}to{opacity:1;transform:translate(-50%,-100%)}}
.mapcard .tag{position:absolute;left:16px;bottom:16px;z-index:2;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:16px;padding:12px 16px;color:#0a2a5c;box-shadow:0 10px 24px rgba(10,42,92,.12);max-width:calc(100% - 32px)}
.mapcard .tag b{display:block;font-size:16px}
.mapcard .tag span{font-size:14px;color:#4a6283}
.dirs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px auto 0;max-width:980px}
.dirs a,.dirs button{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;font:600 15px/1 inherit;font-family:inherit;
  color:#0a2a5c;background:#fff;border:1px solid rgba(10,42,92,.18);cursor:pointer;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.dirs a:hover,.dirs button:hover{border-color:#0a2a5c;transform:translateY(-2px)}
.dirs a.main{background:#0a2a5c;color:#fff;border-color:#0a2a5c}
.dirs svg{width:18px;height:18px;flex:none}
@media(max-width:600px){.dirs a,.dirs button{flex:1 1 calc(50% - 10px);justify-content:center}}
@media(prefers-reduced-motion:reduce){.pin{animation:none}.sky>.frostvid{transition:none}}