/* ============================================================
   Amanda Flory Hairdressing — Custom overrides
   Loaded after assets/css/main.css. Scoped to nav + header.
   ============================================================ */

:root {
   --af-ink: #0f0f10;
   --af-paper: #fafaf8;
   --af-muted: #6d6d6d;
   --af-line: rgba(15, 15, 16, 0.08);
   --af-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

   /* --------------------------------------------------------
      SINGLE-FONT SYSTEM — Gotham everywhere.
      Liko ships with Marcellus serif + Big Shoulders condensed
      applied across ~235 CSS declarations. Override every font
      token so the entire site reads in one consistent Gotham
      family — hierarchy comes from weight + size + spacing.
      -------------------------------------------------------- */
   --tp-ff-heading: 'Gotham', sans-serif;
   --tp-ff-marcellus: 'Gotham', sans-serif;
   --tp-ff-shoulders: 'Gotham', sans-serif;
   --tp-ff-gallery: 'Gotham', sans-serif;
   --tp-ff-syne: 'Gotham', sans-serif;
   --tp-ff-aladin: 'Gotham', sans-serif;
   --tp-ff-dmsans: 'Gotham', sans-serif;
   --tp-ff-didoneright: 'Gotham', sans-serif;
}

/* Fallback for any <h1-h6> that inherits the now-overridden token */
h1, h2, h3, h4, h5, h6 {
   font-family: var(--tp-ff-body);
}

/* Paragraph weight — 200 is too thin in Gotham at medium sizes */
p {
   font-weight: 400;
}

/* ============================================================
   Liko component corrections (post font-token override)
   Some components were sized for Big Shoulders Display (very
   condensed); now that they use Gotham, sizes need toning down.
   ============================================================ */

/* Decorative "TESTIMONIALS" giant background text — was
   clipping and overlapping content. Hide it; let the testimonial
   body + nav arrows carry the section on their own. */
.tp-studio-testimonial-title-box {
   display: none !important;
}

/* Testimonial body — was 40px Big Shoulders 600. In Gotham that
   reads dense & bulky. Reduce and lighten for editorial feel. */
.tp-studio-testimonial-text p {
   font-size: clamp(20px, 1.7vw, 28px);
   font-weight: 400;
   line-height: 1.5;
   letter-spacing: -0.005em;
}
.tp-studio-testimonial-user-name {
   font-size: 16px;
   font-weight: 600;
   letter-spacing: 0.02em;
}

/* Video title over the hero reel — was styled for Big Shoulders */
.tp-video-title {
   letter-spacing: -0.01em;
   font-weight: 500;
}

/* Section titles — Liko default is 50px with aggressive -2.8px
   letter-spacing (designed for Marcellus). In Gotham that's too
   tight. Loosen and give responsive sizing. */
.tp-about-2-section-title {
   font-size: clamp(30px, 3.4vw, 48px);
   letter-spacing: -0.015em;
   line-height: 1.1;
}

/* Service block titles */
.tp-service-5-title {
   font-size: clamp(26px, 2.6vw, 38px);
   letter-spacing: -0.012em;
   line-height: 1.2;
}

/* Inner hero title used on the editorial service-details pages */
.sv-hero-title {
   font-size: clamp(32px, 3.6vw, 52px);
   letter-spacing: -0.02em;
   line-height: 1.05;
}

/* Cinematic project-panel titles (stockists spotlights, cuts specialist
   cross-links). Liko designed these at 300px for Marcellus — in Gotham
   with -12px letter-spacing, letters overlap. Scale and loosen. */
.tp-project-4-title {
   font-size: clamp(48px, 8vw, 140px) !important;
   letter-spacing: -0.025em !important;
   line-height: 1;
   font-weight: 500;
}

/* service-4-title on tp-service-5-item grid cards */
.tp-service-4-title-sm {
   font-size: clamp(20px, 1.6vw, 26px);
   letter-spacing: -0.01em;
   font-weight: 500;
   line-height: 1.15;
}

/* Contact form title on the black band */
.cn-contactform-2-title {
   font-size: clamp(26px, 2.6vw, 36px);
   letter-spacing: -0.015em;
   line-height: 1.15;
}

/* Service block title */
.sv-service-title {
   font-size: clamp(26px, 2.6vw, 38px);
   letter-spacing: -0.015em;
}

/* Masonry portfolio titles (bridal gallery) */
.pm-project-masonary-title {
   font-size: clamp(22px, 1.8vw, 28px);
   letter-spacing: -0.01em;
   font-weight: 500;
}

/* Big typographic "Get in Touch" band on bridal */
.sv-big-text {
   font-size: clamp(40px, 7vw, 120px) !important;
   letter-spacing: -0.025em !important;
   line-height: 1;
   font-weight: 500;
}

/* ============================================================
   DARK CONTEXT — text contrast restoration
   Liko defaults headings to black, so in any .black-bg section
   they disappear. Make them readable across every dark wrapper.
   ============================================================ */
.black-bg .tp-about-2-section-title,
.black-bg .sv-hero-title,
.black-bg .tp-service-5-title,
.black-bg .cn-contactform-2-title,
.black-bg .ab-inner-funfact-title,
.black-bg h1, .black-bg h2, .black-bg h3, .black-bg h4 {
   color: #fff;
}
.black-bg .tm-hero-subtitle,
.black-bg .ab-inner-subtitle {
   color: rgba(255, 255, 255, 0.62);
}
.black-bg .tm-hero-subtitle::after {
   background-color: rgba(255, 255, 255, 0.35);
}
.black-bg p {
   color: rgba(255, 255, 255, 0.72);
}
.black-bg .af-eyebrow { color: rgba(255, 255, 255, 0.62); }
.black-bg .af-eyebrow::before { background: rgba(255, 255, 255, 0.42); }

/* About page dark band — uppercase label spans ("UNWIND IN COMFORT",
   "LUXURY IN EVERY MOMENT") use no class, so they inherit default
   ink and vanish against .black-bg. Force white. */
.tp-about-2-area.black-bg .tp-about-2-content > span {
   color: #fff;
}

/* ============================================================
   Dark CTA band — refined editorial treatment
   Targets centred end-of-page invite sections across all
   service + content pages (#booking, #booking-info, etc.).
   Uses :has() to scope only to the centred-CTA pattern, so
   other .black-bg usages (awards band, stats bar) aren't touched.
   ============================================================ */
.tp-about-2-area.black-bg:has(> .container > .row.justify-content-center),
.tp-about-2-area.black-bg:has(> .container-1480 > .row.justify-content-center) {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   padding-top: clamp(90px, 11vw, 150px) !important;
   padding-bottom: clamp(90px, 11vw, 150px) !important;
}

