/* Layout: one day on Kilifi Creek, top to bottom. Dawn hero, the eight sails as polaroids, a pinned sky that turns
   from sunrise to bioluminescent night, the people, the prices, and a pinboard to book from. Single committed look. */
:root{
  --teal:#0b4a4c;      /* their poster green, deep creek water */
  --sea:#127a73;
  --ink:#0e1d1c;       /* night on the water */
  --canvas:#f3e9d6;    /* sail canvas, the page's paper */
  --canvas2:#e9dcc2;
  --sun:#f0742b;       /* the dot in their logo; the only "tap this" colour */
  --mustard:#e7b13a;   /* deck cushions */
  --blush:#f6d6cb;     /* their logo ground */
  --line:rgba(14,29,28,.16);
  --muted:#5b6b67;
  --f-disp:"Instrument Serif","Iowan Old Style","Times New Roman",serif;
  --f-body:"Urbanist","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --gut:clamp(16px,4vw,56px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
html{overflow-x:clip}
body{margin:0}
body{background:var(--canvas);color:var(--ink);font:400 17px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}
h1,h2,h3{font-family:var(--f-disp);font-weight:400;line-height:.92;letter-spacing:-.01em;text-wrap:balance;margin:0}
p{margin:0}
.lab{font:600 11.5px/1.3 var(--f-body);letter-spacing:.18em;text-transform:uppercase}
.hand{font-family:var(--f-hand);font-weight:500}
.wrap{padding-inline:var(--gut)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;border:1.5px solid currentColor;background:transparent;font:600 13px var(--f-body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .3s,color .3s,transform .3s}
.btn.sun{background:var(--sun);border-color:var(--sun);color:#1a0d05}
.btn.sun:hover{background:#ff8a45}
.btn:not(.sun):hover{background:currentColor}
.btn:not(.sun):hover span{color:var(--teal)}
.btn i{font-style:normal;font-size:16px}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:100;background:var(--teal);display:grid;place-items:center;color:var(--canvas);transition:transform 1s cubic-bezier(.7,0,.2,1)}
#loader.out{transform:translateY(-101%)}
#loader .mk{width:min(220px,50vw)}
#loader .mk path{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.5s .1s cubic-bezier(.6,0,.2,1) forwards}
#loader .mk circle{transform:translateY(-40px);opacity:0;animation:drop .7s 1.1s cubic-bezier(.3,1.6,.5,1) forwards}
#loader .kar{font:700 clamp(28px,6vw,44px) var(--f-hand);color:var(--mustard);text-align:center;margin-top:10px;opacity:0;animation:fade .6s 1.3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes drop{to{transform:none;opacity:1}}@keyframes fade{to{opacity:1}}

/* ---------- nav ---------- */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;display:flex;align-items:center;gap:24px;padding:16px var(--gut);color:var(--canvas);mix-blend-mode:normal;transition:background .4s,color .4s,padding .4s}
.nav.solid{background:rgba(243,233,214,.9);backdrop-filter:blur(10px);color:var(--ink);padding-block:10px}
.nav .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav .logo svg{width:52px;height:auto}
.nav .logo b{font:600 12px var(--f-body);letter-spacing:.28em}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{font:600 12px var(--f-body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;position:relative}
.nav ul a:after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;background:var(--sun);transition:right .3s}
.nav ul a:hover:after{right:0}
.nav .btn{height:40px;padding:0 16px;font-size:11.5px}
@media (max-width:820px){.nav ul{display:none}.nav .btn{margin-left:auto}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,980px);background:linear-gradient(180deg,#123b4a 0%,#2b6b78 38%,#e6a36d 74%,#f3c08a 100%);color:var(--canvas);overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:24px;padding:120px var(--gut) clamp(90px,12vw,150px)}
.hero .sunball{position:absolute;left:58%;bottom:26%;width:clamp(160px,22vw,320px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 45%,#ffd8a0,#f6a04f 45%,#f0742b 70%,rgba(240,116,43,0) 71%);filter:drop-shadow(0 0 60px rgba(247,160,79,.6));z-index:0}
.hero .sea{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;pointer-events:none}
.hero .sea svg{position:absolute;bottom:0;width:200%;height:100%;left:0}
.hero .sea .w1{animation:wave 14s linear infinite;opacity:.95}
.hero .sea .w2{animation:wave 9s linear infinite reverse;opacity:.9}
.hero .sea .w3{animation:wave 6s linear infinite}
@keyframes wave{to{transform:translateX(-50%)}}
.hero .copy{position:relative;z-index:3;min-width:0}
.hero .kar{font:700 clamp(30px,4.4vw,52px)/1 var(--f-hand);color:var(--mustard);transform:rotate(-4deg);display:inline-block;margin-bottom:10px}
.hero h1{font-size:clamp(58px,10.4vw,168px);font-style:italic}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:inline-block}
.hero .sub{max-width:44ch;margin-top:26px;font-size:clamp(15px,1.3vw,18px);color:#fbf3e4}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero .eyebrow{margin-bottom:18px;color:#d9eee9}
.hero .stack{position:relative;z-index:3;height:min(62vh,600px);min-width:0}
.pol{position:absolute;background:#fbf7ef;padding:10px 10px 0;box-shadow:0 18px 40px rgba(8,20,20,.35),0 2px 6px rgba(8,20,20,.2);color:var(--ink);will-change:transform}
.pol img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(1.05) contrast(1.02)}
.pol figcaption{font:600 clamp(18px,1.7vw,24px)/1 var(--f-hand);padding:10px 4px 12px;text-align:center}
.pol:before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:26px;transform:translateX(-50%) rotate(-3deg);background:rgba(231,177,58,.78);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.pol.t2:before{background:rgba(240,116,43,.75);transform:translateX(-50%) rotate(4deg)}
.pol.t3:before{background:repeating-linear-gradient(90deg,rgba(14,29,28,.8) 0 7px,rgba(251,247,239,.85) 7px 14px)}
.hero .stack .pol{width:clamp(150px,16vw,250px)}
.hero .stack .p1{left:4%;top:12%;transform:rotate(-8deg)}
.hero .stack .p2{left:38%;top:0;transform:rotate(5deg);z-index:2}
.hero .stack .p3{left:20%;top:44%;transform:rotate(-2deg);z-index:3}
.hero .idx{position:absolute;right:var(--gut);bottom:clamp(24px,4vw,44px);z-index:4;text-align:right;font:600 11px/1.9 var(--f-body);letter-spacing:.16em;text-transform:uppercase}
.hero .idx a{text-decoration:none;opacity:.72;display:block}.hero .idx a:hover{opacity:1;color:var(--mustard)}
.hero .scroll{position:absolute;left:var(--gut);bottom:clamp(24px,4vw,44px);z-index:4;font:600 11px var(--f-body);letter-spacing:.2em}
.hero .scroll i{display:inline-block;animation:bob 1.6s ease-in-out infinite;font-style:normal}
@keyframes bob{50%{transform:translateY(5px)}}
@media (max-width:860px){.hero{grid-template-columns:1fr;align-items:start;padding-top:110px}.hero .stack{height:340px;order:-1}.hero .stack .pol{width:150px}.hero .idx{display:none}.hero .sunball{left:auto;right:-40px;bottom:40%}}

/* ---------- stripes band ---------- */
.band{background:var(--ink);color:var(--canvas);overflow:hidden;position:relative;padding-block:20px;border-block:10px solid transparent;border-image:repeating-linear-gradient(90deg,var(--ink) 0 18px,var(--canvas) 18px 36px) 10}
.band .row{display:flex;white-space:nowrap;gap:46px;font:italic 400 clamp(36px,6vw,84px)/1 var(--f-disp);will-change:transform}
.band .row span{display:inline-flex;align-items:center;gap:46px}
.band .row b{display:inline-block;width:.42em;height:.42em;border-radius:50%;background:var(--sun);flex:none}

/* ---------- sails ---------- */
.sails{position:relative;padding-block:clamp(90px,12vw,170px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:center}
.sails h2{font-size:clamp(52px,8vw,124px);font-style:italic}
.sails .intro{max-width:40ch;margin-top:22px;color:var(--muted)}
.slist{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;font:600 12.5px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;max-width:480px}
.slist li button{all:unset;cursor:pointer;display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);width:100%;transition:color .2s,padding .3s}
.slist li button span{color:var(--muted);font-variant-numeric:tabular-nums}
.slist li button:hover,.slist li button.on{color:var(--sun);padding-left:8px}
.slist li button:focus-visible{outline:2px solid var(--sun)}
.board{position:relative;height:clamp(560px,62vw,820px);min-width:0}
.board .pol{width:clamp(140px,15vw,220px);transition:box-shadow .3s;cursor:pointer}
.board .pol.lit{box-shadow:0 0 0 3px var(--sun),0 30px 60px rgba(8,20,20,.4);z-index:20!important}
.board .pol .px{position:absolute;right:10px;top:16px;background:var(--ink);color:var(--canvas);font:600 10.5px var(--f-body);letter-spacing:.1em;padding:5px 8px}
@media (max-width:900px){.sails{grid-template-columns:1fr}.board{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px;padding-top:16px}.board .pol{position:relative;left:auto!important;top:auto!important;width:auto}}

/* ---------- a day on the creek (the pinned sky) ---------- */
.day{position:relative;height:620vh;background:var(--ink)}
.day .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:#fff}
.day canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.day .hd{position:absolute;left:var(--gut);top:clamp(80px,12vh,120px);z-index:4;max-width:min(560px,80vw)}
.day .hd .lab{opacity:.8}
.day .clock{font:italic 400 clamp(64px,11vw,170px)/.9 var(--f-disp);font-variant-numeric:tabular-nums;margin-top:6px;text-shadow:0 2px 30px rgba(0,0,0,.18)}
.day .chap{font:700 clamp(22px,2.4vw,34px) var(--f-hand);color:var(--mustard);margin-top:6px;min-height:1.2em}
.day .card{position:absolute;right:var(--gut);bottom:clamp(90px,16vh,170px);z-index:5;width:min(420px,calc(100% - 2*var(--gut)));display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center;background:rgba(10,22,24,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);padding:14px;color:#fff}
.day .card .pol{position:relative;width:150px;transform:rotate(-4deg);padding:7px 7px 0}
.day .card .pol figcaption{font-size:17px;padding:7px 2px 9px}
.day .card h3{font-size:clamp(30px,3vw,42px);font-style:italic}
.day .card p{font-size:14.5px;color:#e6efed;margin-top:8px}
.day .card .meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font:600 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--mustard)}
.day .card a{display:inline-block;margin-top:12px;font:600 12px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none;border-bottom:1.5px solid var(--sun);padding-bottom:3px}
.day .rail{position:absolute;left:var(--gut);right:var(--gut);bottom:30px;z-index:4;display:flex;gap:6px}
.day .rail i{flex:1;height:3px;background:rgba(255,255,255,.22);position:relative;overflow:hidden}
.day .rail i b{position:absolute;inset:0;background:var(--sun);transform-origin:left;transform:scaleX(0)}
.day .hint{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);z-index:4;font:600 20px var(--f-hand);color:#bff7ff;opacity:0;transition:opacity .6s;white-space:nowrap}
@media (max-width:700px){.day .card{grid-template-columns:96px minmax(0,1fr);gap:12px;bottom:60px}.day .card .pol{width:96px}.day .card p{font-size:13.5px}.day .hd{top:84px}}

/* ---------- people & culture ---------- */
.people{position:relative;padding-block:clamp(100px,13vw,190px);background:var(--teal);color:var(--canvas);overflow:hidden}
.people .bg{position:absolute;inset:0;opacity:.13;background-image:var(--pat);background-size:240px 240px;pointer-events:none}
.people .grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,6vw,90px);align-items:center}
.people h2{font-size:clamp(44px,6.4vw,100px)}
.people h2 .w{display:inline-block;margin-right:.18em}
.people .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(36px,5vw,60px);border-top:1px solid rgba(243,233,214,.25);padding-top:22px}
.people .cols b{display:block;font:600 11.5px var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--mustard);margin-bottom:8px}
.people .cols p{font-size:15px;color:#dce9e5}
.people .note{font:700 clamp(22px,2.2vw,30px)/1.15 var(--f-hand);color:var(--mustard);margin-top:34px;transform:rotate(-2deg)}
.people .photos{position:relative;height:clamp(460px,48vw,640px);min-width:0}
.people .photos .pol{width:clamp(150px,17vw,250px)}
.people .photos .a{left:2%;top:4%;transform:rotate(-6deg)}
.people .photos .b{left:44%;top:0;transform:rotate(5deg)}
.people .photos .c{left:18%;top:46%;transform:rotate(3deg);z-index:2}
@media (max-width:900px){.people .grid{grid-template-columns:1fr}.people .cols{grid-template-columns:1fr}.people .photos{height:430px}.people .photos .pol{width:44%}}

/* ---------- occasions (stacking cards) ---------- */
.occ{position:relative;height:430vh}
.occ .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr;padding-top:clamp(84px,11vh,120px)}
.occ .hd{text-align:center;padding-inline:var(--gut)}
.occ h2{font-size:clamp(48px,7vw,108px);font-style:italic}
.occ .hd .tag{font:600 clamp(20px,2vw,28px) var(--f-hand);color:var(--sun);margin-top:6px}
.occ .deck{position:relative;min-height:0}
.occ .oc{position:absolute;left:50%;top:52%;width:clamp(230px,24vw,330px);background:#fbf7ef;padding:12px 12px 18px;box-shadow:0 24px 60px rgba(8,20,20,.28);transform:translate(-50%,-50%)}
.occ .oc img{width:100%;aspect-ratio:1/1.08;object-fit:cover}
.occ .oc h3{font-size:clamp(28px,2.6vw,38px);font-style:italic;margin-top:12px}
.occ .oc p{font-size:13.5px;color:var(--muted);margin-top:6px;text-transform:none}
.occ .oc .hand{display:block;color:var(--sun);font-size:22px;margin-top:6px}

/* ---------- faces wall ---------- */
.faces{position:relative;padding-block:clamp(90px,12vw,160px);overflow:hidden;background:var(--blush)}
.faces .hd{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px;margin-bottom:clamp(36px,5vw,60px)}
.faces h2{font-size:clamp(46px,7vw,110px);font-style:italic;max-width:13ch}
.faces .hd p{max-width:30ch;color:#5f4740}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);height:clamp(560px,70vw,900px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent)}
.wall .col{display:grid;gap:clamp(10px,1.4vw,20px);align-content:start;will-change:transform}
.wall figure{margin:0;position:relative;overflow:hidden}
.wall img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.wall figure:hover img{transform:scale(1.06)}
@media (max-width:760px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}.wall .col:nth-child(n+3){display:none}.faces .hd{grid-template-columns:1fr}}

/* ---------- prices ---------- */
.prices{padding-block:clamp(90px,12vw,160px);display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(28px,5vw,80px)}
.prices h2{font-size:clamp(46px,6.4vw,100px);font-style:italic}
.prices .lede{color:var(--muted);margin-top:18px;max-width:36ch}
.seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;padding:4px;margin-top:26px;gap:4px;flex-wrap:wrap}
.seg button{border:0;background:transparent;border-radius:999px;padding:9px 16px;cursor:pointer;font:600 12px var(--f-body);letter-spacing:.12em;text-transform:uppercase}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--canvas)}
.ptable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ptable th{font:600 11px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 10px 12px;border-bottom:1.5px solid var(--ink)}
.ptable td{padding:16px 10px;border-bottom:1px solid var(--line);vertical-align:baseline}
.ptable td:first-child{font:italic 400 clamp(24px,2.3vw,32px)/1 var(--f-disp)}
.ptable td.num{text-align:right;font-weight:600}
.ptable th.num{text-align:right}
.ptable tr{transition:background .2s}.ptable tbody tr:hover{background:rgba(231,177,58,.16)}
.ptable .ask{color:var(--muted);font-weight:500}
.tblwrap{overflow-x:auto;min-width:0}
.ptable small.tm-m{display:none;font:500 12.5px var(--f-body);color:var(--muted);margin-top:6px}
@media (max-width:640px){.ptable .tm,.ptable .inc{display:none}.ptable small.tm-m{display:block}.ptable td{padding:13px 6px}.ptable td.num{font-size:14px;white-space:nowrap}}
.faq{margin-top:46px;border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font:600 17px var(--f-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:400 26px/1 var(--f-disp);transition:transform .3s;color:var(--sun)}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--muted);max-width:62ch}
@media (max-width:900px){.prices{grid-template-columns:1fr}}

