/*
Theme Name: SKLAW
Theme URI: https://sklaw.com.au
Author: Cliffex
Description: Boutique criminal-defence law firm block theme. Dark editorial canvas with a warm peach accent. Front page replicates the Figma home design via block patterns.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sklaw
*/

/* =====================================================================
   SKLAW — Global Stylesheet
   Built from Figma "Home Page" (file z4lYH37bu6G2MAPSmI7ebI).
   Tokens are ground-truth values pulled from the Figma design context.
   This file is structured to map cleanly onto a future WordPress
   block theme (theme.json): each token below becomes a preset.
   ===================================================================== */

/* ---- Web fonts ----------------------------------------------------- */
/* Mulish (eyebrow labels) + Playfair Display (Didot fallback) via Google */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
/* Satoshi (stats / trust text) via Fontshare — free for commercial use */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');

/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */
:root {
  /* ---- Color: surfaces ---- */
  --c-bg:            #202020;   /* page base */
  --c-surface:       #252525;   /* raised panel */
  --c-surface-2:     #373737;   /* inputs, active chips */
  --c-recessed:      #1a1a1a;   /* ghost / sunken */

  /* ---- Color: brand accents ---- */
  --c-accent:        #edc193;   /* primary soft peach — CTAs, icons, glow */
  --c-accent-ink:    #202020;   /* text/icon on peach */
  --c-accent-strong: #ff3b14;   /* vivid orange-red — primary "Call" CTA (dark ink on top) */
  --c-star:          #ffcc00;   /* rating stars */

  /* ---- Color: text ---- */
  --c-text:          #ffffff;
  --c-text-muted:    rgba(255,255,255,0.60);
  --c-text-dim:      rgba(255,255,255,0.50);
  --c-text-gray:     #808080;

  /* ---- Color: lines / borders ---- */
  --c-border-soft:   rgba(255,255,255,0.08);
  --c-border:        rgba(255,255,255,0.20);
  --c-line:          rgba(255,255,255,0.14);   /* divider rules (services, blog) */

  /* ---- Typography: families ---- */
  --f-sans:  'Helvetica Neue', Helvetica, Arial, sans-serif; /* display + UI */
  --f-serif: 'Didot', 'Playfair Display', Georgia, serif;    /* accent words */
  --f-label: 'Mulish', var(--f-sans);                        /* eyebrows */
  --f-stat:  'Satoshi', var(--f-sans);                       /* stats / trust */

  /* ---- Typography: weights ---- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;

  /* ---- Typography: fluid display scale ---- */
  /* tracking values are figma-exact (negative px on large display) */
  --fs-display:  clamp(2.75rem, 1.6rem + 5.1vw, 4.875rem); /* 44 → 78px H1 */
  --fs-h2:       clamp(2rem, 1.3rem + 3.1vw, 3.5rem);      /* 32 → 56px */
  --fs-statement:clamp(1.5rem, 1rem + 2.2vw, 2.25rem);    /* 24 → 36px intro */
  --fs-xl:       1.25rem;   /* 20px */
  --fs-lg:       1.125rem;  /* 18px */
  --fs-md:       1rem;      /* 16px */
  --fs-sm:       0.875rem;  /* 14px */

  /* ---- Layout ---- */
  --container-max: 1440px;
  --gutter: clamp(1.25rem, 6.18vw, 5.5625rem); /* ≈89px at 1440 */

  /* ---- Radii ---- */
  --r-pill:  100px;
  --r-card:  24px;
  --r-corner:170px;  /* signature large top-left cut */
  --r-section-top: 80px;  /* rounded top-left corner of stacked sections */

  /* ---- Section rhythm ---- */
  /* standardised vertical padding for every section (responsive: rem + vw).
     ~75px around a 1280px viewport, 48px floor on mobile, 93px ceiling. */
  --section-y: clamp(3rem, 1.5rem + 4vw, 5.8125rem);
}

/* =====================================================================
   2. RESET / BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }   /* contain sideways bleed of the section glows */
body {
  font-family: var(--f-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* =====================================================================
   3. LAYOUT PRIMITIVES
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Eyebrow pill — repeated brand motif (dot + styled small-caps label) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: rgba(0,0,0,0.20);
  backdrop-filter: blur(11.25px);
  font-family: var(--f-label);
  font-weight: var(--w-semibold);
  font-size: var(--fs-md);
  letter-spacing: -0.03em;     /* -0.48px @16 */
  white-space: nowrap;
}
.eyebrow::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c-accent);
  flex: none;
}
.eyebrow--plain { background: transparent; backdrop-filter: none; }

/* ---------------------------------------------------------------------
   Reusable "stacked section seam" pattern.
   A section curves its top-left corner (.rounds-up) into the warm glow
   emitted by the section above it (.glows-below). Pair them on adjacent
   sections — e.g. Areas→How We Work and Contact→Footer.
   --------------------------------------------------------------------- */
.rounds-up {
  position: relative;
  z-index: 1;                       /* paints over the previous section's glow */
  background: var(--c-bg);
  border-top-left-radius: var(--r-section-top);
}
.glows-below { position: relative; }
.glows-below::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -150px;
  height: 320px;
  background: var(--c-accent);
  filter: blur(90px);
  opacity: .42;
  z-index: 0;                       /* sits behind the next section */
  pointer-events: none;
}

/* =====================================================================
   4. BUTTONS
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-md);
  letter-spacing: -0.03em;     /* -0.48px */
  line-height: 1;
  border: 0;
  white-space: nowrap;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--accent  { background: var(--c-accent);        color: var(--c-accent-ink); }
.btn--accent:hover  { background: #f2cda6; }
.btn--orange  { background: var(--c-accent-strong);  color: var(--c-accent-ink); font-weight: var(--w-semibold); }
.btn--orange:hover  { background: #ff5c3a; }
.btn--outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.btn--outline:hover { background: rgba(255,255,255,.08); }
/* dark-on-light variants (used on the peach CTA banner) */
.btn--dark { background: var(--c-bg); color: var(--c-accent); }
.btn--dark:hover { background: #161616; }
.btn--outline-dark { background: transparent; color: var(--c-bg); box-shadow: inset 0 0 0 2px var(--c-bg); }
.btn--outline-dark:hover { background: rgba(0,0,0,.06); }

/* button with a trailing arrow icon merged on the right */
.btn--arrow { padding-right: 24px; }
.btn .btn-arrow {
  width: 18px; height: 18px;
  flex: none;
  margin-left: 2px;
  transition: transform .2s ease;
}
.btn--arrow:hover .btn-arrow { transform: translate(2px, -2px); }

/* circular icon button */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--c-accent);
  flex: none;
  transition: transform .2s ease;
}
.btn-icon:hover { transform: translateY(-1px); }
.btn-icon img,
.btn-icon svg { width: 26px; height: 26px; }
.btn-icon--outline { background: transparent; border: 1px solid #fff; }
.btn-icon--dark { background: var(--c-bg); color: var(--c-accent); }  /* peach arrow on dark circle */

/* =====================================================================
   4b. FLOATING CALL BUTTON (fixed, bottom-right, on every page)
   ===================================================================== */
.float-call {
  position: fixed;
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-bg);
  box-shadow: 0 0 0 10px rgba(237,193,147,0.16), 0 0 40px 6px rgba(237,193,147,0.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.float-call:hover { transform: translateY(-2px) scale(1.04); }
.float-call svg { width: 28px; height: 28px; }

/* =====================================================================
   5. SITE HEADER / NAV
   ===================================================================== */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: 15px;
}
.nav-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;  /* brand · nav · cta */
  align-items: center;
  gap: 24px;
}
/* brand never shrinks/distorts */
.brand { grid-column: 1; display: inline-flex; align-items: center; gap: 16px; }
.brand-emblem { height: 64px; width: auto; }
.brand-wordmark { height: 48px; width: auto; }

/* nav pill centred within the flexible middle grid track (never overlaps) */
.main-nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  height: 48px;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-pill);
  background: var(--c-bg);
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  height: 40px;
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  color: #fff;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.main-nav a.is-active { padding-inline: 18px; }
.main-nav a:hover { background: rgba(255,255,255,.06); }
.main-nav a.is-active {
  border: 1px solid var(--c-border-soft);
  background-image: linear-gradient(58deg, rgba(0,0,0,0.22) 22%, rgba(255,255,255,0) 115%);
  font-weight: var(--w-medium);
}

.header-cta { grid-column: 3; display: flex; align-items: center; gap: 12px; justify-self: end; }
.header-cta .btn { height: 48px; }
.hc-call { position: relative; display: inline-flex; }
.hc-avail {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* hamburger toggle — hidden on desktop, becomes the menu trigger when nav collapses */
.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--c-accent);
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--c-bg);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -6px; left: 0; }
.nav-toggle-bars::after  { position: absolute; top:  6px; left: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* mobile dropdown menu */
.mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: var(--gutter); right: var(--gutter);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--c-border-soft);
  border-radius: 24px;
  background: var(--c-bg);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.mobile-menu[hidden] { display: none; }
.mm-nav { display: flex; flex-direction: column; }
.mm-nav a {
  padding: 14px 4px;
  font-size: var(--fs-lg);
  color: #fff;
  border-bottom: 1px solid var(--c-border-soft);
}
.mm-nav a:last-child { border-bottom: 0; }
.mm-cta { display: flex; flex-direction: column; gap: 12px; }
.mm-cta .btn { width: 100%; height: 52px; }

/* =====================================================================
   6. HERO
   ===================================================================== */
