/* =========================================================
   HUWGA - BASE / SHARED STYLES
   Variables, reset, and primitives used across landing,
   house-building and commercial sub-sites.
   ========================================================= */

:root{
  /* ---- House Building palette (from live huwga.co.uk) ---- */
  --hb-cream:    #F7F5F1;
  --hb-sand:     #DCD2C0;
  --hb-sand-dk:  #CBBFA8;
  --hb-slate:    #4F6361;
  --hb-slate-dk: #3D4D4B;
  --hb-charcoal: #36383A;
  --hb-white:    #FFFFFF;

  /* ---- Commercial palette (sibling, cooler/sharper) ---- */
  --co-base:     #F1F0EC;
  --co-graphite: #24272A;
  --co-graphite-2:#2F3336;
  --co-steel:    #5C6B6A;
  --co-steel-dk: #46524F;
  --co-amber:    #C97B3D;
  --co-amber-dk: #A8632E;
  --co-ink:      #1B1D1F;
  --co-white:    #FFFFFF;

  /* ---- Shared ---- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --container-max: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ text-decoration:none; color:inherit; }

ul{ list-style:none; margin:0; padding:0; }

button{ font-family:inherit; cursor:pointer; }

.container-xl{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:24px;
}

@media (min-width:768px){
  .container-xl{ padding-inline:48px; }
}

/* Visually-hidden utility for accessible labels */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:#000;
  color:#fff;
  padding:12px 20px;
  z-index:10000;
  border-radius:0 0 8px 0;
}
.skip-link:focus{
  left:0;
}

/* Visible keyboard focus across the whole site */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid currentColor;
  outline-offset:3px;
}

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Hero entrance - pure CSS so it starts on first paint, without waiting for any script */
@keyframes hero-in{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@keyframes hero-bg-in{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
@media (prefers-reduced-motion: no-preference){
  [data-hero-in]{ animation:hero-in .9s cubic-bezier(.22,.61,.36,1) .15s both; }
  [data-hero-in]:nth-child(2){ animation-delay:.27s; }
  [data-hero-in]:nth-child(3){ animation-delay:.39s; }
  [data-hero-in]:nth-child(4){ animation-delay:.51s; }
  [data-hero-in]:nth-child(n+5){ animation-delay:.63s; }
  [data-hero-bg]{ animation:hero-bg-in 1.6s cubic-bezier(.25,.46,.45,.94) both; }
}

/* ============================================================
   SHARED TESTIMONIAL TICKER - used on all 3 sub-site homepages
   Bigger, bolder card-style design. Drop this section anywhere.
   ============================================================ */
.testimonial-ticker-section {
  overflow: hidden;
  padding: 0;
  position: relative;
}

/* fade-out edges */
.testimonial-ticker-section::before,
.testimonial-ticker-section::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 10;
  pointer-events: none;
}

/* track wrapper */
.testimonial-ticker-wrap {
  overflow: hidden;
  padding: 40px 0;
}

/* width:max-content makes -50% equal exactly one set of cards (not half the
   screen). padding-right matches the gap so both halves are the same width
   and the loop point lands precisely on the first card of the copy.
   site.js ([data-marquee]) sets the duration from a px/s speed; 70s is the
   no-JS fallback. */
.testimonial-ticker-track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding-right: 24px;
  width: max-content;
  white-space: nowrap;
  animation: testimonial-scroll 70s linear infinite;
  will-change: transform;
}
.testimonial-ticker-track:hover {
  animation-play-state: paused;
}

@keyframes testimonial-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* individual card */
.testimonial-card {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: 340px;
  padding: 28px 32px;
  border-radius: 16px;
  white-space: normal;
  vertical-align: top;
}

.testimonial-card__stars {
  display: flex;
  gap: 5px;
  margin-bottom: 16px;
  font-size: 0.85rem;
}

.testimonial-card__quote {
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 300;
  flex: 1;
  margin: 0 0 20px;
}

.testimonial-card__attr {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  font-weight: 500;
  opacity: 0.75;
}

/* ---- HB variant (house building / new build) ---- */
.testimonial-ticker-section--hb {
  background: var(--hb-cream);
}
.testimonial-ticker-section--hb::before {
  background: linear-gradient(to right, var(--hb-cream), transparent);
}
.testimonial-ticker-section--hb::after {
  background: linear-gradient(to left, var(--hb-cream), transparent);
}
.testimonial-ticker-section--hb .testimonial-ticker-wrap {
  background: var(--hb-cream);
}
.testimonial-ticker-section--hb .testimonial-card {
  background: #fff;
  box-shadow: 0 4px 24px -8px rgba(54,56,58,.18);
  color: var(--hb-charcoal);
}
.testimonial-ticker-section--hb .testimonial-card__stars { color: var(--hb-slate); }
.testimonial-ticker-section--hb .testimonial-card__attr  { color: var(--hb-slate); }

