/* ==========================================================================
   STYLE.CSS - the ONLY stylesheet for the whole site

   QUICK EDITS
   - Change colours, fonts or how strong the photo overlays are in section 1.
   - Each section below has a number. Search for "SECTION 12" and so on.
   - Later rules override earlier ones, so keep the sections in this order.

   CONTENTS
    1  Colours, fonts, photo overlays and dark mode
    2  Reset and base
    3  Layout wrapper
    4  Header and navigation
    5  Buttons
    6  Hero (top of home page)
    7  Trust bar
    8  Page head (title area on inner pages)
    9  Sections, headings and grids
   10  Cards, rooms and icons
   11  About block
   12  Gallery
   13  FAQ
   14  Call to action
   15  Footer
   16  Forms
   17  Apply form steps (wizard)
   18  Thank-you and text pages
   19  Location and map
   20  What is included (navy section)
   21  Property cards and detail page
   22  Floating buttons, scroll bar, photo viewer
   23  Comparison table, availability badges, fees box
   24  Mobile layout
   25  Animations
   26  Background photos placed in the HTML, FAQ scroll effects
   27  How it works strip, text selection
   28  Photo slider (home page)
   ========================================================================== */


/* ==========================================================================
   SECTION 1 - COLOURS, FONTS, PHOTO OVERLAYS AND DARK MODE
   ========================================================================== */
:root {
  /* Brand colours (matched to the logo) */
  --navy:  #0d1f3f;   /* header, footer, dark sections */
  --navy2: #162b52;   /* lighter navy */
  --red:   #8a171c;   /* buttons and highlights */
  --red2:  #6e1115;   /* darker red (button hover) */
  --gold:  #d4a94f;   /* small accents */

  /* PHOTO OVERLAYS: how much colour sits on top of the background photos.
     0 = photo fully clear, 1 = solid colour.
     Lower these two numbers to see more of the photos. */
  --shade-text:  .62;   /* behind the words (keep above .45 so text stays readable) */
  --shade-clear: .10;   /* where there are no words */

  /* Photos placed in the HTML as <img class="bg-img"> (see section 26).
     Strength of the white veil on top of each one: 0 = photo fully clear, 1 = solid white. */
  --veil-faq:   .6;    /* FAQ section (fq.jpeg) */
  --veil-card:  .55;   /* navy over the photos on the "What we stand for" cards */
  --veil-applysec: .12; /* home page "Apply now" section (from.jpeg) */
  --veil-compare: .8;  /* comparison table section (from.jpeg) */
  --veil-apply: .06;   /* around the apply form (the form box itself stays solid) */
  --shade-head: .46;   /* navy over the title photo on inner pages (lower = photo more visible) */

  /* Light-mode surfaces and text. WHITE IS THE DEFAULT for every visitor. */
  color-scheme: light;
  --veil-rgb: 255, 255, 255;   /* colour of the veil on background photos */
  --paper: #ffffff;   /* page background */
  --sand:  #f5f7fb;   /* alternate section background */
  --ink:   #14213d;   /* main text */
  --muted: #58627a;   /* softer text */
  --card:  #ffffff;   /* card background */
  --leaf:  #e6ebf5;   /* light tint */
  --line:  #dde2ee;   /* thin borders */
  --head:  #0d1f3f;   /* heading colour */
  --link:  #8a171c;   /* outlined buttons, prices */

  /* Fonts (the Google Fonts link in each HTML page loads these) */
  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  /* Rounded corner size */
  --r: 16px;

  /* Old names, kept in case a page still uses them inline */
  --maroon:  var(--red);
  --maroon2: var(--red2);
  --green:   #b8862d;
}

/* Dark mode ONLY when the visitor taps the dark-mode button (the choice is remembered).
   The site is always white first, even on phones set to dark. */
:root[data-theme=dark] {
  color-scheme: dark;
  --veil-rgb: 10, 20, 40;
  --paper: #0a1428; --sand: #0f1c36; --ink: #eef2fb; --muted: #a9b4cc;
  --card: #14233f; --leaf: #1c2f52; --line: #25365a; --head: #eef2fb; --link: #f0a3a6;
}


/* ==========================================================================
   SECTION 2 - RESET AND BASE
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;   /* stops the sticky header covering anchor targets */
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  font-size: 17px;
}

h1, h2, h3 {
  font-family: var(--font-head);
  line-height: 1.12;
  letter-spacing: -.01em;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* The "hidden" attribute must always win (buttons would otherwise ignore it) */
[hidden] { display: none !important; }

/* "Skip to content" link for keyboard users */
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--red);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 50;
}
.skip:focus { left: 8px; }

/* Small helpers used inside the HTML pages */
.link { text-decoration: underline; }
.narrow { max-width: 760px; }
.sub-h { margin-top: 44px; font-size: 30px; }
.lead.tight { margin-bottom: 24px; }
.lead.flush { margin: 0 0 20px; }


/* ==========================================================================
   SECTION 3 - LAYOUT WRAPPER
   ========================================================================== */
.wrap { width: min(1120px, 100% - 40px); margin: auto; }


/* ==========================================================================
   SECTION 4 - HEADER AND NAVIGATION
   ========================================================================== */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);                                        /* fallback for old browsers */
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(13, 31, 63, .06);
  transition: box-shadow .3s, background-color .3s;
}
header.scrolled { box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .35); }

header .wrap { display: flex; align-items: center; gap: 16px; height: 74px; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--head);
  font-size: 22px;
  margin-right: auto;
}