.hero {
  position: relative;
  background: var(--c-bg);
  padding-top: 160px;
  padding-bottom: 120px;
  /* overflow stays visible so the glow-band can bleed into the Intro corner;
     the texture/statue are clipped by .hero-bg instead */
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-bg .texture {
  position: absolute; inset: 0;
  width: 100%; height: 1069px;
  object-fit: cover;
  opacity: .9;
}
/* warm peach glow behind the statue */
.hero-bg .glow {
  position: absolute;
  top: 200px; right: -40px;
  width: 460px; height: 520px;
  background: var(--c-accent);
  filter: blur(54px);
  border-radius: 50%;
  opacity: .55;
}
/* statue fills the hero below the header; never reaches into the nav */
.hero-bg .statue {
  position: absolute;
  top: 104px; right: 0;
  height: calc(100% - 104px);
  width: auto;
  max-width: none;
  z-index: 1;
  object-fit: contain;
  object-position: bottom right;
  transform: scaleX(-1);   /* mirror so Lady Justice faces the headline */
}
/* left-to-right darkening so the headline stays legible over the statue.
   Fades out toward the bottom so it doesn't tint the warm glow-band (which
   would otherwise show a vertical seam at the Intro corner). */
.hero-bg .left-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to right,
    var(--c-bg) 0%, var(--c-bg) 34%, rgba(32,32,32,0) 66%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 55%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 0 55%, transparent 86%);
  pointer-events: none;
}
.hero-bg .bottom-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 720px;
  width: 100%;
  object-fit: cover;
  z-index: 3;
}
/* warm gradient band at the foot of the hero — bleeds below into the Intro
   corner (direct child of .hero so it isn't clipped by .hero-bg) */
.hero > .glow-band {
  position: absolute;
  left: 0; right: 0; bottom: -160px;
  height: 360px;
  z-index: 1;
  background: var(--c-accent);
  filter: blur(90px);
  opacity: .45;
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 630px) 1fr;
  align-items: start;
}
.hero-content { display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 {
  margin-top: 24px;
  font-weight: var(--w-medium);
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.026em;     /* -2px @78 */
  text-transform: capitalize;
}
.hero h1 .serif {
  display: block;
  font-family: var(--f-serif);
  font-weight: var(--w-regular);
}
.hero .lede {
  margin-top: 24px;
  max-width: 630px;
  font-size: var(--fs-xl);
  line-height: 1.5;
  color: var(--c-text-muted);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}
.client-trust { margin-top: 56px; }
.client-trust .ct-label {
  font-family: var(--f-stat);
  font-weight: var(--w-medium);
  font-size: var(--fs-lg);
  letter-spacing: -0.03em;
  text-transform: capitalize;
}
.client-trust .ct-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.avatars { display: flex; }
.avatars .avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2.6px solid var(--c-bg);
  display: grid;
  place-items: center;
  background: var(--av);
  font-family: var(--f-stat);
  font-weight: var(--w-bold);
  font-size: 1.375rem;      /* 22px initial */
  line-height: 1;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
}
.avatars .avatar + .avatar { margin-left: -20px; }
.avatar--1 { --av: #3f9068; }   /* green */
.avatar--2 { --av: #d6296a; }   /* magenta */
.avatar--3 { --av: #e2571b; }   /* orange */
.avatar--4 { --av: #2f7bea; }   /* blue */
.ct-stat b {
  display: block;
  font-family: var(--f-stat);
  font-weight: var(--w-bold);
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  text-transform: capitalize;
}
.ct-stat span {
  font-family: var(--f-stat);
  font-size: var(--fs-sm);
  letter-spacing: -0.02em;
  color: var(--c-text-muted);
  text-transform: capitalize;
}

/* =====================================================================
   6b. REUSABLE SECTION HEADER (eyebrow + mixed serif/sans H2 + gray lead)
   Repeats across most content sections — keep generic.
   ===================================================================== */
.section-head { max-width: 1268px; }
.section-title {
  margin-top: 28px;
  max-width: 1024px;            /* heading wrap width — long titles drop to the next line */
  font-weight: var(--w-medium);
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.031em;     /* -2px @64 */
  text-transform: capitalize;
}
.section-title .serif {
  font-family: var(--f-serif);
  font-weight: var(--w-regular);
}
.section-lead {
  margin-top: 24px;
  max-width: 1230px;
  font-weight: var(--w-medium);
  font-size: var(--fs-xl);
  line-height: 1.5;
  color: var(--c-text-gray);
}

/* =====================================================================
   6c. "WHY CHOOSE US" — STATS BAND
   ===================================================================== */
.why { padding-block: var(--section-y); }
.stats {
  display: flex;
  align-items: stretch;
  gap: clamp(24px, 4vw, 64px);
  margin-top: 64px;
}
.stat { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.stat-divider {
  flex: none;
  align-self: center;
  width: 0;
  height: 166px;
  border-left: 1px dashed var(--c-border);
}
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(237,193,147,0.08);
  font-family: var(--f-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-md);
  color: var(--c-accent);
  white-space: nowrap;
}
.stat-chip img { width: 18px; height: 18px; flex: none; }
.stat-num {
  display: flex;
  align-items: flex-start;
  line-height: 1;
  color: #fff;
  font-weight: var(--w-regular);
  font-size: clamp(3.85rem, 1.7rem + 6.8vw, 7.4rem);  /* was 72→140px; reduced a notch */
  letter-spacing: -0.04em;
}
.stat-num sup {
  font-weight: var(--w-medium);
  font-size: 0.32em;
  letter-spacing: -0.04em;
  margin-top: 0.18em;
  margin-left: 0.04em;
}
.stat-desc {
  font-weight: var(--w-regular);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-text-gray);
  text-transform: capitalize;
}

@media (max-width: 760px) {
  .stats { flex-direction: column; gap: 40px; }
  .stat-divider { display: none; }
}

/* =====================================================================
   6d. ABOUT — portrait + text (two column)
   ===================================================================== */
.about { padding-block: var(--section-y); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.about-media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 520 / 680;
  background: linear-gradient(160deg, #2b2b2b, #161616);
}
.about-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* bottom darkening for caption legibility (figma: transparent → black, ~284px) */
.about-media::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(to bottom, rgba(119,119,119,0), #000);
  pointer-events: none;
}
.about-media figcaption {
  position: absolute;
  left: 42px; bottom: 36px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.about-media figcaption b {
  font-weight: var(--w-medium);
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 4rem);   /* up to 64px */
  line-height: 1;
  letter-spacing: -0.01em;
}
.about-media figcaption span {
  font-weight: var(--w-regular);
  font-size: 1.5rem;            /* 24px */
  line-height: 1.1;
}
.about-text { padding-top: 40px; }
.about-text .section-title { max-width: 633px; }
.about-intro {
  margin-top: 28px;
  max-width: 594px;
  font-weight: var(--w-medium);
  font-size: 1.5rem;          /* 24px Headline/H7 */
  line-height: 1.5;
  color: #fff;
}
.about-body {
  margin-top: 1.5em;
  max-width: 594px;
  font-weight: var(--w-regular);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-text-gray);
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-text { padding-top: 0; }
  .about-media { max-width: 520px; }
}

/* =====================================================================
   6e. OUR SERVICES — divided row list
   ===================================================================== */
.services { padding-block: var(--section-y); }
.service-list {
  margin-top: 56px;
  border-bottom: 2px solid var(--c-line);
}
.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding: 26px 38px 26px 22px;   /* rows inset from the divider lines */
  border-top: 2px solid var(--c-line);
  cursor: pointer;
}
.sr-title {
  font-weight: var(--w-regular);
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);   /* 28 → 40px */
  line-height: 1.2;
  letter-spacing: -0.025em;     /* -1px @40 */
  color: #fff;
  transition: transform .2s ease;
}
.sr-desc {
  font-weight: var(--w-regular);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-text-gray);
  transition: color .2s ease;
}
.sr-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 40px;
  color: #fff;
  transition: transform .2s ease;
}
.sr-arrow img { width: 26px; height: 20px; }
/* whole row is the link — title, desc and arrow all respond on hover */
.service-row:hover .sr-title { transform: translateX(8px); }
.service-row:hover .sr-desc { color: #fff; }
.service-row:hover .sr-arrow { transform: translateX(8px); }

.services-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  /* title + arrow share row 1; description spans row 2 underneath */
  .service-row {
    grid-template-columns: 1fr auto;
    gap: 8px 24px;
  }
  .sr-title { grid-column: 1; grid-row: 1; }
  .sr-arrow { grid-column: 2; grid-row: 1; }
  .sr-desc  { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
  /* stack the CTAs so "Let's Talk" drops to its own line */
  .services-actions { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   6f. PROCESS — slider (image + detail card) + step track
   ===================================================================== */
.process { padding-block: var(--section-y); }
.process-stage {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(24px, 3vw, 55px);
}
.process-media {
  border-radius: 60px;
  overflow: hidden;
  aspect-ratio: 756 / 509;
}
.process-media img { width: 100%; height: 100%; object-fit: cover; }

.process-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft-2, rgba(255,255,255,0.15));
  border-radius: 60px;
  padding: 54px;
}
.pc-num {
  font-family: var(--f-serif);
  font-weight: var(--w-bold);
  font-size: 3rem;             /* 48px */
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--c-accent);
}
.pc-nav {
  position: absolute;
  top: 54px; right: 54px;
  display: flex;
  gap: 12px;
}
.pc-nav button {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.6);
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.pc-nav button:hover:not(:disabled) { background: rgba(255,255,255,.12); border-color: #fff; }
.pc-nav button:disabled { opacity: .33; cursor: default; }
.pc-nav button svg { width: 22px; height: 22px; }
.pc-title {
  margin-top: 28px;
  font-weight: var(--w-medium);
  font-size: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);   /* up to 64px */
  line-height: 1;
  letter-spacing: -0.031em;
  text-transform: capitalize;
}
.pc-body {
  margin-top: 24px;
  font-weight: var(--w-regular);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: #fff;
}
.pc-body p + p { margin-top: 1.5em; }

