/* Visually hidden but accessible heading */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* put in assets/css/overrides.css (loaded after main.css) */
#header { 
  text-align: left;
  padding-left: 0;            /* remove left padding so it's truly flush */
}
#header .logo {
  display: block;
  margin: 0 !important;       /* no margin at all */
  padding: 0;
  width: clamp(160px, 28vw, 320px); /* adjust if needed */
  height: auto;
  filter: drop-shadow(0 1px 12px rgba(0,0,0,.35));
}

/* figtree: variable font (weights 100–900) */
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/Figtree-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/Figtree-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* set your site’s default sans stack */
:root {
  --font-sans: "Figtree", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* apply globally (HTML5 UP targets these) */
body, input, select, textarea {
  font-family: var(--font-sans) !important;
}

/* nice-looking defaults */
h1, h2, h3 { font-weight: 800; letter-spacing: 0.01em; }
p, li, input, textarea { font-weight: 400; }

/* (you can fine-tune weights anywhere: 300, 400, 600, 700, 800, etc.) */

/* keep this block aligned left under your (left-aligned) logo */
.hero-left { 
  text-align: left; 
  max-width: 36rem; 
}

/* strapline styling with your Figtree font in mind */
.strapline{
  margin: .25rem 0 1rem 0;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand-text, #fff);
  letter-spacing: 0.01em;
}

/* button spacing polish */
.hero-left .actions { margin-top: .25rem; }
.hero-left .actions li { margin-right: .5rem; }

/* Left-align header + remove logo margin completely */
#header { text-align: left; padding-left: 0; position: relative; }
#header .logo { display:block; margin:0 !important; padding:0; width: clamp(160px,28vw,320px); height:auto; }

/* Strapline */
.strapline { margin:.25rem 0 1rem 0; font-size:clamp(1.05rem,2.2vw,1.35rem); font-weight:500; line-height:1.35; max-width:36rem; }

/* ===== Modal (CSS-only fallback via :target + JS via .is-open) ===== */
.mc-modal{ position:fixed; inset:0; z-index:9999; display:none; place-items:center; background:rgba(0,0,0,.65); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.mc-modal:target, .mc-modal.is-open{ display:grid; }
.mc-modal__dialog{ width:min(960px,92vw); max-height:86vh; overflow:auto; background:rgba(20,20,22,.92); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:1rem 1rem 1.25rem; box-shadow:0 10px 40px rgba(0,0,0,.6); }
.mc-modal__header{ display:flex; align-items:center; justify-content:space-between; padding:.25rem .25rem .5rem; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:1rem; }
.mc-modal__title{ margin:0; font-size:clamp(1.05rem,2.2vw,1.35rem); font-weight:800; }
.mc-modal__close{ text-decoration:none; background:transparent; color:#fff; font-size:1.5rem; line-height:1; padding:.25rem .5rem; border-radius:8px; }
.mc-modal__close:hover{ background:rgba(255,255,255,.08); }
.mc-team-grid{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
.mc-team-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:.9rem; }
.mc-team-card__head{ display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:center; }
.mc-team-avatar{ width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; font-weight:800; font-size:1.15rem; color:#fff; }
.mc-team-name{ margin:0; font-weight:800; }
.mc-team-role{ margin:0; color:var(--brand-muted,#b8b8bd); font-size:.9rem; }
.mc-team-bio{ margin:.5rem 0 0; color:var(--brand-text,#e9e9ee); font-size:.95rem; line-height:1.45; }



/* ===== The Mad Chef palette ===== */
:root{
  --cream:     #e6d3b4;  /* filled (primary) */
  --pistachio: #dbddc6;  /* hover/fill for outline */
  --ink:       #000000;  /* text */
  --radius:    10px;     /* subtle, not pill */
  --bw:        2px;      /* border width */
}

/* Remove HTML5 UP's green accent everywhere (links, icons, etc.) */
a { color: var(--ink) !important; }
a:hover { color: var(--ink) !important; text-decoration: underline; }

/* Base button reset */
.button, a.button, input[type="button"], input[type="submit"]{
  border-radius: var(--radius);
  border-width: var(--bw);
  transition: background-color .2s, border-color .2s, color .2s, transform .12s;
  box-shadow: none !important; /* prevent any themed glow */
}

/* === PRIMARY (filled) — cream with black text === */
/* Also targets the template's green "Sign Up Now" submit button */
.button.primary,
a.button.primary,
input[type="submit"]{
  background: var(--cream) !important;
  border-color: var(--cream) !important;
  color: var(--ink) !important;
}
.button.primary:hover,
a.button.primary:hover,
input[type="submit"]:hover{
  background: #dcc7a3 !important;  /* slightly deeper cream on hover */
  border-color: #dcc7a3 !important;
  transform: translateY(-1px);
}
.button.primary:active,
a.button.primary:active,
input[type="submit"]:active{
  background: #cfb68c !important;
  border-color: #cfb68c !important;
  transform: none;
}

/* === OUTLINE (secondary) — black text, pistachio on hover === */
.button:not(.primary),
a.button:not(.primary),
input[type="button"]:not(.primary){
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.button:not(.primary):hover,
a.button:not(.primary):hover,
input[type="button"]:not(.primary):hover{
  background: var(--pistachio);
  border-color: var(--pistachio);
  color: var(--ink);
  transform: translateY(-1px);
}
.button:not(.primary):active,
a.button:not(.primary):active,
input[type="button"]:not(.primary):active{
  transform: none;
}

/* Disabled/inactive (cover both <a> and real buttons) */
.button[disabled], input[type="button"][disabled], input[type="submit"][disabled],
a.button.is-disabled, a.button[aria-disabled="true"]{
  background: rgba(0,0,0,.08) !important;
  border-color: rgba(0,0,0,.08) !important;
  color: rgba(0,0,0,.45) !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* CTA lists: remove bullets if you haven't already */
#header .actions, #header .icons { list-style: none; margin: 0; padding: 0; }
#header .actions li, #header .icons li { display: inline-block; margin-right: .6rem; }
#header .actions li:last-child, #header .icons li:last-child { margin-right: 0; }


/* Don't underline buttons (any state) */
a.button,
a.button:link,
a.button:visited,
a.button:hover,
a.button:active,
.button { 
  text-decoration: none !important;
  border-bottom: 0 !important; /* kills HTML5 UP's dotted underline */
}

/* Also keep social icon links clean */
#header .icons a,
#header .icons a:hover,
#header .icons a:focus {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* Only underline *normal* links, not buttons or icons */
a:not(.button):not(.icon):hover {
  text-decoration: underline;
}


/* Socials: subtle by default, pistachio on hover */
#header .icons{ list-style:none; margin:.5rem 0 0; padding:0; }
#header .icons li{ display:inline-block; margin-right:.75rem; }
#header .icons li:last-child{ margin-right:0; }

#header .icons a{
  color: var(--ink, #000);          /* black by default */
  background: none;
  border: 0 !important;             /* kill dotted underline */
  text-decoration: none !important; /* never underline icons */
  display: inline-flex;
  align-items: center;
  gap: .45rem;                      /* space if label is visible */
  padding: .35rem .4rem;            /* larger tap target */
  line-height: 1;
  opacity: .9;                      /* subtle by default */
  transition: color .2s ease, opacity .2s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}

#header .icons a:hover,
#header .icons a:focus{
  color: var(--pistachio, #dbddc6); /* pistachio highlight */
  opacity: 1;
  transform: translateY(-1px);
}

/* keyboard focus ring (accessible, subtle) */
#header .icons a:focus{
  outline: 2px solid color-mix(in oklab, var(--pistachio, #dbddc6) 70%, #000);
  outline-offset: 2px;
  border-radius: 8px;
}

/* icon size (Font Awesome pseudo-element) */
#header .icons .icon:before{ font-size: 1.25rem; }

/* keep labels for screen readers but hide visually */
#header .icons .label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* If you ever want visible text labels, add class="icons icons--text" to the UL */
#header .icons.icons--text .label{
  position: static; width:auto; height:auto; margin:0; clip:auto; white-space:normal;
  font-size:.95rem;
}

/* === KIT submit button: cream bg + BLACK text (incl. inner <span>) === */
.formkit-form[data-uid="3f855591e8"] .formkit-submit{
  background:#e6d3b4 !important;
  border-color:#e6d3b4 !important;
  color:#000 !important;
}
.formkit-form[data-uid="3f855591e8"] .formkit-submit > span{
  color:#000 !important;
}
.formkit-form[data-uid="3f855591e8"] .formkit-submit .formkit-spinner > div{
  background-color:#000 !important; /* visible on cream */
  opacity:.35;
}
/* nice hover/active */
.formkit-form[data-uid="3f855591e8"] .formkit-submit:hover{
  background:#dcc7a3 !important; border-color:#dcc7a3 !important;
}
.formkit-form[data-uid="3f855591e8"] .formkit-submit:active{
  background:#cfb68c !important; border-color:#cfb68c !important;
}

/* === Modal close (×): make it visible on dark header === */
#subscribe-modal .mc-modal__close{
  color:#fff !important;                /* or try pistachio: #dbddc6 */
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  width:36px; height:36px;
  display:inline-grid; place-items:center;
  border-radius:10px;
}
#subscribe-modal .mc-modal__close:hover{ background:rgba(255,255,255,.18); }
#subscribe-modal .mc-modal__close:focus{ outline:2px solid #dbddc6; outline-offset:2px; }

/* subscribe modal close button — tighter & centered */
#subscribe-modal .mc-modal__close{
  box-sizing:border-box;
  width:26px; height:26px;          /* down from 36px */
  padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1;    /* centers the × */
  color:#fff !important;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:4px;
}
#subscribe-modal .mc-modal__close:hover{ background:rgba(255,255,255,.18); }
#subscribe-modal .mc-modal__close:focus{ outline:2px solid #dbddc6; outline-offset:2px; }

/* --- Button padding + touch targets (global) --- */
.button,
a.button,
input[type="button"],
input[type="submit"]{
  box-sizing: border-box;
  min-height: 44px;           /* comfortable tap target */
  line-height: 1.2;
  padding-block: 10px;        /* top/bottom */
  padding-inline: 16px;       /* left/right */
  text-align: center;         /* keep text centered when full-width */
  white-space: normal;        /* allow wrap on narrow screens */
}

/* Keep primary/outline colors from earlier but ensure padding persists on hover/active */
.button:hover,
a.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover{
  padding-block: 10px;
  padding-inline: 16px;
}

/* --- Stack the CTA buttons nicely on mobile --- */
@media (max-width: 560px){
  /* if you used id="mc-actions" as we did earlier */
  #mc-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #mc-actions > li{ margin: 0; display: block; }
  #mc-actions a.button{ width: 100%; }

  /* also catch the default HTML5 UP actions list if the id changed */
  #header .actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
  }
  #header .actions li{ margin: 0; }
  #header .actions .button{ width: 100%; }
}

/* --- Kit submit button: ensure padding inside the inner <span> too --- */
.formkit-form[data-uid="3f855591e8"] .formkit-submit{
  min-height: 44px;
  padding-block: 10px !important;
  padding-inline: 16px !important;
}
.formkit-form[data-uid="3f855591e8"] .formkit-submit > span{
  padding: 0 !important;   /* Kit adds its own; zero it so outer padding rules above apply */
}

/* 1) Center text INSIDE every button */
.button,
a.button,
input[type="button"],
input[type="submit"]{
  display: inline-flex;              /* use flex so content centers perfectly */
  align-items: center;               /* vertical center */
  justify-content: center;           /* horizontal center */
  line-height: 1.1;                  /* avoid extra top space from font metrics */
  padding-block: 10px;               /* keep your padding from earlier */
  padding-inline: 16px;
  box-sizing: border-box;
}

/* Keep the same centering on hover/active (some themes tweak line-height) */
.button:hover,
a.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:active,
a.button:active,
input[type="button"]:active,
input[type="submit"]:active{
  line-height: 1.1;
}

/* 2) Align the whole CTA row on one baseline/center (desktop) */
#mc-actions,
#header .actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;               /* centers the buttons vertically in the row */
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* If your theme keeps inline-block <li>, ensure middle alignment as fallback */
#mc-actions > li,
#header .actions > li{
  display: inline-block;
  vertical-align: middle;            /* fallback if flex fails */
  margin: 0 .6rem .6rem 0;
}
#mc-actions > li:last-child,
#header .actions > li:last-child{ margin-right: 0; }

/* 3) Make the Kit submit button use the same centering */
.formkit-form[data-uid="3f855591e8"] .formkit-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1 !important;
  min-height: 44px;
  padding-block: 10px !important;
  padding-inline: 16px !important;
}
.formkit-form[data-uid="3f855591e8"] .formkit-submit > span{
  display: inline-flex;              /* remove weird inline text offset */
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

/* --- Fix vertical centering for site CTAs (Watch Trailer, Instagram, etc.) --- */
/* Highest specificity on the header actions so we beat the theme */
#header .actions .button,
#mc-actions .button,
.button,
a.button,
input[type="button"],
input[type="submit"]{
  /* kill theme’s fixed height/line-height */
  height: auto !important;
  line-height: 1 !important;

  /* use flex to center content perfectly */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* consistent padding / tap target */
  padding-block: 10px !important;   /* top/bottom */
  padding-inline: 16px !important;  /* left/right */
  min-height: 44px;                 /* mobile-friendly */
  box-sizing: border-box;
}

/* If any inner spans are present, make sure they don't reintroduce weird line-height */
#header .actions .button > *,
#mc-actions .button > *{
  line-height: 1 !important;
}

/* Keep hover/active from changing the vertical metrics */
#header .actions .button:hover,
#mc-actions .button:hover,
#header .actions .button:active,
#mc-actions .button:active{
  line-height: 1 !important;
  transform: none; /* comment out if you want hover lift */
}

/* Optional: if one button still looks a hair high/low in iOS Safari */
@supports (-webkit-touch-callout: none) {
  #header .actions .button,
  #mc-actions .button{ padding-block: 11px !important; }
}

/* === Mobile: stack CTAs 1-per-line (wins over desktop flex) === */
@media (max-width: 600px){
  /* switch list to grid so spacing is tidy */
  #mc-actions,
  #header .actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .6rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }

  /* make each item & button fill the width */
  #mc-actions > li,
  #header .actions > li{
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
  }

  #mc-actions .button,
  #header .actions .button{
    width: 100% !important;
    justify-content: center !important; /* keep text centered */
  }
}

/* ===== Footer socials: circular translucent chips + pistachio hover ===== */
:root{
  --cream:     #e6d3b4;
  --pistachio: #dbddc6;
  --ink:       #000;
  --icon-diam: 42px;   /* circle size (try 40–48) */
  --icon-size: 18px;   /* FontAwesome glyph size */
}

/* layout */
#footer .icons{
  list-style:none; margin:.5rem 0 0; padding:0;
  display:flex; gap:.7rem; justify-content:left; flex-wrap:wrap;
}

/* make each link a perfect circle with contrasty bg */
#footer .icons a{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--icon-diam); height:var(--icon-diam);
  border-radius:50%;
  text-decoration:none !important; border:0 !important;

  /* readable over any background */
  background: rgba(0,0,0,.35);              /* translucent dark chip */
  color:#fff !important;                    /* white icon by default */
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  backdrop-filter: blur(2px) saturate(110%); /* graceful if supported */

  transition: background-color .2s ease, color .2s ease,
              transform .12s ease, box-shadow .2s ease;
}

