/*
Theme Name: Cleartwo
Theme URI: https://cleartwo.co.uk
Author: Cleartwo
Author URI: https://cleartwo.co.uk
Description: Custom WordPress theme built by Cleartwo for AKS Solicitors — a Manchester immigration, asylum, family law and civil litigation practice. Converted 1:1 from the Figma design; every section is editable through ACF Pro.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cleartwo
*/

/* ==========================================================================
   AKS Solicitors — design-to-code from Figma
   File: AKS-solictors-website-desktop-rk-v4 (F9hF3D7U6BPw7O7zLckfVY)
   Design canvas: 1920px wide, content column 1608px (156px gutters)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens (values taken from Figma)
   -------------------------------------------------------------------------- */
:root {
  /* Brand colours */
  --c-brand-dark:   #02261D;  /* Figma variable "brand1" — section headings   */
  --c-brand-gold:   #D7B679;  /* Figma variable "brand2"                      */
  --c-pink:         #C71A78;  /* accent text, rules, dots                     */
  --c-plum:         #931C5D;  /* buttons + solid sections                     */
  --c-ink:          #000000;
  --c-body:         #2D2D2D;  /* paragraph copy                               */
  --c-white:        #FFFFFF;
  --c-grey-bar:     #D9D9D9;  /* top bar + footer                             */
  --c-rule-soft:    #7A7A7A;  /* feature-row separators                       */
  --c-rule-header:  #7F7F7F;  /* header vertical divider                      */
  --c-rule-topbar:  #6C6C6C;  /* top-bar vertical divider                     */
  --c-card-rule:    #D9D9D9;  /* service card separator                       */

  /* Section backgrounds */
  --bg-hero:        #E7E7E6;
  --bg-why: linear-gradient(88.87deg, #FFFFFF 0.25%, rgba(255, 255, 255, 0) 226.54%), #C4C4C4;
  --bg-faq: linear-gradient(89.59deg, rgba(255, 255, 255, .95) 36.09%, rgba(255, 255, 255, 0) 197.11%), #C4C4C4;
  --bg-cta-veil: linear-gradient(89.09deg, #FFFFFF 3.52%, rgba(255, 255, 255, 0) 170.79%), rgba(255, 255, 255, .55);

  /* Type — Abhaya Libre is the display face used across the design.
     Proxima Nova is the body face; Mulish is the closest free substitute and
     is loaded as a fallback so the layout holds without the licensed font.
     Minion (Variable Concept) is used for the phone number and the form
     heading; Abhaya Libre stands in when Minion is unavailable. */
  --f-display: "Abhaya Libre", "Times New Roman", serif;
  --f-body: "proxima-nova", "Proxima Nova", "Mulish", "Segoe UI", Arial, sans-serif;
  --f-minion: "Minion Pro", "Minion Variable Concept", "Abhaya Libre", Georgia, serif;

  /* Layout */
  --container: 1608px;
  --gutter: 156px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 20px;
  line-height: 25px;
  color: var(--c-body);
  background: var(--c-white);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

.container {
  width: min(var(--container), calc(100% - 96px));
  margin-inline: auto;
}

/* Dot decoration — 6px dots on a 26px grid (9 x 3 in the design) */
.dots {
  --dot-color: var(--c-pink);
  width: 214px;
  height: 58px;
  background-image: radial-gradient(circle at 3px 3px, var(--dot-color) 3px, transparent 3px);
  background-size: 26px 26px;
  background-repeat: repeat;
  pointer-events: none;
}
.dots--vertical { width: 58px; height: 214px; }
.dots--white { --dot-color: var(--c-white); }

/* --------------------------------------------------------------------------
   3. Shared pieces
   -------------------------------------------------------------------------- */

/* Pill button (Free Consultation / Contact Us / Explore / Submit) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding-inline: 24px;
  border: 0;
  border-radius: 80px;
  background: var(--c-plum);
  color: var(--c-white);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease;
}
.btn:hover { background: #7d1850; }

/* Eyebrow + rule ("WHY CHOOSE US ————") */
.eyebrow {
  display: flex;
  align-items: center;
  /* no gap here: the label's own words are anonymous flex items, so a gap would
     space them apart on top of their real spaces and stretch the label by 30px.
     The distance to the rule is set on ::after instead. */
  gap: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--c-ink);
}
.eyebrow em { font-style: normal; color: var(--c-pink); }
.eyebrow::after {
  content: "";
  flex: 0 0 auto;
  width: 286px;
  height: 1px;
  /* the design's own gap between label and rule varies from 13 to 22px per
     section; 15 lands every one of them inside a few pixels */
  margin-left: 15px;
  background: var(--c-pink);
}
/* two instances draw the rule differently: the CTA eyebrow's is 295px and sits
   19px out, and the inner-page intro leaves a 25px gap */
.cta__eyebrow::after { width: 295px; margin-left: 19px; }
.svc-intro .eyebrow::after,
.la-intro .eyebrow::after { margin-left: 25px; }

.eyebrow--on-plum { color: var(--c-white); }
.eyebrow--on-plum em { color: var(--c-white); }
.eyebrow--on-plum::after { background: var(--c-white); }

/* Section heading — 48px Abhaya Libre ExtraBold */
.section-title {
  max-width: 520px;
  margin-top: 19px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1.2;
  color: var(--c-brand-dark);
}
.section-title--light { color: var(--c-white); }
.section-title--w622 { max-width: 622px; }
.section-title--w804 { max-width: 804px; }

/* --------------------------------------------------------------------------
   4. Top bar (0 → 50px)
   -------------------------------------------------------------------------- */
.topbar {
  height: 50px;
  background: var(--c-grey-bar);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding-right: 164px;
}
.topbar__mail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: var(--c-ink);
  text-decoration: none;
}
.topbar__mail img { width: 24px; height: 18px; }
.topbar__divider {
  /* both dividers are 2px-wide dashed strokes at 50% black, not hairlines.
     A CSS `dashed` border picks its own dash length, so the pattern is drawn
     with a gradient instead: 2px on, 2px off here, 3 on / 1 off in the header. */
  width: 2px;
  height: 28px;
  /* 30 + 1 rather than 31 + 0: the extra pixel has to sit on the right so the
     social icons keep their exact Figma x, and the stroke still starts at 1576 */
  margin-left: 30px;
  margin-right: 1px;
  background: repeating-linear-gradient(
    to bottom,
    var(--c-rule-topbar) 0 2px,
    transparent 2px 4px
  );
}
.topbar__social {
  display: flex;
  align-items: center;
  gap: 21px;
  margin-left: 30px;
}
.topbar__social a { display: block; }
.topbar__social img { width: 35px; height: 35px; }

/* --------------------------------------------------------------------------
   5. Header (50 → 185px)
   -------------------------------------------------------------------------- */
.header {
  /* the header rect carries a drop shadow in the design (Figma: 0 2 / 4.1 blur,
     black at 25%); it has to sit above the hero for the shadow to be visible */
  position: relative;
  z-index: 2;
  height: 135px;
  background: var(--c-white);
  box-shadow: 0 2px 4.1px rgba(0, 0, 0, 0.25);
}
.header__inner {
  display: flex;
  align-items: center;
  height: 100%;
}
/* mobile-only pieces — the phone glyph in the header and the slider pager under
   the service cards exist in the mobile file only */
.header__phone,
.services__pager,
.benefits__pager,
.banner__whatsapp { display: none; }

.header__logo { width: 158px; height: 110px; margin-bottom: 1px; }
.header__logo img { width: 100%; height: 100%; }

.nav {
  display: flex;
  align-items: center;
  gap: 160px;
  margin-left: 323px;
}
.nav a {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: var(--c-pink);
  text-decoration: none;
}
.nav a:hover { text-decoration: underline; }

.header__call {
  display: flex;
  align-items: center;
  margin-left: 160px;
  color: var(--c-pink);
}
.header__call-icon { width: 36px; height: 36px; margin-right: 12px; }
.header__call-divider {
  width: 2px;
  height: 54px;
  margin-right: 12px;
  background: repeating-linear-gradient(
    to bottom,
    var(--c-rule-header) 0 3px,
    transparent 3px 4px
  );
}
.header__call-label {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
}
.header__call-number {
  display: block;
  font-family: var(--f-minion);
  font-weight: 700;
  font-size: 28px;
  line-height: 41px;
  color: var(--c-pink);
  text-decoration: none;
  /* Figma overlaps the label and number boxes (label 91–115, number 106) */
  margin-top: -9px;
  /* Minion Pro is not licensed, and the Abhaya fallback sets the number about
     3px short of the 165px the design gives it, which shows up as drift on the
     last digits under the overlay. Spread that back across the glyphs. The inner
     pages set the number in the display face instead and already measure right,
     so the nudge is undone for them below. */
  letter-spacing: 0.25px;
}
/* pinned to the right so the button lands at x1562–1758 regardless of the
   width the call block resolves to with fallback fonts */
.header__cta { margin-left: auto; margin-right: 6px; width: 196px; padding-inline: 0; }

/* inner pages set the number in Abhaya Libre ExtraBold rather than Minion */
.header__call-number--display { font-family: var(--f-display); font-weight: 800; line-height: 33px; margin-top: -4px; letter-spacing: normal; }

/* Mobile nav toggle — hidden on the desktop design */
.nav-toggle { display: none; }
/* the tablet range keeps the ☰ glyph in a bordered box; the phone layout swaps
   in the design's own icon, so only one of the two is ever shown */
.nav-toggle img { display: none; }

/* --------------------------------------------------------------------------
   6. Hero (185 → 793px, 608 tall)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 608px;
  background: var(--bg-hero);
  overflow: hidden;
}
/* Two slides stacked in the same box and cross-faded. The family shot leads, which
   is the variant the design marks as the default; the suit shot is the second. Both
   images are exact 1920x608 renders, so `.hero__bg` fills the slide one to one and
   the old crop percentages are gone. */
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease, visibility 0s linear 700ms;
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 700ms ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}
.hero__inner { position: relative; padding-top: 93px; }
.hero__eyebrow {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 25px;
  text-transform: uppercase;
  color: var(--c-ink);
}
.hero__rule {
  width: 281px;
  height: 2px;
  margin-top: 5px;
  background: var(--c-pink);
}
.hero__title {
  margin-top: 33px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 62px;
  line-height: 72px;
  color: var(--c-ink);
}
.hero__title em { font-style: normal; color: var(--c-pink); }
.hero__cta { margin-top: 39px; width: 225px; padding-inline: 0; }

