/* ==========================================================================
   23 Brand Works — Global styles
   ========================================================================== */

:root {
  --bg: #0b0d11;
  --blue: #0d4bcc;
  --blue-cta: #003ce8;
  --line: #5a5a5a;
  --white: #ffffff;
  --font: 'Red Hat Display', Arial, sans-serif;

  --header-w: 900px;
  --header-h: 70px;
  --container-w: 1250px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  overflow-x: hidden;
}

/* Held on while the hero intro video is still playing (see main.js) so
   visitors can't scroll past it mid-animation. */
body.intro-lock {
  overflow: hidden;
  height: 100vh;
}

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

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

.section-title {
  text-align: center;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 35px);
  margin: 0 0 60px;
}

.section-title--left { text-align: left; }

.section {
  position: relative;
  /* 75px + 75px between adjacent sections = 150px gap. */
  padding: 75px 24px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Scroll-reveal: only takes effect once JS confirms it's running (see
   main.js) so the page still shows everything if JS fails to load.
   .site-footer is intentionally left out — it just appears normally,
   no fade/slide-in. */
body.reveal-ready .section {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

body.reveal-ready .section.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   HERO / INTRO
   ========================================================================== */

.hero {
  position: relative;
  /* Back to 100vh — this controls where the hero content/arrow sit and
     where the next section begins. It's independent from .hero-bg's own
     sizing below, so the background can render uncropped without moving
     any of that. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* visible (not hidden): .hero-bg is sized to the image's own 1920x1500
     ratio, which is taller than 100vh at most widths, so it needs to be
     able to extend past the hero box's bottom edge without being clipped. */
  overflow: visible;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  /* Sized to the background's own 1920x1500 ratio (not inset:0 / the
     hero's height) so the full image renders with zero cropping,
     regardless of how tall .hero itself is. */
  width: 100%;
  aspect-ratio: 1920 / 1500;
  height: auto;
  z-index: -2;
  overflow: hidden;
  background: #05070a;
}

.hero-bg-video,
.hero-bg-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: opacity 0.6s ease;
}

.hero-bg-frame { opacity: 0; }

.hero-bg.is-loaded .hero-bg-frame { opacity: 1; }
.hero-bg.is-loaded .hero-bg-video { opacity: 0; }

.hero-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 1900px;
  max-width: none;
  height: auto;
  z-index: -1;
  pointer-events: none;
  /* Starts invisible; main.js drives this toward 1 as the intro video
     approaches its end (see the 'timeupdate' listener there). */
  opacity: 0;
  transition: opacity 0.25s linear;
}

/* Header
   Deliberately centered via left:0;right:0;margin:auto (which re-centers
   correctly even after max-width clamps the box down) and slid in via
   the `top` property, rather than the more obvious left:50% + transform
   translate() approach — a CSS transform on this element would make it
   a new containing block for any position:fixed descendant (the mobile
   full-screen nav overlay lives inside it), which would then size/
   position itself against this small pill instead of the real viewport. */
.site-header {
  --header-rest-top: 50px;
  position: fixed;
  top: calc(var(--header-rest-top) - 140px);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: var(--header-w);
  max-width: calc(100% - 32px);
  height: var(--header-h);
  z-index: 100;
  padding: 0 28px;
  transition: top 1s cubic-bezier(.19,1,.22,1);
}

.site-header.is-in {
  top: var(--header-rest-top);
}

/* Background box only — this is the piece that dims to 50% and brightens
   on hover. Nav text/logo live above it and always stay fully opaque. */
