:root{
    --black:#000000;
    --gold-bright:#F9EB31;
    --gold-mid:#FBB53F;
    --gold-muted:#B98A46;
    --navy:#283C63;
    --navy-dark:#19263f;
    --white:#FFFFFF;
    --off-white:#F5F4F1;
    /* Fluid spacing scale (spacing audit, 21 Oct 2026). Tighter on phones, more generous on big
       screens; used for section padding, heading/paragraph rhythm and the page-intro. */
    --space-section:clamp(56px, 4vw + 40px, 96px);  /* total gap between two stacked sections (each side gets half) */
    --space-block:clamp(24px, 2vw + 16px, 48px);    /* heading/intro to the content that follows */
    --space-text:clamp(14px, 0.8vw + 10px, 20px);   /* paragraph / list rhythm inside a block */
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}
  body{
    font-family:'Lato',sans-serif;
    background:var(--navy-dark);
    color:var(--white);
    font-weight:400;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{
    font-family:'Alice',serif;
    font-weight:400;
    letter-spacing:0.01em;
  }
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  .hr{
    height:1px;
    background:linear-gradient(90deg, var(--gold-bright) 0%, var(--gold-muted) 100%);
    border:none;
    width:64px;
  }
  .hr.center{margin:0 auto;}
  .eyebrow{
    font-family:'Lato',sans-serif;
    font-size:14px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold-bright);
    font-weight:400;
  }

  /* NAV */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(24,38,66,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(250,207,57,0.15);
  }
  .nav-inner{
    max-width:1180px;margin:0 auto;padding:18px 32px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{
    display:flex;align-items:center;gap:12px;
  }
  .logo-mark{
    width:80px;height:80px;
    display:flex;align-items:center;justify-content:center;
  }
  .logo-mark img{width:100%;height:100%;object-fit:contain;}
  .logo-text{
    font-family:'Lato',sans-serif;
    letter-spacing:0.14em;
    font-size:13px;
    font-weight:400;
  }
  .nav-links{display:flex;gap:36px;font-size:14px;letter-spacing:0.03em;align-items:center;}
  .nav-links a{opacity:0.85;transition:opacity 0.2s, color 0.2s;position:relative;}
  .nav-links a:hover{opacity:1;color:var(--gold-bright);}
  .nav-dropdown{position:relative;}
  .nav-dropdown:hover .dropdown-menu{display:flex;}
  .dropdown-menu{
    display:none;flex-direction:column;
    position:absolute;top:28px;left:0;
    background:var(--navy-dark);
    border:1px solid rgba(250,207,57,0.15);
    min-width:190px;padding:8px 0;
    box-shadow:0 12px 30px rgba(0,0,0,0.4);
  }
  .dropdown-menu a{padding:11px 18px;font-size:13.5px;opacity:0.85;}
  .dropdown-menu a:hover{background:rgba(250,207,57,0.08);opacity:1;}
  .nav-cta{
    border:1px solid var(--gold-bright);
    color:var(--gold-bright);
    padding:9px 22px;
    font-size:13px;
    letter-spacing:0.05em;
    transition:background 0.2s, color 0.2s;
  }
  .nav-cta:hover{background:var(--gold-bright);color:var(--black);}
  .nav-toggle{display:none;background:none;border:none;color:var(--white);font-size:22px;cursor:pointer;}

  /* HERO */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;align-items:center;
    background:
      linear-gradient(180deg, rgba(24,38,66,0.55) 0%, rgba(24,38,66,0.8) 60%, rgba(15,24,42,0.97) 100%),
      url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;
  }
  .hero-content{padding-top:90px;max-width:720px;}
  .hero .eyebrow{margin-bottom:22px;display:block;}
  .hero h1{
    font-size:clamp(38px, 6vw, 68px);
    line-height:1.08;
    margin-bottom:26px;
  }
  .hero h1 em{
    font-style:normal;
    background:linear-gradient(90deg, var(--gold-bright), var(--gold-muted));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero p{
    font-size:18px;
    line-height:1.6;
    color:rgba(255,255,255,0.82);
    max-width:520px;
    margin-bottom:38px;
  }
  .btn-row{display:flex;gap:18px;flex-wrap:wrap;}
  .btn-primary{
    background:linear-gradient(90deg, var(--gold-bright), var(--gold-muted));
    color:var(--black);
    padding:16px 34px;
    font-family:'Lato',sans-serif;
    font-weight:700;
    font-size:14px;
    letter-spacing:0.04em;
    border:none;
    cursor:pointer;
    transition:transform 0.2s, box-shadow 0.2s;
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(250,207,57,0.25);}
  .btn-secondary{
    border:1px solid rgba(255,255,255,0.4);
    padding:16px 34px;
    font-size:14px;
    letter-spacing:0.04em;
    transition:border-color 0.2s, background 0.2s;
  }
  .btn-secondary:hover{border-color:var(--gold-bright);background:rgba(250,207,57,0.06);}

  .hero-stats{
    position:absolute; bottom:0; left:0; right:0;
    border-top:1px solid rgba(255,255,255,0.12);
    background:rgba(15,24,42,0.65);
    backdrop-filter:blur(6px);
  }
  .hero-stats .wrap{
    display:flex;
    padding:26px 32px;
    gap:0;
  }
  .stat{flex:1;padding:0 28px;border-left:1px solid rgba(255,255,255,0.12);}
  .stat:first-child{border-left:none;padding-left:0;}
  .stat-num{font-family:'Alice',serif;font-size:30px;color:var(--gold-bright);}
  .stat-label{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-top:4px;}

  /* SECTION GENERIC */
  section{padding:calc(var(--space-section) / 2) 0;position:relative;}
  .section-head{max-width:640px;margin-bottom:var(--space-block);}
  .section-head .hr{margin:22px 0 24px;}
  .section-head h2{font-size:clamp(30px,4vw,44px);line-height:1.15;}
  .section-head p{color:rgba(255,255,255,0.65);font-size:16px;line-height:1.7;margin-top:18px;}

  /* SERVICES */
  .services{background:var(--navy);}
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.08);
  }
  .services-grid-2{ grid-template-columns:repeat(2,1fr); }
  .service-card{
    background:var(--navy);
    padding:44px 34px;
    transition:background 0.25s;
  }
  .service-card:hover{background:#20304f;}
  .service-num{font-family:'Alice',serif;font-size:13px;color:var(--gold-muted);letter-spacing:0.1em;}
  .service-card h3,.service-card h2{font-size:21px;margin:18px 0 12px;}
  .service-card p{font-size:14.5px;color:rgba(255,255,255,0.6);line-height:1.65;}
  .service-link{
    display:inline-block;margin-top:20px;font-size:13px;color:var(--gold-bright);
    letter-spacing:0.03em;border-bottom:1px solid rgba(250,207,57,0.4);padding-bottom:2px;
  }

/* IMAGE HOVER-REVEAL CARD VARIANT */
.service-card.img-card{
    position:relative;
    overflow:hidden;
    background-image:url('../assets/images/Motorhome.jpg');
    background-size:cover;
    background-position:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    min-height:220px;
    transition:all 0.3s ease;
}
.service-card.img-card::before{
    content:'';
    position:absolute; inset:0;
    background:rgba(24,38,66,0.6);
    transition:background 0.35s ease;
}
.service-card.img-card:hover::before,
.service-card.img-card.is-open::before{
    background:var(--navy-dark);
}
.service-card.img-card .service-num{
    position:relative; z-index:2;
    opacity:0; height:0; overflow:hidden;
    transition:opacity 0.25s ease;
}
.service-card.img-card p{
    position:relative; z-index:2;
    opacity:0; max-height:0; overflow:hidden; margin-top:0;
    transition:opacity 0.25s ease, max-height 0.3s ease, margin-top 0.3s ease;
}
.service-card.img-card h3,
.service-card.img-card h2{
    position:relative; z-index:2;
    font-size:26px;
    transition:font-size 0.3s ease;
}
.service-card.img-card:hover,
.service-card.img-card.is-open{
    justify-content:flex-start;
    align-items:flex-start;
    text-align:left;
}
.service-card.img-card:hover .service-num,
.service-card.img-card.is-open .service-num{
    opacity:1; height:auto; margin-bottom:8px;
}
.service-card.img-card:hover p,
.service-card.img-card.is-open p{
    opacity:1; max-height:200px; margin-top:12px;
}
.service-card.img-card:hover h3,
.service-card.img-card:hover h2,
.service-card.img-card.is-open h3,
.service-card.img-card.is-open h2{
    font-size:21px;
}

  /* tap-to-open support for touch devices (no hover) */
.service-card.img-card{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.service-card.img-card .card-cta{
    position:relative; z-index:2; display:none; margin-top:14px;
    color:var(--gold-bright); font-size:14px;
}
.service-card.img-card:hover .card-cta,
.service-card.img-card.is-open .card-cta{display:inline-block;}

  /* WHY / SOCIAL PROOF */
  .proof{background:var(--navy-dark);}
  .proof-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:80px;align-items:center;}
  .proof-list{list-style:none;margin-top:30px;}
  .proof-list li{
    display:flex;gap:16px;padding:20px 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
    font-size:15.5px;color:rgba(255,255,255,0.78);
    line-height:1.6;
  }
  .proof-list li span{color:var(--gold-bright);font-family:'Alice',serif;font-size:15px;flex-shrink:0;}
  .review-card{
    background:var(--navy);
    padding:40px;
    position:relative;
  }
  .stars{color:var(--gold-bright);letter-spacing:3px;font-size:16px;margin-bottom:20px;}
  .review-card p{font-size:17px;line-height:1.7;font-style:italic;color:rgba(255,255,255,0.92);}
  .review-attr{margin-top:24px;font-size:13px;letter-spacing:0.05em;color:var(--gold-bright);text-transform:uppercase;}

  /* CTA STRIP */
  .cta-strip{
    background:linear-gradient(90deg, var(--gold-bright), var(--gold-muted));
    padding:calc(var(--space-section) * 0.75) 0;
    color:var(--black);
  }
  .cta-strip-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;}
  .also-strip{background:var(--navy-dark);padding:18px 0;}
  .also-strip-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 26px;font-size:15px;}
  .also-strip-partners{margin-top:10px;}
  .also-label{color:var(--gold-mid);text-transform:uppercase;letter-spacing:0.12em;font-size:12px;font-weight:700;}
  .also-strip a{color:var(--white);text-decoration:none;opacity:0.85;}
  .also-strip a:hover{color:var(--gold-bright);opacity:1;}
  .page-intro .calc-switch{margin-top:18px;font-size:15px;}
  .calc-switch a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px;}
  .cta-strip h2{font-size:clamp(26px,3.4vw,36px);color:var(--black);max-width:520px;}
  .btn-dark{
    background:var(--navy-dark);color:var(--white);
    padding:17px 36px;font-weight:700;font-size:14px;letter-spacing:0.04em;
    border:none;cursor:pointer;
    min-width:230px;text-align:center;display:inline-block;
}