/* step track */
.process-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 60px;
}
.process-steps::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 16px;                  /* through dot centre (32px dots) */
  height: 1px;
  background: var(--c-border);
  z-index: 0;                 /* sits behind the markers */
}
.process-steps .step {
  position: relative;
  z-index: 1;                 /* markers cover the line */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
/* marker = 32px ring disc + 20px centre disc (exact figma fills) */
.process-steps .dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #808080;          /* inactive ring */
}
.process-steps .dot::after {
  content: "";
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #1e1e1e;          /* inactive (hollow) centre */
}
.process-steps .step.is-active .dot { background: #d9d9d9; }      /* active ring */
.process-steps .step.is-active .dot::after { background: #cfaf81; } /* active peach centre */
.process-steps .step span {
  font-weight: var(--w-medium);
  font-size: 1.5rem;          /* 24px */
  line-height: 1.5;
  text-align: center;
  color: var(--c-text-gray);
  text-transform: capitalize;
}
.process-steps .step.is-active span { color: #fff; }

/* the horizontal step track doesn't fit below the desktop layout — hide it */
@media (max-width: 1024px) {
  .process-steps { display: none; }
}
@media (max-width: 860px) {
  .process-stage { grid-template-columns: 1fr; }
  .process-card { padding: 32px; }
}

/* =====================================================================
   6g. OUR TEAM — 3 member cards with dividers
   ===================================================================== */
.team { padding-block: var(--section-y); }
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 72px;
  margin-top: 56px;
}
/* all cards are equal-width 1fr columns → photos are identical height & flush
   to the section edges. Dividers live in the gaps (not via card padding). */
.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.team-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -36px;   /* centre of the 72px gap */
  width: 1px;
  background: var(--c-line);
}
.team-photo {
  border-radius: 30px;
  overflow: hidden;
  aspect-ratio: 368 / 502;
  margin-bottom: 28px;
}
.team-photo img {
  width: 100%; height: 100%;
  object-fit: cover;                 /* photos are pre-cropped to 368×502 */
}
.team-name {
  font-weight: var(--w-bold);
  font-size: 2rem;             /* 32px */
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.team-role {
  margin-top: 10px;
  font-family: var(--f-serif);
  font-weight: var(--w-bold);
  font-size: 1.5rem;           /* 24px Didot Bold */
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--c-accent);
}
.team-bio {
  margin-top: 16px;
  font-weight: var(--w-regular);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-text-gray);
}
.team-actions {
  margin-top: auto;            /* align buttons to the bottom across cards */
  padding-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 820px) {
  .team-grid { grid-template-columns: 1fr; column-gap: 0; gap: 48px; }
  .team-card::after { display: none; }
}

/* =====================================================================
   6h. AREAS OF PRACTICE — text + image, signature rounded corner + glow
   ===================================================================== */
.areas {
  position: relative;
  background: var(--c-bg);
  border-top-left-radius: 80px;
  padding-block: var(--section-y);
  /* no overflow:hidden — the glow must bleed down past the bottom so the
     How We Work rounded corner below can reveal it (like the footer) */
}
.areas-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.areas-content .section-lead { color: rgba(255,255,255,0.66); max-width: 520px; }
.areas-list {
  margin-top: 36px;
  border-top: 1px solid var(--c-border);
}
.areas-list li {
  padding-block: 18px;
  border-bottom: 1px solid var(--c-border);
  font-weight: var(--w-medium);
  font-size: 1.5rem;           /* 24px */
  letter-spacing: -0.03em;     /* -0.72px */
  text-transform: capitalize;
}
.areas-media {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 659 / 877;
}
.areas-media img { width: 100%; height: 100%; object-fit: cover; }
/* glow at the section foot is provided by the reusable .glows-below (see HTML) */

@media (max-width: 820px) {
  .areas-grid { grid-template-columns: 1fr; }
  .areas-media { order: -1; aspect-ratio: 4/3; }
}

/* =====================================================================
   6i. HOW WE WORK — 3 numbered process cards (middle featured)
   ===================================================================== */
/* .hww uses the reusable .rounds-up seam (see HTML) */
.hww {
  padding-block: var(--section-y);
}
.hww-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.7vw, 39px);
  margin-top: 48px;
}
.hww-card {
  display: flex;
  flex-direction: column;
  min-height: 278px;
  padding: 32px;
  border-radius: 22px;
  background: var(--c-bg);
  border: 1px solid rgba(255,255,255,0.15);
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
/* highlighted look is the hover state */
.hww-card:hover {
  background: var(--c-surface);
  border-color: transparent;
  box-shadow: 4.681px 10.7px 44.138px rgba(0,0,0,0.3);
  transform: translateY(-4px);
}
.hww-num {
  font-family: var(--f-serif);
  font-weight: var(--w-bold);
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--c-accent);
}
.hww-title {
  margin-top: 52px;
  font-weight: var(--w-bold);
  font-size: 1.5rem;           /* 24px */
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.hww-desc {
  margin-top: 16px;
  font-weight: var(--w-regular);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-text-gray);
}

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

/* =====================================================================
   6j. TESTIMONIALS — white review cards (horizontal carousel)
   ===================================================================== */
.testimonials { padding-block: var(--section-y); overflow: hidden; }
.testi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.google-badge {
  flex: none;
  width: 213px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: var(--c-surface);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 22px;
  text-align: center;
}
.google-badge .gb-logo { width: 48px; height: auto; }
.google-badge .gb-stars { display: flex; gap: 6px; }
.google-badge .gb-stars img { width: 22px; height: 22px; }
.google-badge .gb-text {
  font-weight: var(--w-medium);
  font-size: var(--fs-lg);
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .testi-head { flex-direction: column; }
  .google-badge { align-self: flex-start; }
}
.testi-track {
  display: flex;
  gap: 40px;
  margin-top: 48px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-card {
  flex: 0 0 min(522px, 85vw);
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 22px;
  scroll-snap-align: start;
}
.tc-quote img { width: 40px; height: 40px; }
.tc-text {
  margin-top: 12px;
  font-weight: var(--w-regular);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-text-gray);
}
.tc-text .more { color: rgba(107,114,128,0.33); }
.tc-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.tc-author { display: flex; align-items: center; gap: 16px; }
.tc-avatar {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
}
.tc-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.tc-name { font-weight: var(--w-bold); font-size: var(--fs-xl); color: #202020; }
.tc-time { font-weight: var(--w-medium); font-size: var(--fs-sm); color: var(--c-text-gray); opacity: .6; }
.tc-stars { display: flex; gap: 8px; flex: none; }
.tc-stars img { width: 24px; height: 24px; }

/* narrow cards: stack the card footer so the name doesn't get squeezed and
   the stars aren't jammed against the edge */
@media (max-width: 600px) {
  .tc-foot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .tc-author { width: 100%; }
  .tc-stars { width: 100%; }
}

/* =====================================================================
   6k. FAQ — frosted accordion over courtroom image + glow
   ===================================================================== */
.faq {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
}
.faq-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.faq-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;   /* anchor to top so it doesn't shift when the section grows */
  opacity: .6;
}
.faq-bg::before {           /* subtle left darkening so heading stays legible */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--c-bg) 4%, rgba(32,32,32,0) 45%);
}
.faq-bg::after {            /* bottom fade into page only (keep top visible) */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(32,32,32,0) 62%, var(--c-bg));
}
.faq-glow {
  position: absolute;
  top: 80px; right: -60px;
  width: 420px; height: 360px;
  background: var(--c-accent);
  filter: blur(70px);
  opacity: .5;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.faq-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 523px) minmax(0, 630px);
  justify-content: space-between;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.faq-intro .section-lead { color: rgba(255,255,255,0.66); max-width: 520px; }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(99,99,99,0.20);
  backdrop-filter: blur(40px);
}
.faq-item { border-radius: 12px; }
.faq-item > summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 20px 5px;     /* tighter bottom → less gap to the answer */
  cursor: pointer;
  list-style: none;
  /* question text sits directly in <summary> (core/details) */
  font-weight: var(--w-medium);
  font-size: 1.2rem;          /* ~19px */
  line-height: 1.35;
  text-transform: capitalize;
  color: #fff;
}
.faq-item > summary::-webkit-details-marker { display: none; }
/* circular chevron badge, recreated as a pseudo-element */
.faq-item > summary::before {
  content: "";
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23202020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 16px;
  background-repeat: no-repeat;
  transform: rotate(180deg);
  transition: transform .25s ease, background-color .25s ease;
}
.faq-a {
  margin: 0 20px 0 80px;
  font-weight: var(--w-regular);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #202020;
  opacity: .8;
}
/* open state — item turns into a white card. Bottom space is padding on the
   box (reliable across contexts; child margins get zeroed by core's flow
   layout, so we don't depend on the answer's margin). */
