/* ==========================================================================
   PlanFree Vacations — design system
   Mobile first. Base styles target a ~360px phone; every media query is
   min-width and only ever adds. Breakpoints: 600 / 760 / 900 / 1080 / 1280.
   ========================================================================== */

:root{
  /* colour */
  --ink:#101613;
  --ink-soft:#2b3630;
  --muted:#6d7c74;
  --ivory:#fbf9f5;
  --sand:#f2ebe1;
  --sand-deep:#e7dccd;
  --line:rgba(16,22,19,.10);
  --line-soft:rgba(16,22,19,.06);
  --brand:#0f5c4a;
  --brand-deep:#0a3f33;
  --brand-light:#6fbfa8;
  --brand-tint:#e6f0ec;
  --accent:#c8802e;
  --accent-tint:#fbf0e0;
  --white:#fff;

  /* type */
  --display:"Fraunces","Georgia",serif;
  --sans:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;

  /* shape */
  --r-sm:12px;
  --r:16px;
  --r-lg:22px;
  --r-xl:26px;
  --shadow-sm:0 1px 2px rgba(16,22,19,.05),0 6px 18px -10px rgba(16,22,19,.18);
  --shadow:0 18px 44px -22px rgba(16,22,19,.38);
  --shadow-lg:0 40px 80px -40px rgba(16,22,19,.45);

  /* layout — mobile values */
  --wrap:1200px;
  --gutter:20px;
  --section:64px;
  --header-h:62px;
  --bar-h:64px;              /* mobile call/WhatsApp bar */
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(15,92,74,.14);
  overflow-x:hidden;
  /* clear the fixed mobile action bar */
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;line-height:1.1;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
figure{margin:0}
blockquote{margin:0}

::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}

/* ---------- primitives ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--tint{background:var(--sand)}
.section--ink{background:var(--ink);color:var(--ivory)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.5}
.section--ink .eyebrow{color:var(--accent)}

.h-display{font-size:clamp(2.15rem,10vw,4.9rem)}
.h-1{font-size:clamp(1.85rem,7vw,3.35rem)}
.h-2{font-size:clamp(1.4rem,5vw,2rem)}
.h-3{font-size:clamp(1.1rem,4vw,1.35rem)}
.lede{font-size:1rem;color:var(--muted);max-width:56ch}
.section--ink .lede{color:rgba(251,249,245,.68)}

.section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:30px}
.section-head > div{max-width:620px}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--brand);--btn-fg:#fff;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 22px;
  border:1px solid var(--btn-bd);border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:.93rem;font-weight:600;letter-spacing:.01em;cursor:pointer;white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s,color .25s,border-color .25s,box-shadow .25s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;flex:none}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line);box-shadow:none}
.btn--ghost:hover{--btn-bg:var(--ink);--btn-fg:#fff;--btn-bd:var(--ink)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--ink)}
.btn--outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.4);box-shadow:none}
.btn--outline-light:hover{--btn-bg:#fff;--btn-fg:var(--ink)}
.btn--wa{--btn-bg:#1f9d55}
.btn--sm{min-height:42px;padding:9px 17px;font-size:.86rem}
.btn--block{width:100%}

.link-arrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.92rem;color:var(--brand)}
.link-arrow span{transition:transform .25s}
.link-arrow:hover span{transform:translateX(5px)}

/* ---------- brand ----------
   Two crops of the supplied logo artwork, nothing redrawn:
   .brand__logo  the wordmark with its background removed (white artwork)
   .logo-circle  the square badge on the logo's own green, shown as a circle
   The white wordmark sits straight on the hero photo; once the header turns
   solid it gets a plate in the logo's own green so it stays legible.       */
.brand{display:inline-flex;align-items:center;text-decoration:none;transition:transform .3s}
.brand:hover{transform:translateY(-1px)}
.brand__logo{display:block;height:30px;width:auto}

/* plated by default, so the white artwork stays legible even before the
   scroll state is applied (or with JS off); bare only over the hero photo */
