/* ============================================================
   Kirsty Myatt Massage Therapies — global stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Jost:wght@300;400;500;600&family=Mrs+Saint+Delafield&display=swap');

:root{
  /* palette — drawn from the mandala mark */
  --gold: #d8a865;
  --gold-light: #f1cf94;
  --clay: #bd6d54;
  --rose: #a85c53;
  --rose-deep: #6e3a34;
  --ink: #3b2e2a;
  --ink-soft: #6b5a52;
  --cream: #fdfaf5;
  --off-white: #f8f2ea;
  --line: #dcb9a4;
  --line-soft: #ecdccf;
  --footer-bg: #7d5753;

  --gradient-brand: linear-gradient(to bottom, var(--gold-light), var(--clay) 55%, var(--rose-deep));

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Jost', 'Segoe UI', sans-serif;
  --font-script: 'Mrs Saint Delafield', cursive;

  --max-width: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--rose-deep);
  margin: 0 0 .5em;
  letter-spacing: .01em;
}

p{ margin: 0 0 1.1em; }

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

:focus-visible{
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

/* ---------- decorative mandala watermark ---------- */
.mandala-watermark{
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 420px;
  max-width: 45vw;
  opacity: .08;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   HOME — corner mandala bleeding off top-left
   ============================================================ */
body.page-home{
  position: relative;
  overflow-x: hidden;
}

.corner-mandala{
  position: absolute;
  top: -70px;
  left: -130px;
  width: 460px;
  max-width: 52vw;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 16px 34px rgba(59,38,32,.14));
}

@media (max-width: 900px){
  .corner-mandala{ width: 340px; top: -50px; left: -110px; }
}
@media (max-width: 560px){
  .corner-mandala{ width: 240px; top: -30px; left: -70px; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  padding: 28px 0 18px;
  position: relative;
  z-index: 20;
}

.site-header .container{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}

.site-header .brand{
  position: relative;
  width: 180px;
  height: 70px;        /* reserves the original space so header layout doesn't jump */
}

.site-header .brand img{
  position: absolute;
  top: -25px;          /* pulls it up so it bleeds off the top of the page */
  left: 0;
  width: 340px;         /* bigger than before */
  height: auto;
  z-index: 5;
}
.brand-text{
  font-family: var(--font-display);
}

.brand-text .name{
  display: block;
  font-size: 1.55rem;
  letter-spacing: .08em;
  color: var(--rose-deep);
  line-height: 1.15;
}

.brand-text .tag{
  display: block;
  font-family: var(--font-body);
  font-size: .62rem;
  letter-spacing: .32em;
  color: var(--clay);
  margin-top: 3px;
}

.header-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.header-contact{
  display: flex;
  align-items: center;
  gap: 14px;
}

.social-icons{
  display: flex;
  gap: 10px;
}

.social-icons a{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--clay);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clay);
  transition: background .25s var(--ease), color .25s var(--ease);
}

.social-icons a:hover{
  background: var(--clay);
  color: var(--cream);
}

.social-icons svg{ width: 16px; height: 16px; fill: currentColor; }

.phone-link{
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--clay);
  letter-spacing: .03em;
  white-space: nowrap;
}