.faq-item[open] {
  background: #fff;
  padding-bottom: 24px;
}
.faq-item[open] > summary { color: #202020; }
.faq-item[open] > summary::before {
  transform: rotate(0deg);
  background-color: var(--c-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The FAQ is now built from core block groups; neutralise WordPress's
   flow-layout margins so the grid/flex spacing stays as designed. */
.faq > *,
.faq-grid > *,
.faq-list > * { margin-block: 0; }

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

/* =====================================================================
   6l. CTA BANNER — peach card with statue (inverted colours)
   ===================================================================== */
.cta-banner { padding-block: var(--section-y); }
.cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 393px;
  padding: clamp(32px, 4vw, 64px);
  border-radius: 22px;
  background: var(--c-accent);
  border: 1px solid rgba(0,0,0,0.15);
  color: var(--c-bg);
}
/* statue rises above the top edge, and its lower body is cropped at the card
   bottom (clip-path crops only the bottom; the head stays free above the top) */
.cta-card .cta-statue {
  position: absolute;
  right: clamp(-32px, -1.2vw, -8px);   /* pushed right so the scales clear the text */
  bottom: -140px;
  height: 168%;
  width: auto;
  pointer-events: none;
  z-index: 1;
  clip-path: inset(0 0 139px 0);   /* crop the part hanging below the card */
}
.cta-title {
  max-width: 60%;
  font-weight: var(--w-medium);
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.031em;
  text-transform: capitalize;
}
.cta-title .serif { font-family: var(--f-serif); font-weight: var(--w-regular); }
.cta-sub { margin-top: 22px; max-width: 60%; font-weight: var(--w-medium); font-size: 2rem; }
.cta-lead { margin-top: 12px; font-weight: var(--w-medium); font-size: var(--fs-xl); }
.cta-actions { margin-top: 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* tablet + phone: the statue is decorative and crowds the text in a narrow
   card, so hide it and let the card reflow as a clean text + CTA block */
@media (max-width: 1024px) {
  .cta-card {
    min-height: 0;
    padding: clamp(32px, 4vw, 56px);
  }
  .cta-card .cta-statue { display: none; }
  .cta-title { max-width: 100%; }
  .cta-sub { max-width: 100%; }
}
@media (max-width: 768px) {
  .cta-card { padding: 36px 28px; }
  .cta-sub { font-size: 1.5rem; }
}

/* =====================================================================
   6m. BLOG / INSIGHTS — divided rows (thumb + text)
   ===================================================================== */
section.blog { padding-block: var(--section-y); }
.blog-list { margin-top: 48px; border-top: 1px solid var(--c-border); }
.blog-row {
  display: grid;
  grid-template-columns: 413px minmax(0, 1fr);
  gap: 40px;
  padding-block: 23px;
  border-bottom: 1px solid var(--c-border);
  align-items: start;
}
.blog-thumb {
  width: 100%;
  aspect-ratio: 413 / 264;
  border-radius: 12px;
  overflow: hidden;
  background: #efefef;
}
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-body { display: flex; flex-direction: column; gap: 26px; }
.blog-title {
  font-weight: var(--w-bold);
  font-size: 2rem;             /* 32px */
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-transform: capitalize;
}
.blog-excerpt { font-weight: var(--w-regular); font-size: var(--fs-lg); line-height: 1.5; color: var(--c-text-gray); }
.blog-more {
  font-weight: var(--w-medium);
  font-size: var(--fs-md);
  letter-spacing: -0.03em;
  text-transform: capitalize;
  color: #fff;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  align-self: flex-start;
}
.blog-actions { margin-top: 40px; }

@media (max-width: 760px) {
  .blog-row { grid-template-columns: 1fr; }
}

/* =====================================================================
   6n. CONTACT — details + form
   ===================================================================== */
/* .contact uses the reusable .glows-below seam (see HTML) */
.contact { padding-block: var(--section-y); }
.contact > .container { position: relative; z-index: 1; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 510px) minmax(0, 605px);
  justify-content: space-between;
  gap: clamp(40px, 6vw, 120px);
  margin-top: 48px;
}
.contact-details { display: flex; flex-direction: column; gap: 32px; }
.cd-item { display: flex; gap: 12px; align-items: flex-start; }
.cd-item > img { width: 24px; height: 24px; flex: none; }
.cd-label {
  font-weight: var(--w-medium);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  color: var(--c-accent);
  letter-spacing: .02em;
}
.cd-value { margin-top: 12px; font-weight: var(--w-medium); font-size: var(--fs-lg); line-height: 1.4; color: #fff; }
.cd-note { margin-top: 8px; font-size: var(--fs-sm); color: rgba(255,255,255,.7); }
.cd-link {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;   /* underline shows on hover */
  color: #fff;
  font-weight: var(--w-medium);
  font-size: var(--fs-md);
  transition: border-color .2s ease;
}
.cd-link:hover { border-bottom-color: #fff; }
.cd-link .cd-arrow { width: 18px; height: 18px; color: var(--c-accent); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-weight: var(--w-medium); font-size: var(--fs-lg); color: #fff; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
}
.field textarea { min-height: 193px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(255,255,255,.4); }
.field select { appearance: none; color: rgba(255,255,255,.4); }
.field select option { color: #202020; }
.contact-form .btn-submit {
  margin-top: 4px;
  padding: 16px;
  border: 0;
  border-radius: 8px;
  background: var(--c-accent);
  color: var(--c-bg);
  font-family: var(--f-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-lg);
  cursor: pointer;
  transition: background-color .2s ease;
}
.contact-form .btn-submit:hover { background: #f2cda6; }

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

/* =====================================================================
   6o. SITE FOOTER
   ===================================================================== */
/* .site-footer uses the reusable .rounds-up seam (see HTML) */
.site-footer {
  overflow: hidden;
  padding-top: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  padding-bottom: 32px;            /* minimal space below the copyright row */
}
.footer-inner { position: relative; }
.footer-top,
.footer-cols,
.footer-bottom { position: relative; z-index: 1; }
.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.footer-title {
  font-weight: var(--w-medium);
  font-size: clamp(3rem, 1.6rem + 4.5vw, 5rem);   /* up to 80px */
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.footer-title .serif {
  display: block;
  font-family: var(--f-serif);
  font-weight: var(--w-regular);
  font-size: 0.6em;            /* ~48px */
  text-transform: none;
}
/* email signup — a real input with a submit arrow + underline */
.footer-signup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 420px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
.footer-signup input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: #fff;
  font-family: var(--f-sans);
  font-weight: var(--w-regular);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);   /* up to 40px */
  letter-spacing: -0.02em;
}
.footer-signup input::placeholder { color: rgba(255,255,255,0.92); }
.footer-signup input:focus { outline: none; }
.footer-signup input:focus::placeholder { color: rgba(255,255,255,0.45); }
.footer-signup button {
  flex: none;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.footer-signup button svg { width: 28px; height: 28px; }

.footer-cols {
  display: flex;
  flex-direction: column;        /* Social media, then Address below it */
  gap: 60px;
  margin-top: 72px;
}
.footer-col h4 { font-weight: var(--w-regular); font-size: 1.5rem; margin-bottom: 24px; }
.footer-social { display: grid; grid-template-columns: repeat(4, max-content); gap: 6px 24px; justify-content: start; }
.footer-social a { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-lg); text-transform: capitalize; }
.footer-social a .soc-arrow { width: 14px; height: 14px; }
.footer-address { font-size: var(--fs-lg); line-height: 1.5; max-width: 322px; }

/* ghost wordmark fills the empty lower-right area (below the signup,
   above the copyright row) without overlapping the email field */
.footer-ghost {
  position: absolute;
  right: var(--gutter);            /* stay within the section content width */
  top: 200px;
  margin: 0;
  font-weight: var(--w-bold);
  font-size: clamp(4.5rem, 0.5rem + 12vw, 12rem);   /* ~width of the email field above */
  line-height: .85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: right;
  color: rgba(255,255,255,0.05);
  pointer-events: none;
  z-index: 0;
}
.footer-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(64px, 8vw, 112px);
  padding-top: 24px;
  font-size: var(--fs-md);
  flex-wrap: wrap;
}
/* full-bleed divider (spans the whole browser width, clipped by the footer) */
.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(229,231,235,0.2);
}
.footer-legal { display: flex; gap: 32px; }

@media (max-width: 760px) {
  .footer-signup { min-width: 0; width: 100%; }
  .footer-ghost { display: none; }
  /* stack copyright + legal, and keep clear of the floating call button */
  .site-footer { padding-bottom: 104px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-legal { flex-wrap: wrap; gap: 14px 24px; }
}

/* =====================================================================
   7. INTRO STATEMENT
   ===================================================================== */
/* straight-edged section that covers the hero glow-band cleanly (no corner) */
.intro {
  position: relative;
  z-index: 1;
  background: var(--c-bg);
  padding-block: var(--section-y);
}
.intro .eyebrow { margin-bottom: 40px; }
.intro-statement {
  max-width: 1275px;
  font-weight: var(--w-medium);
  font-size: var(--fs-statement);
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.intro-statement .muted { color: var(--c-text-dim); }

/* =====================================================================
   8. RESPONSIVE
   ===================================================================== */
/* nav collapse handled in the Navigation-block layer below (breakpoint 1180) */
/* Get a Free Consultation moves into the menu */
@media (max-width: 820px) {
  .header-cta .btn--accent { display: none; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
/* push the statue further right on smaller screens so it sits behind the
   text on the right rather than covering it on the left */
@media (max-width: 1024px) { .hero-bg .statue { right: -190px; } }
@media (max-width: 600px)  { .hero-bg .statue { right: -120px; } }
/* tighten the call button to just "Call" */
@media (max-width: 520px) {
  .hero-actions { flex-wrap: wrap; }
  .header-cta .btn--orange .long { display: none; }
  .hc-avail { display: none; }
}

/* =====================================================================
   WordPress block-theme integration layer
   (bridges ported markup that now uses inline SVG / wrapper elements)
   ===================================================================== */

/* Testimonial card icons are inlined as <svg> in the block render. */
.tc-quote { color: #202020; }   /* quote mark uses currentColor (was inheriting white → invisible) */
.tc-quote svg { width: 40px; height: 40px; }
.tc-stars svg { width: 24px; height: 24px; flex: none; }

/* Contact form: the shortcode renders a form inside the .contact-form panel. */
.contact-form-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Contact Form 7 field styling to match the dark form tokens. */
/* CF7 auto-paragraphs are disabled (wpcf7_autop_or_not); fields are .field divs. */
.contact-form .wpcf7-form .field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.contact-form .wpcf7-form .field + .field { margin-top: 12px; }
.contact-form .wpcf7 label { font-weight: var(--w-medium); font-size: var(--fs-lg); color: #fff; }
.contact-form .wpcf7-form input[type="text"],
.contact-form .wpcf7-form input[type="email"],
.contact-form .wpcf7-form select,
.contact-form .wpcf7-form textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
}
.contact-form .wpcf7-form textarea { min-height: 140px; resize: vertical; }
.contact-form .wpcf7-form select { appearance: none; color: rgba(255,255,255,.5); }
.contact-form .wpcf7-form select option { color: #202020; }
.contact-form .wpcf7-form input::placeholder,
.contact-form .wpcf7-form textarea::placeholder { color: rgba(255,255,255,.4); }
.contact-form .wpcf7-form .wpcf7-submit {
  width: 100%;
  padding: 16px 32px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: var(--w-medium);
  letter-spacing: -0.03em;
  cursor: pointer;
}
.contact-form .wpcf7-form .wpcf7-submit:hover { background: #f2cda6; }

/* Submit + spinner as a single loading button. The spinner sits inside the
   button (right side); during submit the button is visually disabled. */
.contact-form .wpcf7-form .submit-wrap { position: relative; display: block; }
.contact-form .wpcf7-form .submit-wrap .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 24px;
  margin: 0;
  transform: translateY(-50%);
}
.contact-form .wpcf7-form .submit-wrap .wpcf7-spinner::before { background-color: var(--c-accent-ink); }
.contact-form .wpcf7-form.submitting .wpcf7-submit {
  opacity: .7;
  pointer-events: none;
}

/* Process slider block wrapper should not add layout of its own. */
.wp-block-sklaw-process-slider { display: contents; }
.contact-form .wpcf7-form { display: flex; flex-direction: column; gap: 4px; }
.contact-form .wpcf7 { width: 100%; }

/* =====================================================================
   Header Navigation block (core/navigation) — styled to the pill design
   ===================================================================== */
/* The <nav class="main-nav"> is the centred pill on desktop. */
.site-header .main-nav.wp-block-navigation {
  grid-column: 2;
  justify-self: center;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  height: 48px;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  --navigation-layout-justification-setting: center;
}
.site-header .main-nav .wp-block-navigation__container {
  gap: 4px;
  flex-wrap: nowrap;
}
.site-header .main-nav .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  height: 40px;
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  color: #fff;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.site-header .main-nav .wp-block-navigation-item__content:hover { background: rgba(255,255,255,.06); }
.site-header .main-nav .current-menu-item > .wp-block-navigation-item__content,
.site-header .main-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  border: 1px solid var(--c-border-soft);
  background-image: linear-gradient(58deg, rgba(0,0,0,0.22) 22%, rgba(255,255,255,0) 115%);
  font-weight: var(--w-medium);
}

/* Dropdown / submenu (hierarchy) */
.site-header .main-nav .wp-block-navigation__submenu-container {
  background: var(--c-bg);
  border: 1px solid var(--c-border-soft);
  border-radius: 16px;
  padding: 8px;
  margin-top: 10px;
  min-width: 220px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
/* Invisible bridge over the 10px gap so the pointer stays within the menu's
   hover region while travelling from "Services" down to the dropdown. */
.site-header .main-nav .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.site-header .main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  width: 100%;
  height: auto;
  padding: 10px 12px;
  border-radius: 10px;
}

/* Services mega-menu (desktop only). The dropdown becomes a multi-column grid
   so all service links fit: up to 5 per row, extra services wrap to new rows.
   The panel auto-sizes to the number of items (few items = narrow panel).
   To allow 6 per row later, raise the max-width by one column (~166px). */
@media (min-width: 1181px) {
  .site-header .main-nav .wp-block-navigation__submenu-container {
    display: grid;
    /* 3 columns → 15 services fill 5 rows. Change the count to widen/narrow. */
    grid-template-columns: repeat(3, 160px);
    gap: 6px;
    width: max-content;
    max-width: calc(100vw - 24px);
    padding: 12px;
    /* centre the panel under the Services button */
    left: 50%;
    transform: translateX(-50%);
  }
  .site-header .main-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    width: auto;
    margin: 0;
  }
  .site-header .main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    white-space: normal;
    line-height: 1.25;
  }
}

/* Hamburger (open) button — peach circle, dark icon */
.site-header .wp-block-navigation__responsive-container-open {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-bg);
  align-items: center;
  justify-content: center;
  padding: 0;
}
.site-header .wp-block-navigation__responsive-container-open svg { fill: var(--c-bg); width: 22px; height: 22px; }

/* Overlay (mobile menu) theming */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--c-bg);
  padding: 32px 24px;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 4px; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: var(--fs-lg);
  padding: 14px 4px;
  width: 100%;
  border-bottom: 1px solid var(--c-border-soft);
  border-radius: 0;
}
.site-header .wp-block-navigation__responsive-container-close { color: #fff; }
.site-header .wp-block-navigation__responsive-container-close svg { fill: #fff; }

/* Responsive: collapse to hamburger at <=1180 (override core's 600px default).
   Higher specificity (.site-header …) beats core's media rules. */
@media (max-width: 1200px) {
  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.is-menu-open) { display: none; }
  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .site-header .main-nav.wp-block-navigation {
    border: 0; background: transparent; padding: 0; height: auto; width: auto;
    justify-self: end;
  }
}
@media (min-width: 1181px) {
  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: flex; position: relative; width: auto;
    background: transparent; padding: 0;
  }
  .site-header .wp-block-navigation__responsive-container-open { display: none; }
}

/* Brand scales down on smaller screens so it never crowds the menu/hamburger.
   (Desktop target: wordmark 48px / emblem 64px.) */
@media (max-width: 1024px) {
  .brand-emblem { height: 56px; }
  .brand-wordmark { height: 42px; }
}
@media (max-width: 600px) {
  .brand { gap: 12px; }
  .brand-emblem { height: 48px; }
  .brand-wordmark { height: 34px; }
}
@media (max-width: 400px) {
  .brand-wordmark { display: none; }   /* emblem-only on very narrow screens */
}

/* =====================================================================
   Header Navigation — refinements
   ===================================================================== */
/* CTA buttons live in the menu data but only show inside the mobile overlay */
.site-header .main-nav .wp-block-buttons.mm-cta { display: none; }

@media (max-width: 1200px) {
  /* Hamburger sits at the far right, after the Call button */
  .site-header .header-cta { grid-column: 2; justify-self: end; }
  .site-header .main-nav.wp-block-navigation { grid-column: 3; justify-self: end; }
}

/* ---- Branded mobile overlay ---- */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  background:
    radial-gradient(130% 55% at 100% 0, rgba(237,193,147,0.16), transparent 60%),
    var(--c-bg);
  padding: 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%;
  padding: 96px 28px 44px;
  display: flex;
  flex-direction: column;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: var(--fs-xl);
  font-weight: var(--w-medium);
  padding: 16px 6px;
  width: 100%;
  color: #fff;
  border-bottom: 1px solid var(--c-border-soft);
  border-radius: 0;
  transition: color .2s ease, padding-left .2s ease;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  background: transparent;
  color: var(--c-accent);
  padding-left: 14px;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
  color: var(--c-accent);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-border-soft);
}
/* close (X) button — peach, top-right */
.site-header .wp-block-navigation__responsive-container-close {
  top: 22px; right: 24px;
  color: var(--c-accent);
}
.site-header .wp-block-navigation__responsive-container-close svg { fill: var(--c-accent); width: 26px; height: 26px; }

/* ---- CTA buttons at the bottom of the overlay ---- */
.site-header .wp-block-navigation__responsive-container.is-menu-open .mm-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 28px;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .mm-cta .wp-block-button { width: 100%; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .mm-cta .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  border-radius: var(--r-pill);
  font-weight: var(--w-medium);
  letter-spacing: -0.03em;
}
.site-header .mm-cta .is-style-orange .wp-block-button__link { background: var(--c-accent-strong); color: var(--c-accent-ink); font-weight: var(--w-semibold); }
.site-header .mm-cta .is-style-accent .wp-block-button__link { background: var(--c-accent); color: var(--c-accent-ink); }

/* =====================================================================
   Header Navigation — fixes (row wrap, overlay width, overlay CTA detail)
   ===================================================================== */
/* Keep brand · CTA · hamburger on a single row.
   (Nav block sits in col 3 but precedes the CTA in the DOM, so sparse grid
   auto-placement was bumping the col-2 CTA onto a new row.) */
.site-header .nav-inner > * { grid-row: 1; }

/* Overlay: constrain the menu column so links aren't stretched edge-to-edge */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  max-width: 460px;
  margin: 0 auto;
  padding: 96px 32px 48px;
}