/* icon size (Font Awesome pseudo-element) */
#footer .icons .icon:before{
  font-size: var(--icon-size);
  line-height: 1;                           /* avoid vertical drift */
}

/* hover/focus: pistachio chip + black icon */
#footer .icons a:hover,
#footer .icons a:focus{
  background: rgba(219,221,198,.92);        /* pistachio with opacity */
  color: var(--ink) !important;             /* black glyph on hover */
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
}

/* keyboard focus ring (a11y) */
#footer .icons a:focus-visible{
  outline: 2px solid rgba(219,221,198,.95);
  outline-offset: 3px;
}

/* active press */
#footer .icons a:active{ transform:none; }

/* hide visual labels but keep screen reader text */
#footer .icons .label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

:root{ --cream:#e6d3b4; --pistachio:#dbddc6; --ink:#000; }

/* A) Top-align the text column so name/role/bio sit higher */
#team-modal .team-slide{ align-items: flex-start !important; }

/* B) Controls: outlined by default, cream on hover */
#team-modal .team-controls .button{
  display: inline-flex; align-items:center; gap:.5rem;
  background: transparent !important;
  color: var(--pistachio) !important;
  border: 1.5px solid var(--pistachio) !important;
  border-radius: 10px; box-shadow:none;
}
#team-modal .team-controls .button svg{ display:block; }
#team-modal .team-controls .button:hover,
#team-modal .team-controls .button:focus{
  background: var(--cream) !important;
  border-color: var(--cream) !important;
  color: var(--ink) !important;
}

