/*!
 * ==========================================================================
 * Dr Sonia Kalsi Website Stylesheet
 * Copyright (c) 2026 The Apps Brewery
 * https://theappsbrewery.com
 * ==========================================================================
 */

:root {
  --ink: #092f33;
  --ink-2: #16484d;
  --teal: #317f82;
  --teal-soft: #dceced;
  --sage: #dfe8e3;
  --cream: #f7f3ec;
  --paper: #fffdf9;
  --white: #fff;
  --text: #334246;
  --muted: #657579;
  --line: #d9e3df;
  --shadow: 0 24px 70px rgba(11, 48, 52, .12);
  --max: 1280px;
  --radius: 28px
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 20px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit
}

h1,
h2,
h3,
h4 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  color: var(--ink);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -.025em
}

h1 {
  font-size: clamp(3.6rem, 7vw, 7.7rem);
  margin: .08em 0 .16em
}

h2 {
  font-size: clamp(2.5rem, 4.8vw, 4.8rem);
  margin: .18em 0 .5em
}

h3 {
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  margin: .3em 0 .55em
}

h4 {
  font-size: 1.15rem
}

.eyebrow {
  margin: 0 0 .8rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .78rem;
  font-weight: 800;
  color: var(--teal)
}

.site-header {
  height: 96px;
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(4vw, 24px);
  background: rgba(255, 253, 249, .9);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(217, 227, 223, .8)
}

.brand {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  color: var(--ink)
}

.brand span {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 2rem;
  line-height: 1
}

.brand small {
  margin-top: .45rem;
  color: var(--teal);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .24em
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 1.8rem
}

.site-header nav a {
  text-decoration: none;
  font-size: .92rem;
  font-weight: 700;
  position: relative;
  padding: .8rem 0
}

.site-header nav .nav-booking {
  padding: .65rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
}

.site-header nav .nav-booking::after {
  display: none;
}

.site-header nav a:after {
  content: "";
  position: absolute;
  height: 2px;
  left: 0;
  right: 100%;
  bottom: .4rem;
  background: var(--teal);
  transition: .25s
}

.site-header nav a:hover:after,
.site-header nav a:focus:after {
  right: 0
}

.menu {
  display: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.8rem
}

.hero {
  min-height: 760px;
  max-width: 1500px;
  margin: 0 auto 0;
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  overflow: hidden;
  background: linear-gradient(135deg, #f0f5f2 0%, #fffdf9 48%, #ece7df 100%);
  position: relative
}

.hero:before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: rgba(49, 127, 130, .09);
  left: -220px;
  top: 100px
}

.hero-copy {
  padding: 8rem 6vw 7rem;
  align-self: center;
  position: relative;
  z-index: 2
}

.hero-copy:before {
  content: "";
  width: 72px;
  height: 2px;
  background: var(--teal);
  display: block;
  margin-bottom: 2rem
}

.hero .lead {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  max-width: 620px;
  color: #405357
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%)
}

.actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.2rem
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: .9rem 1.45rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid var(--ink);
  transition: .25s
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(11, 48, 52, .16)
}

.primary {
  background: var(--ink);
  color: white
}

.secondary {
  background: rgba(255, 255, 255, .7);
  color: var(--ink)
}

.principles {
  max-width: 1180px;
  margin: -52px auto 0;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow)
}

.principles article {
  background: #fff;
  padding: 2.15rem 2rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem 1rem
}

.principles span {
  grid-row: 1/3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 800
}

.principles h3,
.principles p {
  margin: .15rem 0
}

.principles p {
  font-size: .94rem;
  color: var(--muted)
}

/* ==========================================================================
   GLOBAL SECTION SPACING
   ========================================================================== */

.section {
  padding: 5rem max(5vw, 24px);
  max-width: var(--max);
  margin: auto;
}

.section-heading {
  max-width: 830px;
  margin-bottom: 3.5rem
}

.section-heading h2 {
  margin-bottom: .2rem
}

.about {
  position: relative
}

.about-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 5rem;
  align-items: center
}

.prose p:first-child:first-letter {
  float: left;
  font-family: Georgia, serif;
  font-size: 5.4rem;
  line-height: .77;
  padding: .14em .11em 0 0;
  color: var(--teal)
}

