@charset "utf-8";
/* ==========================================================================
   Stadium Real Estate — static rebuild
   Brand tokens sampled from the previous site; layout/rhythm rebuilt.
   Contents: 1 tokens · 2 reset · 3 typography · 4 layout · 5 buttons
             6 forms · 7 header/nav · 8 hero · 9 search · 10 cards
             11 listings · 12 detail · 13 sections · 14 slider · 15 footer
             16 utilities · 17 motion
   ========================================================================== */

/* ---------------------------------------------------------- 1. tokens --- */
:root{
  --primary:#07074E;
  --primary-700:#0b0b63;
  --primary-900:#050538;
  --secondary:#91BEE6;
  --secondary-600:#6ea6d6;
  --secondary-50:#EBF3FA;  /* logo blue mixed ~82% into white */
  --accent:#00BBFF;
  --text:#54595F;
  --heading:#07074E;
  --muted:#7A7A7A;
  --light:#FFFFFF;
  --tint:#ECFAFF;
  --paper:#F7F9FC;
  --border:#EAEAEA;
  --field:#FAFAFA;
  --on-dark:#F7F7FF;
  --on-dark-muted:#c9cfe4;

  --ok:#0d7a4a;
  --err:#c0392b;
  --gold:#e8b44a;

  --font-head:"Josefin Sans","Segoe UI",system-ui,sans-serif;
  --font-body:Montserrat,"Segoe UI",system-ui,-apple-system,sans-serif;
  --font-script:Satisfy,"Segoe Script",cursive;
  --font-alt:Roboto,"Segoe UI",system-ui,-apple-system,sans-serif;

  --radius-sm:3px;
  --radius:5px;
  --radius-lg:10px;
  --radius-xl:16px;

  --shadow-card:0 0 24px 4px rgba(0,0,255,.15);
  --shadow-soft:0 2px 12px rgba(7,7,78,.08);
  --shadow-lift:0 14px 38px -12px rgba(7,7,78,.34);

  /* One container width across the whole site: header, footer and every
     content section line up on the same edges. */
  --wrap:1140px;
  --wrap-wide:var(--wrap);
  --gap:clamp(1.25rem,2.5vw,1.75rem);
  --section-y:clamp(3.25rem,7vw,5.5rem);
  --header-h:102px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:.18s;
  --mid:.32s;
}

/* ----------------------------------------------------------- 2. reset --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html:focus-within{scroll-padding-top:1rem}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(.95rem,.35vw + .88rem,1rem);
  line-height:1.7;
  color:var(--text);
  background:var(--light);
  overflow-x:hidden;               /* belt-and-braces against sideways scroll */
  overflow-wrap:break-word;        /* long words must never widen the page */
}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto;border:0}
ul,ol{margin:0;padding:0}
li{list-style:none}
a{color:var(--primary);text-decoration:none;transition:color var(--fast) var(--ease)}
a:hover{color:var(--secondary-600)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
address{font-style:normal}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--border);margin:2rem 0}
:target{scroll-margin-top:1.5rem}
/* must beat component display rules */
[hidden]{display:none!important}

/* visible focus everywhere, but only for keyboard users */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}

/* ------------------------------------------------------ 3. typography --- */
h1,h2,h3,h4,h5,h6{
  margin:0 0 .6em;
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.14;
  color:var(--heading);
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.05rem,4.4vw + .5rem,3.35rem)}
h2{font-size:clamp(1.6rem,2.4vw + .7rem,2.35rem)}
h3{font-size:clamp(1.2rem,1vw + .85rem,1.5rem)}
h4{font-size:clamp(1.05rem,.5vw + .9rem,1.2rem)}
h5,h6{font-size:1rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600;color:var(--heading)}
small{font-size:.82rem}
blockquote{margin:0;font-size:1.05rem}

.eyebrow{
  display:block;
  margin:0 0 .55rem;
  font-family:var(--font-head);
  font-size:clamp(.82rem,.3vw + .75rem,.95rem);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--secondary-600);
}
.eyebrow--script{
  font-family:var(--font-script);
  font-size:clamp(1.35rem,1vw + 1rem,1.6rem);
  font-weight:400;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--secondary-600);
}
.on-dark .eyebrow,.on-dark .eyebrow--script{color:var(--secondary)}

.lede{font-size:clamp(1rem,.5vw + .9rem,1.12rem);color:var(--text)}

/* section heading block + the brand's little square divider */
.section-head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{margin-bottom:0;color:var(--text)}
.divider{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem}
.section-head--center .divider{justify-content:center}
.divider::before,.divider::after{
  content:"";height:1px;width:52px;background:var(--secondary);opacity:.6;
}
.divider i{width:8px;height:8px;background:var(--secondary);display:block;transform:rotate(45deg)}

/* ---------------------------------------------------------- 4. layout --- */
/* Both modifiers resolve to the single site width, so every container —
   header, footer, listing grids and prose alike — shares the same edges. */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1rem,4vw,1.5rem)}
.wrap--wide{max-width:var(--wrap-wide)}
.wrap--narrow{max-width:var(--wrap)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2.25rem,5vw,3.25rem)}
.section--tint{background:var(--tint)}
.section--paper{background:var(--paper)}
.section--dark{background:var(--primary);color:var(--on-dark-muted)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--light)}
.section--dark a{color:var(--secondary)}

.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(min(100%,18.5rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr))}
.split{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
@media (min-width:960px){
  .split{grid-template-columns:1fr 1fr}
  .split--media-first>.split__media{order:-1}
}

/* generic page banner used by every inner page */
.page-banner{
  position:relative;
  display:grid;
  place-items:center;
  padding-block:clamp(3rem,7vw,5rem);
  text-align:center;
  background:var(--primary-900) center/cover no-repeat;
  color:var(--light);
  isolation:isolate;
}
.page-banner::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,7,78,.86),rgba(5,5,56,.94));
}
.page-banner h1{color:var(--light);margin-bottom:.35rem}
.page-banner p{max-width:46rem;margin-inline:auto;color:var(--on-dark-muted)}
.breadcrumb{
  margin-bottom:1rem;
  font-family:var(--font-head);
  font-size:.95rem;font-weight:600;letter-spacing:.02em;
  color:var(--secondary);
  /* the banner photo varies behind the text; this keeps the edges crisp */
  text-shadow:0 1px 3px rgba(5,5,56,.55);
}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center}
.breadcrumb li+li::before{content:"/";margin-right:.35rem;opacity:.75}
.breadcrumb a{color:var(--secondary)}
.breadcrumb a:hover{color:var(--light);text-decoration:underline}
/* the page you are on is the anchor point, so give it the brightest value */
.breadcrumb [aria-current]{color:var(--light)}

/* --------------------------------------------------------- 5. buttons --- */
.btn{
  --btn-bg:var(--primary);
  --btn-fg:var(--light);
  --btn-bd:var(--primary);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.6rem;
  font-family:var(--font-head);
  font-size:.95rem;font-weight:600;letter-spacing:.06em;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:2px solid var(--btn-bd);
  border-radius:var(--radius);
  text-align:center;
  cursor:pointer;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),
             border-color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.btn:hover{
  --btn-bg:var(--secondary);
  --btn-fg:var(--primary);
  --btn-bd:var(--secondary);
  transform:translateY(-2px);
}
.btn--secondary{--btn-bg:var(--secondary);--btn-fg:var(--primary);--btn-bd:var(--secondary)}
.btn--secondary:hover{--btn-bg:var(--primary);--btn-fg:var(--light);--btn-bd:var(--primary)}
.btn--light{--btn-bg:var(--light);--btn-fg:var(--primary);--btn-bd:var(--light)}
.btn--light:hover{--btn-bg:var(--secondary);--btn-fg:var(--primary);--btn-bd:var(--secondary)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--primary);--btn-bd:var(--primary)}
.btn--ghost-light{--btn-bg:transparent;--btn-fg:var(--light);--btn-bd:rgba(255,255,255,.6)}
.btn--accent{--btn-bg:var(--accent);--btn-fg:var(--primary);--btn-bd:var(--accent)}
.btn--sm{padding:.6rem 1.1rem;font-size:.85rem}
.btn--lg{padding:1.05rem 2rem;font-size:1rem}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;transform:none}
.btn svg{width:1.05em;height:1.05em;flex:none;fill:currentColor}

.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
.btn-row--center{justify-content:center}

.link-more{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-head);font-weight:600;letter-spacing:.04em;
}
.link-more svg{width:.9em;height:.9em;fill:currentColor;transition:transform var(--fast) var(--ease)}
.link-more:hover svg{transform:translateX(3px)}