/* CTA STRIP - ALT (inverted colours, for when two strips sit near each other) */
.cta-strip-alt{
    background:var(--navy);
    padding:calc(var(--space-section) * 0.75) 0;
    border-top:1px solid rgba(250,207,57,0.15);
    border-bottom:1px solid rgba(250,207,57,0.15);
}
.cta-strip-alt h2{
    font-size:clamp(26px,3.4vw,36px);
    color:var(--white);
    max-width:520px;
}
.btn-outline-gold{
    background:transparent;
    color:var(--gold-bright);
    border:1px solid var(--gold-bright);
    padding:17px 36px; font-weight:700; font-size:14px; letter-spacing:0.04em;
    cursor:pointer; transition:background 0.2s, color 0.2s;
    min-width:230px;text-align:center;display:inline-block;
}
.btn-outline-gold:hover{ background:var(--gold-bright); color:var(--black); }

  /* FOOTER */
  footer{background:var(--navy-dark);padding:80px 0 30px;}
  .footer-grid{
    display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:50px;
    padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .footer-grid > div{ min-width:0; }
  footer h4,footer .footer-heading{font-size:14px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:20px;font-family:'Lato',sans-serif;font-weight:700;}
  footer ul{list-style:none;}
  footer ul li{margin-bottom:12px;font-size:14.5px;color:rgba(255,255,255,0.65);overflow-wrap:break-word;}
  footer ul li a:hover{color:var(--gold-bright);}
  .footer-bottom{
    display:flex;justify-content:space-between;padding-top:28px;
    font-size:13px;color:rgba(255,255,255,0.4);flex-wrap:wrap;gap:12px;
  }

/* SOCIAL ICONS (footer) */
.social-icons{ display:flex; flex-wrap:wrap; gap:14px; margin-top:4px; }
.social-icons a{
    width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,0.2);
    transition:border-color 0.2s, background 0.2s;
}
.social-icons a:hover{ border-color:var(--gold-bright); background:rgba(250,207,57,0.08); }
.social-icons svg{ width:16px; height:16px; fill:rgba(255,255,255,0.75); transition:fill 0.2s; }
.social-icons a:hover svg{ fill:var(--gold-bright); }

  @media(max-width:900px){
    .nav-links{display:none;}
    .nav-toggle{display:block;}
    .hero-stats .wrap{flex-direction:column;gap:18px;padding:24px;}
    .stat{border-left:none;padding:0;border-top:1px solid rgba(255,255,255,0.12);padding-top:16px;}
    .stat:first-child{border-top:none;padding-top:0;}
    .services-grid, .services-grid-2{grid-template-columns:1fr;}
    .proof-grid{grid-template-columns:1fr;gap:48px;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  }

  /* ANNOUNCEMENT BAR */
  .announcement{
    background:#161616;
    color:rgba(255,255,255,0.75);
    text-align:center;
    padding:12px 20px;
    font-size:12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    font-weight:700;
  }

  /* HEADER (centered logo + nav, not fixed) */
  header.site-header{
    background:var(--navy);
    padding:36px 32px 0;
    text-align:center;
  }
  .header-logo{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
  }
  .header-logo img{ width:150px; height:150px; object-fit:contain; }
  /* On desktop the nav bar is pinned to the top of the page (the bare `nav` rule above also matches
     .center-nav, 56-58px tall). Push the logo down past it so the top of the logo isn't hidden behind
     the bar, and keep in-page link / scrollIntoView targets from landing underneath it. Below 901px
     the nav is a hidden hamburger menu, so no extra space is needed. */
  @media(min-width:901px){
    header.site-header{ padding-top:80px; }
    html{ scroll-padding-top:72px; }
  }
  .header-logo .wordmark{
    font-size:13px;
    letter-spacing:0.28em;
    font-weight:700;
    color:var(--white);
  }
  .center-nav{
    display:flex;
    justify-content:center;
    gap:34px;
    padding-top:14px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,0.12);
    font-size:16px;
    letter-spacing:0.06em;
    font-weight:400;
    text-transform:uppercase;
    flex-wrap:wrap;
  }
  .center-nav a{ color:rgba(255,255,255,0.85); padding-bottom:8px; position:relative; }
  .center-nav a.active{ color:var(--white); border-bottom:2px solid var(--gold-bright); }
  .center-nav a:hover{ color:var(--gold-bright); }
  .center-nav .nav-dropdown{ position:relative; }
  .center-nav .dropdown-menu{
    display:none; flex-direction:column; position:absolute; top:26px; left:50%;
    transform:translateX(-50%); background:var(--navy-dark); min-width:200px;
    border:1px solid rgba(255,255,255,0.1); padding:6px 0; z-index:20;
    text-transform:none; font-weight:400; letter-spacing:0.02em;
  }
  .center-nav .nav-dropdown:hover .dropdown-menu{ display:flex; }
  .center-nav .dropdown-menu a{ padding:10px 18px; font-size:13px; }
  .center-nav .dropdown-menu a:hover{ background:rgba(255,255,255,0.06); }

  /* BOXED HERO */
  .boxed-hero{ background:var(--navy); padding-top:30px; }
  .boxed-hero-inner{
    max-width:1180px; margin:0 auto; padding:0 32px;
    display:grid; grid-template-columns:1fr 1fr;
    min-height:400px;
}
  .boxed-hero-photo{
    position:relative; overflow:hidden;
    background-color:#e9e9e9;
}
  .boxed-hero-photo img{
    position:absolute; top:0; left:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
}
  
  .boxed-hero-text{
    background:#20304f;
    padding:56px 60px;
    display:flex; flex-direction:column; justify-content:center;
    align-items:flex-start;
  }
  .boxed-hero-text h1{
    font-size:clamp(28px,3vw,40px);
    line-height:1.28;
    color:var(--white);
    margin-bottom:22px;
  }
  .boxed-hero-text p{
    font-size:15.5px;
    line-height:1.7;
    color:rgba(255,255,255,0.72);
    margin-bottom:32px;
    max-width:420px;
  }
  .boxed-hero-btns{ display:flex; flex-direction:column; gap:14px; width:300px; max-width:100%; }
  .boxed-hero-btns .btn-white{ display:flex; align-items:center; justify-content:center; min-height:50px; box-sizing:border-box; text-decoration:none; }
  .btn-white{
    background:var(--white); color:var(--navy-dark);
    padding:15px 20px; font-weight:700; font-size:13px;
    letter-spacing:0.05em; text-transform:uppercase; text-align:center;
    border:none; cursor:pointer;
  }
  .btn-white:hover{ background:var(--off-white); }
  @media(max-width:900px){
    .boxed-hero-inner{ grid-template-columns:1fr; padding:0 20px; }
    .boxed-hero-photo{ min-height:260px; }
    .boxed-hero-text{ padding:40px 24px; }
    .center-nav{ gap:16px; }
  }

  /* PAGE INTRO (used on inner pages instead of the homepage's boxed hero) */
  .page-intro{ background:var(--navy); padding:30px 0 0; text-align:center; }
  /* Private Sale pages put a zero-padding notice section straight after the intro, so the intro keeps some bottom space there */