/* Warm ambient glow — subtle salon warmth */
.tp-about-2-area.black-bg:has(> .container > .row.justify-content-center)::before,
.tp-about-2-area.black-bg:has(> .container-1480 > .row.justify-content-center)::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
      radial-gradient(55% 45% at 85% 12%, rgba(155, 123, 92, 0.16), transparent 70%),
      radial-gradient(60% 50% at 15% 88%, rgba(255, 255, 255, 0.045), transparent 70%);
   pointer-events: none;
   z-index: 0;
}

/* Top hairline separator */
.tp-about-2-area.black-bg:has(> .container > .row.justify-content-center)::after,
.tp-about-2-area.black-bg:has(> .container-1480 > .row.justify-content-center)::after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 1px;
   background: rgba(255, 255, 255, 0.07);
   pointer-events: none;
}

.tp-about-2-area.black-bg:has(> .container > .row.justify-content-center) > .container,
.tp-about-2-area.black-bg:has(> .container-1480 > .row.justify-content-center) > .container-1480 {
   position: relative;
   z-index: 1;
}

/* Constrain CTA typography widths — more readable + editorial */
.tp-about-2-area.black-bg:has(> .container > .row.justify-content-center) .tp-about-2-section-title,
.tp-about-2-area.black-bg:has(> .container-1480 > .row.justify-content-center) .tp-about-2-section-title {
   max-width: 18ch;
   margin-left: auto;
   margin-right: auto;
   font-size: clamp(28px, 3vw, 44px);
}
.tp-about-2-area.black-bg:has(> .container > .row.justify-content-center) p,
.tp-about-2-area.black-bg:has(> .container-1480 > .row.justify-content-center) p {
   max-width: 58ch;
   font-size: 15.5px;
   line-height: 1.65;
   margin-left: auto;
   margin-right: auto;
}

/* Tighten CTA eyebrow spacing */
.tp-about-2-area.black-bg:has(> .container > .row.justify-content-center) .tm-hero-subtitle,
.tp-about-2-area.black-bg:has(> .container-1480 > .row.justify-content-center) .tm-hero-subtitle {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.24em;
   text-transform: uppercase;
   margin-bottom: 28px;
}

/* Primary / secondary button differentiation in CTA bands.
   First button = filled white (primary).
   Second button = bordered transparent (secondary).
   This runs off the existing <a class="tp-btn-white"> markup —
   no HTML changes needed across the 10 pages that use it. */
.tp-about-2-area.black-bg .d-flex.gap-3 {
   margin-top: clamp(32px, 3.5vw, 52px);
   gap: 14px !important;
}
.tp-about-2-area.black-bg .d-flex.gap-3 > a.tp-btn-white:first-child {
   background-color: #fff;
   color: var(--af-ink);
   border-color: #fff;
}
.tp-about-2-area.black-bg .d-flex.gap-3 > a.tp-btn-white:first-child span {
   color: var(--af-ink);
}
.tp-about-2-area.black-bg .d-flex.gap-3 > a.tp-btn-white:first-child:hover,
.tp-about-2-area.black-bg .d-flex.gap-3 > a.tp-btn-white:first-child:focus-visible {
   background-color: transparent;
   color: #fff;
   border-color: rgba(255, 255, 255, 0.8);
}
.tp-about-2-area.black-bg .d-flex.gap-3 > a.tp-btn-white:first-child:hover span,
.tp-about-2-area.black-bg .d-flex.gap-3 > a.tp-btn-white:first-child:focus-visible span {
   color: #fff;
}

/* ============================================================
   Editorial rounded corners — modern salon aesthetic
   Applies to all major content imagery across every page.
   ============================================================ */
.tp-about-img-item,
.tp-about-img-item img,
.af-portrait-card-thumb,
.ab-2-portfolio-thumb,
.ab-2-portfolio-thumb img,
.service-details__tab-thumb,
.service-details__tab-thumb img,
.service-details__sm-thumb,
.service-details__sm-thumb img,
.pm-project-masonary-item > .fix,
.pm-project-masonary-item > .fix img,
.tp-project-4-thumb,
.tp-project-4-thumb img,
.tp-price-head,
.af-testimonial-image,
.af-testimonial-image img,
.cn-contactform-2-map,
.cn-contactform-2-map iframe {
   border-radius: 20px;
}
/* Parents that clip children via overflow need the radius + overflow */
.af-portrait-card-thumb,
.ab-2-portfolio-thumb,
.service-details__sm-thumb,
.pm-project-masonary-item > .fix,
.tp-project-4-thumb,
.af-testimonial-image {
   overflow: hidden;
}
/* Child img inside clipping parent — parent handles the radius */
.af-portrait-card-thumb img,
.ab-2-portfolio-thumb img,
.service-details__sm-thumb img,
.pm-project-masonary-item > .fix img,
.tp-project-4-thumb img {
   border-radius: 0;
}

/* Before/after sliders don't like border-radius (clipping breaks the drag handle) */
.project-details-img-comparison .beforeAfter {
   border-radius: 20px;
   overflow: hidden;
}

/* ============================================================
   Editorial testimonial — split layout, light background
   Replaces the stacked-dark Liko default. Reuses the existing
   .tp-studio-testimonial-active swiper so JS still works.
   ============================================================ */
.af-testimonial-editorial-area {
   background: var(--af-paper);
}

.af-testimonial-image {
   aspect-ratio: 4 / 5;
}
.af-testimonial-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.af-testimonial-content {
   padding-left: clamp(0px, 2vw, 40px);
}

.af-testimonial-label {
   display: block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.24em;
   text-transform: uppercase;
   color: var(--af-muted);
   margin-bottom: 16px;
}

.af-testimonial-heading {
   font-size: clamp(32px, 3.4vw, 48px);
   font-weight: 500;
   line-height: 1.1;
   letter-spacing: -0.02em;
   color: var(--af-ink);
   margin: 0 0 44px;
   max-width: 12ch;
}

.af-testimonial-quote-mark {
   font-size: clamp(80px, 7vw, 120px);
   line-height: 0.4;
   color: var(--af-muted);
   opacity: 0.32;
   margin-bottom: 18px;
   font-weight: 500;
   user-select: none;
}

.af-testimonial-item {
   margin: 0;
   padding: 0;
   border: 0;
}
.af-testimonial-text {
   font-size: clamp(17px, 1.35vw, 22px);
   line-height: 1.55;
   color: var(--af-ink);
   margin: 0 0 32px;
   font-weight: 400;
   letter-spacing: -0.005em;
   max-width: 56ch;
}

