/* ---------------------------------------------------------------------
 * home.css - GENERATED from html/index.html. Do not edit here.
 *
 * This is the mockup's <style> block, byte for byte. Edit the mockup and
 * run tools/sync-design.php; anything typed here is lost on the next sync.
 * Rules WordPress makes necessary live in wp.css instead.
 * ------------------------------------------------------------------- */

/* ============================ design tokens ============================
   Values below are Dimi's, read directly out of the Lovable build's CSS
   so this is a match rather than an approximation.
   The two --gold-* additions are an accessibility fix carried over from the
   DUI build: #c9a24a is about 2.4:1 on white, which fails for small text.
   Gold stays for large/decorative use and on navy; small text on light
   grounds uses --gold-ink instead.
   ===================================================================== */
:root{
  --navy:#0f2238;
  --navy-2:#16304d;
  --navy-deep:#0a1727;
  --gold:#c9a24a;          /* on navy, or large decorative text */
  --gold-hover:#e4c46f;
  --gold-ink:#7a5f1e;      /* small text on white/alt — clears 4.5:1 */
  --ink:#1b1f26;
  --muted-ink:#5b6470;
  --line:#e3e7ec;
  --alt:#f5f7fa;
  --white:#fff;
  --radius:14px;
  --radius-sm:9px;
  --pill:999px;
  --header-bg:#e9f0fb;      /* the bar is light, matching the DUI build */
  --header-accent:#7a5f1e;  /* the page's own gold, dark enough to read on the bar */
  --header-ink:#33405a;
  --header-muted:#5a6b86;
  --header-line:#d2dff1;
  --read:660px;
  --read-wide:74ch;       /* copy that spans a band, still readable */
  --wide:1440px;
  --serif:Merriweather,Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  /* room for the sticky mobile call bar */
  padding-bottom:74px;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:900;line-height:1.18;margin:0 0 .5em;color:var(--navy)}
h1{font-size:clamp(2rem,6.2vw,3.15rem);letter-spacing:-.015em}
h2{font-size:clamp(1.6rem,4.4vw,2.4rem);letter-spacing:-.01em}
h3{font-size:1.16rem;font-weight:700;line-height:1.32}
p{margin:0 0 1.05em}
a{color:var(--navy)}
img{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:var(--wide);margin:0 auto;padding:0 22px}
/* The masthead is sticky, so anything an in-page link jumps to has to reserve
   room for it or the header lands on top of the target. */