/* ---- CO variant (commercial) ---- */
.testimonial-ticker-section--co {
  background: var(--co-base);
}
.testimonial-ticker-section--co::before {
  background: linear-gradient(to right, var(--co-base), transparent);
}
.testimonial-ticker-section--co::after {
  background: linear-gradient(to left, var(--co-base), transparent);
}
.testimonial-ticker-section--co .testimonial-ticker-wrap {
  background: var(--co-base);
}
.testimonial-ticker-section--co .testimonial-card {
  background: var(--co-white);
  border: 1px solid rgba(27,29,31,.08);
  color: var(--co-ink);
}
.testimonial-ticker-section--co .testimonial-card__stars { color: var(--co-amber); }
.testimonial-ticker-section--co .testimonial-card__attr  { color: var(--co-steel); }

/* ---- RV variant (renovation) ---- */
.testimonial-ticker-section--rv {
  background: var(--rv-linen);
}
.testimonial-ticker-section--rv::before {
  background: linear-gradient(to right, var(--rv-linen), transparent);
}
.testimonial-ticker-section--rv::after {
  background: linear-gradient(to left, var(--rv-linen), transparent);
}
.testimonial-ticker-section--rv .testimonial-ticker-wrap {
  background: var(--rv-linen);
}
.testimonial-ticker-section--rv .testimonial-card {
  background: #fff;
  box-shadow: 0 4px 24px -8px rgba(42,36,32,.16);
  color: var(--rv-ink);
}
.testimonial-ticker-section--rv .testimonial-card__stars { color: var(--rv-ochre); }
.testimonial-ticker-section--rv .testimonial-card__attr  { color: var(--rv-ochre); }

/* section heading above ticker */
.testimonial-ticker-heading {
  text-align: center;
  padding: 52px 24px 0;
}
.testimonial-ticker-heading h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 6px;
}
.testimonial-ticker-heading p {
  font-size: 0.9rem;
  opacity: 0.6;
  margin: 0;
}

/* rv-linen not in base, add fallback */
:root { --rv-linen: #F4EFE6; }

/* ============================================================
   SHARED SITE LOGO - identical brand mark in every nav
   ============================================================ */
.site-logo{
  height:42px;
  width:auto;
  object-fit:contain;
  display:block;
}
@media (max-width:575.98px){
  .site-logo{ height:34px; }
}

/* ============================================================
   SHARED SITE FOOTER - identical markup and styling sitewide
   ============================================================ */
.site-footer{
  background:#24272A;
  color:rgba(255,255,255,.82);
  font-family:'Jost', sans-serif;
  font-weight:300;
  padding:72px 0 28px;
}
.site-footer h4{
  font-family:'Jost', sans-serif;
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:500;
  color:#fff;
  margin:0 0 18px;
}
.site-footer a{
  opacity:.75;
  font-size:.92rem;
  transition:opacity .25s var(--ease);
}
.site-footer a:hover,
.site-footer a:focus-visible{ opacity:1; }

.site-footer__brand{ margin-bottom:18px; }
.site-footer__brand img{ height:46px; width:auto; }

.site-footer__blurb{
  opacity:.68;
  font-size:.92rem;
  line-height:1.7;
  max-width:320px;
}

.site-footer__social{ display:flex; gap:14px; margin-top:18px; }
.site-footer__social a{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  opacity:.8;
  transition:background .25s var(--ease), opacity .25s var(--ease);
}
.site-footer__social a:hover{ background:rgba(255,255,255,.12); opacity:1; }

.site-footer__meta{
  display:flex;
  align-items:center;
  gap:8px;
  opacity:.72;
  font-size:.92rem;
}

/* the cookie-settings link is a button, so it needs resetting */
.site-footer__linkbtn{
  background:none;
  border:0;
  padding:0;
  color:inherit;
  font:inherit;
  font-size:.92rem;
  opacity:.75;
  text-align:left;
  transition:opacity .25s var(--ease);
}
.site-footer__linkbtn:hover,
.site-footer__linkbtn:focus-visible{ opacity:1; text-decoration:underline; }

.site-footer__bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:56px;
  padding-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  justify-content:space-between;
  font-size:.8rem;
  opacity:.6;
}

/* ============================================================
   SHARED DIRECTORS / TEAM BLOCK - inherits the section palette
   ============================================================ */
