/*
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');
/* @import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&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);
  color: var(--c-accent);
}

.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);
  color: var(--c-accent);
}

.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);
}

@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;
  }
  .legal-features{
    flex-direction: column;
    align-items: flex-start !important;
  }
}

@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); */
  flex: 0 0 48% !important;
  width: 48% !important;
  max-width: 48% !important;
  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);
  color: var(--c-bg);
}

.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: 767px) {
  .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;
}
.sklaw-form p{
  color: var(--c-text-gray);
    font-size: var(--fs-lg);
    font-weight: var(--w-regular);
    line-height: 1.5;
    margin-top: 8px;
}
.footer-title {
  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;
}
.wpcf7 form .wpcf7-response-output{
  color: var(--c-text-gray);
}

.footer-title .serif {
  display: block;
  font-family: var(--f-serif);
  font-weight: var(--w-regular);
  font-size: 0.6em;
  /* ~48px */
  color: var(--c-accent);
}

/* 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: 48px;
}

.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. */
:is(.page-service-body, .single-article) .wp-block-post-content h2.section-title,
.page-service-body .wp-block-post-content>h1 {
  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),
.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: 25ch;
}

/* 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-search__button-inside, .blog-archive .wp-block-group.aside-card{
    margin-bottom: 24px;
}

.blog-archive .wp-block-query-pagination {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem) !important;
  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: capitalize;
}

/* (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: capitalize;
  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: capitalize;
  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: left;
  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: 300px;
}

.team-photo img {
  object-position: center 10%;
  object-fit: cover;
}

/* 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
  }
}

@media (max-width: 1200px) {

  /* Default: Hide all mobile submenus */
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container:not(.active-submenu),
  .site-header .wp-block-navigation-submenu>.wp-block-navigation-submenu__toggle[aria-expanded="false"]+.wp-block-navigation__submenu-container {
    display: none !important;
  }

  /* Active: Show submenu */
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.active-submenu {
    display: block !important;
  }

  /* .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
        display: block !important;
    } */

}

.foot-contact {
  margin-bottom: 48px;
}

.foot-contact .cd-link {
  margin-top: 0px;
  margin-bottom: 48px;
  font-size: 1.5rem;
}

.foot-contact .cd-link svg {
  width: 34px;
  height: 34px;
}

.testi-navigation {
  display: flex;
  gap: 12px;
  justify-content: end;
}

.testi-navigation button {
  background: transparent;
  border: 1px solid #fff;
  border-radius: 50px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testi-navigation button svg {
  width: 20px;
  height: 20px;
}

:root :where(.is-layout-flow)>* {
  margin-block-start: 0 !important;
}

@media (max-width: 1024px) {
  .testi-track .testi-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 1024px) {
  .page-id-12 .about {
    padding-bottom: 78px;
  }

  .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle+.wp-block-navigation__submenu-icon {
    margin-left: -0.3em;
  }
  .page-id-527 .site-footer{
    padding-top: 70px;
  }
}

/* Landing page style start */
.page-id-527 header nav {
  display: none;
}

.lp-sklaw-hero {
  background: url('/wp-content/uploads/2026/11/bg.png') center / cover no-repeat;
  padding: 208px 0 64px;
}

.lp-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 610px) minmax(0, 445px);
  justify-content: space-between;
  align-items: end;
  gap: 30px;
}

.sklaw-content.hero {
  padding: 0;
  background: unset;
}

.sklaw-content.hero h1 {
  margin: 0 0 16px;
}

.sklaw-rating,
.sklaw-buttons {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.sklaw-buttons .hero-actions {
  margin-top: 0;
}

.sklaw-buttons a {
  height: 50px;
}

.sklaw-form {
  padding: 24px;
  border-radius: 32px;
  background: var(--c-text);
}

.sklaw-form h3 {
  margin-bottom: 0;
  color: #202020;
  font-size: 24px;
  line-height: 32px;
}

.sklaw-form h3 .serif {
  font-family: var(--f-serif);
  font-weight: var(--w-regular);
  color: var(--c-accent-strong);
}

.justice-section,
.justice-section .container {
  min-height: 900px;
}

.justice-section .container {
  position: relative;
  display: flex;
  align-items: center;
}

.justice-content {
  position: relative;
  z-index: 2;
  width: 70%;
}

.justice-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 65px;
}

.justice-feature:nth-child(1) {
  justify-content: flex-start;
}