.header .brand{border-radius:13px;padding:6px 11px;background:#023536;transition:background .35s,padding .35s}

.footer .brand__logo{height:38px}

/* circular use of the same artwork */
.logo-circle{border-radius:50%;display:block;box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}

/* ---------- header ---------- */
.header{
  position:fixed;inset:0 0 auto;z-index:90;height:var(--header-h);
  display:flex;align-items:center;
  transition:background .35s,box-shadow .35s,backdrop-filter .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.header__inner{display:flex;align-items:center;gap:12px;width:100%}
.header .brand{margin-right:auto}
.header.is-solid{
  background:rgba(251,249,245,.9);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--line-soft);box-shadow:0 10px 30px -26px rgba(16,22,19,.6);
}

.nav{display:none}
.header__cta{display:flex;align-items:center;gap:8px}
.header__cta .btn--ghost{display:none}

/* header sitting over a dark hero */
.header:not(.is-solid).on-hero .nav a{color:rgba(255,255,255,.92)}
.header:not(.is-solid).on-hero .nav a:hover{background:rgba(255,255,255,.14)}
.header:not(.is-solid).on-hero .nav a.is-active{color:#fff}
.header:not(.is-solid).on-hero .btn--ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.42)}
.header:not(.is-solid).on-hero .btn--ghost:hover{--btn-bg:#fff;--btn-fg:var(--ink)}
.header:not(.is-solid).on-hero .burger{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);
  backdrop-filter:blur(10px);
}
.header:not(.is-solid).on-hero .burger:hover{background:rgba(255,255,255,.28)}
.header:not(.is-solid).on-hero .burger span{background:#fff}

/* While the drawer is open the header sits on the ivory panel, not the hero
   photo - so the white-on-photo treatment has to stand down or the close
   button all but disappears. */
body.is-locked .header:not(.is-solid).on-hero .burger{
  background:var(--sand);border-color:var(--line);backdrop-filter:none;
}
body.is-locked .header:not(.is-solid).on-hero .burger:hover{background:var(--sand-deep)}
body.is-locked .header:not(.is-solid).on-hero .burger span{background:var(--ink)}

.burger{
  position:relative;display:grid;place-items:center;flex:none;
  width:42px;height:42px;border-radius:50%;            /* round, to match the pill beside it */
  border:1px solid var(--line);background:var(--sand); /* always a ground, never a bare hairline */
  cursor:pointer;padding:0;
  transition:background .25s,border-color .25s,transform .15s;
}
.burger:hover{background:var(--sand-deep)}
.burger:active{transform:scale(.93)}
/* The lines are positioned absolutely from the centre rather than stacked with
   margins: closed they sit at -5 / 0 / +5, open they both land exactly on the
   centre and rotate, so the X always crosses instead of drifting into a
   chevron the way margin-plus-rotate arithmetic did. */
.burger span{
  position:absolute;left:50%;top:50%;
  display:block;width:16px;height:1.7px;margin:0;
  background:var(--ink);border-radius:2px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .2s;
}
.burger span:nth-child(1){transform:translate(-50%,-50%) translateY(-5px)}
.burger span:nth-child(2){transform:translate(-50%,-50%)}
.burger span:nth-child(3){transform:translate(-50%,-50%) translateY(5px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:80;background:var(--ivory);
  padding:calc(var(--header-h) + 20px) var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:2px;overflow-y:auto;
  transform:translateY(-12px);opacity:0;pointer-events:none;
  transition:opacity .3s,transform .35s;
}
.drawer.is-open{opacity:1;transform:none;pointer-events:auto}
.drawer__head{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:8px;border-bottom:1px solid var(--line-soft)}
.drawer__head .logo-circle{width:58px;height:58px;flex:none}
.drawer__head b{font-family:var(--display);font-size:1.05rem;display:block;line-height:1.2}
.drawer__head small{color:var(--muted);font-size:.8rem}
.drawer__link{
  font-family:var(--display);font-size:1.5rem;padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.drawer__foot{margin-top:28px;display:grid;gap:10px}
.drawer__meta{margin-top:20px;font-size:.85rem;color:var(--muted)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;animation:heroZoom 22s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1.1)}to{transform:scale(1)}}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(9,14,12,.66) 0%,rgba(9,14,12,.24) 32%,rgba(9,14,12,.6) 70%,rgba(9,14,12,.9) 100%);
}
.hero__inner{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:calc(var(--header-h) + 40px) var(--gutter) 34px;color:#fff;
}
.hero__badge{
  display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border-radius:999px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);
  font-size:.76rem;font-weight:600;margin-bottom:18px;
}
.hero__badge i{width:7px;height:7px;border-radius:50%;background:#66e0a3;box-shadow:0 0 0 4px rgba(102,224,163,.22)}
.hero h1{max-width:16ch;text-shadow:0 2px 40px rgba(0,0,0,.28)}
.hero h1 em{font-style:italic;color:#f4c98a}
.hero__sub{margin-top:16px;max-width:46ch;color:rgba(255,255,255,.86);font-size:1rem}
.hero__actions{margin-top:24px;display:grid;gap:10px}

/* planner bar */
.planner{
  margin-top:28px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(16px);
  border-radius:var(--r-lg);padding:10px;
  display:grid;gap:4px;
  box-shadow:var(--shadow-lg);color:var(--ink);
}
.planner__field{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:var(--r);transition:background .2s}
.planner__field + .planner__field{border-top:1px solid var(--line-soft)}
.planner__field label{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.planner__field select,.planner__field input{
  border:0;background:transparent;padding:2px 0;font-size:.98rem;font-weight:600;width:100%;
  appearance:none;cursor:pointer;
}
.planner__field select:focus,.planner__field input:focus{outline:none}
.planner .btn{border-radius:var(--r);margin-top:6px}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line-soft);background:var(--ivory);overflow:hidden;padding-block:15px}
.marquee__track{display:flex;gap:36px;width:max-content;animation:slide var(--marquee-speed,38s) linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee__item{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:1rem;color:var(--ink-soft);white-space:nowrap}
.marquee__item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ---------- pinterest masonry ---------- */
.masonry{columns:1;column-gap:16px}
.masonry > *{break-inside:avoid;margin-bottom:16px}

.pin{
  position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
  background:var(--sand-deep);box-shadow:var(--shadow-sm);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s;
}
.pin:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pin img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.pin:hover img{transform:scale(1.07)}
.pin::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,14,12,0) 38%,rgba(9,14,12,.82) 100%);opacity:.92;transition:opacity .4s}
.pin__body{position:absolute;inset:auto 0 0;padding:20px;color:#fff;z-index:2}
.pin__tag{
  display:inline-block;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(8px);
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;
}
.pin__title{font-family:var(--display);font-size:1.35rem;line-height:1.12}
.pin__meta{margin-top:6px;font-size:.82rem;color:rgba(255,255,255,.78);display:flex;align-items:center;gap:8px}
.pin__meta i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
.pin--tall img{aspect-ratio:3/3.6}
.pin--mid img{aspect-ratio:4/3.8}
.pin--wide img{aspect-ratio:4/3}
.pin--short img{aspect-ratio:5/3.4}

/* ---------- journey cards ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:18px}
.card{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s,border-color .4s;
}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:transparent}
.card__media{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--sand-deep)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.card:hover .card__media img{transform:scale(1.06)}
.card__chip{
  position:absolute;top:12px;left:12px;padding:6px 13px;border-radius:999px;
  background:rgba(251,249,245,.92);backdrop-filter:blur(8px);
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-deep);
}
.card__save{
  position:absolute;top:10px;right:10px;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(251,249,245,.9);backdrop-filter:blur(8px);display:grid;place-items:center;
  color:var(--ink);transition:transform .25s,background .25s,color .25s;
}
.card__save:hover{transform:scale(1.1)}
.card__save svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.card__save.is-saved{background:var(--accent);color:#fff}
.card__save.is-saved svg{fill:currentColor}
.card__body{padding:20px;display:flex;flex-direction:column;gap:13px;flex:1}
.card__title{font-family:var(--display);font-size:1.3rem}
.card__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--muted);font-weight:500}
.card__meta span{display:inline-flex;align-items:center;gap:6px}
.card__meta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.8}
.card__list{display:grid;gap:8px;font-size:.9rem;color:var(--ink-soft)}
.card__list li{display:flex;gap:9px;align-items:flex-start}
.card__list li::before{content:"";width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--brand);flex:none;opacity:.55}
.card__foot{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.card__price{font-size:.8rem;color:var(--muted);line-height:1.35}
.card__price b{display:block;font-family:var(--display);font-size:1rem;color:var(--ink)}

/* ---------- custom dropdown ----------
   Progressive enhancement: the native <select> stays in the DOM as the value
   holder (so form reads, prefill and the CRM payload are untouched) and this
   listbox is drawn on top of it. Without JS the native control shows instead. */
.dd{position:relative}
.dd__native{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap;
}
.dd__btn{
  display:flex;align-items:center;gap:10px;width:100%;
  text-align:left;cursor:pointer;background:transparent;border:0;
  font:inherit;color:inherit;
}
.dd__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd__value[data-placeholder="true"]{color:var(--muted);font-weight:500}
.dd__chev{
  width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
  opacity:.5;transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .2s;
}
.dd.is-open .dd__chev{transform:rotate(180deg);opacity:.9}
.dd__btn:hover .dd__chev{opacity:.85}

.dd__panel{
  position:absolute;z-index:60;left:0;right:0;top:calc(100% + 8px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 24px 50px -22px rgba(16,22,19,.4),0 2px 6px rgba(16,22,19,.05);
  padding:6px;max-height:340px;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top center;
  pointer-events:none;visibility:hidden;
  transition:opacity .2s ease,transform .24s cubic-bezier(.2,.7,.3,1),visibility .24s;
  scrollbar-width:thin;
}
.dd.is-open .dd__panel{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.dd.is-up .dd__panel{top:auto;bottom:calc(100% + 8px);transform-origin:bottom center}

.dd__opt{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:12px;cursor:pointer;
  font-size:.94rem;font-weight:500;color:var(--ink-soft);line-height:1.35;
  transition:background .15s,color .15s;
}
.dd__opt:hover,.dd__opt.is-active{background:var(--sand);color:var(--ink)}
.dd__opt[aria-selected="true"]{color:var(--brand);font-weight:600}
.dd__tick{width:16px;height:16px;flex:none;stroke:var(--brand);fill:none;stroke-width:2.4;opacity:0;transition:opacity .15s}
.dd__opt[aria-selected="true"] .dd__tick{opacity:1}
.dd__opt--other{border-top:1px solid var(--line-soft);border-radius:0 0 12px 12px;margin-top:4px;padding-top:13px;color:var(--brand);font-weight:600}
.dd__opt--other:hover,.dd__opt--other.is-active{background:var(--brand-tint)}

/* the free-text box that appears when "Something else" is chosen */
.dd__other{
  width:100%;margin-top:10px;padding:12px 14px;font-size:16px;
  border:1px solid var(--brand);border-radius:var(--r-sm);background:#fff;
  box-shadow:0 0 0 4px rgba(15,92,74,.10);
}
.dd__other:focus{outline:none}
.dd__other::placeholder{color:var(--muted)}

/* context: the hero planner pill — borderless, sits on white */
.planner__field .dd__btn{padding:2px 0;font-size:.98rem;font-weight:600;min-height:26px}
.planner__field .dd__other{margin-top:8px;padding:9px 12px;font-size:15px}

/* context: the enquiry form — matches the other inputs exactly */
.field .dd__btn{
  min-height:50px;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--ivory);font-size:16px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field .dd__btn:hover{border-color:rgba(16,22,19,.2)}
.dd.is-open .field .dd__btn,.field .dd.is-open .dd__btn{
  border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(15,92,74,.10);
}
.field.has-error .dd__btn{border-color:#b3261e}

@media (max-width:600px){
  .dd__panel{max-height:min(60svh,340px)}
  .dd__opt{padding:13px 12px;font-size:.97rem}
}

/* ---------- filters ---------- */
.filters{
  display:flex;gap:8px;margin-bottom:26px;
  overflow-x:auto;scroll-snap-type:x proximity;
  margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter);
  scrollbar-width:none;-ms-overflow-style:none;
}
.filters::-webkit-scrollbar{display:none}
.chip{
  flex:none;scroll-snap-align:start;
  min-height:42px;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:transparent;
  font-size:.87rem;font-weight:600;cursor:pointer;transition:all .25s;color:var(--ink-soft);
}
.chip:hover{border-color:var(--ink)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.is-hidden{display:none !important}
.empty-note{padding:34px 0;text-align:center;color:var(--muted)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:26px;counter-reset:step}
.step{position:relative;padding-top:26px;border-top:1px solid var(--line)}
.section--ink .step{border-top-color:rgba(255,255,255,.16)}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--display);font-size:.92rem;font-weight:600;letter-spacing:.06em;color:var(--accent);
  position:absolute;top:-1px;left:0;padding-top:12px;
}
.step h3{margin:22px 0 8px}
.step p{color:var(--muted);font-size:.94rem}
.section--ink .step p{color:rgba(251,249,245,.66)}

/* ---------- feature grid ---------- */
.features{display:grid;grid-template-columns:1fr;gap:14px}
.feature{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:24px;transition:transform .35s,box-shadow .35s}
.feature:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.feature__icon{width:46px;height:46px;border-radius:14px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;margin-bottom:16px}
.feature__icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
.feature h3{font-size:1.1rem;margin-bottom:8px}
.feature p{font-size:.92rem;color:var(--muted)}

/* inline links inside body copy — underlined so they read as links, not colour alone */
.prose a{color:var(--brand);font-weight:600;text-decoration:underline;text-decoration-color:rgba(15,92,74,.35);text-underline-offset:3px;transition:text-decoration-color .25s}
.prose a:hover{text-decoration-color:var(--brand)}
.split__media .float a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.feature__link{margin-top:auto;padding-top:14px;font-size:.85rem}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
.split__media{position:relative}
.split__media img{border-radius:var(--r-xl);width:100%;aspect-ratio:4/3.3;object-fit:cover;box-shadow:var(--shadow-lg)}
.split__media .float{
  position:absolute;right:12px;bottom:12px;background:var(--white);border-radius:var(--r);
  padding:14px 18px;box-shadow:var(--shadow-lg);max-width:230px;
}
.split__media .float b{font-family:var(--display);font-size:1rem;display:block;line-height:1.2;margin-bottom:4px}
.split__media .float span{font-size:.8rem;color:var(--muted)}
.prose p + p{margin-top:14px}
.prose p{color:var(--muted)}

/* ---------- reviews ---------- */
.reviews{
  display:grid;gap:14px;
  grid-auto-flow:column;grid-auto-columns:min(84%,330px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 10px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.reviews::-webkit-scrollbar{display:none}
.review{
  scroll-snap-align:start;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:22px;display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--shadow-sm);transition:transform .35s,box-shadow .35s;
}
.review:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.review__stars{display:flex;gap:2px;color:var(--accent)}
.review__stars svg{width:15px;height:15px;fill:currentColor}
.review__quote{font-size:.95rem;color:var(--ink-soft);flex:1}
.review__by{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line-soft)}
.review__avatar{
  width:42px;height:42px;flex:none;border-radius:50%;
  background:var(--brand-tint);color:var(--brand-deep);
  display:grid;place-items:center;font-weight:700;font-size:.86rem;letter-spacing:.02em;
}
.review__who b{display:block;font-size:.94rem;font-weight:600}
.review__who small{display:block;font-size:.78rem;color:var(--muted)}
.reviews-note{margin-top:22px;font-size:.85rem;color:var(--muted)}

/* ---------- team ----------
   Light band with a faint grid, a mixed-weight headline (bold sans against
   a light serif italic, underscored with a hand-drawn rule) and a row of
   portrait cards that scrolls on narrow screens and settles into four
   columns on desktop.                                                     */
.team-sec{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f6f3ec 100%)}
.team-sec::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(16,22,19,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(16,22,19,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 95% 75% at 50% 25%,#000 35%,transparent 100%);
  mask-image:radial-gradient(ellipse 95% 75% at 50% 25%,#000 35%,transparent 100%);
}
.team-sec > .wrap{position:relative;z-index:1}

.team-head{display:grid;gap:22px;margin-bottom:38px}
.team-title{
  font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(2.2rem,8.6vw,4rem);
}
.team-title .soft{
  font-family:var(--display);font-style:italic;font-weight:400;
  letter-spacing:-.015em;color:#a3b0a9;
}
.team-title .mark{position:relative;display:inline-block;white-space:nowrap}
.team-title .mark svg{
  position:absolute;left:-2%;bottom:-.2em;width:104%;height:.26em;
  color:var(--accent);overflow:visible;
}
.team-intro{
  border-left:2px solid rgba(16,22,19,.14);padding-left:18px;
  color:var(--muted);font-size:1rem;max-width:46ch;
}

.team-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,290px);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--gutter) * -1);padding:6px var(--gutter) 22px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.team-rail::-webkit-scrollbar{display:none}