.hero__dots { position: absolute; left: 48px; top: 513px; }
.hero__whatsapp {
  position: absolute;
  right: 119px;
  top: 513px;
  width: 83px;
  height: 79px;
}

/* --------------------------------------------------------------------------
   7. Why choose us (793 → 1293px, 500 tall)
   -------------------------------------------------------------------------- */
.why {
  position: relative;
  height: 500px;
  padding-top: 63px;
  background: var(--bg-why);
  overflow: hidden;
}
.why__grid { display: flex; }
.why__intro { width: 562px; flex: 0 0 562px; }
.why__text { margin-top: 43px; font-size: 20px; line-height: 25px; color: var(--c-body); }

.why__list {
  width: 817px;
  flex: 0 0 817px;
  margin-left: 222px;
  padding-top: 14px; /* first icon sits at y870, list column starts at y856 */
}
.feature {
  display: flex;
  gap: 23px;
  height: 84px;
  padding-left: 3px;
  border-bottom: 1px solid var(--c-rule-soft);
  margin-bottom: 18px;
}
.feature:last-child { border-bottom: 0; margin-bottom: 0; }
.feature__icon { flex: 0 0 83px; width: 83px; height: 66px; }
.feature__icon img { width: 100%; height: 100%; }
.feature__body { padding-top: 5px; }
.feature__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 28px;
  color: var(--c-brand-dark);
}
.feature__desc {
  margin-top: 5px;
  font-size: 18px;
  line-height: 21px;
  color: var(--c-ink);
}

.why__dots { position: absolute; left: 6px; top: 408px; }

/* --------------------------------------------------------------------------
   8. Services (1293 → 2063px, 770 tall)
   -------------------------------------------------------------------------- */
.services {
  position: relative;
  height: 770px;
  padding-top: 63px;
  background: var(--c-plum);
  overflow: hidden;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 497px);
  gap: 55px;
  margin-top: 47px;
}
.card { width: 497px; }
.card__media { width: 497px; height: 320px; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body {
  position: relative;
  height: 260px;
  padding: 28px 26px 0;
  background: var(--c-white);
  text-align: center;
}
.card__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 25px;
  line-height: 29px;
  text-transform: capitalize;
  color: var(--c-ink);
  white-space: nowrap;
}
.card__text {
  width: 443px;
  margin: 15px auto 0;
  font-size: 20px;
  line-height: 25px;
  color: var(--c-body);
}
/* rule + button are pinned to the card body so they keep their Figma
   offsets (y1901 / y1924) whatever height the copy resolves to */
.card__rule {
  position: absolute;
  left: 15px;
  top: 150px;
  width: 469px;
  height: 1px;
  background: var(--c-card-rule);
}
.card__cta {
  position: absolute;
  left: 170px;
  top: 173px;
  width: 158px;
  padding-inline: 0;
}

.services__dots { position: absolute; right: 58px; top: 268px; }

/* --------------------------------------------------------------------------
   9. FAQ (2063 → 2678px, 615 tall)
   -------------------------------------------------------------------------- */
.faq {
  position: relative;
  height: 615px;
  padding-top: 63px;
  background: var(--bg-faq);
  overflow: hidden;
}
.faq__head { display: flex; }
.faq__head-left { width: 801px; flex: 0 0 801px; }
.faq__title { max-width: 628px; }
.faq__note {
  width: 651px;
  flex: 0 0 651px;
  padding-top: 47px; /* aligns with the h2 baseline row (y2173) */
  font-size: 18px;
  line-height: 25px;
  color: var(--c-body);
}

.faq__cols {
  position: relative;
  display: flex;
  gap: 314px;
  margin-top: 45px;
}
.faq__cols::before { /* vertical divider at x955 */
  content: "";
  position: absolute;
  left: 799px;
  top: 0;
  width: 1px;
  height: 309px;
  background: var(--c-ink);
}
.faq__col { width: 643px; flex: 0 0 643px; }

.faq-item {
  padding-bottom: 29px;
  border-bottom: 1px solid var(--c-ink);
  margin-bottom: 30px;
}
.faq-item:last-child { margin-bottom: 0; }
.faq-item__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 28px;
  color: var(--c-ink);
}
.faq-item__caret {
  flex: 0 0 auto;
  width: 20px;
  height: 23px;
  margin-top: 3px;
  /* the caret sits 27px in from the column's right edge, not flush against it
     (Figma: left column carets end at x773, the column at x799) */
  margin-right: 27px;
  background: url("assets/icons/faq-caret-closed.svg") center / contain no-repeat;
  transform: rotate(90deg);
}
.faq-item__a {
  display: none;
  margin-top: 17px;
  max-width: 540px;
  font-size: 18px;
  line-height: 21.6px;
  color: var(--c-body);
}
.faq-item.is-open { padding-bottom: 22px; margin-bottom: 31px; }
.faq-item.is-open .faq-item__a { display: block; }
.faq-item.is-open .faq-item__caret {
  width: 23px;
  height: 20px;
  margin-top: 5px;
  background-image: url("assets/icons/faq-caret-open.svg");
  transform: rotate(180deg);
}

