/* ═══════════════════════════════════════════════════════════
   SITE NAVIGATION · V12
   ≥ 80em (1280px at default text size): persistent left sidebar.
   < 80em: compact sticky header + labelled Menu button + drawer.
   < 37.5em (600px): phone header, full-width drawer, bottom call bar.
   Breakpoints use em so a larger browser text size moves visitors
   to the roomier compact layout instead of squeezing the sidebar.
   Every class is prefixed sn- so nothing collides with page styles.
   ═══════════════════════════════════════════════════════════ */

:root{
  --sn-cream:#FBF5DD;
  --sn-surface:#FFFCF2;
  --sn-sage:#A6CDC6;
  --sn-sage-tint:#EDF4F2;
  --sn-sage-deep:#7FB3A9;
  --sn-teal:#16404D;
  --sn-teal-deep:#0E2C36;
  --sn-teal-70:#4A6771;
  --sn-gold:#DDA853;
  --sn-hairline:#E9E0C4;
  --sn-border:#DCD1AC;
  --sn-hover:rgba(166,205,198,.24);
  --sn-active:rgba(166,205,198,.52);
  --sn-display:'EB Garamond',Georgia,'Times New Roman',serif;
  --sn-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sn-ease:cubic-bezier(.22,1,.36,1);
  --sn-side-w:16rem;
  --sn-bar-h:3.75rem;
  --site-nav-offset:3.75rem;   /* height of whatever sticks to the top; JS measures the real value */
}
@media (min-width:37.5em){:root{--sn-bar-h:4.25rem;--site-nav-offset:4.25rem}}
@media (min-width:80em){:root{--site-nav-offset:0px}}

/* Offset in-page jumps and focus scrolling by the sticky header. This sits on the
   content (not html scroll-padding) so focusing the header itself never jumps the page. */
main,main *,footer,footer *{scroll-margin-top:calc(var(--site-nav-offset) + 12px)}
html.sn-locked{overflow:hidden}
@media (max-width:79.99em){
  html{scrollbar-gutter:stable}
  /* keep content clear of the notch when a phone is in landscape */
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}

.sn-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Monogram (same drawing as the rest of the site) ── */
.sn-mono{display:block;flex:none;width:2.625rem;height:2.625rem}
.sn-mono .ring{fill:none;stroke:var(--sn-gold);stroke-width:1.6}
.sn-mono .mm-letter{stroke:var(--sn-teal)}
.sn-mono .mm-spine{stroke:var(--sn-gold)}
.sn-mono .mm-serif{stroke:var(--sn-teal);stroke-width:1.7;stroke-linecap:butt}

/* ── Identity text ── */
.sn-name{display:block;font-family:var(--sn-display);font-size:1.25rem;font-weight:500;line-height:1.12;letter-spacing:.005em;color:var(--sn-teal)}
.sn-role{display:block;font-family:var(--sn-body);font-size:.8125rem;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--sn-teal-70);margin-top:.2rem}

/* ── Icons ── */
.sn-ico{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:.5rem;color:currentColor;
  transition:background-color .18s var(--sn-ease),color .18s var(--sn-ease),border-color .18s var(--sn-ease)}