/* The logo sits on a white chip so it stays visible in dark mode */
.brand img {
  height: 46px;
  width: auto;
  background: #fff;
  border-radius: 12px;
  padding: 4px 7px;
  border: 1px solid var(--line);
}

nav { display: flex; gap: 22px; font-weight: 700; font-size: 15px; }
nav a { padding: 4px 0; border-bottom: 2px solid transparent; transition: color .2s; }
nav a:hover,
nav a[aria-current] { color: var(--link); border-bottom-color: var(--gold); }

/* Dark-mode toggle and phone menu buttons */
#theme, #menu {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 16px;
}
#menu { display: none; }   /* only shown on phones (see section 24) */


/* ==========================================================================
   SECTION 5 - BUTTONS
   ========================================================================== */
.btn {
  display: inline-block;
  background: var(--red);
  color: #fff;
  padding: 12px 26px;
  border-radius: 999px;
  border: 2px solid var(--red);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
  transition: background .2s, transform .2s, color .2s, box-shadow .2s;
}
.btn:hover { background: var(--red2); border-color: var(--red2); }
.btn:disabled { opacity: .6; cursor: wait; }

.btn.alt { background: transparent; color: var(--link); border: 2px solid var(--link); box-shadow: none; }
.btn.alt:hover { background: var(--red); border-color: var(--red); color: #fff; }


/* ==========================================================================
   SECTION 6 - HERO (top of the home page)
   ========================================================================== */
/* Navy overlay on hero.jpg: strong on the left (behind the words), light on
   the right so the photo shows. If hero.jpg is missing you still get navy. */
.hero {
  background:
    linear-gradient(100deg,
      rgba(13, 31, 63, var(--shade-text)) 0%,
      rgba(13, 31, 63, calc(var(--shade-text) - .18)) 45%,
      rgba(13, 31, 63, var(--shade-clear)) 100%),
    url(hero.jpg) center / cover no-repeat,
    var(--navy);
  color: #fff;
  padding: 84px 0 96px;
  position: relative;
  overflow: hidden;
}

/* Soft gold glow, top right */
.hero::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212, 169, 79, .3), transparent);
  will-change: transform;
  pointer-events: none;
}

/* Soft crimson glow, bottom left, drifting slowly (see section 25) */
.hero::after {
  content: "";
  position: absolute;
  left: -120px;
  bottom: -160px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(138, 23, 28, .6), transparent);
  will-change: transform;
  pointer-events: none;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 860px;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;   /* keeps the text above the glow and diamond */
}

.hero h1 {
  font-size: clamp(40px, 5.6vw, 68px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .45), 0 4px 22px rgba(0, 0, 0, .35);
}

.hero p {
  font-size: 19px;
  color: #eef2fb;
  max-width: 46ch;
  margin-bottom: 28px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

.actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero .btn.alt { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .06); }
.hero .btn.alt:hover { background: #fff; color: var(--navy); }

.stats {
  display: flex;
  gap: 36px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .3);
  flex-wrap: wrap;
}
.stats b { display: block; font: 800 26px var(--font-head); color: var(--gold); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.stats span { font-size: 14px; color: #e3e9f6; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }

/* QUICK-APPLY SLIP: the short form in the hero.
   A card with a gold key-tag hanging from the top, tilted a little like a slip
   pinned to a notice board. It straightens when you hover or start typing. */
.slip {
  position: relative;
  background: var(--card);
  color: var(--ink);
  border-radius: 20px;
  padding: 92px 28px 26px;   /* top space leaves room for the key-tag */
  transform: rotate(1.6deg);
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .35);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.slip:hover, .slip:focus-within { transform: rotate(0); }

.slip-tag {
  position: absolute;
  top: 0;
  left: 28px;
  background: var(--gold);
  color: var(--navy);
  font: 800 15px var(--font-body);
  padding: 28px 18px 18px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}
/* The punched hole at the top of the tag */
.slip-tag::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}

.slip h2 { font-size: 28px; margin-bottom: 6px; }
.slip h2::after { content: none; }

/* The hero paragraph rules (white, large, shadowed) must not reach inside the slip */
.hero .slip p {
  font-size: 15px;
  color: var(--muted);
  max-width: none;
  margin: 0;
  text-shadow: none;
}
.hero .slip .link { color: var(--link); font-weight: 700; }

.slip form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.slip label { font-size: 14px; }
.slip input, .slip select { padding: 10px 12px; }
.slip .btn { width: 100%; text-align: center; }
.slip .live { min-height: 0; }


/* ==========================================================================
   SECTION 7 - TRUST BAR
   ========================================================================== */
.trust { background: var(--red); color: #fff; padding: 16px 0; font-weight: 700; }
.trust .wrap { display: flex; justify-content: space-between; gap: 10px 28px; flex-wrap: wrap; }


/* ==========================================================================
   SECTION 8 - PAGE HEAD (title area on inner pages)
   ========================================================================== */
/* The photo is an <img class="bg-img"> inside .page-head in each HTML page.
   The navy layer on top is set by --shade-head in section 1: lower it to show more photo. */
.page-head {
  background: var(--navy);
  padding: 64px 0 40px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-head .bg-img { object-position: center 20%; }
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(13, 31, 63, calc(var(--shade-head) + .08)) 0%,
    rgba(13, 31, 63, calc(var(--shade-head) - .16)) 100%);
}
.page-head h1 {
  font-size: clamp(36px, 5vw, 56px);
  color: #fff;
  margin-bottom: 10px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.page-head p { color: #eef2fb; max-width: 60ch; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.page-head .back { color: var(--gold); font-weight: 700; }


/* ==========================================================================
   SECTION 9 - SECTIONS, HEADINGS AND GRIDS
   ========================================================================== */
section { padding: 88px 0; }
.alt-bg { background: var(--sand); }

h2 { font-size: clamp(30px, 4vw, 44px); color: var(--head); margin-bottom: 12px; }
.lead { color: var(--muted); max-width: 60ch; margin-bottom: 38px; }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g1 { grid-template-columns: minmax(0, 560px); justify-content: center; }   /* one card, centred */

/* Small fact boxes (optional) */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 28px; }
.facts div { background: var(--card); border-radius: 12px; padding: 14px 16px; border-left: 5px solid var(--gold); }
.facts b { display: block; font: 800 17px var(--font-head); color: var(--red); }
.facts span { font-size: 13.5px; color: var(--muted); }


/* ==========================================================================
   SECTION 10 - CARDS, ROOMS AND ICONS
   ========================================================================== */
.card {
  background: var(--card);
  border-radius: var(--r);
  padding: 28px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  box-shadow: 0 10px 30px -14px rgba(13, 31, 63, .28);
  transition: transform .2s, box-shadow .35s, border-color .35s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -16px rgba(13, 31, 63, .4); }
.card h3 { font-size: 22px; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15.5px; }

.ico {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--navy);
  display: grid;
  place-items: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.card .price { font: 800 30px var(--font-head); color: var(--link); margin: 10px 0; }
.price small { font: 600 14px var(--font-body); color: var(--muted); }
.price.ask { font-size: 20px; }

.card ul { list-style: none; margin: 12px 0 20px; display: grid; gap: 6px; font-size: 15px; }
.card li::before { content: "✓ "; color: var(--gold); font-weight: 800; }

/* Price lines inside a card, e.g. "Single  R3 200 /month" */
.card .price-list { margin: 10px 0 14px; gap: 2px; }
.card .price-list li::before { content: none; }
.price-list b { font: 800 22px var(--font-head); color: var(--link); }

.room { padding: 0; overflow: hidden; border-top: 0; }
.room img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--navy); }
.room .in { padding: 26px; }