.page-intro:has(+ section[style*="padding:0;"]){ padding-bottom:var(--space-block); }
.page-intro h1{ font-size:clamp(30px,4vw,46px); margin-bottom:var(--space-text); }
  .page-intro p{ color:rgba(255,255,255,0.7); font-size:16px; max-width:640px; margin:0 auto; }

  /* FORM FIELDS (contact page) */
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:640px; }
  .form-grid .full{ grid-column:1 / -1; }
  /* Collapses to one column on phones - this had no mobile override at all before, so on a
     360-430px screen each of the two fixed 1fr columns was only ~110-140px wide, cramping the
     now-16px selects and inputs badly (found while mobile-testing pages/enquiry.html's newly
     restyled selects - affects every .form-grid page: pages/enquiry.html, pages/contact.html,
     private-sale/index.html doesn't use .form-grid, it uses its own .ps-grid, already
     collapsing at 720px). */
  @media(max-width:600px){
    .form-grid{ grid-template-columns:1fr; }
  }
  .form-field label{ display:block; font-size:13px; letter-spacing:0.04em; color:rgba(255,255,255,0.65); margin-bottom:8px; text-transform:uppercase; }
  .form-field input, .form-field textarea, .form-field select{
    width:100%; background:var(--navy-dark); border:1px solid rgba(255,255,255,0.15);
    color:var(--white); padding:13px 14px; font-family:'Lato',sans-serif; font-size:16px;
}
.form-field textarea{
    min-height:190px;
    resize:vertical;
}
.form-field select{ cursor:pointer; }
.individual-only.field-hidden, .business-only.field-hidden, .abn-unverified-only.field-hidden{ display:none !important; }
  .form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--gold-bright); }
  .form-note{ font-size:12.5px; color:rgba(255,255,255,0.45); margin-top:18px; max-width:640px; line-height:1.6; }
  .form-note a{ color:var(--gold-bright); }
  .form-field input.invalid, .form-field select.invalid, .form-field textarea.invalid{
    border-color:#FF8080;
  }
  .field-error{ color:#FF8080; font-size:12.5px; margin-top:6px; line-height:1.5; }

  /* CALCULATOR */
  .calc-box{ background:var(--navy); padding:44px; max-width:520px; }
  .calc-row{ margin-bottom:22px; }
  .calc-row label{ display:block; font-size:13px; letter-spacing:0.04em; color:rgba(255,255,255,0.65); margin-bottom:8px; text-transform:uppercase; }
  /* #balloonLabel and #repayTimingLabel are <span>s, not <label>s (they front a button-group,
     not a single form control) - they'd previously rendered in plain body text with no spacing
     of their own, inconsistent with every other calc-row label. Matched to .calc-row label's
     styling here, with one deliberate difference: margin-bottom is 16px rather than the usual
     8px. Block-level display is what makes that margin actually apply - it's ignored on a
     plain inline span - and the extra clearance (over .calc-row label's normal 8px) keeps
     #balloonLabel's info-tip-btn and its expanded 44px invisible tap target (see the
     info-tip-btn rules further down) clear of the toggle-btns row directly below it. */
  #balloonLabel, #repayTimingLabel{
    display:block; font-size:13px; letter-spacing:0.04em; color:rgba(255,255,255,0.65);
    margin-bottom:16px; text-transform:uppercase;
  }
  .calc-row input{
    width:100%; background:var(--navy-dark); border:1px solid rgba(255,255,255,0.15);
    color:var(--white); padding:13px 14px; font-family:'Lato',sans-serif; font-size:16px;
  }
  .calc-row input:focus{ outline:none; border-color:var(--gold-bright); }
  .calc-result{
    margin-top:30px; padding:26px; background:var(--navy-dark);
    border-left:3px solid var(--gold-bright);
  }
  .calc-result .label{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
  .calc-result .value{ font-family:'Alice',serif; font-size:34px; color:var(--gold-bright); margin-top:6px; }
  .calc-result .sub{ font-size:13px; color:rgba(255,255,255,0.5); margin-top:6px; }

  /* FAQ */
  .faq-item{ border-bottom:1px solid rgba(255,255,255,0.1); padding:26px 0; }
  .faq-item summary{ cursor:pointer; font-family:'Alice',serif; font-size:18px; list-style:none; position:relative; padding-right:30px; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{ content:'+'; position:absolute; right:0; top:0; color:var(--gold-bright); font-size:22px; }
  .faq-item[open] summary::after{ content:'\2212'; }
  .faq-item p{ margin-top:14px; color:rgba(255,255,255,0.65); font-size:15px; line-height:1.7; max-width:760px; }

  /* ARTICLE CARDS */
  .article-card{ background:var(--navy); padding:34px; }
  .article-card .eyebrow{ margin-bottom:14px; display:block; }
  .article-card h3,.article-card h2{ font-size:20px; margin-bottom:12px; }
  .article-card p{ font-size:14.5px; color:rgba(255,255,255,0.6); line-height:1.65; margin-bottom:18px; }

  /* SUBTLE LINKED LIST (e.g. product list on About page) */
  .subtle-list{ list-style:none; max-width:520px; }
  .subtle-list li{
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .subtle-list a{
    display:flex; align-items:center;
    padding:16px 4px; font-size:16px; color:rgba(255,255,255,0.85);
    transition:color 0.2s, transform 0.2s;
  }
  .subtle-list a::before{
    content:'';
    width:6px; height:6px; flex-shrink:0;
    background:linear-gradient(135deg, var(--gold-bright), var(--gold-muted));
    transform:rotate(45deg);
    margin-right:16px;
  }
  .subtle-list a:hover{ color:var(--gold-bright); transform:translateX(6px); }

/* SHARED DIAMOND BULLET LIST (works on any <li>, link or not) */
.bullet-list{ list-style:none; max-width:520px; }
.bullet-list li{
    display:flex; align-items:center;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
    font-size:15.5px; color:rgba(255,255,255,0.78); line-height:1.6;
}
.bullet-list li::before{
    content:'';
    width:6px; height:6px; flex-shrink:0;
    background:linear-gradient(135deg, var(--gold-bright), var(--gold-muted));
    transform:rotate(45deg);
    margin-right:16px;
}
.bullet-list a{ color:var(--gold-bright); }

/* MEMBERSHIP BADGES */
.membership-badges{ margin-top:30px; }
.badge-card{
    border:1px solid rgba(255,255,255,0.15);
    padding:20px 22px;
    margin-bottom:14px;
    display:block;
    transition:border-color 0.2s, background 0.2s;
}
.badge-card:hover{ border-color:var(--gold-bright); background:rgba(250,207,57,0.05); }
.badge-card .badge-name{
    font-family:'Alice',serif; font-size:16px; color:var(--white); margin-bottom:4px;
}
.badge-card .badge-sub{
    font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--gold-bright);
}

  /* THREE-COLUMN PHOTO PANELS (About page: Origin / Services / Commitment) */
  .three-col{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    min-height:560px;
  }
  .photo-col{
    position:relative;
    background-color:var(--navy-dark);
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:50px 36px;
    overflow:hidden;
  }
  .photo-col::before{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(24,38,66,0.6) 0%, rgba(15,24,42,0.88) 100%);
  }
  .photo-col .col-inner{
    position:relative; z-index:2; text-align:center; max-width:340px;
  }
  .photo-col h3,
  .photo-col h2{
    font-size:26px; letter-spacing:0.06em; margin-bottom:26px; text-transform:uppercase;
  }
  .photo-col p{ font-size:15px; line-height:1.8; color:rgba(255,255,255,0.9); }
  .photo-col .subtle-list{ text-align:left; margin:20px auto 0; max-width:none; }
  .photo-col .subtle-list a{ color:rgba(255,255,255,0.9); }

  @media(max-width:900px){
    .three-col{ grid-template-columns:1fr; }
    .photo-col{ min-height:420px; }
  }

  /* ENQUIRY TOOL */
  .borrower-toggle{ display:flex; gap:12px; margin-bottom:30px; }
  .borrower-toggle button{
    flex:1; padding:16px; background:var(--navy-dark); border:1px solid rgba(255,255,255,0.15);
    color:rgba(255,255,255,0.7); font-family:'Lato',sans-serif; font-weight:700; font-size:14px;
    letter-spacing:0.03em; cursor:pointer; transition:all 0.2s;
  }
  .borrower-toggle button.active{ background:var(--gold-bright); color:var(--black); border-color:var(--gold-bright); }
  .abn-search-wrap{ position:relative; }
  .abn-results{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:10;
    background:var(--navy-dark); border:1px solid rgba(255,255,255,0.15); max-height:220px; overflow-y:auto;
  }
  .abn-results.show{ display:block; }
  .abn-result-item{ padding:12px 14px; font-size:14px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.08); }
  .abn-result-item:hover{ background:rgba(250,207,57,0.08); color:var(--gold-bright); }
  .abn-status{ font-size:12.5px; margin-top:6px; min-height:16px; }
  .abn-status.valid{ color:#7ED957; }
  .abn-status.invalid{ color:#FF8080; }
  .abn-status.loading{ color:rgba(255,255,255,0.5); }
  .enquiry-submit-btn{ width:100%; margin-top:10px; }
  .enquiry-submit-btn:disabled{ opacity:0.5; cursor:not-allowed; }
  .field-hidden{ display:none !important; }

  /* MOBILE HAMBURGER NAV (for the centered header nav system) */
  .mobile-nav-toggle{
    display:none;
    position:absolute;
    top:38px; right:24px;
    background:none;
    border:1px solid rgba(255,255,255,0.25);
    color:var(--white);
    font-size:22px;
    line-height:1;
    padding:8px 12px;
    cursor:pointer;
  }
  .submenu-toggle{ display:none; }

  @media(max-width:900px){
    .mobile-nav-toggle{ display:block; }
    header.site-header{ position:relative; }
    .center-nav{
      display:none;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      text-align:left;
    }
    .center-nav.mobile-open{ display:flex; }
    .center-nav > a{
      padding:14px 4px;
      border-bottom:1px solid rgba(255,255,255,0.08);
    }
    .center-nav .nav-dropdown{
      width:100%;
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      border-bottom:1px solid rgba(255,255,255,0.08);
    }
    .center-nav .nav-dropdown > a{
      flex:1;
      padding:14px 4px;
      border-bottom:none;
    }
    .submenu-toggle{
      display:flex;
      align-items:center;
      justify-content:center;
      width:44px; height:44px;
      background:none;
      border:none;
      color:rgba(255,255,255,0.7);
      font-size:16px;
      cursor:pointer;
      transition:transform 0.2s;
    }
    .submenu-toggle.open{ transform:rotate(180deg); color:var(--gold-bright); }
    .center-nav .dropdown-menu{
      display:none;
      width:100%;
      position:static;
      transform:none;
      background:transparent;
      border:none;
      box-shadow:none;
      min-width:0;
      padding:0 0 10px 18px;
    }
    .center-nav .dropdown-menu.submenu-open{ display:block; }
    /* Touch screens keep :hover on whatever was last tapped, which (via the desktop hover rule)
       would hold a dropdown open after its chevron is tapped again. In the mobile menu only the
       chevron's .submenu-open class decides whether a dropdown shows. */
    .center-nav .nav-dropdown:hover .dropdown-menu:not(.submenu-open){ display:none; }
    .center-nav .dropdown-menu a{
      border-bottom:none;
      padding:10px 0;
      font-size:13px;
      opacity:0.7;
    }
  }

/* DESKTOP DROPDOWN INDICATOR - clean CSS-drawn inverted triangle */
.nav-dropdown > a::after{
  content:'';
  display:inline-block;
  margin-left:6px;
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  vertical-align:middle;
  opacity:0.6;
  transition:opacity 0.2s;
}
.nav-dropdown:hover > a::after{ opacity:1; }

@media(max-width:900px){
  .nav-dropdown > a::after{ display:none; }
}

/* ===================== SHARED ADMIN NAV (Tools dropdown) =====================
   Rendered by assets/js/admin-nav.js into <div id="adminNav"></div> on every admin page.
   Replaces the old per-page repeated row of individual links - adding a new admin tool now
   only means editing admin-nav.js, not every page's markup. */
.admin-nav-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; position:relative; }
.admin-nav-link{
  font-size:13px; color:rgba(255,255,255,0.75); cursor:pointer; text-decoration:none;
  padding:7px 12px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.04);
  transition:all .15s ease; display:inline-block;
}
.admin-nav-link:hover{ color:var(--gold-bright); border-color:var(--gold-bright); background:rgba(250,207,57,0.08); }
.admin-nav-dropdown{ position:relative; }
.admin-nav-toggle{
  font-family:'Lato',sans-serif; font-size:13px; color:rgba(255,255,255,0.75); cursor:pointer;
  padding:7px 12px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.04);
  transition:all .15s ease; display:inline-flex; align-items:center; gap:6px;
}
.admin-nav-toggle:hover, .admin-nav-toggle.open{ color:var(--gold-bright); border-color:var(--gold-bright); background:rgba(250,207,57,0.08); }
.admin-nav-caret{ font-size:10px; transition:transform .15s ease; }
.admin-nav-toggle.open .admin-nav-caret{ transform:rotate(180deg); }
.admin-nav-menu{
  display:none; flex-direction:column; position:absolute; top:calc(100% + 6px); right:0; z-index:30;
  background:var(--navy-dark); border:1px solid rgba(255,255,255,0.15); min-width:180px;
  padding:6px 0; box-shadow:0 14px 32px rgba(0,0,0,0.4);
}
.admin-nav-menu.open{ display:flex; }
/* On narrow phones the menu (min-width 180px) is wider than the Tools button it's anchored
   to, so right-aligning it to the button's right edge pushes its left side off-screen,
   clipping the first character or two of every item. Left-aligning instead keeps it fully
   on-screen, since the Tools button always sits well clear of the right edge in this nav. */