/* C) Thumbs: clean border, pistachio hover/active (no weird green/shadow) */
#team-modal .team-thumb{
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: none !important;
}
#team-modal .team-thumb:hover{
  border-color: var(--pistachio) !important;
  box-shadow: 0 0 0 2px rgba(219,221,198,.55);
  transform: translateY(-1px);
}
#team-modal .team-thumb.is-active{
  border-color: var(--pistachio) !important;
  box-shadow: 0 0 0 2px rgba(219,221,198,.75);
}

/* D) Ensure role line is readable and compact */
#team-modal .team-role{
  color: var(--pistachio) !important;
  margin: .15rem 0 .4rem !important;
  font-weight: 700;
}

/* E) (If any stray “?” came from special dashes) normalize titles */
#team-modal .team-name, #team-modal .team-role, #team-modal .team-bio{
  font-variant-ligatures: none;
}

/* Team thumbnails */
#team-modal .team-thumbs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
#team-modal .team-thumb{
  width:70px; height:70px; border-radius:10px; overflow:hidden; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); box-shadow:none;
  transition:transform .12s, box-shadow .2s, border-color .2s;
}
#team-modal .team-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
#team-modal .team-thumb:hover{ border-color:#dbddc6; box-shadow:0 0 0 2px rgba(219,221,198,.55); transform:translateY(-1px); }
#team-modal .team-thumb.is-active{ border-color:#dbddc6; box-shadow:0 0 0 2px rgba(219,221,198,.75); }