.team-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
}
@media (min-width:768px){
  .team-grid{ grid-template-columns:repeat(2,1fr); gap:48px; }
}

.team-card{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.team-card__photo{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  max-width:340px;
  overflow:hidden;
  border-radius:var(--radius-md);
  background:rgba(0,0,0,.06);
}
.team-card__photo img{
  width:100%;height:100%;
  object-fit:cover;
}

/* placeholder shown until real portraits are supplied */
.team-card__photo--placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px dashed currentColor;
  opacity:.55;
  text-align:center;
  padding:20px;
}
.team-card__photo--placeholder i{ font-size:2.4rem; }
.team-card__photo--placeholder span{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.team-card__name{
  font-size:1.3rem;
  margin:0 0 4px;
}
.team-card__role{
  display:block;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.6;
  margin-bottom:16px;
}
.team-card__bio{
  font-size:1rem;
  line-height:1.75;
  margin:0 0 14px;
  opacity:.88;
}
.team-card__bio:last-child{ margin-bottom:0; }
.team-card__bio--aside{
  font-style:italic;
  opacity:.72;
  font-size:.95rem;
}

/* ============================================================
   COOKIE CONSENT - banner, preferences panel, blocked embeds
   ============================================================ */
.consent-banner{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:9000;
  background:#1B1D1F;
  color:rgba(255,255,255,.88);
  font-family:'Jost', sans-serif;
  font-weight:300;
  border-top:3px solid #C97B3D;
  box-shadow:0 -18px 44px -22px rgba(0,0,0,.8);
  animation:consent-rise .4s var(--ease) both;
}
.consent-banner[hidden]{ display:none; }

@keyframes consent-rise{
  from{ transform:translateY(100%); }
  to{ transform:translateY(0); }
}

.consent-banner__inner{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
@media (min-width:992px){
  .consent-banner__inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:26px 48px;
  }
}

.consent-banner__title{
  font-family:'Jost', sans-serif;
  font-size:1rem;
  font-weight:500;
  letter-spacing:.06em;
  color:#fff;
  margin:0 0 8px;
}
.consent-banner__body{
  margin:0;
  font-size:.9rem;
  line-height:1.7;
  opacity:.8;
  max-width:760px;
}
.consent-banner__body a{ text-decoration:underline; }
.consent-banner__body a:hover{ color:#fff; }

.consent-banner__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  flex-shrink:0;
}

.consent-btn{
  font-family:'Jost', sans-serif;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  border-radius:var(--radius-sm);
  padding:12px 22px;
  border:1px solid transparent;
  white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
/* accept and reject deliberately share one style: equal prominence */
.consent-btn--primary{
  background:#fff;
  color:#1B1D1F;
  border-color:#fff;
}
.consent-btn--primary:hover{ background:#E4E2DC; border-color:#E4E2DC; }
.consent-btn--ghost{
  background:transparent;
  color:inherit;
  border-color:currentColor;
  opacity:.85;
}
.consent-btn--ghost:hover{ opacity:1; }

/* ---- preferences panel ---- */
.consent-panel{
  position:fixed;
  inset:0;
  z-index:9500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  font-family:'Jost', sans-serif;
  font-weight:300;
}
.consent-panel[hidden]{ display:none; }

.consent-panel__scrim{
  position:absolute;
  inset:0;
  background:rgba(12,13,14,.66);
  backdrop-filter:blur(3px);
}

.consent-panel__dialog{
  position:relative;
  width:100%;
  max-width:560px;
  max-height:88vh;
  display:flex;
  flex-direction:column;
  background:#FFFFFF;
  color:#1B1D1F;
  border-radius:var(--radius-md);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  overflow:hidden;
}

.consent-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 26px;
  border-bottom:1px solid rgba(27,29,31,.1);
}
.consent-panel__head h2{
  font-family:'Jost', sans-serif;
  font-size:1.05rem;
  font-weight:500;
  letter-spacing:.06em;
  margin:0;
}
.consent-panel__close{
  background:none;border:0;
  font-size:1.1rem;
  line-height:1;
  padding:6px;
  opacity:.6;
}
.consent-panel__close:hover{ opacity:1; }

.consent-panel__body{
  padding:8px 26px 22px;
  overflow-y:auto;
}

.consent-cat{
  padding:18px 0;
  border-bottom:1px solid rgba(27,29,31,.08);
}
.consent-cat:last-of-type{ border-bottom:0; }
.consent-cat__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:6px;
}
.consent-cat__name{
  font-size:.95rem;
  font-weight:500;
  cursor:pointer;
}
.consent-cat__desc{
  margin:0;
  font-size:.88rem;
  line-height:1.65;
  opacity:.7;
  max-width:44ch;
}

.consent-switch{ position:relative; flex-shrink:0; }
.consent-switch input{
  position:absolute;
  inset:0;
  width:52px;height:28px;
  margin:0;
  opacity:0;
  cursor:pointer;
  z-index:2;
}
.consent-switch input:disabled{ cursor:not-allowed; }
.consent-switch__track{
  display:block;
  width:52px;height:28px;
  border-radius:999px;
  background:rgba(27,29,31,.2);
  transition:background .25s var(--ease);
  position:relative;
}
.consent-switch__track::after{
  content:'';
  position:absolute;
  top:3px;left:3px;
  width:22px;height:22px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .25s var(--ease);
}
.consent-switch input:checked ~ .consent-switch__track{ background:#5C6B6A; }
.consent-switch input:checked ~ .consent-switch__track::after{ transform:translateX(24px); }
.consent-switch input:disabled ~ .consent-switch__track{ background:#9AA6A4; opacity:.7; }
.consent-switch input:focus-visible ~ .consent-switch__track{
  outline:3px solid currentColor;
  outline-offset:3px;
}

.consent-panel__note{
  margin:18px 0 0;
  font-size:.82rem;
  line-height:1.65;
  opacity:.65;
}
.consent-panel__note a{ text-decoration:underline; }

.consent-panel__foot{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
  padding:18px 26px;
  border-top:1px solid rgba(27,29,31,.1);
  background:#F1F0EC;
}
.consent-panel__foot .consent-btn--primary{
  background:#24272A;
  color:#fff;
  border-color:#24272A;
}
.consent-panel__foot .consent-btn--primary:hover{ background:#3A3F43; border-color:#3A3F43; }
.consent-panel__foot .consent-btn--ghost{ color:#1B1D1F; }

/* ---- blocked embed placeholder ---- */
.consent-embed{
  position:relative;
  width:100%;
  min-height:380px;
  border-radius:var(--radius-md);
  overflow:hidden;
}
.consent-embed--blocked{
  border:1px dashed currentColor;
  background:rgba(127,127,127,.08);
}
.consent-embed__inner{
  height:100%;
  min-height:380px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  padding:32px 24px;
}
.consent-embed__icon{ font-size:1.6rem; opacity:.45; }
.consent-embed__text{
  margin:0;
  max-width:42ch;
  font-size:.94rem;
  line-height:1.7;
  opacity:.75;
}
.consent-embed__actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.consent-embed__btn{
  font-family:'Jost', sans-serif;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  padding:11px 20px;
  border-radius:var(--radius-sm);
  border:1px solid currentColor;
  background:currentColor;
  transition:opacity .25s var(--ease);
}
.consent-embed__btn span,
.consent-embed__btn{ color:inherit; }
.consent-embed__btn:not(.consent-embed__btn--ghost){
  background:#24272A;
  color:#fff;
  border-color:#24272A;
}
.consent-embed__btn:hover{ opacity:.85; }
.consent-embed__btn--ghost{ background:transparent; }

/* ============================================================
   TESTIMONIAL TICKER - additions for real client testimonials
   Quotes vary from one line to several paragraphs, so long ones
   are clamped in the card and opened in full in a dialog.
   ============================================================ */

/* Cards are top-aligned: stars, then the quote directly beneath,
   with the attribution pushed to the bottom of the card. */
.testimonial-card{ justify-content:flex-start; }
.testimonial-card__attr{ margin-top:auto; padding-top:4px; }

.testimonial-card__quote{
  position:relative;
  /* must not stretch: the clamp height has to equal the visible height,
     otherwise the overflow check in testimonials.js cannot see the cut-off */
  flex:0 1 auto;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:10;
  line-clamp:10;
  overflow:hidden;
}

/* fade the last line out when there is more to read */
.testimonial-card.is-clamped .testimonial-card__quote::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:2.6em;
  background:linear-gradient(to bottom, transparent, var(--testimonial-card-bg, #fff));
  pointer-events:none;
}

.testimonial-card__more{
  align-self:flex-start;
  background:none;
  border:0;
  padding:0;
  margin:0 0 18px;
  font-family:'Jost', sans-serif;
  font-size:.8rem;
  letter-spacing:.06em;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
  opacity:.85;
  transition:opacity .2s var(--ease);
}
.testimonial-card__more:hover{ opacity:1; }

/* per-theme card background, used by the fade gradient above */
.testimonial-ticker-section--hb .testimonial-card{ --testimonial-card-bg:#fff; }
.testimonial-ticker-section--rv .testimonial-card{ --testimonial-card-bg:#fff; }
.testimonial-ticker-section--co .testimonial-card{ --testimonial-card-bg:var(--co-white); }

.testimonial-ticker-section--hb .testimonial-card__more{ color:var(--hb-slate); }
.testimonial-ticker-section--co .testimonial-card__more{ color:var(--co-steel); }
.testimonial-ticker-section--rv .testimonial-card__more{ color:var(--rv-ochre-dk); }

/* pause the marquee while a testimonial is open, and for anyone
   who has asked for reduced motion */
.testimonial-ticker-track.is-paused{ animation-play-state:paused; }
/* any [data-marquee] strip is held still while site.js measures it */
[data-marquee].is-marquee-pending{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .testimonial-ticker-track{ animation:none; transform:none; }
  .testimonial-ticker-wrap{ overflow-x:auto; }
}

/* ---- full testimonial dialog ---- */
.testimonial-modal{
  position:fixed;
  inset:0;
  z-index:9200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  font-family:'Jost', sans-serif;
  font-weight:300;
}
.testimonial-modal[hidden]{ display:none; }

.testimonial-modal__scrim{
  position:absolute;
  inset:0;
  background:rgba(12,13,14,.62);
  backdrop-filter:blur(3px);
}
.testimonial-modal__dialog{
  position:relative;
  width:100%;
  max-width:620px;
  max-height:86vh;
  overflow-y:auto;
  background:#fff;
  color:#1B1D1F;
  border-radius:var(--radius-md);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  padding:36px 34px 30px;
}
.testimonial-modal__close{
  position:absolute;
  top:14px;right:14px;
  background:none;border:0;
  font-size:1.1rem;
  line-height:1;
  padding:8px;
  opacity:.55;
}
.testimonial-modal__close:hover{ opacity:1; }
.testimonial-modal__quote{
  font-size:1.05rem;
  line-height:1.8;
  margin:0 0 22px;
  white-space:pre-wrap;
}
.testimonial-modal__attr{
  font-size:.85rem;
  letter-spacing:.04em;
  font-weight:500;
  opacity:.7;
}

/* ============================================================
   MOBILE ENQUIRE BAR - fixed to the foot of every section page
   below 992px (where the header "Enquire" button is hidden).
   Themed per section via the body class.
   ============================================================ */
.enquire-bar{
  --eb-bg:#1B1D1F;
  --eb-fg:#fff;
  --eb-accent:#C97B3D;
  --eb-accent-dk:#A8632E;
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:250;                 /* above page content, below the mobile menu (300) and consent UI (9000+) */
  display:flex;
  gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--eb-bg);
  box-shadow:0 -10px 30px -12px rgba(0,0,0,.45);
  font-family:'Jost', sans-serif;
}
.enquire-bar__btn{
  flex:1 1 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:0 16px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.35);
  color:var(--eb-fg);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.enquire-bar__btn:hover,
.enquire-bar__btn:focus-visible{ color:var(--eb-fg); border-color:var(--eb-fg); }
.enquire-bar__btn--primary{
  flex-grow:1.6;
  background:var(--eb-accent);
  border-color:var(--eb-accent);
}
.enquire-bar__btn--primary:hover,
.enquire-bar__btn--primary:focus-visible{ background:var(--eb-accent-dk); border-color:var(--eb-accent-dk); }

/* keep the footer clear of the bar */
body:has(.enquire-bar){ padding-bottom:calc(66px + env(safe-area-inset-bottom, 0px)); }

@media (min-width:992px){
  .enquire-bar{ display:none; }
  body:has(.enquire-bar){ padding-bottom:0; }
}

/* section themes */
.hb-body .enquire-bar{ --eb-bg:var(--hb-charcoal); --eb-accent:var(--hb-slate); --eb-accent-dk:var(--hb-slate-dk); }
.co-body .enquire-bar{ --eb-bg:var(--co-ink);      --eb-accent:var(--co-amber); --eb-accent-dk:var(--co-amber-dk); }
.rv-body .enquire-bar{ --eb-bg:var(--rv-bark-dk);  --eb-accent:var(--rv-ochre); --eb-accent-dk:var(--rv-ochre-dk); }

/* ---------- Real <img> used as a cover background ----------
   Heroes, landing panels and project cards use an <img> (not a CSS
   background) so Google Images can index the photo and read its alt
   text. It fills its absolutely-positioned parent exactly like
   background-size:cover; background-position:center did. */
.bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}