.af-testimonial-meta {
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 0;
   margin: 0;
}
.af-testimonial-name {
   font-size: 15px;
   font-weight: 600;
   color: var(--af-ink);
   letter-spacing: -0.005em;
   font-style: normal;
}
.af-testimonial-role {
   font-size: 13px;
   color: var(--af-muted);
   letter-spacing: 0.02em;
}

.af-testimonial-nav {
   display: flex;
   gap: 12px;
   margin-top: 44px;
}
.af-testimonial-nav button {
   width: 48px;
   height: 48px;
   border: 1px solid var(--af-line);
   border-radius: 50%;
   background: transparent;
   color: var(--af-ink);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: background 220ms var(--af-ease),
               color 220ms var(--af-ease),
               border-color 220ms var(--af-ease);
   padding: 0;
}
.af-testimonial-nav button:hover,
.af-testimonial-nav button:focus-visible {
   background: var(--af-ink);
   color: var(--af-paper);
   border-color: var(--af-ink);
}
@media (max-width: 991.98px) {
   .af-testimonial-content {
      padding-left: 0;
      padding-top: 32px;
   }
}

/* ================================================================
   UNIFIED RESPONSIVE STRATEGY
   Fixes 12 responsive failures identified in the deep audit.
   Ordered top-down: tablet first, then phone-specific.
   ================================================================ */

/* ---- 1. Liko spacing utilities → responsive scale ----
   Liko's spacing.css is static: pt-130 is always 130px. At a 375px
   viewport that's 35% of the screen per gap. Scale the heavy values
   proportionally at tablet & phone. Uses attribute-starts-with so
   we don't have to enumerate every class. */
@media (max-width: 991.98px) {
   [class*="pt-1"].pt-100, [class*="pt-1"].pt-105, [class*="pt-1"].pt-110,
   [class*="pt-1"].pt-115, [class*="pt-1"].pt-120, [class*="pt-1"].pt-125,
   [class*="pt-1"].pt-130, [class*="pt-1"].pt-140, [class*="pt-1"].pt-150,
   [class*="pt-1"].pt-160, [class*="pt-1"].pt-170, [class*="pt-1"].pt-180,
   [class*="pt-1"].pt-190, [class*="pt-1"].pt-200 { padding-top: 70px !important; }

   [class*="pb-1"].pb-100, [class*="pb-1"].pb-105, [class*="pb-1"].pb-110,
   [class*="pb-1"].pb-115, [class*="pb-1"].pb-120, [class*="pb-1"].pb-125,
   [class*="pb-1"].pb-130, [class*="pb-1"].pb-140, [class*="pb-1"].pb-150,
   [class*="pb-1"].pb-160, [class*="pb-1"].pb-170, [class*="pb-1"].pb-180,
   [class*="pb-1"].pb-190, [class*="pb-1"].pb-200 { padding-bottom: 70px !important; }

   .pt-80, .pt-85, .pt-90, .pt-95 { padding-top: 60px !important; }
   .pb-80, .pb-85, .pb-90, .pb-95 { padding-bottom: 60px !important; }

   .mb-100, .mb-110, .mb-120, .mb-130 { margin-bottom: 60px !important; }
   .mb-70, .mb-80, .mb-90 { margin-bottom: 44px !important; }
   .mb-50, .mb-60 { margin-bottom: 32px !important; }
}
@media (max-width: 575.98px) {
   [class*="pt-1"].pt-100, [class*="pt-1"].pt-105, [class*="pt-1"].pt-110,
   [class*="pt-1"].pt-115, [class*="pt-1"].pt-120, [class*="pt-1"].pt-125,
   [class*="pt-1"].pt-130, [class*="pt-1"].pt-140, [class*="pt-1"].pt-150,
   [class*="pt-1"].pt-160, [class*="pt-1"].pt-170, [class*="pt-1"].pt-180,
   [class*="pt-1"].pt-190, [class*="pt-1"].pt-200 { padding-top: 54px !important; }

   [class*="pb-1"].pb-100, [class*="pb-1"].pb-105, [class*="pb-1"].pb-110,
   [class*="pb-1"].pb-115, [class*="pb-1"].pb-120, [class*="pb-1"].pb-125,
   [class*="pb-1"].pb-130, [class*="pb-1"].pb-140, [class*="pb-1"].pb-150,
   [class*="pb-1"].pb-160, [class*="pb-1"].pb-170, [class*="pb-1"].pb-180,
   [class*="pb-1"].pb-190, [class*="pb-1"].pb-200 { padding-bottom: 54px !important; }

   .pt-80, .pt-85, .pt-90, .pt-95 { padding-top: 48px !important; }
   .pb-80, .pb-85, .pb-90, .pb-95 { padding-bottom: 48px !important; }
}

/* ---- 2 & 11. Hero title responsive typography + wrap ---- */
@media (max-width: 767.98px) {
   .af-hero-title {
      font-size: clamp(34px, 9vw, 48px);
      max-width: none;
      line-height: 1.02;
      margin-bottom: 20px;
   }
   .af-hero-sub {
      font-size: 14.5px;
      line-height: 1.55;
   }
}
@media (max-width: 575.98px) {
   .af-hero-title { font-size: clamp(30px, 8.5vw, 42px); }
}

/* ---- 3. Cinematic display titles — tame the floor at mobile ---- */
@media (max-width: 767.98px) {
   .tp-project-4-title {
      font-size: clamp(32px, 7vw, 44px) !important;
      letter-spacing: -0.02em !important;
   }
   .sv-big-text {
      font-size: clamp(28px, 8vw, 44px) !important;
      white-space: normal !important;
      transform: none !important;
      letter-spacing: -0.015em !important;
   }
   .af-testimonial-heading {
      font-size: clamp(26px, 7vw, 34px);
      max-width: none;
      margin-bottom: 28px;
   }
   .tp-about-2-section-title {
      font-size: clamp(24px, 6.5vw, 34px);
   }
}

/* ---- 4. Touch targets — minimum 44px hit area on all CTA buttons ---- */
@media (max-width: 991.98px) {
   .tp-btn-white,
   .tp-btn-black-md,
   .af-book-btn,
   .tp-btn-zikzak {
      min-height: 46px;
      padding-top: 12px;
      padding-bottom: 12px;
      line-height: 22px;
      display: inline-flex;
      align-items: center;
   }
   /* Full-width CTAs on mobile (stacked button rows) */
   .tp-about-2-area.black-bg .d-flex.gap-3 {
      width: 100%;
      flex-direction: column;
      gap: 10px !important;
   }
   .tp-about-2-area.black-bg .d-flex.gap-3 > a {
      width: 100%;
      justify-content: center;
   }
}

