/* ------------------------------------------------------------------
   Pathway Property — Melbourne landing page.
   Tokens, type and components mirror the live pathwayprop.com.au
   design system (Webflow site 64d063d22c0ee57d46bfca71).
------------------------------------------------------------------- */
:root{
  color-scheme:light;

  --ground:#C4D9D6;        /* page ground — sampled from the live navbar's own band, so
                              the first fold meets the navbar with no seam */
  --shell:#FAF8F5;         /* surfaces: navbar, cards, light buttons */
  --cream:#F5F2EB;         /* card + alternating band fill */
  --ink:#090D2B;           /* Midnight — text and every outline */
  --ink-60:rgba(9,13,43,.7);
  --ink-45:rgba(9,13,43,.62);
  --hair:rgba(9,13,43,.14);
  --green:#206E65;         /* PATHWAY GREEN */
  --green-deep:#17544D;
  --green-tint:rgba(32,110,101,.12);
  --on-green:#F1EFE9;
  --on-green-70:rgba(241,239,233,.72);
  --on-green-45:rgba(241,239,233,.45);
  --mint:#9CC7BE;
  --star:#E9A02C;

  --stroke:1.5px solid var(--ink);
  --pill:1000px;
  --shadow-green:11px 22px 20px 0 rgba(32,110,101,.22);

  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}html{scroll-behavior:auto}}
img{max-width:100%}
a{color:inherit}

h1,h2,h3,h4{margin:0;font-weight:700;color:var(--ink);line-height:1.06;text-wrap:balance}
h1{font-size:clamp(2.35rem,5vw,4rem);letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:-.032em}
h3{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;line-height:1.25}
p{margin:0 0 1rem;color:var(--ink-60)}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 5%}
.section{padding:100px 0;display:block}  /* display:block resets the site's own .section, which is flex-column */
.section-tight{padding:72px 0}
.band-cream{background:var(--cream);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.eyebrow{color:var(--green);font-size:1.0625rem;font-weight:600;margin-bottom:14px;
  /* the Webflow site has its own .eyebrow (a dashed uppercase pill). Same specificity,
     so this sheet wins only where it declares something: reset each leaked property. */
  border:0;border-radius:0;padding:0;text-transform:none;letter-spacing:normal;line-height:inherit}
.lead{font-size:1.0625rem;max-width:38em}
.stack{display:flex;flex-direction:column;gap:1.1rem}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}

/* buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border:var(--stroke);border-radius:var(--pill);
  font-family:var(--font);font-size:.9375rem;font-weight:500;line-height:1.5;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 1px 2px 0 rgba(9,13,43,.05)}
.btn-primary:hover{background:var(--green-deep)}
.btn-secondary{background:transparent;color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:var(--shell)}
.btn-cream{background:var(--shell);color:var(--ink)}
.btn-cream:hover{background:#fff}
.btn-on-green{background:transparent;color:var(--on-green);border-color:var(--on-green-45)}
.btn-on-green:hover{background:rgba(241,239,233,.14);border-color:var(--on-green)}
.btn-sm{padding:.65rem 1.15rem;font-size:.875rem}
.btn-block{width:100%}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:8px}

/* image slots ---------------------------------------------------- */
.shot{
  position:relative;overflow:hidden;margin:0;
  border:var(--stroke);border-radius:30px;
  /* placeholder treatment: shows until the real photo loads over it */
  background-color:#206E65;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='200' viewBox='0 0 320 200'><g fill='none' stroke='rgb(241,239,233)' stroke-opacity='.16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 150h60v-42l-30-24-30 24z'/><path d='M50 150v-26h18v26'/><path d='M96 150h74v-56l-37-28-37 28z'/><path d='M120 150v-30h26v30'/><path d='M186 150h58v-38l-29-22-29 22z'/><path d='M258 150h44v-30l-22-16-22 16z'/><path d='M8 150h304'/></g></svg>"),linear-gradient(155deg,#2E8478 0%,#206E65 45%,#123F39 100%);
  background-repeat:no-repeat,no-repeat;
  background-position:center 78%,center;
  background-size:82% auto,cover;
}
.shot img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.shot .slot{
  position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  align-content:center;padding:20px 20px 34%;text-align:center;font-size:.8125rem;line-height:1.5;
  color:var(--on-green-70);font-weight:500;
}
.shot .slot b{display:block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:6px}
.play{
  position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;border:1.5px solid var(--ink);
  background:var(--shell);display:grid;place-items:center;
  transition:transform .3s ease;
}
.shot:hover .play{transform:translate(-50%,-50%) scale(1.06)}
.play svg{margin-left:3px}