.justice-feature:nth-child(2) {
  justify-content: center;
}

.justice-feature:nth-child(3) {
  justify-content: flex-end;
}

.justice-feature:last-child {
  margin-bottom: 0;
}

.justice-feature h3 {
  margin: 0 0 16px;
  font-family: var(--f-serif);
  font-size: 24px;
  font-weight: var(--w-regular);
  text-transform: uppercase;
  color: var(--c-accent);
}

.justice-feature p {
  max-width: 540px;
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-lg);
  font-weight: var(--w-regular);
  line-height: 1.5;
}

.justice-image {
  position: absolute;
  right: 0;
  height: 900px;
  width: auto;
}

.justice-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.defence-container {
  display: flex;
  gap: 24px;
  align-items: center;
}

.defence-image {
  width: 40%;
}

.defence-content {
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 48px;
}

.mt-0 {
  margin-top: 0px;
}

.sub-label {
  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);
}

.defence-content p {
  font-weight: var(--w-regular);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-text-muted);
  margin-bottom: 8px;
}

.serif {
  font-family: var(--f-serif);
  font-weight: var(--w-regular);
  color: var(--c-accent);
}

.defence-content h3 {
  font-size: 1.8rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.defence-content a {
  max-width: fit-content;
  margin-top: 8px;
}


.practice-section {
  padding-block: 64px;
  overflow: hidden;
}

/* Logos */
.practice-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  margin-bottom: 140px;
}

.practice-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.practice-logo img {
  width: 160px;
  height: 160px;
  object-fit: contain;
}

.practice-logo span {
  color: #fff;
  font-size: 24px;
  text-align: center;
}

/* Heading */
.practice-heading {
  text-align: center;
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.practice-heading h2 {
  max-width: 100%;
}

.practice-heading p {
  font-weight: var(--w-regular);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-text-muted);
  max-width: 700px;
  margin: 0 auto;
}

/* Practice Grid */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.practice-card {
  position: relative;
  height: 200px;
  border: 2px solid rgba(237, 193, 147, 0.60);
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  text-decoration: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat;
}

.practice-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
}

.practice-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.practice-card span {
  position: relative;
  z-index: 1;
  color: var(--c-accent);
  font-size: 24px;
  line-height: 32px;
  font-weight: normal;
  max-width: 230px;
}

.practice-card:hover img {
  transform: scale(1.06);
}

.practice-card:hover::after {
  background: rgba(0, 0, 0, 0.2);
}

/* Additional Areas */
.practice-additional {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 64px 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-accent);
}

.practice-additional strong {
  color: #e4b886;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
}

.practice-additional span:not(:last-child)::after {
  content: "•";
  color: #4D4D4D;
  margin-left:12px;
}

/* CTA */
.practice-cta {
  text-align: center;
}

.sklaw-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px;
}


.sklaw-cta-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  padding-right: clamp(24px, 5vw, 72px);
  overflow: hidden;
  border-radius: 40px;
  height: 308px;
}

.sklaw-cta-media {
  --sklaw-cta-bg: url("/wp-content/uploads/2026/11/with-image.png");

  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #2a2622;
  background-image: var(--sklaw-cta-bg),
    linear-gradient(115deg, #4a423a 0%, #262320 55%, #14120f 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.sklaw-cta .section-title {
  max-width: 610px;
  color: #fff;
  text-align: right;
}

.sklaw-cta-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.4) 45%,
      rgba(0, 0, 0, 0.82) 100%);
}

.landing-para {
  font-weight: var(--w-regular);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.60);
  max-width: 615px;
  text-align: right;
}

.sklaw-consult {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 488px;
  padding-block: 48px;
  text-align: center;
}

.sklaw-consult__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}

#sklaw-consult-title {
  margin-inline: auto;
  margin-bottom: 28px;
}

.lp-gray-para {
  font-weight: var(--w-regular);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-text-muted);
  max-width: 700px;
  margin: 0 auto;
}

/* Tablet */
@media (max-width: 1024px) {
  .practice-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .practice-card {
    height: 150px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  div#modal-1 {
    width: 100% !important;
    height: 100vh !important;
}
  div#modal-1-content {
    height: 100vh !important;
    width: 100% !important;
}
  .practice-additional span:not(:last-child)::after {
    margin-left: 8px;
  }
  .practice-section {
    padding: 35px 18px;
  }

  .practice-logos {
    flex-direction: column;
    gap: 81px;
    margin-bottom: 140px;
  }

  .practice-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .practice-card {
    height: 150px;
    padding: 10px;
    border-radius: 12px;
  }

  .practice-card span {
    font-size: 16px;
    line-height: 24px;
  }

  .practice-additional {
    line-height: 1.8;
    gap: 6px;
  }
}