nav.main-nav ul{
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

nav.main-nav a{
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

nav.main-nav a:hover{ color: var(--rose-deep); }

nav.main-nav a.active{
  color: var(--rose-deep);
  font-weight: 500;
  border-bottom-color: var(--clay);
}

.nav-toggle{
  display: none;
  background: none;
  border: 1.5px solid var(--clay);
  border-radius: 8px;
  width: 42px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--rose-deep);
  cursor: pointer;
}
.nav-toggle svg{ width: 20px; height: 20px; }

/* ============================================================
   HERO (home page)
   ============================================================ */
.hero{
  position: relative;
  margin: 6px 0 60px;
  overflow: hidden;
}

.hero-media{
  position: relative;
}

/* wraps the 3-image hero strip so it sits centered at the site's
   normal container width, with breathing room top and bottom,
   instead of bleeding to the screen edges */
.hero-photo-strip-wrap{
  width: 100%;
  padding-top: 36px;
  padding-bottom: 0;
}

.hero-media .photo-strip{
  gap: 20px;
}

.hero-media .photo-strip img{
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  filter: none; /* drop the sepia tone used on the footer strip so it matches the rest of the hero */
}

@media (max-width: 600px){
  .hero-media .photo-strip{
    gap: 12px;
  }
}

/* caption now sits below the image strip instead of overlaid on top */
.hero-caption{
  position: static;
  text-align: center;
  color: var(--ink);
  padding: 36px 24px 0;
}

.hero-caption .eyebrow{
  font-size: .78rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 10px;
  display: block;
}

.hero-caption h1{
  color: var(--rose-deep);
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: 14px;
}

.hero-caption p{
  max-width: 520px;
  margin: 0 auto 20px;
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: 999px;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1.5px solid var(--rose-deep);
  color: var(--rose-deep);
  background: transparent;
  transition: all .25s var(--ease);
  cursor: pointer;
}

.btn:hover{
  background: var(--rose-deep);
  color: #fff;
}

.btn-solid{
  background: var(--gradient-brand);
  border: none;
  color: #fff;
}

.btn-solid:hover{
  background: var(--footer-bg);
  color: #fff;
  transform: translateY(-1px);
}

.btn-light{
  border-color: #fff;
  color: #fff;
}
.btn-light:hover{
  background: #fff;
  color: var(--rose-deep);
}

/* ============================================================
   SECTIONS / GENERIC
   ============================================================ */
main{ position: relative; }

.section{
  padding: 70px 0;
  position: relative;
}

.section-tight{ padding: 40px 0; }

.eyebrow{
  font-size: .74rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 12px;
  display: block;
}
.about-eyebrow {
  font-family: var(--font-script);
  font-size: 2.4rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rose);
  line-height: 1;
  margin-bottom: 0;
}

.section-head{
  max-width: 640px;
  margin: 0 0 40px;
}

.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }

.divider{
  width: 64px;
  height: 2px;
  background: var(--gradient-brand);
  border: none;
  margin: 18px 0;
}
.center .divider{ margin-left: auto; margin-right: auto; }

/* framed content box, matches the design mockup's rose-outlined panels */
.panel{
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 46px;
  position: relative;
  overflow: hidden;
  background: #fff;
}

@media (max-width: 720px){
  .panel{ padding: 28px 22px; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
}

.about-grid img{
  border-radius: 4px;
  box-shadow: 0 18px 40px -18px rgba(59,38,32,.35);
}

.signature{
  font-family: var(--font-script);
  font-size: 2.4rem;
  color: var(--rose);
  margin-top: 18px;
}

/* NOTE: the About page previously had its own smaller .credentials rule here.
   It's been removed because the site-wide gradient version below (used on
   the home page) now applies everywhere .credentials is used, including
   About. If About should look different from Home, let me know and I'll
   split this into a separate .credentials-inline class for that page. */

@media (max-width: 780px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-grid img{ max-width: 280px; }
}

/* ============================================================
   TREATMENTS GRID
   ============================================================ */

.treatments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
}

.treatment-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  height: 100%;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.treatment-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -18px rgba(110,58,52,.4);
}

/* LARGE, EQUAL-SIZED IMAGES */
.treatment-card .thumb {
  width: 100%;
  height: 360px;
  flex-shrink: 0;
  overflow: hidden;
}

.treatment-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* EQUAL TEXT BOXES */
.treatment-card .label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-height: 90px;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--rose-deep);
  background: #fff;
}

/* ALL CARDS IDENTICAL — NO GOLD GRADIENT */
.treatment-card.featured {
  background: #fff;
  border: 1px solid var(--line);
}

.treatment-card.featured .label {
  color: var(--rose-deep);
  font-weight: 500;
}

.treatment-card.featured .arrow {
  color: var(--rose-deep);
}

/* Arrow */
.treatment-card .arrow {
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: all .25s var(--ease);
  font-size: 1.3rem;
  flex-shrink: 0;
}

.treatment-card:hover .arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.treatments-note {
  margin-top: 30px;
  font-size: .85rem;
  color: var(--ink-soft);
  text-align: center;
}

/* TABLET */
@media (max-width: 900px) {
  .treatments-grid {
    grid-template-columns: 1fr 1fr;
  }

  .treatment-card .thumb {
    height: 300px;
  }
}