/* Numbered steps (the number is added automatically) */
.steps, .steps-how { counter-reset: s; }
.steps .card, .steps-how .card { counter-increment: s; }
.steps h3::before, .steps-how h3::before { content: counter(s) ". "; color: var(--red); }


/* ==========================================================================
   SECTION 11 - ABOUT BLOCK
   ========================================================================== */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about img { border-radius: var(--r); box-shadow: -12px 12px 0 var(--red); }

/* Manager block on the About page: photo, then her story */
.about.manager { margin-top: 80px; }
.about.manager img {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  justify-self: center;
  box-shadow: 12px 12px 0 var(--gold);
}
.about.nophoto { grid-template-columns: 1fr; }   /* photo file missing: text only */

/* Home page version: photo on the left stays clear, text sits on navy */
#about {
  background:
    linear-gradient(90deg,
      rgba(13, 31, 63, var(--shade-clear)) 0%,
      rgba(13, 31, 63, var(--shade-text)) 100%),
    url(BQ.jpg) center 20% / cover no-repeat,
    var(--navy);
}
#about h2, #about h3, #about p { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
#about .lead { color: #eef2fb; }
#about .btn.alt { color: #fff; border-color: #fff; text-shadow: none; }
#about .btn.alt:hover { background: #fff; color: var(--navy); }


/* ==========================================================================
   SECTION 12 - GALLERY
   ========================================================================== */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.gal figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--navy);
  aspect-ratio: 1;
}
.gal img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }

.gal figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 16px 12px;
  background: linear-gradient(transparent, rgba(13, 31, 63, .9));
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

/* Two tall photos in the big gallery */
.gal figure:nth-child(1),
.gal figure:nth-child(5) { grid-row: span 2; aspect-ratio: auto; }


/* ==========================================================================
   SECTION 13 - FAQ
   ========================================================================== */
details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 10px;
}
summary { cursor: pointer; font-weight: 800; transition: color .2s; }
summary:hover { color: var(--red); }
details[open] { border-color: var(--red); }
details p { color: var(--muted); margin-top: 8px; }


/* ==========================================================================
   SECTION 14 - CALL TO ACTION
   ========================================================================== */