/* ----------------------------------------------------------- 6. forms --- */
.field{margin-bottom:1.1rem}
.field > label,.field-label{
  display:block;margin-bottom:.4rem;
  font-family:var(--font-head);font-size:.9rem;font-weight:600;color:var(--heading);
}
.req{color:var(--err)}
.input,.select,.textarea{
  width:100%;
  padding:.8rem .9rem;
  font:inherit;font-size:.95rem;
  color:var(--heading);
  background:var(--field);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.textarea{min-height:8.5rem;resize:vertical}
.select{
  appearance:none;
  padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2307074E'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .6rem center;
  background-size:1.35rem;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--secondary);
  box-shadow:0 0 0 3px rgba(145,190,230,.35);
  outline:none;
  background:var(--light);
}
.input::placeholder,.textarea::placeholder{color:var(--muted);opacity:1}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{
  border-color:var(--err);background:#fff6f5;
}
.field-error{
  display:none;margin-top:.35rem;font-size:.82rem;font-weight:600;color:var(--err);
}
.field-error:not(:empty){display:block}
.field-hint{margin-top:.3rem;font-size:.82rem;color:var(--muted)}

fieldset{margin:0 0 1.1rem;padding:0;border:0}
legend{
  padding:0;margin-bottom:.4rem;
  font-family:var(--font-head);font-size:.9rem;font-weight:600;color:var(--heading);
}
.choice{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem}
.choice label{display:inline-flex;align-items:center;gap:.45rem;font-size:.93rem;cursor:pointer}
.choice input{accent-color:var(--primary);width:1.05rem;height:1.05rem}

.form-grid{display:grid;gap:0 1rem}
@media (min-width:640px){.form-grid--2{grid-template-columns:1fr 1fr}.form-grid .field--full{grid-column:1/-1}}

.form-status{
  margin:0 0 1rem;padding:.85rem 1rem;
  border-radius:var(--radius);border-left:4px solid;
  font-size:.92rem;
}
.form-status[hidden]{display:none}
.form-status--ok{background:#eefaf3;border-color:var(--ok);color:#0a5c38}
.form-status--err{background:#fdf0ee;border-color:var(--err);color:#8e2b20}
.btn.is-loading{position:relative;color:transparent!important}
.btn.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:1.1rem;height:1.1rem;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  color:var(--light);
  animation:spin .7s linear infinite;
}
.btn--secondary.is-loading::after,.btn--light.is-loading::after{color:var(--primary)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------- 7. header + nav --- */
.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  padding:.7rem 1.1rem;background:var(--primary);color:var(--light);
  border-radius:0 0 var(--radius) var(--radius);
  transition:top var(--fast) var(--ease);
}
.skip-link:focus{top:0;color:var(--light)}

/* Header geometry mirrors stadiumrealestate.com: a static 102px bar over a
   1140px container split 14% / 72% / 14% between logo, nav and the CTA. */
.site-header{position:static;background:transparent}
.site-header__inner{
  display:flex;align-items:center;gap:0;
  min-height:var(--header-h);
}

.brand{flex:none;display:flex;align-items:center}
.brand img{width:160px;height:39px;object-fit:contain}

.nav-toggle{
  display:grid;place-items:center;
  width:44px;height:44px;margin-left:auto;
  border-radius:var(--radius);
  color:var(--primary);
}
.nav-toggle:hover{color:var(--secondary-600)}
.nav-toggle span{
  display:block;width:24px;height:2px;background:currentColor;border-radius:2px;
  transition:transform var(--fast) var(--ease),opacity var(--fast) var(--ease);
}
.nav-toggle span+span{margin-top:6px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.nav__list{display:flex;align-items:center;justify-content:center;gap:4px}
.nav__link{
  display:flex;align-items:center;gap:10px;
  padding:0 8px;
  font-family:var(--font-head);font-size:1rem;font-weight:500;line-height:80px;
  color:var(--primary);
  white-space:nowrap;
}
.nav__link:hover,.nav__item:focus-within > .nav__link{color:var(--secondary)}
.nav__item{position:relative}
.nav__item--current > .nav__link{color:var(--secondary)}
.nav__caret{width:10px;height:10px;fill:currentColor;transition:transform var(--fast) var(--ease)}
.nav__item[data-open="true"] .nav__caret{transform:rotate(180deg)}

.nav__panel{
  position:absolute;top:100%;left:0;z-index:20;
  width:220px;padding:10px;
  background:var(--light);
  border:0;border-radius:5px;
  box-shadow:0 0 50px 0 rgba(0,7,45,.1);
  opacity:0;visibility:hidden;transform:translateY(10px);
  /* visibility waits for the fade-out… */
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease),
             visibility 0s linear var(--fast);
}
/* Panels sit in the layout even while hidden, so the ones near the end of the
   bar must hang to the left or they push the page wider than the viewport. */
.nav__item:nth-last-child(-n+3) > .nav__panel{left:auto;right:0}
.nav__item[data-open="true"] > .nav__panel,
.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel{
  opacity:1;transform:translateY(0);
  /* …but appears at once on the way in, so it is focusable immediately */
  visibility:visible;
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease),
             visibility 0s linear 0s;
}
.nav__panel a{
  display:block;padding:10px 15px;
  font-family:var(--font-head);font-size:1rem;font-weight:500;line-height:24px;
  color:var(--primary);
  border-bottom:1px solid #F7FAFF;
}
.nav__panel li:last-child a{border-bottom:0}
.nav__panel a:hover,.nav__panel a:focus-visible{background:rgba(145,190,230,.09);color:var(--secondary)}
.nav__panel a[aria-current]{background:rgba(145,190,230,.09);color:var(--secondary)}

.header-cta-col{display:flex;align-items:center;justify-content:center}
/* Trims the shared .btn sizing down to the flatter header button. */
.header-cta{
  padding:13px 19px;
  font-size:.9375rem;line-height:15px;letter-spacing:normal;
  border:0;border-radius:3px;
}
/* Hover. The shared .btn:hover swaps the background to --secondary and sets
   --btn-fg to navy, but the global rule a:hover{color:var(--secondary-600)}
   has specificity (0,1,1) and outranks .btn{color:var(--btn-fg)} at (0,1,0),
   so the label came out sky blue on a sky-blue background -- about 1.5:1 and
   effectively unreadable. .header-cta:hover is (0,2,0), so it wins; the colour
   is stated outright instead of going through --btn-fg. Staying navy also suits
   a white header better than fading to a pale blue. */
.header-cta:hover{
  --btn-bg:var(--primary-700);
  --btn-bd:var(--primary-700);
  color:var(--light);
  transform:none;
}
.header-cta:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ---- mobile navigation ---- */
@media (max-width:1199px){
  :root{--header-h:71px}
  .nav{
    position:fixed;inset:var(--header-h) 0 0;z-index:99;
    margin:0;padding:1rem clamp(1rem,4vw,1.5rem) 3rem;
    background:var(--primary);
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);
    visibility:hidden;
    /* visibility flips only after the slide-out finishes… */
    transition:transform var(--mid) var(--ease),visibility 0s linear var(--mid);
  }
  .nav.is-open{
    transform:none;
    visibility:visible;
    /* …but immediately on the way in, so the panel is focusable at once and can
       never be left un-focusable if the transition is interrupted. */
    transition:transform var(--mid) var(--ease),visibility 0s linear 0s;
  }
  .nav__list{display:block}
  .nav__item{
    display:flex;flex-wrap:wrap;align-items:center;
    border-bottom:1px solid rgba(255,255,255,.15);
  }
  .nav__link{
    flex:1;
    padding:.95rem .25rem;font-size:1.02rem;line-height:normal;color:var(--light);
  }
  .nav__link:hover,.nav__item--current > .nav__link{color:var(--secondary)}
  .nav__caret{display:none}
  .nav__toggle-sub{
    display:grid;place-items:center;flex:none;width:44px;height:44px;
    color:var(--light);border-radius:var(--radius-sm);
  }
  .nav__toggle-sub svg{width:.85rem;height:.85rem;fill:currentColor;transition:transform var(--fast) var(--ease)}
  .nav__item[data-open="true"] > .nav__toggle-sub svg{transform:rotate(180deg)}
  .nav__panel{
    position:static;width:auto;flex-basis:100%;padding:0 0 .6rem .5rem;
    background:none;border:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;
    display:none;
  }
  .nav__item[data-open="true"] > .nav__panel{display:block}
  .nav__item:hover > .nav__panel{display:none}
  .nav__item[data-open="true"]:hover > .nav__panel{display:block}
  .nav__panel a{color:var(--on-dark-muted);padding:.6rem .5rem;border-bottom:0}
  .nav__panel a:hover,.nav__panel a:focus-visible{background:rgba(255,255,255,.08);color:var(--light)}
  .nav__panel a[aria-current]{background:rgba(255,255,255,.12);color:var(--light)}
  .header-cta,.header-cta-col{display:none}
  /* The drawer is navy, so the shared .btn navy fill would vanish into it. */
  .nav__cta{
    margin-top:1.5rem;
    --btn-bg:var(--secondary);--btn-fg:var(--primary);--btn-bd:var(--secondary);
  }
  .nav__cta:hover{--btn-bg:var(--light);--btn-fg:var(--primary);--btn-bd:var(--light)}
  body.nav-open{overflow:hidden}
}
@media (min-width:1200px){
  .nav-toggle,.nav__toggle-sub,.nav__cta{display:none}
  .site-header__inner{padding-inline:0}
  .brand{flex:0 0 14%}
  .brand img{width:100%;height:auto}
  .nav{flex:0 0 72%;padding-inline:10px}
  .header-cta-col{flex:0 0 14%}
}