/* Overlay "Get a Free Consultation" → trailing up-right arrow (like the header) */
.site-header .mm-cta .is-style-accent .wp-block-button__link::after {
  content: "";
  width: 20px; height: 20px;
  margin-left: 8px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 17 17 7M17 7H8M17 7v9' stroke='%23202020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Overlay Call button → "Available 24/7" caption underneath (like the header) */
.site-header .mm-cta .is-style-orange {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.site-header .mm-cta .is-style-orange::after {
  content: "Available 24/7";
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}

/* =====================================================================
   FAQ accordion — smooth expand / collapse
   ===================================================================== */
/* Allow height to animate to/from the intrinsic `auto` size. */
:root { interpolate-size: allow-keywords; }

.faq-item { transition: background-color .3s ease; }
.faq-item > summary { transition: color .25s ease; }

/* Phase 1: the box expands/folds to the answer's full height (height only —
   no opacity on the height-bearing box, so the end of the expand stays clean). */
.faq-item::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size .34s cubic-bezier(.4, 0, .2, 1),
    content-visibility .34s allow-discrete;
}
.faq-item[open]::details-content {
  block-size: auto;
}

/* Phase 2: once the box has opened, the answer fades in from the top.
   Opacity/transform don't affect layout, so they can't cause a height jump. */
.faq-a {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease;
}
.faq-item[open] .faq-a {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .16s;   /* let the box finish expanding first */
}

/* ============================================================
   Interior pages — Service template (page-service.html)
   Pill (auto = page name) + content head (heading/description/
   featured image) + body, mirroring the Insights section head;
   standard .container width.
   ============================================================ */
.page-service-body {
  /* Top padding clears the absolutely-positioned site header. */
  padding-block: clamp(7.5rem, 5.5rem + 5vw, 10.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.page-service-body > .container > .wp-block-post-title.eyebrow {
  /* The page name rendered as the section-head pill. */
  margin: 0;
  line-height: 1;
}

/* Shared editor-content (prose) styling for the Service template and single
   blog posts. `:is()` keeps one source for both layouts. */

/* On the Service template the first content heading auto-styles as the big
   section heading (no class needed); an explicit .section-title also works. */
.page-service-body .wp-block-post-content > h2:first-of-type,
:is(.page-service-body, .single-article) .wp-block-post-content h2.section-title {
  margin-top: 28px;
  margin-bottom: 0;
  /* Match the post-content contentSize (1262px) so the heading occupies the
     same column as the body and aligns with it at every width — a narrower
     max-width would get centre-offset, a wider one would span full-bleed. */
  max-width: 1262px;
  font-weight: var(--w-medium);
  font-size: var(--fs-h2);
  line-height: 1.05;
}
/* Remaining body headings stay smaller (single posts: all in-content h2s). */
.page-service-body .wp-block-post-content h2:not(.section-title):not(:first-of-type),
.single-article .wp-block-post-content h2:not(.section-title) {
  font-size: var(--fs-statement);
  font-weight: var(--w-medium);
  line-height: 1.15;
  margin-top: 1.7em;
  margin-bottom: .4em;
}
:is(.page-service-body, .single-article) .wp-block-post-content h3 {
  font-size: var(--fs-xl);
  font-weight: var(--w-medium);
  margin-top: 1.4em;
  margin-bottom: .35em;
}
:is(.page-service-body, .single-article) .wp-block-post-content p:not(.section-lead):not(.faq-a),
:is(.page-service-body, .single-article) .wp-block-post-content li {
  color: var(--c-text-muted);
  font-size: var(--fs-lg);
  line-height: 1.7;
}
:is(.page-service-body, .single-article) .wp-block-post-content p:not(.faq-a) { margin-block: 1em; }
:is(.page-service-body, .single-article) .wp-block-post-content ul,
:is(.page-service-body, .single-article) .wp-block-post-content ol { margin-block: 1em; padding-left: 1.5em; }
/* Restore markers stripped by the global `ul { list-style: none }` reset. */
:is(.page-service-body, .single-article) .wp-block-post-content ul { list-style: disc; }
:is(.page-service-body, .single-article) .wp-block-post-content ol { list-style: decimal; }
:is(.page-service-body, .single-article) .wp-block-post-content li { margin-block: .4em; padding-left: .25em; }
:is(.page-service-body, .single-article) .wp-block-post-content li::marker { color: var(--c-accent); }
:is(.page-service-body, .single-article) .wp-block-post-content a { text-decoration: underline; }

/* Featured image / inline images inside the body */
:is(.page-service-body, .single-article) .wp-block-post-featured-image,
:is(.page-service-body, .single-article) .wp-block-image {
  margin-block: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}
:is(.page-service-body, .single-article) .wp-block-post-featured-image img,
:is(.page-service-body, .single-article) .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

/* ============================================================
   Single blog post (single.html) — post left, sticky "Recent
   Posts" sidebar right, then the CTA banner.
   ============================================================ */
.single-article {
  padding-block: clamp(7.5rem, 5.5rem + 5vw, 10.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.single-article .single-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  align-items: start;
}
.single-article .post-main > .wp-block-post-title {
  margin: 0 0 .2em;
  font-size: var(--fs-h2);
  font-weight: var(--w-medium);
  line-height: 1.05;
  max-width: 18ch;
}
/* Shared brand sidebar — single post + blog archive.
   The aside is a transparent sticky column; each section (categories,
   recent posts) sits in its own .aside-card. The search sits bare. */
.post-aside {
  position: sticky;
  top: 110px;
}
.post-aside > * + * { margin-top: 20px; }
.aside-card {
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-card);
  background: var(--c-surface, #252525);
  padding: 24px;
}
.post-aside .aside-title {
  font-size: var(--fs-xl);
  font-weight: var(--w-medium);
  margin: 0 0 16px;
}
/* Search */
.post-aside .wp-block-search__label { display: none; }
.post-aside .wp-block-search .wp-block-search__inside-wrapper {
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.2);
  padding: 4px 4px 4px 6px;
}
.post-aside .wp-block-search input.wp-block-search__input {
  background: transparent;
  border: 0;
  color: #fff;
  padding: 10px 12px;
}
.post-aside .wp-block-search input.wp-block-search__input::placeholder { color: var(--c-text-muted); }
.post-aside .wp-block-search button.wp-block-search__button {
  margin: 0;
  background: var(--c-accent);
  color: var(--c-bg);
  border: 0;
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-weight: var(--w-medium);
}
/* Categories list */
.post-aside .wp-block-categories { list-style: none; padding: 0; margin: 0; }
.post-aside .wp-block-categories li {
  padding: 10px 0;
  border-top: 1px solid var(--c-border-soft);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.post-aside .wp-block-categories li:first-child { border-top: 0; padding-top: 0; }
.post-aside .wp-block-categories a { font-weight: var(--w-medium); }
/* Recent posts */
.post-aside .wp-block-latest-posts { list-style: none; padding: 0; margin: 0; }
.post-aside .wp-block-latest-posts li { padding: 12px 0; border-top: 1px solid var(--c-border-soft); }
.post-aside .wp-block-latest-posts li:first-child { border-top: 0; padding-top: 0; }
.post-aside .wp-block-latest-posts a { font-weight: var(--w-medium); line-height: 1.35; display: inline-block; }
.post-aside .wp-block-latest-posts__post-date {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-sm, .875rem);
  color: var(--c-text-muted);
}

/* ============================================================
   Blog archive (home.html) — post grid left, sidebar right.
   Each card: image, category, title, 2-line excerpt.
   ============================================================ */
.blog-archive {
  padding-block: clamp(7.5rem, 5.5rem + 5vw, 10.5rem) clamp(3rem, 2rem + 3vw, 5rem);
}
.blog-archive .archive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  align-items: start;
}
.blog-archive .archive-head { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.blog-archive .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Zero WordPress's flow-layout margin-block-start (it's added to every item
   except the first, which misaligns the first grid row); spacing comes from
   the grid `gap` instead. */
.blog-archive .wp-block-post-template > li { display: flex; flex-direction: column; margin-block: 0; }
.blog-archive .wp-block-post-featured-image {
  margin: 0 0 16px;
  border-radius: var(--r-card);
  overflow: hidden;
}
.blog-archive .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.blog-archive .wp-block-post-terms {
  font-family: var(--f-label);
  font-size: var(--fs-sm, .875rem);
  font-weight: var(--w-semibold);
  color: var(--c-accent);
  margin-bottom: 8px;
}
.blog-archive .wp-block-post-terms a { color: var(--c-accent); }
.blog-archive .wp-block-post-title {
  font-size: var(--fs-xl);
  font-weight: var(--w-medium);
  line-height: 1.25;
  margin: 0 0 8px;
}
.blog-archive .wp-block-post-excerpt__excerpt,
.blog-archive .wp-block-post-excerpt p {
  color: var(--c-text-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-archive .wp-block-post-excerpt__more-text { display: none; }
.blog-archive .wp-block-query-pagination {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  gap: 8px;
  flex-wrap: wrap;
}
.blog-archive .wp-block-query-pagination .page-numbers,
.blog-archive .wp-block-query-pagination a {
  padding: 8px 14px;
  border: 1px solid var(--c-border-soft);
  border-radius: 10px;
}
.blog-archive .wp-block-query-pagination .page-numbers.current {
  background: var(--c-accent);
  color: var(--c-bg);
  border-color: var(--c-accent);
}

@media (max-width: 1024px) {
  .single-article .single-grid { grid-template-columns: 1fr; }
  .blog-archive .archive-grid { grid-template-columns: 1fr; }
  .post-aside { position: static; }
}
@media (max-width: 640px) {
  .blog-archive .wp-block-post-template { grid-template-columns: 1fr; }
}

/* ============================================================
   Resources page (sklaw/section-resources) — categories of
   logo cards, each linking out to an external organisation.
   ============================================================ */
.resources {
  /* Top padding clears the absolutely-positioned site header. */
  padding-block: clamp(7.5rem, 5.5rem + 5vw, 10.5rem) clamp(3rem, 2rem + 3vw, 5rem);
}
.resources .section-head { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.resource-cat + .resource-cat { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.resource-cat-title {
  font-size: var(--fs-statement);
  font-weight: var(--w-medium);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-border);
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.resource-card { display: flex; flex-direction: column; gap: 16px; }
.resource-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  padding: 24px;
  background: #fff;
  border-radius: var(--r-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.resource-logo:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.resource-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.resource-logo-text {
  font-family: var(--f-serif);
  font-size: var(--fs-xl);
  font-weight: var(--w-medium);
  line-height: 1.2;
  color: #202020;
  text-align: center;
}
.resource-card .btn { align-self: flex-start; }

@media (max-width: 900px) { .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .resource-grid { grid-template-columns: 1fr; } }

/* When a home-page section pattern is the FIRST content on a default-template
   page (About, Contact, FAQs), its top padding must clear the fixed header.
   Scoped to the first child of post-content so the home hero is unaffected. */
main > .entry-content > .about:first-child,
main > .entry-content > .services:first-child,
main > .entry-content > .contact:first-child,
main > .entry-content > .faq:first-child {
  padding-top: clamp(7.5rem, 5.5rem + 5vw, 10.5rem);
}

/* ============================================================
   Footer service-area accordion (native <details>) — suburb
   pages + prison visits. Links stay in the DOM when collapsed.
   ============================================================ */
.footer-suburbs {
  border-top: 1px solid var(--c-border-soft);
  border-bottom: 1px solid var(--c-border-soft);
  padding: 18px 0;
  /* drop below the absolute "SEDA KILIC" ghost wordmark so they don't overlap */
  margin-top: clamp(28px, 3.5vw, 60px);
}
/* The ~106px reserved space above the footer-bottom is its margin-top. When the
   accordion opens it grows ~84px, so shrink that margin by the same amount and
   the footer-bottom stays put — the expansion just fills the reserved space. */
.footer-suburbs[open] ~ .footer-bottom {
  margin-top: max(16px, calc(clamp(64px, 8vw, 112px) - 84px));
}
.footer-suburbs summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: var(--w-medium);
  color: #fff;
}
.footer-suburbs summary::-webkit-details-marker { display: none; }
.footer-suburbs .fs-arrow {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--c-accent);
  transition: transform .2s ease;
}
.footer-suburbs .fs-arrow svg { width: 100%; height: 100%; display: block; }
.footer-suburbs[open] .fs-arrow { transform: rotate(90deg); }
.footer-suburbs-body { margin-top: 14px; padding-left: 28px; }
.footer-suburb-links { color: var(--c-text-muted); line-height: 1.9; }
.footer-suburb-links a { color: var(--c-text-muted); text-decoration: underline; }
.footer-suburb-links a:hover { color: var(--c-accent); }
.footer-prison { margin-top: 12px; color: var(--c-text-muted); }
.footer-prison a { text-decoration: underline; }
.footer-prison a:hover { color: var(--c-accent); }

/* The Process and Testimonials sections are now built from core block groups
   (section + .container) so they survive page edits in Gutenberg. Neutralise
   the flow-layout margins so spacing stays as designed. */
.process > *, .testimonials > * { margin-block: 0; }
/* The carousel is now the only child of its group, so core's flow layout zeroes
   its top margin (`:where(.is-layout-flow) > :first-child`). Re-assert the gap
   to the head with a more specific selector. */
.testimonials .testi-track { margin-top: 48px; }

/* =====================================================================
   6q. LOCATIONS — 3 place cards (Melbourne, Regional Victoria, Interstate)
   Mirrors the .hww-card system; peach pin badge + area chips.
   ===================================================================== */
.locations { padding-block: var(--section-y); }
.loc-cards {
  display: grid;
  align-items: start;
  grid-template-columns: 2fr 3fr;
  gap: clamp(20px, 2.7vw, 39px);
  margin-top: 48px;
}
.loc-card {
  display: flex;
  flex-direction: column;
  min-height: 278px;
  padding: 32px;
  border-radius: 22px;
  background: var(--c-bg);
  border: 1px solid rgba(255,255,255,0.15);
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.loc-card:hover {
  background: var(--c-surface);
  border-color: transparent;
  box-shadow: 4.681px 10.7px 44.138px rgba(0,0,0,0.3);
  transform: translateY(-4px);
}
.loc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--c-accent);
  background: rgba(237,193,147,0.10);
  border: 1px solid rgba(237,193,147,0.30);
}
.loc-icon svg { width: 24px; height: 24px; }
.loc-name {
  margin-top: 28px;
  font-weight: var(--w-bold);
  font-size: 1.5rem;           /* 24px */
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.loc-desc {
  margin-top: 14px;
  font-weight: var(--w-regular);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-text-gray);
}
.loc-areas {
  margin-top: auto;            /* pin chips to the bottom across cards */
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.loc-areas span {
  font-family: var(--f-label);
  font-weight: var(--w-semibold);
  font-size: 0.8125rem;        /* 13px */
  letter-spacing: -0.02em;
  color: var(--c-accent);
  padding: 6px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: rgba(0,0,0,0.20);
}

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

/* =====================================================================
   CLIENT FEEDBACK REVISIONS
   ===================================================================== */

/* (a) Remove section eyebrow pills site-wide. Internal-page title pills
   (.page-pill) are preserved so page titles remain visible. */
.eyebrow:not(.page-pill) { display: none; }
.eyebrow:not(.page-pill) + .section-title,
.eyebrow:not(.page-pill) + .intro-statement,
.hero-content .eyebrow + h1 { margin-top: 0; }

/* (b) Bigger hero headline (fills space freed by dropping "Melbourne's") */
.hero h1 { font-size: clamp(2.75rem, 1.9rem + 5vw, 3.875rem); }
.hero h1 .hero-l1, .hero h1 .hero-l2 { text-transform: uppercase; }

/* (c) Areas of Practice image -> black & white */
.areas-media img { filter: grayscale(100%); }

/* (d) Header: give the desktop nav a little more room before it collapses */
.nav-inner { gap: 12px; }
.site-header .main-nav .wp-block-navigation-item__content,
.main-nav a { padding: 0 10px; }


/* =====================================================================
   CLIENT FEEDBACK REVISIONS 2
   ===================================================================== */

/* (f) Keep the full desktop nav visible down to ~1280px by trimming the
   header's side gutter (page sections keep their original wider gutter). */
.site-header .nav-inner { padding-inline: clamp(1rem, 3vw, 4rem); }
.header-cta { gap: 10px; }

/* (g) Mobile hamburger overlay: render the Services submenu as plain
   indented rows (matching the other menu lines) instead of the desktop
   floating card with shadow / grid. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important;
  transform: none !important;
  left: auto !important; right: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  grid-template-columns: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before { display: none !important; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  width: 100% !important;
  padding: 14px 6px 14px 28px !important;   /* indent so it reads as a sub-item of Services */
  font-size: var(--fs-lg) !important;
  white-space: normal !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--c-border-soft) !important;
}

/* =====================================================================
   HERO ENTRANCE ANIMATION — subtle staged fade-up on load.
   Wrapped in prefers-reduced-motion so it fully no-ops for users who
   ask for reduced motion (elements keep their default visibility).
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes heroRise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes heroStatueIn {
    from { opacity: 0; transform: scaleX(-1) scale(1.05); }
    to   { opacity: 1; transform: scaleX(-1) scale(1); }
  }
  .hero h1 .hero-l1,
  .hero h1 .hero-l2,
  .hero h1 .hero-l3,
  .hero .lede,
  .hero-actions,
  .hero .client-trust {
    opacity: 0;
    animation: heroRise .68s cubic-bezier(.22,.61,.36,1) both;
    will-change: transform, opacity;
  }
  .hero h1 .hero-l2 { display: inline-block; }   /* enable transform on line 2 */
  .hero h1 .hero-l1   { animation-delay: .08s; }
  .hero h1 .hero-l2   { animation-delay: .18s; }
  .hero h1 .hero-l3   { animation-delay: .30s; }
  .hero .lede         { animation-delay: .42s; }
  .hero-actions       { animation-delay: .54s; }
  .hero .client-trust { animation-delay: .66s; }
  .hero .statue {
    opacity: 0;
    animation: heroStatueIn 1.1s cubic-bezier(.22,.61,.36,1) .05s both;
  }
}

/* =====================================================================
   SCROLL-REVEAL — reusable entrance for below-the-fold sections.
   [data-reveal]         → element fades/rises in when scrolled into view.
   [data-reveal-stagger] → the element's direct children come in one-by-one.
   JS: assets/js/reveal.js adds .is-visible. No-op under reduced-motion;
   a <noscript> fallback (functions.php) keeps content visible without JS.
   Stagger uses a keyframe that only holds opacity at the end, so card
   :hover transforms keep working after the reveal.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1),
                transform .7s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }
  [data-reveal].is-visible { opacity: 1; transform: none; }

  @keyframes sklawRevealIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; }
  }
  [data-reveal-stagger] > * { opacity: 0; }
  [data-reveal-stagger].is-visible > * {
    animation: sklawRevealIn .6s cubic-bezier(.22,.61,.36,1) both;
  }
  [data-reveal-stagger].is-visible > *:nth-child(2) { animation-delay: .09s; }
  [data-reveal-stagger].is-visible > *:nth-child(3) { animation-delay: .18s; }
  [data-reveal-stagger].is-visible > *:nth-child(4) { animation-delay: .27s; }
  [data-reveal-stagger].is-visible > *:nth-child(5) { animation-delay: .36s; }
  [data-reveal-stagger].is-visible > *:nth-child(6) { animation-delay: .45s; }
  [data-reveal-stagger].is-visible > *:nth-child(7) { animation-delay: .54s; }
}

/* Location office lists (Melbourne = 1 office; Regional = the rest) */
.loc-offices {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 18px 26px;
}
.loc-office { display: flex; flex-direction: column; gap: 4px; }
.loc-office-name {
  font-family: var(--f-serif);
  font-weight: var(--w-bold);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--c-accent);
}
.loc-office-addr {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--c-text-gray);
}
@media (max-width: 820px) {
  .loc-cards { grid-template-columns: 1fr; }
}