/* ---- 5. Fix aria-controls mismatch on burger (JS couldn't fix)
          Add the ID to the offcanvas nav so screen readers follow. */
.tp-offcanvas-main { /* hook handled by JS — see af-nav.js */ }

/* ---- 6. Form inputs — prevent iOS zoom on tap ---- */
@media (max-width: 767.98px) {
   .cn-contactform-2-bg input,
   .cn-contactform-2-bg select,
   .cn-contactform-2-bg textarea,
   input[type="text"],
   input[type="email"],
   input[type="tel"],
   textarea,
   select {
      font-size: 16px !important;
   }
}

/* ---- 7. Full-bleed panels — prevent horizontal scroll ---- */
@media (max-width: 767.98px) {
   .tp-project-4-bg.project-panel {
      aspect-ratio: auto;
   }
   .tp-project-4-thumb img {
      width: 100%;
      height: auto;
      max-height: 60vh;
      object-fit: cover;
   }
   .tp-project-4-content {
      padding: 40px 20px !important;
   }
   /* Global overflow safety net */
   body { overflow-x: hidden; }
   html { overflow-x: hidden; }
}

/* ---- 8. Price table — add horizontal-scroll affordance ---- */
.table-responsive {
   position: relative;
}
@media (max-width: 991.98px) {
   .table-responsive {
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
   }
   .table-responsive::-webkit-scrollbar {
      height: 6px;
   }
   .table-responsive::-webkit-scrollbar-thumb {
      background: rgba(15, 15, 16, 0.2);
      border-radius: 3px;
   }
   /* Edge fade hint — right side gradient signals "more to scroll" */
   .table-responsive::after {
      content: '';
      position: absolute;
      right: 0; top: 0; bottom: 12px;
      width: 40px;
      pointer-events: none;
      background: linear-gradient(to right, transparent, var(--af-paper));
      opacity: 0.9;
   }
}

/* ---- 9. Header column rebalance at tablet (768-991) ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
   .tp-header-3-area .row.align-items-center > [class*="col-md-6"]:first-child {
      flex: 0 0 auto;
      width: 40%;
   }
   .tp-header-3-area .row.align-items-center > [class*="col-md-6"]:last-child {
      flex: 0 0 auto;
      width: 60%;
   }
   /* Slightly smaller Book Now at tablet to match the tighter budget */
   .af-book-btn { padding: 10px 18px; font-size: 10.5px; letter-spacing: 0.12em; }
}

/* ---- 10 & 11. Hero top row and meta — cleaner mobile stack ---- */
@media (max-width: 767.98px) {
   body:not(.home) .af-page-hero {
      width: calc(100% - 16px);
      margin: clamp(80px, 14vh, 100px) auto 0;
      padding: 36px 20px;
      border-radius: 14px;
   }
   .af-page-hero-top {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 28px;
   }
   .af-page-hero .af-eyebrow {
      font-size: 10px;
      letter-spacing: 0.2em;
   }
   .af-page-hero .af-eyebrow::before { width: 18px; }
   .af-page-hero .af-hero-index {
      font-size: 10px;
      letter-spacing: 0.18em;
   }
   .af-hero-meta {
      margin-top: 40px;
      padding-top: 16px;
      font-size: 10px;
      letter-spacing: 0.16em;
   }
}

/* ---- 12. Mobile drawer submenu — no clipping on short screens ---- */
.af-mobile-submenu[data-open="true"] {
   max-height: 600px;
}

/* ---- Bonus: nav pill at mobile never shows anyway, but make
          the offcanvas menu items genuinely tappable ---- */
@media (max-width: 991.98px) {
   .af-mobile-menu > li > a,
   .af-mobile-menu > li > .af-mobile-trigger {
      min-height: 56px;
   }
   .af-mobile-submenu a {
      min-height: 44px;
      display: flex;
      align-items: center;
   }
}

/* ---- Bonus: page hero meta text should never wrap orphan words ---- */
@media (max-width: 575.98px) {
   .af-hero-sub br { display: none; }
   .af-hero-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
   }
}

/* ---- Bonus: testimonial section — image must not crush content
          when it stacks on top at tablet ---- */
@media (max-width: 991.98px) {
   .af-testimonial-image {
      aspect-ratio: 16 / 10;
      max-height: 380px;
   }
}

/* ---- Bonus: editorial service-details layout — sticky right panel
          becomes static on tablet so it doesn't get lost below ---- */
@media (max-width: 991.98px) {
   .service-details__right-wrap {
      margin-top: 40px;
   }
   .service-details__rotate-text { display: none; }
}

/* ================================================================
   PORTRAIT CARD GRIDS — mobile density optimisation
   Curl Service has 4 cards (col-xl-3). At mobile they stack 1×4
   taking ~2200px of vertical scroll. Collapse to 2×2. Use :has()
   to only target 4-card rows so Bridal/Team (3-card col-xl-4
   grids) keep their 1-per-row mobile treatment (avoids orphans).
   ================================================================ */
@media (max-width: 767.98px) {
   .row:has(> .col-xl-3:nth-of-type(4)) > [class*="col-xl-3"] {
      flex: 0 0 50%;
      max-width: 50%;
   }
}

/* Portrait image aspect shortens on very narrow screens — keeps
   cards feeling like a unit instead of tall strips. */
@media (max-width: 575.98px) {
   .af-portrait-card-thumb {
      aspect-ratio: 3 / 4;
   }
   .af-portrait-card-name {
      font-size: clamp(16px, 4.6vw, 20px);
      margin-bottom: 6px;
   }
   .af-portrait-card-label {
      font-size: 9.5px;
      letter-spacing: 0.2em;
      margin-bottom: 8px;
   }
   .af-portrait-card-spec {
      font-size: 13px;
      line-height: 1.5;
   }
}
@media (max-width: 420px) {
   .af-portrait-card-thumb {
      aspect-ratio: 1 / 1;
   }
}

/* ================================================================
   SERVICE CROSS-LINK CARDS — compact 2-col alternative to the
   full-bleed project-panel. Used on cuts.html and reusable for
   any page that needs "see also" service blocks.
   ================================================================ */
.af-service-card {
   display: block;
   text-decoration: none;
   color: inherit;
   transition: transform 320ms var(--af-ease);
}
.af-service-card:hover,
.af-service-card:focus-visible {
   transform: translateY(-4px);
   color: inherit;
}