/* ------------------------------------------------------------ 8. hero --- */
/* Cinematic homepage banner: twelve photos sliding in from the right under a
   graded navy scrim, with the copy centred on a tall stage. */
.hero{
  position:relative;
  display:grid;align-items:center;
  min-height:clamp(540px,74vh,720px);
  padding-block:clamp(3rem,7vw,4.5rem);
  color:var(--light);
  background:var(--primary-900);
  isolation:isolate;
  overflow:hidden;
}
.hero__slides{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__slide{
  position:absolute;inset:0;
  background:center/cover no-repeat;
  transform:translateX(100%);
  /* 12 slides x 7s each. The -1s start puts slide 1 in place at load
     instead of making it slide in: delay = (i - 1) * 7s - 1s. */
  animation:heroSlide 84s linear infinite;
  animation-delay:calc(var(--i) * 7s - 8s);
  will-change:transform;
}
@keyframes heroSlide{
  /* of the 84s cycle: 1s = 1.1905%, 7s = 8.3333%, 8s = 9.5238% */
  0%      {transform:translateX(100%) scale(1.02);animation-timing-function:cubic-bezier(.25,.1,.25,1)}
  1.1905% {transform:translateX(0) scale(1.02);animation-timing-function:linear}
  8.3333% {transform:translateX(0) scale(1.1);animation-timing-function:cubic-bezier(.25,.1,.25,1)}
  /* held off-screen left by step-end, so the reset to the right is invisible */
  9.5238% {transform:translateX(-100%) scale(1.1);animation-timing-function:step-end}
  10%     {transform:translateX(100%) scale(1.02)}
  100%    {transform:translateX(100%) scale(1.02)}
}
/* Graded scrim rather than a flat wash: the middle of each photo stays vivid
   while the edges and the bottom darken enough to carry white text. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(5,5,56,.46) 0%,rgba(5,5,56,.52) 42%,rgba(5,5,56,.60) 100%),
    radial-gradient(82% 68% at 50% 48%,rgba(5,5,56,.06) 0%,rgba(5,5,56,.46) 100%);
}

.hero__inner{max-width:64rem;margin-inline:auto;text-align:center}
.hero .eyebrow{
  margin:0 0 1.1rem;
  font-size:.875rem;letter-spacing:.18em;
  color:var(--secondary);
  text-shadow:0 1px 14px rgba(5,5,56,.65);
}
.hero h1{
  margin:0 0 1.15rem;
  font-size:clamp(2.15rem,5.4vw,4rem);
  line-height:1.06;letter-spacing:-.015em;
  color:var(--light);
  text-wrap:balance;
  text-shadow:0 2px 30px rgba(5,5,56,.5);
}
.hero__sub{
  max-width:620px;margin:0 auto 2.4rem;
  font-family:var(--font-body);
  font-size:1.0625rem;line-height:1.6;font-weight:400;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 18px rgba(5,5,56,.5);
}
.hero .btn-row{gap:1rem}
.hero .btn-row .btn{padding:1rem 2.5rem;font-size:1rem;line-height:1}
.hero .btn--secondary{box-shadow:0 12px 32px -14px rgba(5,5,56,.9)}
.hero .btn--ghost-light{--btn-bd:rgba(255,255,255,.72);backdrop-filter:blur(3px)}

/* Entrance is opt-in, so the copy is never left hidden when animation is off. */
@media (prefers-reduced-motion:no-preference){
  .hero .eyebrow,.hero h1,.hero__sub,.hero .btn-row{
    animation:heroRise .9s var(--ease) both;
  }
  .hero .eyebrow{animation-delay:.06s}
  .hero h1{animation-delay:.16s}
  .hero__sub{animation-delay:.3s}
  .hero .btn-row{animation-delay:.42s}
}
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (max-width:767px){
  .hero{min-height:clamp(460px,76vh,580px)}
  .hero__sub{margin-bottom:1.9rem}
  .hero .btn-row .btn{padding:.9rem 1.9rem}
}

/* --------------------------------------------------------- 9. search --- */
.searchbar{
  width:min(100%,62rem);margin:0 auto;
  padding:1.1rem;
  background:rgba(255,255,255,.97);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lift);
  text-align:left;
}
.searchbar__tabs{display:flex;gap:.4rem;margin-bottom:.9rem}
.searchbar__tab{
  flex:1;padding:.65rem 1rem;
  font-family:var(--font-head);font-size:.92rem;font-weight:600;letter-spacing:.08em;
  color:var(--primary);background:var(--tint);
  border-radius:var(--radius);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.searchbar__tab[aria-selected="true"]{background:var(--primary);color:var(--light)}
.searchbar__tab:hover{background:var(--secondary);color:var(--primary)}
.searchbar__row{display:grid;gap:.6rem;grid-template-columns:1fr}
@media (min-width:700px){.searchbar__row{grid-template-columns:2fr 1fr 1fr auto}}
.searchbar .input,.searchbar .select{background:var(--light)}
.searchbar__more{
  display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  margin-top:.6rem;
}
.searchbar__toggle{
  margin-top:.7rem;font-family:var(--font-head);font-size:.86rem;font-weight:600;
  color:var(--primary);display:inline-flex;align-items:center;gap:.35rem;
}
.searchbar__toggle svg{width:.8em;height:.8em;fill:currentColor;transition:transform var(--fast) var(--ease)}
.searchbar__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ---------------------------------------------------------- 10. cards --- */
.card{
  display:flex;flex-direction:column;
  background:var(--light);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:0 0 30px 6px rgba(0,0,255,.2)}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--tint)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}
.card__body{display:flex;flex-direction:column;gap:.6rem;padding:1.15rem 1.25rem 1.35rem;flex:1}
.card__title{margin:0;font-size:1.08rem;line-height:1.3}
.card__title a{color:var(--heading)}
.card__title a:hover{color:var(--secondary-600)}
.card__meta{font-size:.85rem;color:var(--muted);letter-spacing:.04em}
.card__foot{margin-top:auto;padding-top:.85rem;border-top:1px solid var(--border)}

.badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.34rem .7rem;
  font-family:var(--font-head);font-size:.74rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  border-radius:999px;
  background:var(--primary);color:var(--light);
}
.badge--sold{background:var(--err)}
.badge--leased{background:#6b4fa8}
.badge--lease{background:var(--accent);color:var(--primary)}
.badge--type{background:rgba(7,7,78,.82);color:var(--light);backdrop-filter:blur(3px)}
.card__badges{
  position:absolute;top:.8rem;left:.8rem;right:.8rem;z-index:2;
  display:flex;flex-wrap:wrap;gap:.4rem;justify-content:space-between;
}

/* property card specifics */
.pcard__price{
  font-family:var(--font-head);font-size:1.08rem;font-weight:700;color:var(--primary);
  line-height:1.35;
}
.pcard__addr{font-size:1.02rem}
.pcard__suburb{
  display:block;font-family:var(--font-head);font-size:.82rem;font-weight:600;
  letter-spacing:.1em;color:var(--muted);text-transform:uppercase;
}
.specs{display:flex;flex-wrap:wrap;gap:.5rem .95rem;font-size:.88rem;color:var(--text)}
.specs li{display:inline-flex;align-items:center;gap:.35rem}
.specs svg{width:1.15rem;height:1.15rem;fill:var(--secondary-600);flex:none}
.specs b{font-weight:600;color:var(--heading)}
.pcard__agent{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--muted)}
.pcard__agent img,.pcard__agent .avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
.avatar{
  display:grid;place-items:center;
  background:var(--primary);color:var(--secondary);
  font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.04em;
}
.avatar--lg{width:100%;height:100%;font-size:2.4rem;border-radius:0}

/* ------------------------------------------------------- 11. listings --- */
.listing-layout{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
@media (min-width:1024px){.listing-layout{grid-template-columns:19rem 1fr}}
.filters{
  background:var(--light);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.25rem;
  box-shadow:var(--shadow-soft);
}
@media (min-width:1024px){.filters{position:sticky;top:1rem}}
.filters h2{font-size:1.1rem;margin-bottom:1rem}
.filters__group+.filters__group{margin-top:.25rem}
.filters__actions{display:grid;gap:.5rem;margin-top:1rem}
.filters-toggle{width:100%;margin-bottom:1rem}
@media (min-width:1024px){.filters-toggle{display:none}}
@media (max-width:1023px){
  .filters[hidden]{display:none}
}

.results-bar{
  display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;justify-content:space-between;
  margin-bottom:1.25rem;
}
.results-bar__count{font-family:var(--font-head);font-weight:600;color:var(--heading)}
.results-bar__sort{display:flex;align-items:center;gap:.5rem}
.results-bar__sort label{font-size:.88rem;font-weight:600;color:var(--heading);white-space:nowrap}
.results-bar__sort .select{width:auto;min-width:12rem}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .7rem .35rem .8rem;
  font-size:.82rem;font-weight:600;
  background:var(--tint);color:var(--primary);
  border:1px solid var(--secondary);border-radius:999px;
}
.chip button{display:grid;place-items:center;width:1.1rem;height:1.1rem;border-radius:50%;color:var(--primary)}
.chip button:hover{background:var(--secondary)}
.chip svg{width:.7rem;height:.7rem;fill:currentColor}
.chip--link{cursor:pointer;transition:background var(--fast) var(--ease)}
.chip--link:hover,.chip--link[aria-current]{background:var(--secondary);color:var(--primary)}