.site-header-bg {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(to right, var(--blue), #000000);
  opacity: 0.5;
  z-index: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.site-header:hover .site-header-bg {
  opacity: 1;
}

.header-logo img {
  width: 75px;
  height: auto;
}

.header-nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

/* display:contents makes this wrapper invisible to layout on desktop, so
   its children (the links) act as direct flex children of .header-nav —
   the space-between gaps stay identical to before this was introduced.
   The mobile media query below turns it into a real dropdown panel. */
.header-links {
  display: contents;
}

.header-nav a {
  color: var(--white);
  opacity: 1;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  transition: font-weight .15s ease;
}

.header-nav a:hover {
  font-weight: 800;
}

/* Hamburger toggle — hidden on desktop, shown only in the mobile
   breakpoint below. */
.header-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.header-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.header-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.header-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.header-cta {
  background: var(--white);
  color: var(--blue-cta) !important;
  width: 150px;
  height: 25px;
  border-radius: 7px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 600 !important;
  text-align: center;
}

.header-cta:hover {
  font-weight: 800 !important;
}

/* WhatsApp fixed button */
.whatsapp-fixed {
  position: fixed;
  right: 0;
  top: 55%;
  transform: translateY(-50%);
  background: #25D366;
  color: #05230f;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: 10px 0 0 10px;
  z-index: 90;
  transition: padding 0.3s ease, background-color 0.5s ease;
}

.whatsapp-fixed:hover {
  background: #ffffff;
}

.whatsapp-fixed svg { width: 22px; height: 22px; flex-shrink: 0; }

.whatsapp-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  margin-top: 40px;
}

.hero-title {
  font-size: clamp(42px, 10vw, 150px);
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
  color: var(--white);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease .15s, transform 1s ease .15s;
}

.hero-subtitle {
  font-size: clamp(20px, 4vw, 60px);
  font-weight: 300;
  font-style: italic;
  margin: 8px 0 0;
  color: var(--white);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease .35s, transform 1s ease .35s;
}

.hero-content.is-in .hero-title,
.hero-content.is-in .hero-subtitle {
  opacity: 1;
  transform: translateY(0);
}

.scroll-indicator {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: .02em;
  cursor: pointer;
  opacity: 0;
  transition: opacity 1s ease .6s;
  z-index: 2;
}

.scroll-indicator.is-in { opacity: 0.85; }
.scroll-indicator:hover { opacity: 1; }

.scroll-indicator svg {
  width: 22px;
  height: 22px;
  animation: bob 1.6s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* ==========================================================================
   HİZMETLERİMİZ
   ========================================================================== */

.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

.service-card {
  position: relative;
  /* Permanent (not just on :hover) so this card's z-indexed children never
     toggle in and out of the shared root stacking context — that toggling
     is what was making unrelated glows elsewhere flicker/disappear. */
  isolation: isolate;
  width: 340px;
  max-width: 100%;
  height: 225px;
  transition: transform 0.5s ease;
}

.service-card:hover {
  transform: translateY(-4px);
}

/* Background square only — this dims to 50% and brightens on hover.
   Titles/descriptions live in .service-card-content and always stay
   fully opaque. */
.service-card-bg {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(to bottom, var(--blue), #000000);
  opacity: 0.35;
  transition: opacity 0.5s ease;
  z-index: 0;
  pointer-events: none;
}

.service-card:hover .service-card-bg {
  opacity: 1;
}

.service-card-content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.service-card h3 {
  font-size: clamp(29px, 2vw, 34px);
  font-weight: 700;
  margin: 0;
  line-height: 1.15;
}

.service-card p {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   HAKKIMIZDA
   ========================================================================== */

/* Isolates this section's own stacking context so .about-glow's z-index:-1
   only has to compete with .about's own children — it stays contained here
   instead of escaping to the shared root context, where an unrelated hover
   transform anywhere else on the page (which creates its own new stacking
   context) could otherwise cause the browser to momentarily mis-paint it. */
.about {
  isolation: isolate;
}

/* Pinned to the actual page/viewport left edge (not just the section's own
   centered box) so the full image is visible, not bled off and clipped.
   calc(50% - 50vw) is the standard "break out of a centered container"
   idiom: it resolves to exactly -(the section's own side margin). */
.about-glow {
  position: absolute;
  left: calc(50% - 50vw);
  top: 50%;
  transform: translateY(-50%);
  width: 1100px;
  max-width: none;
  height: auto;
  z-index: -1;
  pointer-events: none;
}

.about-inner {
  display: flex;
  align-items: center;
  gap: 80px;
  flex-wrap: wrap;
}

.about-logo {
  position: relative;
  flex: 0 0 320px;
  max-width: 100%;
}

.about-text { flex: 1 1 480px; }

.about-text p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  margin: 0 0 20px;
  color: var(--white);
}

/* ==========================================================================
   REFERANSLAR
   ========================================================================== */

.referanslar { overflow: hidden; }

.logo-carousel {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 12%, black 88%, transparent 100%);
}

.logo-track {
  display: flex;
  align-items: center;
  gap: 90px;
  width: max-content;
  animation: scroll-left 32s linear infinite;
}

.logo-track img {
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   23 NEDİR
   ========================================================================== */

/* Isolated stacking context (see .about above) so .what-glow's z-index:-1
   stays contained here instead of escaping to the shared root context.
   overflow stays visible (unlike a plain .section) so the glow can still
   bleed past the section's own 1400px box toward the viewport edge. */
.what-is-23 {
  isolation: isolate;
}

/* Large ambient glow bleeding off the right edge, as in the reference. */
.what-glow {
  position: absolute;
  right: -300px;
  top: 50%;
  transform: translateY(-50%);
  width: 1100px;
  max-width: none;
  height: auto;
  z-index: -1;
  pointer-events: none;
}

.what-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.what-number {
  flex: 0 0 auto;
  width: clamp(90px, 12vw, 180px);
}

.what-text {
  flex: 1 1 560px;
  max-width: 620px;
  text-align: center;
}

.what-text .section-title { margin-bottom: 24px; }

.what-text p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  margin: 0 0 16px;
}

.what-signoff {
  font-weight: 700;
  font-style: italic;
  font-size: 20px !important;
  margin-top: 24px !important;
}

/* ==========================================================================
   BLOG
   ========================================================================== */

.blog-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-bottom: 56px;
}

.blog-card {
  position: relative;
  /* Permanent (not just on :hover) so this card's z-indexed children never
     toggle in and out of the shared root stacking context — that toggling
     is what was making unrelated glows elsewhere flicker/disappear. */
  isolation: isolate;
  width: 360px;
  max-width: 100%;
  min-height: 400px;
  transition: transform 0.5s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
}

/* Background square only — this dims to 50% and brightens on hover.
   Image, text and buttons live in .blog-card-content and always stay
   fully opaque. */
.blog-card-bg {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(45deg, #000000 0%, var(--blue) 100%);
  opacity: 0.35;
  transition: opacity 0.5s ease;
  z-index: 0;
  pointer-events: none;
}

.blog-card:hover .blog-card-bg {
  opacity: 1;
}

.blog-card-content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.blog-card .blog-cover {
  width: 100%;
  height: 170px;
  border-radius: 10px;
  overflow: hidden;
}

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

.blog-card h3 {
  font-size: clamp(29px, 2vw, 34px);
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  color: var(--white);
}

.blog-card p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
  flex: 1;
  color: var(--white);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 40px;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.5s ease, color 0.5s ease;
}

.btn--fill {
  background: var(--blue);
  color: var(--white);
}

.btn--fill:hover {
  background: var(--white);
  color: var(--blue);
}

.btn--outline {
  background: var(--white);
  color: var(--blue);
}

.btn--outline:hover {
  background: var(--blue);
  color: var(--white);
}

.blog-all-btn {
  display: flex;
  margin: 0 auto;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* Wraps blog + footer together. glow-4 is a plain CSS background-image
   here instead of a positioned/z-indexed element — backgrounds always
   paint behind an element's own children, no stacking context or
   z-index escape trickery required, so this can't get trapped in front
   of anything the way every earlier attempt did. */
.blog-footer-wrap {
  position: relative;
  background-image: url('../assets/img/glow/glow-footer.png');
  background-repeat: no-repeat;
  background-position: center bottom 275px;
  background-size: 1900px auto;
}

.site-footer {
  position: relative;
  isolation: isolate;
  min-height: 278px;
  padding: 48px 24px 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 50px;
}

.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-logo img { height: 44px; width: auto; }

.footer-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 400;
  flex-wrap: wrap;
}

.footer-contact .sep { opacity: 0.5; }

.footer-social {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-social a {
  position: relative;
  isolation: isolate;
  color: var(--white);
  display: flex;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social a:hover {
  color: var(--blue);
  transform: translateY(-3px);
}

.footer-social svg { width: 20px; height: 20px; }

.footer-copy {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 300;
  opacity: 0.7;
  margin: 0;
}

/* ==========================================================================
   GÖRÜŞME PLANLA (booking page)
   ========================================================================== */

/* Compact title banner — deliberately NOT the homepage's 100vh .hero.
   The fixed header floats over the top of this (it's position:fixed, so
   it doesn't take up flow space), hence the generous top padding to clear
   it before the title appears. */
.page-hero {
  position: relative;
  padding: 160px 24px 0;
  text-align: center;
  /* overflow left visible (unlike a plain .hero) so .page-hero-glow can
     keep fading out naturally past this short section's own height,
     continuing the ambient glow down toward the form card instead of
     getting hard-clipped at the section's bottom edge. */
  isolation: isolate;
}

.page-hero-glow {
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  max-width: none;
  height: auto;
  z-index: -1;
  pointer-events: none;
}

.page-title {
  position: relative;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin: 0;
}

/* Wider than the shared .section's 1400px so the 1415px card (plus the
   section's own 24px side padding) fits at exactly its target width
   instead of being squeezed down to ~1352px. */
.section.booking {
  max-width: 1463px;
}

/* 1415 x 630, exactly per spec. width:100% + max-width keeps it from
   overflowing narrower viewports without changing the target size. */
.booking-card {
  position: relative;
  width: 100%;
  max-width: 1415px;
  min-height: 630px;
  margin: 0 auto;
}

/* Background/border live on their own layer at 50% opacity so the form
   text/inputs (a sibling, full opacity) aren't dimmed along with it —
   same pattern as .service-card-bg / .blog-card-bg elsewhere. */
.booking-card-bg {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid #5a5a5a;
  background: linear-gradient(to bottom, #0d4bcc, #000000);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

/* Fixed 1308px content width so the two-column rows split into exactly
   642px each (1308 - 24px gap) / 2 — matches the spec without hardcoding
   642px directly. Padding top/bottom is what makes the card add up to
   630px tall (630 - the fields/gaps/button below = 53px each side). */
.booking-form {
  position: relative;
  z-index: 1;
  width: 1308px;
  max-width: 100%;
  margin: 0 auto;
  padding: 53px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: flex;
  gap: 24px;
}

.form-row .form-field { flex: 1; }

.form-field input {
  height: 56px;
  padding: 0 20px;
}

.form-field textarea {
  height: 160px;
  padding: 16px 20px;
  resize: none;
}

.form-field input,
.form-field textarea {
  width: 100%;
  display: block;
  background-color: rgba(11, 13, 17, 0.5);
  border: 1px solid rgba(90, 90, 90, 0.5);
  border-radius: 10px;
  font-family: var(--font);
  font-weight: 300;
  font-size: 15px;
  color: #5d85de;
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #5d85de;
  opacity: 1;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  background-color: rgba(11, 13, 17, 1);
  border-color: rgba(90, 90, 90, 1);
}

.services-select {
  position: relative;
}

.services-select-toggle {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: rgba(11, 13, 17, 0.5);
  border: 1px solid rgba(90, 90, 90, 0.5);
  border-radius: 10px;
  padding: 0 20px;
  font-family: var(--font);
  font-weight: 300;
  font-size: 15px;
  color: #5d85de;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

.services-select.is-open .services-select-toggle,
.services-select-toggle:focus {
  outline: none;
  background-color: rgba(11, 13, 17, 1);
  border-color: rgba(90, 90, 90, 1);
}

.services-select-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.services-select.is-open .services-select-chevron {
  transform: rotate(180deg);
}

.services-select-dropdown {
  display: none;
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
}

.services-select.is-open .services-select-dropdown {
  display: block;
}

.services-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--white);
  font-weight: 300;
  font-size: 14px;
  cursor: pointer;
}

.services-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.services-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}

.submit-btn {
  align-self: flex-start;
}

.form-success {
  color: var(--white);
  font-size: 15px;
  font-weight: 300;
  margin: 0;
}

.form-error {
  color: #ff7a7a;
  font-size: 15px;
  font-weight: 300;
  margin: 0;
}

.form-field input.is-invalid,
.form-field textarea.is-invalid,
.services-select.is-invalid .services-select-toggle {
  border-color: #ff7a7a;
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   BLOG POST (detail page)
   ========================================================================== */

.blog-post-cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

.blog-post-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  margin: 40px 0 24px;
}

.blog-post-body p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--white);
  margin: 0 0 20px;
}

.blog-post-body h3 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  margin: 40px 0 16px;
}