.faq__dots { position: absolute; right: 0; top: 110px; }

/* --------------------------------------------------------------------------
   10. Testimonials (2678 → 3278px, 600 tall)
   -------------------------------------------------------------------------- */
.testimonials {
  position: relative;
  height: 600px;
  padding-top: 68px;
  background: var(--c-plum);
  overflow: hidden;
}
.testimonials__nav {
  position: absolute;
  right: 164px;
  top: 84px;
  display: flex;
  gap: 24px;
}
.testimonials__nav button {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--c-white);
  border-radius: 5px;
  background: none;
  cursor: pointer;
}
.testimonials__nav img { width: 24px; height: 24px; }
.testimonials__nav .is-prev img { transform: rotate(90deg); }
.testimonials__nav .is-next img { transform: rotate(-90deg); }

.testimonials__viewport {
  position: absolute;
  left: 0;
  top: 276px;
  width: 100%;
  overflow: hidden;
}
.testimonials__track {
  display: flex;
  gap: 30px;
  padding-left: 156px;
  transition: transform .4s ease;
}
.quote {
  flex: 0 0 379px;
  width: 379px;
  height: 250px;
  padding: 28px 28px 0;
  border: 1.5px solid var(--c-white);
  border-radius: 5px;
  text-align: center;
  color: var(--c-white);
}
.quote__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 28px;
}
.quote__stars { width: 134.67px; height: 23.44px; margin: 10px auto 0; }
.quote__text {
  width: 322px;
  margin: 18.56px auto 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
}

.testimonials__pager {
  position: absolute;
  left: 872px;
  top: 562px;
  display: flex;
  gap: 12px;
}
.testimonials__pager span {
  width: 35px;
  height: 10px;
  border: 1px solid var(--c-white);
  border-radius: 50px;
}
.testimonials__pager span.is-active { background: var(--c-white); }

.testimonials__dots { position: absolute; right: 23px; top: 172px; }

/* --------------------------------------------------------------------------
   11. Contact CTA (3278 → 3898px, 620 tall)
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  height: 620px;
  padding-top: 50px;
  overflow: hidden;
  background: #C4C4C4;
}
.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta__veil { position: absolute; inset: 0; background: var(--bg-cta-veil); }
.cta__inner { position: relative; display: flex; }
.cta__intro { width: 953px; flex: 0 0 953px; }
.cta__eyebrow::after { width: 296px; }
.cta__text {
  width: 644px;
  margin-top: 39px;
  font-size: 20px;
  line-height: 25px;
  color: var(--c-body);
}
.cta__dots { position: absolute; left: 73px; top: 479px; }

.contact-form { width: 500px; flex: 0 0 500px; margin-top: -12px; }
.contact-form__head {
  height: 69px;
  display: grid;
  place-items: center;
  border-radius: 15px 15px 0 0;
  background: var(--c-plum);
  font-family: var(--f-minion);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
  /* Minion Pro is unlicensed and the Abhaya fallback sets this 38px short of the
     356px the design gives it — spread the difference across the glyphs */
  letter-spacing: 2.5px;
  /* both pages place this text 12px right of the bar's centre, so it is a
     deliberate offset rather than a one-off slip — nudge it across */
  text-indent: 23.5px;
  color: var(--c-white);
}
.field { margin-top: 25px; }
.field label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: var(--c-ink);
}
.field label span { color: var(--c-pink); }
.field input,
.field textarea {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--c-ink);
  border-radius: 5px;
  background: transparent;
  font-family: var(--f-body);
  font-size: 18px;
  color: var(--c-ink);
}
.field textarea { display: block; height: 133px; padding: 12px 14px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 255px 237px; gap: 8px; }
.field-row .field { margin-top: 25px; }
.field-row input { height: 52px; }
.field-row + .field { margin-top: 23px; }
.contact-form__submit {
  display: block;
  width: 174px;
  margin: 25px 0 0 165px;
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   12. Footer (3898 → 4260px, 362 tall)
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  height: 362px;
  background: var(--c-grey-bar);
  overflow: hidden;
}
.footer__inner { position: relative; display: flex; padding-top: 18px; }

.footer__brand { position: relative; width: 447px; flex: 0 0 447px; }
.footer__logo { width: 173px; height: 121px; }
.footer__logo img { width: 100%; height: 100%; }
.footer__brand-rule {
  width: 236px;
  height: 2px;
  margin-top: 15px;
  background: var(--c-ink);
}
.footer__tagline {
  width: 263px;
  margin-top: 10px;
  font-size: 16px;
  line-height: 20px;
  color: var(--c-ink);
}
.footer__social {
  position: absolute;
  left: 0;
  top: 212px;
  display: flex;
  gap: 31px;
}
.footer__social img { width: 46px; height: 46px; }

.footer__col-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 28px;
  color: var(--c-ink);
}
.footer__col-rule {
  width: 80px;
  height: 2px;
  margin-top: 18px;
  background: var(--c-pink);
}

.footer__contact { width: 391px; flex: 0 0 391px; padding-top: 18px; }
.footer__contact ul { margin-top: 39px; }
.footer__contact li {
  display: flex;
  gap: 18px;
  margin-bottom: 24px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: var(--c-ink);
}
.footer__contact li img { flex: 0 0 22px; width: 22px; height: 22px; transform: translateY(2px); }
.footer__contact a { text-decoration: none; }
.footer__contact strong { font-weight: 700; }

.footer__links { width: 315px; flex: 0 0 315px; padding-top: 18px; }
.footer__links ul { margin-top: 39px; }
.footer__links li { margin-bottom: 20px; line-height: 0; }
.footer__links a {
  display: inline-block;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: var(--c-ink);
  text-decoration: underline;
}
.footer__links a.is-current { color: var(--c-pink); }

.footer__badge { width: 354px; flex: 0 0 354px; padding-top: 64px; }
.footer__badge img { width: 354px; height: 186px; object-fit: cover; }

.footer__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55px;
  border-top: 1px solid rgba(0, 0, 0, .25);
  display: grid;
  place-items: center;
  /* the line sits above the middle of the bar in the design (baseline y4234 in
     a 4205–4260 bar), so take 10px off the bottom to lift it by 5 */
  padding-bottom: 10px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--c-ink);
}
/* the left block is the grid turned on its side — 3 columns by 9 rows, running
   down past the logo, not the 9 x 3 band the other decorations use */
.footer__dots-left { position: absolute; left: 21px; top: 12px; width: 58px; height: 214px; }
.footer__dots-right { position: absolute; right: 0; top: 17px; }

/* --------------------------------------------------------------------------
   13. Inner pages — banner + Contact page
   -------------------------------------------------------------------------- */
.header--shadow { box-shadow: 0 2px 4.1px rgba(0, 0, 0, .25); position: relative; z-index: 2; }

/* Inner-page banner: 1920 x 350 image with a white wash from the left */
.banner {
  position: relative;
  height: 350px;
  overflow: hidden;
}
.banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the phone layout is not a crop of the desktop photo — the mockup uses its own
   440-wide artwork per page, served through <picture>. display:contents keeps
   the wrapper out of the box tree so the image stays absolute against .banner */
.banner picture,
.hero picture { display: contents; }
.banner__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, .12) 10%, #FFFFFF);
}
.banner__inner { position: relative; padding-top: 89px; }
.banner__eyebrow {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 25px;
  text-transform: uppercase;
  color: var(--c-ink);
}
.banner__rule { width: 281px; height: 2px; margin-top: 7px; background: var(--c-pink); }
.banner__title {
  margin-top: 10px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 62px;
  line-height: 72px;
  color: var(--c-ink);
}
.banner__dots { position: absolute; left: 156px; top: 257px; }

