/* fonts are served from this site (assets/fonts), Latin characters only */
@font-face{font-family: 'Open Sans';font-style: normal;font-weight: 300 700;font-stretch: 100%;font-display: swap;src: url(../assets/fonts/open-sans-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family: 'Sour Gummy';font-style: normal;font-weight: 400 800;font-stretch: 100%;font-display: swap;src: url(../assets/fonts/sour-gummy-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{--logo:url(../assets/logo.webp);--hero:url(../assets/frames-23b6641f08/desktop/000.webp)}
/* tall screens get the video turned on its side, so the whole field of kiwis fills a phone instead of a thin slice */
@media (max-aspect-ratio:1/1){:root{--hero:url(../assets/frames-23b6641f08/portrait/000.webp)}}

/* Layout: follows the Kiwi deck page by page. Pinned cover (slice opens into the photo), Who We Are, Our Services on cream, a sideways-scrolling row of package cards, the tagline, the closing kiwi. Committed to the deck's light look in every theme. */
:root{
  --white:#FFFFFF;
  --cream:#E8EAC6;
  --olive:#7A943B;
  --olive-dark:#55692A;
  --ghost:#EDEFE4;        /* the faded watermark headings */
  --ghost-cream:#DADDB0;
  --ink:#15171A;          /* card text and buttons */
  --grey:#5D6153;
  --title:"Sour Gummy","Baloo 2","Trebuchet MS",sans-serif;
  --text:"Segoe UI","Open Sans",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--white);color:var(--olive)}
body{margin:0;font-family:var(--text);font-size:17px;line-height:1.55;overflow-x:hidden}
h1,h2,h3{font-family:var(--title);font-weight:600;line-height:1;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--olive);outline-offset:3px;border-radius:10px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* logo as a mask so it can change color */
.mark{position:relative;aspect-ratio:640/225}
.mark i{position:absolute;inset:0;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.mark .echo{background:var(--cream);transform:translate(-3.4%,6.5%)}
.mark .fill{background:var(--olive)}

/* fixed bits */
/* scroll progress: an olive bar with a kiwi slice rolling along its tip */
.bar{position:fixed;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--olive-dark),var(--olive) 60%,#a9cf45);transform:scaleX(0);transform-origin:0 50%;z-index:50}
.rider{position:fixed;left:0;top:-4px;width:34px;height:34px;z-index:51;visibility:hidden;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(60,80,20,.35))}
.rider svg{display:block;width:100%;height:100%}

/* branded scrollbar: olive kiwi thumb on a cream track */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--olive),var(--olive-dark));border:3px solid var(--cream);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--olive-dark)}
@supports not selector(::-webkit-scrollbar){html{scrollbar-color:var(--olive) var(--cream)}}
.msg{position:fixed;right:clamp(12px,3vw,28px);top:calc(env(safe-area-inset-top,0px) + 16px);z-index:40}
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;text-decoration:none;font:600 .98rem/1 var(--text);padding:14px 22px;border-radius:999px;border:0;cursor:pointer;transition:transform .15s,background .2s}
.pill:hover{background:var(--olive-dark)}
.pill:active{transform:scale(.96)}
.pill svg{width:18px;height:18px}
.pill.light{background:#fff;color:var(--ink)}
.pill.light:hover{background:var(--cream)}

/* 1. cover */
.cover{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--white);--r:22;--logo-c:#7A943B;--echo:1;--handle:0;--hint:1}
.cover .photo{position:absolute;inset:0;overflow:hidden;background:var(--hero) center/cover no-repeat;clip-path:circle(calc(var(--r) * 1%) at 50% 50%);filter:contrast(1.08) saturate(1.15)}
/* the video as a sequence of frames (assets/frames), drawn on this canvas as you scroll.
   The background is frame 000, so the circle looks right before any frame has loaded */
.cover canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:var(--hero) center/cover no-repeat}
.cover .mark{position:absolute;left:50%;top:50%;width:min(78vw,720px);transform:translate(-50%,-50%)}
.cover .mark .fill{background:var(--logo-c,var(--olive))}
.cover .mark .echo{opacity:var(--echo,1)}
.cover .handle{position:absolute;left:0;right:0;bottom:7%;text-align:center;font:600 clamp(1.1rem,2.4vw,1.6rem)/1 var(--text);color:#fff;opacity:var(--handle,0)}
.cover .hint{position:absolute;left:0;right:0;bottom:6%;text-align:center;font:500 .9rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);opacity:var(--hint,1)}
.cover .hint span{display:inline-block;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.cover.done{--r:75;--logo-c:#fff;--echo:0;--handle:1;--hint:0}

/* shared section heading with ghost watermark, as in the deck */
section{position:relative;overflow:hidden}
.ghost{position:absolute;right:-2vw;bottom:-.18em;font:600 clamp(4rem,12vw,10rem)/1 var(--title);color:var(--ghost);white-space:nowrap;pointer-events:none;user-select:none}
.cream .ghost{color:var(--ghost-cream)}
.big{font-size:clamp(3rem,8vw,6.2rem);color:var(--olive)}

/* 2. who we are */
.who{padding-block:clamp(110px,16vw,200px) clamp(150px,20vw,240px);text-align:center}
.who .wrap{display:grid;gap:clamp(24px,3vw,36px);justify-items:center;position:relative;z-index:1}
.who p{font:500 clamp(1.55rem,3.3vw,2.5rem)/1.32 var(--title);max-width:24em;color:var(--olive)}
.reveal .w{display:inline-block;opacity:.18;transform:translateY(.28em) rotate(4deg);transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.reveal .w.on{opacity:1;transform:none}
.hl{color:var(--olive-dark);background:linear-gradient(var(--cream),var(--cream)) 0 88%/0% 46% no-repeat;transition:background-size .7s cubic-bezier(.6,0,.2,1);padding-inline:.08em;border-radius:.2em}
.hl.on{background-size:100% 46%}

/* 3. services */
.cream{background:var(--cream)}
.cream .big{color:var(--olive-dark)} /* the lighter olive is too faint to read on cream */
.services{padding-block:clamp(90px,12vw,150px) clamp(150px,20vw,230px);text-align:center}
.services .wrap{position:relative;z-index:1;display:grid;gap:clamp(36px,5vw,56px);justify-items:center}
.svc{list-style:none;margin:0;padding:0;display:grid;gap:clamp(6px,1.2vw,14px)}
.svc li{font:500 clamp(1.6rem,3.9vw,2.8rem)/1.25 var(--title);color:var(--olive)}
/* same rounded font as Who We Are; on hover a white marker swipes under the line and it tilts a little */
.svc li span{display:inline-block;padding-inline:.12em;border-radius:.2em;background:linear-gradient(var(--white),var(--white)) 0 88%/0% 46% no-repeat;transition:background-size .5s cubic-bezier(.6,0,.2,1),transform .45s cubic-bezier(.3,1.6,.5,1),color .3s}
@media (hover:hover){.svc li:hover span{background-size:100% 46%;transform:rotate(-2deg) scale(1.06);color:var(--olive-dark)}}

/* 4. packages, sideways row */
.packs{padding-block:clamp(36px,5vh,64px)}
.packs .head{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 40px;margin-bottom:clamp(20px,3vh,36px)}
.packs .head p{color:var(--grey);max-width:36ch}
.packs .ghost{bottom:auto;top:clamp(10px,2vw,30px)}
.dots{display:none}
.track{display:flex;gap:24px;padding-inline:clamp(16px,4vw,40px);width:max-content;position:relative;z-index:1}
.card{width:min(360px,82vw);background:#fff;border:3px solid var(--olive);border-radius:28px;padding:24px 24px 22px;color:var(--ink);display:flex;flex-direction:column;gap:12px}
.card h3{font:700 1.5rem/1.1 var(--text);letter-spacing:-.02em}
.price{font:800 3rem/1 var(--text);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.price small{font:500 1.2rem var(--text);letter-spacing:0;color:var(--grey);margin-left:4px}
.feat{list-style:none;margin:0;padding:14px 0 4px;border-top:1px solid #DDE0D8;display:grid;gap:8px;font-size:.92rem;line-height:1.32}
.feat li{display:grid;grid-template-columns:20px 1fr;gap:10px}
.feat li small{display:block;color:var(--grey);font-size:.84rem}
.feat svg{width:20px;height:20px}
.card .pill{margin-top:auto;align-self:flex-start}
.addon{display:flex;gap:12px;align-items:center;background:#F1F2E3;border-radius:14px;padding:11px 14px;font-size:.95rem}
.addon b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--olive);color:#fff;flex:none}
.tag{font:700 .76rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--olive-dark)}

/* 5. tagline */
.juicy{padding-block:clamp(100px,14vw,170px);text-align:center}
.juicy h2{font-size:clamp(2.6rem,7.6vw,6rem);font-weight:600;text-transform:uppercase;color:var(--olive-dark);line-height:1.08;letter-spacing:.01em}
.juicy h2 span{display:inline-block}
.juicy .line{display:block}
.juicy .under{display:block;margin:18px auto 0;width:min(560px,70%);height:auto}
.juicy .spark{position:absolute;width:clamp(36px,5vw,60px);overflow:visible}
.draw{stroke:var(--olive-dark);stroke-width:5;stroke-linecap:round;fill:none}
.spark .draw{stroke-width:4}

/* 6. closing */
.close{padding-block:clamp(70px,9vw,110px) clamp(60px,8vw,90px);text-align:center}
.close .wrap{display:grid;justify-items:center;gap:26px}
.close img{width:min(520px,88vw);height:auto}
.close .handle{font:700 clamp(1.5rem,3.4vw,2.3rem)/1 var(--text);color:var(--olive)}
.close .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.close .pill.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.close .pill.line:hover{background:var(--cream)}
footer{display:grid;justify-items:center;gap:16px;padding-block:28px 40px;text-align:center;color:var(--grey);font-size:.88rem}

/* meet the team: black-and-white cut-outs on deep olive, each one standing in front of their giant first name */
.team{--team-bg:#4A5B22;--lime:#D4E86B;--leaf:#C9DE7A;background:radial-gradient(120% 70% at 50% 0%,#566A28 0%,var(--team-bg) 60%);color:var(--cream);padding-top:clamp(90px,12vw,160px)}
.team-head{position:relative;z-index:2;display:grid;justify-items:center;gap:clamp(14px,2vw,22px);text-align:center}
.kicker{font:600 .85rem/1 var(--text);letter-spacing:.24em;text-transform:uppercase;color:var(--leaf)}
.team-title{font-size:clamp(2.4rem,8.2vw,7.4rem);line-height:1.02;color:var(--cream);text-transform:uppercase;letter-spacing:-.01em}
.team-title .tl{display:block}
.team-title .tw{display:inline-block}

/* overflow:hidden keeps each person (and their sliding photo) inside their own block */
.member{position:relative;overflow:hidden;min-height:min(100vh,900px);display:grid;align-items:center;padding-inline:clamp(16px,6vw,96px)}
.m-ghost{position:absolute;top:50%;left:-1vw;translate:0 -55%;font:600 clamp(8rem,29vw,27rem)/.8 var(--title);color:#5E7330;white-space:nowrap;pointer-events:none;user-select:none;z-index:0}
/* the giant name is a ticker strip (js/main.js repeats it): solid and outlined names take turns */
.m-ghost .mq{display:inline-flex;white-space:nowrap;will-change:transform}
.m-ghost b{font-weight:inherit;padding-right:.32em}
.m-ghost b:nth-child(even){color:transparent;-webkit-text-stroke:.022em #6B8236}
/* wide screens: each giant name sits right behind its person, sized to them */
@media (min-width:761px){
  .nancy .m-ghost{top:auto;left:0;right:auto;bottom:calc(5vh + min(8vw,150px));translate:none;font-size:min(17vw,330px)}
  .hagop .m-ghost{top:auto;right:auto;left:0;bottom:min(22vw,360px);translate:none;font-size:min(14vw,240px)}
  /* the strip fades out before it reaches the text, so it only runs behind the person */
  .nancy .m-ghost{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 34vw,#000 50vw);mask-image:linear-gradient(90deg,transparent 0,transparent 34vw,#000 50vw)}
  .hagop .m-ghost{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 40vw,transparent 54vw);mask-image:linear-gradient(90deg,#000 0,#000 40vw,transparent 54vw)}
}
.m-photo{position:absolute;bottom:0;margin:0;z-index:1}
.m-photo img{display:block;width:100%;height:auto;filter:drop-shadow(-.8vw .8vw 0 rgba(232,234,198,.14));transition:filter .6s ease}
.member:hover .m-photo img{filter:drop-shadow(-1.4vw 1.4vw 0 rgba(212,232,107,.45))}
.nancy .m-photo{right:-1vw;bottom:5vh;width:min(57vw,1100px)}
.hagop .m-photo{left:5vw;width:min(34vw,560px)}
.m-text{position:relative;z-index:2;padding-block:clamp(60px,8vw,120px)}
.nancy .m-text{justify-self:start;max-width:min(520px,38vw)}
.hagop .m-text{justify-self:end;max-width:min(520px,44vw)}
.m-role{font:600 .8rem/1.3 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--leaf);margin-bottom:14px}
.m-name{font-size:clamp(2.6rem,5vw,4.4rem);color:var(--cream);margin-bottom:22px}
/* bio: bigger and brighter on the green, a lime lead-in in the title font, and key phrases that get a marker swipe */
.m-bio{font-size:clamp(1.06rem,1.25vw,1.2rem);line-height:1.75;color:#F1F3DE;max-width:34em;text-wrap:pretty}
.m-bio strong{font:500 1.12em/1 var(--title);color:var(--lime);margin-right:.15em}
.m-bio mark{color:#fff;font-weight:600;background:linear-gradient(rgba(212,232,107,.32),rgba(212,232,107,.32)) 0 88%/0% 42% no-repeat;transition:background-size .9s cubic-bezier(.6,0,.2,1) .35s;padding-inline:.06em;border-radius:.15em}
.member.lit .m-bio mark{background-size:100% 42%}
.m-quote{margin:30px 0 0}
.m-quote p{font:500 clamp(1.9rem,3.2vw,2.9rem)/1.08 var(--title);color:var(--lime)}
.m-quote span{display:inline-block;margin-right:.1em}
.m-line{display:block;width:min(340px,80%);height:auto;margin-top:8px;overflow:visible}
.m-line .draw{stroke:var(--lime);stroke-width:4}

/* text for search engines and screen readers that is not shown on screen */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* FAQ: the answers people (and AI assistants) look for, as a kiwi-styled accordion.
   Opening one closes the others (name="faq"); it slides open where the browser supports it */
.faq{background:var(--cream);padding-block:clamp(80px,10vw,140px);overflow:visible}
.faq-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start}
.faq-head{position:sticky;top:110px;display:grid;gap:16px;justify-items:start}
.faq .big{font-size:clamp(2.8rem,5.4vw,5rem);color:var(--olive-dark)}
.faq .kicker{font:600 .85rem/1 var(--text);letter-spacing:.24em;text-transform:uppercase;color:var(--olive-dark)}
.faq-head p:last-child{color:var(--grey);max-width:32ch}
.faq-head a{color:var(--olive-dark);font-weight:600;text-underline-offset:3px}
.faq-list{display:grid;gap:12px}
.qa{background:#fff;border:2px solid transparent;border-radius:22px;transition:border-color .3s,box-shadow .3s}
.qa[open]{border-color:var(--olive);box-shadow:0 16px 32px -20px rgba(85,105,42,.5)}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;cursor:pointer;border-radius:20px}
.qa summary::-webkit-details-marker{display:none}
.qa h3{font:500 clamp(1.12rem,1.6vw,1.38rem)/1.25 var(--title);color:var(--olive-dark);transition:color .2s}
.qa summary:hover h3{color:var(--olive)}
.qa-icon{flex:none;position:relative;width:34px;height:34px;border-radius:50%;background:var(--cream);transition:transform .5s cubic-bezier(.3,1.5,.5,1),background-color .3s}
.qa-icon::before,.qa-icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.5px;border-radius:2px;background:var(--olive-dark);translate:-50% -50%;transition:background-color .3s}
.qa-icon::after{rotate:90deg}
.qa[open] .qa-icon{transform:rotate(135deg);background:var(--olive)}
.qa[open] .qa-icon::before,.qa[open] .qa-icon::after{background:#fff}
.qa-a{padding:0 22px 22px;color:var(--grey);line-height:1.7;max-width:62ch}
:root{interpolate-size:allow-keywords}
.qa::details-content{block-size:0;overflow:hidden;transition:block-size .45s cubic-bezier(.3,.8,.3,1),content-visibility .45s allow-discrete}
.qa[open]::details-content{block-size:auto}
footer a{color:var(--olive-dark);font-weight:600;text-underline-offset:3px}
footer p{margin:0;padding-inline:16px}
/* the "Website made by Trinode" credit */
footer .made{display:inline-flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--ghost);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
footer .made img{height:34px;width:auto;opacity:1;transition:opacity .3s,transform .4s cubic-bezier(.3,1.5,.5,1)}
footer .made:hover img{transform:translateX(3px)}

/* phones: packages stack instead of sliding */
@media (max-width:760px){
  /* message button becomes a floating bar at thumb height; it hides while you scroll down
     and on the cover and closing sections (js/main.js toggles .away) */
  .msg{white-space:nowrap;top:auto;right:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);translate:50% 0;padding:15px 26px;box-shadow:0 12px 30px rgba(21,23,26,.3),0 0 0 3px rgba(255,255,255,.9);transition:transform .55s cubic-bezier(.3,1.5,.5,1),opacity .3s}
  .msg.away{transform:translateY(170%);opacity:0;pointer-events:none}
  /* packages: a swipeable carousel; the centred card is full size, the others shrink and fade */
  .track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:14px;padding:12px max(16px,calc((100vw - min(84vw,380px)) / 2)) 22px}
  .track::-webkit-scrollbar{display:none}
  .card{flex:0 0 min(84vw,380px);width:auto;scroll-snap-align:center;transform-origin:50% 70%}
  .dots{display:flex;justify-content:center;gap:8px}
  .dots:empty{display:none}
  .dots i{width:8px;height:8px;border-radius:99px;background:var(--ghost-cream);transition:width .35s cubic-bezier(.3,1.5,.5,1),background .35s}
  .dots i.on{width:28px;background:var(--olive)}
  body{font-size:16px}
  .faq-grid{grid-template-columns:1fr}
  .faq-head{position:static}
  .member{display:flex;flex-direction:column;min-height:0;padding-top:30px}
  /* phones: text first, then the giant name with the photo standing in front of its lower half */
  .m-ghost{position:relative;order:2;top:auto;left:auto;right:auto;bottom:auto;translate:none;font-size:31vw;margin:34px 0 -.45em;align-self:stretch}
  /* pull each name down so it sits behind the middle of the person, not above them */
  .nancy .m-ghost{margin-top:calc(34px + .6em);margin-bottom:-1.35em}
  .hagop .m-ghost{margin-top:calc(34px + 1em);margin-bottom:-1.75em}
  .nancy .m-text,.hagop .m-text{max-width:none;justify-self:auto;padding-block:min(22vw,90px) 0;order:1}
  .m-photo,.nancy .m-photo,.hagop .m-photo{position:relative;left:auto;right:auto;bottom:auto;width:100%;margin-top:0;order:3}
  .nancy .m-photo{margin-bottom:40px}
  .hagop .m-photo{width:88%;align-self:center}
}
@media (prefers-reduced-motion:reduce){
  .m-bio mark{background-size:100% 42%}
  *,*::before,*::after{animation:none!important;transition:none!important}
}



/* kiwi seed cursor, driven by js/main.js (mouse only, never on touch screens) */
html.has-cursor,html.has-cursor *{cursor:none!important}
.cur-seed,.cur-ring,.cur-burst{position:fixed;left:0;top:0;pointer-events:none;z-index:9999}
.cur-seed,.cur-ring{width:0;height:0;opacity:0;transition:opacity .25s}
html.cur-on .cur-seed,html.cur-on .cur-ring{opacity:1}
.cur-seed i{position:absolute;left:-9px;top:-14px;width:18px;height:28px;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.cur-seed svg,.cur-burst svg{display:block;width:100%;height:100%}
.cur-ring i{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border:2px solid var(--olive);border-radius:50%;transition:transform .35s cubic-bezier(.3,1.6,.5,1),background-color .3s,border-color .3s}
html.cur-hover .cur-ring i{transform:scale(1.7);background:rgba(169,207,69,.28);border-color:var(--olive-dark)}
html.cur-hover .cur-seed i{transform:scale(.8)}
html.cur-down .cur-seed i{transform:scale(.6)}
html.cur-down .cur-ring i{transform:scale(.8)}
.cur-burst{width:9px;height:14px}
@media (max-width:760px),(any-pointer:coarse){
  .cur-seed,.cur-ring,.cur-burst{display:none}
  html.has-cursor,html.has-cursor *{cursor:auto!important}
}