.empty{
  padding:clamp(2rem,6vw,3.5rem);text-align:center;
  background:var(--paper);border:1px dashed var(--border);border-radius:var(--radius-lg);
}
.empty svg{width:3rem;height:3rem;margin:0 auto 1rem;fill:var(--secondary)}
.empty h3{margin-bottom:.4rem}

.pagination{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:2.25rem}
.pagination button,.pagination span{
  min-width:2.6rem;padding:.55rem .7rem;
  font-family:var(--font-head);font-weight:600;font-size:.92rem;
  color:var(--primary);background:var(--light);
  border:1px solid var(--border);border-radius:var(--radius);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.pagination button svg{width:1rem;height:1rem;display:block;margin:0 auto;fill:currentColor}
.pagination button:hover{background:var(--tint)}
.pagination button[aria-current="page"]{background:var(--primary);border-color:var(--primary);color:var(--light)}
.pagination button[disabled]{opacity:.45;cursor:not-allowed}
.pagination span{border:0;background:none}

/* --------------------------------------------------------- 12. detail --- */
.detail-head{display:grid;gap:1rem}
@media (min-width:820px){
  .detail-head{grid-template-columns:1fr auto;align-items:end}
  .detail-head__price{text-align:right}
}
.detail-head h1{margin-bottom:.2rem}
.detail-head__suburb{
  font-family:var(--font-head);font-size:1rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.price-lg{font-family:var(--font-head);font-size:clamp(1.3rem,1.4vw + .9rem,1.85rem);font-weight:700;color:var(--primary);line-height:1.25}
.detail-specs{
  display:flex;flex-wrap:wrap;gap:1rem 1.75rem;
  margin:1.5rem 0;padding:1.1rem 1.25rem;
  background:var(--tint);border-radius:var(--radius-lg);
}
.detail-specs li{display:flex;align-items:center;gap:.55rem;font-size:.95rem}
.detail-specs svg{width:1.5rem;height:1.5rem;fill:var(--primary);flex:none}
.detail-specs b{display:block;font-family:var(--font-head);font-size:1.05rem;color:var(--heading);line-height:1.2}
.detail-specs span{font-size:.8rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

.gallery{display:grid;gap:.7rem}
.gallery__stage{position:relative}
.gallery__main{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:var(--tint);border-radius:var(--radius-lg);
}
.gallery__main img{width:100%;height:100%;object-fit:cover}
.gallery__nav{
  position:absolute;top:50%;translate:0 -50%;
  display:grid;place-items:center;width:44px;height:44px;
  background:rgba(255,255,255,.9);color:var(--primary);
  border-radius:50%;box-shadow:var(--shadow-soft);
  transition:background var(--fast) var(--ease)
}
.gallery__nav:hover{background:var(--secondary)}
.gallery__nav svg{width:1.2rem;height:1.2rem;fill:currentColor}
.gallery__nav--prev{left:.7rem}
.gallery__nav--next{right:.7rem}
.gallery__counter{
  position:absolute;bottom:.7rem;right:.7rem;
  padding:.3rem .7rem;border-radius:999px;
  background:rgba(7,7,78,.8);color:var(--light);
  font-size:.8rem;font-family:var(--font-head);font-weight:600;
}
.gallery__thumbs{
  display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(5.25rem,1fr));
}
.gallery__thumb{
  aspect-ratio:1;overflow:hidden;border-radius:var(--radius);
  border:2px solid transparent;background:var(--tint);
  transition:border-color var(--fast) var(--ease),opacity var(--fast) var(--ease);
  opacity:.75;
}
.gallery__thumb img{width:100%;height:100%;object-fit:cover}
.gallery__thumb:hover{opacity:1}
.gallery__thumb[aria-current="true"]{border-color:var(--secondary);opacity:1}

.detail-grid{display:grid;gap:clamp(1.75rem,3.5vw,3rem);align-items:start}
@media (min-width:1024px){.detail-grid{grid-template-columns:1fr 21rem}}
.panel{
  background:var(--light);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.35rem;box-shadow:var(--shadow-soft);
}
.panel+.panel{margin-top:1.25rem}
.panel h2,.panel h3{font-size:1.15rem;margin-bottom:.85rem}
@media (min-width:1024px){.detail-aside{position:sticky;top:1rem}}

.feature-list{columns:2;column-gap:1.5rem;font-size:.93rem}
@media (max-width:520px){.feature-list{columns:1}}
.feature-list li{
  break-inside:avoid;display:flex;gap:.5rem;align-items:flex-start;margin-bottom:.5rem;
}
.feature-list svg{width:1rem;height:1rem;margin-top:.35rem;fill:var(--secondary-600);flex:none}

.agent-card{display:flex;gap:.9rem;align-items:center}
.agent-card__photo{width:72px;height:72px;border-radius:50%;overflow:hidden;flex:none;background:var(--primary)}
.agent-card__photo img{width:100%;height:100%;object-fit:cover}
.agent-card__photo .avatar{width:100%;height:100%;font-size:1.4rem}
.agent-card h3{margin:0 0 .1rem;font-size:1.05rem}
.agent-card p{margin:0;font-size:.85rem;color:var(--muted)}
.agent-card__links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.agent-card__links a{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;
}
.agent-card__links svg{width:.95rem;height:.95rem;fill:currentColor}
.agent-card+.agent-card{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}

.map-embed{
  aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--tint);display:grid;place-items:center;text-align:center;padding:1.5rem;
}
.map-embed iframe{width:100%;height:100%;border:0}

/* ------------------------------------------------------- 13. sections --- */
/* stats / counters */
.stats{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));text-align:center}
.stat__num{
  display:block;font-family:var(--font-head);font-weight:700;line-height:1;
  font-size:clamp(2.1rem,3.4vw + 1rem,3.2rem);
  color:var(--primary);
}
.section--dark .stat__num{color:var(--secondary)}
.stat__label{
  display:block;margin-top:.5rem;
  font-family:var(--font-head);font-size:.86rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.section--dark .stat__label{color:var(--on-dark-muted)}
.stat__note{display:block;margin-top:.3rem;font-size:.78rem;color:var(--muted)}
.stat--todo .stat__num{color:var(--muted)}

/* process / how it works */
.steps{counter-reset:step;display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.step{position:relative;padding:1.6rem 1.35rem 1.5rem;background:var(--light);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.step__num{
  display:block;font-family:var(--font-head);font-size:2.6rem;font-weight:700;
  line-height:1;color:var(--secondary);margin-bottom:.5rem;
}
.step h3{margin-bottom:.4rem}
.step p{font-size:.92rem;margin:0}
@media (min-width:900px){
  .steps--line .step::after{
    content:"";position:absolute;top:2.4rem;right:calc(var(--gap) / -2 - 6px);
    width:12px;height:12px;border-top:2px solid var(--secondary);border-right:2px solid var(--secondary);
    transform:rotate(45deg);
  }
  .steps--line .step:last-child::after{display:none}
}

/* CTA band with photo */
.cta-band{
  position:relative;isolation:isolate;
  padding-block:clamp(3.5rem,8vw,6rem);
  background:var(--primary) center/cover no-repeat;
  color:var(--light);text-align:center;
}
.cta-band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,7,78,.84),rgba(5,5,56,.92));
}
.cta-band h2{color:var(--light)}
.cta-band p{max-width:44rem;margin-inline:auto;color:rgba(255,255,255,.88)}

/* media panel (about split) */
.media-frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);
}
.media-frame img{width:100%}
.media-frame--offset{margin-inline-end:clamp(0rem,3vw,2.5rem)}
.check-list{display:grid;gap:.6rem;margin:1.25rem 0}
.check-list li{display:flex;gap:.6rem;align-items:flex-start}
.check-list svg{width:1.15rem;height:1.15rem;margin-top:.25rem;fill:var(--secondary-600);flex:none}

/* Vision / Goals / Mission as layered flow cards: a coloured tab with an icon,
   a white panel carrying the number and copy, and a coloured backing plate that
   sits behind and below with a pointer beneath it.

   --c is set per card and drives the tab, the plate, the pointer and the number,
   so a card is recoloured from one place. --tab-fg goes with it: white text only
   works on the navy card, so the lighter two flip to navy and stay above 7:1. */
.flowcards{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  margin:0;padding:0 0 3.25rem;
  list-style:none;
}
.flowcard{position:relative;--c:var(--primary);--tab-fg:var(--light)}