.af-service-card-thumb {
   overflow: hidden;
   border-radius: 20px;
   aspect-ratio: 16 / 10;
   margin-bottom: 24px;
   background: rgba(15, 15, 16, 0.04);
}
.af-service-card-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 0;
   transition: transform 900ms var(--af-ease);
}
.af-service-card:hover .af-service-card-thumb img {
   transform: scale(1.05);
}

.af-service-card-label {
   display: block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--af-muted);
   margin-bottom: 10px;
}

.af-service-card-title {
   font-size: clamp(22px, 1.9vw, 30px);
   font-weight: 500;
   letter-spacing: -0.015em;
   color: var(--af-ink);
   margin: 0 0 12px;
   line-height: 1.15;
}

.af-service-card-text {
   font-size: 15px;
   line-height: 1.55;
   color: var(--af-muted);
   margin: 0 0 18px;
   max-width: 44ch;
}

.af-service-card-cta {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--af-ink);
   transition: gap 240ms var(--af-ease);
}
.af-service-card:hover .af-service-card-cta,
.af-service-card:focus-visible .af-service-card-cta {
   gap: 14px;
}
.af-service-card-cta svg {
   transition: transform 240ms var(--af-ease);
}
.af-service-card:hover .af-service-card-cta svg {
   transform: translateX(3px);
}

/* ================================================================
   PRICING CARDS — make the flagship (active) visually distinct
   on mobile where side-by-side comparison is lost to stacking.
   ================================================================ */
@media (max-width: 767.98px) {
   .tp-price-item.active {
      box-shadow: 0 24px 48px -24px rgba(15, 15, 16, 0.22);
      transform: translateY(-4px);
   }
   .tp-price-item {
      transition: transform 240ms var(--af-ease);
   }
}

/* --- Skip link --- */
.af-skip-link {
   position: fixed;
   top: -120px;
   left: 16px;
   z-index: 9999;
   padding: 10px 16px;
   background: var(--af-ink);
   color: var(--af-paper);
   text-decoration: none;
   font-size: 12px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   border-radius: 4px;
   transition: top 220ms var(--af-ease);
}
.af-skip-link:focus-visible {
   top: 16px;
}

/* --- Header — flush at top, consistent vertical padding --- */
.tp-header-3-area {
   background-color: #ffffff;
   margin-top: 0 !important;   /* override .mt-35 so header sits at top */
   padding-top: 14px;
   padding-bottom: 14px;
   transition: padding 220ms var(--af-ease),
               background-color 220ms var(--af-ease),
               box-shadow 220ms var(--af-ease);
}
.tp-header-3-area.header-sticky {
   padding-top: 10px;
   padding-bottom: 10px;
   background-color: rgba(255, 255, 255, 0.97);
   backdrop-filter: saturate(180%) blur(12px);
   -webkit-backdrop-filter: saturate(180%) blur(12px);
   box-shadow: 0 1px 0 var(--af-line);
}
.tp-header-3-area.header-sticky .tp-header-3-logo img {
   transform: scale(0.9);
   transform-origin: left center;
   transition: transform 260ms var(--af-ease);
}

/* --- Desktop menu visibility at ≥ 992px --- */
.af-nav-lg { display: none; }
@media (min-width: 992px) {
   .af-nav-lg { display: block; }
}

/* --- Desktop menu — floating dark pill --- */
.tp-header-3-menu .tp-main-menu-content > ul {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 2px;
   margin: 0;
   padding: 5px;
   list-style: none;
   background-color: #1c1f2ae6;
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border-radius: 100px;
   box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25);
}
.tp-header-3-menu .tp-main-menu-content > ul > li {
   position: relative;
   list-style: none;
}
.tp-header-3-menu .tp-main-menu-content > ul > li > a,
.tp-header-3-menu .tp-main-menu-content > ul > li > .nav-trigger {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   position: relative;
   padding: 11px 18px;
   background: transparent;
   border: 0;
   border-radius: 100px;
   font-family: inherit;
   font-size: clamp(11px, 0.72vw, 13px);
   font-weight: 500;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.82);
   text-decoration: none;
   cursor: pointer;
   white-space: nowrap;
   transition: color 200ms var(--af-ease),
               background-color 200ms var(--af-ease);
}
.tp-header-3-menu .tp-main-menu-content > ul > li:hover > a,
.tp-header-3-menu .tp-main-menu-content > ul > li:hover > .nav-trigger,
.tp-header-3-menu .tp-main-menu-content > ul > li:focus-within > a,
.tp-header-3-menu .tp-main-menu-content > ul > li:focus-within > .nav-trigger,
.tp-header-3-menu .tp-main-menu-content > ul > li > [aria-current="page"] {
   background: rgba(255, 255, 255, 0.1);
   color: #fff;
}
/* No underline on pill style — hover/active state uses background */
.tp-header-3-menu .tp-main-menu-content > ul > li > a::after,
.tp-header-3-menu .tp-main-menu-content > ul > li > .nav-trigger::after {
   display: none;
}

/* Caret on dropdown triggers */
.af-caret { transition: transform 240ms var(--af-ease); }
.af-has-dropdown:hover > .nav-trigger .af-caret,
.af-has-dropdown:focus-within > .nav-trigger .af-caret,
.nav-trigger[aria-expanded="true"] .af-caret {
   transform: rotate(180deg);
}

/* --- Desktop dropdown panel — offset below the pill --- */
.af-dropdown {
   position: absolute;
   top: calc(100% + 14px);
   left: -14px;
   min-width: 240px;
   margin: 0;
   padding: 14px 0;
   list-style: none;
   background: var(--af-paper);
   border: 1px solid var(--af-line);
   border-radius: 14px;
   box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.22);
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: opacity 240ms var(--af-ease),
               transform 240ms var(--af-ease),
               visibility 240ms;
   z-index: 50;
   overflow: hidden;
}
.af-has-dropdown:hover > .af-dropdown,
.af-has-dropdown:focus-within > .af-dropdown,
.nav-trigger[aria-expanded="true"] + .af-dropdown {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}
.af-dropdown li { list-style: none; }
.af-dropdown a {
   display: block;
   padding: 11px 28px;
   font-size: 12.5px;
   letter-spacing: 0.06em;
   color: var(--af-ink);
   text-decoration: none;
   transition: background 180ms var(--af-ease),
               padding 220ms var(--af-ease),
               color 180ms;
}
.af-dropdown a:hover,
.af-dropdown a:focus-visible,
.af-dropdown a[aria-current="page"] {
   background: rgba(15, 15, 16, 0.04);
   padding-left: 36px;
}