/* ---------- book (pinboard) ---------- */
.book{position:relative;padding-block:clamp(100px,13vw,180px) clamp(80px,10vw,140px);background:linear-gradient(180deg,var(--canvas2),#dccaa8);overflow:hidden}
.book .cork{position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(120,86,40,.25) 1px,transparent 1.4px);background-size:7px 7px;pointer-events:none}
.book h2{position:relative;text-align:center;font-size:clamp(52px,8vw,124px);font-style:italic}
.book .sub{position:relative;text-align:center;font:600 clamp(20px,2vw,28px) var(--f-hand);color:var(--sun);margin-top:8px}
.book .area{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px) minmax(0,1fr);gap:24px;margin-top:clamp(40px,6vw,70px);align-items:start}
.book .side{position:relative;min-height:520px}
.book .side .pol{width:clamp(130px,12vw,190px)}
.note{position:relative;background:#fffaf0;padding:clamp(22px,3vw,38px);box-shadow:0 30px 70px rgba(60,40,10,.25),0 2px 4px rgba(60,40,10,.12);transform:rotate(-.6deg)}
.note .pin{position:absolute;top:-16px;left:50%;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9d63,var(--sun) 55%,#b44c12);box-shadow:0 6px 10px rgba(0,0,0,.25)}
.note form{display:grid;gap:14px}
.note .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fl{display:grid;gap:6px;min-width:0}
.fl span{font:600 10.5px var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fl input,.fl select,.fl textarea{width:100%;border:0;border-bottom:1.5px solid var(--ink);background:transparent;padding:8px 2px;font:500 17px var(--f-body);border-radius:0}
.fl textarea{resize:vertical;min-height:64px;border:1.5px solid var(--line);padding:10px}
.fl input:focus,.fl select:focus,.fl textarea:focus{outline:none;border-color:var(--sun)}
.sum{background:var(--ink);color:var(--canvas);padding:16px 18px;display:grid;gap:6px;font-variant-numeric:tabular-nums}
.sum .r{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#cfdcd8}
.sum .r b{color:var(--canvas)}
.sum .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(243,233,214,.2);padding-top:10px;margin-top:4px}
.sum .tot span{font:600 11px var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.sum .tot b{font:italic 400 34px/1 var(--f-disp);color:var(--mustard)}
.sum .season{font:600 10.5px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}
.err{color:#b4321a;font-size:13.5px;min-height:1em}
.done{display:grid;gap:14px;text-align:center}
.done .ref{font:italic 400 44px/1 var(--f-disp)}
.done .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.mpesa{border:1.5px dashed var(--sea);padding:16px;display:grid;gap:10px;text-align:left}
.mpesa .lab{color:var(--sea)}
.mpesa .stat{font:600 15px var(--f-body)}
.mpesa small{color:var(--muted);font-size:12.5px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--sea);border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (max-width:980px){.book .area{grid-template-columns:1fr}.book .side{display:none}}
@media (max-width:520px){.note .two{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--canvas);padding-block:clamp(70px,9vw,120px) 30px;overflow:hidden;position:relative}
footer .word{font:400 clamp(64px,17vw,300px)/.8 var(--f-disp);letter-spacing:-.02em;white-space:nowrap;background:var(--patlight) 0 0/180px 180px,var(--canvas);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:40px}
footer .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
footer .cols b{display:block;font:600 11px var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--mustard);margin-bottom:10px}
footer .cols p,footer .cols a{font-size:15px;color:#d6e2de;text-decoration:none;display:block;line-height:1.8}
footer .cols a:hover{color:var(--sun)}
footer .copy{display:flex;align-items:center;gap:8px;margin-top:6px}
footer .copy button{border:1px solid rgba(243,233,214,.35);background:transparent;color:var(--canvas);font:600 10px var(--f-body);letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;cursor:pointer}
footer .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid rgba(243,233,214,.18);margin-top:30px;padding-top:20px;font-size:12.5px;color:#9fb3ae}
@media (max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}

.concept{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;margin:0;max-width:calc(100% - 24px);background:var(--ink);color:var(--canvas);font:600 10.5px/1.3 var(--f-body);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-left:3px solid var(--sun)}
/* kanga border used between sections */
.kanga{height:34px;background-image:var(--kanga);background-size:auto 34px;background-repeat:repeat-x}

/* soft cursor: a little sun that follows on desktop */
.cur{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--sun);pointer-events:none;z-index:90;mix-blend-mode:multiply;transition:width .25s,height .25s,margin .25s,opacity .3s;opacity:0}
.cur.big{width:54px;height:54px;margin:-27px 0 0 -27px;opacity:.35}
@media (hover:none){.cur{display:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}#loader{display:none}.day{height:auto}.day .stage{position:relative}.occ{height:auto}.occ .stage{position:relative;height:auto;padding-bottom:60px}.occ .deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;padding:30px var(--gut)}.occ .oc{position:relative;left:auto;top:auto;transform:none!important;width:auto}}