/* Meet the Team: Prev/Next — outline default, cream on interaction */
#team-modal .team-controls .button,
#team-modal .team-controls .button.primary{
  background: transparent !important;
  color: var(--pistachio) !important;
  border: 1.5px solid var(--pistachio) !important;
  border-radius: 10px;
  box-shadow: none !important;
}

/* Hover / Focus / Active (touch) = cream bg + BLACK text/icons */
#team-modal .team-controls .button:hover,
#team-modal .team-controls .button:focus,
#team-modal .team-controls .button:active{
  background: var(--cream) !important;
  border-color: var(--cream) !important;
  color: var(--ink) !important; /* <-- text color */
}

/* Ensure inner span & SVG inherit the black on interaction */
#team-modal .team-controls .button:hover > span,
#team-modal .team-controls .button:focus > span,
#team-modal .team-controls .button:active > span{
  color: var(--ink) !important;
}
#team-modal .team-controls .button svg{
  display: block;
}
#team-modal .team-controls .button:hover svg,
#team-modal .team-controls .button:focus svg,
#team-modal .team-controls .button:active svg{
  color: var(--ink) !important; /* arrows use currentColor */
}

/* Optional: subtle press feedback */
#team-modal .team-controls .button:active{
  transform: translateY(0); /* keep steady row */
}


:root{ --cream:#e6d3b4; --pistachio:#dbddc6; --ink:#000; }

/* initial state (before we add .is-in via JS) */
.strapline--anim .strapline-head,
.strapline--anim .strapline-sub{
  opacity: 0;
  transform: translateY(8px);
  will-change: transform, opacity;
}
.strapline--anim .strapline-head{
  position: relative;
}
.strapline--anim .strapline-head::after{
  content:"";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 3px;
  width: 100%;
  background: var(--cream);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
}

/* when activated */
.strapline--anim.is-in .strapline-head{
  animation: mc-fade-up 520ms cubic-bezier(.2,.8,.2,1) forwards;
}
.strapline--anim.is-in .strapline-head::after{
  animation: mc-underline 600ms cubic-bezier(.2,.8,.2,1) 200ms forwards;
}
.strapline--anim.is-in .strapline-sub{
  animation: mc-fade-up 520ms cubic-bezier(.2,.8,.2,1) 120ms forwards;
}

/* keyframes */
@keyframes mc-fade-up{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: translateY(0); }
}
@keyframes mc-underline{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}

/* accessibility: honor prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .strapline--anim .strapline-head,
  .strapline--anim .strapline-sub{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
  .strapline--anim .strapline-head::after{ transform: none !important; }
}


/* More space above the tagline (between logo and strapline) */
.strapline{ margin-top: clamp(1.1rem, 2.5vw, 1.9rem); }

/* Slight weight contrast: strong part a bit bolder than the rest */
.strapline-head{ font-weight: 700; }          /* rest of the line */
.strapline-strong{ font-weight: 800; position: relative; }

/* Move the underline to only the strong part */
.strapline--anim .strapline-strong::after{
  content:"";
  position:absolute; left:0; bottom:-6px; height:3px; width:100%;
  background: var(--cream); border-radius:2px;
  transform: scaleX(0); transform-origin:left;
}

/* Keep the existing fade-up; trigger underline on reveal */
.strapline--anim .strapline-head,
.strapline--anim .strapline-sub{ opacity:0; transform:translateY(8px); }
.strapline--anim.is-in .strapline-head{ animation: mc-fade-up 520ms cubic-bezier(.2,.8,.2,1) forwards; }
.strapline--anim.is-in .strapline-sub{  animation: mc-fade-up 520ms cubic-bezier(.2,.8,.2,1) 120ms forwards; }
.strapline--anim.is-in .strapline-strong::after{ animation: mc-underline 600ms cubic-bezier(.2,.8,.2,1) 200ms forwards; }

/* Keyframes (reuse if you already added them) */
@keyframes mc-fade-up{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes mc-underline{ from{transform:scaleX(0)} to{transform:scaleX(1)} }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .strapline--anim .strapline-head,.strapline--anim .strapline-sub{ opacity:1; transform:none; animation:none; }
  .strapline--anim .strapline-strong::after{ transform:none; }
}

/* Mobile: let content flow; don't fix the footer */
@media (max-width: 600px){
  #footer{
    position: static !important;   /* was fixed/absolute in the theme */
    inset: auto !important;
    margin-top: 1rem;              /* breathing room above footer */
  }
  #wrapper{
    min-height: auto !important;   /* stop forcing 100vh */
    padding-bottom: 0 !important;  /* no artificial bottom padding */
    display: block !important;     /* disable vertical centering on small screens */
  }
}

:root{ --cream:#e6d3b4; --pistachio:#dbddc6; --ink:#000; }

/* Nickname row */
#team-modal .team-nick{
  display:flex; align-items:center; gap:.45rem;
  margin:.15rem 0 .55rem;
}
#team-modal .team-nick__label{
  color: var(--pistachio);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
#team-modal .team-nick__value{
  display:inline-block;
  font-weight: 800;
  color: var(--ink);                 /* black text */
  background: var(--cream);          /* cream chip */
  padding: .15rem .5rem;
  border-radius: .5rem;
  line-height: 1.1;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
}

/* Keep the meta column nicely top-aligned (you already set this earlier) */
#team-modal .team-slide{ align-items: flex-start; }


:root{ --cream:#e6d3b4; --pistachio:#dbddc6; --ink:#000; }

/* Header CTAs: outline by default (even if markup has .primary) */
#mc-actions .button,
#header .actions .button,
#mc-actions .button.primary,
#header .actions .button.primary{
  background: transparent !important;
  color: var(--pistachio) !important;
  border: 1.5px solid var(--pistachio) !important;
  border-radius: 10px;
  box-shadow: none !important;
}