/* backing plate: offset left and down so it shows on those two edges only */
.flowcard::before{
  content:"";position:absolute;z-index:0;
  left:-10px;right:10px;top:3.25rem;bottom:-16px;
  /* the gradient shades the plate top-to-bottom so it reads as a solid slab
     catching light, rather than a flat rectangle. It rides on top of whatever
     --c is, so every card is shaded the same way. */
  background-color:var(--c);
  background-image:linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.24));
  border-radius:var(--radius-xl);
  box-shadow:0 8px 14px -9px rgba(7,7,78,.28);
}
/* pointer, hanging off the bottom of that plate */
.flowcard::after{
  content:"";position:absolute;z-index:0;
  left:calc(32% - 14px);bottom:-31px;
  width:28px;height:16px;
  /* underside of the slab: darker than the plate above it */
  background-color:var(--c);
  background-image:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.38));
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  /* box-shadow would be clipped away with the corners; drop-shadow traces the
     clipped triangle, so the arrow casts a shadow shaped like itself */
  filter:drop-shadow(0 3px 2px rgba(7,7,78,.3));
}

.flowcard__tab{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;
  margin-left:1rem;
  /* even padding now the icon circle is gone */
  padding:.6rem 1.35rem;
  background:var(--c);
  border-radius:999px;
  box-shadow:0 3px 7px -3px rgba(7,7,78,.26);
}
.flowcard__tab h3{
  margin:0;
  font-size:.9rem;line-height:1;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tab-fg);
}

.flowcard__panel{
  position:relative;z-index:1;
  /* pulled up so the tab overlaps the panel's top edge */
  margin-top:-1.2rem;
  padding:2.4rem 1.5rem 1.75rem;
  background:var(--light);
  border-radius:var(--radius-xl);
  /* three stacked shadows read as depth far better than one soft blur:
     a tight contact shadow, a mid one, and a wide ambient cast */
  box-shadow:
    0 1px 2px rgba(7,7,78,.05),
    0 3px 6px rgba(7,7,78,.05),
    0 10px 20px -12px rgba(7,7,78,.10);
}
.flowcard__panel p{margin:0;font-size:.95rem}

/* Ground shadow beneath the arrow tip. It lives on the panel because .flowcard
   has already spent ::before on the plate and ::after on the arrow; the panel is
   full width, so the 32% offset still lines up with the arrow above it. */
.flowcard__panel::after{
  content:"";position:absolute;z-index:-1;
  left:calc(32% - 32px);
  bottom:-44px;
  width:64px;height:14px;
  background:radial-gradient(ellipse at center, rgba(7,7,78,.28), rgba(7,7,78,0) 70%);
}

/* dark -> light, text colour following the ground */
.flowcard:nth-child(2){--c:var(--secondary-600);--tab-fg:var(--primary)}
.flowcard:nth-child(3){--c:var(--secondary);--tab-fg:var(--primary)}

@media (hover:hover){
  .flowcard{transition:transform var(--fast) var(--ease)}
  .flowcard:hover{transform:translateY(-5px)}
  .flowcard:hover .flowcard__panel{
    box-shadow:
      0 1px 3px rgba(7,7,78,.06),
      0 5px 11px rgba(7,7,78,.07),
      0 16px 28px -14px rgba(7,7,78,.14);
  }
}
@media (prefers-reduced-motion:reduce){
  .flowcard{transition:none}
  .flowcard:hover{transform:none}
}

@media (max-width:600px){
  .flowcards{gap:2.75rem;padding-bottom:2.75rem}
}

/* About intro: a two-column text header over a wide image band, with the three
   promises on a card overlapping the foot of the image. */
.about-intro__head{
  display:grid;gap:1rem 3rem;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  margin-bottom:2.5rem;
}
.about-intro__head h2{margin:0}
.about-intro__head p{margin:0}

/* The default --section-y is 88px, so the intro's bottom and the cards' top
   stacked to a 195px gulf. Pull both in, and trim the figure's padding to just
   what the overhanging half of the card actually needs. */
.about-intro{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.about-intro + .section{padding-top:clamp(1.5rem,3vw,2.5rem)}

.about-intro__figure{
  margin:0;
  /* room for the half of the card that hangs below the image */
  padding-bottom:2.5rem;
}
/* the card is anchored to this, not to the figure, so it straddles the image's
   bottom edge exactly however tall it ends up */
.about-intro__frame{position:relative}
.about-intro__figure img{
  display:block;width:100%;
  /* fixed band: swap the image for any size and it still fills this frame */
  aspect-ratio:16 / 7;
  object-fit:cover;
  border-radius:var(--radius-xl);
}
.about-intro__points{
  position:absolute;left:50%;bottom:0;
  /* half below the image, half over it */
  transform:translate(-50%,50%);
  display:grid;gap:0 1.5rem;
  grid-template-columns:repeat(3,1fr);
  width:min(100% - 3rem, 60rem);
  margin:0;padding:1.35rem 1.75rem;
  list-style:none;
  background:var(--light);
  border-radius:var(--radius-xl);
  box-shadow:0 2px 6px rgba(7,7,78,.06), 0 14px 28px -14px rgba(7,7,78,.16);
}
.about-intro__points li{
  display:flex;align-items:center;justify-content:center;gap:.75rem;
}
.about-intro__points li + li{border-left:1px solid rgba(7,7,78,.1);padding-left:1.5rem}
.about-intro__mark{
  display:grid;place-items:center;
  width:30px;height:30px;flex:none;
  background:var(--secondary-50);
  border-radius:50%;
}
.about-intro__mark svg{width:15px;height:15px;fill:var(--primary)}
.about-intro__points li > span:last-child{
  font-family:var(--font-head);
  font-size:1rem;font-weight:600;letter-spacing:.01em;
  color:var(--primary);
}

@media (max-width:900px){
  .about-intro__head{grid-template-columns:1fr;gap:1rem}
}
@media (max-width:700px){
  /* no room to overlap: the card sits under the image and the points stack */
  .about-intro__figure{padding-bottom:0}
  .about-intro__figure img{aspect-ratio:4 / 3}
  .about-intro__points{
    position:static;transform:none;
    width:auto;
    grid-template-columns:1fr;gap:0;
    margin-top:1.25rem;
    padding:.5rem 1.25rem;
  }
  .about-intro__points li{justify-content:flex-start;padding:.85rem 0}
  .about-intro__points li + li{border-left:0;border-top:1px solid rgba(7,7,78,.1);padding-left:0}
}

/* proof points */
.proof{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.proof__item{padding:1.35rem;background:var(--light);border-left:3px solid var(--secondary);border-radius:var(--radius)}
.proof__num{display:block;font-family:var(--font-head);font-size:1.85rem;font-weight:700;color:var(--primary);line-height:1.1}
.proof__item p{margin:.3rem 0 0;font-size:.92rem}

/* team */
.person{text-align:center}
.person__photo{
  aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--primary);box-shadow:var(--shadow-card);margin-bottom:1rem;
}
.person__photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.person:hover .person__photo img{transform:scale(1.05)}
.person h3{margin:0 0 .15rem;font-size:1.1rem}
.person p{margin:0;font-size:.86rem;color:var(--muted)}

/* team overview page — mirrors the live /team-overview/ rows: a navy
   portrait card on one side, the bio on the other, alternating down the
   page with a hairline rule between profiles. */
.team-overview{padding-block:0 var(--section-y)}
.team-row{display:grid;gap:20px;padding-top:32px}
.team-row--first{padding-top:80px}
/* the grid display would otherwise beat the hidden attribute */
.team-row[hidden]{display:none}

.team-card{margin:10px;background:var(--primary);border-radius:6px;padding-bottom:5px}
.team-card__photo{height:500px;overflow:hidden;border-radius:var(--radius)}
/* live crops from the bottom, keeping every head in frame */
.team-card__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.team-card__name{
  margin:15px 0 0;text-align:center;
  font-family:var(--font-head);font-size:1.375rem;line-height:1.19;font-weight:700;color:var(--light);
}
.team-card__role{
  margin:0;text-align:center;
  font-size:1rem;line-height:1.375;font-weight:300;color:var(--secondary);
}

.team-row__bio{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:10px}
.team-row__bio p{margin:0;font-size:1rem;line-height:1.5;font-weight:300;color:var(--muted)}

/* the rule runs wider than the text columns, as it does on live */
.team-rule{width:90vw;margin:15px auto;border:0;border-top:1px solid var(--primary)}

@media (min-width:900px){
  .team-row{grid-template-columns:minmax(0,448fr) minmax(0,672fr)}
  /* every second profile flips the card to the right; the narrow column has
     to move with it, so the card keeps its width on both sides */
  .team-row--bio-first{grid-template-columns:minmax(0,672fr) minmax(0,448fr)}
  .team-row--bio-first>.team-card{order:2}
}
/* community program page — mirrors the live /community-program/ blocks: an
   intro split, then sponsored players, clubs and charities. The dark blocks
   alternate with white exactly as they do on live. */
.community-intro{padding-block:var(--section-y)}
.community-intro__grid{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center}
.community-intro__media img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 14px 36px -20px rgba(7,7,78,.4)}
.community-intro__copy h2{color:var(--secondary);font-size:clamp(1.6rem,3.2vw,2.125rem);margin:0 0 1rem}
.community-intro__copy p{margin:0;color:var(--muted);line-height:1.65}

.community-block{padding-block:var(--section-y)}
/* a light source at the top of the navy blocks, so the cards sit in a space
   rather than on a flat field */