#case-review,#free-consultation,#main{scroll-margin-top:96px}
.narrow{max-width:var(--read)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================ bands ============================ */
.band{padding:clamp(48px,7vw,86px) 0}
.band-white{background:var(--white)}
.band-alt{background:var(--alt)}
.band-navy{background:var(--navy);color:#e8edf4}
.band-navy h2,.band-navy h3{color:var(--white)}
.band-navy p{color:#c3ceda}
.band-deep{background:var(--navy-deep);color:#e8edf4}
.band-deep h2,.band-deep h3{color:var(--white)}

.eyebrow{
  font-family:var(--sans);font-size:.775rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 .7em
}
/* .hero is its own navy ground, so it has to opt into every "on navy" rule
   below. Leaving it out made the eyebrow 2.67:1 and the ghost button 1.0:1
   (navy on navy — literally invisible). Caught by the contrast pass. */
.band-navy .eyebrow,.band-deep .eyebrow,.hero .eyebrow{color:var(--gold)}
.lede{font-size:1.09rem;color:var(--muted-ink);max-width:62ch}
.band-navy .lede{color:#c3ceda}

/* ============================ header ============================ */
.masthead{
  position:sticky;top:0;z-index:60;background:var(--header-bg);
  border-bottom:1px solid var(--header-line)
}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(14px,2vw,28px);
  padding-top:14px;padding-bottom:14px}
/* ============================ brand lockup ============================
   The artwork is dark navy on transparency and the bar is light, so the logo
   sits on it directly — no white chip, the same as the DUI build. Sized by
   height rather than width so both bars carry the mark at the same scale.
   ===================================================================== */
.brand{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.brand-chip{display:inline-flex;align-items:center}
.brand-chip img{display:block;width:auto;height:78px}
@media(max-width:979px){ .brand-chip img{height:58px} }
@media(max-width:480px){ .brand-chip img{height:44px} }
/* The rating sits between the mark and the actions, which is what stops a
   1440px bar reading as two things pushed to opposite walls. */
/* The middle of the bar carries the credential rather than the star rating:
   somebody who has just been arrested is weighing whether this lawyer has done
   this before, not how many people left a review. Both figures are the page's
   own, from the hero. */
.mast-cred{display:none;align-items:center;gap:9px;font-size:.88rem;font-weight:600;
  color:var(--header-ink);white-space:nowrap}
.mast-cred .ic{width:19px;height:19px;color:var(--gold-ink);flex:0 0 auto}

.mast-right{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px)}
.mast-tel-block{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.mast-note{display:none;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--header-muted)}

/* The number is the thing people came for: set it up to a size that says so,
   and give it a thumb-sized target rather than the 26px a bare inline link
   renders at. */
.mast-tel{color:var(--header-accent);text-decoration:none;font-weight:800;font-size:1.24rem;letter-spacing:-.01em;
  white-space:nowrap;display:inline-flex;align-items:center;min-height:34px;padding:0 1px}
.mast-tel:hover{text-decoration:underline}

.mast-cta{display:none}

@media(min-width:720px){
  .mast-note{display:block}
  .mast-tel{min-height:28px}
}
@media(min-width:900px){ .mast-cta{display:inline-flex} }
@media(min-width:1180px){ .mast-cred{display:flex} }
/* Below 720px the label is hidden, so the link itself has to carry the target. */
@media(max-width:719px){ .mast-tel{min-height:44px} }

/* ============================ buttons ============================ */
/* The hover is a fill that wipes in from the left rather than a colour swap.
   Each variant sets --btn-fill and the colour its label turns; the wipe itself
   is written once, here.

   The fill is inset by the 2px border, not to 0: a pseudo-element at inset:0
   sits inside the border box, so on a bordered button it would stop 2px short
   of the edge and leave a rim of the old colour behind. */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:1.02rem;
  padding:15px 26px;border-radius:var(--radius-sm);
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:color .28s ease,border-color .28s ease;
  min-height:52px;text-align:center
}
.btn::before{
  content:"";position:absolute;inset:-2px;z-index:-1;
  background:var(--btn-fill,transparent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .42s cubic-bezier(.22,1,.36,1)
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .btn::before{transition:none}
}

/* The border stays gold through the hover.

   The fill is navy, and these buttons sit on navy bands, navy cards and a navy
   call bar as well as on light ones. Letting the border change with the fill
   meant that on any dark ground the button lost its outline the moment it was
   filled, and what was left read as floating white text rather than a button.
   Holding the gold edge keeps the shape on every background, and is one rule
   rather than a list of dark contexts that the next new section would fall
   outside of. */
.btn-gold{background:var(--gold);color:var(--navy-deep);border-color:var(--gold);--btn-fill:var(--navy)}
.btn-gold:hover,.btn-gold:focus-visible{color:var(--white);border-color:var(--gold)}
.btn-navy{background:var(--navy);color:var(--white);border-color:var(--navy);--btn-fill:var(--gold)}
.btn-navy:hover,.btn-navy:focus-visible{color:var(--navy-deep);border-color:var(--gold)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy);--btn-fill:var(--navy)}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--white)}
.band-navy .btn-ghost,.band-deep .btn-ghost,.hero .btn-ghost,.callbar .btn-ghost{
  color:var(--white);border-color:rgba(255,255,255,.55);--btn-fill:var(--white)}
.band-navy .btn-ghost:hover,.band-deep .btn-ghost:hover,.hero .btn-ghost:hover,.callbar .btn-ghost:hover,
.band-navy .btn-ghost:focus-visible,.band-deep .btn-ghost:focus-visible,.hero .btn-ghost:focus-visible,.callbar .btn-ghost:focus-visible{
  color:var(--navy);border-color:var(--white)}
.btn-sm{min-height:44px;padding:11px 18px;font-size:.93rem}
/* A button that fills its column — the footer's, and any other that should
   span rather than sit at its natural width. */
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 14px}
/* Full width on a phone, natural width once there is room — a lone button
   stretched across a 660px column reads as a banner, not a button. */
.btn-row .btn{flex:1 1 210px;min-width:210px;max-width:100%}
@media(min-width:560px){ .btn-row .btn{flex:0 1 auto} }