@media (max-width: 380px) {
  .practice-card {
    height: 150px;
  }
}


@media (max-width: 1024px) {
  .lp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px){
  .page-id-527 .btn{
    width: 100%;
  }
  .justice-icon{
    position: relative;
    top: -8px;
  }
}

@media (max-width: 767px) {
  .lp-sklaw-hero {
    padding: 120px 0 48px;
  }

  .lp-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .justice-section,
  .justice-section .container {
    min-height: auto;
  }

  .justice-section .container {
    flex-direction: column;
    gap: 30px;
  }

  .justice-content {
    width: 100%;
  }

  .justice-feature {
    margin-bottom: 65px;
  }

  .justice-feature:nth-child(2),
  .justice-feature:nth-child(3) {
    justify-content: flex-start;
  }

  .justice-image {
    position: relative;
    right: auto;
    width: 100%;
    height: auto;
  }

  .justice-image img {
    height: auto;
    object-fit: contain;
  }
}

.archive.category .wp-block-post-featured-image {
  margin: 0px 0px 16px;
  border-radius: var(--r-card);
  overflow: hidden;
}

.archive.category .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.archive.category .wp-block-term-name {
  font-family: var(--f-label);
  font-size: var(--fs-sm, .875rem);
  font-weight: var(--w-semibold);
  color: var(--c-accent);
  margin-bottom: 8px;
}

.archive.category .wp-block-post-title {
  font-size: var(--fs-xl);
  font-weight: var(--w-medium);
  line-height: 1.25;
  margin: 8px 0px 8px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archive.category .wp-block-post-excerpt__excerpt {
  color: var(--c-text-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0px;
  overflow: hidden;
  margin-bottom: 8px;
}


.sk-faq-section {
  padding-block: 68px;
}

.sk-faq-heading {
  text-align: center;
  margin: 0 auto 75px;
}

.sk-faq-heading .section-title {
  margin-top: 16px;
  margin-inline: auto;
}
.legal-features {
    display: inline-flex;
    gap: 16px;
    align-items: center;
    margin-top: 24px;
    color: #fff;
    font-size: var(--fs-lg);
    font-weight: var(--w-regular);
    line-height: 1.5;
}

.legal-features li {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
}
.sklaw-form p strong{
  color: #ff3b14;
}

.legal-features li svg {
    color: #ff3b14;
    flex-shrink: 0;
}

.sk-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 45px;
}

.sk-faq-column {
  display: flex;
  flex-direction: column;
}

.sk-faq-item {
  border-bottom: 1px solid #4D4D4D;
}

.sk-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 0;
  background: transparent;
  border: 0;
  color: #e6c19c;
  font-family: inherit;
    font-size: var(--fs-lg);
    line-height: 1.5;
  text-align: left;
  cursor: pointer;
  font-weight: 600;
}


.sk-faq-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sk-faq-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease-in-out;
}

.sk-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease-in-out;
}

.sk-faq-item.active .sk-faq-answer {
  grid-template-rows: 1fr;
}

.sk-faq-item.active .sk-faq-icon svg {
  transform: rotate(0deg);
}

.sk-faq-answer-inner {
  overflow: hidden;
  min-height: 0;
}

.sk-faq-item.active .sk-faq-question {
  padding-bottom: 8px;
}

.sk-faq-answer p {
  margin: 0;
  padding: 0 0 24px 42px;
  font-weight: var(--w-regular);
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--c-text-muted);
}

/* Mobile */
@media (max-width: 767px) {

  .sk-faq-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sk-faq-heading {
    margin-bottom: 75px;
  }

  .sk-faq-question {
      font-size: 16px;
      align-items: flex-start;
  }
  .sk-faq-icon svg, .sk-faq-icon{
    width: 18px;
    height: 18px;
  }
}

.sk-journey-section {
  position: relative;
  padding-top: 96px;
  overflow: visible;
}
header .wp-block-navigation-submenu.has-child .wp-block-navigation-submenu__toggle{
    padding-right: 20px !important;
}