.community-block--dark{
  background:radial-gradient(120% 62% at 50% -12%,var(--primary-700),rgba(11,11,99,0) 68%),var(--primary);
}
.community-head{max-width:46rem;margin:0 auto clamp(1.75rem,4vw,2.75rem);text-align:center}
.community-head h2{font-size:clamp(1.6rem,3.2vw,2.125rem);margin:0 0 .85rem;color:var(--secondary)}
.community-block--dark .community-head h2{color:var(--light)}
.community-head p{margin:0;color:var(--muted);line-height:1.6}
.community-block--dark .community-head p{color:var(--on-dark-muted)}

/* sponsored players, grouped under the club that fields them. The portraits
   are transparent cut-outs, so each card is a lit stage the player stands on
   and dissolves into; the club is named once on the group header instead of
   under all 45 cards. Sources are all framed 400x600, which is what keeps the
   grid even — see tools/images.mjs for why they are not trimmed. */
.player-group{margin-top:clamp(2.5rem,5vw,3.75rem)}
.player-group:first-of-type{margin-top:0}
.player-group__head{
  display:flex;align-items:center;gap:.9rem;
  margin-bottom:clamp(1.1rem,2.4vw,1.6rem);
}
.player-group__logo{
  flex:none;display:block;width:74px;height:44px;
  border-radius:10px;overflow:hidden;background:var(--light);
  box-shadow:0 6px 18px -10px rgba(0,0,0,.6),0 0 0 1px rgba(145,190,230,.2);
}
.player-group__logo img{display:block;width:100%;height:100%;object-fit:cover}
.player-group__head h3{
  margin:0;flex:none;
  font-size:clamp(1.05rem,2vw,1.3rem);font-weight:600;line-height:1.2;color:var(--light);
}
/* the rule fills whatever is left of the row and carries the club's colour */
.player-group__head::after{
  content:"";order:3;flex:1;height:2px;min-width:1.5rem;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),rgba(145,190,230,.14));
}
.player-group__count{
  order:4;flex:none;
  font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--secondary);
}

.player-grid{display:grid;gap:clamp(16px,1.8vw,24px);grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr))}
.player-card{
  --accent:var(--secondary-600);        /* overridden per card with the club's own colour */
  --card-radius:22px;
  position:relative;isolation:isolate;
  aspect-ratio:.64;
  transition:transform .45s var(--ease);
}
/* the stage, with the highlight placed where a head lands */
.player-card::before{
  content:"";position:absolute;inset:0;z-index:0;
  border-radius:var(--card-radius);
  /* plain stage first: browsers without color-mix drop the rule below and keep
     this one, rather than losing the gradient altogether */
  background:radial-gradient(130% 78% at 50% 2%,#fff 0%,#f4f8fc 38%,var(--secondary-50) 68%,#d3e2f2 100%);
  background:
    /* a wash of the club's colour pooling at the player's feet; it stops well
       short of the face, which stays on clean white */
    radial-gradient(92% 50% at 50% 106%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 74%),
    radial-gradient(130% 78% at 50% 2%,#fff 0%,#f4f8fc 38%,var(--secondary-50) 68%,#d3e2f2 100%);
  box-shadow:0 22px 48px -26px rgba(0,0,0,.58),0 0 0 1px rgba(145,190,230,.14);
  transition:box-shadow .45s var(--ease);
}
/* contact shadow, so the player is standing rather than pasted on */
.player-card::after{
  content:"";position:absolute;left:13%;right:13%;bottom:22%;height:5%;z-index:1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(7,7,78,.26),rgba(7,7,78,0) 76%);
}
.player-card img{
  position:absolute;left:0;right:0;top:0;z-index:2;
  width:100%;height:86%;
  /* the PNGs carry wide transparent margins — cover crops those so the player
     fills the frame, and the top anchor keeps every head clear of the crop */
  object-fit:cover;object-position:50% 0;
}
/* No hard edge: the plate starts fully transparent over the player, takes on a
   breath of the club colour, then settles into navy below where the text sits.
   Centring the content keeps every plate the same height whether or not the
   player turns out for a second club. */
.player-card__info{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:4.6rem;
  padding:2.1rem .6rem .6rem;text-align:center;
  border-radius:0 0 var(--card-radius) var(--card-radius);
  background:linear-gradient(180deg,rgba(5,5,56,0) 0%,rgba(5,5,56,.42) 30%,rgba(5,5,56,.93) 58%,var(--primary-900) 74%);
  background:linear-gradient(180deg,
    rgba(5,5,56,0) 0%,
    color-mix(in srgb,var(--accent) 38%,rgba(5,5,56,.34)) 28%,
    rgba(5,5,56,.93) 58%,
    var(--primary-900) 74%);
}
.player-card__name{
  margin:0;
  font-size:1.05rem;font-weight:600;line-height:1.25;color:var(--light);
  text-shadow:0 1px 8px rgba(5,5,56,.6);
}
/* only the handful who turn out for two clubs carry text here, but the line is
   reserved on every card so the names sit level across a row */
.player-card__also{
  margin:.2rem 0 0;min-height:1.3em;font-size:.68rem;line-height:1.3;
  color:var(--secondary);text-shadow:0 1px 6px rgba(5,5,56,.5);
}

@media (hover:hover){
  .player-card:hover{transform:translateY(-6px)}
  .player-card:hover::before{box-shadow:0 30px 56px -24px rgba(0,0,0,.66),0 0 0 1px rgba(145,190,230,.3)}
}
@media (max-width:600px){
  .player-card{--card-radius:18px}
  .player-card__info{padding-top:1.6rem;min-height:3.9rem}
  .player-card__name{font-size:.92rem}
  /* the second club wraps to two lines at this width, so reserve both */
  .player-card__also{min-height:2.6em}
  .player-group__logo{width:62px;height:38px}
}
/* sponsored clubs and charities: three logo cards to the row */
.logo-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.logo-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--light);border-radius:18px;
  box-shadow:0 10px 30px -16px rgba(0,7,45,.45),0 0 0 1px rgba(7,7,78,.05);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
@media (hover:hover){
  .logo-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(0,7,45,.5),0 0 0 1px rgba(7,7,78,.08)}
}
.logo-card__media{position:relative;display:block;height:200px;background:var(--light);flex:none}
/* softens the join between the logo strip and the copy below it */
.logo-card__media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.85));
  pointer-events:none;
}
.logo-card__media img{display:block;width:100%;height:100%;object-fit:contain}
a.logo-card__media{transition:opacity var(--fast) var(--ease)}
a.logo-card__media:hover{opacity:.85}
.logo-card__body{padding:25px 20px}
.logo-card__body h3{margin:0 0 8px;font-size:1.3125rem;font-weight:700;color:var(--heading);line-height:1.2}
.logo-card__body p{margin:0;font-size:.9375rem;line-height:1.6;font-weight:300;color:var(--text)}

@media (min-width:900px){
  .community-intro__grid{grid-template-columns:minmax(0,541fr) minmax(0,539fr)}
  .player-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* community lists */
.tag-list{display:flex;flex-wrap:wrap;gap:.5rem}
.tag-list li{
  padding:.4rem .85rem;font-size:.86rem;
  background:var(--light);border:1px solid var(--border);border-radius:999px;color:var(--heading);
}
.section--dark .tag-list li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:var(--light)}
.group-head{
  margin:1.5rem 0 .75rem;font-family:var(--font-head);font-size:.86rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--secondary-600);
}