.office-image {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 4/3;
  object-fit: cover
}


.office-map {
  margin: 1rem 0 0;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(217, 227, 223, .9);
  box-shadow: 0 12px 32px rgba(15, 53, 56, .08);
}

.office-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: inherit;
}

.office-map img {
  display: block;
  width: 100%;
  height: auto;
}

.detail-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 5rem
}

.detail-columns article {
  padding: 2.6rem;
  border-radius: 22px;
  background: linear-gradient(160deg, #f8faf8, #edf3f0);
  border: 1px solid #e4ebe7
}

.detail-columns ul,
.service-card ul,
.publications ul {
  padding-left: 1.2rem
}

.detail-columns li,
.service-card li,
.publications li {
  margin: .48rem 0
}

.publications {
  margin-top: 2rem;
  padding: 3rem;
  border-radius: 24px;
  background: var(--ink);
  color: #eaf4f2;
  box-shadow: var(--shadow)
}

.publications h3 {
  color: white
}

.publications a {
  color: #bfe7e4;
  text-underline-offset: 3px
}

.services {
  max-width: none;
  background: linear-gradient(180deg, #eef4f1 0%, #f9f7f2 100%)
}

.services>.section-heading,
.services>.service-card {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto
}

.service-card {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 4.5rem;
  align-items: center;
  background: rgba(255, 255, 255, .88);
  padding: clamp(2rem, 4vw, 4rem);
  margin-top: 2rem;
  border: 1px solid rgba(217, 227, 223, .9);
  border-radius: var(--radius);
  box-shadow: 0 18px 55px rgba(31, 64, 65, .08)
}

.service-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 20px
}


.service-card.reverse img {
  order: -1
}

.service-card h3 {
  font-size: clamp(2rem, 3vw, 3.2rem)
}

.legacy-graphics {
  padding-top: 7rem
}

.graphic-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 1.25rem
}

.graphic-grid img {
  width: 100%;
  height: 330px;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 14px 38px rgba(15, 53, 56, .08)
}

.graphic-grid img:first-child {
  height: 100%;
  min-height: 330px
}

.locations {
  max-width: none;
  background: var(--cream)
}


.contact {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 4rem;
  align-items: stretch
}

.contact>div {
  padding: 1rem 0
}

.contact aside {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--ink), #174c50);
  color: #edf6f5;
  padding: 3.6rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow)
}

.contact aside:after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  right: -85px;
  bottom: -85px
}