/* Submenu arrow icon */
header .wp-block-navigation__submenu-icon {
    margin-left: -0.9em !important;
}
.category .wp-block-query-pagination .page-numbers, .category .wp-block-query-pagination a{
  padding: 8px 14px;
  border: 1px solid var(--c-border-soft);
  border-radius: 10px;
}
.category .wp-block-query-pagination .page-numbers.current {
    color: var(--c-bg);
    background: var(--c-accent);
    border-color: var(--c-accent);
}
.category .wp-block-query-pagination{
    flex-wrap: wrap;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem) !important;
    gap: 8px;
    margin-bottom: 20px;
}
/* Hover */
.testi-navigation button:hover:not(:disabled) {
    background: transparent;
    color: var(--c-accent);
    border-color: var(--c-accent);
}

/* Active */
.testi-navigation button:active:not(:disabled) {
    transform: scale(0.92);
}

/* Disabled */
.testi-navigation button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Focus */
.testi-navigation button:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
}
/* CF7 Chrome Autofill - Transparent Background */
.wpcf7 input:-webkit-autofill,
.wpcf7 input:-webkit-autofill:hover,
.wpcf7 input:-webkit-autofill:focus,
.wpcf7 textarea:-webkit-autofill,
.wpcf7 select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    caret-color: #ffffff !important;
    transition: background-color 99999s ease-in-out 0s;
}
.wpcf7 .cta-cf7form input:-webkit-autofill,
.wpcf7 .cta-cf7form input:-webkit-autofill:hover,
.wpcf7 .cta-cf7form input:-webkit-autofill:focus,
.wpcf7 .cta-cf7form textarea:-webkit-autofill,
.wpcf7 .cta-cf7form select:-webkit-autofill {
  color: rgb(157, 157, 157) !important;
-webkit-text-fill-color: rgb(157, 157, 157) !important;
caret-color: rgb(157, 157, 157) !important;
}
.sk-contact-fields .wpcf7 form.sent .wpcf7-response-output {
    color: var(--c-text-muted);
}
.search.search-results .blog-archive .archive-grid{
    grid-template-columns: 1fr;
}
.search.search-results .blog-archive .wp-block-post-template, .archive.author .blog-archive .wp-block-post-template{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sk-journey-heading {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 932px;
  margin: 0 auto 46px;
  padding: 0 15px;
}

.sk-journey-heading .sub-label {
  margin-bottom: 16px;
  display: block;
}

.sk-journey-heading .section-title {
  margin-bottom: 24px;
}

.sk-journey-heading p {
  font-weight: var(--w-regular);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-text-muted);
  margin: 0;
}

.sk-journey-cards {
  position: relative;
  overflow: visible;
}

/* .sk-journey-card {
    position: sticky;
    top: 100px;
    align-items: center;
    border-radius: 32px 32px 0 0;
    background: linear-gradient(180deg, #202020 23.58%, #EDC193 205.6%);
    margin-bottom: 25px;
    overflow: hidden;
    min-height: 450px;
    padding-block: 48px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 35px;
} */

.sk-journey-card {
  position: sticky;
  top: 100px;
  z-index: 1;
  align-items: center;
  border-radius: 32px 32px 0 0;
  background: transparent;
  margin-bottom: 25px;
  overflow: visible;
  min-height: 377px;
  padding-block: 84px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 35px;
}

/* Full width background */
.sk-journey-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  left: 50%;
  width: 100vw;
  transform: translateX(-50%);

  background: linear-gradient(180deg,
      #202020 23.58%,
      #EDC193 205.6%);

  border-radius: 32px 32px 0 0;
  z-index: -1;
  pointer-events: none;
}

/* Card stacking order */

.sk-journey-card:nth-child(1) {
  z-index: 1;
}

.sk-journey-card:nth-child(2) {
  z-index: 2;
}

.sk-journey-card:nth-child(3) {
  z-index: 3;
}

.sk-journey-card:nth-child(4) {
  z-index: 4;
}

.sk-journey-image {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid #F1CDA9;
  height: 340px;
  max-width: 600px;
}

.sk-journey-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(100%);
  transition: transform 0.5s ease;
}

.sk-journey-card:hover .sk-journey-image img {
  transform: scale(1.04);
}


.sk-journey-content {
  position: relative;
  padding: 10px 15px 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: stretch;
}