/* legal / prose */
.prose h2{margin-top:2rem;font-size:1.4rem}
.prose h3{margin-top:1.5rem;font-size:1.12rem}
.prose ul{margin:0 0 1.1em;padding-left:1.1rem}
.prose ul li{list-style:disc;margin-bottom:.4rem}
.prose ol{margin:0 0 1.1em;padding-left:1.3rem;counter-reset:none}
.prose ol li{list-style:decimal;margin-bottom:.4rem}
.doc-link{
  display:flex;gap:.9rem;align-items:center;
  padding:1.1rem 1.25rem;background:var(--tint);
  border-radius:var(--radius-lg);text-decoration:none;
  transition:background var(--fast) var(--ease);
}
.doc-link:hover{background:#dcf3ff}
.doc-link svg{width:2rem;height:2rem;fill:var(--primary);flex:none}
.doc-link b{display:block;font-family:var(--font-head);color:var(--heading);overflow-wrap:anywhere}
.doc-link span{font-size:.85rem;color:var(--muted)}

/* --------------------------------------------------- 14. slider/carousel */
.slider{position:relative}
.slider__viewport{overflow:hidden}
.slider__track{
  display:flex;gap:var(--gap);
  transition:transform var(--mid) var(--ease);
}
.slider__slide{flex:0 0 100%;min-width:0}
@media (min-width:700px){.slider--3 .slider__slide{flex-basis:calc((100% - var(--gap)) / 2)}}
@media (min-width:1024px){.slider--3 .slider__slide{flex-basis:calc((100% - 2 * var(--gap)) / 3)}}
.slider__controls{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:1.5rem}
.slider__btn{
  display:grid;place-items:center;width:42px;height:42px;
  color:var(--primary);background:var(--light);
  border:1px solid var(--border);border-radius:50%;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.slider__btn:hover{background:var(--primary);color:var(--light)}
.slider__btn[disabled]{opacity:.4;cursor:not-allowed}
.slider__btn svg{width:1.1rem;height:1.1rem;fill:currentColor}
.slider__dots{display:flex;gap:.4rem}
.slider__dots button{
  width:9px;height:9px;border-radius:50%;background:var(--border);
  transition:background var(--fast) var(--ease),width var(--fast) var(--ease);
}
.slider__dots button[aria-current="true"]{background:var(--secondary-600);width:26px;border-radius:999px}

.quote{
  display:flex;flex-direction:column;gap:.9rem;height:100%;
  padding:1.6rem 1.5rem;background:var(--light);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
}
.quote__mark{width:2rem;height:2rem;fill:var(--secondary);opacity:.55}
.quote blockquote{margin:0;flex:1;font-size:.98rem}
.quote__by{display:flex;align-items:center;gap:.75rem;padding-top:.9rem;border-top:1px solid var(--border)}
.quote__by .avatar{width:42px;height:42px;border-radius:50%;font-size:.85rem}
.quote__by b{display:block;font-family:var(--font-head);color:var(--heading)}
.quote__by span{font-size:.82rem;color:var(--muted)}
.rating{display:flex;gap:.15rem}
.rating svg{width:1rem;height:1rem;fill:var(--gold)}
.placeholder-note{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.2rem .55rem;margin-bottom:.2rem;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:#fff6e5;color:#8a5b00;border-radius:999px;
}

/* ------------------------------------------------- homepage about us --- */
/* A centred section head, as every other band on the page uses, then a
   two-column row. Pairing the collage with the proof points (rather than
   the whole text block) keeps the two columns close in height, so the
   photo never sits adrift in a field of whitespace. */
.about-home__inner{display:grid;align-items:center;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:960px){
  .about-home__inner{grid-template-columns:46fr 54fr}
}
.about-home__media img{display:block;width:100%;height:auto}
/* the collage is 795px wide; never let the stacked layout upscale it */
.about-home__media .media-frame{max-width:795px;margin-inline:auto}
/* --shadow-card is a blue glow; a photograph wants a soft navy lift */
.about-home .media-frame{box-shadow:0 26px 60px -30px rgba(7,7,78,.5)}

.about-home__list{display:grid;gap:1.05rem;margin:0}
.about-home__list li{display:flex;gap:.85rem;align-items:flex-start}
/* the check sits in an accent disc rather than floating loose beside the text */
.about-home__list svg{
  box-sizing:border-box;flex:none;
  width:1.35rem;height:1.35rem;padding:.34rem;margin-top:.16rem;
  fill:var(--primary);background:var(--secondary);border-radius:50%;
}
.about-home__list span{font-size:.95rem;line-height:1.65}

/* ----------------------------------------------------- contact page --- */
/* Mirrors the live /contact-us-1/ layout: banner, centred intro with three
   detail cards, a single-column enquiry form, then a full-bleed map. */
.page-banner--inner h1{font-size:2.75rem;line-height:1;margin:0}
/* live puts the trail under the heading rather than above it */
.page-banner--inner .wrap{display:flex;flex-direction:column}
/* the inner banner puts the crumbs under the h1, and a touch larger */
.page-banner--inner .breadcrumb{order:2;margin:1.1rem 0 0;font-size:1.0625rem}

.contact-intro{padding-block:70px 85px}
.contact-enquiry{padding-block:70px 85px}
.contact-head{max-width:44rem;margin:0 auto 30px;text-align:center}
.contact-head h2{
  margin:0 0 30px;
  font-size:2.125rem;line-height:1;letter-spacing:normal;
  color:var(--primary);
}
.contact-head p:last-child{margin:0}
.contact-head p{
  font-family:var(--font-body);
  font-size:1rem;line-height:1.6;font-weight:400;
  color:var(--text);
}

/* Contact: a white panel with the navy details card overhanging its left edge.
   The left padding equals that overhang, so the navy card's left edge and the
   panel's right edge land on the .wrap content box -- the same line the header
   and footer align to. */
.contact-panel{padding-left:3rem}
/* The footer drops the .wrap gutter above 1025px so its grid is a true 1140px;
   do the same here or the panel sits 24px inside the header and footer edges. */
@media (min-width:1025px){
  .contact-enquiry > .wrap{padding-inline:0}
}

.contact-panel__grid{
  display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);
  gap:3rem;
  align-items:stretch;
  padding:2.5rem 2.5rem 2.5rem 0;
  background:var(--secondary-50);
  border-radius:var(--radius-lg);
}

/* stretched to the row height, then pulled left so it hangs off the panel */
.contact-info{
  margin-left:-3rem;
  display:flex;flex-direction:column;
  padding:2.5rem 1.5rem;
  background:var(--primary);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);
}
.contact-info h3{
  margin:0 0 1.75rem;
  font-family:var(--font-head);
  font-size:1.5rem;line-height:1.2;font-weight:700;
  color:var(--light);
}
/* each detail is a white card on the navy panel: navy icon badge on the left,
   label over value. Text flips to dark now the row is white. */
.contact-info__list{display:grid;gap:.85rem;margin:0;padding:0;list-style:none}
.contact-info__list li{
  /* icon sits at the top of the row, level with the label, not centred */
  display:flex;align-items:flex-start;gap:.9rem;
  padding:.9rem 1rem;
  background:var(--light);
  border-radius:var(--radius);
}
.contact-info__icon{
  display:grid;place-items:center;
  width:40px;height:40px;flex:none;
  background:var(--primary);
  border-radius:50%;
}
.contact-info__icon svg{width:20px;height:20px;fill:var(--light)}
.contact-info__body{min-width:0}
.contact-info__label{
  display:block;margin-bottom:.1rem;
  font-family:var(--font-head);
  font-size:.8125rem;line-height:1.4;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--primary);
}
.contact-info__list a,.contact-info__list address{
  display:block;
  font-family:var(--font-body);
  font-size:.9375rem;line-height:1.45;font-style:normal;
  color:#000;
  overflow-wrap:anywhere;
  transition:color var(--fast) var(--ease);
}
/* a colour-only hover would have to be pale enough to fail contrast, so underline */
.contact-info__list a:hover{color:var(--primary);text-decoration:underline}
.contact-info__socials{margin-top:auto;padding-top:2.25rem}
/* the footer's social pills are navy on white; on this card invert that */
.contact-info .socials a{background:rgba(255,255,255,.12);color:var(--light)}
.contact-info .socials a:hover{background:var(--secondary);color:var(--primary)}

/* the grid supplies the white background and padding, so this is a plain column */
.contact-formcard{padding:0}
.contact-formcard h3{
  margin:0 0 1.75rem;
  font-family:var(--font-head);
  font-size:1.5rem;line-height:1.2;font-weight:700;
  color:var(--primary);
}

/* Boxed fields on the tinted panel; the field name lives in the placeholder,
   so every label is .sr-only and only screen readers get it. */
.message-form__row{display:grid;gap:0 1.25rem;grid-template-columns:1fr 1fr}
.message-form .field{margin-bottom:1.25rem}
.message-form .input,.message-form .textarea{
  width:100%;height:auto;padding:.85rem 1rem;
  font-family:var(--font-body);
  font-size:.9375rem;line-height:1.5;color:var(--heading);
  background:var(--light);
  border:1px solid rgba(7,7,78,.14);border-radius:var(--radius);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.message-form .textarea{min-height:8rem;resize:vertical}
.message-form .input::placeholder,.message-form .textarea::placeholder{
  color:var(--muted);opacity:1;
}
.message-form .input:focus,.message-form .textarea:focus{
  outline:0;
  background:var(--light);
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(7,7,78,.12);
}
.message-form .input[aria-invalid="true"],.message-form .textarea[aria-invalid="true"]{
  background:var(--light);
  border-color:var(--err);
  box-shadow:0 0 0 3px rgba(192,57,43,.12);
}
/* honeypot -- off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.message-form__submit{
  margin-top:.5rem;
  min-width:11rem;
  padding:.85rem 2.25rem;
}

@media (max-width:900px){
  /* stack: the overhang has no room to read. Nested padding adds up fast on a
     phone, so each level gives some back to keep the detail rows one-line. */
  .contact-panel{padding-left:0}
  .contact-panel__grid{grid-template-columns:1fr;gap:1.5rem;padding:1.25rem}
  .contact-info{margin-left:0;padding:1.75rem 1.25rem;box-shadow:none}
  .contact-info__list li{padding:.8rem .75rem;gap:.75rem}
  .contact-info__socials{padding-top:1.75rem}
}
@media (max-width:600px){
  .message-form__row{grid-template-columns:1fr}
}

/* Shared enquiry-form fields: the contact and appraisal forms use the same
   field treatment on live, so they share it here too. */
/* Appraisal form: the same treatment as the contact panel -- a tinted card
   (#EBF3FA is --secondary-50) holding white boxed fields, everything ranged left.
   The old .contact-form selectors these rules also carried are dropped: no page
   uses that class any more. .contact-form__submit stays, the button still has it. */