/* hero ----------------------------------------------------------- */
/* The navbar is out of the flow and overlaps the hero on both builds, sitting
   17px into it and reaching 93px down. Padding on body does NOT help: it moves
   the navbar and the hero together and only adds dead space above everything.
   The clearance has to live here, inside the hero, below the navbar's footprint:
   93px to clear it, then the gap you actually see. */
.hero{position:relative;padding:136px 0 88px}
.hero-clouds{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.cloud{position:absolute;fill:#fff;opacity:.85}
/* a fixed offset, not a percentage: the navbar floats over the top of the
   hero, and a percentage of a variable hero height drifts under it */
.cloud-1{top:150px;left:-4%;width:230px;animation:drift 34s ease-in-out infinite}
.cloud-2{top:34%;right:-3%;width:150px;animation:drift 28s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(26px)}}
.hero .wrap{position:relative;z-index:1}
.rating{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-size:.9375rem;color:var(--ink-60)}
.rating-link{
  color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(9,13,43,.28);transition:color .3s ease,text-decoration-color .3s ease;
}
.rating-link:hover{color:var(--green);text-decoration-color:var(--green)}
.stars{display:flex;gap:3px}
.stars svg{display:block;fill:var(--star)}
@media(max-width:1080px){.hero-clouds{display:none}}
@media(max-width:767px){.hero{padding-top:128px}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1 em{font-style:normal;color:var(--green);display:block}
.hero-lede{font-size:1.125rem;max-width:33em;margin-top:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-lede strong{color:var(--ink);font-weight:700}
/* the three headline numbers, sourced from the owner-occupier deck */
.hero-stats{
  display:flex;flex-wrap:wrap;gap:14px 40px;margin:36px 0 0;
  padding-top:26px;border-top:1px solid var(--hair);
}
.hero-stats>div{flex:1 1 150px;max-width:220px}
.hero-stats dt{
  font-size:1.875rem;font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--green);font-variant-numeric:tabular-nums;
}
.hero-stats dd{margin:6px 0 0;font-size:.8125rem;line-height:1.45;color:var(--ink-60)}
@media(max-width:940px){.hero-stats{gap:20px 30px}.hero-stats dt{font-size:1.625rem}}
.hero-media{position:relative;padding-bottom:58px;padding-left:84px}
.hero-media .shot-main{aspect-ratio:4/3.6;border-radius:50px;box-shadow:var(--shadow-green)}
/* the photo is 3:4 portrait; this frame trims the sky and the footpath
   and centres the faces and the sign */
.hero-media .shot-main img{object-position:50% 46%}
.hero-media .shot-inset{
  position:absolute;left:0;bottom:0;width:38%;aspect-ratio:1;
  border-radius:30px;background-color:#1B5E56;
  /* .shot img is z-index:1, so without this the main photo's image paints over
     this frame's outline wherever the two overlap and the border disappears */
  z-index:2;
}
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-media{padding-left:0;padding-bottom:0}
  .hero-media .shot-inset{display:none}
  .hero-media .shot-main{aspect-ratio:4/3.8;border-radius:36px}
}

/* proof — auto-scrolling strip of sold photos --------------------- */
.marquee{margin-top:36px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee-track{display:flex;gap:20px;width:max-content;animation:marquee 62s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee .shot{flex:0 0 300px;aspect-ratio:4/5}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 10px))}}
@media(max-width:640px){.marquee .shot{flex-basis:230px}}
@media (prefers-reduced-motion: reduce){
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none}
}