/* Contact page ------------------------------------------------------------ */
.contact-page {
  position: relative;
  height: 950px;
  padding-top: 63px;
  background: var(--bg-why);
  overflow: hidden;
}
.contact-page__inner { position: relative; display: flex; }
.contact-page__main { width: 1030px; flex: 0 0 1030px; }
.contact-page__title {
  max-width: 400px;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1.2;
  color: var(--c-brand-dark);
}
.contact-page__lead {
  margin-top: 20px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--c-body);
}

.contact-page__form { margin-top: 44px; }
.contact-page__form .field-grid {
  display: grid;
  grid-template-columns: 500px 500px;
  column-gap: 30px;
  row-gap: 45px;
}
.contact-page__form .field { margin-top: 0; }
.contact-page__form label {
  margin-bottom: 12px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
  color: var(--c-ink);
}
.contact-page__form .field--wide { grid-column: 1 / -1; }
.contact-page__form textarea { height: 200px; }
.contact-page__form .btn { margin-top: 50px; width: 174px; padding-inline: 0; }

/* Pink "we're here to help" panel */
.help-card {
  width: 500px;
  flex: 0 0 500px;
  margin-left: 79px;
  margin-top: 63px;
  height: 631px;
  padding: 31px 36px 0 42px;
  border-radius: 18px;
  background: var(--c-plum);
  color: var(--c-white);
}
.help-card__title {
  width: 417px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 44px;
}
.help-card ul { margin-top: 46px; }
.help-card li {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 46px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
}
.help-card li:nth-child(2) { margin-bottom: 40px; }
.help-card li img { flex: 0 0 58px; width: 58px; height: 58px; }
.help-card li a { text-decoration: none; }
.help-card strong { font-weight: 700; }
.help-card li p { margin-top: 6px; }
/* text sits 6px below the icon top in the design (y876 vs card row top 870) */
.help-card li span { display: block; padding-top: 6px; }

.contact-page__dots { position: absolute; right: 199px; top: 637px; }

/* --------------------------------------------------------------------------
   14. Service / Legal Aid page sections
   -------------------------------------------------------------------------- */

/* "About the service" band */
.svc-intro {
  height: 299px;
  padding-top: 63px;
  background: linear-gradient(88.12deg, #FFFFFF 0.25%, rgba(255, 255, 255, 0) 226.54%), #C4C4C4;
}
/* these three dot grids exist only in the phone mockup — without a base rule
   they fall into normal flow on wider screens */
.svc-intro__dots,
.svc-list__dots,
.la-intro__dots { display: none; }
.prose-wide {
  width: 1601px;
  max-width: 100%;
  margin-top: 34px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--c-body);
}

/* White band with the numbered service rows */
.svc-list { height: 654px; padding-top: 63px; background: var(--c-white); }
.svc-list .section-title { max-width: 804px; margin-top: 0; }
.svc-list__lead { margin-top: 16px; width: 1601px; max-width: 100%; font-size: 20px; line-height: 1.5; color: var(--c-body); }
.svc-rows { margin-top: 34px; }
.svc-row { display: flex; gap: 23px; margin-bottom: 34px; }
.svc-row:last-child { margin-bottom: 0; }
.svc-row__icon { flex: 0 0 83px; width: 83px; height: 66px; }
.svc-row__icon img { width: 100%; height: 100%; }
.svc-row__body { padding-top: 5px; }
.svc-row__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 28px;
  color: var(--c-brand-dark);
}
/* the first row's text box is set to 70px in Figma even though its copy runs to
   three lines — keeping that height is what puts the next row's title on y1212 */
.svc-list .svc-row:first-child .svc-row__text { height: 70px; }
.svc-row__text {
  width: 1497px;
  max-width: 100%;
  margin-top: 5px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--c-ink);
}

/* "Who needs …" band with triangle bullets */
.who {
  position: relative;
  height: 478px;
  padding-top: 63px;
  background: var(--bg-faq);
  overflow: hidden;
}
.who .section-title { max-width: 1039px; margin-top: 0; }
.who__lead { margin-top: 16px; width: 1601px; max-width: 100%; font-size: 20px; line-height: 1.5; color: var(--c-body); }
.who__list { margin-top: 34px; }
.who__list li {
  /* the caret is absolute rather than a flex sibling: as flex items the label
     and the sentence after it become separate blocks, so the gap opens up mid
     sentence and a wrapped second line can't run back under the label */
  position: relative;
  padding-left: 47px;
  margin-bottom: 34px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 28px;
  color: var(--c-ink);
}
.who__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 23px;
  background: url("assets/icons/bullet-caret.svg") center / contain no-repeat;
  transform: rotate(90deg);
}
.who__dots { position: absolute; right: 0; top: 110px; }

/* Benefits band — 3 image cards with no CTA */
.benefits {
  position: relative;
  padding: 63px 0 33px;
  background: var(--c-white);
  overflow: hidden;
}
.benefits__lead { margin-top: 17px; width: 1601px; max-width: 100%; font-size: 20px; line-height: 1.5; color: var(--c-body); }
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 497px);
  gap: 55px;
  margin-top: 35px;
}
.benefits .card__body { height: 260px; }
.benefits .card__rule { top: 230px; }
.benefits__dots { position: absolute; right: 58px; top: 54px; }

/* CTA copy is narrower on the service pages */
.cta__text--wide { width: 678px; }

/* --------------------------------------------------------------------------
   15. Legal Aid page
   -------------------------------------------------------------------------- */
.la-intro {
  height: 487px;
  padding-top: 63px;
  background: linear-gradient(88.84deg, #FFFFFF 0.25%, rgba(255, 255, 255, 0) 226.54%), #C4C4C4;
}
.subhead {
  margin-top: 34px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 28px;
  color: var(--c-ink);
}
.prose-wide + .subhead { margin-top: 34px; }
.subhead + .prose-wide { margin-top: 34px; }

.la-who { height: 530px; padding-top: 63px; background: var(--c-white); }
.la-who .section-title { max-width: 804px; margin-top: 0; }

.la-services {
  position: relative;
  height: 517px;
  padding-top: 63px;
  background: var(--bg-faq);
  overflow: hidden;
}
.la-services .section-title { max-width: 1292px; margin-top: 0; }
.la-services__dots { position: absolute; right: 0; top: 110px; }

.la-benefit { height: 278px; padding-top: 63px; background: var(--c-white); }
.la-benefit .subhead { margin-top: 0; }

.la-qualify {
  position: relative;
  height: 822px;
  padding-top: 63px;
  background: linear-gradient(89.31deg, #FFFFFF 0.25%, rgba(255, 255, 255, 0) 226.54%), #C4C4C4;
  overflow: hidden;
}
.la-qualify .section-title { max-width: 1292px; margin-top: 0; }
.la-qualify__lead { margin-top: 17px; width: 1601px; max-width: 100%; font-size: 20px; line-height: 1.5; color: var(--c-body); }
.la-cols { display: flex; gap: 246px; margin-top: 63px; }
.la-col { width: 554px; flex: 0 0 554px; }
.la-col--right { width: 751px; flex: 0 0 751px; }
.la-col__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 25px;
  line-height: 29px;
  text-transform: capitalize;
  color: var(--c-ink);
}
.la-col__text { margin-top: 14px; width: 554px; max-width: 100%; font-size: 20px; line-height: 25px; color: var(--c-body); }
.la-col__list { margin-top: 30px; }
.la-col__list li {
  display: flex;
  gap: 27px;
  margin-bottom: 30px;
  width: 751px;
  max-width: 100%;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: var(--c-ink);
}
.la-col__list li strong { font-weight: 800; }
.la-col__list li::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 23px;
  margin-top: 12px;
  background: url("assets/icons/bullet-caret.svg") center / contain no-repeat;
  transform: rotate(90deg);
}
.la-qualify__outro { margin-top: 63px; width: 1601px; max-width: 100%; font-size: 20px; line-height: 1.5; color: var(--c-body); }
.la-qualify__outro + .la-qualify__outro { margin-top: 43px; }
.la-col__list li:last-child { margin-bottom: 0; }
.la-qualify__dots { position: absolute; left: 156px; top: 468px; }

