:root{
  /* brand equity: the existing deep teal, kept */
  --teal:       #0B3A3F;
  --teal-deep:  oklch(0.21 0.040 197);
  --teal-lift:  oklch(0.36 0.052 197);
  --ink:        oklch(0.24 0.030 210);
  --ink-soft:   oklch(0.45 0.024 210);
  --ink-on-dark:      oklch(0.92 0.010 197);
  --ink-on-dark-soft: oklch(0.84 0.014 197);

  /* action color: warm amber, the "sunflower" role from the reference */
  --amber:      oklch(0.83 0.155 82);
  --amber-deep: oklch(0.74 0.155 74);
  --amber-tint: oklch(0.955 0.045 88);
  --kicker-ink: oklch(0.52 0.13 70);
  --amber-card-ink:      oklch(0.34 0.07 74);
  --amber-card-ink-soft: oklch(0.38 0.07 74);

  /* third surface: soft periwinkle band */
  --lilac:      oklch(0.945 0.030 295);
  --lilac-2:    oklch(0.905 0.042 295);

  /* accent dots for the orbit + checklist */
  --dot-rose:   oklch(0.84 0.085 20);
  --dot-mint:   oklch(0.86 0.075 175);
  --dot-sky:    oklch(0.85 0.075 245);
  --dot-plum:   oklch(0.80 0.075 305);
  --dot-sky-ink:  oklch(0.32 0.09 245);
  --dot-rose-ink: oklch(0.36 0.10 20);
  --dot-mint-ink: oklch(0.32 0.07 175);
  --dot-plum-ink: oklch(0.34 0.09 305);

  --white:      oklch(1 0 0);
  --paper:      oklch(0.985 0.003 210);
  --line:       oklch(0.24 0.030 210 / 0.12);
  --white-92: oklch(1 0 0 / 0.92);
  --white-50: oklch(1 0 0 / 0.50);
  --white-35: oklch(1 0 0 / 0.35);
  --white-18: oklch(1 0 0 / 0.18);
  --white-14: oklch(1 0 0 / 0.14);
  --white-09: oklch(1 0 0 / 0.09);
  --amber-line: oklch(0.74 0.155 74 / 0.55);
  --shadow-ink-45: oklch(0.24 0.03 210 / 0.45);
  --shadow-ink-50: oklch(0.24 0.03 210 / 0.50);
  --shadow-ink-55: oklch(0.24 0.03 210 / 0.55);
  --shadow-ink-60: oklch(0.24 0.03 210 / 0.60);
  --shadow-teal-45: oklch(0.21 0.04 197 / 0.45);
  --shadow-teal-80: oklch(0.21 0.04 197 / 0.80);

  /* modular scale, 1.28 */
  --step--2: clamp(0.80rem, 0.78rem + 0.10vw, 0.86rem);
  --step--1: clamp(0.96rem, 0.93rem + 0.15vw, 1.03rem);
  --step-0:  clamp(1.11rem, 1.06rem + 0.26vw, 1.20rem);
  --step-1:  clamp(1.42rem, 1.28rem + 0.70vw, 1.86rem);
  --step-2:  clamp(1.82rem, 1.53rem + 1.42vw, 2.90rem);
  --step-3:  clamp(2.33rem, 1.80rem + 2.60vw, 4.15rem);

  --gutter: clamp(1.15rem, 4.5vw, 4rem);
  --radius: 1.25rem;
  --radius-sm: 0.7rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --z-sticky: 40;
  --z-header: 50;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:"Schibsted Grotesk",system-ui,sans-serif;
  font-size:var(--step-0); line-height:1.6;
}
h1,h2,h3,.disp{font-family:"Gabarito",system-ui,sans-serif; font-weight:700; line-height:1.08; letter-spacing:-0.028em; text-wrap:balance; margin:0}
p{text-wrap:pretty; max-width:62ch}
img,picture{display:block; max-width:100%}
img{height:auto}
.wrap{max-width:78rem; margin-inline:auto; padding-inline:var(--gutter)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.skip-link:focus-visible{position:fixed; z-index:calc(var(--z-header) + 1); top:0.75rem; left:0.75rem; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; padding:0.7rem 1rem; background:var(--white); color:var(--teal-deep); font-weight:700; text-decoration:none}
:focus-visible{outline:3px solid var(--amber-deep); outline-offset:3px; border-radius:0.3rem}

/* ================= header ================= */
.head{position:sticky; top:0; z-index:var(--z-header); overflow:visible; background:var(--white-92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.head .wrap{display:flex; align-items:center; gap:1.25rem; min-height:4.75rem}
.brand{display:flex; align-items:center; gap:0.7rem; text-decoration:none; color:var(--ink); margin-right:auto}
.brand-badge{width:3rem; height:2.55rem; display:grid; place-items:center; flex:none}
.brand-badge img{width:100%; height:auto}
.brand-name{font-family:"Gabarito"; font-weight:800; font-size:var(--step-0); letter-spacing:-0.035em; line-height:1.05}
.brand-name span{font-weight:500; color:var(--teal)}
.brand-tag{display:block; font-family:"Schibsted Grotesk"; font-size:var(--step--2); font-weight:400; letter-spacing:0; color:var(--ink-soft); margin-top:0.1rem}
.nav{display:flex; align-items:center; gap:1.6rem; font-size:var(--step--1); font-weight:500}
.nav a{color:var(--ink-soft); text-decoration:none; padding-block:0.4rem}
.nav a:hover{color:var(--teal)}
.nav a:active{color:var(--teal-deep); background:var(--amber-tint)}
.mobile-menu{display:none; flex:none}
.mobile-menu summary{
  min-width:2.75rem; min-height:2.75rem; padding:0.5rem; cursor:pointer;
  display:grid; place-items:center; list-style:none;
  font-family:"Gabarito",system-ui,sans-serif; font-size:var(--step--2); font-weight:700;
  color:var(--teal); border-radius:var(--radius-sm);
}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu-panel{
  position:absolute; top:calc(100% + 0.5rem); right:var(--gutter); z-index:var(--z-header);
  width:min(20rem,calc(100vw - 2.3rem)); padding:0.5rem;
  display:grid; background:var(--white); border-radius:var(--radius-sm);
  box-shadow:0 10px 14px -8px var(--shadow-teal-45);
}
.mobile-menu-panel a:not(.btn){
  min-height:2.75rem; padding:0.65rem 0.8rem; display:flex; align-items:center;
  color:var(--ink); text-decoration:none; font-size:var(--step--1); font-weight:600;
  border-radius:0.4rem;
}
.mobile-menu-panel a:not(.btn):hover{background:var(--lilac); color:var(--teal)}
.mobile-menu-panel a:not(.btn):active{background:var(--lilac-2); color:var(--teal-deep)}
/* the header CTA is hidden below 40rem, so the booking path lives here instead */
.mobile-menu-panel .menu-cta{
  width:100%; justify-content:space-between; margin-bottom:0.35rem;
}
@media (max-width:60rem){
  .nav{display:none}
  .mobile-menu{display:block}
  .head .wrap{gap:0.75rem}
}
@media (max-width:40rem){.head .wrap > .btn{display:none}}
@media (max-width:30rem){
  .brand-tag{display:none}
  .brand-badge{width:2.6rem; height:2.2rem}
  .head .wrap{min-height:4.1rem; gap:0.75rem}
}

/* ================= pill buttons ================= */
.btn{
  font-family:"Gabarito"; font-weight:700; font-size:var(--step--1);
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.5rem 0.5rem 0.5rem 1.35rem; border-radius:5rem;
  text-decoration:none; border:1.5px solid transparent; white-space:nowrap;
  background:var(--amber); color:var(--teal-deep);
  transition:background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn .cap{
  width:2.1rem; height:2.1rem; border-radius:50%; flex:none;
  background:var(--teal-deep); color:var(--amber);
  display:grid; place-items:center;
  transition:background 0.3s var(--ease);
}
.btn:hover{background:var(--amber-deep)}
.btn:active{background:var(--amber-deep); filter:brightness(0.92)}
.btn-line{background:var(--white); color:var(--teal); border-color:var(--line)}
.btn-line .cap{background:var(--teal); color:var(--white)}
.btn-line:hover{background:var(--paper); border-color:var(--teal)}
.btn-line:active{background:var(--lilac); border-color:var(--teal-deep)}
.btn-lg{font-size:var(--step-0); padding-left:1.3rem}
.btn-lg .cap{width:2.45rem; height:2.45rem}
.btn-row{display:flex; flex-wrap:wrap; gap:0.75rem}

/* ================= hero ================= */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,5.5rem); background:
  radial-gradient(60rem 40rem at 82% 22%, var(--amber-tint) 0%, transparent 62%), var(--white)}
.hero .wrap{display:grid; gap:clamp(2.5rem,5vw,4rem); grid-template-columns:1fr; align-items:center}
@media (min-width:62rem){.hero .wrap{grid-template-columns:1.04fr 0.96fr}}
.quoteline{display:flex; align-items:center; gap:0.55rem; font-style:italic; font-size:var(--step--1); color:var(--ink-soft); margin:0 0 1.1rem}
.quoteline svg{flex:none; color:var(--amber-deep)}
h1{font-size:var(--step-3); max-width:14ch; letter-spacing:-0.038em}
/* highlight drawn as a background on the text itself: no pseudo-element, no z-index fight */
h1 em{
  font-style:normal; color:var(--teal);
  background-image:linear-gradient(to top, var(--amber) 0.15em, transparent 0.15em);
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.hero p.lede{font-size:var(--step-0); color:var(--ink-soft); margin:1.35rem 0 2rem; max-width:44ch}
.hero .btn-row{margin-bottom:1.5rem}
.assure{display:flex; flex-wrap:wrap; gap:0.5rem 1.4rem; font-size:var(--step--1); color:var(--ink-soft); margin:0; max-width:44rem}
.assure span{display:inline-flex; align-items:flex-start; gap:0.45rem; flex:1 1 16rem; min-width:0; max-width:100%}
.assure svg{color:var(--teal); flex:none}

/* orbit composition */
.orbit{position:relative; aspect-ratio:1; max-width:32rem; margin-inline:auto; width:100%}
.orbit-disc{position:absolute; inset:9%; border-radius:50%; background:var(--amber)}
.orbit-ring{position:absolute; inset:2%; border-radius:50%; border:1.5px dashed var(--amber-line)}
.orbit-photo{position:absolute; inset:9%; border-radius:50%; overflow:hidden}
.orbit-photo picture{width:100%; height:100%}
.orbit-photo img{width:100%; height:100%; object-fit:contain}
.pip{
  position:absolute; width:3.6rem; height:3.6rem; border-radius:50%;
  display:grid; place-items:center; background:var(--white);
  box-shadow:0 6px 18px -8px var(--shadow-ink-45);
}
.pip svg{width:1.5rem; height:1.5rem}
.pip-1{top:2%;  left:26%; background:var(--dot-sky);  color:var(--dot-sky-ink)}
.pip-2{top:16%; right:2%;  background:var(--dot-rose); color:var(--dot-rose-ink)}
.pip-3{bottom:20%; right:-1%; background:var(--dot-mint); color:var(--dot-mint-ink)}
.pip-4{bottom:1%;  left:38%;  background:var(--dot-plum); color:var(--dot-plum-ink)}
.pip-5{top:34%; left:-2%;  background:var(--amber-tint); color:var(--amber-deep)}
@media (max-width:34rem){.pip{width:2.9rem; height:2.9rem} .pip svg{width:1.2rem; height:1.2rem}}

/* ================= feature row (no cards) ================= */
.features{padding-block:clamp(2.75rem,6vw,4.5rem); border-top:1px solid var(--line)}
.features .wrap{display:grid; gap:clamp(1.75rem,3.5vw,2.75rem); grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.feat{display:grid; grid-template-columns:auto 1fr; gap:0.95rem; align-items:start}
.feat-icon{width:3.1rem; height:3.1rem; border-radius:0.85rem; display:grid; place-items:center}
.feat-icon--sky{background:var(--dot-sky); color:var(--dot-sky-ink)}
.feat-icon--rose{background:var(--dot-rose); color:var(--dot-rose-ink)}
.feat-icon--mint{background:var(--dot-mint); color:var(--dot-mint-ink)}
.feat-icon--plum{background:var(--dot-plum); color:var(--dot-plum-ink)}
.feat-copy{display:grid; gap:0.35rem}
.feat h3{font-size:var(--step--1); font-family:"Gabarito"; font-weight:700; letter-spacing:-0.015em; margin:0}
.feat p{font-size:var(--step--1); color:var(--ink-soft); margin:0; max-width:30ch}

/* ================= lilac band: collage + checklist ================= */
.band{background:var(--lilac); padding-block:clamp(3.25rem,7vw,6rem); position:relative; overflow:hidden}
.band .wrap{display:grid; gap:clamp(2.5rem,5vw,4rem); grid-template-columns:1fr; align-items:center; position:relative; z-index:1}
@media (min-width:62rem){.band .wrap{grid-template-columns:0.95fr 1.05fr}}
.collage{position:relative; padding-bottom:3.5rem}
.collage-main{border-radius:var(--radius); overflow:hidden; box-shadow:0 24px 50px -28px var(--shadow-ink-55)}
.collage-main img{aspect-ratio:4/5; object-fit:cover; width:100%}
.collage-sm{position:absolute; border-radius:var(--radius-sm); overflow:hidden; border:5px solid var(--lilac); box-shadow:0 14px 30px -18px var(--shadow-ink-50)}
.collage-sm img{aspect-ratio:4/3; object-fit:cover; width:100%}
.cs-1{width:44%; top:6%;  left:-9%}
.cs-2{width:40%; top:38%; left:-13%}
.stat{
  position:absolute; right:4%; bottom:0.6rem; z-index:2;
  background:var(--teal); color:var(--white); border-radius:0.85rem;
  padding:0.75rem 1.1rem; display:flex; align-items:center; gap:0.7rem;
  box-shadow:0 16px 34px -18px var(--shadow-teal-80);
}
.stat b{font-family:"Gabarito"; font-weight:800; font-size:var(--step-1); line-height:1; letter-spacing:-0.04em; color:var(--amber)}
.stat span{font-size:var(--step--2); line-height:1.25; max-width:8rem}
@media (max-width:44rem){.cs-1,.cs-2{display:none} .collage{padding-bottom:2.5rem}}
h2{font-size:var(--step-2); max-width:17ch; letter-spacing:-0.032em}
.label{font-family:"Gabarito"; font-weight:700; font-size:var(--step--1); color:var(--kicker-ink); margin:0 0 0.7rem}
.band p.body{color:var(--ink-soft); margin-top:1.2rem}
.checks{list-style:none; margin:1.9rem 0 2rem; padding:0; display:grid; gap:0.9rem 1.5rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.checks li{display:flex; align-items:center; gap:0.7rem; font-size:var(--step--1); font-weight:500}
.chk{width:1.65rem; height:1.65rem; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--white)}
.c1{background:oklch(0.62 0.14 20)} .c2{background:oklch(0.52 0.12 300)}
.c3{background:oklch(0.66 0.14 60)} .c4{background:oklch(0.52 0.09 190)}

/* ================= programs ================= */
.programs{padding-block:clamp(3.25rem,7vw,6rem)}
.sec-head{text-align:center; max-width:44rem; margin:0 auto clamp(2.25rem,4vw,3.25rem)}
.sec-head h2{margin-inline:auto; max-width:20ch}
.sec-head p{margin:1rem auto 0; color:var(--ink-soft); text-align:center}
.sec-head p.label{color:var(--kicker-ink)}
.cards{display:grid; gap:clamp(1.25rem,2.5vw,1.75rem); grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr)); align-items:stretch}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; height:100%;
}
.card:hover{box-shadow:0 22px 44px -26px var(--shadow-ink-55)}
.card:active{box-shadow:inset 0 0 0 1px var(--teal-lift)}
.card picture{width:100%}
.card img{aspect-ratio:16/10; object-fit:cover; width:100%}
.card-body{padding:1.4rem 1.4rem 1.6rem; display:flex; flex-direction:column; flex:1}
.card h3{font-size:var(--step-1); letter-spacing:-0.03em}
.card .meta{font-size:var(--step--2); color:var(--ink-soft); margin:0.5rem 0 0; font-weight:500}
.card p.desc{font-size:var(--step--1); color:var(--ink-soft); margin:0.85rem 0 0}
.card .btn{margin-top:1.35rem; align-self:flex-start}
/* the featured middle card, per the reference */
.card--feature{background:var(--amber); border-color:var(--amber)}
.card--feature .card-body{padding-top:1.5rem}
.card--feature .meta,.card--feature p.desc{color:var(--amber-card-ink)}
.card--feature .btn{background:var(--teal-deep); color:var(--amber)}
.card--feature .btn .cap{background:var(--amber); color:var(--teal-deep)}
.card--feature .btn:hover{background:var(--teal)}
.flag{
  display:inline-flex; align-items:center; gap:0.4rem; align-self:flex-start;
  font-family:"Gabarito"; font-weight:700; font-size:var(--step--2);
  background:var(--teal-deep); color:var(--amber);
  padding:0.3rem 0.75rem; border-radius:5rem; margin-bottom:0.7rem;
}

/* ================= FAQ ================= */
.faq{background:var(--white); padding-block:clamp(3.25rem,7vw,6rem)}
.faq-list{max-width:52rem; margin-inline:auto; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:1.2rem; cursor:pointer; color:var(--ink);
  font-family:"Gabarito",system-ui,sans-serif; font-weight:700; line-height:1.25;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:active{color:var(--teal); background:var(--paper)}
.faq summary::after{content:"+"; color:var(--teal); font-size:var(--step-1); font-weight:500; line-height:1; flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 1.3rem; color:var(--ink-soft); font-size:var(--step--1); max-width:68ch}

/* ================= closing CTA band ================= */
.close{background:var(--teal); color:var(--white); padding-block:clamp(3.25rem,7vw,5.5rem)}
.close .wrap{display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr; align-items:center}
@media (min-width:56rem){.close .wrap{grid-template-columns:1.05fr 0.95fr}}
.close h2{color:var(--white); max-width:16ch}
.close .label{color:var(--amber)}
.close p{color:var(--ink-on-dark); margin:1.1rem 0 2rem}
.close picture{width:100%}
.close img{border-radius:var(--radius); aspect-ratio:4/3; object-fit:cover; width:100%}
.close .btn-line{background:transparent; color:var(--white); border-color:var(--white-35)}
.close .btn-line .cap{background:var(--white); color:var(--teal)}
.close .btn-line:hover{background:var(--white-09); border-color:var(--white)}

/* ================= footer ================= */
footer{background:var(--teal-deep); color:var(--ink-on-dark); padding-block:clamp(2.75rem,5vw,4rem) 0}
footer .cols{display:grid; gap:2rem clamp(1.5rem,4vw,3rem); grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
footer h3{font-size:var(--step--1); color:var(--white); font-family:"Gabarito"; font-weight:700; margin-bottom:0.9rem}
/* Footer links carry a real 44px row instead of bleeding a hit area into the
   neighboring link. gap:0 keeps the column the same height it was before. */
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:0; font-size:var(--step--1)}
footer a{color:inherit; text-decoration:none; display:inline-flex; align-items:center; min-height:2.75rem; padding-block:0.35rem}
footer a:hover{color:var(--amber)}
footer a:active{color:var(--amber-deep)}
footer .about p{font-size:var(--step--1); color:var(--ink-on-dark-soft); max-width:32ch; margin:0}
footer .about p + p{margin-top:0.7rem}
footer .footer-social{display:flex; gap:0.5rem; margin-top:0.5rem}
footer .footer-social a{width:2.75rem; height:2.75rem; justify-content:center; padding:0; border:1px solid var(--white-14); border-radius:50%}
footer .footer-social svg{flex:none}
.legal{margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--white-14); padding-block:1.15rem; font-size:var(--step--2); display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem}
.legal p{margin:0}

.ph{background:var(--amber-tint); box-shadow:0 0 0 1px var(--amber-deep); border-radius:0.25rem; padding:0 0.3em}
.close .ph,.stat .ph,.card--feature .ph{background:var(--white-18); box-shadow:0 0 0 1px var(--white-50)}

/* ================= motion ================= */
.reveal{opacity:1}
@media (prefers-reduced-motion: no-preference){
  .btn{transition:background 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease)}
  .btn .cap{transition:transform 0.35s var(--ease), background 0.3s var(--ease)}
  .btn:hover{transform:translateY(-2px)}
  .btn:hover .cap{transform:translateX(3px)}
  .btn:active{transform:translateY(-1px)}
  .card{transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease)}
  .card:hover{transform:translateY(-4px)}
  .card:active{transform:translateY(-1px)}
  .reveal{animation:rise 0.85s var(--ease) both; animation-timeline:view(); animation-range:entry 0% entry 55%}
  @keyframes rise{from{opacity:0; transform:translateY(1.6rem)} to{opacity:1; transform:none}}
  .pip{animation:float 5s ease-in-out infinite alternate}
  .pip-2{animation-delay:-1.2s} .pip-3{animation-delay:-2.4s}
  .pip-4{animation-delay:-3.1s} .pip-5{animation-delay:-0.6s}
  @keyframes float{from{transform:translateY(-0.32rem)} to{transform:translateY(0.32rem)}}
}