/* ================= TYPOGRAPHY — Geist (overrides the Inter set in snippet 25) ========= */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/geist:vf@latest/latin-wght-normal.woff2') format('woff2-variations');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/geist-mono:vf@latest/latin-wght-normal.woff2') format('woff2-variations');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ===== PALETTE: tourism ochre replaces the lime =====
   The lime was the same role AND nearly the same hue as heynesh's #FFFF23.
   #C8873E is a safari ochre: warm, clearly not-yellow, and ink on it measures
   ~6:1 so it still carries button text at 13px. */
:root{
  --sg-accent:#C8873E!important;
  --sg-accent-2:#D89F5A!important;
  --sg-gold:#8A6B23!important;      /* pushed deeper so VPAAL stays distinct */
  --sg-gold-2:#A6842F!important;
}

/* buttons: half the vertical padding, never underlined */
.sg-btn,.sg-btn:hover,.sg-btn:focus{text-decoration:none!important}
.sg-btn{padding:.4rem 1.5rem .4rem .6rem!important}
.sg-btn__label{text-decoration:none!important}
/* links must not inherit the theme's link colour */
.sg-section a,.sg-hero a,.sg-rail a,.sg-footer a,.sg-hero__sticky a{text-decoration:none!important}
.sg-section a:not(.sg-btn):not(.is-vpaal),
.sg-hero__sticky a:not(.sg-btn):not(.is-vpaal){color:inherit!important}
.sg-section a:not(.sg-btn):not(.is-vpaal):hover,
.sg-hero__sticky a:not(.sg-btn):not(.is-vpaal):hover{color:var(--sg-canopy)!important}
a.is-vpaal{color:var(--sg-gold)!important;text-decoration:none!important}
a.is-vpaal:hover{color:var(--sg-gold-2)!important}

/* WPCode prints snippet 25 AFTER this file, so these need !important to win */
:root{
  /* ONE typeface, no choice: whatever the Elementor kit's family field says,
     these four vars are what every kit-driven widget actually resolves to, so
     the site can only ever render Geist. Sizes stay in the kit (desktop only). */
  --e-global-typography-primary-font-family:'Geist' !important;
  --e-global-typography-secondary-font-family:'Geist' !important;
  --e-global-typography-text-font-family:'Geist' !important;
  --e-global-typography-accent-font-family:'Geist' !important;
  --sg-font-display:'Geist',-apple-system,sans-serif !important;
  --sg-font-ui:'Geist',-apple-system,sans-serif !important;
  --sg-font-mono:'Geist Mono',ui-monospace,monospace !important;
}
html{font-optical-sizing:auto;font-feature-settings:'tnum' 1;}
body,button,input,textarea,select{font-family:var(--sg-font-ui);}

/* ===== 7.3 HERO STAGE — heynesh model. Edit via EMCP write-file/edit-file. ===== */
.sg-hero{position:relative!important;height:300vh!important;min-height:0!important;padding:0!important;margin:0!important;display:block!important;background:var(--sg-bone)}
.sg-hero>.e-con-inner{display:block!important;max-width:none!important;width:100%!important;margin:0!important;padding:0!important}
.sg-hero .elementor-widget-html,.sg-hero .elementor-widget-html>.elementor-widget-container{width:100%!important;margin:0!important;padding:0!important}
.sg-hero__sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:transparent;z-index:3}
.sg-hero{background:var(--sg-bone)}
/* the offset below is measured to the CAP TOP, not the line box: the -.05em
   margin cancels the font's internal leading, so the letters start exactly
   1.6vh down whatever the viewport ratio (font-size flips between the vw and
   vh cap, and the leading moved with it before). */
/* CHACHA is nowrap, so at 24.2vw the word measured 1328px inside a 1193px box -
   67px of it hung off each side and the hero's overflow:hidden sliced the C.
   "CHACHA" renders at 4.287x its font-size, so 23vw = 98.6vw of text: it now
   fits edge to edge. Side insets go to 0 to buy back the width and keep the
   letters as large as they were. */
/* CHACHA is held inside the same 2.8vw gutter the nav row and bottom text use,
   so it never runs past that line. "CHACHA" renders at 4.287x its font-size and
   the band is 94.4vw, so 21.7vw keeps the word inside with a little air. The
   vertical anchor is untouched - the -.05em cap correction scales with the
   font, so the top of the letters stays exactly where it was. */
.sg-hero__logo{position:absolute;inset:calc(1.6vh - 70px) 2.8vw auto 2.8vw;height:50.4vh;display:flex;align-items:flex-start;justify-content:center;z-index:1;pointer-events:none}
.sg-hero__mark{visibility:hidden;display:block;width:100%;margin-top:-.05em;text-align:center;font-family:var(--sg-font-display);font-size:min(21.7vw,50vh);font-weight:700;line-height:.86;letter-spacing:-.05em;text-transform:uppercase;color:var(--sg-accent);white-space:nowrap}
/* 17 Aug r3: KE starts on the same vertical line as the HOME label, not the nav
   BOX - the ghost links carry .409em side padding (at 1.02vw font = .42vw), so
   the ghost box edge sits left of the visible text. Hero only: the docked KE
   still lands at x:0 in the rail. */
.sg-hero__loc{position:absolute;left:3.22vw;top:57vh;z-index:4;visibility:hidden;font-family:var(--sg-font-mono);font-size:.7vw;letter-spacing:.1em;text-transform:uppercase;color:var(--sg-ink-50)}
.sg-hero__portrait{position:fixed;inset:0;margin:0;z-index:2;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;pointer-events:none;will-change:transform,filter}
/* no-animation fallback (reduced motion, or a tab loaded in the background):
   the portrait cannot blur out on scroll, so it simply leaves with the hero. */
.sg-noanim .sg-hero__portrait{position:absolute!important;inset:0!important;opacity:1!important;visibility:visible!important}
/* no transition here on purpose: a throttled/background tab freezes transitions
   mid-way and would leave the portrait half-faded. Hard toggle only.
   Without the flip, the hero also needs its own wordmark - the rail's never flies. */
.sg-noanim .sg-hero__mark{visibility:visible}
/* The portrait is fixed and full-height, so it would swallow clicks across the
   whole page. Default to inert; only accept the pointer while the hero is on
   screen. Failure mode is 'hover swap is dead', never 'page is unclickable'. */