@media(max-width:480px){
  .admin-nav-menu{ right:auto; left:0; }
}
.admin-nav-menu a{
  padding:10px 16px; font-size:13.5px; color:rgba(255,255,255,0.8); text-decoration:none; white-space:nowrap;
}
.admin-nav-menu a:hover{ background:rgba(250,207,57,0.08); color:var(--gold-bright); }
/* Section headers inside the Tools dropdown - separates the flat quick-links (Main Site) at
   the top from the grouped tool sections below, and separates each group from the next.
   Not clickable, just a label; margin-top handles the gap above every section except the
   very first (which sits right under the flat links with no extra gap needed). */
.admin-nav-section-label{
  font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.35); padding:10px 16px 4px; margin-top:4px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.admin-nav-section-label:first-child{ margin-top:0; border-top:none; padding-top:6px; }

/* ===================== ADMIN LOGIN GATE (Forgot password link) =====================
   Used inside #loginStage on every admin page, alongside admin-auth.js. */
.forgot-password-link{
  display:block; text-align:center; margin-top:14px;
  font-size:12.5px; color:var(--gold-bright); text-decoration:underline; cursor:pointer;
}
.forgot-password-link:hover{ color:var(--white); }

/* ===================== DATE INPUT PICKER ICON =====================
   Default browser calendar-picker icon is black, invisible against this admin portal's
   dark backgrounds on any page with a date input. */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  cursor: pointer;
}