/* Mid-breakpoint tightening (992 – 1199) — tighter pill padding */
@media (min-width: 992px) and (max-width: 1199.98px) {
   .tp-header-3-menu .tp-main-menu-content > ul > li > a,
   .tp-header-3-menu .tp-main-menu-content > ul > li > .nav-trigger {
      padding: 10px 12px;
      font-size: 11px;
      letter-spacing: 0.05em;
   }
}

/* Hide social icons between 992-1199px — pill nav needs the space */
@media (max-width: 1199.98px) {
   .tp-header-3-area .tp-header-3-social {
      display: none !important;
   }
}

/* --- Book Now CTA --- */
.af-book-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 11px 22px;
   margin-left: 18px;
   font-family: inherit;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--af-paper);
   background: var(--af-ink);
   border: 1px solid var(--af-ink);
   border-radius: 999px;
   text-decoration: none;
   white-space: nowrap;
   transition: background 220ms var(--af-ease),
               color 220ms var(--af-ease),
               transform 220ms var(--af-ease);
}
.af-book-btn:hover,
.af-book-btn:focus-visible {
   background: transparent;
   color: var(--af-ink);
   transform: translateY(-1px);
}

/* --- Social row in header --- */
.tp-header-3-social {
   display: flex;
   align-items: center;
   gap: 14px;
}
.tp-header-3-social a {
   font-size: 14px;
   color: var(--af-ink);
   transition: opacity 200ms;
}
.tp-header-3-social a:hover { opacity: 0.6; }

/* --- Burger button (shows below lg) --- */
.af-burger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   margin-left: 14px;
   background: transparent;
   border: 1px solid var(--af-line);
   border-radius: 999px;
   color: var(--af-ink);
   cursor: pointer;
   transition: background 220ms var(--af-ease),
               color 220ms var(--af-ease);
}
.af-burger:hover,
.af-burger:focus-visible {
   background: var(--af-ink);
   color: var(--af-paper);
}
@media (min-width: 992px) { .af-burger { display: none; } }

/* --- Focus states (accessibility) --- */
.tp-header-3-area a:focus-visible,
.tp-header-3-area button:focus-visible,
.tp-offcanvas-area a:focus-visible,
.tp-offcanvas-area button:focus-visible {
   outline: 2px solid var(--af-ink);
   outline-offset: 3px;
   border-radius: 2px;
}

/* --- Mobile drawer body lock --- */
body.af-nav-open { overflow: hidden; }

/* --- Offcanvas: clean mobile menu --- */
.af-mobile-menu {
   list-style: none;
   padding: 0;
   margin: 24px 0 0;
   border-top: 1px solid var(--af-line);
}
.af-mobile-menu > li {
   list-style: none;
   border-bottom: 1px solid var(--af-line);
}
.af-mobile-menu > li > a,
.af-mobile-menu > li > .af-mobile-trigger {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   padding: 20px 0;
   font-family: inherit;
   font-size: 15px;
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--af-ink);
   background: none;
   border: 0;
   text-align: left;
   text-decoration: none;
   cursor: pointer;
   transition: color 200ms;
}
.af-mobile-menu > li > a[aria-current="page"] { color: var(--af-muted); }
.af-chevron { transition: transform 240ms var(--af-ease); flex-shrink: 0; }
.af-mobile-trigger[aria-expanded="true"] .af-chevron { transform: rotate(180deg); }

.af-mobile-submenu {
   list-style: none;
   padding: 0;
   margin: 0;
   max-height: 0;
   overflow: hidden;
   transition: max-height 340ms var(--af-ease);
}
.af-mobile-submenu[data-open="true"] { max-height: 400px; }
.af-mobile-submenu li { list-style: none; }
.af-mobile-submenu a {
   display: block;
   padding: 10px 0;
   font-size: 13px;
   letter-spacing: 0.06em;
   color: var(--af-muted);
   text-decoration: none;
   transition: color 180ms;
}
.af-mobile-submenu a:hover,
.af-mobile-submenu a[aria-current="page"] { color: var(--af-ink); }

/* Last item in a submenu keeps bottom padding balanced */
.af-mobile-submenu li:last-child a { padding-bottom: 16px; }

/* Book Now inside drawer */
.af-book-btn.af-mobile-cta {
   display: flex;
   width: 100%;
   margin: 32px 0 0;
   padding: 18px 24px;
   letter-spacing: 0.16em;
}

/* Reset any leftover bullets inside offcanvas-main (we own this list) */
.tp-offcanvas-main > ul { list-style: none; padding: 0; }

/* Offcanvas contact + social polish */
.tp-offcanvas-contact ul,
.tp-offcanvas-social ul { list-style: none; padding: 0; }
.tp-offcanvas-contact li { list-style: none; }

/* ============================================================
   Contact page — details list + form polish
   ============================================================ */

.af-contact-list {
   list-style: none;
   padding: 0;
   margin: 0;
   border-top: 1px solid var(--af-line);
}
.af-contact-list > li {
   list-style: none;
   display: grid;
   grid-template-columns: 120px 1fr;
   gap: 24px;
   padding: 20px 0;
   border-bottom: 1px solid var(--af-line);
   align-items: start;
}
.af-contact-label {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--af-muted);
}
.af-contact-list a {
   color: var(--af-ink);
   text-decoration: none;
   line-height: 1.6;
   transition: color 200ms var(--af-ease);
}
.af-contact-list a:hover,
.af-contact-list a:focus-visible { color: var(--af-muted); }
@media (max-width: 575.98px) {
   .af-contact-list > li {
      grid-template-columns: 1fr;
      gap: 6px;
   }
}

/* Contact form — dark band polish */
.cn-contactform-2-bg .cn-contactform-wrap {
   padding: clamp(32px, 4vw, 64px);
}
.cn-contactform-2-bg label {
   display: block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.65);
   margin-bottom: 8px;
}
.cn-contactform-2-bg input,
.cn-contactform-2-bg select,
.cn-contactform-2-bg textarea {
   width: 100%;
   padding: 12px 0;
   background: transparent;
   border: 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   color: #fff;
   font-size: 15px;
   font-family: inherit;
   transition: border-color 220ms var(--af-ease);
}
.cn-contactform-2-bg input::placeholder,
.cn-contactform-2-bg textarea::placeholder {
   color: rgba(255, 255, 255, 0.35);
}
.cn-contactform-2-bg select {
   appearance: none;
   -webkit-appearance: none;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1L5 5L9 1' stroke='white' stroke-opacity='0.5' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   background-repeat: no-repeat;
   background-position: right 4px center;
   padding-right: 24px;
   cursor: pointer;
}
.cn-contactform-2-bg select option {
   color: var(--af-ink);
   background: var(--af-paper);
}
.cn-contactform-2-bg input:focus,
.cn-contactform-2-bg select:focus,
.cn-contactform-2-bg textarea:focus {
   outline: none;
   border-bottom-color: #fff;
}
.cn-contactform-2-bg textarea {
   resize: vertical;
   min-height: 120px;
}
.cn-contactform-2-bg .cn-contactform-2-title {
   color: #fff;
   margin-bottom: 32px;
}
.cn-contactform-2-bg .ajax-response {
   color: rgba(255, 255, 255, 0.7);
   font-size: 13px;
}