.sk-journey-number {
  color: rgba(255, 255, 255, 0.40);
  font-size: 64px;
  font-style: normal;
  font-weight: 600;
  line-height: 72px;
}

.sk-journey-content h3 {
  color: #fff;
  font-size: 36px;
  line-height: 48px;
  letter-spacing: -0.02em;
}

.sk-journey-highlight {
  color: #d4a77f;
  font-size: 28px;
  line-height: 32px;
}

.sk-defence-question-content {
  display: flex;
  gap: 10px;
  align-items: start;
}

.sk-journey-description {
  margin: 0;
  font-weight: var(--w-regular);
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--c-text-muted);
    margin-top: 4px;
}

.sk-loss-banner {
  position: relative;
  width: 100%;
  padding: 48px 0;
  overflow: hidden;
  padding-top: 24px;
}

.sk-loss-banner-bg {
  --sklaw-cta-bgs: url('/wp-content/uploads/2026/11/with-image.png');

  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: rgb(42, 38, 34);
  background-image:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.60) 46.56%,
      rgba(0, 0, 0, 0.00) 100%),
    var(--sklaw-cta-bgs);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 40px;
}

.sk-loss-banner .container {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 32px;
}

.sk-loss-banner .sk-loss-banner-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: 100%;
  overflow: hidden;
  border-radius: 40px;
  padding-inline: 48px;
}

.sk-loss-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  min-height: 310px;
  z-index: 1;
  position: relative;
}

.sk-loss-banner-text {
  max-width: 650px;
}


/* ========================================
   SK LAW - DEFENCE SECTION
   DESKTOP ONLY
======================================== */

.sk-defence-section {
  position: relative;
  padding-block: 54px;
  overflow: hidden;
}

/* SECTION HEADING */

.sk-defence-heading {
  text-align: center;
  margin: 0 auto;
  padding: 0 0px 25px;
}

.sk-defence-heading h2 {
  margin-top: 16px;
  margin-bottom: 8px;
  margin-inline: auto;
}

.sk-defence-heading p {
  font-weight: var(--w-regular);
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--c-text-muted);
  max-width: 665px;
  margin: 0 auto;
}

/* MAIN CONTENT */

.sk-defence-content {
  display: grid;
  grid-template-columns: 48% 1fr;
  align-items: stretch;
  gap: 36px;
  padding-block: 38px;
}

/* LEFT IMAGE */

.sk-defence-image {
  width: 100%;
  overflow: hidden;
  border-radius: 32px;
}

.sk-defence-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

/* ACCORDION */

.sk-defence-accordion {
  width: 100%;
}

.sk-defence-item {
  border-bottom: 1px solid rgba(237, 193, 147, 0.35);
}

/* QUESTION */

.sk-defence-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 32px 0;
  border: 0;
  background: transparent;
  color: var(--c-accent);
  text-align: left;
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  cursor: pointer;
  width: 100%;
}

.sk-defence-question-text {
  display: block;
}

.sk-defence-number {
  white-space: nowrap;
}

/* ORANGE SVG ICON */

.sk-defence-toggle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sk-defence-toggle svg {
  display: block;
  width: 40px;
  height: 40px;
  transition: transform 0.35s ease;
}

/* ROTATE ARROW WHEN OPEN */

.sk-defence-item.active .sk-defence-toggle svg {
  transform: rotate(180deg);
}

/* ANSWER ANIMATION */

.sk-defence-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.sk-defence-item.active .sk-defence-answer {
  grid-template-rows: 1fr;
}

.sk-defence-answer-inner {
  overflow: hidden;
  min-height: 0;
}

.sk-defence-answer p {
  font-weight: var(--w-regular);
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--c-text-muted);
  margin: 0;
  padding: 0;
  transition: padding 0.4s ease;
}

.sk-defence-item.active .sk-defence-answer p {
  padding: 0 42px 32px 0;
}

.sk-defence-item.active .sk-defence-question {
  padding-bottom: 8px;
}

.sk-defence-item:first-child .sk-defence-question {
  padding-top: 0;
}

.sk-defence-item:last-child .sk-defence-question {
  padding-bottom: 0;
}

.sk-defence-item:last-child {
  border: none;
}

.sk-action-banner {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 92px;
  padding-bottom: 62px;
}