/* ===================== PRIVATE SALE HUB & TOOL (/private-sale/) =====================
   Scoped with a ps- prefix throughout so nothing here collides with existing page styles. */
.ps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ps-grid .full{ grid-column:1 / -1; }
@media(max-width:720px){ .ps-grid{ grid-template-columns:1fr; } }

.ps-section{ border-bottom:1px solid rgba(255,255,255,0.1); padding:calc(var(--space-block) * 0.6) 0; }
.services .ps-section:first-child:not(.ps-guide .ps-section){ padding-top:0; }
.ps-section:last-child{ border-bottom:none; }
.ps-section h3,.ps-head h2{ font-size:20px; color:var(--gold-bright); margin-bottom:14px; }
.ps-section h4,.ps-section h3.ps-subhead{ font-size:15px; color:var(--white); margin:18px 0 8px; }

.ps-checklist{ list-style:none; }
.ps-checklist li{
  padding:10px 0 10px 30px; position:relative;
  border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:15px; line-height:1.65; color:rgba(255,255,255,0.85);
}
.ps-checklist li:last-child{ border-bottom:none; }
.ps-checklist li::before{ content:'\2713'; position:absolute; left:0; top:10px; color:var(--gold-bright); font-weight:700; }

.ps-flag{
  display:inline-block; margin-top:8px; padding:5px 12px;
  background:rgba(255,128,128,0.1); border:1px solid rgba(255,128,128,0.4);
  color:#FF8080; font-size:12.5px; line-height:1.5;
}
.ps-check-link{ color:var(--gold-bright); text-decoration:underline; }

.ps-compare{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:16px; }
.ps-compare-col{ background:var(--navy-dark); padding:22px; }
.ps-compare-col h4{ color:var(--gold-bright); margin:0 0 12px; }
@media(max-width:720px){ .ps-compare{ grid-template-columns:1fr; } }

.ps-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:36px; }
.ps-hidden{ display:none !important; }

.ps-estimate-result{
  background:var(--navy-dark); padding:26px; margin-top:20px;
}
.ps-estimate-result .label{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.ps-estimate-result .value{ font-family:'Alice',serif; font-size:32px; color:var(--gold-bright); margin-top:6px; }
.ps-estimate-result .sub{ font-size:13px; color:rgba(255,255,255,0.55); margin-top:8px; line-height:1.6; }

@media print{
  header.site-header, .announcement, footer, .ps-no-print{ display:none !important; }
  body{ background:var(--white); color:var(--black); }
  .ps-checklist li{ color:var(--black); }
  section{ padding:10px 0; }
}

/* Private Sale Guide - internal link lists (hub, state and topic pages) */
.ps-link-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; }
.ps-link-list li{ padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.ps-link-list a{ color:var(--gold-bright); text-decoration:none; }
.ps-link-list a:hover{ text-decoration:underline; }
@media(max-width:720px){ .ps-link-list{ grid-template-columns:1fr; } }

/* Private Sale Guide call-out banner (consumer-loans / business-loans) */
.ps-banner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--navy-dark); border-left:3px solid var(--gold-bright); padding:26px 28px;
}
.ps-banner p{ color:rgba(255,255,255,0.85); line-height:1.65; font-size:15.5px; }
.ps-banner .btn-primary{ flex-shrink:0; }
@media(max-width:720px){ .ps-banner{ flex-direction:column; align-items:flex-start; } }

/* Header nav gained an 8th item ("Private Sale Guide") - tighten spacing between the hamburger
   breakpoint (900px) and full desktop so it stays on one line */
@media(min-width:901px) and (max-width:1100px){
  .center-nav{ gap:20px; font-size:14.5px; letter-spacing:0.04em; }
}

/* Private Sale Guide - overarching "general guide only" notice (hub, state, topic pages, checklist) */
.ps-notice{
  margin:0; padding:14px 18px; border:1px solid rgba(250,207,57,0.35);
  background:rgba(250,207,57,0.06); color:rgba(255,255,255,0.8); font-size:14px; line-height:1.6;
}
.ps-notice strong{ color:var(--gold-bright); }
@media print{ .ps-notice{ color:#000; border-color:#999; background:none; } .ps-notice strong{ color:#000; } }

/* Private Sale Guide - state pages: numbered sections with a gold gutter, "fact tiles" for the
   hard numbers, gold call-outs for warnings. Scoped to .ps-guide (generated state pages only)
   so the hub, topic pages and interactive tool keep their existing .ps-section look. */
.ps-guide{ counter-reset:ps-step; }
.ps-guide .ps-section{ position:relative; border-bottom:none; padding:calc(var(--space-block) * 0.6) 0 calc(var(--space-block) * 0.6) 28px; }
.ps-guide .ps-section::before{
  content:''; position:absolute; left:0; top:calc(var(--space-block) * 0.6 + 4px); bottom:calc(var(--space-block) * 0.6 + 4px); width:2px;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold-muted)); opacity:0.55;
}
.ps-kicker{ display:block; font-family:'Alice',serif; font-size:13px; letter-spacing:0.14em; color:var(--gold-muted); margin-bottom:6px; }
.ps-kicker::before{ counter-increment:ps-step; content:'0' counter(ps-step); }
.ps-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.ps-head h3,.ps-head h2{ margin:0; }
.ps-icon{ width:22px; height:22px; flex-shrink:0; fill:none; stroke:var(--gold-muted); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ps-guide .ps-section p{ color:rgba(255,255,255,0.85); font-size:16px; line-height:1.75; max-width:64ch; margin:0 0 12px; }
.ps-guide .ps-section p strong{ color:var(--white); }

.ps-facts{ display:flex; flex-wrap:wrap; gap:12px; margin:6px 0 18px; }
.ps-fact{
  display:flex; flex-direction:column; gap:4px; padding:14px 16px;
  background:var(--navy-dark); border:1px solid rgba(249,235,49,0.18); transition:border-color .2s;
}
.ps-fact{ flex:1 1 170px; max-width:280px; }
.ps-fact-wide{ flex:1 1 100%; max-width:none; }
.ps-fact-wide .ps-fact-value{ font-family:'Lato',sans-serif; font-size:15px; line-height:1.65; color:rgba(255,255,255,0.88); }
.ps-fact:hover{ border-color:var(--gold-bright); }
.ps-fact-label{ font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-muted); }
.ps-fact-value{ font-family:'Alice',serif; font-size:22px; line-height:1.25; color:var(--white); }
.ps-fact-key .ps-fact-value{ color:var(--gold-bright); }
.ps-fact-sub{ font-size:12.5px; color:rgba(255,255,255,0.6); }