.sn-ico svg,.sn-btn-ico{display:block;width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── Nav links (shared by sidebar and drawer) ── */
.sn-list{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.sn-list li{margin:0;padding:0}
.sn-list li::before{content:none}
.sn-link{display:flex;align-items:center;gap:.75rem;min-height:2.75rem;padding:.375rem .75rem .375rem .375rem;border-radius:.625rem;
  font-family:var(--sn-body);font-size:.9375rem;font-weight:500;line-height:1.3;color:var(--sn-teal-70);text-decoration:none;
  transition:background-color .18s var(--sn-ease),color .18s var(--sn-ease)}
@media (hover:hover){.sn-link:hover{background:var(--sn-hover);color:var(--sn-teal)}}
.sn-link:focus-visible{outline:2px solid var(--sn-teal);outline-offset:2px;border-radius:.625rem;background:var(--sn-hover);color:var(--sn-teal)}
.sn-link[aria-current]{background:var(--sn-active);color:var(--sn-teal);font-weight:600}
.sn-link[aria-current] .sn-ico{background:var(--sn-teal);color:var(--sn-cream)}

/* ── Primary action ── */
.sn-cta{display:flex;align-items:center;justify-content:center;min-height:2.875rem;padding:.75rem 1.125rem;border:1px solid var(--sn-teal);
  border-radius:.625rem;background:var(--sn-teal);color:var(--sn-cream);font-family:var(--sn-body);font-size:.9375rem;font-weight:600;
  line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap;transition:background-color .18s var(--sn-ease),border-color .18s var(--sn-ease)}
.sn-cta:hover{background:var(--sn-teal-deep);border-color:var(--sn-teal-deep);color:var(--sn-cream)}
.sn-cta:focus-visible{outline:2px solid var(--sn-teal);outline-offset:3px;border-radius:.625rem}

.sn-alt{margin:.625rem 0 0;font-family:var(--sn-body);font-size:.8125rem;line-height:1.5;color:var(--sn-teal-70);text-align:center}
.sn-alt a{display:inline-flex;align-items:center;min-height:1.5rem;color:var(--sn-teal);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--sn-gold);text-decoration-thickness:1.5px;text-underline-offset:3px}
.sn-alt a:focus-visible,.sn-meta a:focus-visible,.sn-id:focus-visible,.sn-bar-id:focus-visible{outline:2px solid var(--sn-teal);outline-offset:2px;border-radius:.375rem}

.sn-status{display:flex;align-items:flex-start;gap:.625rem;margin:0;font-family:var(--sn-body);font-size:.8125rem;line-height:1.5;color:var(--sn-teal-70)}
.sn-dot{flex:none;width:.4375rem;height:.4375rem;margin-top:.42em;border-radius:50%;background:var(--sn-sage-deep);box-shadow:0 0 0 3px rgba(166,205,198,.38)}

.sn-meta{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin:0;font-family:var(--sn-body)}
.sn-meta a{display:inline-flex;align-items:center;min-height:1.75rem;font-size:.8125rem;font-weight:500;color:var(--sn-teal-70);text-decoration:none}
.sn-meta a:hover{color:var(--sn-teal);text-decoration:underline;text-decoration-color:var(--sn-gold);text-underline-offset:3px}

/* ═══ DESKTOP SIDEBAR ═══ */
.sn-side{display:none}
@media (min-width:80em){
  body{padding-left:var(--sn-side-w)}
  .sn-bar,.sn-drawer{display:none!important}
  .sn-side{position:fixed;z-index:150;top:0;bottom:0;left:0;width:var(--sn-side-w);display:flex;flex-direction:column;
    padding:2rem 1rem 1.25rem;background:var(--sn-surface);border-right:1px solid var(--sn-hairline);
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .sn-id{display:flex;flex-direction:column;align-items:flex-start;gap:.875rem;padding:.25rem .5rem;text-decoration:none;color:var(--sn-teal);border-radius:.5rem}
  .sn-side .sn-mono{width:3.25rem;height:3.25rem}
  .sn-side .sn-name{font-size:1.4375rem}
  .sn-rule{display:block;width:1.25rem;height:1.5px;margin:1.125rem .5rem 1rem;background:var(--sn-gold)}
  .sn-side .sn-status{padding:0 .5rem}
  .sn-side .sn-nav{margin-top:1.75rem}
  .sn-side .sn-actions{margin-top:1.5rem;padding:1.25rem .375rem 0;border-top:1px solid var(--sn-hairline)}
  .sn-side .sn-meta{margin-top:auto;padding:1.5rem .5rem 0}

  /* Page layouts now get 256px less width. Re-apply the site's own
     narrower-desktop refinements where the content column is ≤1183px. */
  .rail{top:3rem}
}
@media (min-width:80em) and (max-width:89.99em){
  .hero-grid{gap:48px}
  .body-grid{gap:44px}
  .break,.break-wide{max-width:100%}
  .expand-inner{grid-template-columns:minmax(0,1fr)}
  .frame .hero{grid-template-columns:minmax(0,1fr)}
  .frame .prototype-tag{max-width:100%}
  .workspace{grid-template-columns:200px minmax(0,1fr)}
}
/* Shorter laptop screens: tighten the stack so the menu and the call
   button stay in view; anything left still scrolls inside the sidebar. */
@media (min-width:80em) and (max-height:47.5em){
  .sn-side{padding-top:1.25rem}
  .sn-id{flex-direction:row;align-items:center;gap:.75rem}
  .sn-side .sn-mono{width:2.75rem;height:2.75rem}
  .sn-side .sn-name{font-size:1.25rem}
  .sn-rule{margin:.875rem .5rem .75rem}
  .sn-side .sn-nav{margin-top:1rem}
  .sn-side .sn-list{gap:.125rem}
  .sn-side .sn-actions{margin-top:1rem;padding-top:1rem}
  .sn-side .sn-meta{padding-top:1rem}
}

/* ═══ COMPACT HEADER (tablet + phone) ═══ */
.sn-bar{position:sticky;top:0;z-index:150;display:flex;align-items:center;gap:.75rem;min-height:var(--sn-bar-h);
  padding:calc(.5rem + env(safe-area-inset-top)) 20px .5rem;background:rgba(251,245,221,.97);border-bottom:1px solid var(--sn-hairline)}
@media (min-width:768px){.sn-bar{padding-left:40px;padding-right:40px}}
@media (min-width:1024px){.sn-bar{padding-left:64px;padding-right:64px}}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .sn-bar{background:rgba(251,245,221,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
.sn-bar-id{display:flex;align-items:center;gap:.625rem;flex:1 1 auto;min-width:0;min-height:2.75rem;text-decoration:none;color:var(--sn-teal);border-radius:.375rem}
.sn-bar .sn-mono{width:2.25rem;height:2.25rem}
.sn-bar-text{min-width:0}
.sn-bar .sn-name{font-size:1.1875rem}
.sn-bar .sn-role{font-size:.75rem;margin-top:.1rem}
.sn-role-more{display:none}
.sn-bar{flex-wrap:wrap;row-gap:.375rem}
.sn-bar-actions{display:flex;align-items:center;gap:.5rem;flex:none;margin-left:auto}
.sn-bar .sn-cta{display:none;min-height:2.75rem;padding:.625rem 1rem}

.sn-menu-btn,.sn-close{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:2.75rem;min-height:2.75rem;
  padding:.5rem .875rem .5rem .75rem;border:1px solid var(--sn-border);border-radius:.625rem;background:var(--sn-surface);color:var(--sn-teal);
  font-family:var(--sn-body);font-size:.9375rem;font-weight:600;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .18s var(--sn-ease),border-color .18s var(--sn-ease),color .18s var(--sn-ease)}
@media (hover:hover){.sn-menu-btn:hover,.sn-close:hover{border-color:var(--sn-teal);background:#fff}}
.sn-menu-btn:focus-visible,.sn-close:focus-visible{outline:2px solid var(--sn-teal);outline-offset:2px;border-radius:.625rem}
.sn-menu-btn[aria-expanded="true"]{background:var(--sn-teal);border-color:var(--sn-teal);color:var(--sn-cream)}

.sn-progress{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--sn-gold);transition:width 80ms linear}

@media (min-width:37.5em){
  .sn-bar{gap:1rem}
  .sn-bar .sn-mono{width:2.5rem;height:2.5rem}
  .sn-bar .sn-name{font-size:1.25rem}
  .sn-role-more{display:inline}
  .sn-bar .sn-cta{display:flex}
}

/* ═══ DRAWER ═══ */
.sn-drawer{position:fixed;inset:0;z-index:10000;visibility:hidden;pointer-events:none;transition:visibility 0s linear .26s}
.sn-drawer.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
.sn-backdrop{position:absolute;inset:0;background:rgba(14,44,54,.42);opacity:0;touch-action:none;transition:opacity .26s var(--sn-ease)}
.sn-drawer.is-open .sn-backdrop{opacity:1}
.sn-panel{position:absolute;top:0;right:0;bottom:0;width:min(26rem,calc(100% - 3rem));display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) max(1.5rem,env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) 1.5rem;
  background:var(--sn-cream);box-shadow:-18px 0 48px rgba(14,44,54,.16);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .26s var(--sn-ease)}
.sn-drawer.is-open .sn-panel{transform:none}
.sn-panel:focus{outline:none}
.sn-panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--sn-bar-h);
  padding:.5rem 0;border-bottom:1px solid var(--sn-hairline)}
.sn-panel-id{display:flex;align-items:center;gap:.625rem;min-width:0;color:var(--sn-teal)}
.sn-panel-id .sn-mono{width:2.25rem;height:2.25rem}
.sn-panel-id .sn-name{font-size:1.1875rem}
.sn-panel-id .sn-role{font-size:.75rem}
.sn-drawer .sn-nav{margin-top:1.25rem}
.sn-drawer .sn-list{gap:.375rem}
.sn-drawer .sn-link{min-height:3.5rem;gap:1rem;padding:.5rem .75rem .5rem .5rem;font-family:var(--sn-display);font-size:1.625rem;
  font-weight:500;line-height:1.15;color:var(--sn-teal)}
.sn-drawer .sn-link[aria-current]{font-weight:500}
.sn-drawer .sn-ico{width:2.5rem;height:2.5rem;border-radius:.625rem;background:var(--sn-surface);border:1px solid var(--sn-hairline)}
.sn-drawer .sn-ico svg{width:1.375rem;height:1.375rem}
.sn-drawer .sn-link[aria-current] .sn-ico{border-color:var(--sn-teal)}
.sn-panel-foot{margin-top:auto;padding-top:1.75rem}
.sn-drawer .sn-cta{width:100%;min-height:3.25rem;font-size:1rem}
.sn-drawer .sn-alt{font-size:.9375rem;margin-top:.375rem}
.sn-drawer .sn-alt a{min-height:2.75rem}
.sn-drawer .sn-status{margin-top:1rem;font-size:.875rem}
.sn-drawer .sn-meta{margin-top:.75rem}
.sn-drawer .sn-meta a{min-height:2.75rem;font-size:.9375rem}

@media (max-width:37.49em){
  .sn-panel{width:100%;box-shadow:none;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
}
@media (min-width:37.5em){.sn-panel-id .sn-mono{width:2.5rem;height:2.5rem}.sn-panel-id .sn-name{font-size:1.25rem}}
.sn-panel-head{flex-wrap:wrap;row-gap:.375rem}
.sn-panel-id .sn-role-more{display:none}
.sn-close{margin-left:auto}
/* Very narrow at the current text size (e.g. 320px, 400% zoom, or a phone set to
   very large text): drop the role line so name and buttons never collide. */
@media (max-width:20em){
  .sn-bar .sn-role,.sn-panel-id .sn-role{display:none}
  .sn-bar .sn-mono,.sn-panel-id .sn-mono{width:1.75rem;height:1.75rem}
}

/* Large text: long email addresses wrap instead of pushing past the screen edge */
.contact a[href^="mailto:"],.contact-actions a[href^="mailto:"],.direct-contact a[href^="mailto:"]{overflow-wrap:anywhere}
@media (max-width:900px){.contact-grid-simple{grid-template-columns:minmax(0,1fr)}}

/* ═══ HOME OVERVIEW CARDS ═══ */
.sn-overview{margin-top:2.5rem;container-type:inline-size;container-name:snov}
.sn-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
.sn-cards li{display:flex;margin:0;padding:0}
.sn-cards li::before{content:none}
.sn-card{position:relative;flex:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:1rem;row-gap:.25rem;align-items:start;align-content:start;
  padding:1.125rem 1rem 1.125rem 1rem;border:1px solid var(--sn-border);border-radius:.875rem;background:var(--sn-surface);color:var(--sn-teal);
  text-decoration:none;transition:border-color .18s var(--sn-ease),box-shadow .18s var(--sn-ease)}
.sn-card .sn-ico{grid-column:1;grid-row:1 / span 2;width:2.5rem;height:2.5rem;border-radius:.625rem;background:var(--sn-sage-tint);border:1px solid rgba(166,205,198,.7);color:var(--sn-teal)}
.sn-card-title{grid-column:2;grid-row:1;display:block;font-family:var(--sn-display);font-size:1.375rem;font-weight:500;line-height:1.2;color:var(--sn-teal)}
.sn-card-text{grid-column:2;grid-row:2;display:block;font-family:var(--sn-body);font-size:1rem;line-height:1.55;color:var(--sn-teal-70)}
.sn-card-go{grid-column:3;grid-row:1;display:block;color:var(--sn-gold);transition:transform .18s var(--sn-ease)}
.sn-card-go svg{display:block;width:1.25rem;height:1.25rem;margin-top:.2rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){
  .sn-card:hover{border-color:var(--sn-sage-deep);box-shadow:0 10px 28px rgba(22,64,77,.07)}
  .sn-card:hover .sn-ico{background:var(--sn-teal);border-color:var(--sn-teal);color:var(--sn-cream)}
  .sn-card:hover .sn-card-go{transform:translateX(4px)}
}
.sn-card:focus-visible{outline:2px solid var(--sn-teal);outline-offset:3px;border-radius:.875rem;border-color:var(--sn-sage-deep)}
@container snov (min-width:45rem){
  .sn-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .sn-card{grid-template-columns:minmax(0,1fr) auto;row-gap:.5rem;padding:1.375rem 1.375rem 1.5rem}
  .sn-card .sn-ico{grid-column:1;grid-row:1;margin-bottom:.5rem}
  .sn-card-title{grid-column:1 / -1;grid-row:2}
  .sn-card-text{grid-column:1 / -1;grid-row:3;font-size:.9375rem}
  .sn-card-go{grid-column:2;grid-row:1;align-self:start}
}

/* ═══ PHONE CALL BAR ═══
   Replaces the old always-on bar. It shows on phones only, sits above
   the home indicator, and steps aside while the menu is open, while
   someone is typing in a form, or while a contact section (which has
   its own call button) is on screen. */
@media (max-width:700px){body{padding-bottom:0}.sticky-call{display:none}}
@media (max-width:37.49em){
  body{padding-bottom:calc(5.25rem + env(safe-area-inset-bottom))}
  html{scroll-padding-bottom:calc(5.25rem + env(safe-area-inset-bottom))}
  .sticky-call{position:fixed;z-index:140;display:flex;align-items:center;justify-content:center;
    left:max(.75rem,env(safe-area-inset-left));right:max(.75rem,env(safe-area-inset-right));bottom:calc(.75rem + env(safe-area-inset-bottom));
    min-height:3.25rem;padding:.75rem 1.125rem;border-radius:.625rem;background:var(--sn-teal);color:var(--sn-cream);
    font-family:var(--sn-body);font-size:1rem;font-weight:700;line-height:1.2;text-decoration:none;box-shadow:0 10px 30px rgba(22,64,77,.22);
    transition:transform .22s var(--sn-ease),opacity .22s var(--sn-ease),visibility 0s linear 0s}
  .sticky-call:focus-visible{outline:2px solid var(--sn-cream);outline-offset:-6px;border-radius:.625rem}
  html.sn-locked .sticky-call,html.sn-typing .sticky-call,html.sn-in-contact .sticky-call{
    transform:translateY(calc(100% + 1.5rem));opacity:0;visibility:hidden;
    transition:transform .22s var(--sn-ease),opacity .22s var(--sn-ease),visibility 0s linear .22s}
}

/* Workspace documents on the executive support page: land below both sticky bars */
.sop-item{scroll-margin-top:calc(var(--site-nav-offset) + 76px)}
@media (max-width:760px){.sop-item{scroll-margin-top:calc(var(--site-nav-offset) + 70px)}}

@media (prefers-reduced-motion:reduce){
  .sn-drawer,.sn-panel,.sn-backdrop,.sticky-call,.sn-card,.sn-card-go,.sn-link,.sn-ico{transition-duration:0s!important;transition-delay:0s!important}
  .sn-card:hover .sn-card-go{transform:none}
}
@media print{.sn-side,.sn-bar,.sn-drawer,.sticky-call{display:none!important}body{padding:0!important}}