/* good fit ------------------------------------------------------- */
.fit-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:stretch}
.fit-list{list-style:none;margin:28px 0 0;padding:0}
.fit-list li{position:relative;padding:20px 0 20px 38px;border-bottom:1px solid var(--hair)}
.fit-list li:last-child{border-bottom:0}
.fit-list li:before{
  content:"";position:absolute;left:0;top:1.85em;width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--green);background:var(--green-tint);
}
.fit-list h3{font-size:1.125rem;margin-bottom:6px}
.fit-lede{font-size:1.0625rem;margin-top:18px;margin-bottom:6px}
.fit-list p{font-size:.9375rem;margin:0}
/* numbers pulled from the owner-occupier sales deck read as data, not emphasis */
.fit-list strong,.flow-intro strong,.flow-card strong{color:var(--green);font-weight:700;font-variant-numeric:tabular-nums}
.om-col strong{color:var(--shell);font-weight:700;font-variant-numeric:tabular-nums}
/* no aspect ratio: the frame stretches to whatever height the list beside it
   ends up being, so the two columns always end level */
.fit-grid .shot{border-radius:50px;min-height:440px}
.shot-inspection img{object-position:50% 42%}
@media(max-width:900px){
  .fit-grid{grid-template-columns:1fr;gap:36px}
  /* stacked, so the frame needs its own shape again */
  .fit-grid .shot{aspect-ratio:4/5;min-height:0}
}

/* area ----------------------------------------------------------- */
.panel-green{background:var(--green);border-radius:50px;padding:76px 6%;color:var(--on-green)}
.panel-green h2,.panel-green h3{color:var(--shell)}
.panel-green p{color:var(--on-green-70)}
.panel-green .eyebrow{color:var(--mint)}
@media(max-width:900px){.panel-green{border-radius:36px;padding:52px 8%}}
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
/* where we buy — interactive region map ---------------------------- */
.area-left{display:flex;flex-direction:column}
.area-left h2{margin:0}
.area-left>p{margin:16px 0 36px;max-width:44ch}
.map-box{
  background:rgba(255,255,255,.06);border:1px solid var(--on-green-45);
  border-radius:30px;padding:18px;display:flex;align-items:center;justify-content:center;
}
.melb-map{display:block;width:100%;height:auto}
.region{
  fill:rgba(241,239,233,.14);stroke:rgba(241,239,233,.55);stroke-width:2.4;
  cursor:pointer;transition:fill .25s ease;outline:none;
}
/* one base colour, four shades of it for the four territories. The strokes
   are untouched, so every region boundary still reads inside a territory. */