.cta {
  background:
    linear-gradient(120deg,
      rgba(110, 17, 21, calc(var(--shade-text) + .1)),
      rgba(138, 23, 28, calc(var(--shade-text) - .05))),
    url(students.jpeg) center / cover no-repeat,
    var(--red);
  color: #fff;
  text-align: center;
}
.cta h2 { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
.cta .lead { color: #fff; margin: 0 auto 26px; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.cta .btn { background: #fff; border-color: #fff; color: var(--red); text-shadow: none; }
.cta .btn.alt { background: transparent; color: #fff; border-color: #fff; }
.cta .btn.alt:hover { background: #fff; color: var(--red); }

.row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }


/* ==========================================================================
   SECTION 15 - FOOTER
   ========================================================================== */
footer { background: var(--navy); color: #c3cde4; padding: 36px 0; font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
footer a:hover { color: var(--gold); }

footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; width: 100%; }
footer h3 { font: 800 16px var(--font-head); color: #fff; margin-bottom: 8px; }
footer .cols a { display: block; margin: 0 0 6px; text-decoration: underline; }
footer .sub { width: 100%; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 14px; }


/* ==========================================================================
   SECTION 16 - FORMS (apply and contact)
   ========================================================================== */
.form {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 36px;
  border-radius: var(--r);
  margin: 50px auto 90px;
  max-width: 820px;
}
.form h1 { font-size: clamp(30px, 5vw, 42px); color: var(--head); }
.form form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }

.f { display: flex; flex-direction: column; gap: 6px; }
.f.full { grid-column: 1 / -1; }
label { font-weight: 700; font-size: 15px; }

input, select, textarea {
  font: inherit;
  padding: 12px;
  border: 1px solid #aab4cb;
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(212, 169, 79, .35);
}

.err { color: #d13b3b; font-size: 13px; min-height: 16px; }
.err:empty { min-height: 0; }

/* Tick box with a problem: the whole row turns red and the message is clear */
.check { border: 2px solid transparent; border-radius: 12px; padding: 10px 12px; transition: background-color .2s, border-color .2s; }
.check .err { display: block; font-size: 14.5px; font-weight: 800; margin-top: 6px; }
.check.bad-row { border-color: #d13b3b; background: rgba(209, 59, 59, .08); }
.bad { border-color: #d13b3b !important; }   /* field has a problem */
.ok  { border-color: #2f9e5b !important; }   /* field is fine */

.check { display: flex; gap: 10px; align-items: flex-start; grid-column: 1 / -1; }
.check input { width: 20px; height: 20px; margin-top: 4px; }

.live { color: var(--muted); font-size: 14px; min-height: 20px; }   /* status message under a form */

/* "What you need" chips above the apply form */
.need { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.need li { background: var(--leaf); border-radius: 999px; padding: 4px 14px; font-size: 14px; font-weight: 600; }


/* ==========================================================================
   SECTION 17 - APPLY FORM STEPS (only used when the form has id="appform")
   ========================================================================== */
.form form.wiz { display: block; }

/* Progress bar at the top */
.progress {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 24px 0 14px;
  padding: 0;
}
.progress li {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  padding-top: 10px;
  border-top: 4px solid var(--line);
}
.progress li.cur  { color: var(--head); border-top-color: var(--red); }
.progress li.done { color: var(--head); border-top-color: var(--gold); }

#stepmsg { font-weight: 700; color: var(--muted); margin-bottom: 14px; }

/* Only the current step is shown */
.wiz .step { display: none; border: 0; min-width: 0; padding: 0; }
.wiz .step.on { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wiz .step legend {
  font: 800 22px var(--font-head);
  color: var(--head);
  margin-bottom: 14px;
  padding: 0;
}

/* Summary shown on the last step */
#review {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  background: var(--sand);
  padding: 18px;
  border-radius: 12px;
  grid-column: 1 / -1;
  font-size: 15px;
}
#review:empty { display: none; }
#review dt { font-weight: 700; color: var(--muted); }
#review dd { word-break: break-word; }

/* Back / Next / Send buttons */
.step-nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 24px; }
.step-nav #next, .step-nav #send { margin-left: auto; }
#sendmsg { margin-top: 14px; }


/* ==========================================================================
   SECTION 18 - THANK-YOU AND TEXT PAGES
   ========================================================================== */
.thanks { text-align: center; padding: 110px 0; }
.thanks .tick { font-size: 70px; color: #2f9e5b; }
.thanks p { color: var(--muted); max-width: 50ch; margin: 14px auto 28px; }

/* Terms, privacy and rules */
.doc { max-width: 760px; padding: 60px 0; }
.doc h1 { color: var(--head); margin-bottom: 10px; }
.doc h2 { font-size: 24px; margin: 28px 0 8px; }
.doc p, .doc li { color: var(--muted); }
.doc ul { margin-left: 20px; }


/* ==========================================================================
   SECTION 19 - LOCATION AND MAP
   ========================================================================== */
.loc { background: url(location.jpg) center bottom / cover no-repeat, var(--sand); padding-bottom: 150px; }

.map {
  border-radius: var(--r);
  overflow: hidden;
  min-height: 340px;
  border: 6px solid var(--card);
  box-shadow: 10px 10px 0 var(--gold);
}
.map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }

/* Smaller map used inside the two-property map cards */
.map.sm { min-height: 260px; box-shadow: 6px 6px 0 var(--gold); margin-bottom: 18px; }
.map.sm iframe { min-height: 260px; }

.pin { animation: pulse 2.4s infinite; }
.card .btn { margin: 14px 8px 0 0; }
.campus { font-weight: 700; color: var(--head); margin-bottom: 6px; }
.sub-note { margin-top: 14px; font-size: 14.5px; }


/* ==========================================================================
   SECTION 20 - WHAT IS INCLUDED (dark navy section on the home page)
   ========================================================================== */
#includes {
  background:
    linear-gradient(rgba(13, 31, 63, calc(var(--shade-text) + .05)), rgba(13, 31, 63, calc(var(--shade-text) + .1))),
    url(roomcartoon.jpg) center / cover no-repeat,
    var(--navy);
  color: #fff;
}
#includes h2, #includes h3 { color: #fff; }
#includes .lead, #includes .card p { color: #eef2fb; }
#includes .card {
  background: rgba(13, 31, 63, .8);   /* solid tint instead of a live blur (blur made scrolling lag) */
  border: 1px solid rgba(212, 169, 79, .5);
  border-top: 4px solid var(--gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
#includes .card:hover { border-color: var(--gold); }
#includes .ico { background: rgba(212, 169, 79, .22); }


/* ==========================================================================
   SECTION 21 - PROPERTY CARDS AND DETAIL PAGE
   ========================================================================== */
.prop { overflow: hidden; }
.prop img { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.prop:hover img { transform: scale(1.06); }
.prop .in .btn { margin-top: 10px; }

.prop .badge {
  display: inline-block;
  background: rgba(138, 23, 28, .1);
  color: var(--link);
  font-weight: 800;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.tags span {
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 3px 13px;
  font-size: 13.5px;
  font-weight: 600;
}
.tags.big span { font-size: 15px; padding: 6px 16px; background: var(--card); }

/* House page: photos on the left, prices on the right */
.detail { display: grid; grid-template-columns: 1.7fr 1fr; gap: 36px; align-items: start; }
.side { position: sticky; top: 96px; }
.side .btn { display: block; text-align: center; margin: 10px 0 0; }
.side .avail { margin: 4px 6px 0 0; }

.gal.pg { grid-template-columns: repeat(2, 1fr); }
.gal.pg figure:nth-child(n) { grid-row: auto; aspect-ratio: 4 / 3; }
.gal.pg figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }


/* ==========================================================================
   SECTION 22 - FLOATING BUTTONS, SCROLL BAR AND PHOTO VIEWER
   (these elements are created by script.js)
   ========================================================================== */

/* Floating buttons. WhatsApp and Apply sit together in a stack, bottom right,
   on every page. Back-to-top sits bottom left. */
.fab {
  position: fixed;
  z-index: 20;
  border: 0;
  cursor: pointer;
  font: 800 15px var(--font-body);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  transition: transform .2s, box-shadow .2s;
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .34); }

.fab-stack {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.fab-stack .fab { position: static; }

.fab.wa {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #fff;
}
.fab.wa svg { width: 32px; height: 32px; fill: currentColor; }

.fab.apply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: #fff;
  padding: 13px 22px;
  border-radius: 999px;
}
.fab.apply:hover { background: var(--red2); }
.fab.top {
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 20px;
}

/* Thin progress bar across the top while scrolling */
.scroll-progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 4px;
  width: 100%;
  z-index: 60;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--red), var(--gold));
}

/* Photo viewer (opens when a gallery photo is clicked) */
.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 14, 28, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.lb.on { opacity: 1; visibility: visible; }
.lb img {
  max-width: min(1100px, 94vw);
  max-height: 78vh;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  transform: scale(.94);
  transition: transform .35s;
}
.lb.on img { transform: none; }
.lb p { color: #fff; font-weight: 700; margin: 0; text-align: center; }
.lb button {
  position: absolute;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 22px;
  transition: background .2s, transform .2s;
}
.lb button:hover { background: var(--red); transform: scale(1.08); }
.lb .x  { top: 18px; right: 18px; }
.lb .pv { left: 18px; top: 50%; }
.lb .nx { right: 18px; top: 50%; }

/* Button click ripple */
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); pointer-events: none; }


/* ==========================================================================
   SECTION 23 - COMPARISON TABLE, AVAILABILITY BADGES, FEES BOX
   ========================================================================== */

/* Availability badge. Set the status in script.js (SITE.availability). */
.avail {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--leaf);
  color: var(--ink);
}
.avail.open { background: #dff3e6; color: #17653a; }
.avail.few  { background: #fff1d6; color: #8a5a00; }
.avail.full { background: #fbe0e0; color: #8a171c; }
.avail-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }

/* Side-by-side comparison of the two properties */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
}
.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { font: 800 20px var(--font-head); color: var(--head); background: var(--sand); }
.compare tbody th { font-weight: 700; color: var(--muted); width: 30%; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare b { color: var(--link); }

/* "What you pay" box: honest, upfront costs */
.fees {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 6px solid var(--gold);
  border-radius: var(--r);
  padding: 26px 28px;
  max-width: 760px;
}
.fees h3 { font-size: 24px; }
.fees p { color: var(--muted); margin-top: 6px; }
.fees dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; margin-top: 16px; }
.fees dt { font-weight: 700; }
.fees dd { color: var(--muted); }


/* ==========================================================================
   SECTION 24 - MOBILE LAYOUT (800px and smaller)
   ========================================================================== */
@media (max-width: 800px) {
  section { padding: 64px 0; }

  .hero .wrap, .about, .g2, .g3, .detail { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: 1fr 1fr; }
  .gal { grid-template-columns: 1fr 1fr; }
  footer .cols { grid-template-columns: 1fr; }

  .hero { padding: 56px 0 72px; }
  .slip { transform: none; padding: 88px 20px 22px; }
  .slip form { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; gap: 30px; }
  .how li::after { display: none; }
  footer { padding-bottom: 110px; }   /* keeps the floating buttons off the last line */
  .map { box-shadow: 6px 6px 0 var(--gold); }
  .about img { box-shadow: -8px 8px 0 var(--red); }
  .about.manager { margin-top: 56px; }
  .about.manager img { box-shadow: 8px 8px 0 var(--gold); }

  /* Menu collapses into a button */
  #menu { display: block; }
  header > .wrap > .btn { display: none; }
  nav { display: none; }

  header.open nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    background: var(--paper);
    padding: 20px;
    border-bottom: 3px solid var(--red);
  }

  .form form,
  .wiz .step.on { grid-template-columns: 1fr; }
  .form { padding: 22px; }
  .progress li { font-size: 11px; }
  #review { grid-template-columns: 1fr; }
  .step-nav .btn { flex: 1; }
  .fees dl { grid-template-columns: 1fr; gap: 2px; }
  .fees dd { margin-bottom: 10px; }
  .side { position: static; }
  .brand span { font-size: 18px; }
}

@media (max-width: 480px) {
  .g4 { grid-template-columns: 1fr; }
  .brand span { display: none; }
}


/* ==========================================================================
   SECTION 25 - ANIMATIONS
   Everything here only runs for visitors who have NOT asked their device
   for reduced motion. To switch off all animation, delete this whole section.

   SPEED: the scroll reveal is the ".3s" in "SCROLL REVEAL" below.
   Make it smaller (.2s) for snappier, bigger (.5s) for slower.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Page fades in */
  body { animation: fade-in .3s both; }

  /* Hero: headline words drop in one by one (script.js wraps each word in .w),
     then the rest of the text follows, the glow drifts and the logo card floats */
  .hero h1 .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(.5em);
    animation: word-drop .45s cubic-bezier(.2, .8, .2, 1) forwards;
    animation-delay: calc(var(--i) * 45ms + 60ms);
  }
  .hero .wrap > div:first-child > :not(h1) { animation: rise .5s both; }
  .hero .wrap > div:first-child > :nth-child(2) { animation-delay: .25s; }
  .hero .wrap > div:first-child > :nth-child(3) { animation-delay: .32s; }
  .hero .wrap > div:first-child > :nth-child(4) { animation-delay: .4s; }
  .hero::before { animation: glow-drift 14s ease-in-out infinite alternate; }
  .hero::after  { animation: glow-drift-2 18s ease-in-out infinite alternate; }
  .slip { animation: slip-in .7s .15s cubic-bezier(.2, .8, .2, 1) backwards; }

  /* WhatsApp button: a soft ring pulses outwards now and then to draw the eye */
  .fab.wa::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25d366;
    animation: wa-ring 3.2s 2s infinite;
    pointer-events: none;
  }

  .page-head h1, .page-head p { animation: rise .5s both; }
  .page-head p { animation-delay: .08s; }

  /* SCROLL REVEAL: script.js adds .js to the page, .rv to elements and .in when seen.
     Short and small on purpose, so it never looks like the page is lagging. */
  .js .rv {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .3s ease-out, transform .3s ease-out;
  }
  .js .rv.in { opacity: 1; transform: none; }
  /* Slide distance must stay smaller than the 20px page margin, or phones get a sideways scroll */
  .js .rv[data-rv=left]  { transform: translateX(-16px); }
  .js .rv[data-rv=right] { transform: translateX(16px); }
  .js .rv[data-rv=zoom]  { transform: scale(.96); }
  .js .rv[data-rv].in    { transform: none; }

  /* Headings get a small gold underline */
  section h2 { position: relative; padding-bottom: 14px; }
  section h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 64px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--red), var(--gold));
  }
  .cta h2::after { background: #fff; left: 50%; transform: translateX(-50%); }

  /* Menu underline grows from the centre */
  nav a { position: relative; border-bottom: 0; }
  nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -4px;
    height: 3px;
    border-radius: 3px;
    background: var(--gold);
    transition: left .3s, right .3s;
  }
  nav a:hover::after,
  nav a[aria-current]::after { left: 0; right: 0; }

  /* Buttons: shine sweep, press, and a soft pulse on the header Apply button */
  .btn { position: relative; overflow: hidden; }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(.97); }
  .btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    transition: left .6s;
  }
  .btn:hover::after { left: 130%; }
  header .btn { animation: ring 3.4s 2s infinite; }
  .ripple { animation: ripple .65s ease-out forwards; }

  .trust span { transition: transform .25s; }
  .trust span:hover { transform: translateY(-2px) scale(1.04); }

  /* Cards: once revealed they lift on hover and tilt with the mouse */
  .js .card.rv.in { transition: opacity .3s, transform .2s, box-shadow .35s; }
  .js .card.rv.in:hover { transform: translateY(-4px); }
  .js .card.rv.in.tilt {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
    transition: transform .18s ease-out, box-shadow .35s;
  }

  .card .ico { display: inline-block; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
  .card:hover .ico { transform: translateY(-4px) rotate(-8deg) scale(1.18); }

  /* Gallery photos zoom a little on hover */
  .gal img { transition: transform .9s cubic-bezier(.2, .8, .2, 1), filter .5s; }
  .gal figure:hover img { transform: scale(1.08); filter: saturate(1.12); }

  /* FAQ answers ease open, mobile menu slides down */
  details[open] > :not(summary) { animation: open .35s both; }
  header.open nav { animation: open .3s both; }

  /* Dark-mode button spins on hover */
  #theme { transition: transform .5s; }
  #theme:hover { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .prop img { transition: none; }
  .card:hover, .prop:hover img { transform: none; }
  .pin { animation: none; }
}