.tcard{
  scroll-snap-align:center;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:28px 22px 24px;
  box-shadow:0 1px 2px rgba(16,22,19,.04),0 26px 44px -32px rgba(16,22,19,.45);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s,border-color .4s;
}
.tcard:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:transparent}
.tcard__avatar{
  width:112px;height:112px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;margin-bottom:18px;
  background:radial-gradient(120% 120% at 30% 20%,#eef5f1,#dfeae4);
  border:1px solid rgba(15,92,74,.16);
  font-family:var(--display);font-size:1.8rem;font-weight:600;letter-spacing:.02em;
  color:var(--brand-deep);
}
.tcard__avatar img{width:100%;height:100%;object-fit:cover}
.tcard__name{font-family:var(--sans);font-size:1.04rem;font-weight:700;letter-spacing:-.01em}
.tcard__role{
  margin-top:7px;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);
}
.tcard__rule{width:46px;height:1px;background:var(--line);margin:16px 0}
.tcard__bio{font-size:.87rem;line-height:1.6;color:var(--muted);text-wrap:pretty}
.tcard__socials{display:flex;gap:10px;margin-top:auto;padding-top:20px}
.tcard__socials a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--sand);color:var(--ink-soft);
  transition:background .25s,color .25s,transform .25s;
}
.tcard__socials a:hover{background:var(--brand);color:#fff;transform:translateY(-3px)}
.tcard__socials svg{width:16px;height:16px;fill:currentColor}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:20px 40px 20px 0;position:relative;
  font-family:var(--display);font-size:1.05rem;font-weight:600;line-height:1.3;
}
.acc__btn::after{
  content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:1.7px solid var(--ink);border-bottom:1.7px solid var(--ink);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.acc__item.is-open .acc__btn::after{transform:translateY(-25%) rotate(-135deg)}
.acc__panel{overflow:hidden;height:0;transition:height .35s cubic-bezier(.2,.7,.3,1)}
.acc__panel p{padding:0 8px 22px 0;color:var(--muted);font-size:.95rem}

/* ---------- gallery / lightbox ---------- */
.gal{cursor:zoom-in;border-radius:var(--r);overflow:hidden;background:var(--sand-deep);display:block;border:0;padding:0;width:100%}
.gal img{width:100%;transition:transform .7s}
.gal:hover img{transform:scale(1.05)}
.lightbox{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;
  background:rgba(8,12,10,.93);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox img{max-width:94vw;max-height:80svh;width:auto;border-radius:var(--r);box-shadow:var(--shadow-lg)}
.lightbox__close{position:absolute;top:14px;right:14px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:1.3rem;cursor:pointer}
.lightbox__nav{position:absolute;bottom:18px;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:1.2rem}
.lightbox__nav--prev{left:22%}
.lightbox__nav--next{right:22%}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;border-radius:var(--r-xl);isolation:isolate;color:#fff}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,rgba(10,63,51,.95),rgba(10,20,16,.8))}
.cta__inner{padding:34px 24px;display:grid;gap:20px;max-width:760px}
.cta__inner .logo-circle{width:68px;height:68px}
.cta__actions{display:grid;gap:10px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
.form{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-xl);padding:22px;box-shadow:var(--shadow-sm)}
.field{margin-bottom:16px}
.field label{display:block;font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;min-height:50px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ivory);font-size:16px; /* keeps iOS from zooming on focus */
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(15,92,74,.10)}
.field .err{display:none;color:#b3261e;font-size:.8rem;margin-top:6px;font-weight:600}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#b3261e}
.field.has-error .err{display:block}
.form__row{display:grid;grid-template-columns:1fr;gap:0}
.form__note{font-size:.8rem;color:var(--muted);margin-top:12px;text-align:center}
.form__ok{display:none;background:var(--brand-tint);border:1px solid rgba(15,92,74,.25);color:var(--brand-deep);border-radius:var(--r);padding:14px 16px;font-size:.9rem;font-weight:600;margin-bottom:18px}
.form__ok.is-shown{display:block}

.info-list{display:grid;gap:12px;margin-top:26px}
.info-item{display:flex;gap:14px;align-items:flex-start;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px 18px;transition:transform .3s,box-shadow .3s}
.info-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.info-item__icon{width:40px;height:40px;flex:none;border-radius:12px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center}
.info-item__icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.info-item__label{margin:0 0 3px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.info-item p,.info-item a{font-weight:600;font-size:.98rem;display:block}
.info-item a:hover{color:var(--brand)}

/* ---------- inner page hero ---------- */
.pagehero{position:relative;padding:calc(var(--header-h) + 54px) 0 44px;color:#fff;isolation:isolate;overflow:hidden}
.pagehero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pagehero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,14,12,.72),rgba(9,14,12,.58))}
.pagehero .lede{color:rgba(255,255,255,.8)}
.crumbs{font-size:.8rem;color:rgba(255,255,255,.66);margin-bottom:14px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li + li::before{content:"/";opacity:.45}
.crumbs [aria-current="page"]{color:rgba(255,255,255,.9)}
.crumbs a:hover{color:#fff}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:rgba(251,249,245,.72);padding-top:52px}
.footer__grid{display:grid;grid-template-columns:1fr;gap:32px}
.footer__title{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.footer a{color:rgba(251,249,245,.72);font-size:.93rem;display:inline-block;padding:6px 0;transition:color .2s,transform .2s}
.footer a:hover{color:#fff;transform:translateX(3px)}
.footer__about{max-width:34ch;font-size:.92rem;margin-top:16px}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:44px;height:44px;border-radius:13px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;padding:0;transition:all .25s}
.socials a:hover{background:#fff;color:var(--ink);transform:translateY(-3px)}
.socials svg{width:17px;height:17px}
.footer__bar{
  margin-top:38px;border-top:1px solid rgba(255,255,255,.12);padding-block:20px;
  display:flex;flex-direction:column;gap:8px;font-size:.82rem;
}
.footer__credit a{
  color:#fff;font-weight:600;padding:0;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px;
  transition:text-decoration-color .25s;
}
.footer__credit a:hover{transform:none;text-decoration-color:#fff}

/* parent brand */
.footer .footer__parent{
  display:block;margin-top:20px;padding:14px 18px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  max-width:max-content;transition:background .25s,border-color .25s;
}
.footer .footer__parent:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.footer__parent small{
  display:block;font-size:.64rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(251,249,245,.45);
}
.footer__parent-links{display:flex;align-items:center;gap:12px;margin-top:5px}
.footer .footer__parent-name{
  display:inline-flex;align-items:center;gap:7px;padding:0;
  font-family:var(--display);font-size:1.08rem;font-weight:600;color:#fff;
}
.footer .footer__parent-name:hover{transform:none}
.footer__parent-name svg{width:12px;height:12px;opacity:.55;transition:transform .25s}
.footer .footer__parent-name:hover svg{transform:translate(2px,-2px);opacity:1}
.footer .footer__parent-ig{
  width:30px;height:30px;padding:0;border-radius:9px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.65);
  transition:background .25s,color .25s;
}
.footer .footer__parent-ig:hover{background:#fff;color:var(--ink);transform:none}
.footer__parent-ig svg{width:14px;height:14px}

/* ---------- floating whatsapp (desktop) ---------- */
.fab{
  display:none;
  position:fixed;right:22px;bottom:22px;z-index:70;width:56px;height:56px;border-radius:50%;
  background:#1f9d55;color:#fff;place-items:center;box-shadow:0 14px 34px -12px rgba(31,157,85,.8);
  transition:transform .3s;
}
.fab:hover{transform:scale(1.08)}
.fab svg{width:27px;height:27px;fill:currentColor}

/* ---------- mobile action bar ---------- */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:75;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(251,249,245,.94);backdrop-filter:saturate(1.4) blur(14px);
  border-top:1px solid var(--line-soft);
  box-shadow:0 -10px 30px -24px rgba(16,22,19,.7);
}
.mobile-bar .btn{min-height:46px;box-shadow:none}

/* ---------- rotating banners ----------
   Populated from the CRM at runtime. The section stays display:none until a
   banner actually arrives, so an empty or unreachable CRM leaves no gap and
   causes no layout shift. */
.bnr{display:none}
.bnr.is-ready{display:block}
.bnr__frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  background:var(--brand-deep);min-height:300px;
}
.bnr__slide{
  position:absolute;inset:0;display:grid;align-items:center;
  opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s;
}
.bnr__slide.is-on{opacity:1;visibility:visible;position:relative}
.bnr__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.bnr__slide::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,26,21,.86),rgba(8,26,21,.45) 62%,rgba(8,26,21,.28));
}
.bnr__slide--center{text-align:center;justify-items:center}
.bnr__slide--center::after{background:linear-gradient(180deg,rgba(8,26,21,.5),rgba(8,26,21,.78))}

.bnr__body{padding:38px 24px 44px;color:#fff;max-width:640px;position:relative;z-index:1}
.bnr__eyebrow{
  display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#f4c98a;margin-bottom:12px;
}
.bnr__heading{font-family:var(--display);font-size:clamp(1.5rem,4.6vw,2.4rem);line-height:1.12}
.bnr__sub{margin-top:12px;font-size:.98rem;color:rgba(255,255,255,.84);max-width:46ch}
.bnr__slide--center .bnr__sub{margin-inline:auto}
.bnr__meta{
  margin-top:14px;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);
  font-size:.79rem;font-weight:700;
}
.bnr__actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.bnr__slide--center .bnr__actions{justify-content:center}

/* controls */
.bnr__dots{
  position:absolute;left:0;right:0;bottom:16px;z-index:3;
  display:flex;gap:8px;justify-content:center;align-items:center;
}
.bnr__dot{
  width:26px;height:4px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.35);transition:background .25s,width .25s;
}
.bnr__dot[aria-current="true"]{background:#fff;width:38px}
.bnr__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.3);background:rgba(8,26,21,.35);backdrop-filter:blur(8px);
  color:#fff;font-size:1.2rem;line-height:1;display:none;place-items:center;
  transition:background .25s;
}
.bnr__nav:hover{background:rgba(8,26,21,.6)}
.bnr__nav--prev{left:14px}
.bnr__nav--next{right:14px}
.bnr__pause{
  position:absolute;top:14px;right:14px;z-index:3;
  padding:7px 13px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(8,26,21,.35);backdrop-filter:blur(8px);
  color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}