.region[data-territory="north"]{fill:rgba(241,239,233,.09)}
.region[data-territory="west"]{fill:rgba(241,239,233,.16)}
.region[data-territory="east"]{fill:rgba(241,239,233,.23)}
.region[data-territory="south"]{fill:rgba(241,239,233,.30)}
.region:hover{fill:rgba(241,239,233,.32)}
.region:focus-visible{fill:rgba(241,239,233,.32);stroke:#FAF8F5;stroke-width:5}
.region.is-on{fill:#F5F2EB;stroke:#FAF8F5;stroke-width:3.4}
.map-labels text{
  font-family:var(--font);font-size:26px;font-weight:600;fill:var(--on-green-70);
  text-anchor:middle;pointer-events:none;paint-order:stroke;
}
.map-labels .lbl-small{font-size:19px}
.map-labels text.is-on{fill:var(--green);font-weight:700}
.region.is-hot{fill:rgba(241,239,233,.42)}

/* agent pins — teardrop, face in the head, tip on the region --------- */
.pin{cursor:pointer;outline:none}
.pin-body{fill:var(--green-deep);stroke:rgba(241,239,233,.8);stroke-width:4;transition:fill .25s ease,stroke .25s ease}
.pin-disc{fill:var(--cream)}
.pin-initial{
  font-family:var(--font);font-size:34px;font-weight:700;letter-spacing:.02em;fill:var(--green);
  text-anchor:middle;pointer-events:none;
}
.pin-ring{fill:none;stroke:rgba(241,239,233,.8);stroke-width:4;transition:stroke .25s ease,stroke-width .25s ease}
.pin-tag rect{fill:#FAF8F5;stroke:#090D2B;stroke-width:1.5}
.pin-tag text{
  font-family:var(--font);font-size:26px;font-weight:700;fill:#090D2B;
  text-anchor:middle;pointer-events:none;
}
.pin-tag{opacity:0;transition:opacity .2s ease}
.pin:hover .pin-tag,.pin:focus-visible .pin-tag,.pin.is-hot .pin-tag{opacity:1}
/* the whole pin fills with cream on hover, so the face reads against it */
.pin:hover .pin-body,.pin:focus-visible .pin-body,.pin.is-hot .pin-body{fill:#FAF8F5;stroke:#FAF8F5}
.pin:hover .pin-ring,.pin:focus-visible .pin-ring,.pin.is-hot .pin-ring{stroke:#FAF8F5;stroke-width:5}
@media (prefers-reduced-motion: reduce){.pin-tag,.pin-body,.pin-ring{transition:none}}

.region-card{
  margin-top:auto;background:rgba(255,255,255,.07);border:1px solid var(--on-green-45);
  border-radius:30px;padding:26px 28px;
}
.region-card h3{color:var(--shell);font-size:1.375rem;font-weight:700;letter-spacing:-.02em;margin:0 0 18px}
.region-card .btn{margin-top:24px}
@media(max-width:900px){.region-card{margin-top:0;padding:22px;border-radius:26px}}

.pill-label{margin-top:26px;font-size:.8125rem;font-weight:600;color:var(--mint)}
.pill-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pill{border:1.5px solid var(--on-green-45);border-radius:var(--pill);padding:9px 19px;font-size:.9375rem;font-weight:500;color:var(--on-green)}
.pill-soft{border-color:transparent;background:rgba(241,239,233,.12)}
.pill-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pill-row .pill{padding:8px 17px;font-size:.875rem}
@media(max-width:900px){
  .area-grid{grid-template-columns:1fr;gap:34px}
  .area-left>p{margin-bottom:28px;max-width:none}
}

/* how it works — sticky stacking cards (as the About page values) -- */
.flow-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:64px;align-items:start}
.flow-intro{position:sticky;top:150px}
.flow-intro p{margin-top:16px;max-width:26em}

.flow-stack{display:flex;flex-direction:column;gap:22px;padding-bottom:14vh}
.flow-card{
  position:sticky;top:calc(140px + var(--i) * 14px);
  background:var(--cream);border:var(--stroke);border-radius:40px;
  padding:32px 36px;display:grid;grid-template-columns:52px 1fr;gap:0 22px;
}
.flow-card .flow-num{
  grid-column:1;width:44px;height:44px;border:var(--stroke);border-radius:50%;
  background:var(--green);color:var(--shell);
  display:grid;place-items:center;font-size:.9375rem;font-weight:600;
}
.flow-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px;min-height:44px}
.flow-kicker{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-45)}
.flow-when{
  border:1.5px solid rgba(32,110,101,.35);border-radius:var(--pill);
  padding:4px 14px;font-size:.8125rem;font-weight:600;color:var(--green);white-space:nowrap;
}
.flow-card h3{font-size:1.375rem;margin-bottom:10px}
.flow-card p{font-size:.9375rem;margin:0;max-width:46em}

/* step seven: one quiet burst from the step number as the card arrives.
   Brand colours, thin slivers, gone in under two seconds. Never repeats. */
.flow-cheer{position:absolute;left:58px;top:54px;width:0;height:0;pointer-events:none;z-index:2}
.flow-cheer i{
  position:absolute;left:-2px;top:-6px;width:4px;height:12px;border-radius:2px;
  background:var(--c);opacity:0;
  animation:cheer 1500ms cubic-bezier(.17,.75,.3,1) var(--d) forwards;
}
@keyframes cheer{
  0%{opacity:0;transform:translate(0,0) rotate(0) scale(.5)}
  14%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}
}
.flow-cheer .halo{
  position:absolute;left:-34px;top:-34px;width:68px;height:68px;border-radius:50%;
  border:1.5px solid var(--green);opacity:0;
  animation:cheer-halo 1100ms ease-out forwards;
}
@keyframes cheer-halo{
  0%{opacity:.5;transform:scale(.4)}
  100%{opacity:0;transform:scale(2)}
}
@media(max-width:960px){.flow-cheer{left:44px;top:46px}}
@media (prefers-reduced-motion: reduce){.flow-cheer{display:none}}

/* scroll reveal — added by script so the cards still show without JS */
.js-reveal .flow-card{opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .55s ease}
.js-reveal .flow-card.is-in{opacity:1;transform:none}

@media(max-width:960px){
  .flow-layout{grid-template-columns:1fr;gap:34px}
  .flow-intro{position:static}
  .flow-card{top:calc(120px + var(--i) * 10px);padding:26px 24px;border-radius:32px;grid-template-columns:44px 1fr;gap:0 16px}
  .flow-card .flow-num{width:36px;height:36px;font-size:.875rem}
  .flow-head{min-height:36px;flex-wrap:wrap;gap:8px}
}
@media (prefers-reduced-motion: reduce){
  .flow-card{position:static}
  .flow-intro{position:static}
  .js-reveal .flow-card{opacity:1;transform:none}
}

/* off market ----------------------------------------------------- */
.om-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:stretch}
.om-grid .shot{aspect-ratio:16/10;border-radius:30px;margin-top:26px}
.om-col{display:flex;flex-direction:column}
.om-col .shot{margin-top:auto}
.form-card{
  background:rgba(255,255,255,.07);border:1px solid var(--on-green-45);
  border-radius:30px;padding:32px 30px;
  display:flex;flex-direction:column;
}
.form-card .btn{margin-top:auto}
.form-card .field:last-of-type{margin-bottom:22px}
.form-card h3{margin-bottom:8px}
.form-card p{font-size:.9375rem;margin-bottom:20px}
.field{margin-bottom:12px}
.field label{display:block;font-size:.8125rem;font-weight:600;color:var(--mint);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 18px;border-radius:var(--pill);
  border:1.5px solid var(--on-green-45);background:rgba(0,0,0,.16);color:var(--on-green);
  font-family:var(--font);font-size:.9375rem;
  /* height and margin are declared, not left to default: Webflow's own
     .w-input/.w-select pin every field to 38px, which leaves 12px of content
     box for 15px text and slices the select's label in half. */
  height:auto;line-height:normal;margin-bottom:0;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(241,239,233,.42)}