.sk-action-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.60) 32.28%,
      rgba(0, 0, 0, 0.00) 67.31%),
    url('/wp-content/uploads/2026/11/mid-cta.png') lightgray 50% / cover no-repeat;
  background-position: top center;
}

.sk-action-banner .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.sk-action-banner-content {
  max-width: 775px;
  padding-top: 47px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sk-action-banner-title .section-title {
  margin-bottom: 8px;
}

.sk-action-banner-title p {
  font-weight: var(--w-regular);
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--c-text-muted);
}

.sk-action-banner-content a {
  max-width: fit-content;
}

.lp-testimonials .sub-label,
.lp-testimonials .section-title {
  margin-bottom: 16px;
  display: block;
}

.lp-testimonials .section-lead {
  margin-top: 0px;
}

.lp-testimonials .google-badge {
  margin-bottom: 36px;
}

.testi-head.lp-testimonials {
  margin-bottom: 135px;
}

.page-id-527 .testi-navigation {
  padding-top: 24px;
}

.sk-contact-section {
  padding: 64px 0;
  overflow: hidden;
}

.sk-contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 38px;
  padding: 0;
}

.sk-contact-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
  min-width: 0;
}

.sk-contact-form .sub-label {
  margin-bottom: 16px;
}

.sk-contact-form h2 {
  margin-bottom: 16px;
}

.sk-contact-form p {
 font-weight: var(--w-regular);
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--c-text-muted);
  margin-bottom: 16px;
}

.sk-contact-form .sk-contact-description {
  margin-bottom: 40px;
}

.sk-contact-image {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  align-self: stretch;
}

.sk-contact-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
}

.cta-cf7form input:not([type="submit"]),
.cta-cf7form textarea,
.cta-cf7form select {
  border: none;
  border-bottom: 1px solid #CECECE;
  height: 48px;
  border-radius: 0;
  color: #9d9d9d;
  padding: 16px 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  outline: none;
  margin-bottom: 38px;
  font-size: 16px;
}

.cta-cf7form select {
  cursor: pointer;
}

.cta-cf7form textarea {
  height: 85px !important;
  resize: vertical;
  min-height: auto;
  margin-bottom: 24px;
}

.cta-cf7form input::placeholder,
.cta-cf7form textarea::placeholder {
  color: #9d9d9d;
  opacity: 1;
}

.lp-contact-form {
  margin-top: 32px;
}

.cta-cf7form .btn-submit {
  width: 100%;
  color: var(--c-accent-ink);
  font-weight: var(--w-medium);
  letter-spacing: -0.03em;
  cursor: pointer;
  padding: 16px 32px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  font-size: var(--fs-lg);
}
.cta-cf7form .submit-wrap{
 position: relative;
}

.wpcf7-form .submit-wrap .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  margin: 0px;
}

.wpcf7 form.sent .wpcf7-response-output {
  color: var(--c-text-gray);
}
.frm-captcha{
margin-bottom: 12px !important;
}
.cta-cf7form .frm-captcha{
margin-bottom: 24px !important;
}

.page-id-527 .locations {
  padding-block: 56px;
}

.privacy-sec {
  padding-top: 64px;
}

.privacy-policy h1 {
  margin-top: 28px;
  margin-bottom: 0;
  font-weight: var(--w-medium);
  font-size: var(--fs-h2);
  line-height: 1.05;
}

.privacy-policy h2 {
  font-size: var(--fs-statement);
  font-weight: var(--w-medium);
  line-height: 1.15;
  margin-top: 1.7em;
  margin-bottom: .4em;
}

.privacy-policy p:not(.footer-ghost) {
  color: var(--c-text-muted);
  font-size: var(--fs-lg);
  line-height: 1.7;
}

.sk-404-content {
  height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.sk-404-content h1 {
  font-size: 98px;
  line-height: 98px;
}

.sk-404-content p {
  margin-bottom: 16px;
}

.error404 header .wp-block-navigation__responsive-container .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;
}

.error404 header .wp-block-buttons.mm-cta {
  display: none;
}
.testi-head.lp-testimonials{
    align-items: flex-end;
}

@media screen and (min-width: 1024px) {
  .defence-hero{
    padding-block: 48px;
  }
  .lp-sklaw-hero{
    background-position: top center;
  }
  .page-id-527 .testimonials {
    padding-block: 64px;
  }
}
@media (max-width: 820px) {
    .page-id-527 .header-cta .btn--accent {
        display: block;
    }
}