/* Keep visited links from turning odd colors */
#mc-actions .button:visited,
#header .actions .button:visited{
  color: var(--pistachio) !important;
}

/* Hover/focus = filled cream + black text */
#mc-actions .button:hover,
#mc-actions .button:focus,
#header .actions .button:hover,
#header .actions .button:focus{
  background: var(--cream) !important;
  border-color: var(--cream) !important;
  color: var(--ink) !important;
}

/* Selected state (we'll toggle .is-active via JS) */
#mc-actions .button.is-active,
#header .actions .button.is-active{
  background: var(--cream) !important;
  border-color: var(--cream) !important;
  color: var(--ink) !important;
}




/* --- Footer in normal flow (sticky-at-bottom when page is short) --- */
html, body { height: 100%; }

#wrapper{
  min-height: 100dvh;           /* page at least viewport height */
  display: flex;
  flex-direction: column;       /* stack header + footer vertically */
}

#header{ flex: 1 0 auto; }      /* header takes remaining space */
#footer{
  position: static !important;  /* kill any fixed/absolute from the theme */
  flex-shrink: 0;               /* never collapse */
  margin-top: .75rem;           /* breathing room above */
}


/* Make the page a vertical stack: Header (hero) + Footer underneath */
html, body { height: 100%; }

body{
  min-height: 100dvh;          /* at least viewport height */
  display: flex;               /* stack children vertically */
  flex-direction: column;
}

/* Hero fills the space; grows if content is taller */
#header{
  flex: 1 0 auto;              /* take remaining space */
  min-height: 100dvh;          /* full-screen hero with Ken Burns behind */
}

/* Footer sits below the hero, never fixed/overlay */
#footer{
  position: static !important; /* break any theme fixed/absolute */
  flex-shrink: 0;              /* don't collapse */
  margin-top: .75rem;          /* breathing room above */
}

/* If the theme gives the background a stacking context, keep it behind */
#bg{ position: fixed; inset: 0; z-index: -1; } /* harmless if #bg exists */


/* Optional: make footer full-bleed while keeping comfy side padding */
#footer{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
}


/* === FINAL: hero in normal flow, footer below, bg behind === */
html, body { height: auto !important; min-height: 100%; }
body {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Kill the template centering/absolute on header */
#header{
  position: static !important;
  top: auto !important; left: auto !important;
  transform: none !important;
  width: 100% !important;

  /* full-viewport hero with your Ken Burns behind it */
  min-height: 100vh !important;

  /* keep your left alignment, but vertically center content */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Footer is a normal block under the hero (never overlays) */
#footer{
  position: static !important;
  inset: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  flex-shrink: 0 !important;

  /* optional: keep it visually simple since it’s no longer an overlay */
  background: transparent !important;
  border: 0 !important;
  padding: 10px 16px !important;
}

/* Background layer stays behind everything */
#bg{ position: fixed !important; inset: 0 !important; z-index: 0 !important; }


/* --- Force background/overlays behind page chrome --- */
body{ position: relative; isolation: isolate; }

/* Your Ken Burns layer */
#bg{
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important; /* always at the back */
}

/* Some HTML5 UP layers that sit above bg — push them behind content */
#overlay,
#wrapper:before,
#header:before,
#header:after{
  position: fixed !important;   /* full-viewport overlay, not tied to header flow */
  inset: 0 !important;
  z-index: -1 !important;       /* behind header/footer/content */
  pointer-events: none !important; /* never intercept clicks on footer/buttons */
}

/* Page chrome on top of overlays */
#header, #footer{
  position: relative !important;
  z-index: 0 !important;
}

/* Footer: normal block below hero, left-ranged, full width */
#footer{
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: left !important;

  /* no overlay styling; keep it clean since it's no longer floating */
  background: transparent !important;
  border: 0 !important;

  /* comfy side padding; does not affect left-ranging of content */
  padding-left: clamp(16px, 4vw, 40px) !important;
  padding-right: clamp(16px, 4vw, 40px) !important;
}

/* Keep its contents left-ranged */
#footer .icons{ justify-content: flex-start !important; }
#footer .copyright{
  display: flex; justify-content: flex-start; padding: .4rem 0 0;
}



/* === Stack header vertically + left, and un-tie footer from overlay (surgical) === */

/* 1) Stack logo ? strapline ? buttons (all left-aligned) */
#header{
  position: relative !important;
  left: auto !important; top: auto !important; transform: none !important;

  /* force a vertical layout */
  display: grid !important;
  grid-auto-flow: row !important;
  row-gap: .8rem !important;
  justify-items: start !important;
  align-items: start !important;
  text-align: left !important;
}

/* Keep the CTA group together on the left (no spread) */
#header .actions, #mc-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: .6rem !important;
}

/* 2) Footer lives in normal flow under the hero, full width, left-ranged */
#footer{
  position: static !important;      /* not fixed, not overlay */
  width: 100% !important;
  z-index: 1 !important;
  background: transparent !important;
  border: 0 !important;
  padding-left: clamp(16px, 4vw, 40px) !important;
  padding-right: clamp(16px, 4vw, 40px) !important;
}

/* 3) Make sure any theme overlays sit behind page content */
#bg, #overlay, #header:before, #header:after, body:before{
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;            /* behind header/footer/content */
  pointer-events: none !important;   /* never intercept clicks */
}



/* === Footer: remove left pad on large screens === */
@media (min-width: 601px){
  #footer{
    padding-left: 0 !important;   /* align icons flush left like the logo */
  }
}

/* === Tighten vertical spacing on small screens === */
@media (max-width: 600px){
  /* stack spacing between logo ? tagline ? buttons */
  #header{
    row-gap: .45rem !important;    /* was ~.8rem */
  }

  /* tagline spacing */
  .strapline{
    margin: .3rem 0 .45rem !important;
  }

  /* button stack spacing */
  #mc-actions,
  #header .actions{
    gap: .45rem !important;        /* closer stack */
  }

  /* footer spacing */
  #footer{
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }
  #footer .icons{
    margin-top: .25rem !important; /* reduce space above icons */
  }
}