.field textarea{border-radius:24px;resize:vertical;min-height:92px;line-height:1.6}
.form-note{font-size:.8125rem;color:var(--on-green-70);margin-top:14px}

/* suburb picker: chips inside the field, suggestions under it ------- */
.combo{position:relative}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0 0 8px;padding:0}
.chips:empty{display:none}
.chips li{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(241,239,233,.16);border:1px solid var(--on-green-45);
  border-radius:var(--pill);padding:5px 6px 5px 14px;font-size:.875rem;color:var(--on-green);
}
.chips button{
  width:20px;height:20px;flex-shrink:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.22);color:var(--on-green);font-size:13px;line-height:1;
  display:grid;place-items:center;padding:0;
}
.chips button:hover{background:rgba(0,0,0,.42)}
.combo-list{
  /* hidden by CSS, not by the hidden attribute alone: on the Webflow build the
     attribute is stored but does not reach the published markup, and the list
     rendered as an empty white bar over the field hint. */
  display:none;
  list-style:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;
  margin:0;padding:6px;max-height:214px;overflow-y:auto;
  background:var(--shell);border:var(--stroke);border-radius:22px;
  box-shadow:0 14px 28px rgba(9,13,43,.18);
}
.combo-list.is-open{display:block}
.combo-list li{
  padding:9px 14px;border-radius:14px;font-size:.9375rem;color:var(--ink);cursor:pointer;
}
.combo-list li[aria-selected="true"],.combo-list li:hover{background:var(--green-tint);color:var(--green);font-weight:600}
.field-hint{font-size:.75rem;color:var(--on-green-70);margin:7px 0 0}

/* native selects sit on a dark card, so draw our own caret and keep the
   option list readable in both light and dark browser chrome */
.field select{
  appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23F1EFE9' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;
}
.field select option{background:var(--green-deep);color:var(--on-green)}
.field select:has(option[value=""]:checked){color:rgba(241,239,233,.42)}
.field-last{margin-bottom:22px}
.form-note a{color:var(--mint);font-weight:600}
@media(max-width:900px){.om-grid{grid-template-columns:1fr;gap:34px}}