.ps-callout{
  margin:16px 0; padding:14px 18px; font-size:15px; line-height:1.65; color:rgba(255,255,255,0.88);
  border-left:3px solid var(--gold-bright); background:rgba(249,235,49,0.06);
}
.ps-callout-label{ display:block; margin-bottom:4px; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-bright); }
.ps-callout a{ color:var(--gold-bright); }

.ps-split{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:6px 0 18px; }
.ps-card{ padding:16px 18px; background:var(--navy-dark); border:1px solid rgba(249,235,49,0.18); }
.ps-guide .ps-card p{ margin:8px 0 0; font-size:15px; line-height:1.65; }
@media(max-width:720px){ .ps-split{ grid-template-columns:1fr; } .ps-guide .ps-section{ padding-left:20px; } }

@media print{
  .ps-guide .ps-section::before{ background:#999; }
  .ps-guide .ps-section p, .ps-callout, .ps-fact-value, .ps-fact-key .ps-fact-value{ color:#000; }
  .ps-fact, .ps-card{ background:none; border-color:#999; }
  .ps-callout{ background:none; border-left-color:#666; }
  .ps-fact-label, .ps-callout-label, .ps-kicker{ color:#555; }
  .ps-icon{ stroke:#555; }
}

/* COMMERCIAL/CONSUMER REPAYMENT CALCULATORS (pages/commercial-calculator.html,
   pages/consumer-calculator.html, and the pages/repayment-calculator.html hub) */

/* Scoped modifier, not a change to .calc-box itself - pages/loan-size-calculator.html and
   private-sale/index.html also use .calc-box and must keep their original 520px width. Only
   the two new calculator pages add this class alongside .calc-box. */
.calc-box.calc-box-wide{ max-width:640px; }

/* Custom-styled <select> elements, used on every public form/calculator that has a dropdown
   (pages/commercial-calculator.html, pages/consumer-calculator.html, pages/enquiry.html,
   private-sale/index.html - see docs/project-brief.md for the exact list). Wrap each <select>
   with <div class="select-wrap">...</div> in the markup; the wrapper carries position:relative
   and draws the chevron via ::after (a CSS border-triangle, not an image or data: URI, so this
   needs no CSP change), while appearance:none on the select itself removes the native arrow so
   it doesn't double up with ours. Both the base rule and the .form-field override below are
   16px - not 15px/14.5px as originally shipped - since anything under 16px makes iOS Safari
   auto-zoom the viewport on focus, which matters more than preserving the small size
   difference these selects used to have from their sibling text inputs (also bumped to 16px,
   see the .form-field/.calc-row input rules elsewhere in this file). Left deliberately without
   a set background/color on <option> - see the PR description for why forcing option colours
   is a legibility risk on some platforms; native OS rendering there (dark text on a light
   list) stays reliably readable regardless of the select's own closed-state styling. */
.select-wrap{ position:relative; }
.select-wrap select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; background:var(--navy-dark); border:1px solid rgba(255,255,255,0.15);
  border-radius:0; color:var(--white); padding:13px 40px 13px 14px;
  font-family:'Lato',sans-serif; font-size:16px; cursor:pointer;
}
.select-wrap select:focus-visible{ outline:none; border-color:var(--gold-bright); }
.select-wrap select::-ms-expand{ display:none; }
.select-wrap::after{
  content:''; position:absolute; top:50%; right:16px; width:8px; height:8px; z-index:1;
  border-right:2px solid rgba(255,255,255,0.55); border-bottom:2px solid rgba(255,255,255,0.55);
  transform:translate(0,-65%) rotate(45deg); pointer-events:none;
}
/* 16px everywhere (not 14.5px like their sibling text inputs) - below 16px, iOS Safari
   auto-zooms the viewport on focus, which is worse than a small font-size mismatch with the
   surrounding form-field inputs (bumped to 16px too, just below). */
.form-field .select-wrap select{ font-size:16px; }
/* Inline layout (the balloon Basis row, which pairs a short label with the select rather than
   stacking label-above-select like every other calc-row/form-field) - see the
   .balloon-basis-row .select-wrap-inline rule further down for its flex sizing. */
.select-wrap-inline{ display:inline-block; }

/* Hides the native up/down spinner on the calculator pages' number inputs (purchase price,
   deposit, balloon value, rate) - scoped to .calc-box-wide so it only touches those two pages,
   not every type="number" input site-wide (e.g. private-sale/index.html's stamp-duty
   calculator keeps its native spinner, unchanged). inputmode="decimal" is kept on these fields
   so mobile keyboards still show a numeric layout despite the type staying "number". */
.calc-box-wide input[type="number"]::-webkit-outer-spin-button,
.calc-box-wide input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.calc-box-wide input[type="number"]{ -moz-appearance:textfield; }

/* Two-button toggle (advance/arrears, balloon $/%, balloon basis) - same visual pattern as
   .borrower-toggle on pages/enquiry.html, given its own class since it's used in an unrelated
   context here (not borrower type). */
.toggle-btns{ display:flex; gap:10px; margin-bottom:8px; }
.toggle-btns button{
  flex:1; min-height:44px; padding:12px; background:var(--navy-dark); border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.7); font-family:'Lato',sans-serif; font-weight:700; font-size:13.5px;
  letter-spacing:0.03em; cursor:pointer; transition:all 0.2s;
  display:flex; align-items:center; justify-content:center;
}
.toggle-btns button.active{ background:var(--gold-bright); color:var(--black); border-color:var(--gold-bright); }
.toggle-btns button:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
.toggle-btns button:disabled{ opacity:0.35; cursor:not-allowed; }

/* Rate slider + paired number input, kept in sync in JS. Thin flat-white track (no two-colour
   fill - position is communicated by the thumb alone), gold thumb with a dark ring so it reads
   clearly against the navy background. The input itself is styled to a 44px height for a
   proper touch target; the visible track is drawn thinner via the -webkit/-moz track
   pseudo-elements, with the thumb's negative margin-top (webkit) recentring it over that
   thinner track. */
.rate-slider-group{ display:flex; align-items:center; gap:16px; }
.rate-slider-group input[type="range"]{
  flex:1; -webkit-appearance:none; appearance:none; height:44px; background:transparent;
  outline:none; cursor:pointer; margin:0;
}
.rate-slider-group input[type="range"]::-webkit-slider-runnable-track{
  height:6px; border-radius:3px; background:var(--white);
}
.rate-slider-group input[type="range"]::-moz-range-track{
  height:6px; border-radius:3px; background:var(--white);
}
.rate-slider-group input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:#FACF39; border:2px solid var(--navy-dark); box-shadow:0 2px 6px rgba(0,0,0,0.4);
  cursor:pointer; margin-top:-8px;
}
.rate-slider-group input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:#FACF39;
  border:2px solid var(--navy-dark); box-shadow:0 2px 6px rgba(0,0,0,0.4); cursor:pointer;
}
.rate-slider-group input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 4px rgba(255,255,255,0.55), 0 2px 6px rgba(0,0,0,0.4);
}
.rate-slider-group input[type="range"]:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 4px rgba(255,255,255,0.55), 0 2px 6px rgba(0,0,0,0.4);
}
/* Consumer's "no rate set yet" state - the track stays the same flat white (position never
   encoded any value while unset), but the thumb itself switches to a muted, outlined navy
   circle rather than solid gold, so "a rate has been set" stays exclusively a thumb-colour
   signal rather than a slider-position one. */