.contact aside h3 {
  color: white
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.contact-links a {
  display: flex;
  align-items: center;
  gap: 0.85rem;

  color: var(--teal);
  text-decoration: none;

  font-size: 1.1rem;
  font-weight: 600;

  transition: color 0.25s ease, transform 0.2s ease;
}

.contact-links a:hover {
  color: #0A66C2;
  transform: translateX(4px);
  text-decoration: none;
}

.contact-links svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.contact-links span {
  line-height: 1.4;
}

.site-footer {
  padding: 2.4rem max(5vw, 24px);
  background: #06282c;
  color: #dbe9e7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap
}

.site-footer p {
  margin: .25rem 0
}

.site-footer a {
  color: #bfe7e4;
  text-decoration: none
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #fff;
  text-decoration: underline
}

.footer-credit {
  text-align: right
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease
}

.reveal.visible {
  opacity: 1;
  transform: none
}

@media(max-width:1000px) {
  .site-header {
    height: 84px
  }

  .brand span {
    font-size: 1.55rem
  }

  .menu {
    display: block
  }

  .site-header nav {
    display: none;
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 5vw;
    background: #fff;
    box-shadow: 0 20px 35px rgba(0, 0, 0, .08)
  }

  .site-header nav.open {
    display: flex
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0
  }

  .hero-copy {
    padding: 6rem 6vw 4rem
  }

  .hero img {
    height: 620px;
    clip-path: none
  }

  .principles {
    margin: 0;
    border-radius: 0;
    grid-template-columns: 1fr
  }

  .about-grid,
  .service-card,
  .contact {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .detail-columns,
  .location-grid {
    grid-template-columns: 1fr
  }

  .service-card.reverse img {
    order: 0
  }

  .graphic-grid {
    grid-template-columns: 1fr 1fr
  }

  .graphic-grid img:first-child {
    grid-column: 1/-1
  }

  .section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media(max-width:620px) {
  h1 {
    font-size: 3.45rem
  }

  .hero-copy {
    padding-top: 4.5rem
  }

  .hero img {
    height: 440px
  }

  .actions {
    flex-direction: column
  }

  .button {
    width: 100%
  }

  .section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .detail-columns article,
  .publications,
  .service-card,
  .contact aside {
    padding: 1.6rem
  }

  .graphic-grid {
    grid-template-columns: 1fr
  }

  .graphic-grid img:first-child {
    grid-column: auto
  }

  .graphic-grid img {
    height: auto
  }

  .location-grid iframe,
  .private-map {
    width: calc(100% + 4rem)
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem
  }

  .footer-credit {
    text-align: left
  }
}

/* Version 7: full, uncropped hero portrait */
.hero {
  grid-template-columns: minmax(430px, .82fr) minmax(560px, 1.18fr);
  min-height: 720px;
}

.hero-portrait {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 2.2vw, 2.75rem);
  background: linear-gradient(145deg, #e7eeea 0%, #f8f4ed 100%);
  overflow: hidden;
}

.hero-portrait img {
  width: 100%;
  height: auto;
  max-height: 680px;
  object-fit: contain;
  object-position: center;
  clip-path: none;
  border-radius: 24px;
  box-shadow: 0 26px 70px rgba(11, 48, 52, .16);
}

@media(max-width:1000px) {
  .hero {
    grid-template-columns: 1fr
  }

  .hero-portrait {
    padding: 1.5rem 5vw 3rem
  }

  .hero-portrait img {
    width: min(100%, 900px);
    height: auto;
    max-height: none
  }
}

@media(max-width:620px) {
  .hero-portrait {
    padding: 1rem 18px 2.25rem
  }

  .hero-portrait img {
    width: 100%;
    height: auto;
    border-radius: 18px
  }
}

/* ==========================================================================
   FINAL LOCATION SECTION REFINEMENTS
   --------------------------------------------------------------------------
   These rules intentionally appear at the end of the stylesheet so they
   override earlier location styles without changing any HTML wording.
   They centre the section, balance both office columns, and present the
   existing map and photographs in a consistent two-column gallery.
   ========================================================================== */

/* Keep the entire Locations section visually centred within the page. */
.locations {
  max-width: none;
  background: var(--cream);
}

/* Centre the Locations heading and constrain it to the main content width. */
.locations-heading {
  max-width: var(--max);
  margin: 0 auto 3rem;
  text-align: center;
}

/* The eyebrow is retained in the HTML but hidden to avoid repeating
   the word "Locations" immediately above the main heading. */
.locations-heading .eyebrow {
  display: none;
}

/* Two balanced office columns on desktop. */
.location-copy {
  width: min(100%, var(--max));
  margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

/* Allow the secondary office column to stretch to the same height. */
.location-office-stack {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Present each office as a restrained, professional information panel. */
.location-office {
  height: 100%;
  padding: clamp(1.8rem, 3vw, 2.5rem);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(217, 227, 223, .95);
  border-radius: 22px;
  box-shadow: 0 16px 44px rgba(49, 64, 60, .07);
}

/* Keep the first office panel visually consistent with the second. */
.location-office-primary {
  display: flex;
  flex-direction: column;
}

/* Office label styling. */
.office-label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0 0 1rem;
  padding: .38rem .85rem;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

/* Office heading and supporting text spacing. */
.location-office h3 {
  margin: 0 0 .8rem;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
}

.location-office h4 {
  margin: 1.5rem 0 .55rem;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink);
}

.location-office p {
  margin: .2rem 0 .75rem;
}

/* Preserve the original transport wording while improving readability. */
.transport-list {
  margin: .4rem 0 0;
  padding-left: 1.2rem;
  line-height: 1.65;
}

.transport-list li {
  margin: .55rem 0;
}

/* Keep the original map heading aligned with the office content. */
.map-title {
  margin-top: auto !important;
  padding-top: 1.5rem;
}

/* Existing map and photographs displayed as a balanced two-column gallery. */
.location-gallery {
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Consistent presentation for every existing location image. */
.location-gallery figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 456 / 298;
  background: #fff;
  border: 1px solid rgba(217, 227, 223, .9);
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(15, 53, 56, .09);
}

.location-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

/* Subtle hover treatment without changing image proportions. */
.location-gallery figure:hover img {
  transform: scale(1.025);
}

/* Optional captions remain neat if they are added in the HTML later. */
.location-gallery figcaption {
  padding: .8rem 1rem;
  color: var(--muted);
  font-size: .85rem;
}

/* ==========================================================================
   CONTACT LINK COLOUR CONSISTENCY
   --------------------------------------------------------------------------
   Keeps email, phone and LinkedIn links in the same green/teal colour.
   ========================================================================== */

.contact-links a:hover,
.contact-links a:focus-visible {
  color: var(--teal);
  transform: translateX(4px);
  text-decoration: none;
}

/* Ensure all inline SVG icons inherit the same colour as their link text. */
.contact-links svg {
  fill: currentColor;
}

/* ==========================================================================
   RESPONSIVE LOCATION LAYOUT
   ========================================================================== */

@media (max-width: 1000px) {

  /* Stack the office panels on tablets and smaller screens. */
  .location-copy {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Keep the gallery in two columns where space still permits. */
  .location-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .map-title {
    margin-top: 1.5rem !important;
    padding-top: 0;
  }
}

@media (max-width: 620px) {

  /* Use a single-column gallery on mobile for comfortable image sizing. */
  .location-gallery {
    grid-template-columns: 1fr;
  }

  .location-office {
    padding: 1.5rem;
  }

  .location-gallery figure {
    aspect-ratio: 1.52 / 1;
  }
}

/* ==========================================================================
   SERVICE IMAGE PRESENTATION — THERAPY, CONSULTANCY AND TRAINING
   --------------------------------------------------------------------------
   Gives all three service photographs the same refined vertical treatment.
   Images align with the service headings, fill the available card height,
   and use only a very subtle edge feather so the effect remains calm.
   ========================================================================== */

/* Align all service-card content from the top rather than vertically centring. */
.service-card {
  align-items: stretch;
}

/* Keep each image in a predictable, full-height column. */
.service-image {
  min-width: 0;
  display: flex;
  align-items: stretch;
}

/* Shared image treatment for all service photographs. */
.service-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;

  -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, .75) 3%,
      #000 8%,
      #000 92%,
      rgba(0, 0, 0, .75) 97%,
      transparent 100%);

  mask-image: linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, .75) 3%,
      #000 8%,
      #000 92%,
      rgba(0, 0, 0, .75) 97%,
      transparent 100%);
}