.sg-hero__stack{position:relative;height:68vh;width:auto;margin-top:15vh;pointer-events:none;cursor:default;-webkit-mask-image:linear-gradient(to bottom,#000 46%,rgba(0,0,0,.72) 72%,rgba(0,0,0,0) 97%),linear-gradient(to right,rgba(0,0,0,0) 0%,#000 9%,#000 91%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,#000 46%,rgba(0,0,0,.72) 72%,rgba(0,0,0,0) 97%),linear-gradient(to right,rgba(0,0,0,0) 0%,#000 9%,#000 91%,rgba(0,0,0,0) 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
/* 18 Aug: single-frame portrait, outfit hover swap retired - the stack stays
   pointer-inert so nothing under it ever loses clicks. */
.sg-hero__frame{display:block;height:68vh;width:auto;max-width:none;opacity:0;transition:opacity .38s cubic-bezier(.4,0,.2,1)}
.sg-hero__frame:not(:first-child){position:absolute;inset:0}
.sg-hero__frame.is-on{opacity:1}
/* Elementor ships `.elementor img{height:auto}` - one class + one type, which
   outranks a bare `.sg-hero__frame`. Whenever the portrait sits inside the
   Elementor container (mobile, and the no-animation desktop fallback) that rule
   wins and the image renders at its intrinsic 1000x1150. Outrank it. */
@media(min-width:1025px){
.sg-hero__portrait .sg-hero__frame{height:68vh;width:auto;max-width:none}
.sg-hero__portrait .sg-hero__stack{height:68vh;width:auto}
}
@media(max-width:1024px){
.sg-hero__stack,.sg-hero__frame{height:46vh}
.sg-hero__stack{cursor:default}
}
.sg-hero__navrow{position:absolute;left:2.8vw;right:2.8vw;top:59.4vh;display:flex;align-items:center;justify-content:space-between;z-index:4;pointer-events:none}
.sg-hero__navrow .sg-ghost-nav{pointer-events:auto}
.sg-hero__navgroup{display:flex;align-items:center;flex:0 1 auto}
.sg-hero__navgroup--l{justify-content:flex-start}
.sg-hero__navgroup--r{justify-content:flex-end}
/* The ghost must mirror the rail link's BOX, not just its text: the rail link is
   icon+label with padding/gap, so all of it is authored in em against the rail's
   11px so ghostWidth/realWidth collapses to a pure font-size ratio. */
/* 17 Aug r5: opacity:0 instead of visibility:hidden, and the ghosts are now
   anchors - each one is an invisible, perfectly-placed hit-target sitting at
   z4 over the hero, exactly under the flown-in menu label. The real rail links
   keep pointer-events:none while undocked (the mid-flight safety), yet the
   hero menu is fully clickable. */
.sg-ghost-nav{opacity:0;pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;gap:.636em;padding:.4545em .818em;font-family:var(--sg-font-display);font-size:1.02vw;font-weight:600;letter-spacing:-.02em;text-transform:uppercase;color:var(--sg-ink);line-height:1;white-space:nowrap}
.sg-ghost-nav>i{width:1.273em;height:1.273em;flex:none;display:block}
.sg-ghost-nav>span{display:block}
/* full-height rules between the hero nav items, not the old 9px ticks */
/* align-self:stretch made every bar as tall as its own flex line, and the two
   nav groups do not resolve to the same line height - hence the ragged set.
   A fixed em height, centred, makes all six identical and keeps them scaling
   with the nav type. */
/* 17 Aug r2: the bars were coming out uneven because the engine's entrance tween
   left each one holding its own inline scaleY. The engine now wipes its transform
   the moment the entrance completes (clearProps), so this em height is the single
   source of geometry at rest and the bars still grow in with the nav - the old
   transform:none!important kill-switch (which also killed the entrance) is gone.
   .585em = the previous 1.17em less half. */
.sg-ghost-sep{display:block;flex:none;width:1px;align-self:center;height:.585em;min-height:5px;background:var(--sg-ink);opacity:.15}
/* ---- NAV TYPE: one source of truth ----
   The hero nav ghosts and the docked rail links both read the kit's
   "Nav / Label (UPPERCASE)" global typography (wp-admin > Elementor > Site
   Settings > Typography), so editing it there moves both together. Only the
   SIZE differs in the hero, because the rail literally scales down from it. */
.sg-ghost-nav,.sg-rail__link,.sg-rail__link span,.sg-rail__nav a{
  font-family:var(--sg-font-display)!important;/* Geist - the kit's Nav entry still
     carries the old InterDisplay label; fix it in Site Settings > Typography and
     this line can bind to --e-global-typography-secondary-font-family instead */
  font-weight:var(--e-global-typography-secondary-font-weight,600)!important;
  letter-spacing:var(--e-global-typography-secondary-letter-spacing,-.02em)!important;
  text-transform:uppercase!important;
  line-height:var(--e-global-typography-secondary-line-height,1.5)!important;
}
.sg-rail__link,.sg-rail__link span,.sg-rail__nav a{font-size:var(--e-global-typography-secondary-font-size,11px)!important}
/* 17 Aug: headline + button dropped 7.5vh as one block, so the button lands on
   the same line as the bottom text (the heynesh arrangement). Nothing is
   rescaled - this is a translation only, so every proportion holds. */
.sg-hero__content{position:absolute;left:0;right:0;top:58.7vh;z-index:5;display:flex;flex-direction:column;align-items:center;pointer-events:none}
/* ONE size declaration per element. The desktop value is the min(5.3vw,9.4vh)
   term; the max(...) puts a fluid floor under it so phones/tablets scale
   automatically instead of needing their own breakpoint overrides. */
.sg-hero__h1{margin:0;text-align:center;font-family:var(--sg-font-display);font-size:max(min(11.4vw,44px),min(5.3vw,9.4vh));font-weight:700;line-height:1.03;letter-spacing:-.03em;color:var(--sg-bone-text);text-shadow:0 2px 40px rgba(6,16,9,.28)}
.sg-hero__h1 .sg-line{display:block}
.sg-hero__pills{display:flex;gap:10px;margin-top:2.6vh;pointer-events:auto}
.sg-hero__cards{position:absolute;inset:0;z-index:3;pointer-events:none}
.sg-ghost-card{position:absolute;background:var(--sg-panel);-webkit-backdrop-filter:blur(var(--sg-blur));backdrop-filter:blur(var(--sg-blur));border-radius:var(--sg-r-md);pointer-events:auto}
.sg-ghost-card--stats{visibility:hidden;left:2.8vw;top:66.5vh;width:16.4vw;min-width:190px;height:9.6vh}
/* sits below the nav row, mirroring the stats card on the left, so neither
   panel ever lands on the wordmark or on the nav links. */
.sg-ghost-card--traits{left:auto;right:2.8vw;top:66.5vh;width:14.5vw;min-width:168px;padding:1.2vh 1.2vw}
/* 17 Aug, Nelson: the Local / Patient / Sharp-eyed / Safe / Good company card
   is out of the hero. Hidden rather than deleted from the markup because the
   engine still tweens .sg-ghost-card--traits; display:none survives GSAP's
   autoAlpha (which only writes visibility), so it stays gone. */
.sg-ghost-card--traits{display:none!important}
.sg-hero__trait{display:flex;align-items:center;gap:.6vw;margin:0 0 .9vh;font-family:var(--sg-font-display);font-weight:600;font-size:.98vw;line-height:1.3;color:var(--sg-ink)}
.sg-hero__trait:last-child{margin-bottom:0}
.sg-hero__trait svg{width:1.1vw;height:1.1vw;min-width:13px;min-height:13px;flex:none;color:var(--sg-canopy)}
.sg-hero__bottom{position:absolute;left:3.4vw;right:3.4vw;top:82.9vh;z-index:4;display:flex;justify-content:space-between;gap:4vw}
.sg-hero__bottom p{margin:0}
.sg-hero__bottom .sg-line-mask{display:block;overflow:hidden}
.sg-hero__bottom .sg-line{display:block;font-family:var(--sg-font-ui);font-size:max(13px,1.18vw);line-height:1.6;color:var(--sg-ink)}
.sg-hero__righttext{text-align:right}
@media(min-width:1025px){
/* 17 Aug r3: THE residue over the C, finally. These cards were made transparent
   when the chrome children took over their visuals - but they kept the base
   panel's backdrop-filter, so an invisible box sat in the hero blurring the
   letterforms behind it (a transparent element with backdrop-filter still
   blurs). Kill the blur on the cards themselves; the chrome layers carry it. */
.sg-rail__navcard,.sg-rail__brandcard{background:transparent!important;border-color:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;position:relative;z-index:0}
.sg-rail__navchrome{position:absolute;inset:0;z-index:-1;border-radius:var(--sg-r-md);background:var(--sg-panel);-webkit-backdrop-filter:blur(var(--sg-blur));backdrop-filter:blur(var(--sg-blur));border:1px solid var(--sg-hair)}
/* zero padding so the chip's box IS its text: scaling it to the ghost box then
   makes CHACHA span edge to edge, the way NESH does. The pill's visual padding
   lives on the chrome layer instead. */
.sg-rail__chip{background:transparent!important;padding:0!important;position:relative;z-index:0}
.sg-rail__markchrome{position:absolute;inset:-4px -8px;z-index:-1;background:var(--sg-accent);border-radius:var(--sg-r-sm)}
/* r16: the late-arriving rail surfaces REST hidden while the rail is in
   flight. GSAP's scrubs drive them with inline styles (inline always wins),
   but whenever ScrollTrigger reverts inline styles to re-measure - every
   refresh - elements fall back to this CSS state. Before this rule that
   fallback was VISIBLE, which flashed the chip's brown ground scaled 26x
   across the hero. Now a revert can only ever show nothing. Once the rail
   docks (or on the static/noanim boot, which docks immediately) the rule
   stops applying and everything rests visible. */
.sg-rail:not(.is-docked) .sg-rail__markchrome,
.sg-rail:not(.is-docked) .sg-rail__navchrome,
.sg-rail:not(.is-docked) .sg-rail__brandchrome,
.sg-rail:not(.is-docked) .sg-rail__positioning,
.sg-rail:not(.is-docked) .sg-rail__socials,
.sg-rail:not(.is-docked) .sg-rail__cta,
.sg-rail:not(.is-docked) .sg-rail__statdiv,
.sg-rail:not(.is-docked) .sg-rail__marquee,
.sg-rail:not(.is-docked) .sg-rail__mail{opacity:0;visibility:hidden}
/* the orange chip bleeds 8px left of its text, so it started outside the rail's
   content edge while every other panel item lined up on it. Push the chip right
   by exactly that overhang and the block's left edge lands on the same line. */
.sg-rail__chip{margin-left:8px}
/* faint rules between menu items - docked sidebar only. In the hero the links
   are still flying across the page and rules would draw in mid-air. */
.sg-rail.is-docked .sg-rail__nav{align-items:stretch}
.sg-rail.is-docked .sg-rail__nav .sg-rail__link + .sg-rail__link{border-top:1px solid rgba(10,26,17,.10)}
/* the orange pill bleeds 8px past the wordmark, so the locative needs real air */
.sg-rail__locative{margin-left:14px}
.sg-rail__brandcard{background:transparent;border-color:transparent;position:relative;z-index:0}
.sg-rail__brandchrome{position:absolute;inset:0;z-index:-1;border-radius:var(--sg-r-md);background:var(--sg-panel);-webkit-backdrop-filter:blur(var(--sg-blur));backdrop-filter:blur(var(--sg-blur));border:1px solid var(--sg-hair)}
/* 17 Aug r2: the 52% brand-pane shrink lived here. Superseded - the pane's fade
   is now timed in sg-engine.js to arrive with its contents (130-140% of hero),
   so it never renders as an empty slab and can keep its full docked geometry. */
header.sg-rail{z-index:1!important}
header.sg-rail.is-docked{z-index:900!important}
/* 17 Aug r2: the transparent!important kill-switch on the two panel chromes is
   gone. Cause of the frosted slab was TIMING, not existence: the chromes faded
   in at 93-114% of the hero, 20-30% before their own contents landed. The engine
   now brings both in only after the H1 has left (nav 126-136%, brand 130-140%),
   so GSAP's autoAlpha owns them again and docking fades instead of popping. */
/* while the rail is still flying across the hero its elements are scaled huge;
   they must not intercept clicks until they have docked (7.1) */
.sg-rail:not(.is-docked) .sg-rail__panel,
.sg-rail:not(.is-docked) .sg-rail__chip,
.sg-rail:not(.is-docked) .sg-rail__link{pointer-events:none!important}
.sg-rail.is-docked .sg-rail__panel,
.sg-rail.is-docked .sg-rail__chip,
.sg-rail.is-docked .sg-rail__link{pointer-events:auto!important}
.sg-rail__chip{color:var(--sg-accent)}
/* No icons in the menu at all - hero row and docked sidebar are pure type. */
.sg-rail__link svg,.sg-rail__nav a svg,.sg-ghost-nav>i,.sg-sheet a svg{display:none!important}
}
@media(max-width:1024px){
.sg-hero{height:auto!important}
.sg-hero__sticky{position:relative;height:auto;min-height:100vh;padding:96px 5vw 40px;box-sizing:border-box;display:flex;flex-direction:column}
.sg-hero__logo{position:relative;inset:auto;height:auto;margin-bottom:1vh}
.sg-hero__mark{visibility:visible}
.sg-hero__navrow,.sg-hero__loc{display:none}
.sg-hero__portrait{position:relative;inset:auto;height:42vh;margin:-4vh 0 0}
.sg-hero__portrait img{height:100%}
.sg-hero__content{position:relative;top:auto;margin-top:3vh;align-items:flex-start}
.sg-hero__h1{color:var(--sg-forest);text-shadow:none;text-align:left}
.sg-hero__cards{position:relative;inset:auto;display:flex;flex-wrap:wrap;gap:10px;margin-top:4vh}
.sg-ghost-card{position:relative;left:auto!important;top:auto!important;width:auto!important;height:auto!important;flex:1 1 46%;min-width:150px;padding:14px 16px}
.sg-ghost-card--stats{display:none}
.sg-hero__trait{font-size:13px}
.sg-hero__trait svg{width:14px;height:14px}
.sg-hero__bottom{position:relative;left:auto;right:auto;top:auto;margin-top:4vh;flex-direction:column;gap:10px}
.sg-hero__righttext{text-align:left}
}
@media(max-width:767px){
.sg-hero__pills{flex-direction:column;width:100%;gap:8px}
.sg-hero__pills .sg-btn{width:100%}
.sg-ghost-card{flex:1 1 100%}
}
/* 18 Aug, Nelson: MOBILE HERO ONLY (<=1024px). Desktop (>=1025px) is untouched.
   Three faults were fixed together, all caused by the same thing: the portrait
   kept the desktop .sg-hero__stack{margin-top:15vh} while its figure was capped
   at 42vh with overflow:hidden, so the frame was pushed down inside a shorter
   box and guillotined at the chin - and that same 15vh is what opened the dead
   gap under CHACHA. Zero the margin, let the figure size to the image, and the
   stack's own bottom+side mask does the dissolve it does on desktop.
   The headline then rides up over the fading torso in bone, exactly like the
   desktop arrangement, with the pill under it. */
@media(max-width:1024px){
/* 18 Aug r2: pulled up hard enough that the head overlaps the lower half of the
   CHACHA letterforms, the way it does on desktop. The portrait is z2 and the
   wordmark z1, so it passes in front with no stacking work needed. */
.sg-hero__portrait{height:auto;overflow:visible;margin:-13vh 0 0;align-items:flex-start}
/* 18 Aug r3: the pull-up is driven from the STACK, not the figure. A negative
   margin on .sg-hero__portrait measurably did nothing on device (verified by
   diffing two screenshots - zero rows changed), because the figure is not
   acting as a flow item here; the stack's own margin is what actually moves the
   frame, which is why zeroing its inherited 15vh moved it in the first place.
   -11vh lifts the head far enough that the lower half of CHACHA sits behind it. */
/* 18 Aug r4: measured off-device. At 0 the hair sat at 853px, at -11vh it sat at
   575px, so 1vh = ~25px of travel on this viewport. CHACHA's glyphs run 575-775,
   so covering the bottom third means landing the hair at ~708 -> -5.7vh. */
.sg-hero__stack{height:auto;width:min(72vw,360px);max-width:100%;margin:-2vh auto 0;-webkit-mask-image:linear-gradient(to bottom,#000 34%,rgba(0,0,0,.68) 58%,rgba(0,0,0,0) 86%),linear-gradient(to right,rgba(0,0,0,0) 0%,#000 9%,#000 91%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,#000 34%,rgba(0,0,0,.68) 58%,rgba(0,0,0,0) 86%),linear-gradient(to right,rgba(0,0,0,0) 0%,#000 9%,#000 91%,rgba(0,0,0,0) 100%)}
.sg-hero__portrait .sg-hero__frame{height:auto;width:100%;max-width:100%}
/* the overlap is authored in vw so it tracks the image, which is also vw-sized;
   the clamp stops very small and very large phones from over/under-shooting. */
.sg-hero__content{align-items:center;margin-top:clamp(-112px,-24vw,-84px);z-index:5}
.sg-hero__h1{text-align:center;color:var(--sg-bone-text);text-shadow:0 2px 24px rgba(6,16,9,.45),0 1px 3px rgba(6,16,9,.3)}
.sg-hero__pills{margin-top:2.4vh;justify-content:center}
/* the two footer lines centre with the headline and the pill above them */
.sg-hero__bottom{align-items:center;text-align:center}
.sg-hero__lefttext,.sg-hero__righttext{text-align:center;width:100%}
}
/* the pill goes back to being a pill on phones - full-width stretch was only
   ever there because the headline block was left-aligned. */
@media(max-width:767px){
.sg-hero__pills{flex-direction:row;width:auto}
.sg-hero__pills .sg-btn{width:auto}
}

/* The hero is 300vh but the rail finishes assembling by ~140vh. heynesh solves
   the leftover scroll by starting the next section OVER the pinned hero; without
   this there is ~160vh of empty bone. */
@media(min-width:1025px){
  /* Nelson, 17 Aug: About was riding over the hero at 150vh while the rail was
     still assembling (it finishes at ~147vh), so you met a half-built menu.
     -100vh tops it out at 200vh: the menu finishes, holds, then the section
     comes over it - the heynesh order. */
  /* the orbit gallery now takes the hero's tail overlap; About follows it
     normally, so nothing rides over a half-built menu. */
  /* 17 Aug: the orbit carousel moved down into "What a day looks like", so
     About is once again the section that takes the hero's tail overlap. */
  .sg-orbit.sg-orbit{margin-top:0!important}
  /* 17 Aug r3: -140vh (was -100). The rail's last piece lands at 147vh and the
   dock fires at 140vh; About now arrives at 160vh instead of 200vh, so the
   right side never sits empty while the left column finishes settling. */
.sg-about.sg-about{margin-top:-140vh!important;position:relative;z-index:5;background:var(--sg-bone)}
  /* the flying rail must stay above the portrait's blur wash, or the four
     right-hand links vanish into it on the way in */
  header.sg-rail{z-index:900}
  .sg-rail:not(.is-docked) .sg-rail__link{position:relative;z-index:2}
}

/* ================= SHARED SECTION CHROME =================
   snippet 25 already offsets .e-con-inner by the rail width and caps it at 1140px.
   We drop both (Nelson: "we can drop the 1140px rule") and let .sg-wrap own the
   single source of horizontal alignment. !important because WPCode loads later. */
/* snippet 25 sets these with !important at (0,2,0); WPCode loads after us, so we
   have to out-specify it - doubling the class gives (0,3,0). */
/* Nelson, 17 Aug: ~90px of air top and bottom on every section (hero excepted)
   so no content ever sits on a section boundary. */
.sg-section.sg-section{position:relative;padding-block:90px!important;padding-left:0!important;padding-right:0!important;background:var(--sg-bone)}
@media(max-width:767px){.sg-section.sg-section{padding-block:50px!important}}
/* the bleed sections pin their own content, so the section itself carries only
   the closing 90px - otherwise the last cards sit flush on the boundary. */

/* EVERY section clears the rail. This is the single source of horizontal alignment:
   the container owns it, so sections I have not rebuilt stay clear of the menu too. */
.sg-section.sg-section > .e-con-inner.e-con-inner{
  margin-left:0!important;margin-right:0!important;max-width:none!important;width:100%!important;
  padding-left:var(--sg-content-pad-l)!important;padding-right:calc(var(--sg-gutter) * 2)!important;
  /* Elementor's own container padding was adding 120px on top of the section's
     90px, so the first line sat 210px off the boundary. The 90px lives on the
     section and nowhere else. */
  padding-top:0!important;padding-bottom:0!important}
.sg-wrap{width:100%;box-sizing:border-box}
/* heynesh is left-aligned throughout; Elementor containers centre by default */
.sg-section.sg-section > .e-con-inner.e-con-inner{align-items:flex-start!important;text-align:left!important}
.sg-section.sg-section .elementor-widget-container{text-align:left}
.sg-section.sg-section > .e-con-inner.e-con-inner > .elementor-widget{width:100%}
/* opt-out for deliberately full-bleed bands */
.sg-bleed.sg-bleed > .e-con-inner.e-con-inner{padding-left:0!important;padding-right:0!important}
@media(max-width:1024px){
  .sg-section.sg-section > .e-con-inner.e-con-inner{padding-left:5vw!important;padding-right:5vw!important}
  .sg-bleed.sg-bleed > .e-con-inner.e-con-inner{padding-left:0!important;padding-right:0!important}
}
/* Nelson, 17 Aug: no pill. A plain, quiet, letter-spaced label above the block
   - the "WHO AM I" treatment from the reference. */
.sg-eyebrow.sg-eyebrow{display:block!important;overflow:hidden;white-space:nowrap;font-family:var(--sg-font-display);font-size:11px!important;font-weight:500!important;letter-spacing:.12em!important;text-transform:uppercase;color:rgba(10,26,17,.42)!important;border:0!important;border-radius:0!important;padding:0!important;margin:0 0 22px!important;background:none!important}
.sg-h2{margin:0 0 22px;font-family:var(--sg-font-display);font-size:clamp(2rem,4.1vw,3.75rem);font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--sg-ink)}
.sg-h2 .sg-line-mask{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.sg-h2 .sg-line{display:block}
.sg-lead{font-family:var(--sg-font-ui);font-size:var(--t-body-size,15px);line-height:1.6;color:var(--sg-ink-70);max-width:62ch;margin:0}

/* position:sticky only works if every ancestor between the sticky element and the
   tall section is full-height. Elementor's widget wrappers are auto-height, which
   silently kills the pin - this is what stops sections "sliding" on scroll. */
/* snippet 25 sets html,body{overflow-x:hidden} which makes them scroll containers
   and kills EVERY position:sticky on the page. overflow-x:clip contains the same
   horizontal overflow without creating a scroll container. */
html,body{overflow-x:clip!important}

/* Pinned sections are display:block so the widget's percentage height resolves
   against the tall section; e-con-full sections have no .e-con-inner at all,
   so both structures are covered. */
.sg-hero.sg-hero,
.sg-process.sg-process,
.sg-safaris.sg-safaris{display:block!important}
.sg-hero.sg-hero > .e-con-inner.e-con-inner,
.sg-process.sg-process > .e-con-inner.e-con-inner,
.sg-safaris.sg-safaris > .e-con-inner.e-con-inner{height:100%!important;display:block!important;padding:0!important}
.sg-hero > .elementor-widget, .sg-hero > .e-con-inner > .elementor-widget,
.sg-process > .elementor-widget, .sg-process > .e-con-inner > .elementor-widget,
.sg-safaris > .elementor-widget, .sg-safaris > .e-con-inner > .elementor-widget{height:100%!important}
.sg-hero .elementor-widget-html > .elementor-widget-container,
.sg-process .elementor-widget-html > .elementor-widget-container,
.sg-safaris .elementor-widget-html > .elementor-widget-container{height:100%!important}

/* ================= 7.5 A DAY WITH ME - inline chips ================= */
/* 17 Aug r3: no ch cap - the three authored .sg-line spans ARE the breaks; the
   22ch cap was re-wrapping inside them and produced ragged double breaks. */
.sg-day__h2{max-width:none}
/* on phones the three authored lines are longer than the column, so they would
   double-wrap raggedly; let them flow as one paragraph instead (the trailing
   spaces inside the spans make the join read correctly). Transforms are inert
   on inline boxes, so the mask entrance simply no-ops here. */
@media(max-width:767px){.sg-day__h2 .sg-line-mask,.sg-day__h2 .sg-line{display:inline}}
/* 17 Aug: "dawn" and "animals" were picked out in canopy green. Heading is one
   colour now - the em only survives to kill the browser's italic. */
.sg-day__h2 em{font-style:normal;color:inherit}
/* 17 Aug r3: five chips, five equal columns, one row. Cards stretch to the row
   height (no align-items:start), so all five rest at a uniform height, and the
   detail text is permanently open - see .sg-chip below. */
.sg-day__chips{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px}
.sg-day__chips .sg-chip{grid-column:auto}
@media(max-width:1024px){.sg-day__chips{grid-template-columns:repeat(2,1fr)}.sg-day__chips .sg-chip,.sg-day__chips .sg-chip:nth-last-child(-n+2){grid-column:span 1}}
@media(max-width:640px){.sg-day__chips{grid-template-columns:1fr}}
.sg-chip{text-align:left;cursor:default;min-width:0;background:var(--sg-bone-2);border:1px solid var(--sg-hair-dark);border-radius:8px;padding:16px 20px;display:grid;grid-template-rows:auto 1fr;transition:background-color .3s ease;width:100%}
.sg-chip__top{display:flex;align-items:center;gap:12px}
.sg-chip__top svg{width:26px;height:26px;flex:none;color:var(--sg-accent)}
.sg-chip__top b{font-family:var(--sg-font-display);font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--sg-ink);white-space:nowrap}
/* white-space:normal is load-bearing: an inherited nowrap was blowing each 1fr
   track out to the text's full one-line width once the rows opened up. */
.sg-chip__more{overflow:visible;white-space:normal;padding-top:12px;font-family:var(--sg-font-ui);font-size:13px;line-height:1.55;color:var(--sg-ink-70)}
.sg-chip:hover,.sg-chip.is-open{grid-template-rows:auto 1fr;background:var(--sg-bone)}
.sg-chip:hover .sg-chip__more,.sg-chip.is-open .sg-chip__more{padding-top:12px}
.sg-chip:focus-visible{outline:2px solid var(--sg-forest);outline-offset:3px}
.sg-chip__top b{white-space:normal}

/* ================= TABLET + MOBILE NAV (rail is desktop-only) ================= */
.sg-mnav,.sg-sheet{display:none}
@media(max-width:1024px){
  .sg-rail{display:none!important}
  .sg-mnav{position:fixed;top:0;left:0;right:0;z-index:1200;display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 5vw;background:rgba(231,229,218,.86);-webkit-backdrop-filter:blur(var(--sg-blur));backdrop-filter:blur(var(--sg-blur));border-bottom:1px solid var(--sg-hair-dark)}
  /* 18 Aug, Nelson: on mobile the brand is the round logo, not the word. The JS
   still writes textContent 'CHACHA' (sg-engine ~508) so the text is pushed out
   of the box rather than removed - keeps the link's accessible name intact for
   screen readers and search engines. */
.sg-mnav__brand{display:block;width:38px;height:38px;padding:0;border-radius:50%;background:url("https://chachasafariguide.com/wp-content/uploads/2026/08/chacha-logo-512.webp") center/contain no-repeat;text-indent:-9999px;white-space:nowrap;overflow:hidden;text-decoration:none}
  .sg-mnav__burger{width:42px;height:42px;display:grid;align-content:center;justify-items:end;gap:6px;background:transparent;border:0;cursor:pointer;padding:0}
  .sg-mnav__burger span{display:block;width:24px;height:2px;background:var(--sg-ink);transition:transform .3s ease,width .3s ease}
  .sg-menu-open .sg-mnav__burger span:first-child{transform:translateY(4px) rotate(45deg)}
  .sg-menu-open .sg-mnav__burger span:last-child{width:24px;transform:translateY(-4px) rotate(-45deg)}
  .sg-sheet{position:fixed;inset:62px 0 0;z-index:1190;display:flex;flex-direction:column;justify-content:space-between;padding:6vh 5vw 5vh;background:var(--sg-bone);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease,visibility .3s;overflow-y:auto}
  .sg-menu-open .sg-sheet{opacity:1;visibility:visible;transform:none}
  .sg-menu-open{overflow:hidden}
  .sg-sheet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .sg-sheet a{font-family:var(--sg-font-display);font-size:clamp(1.8rem,9vw,2.6rem);font-weight:600;letter-spacing:-.03em;color:var(--sg-ink);text-decoration:none;padding:6px 0;display:block}
  .sg-sheet a:active{color:var(--sg-canopy)}
  .sg-sheet__foot{display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:1px solid var(--sg-hair-dark)}
  .sg-sheet__foot a{font-family:var(--sg-font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-ink-70)}
  /* content clears the fixed bar, not the rail */
  .sg-section.sg-section > .e-con-inner.e-con-inner{padding-left:5vw!important;padding-right:5vw!important}
  .sg-gal__pin,.sg-process__pin,.sg-ask__wrap{padding-left:5vw!important;padding-right:5vw!important;padding-top:50px!important;padding-bottom:50px!important}
  .sg-hero__sticky{padding-top:82px}
}

/* ================= 7.9 STORIES ================= */
.sg-stories.sg-stories{background:var(--sg-dark-grad)!important;color:var(--sg-bone-text)}
.sg-stories .sg-eyebrow.sg-eyebrow{color:rgba(244,246,239,.45)!important}
.sg-stories .sg-h2{color:var(--sg-bone-text)}
.sg-st__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.sg-st__dots{display:flex;gap:6px;align-items:center;background:rgba(244,246,239,.08);border-radius:7px;padding:8.8px}
.sg-st__dot{width:16px;height:3.6px;border-radius:2px;border:0;padding:0;cursor:pointer;background:var(--sg-sage);transition:width .3s ease,background-color .3s ease}
.sg-st__dot.is-on{width:32px;background:var(--sg-accent)}
.sg-st__rail{display:flex;gap:14px;margin-top:44px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
.sg-st__rail::-webkit-scrollbar{display:none}
.sg-st__card{position:relative;flex:0 0 auto;width:424px;max-width:86vw;min-height:340px;scroll-snap-align:start;display:flex;flex-direction:column;background:rgba(244,246,239,.07);border:1px solid rgba(244,246,239,.14);border-radius:var(--sg-r-lg);padding:21.4px}
.sg-st__q{position:absolute;top:18px;right:18px;width:26.6px;height:26.6px;color:var(--sg-accent)}
/* 19 Aug, Nelson: a testimonial card that links to its source. Only cards with a
   verifiable public URL become <a class="sg-st__card sg-st__card--link">; the
   rest stay <article> and look and behave exactly as before. The card styles are
   class-based so an anchor picks them up unchanged - these rules only strip the
   link chrome and add the affordance. */
/* 27 Aug, Nelson: colour only on hover - no lift, no movement of any kind. */
.sg-st__card--link{text-decoration:none!important;color:inherit;cursor:pointer;
  transition:border-color .25s ease,background-color .25s ease}
.sg-st__card--link:hover{border-color:rgba(200,135,62,.55)!important;
  background:rgba(244,246,239,.11)!important}
.sg-st__src{display:inline-flex;align-items:center;gap:5px;margin-top:10px;
  font-family:var(--sg-font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(244,246,239,.5);transition:color .25s ease}
.sg-st__card--link:hover .sg-st__src{color:#C8873E}
.sg-st__src svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2}

/* 19 Aug, Nelson: review CTA under the testimonial rail.
   This block is deliberately SELF-CONTAINED. .sg-btn__icon is not defined
   anywhere in this stylesheet (the circle on other buttons comes from outside
   it), so relying on inheritance is what left the second button's label dark-on
   -dark and unreadable. Everything the two buttons need is declared here.
   The stories section sits on the dark forest ground, so all text is bone. */
.sg-st__cta{margin:clamp(30px,4vw,52px) 0 0;padding-top:clamp(22px,3vw,32px);border-top:1px solid rgba(244,246,239,.16)}
.sg-st__ctanote{margin:0 0 18px;font-family:var(--sg-font-ui);font-size:14px;line-height:1.6;color:rgba(244,246,239,.75)}
.sg-st__ctarow{display:flex;flex-wrap:wrap;gap:14px}
/* both buttons are identical - no outlined variant */
/* THREE classes on purpose. The .sg-btn component lives in a separate WPCode
   snippet ("UW - Global Design Tokens + Button Component") which sets
   --btn-bg:var(--sg-accent) and loads AFTER this file, so a two-class rule here
   lost the cascade on equal specificity and the pills came out kit-lime. */
.sg-st__cta .sg-st__ctabtn.sg-st__ctabtn{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:9px 20px 9px 9px!important;border-radius:999px;box-shadow:none;
  background:#C8873E!important;text-decoration:none!important;
  transition:background-color .25s ease}
/* the orange is hardcoded on purpose: inside the stories section --sg-accent
   resolves to the kit's lime (#A3E635), which came out as lime pills with dark
   green text - the brand orange is what every other button on the page uses. */
/* 27 Aug, Nelson: colour only on hover - no lift, to match the review cards. */
.sg-st__cta .sg-st__ctabtn.sg-st__ctabtn:hover{background:#D89F5A!important}
.sg-st__cta .sg-st__ctabtn .sg-btn__label{color:#123524!important;font-family:var(--sg-font-display);
  font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1;white-space:nowrap}
/* the glyph is centred by grid rather than line-height, so the owl and the star
   both sit dead centre in the disc instead of riding high */
.sg-st__cta .sg-st__ctabtn .sg-btn__icon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;
  border-radius:50%;background:#F4F6EF;color:#123524;overflow:hidden;position:static}
.sg-st__cta .sg-st__ctabtn .sg-btn__icon svg{display:block;width:17px;height:17px;fill:currentColor}
@media(max-width:640px){
  /* stacked and LEFT aligned on mobile - not centred, not full-width-justified,
     so each pill is only as wide as its own label and they line up on the left
     edge with the note above them. */
  .sg-st__ctarow{flex-direction:column;align-items:flex-start;gap:10px}
  .sg-st__cta .sg-st__ctabtn.sg-st__ctabtn{width:auto;max-width:100%;justify-content:flex-start;padding:9px 18px 9px 9px!important}
}
.sg-st__lead{margin:0 0 14px;padding-right:40px;font-family:var(--e-global-typography-quotelead-font-family,var(--sg-font-display));font-size:clamp(1.1rem,1.6vw,var(--e-global-typography-quotelead-font-size,1.45rem));font-weight:var(--e-global-typography-quotelead-font-weight,700);line-height:var(--e-global-typography-quotelead-line-height,1.25);letter-spacing:var(--e-global-typography-quotelead-letter-spacing,-.02em);color:var(--sg-bone-text)}
.sg-st__body{margin:0;font-family:var(--sg-font-ui);font-size:14px;line-height:1.6;color:rgba(244,246,239,.76)}
.sg-st__foot{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:12px}
.sg-st__name{display:block;font-family:var(--sg-font-display);font-size:15px;font-weight:600;color:var(--sg-bone-text)}
.sg-st__role{display:block;font-family:var(--sg-font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,246,239,.6);margin-top:3px}
@media(max-width:767px){.sg-st__card{width:84vw;padding:18px}}

/* ================= 7.8 ASK - cinetica's conversational form ================= */
/* top blend: stories' grad ends on #123524; ask's own grad starts at #061009 */
.sg-ask.sg-ask{background:linear-gradient(#123524,rgba(18,53,36,0) 160px),var(--sg-dark-grad)!important;color:var(--sg-bone-text)}
.sg-ask__wrap{display:grid;grid-template-columns:minmax(0,1fr) 590px;gap:clamp(24px,4vw,72px);align-items:center;box-sizing:border-box;padding:0 var(--sg-gutter) 0 calc(var(--sg-rail-w) + var(--sg-gutter) * 3)}
.sg-ask__left .sg-h2{font-size:clamp(1.8rem,2.9vw,2.75rem);max-width:14ch}
.sg-ask__note{margin:14px 0 0;max-width:44ch;font-family:var(--sg-font-ui);font-size:14px;line-height:1.6;color:rgba(244,246,239,.7)}
.sg-ask__compass{width:min(220px,60%);margin-top:36px;opacity:.9}
.sg-ask__compass svg{width:100%;height:auto}
#sgCompassRose{transform-origin:100px 100px;animation:sgSpin 38s linear infinite}
@keyframes sgSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#sgCompassRose{animation:none}}
.sg-chat{width:100%;max-width:590px;background:var(--sg-forest);border:1.33px solid rgba(200,135,62,.28);border-radius:3.56px;overflow:hidden}
.sg-chat__top{display:flex;justify-content:space-between;align-items:center;gap:12px;height:65px;padding:14.2px 18px;border-bottom:1.33px solid rgba(200,135,62,.22);font-family:var(--sg-font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.sg-chat__to{color:var(--sg-bone-text)}
.sg-chat__addr{color:var(--sg-accent);position:relative;padding:4px 10px}
.sg-chat__addr::before,.sg-chat__addr::after{content:'';position:absolute;width:5px;height:5px;border:1px solid var(--sg-accent)}
.sg-chat__addr::before{top:0;left:0;border-right:0;border-bottom:0}
.sg-chat__addr::after{bottom:0;right:0;border-left:0;border-top:0}
.sg-chat__body{display:flex;flex-direction:column;height:424px}
.sg-chat__log{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;padding:18px;overflow-y:auto}
.sg-bub{max-width:80%;padding:9px 18.9px;border:.667px solid rgba(200,135,62,.3);border-radius:3.02px;font-family:var(--sg-font-mono);font-size:12px;line-height:1.4;color:var(--sg-bone-text);align-self:flex-start;background:transparent}
.sg-bub--me{align-self:flex-end;background:rgba(200,135,62,.14)}
.sg-bub--err{border-color:rgba(224,120,80,.7);color:#F0B7A0}
.sg-chat__opts{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;max-width:92%}
.sg-chat__opt{cursor:pointer;background:transparent;border:.667px solid rgba(200,135,62,.4);border-radius:3.02px;padding:7px 12px;font-family:var(--sg-font-mono);font-size:11px;color:var(--sg-bone-text);transition:background-color .2s ease}
.sg-chat__opt:hover{background:rgba(200,135,62,.2)}
.sg-chat__row{display:flex;align-items:center;gap:8px;padding:0 12px;border-top:.667px solid rgba(200,135,62,.3)}
.sg-chat__input{flex:1;height:44px;background:transparent;border:0;outline:0;font-family:var(--sg-font-mono);font-size:12px;color:var(--sg-bone-text)}
.sg-chat__input::placeholder{color:var(--sg-sage)}
.sg-chat__send{width:32px;height:32px;display:grid;place-items:center;background:transparent;border:0;cursor:pointer;color:var(--sg-accent)}
.sg-chat__send svg{width:19px;height:19px}
.sg-chat__send:focus-visible{outline:2px solid var(--sg-accent);outline-offset:2px;border-radius:4px}
@media(max-width:1024px){
.sg-ask__wrap{grid-template-columns:1fr;padding:0 5vw}
.sg-ask__compass{display:none}
.sg-chat{max-width:none}
}

/* ================= 7.4 SAFARIS - pinned horizontal gallery ================= */
/* 17 Aug r3: no hard boundary lines - each coloured section carries a top layer
   that starts at the PREVIOUS section's colour and a bottom layer that resolves
   into the NEXT one's, painted over its own ground. Because these live on the
   tall scrolled section (not the sticky pin), the blend literally forms as you
   scroll, tying the sections into one continuous field. */
.sg-safaris.sg-safaris{background:linear-gradient(#E7E5DA,rgba(231,229,218,0) 140px),linear-gradient(rgba(231,229,218,0) calc(100% - 220px),#E7E5DA),var(--sg-dark-grad)!important;color:var(--sg-bone-text);height:calc(100vh + 2600px)!important;padding:0!important}
/* 17 Aug: the ninth card never arrived before the pin let go. Measured: the card
   track is 3323px wide against a 1280px viewport, so the rail has to travel
   3323-1280 = 2043px, but the pin only had 1900px of scroll to do it in - it ran
   out of runway with the last card still off-screen. 2600px clears the worst
   case too (at a 1025px viewport the travel is 2298px). */
/* pinned sections: the head was centred in a 100vh box and clipped against the
   top edge. Flow from the top with the same 90px, and let the cards give back
   height on short screens so nothing is ever cut off. */
.sg-gal__pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:3vh;box-sizing:border-box;padding:90px 0 90px calc(var(--sg-rail-w) + var(--sg-gutter) * 3)}
.sg-gal__head{max-width:56ch}
.sg-h2--light{color:var(--sg-bone-text)}
.sg-gal__intro{margin:0;max-width:52ch;font-family:var(--sg-font-ui);font-size:var(--t-body-size,15px);line-height:1.6;color:rgba(244,246,239,.72)}
.sg-gal__track{display:flex;gap:26.6px;will-change:transform}
.sg-gal__card{position:relative;flex:0 0 auto;width:345.6px;height:min(420px,44vh);border-radius:var(--sg-r-lg);overflow:hidden;background:#0d1f15}
.sg-gal__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.sg-gal__card::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(6,16,9,0) 34%,rgba(6,16,9,.86));pointer-events:none}
.sg-gal__ix{position:absolute;top:16px;left:16px;z-index:3;display:grid;place-items:center;min-width:30px;height:23px;padding:0 8px;background:var(--sg-forest);border:.667px solid rgba(255,255,255,.3);border-radius:65.8px;font-family:var(--sg-font-mono);font-size:9px;letter-spacing:.1em;color:var(--sg-bone-text)}
.sg-gal__tags{position:absolute;top:16px;right:16px;z-index:3;display:flex;gap:3.6px;flex-wrap:wrap;justify-content:flex-end;max-width:62%}
.sg-gal__tags span{background:var(--sg-forest);border:.667px solid rgba(255,255,255,.3);border-radius:65.8px;padding:4px 9px;font-family:var(--sg-font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-bone-text)}
.sg-gal__body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 44px 23px 16px}
.sg-gal__body h3{margin:0 0 6px;font-family:var(--sg-font-display);font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:600;letter-spacing:-.02em;color:var(--sg-bone-text)}
.sg-gal__body p{margin:0;font-family:var(--sg-font-ui);font-size:13px;line-height:1.5;color:rgba(244,246,239,.8)}
.sg-gal__go{position:absolute;right:14px;bottom:20px;z-index:4;width:32px;height:32px;border-radius:50%;background:var(--sg-accent);display:block}
.sg-gal__go::before{content:'';position:absolute;inset:0;background:no-repeat center/14px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 15'><path d='M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z' fill='%230A1A11'/></svg>")}
.sg-gal__card:hover img{transform:scale(1.06)}
.sg-gal__track:hover .sg-gal__card:not(:hover) img{filter:saturate(.35) brightness(.7)}
/* 17 Aug r3: the gallery's 'Tell me where you want to go' button is gone from
   the markup; keep the rule inert in case a foot ever returns. */
.sg-gal__foot{display:none!important}
@media(max-width:1024px){
.sg-safaris.sg-safaris{height:auto!important}
.sg-gal__pin{position:relative;height:auto;padding:12vh 0 12vh 5vw;overflow:visible}
.sg-gal__track{overflow-x:auto;padding-right:5vw;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.sg-gal__card{scroll-snap-align:start;width:78vw;max-width:330px;height:400px}
.sg-gal__foot{padding-right:5vw}
}

/* ================= 7.6 THE PROCESS DIAL (cinetica) ================= */
/* top: in from the day section's bone; bottom: out to the stories grad's #061009 */
.sg-process.sg-process{background:linear-gradient(#E7E5DA,rgba(231,229,218,0) 140px),linear-gradient(rgba(18,53,36,0) calc(100% - 220px),#061009),var(--sg-forest)!important;color:var(--sg-bone-text);height:calc(100vh + 920px)!important;padding:0!important}
.sg-process__pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3vh;box-sizing:border-box;padding:90px var(--sg-gutter) 90px calc(var(--sg-rail-w) + var(--sg-gutter) * 3)}
.sg-process__head{text-align:center;max-width:840px}
.sg-eyebrow--dark.sg-eyebrow{color:rgba(244,246,239,.45)!important}
.sg-process__lead{margin:0;font-family:var(--e-global-typography-sectionlead-font-family,var(--sg-font-display));font-size:clamp(1.05rem,1.7vw,var(--e-global-typography-sectionlead-font-size,1.5rem));font-weight:var(--e-global-typography-sectionlead-font-weight,500);line-height:var(--e-global-typography-sectionlead-line-height,1.4);letter-spacing:var(--e-global-typography-sectionlead-letter-spacing,0);color:var(--sg-bone-text)}
.sg-process__grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(16px,3vw,56px);width:100%;max-width:1200px}
.sg-process__words,.sg-process__copies{list-style:none;margin:0;padding:0;position:relative;min-height:300px;display:grid}
.sg-process__words li,.sg-process__copies li{grid-area:1/1;opacity:0}
.sg-process__words{text-align:right;justify-items:end}
.sg-process__copies{text-align:left;justify-items:start}
.sg-step-word{align-self:center;font-family:var(--sg-font-display);font-size:var(--t-step-size,52px);font-weight:700;line-height:1.2;letter-spacing:-.02em;text-transform:uppercase;color:var(--sg-bone-text);white-space:nowrap}
.sg-step-word.is-vpaal{color:var(--sg-gold)}
.sg-step-copy{align-self:center;max-width:34ch}
.sg-step-copy p{margin:0;font-family:var(--sg-font-ui);font-size:var(--t-body-s-size,13px);line-height:1.6;color:rgba(244,246,239,.78)}
.sg-process__mid{position:relative;width:clamp(240px,28vw,399px);aspect-ratio:1/1;display:grid;place-items:center}
.sg-dial{position:absolute;inset:0;width:100%;height:100%}
.sg-dial path{fill:none;stroke:rgba(163,230,53,.22);stroke-width:2}
.sg-process__orb{width:58%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;opacity:.85}
.sg-process__orb img{width:100%;height:100%;object-fit:cover;animation:sgOrb 44s linear infinite}
@keyframes sgOrb{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sg-process__orb img{animation:none}}
/* 17 Aug: the turning photo in the Process dial is replaced by the compass that
   used to sit in the contact section. It drifts slowly and winds on with scroll
   speed (script lives in the Process widget). */
.sg-process__orb--compass{background:none!important;box-shadow:none!important;display:grid;place-items:center;overflow:visible}
.sg-process__orb--compass svg{width:100%;height:100%;display:block;overflow:visible}
#sgProcessRose{transform-box:fill-box;transform-origin:center;will-change:transform}
@media(prefers-reduced-motion:reduce){#sgProcessRose{transform:none!important}}
/* the compass now lives in Process, so the contact section's copy is retired */
.sg-ask__compass{display:none!important}
/* static fallback: readable stacked list, never five steps piled up */
.sg-process.is-static{height:auto!important}
.sg-process.is-static .sg-process__pin{position:relative;height:auto;padding:90px 5vw 90px calc(var(--sg-rail-w) + var(--sg-gutter) * 3)}
.sg-process.is-static .sg-process__grid{grid-template-columns:1fr;gap:20px;max-width:820px}
.sg-process.is-static .sg-process__words,
.sg-process.is-static .sg-process__copies{display:block;min-height:0;text-align:left;justify-items:start}
.sg-process.is-static .sg-process__words li,
.sg-process.is-static .sg-process__copies li{opacity:1!important;margin-bottom:6px}
.sg-process.is-static .sg-process__mid{margin:24px 0}

@media(max-width:1024px){
.sg-process.sg-process{height:auto!important}
.sg-process__pin{position:relative;height:auto;padding:50px 5vw}
.sg-process__grid{grid-template-columns:1fr;gap:24px;max-width:none}
.sg-process__words,.sg-process__copies{display:block;min-height:0;text-align:left;justify-items:start}
.sg-process__words li,.sg-process__copies li{opacity:1!important;margin-bottom:6px}
.sg-process__words li{margin-top:26px}
.sg-process__mid{width:min(70vw,340px);margin:16px auto}
.sg-step-word{font-size:clamp(1.8rem,8vw,2.6rem)}
}

/* ================= 7.3 ABOUT / THE JOURNEY ================= */
.sg-tl{position:relative;margin-top:clamp(48px,6vw,96px)}
.sg-tl__rail{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--sg-hair-dark);overflow:hidden}
.sg-tl__fill{position:absolute;inset:0;background:linear-gradient(var(--sg-canopy),var(--sg-savanna));transform:scaleY(0);transform-origin:top center}
.sg-tl__list{list-style:none;margin:0;padding:0;position:relative}
.sg-tl__item{position:relative;width:50%;box-sizing:border-box;margin-bottom:clamp(28px,4vw,64px)}
.sg-tl__item--l{padding-right:clamp(28px,3.4vw,58px)}
.sg-tl__item--r{margin-left:50%;padding-left:clamp(28px,3.4vw,58px)}
/* deliberately uneven offsets - the hand-placed feel, not a grid */
.sg-tl__item:nth-child(2){margin-top:-2vw}
.sg-tl__item:nth-child(3){margin-top:1.6vw}
.sg-tl__item:nth-child(5){margin-top:-1.4vw}
.sg-tl__item:nth-child(6){margin-top:2vw}
.sg-tl__dot{position:absolute;top:34px;width:8.8px;height:8.8px;border-radius:50%;background:var(--sg-accent);border:2px solid var(--sg-ink);box-sizing:content-box;z-index:2}
.sg-tl__item--l .sg-tl__dot{right:-6.4px}
.sg-tl__item--r .sg-tl__dot{left:-6.4px}
.sg-tl__card{position:relative;background:var(--sg-bone-2);border:1px solid var(--sg-hair-dark);border-radius:var(--sg-r-lg);padding:24px 24px 20px;overflow:hidden}
.sg-tl__card::before{content:'';position:absolute;left:0;right:0;top:0;height:100%;background:linear-gradient(rgba(18,53,36,.49),rgba(18,53,36,.27) 44%,transparent 95%);opacity:.06;pointer-events:none}
.sg-tl__year{display:flex;gap:.02em;font-family:var(--sg-font-display);font-size:var(--t-year-size,80px);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--sg-accent);margin-bottom:10px}
.sg-tl__dm{display:block;overflow:hidden;height:1em}
.sg-tl__dt{display:block;will-change:transform}
.sg-tl__dt span{display:block;height:1em;line-height:1}
.sg-tl__card h3{margin:0 0 8px;font-family:var(--sg-font-display);font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--sg-ink)}
.sg-tl__card p{margin:0;font-family:var(--sg-font-ui);font-size:var(--t-body-size,15px);line-height:1.55;color:var(--sg-ink-70)}
/* Nelson, 17 Aug: the avatar / handle / "13 years ago" / Read more row is out. */
.sg-tl__foot{display:none!important}

/* ================= 3D ORBIT GALLERY (Nelson, 17 Aug) =================
   Codegrid's zero-library orbit, rebuilt to run off scroll progress instead of
   the wheel, and fed from the photographs already in the Safaris rail. It fills
   the bone space at the tail of the hero, before the next section. */
/* "What a day looks like" is ONE section: the copy + chip grid (#destinations)
   and the carousel that follows it share a single unbroken --sg-bone field, and
   the seam between them is closed so nothing reads as two stacked blocks. */
/* 60px (was 0): the always-open day cards made the content taller than the
   section box and the carousel's ground was clipping their last lines. Bone on
   bone, so the closed seam to the carousel still reads as one field. */
#destinations.sg-section{background:var(--sg-bone)!important;padding-bottom:60px!important}
.sg-orbit.sg-orbit{position:relative;z-index:5;background:var(--sg-bone)!important;height:100vh;padding:0!important;margin-top:0!important}
/* the section is a flex container with align-items:center, so its inner wrapper
   was only as tall as the 100vh pin - sticky then had zero travel and the
   carousel scrolled straight past. Stretch the inner to the full 220vh. */
.sg-orbit{align-items:stretch!important}
.sg-orbit > .e-con-inner{display:block!important;max-width:none!important;width:100%!important;margin:0!important;padding:0!important;height:100%!important;align-self:stretch!important}
.sg-orbit .elementor-widget-html,.sg-orbit .elementor-widget-html > .elementor-widget-container{width:100%!important;margin:0!important;padding:0!important}
/* the widget is a column-flex item, so it only grew to the 100vh pin. Let it
   fill the full 220vh section or the sticky pin has nothing to travel through. */
.sg-orbit > .elementor-widget-html{flex:1 1 auto!important;align-self:stretch!important;height:auto!important}
.sg-orbit > .elementor-widget-html > .elementor-widget-container{height:100%!important}
.sg-orb__pin{position:sticky;top:0;height:100vh;overflow:hidden;perspective:3600px;background:var(--sg-bone)!important;box-sizing:border-box}
.sg-orb__head{position:absolute;top:90px;left:calc(var(--sg-rail-w) + var(--sg-gutter) * 3);z-index:3;pointer-events:none}
.sg-orb__head .sg-h2{margin:0}
.sg-orb__stage{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
/* The ring rides a band along the BOTTOM of the pin and is centred in the space
   to the right of the fixed rail, so the big preview can take the whole plate
   above it. Ring centre sits at 82vh: with perspective:3600 the front panels
   land ~72-95vh and the back ones ~76-90vh, i.e. entirely below the preview's
   bottom edge (74vh) so nothing is occluded by it. JS owns this element's
   transform (translate(-50%,-50%) rotateY(...)) - never set transform here. */
.sg-orb__orbit{position:absolute;top:82vh;left:calc(50% + var(--sg-rail-w)/2);transform:translate(-50%,-50%);width:clamp(70px,5.6vw,92px);height:clamp(93px,7.5vw,123px);transform-style:preserve-3d}
/* shadow lives on the img, not the panel: a back-facing panel is hidden by
   backface-visibility but its box-shadow still paints, which left pale ghost
   rectangles floating in the strip. */
.sg-orb__panel{position:absolute;width:100%;height:100%;overflow:hidden;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sg-orb__panel img{border-radius:6px;box-shadow:0 10px 30px rgba(6,16,9,.18)}
.sg-orb__panel img{width:100%;height:100%;object-fit:cover;display:block}
/* The big changing photo fills the whole plate right of the rail (8vh -> 74vh).
   It is a CHILD of .sg-orb__orbit (that is what lets JS counter-rotate it so it
   always faces the camera), so its top is expressed as an offset from the ring
   centre: 50% - 43vh puts its own centre at 82 - 43 = 39vh. Move the ring and
   this offset has to move with it. */
.sg-orb__preview{position:absolute;top:calc(50% - 43vh);left:50%;transform:translate(-50%,-50%);width:calc(100vw - var(--sg-rail-w) - 9vw);height:62vh;overflow:hidden;border-radius:14px;box-shadow:0 24px 60px rgba(6,16,9,.28)}
/* every photo in the carousel - the ring panels AND the big one in the middle -
   fills its frame edge to edge, whatever the source aspect ratio. The !important
   beats the theme's global img{height:auto}. */
.sg-orb__previewimg,.sg-orb__preview img,.sg-orb__panel img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;display:block}
/* object-position is NOT forced here: the widget's FOCUS table sets it per photo
   inline so faces survive the crop in the wide desktop frame, the tall mobile
   frame and the small ring thumbs alike. This is only the fallback. */
.sg-orb__previewimg,.sg-orb__preview img,.sg-orb__panel img{object-position:50% 30%}
.sg-orb__title{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);margin:0;z-index:3;font-family:var(--sg-font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:var(--sg-forest);color:var(--sg-bone-text);padding:6px 12px;border-radius:4px;white-space:nowrap}
@media(max-width:1024px){
  .sg-orbit.sg-orbit{height:160vh}
  .sg-orb__head{top:50px;left:5vw}
  .sg-orb__title{bottom:50px}
  /* rail is hidden here, so the photo takes the full width and more height
     (7vh -> 73vh). Ring band drops to 84vh; preview offset follows it. */
  /* 17 panels now, so the thumbs are narrower and the ring wider (JS radius
     0.55x viewport) - at the old 78px/0.42x they overlapped on a phone. */
  .sg-orb__orbit{top:84vh;left:50%;width:clamp(46px,11vw,64px);height:clamp(61px,14.6vw,85px)}
  .sg-orb__preview{top:calc(50% - 44vh);width:calc(100vw - 8vw);height:66vh;border-radius:12px}
}
@media(prefers-reduced-motion:reduce){.sg-orbit.sg-orbit{height:100vh}}

/* the FAQ now lives inside #ask, on the dark ground, ahead of the chat panel */
.sg-ask .sg-faq{grid-column:1/-1;margin:0 0 clamp(56px,7vw,96px);box-sizing:border-box;padding:0 var(--sg-gutter) 0 calc(var(--sg-rail-w) + var(--sg-gutter) * 3)}
/* 17 Aug, measured at 390px: the Elementor container already indents this
   section by 20px, and .sg-ask__wrap / .sg-faq each added another 5vw (19.5px)
   on top - so everything from "Before you ask" to the footer sat at 39px while
   the rest of the page sat at 20px. Their own side padding goes; the container's
   gutter is the single source. Vertical padding from the 1024 block is kept. */
@media(max-width:1024px){
  .sg-ask .sg-faq,
  .sg-ask__wrap{padding-left:0!important;padding-right:0!important}
}
.sg-ask .sg-faq .sg-h2{color:var(--sg-bone-text)}
.sg-ask .sg-faq .sg-lead{color:rgba(244,246,239,.72)}
.sg-ask .sg-faq .sg-eyebrow.sg-eyebrow{color:rgba(244,246,239,.45)!important}
.sg-ask .sg-faq__list{border-top-color:rgba(244,246,239,.18)}
.sg-ask .sg-faq__item{border-bottom-color:rgba(244,246,239,.18)}
.sg-ask .sg-faq__item summary{color:var(--sg-bone-text)}
.sg-ask .sg-faq__item summary:hover{color:var(--sg-accent)}
.sg-ask .sg-faq__item summary i{border-color:rgba(244,246,239,.28)}
.sg-ask .sg-faq__item summary i::before,.sg-ask .sg-faq__item summary i::after{background:var(--sg-bone-text)}
.sg-ask .sg-faq__a p{color:rgba(244,246,239,.72)}
.sg-ask .sg-faq__foot{color:rgba(244,246,239,.5)}

/* ================= FAQ (Nelson, 17 Aug) =================
   Native <details>, so it opens with no JS and stays accessible. */
.sg-faq__list{margin-top:44px;border-top:1px solid var(--sg-hair-dark)}
.sg-faq__item{border-bottom:1px solid var(--sg-hair-dark)}
.sg-faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;font-family:var(--sg-t-display,var(--sg-font-display));font-size:clamp(17px,1.6vw,21px);font-weight:600;letter-spacing:-.01em;color:var(--sg-ink);transition:color .25s ease}
.sg-faq__item summary::-webkit-details-marker{display:none}
.sg-faq__item summary:hover{color:var(--sg-accent)}
.sg-faq__item summary i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--sg-hair-dark);transition:background .25s ease,border-color .25s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.sg-faq__item summary i::before,.sg-faq__item summary i::after{content:'';position:absolute;top:50%;left:50%;width:12px;height:1.5px;background:var(--sg-ink);transform:translate(-50%,-50%);transition:transform .35s cubic-bezier(.2,.7,.2,1),background .25s ease}
.sg-faq__item summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.sg-faq__item[open] summary i{background:var(--sg-accent);border-color:var(--sg-accent);transform:rotate(180deg)}
.sg-faq__item[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.sg-faq__item[open] summary i::before,.sg-faq__item[open] summary i::after{background:var(--sg-forest)}
.sg-faq__a{overflow:hidden;padding:0 0 24px;max-width:68ch}
.sg-faq__a p{margin:0;font-family:var(--sg-t-body,var(--sg-font-ui));font-size:clamp(14px,1.1vw,var(--sg-t-body-size,15px));line-height:1.7;color:var(--sg-ink-70,rgba(10,26,17,.72))}
.sg-faq__item[open] .sg-faq__a{animation:sgFaqIn .38s cubic-bezier(.2,.7,.2,1)}
@keyframes sgFaqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sg-faq__foot{margin:34px 0 0;font-family:var(--sg-t-body,var(--sg-font-ui));font-size:14px;color:var(--sg-ink-50)}
.sg-faq__foot a{color:var(--sg-accent);border-bottom:1px solid rgba(200,135,62,.4)}
@media(max-width:767px){.sg-faq__item summary{font-size:16px;padding:18px 0;gap:14px}.sg-faq__item summary i{width:28px;height:28px}}

/* ================================================================
   TYPOGRAPHY IS OWNED BY ELEMENTOR (Nelson, 17 Aug)
   Site Settings -> Typography drives everything below:
     Display     -> all headings (h1/h2/h3)
     Nav / Label -> eyebrows, rail links, tags, chips
     Body        -> paragraphs and leads
     Button      -> button and control labels
   Family, weight, letter spacing, text transform and line height are read
   straight from the global. Size is read as the DESKTOP TARGET and wrapped in
   clamp() with a vw middle term, so whatever he sets still scales down on its
   own; per-device values he sets in Elementor override the var inside
   Elementor's own breakpoints and flow through here automatically.
   ================================================================ */
:root{
  --sg-t-display:var(--e-global-typography-primary-font-family,var(--sg-font-display));
  --sg-t-label:var(--e-global-typography-secondary-font-family,var(--sg-font-display));
  --sg-t-body:var(--e-global-typography-text-font-family,var(--sg-font-ui));
  --sg-t-btn:var(--e-global-typography-accent-font-family,var(--sg-font-display));
  --sg-t-display-size:var(--e-global-typography-primary-font-size,59px);
  --sg-t-label-size:var(--e-global-typography-secondary-font-size,11px);
  --sg-t-body-size:var(--e-global-typography-text-font-size,15px);
  --sg-t-btn-size:var(--e-global-typography-accent-font-size,13px);
}
/* headings */
.sg-h2.sg-h2,
.sg-process__word,
.sg-st__card h3,
.sg-tl__card h3,
.sg-gal__body h3,
.sg-chip__top b{
  font-family:var(--sg-t-display)!important;
  font-weight:var(--e-global-typography-primary-font-weight,700)!important;
  letter-spacing:var(--e-global-typography-primary-letter-spacing,-.03em)!important;
  text-transform:var(--e-global-typography-primary-text-transform,none)!important;
  line-height:var(--e-global-typography-primary-line-height,1.04)!important;
}
.sg-h2.sg-h2{font-size:clamp(30px,4.4vw,var(--sg-t-display-size))!important}
.sg-process__word{font-size:clamp(34px,5.2vw,calc(var(--sg-t-display-size) * 1.18))!important}
.sg-st__card h3,.sg-tl__card h3,.sg-gal__body h3{font-size:clamp(17px,1.7vw,calc(var(--sg-t-display-size) * .4))!important;line-height:1.2!important}
.sg-hero__h1.sg-hero__h1{
  font-family:var(--sg-t-display)!important;
  font-weight:var(--e-global-typography-primary-font-weight,700)!important;
  letter-spacing:var(--e-global-typography-primary-letter-spacing,-.03em)!important;
  text-transform:var(--e-global-typography-primary-text-transform,none)!important;
  font-size:clamp(34px,5.3vw,calc(var(--sg-t-display-size) * 1.45))!important;
}
/* labels */
/* NOTE: nothing inside .sg-rail is listed here on purpose. The rail's type is
   measured against the hero ghosts to build the fly-in - pinning its size from
   a global desaturates that 1:1 relationship and the menu assembles wrong.
   The rail keeps the tokens in snippet 25. */
.sg-eyebrow.sg-eyebrow,
.sg-gal__tags span,
.sg-ask__baselabel{
  font-family:var(--sg-t-label)!important;
  font-size:var(--sg-t-label-size)!important;
  font-weight:var(--e-global-typography-secondary-font-weight,500)!important;
  letter-spacing:var(--e-global-typography-secondary-letter-spacing,.12em)!important;
  text-transform:var(--e-global-typography-secondary-text-transform,uppercase)!important;
}
/* body */
.sg-lead,.sg-gal__intro,.sg-ask__note,.sg-process__copy p,.sg-tl__card p,.sg-gal__body p,.sg-st__body,.sg-ask__base p{
  font-family:var(--sg-t-body)!important;
  font-size:clamp(14px,1.1vw,var(--sg-t-body-size))!important;
  font-weight:var(--e-global-typography-text-font-weight,400)!important;
  letter-spacing:var(--e-global-typography-text-letter-spacing,0)!important;
  line-height:var(--e-global-typography-text-line-height,1.6)!important;
  text-transform:var(--e-global-typography-text-text-transform,none)!important;
}
/* buttons and controls */
.sg-section .sg-btn__label,.sg-hero__pills .sg-btn__label,.sg-chat__opt,.sg-chat__input{
  font-family:var(--sg-t-btn)!important;
  font-size:var(--sg-t-btn-size)!important;
  font-weight:var(--e-global-typography-accent-font-weight,600)!important;
  letter-spacing:var(--e-global-typography-accent-letter-spacing,.01em)!important;
  text-transform:var(--e-global-typography-accent-text-transform,none)!important;
}

/* ===== Nelson, 17 Aug: the footer is gone. Socials sit under the Ask note as
   icons, and the details it was carrying close out the last section. ===== */
.sg-footer{display:none!important}
.sg-ask__socials{display:flex;align-items:center;gap:10px;margin:22px 0 0}
.sg-ask__socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:rgba(244,246,239,.75);border:1px solid rgba(244,246,239,.18);background:rgba(244,246,239,.04);transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s ease}
.sg-ask__socials a:hover{color:var(--sg-forest);background:var(--sg-accent);border-color:var(--sg-accent);transform:translateY(-2px)}
.sg-ask__socials svg{width:18px;height:18px;display:block}

/* ================================================================
   TYPE SYSTEM - OWNED BY Tools > Site Typography (Nelson, 17 Aug)

   This block is the LAST word on type and replaces the earlier
   Elementor-kit binding above it. Every role reads the --t-* tokens the
   Site Typography page emits; the size tokens are already clamp()ed there,
   so nothing is re-wrapped here. Change a number on that page and the
   matching text on the site moves - including weight, line-height,
   letter-spacing and transform, none of which were honoured before.

   The old --sg-t-* names are re-pointed at the same tokens so anything
   still referencing them keeps working.

   NOT bound: the CHACHA wordmark's SIZE. It is a layout element sized to
   span the hero (min(24.2vw,50vh)); pinning it to a px token would collapse
   it. Its weight/tracking/case do follow the panel.
   ================================================================ */
:root{
  --sg-t-display:var(--t-display-l-family,var(--sg-font-display));
  --sg-t-label:var(--t-label-family,var(--sg-font-display));
  --sg-t-body:var(--t-body-family,var(--sg-font-ui));
  --sg-t-btn:var(--t-button-family,var(--sg-font-display));
  --sg-t-display-size:var(--t-display-l-size,59px);
  --sg-t-label-size:var(--t-label-size,10px);
  --sg-t-body-size:var(--t-body-size,15px);
  --sg-t-btn-size:var(--t-button-size,13px);
}

/* Display XL - hero headline */
.sg-hero__h1.sg-hero__h1{
  font-family:var(--t-display-xl-family)!important;
  font-size:var(--t-display-xl-size)!important;
  font-weight:var(--t-display-xl-weight)!important;
  line-height:var(--t-display-xl-lh)!important;
  letter-spacing:var(--t-display-xl-ls)!important;
  text-transform:var(--t-display-xl-transform)!important;
}

/* Display L - every section headline */
.sg-h2.sg-h2,.sg-ask__left .sg-h2{
  font-family:var(--t-display-l-family)!important;
  font-size:var(--t-display-l-size)!important;
  font-weight:var(--t-display-l-weight)!important;
  line-height:var(--t-display-l-lh)!important;
  letter-spacing:var(--t-display-l-ls)!important;
  text-transform:var(--t-display-l-transform)!important;
}

/* Display M - headings inside cards */
.sg-st__card h3,.sg-tl__card h3,.sg-gal__body h3,.sg-chip__top b,.sg-faq__item summary{
  font-family:var(--t-display-m-family)!important;
  font-size:var(--t-display-m-size)!important;
  font-weight:var(--t-display-m-weight)!important;
  line-height:var(--t-display-m-lh)!important;
  letter-spacing:var(--t-display-m-ls)!important;
  text-transform:var(--t-display-m-transform)!important;
}

/* Wordmark - size stays viewport-driven, see note above */
.sg-hero__mark.sg-hero__mark{
  font-family:var(--t-wordmark-family)!important;
  font-weight:var(--t-wordmark-weight)!important;
  line-height:var(--t-wordmark-lh)!important;
  letter-spacing:var(--t-wordmark-ls)!important;
  text-transform:var(--t-wordmark-transform)!important;
}

/* Nelson, 17 Aug: on phones every one of these tokens bottoms out at its clamp
   FLOOR - the fluid vw term is only a few px at 390px wide, so the floor always
   wins and the copy reads far too small.

   All five are lifted by the same 36.36%, the figure that takes Body's 11px
   floor to the 15px he asked for (15 / 11 = 1.3636).

     Body      11px   -> 15.00px
     Body S    11px   -> 15.00px
     Display M 12.4px -> 16.91px
     Lead      12.4px -> 16.91px
     Quote     12.4px -> 16.91px

   The multiplier is left visible in the calc() so the percentage can be
   retuned in one place. Phones only - tablet and desktop are untouched. */
@media(max-width:767px){
  :root{
    --t-body-size:calc(11px * 1.3636);
    --t-body-s-size:calc(11px * 1.3636);
    --t-display-m-size:calc(12.4px * 1.3636);
    --t-lead-size:calc(12.4px * 1.3636);
    --t-quote-size:calc(12.4px * 1.3636);
  }
}

/* Section Lead - the big intro line under a heading */
/* every var carries its previous hard-coded value as a fallback, so if the
   token ever fails to emit the text degrades to what it looked like before
   rather than collapsing to the browser default */
.sg-process__lead{
  font-family:var(--t-lead-family,var(--sg-font-display))!important;
  font-size:var(--t-lead-size,clamp(1.05rem,1.7vw,1.5rem))!important;
  font-weight:var(--t-lead-weight,500)!important;
  line-height:var(--t-lead-lh,1.4)!important;
  letter-spacing:var(--t-lead-ls,0)!important;
  text-transform:var(--t-lead-transform,none)!important;
}

/* Testimonial Quote - the bold opening line of each review */
.sg-st__lead{
  font-family:var(--t-quote-family,var(--sg-font-display))!important;
  font-size:var(--t-quote-size,clamp(1.1rem,1.6vw,1.45rem))!important;
  font-weight:var(--t-quote-weight,700)!important;
  line-height:var(--t-quote-lh,1.25)!important;
  letter-spacing:var(--t-quote-ls,-.02em)!important;
  text-transform:var(--t-quote-transform,none)!important;
}

/* Body */
.sg-lead,.sg-gal__intro,.sg-ask__note,.sg-process__copy p,.sg-tl__card p,.sg-gal__body p,.sg-st__body,.sg-ask__base p,.sg-faq__a p,.sg-hero__bottom .sg-line{
  font-family:var(--t-body-family)!important;
  font-size:var(--t-body-size)!important;
  font-weight:var(--t-body-weight)!important;
  line-height:var(--t-body-lh)!important;
  letter-spacing:var(--t-body-ls)!important;
  text-transform:var(--t-body-transform)!important;
}

/* Body S - small print in cards and chips */
.sg-chip__more,.sg-step-copy p,.sg-st__role,.sg-faq__foot,.sg-tl__meta{
  font-family:var(--t-body-s-family)!important;
  font-size:var(--t-body-s-size)!important;
  font-weight:var(--t-body-s-weight)!important;
  line-height:var(--t-body-s-lh)!important;
  letter-spacing:var(--t-body-s-ls)!important;
}

/* Nav - docked sidebar only. The hero ghosts keep their fluid vw size because
   the fly-in is built from the ghost:rail size RATIO; pinning both to the same
   px would flatten the animation. Everything else about them matches. */
.sg-rail__link,.sg-rail__link span,.sg-rail__nav a,.sg-ghost-nav{
  font-family:var(--t-nav-family)!important;
  font-weight:var(--t-nav-weight)!important;
  line-height:var(--t-nav-lh)!important;
  letter-spacing:var(--t-nav-ls)!important;
  text-transform:var(--t-nav-transform)!important;
}
.sg-rail__link,.sg-rail__link span,.sg-rail__nav a{font-size:var(--t-nav-size)!important}

/* Eyebrow / Label */
.sg-eyebrow.sg-eyebrow,.sg-gal__tags span,.sg-ask__baselabel{
  font-family:var(--t-label-family)!important;
  font-size:var(--t-label-size)!important;
  font-weight:var(--t-label-weight)!important;
  line-height:var(--t-label-lh)!important;
  letter-spacing:var(--t-label-ls)!important;
  text-transform:var(--t-label-transform)!important;
}

/* Micro / HUD - the mono row.
   NOTHING inside .sg-rail is listed. The rail's type is sized in em against the
   rail's own root so it can scale during the fly-in; pinning it to px tokens
   blew the stat numbers out of their card. Same reason the Stat Number role is
   not bound - those numbers only exist in the rail. */
.sg-gal__ix,.sg-orb__title,.sg-chat__top,.sg-bub,.sg-chat__opt,.sg-chat__input,.sg-hero__loc{
  font-family:var(--t-micro-family)!important;
  font-size:var(--t-micro-size)!important;
  font-weight:var(--t-micro-weight)!important;
  line-height:var(--t-micro-lh)!important;
  letter-spacing:var(--t-micro-ls)!important;
  text-transform:var(--t-micro-transform)!important;
}

/* Button */
.sg-btn__label,.sg-section .sg-btn__label,.sg-hero__pills .sg-btn__label{
  font-family:var(--t-button-family)!important;
  font-size:var(--t-button-size)!important;
  font-weight:var(--t-button-weight)!important;
  line-height:var(--t-button-lh)!important;
  letter-spacing:var(--t-button-ls)!important;
  text-transform:var(--t-button-transform)!important;
}

/* Stat Number - intentionally NOT bound, see the rail note above. */

/* Timeline Year */
.sg-tl__year{
  font-family:var(--t-year-family)!important;
  font-size:var(--t-year-size)!important;
  font-weight:var(--t-year-weight)!important;
  line-height:var(--t-year-lh)!important;
  letter-spacing:var(--t-year-ls)!important;
  text-transform:var(--t-year-transform)!important;
}

/* ================================================================
   Nelson, 17 Aug: CHACHA sits ABOVE the rail's panel backgrounds.
   The hero is a stacking context at z-index:3, so no z-index on the wordmark
   itself can ever beat a rail at 900 - the rail has to drop below the hero
   instead. While it is flown out across the hero it now sits at 2; the moment
   it docks it returns to 900 and the sidebar is on top again as before.
   ================================================================ */
header.sg-rail:not(.is-docked){z-index:2!important}

/* Active-item pill in the HERO row: padding halved, plus a little side margin
   so the block stops butting into the dividers. Both the real link and the
   ghost it is measured against change together, or the fly-in misaligns.
   The docked sidebar keeps its original padding. */
.sg-ghost-nav,.sg-rail:not(.is-docked) .sg-rail__link{padding:.227em .409em!important}
.sg-rail:not(.is-docked) .sg-rail__link{margin:0 .35em}
/* no active-item fill in the hero row - the pill belongs to the sidebar only */
.sg-rail:not(.is-docked) .sg-rail__link,
.sg-rail:not(.is-docked) .sg-rail__link.is-active,
.sg-rail:not(.is-docked) .sg-rail__link[aria-current]{background:transparent!important;box-shadow:none!important}

/* Process Step Word */
.sg-step-word,.sg-process__word{
  font-family:var(--t-step-family)!important;
  font-size:var(--t-step-size)!important;
  font-weight:var(--t-step-weight)!important;
  line-height:var(--t-step-lh)!important;
  letter-spacing:var(--t-step-ls)!important;
  text-transform:var(--t-step-transform)!important;
}

.sg-ask__base{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:96px;padding-top:34px;border-top:1px solid rgba(244,246,239,.14)}
/* 18 Aug, Nelson: dead green below the footer row cut 60% (was a computed 90px
   of section padding-bottom, now 36px). The Elementor container still carries
   its own 120px value, so this has to win with !important. */
#ask.sg-section{padding-bottom:36px!important}

/* MOBILE BRAND MARK (<=1024px): the giant "Chacha" wordmark is swapped for the
   round logo. The <span> is only hidden, never removed - GSAP's hero timeline
   still targets #ghostWordmark and would throw on a missing node. Desktop keeps
   the wordmark and gets the logo in the rail instead. */
.sg-hero__logoimg{display:none}
/* NOTE: the hero's giant "Chacha" wordmark is deliberately LEFT ALONE on mobile.
   The mobile brand swap happens on .sg-mnav__brand (the sticky top bar), which
   is the direct counterpart of the desktop rail chip. The <img> below stays in
   the markup, unused, so switching the hero over is a one-rule change if wanted:
   @media(max-width:1024px){.sg-hero__mark{display:none!important}
   .sg-hero__logoimg{display:block;width:min(58vw,280px);height:auto}} */
/* the rail's logo sits between the CHACHA chip and the KE locative */
.sg-rail__logo{display:none}
.sg-mnav__logo{display:block;height:38px;width:auto}
.sg-ask__baselabel{display:block;margin-bottom:10px;font-family:var(--sg-font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,246,239,.42)}
.sg-ask__base p{margin:0;font-family:var(--sg-font-ui);font-size:13px;line-height:1.65;color:rgba(244,246,239,.72)}
.sg-ask__base a{color:var(--sg-accent)}
@media(max-width:1024px){.sg-ask__base{grid-template-columns:repeat(2,1fr);gap:26px;margin-top:64px}}
@media(max-width:600px){.sg-ask__base{grid-template-columns:1fr}.sg-ask__socials a{width:38px;height:38px}}
.sg-tl__av{display:flex}
.sg-tl__av img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--sg-bone-2)}
.sg-tl__av img+img{margin-left:-14px}
.sg-tl__meta{font-family:var(--sg-font-ui);font-size:13px;line-height:1.35;color:var(--sg-ink-50)}
.sg-tl__more{margin-left:auto;cursor:pointer;font-family:var(--sg-font-display);font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--sg-ink);background:var(--sg-bone);border:1px solid var(--sg-hair-dark);border-radius:var(--sg-r-pill);padding:9px 16px;transition:background-color .25s ease,color .25s ease}
.sg-tl__more:hover{background:var(--sg-accent)}
.sg-tl__more:focus-visible{outline:2px solid var(--sg-forest);outline-offset:3px}
/* read-more popup, opens in place */
.sg-tl__pop{position:absolute;inset:-1vw 0 auto;width:clamp(340px,29.58vw,600px);max-width:96%;z-index:6;background:var(--sg-dark-grad);border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:19.6px;padding:24px;color:var(--sg-bone-text);opacity:0;transform:scale(.8);pointer-events:none;transition:opacity .2s ease,transform .4s cubic-bezier(.25,.46,.45,.94)}
.sg-tl__item.is-open .sg-tl__pop{opacity:1;transform:scale(1.02);pointer-events:auto}
.sg-tl__pop .sg-tl__year{color:var(--sg-accent)}
.sg-tl__pop h4{margin:0 0 10px;font-family:var(--sg-font-display);font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:600;line-height:1.7;color:var(--sg-bone-text)}
.sg-tl__pop p{margin:0;font-size:14px;line-height:1.6;color:rgba(244,246,239,.8)}
.sg-tl__close{position:absolute;top:14px;right:14px;width:39px;height:39px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;cursor:pointer;display:grid;place-items:center}
.sg-tl__close::before,.sg-tl__close::after{content:'';position:absolute;width:17px;height:1.5px;background:var(--sg-bone-text)}
.sg-tl__close::before{transform:rotate(45deg)}
.sg-tl__close::after{transform:rotate(-45deg)}
@media(max-width:900px){
.sg-tl__rail{left:7px}
.sg-tl__item,.sg-tl__item--r{width:100%;margin-left:0;padding-left:34px;padding-right:0;margin-top:0!important}
.sg-tl__item--l .sg-tl__dot,.sg-tl__item--r .sg-tl__dot{left:1.6px;right:auto}
.sg-tl__pop{width:100%}
}

/* ---- last word: the bleed sections pin their own content, so the closing 90px
   has to live on the section itself and after every earlier bleed rule, or the
   final cards sit flush on the boundary (Nelson, 17 Aug). ---- */
.sg-safaris.sg-safaris,.sg-process.sg-process{padding-bottom:90px!important}
@media(max-width:767px){.sg-safaris.sg-safaris,.sg-process.sg-process{padding-bottom:50px!important}}

/* ================= THE WASH (Nelson, 17 Aug r4) =================
   sg-engine.js paints one fixed gradient layer (#sgWash) behind the whole page,
   its colours driven by scroll, and flags <html> with .sg-washed. While washed,
   every section hands its ground to the wash - a boundary line cannot exist
   because there is no boundary, just one surface. The per-section backgrounds
   below/above this block stay live for noanim, reduced-motion and mobile. */
#sgWash{position:fixed;inset:0;z-index:0;pointer-events:none}
/* the body's own bone was still painting the inter-section gaps and cutting a
   crisp line at each section's edge; the wash owns the ground everywhere now.
   html stays bone so overscroll never flashes white. */
.sg-washed body{background:transparent!important}
.sg-washed .sg-hero.sg-hero,
.sg-washed .sg-safaris.sg-safaris,
.sg-washed .sg-process.sg-process,
.sg-washed .sg-stories.sg-stories,
.sg-washed .sg-ask.sg-ask,
.sg-washed #destinations.sg-section,
.sg-washed .sg-orbit.sg-orbit,
.sg-washed .sg-orb__pin{background:transparent!important}
/* About must still cover the hero it slides over, but its leading edge is a
   30vh fade instead of a straight cut - the portrait's blur wash now dissolves
   under it rather than being chopped. Applies in every mode: the static page
   has the same seam. */
.sg-about.sg-about{background:linear-gradient(180deg,rgba(231,229,218,0),#E7E5DA 30vh)!important}
/* r4b: while washed, About paints NO ground at all - an opaque About put its
   own bottom edge back on the wash. The wash is bone there anyway, and the
   only hero element still alive under it (the portrait) now fades fully out. */
.sg-washed .sg-about.sg-about{background:transparent!important}
/* r7: the fixed portrait must never haunt the page below the hero. On a
   mid-page reload it rendered at full strength for a beat (through the
   transparent washed sections) until its scrub tween caught up. Class-driven
   and !important, so it holds even before any tween exists. */
body.sg-past-hero .sg-hero__portrait{opacity:0!important;transition:opacity .45s ease}

/* ===== MOBILE + TABLET BRAND LOCKUP (Nelson, 20 Aug) =====
   The top-left logo was cut in half. .sg-mnav__brand was still authored for the
   OLD square mark: a 38x38 ROUND box carrying the logo as a background image,
   with overflow:hidden and text-indent:-9999px. The r14 engine change puts the
   full lockup inside it as a real <img> (512x402), so at 38px tall it measures
   ~48px wide - past the box - and the round clip sliced the SAFARI GUIDE line
   and the right edge off.
   The brand link is now only a wrapper that sizes to its image: no circle, no
   background, no clipping. font-size:0 replaces the text-indent (which shifts
   inline images too) so the engine's text fallback still cannot print.
   <=1024px only - the desktop rail is untouched. */
@media(max-width:1024px){
  .sg-mnav__brand{width:auto;height:auto;background:none;border-radius:0;overflow:visible;text-indent:0;font-size:0;line-height:0;display:flex;align-items:center;flex:0 0 auto}
  .sg-mnav__logo{display:block;height:44px;width:auto;max-width:none}
}
/* phones: the bar is 62px tall, so the lockup takes 40 and keeps its air */
@media(max-width:767px){.sg-mnav__logo{height:40px}}