@media (min-width:760px){
  .bnr__frame{min-height:360px}
  .bnr__body{padding:52px 56px 60px}
  .bnr__nav{display:grid}
  .bnr__dots{justify-content:flex-start;left:56px;right:56px;bottom:24px}
  .bnr__slide--center .bnr__dots{justify-content:center}
}
@media (min-width:1080px){
  .bnr__frame{min-height:420px}
}

/* ---------- CRM-controlled popup ----------
   Content comes from the CRM at runtime rather than the sync script: an
   announcement is time-sensitive and must be switchable without a publish,
   and it is promotional rather than indexable, so keeping it out of the
   static HTML costs nothing in search. It renders only after the CRM
   answers, so a slow or offline CRM simply means no popup.              */
.pop{position:fixed;z-index:130;opacity:0;pointer-events:none;transition:opacity .35s}
.pop.is-in{opacity:1;pointer-events:auto}

.pop__scrim{position:fixed;inset:0;background:rgba(8,12,10,.6);backdrop-filter:blur(3px)}
.pop__card{
  position:relative;background:var(--white);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(8,12,10,.55);
  transform:translateY(14px) scale(.98);transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.pop.is-in .pop__card{transform:none}
.pop__close{
  position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(251,249,245,.92);backdrop-filter:blur(6px);
  color:var(--ink);font-size:1.15rem;line-height:1;display:grid;place-items:center;
  transition:background .2s,transform .2s;
}
.pop__close:hover{background:#fff;transform:scale(1.08)}
.pop__img{width:100%;height:180px;object-fit:cover;display:block;background:var(--sand-deep)}
.pop__body{padding:26px 24px 24px}
.pop__eyebrow{
  display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand);margin-bottom:10px;
}
.pop__heading{font-family:var(--display);font-size:1.45rem;line-height:1.15;color:var(--ink)}
.pop__text{margin-top:10px;font-size:.94rem;color:var(--muted)}
.pop__meta{
  margin-top:12px;display:inline-flex;align-items:center;gap:8px;padding:7px 13px;
  border-radius:999px;background:var(--brand-tint);color:var(--brand-deep);
  font-size:.78rem;font-weight:700;
}
.pop__actions{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.pop__actions .btn{flex:1 1 auto;min-width:140px}

/* centre modal */
.pop--center{inset:0;display:grid;place-items:center;padding:20px}
.pop--center .pop__card{width:min(420px,100%);max-height:88svh;overflow-y:auto}

/* corner card — bottom LEFT, so it never covers the WhatsApp button */
.pop--corner{left:16px;bottom:calc(var(--bar-h) + 16px);width:min(340px,calc(100vw - 32px))}
.pop--corner .pop__img{height:130px}
.pop--corner .pop__body{padding:20px}
.pop--corner .pop__heading{font-size:1.2rem}

/* slim top banner */
.pop--banner{left:0;right:0;top:var(--header-h);padding:0}
.pop--banner .pop__card{
  border-radius:0;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px var(--gutter);background:var(--brand);color:#fff;box-shadow:none;
}
.pop--banner .pop__img{display:none}
.pop--banner .pop__body{padding:0;flex:1;min-width:200px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pop--banner .pop__eyebrow{color:#f4c98a;margin:0}
.pop--banner .pop__heading{font-size:1.02rem;color:#fff}
.pop--banner .pop__text{margin:0;color:rgba(255,255,255,.8);font-size:.88rem}
.pop--banner .pop__meta{background:rgba(255,255,255,.16);color:#fff;margin:0}
.pop--banner .pop__actions{margin:0}
.pop--banner .pop__meta{display:none}          /* the heading already carries the date */
.pop--banner .pop__actions .btn{min-width:0;padding:9px 18px;min-height:40px;--btn-bg:#fff;--btn-fg:var(--brand-deep);box-shadow:none}
.pop--banner .pop__actions .btn--ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.45)}
.pop--banner .pop__actions .btn--ghost:hover{--btn-bg:#fff;--btn-fg:var(--brand-deep)}
.pop--banner .pop__close{position:static;background:rgba(255,255,255,.16);color:#fff;width:34px;height:34px}
.pop--banner .pop__close:hover{background:rgba(255,255,255,.3)}

@media (min-width:900px){
  .pop--corner{bottom:16px;left:22px}
}
@media (max-width:600px){
  .pop--center .pop__card{width:100%}
  .pop--banner .pop__card{padding:12px var(--gutter) 14px}
  .pop__actions .btn{flex:1 1 100%}
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   ≥ 600px — large phones / small tablets
   ========================================================================== */
@media (min-width:600px){
  :root{--gutter:28px;--section:76px}
  .brand__logo{height:32px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
  .features{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .masonry{columns:2}
  .hero__actions{display:flex;flex-wrap:wrap;gap:12px}
  .cta__actions{display:flex;flex-wrap:wrap;gap:12px}
  .cta__inner{padding:40px 32px}
  .form__row{grid-template-columns:1fr 1fr;gap:16px}
  .form{padding:28px}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__bar{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
  .reviews{grid-auto-columns:min(62%,340px)}
  .lightbox__nav--prev{left:30%}
  .lightbox__nav--next{right:30%}
}

/* ==========================================================================
   ≥ 760px — tablets
   ========================================================================== */
@media (min-width:760px){
  :root{--gutter:36px;--section:88px;--header-h:70px}
  .brand__logo{height:36px}
  .section-head{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 44px;margin-bottom:40px}
  .lede{font-size:1.06rem}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .features{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reviews{
    grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));
    overflow:visible;margin-inline:0;padding:0;gap:18px;
  }
  .review{padding:26px}
  .planner{grid-template-columns:1fr 1fr;gap:6px;padding:12px}
  .planner__field + .planner__field{border-top:0}
  .planner__field:nth-child(2){border-left:1px solid var(--line-soft)}
  .planner .btn{grid-column:span 2;margin-top:2px}
  .hero__inner{padding-bottom:42px}
  .pagehero{padding:calc(var(--header-h) + 78px) 0 62px}
  .split__media img{aspect-ratio:16/11}
  .acc__btn{padding:24px 46px 24px 0;font-size:1.15rem}
  .filters{margin-inline:0;padding:0;flex-wrap:wrap;overflow:visible;margin-bottom:32px}
  .cta__inner{padding:52px 48px}
}

/* ==========================================================================
   ≥ 900px — desktop layout: real nav, no mobile bar
   ========================================================================== */
@media (min-width:900px){
  :root{--gutter:44px;--section:104px;--header-h:76px;--bar-h:0px}
  body{padding-bottom:0}
  .mobile-bar{display:none}
  .fab{display:grid}
  .burger{display:none}
  .nav{display:flex;align-items:center;gap:4px}
  .nav a{
    position:relative;padding:9px 12px;border-radius:999px;
    font-size:.9rem;font-weight:500;color:var(--ink-soft);
    transition:background .2s,color .2s;
  }
  .nav a:hover{background:rgba(16,22,19,.06)}
  .nav a.is-active{color:var(--brand);font-weight:600}
  .header__inner{gap:18px}
  .header__cta{margin-left:10px}
  /* from here up the hero crop is reliably dark, so the logo can sit bare */
  .header:not(.is-solid).on-hero .brand{background:transparent;padding:5px 8px}
  .contact-grid{grid-template-columns:1fr 1fr;gap:44px}
  .team-head{grid-template-columns:1.15fr .85fr;align-items:end;gap:40px}
  .team-intro{margin-bottom:6px}
  .split{grid-template-columns:1.05fr .95fr;gap:52px}
  .split__media img{aspect-ratio:4/4.4}
  .split__media .float{right:-14px;bottom:26px;padding:18px 22px;max-width:250px}
  .footer{padding-top:76px}
  .footer__grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
  .marquee__track{gap:56px}
  .marquee__item{font-size:1.1rem}
  .lightbox{padding:24px}
  .lightbox img{max-width:min(1100px,92vw);max-height:86vh}
  .lightbox__nav{top:50%;bottom:auto;transform:translateY(-50%)}
  .lightbox__nav--prev{left:20px}
  .lightbox__nav--next{right:20px}
}

/* ==========================================================================
   ≥ 1080px
   ========================================================================== */
@media (min-width:1080px){
  :root{--gutter:52px;--section:118px}
  .team-rail{
    grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
    overflow:visible;margin-inline:0;padding:6px 0 0;
  }
  .tcard{padding:32px 26px 28px}
  .tcard__avatar{width:124px;height:124px;font-size:2rem}
  .brand__logo{height:40px}
  .footer .brand__logo{height:44px}
  .header__cta .btn--ghost{display:inline-flex}
  .nav a{padding:9px 14px;font-size:.92rem}
  .masonry{columns:3;column-gap:20px}
  .masonry > *{margin-bottom:20px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px}
  .reviews{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .features{grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:20px}
  .features--5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .features--5 .feature{padding:24px 20px}
  .features--5 .feature__icon{width:44px;height:44px;margin-bottom:14px}
  .features--5 .feature h3{font-size:1rem}
  .features--5 .feature p{font-size:.87rem}
  .pin--tall img{aspect-ratio:3/4.35}
  .pin--mid img{aspect-ratio:4/4.2}
  .card__body{padding:24px}
  .cta__inner{padding:72px 64px}
  .form{padding:36px}
  .hero__inner{padding-bottom:46px}
}

/* ==========================================================================
   ≥ 1280px
   ========================================================================== */
@media (min-width:1280px){
  :root{--gutter:56px;--section:128px}
  .hero{min-height:min(94svh,880px)}
  .pagehero{padding:calc(var(--header-h) + 112px) 0 86px}
}

/* ---------- motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}

@media print{
  .header,.drawer,.mobile-bar,.fab,.marquee,.lightbox{display:none !important}
  body{padding:0;background:#fff}
  .reveal{opacity:1;transform:none}
}