/* ============================ hero ============================ */
.hero{background:var(--navy);color:#e8edf4;padding:clamp(38px,6vw,72px) 0 clamp(44px,7vw,80px)}
.hero h1{color:var(--white)}
.hero .lede{color:#c8d3df;font-size:1.12rem}
.hero-grid{display:grid;gap:clamp(30px,5vw,54px);align-items:start}
@media(min-width:960px){ .hero-grid{grid-template-columns:1.05fr .95fr} }
.ticks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:1.02rem;color:#dbe4ee}
.tick{
  flex:0 0 auto;width:21px;height:21px;border-radius:50%;margin-top:3px;
  background:rgba(201,162,74,.16);border:1px solid rgba(201,162,74,.55);
  display:grid;place-items:center;color:var(--gold);font-size:.72rem;font-weight:700
}
.hero-note{font-size:.9rem;color:#a9b8c8;margin:6px 0 0}

/* ============================ form card ============================ */
.form-card{background:var(--white);color:var(--ink);border-radius:var(--radius);padding:clamp(22px,3.4vw,32px);box-shadow:0 18px 44px rgba(10,23,39,.28)}
.form-card h2{font-size:1.55rem;margin-bottom:.25em}
.form-card .sub{font-size:.93rem;color:var(--muted-ink);margin-bottom:1.35em}
.form-legal{font-size:.83rem;color:var(--muted-ink);margin:14px 0 0;line-height:1.5;max-width:var(--read-wide)}

/* ==================== Gravity Forms ====================
   The markup here is Gravity Forms' own `gravity-theme` output, so the
   WordPress build renders a real form and picks up this sheet unchanged —
   there is no second set of styles to keep in step with these.

   Everything is written under .gform_wrapper.gravity-theme, which is enough
   specificity to beat GF's own sheet without reaching for !important. GF 2.9
   defaults to its "orbital" theme, which ships different class names and its
   own inline custom properties; the theme forces `gravity-theme` and drops
   that stylesheet.
   ======================================================== */
.gform_wrapper.gravity-theme{margin:0}
.gform_wrapper.gravity-theme form{margin:0}

/* GF lays the field list out as a grid with its own gutters. This design
   stacks them, so the grid is switched off rather than fought. */
.gform_wrapper.gravity-theme .gform_fields{display:block;grid-column-gap:0;grid-row-gap:0}
.gform_wrapper.gravity-theme .gfield{margin-bottom:17px;padding:0;border:0;min-width:0}
.gform_wrapper.gravity-theme .gfield:last-of-type{margin-bottom:0}

.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme legend.gfield_label{
  display:block;font-family:var(--sans);font-size:.85rem;font-weight:700;
  color:var(--navy);margin:0 0 7px;padding:0
}
.gform_wrapper.gravity-theme .gfield_required{color:var(--gold-ink);margin-left:.25em}

.gform_wrapper.gravity-theme .ginput_container input[type=text],
.gform_wrapper.gravity-theme .ginput_container input[type=tel],
.gform_wrapper.gravity-theme .ginput_container input[type=email],
.gform_wrapper.gravity-theme .ginput_container input[type=date],
.gform_wrapper.gravity-theme .ginput_container select,
.gform_wrapper.gravity-theme .ginput_container textarea{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--white);min-height:50px;box-sizing:border-box
}
.gform_wrapper.gravity-theme .ginput_container textarea{min-height:96px;resize:vertical}
.gform_wrapper.gravity-theme .ginput_container input:focus,
.gform_wrapper.gravity-theme .ginput_container select:focus,
.gform_wrapper.gravity-theme .ginput_container textarea:focus{
  outline:3px solid rgba(201,162,74,.45);outline-offset:1px;border-color:var(--gold)
}

/* Radios. The control itself is 17px, so the label carries the tap target. */
.gform_wrapper.gravity-theme .gfield_radio{display:grid;}
.gform_wrapper.gravity-theme .gchoice{display:flex;gap:10px;align-items:flex-start;margin:0}
.gform_wrapper.gravity-theme .gchoice label{
  font-family:var(--sans);font-size:.97rem;font-weight:400;color:var(--ink);
  cursor:pointer;padding:7px 0;min-height:44px;display:flex;align-items:flex-start;margin:0
}
.gform_wrapper.gravity-theme .gfield-choice-input{
  margin-top:12px;flex:0 0 auto;accent-color:var(--navy);width:17px;height:17px
}
.gform_wrapper.gravity-theme .gfield--radio-inline .gfield_radio{
  display:flex;flex-wrap:wrap;gap:6px 22px
}

/* The submit is an <input>, which cannot carry a ::before, so its hover fill
   is two background layers wiped across instead of a pseudo-element. Same
   left-to-right movement as every other button on the page. */
.gform_wrapper.gravity-theme .gform_footer{margin:18px 0 0;padding:0}
body .gform_wrapper.gravity-theme .gform_footer input[type=submit]{
  width:100%;display:block;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:1.02rem;
  min-height:52px;padding:15px 26px;border:0;border-radius:var(--radius-sm);
  color:var(--navy-deep);
  background-color:var(--gold);
  background-image:linear-gradient(var(--navy),var(--navy));
  background-repeat:no-repeat;
  background-size:0 100%;
  background-position:left center;
  transition:background-size .42s cubic-bezier(.22,1,.36,1),color .28s ease
}
body .gform_wrapper.gravity-theme .gform_footer input[type=submit]:hover:not(:disabled),
body .gform_wrapper.gravity-theme .gform_footer input[type=submit]:focus-visible:not(:disabled){
  background-size:100% 100%;color:var(--white)
}
body .gform_wrapper.gravity-theme .gform_footer input[type=submit]:disabled{
  opacity:.55;cursor:not-allowed
}
@media(prefers-reduced-motion:reduce){
  body .gform_wrapper.gravity-theme .gform_footer input[type=submit]{transition:none}
}

/* Validation: red text where the problem is, and no boxes. GF's defaults draw
   a bordered summary panel at the top and a bordered message under each field,
   neither of which belongs in this design. */
.gform_wrapper.gravity-theme .gform_validation_errors{
  background:none;border:0;box-shadow:none;padding:0;margin:0 0 16px
}
.gform_wrapper.gravity-theme .gform_validation_errors>h2{
  color:#b01b1b;font-family:var(--sans);font-size:.95rem;font-weight:700;margin:0;padding:0
}
.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message{
  background:none;border:0;padding:6px 0 0;margin:0;
  color:#b01b1b;font-size:.86rem;font-weight:600
}
.gform_wrapper.gravity-theme .gfield_error .ginput_container input,
.gform_wrapper.gravity-theme .gfield_error .ginput_container select,
.gform_wrapper.gravity-theme .gfield_error .ginput_container textarea{border-color:#b01b1b}
.gform_wrapper.gravity-theme .gform_required_legend{display:none}

/* ============================ stat band ============================ */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.14)}
@media(min-width:860px){ .stats{grid-template-columns:repeat(5,1fr)} }
.stat{background:var(--navy-deep);padding:24px 16px;text-align:center}
.stat b{display:block;font-family:var(--serif);font-weight:900;font-size:1.62rem;color:var(--gold);line-height:1.1}
.stat span{display:block;font-size:.79rem;letter-spacing:.09em;text-transform:uppercase;color:#a9b8c8;margin-top:7px}

/* ============================ cards ============================ */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media(min-width:760px){ .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1020px){ .g3{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.8vw,28px)}
.band-white .card{background:var(--alt);border-color:transparent}
.card h3{margin-bottom:.5em}
.card p:last-child,.card ul:last-child{margin-bottom:0}
/* Most cards sit in a grid and are narrow already. The few that span the
   band would otherwise run past 120 characters a line. */
.card>p{max-width:var(--read-wide)}
.card-ticks{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:10px}
.card-ticks li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;color:var(--muted-ink)}
.card-ticks .tick{background:rgba(15,34,56,.06);border-color:rgba(15,34,56,.22);color:var(--gold-ink)}

/* ============================ charges grid ============================ */
.charges{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.charges>.charge{flex:0 1 100%}
@media(min-width:680px){ .charges>.charge{flex:0 1 calc(50% - 7px)} }
@media(min-width:1020px){ .charges>.charge{flex:0 1 calc(33.333% - 10px)} }
.charge{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius-sm);padding:17px 19px}
.charge b{display:block;font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--navy);margin-bottom:5px}
.charge span{font-size:.92rem;color:var(--muted-ink);line-height:1.5}

