/* Mega navigation overlay: Figma 153:2932 (desktop flyout 153:3334). Markup sections/nav.html, behaviour js/nav.js.
   Every rule is scoped under .mnav. The overlay lives outside the scaled pages. Each layout's canvas is authored at
   Figma size and scaled by --mnav-s (the page's rendered scale, set by js/nav.js), then moved down by --mnav-ty so its
   header row sits on the page's own header row. --mnav-h is the panel height in viewport px. */
.mnav{--mnav-ease:var(--ease-out);--mnav-flow:cubic-bezier(.7,0,.2,1);--mnav-s:1;--mnav-ty:0px;--mnav-h:566px;
  position:fixed;inset:0;z-index:1000;overflow:hidden auto;overscroll-behavior:contain;
  color:#261b1b;font-family:var(--f-body);-webkit-font-smoothing:antialiased}
.mnav[hidden]{display:none}
.mnav.is-closing{pointer-events:none}
.mnav ul{list-style:none}
.mnav a,.mnav button{color:inherit}
.mnav img{display:block;max-width:none}
.mnav__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* "Background - Blur" (153:3093): the live page, blurred and dimmed. It only exists while the menu is shown. */
.mnav__backdrop{position:fixed;inset:0;background:rgba(0,0,0,.16);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity 520ms var(--ease-fade)}

/* Parchment panel (header + flyout) with the 1px divider on its bottom edge. Revealed top-down. */
.mnav__panel{position:relative;height:var(--mnav-h);background:#f6f2ea;border-bottom:1px solid #e3e7ef;
  clip-path:inset(0 0 100% 0);transition:clip-path 720ms var(--mnav-flow)}

.mnav__canvas{display:none;position:absolute;left:0;top:0;transform-origin:0 0;transform:translate(var(--mx,0px),var(--mnav-ty)) scale(var(--mnav-s))}
/* After a far jump the header glides onto the sticky bar's before the retracting panel uncovers it (js/nav.js). */
.mnav.is-realign .mnav__canvas{transition:transform 200ms var(--ease-out)}
/* The mobile sheet's height is the viewport minus that offset: it glides with it on the same curve, so the sheet's foot
   (margin-top:auto) keeps its place on screen instead of stepping 6px and gliding back. */
.mnav.is-realign .mnav__canvas--m{transition:transform 200ms var(--ease-out),height 200ms var(--ease-out)}
.mnav[data-layout="d"] .mnav__canvas--d{display:block}

/* ── Desktop canvas (1512 × 606, Figma coordinates; Oct 20: Figma's 543 plus one 62.536 link row, for Pricing) ───────────────────────────────────────────── */
.mnav__canvas--d{width:1512px;height:566px}
/* Header row (153:3137): same box as the page header (#s01 .brand) */
/* Its hit area grows around the same centre (y 39) so it stays a 24px target (44 on touch) as the canvas scales down */
.mnav__canvas--d .mnav__brand{--mnav-bh:max(30px, calc(24.5px / var(--mnav-s)));position:absolute;left:111px;top:calc(39px - var(--mnav-bh) / 2);height:var(--mnav-bh);display:flex;align-items:center;gap:13.265px}
.mnav__canvas--d .mnav__logo{display:block;width:110.65px;height:24px}   /* Oct 14: the product Figma's logo (s01.css) */
/* × (153:3155, 23 × 23 at 1370/27.5, centre 1381.5/39) centred in its hit area; right edge = the hamburger's right edge.
   Drawn inline in currentColor: the 1.05px Figma stroke would thin to a grey smear once the canvas scales below 1, so
   it never renders under Figma's 1.05 screen px (and forced-colours modes recolour it). Hit area: 44 canvas px, never under 24
   screen px (44 on touch screens). */
.mnav__canvas--d .mnav__close{--mnav-hit:max(44px, calc(24px / var(--mnav-s)));position:absolute;
  left:calc(1381.5px - var(--mnav-hit) / 2);top:calc(39px - var(--mnav-hit) / 2);width:var(--mnav-hit);height:var(--mnav-hit)}
.mnav__canvas--d .mnav__x{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;overflow:visible}
.mnav__x path{fill:none;stroke:currentColor;stroke-width:max(2px, calc(2px / var(--mnav-s)));stroke-linecap:round}   /* Sep 26: was a 1px hairline */

/* Primary links (153:3096): 51px Neue Montreal Medium, cap tops every 62.536px from y 185.
   Line boxes replace Figma's text-box-trim (cap top sits ~13px into a 62.536px line) so every browser agrees. */
.mnav__canvas--d .mnav__primary{position:absolute;left:772.8px;top:132.8px;width:343.2px}   /* Oct 21 (owner: "the top padding here can be reduced a bit"): 40 higher, the whole content with it (was 172.8; the panel 566, was 606) */
.mnav__canvas--d .mnav__primary a{display:block;width:fit-content;font-size:51.071px;line-height:62.536px;font-weight:400;-webkit-text-stroke:.8px currentColor;white-space:nowrap}

/* Social (153:3109, 16px Regular, 24 pitch) and legal (153:3102, 14px Medium, 20 pitch) columns. Every link is a real
   24px target on screen (WCAG 2.5.8), so the row pitch --mnav-rp is 24.5 canvas px at 1512 and grows as the canvas
   shrinks (24.5 screen px). Figma's two alignments are kept: the social list's first row sits where Figma puts it
   (text box top 185, level with "About") and the legal list's last baseline sits on "Contact"'s (y 472): top =
   472 - 4.5 × pitch - 5. Legal grey: Figma's rgba(38,27,27,.4) is 2.4:1 on the panel; #736b68 is the nearest tone
   that clears 4.5:1. */
.mnav__canvas--d{--mnav-rp:max(24px, calc(24.5px / var(--mnav-s)))}
.mnav__canvas--d .mnav__social{position:absolute;left:114px;top:calc(157px - var(--mnav-rp) / 2);width:268.8px}
.mnav__canvas--d .mnav__social a{display:block;width:fit-content;min-width:var(--mnav-rp);font-size:16px;line-height:var(--mnav-rp);font-weight:400;white-space:nowrap}
.mnav__canvas--d .mnav__legal{position:absolute;left:115px;top:calc(427px - var(--mnav-rp) * 4.5);width:268.8px}
.mnav__canvas--d .mnav__legal a{display:block;width:fit-content;min-width:var(--mnav-rp);font-size:14px;line-height:var(--mnav-rp);font-weight:400;-webkit-text-stroke:.3px currentColor;color:#736b68;white-space:nowrap}
/* Below ~1440 wide the growing rows would run the two lists together (less than ~1.5 rows between them), so they
   sit side by side instead: legal moves into the free column right of social (Figma's social frame ends at 382.8),
   both starting on the first social row. */
@media (max-width:1439.98px){
  .mnav__canvas--d .mnav__legal{left:383px;top:calc(157px - var(--mnav-rp) / 2)}
}
/* Touch screens on the desktop layout (tablets, phones in landscape: canvas at ~.5–.9): side by side on thumb-sized
   rows (32 screen px, 48 canvas px at least) with a floor on the small type so it stays readable when the canvas is
   scaled right down; the × gets a 44px hit area. Everything still ends above the panel's bottom edge at 768 wide. */
@media (pointer:coarse){
  .mnav__canvas--d{--mnav-rp:max(48px, calc(32px / var(--mnav-s)))}
  .mnav__canvas--d .mnav__legal{left:383px;top:calc(157px - var(--mnav-rp) / 2)}
  .mnav__canvas--d .mnav__social a{font-size:max(16px, calc(15px / var(--mnav-s)))}
  .mnav__canvas--d .mnav__legal a{font-size:max(14px, calc(13px / var(--mnav-s)))}
  .mnav__canvas--d .mnav__close{--mnav-hit:max(44px, calc(44px / var(--mnav-s)))}
  .mnav__canvas--d .mnav__brand{--mnav-bh:max(30px, calc(44px / var(--mnav-s)))}
}

/* ── Mobile sheet (393 canvas; no Figma frame, designed from the desktop flyout) ─────────────────
   Full-height parchment sheet. The canvas is exactly one viewport tall in canvas px (--mnav-vh = 100dvh / scale), so the
   header stays put and only the body scrolls, and only when a short screen can't hold it. Spacing tightens smoothly
   between ~850 and ~660 canvas px of height (tall phones → iPhone SE / Safari with its bars) before scrolling. */
.mnav[data-layout="m"]{overflow:hidden}
.mnav[data-layout="m"] .mnav__panel{height:100vh;height:100dvh;border-bottom:0}
.mnav[data-layout="m"] .mnav__canvas--m{display:flex}
.mnav__canvas--m{--mnav-vh:calc(100vh / var(--mnav-s));
  --mnav-hit:max(44px, calc(44px / var(--mnav-s)));             /* 44 screen px, also on phones narrower than 393 */
  --mnav-row:clamp(max(46px, var(--mnav-hit)), calc(var(--mnav-vh) * .064), 56px); /* primary link pitch (the tap target) */
  --mnav-lead:clamp(12px, calc((var(--mnav-vh) - 660px) * .25), 48px); /* air between header and links */
  width:393px;height:calc(var(--mnav-vh) - var(--mnav-ty) / var(--mnav-s));flex-direction:column;color:#261b1b}
@supports (height:100dvh){.mnav__canvas--m{--mnav-vh:calc(100dvh / var(--mnav-s))}}
/* Header row: #m01 .nav box for box (padding 12/12/12/20, 68 tall), so the logo and the × sit exactly on the page's */
.mnav__canvas--m .mnav__bar{flex:none;display:flex;align-items:center;justify-content:space-between;height:68px;padding:12px 12px 12px 20px}
.mnav__canvas--m .mnav__brand{display:flex;align-items:center;gap:13.265px;padding:calc((var(--mnav-hit) - 30px) / 2) 0;color:#201a14} /* ≥44 tall, same centre */
.mnav__canvas--m .mnav__logo{display:block;width:110.65px;height:24px}
/* × = the hamburger's own two 22 × 2 bars (#m01 .menu i), turned. Closed they sit exactly where the hamburger's are. */
/* the button grows past 44 on small phones; the negative right margin keeps its centre (and the bars) in place */
.mnav__canvas--m .mnav__close{position:relative;flex:none;width:var(--mnav-hit);height:var(--mnav-hit);margin-right:calc((44px - var(--mnav-hit)) / 2);color:#201a14}
.mnav__canvas--m .mnav__close i{position:absolute;left:calc(50% - 11px);top:calc(50% - 1px);width:22px;height:2px;background:currentColor;
  transform:translateY(-4px) rotate(0deg) scaleX(1)}
.mnav__canvas--m .mnav__close i+i{transform:translateY(4px) rotate(0deg) scaleX(1)}
.mnav.is-open .mnav__canvas--m .mnav__close i{transform:translateY(0) rotate(45deg) scaleX(1.0909)}
.mnav.is-open .mnav__canvas--m .mnav__close i+i{transform:translateY(0) rotate(-45deg) scaleX(1.0909)}
/* With individual transform properties the morph is sequenced: the bars meet in the middle, then turn (no "›" midway) */
@supports (rotate:0deg){
  .mnav__canvas--m .mnav__close i{transform:none;translate:0 -4px;rotate:0deg;scale:1 1}
  .mnav__canvas--m .mnav__close i+i{transform:none;translate:0 4px}
  .mnav.is-open .mnav__canvas--m .mnav__close i{transform:none;translate:0 0;rotate:45deg;scale:1.0909 1}
  .mnav.is-open .mnav__canvas--m .mnav__close i+i{transform:none;rotate:-45deg}
}
/* Body: links at the top, the footer block pushed to the bottom. Masks fade content under the header only when it scrolls. */
.mnav__canvas--m .mnav__body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;scroll-padding-block:18px;
  padding:var(--mnav-lead) 20px 0;
  overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none}
.mnav__canvas--m .mnav__body::-webkit-scrollbar{display:none}
.mnav__canvas--m .mnav__body.is-scrollable{-webkit-mask-image:linear-gradient(#0000,#000 14px,#000 calc(100% - 14px),#0000);mask-image:linear-gradient(#0000,#000 14px,#000 calc(100% - 14px),#0000)}
/* Primary links: the desktop's 51px Medium at 42px, same 1.22 line pitch; every row is a full-width tap target.
   Oct 21 (owner: "the text size of the menu links here in the mobile version can be slightly smaller"): 36px, the pitch
   with it (at most 50px; the tap target never under 46) */
.mnav__canvas--m .mnav__primary{flex:none;--mnav-row:clamp(max(46px, var(--mnav-hit)), calc(var(--mnav-vh) * .058), 50px)}
.mnav__canvas--m .mnav__primary a{display:block;font-size:36px;line-height:var(--mnav-row);font-weight:400;-webkit-text-stroke:.5px currentColor;white-space:nowrap}
/* Footer: hairline, then social + legal as two columns of 44px rows (desktop type: 16 Regular ink / 14 Medium grey) */
.mnav__canvas--m .mnav__foot{flex:none;margin-top:auto;padding-top:24px}
.mnav__canvas--m .mnav__cols{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;padding-top:10px}
.mnav__canvas--m .mnav__cols::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(38,27,27,.12);transform-origin:0 50%}
.mnav__canvas--m .mnav__social a,.mnav__canvas--m .mnav__legal a{display:block;width:fit-content;min-width:var(--mnav-hit);line-height:var(--mnav-hit);font-weight:400;white-space:nowrap}
.mnav__canvas--m .mnav__social a{font-size:16px}
.mnav__canvas--m .mnav__legal a{font-size:14px;-webkit-text-stroke:.3px currentColor;color:#736b68}
/* "Book a call": the site's dark bevelled button (#m01 .run, #m14 .btn-sm) at full width. Their 119° taupe→ink ramp
   stretched over 353px would leave the label on a muddy mid-tone, so the ramp runs steeper (160°) and reaches deep brown
   by the middle: the gold label keeps ≥ 7:1 and the bar reads as one lacquered piece. */
/* Oct 21 (phone QA): the button stands under the scrolling body, not in it. A sheet opened under the notice, or in an
   in-app browser's shorter view, used to run past the screen's foot and cut the button in half (393x659 from the top of
   the page, 375x629, 320x568); now the links scroll behind the body's fade and the button always shows whole. Where it
   all fits, it sits exactly where it did: 18 under the columns, 16 above the screen's foot. */
.mnav__canvas--m .mnav__cta-wrap{flex:none;padding:18px 20px calc(16px + env(safe-area-inset-bottom, 0px) / var(--mnav-s))}
/* The Figma hover (base.css "CTA glow") plays on the press: border #ab9589 -> #d1b8a3, every stop of the ramp lifted as
   Figma lifts its two (the hover ramp laid over the rest one at --cta-h), the 113.6deg band re-derived for 353 x 50 = 147.4deg. */
.mnav__canvas--m .mnav__cta{position:relative;display:flex;align-items:center;justify-content:center;height:max(50px, var(--mnav-hit));overflow:hidden;isolation:isolate;
  border:1.2px solid;border-radius:6px;border-color:rgb(calc(171 + 38 * var(--cta-b)) calc(149 + 35 * var(--cta-b)) calc(137 + 26 * var(--cta-b)));
  box-shadow:var(--cta-glow);--cta-sa:147.4deg;--cta-lr:80px}
.mnav__canvas--m .mnav__cta::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--cta-light),var(--cta-sheen),url(../assets/shared/btn-noise-1.webp) 0 0/166.61px 166.61px,url(../assets/shared/btn-noise-2.webp) 0 0/166.61px 166.61px,
    var(--cta-grad-h),linear-gradient(160deg,#8f7c71 0%,#3a2c28 55%,#261b1b 100%);background-blend-mode:overlay,soft-light,overlay,overlay,normal,normal}
.mnav__canvas--m .mnav__cta{--cta-grad-h:linear-gradient(160deg,rgba(151,134,125,var(--cta-h)) 0%,rgba(80,67,63,var(--cta-h)) 55%,rgba(60,50,50,var(--cta-h)) 100%)}
.mnav__canvas--m .mnav__cta::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 1.077px 1.077px 2.154px 0 #ecded7,inset -1.077px -1.077px 4.038px 0 rgba(18,10,9,.8)}
.mnav__canvas--m .mnav__cta span{font-size:16px;line-height:normal;font-weight:400;white-space:nowrap;color:#f0d9a0;
  filter:drop-shadow(0 .6px 1.1px rgba(0,0,0,.3))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mnav__canvas--m .mnav__cta span{color:transparent;background:linear-gradient(94deg,#ffe792 0%,#e6c38a 100%);-webkit-background-clip:text;background-clip:text}
}

/* Forced colours repaint backgrounds as the panel colour: the mobile ×'s bars (painted backgrounds) keep ButtonText */
@media (forced-colors:active){
  .mnav__canvas--m .mnav__close i{forced-color-adjust:none;background:ButtonText}
}

/* ── Interaction ──────────────────────────────────────────────────────────────────────────────── */
.mnav__brand{transition:opacity 200ms var(--ease-fade)}
.mnav__close{border-radius:6px;transition:opacity 200ms var(--ease-fade),transform 160ms var(--mnav-ease)}
.mnav__close:active{transform:scale(.94)}
.mnav__social a,.mnav__legal a{text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color 200ms var(--ease-fade)}
.mnav__primary a{transition:opacity 200ms var(--ease-fade)}
@media (hover:hover) and (pointer:fine){
  .mnav__brand:hover{opacity:.75}
  .mnav__close:hover{opacity:.6}
  .mnav__social a:hover,.mnav__legal a:hover{text-decoration-color:currentColor}
  /* hovering one primary link quiets the others (.5 still clears 3:1 for large text) */
  .mnav__primary ul:has(a:hover) a:not(:hover){opacity:.5}
}

/* ── Motion: enter slow and soft, leave fast. Only opacity, transform and clip-path animate. ──────── */
/* Sep 26, Harman review ("too fast, it needs to be more fluid"): the panel unrolls on an ease-in-out over 720ms instead of a
   460ms ease-out that was half open within 70ms; the links follow it down a beat later, further and slower. */
.mnav__item,.mnav__group{opacity:0;transform:translateY(18px);
  transition:opacity 520ms var(--ease-fade),transform 820ms var(--mnav-ease);transition-delay:calc(200ms + var(--i,0) * 55ms)}
.mnav__group{transform:translateY(12px);transition-delay:calc(300ms + var(--i,0) * 55ms)}
/* The × arrives with the panel (no gap where the hamburger was) and turns only 20°, so it never reads as a "+" */
.mnav__x{opacity:0;transform:rotate(-20deg) scale(.9);transition:opacity 260ms var(--ease-fade) 80ms,transform 520ms var(--mnav-ease) 80ms}

.mnav.is-open .mnav__backdrop,.mnav.is-open .mnav__item,.mnav.is-open .mnav__group,.mnav.is-open .mnav__x{opacity:1;transform:none}
.mnav.is-open .mnav__panel{clip-path:inset(0)}

/* Close (Oct 14, owner: "closing the navigation ... feels janky and it feels like it happens suddenly"): the open's mirror,
   a little quicker. The links lift away first (a 10px drift up as they fade, the lowest first), then the panel rolls up on
   the open's own ease-in-out, and the page's veil clears behind it. 640ms in all (was 380, with the links gone in 160). */
.mnav.is-closing .mnav__panel{transition:clip-path 600ms var(--mnav-flow) 80ms}
.mnav.is-closing .mnav__backdrop{transition:opacity 600ms var(--ease-fade) 80ms}
.mnav.is-closing .mnav__item,.mnav.is-closing .mnav__group,.mnav.is-closing .mnav__x{
  opacity:0;transform:translateY(-10px);transition:opacity 240ms var(--ease-fade),transform 360ms var(--mnav-ease);
  transition-delay:calc(max(0, 4 - var(--i,0)) * 22ms)}
.mnav.is-closing .mnav__x{transform:rotate(-20deg) scale(.9);transition-delay:0ms}

/* Going somewhere on the page (Sep 27, owner: "link these sections nicely... should be super smooth"; js/nav.js go()).
   A far link: the panel unrolls on until it fills the screen (.is-cover; its ::after continues it below the divider in
   the destination's own colour, --mnav-cover, uncovered by the clip), the page moves under it, then the whole sheet comes
   off the destination (.is-lift) while the page glides the last stretch into place, crisp (no backdrop). The phone's
   sheet already fills the screen: its links fade and it comes off. js/nav.js moves the page when the cover's transition
   ends (COVER_MS) and drives the lift itself (lift(): an inline clip-path on the move's clock, its edge travelling with
   the page), so no transition here. While a cover is on it takes every press (the page underneath is on its way). */
.mnav__panel::after{content:"";position:absolute;left:0;right:0;top:100%;height:max(0px, calc(100vh - var(--mnav-h)));background:var(--mnav-cover,#f6f2ea);opacity:0;pointer-events:none}
.mnav[data-layout="m"] .mnav__panel::after{content:none}
.mnav.is-cover .mnav__panel::after{opacity:1}
.mnav.is-cover:not(.is-closing) .mnav__panel{clip-path:inset(0 0 calc(var(--mnav-h) - 100vh) 0);transition:clip-path 280ms cubic-bezier(.45,0,.4,1)}
.mnav.is-cover .mnav__item,.mnav.is-cover .mnav__group,.mnav.is-cover .mnav__x{opacity:0;transition:opacity 160ms var(--ease-fade);transition-delay:0ms}
.mnav.is-cover .mnav__canvas--m .mnav__cols::before{opacity:0;transition:opacity 160ms var(--ease-fade)}
.mnav.is-lift .mnav__panel{transition:none}
.mnav.is-lift .mnav__backdrop{visibility:hidden;transition:none}
/* A page link's cover (the footer's, the logos'): the view dissolves into the destination's own colour (--veil) and out
   of it again as the page glides in (js/nav.js unveil(), on the move's clock). Under the sticky bar, which stays put. */
.glide-veil{position:fixed;inset:0;z-index:890;pointer-events:none;background:var(--veil,#241e17);opacity:0;visibility:hidden;
  transition:opacity 760ms var(--ease-fade),visibility 0s linear 760ms}
.glide-veil.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 280ms cubic-bezier(.45,0,.55,1),visibility 0s}

/* Mobile sheet: a slightly shorter top-down reveal (it travels a whole screen, 680ms), the hamburger bars turn into the ×,
   and the hairline draws from the left. Closing turns the × back into the hamburger before the sheet uncovers it. */
@media (prefers-reduced-motion:no-preference){
  .mnav[data-layout="m"]:not(.is-closing):not(.is-cover) .mnav__panel{transition-duration:680ms}   /* (a cover completes in its own 280ms) */
  .mnav__canvas--m .mnav__close i{transition:transform 460ms var(--mnav-ease) 40ms,translate 160ms var(--mnav-ease) 20ms,
    rotate 360ms var(--mnav-ease) 70ms,scale 360ms var(--mnav-ease) 70ms}
  /* back to = within 120ms: the retracting sheet uncovers the header row at ~140ms, onto the page's own hamburger */
  .mnav.is-closing .mnav__canvas--m .mnav__close i{transition:transform 120ms var(--mnav-ease),rotate 90ms var(--mnav-ease),
    scale 90ms var(--mnav-ease),translate 80ms var(--mnav-ease) 40ms}
  .mnav__canvas--m .mnav__cols::before{transform:scaleX(0);transition:transform 520ms var(--mnav-ease) 120ms}
  .mnav.is-open .mnav__canvas--m .mnav__cols::before,.mnav.is-closing .mnav__canvas--m .mnav__cols::before{transform:none}
  .mnav.is-closing .mnav__canvas--m .mnav__cols::before{transition:none}
}
/* Once the sheet covers the screen the blurred backdrop underneath is invisible: drop it so the compositor stops
   re-blurring the (still animating) page behind. It comes back the moment closing starts. */
.mnav[data-layout="m"].is-settled .mnav__backdrop{visibility:hidden}
/* Touch press feedback (no hover on phones) */
.mnav__canvas--m .mnav__primary a:active,.mnav__canvas--m .mnav__social a:active,.mnav__canvas--m .mnav__legal a:active,.mnav__canvas--m .mnav__brand:active{opacity:.6;transition-duration:0ms}
.mnav__canvas--m .mnav__cta:active{transform:scale(.98)}   /* the full-width bar presses a little less than the small buttons; its glow: base.css */
.mnav__canvas--m .mnav__social a,.mnav__canvas--m .mnav__legal a{transition:opacity 200ms var(--ease-fade),text-decoration-color 200ms var(--ease-fade)}

/* ── Sticky bar (sections/nav.html .sbar) ─────────────────────────────────────────────────────────
   Condensed header once the hero has passed: logo left, "Book a call" + a compact menu button right. Each layout's canvas
   is authored in design px (1512 × 64, 393 × 56) and scaled by the page's own --s, so it keeps the page's proportions.
   Surface: the mega nav's opaque parchment with a hairline and a soft drop, so it reads the same over the light sections
   and the grained #241e17 ones (no translucency, no backdrop blur to recompute while scrolling). It is fixed (no layout
   shift), moves with transform/opacity only, and is visibility:hidden (plus inert, aria-hidden) once it has left. */
.sbar{--sbar-ease:var(--ease-out);--sbar-h:64px;
  position:fixed;left:0;right:0;top:0;z-index:900;height:calc(var(--sbar-h) * var(--s,1));overflow:hidden;
  background:#f6f2ea;box-shadow:0 1px 0 rgba(38,27,27,.09),0 10px 24px -18px rgba(36,30,23,.55);
  color:#261b1b;font-family:var(--f-body);-webkit-font-smoothing:antialiased;
  transform:translateY(-100%);opacity:0;visibility:hidden;
  /* leave: slides up whole (Oct 15: it now leaves at every scroll down, so it no longer fades on the way, which read as a
     smear over the page), 280ms on a standard ease, then it stops painting */
  transition:transform 280ms cubic-bezier(.4,0,.2,1),opacity 0s linear 280ms,visibility 0s linear 280ms}
/* enter: 360ms ease-out from above, opaque at once */
.sbar.is-shown{transform:none;opacity:1;visibility:visible;transition:transform 360ms var(--sbar-ease),opacity 0s,visibility 0s}
/* A far move from the mega nav: the bar takes its state instantly, under the covering panel (js/nav.js landBar). */
.sbar.no-anim{transition:none!important}
html[data-layout="m"] .sbar{--sbar-h:56px}
.sbar img{display:block;max-width:none}
.sbar a,.sbar button{color:inherit}
/* In-page anchors (the bar's CTA, the mega nav's links, focus moves) land below the bar */
html{scroll-padding-top:calc(64px * var(--s,1))}
html[data-layout="m"]{scroll-padding-top:calc(56px * var(--s,1))}

.sbar__canvas{display:none;position:absolute;left:0;top:0;height:var(--sbar-h);transform-origin:0 0;transform:translateX(var(--mx,0px)) scale(var(--s,1))}
html:not([data-layout="m"]) .sbar__canvas--d,html[data-layout="m"] .sbar__canvas--m{display:block}
.sbar__canvas--d{width:1512px;--sbar-hit:max(44px, calc(24px / var(--s,1)));--sbar-cy:32px}
.sbar__canvas--m{width:393px;--sbar-hit:max(44px, calc(44px / var(--s,1)));--sbar-cy:28px}
@media (pointer:coarse){.sbar__canvas--d{--sbar-hit:max(44px, calc(44px / var(--s,1)))}}

/* Logo: the page header's (#s01 .brand / #m01 .brand) at its x, centred on the bar; hit area ≥ 24 screen px (44 on touch) */
.sbar__brand{position:absolute;top:calc(var(--sbar-cy) - var(--sbar-bh) / 2);height:var(--sbar-bh);display:flex;align-items:center;gap:13.265px;
  --sbar-bh:max(30px, calc(24.5px / var(--s,1)));transition:opacity 200ms var(--ease-fade)}
.sbar__canvas--d .sbar__brand{left:111px}
.sbar__canvas--m .sbar__brand{left:20px;--sbar-bh:var(--sbar-hit)}
.sbar__logo{display:block;width:110.65px;height:24px}   /* Oct 14: the product Figma's logo (s01.css) */
/* The bar is hidden at load: keep its fonts off the first-paint path (same gate as the hero; fonts-go follows FCP). */
html:not(.fonts-go) .sbar{--f-display:Georgia,serif;--f-body:Helvetica,Arial,sans-serif}

/* Menu button: centred exactly where the mega nav's × is drawn (desktop 1381.5 / mobile 359 canvas px), so the × opens
   on it. Desktop: three bars (the page's 3-line hamburger, compact); mobile: #m01's two 22 × 2 bars, which the mobile
   sheet's × morphs from. */
.sbar__menu{position:absolute;top:calc(var(--sbar-cy) - var(--sbar-hit) / 2);width:var(--sbar-hit);height:var(--sbar-hit);border-radius:6px;
  transition:opacity 200ms var(--ease-fade),transform 160ms var(--sbar-ease)}
.sbar__canvas--d .sbar__menu{left:calc(1381.5px - var(--sbar-hit) / 2)}
.sbar__canvas--m .sbar__menu{left:calc(359px - var(--sbar-hit) / 2)}
.sbar__menu i{position:absolute;left:calc(50% - 11px);top:calc(50% - 1px);width:22px;height:2px;background:currentColor}
.sbar__canvas--d .sbar__menu i:nth-child(1){translate:0 -6px}
.sbar__canvas--d .sbar__menu i:nth-child(3){translate:0 6px}
.sbar__canvas--m .sbar__menu i:nth-child(1){translate:0 -4px}
.sbar__canvas--m .sbar__menu i:nth-child(2){translate:0 4px}

/* "Book a call": the site's dark bevelled button (#s01 .run / #m01 .run) with the gold label. The link is the full-height
   hit area; the visible button sits inside it. The ramp reaches deep brown by 45% so the gold label clears 4.5:1. */
.sbar__cta{position:absolute;top:calc(var(--sbar-cy) - var(--sbar-hit) / 2);height:var(--sbar-hit);display:flex;align-items:center}
.sbar__canvas--d .sbar__cta{right:165px}
/* The Figma hover (base.css "CTA glow"; the link is the hover/focus/press target, the face takes the state): border
   #ab9589 -> #d1b8a3, every stop of the ramp lifted as Figma lifts its two, the band re-derived for this wider box (124.5deg).
   The bar clips to its 64px (overflow:hidden), 14px above and below the button: the glow is drawn tighter here (12px halo,
   short warm drop, a quarter of the vertical lean) so it has faded out inside the bar instead of being cut at its edge
   (measured Sep 27: < 1% at the edge rows); the bar itself is unchanged.
   Sep 27 (owner: "a stroke which shows up and then it goes away"): that 12px halo with a 1px spread at .8 drew a gold rim
   hugging the face, a second outline more than a glow (.45 at the edge, gone within ~8px). Now a feathered one: 14px, tucked
   2px under the face (.31 at the edge, a softer, longer falloff; at the bar's edge rows ~1.5 levels, half the rim's), opening with --cta-h
   like every CTA's (base.css "CTA glow"). */
.sbar__btn{position:relative;display:flex;align-items:center;justify-content:center;height:36px;padding:0 19.594px;overflow:hidden;isolation:isolate;
  border:1.4px solid;border-radius:5px;border-color:rgb(calc(171 + 38 * var(--cta-b)) calc(149 + 35 * var(--cta-b)) calc(137 + 26 * var(--cta-b)));
  background:var(--cta-light),var(--cta-sheen),linear-gradient(119.05deg,rgba(179,159,149,var(--cta-h)) 0%,rgba(80,67,63,var(--cta-h)) 45%,rgba(60,50,50,var(--cta-h)) 100%),
    linear-gradient(119.05deg,#ab9589 0%,#3a2c28 45%,#261b1b 100%);background-blend-mode:overlay,soft-light,normal,normal;--cta-sa:124.5deg;--cta-lr:40px;
  --cta-dy:3px;--cta-db:8px;--cta-gb:14px;--cta-gs:-2px;
  --cta-glow:0 calc(var(--cta-dy) * (.4 + .6 * var(--cta-h))) calc(var(--cta-db) * (.6 + .4 * var(--cta-h))) 0 rgba(var(--cta-dc),calc(var(--cta-da) * var(--cta-h))),
    var(--cta-gx) calc(var(--cta-gy) * .25) calc(var(--cta-gb) * (.7 + .3 * var(--cta-h))) calc(var(--cta-gs) - .3 * var(--cta-gb) * (1 - var(--cta-h))) rgba(var(--cta-gc),calc(var(--cta-ga) * var(--cta-h)));
  box-shadow:inset 1.12px 1.12px 2.239px 0 #ecded7,inset -1.12px -1.12px 4.199px 0 rgba(18,10,9,.8),var(--cta-glow)}
.sbar__btn::before,.sbar__btn::after{content:"";position:absolute;inset:0;mix-blend-mode:overlay;background-size:173.217px 173.217px;pointer-events:none}
.sbar__btn::before{opacity:.45}
.sbar__btn::after{opacity:.25}
html.rv-late .sbar__btn::before{background-image:url(../assets/shared/btn-noise-1.webp)}
html.rv-late .sbar__btn::after{background-image:url(../assets/shared/btn-noise-2.webp)}
.sbar__label{position:relative;z-index:1;font-size:13.716px;line-height:normal;font-weight:400;white-space:nowrap;color:#f0d9a0;
  filter:drop-shadow(0 .56px 1.12px rgba(0,0,0,.25))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .sbar__label{color:transparent;background:linear-gradient(94deg,#ffe792 0%,#e6c38a 100%);-webkit-background-clip:text;background-clip:text}
}
@media (hover:hover) and (pointer:fine){
  .sbar__brand:hover{opacity:.75}
  .sbar__menu:hover{opacity:.6}
}
.sbar__menu:active{transform:scale(.94)}
.sbar__canvas--m .sbar__brand:active{opacity:.6;transition-duration:0ms}
/* Focus ring stays 2px on screen whatever the scale; the CTA's ring hugs the visible button, not the hit area */
@media (forced-colors:active){
  .sbar{border-bottom:1px solid CanvasText}
  .sbar__menu i{forced-color-adjust:none;background:ButtonText}
}

/* Reduced motion: a plain cross-fade of the panel and backdrop, nothing moves. */
@media (prefers-reduced-motion:reduce){
  /* sticky bar: opacity only */
  .sbar,.sbar.is-shown{transform:none}
  .sbar{transition:opacity 160ms var(--ease-fade),visibility 0s linear 160ms}
  .sbar.is-shown{transition:opacity 200ms var(--ease-fade),visibility 0s}
  .sbar__cta:active .sbar__btn,.sbar__menu:active{transform:none}
  /* the × stays a × while the sheet fades out */
  .mnav.is-closing .mnav__canvas--m .mnav__close i{transform:translateY(0) rotate(45deg) scaleX(1.0909)}
  .mnav.is-closing .mnav__canvas--m .mnav__close i+i{transform:translateY(0) rotate(-45deg) scaleX(1.0909)}
  @supports (rotate:0deg){
    .mnav.is-closing .mnav__canvas--m .mnav__close i{transform:none;translate:0 0;rotate:45deg;scale:1.0909 1}
    .mnav.is-closing .mnav__canvas--m .mnav__close i+i{transform:none;rotate:-45deg}
  }
  .mnav__canvas--m .mnav__cta:active{transform:none}
  .mnav__panel{clip-path:none;opacity:0;transition:opacity 200ms var(--ease-fade)}
  .mnav.is-open .mnav__panel{clip-path:none;opacity:1}
  .mnav__backdrop{transition-duration:200ms}
  .mnav__item,.mnav__group,.mnav__x{opacity:1;transform:none;transition:none}
  .mnav.is-closing .mnav__item,.mnav.is-closing .mnav__group,.mnav.is-closing .mnav__x{transition:none}
  .mnav.is-closing .mnav__panel,.mnav.is-closing .mnav__backdrop{transition-duration:160ms}
  .mnav__close:active{transform:none}
}

/* The links flip on hover like the footer's (js/flip.js; shared rules in base.css): no underline on the flipped ones, the
   legal links roll in at full ink. */
.mnav a.is-flip:hover{text-decoration-color:transparent}
.mnav__legal a.is-flip{--flip-ink:#261b1b}
/* Oct 14 (owner: the logo "too small and insignificant"): the lockup at 32 on the desktop canvases (28 on the phone's),
   as in the hero's header (s01.css, m01.css) */
.sbar__logo,.mnav__canvas--d .mnav__logo{width:147.53px;height:32px}
.sbar__canvas--m .sbar__logo,.mnav__canvas--m .mnav__logo{width:129.09px;height:28px}

/* Sep 28: the sheet's paper as Shopify Editions' overlay wipe (js/nav-wipe.js): while it runs a canvas under the contents
   is the paper, and the sheet's own paper, divider and top-down clip stand aside */
.mnav__wipe{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:none}
.mnav__panel.is-wiping{background:transparent;border-bottom-color:transparent;clip-path:none!important;transition:none;isolation:isolate}
.mnav__panel.is-wiping .mnav__wipe{display:block}