/* =====================================================================
   (i) WHY CHOOSE SKLAW — 4 promise cards
   Mirrors the .hww-card system (same radius / border / hover lift);
   peach check badge instead of a step number.
   ===================================================================== */
.choose { padding-block: var(--section-y); }
.choose-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.7vw, 39px);
  margin-top: 48px;
}
.choose-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  min-height: 200px;
  padding: 32px;
  border-radius: 22px;
  background: var(--c-bg);
  border: 1px solid rgba(255,255,255,0.15);
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.choose-card:hover {
  background: var(--c-surface);
  border-color: transparent;
  box-shadow: 4.681px 10.7px 44.138px rgba(0,0,0,0.3);
  transform: translateY(-4px);
}
.choose-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(237,193,147,0.08);
  color: var(--c-accent);
}
.choose-icon svg { width: 24px; height: 24px; }
.choose-title {
  margin-top: auto;
  font-weight: var(--w-bold);
  font-size: 1.5rem;           /* 24px — matches .hww-title */
  line-height: 1.3;
  letter-spacing: -0.02em;
}
@media (max-width: 1024px) {
  .choose-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .choose-cards { grid-template-columns: 1fr; }
  .choose-card { min-height: 0; gap: 20px; }
}

/* =====================================================================
   (j) CLIENT ROUND 4
   ===================================================================== */