/* Therapy image remains slightly taller because of the longer copy. */
.service-card:first-of-type .service-image img {
  min-height: 620px;
}

/* In reverse cards, move the whole image wrapper—not just the image. */
.service-card.reverse .service-image {
  order: -1;
}

/* Tablet: stack cards and preserve a portrait-oriented image area. */
@media (max-width: 1000px) {
  .service-card {
    align-items: start;
  }

  .service-card.reverse .service-image {
    order: 0;
  }

  .service-image {
    width: 100%;
    justify-content: center;
  }

  .service-image img,
  .service-card:first-of-type .service-image img {
    width: min(100%, 560px);
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
}

/* Mobile: use the full card width and slightly tighter corner radius. */
@media (max-width: 620px) {

  .service-image img,
  .service-card:first-of-type .service-image img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
  }
}


/* ==========================================================================
   FINAL LOCATION MAP ALIGNMENT
   --------------------------------------------------------------------------
   Keeps both office cards equal in height, aligns both map headings on the
   same horizontal line, and forces both maps to use identical proportions.
   These rules are intentionally placed last so they override older location
   declarations elsewhere in this stylesheet.
   ========================================================================== */

/* Equal-height two-column layout on desktop. */
.location-copy {
  width: min(100%, var(--max));
  margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

/* Ensure both office columns and cards fill the same available height. */
.location-office-stack,
.location-office-primary,
.location-office {
  height: 100%;
}

/* Use a vertical flex layout so each map can be pinned to the card bottom. */
.location-office {
  display: flex;
  flex-direction: column;
  min-height: 760px;
}

/* Push each map title to the same vertical position. */
.map-title {
  margin-top: auto !important;
  padding-top: 1.75rem;
  margin-bottom: .75rem;
}

/* Identical responsive map containers. */
.office-map {
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #fff;
  border: 1px solid rgba(217, 227, 223, .9);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15, 53, 56, .08);
}