/* the "what services…" bullets carry a bold lead-in */
.who__list li strong { font-weight: 800; }
.who__list li span { font-weight: 500; }

/* Legal Aid bullets: items 3 and 4 have narrower text boxes in the design, which
   is what puts "or Family Court." and "proceedings." on their own lines. The
   third is also followed by a 17px gap rather than 34. */
.la-services .who__list li { max-width: 100%; }
.la-services .who__list li:nth-child(3) { width: 1600px; margin-bottom: 17px; }
.la-services .who__list li:nth-child(4) { width: 1292px; }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1800px) {
  .topbar__inner { padding-right: 0; }
  .topbar__inner { width: min(var(--container), calc(100% - 96px)); margin-inline: auto; }
  .nav { margin-left: auto; gap: 60px; }
  .header__call { margin-left: 60px; }
  .header__cta { margin-left: 40px; }

  .why, .services, .faq, .testimonials, .cta, .hero, .footer,
  .banner, .contact-page, .svc-intro, .svc-list, .who, .benefits,
  .la-intro, .la-who, .la-services, .la-benefit, .la-qualify { height: auto; }
  .hero { padding-bottom: 120px; }
  /* the hero is no longer a fixed 608px box, so the visible slide has to sit in
     the flow and set the height; the other one stays stacked on top of it */
  .hero__slides { position: relative; inset: auto; }
  .hero__slide.is-active { position: relative; }
  .banner { padding-bottom: 60px; }
  .contact-page, .svc-intro, .svc-list, .who, .benefits,
  .la-intro, .la-who, .la-services, .la-benefit, .la-qualify { padding-bottom: 80px; }

  /* wide fixed-width copy becomes fluid */
  .prose-wide, .svc-list__lead, .svc-row__text, .who__lead, .benefits__lead,
  .la-qualify__lead, .la-qualify__outro, .la-col__text, .la-col__list li,
  .contact-page__main, .cta__text, .cta__text--wide { width: 100%; }
  .svc-row__body { min-width: 0; }
  .who__dots, .la-services__dots, .la-qualify__dots, .benefits__dots,
  .banner__dots, .contact-page__dots { display: none; }
  .la-cols { flex-wrap: wrap; gap: 40px; }
  .la-col, .la-col--right { flex: 1 1 380px; width: auto; }
  .la-qualify__outro { margin-top: 40px; }

  .contact-page__inner { flex-wrap: wrap; gap: 60px; }
  .contact-page__main { flex: 1 1 620px; }
  .help-card { flex: 0 0 500px; margin-left: 0; margin-top: 0; height: auto; padding-bottom: 40px; }
  .contact-page__form .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-page__form textarea { width: 100%; }
  .why { padding-bottom: 80px; }
  .services { padding-bottom: 80px; }
  .faq { padding-bottom: 80px; }
  .testimonials { padding-bottom: 80px; }
  .cta { padding-bottom: 80px; }

  .why__grid { gap: 60px; }
  .why__list { margin-left: 0; flex: 1 1 auto; width: auto; }
  .why__intro { flex: 0 0 480px; width: 480px; }
  .why__dots { display: none; }

  .services__grid, .benefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .card, .card__media { width: 100%; }
  .card__text { width: 100%; }
  .card__rule { width: 100%; }
  .services__dots { display: none; }

  .faq__head { gap: 60px; }
  .faq__head-left { flex: 1 1 auto; width: auto; }
  .faq__note { flex: 0 0 520px; width: 520px; }
  .faq__cols { gap: 60px; }
  .faq__col { flex: 1 1 0; width: auto; }
  .faq__cols::before { display: none; }
  .faq__dots { display: none; }

  .testimonials__viewport { position: static; margin-top: 60px; }
  .testimonials__track { padding-left: 0; }
  .testimonials__nav { position: static; margin-left: auto; margin-top: -50px; width: 124px; }
  .testimonials__pager { position: static; margin: 40px auto 0; width: max-content; }
  .testimonials__dots { display: none; }

  .cta__inner { gap: 60px; }
  .cta__intro { flex: 1 1 auto; width: auto; }
  .cta__text { width: 100%; max-width: 644px; }
  .cta__dots { display: none; }

  .footer__inner { flex-wrap: wrap; gap: 40px; padding-bottom: 80px; }
  .footer__brand, .footer__contact, .footer__links, .footer__badge { flex: 0 1 auto; width: auto; }
  .footer__badge { padding-top: 0; }
  .footer__bar { position: static; }
  .footer__dots-left, .footer__dots-right { display: none; }
}

@media (max-width: 1200px) {
  .container { width: calc(100% - 64px); }
  .hero { height: auto; padding-bottom: 100px; }
  .hero__title { font-size: 48px; line-height: 56px; }
  .hero__dots, .hero__whatsapp { display: none; }
  .section-title { font-size: 40px; }

  .why__grid { flex-direction: column; }
  .why__intro { flex: 0 0 auto; width: 100%; }

  .faq__head { flex-direction: column; gap: 24px; }
  .faq__note { flex: 0 0 auto; width: 100%; padding-top: 0; }
  .faq__cols { flex-direction: column; gap: 0; }

  .cta__inner { flex-direction: column; }
  .contact-form { flex: 0 0 auto; width: 100%; max-width: 500px; }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid var(--c-pink);
    border-radius: 6px;
    background: none;
    color: var(--c-pink);
    font-size: 22px;
    cursor: pointer;
  }
  .header { height: auto; padding-block: 16px; }
  .header__inner { flex-wrap: wrap; }
  .nav {
    order: 5;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin: 16px 0 0;
    display: none;
  }
  .nav.is-open { display: flex; }
  .header__call { display: none; }
  .header__cta { display: none; }

  .topbar__mail { font-size: 18px; }
  .topbar__inner { justify-content: space-between; }

  .services__grid, .benefits__grid { grid-template-columns: 1fr; }
  .card__title { white-space: normal; }
  .field-row { grid-template-columns: 1fr; }
  .footer__badge img { width: 100%; height: auto; }
  .contact-page__form .field-grid { grid-template-columns: 1fr; row-gap: 24px; }
  .help-card { flex: 1 1 auto; width: 100%; }
  .help-card__title { width: 100%; font-size: 30px; line-height: 34px; }
  .banner__title { font-size: 38px; line-height: 46px; }
  .svc-row { flex-wrap: wrap; gap: 16px; }
  .who__list li, .la-col__list li { font-size: 20px; line-height: 26px; }
}

/* ==========================================================================
   Mobile — AKS-solictors-website-mobile-rk-v1, 440px frame
   This is a separate design, not a squeezed desktop: the top bar and nav bar
   are gone, the features and cards centre themselves, the services and
   testimonials become swipeable sliders, and the footer rearranges completely.
   Every number below comes from that file's coordinates on its 440px canvas
   with 30px gutters (so a 380px content column), left fluid so 375 and 767
   keep the same proportions.
   ========================================================================== */