@keyframes fade-in    { from { opacity: 0; } }
@keyframes rise       { from { opacity: 0; transform: translateY(18px); } }
@keyframes pop        { from { opacity: 0; transform: scale(.96); } }
@keyframes word-drop  { to   { opacity: 1; transform: none; } }
@keyframes slip-in    { from { opacity: 0; transform: translateY(26px) rotate(5deg); } }
@keyframes wa-ring    { 0%, 60% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes glow-drift { to   { transform: translate(-60px, 40px) scale(1.15); } }
@keyframes glow-drift-2 { to { transform: translate(80px, -50px) scale(1.2); } }
@keyframes ripple     { to   { transform: scale(4); opacity: 0; } }
@keyframes open       { from { opacity: 0; transform: translateY(-8px); } }
@keyframes ring {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(138, 23, 28, 0); }
  80%           { box-shadow: 0 0 0 10px rgba(138, 23, 28, .22); }
  95%           { box-shadow: 0 0 0 16px rgba(138, 23, 28, 0); }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 169, 79, .5); }
  50%      { box-shadow: 0 0 0 14px rgba(212, 169, 79, 0); }
}


/* ==========================================================================
   SECTION 26 - BACKGROUND PHOTOS PLACED IN THE HTML, FAQ SCROLL EFFECTS
   The photos are real <img class="bg-img"> tags inside the section (not CSS).
   Pattern:  <section class="has-bg" style="--veil-a: var(--veil-faq)">
               <img class="bg-img" src="photo.jpeg" alt="" aria-hidden="true">
               ...content...
             </section>
   If a photo file is missing, the image is removed and the section keeps its plain colour.
   ========================================================================== */