/* ============================ steps ============================ */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:18px}
@media(min-width:900px){ .steps{grid-template-columns:repeat(4,1fr)} }
.steps li{counter-increment:s;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;position:relative}
/* The step number moves to the top-right corner as an accent so the icon and
   the heading can share the first row. */
.steps li::before{
  content:counter(s);position:absolute;top:16px;right:18px;
  font-family:var(--serif);font-weight:900;font-size:2.4rem;
  color:var(--gold);opacity:.24;line-height:1
}
.steps h3{margin-bottom:.4em}
.steps p{font-size:.95rem;color:var(--muted-ink);margin:0}
/* The callout is the paragraph, so capping the text means capping the box.
   Centred, it reads as a deliberate note under the steps rather than a band
   of navy with one long line stranded across it. */
.step-note{margin-top:24px;padding:18px 20px;background:var(--navy);border-radius:var(--radius);color:#dbe4ee;font-size:.98rem;
  max-width:var(--read-wide);margin-inline:auto}
.step-note b{color:var(--gold)}

/* ============================ bio ============================ */
.bio{display:grid;gap:clamp(24px,4vw,44px);align-items:center}
@media(min-width:900px){ .bio{grid-template-columns:.8fr 1.2fr} }
.bio img{border-radius:var(--radius);width:100%;object-fit:cover;aspect-ratio:4/5}

/* ============================ reviews ============================ */
.quotes{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){ .quotes{grid-template-columns:repeat(2,1fr)} }
blockquote{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
blockquote p{font-size:1.02rem;color:var(--ink);margin-bottom:.8em}
blockquote cite{font-style:normal;font-size:.88rem;color:var(--muted-ink)}
/* Gold stars on the light review band came in at 2.4:1. Darker gold clears it. */
.stars{color:var(--gold-ink);letter-spacing:.12em;font-size:.95rem;margin-bottom:10px}
.band-navy .stars,.band-deep .stars{color:var(--gold)}

/* ============================ faq ============================ */
.faq{display:grid;gap:11px;max-width:var(--read);margin-inline:auto}
details{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm)}
details[open]{border-color:var(--gold)}
summary{
  cursor:pointer;list-style:none;padding:17px 46px 17px 20px;position:relative;
  font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--navy)
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:19px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:1.4rem;font-weight:400;color:var(--gold-ink)
}
details[open] summary::after{content:"\2212"}
summary:focus-visible{outline:3px solid rgba(201,162,74,.55);outline-offset:-3px}
.faq-body{padding:0 20px 19px;font-size:.98rem;color:var(--muted-ink)}
/* The answer fades and settles rather than snapping into place. <details> gives
   no height to animate, so this animates the content inside it. */