@media (max-width: 767px) {
  .container { width: calc(100% - 60px); }

  /* every section in the file puts its heading 10px under the eyebrow, and its
     lead paragraph 11px under the heading */
  .section-title { margin-top: 10px; font-size: 36px; line-height: 40px; }

  /* the label-to-rule gap runs 12–22px across sections in the mobile file just
     as it does in the desktop one; 15 lands every section within a few pixels.
     The rule itself runs off the container to the screen edge. */
  .eyebrow {
    margin-right: -30px;
    font-size: 18px;
    line-height: 21px;
  }
  .eyebrow::after,
  .cta__eyebrow::after,
  .svc-intro .eyebrow::after,
  .la-intro .eyebrow::after {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-left: 15px;
  }

  /* the dot grid is finer here: 7px dots on a 22 x 20 pitch, 5 columns by 3 */
  .dots,
  .dots--vertical {
    width: 96px;
    height: 48px;
    background-image: radial-gradient(circle at 3.5px 3.5px, var(--dot-color) 3.5px, transparent 3.5px);
    background-size: 22px 20px;
  }

  /* ---- header: 115px tall, just logo + phone glyph + hamburger ---------- */
  .topbar { display: none; }
  .header { height: 115px; padding-block: 0; }
  .header__inner { flex-wrap: nowrap; }
  .header__logo { width: 108px; height: 75px; margin-bottom: 0; }
  .header__call,
  .header__cta { display: none; }

  .header__phone {
    display: block;
    width: 33px;
    height: 33px;
    margin-left: auto;
    margin-right: 37px;
  }
  .header__phone img { width: 100%; height: 100%; }

  /* the design's own icon rather than the bordered glyph of the tablet range.
     36x25 is the stroked size — the three bars sit on a 33x22 box but the 3px
     round caps push half a stroke past it on every side. */
  .nav-toggle {
    width: 36px;
    height: 25px;
    margin-left: 0;
    margin-right: -1px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0;
  }
  .nav-toggle span { display: none; }
  .nav-toggle img { display: block; width: 36px; height: 25px; }
  /* the menu drops out of the header instead of growing it */
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    padding: 18px 30px 22px;
    background: var(--c-white);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.12);
  }

  /* ---- hero: 600px, text centred over a full-bleed image ---------------- */
  .hero { height: 600px; padding-bottom: 0; }
  .hero__slides { position: absolute; inset: 0; }
  .hero__slide,
  .hero__slide.is-active { position: absolute; }
  .hero__inner { padding-top: 316px; text-align: center; }
  .hero__eyebrow { font-size: 19px; line-height: 22px; font-weight: 700; }
  .hero__rule { width: 256px; margin: 10px auto 0; }
  .hero__title { margin-top: 28px; font-size: 36px; line-height: 40px; }
  /* 20px here, not the desktop 24 — the label box is 150px wide in the design */
  .hero__cta { display: flex; width: 200px; margin: 30px auto 0; font-size: 20px; }
  .hero__dots { display: none; }
  .hero__whatsapp {
    display: block;
    right: 30px;
    top: 514px;
    width: 71px;
    height: 68px;
  }

  /* ---- why choose us: centred features separated by hairlines ----------- */
  .why { height: auto; padding: 50px 0 41px; }
  .why__grid { gap: 0; }
  .why__text {
    width: 100%;
    margin-top: 11px;
    font-size: 18px;
    line-height: 30px;
    text-align: justify;
  }
  .why__list { display: block; margin-top: 15px; }
  .feature {
    display: block;
    /* the desktop row is a fixed 84px tall with the icon beside the text; here
       it stacks and has to grow with its copy */
    height: auto;
    padding-left: 0;
    padding-bottom: 28px;
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 1px solid #000;
  }
  .feature:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }
  .feature__icon { flex: none; width: 69px; height: 55px; margin: 0 auto; }
  .feature__body { padding-top: 0; }
  .feature__title { margin-top: 10px; font-size: 21px; line-height: 25px; }
  .feature__desc {
    width: 100%;
    margin-top: 5px;
    font-size: 17px;
    line-height: 24px;
    color: #000;
  }
  .why__dots { display: block; left: auto; right: 9px; top: 300px; }

  /* ---- services: the three cards become a swipeable slider -------------- */
  .services { height: auto; padding: 40px 0 35px; }
  .services__grid {
    display: flex;
    gap: 20px;
    margin-top: 34px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .services__grid::-webkit-scrollbar { display: none; }
  .card {
    flex: 0 0 100%;
    height: 530px;
    scroll-snap-align: start;
  }
  .card__media { height: 250px; }
  .card__body { height: 280px; padding: 21px 15px 0; }
  .card__title {
    width: 100%;
    font-size: 24px;
    line-height: 28px;
    white-space: normal;
  }
  .card__text {
    width: 350px;
    max-width: 100%;
    margin: 14px auto 0;
    font-size: 17px;
    line-height: 24px;
  }
  /* the rule and the button stay absolutely placed, as on desktop. The design
     puts them lower on the first card than on the other two; the first is the
     one on screen at rest, so its offsets are the ones matched here. */
  .card__rule { left: 15px; top: 183px; width: 350px; }
  .card__cta { left: 110px; top: 203px; width: 160px; }

  .services__pager {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
  }
  .services__pager span {
    width: 35px;
    height: 10px;
    border: 1px solid var(--c-white);
    border-radius: 50px;
    cursor: pointer;
  }
  .services__pager span.is-active { background: var(--c-white); }
  .services__dots { display: block; left: auto; right: 16px; top: 640px; }

  /* ---- FAQ: one column, hairline between every item --------------------- */
  .faq { height: auto; padding: 50px 0 80px; }
  .faq__head { gap: 0; }
  .faq__note {
    margin-top: 11px;
    font-size: 18px;
    line-height: 30px;
    text-align: justify;
  }
  .faq__cols { margin-top: 30px; }
  .faq__cols::before { display: none; }
  .faq-item {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #000;
  }
  .faq-item.is-open { padding-bottom: 25px; }
  .faq-item__q { padding: 0; font-size: 21px; line-height: 25px; }
  .faq-item__caret { margin-right: 0; }
  .faq-item__a {
    width: 100%;
    max-width: none;
    margin-top: 10px;
    font-size: 17px;
    line-height: 26px;
    text-align: justify;
  }
  .faq__dots { display: block; left: 13px; right: auto; top: auto; bottom: 15px; }

  /* ---- testimonials: one bordered card per view ------------------------- */
  .testimonials { height: auto; padding: 40px 0 38px; }
  .testimonials__nav { display: none; }
  .testimonials__viewport { margin-top: 36px; padding-left: 30px; }
  .quote {
    flex: 0 0 380px;
    width: 380px;
    max-width: calc(100vw - 60px);
    height: 225px;
    padding: 28px 25px;
    border-width: 1.5px;
    border-radius: 5px;
    text-align: center;
  }
  .quote__name { font-size: 21px; line-height: 25px; }
  .quote__text {
    width: 100%;
    margin-top: 21px;
    font-size: 18px;
    line-height: 24px;
  }
  .testimonials__pager { margin-top: 40px; gap: 12px; }
  .testimonials__pager span {
    width: 35px;
    height: 10px;
    border: 1px solid var(--c-white);
    border-radius: 50px;
  }
  .testimonials__dots { display: none; }

  /* ---- CTA ---------------------------------------------------------------
     The band keeps the same fill stack as the desktop file — photograph, white
     veil and gradient over #C4C4C4 — so only the layout changes here. */
  .cta { height: auto; padding: 50px 0 28px; }
  .cta__inner { gap: 0; }
  .cta__text {
    width: 100%;
    margin-top: 11px;
    font-size: 18px;
    line-height: 30px;
    text-align: justify;
  }
  .contact-form { max-width: none; margin-top: 35px; }
  .field,
  .field-row + .field { margin-top: 19px; }
  .contact-form__head + .field { margin-top: 25px; }
  /* the email/phone pair stacks here, so the row owns the gap, not its fields */
  .field-row { margin-top: 19px; gap: 19px; }
  .field-row .field { margin-top: 0; }
  .field label { margin-bottom: 8px; }
  .field-row input { height: 45px; }
  .contact-form__head {
    height: 52px;
    font-size: 24px;
    letter-spacing: normal;
    text-indent: 0;
  }
  .field input { height: 45px; border-radius: 5px; }
  .field textarea { height: 150px; border-radius: 5px; }
  .contact-form__submit { width: 150px; margin: 35px auto 0; }
  .cta__dots { display: block; left: auto; right: 18px; top: auto; bottom: 38px; }

  /* ---- footer: brand row, then two centred stacked columns -------------- */
  .footer { height: auto; padding: 0 0 20px; }
  /* the badge is absolute inside .footer__inner, which is the 380px container,
     so "right: 0" is the container's right edge — the design's x220 */
  .footer__inner { display: block; padding: 41px 0 0; }

  .footer__badge {
    position: absolute;
    right: 0;
    top: 35px;
    width: 190px;
    padding: 0;
  }
  .footer__badge img { width: 190px; height: 100px; object-fit: contain; }

  .footer__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
  }
  /* the mark is centred over the 158px rule beneath it, not flush to the gutter */
  .footer__logo {
    display: flex;
    justify-content: center;
    flex: 0 0 159px;
    height: 77px;
  }
  .footer__logo img { width: 110px; height: 77px; }
  .footer__brand-rule {
    flex: 0 0 100%;
    height: 2px;
    margin-top: 15px;
    background: linear-gradient(#000, #000) left / 158px 2px no-repeat;
  }
  .footer__tagline {
    flex: 0 0 159px;
    margin-top: 15px;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
  }
  /* the three circles are not evenly spaced in the design — 26px then 23px */
  .footer__social {
    position: static;
    margin: 15px 0 0 auto;
    gap: 0;
  }
  .footer__social a,
  .footer__social img { width: 47px; height: 47px; }
  .footer__social a:nth-child(2) { margin-left: 26px; }
  .footer__social a:nth-child(3) { margin-left: 23px; }

  .footer__contact,
  .footer__links { width: 100%; text-align: center; }
  .footer__contact { margin-top: 41px; padding-top: 0; }
  .footer__links { margin-top: 31px; padding-top: 0; }
  .footer__col-title { font-size: 20px; line-height: 24px; }
  .footer__col-rule { width: 80px; margin: 13px auto 0; }

  .footer__contact ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 19px 0;
    margin-top: 25px;
    text-align: left;
  }
  .footer__contact li {
    gap: 16px;
    align-items: center;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 19px;
  }
  /* each glyph keeps its own aspect here — the desktop column squares them off */
  .footer__contact li img { flex: 0 0 auto; }
  .footer__contact li:nth-child(1) img { width: 20px; height: 15px; }
  .footer__contact li:nth-child(2) img { width: 15px; height: 15px; }
  .footer__contact li:nth-child(3) img { width: 16px; height: 23px; }
  /* the address is one running line here, not the three the desktop column has */
  .footer__contact li br { display: none; }
  /* email left, phone right on one line, address across both */
  .footer__contact li:nth-child(2) { justify-content: flex-end; }
  .footer__contact li:nth-child(3) { grid-column: 1 / -1; align-items: flex-start; }
  /* the mobile mockup writes "Stockport Road," and so breaks after "Stockport";
     the desktop mockup has no comma and neither does our markup, so the column
     is capped instead to land the break on the same word */
  .footer__contact li:nth-child(3) span { max-width: 310px; }

  /* the design hangs a dot grid off the left edge at the top of the columns */
  .footer__dots-left {
    display: block;
    left: 0;
    top: 225px;
    width: 96px;
    height: 48px;
  }

  .footer__links ul {
    display: flex;
    justify-content: space-between;
    gap: 0;
    margin-top: 25px;
  }
  .footer__links li { margin-bottom: 0; }
  .footer__links a { font-size: 16px; line-height: 19px; }

  .footer__bar {
    position: static;
    height: auto;
    margin-top: 36px;
    padding: 14px 30px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.35);
    background: none;
    font-size: 15px;
    line-height: 19px;
  }
  /* ---- inner-page banner: 430px, everything centred --------------------- */
  .banner { height: 430px; padding-bottom: 0; }
  /* same two stops as desktop, but the phone file runs the veil top-to-bottom
     instead of right-to-left, and across the full height with no offset */
  .banner__veil { background: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, .12)); }
  .banner__inner { padding-top: 28px; text-align: center; }
  .banner__eyebrow { font-size: 19px; line-height: 22px; }
  .banner__rule { width: 256px; height: 2px; margin: 10px auto 0; }
  .banner__title { margin-top: 14px; font-size: 36px; line-height: 39px; }
  .banner__dots { display: block; left: 13px; right: auto; top: 366px; }
  /* the mobile file puts a WhatsApp button on the inner pages too */
  .banner__whatsapp {
    display: block;
    position: absolute;
    right: 30px;
    top: 346px;
    width: 71px;
    height: 68px;
  }

  /* ---- services page ---------------------------------------------------- */
  /* the two inner-page section labels are set at 24px here, not the 18px the
     homepage uses, and the benefits one draws its rule in black rather than pink */
  .svc-intro .eyebrow,
  .benefits .eyebrow { font-size: 24px; line-height: 28px; }

  .svc-intro { position: relative; height: auto; padding: 50px 0 47px; }
  .prose-wide {
    width: 100%;
    margin-top: 20px;
    font-size: 18px;
    line-height: 30px;
    text-align: justify;
  }
  .svc-intro__dots { display: block; position: absolute; left: auto; right: 7px; top: 500px; }

  .svc-list { position: relative; height: auto; padding: 50px 0 57px; }
  .svc-list__lead {
    width: 100%;
    margin-top: 18px;
    font-size: 18px;
    line-height: 30px;
    text-align: justify;
  }
  .svc-list__dots { display: block; position: absolute; left: auto; right: 9px; top: 280px; }
  .svc-rows { margin-top: 30px; }
  .svc-row {
    display: block;
    gap: 0;
    margin-bottom: 35px;
    text-align: center;
  }
  .svc-row:last-child { margin-bottom: 0; }
  .svc-row__icon { flex: none; width: 69px; height: 55px; margin: 0 auto; }
  .svc-row__body { padding-top: 0; }
  /* the desktop layout caps the first row's copy at 70px; here it runs full */
  .svc-list .svc-row:first-child .svc-row__text { height: auto; }
  .svc-row__title { margin-top: 10px; font-size: 24px; line-height: 28px; }
  .svc-row__text {
    width: 100%;
    margin-top: 10px;
    font-size: 17px;
    line-height: 24px;
    color: var(--c-ink);
    text-align: justify;
  }
  /* the first row is set a size larger than the other two in the mobile file */
  .svc-row:first-child .svc-row__title { font-size: 21px; line-height: 25px; }
  .svc-row:first-child .svc-row__text { font-size: 18px; line-height: 27px; }

  .who { height: auto; padding: 39px 0 55px; }
  .who__lead {
    width: 100%;
    margin-top: 21px;
    font-size: 18px;
    line-height: 30px;
    text-align: justify;
  }
  .who__list { margin-top: 35px; }
  .who__list li {
    width: auto;
    max-width: none;
    padding-left: 28px;
    margin-bottom: 25px;
    font-size: 21px;
    line-height: 25px;
    text-align: justify;
  }
  .who__list li:last-child { margin-bottom: 0; }
  .who__list li::before { top: 4px; width: 14px; height: 21px; }
  /* the only dot block near this section sits just above it, half off canvas */
  .who__dots { display: block; left: auto; right: -7px; top: -22px; }

  .benefits { height: auto; padding: 50px 0 39px; }
  /* this label wraps to two lines and the rule follows the last word, so it has
     to be part of the text flow rather than a flex sibling */
  .benefits .eyebrow { display: block; }
  .benefits .eyebrow::after {
    display: inline-block;
    width: 220px;
    height: 1px;
    margin-left: 12px;
    vertical-align: middle;
    background: var(--c-ink);
  }
  .benefits__lead {
    width: 100%;
    margin-top: 18px;
    font-size: 18px;
    line-height: 30px;
    text-align: justify;
  }
  .benefits__grid {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .benefits__grid::-webkit-scrollbar { display: none; }
  .benefits .card { height: 520px; }
  .benefits .card__body { height: 270px; }
  .benefits .card__text { margin-top: 21px; }
  .benefits .card__rule { left: 33px; top: 223px; width: 313px; }
  .benefits__pager {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 19px;
  }
  .benefits__pager span {
    width: 35px;
    height: 10px;
    border: 1px solid var(--c-pink);
    border-radius: 50px;
    cursor: pointer;
  }
  .benefits__pager span.is-active { background: var(--c-pink); }
  .benefits__dots { display: block; left: 0; right: auto; top: 734px; }

  /* ---- legal aid page --------------------------------------------------- */
  /* each inner page parks its banner dots somewhere different */
  /* the services banner parks its dots bottom left, the other two top right */
  .banner--legal-aid .banner__dots,
  .banner--contact .banner__dots { left: auto; right: 7px; top: 88px; }
  .banner--legal-aid .banner__whatsapp { top: 343px; }
  .banner--contact .banner__whatsapp { top: 336px; }

  .la-intro { position: relative; height: auto; padding: 50px 0 38px; }
  .la-intro .eyebrow { font-size: 24px; line-height: 28px; }
  .la-intro__dots { display: block; position: absolute; left: auto; right: 7px; top: 427px; }
  .subhead,
  .prose-wide + .subhead { margin-top: 25px; font-size: 21px; line-height: 25px; }
  .subhead + .prose-wide { margin-top: 14px; }

  .la-who { height: auto; padding: 50px 0 53px; }
  .la-who .svc-rows { margin-top: 45px; }
  /* this page sets its rows a size smaller than the services page does */
  .la-who .svc-row__title { font-size: 21px; line-height: 25px; }
  .la-who .svc-row__text { font-size: 18px; line-height: 27px; }

  .la-services { height: auto; padding: 39px 0 49px; }
  .la-services .who__lead { margin-top: 13px; }
  .la-services .who__list { margin-top: 21px; }
  /* the desktop layout pins two of these bullets to set widths to force their
     line breaks; at 380px they simply wrap */
  .la-services .who__list li,
  .la-services .who__list li:nth-child(3),
  .la-services .who__list li:nth-child(4) {
    width: auto;
    margin-bottom: 25px;
    letter-spacing: normal;
  }
  .la-services .who__list li:last-child { margin-bottom: 0; }
  .la-services__dots { left: auto; right: -7px; top: 806px; }

  .la-benefit { height: auto; padding: 50px 0 52px; }
  .la-benefit .prose-wide { margin-top: 11px; }

  .la-qualify { height: auto; padding: 51px 0 37px; }
  .la-qualify__lead {
    width: 100%;
    margin-top: 20px;
    font-size: 18px;
    line-height: 30px;
    text-align: justify;
  }
  .la-cols { display: block; margin-top: 15px; }
  .la-col,
  .la-col--right { width: auto; flex: none; }
  .la-col--right { margin-top: 20px; }
  .la-col__title { margin-top: 0; font-size: 21px; line-height: 25px; }
  .la-col__text {
    width: 100%;
    margin-top: 10px;
    font-size: 18px;
    line-height: 30px;
    text-align: justify;
  }
  .la-col--right .la-col__text { margin-top: 5px; }
  .la-col__list { margin-top: 14px; }
  .la-col__list li {
    width: auto;
    max-width: none;
    padding-left: 28px;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 25px;
    text-align: justify;
  }
  .la-col__list li:last-child { margin-bottom: 0; }
  .la-col__list li::before { top: 4px; width: 14px; height: 21px; }
  .la-qualify__outro {
    width: 100%;
    margin: 20px 0 0;
    font-size: 18px;
    line-height: 30px;
    text-align: justify;
  }
  .la-qualify__dots { left: auto; right: 3px; top: 344px; }


  /* ---- contact page ----------------------------------------------------- */
  .contact-page { height: auto; padding: 46px 0 71px; }
  .contact-page__inner { display: block; }
  .contact-page__main { width: auto; flex: none; }
  .contact-page__title { max-width: none; font-size: 36px; line-height: 40px; }
  .contact-page__lead { margin-top: 11px; font-size: 18px; line-height: 30px; }
  .contact-page__form { margin-top: 30px; }
  .contact-page__form .field-grid { grid-template-columns: 1fr; row-gap: 20px; }
  .contact-page__form label {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 22px;
  }
  .contact-page__form textarea { height: 160px; }
  .contact-page__form .btn {
    display: flex;
    width: 150px;
    margin: 50px auto 0;
  }

  .help-card {
    width: auto;
    flex: none;
    height: 400px;
    margin: 50px 0 0;
    /* the icons sit 32px in but the heading 42px, so the extra 10 is the
       heading's own inset rather than the card's padding */
    padding: 26px 32px 0;
  }
  .help-card__title {
    width: auto;
    margin-inline: 10px;
    font-size: 28px;
    line-height: 31px;
  }
  .help-card ul { margin-top: 20px; }
  .help-card li,
  .help-card li:nth-child(2) {
    gap: 20px;
    margin-bottom: 15px;
    font-size: 20px;
    line-height: 24px;
  }
  .help-card li img { flex: 0 0 50px; width: 50px; height: 50px; }
  .help-card li span { padding-top: 0; }
  .help-card li p { margin-top: 13px; }
  .contact-page__dots {
    display: block;
    width: 48px;
    height: 96px;
    left: auto;
    right: 48px;
    top: 1290px;
  }

}