/* MOBILE */
@media (max-width: 600px) {
  .treatments-grid {
    grid-template-columns: 1fr;
  }

  .treatment-card .thumb {
    height: 300px;
  }

  .treatment-card .label {
    min-height: 80px;
    padding: 18px 22px;
  }
}

/* ============================================================
   TREATMENT DETAIL PAGE
   ============================================================ */
.treatment-detail{
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 44px;
  align-items: start;
}

.treatment-detail .main-photo img{
  border-radius: 4px;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

.treatment-detail .main-photo--top img{
  object-position: center top;
}

.treatment-detail .side-photos{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.treatment-detail .side-photos img{ border-radius: 4px; aspect-ratio: 4/5; object-fit: cover; }

.price-row{
  display: flex;
  gap: 28px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

.price{
  font-family: var(--font-display);
  color: var(--rose-deep);
}
.price .duration{ display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft); font-family: var(--font-body); margin-bottom: 2px;}
.price .amount{ font-size: 1.6rem; }

.back-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 26px;
}
.back-link:hover{ color: var(--rose-deep); }

@media (max-width: 820px){
  .treatment-detail{ grid-template-columns: 1fr; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-card{
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 34px 38px;
  margin-bottom: 24px;
  background: #fff;
}
.stars{ color: var(--gold); letter-spacing: 2px; font-size: 1.1rem; margin-bottom: 10px; }
.testimonial-card .reviewer{ font-family: var(--font-display); font-size: 1.15rem; color: var(--rose-deep); margin-bottom: 2px;}
.testimonial-quote{ font-style: italic; color: var(--ink); }
.testimonial-meta{ font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 14px;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: stretch;
}

.contact-grid iframe, .map-fallback{
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  border-radius: 4px;
  filter: sepia(.15) saturate(.85);
}

.field{ margin-bottom: 20px; }
.field label{
  display: block;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 8px;
}
.field input, .field textarea{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  background: var(--off-white);
}
.field textarea{ min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--clay); background: #fff; }

.contact-note{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 26px;
  font-size: .92rem;
  color: var(--ink-soft);
}

@media (max-width: 820px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-grid iframe{ min-height: 280px; }
}

/* ============================================================
   CTA STRIP
   ============================================================ */
.cta-strip{
  background: var(--gradient-brand);
  padding: 60px 0;
  text-align: center;
  color: #fff;
}
.cta-strip h2{ color: #fff; }
.cta-strip p{ max-width: 520px; margin: 0 auto 24px; opacity: .95; }

/* ============================================================
   FEATURE ROW (home)
   ============================================================ */
.feature-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.feature-row--two{
  grid-template-columns: repeat(2, 1fr);
}
.feature-row--two .feature-item{
  text-align: center;
}
.feature-item{ text-align: left; }
.feature-item .num{
  font-family: var(--font-display);
  font-size: .85rem;
  color: var(--gold);
  letter-spacing: .2em;
  display:block;
  margin-bottom: 10px;
}
.feature-item h3{ font-size: 1.3rem; margin-bottom: 8px; }
.feature-item p{ color: var(--ink-soft); font-size: .95rem; margin-bottom: 0;}

@media (max-width: 820px){
  .feature-row{ grid-template-columns: 1fr; gap: 34px; }
}

/* home split section */
.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split img{ border-radius: 4px; box-shadow: 0 18px 40px -18px rgba(59,38,32,.35); }
@media (max-width: 820px){
  .split{ grid-template-columns: 1fr; }
  .split.reverse .img-col{ order: -1; }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site-footer{
  background: var(--footer-bg);
  color: #f3e6de;
  padding: 56px 0 26px;
  margin-top: 70px;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

footer .brand-text .name{ color: #fff; }
footer .brand img{ filter: brightness(0) invert(1) opacity(.9); }
footer .brand-text .tag{ color: var(--gold-light); }


.footer-fht-badge img{
  width: 50px;
  height: auto;
}

footer h4{
  color: var(--gold-light);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

footer ul{ list-style: none; margin: 0; padding: 0; }
footer li{ margin-bottom: 10px; }
footer a{ color: #f3e6de; opacity: .85; font-size: .92rem; }
footer a:hover{ opacity: 1; text-decoration: underline; }

.footer-bottom{
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .78rem;
  opacity: .85;
}

@media (max-width: 820px){
  .footer-grid{ grid-template-columns: 1fr; }
}

footer a{ color: #f3e6de; opacity: .85; font-size: .92rem; }
footer .footer-text{ color: #f3e6de; opacity: .85; font-size: .92rem; }

/* ============================================================
   RESPONSIVE NAV (mobile)
   ============================================================ */
@media (max-width: 860px){
  .nav-toggle{ display: flex; }
  .header-right{ align-items: flex-end; width: 100%; }
  nav.main-nav{
    display: none;
    width: 100%;
    margin-top: 10px;
  }
  nav.main-nav.open{ display: block; }
  nav.main-nav ul{
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    padding: 18px 0 4px;
  }
}

@media (max-width: 600px){
  .container{ padding: 0 22px; }
  .brand img{ width: 180px; top: -50px; }
  .brand-text .name{ font-size: 1.2rem; }
  .phone-link{ font-size: 1.1rem; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
}
/* Mobile Home Visits image positioning */
.treatment-card:nth-child(5) .thumb img {
  object-position: center 0%;
}

.credentials {
  margin-top: 48px;
  background: linear-gradient(to bottom, var(--clay), var(--footer-bg));
  border-radius: 12px;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.credentials-badge {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.credentials-badge img {
  width: 78px;
  height: auto;
}

.credentials .credentials-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--rose-deep);
}

.credentials .credentials-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 640px) {
  .credentials {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
  }
}

/* ============================================================
   PHOTO STRIP (three-up, full-width)
   ============================================================ */
.photo-strip{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.photo-strip img{
  width: 100%;
  height: 340px;
  object-fit: cover;
  filter: sepia(.35) saturate(.7);
}

@media (max-width: 820px){
  .photo-strip{
    grid-template-columns: 1fr;
  }
  .photo-strip img{
    height: 260px;
  }
}
/* Mandala watermark, bleeding off top-right, behind all page content */
body::before {
  content: "";
  position: fixed;
  top: -100px;                /* pushes it off the top — tweak to taste */
  right: -20px;               /* pushes it off the right — tweak to taste */
  width: 1200px;
  height: 1200px;
  background-image: url("../images/Kirsty_Myatt_watermark.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

/* Make sure real content sits above the watermark */
.site-header,
main,
footer {
  position: relative;
  z-index: 1;
}

/* Footer logo bleeding off the top of the footer band */
.footer-grid .brand{
  position: relative;
  min-height: 90px;
  width: 160px;              /* match the logo's width so children can center against it */
}

.footer-grid > div:first-child{
  width: 160px; /* new — matches the logo width so the badge centers against the same box */
}

.footer-fht-badge{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 12px auto 0;       /* auto left/right centers it under whatever .brand's width is */
}

.footer-grid .brand img{
  position: absolute;
  top: -56px;   /* pulls the logo up to sit flush with the top edge of the brown banner */
  left: 0;
  width: 160px;
  height: auto;
  z-index: 2;
}
@media (max-width: 760px) {
  .site-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
  }

  /* Smaller logo that can't spill over the header */
  .site-header .brand {
    flex: 0 0 auto;
  }
  .site-header .brand img {
    display: block;
    height: 76px;
    width: auto;
    max-width: 100%;
  }

  /* Icons, phone and menu button sit together, on the right */
  .site-header .header-right {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
  }
  .site-header .header-contact {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  .site-header .social-icons {
    display: flex;
    gap: 8px;
  }
  .site-header .social-icons a {
    width: 38px;
    height: 38px;
  }
  .site-header .phone-link {
    font-size: 1rem;
    white-space: nowrap;
  }
  .site-header .nav-toggle {
    flex: 0 0 auto;
  }
}
/* Very small phones: put logo on its own row, controls below */
@media (max-width: 420px) {
  .site-header .brand {
    flex: 1 1 100%;
    text-align: center;
  }
  .site-header .brand img {
    margin: 0 auto;
    height: 64px;
  }
  .site-header .header-contact {
    justify-content: space-between;
  }
}
@media (max-width: 820px) {
  footer.site-footer {
    padding: 56px 0 24px;   /* same as desktop, so the logo can sit flush with the top edge */
    margin-top: 50px;
  }

  /* Two columns: Explore | Get in touch */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }

  /* Unwrap the first column so logo and badge become separate grid items */
  .footer-grid > div:first-child {
    display: contents;
  }

  /* Row 1: logo across the top, bleeding off the band */
  .footer-grid .brand {
    grid-column: 1 / -1;
    grid-row: 1;
    position: relative;
    width: 170px;
    min-height: 110px;
  }
  .footer-grid .brand img {
    position: absolute;
    top: -56px;            /* more negative = bleeds further off the top, e.g. -70px */
    left: 0;
    width: 170px;
    height: auto;
    z-index: 2;
  }

  /* Row 2: Explore | Get in touch */
  .footer-grid > div:nth-child(2) { grid-column: 1; grid-row: 2; }
  .footer-grid > div:nth-child(3) { grid-column: 2; grid-row: 2; }

  /* Row 3: FHT badge under Get in touch */
  .footer-fht-badge {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    margin: 0;
    width: 70px;
    height: 70px;
  }

  /* Copyright and credit on separate lines */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
@media (max-width: 820px) {
  footer.site-footer {
    padding: 56px 0 24px;
    margin-top: 50px;
  }

  footer.site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }

  /* Unwrap the first column so logo and badge become separate grid items */
  footer.site-footer .footer-grid > div:first-child {
    display: contents;
  }

  /* Row 1: logo across the top, bleeding off the band */
  footer.site-footer .footer-grid .brand {
    grid-column: 1 / -1;
    grid-row: 1;
    position: relative;
    width: 170px;
    min-height: 110px;
  }
  footer.site-footer .footer-grid .brand img {
    position: absolute;
    top: -56px;
    left: 0;
    width: 170px;
    height: auto;
    z-index: 2;
  }
    footer.site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 28px 24px;
  }

  /* Row 2: Explore | Get in touch */
    footer.site-footer .footer-grid > div:nth-child(2) { grid-column: 1; grid-row: 2 / 4; }
  footer.site-footer .footer-grid > div:nth-child(3) { grid-column: 2; grid-row: 2; }

  /* Row 3: FHT badge under Get in touch */
  footer.site-footer .footer-fht-badge {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    align-self: start;
    margin: 0;
    width: 70px;
    height: 70px;
  }
    footer.site-footer .footer-fht-badge {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    align-self: start;
    margin: -14px 0 0;
    width: 70px;
    height: 70px;
  }

  footer.site-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
@media (max-width: 760px) {
  body::before {
    opacity: 0.08;
  }
}
@media (max-width: 760px) {
  .site-header .brand {
    width: 210px;
    height: 90px;
  }
  .site-header .brand img {
    width: 210px;
    height: auto;
    top: -30px;
  }
}
@media (max-width: 860px) {
  .site-header {
    padding-top: 0;
  }

  .site-header .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Logo in the normal flow, so it pushes everything else down */
  .site-header .brand {
    position: static;
    width: auto;
    height: auto;
  }
  .site-header .brand img {
    position: relative;
    top: 0;
    left: 0;
    width: 230px;          /* change this to resize the logo */
    height: auto;
    margin-top: 0;         /* try -20px to bleed it off the top edge */
  }

  /* Icons, phone and menu button on their own row underneath */
  .site-header .header-right {
    width: 100%;
    align-items: stretch;
  }
  .site-header .header-contact {
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
  }
}
@media (max-width: 860px) {
  /* ---------- HEADER: logo centred, with space underneath ---------- */
  .site-header .container {
    align-items: center;
  }
  .site-header .brand {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 20px;      /* space between logo and icons; increase for more */
  }
  .site-header .brand img {
    margin: 0 auto;
  }
}

@media (max-width: 820px) {
  /* ---------- FOOTER: logo centred across the top ---------- */
  footer.site-footer .footer-grid .brand {
    grid-column: 1 / -1;
    justify-self: center;
    width: 170px;
  }
  footer.site-footer .footer-grid .brand img {
    left: 50%;
    transform: translateX(-50%);
  }
}