/* Map iframe inside the form band — full-height fill */
.cn-contactform-2-map {
   height: 100%;
   min-height: 560px;
   position: relative;
   overflow: hidden;
}
.cn-contactform-2-map iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
   filter: grayscale(0.2) contrast(0.98);
}
@media (max-width: 991.98px) {
   .cn-contactform-2-map { min-height: 360px; }
}

/* ============================================================
   Editorial menu list (cuts / colour / service pages)
   ============================================================ */

.af-menu-list {
   list-style: none;
   padding: 0;
   margin: 0;
   border-top: 1px solid var(--af-line);
}
.af-menu-list > li {
   list-style: none;
   border-bottom: 1px solid var(--af-line);
}
.af-menu-item {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 32px;
   align-items: start;
   padding: 28px 4px;
   transition: padding 240ms var(--af-ease);
}
.af-menu-list > li:hover .af-menu-item {
   padding-left: 16px;
}
.af-menu-item-info h4 {
   font-size: clamp(18px, 1.4vw, 22px);
   font-weight: 500;
   letter-spacing: 0.01em;
   margin: 0 0 8px;
   color: var(--af-ink);
}
.af-menu-item-info p {
   margin: 0;
   color: var(--af-muted);
   font-size: 14px;
   line-height: 1.65;
   max-width: 560px;
}
.af-menu-item-price {
   text-align: right;
   white-space: nowrap;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 4px;
   padding-top: 4px;
}
.af-price-label {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--af-muted);
}
.af-price {
   font-size: clamp(20px, 1.6vw, 26px);
   font-weight: 500;
   color: var(--af-ink);
   letter-spacing: 0.01em;
}
@media (max-width: 575.98px) {
   .af-menu-item {
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 22px 0;
   }
   .af-menu-item-price {
      text-align: left;
      align-items: flex-start;
      flex-direction: row;
      gap: 10px;
   }
}

/* Service-details right rotate text — make sure it sits gracefully */
.service-details__rotate-text span {
   letter-spacing: 0.18em;
   text-transform: uppercase;
   font-size: 11px;
   color: var(--af-muted);
}

/* Grouped menu subheadings (Colour / service pages) */
.af-menu-group-title {
   margin: 0 0 12px;
   padding-bottom: 10px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--af-muted);
}
.af-menu-group-title + .af-menu-list {
   border-top: 1px solid var(--af-ink);
}

/* ============================================================
   AF Page Hero — unified editorial masthead
   Used on every non-index page. Rendered as a rounded "card"
   that sits just below the sticky header (front-page excluded
   via body:not(.home) — front-page.php has its own hero).
   ============================================================ */

body:not(.home) .af-page-hero {
   position: relative;
   overflow: hidden;
   /* Match front-page hero: .container-1870 with Bootstrap 12px gutters
      → visible card spans max 1846px, centred, 12px from viewport edges. */
   width: calc(100% - 24px);
   max-width: 1846px;
   margin: clamp(95px, 11vh, 130px) auto 0;
   padding: clamp(48px, 7vw, 96px) clamp(24px, 4vw, 64px);
   border-radius: clamp(18px, 2vw, 32px);
   background: var(--af-paper);
   color: var(--af-ink);
   isolation: isolate;
}

/* Subtle warm radial ambience — clipped to card radius */
body:not(.home) .af-page-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: inherit;
   background:
      radial-gradient(55% 45% at 88% 18%, rgba(155, 123, 92, 0.09), transparent 70%),
      radial-gradient(70% 60% at 12% 85%, rgba(15, 15, 16, 0.04), transparent 70%);
   pointer-events: none;
   z-index: -1;
}

/* Soft fade at card bottom — kept inside rounded corners */
body:not(.home) .af-page-hero::after {
   content: '';
   position: absolute;
   left: 0; right: 0; bottom: 0;
   height: 110px;
   background: linear-gradient(to bottom, transparent, var(--af-paper));
   pointer-events: none;
   z-index: -1;
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
}

.af-page-hero-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 24px;
   margin-bottom: clamp(40px, 6vw, 80px);
   flex-wrap: wrap;
}

.af-page-hero .af-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.24em;
   text-transform: uppercase;
   color: var(--af-muted);
   margin: 0;
}
.af-page-hero .af-eyebrow::before {
   content: '';
   display: inline-block;
   width: 32px;
   height: 1px;
   background: currentColor;
   opacity: 0.6;
}

.af-page-hero .af-hero-index {
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--af-muted);
}

.af-hero-title {
   font-family: var(--tp-ff-body);
   font-size: clamp(38px, 5.4vw, 84px);
   font-weight: 500;
   line-height: 1;
   letter-spacing: -0.02em;
   color: var(--af-ink);
   margin: 0 0 clamp(20px, 2.4vw, 32px);
   max-width: 16ch;
}

body:not(.home) .af-page-hero .af-hero-meta {
   margin-top: clamp(36px, 4.5vw, 64px);
}

.af-hero-sub {
   max-width: 620px;
   font-size: clamp(16px, 1.05vw, 18px);
   line-height: 1.65;
   color: var(--af-muted);
   margin: 0;
}

.af-hero-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
   margin-top: clamp(56px, 7vw, 100px);
   padding-top: 22px;
   border-top: 1px solid var(--af-line);
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--af-muted);
}

.af-scroll-cue {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: var(--af-muted);
   text-decoration: none;
   transition: color 220ms var(--af-ease), gap 220ms var(--af-ease);
}
.af-scroll-cue:hover,
.af-scroll-cue:focus-visible {
   color: var(--af-ink);
   gap: 14px;
}
.af-scroll-cue svg {
   transition: transform 280ms var(--af-ease);
}
.af-scroll-cue:hover svg,
.af-scroll-cue:focus-visible svg {
   transform: translateY(3px);
}

/* Responsive tightening */
@media (max-width: 767.98px) {
   .af-page-hero-top {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 36px;
   }
   .af-page-hero .af-eyebrow::before { width: 22px; }
   .af-hero-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
   }
}