.blog-post-body strong {
  font-weight: 700;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .about-inner { text-align: center; justify-content: center; }
  .about-logo { flex: 0 0 220px; }
  .what-inner { flex-direction: column; }
  .what-number { display: none; }
  .section { padding: 75px 20px; }
  .form-row { flex-direction: column; }
  .booking-form { padding: 24px; }

}

/* Hamburger breakpoint: below this, 7 flex items (logo + 5 links + CTA)
   can no longer fit in one row at any readable font-size, so the links
   collapse into a dropdown instead of just shrinking further. */
@media (max-width: 760px) {
  /* Reference mobile layout has no visible header pill/box — just the
     logo and hamburger floating directly on the page background. */
  .site-header {
    --header-rest-top: 28px;
    left: 28px;
    right: 28px;
    margin: 0;
    width: auto;
    max-width: none;
    padding: 0;
  }

  .site-header-bg { display: none; }

  .header-logo img { width: 66px; height: auto; }

  .about-logo { flex: 0 0 170px; }

  .header-menu-toggle {
    display: flex;
    position: relative;
    z-index: 101;
    width: 30px;
    height: 30px;
    gap: 7px;
  }

  .header-menu-toggle span { width: 28px; height: 3px; }

  .header-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .header-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

  /* Intro/hero background: on desktop this is capped to the image's own
     1920x1500 aspect ratio so nothing is cropped; on a tall phone
     viewport that leaves a big blank strip below it. Below this
     breakpoint it fills the full hero height instead, and the existing
     object-fit:cover on the video/frame keeps it centered and uncropped
     the way the reference screenshot shows. */
  .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .hero-bg-video,
  .hero-bg-frame {
    object-position: center center;
  }

  /* Circular icon-only WhatsApp button pinned bottom-right, matching the
     reference — only applies at this breakpoint, desktop keeps the
     vertical side tab with the text label. */
  .whatsapp-fixed {
    top: auto;
    bottom: 24px;
    right: 20px;
    transform: none;
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }

  .whatsapp-label { display: none; }

  .whatsapp-fixed svg { width: 26px; height: 26px; }

  body.menu-open { overflow: hidden; }

  /* Full-screen overlay menu. Sits behind the header pill (z-index 100 on
     .site-header) so the logo (top-left) and the hamburger/X toggle
     (top-right) both stay pinned above it while it's open. Uses
     opacity/visibility rather than display:none so it can transition
     smoothly in and out instead of snapping. */
  .header-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, var(--blue) 0%, #05070a 65%);
    z-index: 95;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-16px);
    transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
  }

  .header-links.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s ease, visibility 0s linear 0s;
  }

  .header-links a {
    font-size: 24px;
    font-weight: 500;
    padding: 6px 10px;
    text-align: center;
    border-radius: 8px;
  }

  .header-links a:hover { font-weight: 800; }

  .header-cta {
    width: auto !important;
    height: 56px !important;
    padding: 0 36px !important;
    margin-top: 10px;
    white-space: nowrap;
  }

  /* .section-title--left is meant for the desktop two-column layout
     where the logo sits beside the text; once they stack on mobile
     (see .about-inner below) a left-aligned heading over centered body
     text looks lopsided, so both are centered here. */
  .about-text,
  .about-text .section-title--left {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .service-card {
    height: auto;
    min-height: 190px;
  }

  .service-card h3 { font-size: 22px; }

  .blog-card h3 { font-size: 22px; }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

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

  .page-hero { padding-top: 130px; }

  .booking-card-bg,
  .booking-card { min-height: 0; }

  .services-select-dropdown {
    max-height: 260px;
    overflow-y: auto;
  }
}