/* MOBILE: tighten logo ? tagline ? buttons ? footer spacing */
@media (max-width: 600px){
  /* kill the theme’s big top/bottom padding on the hero */
  body #header{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* make each next child closer (logo ? strapline ? actions) */
  body #header > * + *{
    margin-top: .35rem !important;
  }

  /* remove any extra margins the theme injects */
  .strapline{ 
    margin: 0 !important; 
    font-size: clamp(1rem, 3.8vw, 1.1rem) !important;
    line-height: 1.25 !important;
  }
  #mc-actions,
  #header .actions{
    margin: 0 !important;
    gap: .4rem !important;     /* was ~.6rem */
  }

  /* footer breathing room (less) */
  #footer{
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }
  #footer .icons{
    margin-top: .15rem !important;
  }
}


/* MOBILE FIX: remove tall hero + tighten vertical gaps */
@media (max-width: 600px){
  /* stop the flex/100vh layout from stretching the page */
  html, body{ height: auto !important; }
  body{
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  #header{
    display: block !important;       /* was flex */
    min-height: auto !important;     /* was 100vh */
    padding: 10px 16px 8px !important; /* trim top/bottom padding */
  }

  /* compress the stack: logo ? strapline ? buttons */
  #header > * + *{ margin-top: .35rem !important; }
  .strapline{
    margin: .2rem 0 .25rem !important;
    font-size: clamp(1rem, 3.8vw, 1.1rem) !important;
    line-height: 1.25 !important;
  }
  #mc-actions,
  #header .actions{
    margin: 0 !important;
    gap: .4rem !important;            /* was ~.6rem */
  }
  #mc-actions > li{ margin: 0 !important; }

  /* bring the footer closer */
  #footer{
    margin-top: .5rem !important;
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }
  #footer .icons{ margin-top: .15rem !important; }
}



/* MOBILE: add vertical rhythm + subtle section dividers */
@media (max-width: 600px){
  /* gentle padding so the logo isn't glued to the top */
  #header{
    padding: clamp(12px, 4vw, 18px) 16px clamp(8px, 3vw, 14px) !important;
  }

  /* spacing under logo */
  #header .logo{
    margin-bottom: clamp(10px, 3.5vw, 16px) !important;
  }

  /* strapline block: a little separator line + spacing */
  .strapline{
    margin: 0 0 clamp(10px, 3.5vw, 14px) !important;
    padding-top: clamp(6px, 2.5vw, 10px) !important;
    border-top: 1px solid rgba(255,255,255,.12);
    line-height: 1.28 !important;
  }

  /* buttons block: another subtle divider + tighter gap */
  #mc-actions{
    margin-top: clamp(8px, 3vw, 12px) !important;
    padding-top: clamp(6px, 2.5vw, 10px) !important;
    border-top: 1px solid rgba(255,255,255,.12);
    gap: .5rem !important; /* slightly tighter than desktop */
  }

  /* footer sits closer, with its own thin divider */
  #footer{
    margin-top: clamp(12px, 4vw, 18px) !important;
    padding-top: clamp(6px, 2vw, 10px) !important;
    border-top: 1px solid rgba(255,255,255,.12);
  }
}


/* === Mobile rhythm fix (logo / tagline / buttons) === */
@media (max-width: 600px){

  /* Push the logo off the very top a bit more */
  #header{
    padding-top: clamp(22px, 7vw, 36px) !important;
  }

  /* Keep a touch of space under the logo */
  #header .logo{
    margin-bottom: clamp(12px, 4vw, 20px) !important;
  }

  /* Tagline: no divider line, better line height, and SAME gap as buttons?footer */
  .strapline{
    border-top: 0 !important;       /* remove the line */
    padding-top: 0 !important;       /* remove the padding for that line */
    line-height: 1.42 !important;    /* was too tight on mobile */
    margin-bottom: clamp(12px, 4vw, 18px) !important;  /* = footer gap */
  }

  /* Make the gap live on the tagline only so it's exactly one “unit” */
  #mc-actions{
    margin-top: 0 !important;        /* don’t add extra gap above buttons */
  }
}


/* === Mobile spacing tune (logo / tagline / buttons) === */
@media (max-width: 600px){

  /* Push the whole hero down a clear notch */
  body #header{
    padding-top: calc(env(safe-area-inset-top) + clamp(52px, 12vw, 88px)) !important;
  }

  /* Extra space under the logo so it breathes */
  body #header .logo{
    margin-bottom: clamp(18px, 6vw, 32px) !important;
  }

  /* Tagline: looser lines + a bigger gap to buttons */
  .strapline{
    line-height: 1.58 !important;                    /* was 1.42 */
    margin-bottom: clamp(18px, 6vw, 32px) !important; /* matches the “unit” you liked near footer */
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Make sure the buttons don’t add extra top margin */
  #mc-actions{ margin-top: 0 !important; }

  /* If the theme adds inner padding, neutralize it */
  #header > .inner{ padding-top: 0 !important; }
}


/* ===== Contact modal (scoped) ===== */
#contact-modal .mc-modal__dialog{
  width:min(800px,92vw);
}

#contact-modal .mc-form .mc-fields{
  display:grid; gap:.85rem;
}

#contact-modal .mc-form .mc-field label{
  display:block; margin:0 0 .35rem;
  color:#e9e9ee; font-weight:700; letter-spacing:.01em;
}

#contact-modal .mc-form input,
#contact-modal .mc-form select,
#contact-modal .mc-form textarea{
  width:100%;
  background:#fff; color:#111;
  border:1px solid #e3e3e3;
  border-radius:12px;
  padding:.7rem .85rem;
  font:inherit; line-height:1.25;
}

#contact-modal .mc-form textarea{ resize:vertical; min-height:140px; }

#contact-modal .mc-actions{
  display:flex; gap:.6rem; margin-top:.6rem; justify-content:flex-start;
}