/* ============================================================
   Post-rollout corrections — typography, contrast, spacing
   ============================================================ */

/* A — Hero title — font-family now inherits from body (Gotham)
   via the token override above. This block kept empty-ish for
   historical reference — full spec is in the :root af-hero-title
   declaration earlier. */

/* B — Keep CTA buttons visible inside .black-bg sections.
   Liko's default .tp-btn-white:hover flips to black bg → vanishes
   against the dark section. Override so the pill stays readable,
   inverts to white fill on hover. */
.black-bg .tp-btn-white,
.black-bg .tp-btn-white.background-black {
   background-color: transparent;
   color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.8);
}
.black-bg .tp-btn-white span,
.black-bg .tp-btn-white.background-black span {
   color: #fff;
}
.black-bg .tp-btn-white:hover,
.black-bg .tp-btn-white:focus-visible,
.black-bg .tp-btn-white.background-black:hover,
.black-bg .tp-btn-white.background-black:focus-visible {
   background-color: #fff;
   color: var(--af-ink);
   border-color: #fff;
}
.black-bg .tp-btn-white:hover span,
.black-bg .tp-btn-white:focus-visible span,
.black-bg .tp-btn-white.background-black:hover span,
.black-bg .tp-btn-white.background-black:focus-visible span {
   color: var(--af-ink);
}

/* Small-buttons on dark bands — same correction for tp-btn-black-md
   when it appears inside a black-bg (e.g. price cards) */
.black-bg .tp-btn-black-md {
   color: #fff;
   border-color: rgba(255, 255, 255, 0.8);
}

/* C — Normalise breathing room between hero card and first content section.
   Card hero no longer needs the old generous clearance. */
.af-page-hero + #page-content + * {
   padding-top: clamp(32px, 4vw, 64px);
}
.af-page-hero + #page-content + .tp-about-2-area,
.af-page-hero + #page-content + .tp-service-5-area,
.af-page-hero + #page-content + .service-details__area,
.af-page-hero + #page-content + .tp-price-area,
.af-page-hero + #page-content + .ab-funfact-area,
.af-page-hero + #page-content + .tp-project-4-area,
.af-page-hero + #page-content + .cn-contactform-area {
   padding-top: clamp(32px, 4vw, 64px);
}

/* ============================================================
   Pull-quote — emotional moments (bridal testimonial, etc.)
   ============================================================ */
.af-pullquote {
   margin: 0;
   padding: clamp(60px, 8vw, 120px) 0;
   text-align: center;
   border-top: 1px solid var(--af-line);
   border-bottom: 1px solid var(--af-line);
}
.af-pullquote-text {
   font-family: var(--tp-ff-body);
   font-size: clamp(22px, 2.4vw, 34px);
   line-height: 1.4;
   font-weight: 300;
   font-style: normal;
   color: var(--af-ink);
   max-width: 28ch;
   margin: 0 auto clamp(24px, 2.5vw, 36px);
   letter-spacing: -0.005em;
}
.af-pullquote-text::before {
   content: '\201C';
   display: block;
   font-family: var(--tp-ff-body);
   font-size: clamp(48px, 6vw, 80px);
   font-weight: 500;
   line-height: 0.4;
   margin-bottom: clamp(16px, 2vw, 28px);
   color: var(--af-muted);
   opacity: 0.4;
}
.af-pullquote-attrib {
   display: block;
   font-style: normal;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--af-muted);
}
.black-bg .af-pullquote-text { color: #fff; }
.black-bg .af-pullquote-attrib { color: rgba(255, 255, 255, 0.6); }
.black-bg .af-pullquote { border-color: rgba(255, 255, 255, 0.14); }

/* ============================================================
   Portrait card (editorial team grid)
   ============================================================ */
.af-portrait-card { display: block; margin-bottom: 20px;}
.af-portrait-card-thumb {
   aspect-ratio: 4 / 5;
   overflow: hidden;
   margin-bottom: 20px;
   background: rgba(15, 15, 16, 0.04);
}
.af-portrait-card-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 900ms var(--af-ease);
}
.af-portrait-card:hover .af-portrait-card-thumb img {
   transform: scale(1.04);
}
.af-portrait-card-label {
   display: block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--af-muted);
   margin-bottom: 10px;
}
.af-portrait-card-name {
   font-family: var(--tp-ff-marcellus);
   font-size: clamp(22px, 1.8vw, 30px);
   font-weight: 500;
   letter-spacing: -0.01em;
   color: var(--af-ink);
   margin: 0 0 8px;
}
.af-portrait-card-spec {
   font-size: 14.5px;
   line-height: 1.55;
   color: var(--af-muted);
   margin: 0;
   max-width: 32ch;
}

/* ============================================================
   Press / featured-in strip
   ============================================================ */
.af-press-strip {
   padding: clamp(50px, 6vw, 90px) 0;
   border-top: 1px solid var(--af-line);
   border-bottom: 1px solid var(--af-line);
}
.af-press-strip-label {
   display: block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.24em;
   text-transform: uppercase;
   color: var(--af-muted);
   text-align: center;
   margin-bottom: 36px;
}
.af-press-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: clamp(28px, 4vw, 60px);
   list-style: none;
   padding: 0;
   margin: 0;
}
.af-press-list li {
   list-style: none;
   font-family: var(--tp-ff-marcellus);
   font-size: clamp(16px, 1.3vw, 22px);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--af-muted);
   white-space: nowrap;
   opacity: 0.72;
   transition: opacity 220ms var(--af-ease), color 220ms var(--af-ease);
}
.af-press-list li:hover {
   opacity: 1;
   color: var(--af-ink);
}

/* ============================================================
   Colour palette strip — editorial tone swatches
   ============================================================ */
.af-palette-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: clamp(28px, 3vw, 50px);
}
.af-palette-chip {
   display: block;
   text-align: left;
}
.af-palette-swatch {
   aspect-ratio: 1 / 1;
   border-radius: 50%;
   margin-bottom: 18px;
   box-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.35),
               inset 0 1px 0 rgba(255, 255, 255, 0.08);
   transition: transform 500ms var(--af-ease);
}
.af-palette-chip:hover .af-palette-swatch {
   transform: translateY(-4px);
}
.af-palette-name {
   font-family: var(--tp-ff-marcellus);
   font-size: clamp(18px, 1.3vw, 22px);
   font-weight: 500;
   letter-spacing: -0.005em;
   color: var(--af-ink);
   margin: 0 0 6px;
}
.af-palette-note {
   font-size: 13px;
   line-height: 1.5;
   color: var(--af-muted);
   margin: 0;
}