.has-bg { position: relative; overflow: hidden; isolation: isolate; }

.bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  user-select: none;
}

/* White veil (dark in dark mode) so text on top stays readable */
.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(var(--veil-rgb), var(--veil-a, .8));
}

/* The FAQ photo is taller than its section so it can drift a little on scroll */
.bg-img[data-parallax] { inset: -8% 0 auto 0; height: 116%; will-change: transform; }

/* Apply page: the photo sits behind the whole page, the form box stays solid */
main.has-bg { min-height: 60vh; }

@media (prefers-reduced-motion: no-preference) {
  /* FAQ: questions slide in one after another, alternating left and right (small and quick) */
  .js #faq details.rv { transition: opacity .35s ease-out, transform .35s ease-out; transition-delay: calc(var(--i, 0) * 70ms); }
}


/* Value cards with a photo behind them (About page, "What we stand for") */
.photo-card { min-height: 260px; border-top-color: var(--gold); color: #fff; }
.photo-card::before { background: rgba(13, 31, 63, var(--veil-card)); }
.photo-card h3, .photo-card p { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.photo-card .ico { background: rgba(212, 169, 79, .3); }

/* Manager block extras */
.about.manager .role { color: var(--red); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; margin-bottom: 6px; }
.about.manager .facts { margin: 22px 0 18px; }
.about.manager h3 { font-size: 22px; color: var(--head); margin: 22px 0 8px; }
.about.manager .lead { margin-bottom: 0; }
.ticks { list-style: none; display: grid; gap: 6px; }
.ticks li::before { content: "✓ "; color: var(--gold); font-weight: 800; }

.quote { margin-top: 22px; padding: 14px 18px; border-left: 5px solid var(--gold); background: var(--sand); border-radius: 0 12px 12px 0; font: italic 700 18px var(--font-head); color: var(--head); }


/* ==========================================================================
   SECTION 27 - HOW IT WORKS, TEXT SELECTION
   Three steps in a row, joined by a dotted gold line. The numbers are real:
   the steps happen in this order.
   ========================================================================== */
.how { list-style: none; counter-reset: how; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }

.how li { counter-increment: how; position: relative; padding-right: 32px; }

.how li::before {
  content: counter(how);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font: 800 22px var(--font-head);
  box-shadow: 0 0 0 7px var(--sand);   /* gap between the circle and the line */
}

/* Dotted line from this step's circle to the next one */
.how li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 62px;
  right: 14px;
  border-top: 3px dotted var(--gold);
}

.how h3 { font-size: 23px; color: var(--head); margin-bottom: 6px; }
.how p { color: var(--muted); max-width: 32ch; }

::selection { background: var(--gold); color: var(--navy); }


/* ==========================================================================
   SECTION 28 - PHOTO SLIDER (home page, "A home, not just a room")
   The slides sit side by side in .slides and the row slides left and right.
   script.js (section 9b) adds the dots and moves the slides.
   ========================================================================== */
.slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  aspect-ratio: 4 / 3;
  background: var(--navy);
  box-shadow: -12px 12px 0 var(--red);
  contain: layout paint;
  touch-action: pan-y;   /* up/down still scrolls the page; left/right is the slider's */
}
.slides { display: flex; height: 100%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; }
.slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }

.slide figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 44px 20px 46px;
  background: linear-gradient(transparent, rgba(13, 31, 63, .88));
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

.sl-btn {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 31, 63, .6);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.sl-btn:hover { background: var(--red); transform: scale(1.08); }
.sl-prev { left: 12px; }
.sl-next { right: 12px; }

.sl-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.sl-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: width .25s, background .25s;
}
.sl-dots button[aria-current="true"] { width: 26px; border-radius: 6px; background: var(--gold); }

@media (max-width: 800px) {
  .slider { box-shadow: -8px 8px 0 var(--red); }
}
@media (prefers-reduced-motion: reduce) {
  .slides { transition: none; }
}


/* ==========================================================================
   SECTION 29 - SMALL ADDITIONS
   ========================================================================== */
/* Hidden visually but still read by screen readers (apply step headings) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Slider arrows removed: dots, swipe and auto-play remain */
.sl-btn { display: none; }

/* Home page: text first, photo slider underneath */
.about.stacked { grid-template-columns: 1fr; gap: 36px; }
.about.stacked .slider { max-width: 860px; width: 100%; margin: 0 auto; }

/* Comparison table sits on a photo: keep it solid so it stays readable */
#compare .table-wrap { background: var(--card, #fff); }


/* ==========================================================================
   SECTION 30 - PROPERTY CARDS (photo, "From" price tag, footer row)
   ========================================================================== */