/* Footer social: brand glyph buttons instead of text labels. */
.footer-social { grid-template-columns: repeat(6, max-content); gap: 12px; }
.footer-social a.soc-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  color: #fff;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social a.soc-icon svg { width: 20px; height: 20px; fill: currentColor; }
.footer-social a.soc-icon:hover,
.footer-social a.soc-icon:focus-visible {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: transparent;
}
@media (max-width: 600px) {
  .footer-social { grid-template-columns: repeat(4, max-content); gap: 10px; }
}

/* "NO HIDDEN FEES" replaces the $0 figure — word-mark variant of .stat-num. */
.stat-num--text {
  font-size: clamp(1.9rem, 1.05rem + 2.8vw, 3.4rem);
  font-weight: var(--w-medium);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 12ch;
}

/* Hero line 3 now matches the headline face (sans, uppercase). */
.hero h1 .hero-l3 {
  display: block;
  font-family: var(--f-sans);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* =====================================================================
   (k) CLIENT ROUND 5
   ===================================================================== */

/* Hero trust: Google rating badge replaces the "More than 2500+" figure. */
.ct-google {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}
.ct-g-top { display: flex; align-items: center; gap: 10px; }
.ct-g-logo { width: 30px; height: 30px; flex: none; }
.ct-g-meta { display: flex; flex-direction: column; gap: 2px; }
.ct-g-label {
  font-family: var(--f-stat);
  font-weight: var(--w-bold);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.ct-g-score { display: flex; align-items: center; gap: 8px; }
.ct-g-score b {
  font-family: var(--f-stat);
  font-weight: var(--w-bold);
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}
.ct-g-stars { display: flex; gap: 3px; }
.ct-g-stars img { width: 16px; height: 16px; }
.ct-g-sub {
  font-family: var(--f-stat);
  font-size: var(--fs-sm);
  letter-spacing: -0.02em;
  color: var(--c-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.25);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.ct-google:hover .ct-g-sub { color: #fff; text-decoration-color: rgba(255,255,255,0.7); }

/* Stat counters: hold the digit box steady so the shuffle can't reflow the row. */
.stat-num [data-count] { font-variant-numeric: tabular-nums; display: inline-block; }

/* About: crop Seda's portrait to the text column's height (+20px), from the
   bottom only — object-position keeps her head in frame. */
@media (min-width: 861px) {
  .about-grid { align-items: stretch; }
  .about-media {
    aspect-ratio: auto;
    height: calc(100% + 20px);
    min-height: 320px;
  }
  .about-media img { position: absolute; inset: 0; }
}
.about-media img { object-position: center top; }

/* Team photos: lift + zoom on hover. */
.team-photo img {
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.team-card:hover .team-photo img,
.team-card:focus-within .team-photo img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .team-photo img { transition: none; }
  .team-card:hover .team-photo img { transform: none; }
}

/* How We Work: "Step 1" is wider than "/01" — let it breathe. */
.hww-num { letter-spacing: 0; }

/* FAQ chevron: down when collapsed, up when expanded (was inverted). */
.faq-item > summary::before { transform: rotate(0deg); }
.faq-item[open] > summary::before { transform: rotate(180deg); }

/* Footer: newsletter form removed, so the title owns the row. */
.footer-top { display: block; }

/* =====================================================================
   (l) NEW SKLAW LOGO — two-line lockup (wordmark + CRIMINAL DEFENCE rule),
   so it needs slightly more height than the old single-name wordmark to
   keep the descriptor legible.
   ===================================================================== */
.brand-wordmark { height: 58px; }
@media (max-width: 1024px) { .brand-wordmark { height: 50px; } }
@media (max-width: 600px)  { .brand-wordmark { height: 42px; } }

/* =====================================================================
   (m) LOGO: wordmark only — the scales emblem was retired with the new
   SKLAW lockup, so the brand link no longer needs the icon gap, and the
   mark can carry a little more height on its own.
   ===================================================================== */
.brand { gap: 0; }
.brand-wordmark { height: 62px; }
@media (max-width: 1024px) { .brand-wordmark { height: 54px; } }
@media (max-width: 600px)  { .brand-wordmark { height: 44px; } }
@media (max-width: 400px)  { .brand-wordmark { display: block; } }


/* =====================================================================
   OCT 2026 CLIENT FIXES
   ===================================================================== */
/* Hero: no gold glow behind Lady Justice (client prefers black & white) */
.hero-bg .glow { display: none; }

/* Services dropdown: single-column list instead of the 3-column box */
@media (min-width: 1181px) {
  .site-header .main-nav .wp-block-navigation__submenu-container {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0;
    width: 280px;
    min-width: 280px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 8px;
    left: 0;
    transform: none;
  }
  .site-header .main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    white-space: nowrap;
    padding: 9px 14px;
  }
}

/* Areas of Practice: courts expand with an arrow to show detail */
.areas-list .court > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}
.areas-list .court > summary::-webkit-details-marker { display: none; }
.areas-list .court .acc-chev {
  width: 24px; height: 24px; flex: none;
  color: var(--c-accent);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.areas-list .court[open] .acc-chev { transform: rotate(180deg); }
.areas-list .court::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .35s cubic-bezier(.22,.61,.36,1), content-visibility .35s allow-discrete;
}
.areas-list .court[open]::details-content { block-size: auto; }
.areas-list .court-body {
  padding-top: 12px;
  font-size: 1rem;
  font-weight: var(--w-regular);
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
  color: rgba(255,255,255,0.7);
}
.areas-list .court-locs {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}
.areas-list .court-locs li {
  padding: 0 0 0 14px;
  border: 0;
  position: relative;
  font-size: .95rem;
  letter-spacing: 0;
  color: #fff;
}
.areas-list .court-locs li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-accent);
}
@media (max-width: 560px) { .areas-list .court-locs { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .areas-list .court .acc-chev, .areas-list .court::details-content { transition: none; }
}

/* Client request: justified body text on service pages and blog posts */
:is(.page-service-body, .single-article) .wp-block-post-content p:not(.section-lead):not(.faq-a),
:is(.page-service-body, .single-article) .wp-block-post-content li {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Court location pages: title pill duplicates the first H2 — hide it visually
   but keep the H1 for screen readers and search engines. */
.sklaw-location-page .page-service-head .page-pill {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Team photos: shorter crop so names show without scrolling on small laptops */
.team-photo {
  aspect-ratio: 1 / 1;
  max-height: 62vh;
}
.team-photo img { object-position: center 18%; }

/* Section spacing halved (client): adjacent sections double up top+bottom
   padding, so half per side still leaves a generous gap. Was
   clamp(3rem, 1.5rem + 4vw, 5.8125rem). */
:root { --section-y: clamp(1.5rem, 0.75rem + 2vw, 2.90625rem); }

/* GOOGLE TRANSLATE */
.sklaw-translate{position:fixed;left:16px;bottom:16px;z-index:9990;display:flex;align-items:center;gap:.4rem;padding:.35rem .6rem;background:var(--c-surface);color:var(--c-accent);border:1px solid var(--c-border);border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.35);font:400 13px/1 var(--f-sans)}
.sklaw-translate .goog-te-gadget{font-size:0;color:transparent}
.sklaw-translate .goog-te-gadget>span{display:none}
.sklaw-translate .goog-te-combo{margin:0;padding:.2rem 0;background:transparent;color:var(--c-text);border:0;font:400 13px/1.2 var(--f-sans);cursor:pointer;outline:0}
.sklaw-translate .goog-te-combo option{background:var(--c-surface);color:var(--c-text)}
.goog-te-banner-frame,iframe.skiptranslate,#goog-gt-tt,.goog-te-balloon-frame,.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none !important}
body{top:0 !important}
font[style]{background:none !important;box-shadow:none !important}

.sklaw-translate-reset{margin-left:.2rem;padding:.25rem .6rem;background:var(--c-accent);color:var(--c-accent-ink);border:0;border-radius:999px;font:500 12px/1 var(--f-sans);cursor:pointer}
.sklaw-translate-reset[hidden]{display:none}

.sklaw-translate-reset{display:grid;place-items:center;width:26px;height:26px;padding:0}

/* header row: flow-layout block gap was pushing the CTA/hamburger down */
.nav-inner > *{margin-block:0 !important}

/* mobile: translate picker sits in the menu overlay, left of the close (X) button */
.sklaw-translate.is-in-menu{position:absolute;left:auto;bottom:auto;top:13px;right:42px;transform:translateY(-50%);box-shadow:none;z-index:2}
.sklaw-translate.is-in-menu{top:35px;right:64px}
.sklaw-translate.is-in-menu{left:0;right:auto;white-space:nowrap}
.sklaw-translate.is-in-menu .goog-te-combo{min-width:9.5rem}
.sklaw-translate.is-in-menu{left:32px}

@media (max-width: 600px){ .hero{padding-top:110px} }