.appraisal-form{
  max-width:757px;margin-inline:auto;
  padding:2.5rem;
  background:var(--secondary-50);
  border-radius:var(--radius-lg);
  text-align:left;
}
.appraisal-form .field{margin-bottom:1.25rem}
.appraisal-form .input,.appraisal-form .textarea,.appraisal-form .select{
  width:100%;height:auto;
  padding:.85rem 1rem;
  font-family:var(--font-body);
  font-size:.9375rem;line-height:1.5;color:var(--heading);
  background:var(--light);
  border:1px solid rgba(7,7,78,.14);border-radius:var(--radius);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
/* keep room for the select's own arrow */
.appraisal-form .select{padding-right:2.4rem}
.appraisal-form .textarea{min-height:8rem;resize:vertical}
.appraisal-form .input::placeholder,.appraisal-form .textarea::placeholder{
  color:var(--muted);opacity:1;
}
.appraisal-form .input:focus,.appraisal-form .textarea:focus,.appraisal-form .select:focus{
  outline:0;
  background:var(--light);
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(7,7,78,.12);
}
.appraisal-form .input[aria-invalid="true"],
.appraisal-form .textarea[aria-invalid="true"],
.appraisal-form .select[aria-invalid="true"]{
  background:var(--light);
  border-color:var(--err);
  box-shadow:0 0 0 3px rgba(192,57,43,.12);
}
.contact-form__submit{
  margin-top:.5rem;
  min-width:11rem;
  padding:.85rem 2.25rem;
}

/* Appraisal form: two grouped fieldsets with paired and tripled rows. */
.appraisal-form__group{
  margin:0 0 1.25rem;
  font-family:var(--font-head);
  font-size:1.5rem;line-height:1.2;font-weight:700;letter-spacing:normal;
  text-align:left;color:var(--primary);
}
.appraisal-form__group:not(:first-of-type){margin-top:1.75rem}
.appraisal-form__row{display:grid;gap:0 1.25rem;grid-template-columns:1fr 1fr}
.appraisal-form__row--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:600px){
  .appraisal-form{padding:1.5rem}
  .appraisal-form__row,.appraisal-form__row--3{grid-template-columns:1fr}
}

.contact-map{line-height:0}
.contact-map iframe{display:block;width:100%;height:450px;border:0}

@media (max-width:860px){
  .contact-intro,.contact-enquiry{padding-block:55px 60px}
  .page-banner--inner h1{font-size:2.125rem}
}

/* ---------------------------------------------------------- 15. footer --- */
/* Mirrors stadiumrealestate.com: a white strip (logo / two CTAs / socials)
   over a navy body of five 220px columns, then a centred copyright bar. */
.site-footer{background:var(--primary);color:var(--on-dark-muted)}

/* The band is white on a white page, so nothing marked where the footer began.
   The rule is on .footer-top itself so it runs the full width of the viewport;
   the padding stays on __inner so the line sits above the whitespace. */
.footer-top{
  background:var(--light);
  padding-block:0;
  border-top:1px solid rgba(7,7,78,.12);
}
.footer-top__inner{
  display:flex;align-items:stretch;gap:10px;
  padding-block:28px;
}
.footer-top__brand{flex:0 0 17%;display:flex;align-items:center;padding-left:15px}
.footer-top__brand img{width:152px;height:auto}
.footer-top__cta{display:flex;align-items:center;padding:10px}
.footer-top__cta--end{flex:0 0 37%;justify-content:flex-end}
.footer-top__cta--start{flex:0 0 24.9%;justify-content:flex-start}
.footer-top__social{flex:0 0 18.47%;display:flex;align-items:center;justify-content:flex-end;padding:10px}

/* Trims the shared .btn sizing down to the footer button. */
.footer-btn{
  padding:18px 30px;
  font-family:var(--font-alt);
  font-size:1rem;line-height:1;font-weight:600;letter-spacing:1px;
  border:0;border-radius:5px;
}
.footer-btn:hover{background:var(--secondary);color:var(--primary);transform:none}

.socials{display:flex;gap:10px}
.socials a{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--primary);color:var(--light);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.socials a:hover{background:var(--secondary);color:var(--primary)}
.socials svg{width:21px;height:21px;fill:currentColor}

.footer-main{padding:50px 0 40px}
.footer-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.footer-col{padding:10px}
.footer-cols h2{
  font-family:var(--font-head);
  font-size:1.5625rem;line-height:1;font-weight:600;
  color:var(--light);margin:0 0 20px;
}
.footer-list li{display:flex;align-items:flex-start}
.footer-list li+li{margin-top:10px}
.footer-list a,.footer-list address{
  display:flex;align-items:flex-start;
  font-family:var(--font-alt);font-size:1rem;line-height:24px;font-weight:400;
  font-style:normal;color:var(--on-dark);
  overflow-wrap:anywhere;
}
.footer-list li > a{flex:1;transition:color var(--fast) var(--ease)}
.footer-list a:hover{color:var(--secondary)}
.footer-list__icon{width:14px;height:14px;margin:5px 8.5px 0 0;fill:var(--secondary);flex:none}

.footer-bottom{padding-block:0}
/* Divides the link columns from the copyright line (live has no rule here). */
.footer-bottom > .wrap{padding-block:20px;border-top:1px solid rgba(255,255,255,.14)}
.footer-bottom p{
  margin:0;text-align:center;
  font-family:var(--font-alt);font-size:1rem;line-height:24px;color:var(--on-dark);
}

@media (min-width:1025px){
  /* Live drops the gutter entirely so the footer grid is a true 1140px. */
  .footer-top__inner,.footer-main > .wrap,.footer-bottom > .wrap{padding-inline:0}
}
@media (max-width:1024px){
  .footer-top__inner{flex-wrap:wrap;justify-content:center;gap:20px}
  .footer-top__brand{flex:0 0 100%;justify-content:center;padding-left:0}
  .footer-top__cta{flex:0 0 auto;padding:0}
  .footer-top__social{flex:0 0 100%;justify-content:center;padding:0}
  .footer-main{padding:60px 5px 40px}
  .footer-cols{grid-template-columns:repeat(2,1fr);gap:20px 10px}
}
@media (max-width:600px){
  .footer-cols{grid-template-columns:1fr}
}

/* Icon list used by the contact page panels (was shared with the old footer). */
.contact-list li{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.75rem}
.contact-list a{overflow-wrap:anywhere}
.contact-list svg{width:1.1rem;height:1.1rem;margin-top:.32rem;fill:var(--secondary);flex:none}

/* ------------------------------------------------------- 16. utilities --- */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:.75rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2.25rem}
.mb-1{margin-bottom:.75rem}.mb-2{margin-bottom:1.5rem}.mb-3{margin-bottom:2.25rem}
.muted{color:var(--muted)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.flow > *+*{margin-top:1rem}

.notice{
  padding:1rem 1.15rem;border-radius:var(--radius);
  background:#fff8e8;border-left:4px solid var(--gold);
  font-size:.9rem;color:#6b4a00;
}

.to-top{
  position:fixed;right:15px;bottom:15px;z-index:80;
  display:grid;place-items:center;width:40px;height:40px;
  background:var(--secondary);color:var(--light);
  border-radius:4px;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--mid) var(--ease),transform var(--mid) var(--ease),visibility var(--mid),background var(--fast) var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--primary);color:var(--light)}
.to-top svg{width:18px;height:18px;fill:currentColor}

/* modal (used by the complaint form and the gallery lightbox) */
.modal{
  position:fixed;inset:0;z-index:150;
  display:grid;place-items:center;padding:1rem;
  background:rgba(5,5,56,.72);
}
.modal[hidden]{display:none}
.modal__box{
  width:min(100%,44rem);max-height:88vh;overflow-y:auto;
  background:var(--light);border-radius:var(--radius-lg);
  padding:clamp(1.25rem,3vw,2rem);
  box-shadow:var(--shadow-lift);
}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.modal__head h2{margin:0}
.modal__close{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:50%;color:var(--primary);background:var(--tint);
}
.modal__close:hover{background:var(--secondary)}
.modal__close svg{width:1rem;height:1rem;fill:currentColor}
.modal--light .modal__box{background:transparent;box-shadow:none;width:min(100%,72rem);padding:0}
.modal--light img{width:100%;border-radius:var(--radius-lg)}

/* ---------------------------------------------------------- 17. motion --- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}
.reveal:nth-child(5){transition-delay:.24s}
.reveal:nth-child(6){transition-delay:.3s}

/* no-JS safety net: never leave content invisible */
.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  /* slides now move with transform, so park them all and show the first */
  .hero__slide{animation:none;transform:translateX(100%)}
  .hero__slide:first-child{transform:none}
  .card:hover{transform:none}
  .card:hover .card__media img{transform:none}
  .btn:hover{transform:none}
}

@media print{
  .site-header,.site-footer,.to-top,.nav,.searchbar,.gallery__thumbs,.modal{display:none!important}
  body{color:#000;background:#fff}
  a{color:#000;text-decoration:underline}
}