.pcard .pimg { position: relative; overflow: hidden; }
.pcard .pimg img { aspect-ratio: 16 / 10; }
.from-tag {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(20, 20, 20, .88); color: #fff;
  font-weight: 800; font-size: 15px;
  padding: 9px 14px; border-radius: 8px;
}
.pcard .in { padding: 24px 24px 22px; }
.pcard h3 { font-size: 24px; margin-bottom: 10px; }
.pcard .psub { color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.pfoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 22px;
}
/* "More Information" has no underline or line under it */
.pfoot .more {
  color: var(--ink); font-weight: 700; text-decoration: none; border: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.pfoot .more:hover { color: var(--link); }
.apply-pill {
  background: #b9dcff; color: #0d1f3f; font-weight: 800;
  padding: 14px 26px; border-radius: 999px; text-decoration: none;
  transition: background .2s, transform .2s;
}
.apply-pill:hover { background: #9cccfa; transform: translateY(-1px); }

/* ==========================================================================
   SECTION 31 - HOME PAGE "APPLY NOW" SECTION
   ========================================================================== */
#apply-now { padding: 96px 0; }
.apply-panel {
  max-width: 760px; margin: 0 auto; text-align: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .7);
  border-top: 5px solid var(--gold);
  border-radius: calc(var(--r) + 8px);
  padding: 48px 40px;
  box-shadow: 0 30px 60px -24px rgba(13, 31, 63, .55);
}
.apply-panel .eyebrow {
  color: var(--red); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; font-size: 13px; margin-bottom: 10px;
}
.apply-panel h2 { color: #0d1f3f; margin-bottom: 14px; }
.apply-panel h2::after { margin-left: auto; margin-right: auto; }
.apply-panel .lead { color: #44506a; margin: 0 auto 26px; max-width: 54ch; }
.apply-points {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin: 0 0 30px;
}
.apply-points li {
  background: #fff; border: 1px solid #dfe5f1; border-radius: 14px;
  padding: 16px 8px; display: grid; gap: 8px; justify-items: center;
}
.apply-points li::before { content: none; }
.apply-points b {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: #0d1f3f; color: #fff; font: 800 16px var(--font-head);
}
.apply-points span { color: #0d1f3f; font-weight: 700; font-size: 14px; }
.apply-panel .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.apply-panel .btn.alt { color: var(--red); border-color: var(--red); }
.apply-panel .btn.alt:hover { color: #fff; }
.apply-note { margin-top: 18px; font-size: 14px; color: #5b6680; }

/* About page: manager comes first, so the story needs the gap instead */
.about.manager:first-child { margin-top: 0; }
.about.story { margin-top: 80px; }

@media (max-width: 760px) {
  .apply-panel { padding: 34px 20px; }
  .apply-points { grid-template-columns: 1fr 1fr; }
  .pfoot { flex-wrap: wrap; }
  .about.story { margin-top: 56px; }
}


/* ==========================================================================
   SECTION 32 - "APPLY FOR 2027" SIDE TAB (added by script.js, SITE.applyTab)
   ========================================================================== */
.apply-tab {
  position: fixed;
  right: 0;
  top: 38%;
  z-index: 60;
  writing-mode: vertical-rl;
  transform: rotate(180deg);          /* reads bottom to top */
  background: var(--gold);
  color: var(--navy);
  font: 800 18px var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 26px 14px;
  border-radius: 0 22px 22px 0;       /* after the rotation this rounds the left edge */
  box-shadow: 0 10px 24px -8px rgba(13, 31, 63, .5);
  transition: padding .2s, background .2s, color .2s;
}
.apply-tab:hover, .apply-tab:focus-visible { background: var(--red); color: #fff; padding-left: 20px; }
@media (max-width: 760px) {
  .apply-tab { font-size: 14px; padding: 18px 10px; top: 32%; }
}


/* ==========================================================================
   SECTION 33 - SPEED
   Sections far below the screen are not drawn until you scroll near them.
   ========================================================================== */
#includes, #location, #how, #apply-now, footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}


/* ==========================================================================
   SECTION 34 - APPLY FORM AS ONE PAGE (groups instead of steps)
   ========================================================================== */
.form form#appform { display: grid; grid-template-columns: 1fr; gap: 28px; }
.grp {
  border: 0; min-width: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.grp legend {
  font: 800 22px var(--font-head); color: var(--head);
  margin-bottom: 14px; padding: 0; float: left; width: 100%;
}
.grp legend + * { clear: both; }
#appform .step-nav { margin-top: 0; justify-content: stretch; }
#appform .step-nav #send { width: 100%; margin-left: 0; padding: 16px 26px; font-size: 18px; }
@media (max-width: 800px) { .grp { grid-template-columns: 1fr; } }


/* ==========================================================================
   SECTION 35 - REQUIRED FIELD STAR
   ========================================================================== */
.req { color: #d13b3b; font-weight: 800; }
.req-note { font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.req-note span { color: #d13b3b; font-weight: 800; }