details[open] .faq-body{animation:faq-in .22s ease-out both}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ details[open] .faq-body{animation:none} }
.faq-body p:last-child{margin-bottom:0}

/* ============================ courts ============================ */
.courts{display:grid;gap:13px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){ .courts{grid-template-columns:repeat(3,1fr)} }
.court{background:var(--navy-2);border-radius:var(--radius-sm);padding:17px 19px}
.court b{display:block;font-family:var(--serif);font-weight:700;color:var(--white);font-size:1.04rem}
.court span{font-size:.87rem;color:#a9b8c8}

/* ============================ footer ============================ */
.site-footer{background:var(--navy-deep);color:#a9b8c8;padding:clamp(40px,6vw,70px) 0 34px;font-size:.92rem}
.site-footer h2{color:var(--white)}
.foot-grid{display:grid;gap:34px}
@media(min-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} }
.foot-firm{font-family:var(--serif);font-weight:700;font-size:1.16rem;color:var(--white);margin-bottom:.5em}
/* :not(.btn) matters — without it this rule beat .btn-gold on specificity and
   repainted the footer button's text pale blue on gold, 1.87:1. */
.site-footer a:not(.btn){color:#dbe4ee}
/* Fills the container, rule and all. The columns are what keep the lines
   readable at that width — without them this ran to 133 characters. Each note
   stays whole inside its column. */
.foot-legal{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.83rem;line-height:1.62;color:#8fa0b3}
.foot-legal p{margin:0 0 1em;break-inside:avoid}
.foot-legal p:last-child{margin-bottom:0}
@media(min-width:900px){
  .foot-legal{columns:2;column-gap:clamp(34px,4vw,58px)}
}
@media(min-width:1300px){
  .foot-legal{columns:3}
}
/* The copyright line belongs under the lot, not stranded at the top of a
   column, so it is taken out of the flow of columns. */
.foot-legal .foot-copy{column-span:all;margin-top:1.4em;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08)}

/* ============================ sticky call bar ============================ */
/* ============================ back to top ============================ */
.to-top{
  position:fixed;right:18px;bottom:22px;z-index:70;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--gold);color:var(--navy-deep);border:2px solid var(--gold);
  box-shadow:0 8px 22px rgba(10,23,39,.32);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .25s var(--ease,ease),transform .25s var(--ease,ease),background .25s ease
}
.to-top[hidden]{display:grid}          /* [hidden] would remove it from the grid */
.to-top.is-on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover,.to-top:focus-visible{background:var(--navy);color:var(--white);border-color:var(--gold)}
.to-top:focus-visible{outline:3px solid rgba(201,162,74,.55);outline-offset:3px}
/* The arrow: the sprite has no plain chevron, so the icon is turned into one. */
.to-top .ic{width:20px;height:20px;transform:rotate(-90deg)}
@media(prefers-reduced-motion:reduce){ .to-top{transition:none} }
/* On a phone the call bar owns the bottom of the screen. */
@media(max-width:860px){ .to-top{bottom:calc(var(--callbar-h,74px) + 14px)} }

.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.14);
  padding:9px 12px;display:flex;gap:10px
}
.callbar .btn{flex:1;min-width:0;padding:13px 12px;min-height:48px;font-size:.98rem}
@media(min-width:900px){ .callbar{display:none} body{padding-bottom:0} }

/* ============================ icons ============================
   One inline SVG sprite at the top of <body>. No icon library, no external
   request, and every glyph inherits currentColor so it recolors with its
   surroundings.
   ============================================================= */
.ic{width:1em;height:1em;flex:0 0 auto;stroke:currentColor;fill:none;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-badge{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:rgba(201,162,74,.13);color:var(--gold-ink);font-size:23px;
  border:1px solid rgba(201,162,74,.34);margin-bottom:15px
}
.band-navy .ic-badge,.band-deep .ic-badge,.hero .ic-badge{
  background:rgba(201,162,74,.15);color:var(--gold);border-color:rgba(201,162,74,.4)
}

/* ============================ stat carousel ============================ */
.marquee{background:var(--navy-deep);overflow:hidden;position:relative;padding:22px 0}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--navy-deep),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--navy-deep),transparent)}
.marquee-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.m-item{
  display:flex;align-items:center;gap:14px;padding:0 30px;
  border-right:1px solid rgba(255,255,255,.13);white-space:nowrap
}
.m-item .ic{font-size:27px;color:var(--gold)}
.m-item b{display:block;font-family:var(--serif);font-weight:900;font-size:1.42rem;color:var(--gold);line-height:1.12}
.m-item span{display:block;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:#a9b8c8;margin-top:3px}

/* ============================ start-here cards ============================ */
.card-lift{position:relative;transition:transform .18s ease,box-shadow .18s ease}
.card-lift::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--gold);border-radius:var(--radius) var(--radius) 0 0
}
.card-lift:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,23,39,.13)}