/* Force both source images to fill the same dimensions. */
.office-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Tablet and mobile: cards stack, so fixed equal height is no longer needed. */
@media (max-width: 1000px) {
  .location-copy {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .location-office {
    min-height: 0;
  }

  .map-title {
    margin-top: 1.5rem !important;
    padding-top: 0;
  }
}

@media (max-width: 620px) {
  .office-map {
    aspect-ratio: 16 / 10;
    border-radius: 14px;
  }
}


/* ==========================================================================
   FINAL SERVICE IMAGE EDGE FADE
   --------------------------------------------------------------------------
   Applies the same restrained horizontal feather to the Therapy, Consultancy
   and Training images. Placed last to override earlier image-mask rules.
   ========================================================================== */

.service-card img[src$="consultancy.png"],
.service-card img[src$="conference-seating.png"] {

  -webkit-mask-image: linear-gradient(
      to right,
      rgba(0,0,0,0.25) 0%,
      #000 2%,
      #000 98%,
      rgba(0,0,0,0.25) 100%
  );

  mask-image: linear-gradient(
      to right,
      rgba(0,0,0,0.25) 0%,
      #000 2%,
      #000 98%,
      rgba(0,0,0,0.25) 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Slightly reduce the fade on smaller screens so the image remains clear. */
@media (max-width:620px) {

  .service-card img[src$="consultancy.png"],
  .service-card img[src$="conference-seating.png"] {

    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0,0,0,.15) 0%,
        #000 1%,
        #000 99%,
        rgba(0,0,0,.15) 100%
    );

    mask-image: linear-gradient(
        to right,
        rgba(0,0,0,.15) 0%,
        #000 1%,
        #000 99%,
        rgba(0,0,0,.15) 100%
    );
  }
}


/* ==========================================================================
   ONLINE BOOKINGS
   ========================================================================== */

.bookings {
  max-width: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(49, 127, 130, .12), transparent 30%),
    linear-gradient(180deg, #edf4f1 0%, #f8f5ef 100%);
}

.booking-shell {
  width: min(100%, var(--max));
  margin: 0 auto;
}

.booking-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

.booking-intro h2 {
  margin-bottom: .35rem;
}

.booking-lead {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
}

.booking-badge {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(217, 227, 223, .95);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(15, 53, 56, .08);
  color: var(--ink);
}

.booking-badge svg {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  fill: var(--teal);
}

.booking-badge span {
  display: flex;
  flex-direction: column;
  font-size: .86rem;
  line-height: 1.35;
}

.booking-badge strong {
  font-size: .98rem;
}

.booking-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 14px 38px rgba(15, 53, 56, .07);
}

.booking-features div {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  background: rgba(255, 255, 255, .92);
}

.booking-features span {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.booking-features p {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.booking-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  overflow: hidden;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(217, 227, 223, .95);
  border-radius: 26px;
  box-shadow: 0 28px 80px rgba(11, 48, 52, .13);
}

.booking-frame::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--ink), var(--teal), #83aaa4);
}

.booking-frame iframe {
  display: block;
  width: 100%;
  min-height: 1000px;
  border: 0;
  border-radius: 18px;
  background: #fff;
}

.booking-help {
  margin: 1.5rem 0 0;
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
}

.booking-help a {
  color: var(--teal);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.booking-help a:hover,
.booking-help a:focus-visible {
  color: var(--ink);
}

/* Tablet */

@media (max-width: 1000px) {
  .booking-intro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
  }

  .booking-badge {
    width: fit-content;
  }

  .booking-features {
    grid-template-columns: 1fr;
  }
}

/* Mobile */

@media (max-width: 620px) {
  .booking-frame {
    padding: .45rem;
    border-radius: 18px;
  }

  .booking-frame iframe {
    border-radius: 14px;
  }

  .booking-badge {
    width: 100%;
  }

  .booking-features div {
    padding: 1rem;
  }
}

/* ==========================================================================
   FINAL PRODUCTION OVERRIDES
   ========================================================================== */