#contact-modal .mc-success{ text-align:center; padding:1rem 0; }
#contact-modal .mc-success h3{ margin:.5rem 0 .25rem; font-weight:800; color:#fff; }
#contact-modal .mc-success p{ margin:0 0 .75rem; color:#e9e9ee; }
#contact-modal .mc-tick{
  display:inline-grid; place-items:center; width:64px; height:64px; margin:.25rem auto 0;
  border-radius:50%; background:var(--pistachio,#dbddc6); color:#000; font-weight:900; font-size:1.5rem;
}

#contact-modal .mc-error{ color:#ffb3b3; margin:.25rem 0; }



/* === Desktop-only spacing tune (keep logo top offset unchanged) === */
@media (min-width: 981px){
  /* small helper vars for consistent gaps */
  #header{ --gap-s: 10px; --gap-m: 16px; }

  /* Don't move the logo from the top; just reduce the space beneath it */
  #header > .logo{
    margin-top: 0 !important;                 /* preserve current top position */
    margin-bottom: var(--gap-s) !important;    /* tighten space to tagline */
  }

  /* Tagline: slightly tighter leading + smaller gap below */
  .strapline{
    line-height: 1.30 !important;
    margin-top: 0 !important;
    margin-bottom: var(--gap-s) !important;
  }

  /* CTA row: bring closer to tagline */
  #header .actions, 
  #mc-actions{
    margin-top: 0 !important;
    margin-bottom: var(--gap-m) !important;
  }

  /* Footer: a touch closer to the hero on tall screens */
  #footer{
    margin-top: var(--gap-s) !important;
  }
}



/* ===== Lock hero spacing so it doesn't stretch with viewport height ===== */

/* Tweakable constants (desktop + mobile) */
:root{
  --hero-top: 80px;   /* distance from top of screen to the logo row (desktop) */
  --hero-gap: 18px;   /* vertical rhythm between logo ? strapline ? buttons (desktop) */
}
@media (max-width: 640px){
  :root{
    --hero-top: 52px; /* keep what you liked on mobile */
    --hero-gap: 14px;
  }
}

/* Stop vertical centering; keep hero full-screen image behind if you want */
#header{
  min-height: 100vh !important;          /* keep the Ken Burns image filling the screen */
  display: flex !important;
  flex-direction: column !important;      /* stack logo, tagline, buttons vertically */
  align-items: flex-start !important;     /* anchor to the top-left, not center */
  justify-content: flex-start !important;
  padding-top: var(--hero-top) !important;
  padding-bottom: 0 !important;           /* no extra growth at the bottom */
}

/* Fixed vertical rhythm between blocks (independent of viewport height) */
#header .logo{ margin: 0 0 var(--hero-gap) 0 !important; }
.strapline{ margin: 0 0 var(--hero-gap) 0 !important; line-height: 1.55 !important; }
#mc-actions{ margin: 0 0 var(--hero-gap) 0 !important; }

/* Keep footer where it is; no change to its spacing */



/* === Normalize gap between buttons and footer (no extra stretch) === */
:root{
  --hero-top: 80px;  /* keep your current desktop top offset */
  --hero-gap: 18px;  /* rhythm used between logo ? tagline ? buttons */
}
@media (max-width: 640px){
  :root{ --hero-top: 52px; --hero-gap: 14px; }
}

/* Stop the header from filling leftover height */
#header{
  flex: 0 0 auto !important;      /* don't grow */
  min-height: auto !important;     /* no forced 100vh */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding-top: var(--hero-top) !important;
  padding-bottom: 0 !important;
}

/* Keep uniform vertical rhythm inside the hero */
#header .logo{ margin: 0 0 var(--hero-gap) 0 !important; }
.strapline{    margin: 0 0 var(--hero-gap) 0 !important; }
#mc-actions{   margin: 0 0 var(--hero-gap) 0 !important; }

/* Make the footer butt up to the hero with the SAME single gap */
#footer{ margin-top: 0 !important; }  /* was adding extra space */



/* Contact modal — ensure the top-right × is visible */
#contact-modal .mc-modal__close{
  color:#fff !important;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
}
#contact-modal .mc-modal__close:hover{
  background:rgba(255,255,255,.18);
}

/* Contact modal success "Close" button contrast */
#contact-modal .mc-success .button{
  background: var(--cream) !important;
  border-color: var(--cream) !important;
  color: #000 !important;
}



/* ===== Fix: Meet the Team layout & image sizing ===== */
#team-modal .mc-modal__dialog.team-modal{
  width: min(1000px, 94vw);
  max-height: 88vh;
  overflow: auto;
}

/* Grid structure */
#team-modal .team-body{ display:grid; gap:1rem; }
#team-modal .team-view{ position:relative; }
#team-modal .team-slide{
  display: none;                       /* hidden by default */
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 1rem;
  align-items: center;
}
#team-modal .team-slide.is-active{ display:grid; }
#team-modal figure.team-slide{ margin:0; }  /* reset default figure margins */

/* Photo pane: fixed aspect + cover */
#team-modal .team-photo{
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  aspect-ratio: 4 / 3;                 /* prevents runaway height */
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px rgba(0,0,0,.35);
}
#team-modal .team-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text column */
#team-modal .team-meta{ color:#e9e9ee; min-width:0; }
#team-modal .team-name{ color:#fff; font-size:1.5rem; font-weight:800; margin:.25rem 0 0; }
#team-modal .team-role{ color:#dbddc6; margin:.25rem 0 .5rem; font-weight:700; }
#team-modal .team-bio{ margin:0 0 .75rem; }

/* Thumbs & controls (unchanged, but ensure they behave) */
#team-modal .team-thumbs{ display:flex; gap:.5rem; flex-wrap:wrap; }
#team-modal .team-thumb{
  width:70px; height:70px; border-radius:10px; overflow:hidden; padding:0; border:2px solid transparent;
  background:rgba(255,255,255,.06); cursor:pointer; transition:transform .12s, border-color .2s;
}
#team-modal .team-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
#team-modal .team-thumb.is-active{ border-color:#dbddc6; }
#team-modal .team-controls{ display:flex; justify-content:space-between; gap:.75rem; }
#team-modal .team-controls .button{ flex:1 1 auto; }