/* Left-aligned reading column. Dimi's first-offense section runs down the
   left edge of the container rather than sitting centred, so .col matches
   that instead of .narrow, which centres. */
.col{max-width:var(--read)}
.card-navy{
  background:var(--navy);border:0;border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:clamp(22px,3.2vw,30px);color:#dbe4ee
}
.card-navy h3{color:var(--white);font-size:1.3rem}
.card-navy p{color:#c3ceda}

/* ============================ question cards ============================ */
.q-card{position:relative;overflow:hidden}
.q-card .q-ghost{
  position:absolute;right:-14px;top:-18px;font-size:112px;color:var(--gold);
  opacity:.09;pointer-events:none;stroke-width:1.2
}
.q-card h3{position:relative}
.q-rule{width:44px;height:3px;background:var(--gold);border-radius:2px;margin:0 0 15px}
.q-kicker{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-ink);
  background:rgba(201,162,74,.14);padding:5px 11px;border-radius:var(--pill);margin-bottom:13px
}

/* ============================ 72-hour timeline ============================ */
.tl{display:grid;gap:16px;margin:32px 0 8px}
@media(min-width:780px){ .tl{grid-template-columns:repeat(3,1fr)} }
.tl-item{
  background:var(--navy-2);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);padding:22px;position:relative
}
.tl-item .ic{font-size:26px;color:var(--gold);margin-bottom:11px}
.tl-hour{
  font-family:var(--serif);font-weight:900;font-size:1.3rem;color:var(--gold);
  display:block;margin-bottom:5px
}
.tl-item p{font-size:.95rem;color:#c3ceda;margin:0}
.tl-bar{
  height:4px;border-radius:2px;margin:26px 0 0;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 33%,rgba(201,162,74,.45) 33%,rgba(201,162,74,.45) 66%,rgba(201,162,74,.18) 66%)
}
.tl-bar-labels{display:flex;justify-content:space-between;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#8fa0b3;margin-top:9px}

/* ============================ full-width section layouts ============================
   A 660px reading column inside a 1160px container leaves 500px of dead space
   on the right. These three patterns fill the width without letting line
   length run past what is comfortable to read.
   ================================================================================= */

/* Heading left, supporting line right. */
.sec-head{display:grid;gap:14px 44px;align-items:end}
@media(min-width:900px){ .sec-head{grid-template-columns:1.15fr .85fr} }
.sec-head h2{margin-bottom:0}
.sec-head .lede{max-width:none;margin-bottom:0}

/* Body copy that runs the full width of the container as one block.
   NOTE ON LINE LENGTH: at 1160px this measures about 125 characters per line,
   past the 45–75 that is comfortable to read. The size bump below buys a
   little of that back. If it ever needs reining in, put a max-width here. */
/* Two columns rather than one long line: this block is meant to fill the
   band, and at 1440px a single column ran to 143 characters. Each
   paragraph keeps to its own column, so nothing splits mid-thought. */
.body-wide{margin-top:24px}
.body-wide p{font-size:1.09rem;line-height:1.68;max-width:var(--read-wide)}
.body-wide p:last-child{margin-bottom:0}
@media(min-width:1100px){
  .body-wide{columns:2;column-gap:clamp(34px,4vw,58px)}
  .body-wide p{max-width:none;break-inside:avoid;margin-bottom:0}
  .body-wide p+p{margin-top:0}
}

/* Centred button row, for CTAs that would otherwise sit alone on the left. */
.center-row{justify-content:center;text-align:center}
.center-row .btn{flex:0 1 auto}
.center-note{text-align:center;max-width:var(--read-wide);margin-inline:auto}

/* Text left, card right — the first-offense section. */
.split-card{display:grid;gap:clamp(26px,4vw,46px);align-items:start}
@media(min-width:900px){ .split-card{grid-template-columns:1.05fr .95fr} }

/* ============================ background artwork ============================
   A decorative photo sitting behind the section rather than boxed beside it.
   Three rules keep it from fighting the content:
     · it is pinned to the right, and all text in that section stays left, so
       nothing is ever read on top of it
     · a radial mask fades it out from the top-right corner, so there is no
       hard edge anywhere
     · low opacity, dropped further on small screens
   ========================================================================== */
.band-bgart{position:relative;overflow:hidden}
.band-bgart>.wrap{position:relative;z-index:2}
.bg-art{
  position:absolute;top:0;right:0;z-index:0;pointer-events:none;
  width:min(46%,540px);height:min(100%,470px);
  object-fit:cover;object-position:center 26%;
  opacity:.17;
  -webkit-mask-image:radial-gradient(125% 105% at 100% 0%,#000 28%,transparent 74%);
  mask-image:radial-gradient(125% 105% at 100% 0%,#000 28%,transparent 74%)
}
@media(max-width:899px){
  /* Below 900px the section header goes full width, so there is nowhere for
     the art to sit that is not underneath the heading and the lede. Even at
     8% opacity that is text sitting on a picture, so it comes off entirely.
     It is decorative — nothing is lost. */
  .bg-art{display:none}
}
/* The header copy is capped so it can never run into the artwork. Without this
   the heading crossed into the image between about 900px and 1200px — the art
   is anchored to a percentage of the viewport, the text was not. */
.bgart-head{max-width:none}
@media(min-width:900px){ .bgart-head{max-width:52%} }

/* Court list left, photo right. */
.courts-split{display:grid;gap:clamp(26px,4vw,46px);align-items:center}
@media(min-width:960px){ .courts-split{grid-template-columns:1.35fr .65fr} }
@media(min-width:960px){ .courts-split .courts{grid-template-columns:repeat(2,1fr)} }
.courts-split img{
  border-radius:var(--radius);width:100%;
  max-height:440px;object-fit:cover;object-position:center 25%
}

/* ============================ charge / step / compare icons ============================ */
/* Flex rather than grid so a short final row centres instead of leaving an
   empty cell hanging on the right. */
.charge{display:flex;gap:14px;align-items:flex-start}
.charge .ic{font-size:23px;color:var(--gold-ink);margin-top:2px}
.charge>div{min-width:0}
.steps li .step-head{margin-bottom:12px}
.steps li .step-head .ic-badge{margin-bottom:12px}
.steps li .step-head h3{margin:0;padding-right:30px}
.cmp-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:10px}
.cmp-head .ic{font-size:25px;color:var(--gold-ink);margin-top:3px}
.cmp-head h3{margin:0}

/* ============================ bottom CTA form ============================ */
.cta-split{display:grid;gap:clamp(26px,4vw,44px);align-items:start;text-align:left}
@media(min-width:900px){ .cta-split{grid-template-columns:1fr 1fr} }
.cta-split .form-card{box-shadow:0 14px 36px rgba(10,23,39,.14);border:1px solid var(--line)}

/* ============================ sticky short column ============================
   Where one side of a split is much shorter than the other, it follows the
   reader down instead of leaving a column of empty space. It stops at the end
   of its own row on its own: a sticky item cannot travel outside its grid
   area, so no script is needed to release it.

   Laptop and up only. On a phone these are stacked, one after the other, and
   there is nothing to stick to. --stick-top clears the sticky masthead. */
@media(min-width:1024px){
  :root{ --stick-top:122px }
  .hero-grid>:first-child,
  .cta-split>:first-child{
    position:sticky;top:var(--stick-top);align-self:start
  }
}
@media(min-width:1024px) and (max-height:760px){
  /* On a short laptop screen a tall sticky column would pin its own bottom off
     the screen, so it only sticks where it fits. */
  .hero-grid>:first-child,
  .cta-split>:first-child{ position:static }
}

/* ============================ interaction ============================
   Cards were static apart from the three in "Which one is you", which already
   lifted. The rest of the page has the same kind of card doing the same kind of
   job, so they all answer to the pointer the same way now. */

/* The action sits on one line across a row. The three cards carry different
   amounts of copy, so their buttons landed at three different heights; the card
   becomes a column and the button is pushed to the bottom of it. */
.card-lift{display:flex;flex-direction:column}
.card-lift>.btn{margin-top:auto;align-self:flex-start}
.card-lift>.card-ticks{margin-bottom:20px}

/* One lift, one shadow, one gold edge, for every card that is not the navy
   panel or the form. */
.card,.charge,.quotes blockquote{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.card:hover,.quotes blockquote:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(10,23,39,.13);
  border-color:rgba(201,162,74,.55)
}

/* The charge tiles are smaller and sit in a dense grid, so they move less and
   answer on the gold edge they already carry. */
.charge:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(10,23,39,.11);
  border-left-color:var(--navy)
}
.charge .ic,.cmp-head .ic{transition:color .18s ease}
.charge:hover .ic,.card:hover .cmp-head .ic{color:var(--navy)}

/* The card closing the charges list spans the whole band, and the 74ch cap left
   half of it empty. Its paragraphs run the full width of the card, centred to
   match the grid of tiles above them. */
.charges+.card{text-align:center}
.charges+.card>p{max-width:none}

/* Every remaining tile answers the pointer the same way: the process steps and
   the FAQ rows on the light bands, the timeline tiles on the navy one. */
.steps li,.faq details{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.steps li:hover,.faq details:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(10,23,39,.12);
  border-color:rgba(201,162,74,.55)
}
.steps li:hover .ic-badge{background:rgba(201,162,74,.2);border-color:rgba(201,162,74,.5)}
.steps li .ic-badge{transition:background-color .18s ease,border-color .18s ease}

.tl-item{transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease,border-color .18s ease}
.tl-item:hover{
  transform:translateY(-2px);
  background:#1d3d61;
  border-color:rgba(201,162,74,.45);
  box-shadow:0 10px 22px rgba(3,10,20,.35)
}

/* The address closing the CTA column was a 13px grey line adrift under the
   button. A hairline above it and room to breathe make it read as the firm's
   details rather than as small print. */
.cta-split .form-legal{
  max-width:none;
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.95rem;
  line-height:1.7;
  color:var(--muted-ink)
}

/* A grid or flex child defaults to min-width:auto, which refuses to shrink
   below its own content. On a 320px screen that pushed the hero column 13px
   past the viewport and put a horizontal scrollbar on the whole page. */
.wrap>*,
.hero-grid>*,
.cta-split>*,
.courts-split>*,
.bio>*,
.sec-head>*,
.grid>*{min-width:0}

/* ============================ header, made to fit ============================
   Three things were wrong at once and they compounded.

   1. `.mast-cta{display:none}` is written before `.btn{...display:inline-flex}`
      in this sheet and both are one class, so the button won on source order
      and the header CTA was showing at 320px — where it wrapped onto three
      lines. The masthead rules are scoped one level deeper so they win outright.

   2. The logo is a flex child and was being allowed to shrink: at 320px the
      700x168 artwork was squeezed to 19px wide. Nothing in the bar shrinks now
      except the space between.

   3. Below 900px the bar is the logo and the number. That is the whole job on a
      phone — the button's work is done by the sticky call bar at the bottom. */

.masthead .brand,
.masthead .brand-chip,
.masthead .brand-chip img,
.masthead .mast-right,
.masthead .mast-tel-block{flex:0 0 auto;min-width:0}

.masthead .mast-cta{display:none}
@media(min-width:900px){
  .masthead .mast-cta{
    display:inline-flex;
    flex:0 0 auto;
    min-width:0;
    white-space:nowrap
  }
}

/* Small phones: the mark steps down again so the number keeps its own line. */
@media(max-width:379px){
  .masthead .brand-chip img{height:36px}
  .masthead .mast-tel{font-size:1.05rem}
  .masthead .wrap{gap:10px}
}

/* Three lines the client asked to sit on one line each (27 Aug). None of them
   needed a smaller typeface to do it — each was being held narrower than the
   room it had. Measured single-line widths against the space available and
   opened up only as far as each one needed. */

/* Needs 673px, had a 74ch cap at 625. */
.center-note{max-width:none}

/* Needs 780px. The 52% heading column gave it 718, and .lede caps itself at
   62ch on top of that. Both are lifted, and the artwork still has its side. */
@media(min-width:1100px){
  .bgart-head{max-width:58%}
  .bgart-head .lede{max-width:none}
}

/* Needs 1501px in a 1425px container, so the heading steps down rather than the
   band widening. Only where there is a line to save. */
@media(min-width:1200px){
  .wrap:has(> .charges) > h2{font-size:2.05rem}
}

/* The legal block was 13px and centred, which in two or three columns came out
   ragged on both edges and hard to read. A size up and ranged left instead. */
.foot-legal{font-size:.9rem;line-height:1.7;text-align:left}
.foot-legal .foot-copy{text-align:center}
.foot-legal a{color:#c9d6e6;text-decoration:underline;text-underline-offset:2px}
.foot-legal a:hover{color:var(--gold)}

/* The parish tiles sit on the navy band, where a white shadow says nothing.
   They lighten instead, and the town name picks up the gold. */
.court{transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease}
.court b{transition:color .18s ease}
.court:hover{
  transform:translateY(-2px);
  background:#1d3d61;
  box-shadow:0 10px 22px rgba(3,10,20,.35)
}
.court:hover b{color:var(--gold)}

/* Keyboard users get the same cue the pointer gets. */
.card:focus-within,.charge:focus-within,.quotes blockquote:focus-within{
  border-color:rgba(201,162,74,.55)
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .marquee-track{animation:none;width:100%;flex-wrap:wrap;justify-content:center;gap:8px 0}
  .marquee::before,.marquee::after{display:none}
  .card-lift:hover{transform:none}
  .card:hover,.charge:hover,.quotes blockquote:hover,.court:hover,
  .steps li:hover,.faq details:hover,.tl-item:hover{transform:none}
}

.hero-grid .gfield--width-half {
    display: inline-grid;
    width: 50%; 
}

.hero-grid .gfield {
	padding: 0px 10px !important;
}

.hero-grid .gform-body.gform_body {
    margin: 0px -10px;
}
@media(max-width:600px){
  .hero-grid .gfield--width-half {
    display: inline-block;
    width:100%; 
}
}