.rate-slider-group input[type="range"].unset::-webkit-slider-thumb{
  background:var(--navy-dark); border:2px solid rgba(255,255,255,0.5); box-shadow:none;
}
.rate-slider-group input[type="range"].unset::-moz-range-thumb{
  background:var(--navy-dark); border:2px solid rgba(255,255,255,0.5); box-shadow:none;
}
.rate-slider-group input[type="number"]{
  width:110px; flex-shrink:0; background:var(--navy-dark); border:1px solid rgba(255,255,255,0.15);
  color:var(--white); padding:13px 12px; font-family:'Lato',sans-serif; font-size:16px; text-align:right;
}
.rate-slider-group input[type="number"]:focus{ outline:none; border-color:var(--gold-bright); }
.rate-example-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.rate-example-note{ font-size:12px; color:rgba(255,255,255,0.5); font-style:italic; }
/* "Set Rate" (commercial only) - a compact primary button matching the rate number box's
   44px+ height (same vertical padding + border-width, since box-sizing:border-box is global). */
.rate-example-row .btn-set-rate:only-child{ margin-left:auto; }
.btn-set-rate{ padding:14px 22px; font-size:14px; border:1px solid transparent; white-space:nowrap; min-height:44px; }
.rate-unset-note{ font-size:12.5px; color:rgba(255,255,255,0.5); margin-top:6px; }
/* Prominent "rate is illustrative" notice - body-weight, high-contrast, not the faint italic. */
.rate-illustrative-note{ font-size:13.5px; line-height:1.5; color:rgba(255,255,255,0.9); margin-top:10px; padding:10px 12px; border-left:3px solid var(--gold-bright); background:rgba(255,255,255,0.04); }
.result-rate-note{ font-size:12.5px; color:rgba(255,255,255,0.75); margin-top:6px; }

/* Balloon input group: $/% toggle + basis toggle + info tooltip */
.balloon-basis-row{ display:flex; align-items:center; gap:10px; margin:10px 0 6px; }
.balloon-basis-row label{ font-size:12.5px; color:rgba(255,255,255,0.55); }
.balloon-basis-row .select-wrap-inline{ flex:1; min-width:160px; }
.balloon-equivalent{ font-size:12.5px; color:rgba(255,255,255,0.5); margin-top:6px; }

/* Info tooltip - real <button> so it's keyboard-focusable, aria-describedby points at the
   bubble, shown on :hover/:focus-visible (desktop + keyboard) and toggled via a JS-set .show
   class for tap-to-open on touch devices (no inline handlers - listener lives in the page's
   own external script). "Balloon" is the label text this icon sits inline with - kept small
   (16px) and vertically centred against that text via the inline-flex + vertical-align pairing
   below, rather than looming over it at the previous 18px. The visible circle stays 16px, but
   ::before adds an invisible 44x44 hit area centred on it (a standard expanded-tap-target
   technique - the pseudo-element's own painted area, even though it overflows the button's own
   small box, is still attributed to the button for click/tap purposes in every current
   browser), so the icon reads small while still meeting the 44px touch-target minimum. */
.info-tip-wrap{ position:relative; display:inline-flex; margin-left:8px; vertical-align:middle; }
.info-tip-btn{
  width:16px; height:16px; border-radius:50%; border:1px solid rgba(255,255,255,0.4);
  background:transparent; color:rgba(255,255,255,0.65); font-family:'Lato',sans-serif;
  font-size:11px; font-weight:700; line-height:1; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; padding:0; vertical-align:middle; position:relative;
}
.info-tip-btn::before{
  content:''; position:absolute; top:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%);
}
.info-tip-btn:hover, .info-tip-btn:focus-visible{ border-color:var(--gold-bright); color:var(--gold-bright); }
.info-tip-bubble{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:240px; background:var(--navy-dark); border:1px solid rgba(250,207,57,0.35);
  color:rgba(255,255,255,0.8); font-size:12.5px; line-height:1.55; padding:12px 14px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.15s; z-index:5;
}
.info-tip-btn:hover + .info-tip-bubble,
.info-tip-btn:focus-visible + .info-tip-bubble,
.info-tip-bubble.show{
  opacity:1; visibility:visible;
}
/* The "Balloon" label (and its info icon) sits near the LEFT of its row, not the right, so
   anchoring the bubble off the icon's right edge (as a first pass at this did) actually pushed
   it off the left edge of narrow viewports instead of fixing anything. Anchoring off the
   icon's own left edge and extending rightward matches where the actual free space is in this
   layout. max-width is a hard safety net on top of the fixed width, so the bubble can never
   exceed the viewport regardless of exactly where the icon ends up sitting. */
@media(max-width:600px){
  .info-tip-bubble{ left:-8px; right:auto; transform:none; width:200px; max-width:calc(100vw - 32px); }
}

/* Soft-guide / disabled-term notes - deliberately low-emphasis: no red, no error border, no
   icon. This is guidance, not a validation failure - the calculation still runs regardless. */
.balloon-soft-note{ font-size:12.5px; color:rgba(255,255,255,0.5); margin-top:8px; line-height:1.5; }

/* Disclaimer sitting near the result, not just in the footer */
.calc-disclaimer{
  margin-top:22px; padding:18px 20px; background:var(--navy-dark);
  border:1px solid rgba(255,255,255,0.1); font-size:12.5px; color:rgba(255,255,255,0.55);
  line-height:1.6; max-width:640px;
}
.calc-disclaimer ul{ margin:8px 0 0 18px; }
.calc-disclaimer li{ margin-bottom:4px; }

/* Mobile pass (tested at 360/390/430px phone widths and 768px tablet - see
   docs/project-brief.md for the full breakdown). One breakpoint, max-width:600px, covers all
   three phone widths; 768px tablet already fits the desktop layout as-is (.calc-box-wide's
   640px max-width comfortably clears a 768px viewport even after .wrap's own side padding), so
   it needed no rules of its own. */
@media(max-width:600px){
  /* Rate row: the slider and number box each claim a 100% flex-basis, which - since two 100%
     items can never share one line - forces the number box onto its own full-width row below
     the slider instead of just being squeezed down to an unusably thin sliver next to it. */
  .rate-slider-group{ flex-wrap:wrap; row-gap:12px; }
  .rate-slider-group input[type="range"]{ flex:1 1 100%; min-width:0; }
  .rate-slider-group input[type="number"]{ flex:1 1 100%; width:100%; text-align:left; }
  /* Illustration note + Set Rate button (commercial only): button drops below the note and
     goes full-width rather than shrinking to its own content width once it wraps. */
  .rate-example-row .btn-set-rate{ width:100%; }

  /* Balloon basis row: "Basis" label + select sit side-by-side on desktop (the one place a
     label and its field share a row instead of stacking) - narrow enough here that they don't
     have room to do that on a phone, so this one drops to the usual stacked layout too. */
  .balloon-basis-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .balloon-basis-row .select-wrap-inline{ flex:none; width:100%; }

  /* More breathing room for content on a phone-width screen - the 44px desktop padding was
     eating close to a third of the available width inside .wrap's own 32px side padding.
     Applies to every .calc-box (not just the two new pages), which also gives
     pages/loan-size-calculator.html and private-sale/index.html's stamp-duty estimator more
     room on mobile - untested this round since neither was in scope, but this can only help,
     never regress, either page. */
  .calc-box{ padding:28px 20px; }

  /* A long combined result ("$1,323.53 /fortnight") still fits without overflowing at this
     smaller size; it's also still allowed to wrap at the natural space before the frequency
     suffix if it doesn't quite fit on one line, which reads as a normal, non-awkward break
     (never a mid-number break - there's no space inside "$1,323.53" for it to break at).
     overflow-wrap is a last-resort safety net, not the primary fix. */
  .calc-result{ padding:20px 16px; }
  .calc-result .value{ font-size:26px; overflow-wrap:break-word; }
}