/* --------------------------------------------------------------------------
   WordPress fallback templates (blog index, plain pages, 404, comments).
   Additive only — these classes do not exist in the Figma design, so nothing
   above is touched. They reuse the design's tokens so a stray page still
   looks like the rest of the site.
   -------------------------------------------------------------------------- */
.banner--plain { background: var(--bg-why); }
.banner--plain .banner__title { color: var(--c-brand-dark); }

.wp-page { padding: 70px 0 90px; }
.wp-page__body { max-width: 1000px; font-size: 18px; line-height: 1.7; color: var(--c-body); }
.wp-page__body h2,
.wp-page__body h3 { margin: 34px 0 12px; font-family: var(--f-display); color: var(--c-brand-dark); }
.wp-page__body h2 { font-size: 30px; }
.wp-page__body h3 { font-size: 23px; }
.wp-page__body p { margin: 0 0 16px; }
.wp-page__body a { color: var(--c-plum); }
.wp-page__body ul,
.wp-page__body ol { margin: 0 0 16px 20px; }
.wp-page__body li { margin-bottom: 8px; }
.wp-page__body img { max-width: 100%; height: auto; }
.wp-page__body blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--c-pink);
  font-style: italic;
}

.wp-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; }
.wp-list__item { display: block; color: inherit; text-decoration: none; }
.wp-list__thumb { margin-bottom: 16px; overflow: hidden; }
.wp-list__thumb img { display: block; width: 100%; height: 220px; object-fit: cover; }
.wp-list__title { margin: 0 0 8px; font-family: var(--f-display); font-size: 22px; color: var(--c-brand-dark); }
.wp-list__meta { margin: 0 0 8px; font-size: 14px; color: var(--c-rule-soft); }
.wp-list__excerpt { margin: 0; font-size: 16px; line-height: 1.6; color: var(--c-body); }
.wp-page .pagination { margin-top: 50px; }
.wp-page .page-numbers { padding: 6px 12px; color: var(--c-body); text-decoration: none; }
.wp-page .page-numbers.current { background: var(--c-plum); color: var(--c-white); }

.wp-404 { text-align: center; }
.wp-404 .btn { margin-top: 26px; }

@media (max-width: 900px) {
  .wp-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .wp-page { padding: 30px 0 40px; }
  .wp-list { grid-template-columns: 1fr; gap: 30px; }
  .wp-page__body { font-size: 16px; }
  .wp-page__body h2 { font-size: 24px; }
  .wp-page__body h3 { font-size: 20px; }
}