body {
  font-size: 21px;
  line-height: 1.85;
}

/* General body copy */

p,
li,
.service-card p,
.service-card li,
.contact p,
.location-office p,
.location-office li,
.booking-lead {
  font-size: 1.18rem;
  line-height: 1.9;
}

/* Navigation */

.site-header nav a {
  font-size: 1.03rem;
  font-weight: 700;
}

/* Hero */

.hero .lead {
  font-size: 1.32rem;
  line-height: 1.9;
}

/* Cards */

.booking-features p {
  font-size: 1.08rem;
}

.booking-help {
  font-size: 1.08rem;
}

.publications li {
  font-size: 1.08rem;
}

.transport-list li {
  font-size: 1.08rem;
}

.contact-links a {
  font-size: 1.18rem;
}

.office-label {
  font-size: 1rem;
}

.eyebrow {
  font-size: 1rem;
  letter-spacing: .22em;
}

.footer-credit {
  width: 100%;
  text-align: center;
  font-size: 1rem;
}

.site-footer {
  justify-content: center;
}

/* Tablet */

@media (max-width:1000px) {

  body {
    font-size: 20px;
  }

  p,
  li,
  .service-card p,
  .service-card li,
  .contact p,
  .location-office p,
  .location-office li,
  .booking-lead {
    font-size: 1.12rem;
  }

  .hero .lead {
    font-size: 1.22rem;
  }
}

/* Mobile */

@media (max-width:620px) {

  body {
    font-size: 19px;
    line-height: 1.8;
  }

  p,
  li,
  .service-card p,
  .service-card li,
  .contact p,
  .location-office p,
  .location-office li,
  .booking-lead {
    font-size: 1.05rem;
    line-height: 1.8;
  }

  .hero .lead {
    font-size: 1.1rem;
  }

  .site-header nav a {
    font-size: 1.08rem;
  }
}


/* ==========================================================
   Restore colours on dark panels
   ========================================================== */

.publications,
.publications * {
    color: #edf7f5;
}

.contact aside,
.contact aside * {
    color: #edf7f5;
}

.contact aside h3 {
    color: #ffffff;
}

.contact aside a {
    color: #bdebe5;
}

.contact aside a:hover {
    color: #ffffff;
}


/* ==========================================================================
   FINAL CHANGE IMAGE FIX
   --------------------------------------------------------------------------
   Ensures the complete change.png artwork is always visible. This override
   removes earlier fixed heights, forced portrait ratios and object-fit: cover
   rules that were cropping the final "E" in CHANGE.
   ========================================================================== */

.service-card:first-of-type {
  grid-template-columns: 1.12fr .88fr;
  align-items: start;
}

.service-card:first-of-type .service-image {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.service-card:first-of-type .service-image img,
.service-card img[src$="change.png"] {
  display: block;
  width: 92%;
  max-width: 540px;
  height: auto;
  max-height: none;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  align-self: flex-start;
  justify-self: center;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 20px;
}

/* Slightly stronger edge fade while preserving the full artwork. */
.service-card:first-of-type .service-image img,
.service-card img[src$="change.png"] {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, .45) 2%,
    #000 5%,
    #000 95%,
    rgba(0, 0, 0, .45) 98%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, .45) 2%,
    #000 5%,
    #000 95%,
    rgba(0, 0, 0, .45) 98%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@media (max-width: 1000px) {
  .service-card:first-of-type {
    grid-template-columns: 1fr;
  }

  .service-card:first-of-type .service-image img,
  .service-card img[src$="change.png"] {
    width: min(100%, 520px);
    max-width: 520px;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: contain;
  }
}

@media (max-width: 620px) {
  .service-card:first-of-type .service-image img,
  .service-card img[src$="change.png"] {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 16px;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ==========================================================================
   FOOTER — FINAL CONTRAST AND ALIGNMENT
   ========================================================================== */

.site-footer {
  justify-content: center;
  background: #06282c;
  color: #ffffff;
}

.site-footer p,
.site-footer .footer-credit {
  width: 100%;
  margin: 0;
  color: #ffffff;
  opacity: 1;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
}

.site-footer a {
  color: #bfe7e4;
  font-weight: 700;
  opacity: 1;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}