@media screen and (max-width: 767px) {
  .sklaw-buttons {
    flex-direction: column;
  }
  .search.search-results .blog-archive .wp-block-post-template, .archive.author .blog-archive .wp-block-post-template{
    grid-template-columns: 1fr;
  }

  .lp-sklaw-hero {
    background: #202020;
    padding-top: 0px;
  }
  .sklaw-content.hero {
    position: relative;
    isolation: isolate;
    padding-top: 400px;
    padding-bottom: 24px;
    background: none;
    z-index: 1;
}

.sklaw-content.hero::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;

    /* Extend background beyond container */
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);

    background-image: url('/wp-content/uploads/2026/11/landing-bg-hero.webp');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;

    z-index: -1;
}

  .justice-section {
    padding-top: 64px;
  }

  .defence-hero,
  .practice-section {
    padding-block: 64px;
  }

  .defence-container {
    flex-direction: column;
  }

  .defence-image,
  .defence-content {
    width: 100%;
    padding-left: 0px;
  }

  .practice-additional span {
    font-size: 16px;
  }

  .sk-journey-section {
    padding-top: 40px;
  }

  .sk-journey-heading {
    margin-bottom: 24px;
  }

  .sk-journey-card {
    flex-direction: column;
    gap: 16px;
    padding-block: 48px;
  }

  .sk-journey-image {
    height: 160px;
  }

  .sk-journey-number {
    font-size: 32px;
    line-height: 40px;
  }

  .sk-journey-content h3 {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 16px;
  }

  .sk-journey-highlight {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 8px;
  }

  .sk-loss-banner {
    padding: 32px 0;
    padding-top: 12px;
  }

  .sk-loss-banner .sk-loss-banner-card {
    padding-inline: 16px;
  }

  .sk-loss-banner-content {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
  }

  .sk-defence-section {
    padding-block: 48px;
  }

  .sk-defence-content {
    grid-template-columns: 1fr;
  }

  .sk-defence-number,
  .sk-defence-question-text {
    font-size: 18px;
    line-height: 24px;
  }

  .sk-defence-toggle svg,
  .sk-defence-toggle {
    width: 24px;
    height: 24px;
  }

  .sk-defence-question {
    align-items: flex-start;
  }

  .sub-label {
    font-size: 1.2rem;
  }

  .sk-action-banner {
    padding-block: 90px;
  }

  .sk-action-banner-content {
    min-height: 270px;
    width: 100%;
    padding-top: 0px;
  }

  .sk-action-banner-title .section-title {
    margin-bottom: 10px;
  }

  .page-id-527 .testimonials,
  .page-id-527 .locations, .sk-contact-section {
    padding-block: 48px;
  }

  .testi-head.lp-testimonials {
    margin-bottom: 72px;
  }

  .sklaw-cta {
    padding: 32px 0px;
  }

  .sklaw-cta-card {
    height: 390px;
    gap: 32px;
    padding-inline: 16px;
  }
  .sk-contact-wrapper{
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .sk-contact-image,.sk-contact-image img {
    min-height: 300px;
  }
  .page-id-527 .sk-faq-section{
    padding-block: 68px;
  }
  .page-id-527 .header-cta .btn--accent{
    display: block;
  }
  .cta-cf7form input:not([type="submit"]), .cta-cf7form textarea, .cta-cf7form select{
     margin-bottom: 16px;
  }
}

@media screen and (min-width: 767px) and (max-width: 1024px){
  .search.search-results .blog-archive .wp-block-post-template, .archive.author .blog-archive .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
  .sklaw-buttons{
    flex-direction: column;
  }
  .defence-hero{
    padding-top: 64px;
  }
  .justice-content{
    width: 65%;
  }
  .justice-feature p{
    max-width: 400px
  }
  .sk-defence-content{
    grid-template-columns: 1fr;
  }
  .sk-defence-image img{
    height: 400px;
  }
  .sk-defence-question br{
    display: none;
  }
}
.sk-defence-question br{
    display: none;
  }
@media (min-width: 1181px) {
    .site-header .main-nav .wp-block-navigation__submenu-container {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .site-header .main-nav .wp-block-navigation__submenu-container::-webkit-scrollbar {
        display: none;
    }
}

.page-cus-title h1{
  margin-bottom: 32px;
}
.error404 header.wp-block-template-part{
  padding-block: 15px;
}
/* Landing page style end */