/* Footer helpers for the 3 CSP-clean calculator pages only - every other page's footer still
   uses inline style="" attributes (fine under the current 'unsafe-inline' style-src), but these
   3 pages avoid inline styles entirely, so the same footer visuals need real classes here. */
.footer-logo-wrap{ margin-bottom:18px; }
.footer-tagline{ font-size:14px; color:rgba(255,255,255,0.55); line-height:1.7; max-width:280px; }
.footer-disclaimer{ max-width:900px; margin-top:18px; font-size:11.5px; color:rgba(255,255,255,0.3); line-height:1.6; }

/* PRINT / SAVE-AS-PDF (site-wide, added 29 Sep 2026)
   The site is a dark theme: body copy is white at 60-85% alpha on a navy background. Chrome drops
   backgrounds when printing, so that text came out pale grey on white paper - and alpha-coloured
   text is also what Chrome's PDF writer mispositioned (ascenders floating above the baseline)
   while the opaque headings/links were fine. So in print: opaque dark text on white, no alpha,
   no animation. Brand fonts (Lato / Alice) are deliberately left alone. !important is needed to
   beat page-level <style> blocks (e.g. .policy-body p) that load after this file. */
@media print{
  html, body, section, div, header, footer, main, article, aside, li, ul, ol, table, tr, td, th, details, summary, blockquote{
    background:#fff !important; background-image:none !important;
  }
  body, body *{
    color:#111 !important; opacity:1 !important; text-shadow:none !important; box-shadow:none !important;
    animation:none !important; transition:none !important;
  }
  [class*="reveal"], [class*="fade"], [data-aos]{ transform:none !important; visibility:visible !important; }
  body{
    font-synthesis:style;
    font-variation-settings:normal; font-feature-settings:normal;
    text-rendering:auto; font-optical-sizing:auto;
  }
  body p, body li, body td, body th, body dd, body dt, body summary, body label{
    font-variation-settings:normal; font-feature-settings:normal; letter-spacing:normal; text-rendering:auto; font-synthesis:style;
  }
  .eyebrow{ color:#6b5a1e !important; }
  h1, h2, h3, h4{ break-after:avoid; }
  p, li{ orphans:3; widows:3; }
  /* links: brand navy + underline so they stay visible without the gold-on-navy contrast */
  body a{ color:#283C63 !important; }
  p a, li a, td a, dd a{ text-decoration:underline !important; }
}

/* Private Sale hub: "which are you buying?" paths (car checklist vs equipment guide) */
.ps-paths{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ps-path{ padding:28px; border:1px solid rgba(255,255,255,0.18); background:rgba(0,0,0,0.12); display:flex; flex-direction:column; align-items:flex-start; }
.ps-path-biz{ border-color:var(--gold-bright); }
.ps-path h3{ margin:0 0 10px; }
.ps-path p{ margin:0 0 18px; color:rgba(255,255,255,0.75); line-height:1.6; }
.ps-path .btn-primary{ display:inline-block; margin-top:auto; text-align:center; text-decoration:none; }
.ps-path p.ps-path-link{ margin:14px 0 0; }
@media (max-width:700px){ .ps-paths{ grid-template-columns:1fr; } .ps-path .btn-primary{ width:100%; box-sizing:border-box; } }

/* Sticky tap-to-call button (injected by assets/js/sticky-call.js), mobile only */
.sticky-call{ display:none; }
@media (max-width:900px){
  .sticky-call{
    display:flex; align-items:center; gap:8px; position:fixed; right:16px; z-index:90;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    padding:13px 20px; border-radius:999px; text-decoration:none;
    background:linear-gradient(90deg, var(--gold-bright), var(--gold-muted)); color:var(--black);
    font-weight:700; font-size:14px; letter-spacing:0.04em; box-shadow:0 4px 14px rgba(0,0,0,0.35);
  }
  footer{ padding-bottom:96px; }
}
@media print{ .sticky-call{ display:none !important; } }

/* ===================== ARTICLES (/pages/articles/<slug>) =====================
   Individual article pages and the clickable cards on the Articles hub. Scoped with article- prefixes. */
a.article-card{ display:block; color:inherit; text-decoration:none; transition:background .2s, transform .2s; }
a.article-card:hover,a.article-card:focus-visible{ background:var(--navy-dark); transform:translateY(-2px); }
a.article-card:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
.article-card-link{ color:var(--gold-bright); font-size:14.5px; font-weight:700; letter-spacing:0.02em; }
a.article-card:hover .article-card-link{ text-decoration:underline; }

.article-breadcrumb{ margin-bottom:var(--space-text); font-size:13.5px; }
.article-breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 0; color:rgba(255,255,255,0.6); }
.article-breadcrumb li + li::before{ content:'>'; margin:0 8px; color:rgba(255,255,255,0.35); }
.article-breadcrumb a{ color:var(--gold-bright); text-decoration:none; }
.article-breadcrumb a:hover{ text-decoration:underline; }
.page-intro .article-reviewed{ font-size:13px; color:rgba(255,255,255,0.55); margin-top:-4px; padding-bottom:var(--space-block); }

.article-body{ max-width:70ch; margin:0 auto; }
.article-body p,.article-body li{ font-size:17px; line-height:1.75; color:rgba(255,255,255,0.85); }
.article-body p{ margin:0 0 var(--space-text); }
.article-body strong{ color:var(--white); }
.article-body h2{ font-size:clamp(21px,2vw + 12px,26px); color:var(--gold-bright); margin:calc(var(--space-block) * 0.8) 0 14px; }
.article-body ul{ margin:0 0 var(--space-text); padding-left:1.3em; }
.article-body ul li{ margin-bottom:8px; padding-left:4px; }
.article-body ul li::marker{ color:var(--gold-bright); }
.article-body a{ color:var(--gold-bright); text-decoration:underline; overflow-wrap:anywhere; }
.article-disclaimer{
  margin:var(--space-block) 0 0; padding:18px 22px; border:1px solid rgba(250,207,57,0.35); border-left:4px solid var(--gold-bright);
  background:rgba(250,207,57,0.06); color:rgba(255,255,255,0.8); font-size:14.5px; line-height:1.65;
}
.article-body .article-related{ margin-top:var(--space-block); }
.article-body .article-related h2{ margin-top:0; font-size:20px; }
.article-body .article-related ul{ list-style:none; padding:0; }
.article-body .article-related li{ font-size:16px; padding:10px 0; margin:0; border-bottom:1px solid rgba(255,255,255,0.1); }
.article-body .article-related li:last-child{ border-bottom:none; }
.article-body .article-cta{ margin:var(--space-block) 0 0; }
.article-body .article-cta .btn-primary{ display:inline-block; text-decoration:none; color:var(--black); }
@media(max-width:600px){ .article-body p,.article-body li{ font-size:16px; } }
@media print{ .article-body p,.article-body li,.article-disclaimer{ color:#000; } .article-body h2{ color:#000; } .article-cta{ display:none; } }