/* agent slider — one card at a time, tabs carry the other three ---- */
.agent-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}
.agent-tabs{display:flex;flex-wrap:wrap;gap:8px}
.agent-tab{
  border:1.5px solid var(--ink);border-radius:var(--pill);background:transparent;
  padding:9px 20px;font-family:var(--font);font-size:.875rem;font-weight:500;color:var(--ink);
  cursor:pointer;transition:background-color .3s ease,color .3s ease,border-color .3s ease;
  /* Webflow imports every <button> as a Link, and an <a> has none of the button
     UA defaults: without these the pills inherit the body's 1.7 line-height and
     grow from 36px to 44px, which throws the row out against the 48px arrows. */
  line-height:normal;text-align:center;text-decoration:none;display:block;
}
.agent-tab:hover{background:var(--green-tint)}
.agent-tab[aria-selected="true"]{background:var(--green);border-color:var(--green);color:#fff}

.slider-nav{display:flex;gap:10px}
.arrow{
  width:48px;height:48px;border-radius:50%;border:var(--stroke);background:transparent;
  color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:1.2rem;
  transition:background-color .3s ease,color .3s ease;
  line-height:1;text-decoration:none;  /* as above: an <a> on the Webflow build */
}
.arrow:hover{background:var(--ink);color:var(--shell)}

/* native scroll-snap: swipes and works with the script disabled */
.track-wrap{
  margin-top:24px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
}
.track-wrap::-webkit-scrollbar{display:none}
.track{display:flex}
.agent-card{
  flex:0 0 100%;scroll-snap-align:start;
  background:var(--cream);border:var(--stroke);border-radius:50px;padding:40px;
  display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center;
}
.agent-card .shot{aspect-ratio:4/5;border-radius:36px}
.agent-card .shot img{object-position:50% 28%}
.agent-body{position:relative}
.agent-count{
  position:absolute;top:2px;right:0;font-size:.75rem;font-weight:700;
  letter-spacing:.14em;color:var(--ink-45);font-variant-numeric:tabular-nums;
}
.agent-role,.agent-area{
  display:inline-block;background:var(--green-tint);color:var(--green);border-radius:var(--pill);
  padding:5px 15px;font-size:.8125rem;font-weight:600;margin-bottom:16px;
}
/* the area chip is the secondary of the pair, so it reads as an outline */
.agent-area{background:transparent;border:1.5px solid rgba(32,110,101,.35)}
.agent-card h3{font-size:2rem;font-weight:700;letter-spacing:-.03em;margin-bottom:6px}
.agent-card p{font-size:.9375rem;margin-bottom:26px;max-width:38em}

@media(max-width:520px){.agent-tab{padding:8px 14px;font-size:.8125rem}}
@media(max-width:900px){
  .agent-card{grid-template-columns:1fr;gap:26px;padding:26px;border-radius:36px;justify-items:start}
  .agent-card .shot{width:100%;max-width:240px;aspect-ratio:1;border-radius:28px}
  .agent-card h3{font-size:1.625rem}
  .agent-count{position:static;display:block;margin-bottom:10px}
}

/* podcast ---------------------------------------------------------- */
.pod{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-top:34px}
.pod .shot{aspect-ratio:16/9;border-radius:30px}
.shot-link{position:absolute;inset:0;z-index:3;display:block}
.pod-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pod-actions .btn{gap:.6rem}
.pod-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pod-tag{border:1.5px solid var(--hair);border-radius:var(--pill);padding:6px 15px;font-size:.8125rem;font-weight:600;color:var(--ink-60)}
@media(max-width:900px){.pod{grid-template-columns:1fr;gap:28px}}

/* faq ------------------------------------------------------------ */
.faq{display:flex;flex-direction:column;gap:12px;margin-top:38px}
details{background:var(--cream);border:var(--stroke);border-radius:30px;overflow:hidden}
summary{cursor:pointer;list-style:none;position:relative;padding:22px 64px 22px 28px;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary:after{
  content:"";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:1.5px solid var(--green);border-radius:50%;
  /* drawn as two bars rather than glyphs — "+" and "–" sit on different
     baselines in this face, which is what made the marker look low */
  background-image:linear-gradient(var(--green),var(--green)),linear-gradient(var(--green),var(--green));
  background-repeat:no-repeat;background-position:center,center;
  background-size:12px 1.5px,1.5px 12px;
}
details[open] summary:after{background-size:12px 1.5px,0 0}
details .faq-a{padding:0 64px 24px 28px}
details .a p{font-size:.9375rem}

/* booking — full-width card, no orphaned column ------------------ */
.booking{background:var(--green);color:var(--on-green);border-radius:100px 100px 0 0;margin-top:48px;padding:96px 0 40px}
.booking h2{color:var(--shell);margin-bottom:16px}
.booking .eyebrow{color:var(--mint)}
.booking-head{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:end;margin-bottom:34px}
.booking-head h2{margin-bottom:0}
.booking-lede{font-size:1.0625rem;color:var(--on-green-70);max-width:34em;margin:0 0 6px}

.booking-card{background:rgba(255,255,255,.07);border:1px solid var(--on-green-45);border-radius:40px;padding:34px 36px}
/* Webflow wraps every form in a <div class="w-form"> and puts our class on the
   WRAPPER, building the real <form> as its child. The fields therefore sit one
   level below whatever layout the class carries: the booking grid ended up with
   three children (the form and Webflow's success and error messages) and the
   fields stacked inside the form. So each form container declares its layout on
   a child <form> as well, and the wrapper steps out of the way. Locally there is
   no form inside a form, so the extra selectors are inert. */
.form-grid,.form-grid>form{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 20px}
.form-fields,.form-fields>form{display:contents}
.form-grid.w-form,.form-fields.w-form,.sub-form.w-form{display:contents}
/* the honeypot: off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:14px 0 0;font-size:.875rem;color:var(--on-green-70);min-height:1.2em}
.form-status.is-bad{color:#FFD7C2}
.form-grid .field{margin-bottom:0}
.field-wide{grid-column:1 / -1}

.booking-foot{
  display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;justify-content:space-between;
  margin-top:28px;padding-top:26px;border-top:1px solid var(--on-green-45);
}
.booking-alt{font-size:.9375rem;color:var(--on-green-70);margin:0;max-width:34em}
.booking-foot .btn{flex-shrink:0}

@media(max-width:1040px){
  .booking-head{grid-template-columns:1fr;gap:22px;align-items:start}
  .booking-foot{align-items:stretch}
}
@media(max-width:760px){
  .form-grid,.form-grid>form{grid-template-columns:1fr 1fr}
  .booking-card{padding:26px 22px;border-radius:32px}
  .booking-foot .btn{width:100%;text-align:center}
}
@media(max-width:520px){.form-grid,.form-grid>form{grid-template-columns:1fr}}
@media(max-width:900px){.booking{border-radius:50px 50px 0 0;padding:64px 0 32px}}

/* footer --------------------------------------------------------- */
.newsletter{
  margin-top:64px;padding-top:36px;border-top:1px solid var(--on-green-45);
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
.newsletter h3{color:var(--shell);margin-bottom:8px}
.newsletter p{font-size:.9375rem;color:var(--on-green-70)}
.sub-form,.sub-form>form{display:flex;gap:10px;flex-wrap:wrap}
.sub-form input{
  flex:1 1 240px;padding:13px 20px;border-radius:var(--pill);
  border:1.5px solid var(--on-green-45);background:rgba(0,0,0,.16);color:var(--on-green);
  font-family:var(--font);font-size:.9375rem;
}
.sub-form input::placeholder{color:rgba(241,239,233,.42)}
.sub-note{font-size:.75rem;color:var(--on-green-45);margin-top:10px}
.foot-contact{
  display:flex;flex-wrap:wrap;gap:44px;
  margin-top:44px;padding-top:28px;border-top:1px solid var(--on-green-45);
}
.foot-contact .k{font-size:.8125rem;font-weight:600;color:var(--mint);margin-bottom:2px}
.foot-contact .v{font-size:1.0625rem;font-weight:600;color:var(--shell);text-decoration:none}
.foot-contact a.v:hover{text-decoration:underline}
.foot-in{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;
  margin-top:32px;padding-top:24px;border-top:1px solid var(--on-green-45);
  font-size:.875rem;color:var(--on-green-70);
}
.foot-in a{color:var(--on-green-70);text-decoration:none;margin-right:20px}
.foot-in a:hover{color:var(--shell)}
@media(max-width:860px){.newsletter{grid-template-columns:1fr;gap:22px}}