/* Stack nicely on mobile */
@media (max-width: 760px){
  #team-modal .team-slide{ grid-template-columns: 1fr; }
  #team-modal .team-photo{ aspect-ratio: 16 / 9; } /* wider crop feels better on phones */
  
  
 /* Fix: Meet the Team close button (white on dark, beats global link styles) */
#team-modal .mc-modal__close,
#team-modal .mc-modal__close:link,
#team-modal .mc-modal__close:visited{
  color: #fff !important;                              /* make the × white */
  background: rgba(255,255,255,.12) !important;         /* light chip */
  border: 1px solid rgba(255,255,255,.22) !important;
  text-decoration: none !important;
  border-bottom: 0 !important;

  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  line-height: 1; font-size: 18px; cursor: pointer;
}
#team-modal .mc-modal__close:hover,
#team-modal .mc-modal__close:focus{
  background: rgba(255,255,255,.2) !important;
  outline: 2px solid var(--pistachio, #dbddc6) !important;
  outline-offset: 2px;
}


/* Meet the Team: force visible close button at all sizes */
#team-modal .mc-modal__close,
#team-modal .mc-modal__close:link,
#team-modal .mc-modal__close:visited{
  color:#fff !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  text-decoration:none !important;
  border-bottom:0 !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  border-radius:8px;
  line-height:1; font-size:18px; cursor:pointer;
}
#team-modal .mc-modal__close:hover,
#team-modal .mc-modal__close:focus{
  background:rgba(255,255,255,.2) !important;
  outline:2px solid var(--pistachio, #dbddc6) !important;
  outline-offset:2px;
}



/* Fix Meet the Team mobile crop */
@media (max-width: 760px){
  #team-modal .team-photo{
    aspect-ratio: auto !important;   /* stop forcing 16:9 */
  }
  #team-modal .team-photo img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;  /* show full image, no cropping */
    object-position: center center;  /* center it */
  }
}



/* Contact modal: let checkboxes look like checkboxes */
#contact-modal .mc-form input[type="checkbox"],
#contact-modal .mc-form input[type="radio"]{
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
}

/* Layout the opt-in row nicely, left-aligned */
#contact-modal .mc-field.mc-optin{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .25rem;
}

#contact-modal .mc-field.mc-optin label{
  margin: 0;             /* cancel any block-label spacing */
  color: #e9e9ee;        /* match other labels */
  font-weight: 600;
}



#contact-modal .mc-form input[type="checkbox"]{
  width:auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  display:inline-block !important;
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
}

#contact-modal .mc-optin{
  display:grid;
  grid-template-columns:20px 1fr;
  align-items:center;
  gap:.5rem;
  margin:.35rem 0;
}

#contact-modal .mc-optin input[type="checkbox"]{ width:18px; height:18px; margin:0; }
#contact-modal .mc-optin label{ margin:0; color:#e9e9ee; font-weight:600; line-height:1.35; white-space:normal; }


/* ===== Contact modal — newsletter checkbox fix ===== */

/* 1) Put the checkbox + text on one line */
#contact-modal .mc-form .mc-field.mc-optin{
  display:flex;
  align-items:center;
  gap:.55rem;             /* tight gap between box and text */
  margin-top:.6rem;       /* space under the previous field */
}

/* 2) Override the global block label (make it inline + centered) */
#contact-modal .mc-form .mc-field.mc-optin > label{
  display:inline-flex !important;
  align-items:center;
  margin:0 !important;
  padding:0 !important;   /* kill any reserved padding */
  line-height:1.2;
  color:#e9e9ee;
  font-weight:600;
}

/* 3) Use the native checkbox with your color (no fake box) */
#contact-modal .mc-form .mc-field.mc-optin > input[type="checkbox"]{
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  accent-color:#e6d3b4 !important;  /* cream */
  width:18px; height:18px;
  margin:0; vertical-align:middle;
}

/* 4) Nuke the theme’s faux checkbox/tick (kills the green) */
#contact-modal .mc-form .mc-field.mc-optin input[type="checkbox"] + label::before,
#contact-modal .mc-form .mc-field.mc-optin input[type="checkbox"] + label::after,
#contact-modal .mc-form .mc-field.mc-optin input[type="checkbox"]:checked + label::before,
#contact-modal .mc-form .mc-field.mc-optin input[type="checkbox"]:checked + label::after{
  content:none !important;
  background:transparent !important;
  border:0 !important; color:inherit !important; box-shadow:none !important;
}

/* 5) Remove the theme’s big left padding reserved for its faux box */
#contact-modal .mc-form .mc-field.mc-optin input[type="checkbox"] + label{
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  text-indent:0 !important;
}



/* Pistachio legal links (force over theme) */
:root{ --pistachio: #dbddc6; }

.legal-links a,
.legal-links a:link,
.legal-links a:visited{
  color: var(--pistachio) !important;
  border-bottom-color: currentColor !important; /* keeps the dotted underline in pistachio */
  text-decoration: none;                        /* your existing style */
}

.legal-links a:hover,
.legal-links a:focus{
  color: var(--pistachio) !important;           /* keep same colour on hover */
  text-decoration: underline;                   /* subtle hover cue */
  outline: none;
}



/* Pistachio legal links (beats global a{} rule) */
#footer + .legal-links a,
#footer + .legal-links a:link,
#footer + .legal-links a:visited{
  color: #dbddc6 !important;          /* pistachio */
  border-bottom-color: currentColor !important;
  text-decoration: none;
}

#footer + .legal-links a:hover,
#footer + .legal-links a:focus{
  color: #dbddc6 !important;
  text-decoration: underline;
}




/* Pistachio legal links + matching plain text */
.legal-links{
  color: var(--pistachio, #dbddc6);
}

.legal-links a,
.legal-links a:link,
.legal-links a:visited{
  color: var(--pistachio, #dbddc6) !important; /* beats global a{... !important} */
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}

.legal-links a:hover,
.legal-links a:focus{
  color: var(--pistachio, #dbddc6) !important;
  text-decoration: underline;
}