/*
Theme Name: LINE Construction Group
Theme URI: https://lineconstructionny.com
Author: Sleek Web Designs
Author URI: https://sleekwebdesigns.com
Description: Block theme for LINE Construction Group Corp., a New York City general contractor specializing in façade restoration and Local Law 11/FISP compliance. Colour and type follow brand/tokens.css.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.35.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: line-construction
Tags: block-theme, full-site-editing, business, construction
*/

/* --------------------------------------------------------------------------
   Everything expressible in theme.json lives there. This file covers only
   what theme.json cannot: contextual colour overrides on dark sections,
   the eyebrow/stat/grid components, and interaction states.
   -------------------------------------------------------------------------- */

/* ---- Dark-section contract -------------------------------------------
   theme.json sets links to deep gold, which is correct on white (4.62:1)
   and wrong on navy. Inside any navy section links flip to amber (8.18:1).
   -------------------------------------------------------------------- */
/* Cover blocks are included deliberately: the navy lives on the overlay span,
   not on the inner container, so a link inside a hero was falling through to
   the global deep-gold link colour — 3.63:1 on navy, below AA. */
.has-navy-background-color a:where(:not(.wp-element-button)),
.has-navy-raised-background-color a:where(:not(.wp-element-button)),
.wp-block-cover a:where(:not(.wp-element-button)),
.line-card a:where(:not(.wp-element-button)),
.line-panel a:where(:not(.wp-element-button)) {
  color: var(--wp--preset--color--amber);
}

/* .line-card / .line-panel paint their own navy in CSS rather than carrying a
   has-navy-* class, so links inside them would otherwise inherit the global
   deep-gold link colour — the same 3.63:1 trap the cover blocks hit. Card
   headings keep inheriting white via the more specific rule further down. */

/* Project type sits under the case-study title as a label, not a call to
   action — the underline made it read like body-copy link. */
.wp-block-cover .wp-block-post-terms a { text-decoration: none; }
.wp-block-cover .wp-block-post-terms a:hover,
.wp-block-cover .wp-block-post-terms a:focus-visible { text-decoration: underline; }

.has-navy-background-color,
.has-navy-raised-background-color {
  color: var(--wp--preset--color--white);
}

/* ---- Eyebrow ----------------------------------------------------------
   Small uppercase label above a heading. Deep gold on light surfaces,
   amber on dark. The comps used amber on white throughout at 2.40:1 —
   this is the corrected version.
   -------------------------------------------------------------------- */
.line-eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--wp--preset--font-size--caption);
  color: var(--wp--preset--color--gold-deep);
  margin-bottom: 0.6rem;
}

.has-navy-background-color .line-eyebrow,
.has-navy-raised-background-color .line-eyebrow,
.wp-block-cover .line-eyebrow {
  color: var(--wp--preset--color--amber);
}

/* Centred eyebrow with flanking rules, as used above the comps' section
   headings ("OUR COMMERCIAL CONSTRUCTION SERVICES"). */
.line-eyebrow--ruled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}
.line-eyebrow--ruled::before,
.line-eyebrow--ruled::after {
  content: "";
  height: 2px;
  width: clamp(1.5rem, 6vw, 4rem);
  background: currentColor;
  opacity: 0.75;
}

/* ---- Stat band --------------------------------------------------------
   Figures separated by hairlines. Drops to two columns on tablet, where
   the left border must reset on the first item of each row.
   -------------------------------------------------------------------- */
.line-statband {
  display: grid;
  grid-template-columns: repeat(var(--line-statband-cols, 4), 1fr);
  gap: 0;
}
.line-statband > * {
  padding-inline: 1.75rem;
  border-left: 1px solid var(--wp--preset--color--rule-light);
}
.line-statband > *:first-child {
  border-left: 0;
  padding-left: 0;
}
@media (max-width: 900px) {
  .line-statband { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .line-statband > *:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) {
  .line-statband { grid-template-columns: 1fr; }
  .line-statband > * { border-left: 0; padding-left: 0; }
}

/* Icon sits left of the figure/label stack, as in the comp. */
.line-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: start;
}
.line-stat .line-icon {
  grid-row: 1 / span 3;
  width: 48px;
  height: 48px;
  margin-top: 0.15rem;
}
.line-stat > p { grid-column: 2; }

/* projects-stat-band.php emits raw <p>, which keeps the browser's 1em margins
   — 33.6px at the figure's size, so the figures floated well clear of their
   labels. Zero them and restate the intended spacing at equal specificity. */
.line-stat p { margin: 0; }
.line-stat .line-stat__label { margin-top: 0.55rem; }
.line-stat .line-stat__sub { margin-top: 0.3rem; }

.line-stat__figure {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--wp--preset--color--navy);
  font-variant-numeric: tabular-nums;
}

/* Scoped to the stat band: process-steps.php reuses .line-stat__figure for
   its 01–05 numerals, which must stay at their own size. */
.line-statband .line-stat__figure {
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
}

.line-stat__label {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  line-height: 1.25;
  text-wrap: balance;
  color: var(--wp--preset--color--gold-deep);
  margin-top: 0.55rem;
}
.line-stat__sub {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--wp--preset--color--ink-muted);
  margin-top: 0.3rem;
}

/* ---- Project grid -----------------------------------------------------
   Four across, stepping to one. Agreed on the kickoff call: four columns,
   with three as the fallback if it reads crowded.
   -------------------------------------------------------------------- */
.line-grid-4 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .line-grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .line-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .line-grid-4 { grid-template-columns: 1fr; } }

.line-grid-3 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
}

/* Card row: three per line, remainder centred rather than left-orphaned.
   Five across was tried first and left each card ~224px, which squeezed the
   copy to an unreadable width. Flex-wrap keeps the last two centred under the
   first three instead of stranding them at the left edge. */
.line-cardrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.line-cardrow > * { flex: 0 1 calc((100% - 3rem) / 3); }
/* .line-card sets height:100%, which for a flex item with an auto-height
   container resolves to content height and cancels align-items:stretch — the
   cards came out at four different heights. Releasing it lets stretch win, so
   every card in a row matches its tallest sibling. */
.line-cardrow > .line-card { height: auto; }
@media (max-width: 1000px) { .line-cardrow > * { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (max-width: 640px)  { .line-cardrow > * { flex-basis: 100%; } }

.line-cardrow .line-card--photo .line-card__media img { height: 190px; }
.line-cardrow .line-tile__title { font-size: 1.05rem; margin-bottom: 0.45rem; }
.line-cardrow .line-tile__text { font-size: 0.92rem; line-height: 1.5; }

/* Core's flow layout puts margin-block-start on every child but the first,
   which knocks grid/stat items 24px out of line with their row. The grid gap
   is the only spacing these containers need. */
.wp-block-group.line-grid-3 > *,
.wp-block-group.line-grid-4 > *,
.wp-block-post-template.line-grid-3 > *,
.wp-block-post-template.line-grid-4 > *,
.wp-block-group.line-statband > *,
.wp-block-group.line-services-band__row > *,
.wp-block-group.line-trustbar__row > *,
.wp-block-group.line-sectors > *,
.wp-block-group.line-svc-cards > *,
.wp-block-group.line-whyline > * {
  margin-block-start: 0;
}
@media (max-width: 900px) { .line-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .line-grid-3 { grid-template-columns: 1fr; } }

/* ---- Cards ------------------------------------------------------------ */
.line-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--rule-light);
  border-top: 3px solid var(--wp--preset--color--gold-muted);
  padding: 1.4rem;
  height: 100%;
}
.line-card--light {
  background: var(--wp--preset--color--grey);
}

/* Card titles read white like the comp; the card link colour is reserved
   for hover, matching .line-project-card__title. */
.line-card h3 a {
  color: inherit;
  text-decoration: none;
}
.line-card h3 a:hover,
.line-card h3 a:focus-visible {
  color: var(--wp--preset--color--gold-deep);
}

/* Photo-topped card: image bleeds to the card edges, icon overlaps it on a
   white plate, body text keeps the original card padding. */
.line-card--photo { padding: 0; }
.line-card--photo .line-card__media { margin: 0; }
.line-card--photo .line-card__media img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.line-card--photo .line-card__body { padding: 0 1.4rem 1.4rem; }
.line-card--photo .line-card__body .line-icon {
  position: relative;
  box-sizing: content-box;
  width: 34px;
  height: 34px;
  padding: 0.45rem;
  margin-top: -1.5rem;
  background: var(--wp--preset--color--white);
}

/* Values cards (About) sit four-up beside a text column, so each is roughly
   half the width of a home-page service card — the shared 180px image would
   read as a portrait crop at that size. */
.line-values .line-card--photo .line-card__media img { height: 124px; }
.line-values .line-card--photo .line-card__body { padding: 0 1rem 1.1rem; }
.line-values .line-tile__title { font-size: 0.9rem; }
.line-values .line-tile__text { font-size: 0.8rem; }

/* Project card: image, then a compact meta block. */
.line-project-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--rule-light);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.line-project-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
.line-project-card__body { padding: 1rem 1.1rem 1.25rem; }
.line-project-card__type {
  display: inline-block;
  background: var(--wp--preset--color--gold-muted);
  color: var(--wp--preset--color--navy);
  font-family: var(--wp--preset--font-family--display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  padding: 0.2rem 0.55rem;
  margin-bottom: 0.6rem;
  /* Projects carrying two or three types wrap to a second line; without an
     explicit line-height the inline-block clipped the descenders. */
  line-height: 1.45;
  font-weight: 600;
}
.line-project-card__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.05rem;
  line-height: 1.15;
  margin: 0 0 0.4rem;
}
.line-project-card__type a { color: inherit; text-decoration: none; }
.line-project-card__type a:hover,
.line-project-card__type a:focus-visible { text-decoration: underline; }
.line-project-card__title a { text-decoration: none; color: inherit; }
.line-project-card__title a:hover { color: var(--wp--preset--color--gold-deep); }
.line-project-card__scope {
  font-size: 0.88rem;
  color: var(--wp--preset--color--ink-muted);
  margin: 0;
}
.line-project-card__loc {
  font-size: 0.82rem;
  color: var(--wp--preset--color--ink-muted);
  margin: 0.6rem 0 0;
}

/* ---- Header ------------------------------------------------------------
   White, compact, and sticky (client Phase 1). The template-part wrapper is
   the sticky element; the admin bar height var keeps it clear of the bar for
   logged-in users. Nav links read navy on the white bar, but the rule is
   scoped to the CLOSED responsive container so the mobile overlay keeps its
   own navy-background/white-text colors from the block attributes.
   -------------------------------------------------------------------- */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 200;
}
.admin-bar header.wp-block-template-part {
  top: var(--wp-admin--admin-bar--height, 32px);
}
.line-header {
  border-bottom: 1px solid var(--wp--preset--color--rule-light);
}
.line-header .wp-block-navigation a {
  text-decoration: none;
}
.line-header .wp-block-navigation__responsive-container:not(.is-menu-open) a {
  color: var(--wp--preset--color--navy);
}
.line-header .wp-block-navigation__responsive-container:not(.is-menu-open) a:hover {
  color: var(--wp--preset--color--gold-deep);
}

/* The desktop dropdown lives inside that same CLOSED container, so the rule
   above turned its links navy while the block attributes kept the panel navy
   — the Services menu rendered as an empty black box. The panel is now white
   to match the header, which also drops the last stray navy block from the
   Phase 1 palette. The mobile overlay is a different element and stays dark. */
/* !important is required, not sloppiness: core emits
   `.has-navy-background-color { background-color: … !important }` for preset
   colours, and the navigation block puts that class on the submenu because it
   shares the overlay's colours with the mobile menu. Nothing else outranks it. */
.line-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
  background-color: var(--wp--preset--color--white) !important;
  color: var(--wp--preset--color--navy);
  border: 1px solid var(--wp--preset--color--rule-light);
  box-shadow: 0 8px 24px rgba(0, 12, 28, 0.12);
}
.line-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a {
  padding-block: 0.5rem;
}

.line-logo img {
  max-width: 170px;
  height: auto;
  display: block;
}

/* ---- Project detail body ----------------------------------------------
   Overview and Scope of Work read a step larger than default body copy
   (client Phase 1). Now that the facts sidebar is gone the column is wider,
   so the measure is capped by the block's own contentSize rather than here.
   -------------------------------------------------------------------- */
.line-project-body p,
.line-project-body li {
  font-size: 1.05rem;
  line-height: 1.7;
}
.line-project-body h2,
.line-project-body h3 {
  margin-top: 2.25rem;
}
.line-project-body .line-eyebrow {
  margin-top: 0;
}

/* ---- Section rhythm ----------------------------------------------------
   Core puts a 1.5rem block gap between every top-level section, which stacks
   on top of the padding each section already carries — 24px of dead space at
   four seams before the page even starts. Sections own their own spacing.
   -------------------------------------------------------------------- */
.wp-site-blocks > * + * {
  margin-block-start: 0;
}

/* The Projects banner is an index page, not a landing page: its job is to
   label the page and get out of the way of the work. !important because core
   emits the preset font-size classes with it. */
.wp-block-cover h1.has-page-font-size {
  font-size: clamp(2rem, 3.4vw, 2.75rem) !important;
}

/* ---- Page title band ---------------------------------------------------
   Was a solid navy block; now white with a hairline so the title still reads
   as a distinct band above the content (client Phase 1 palette).
   -------------------------------------------------------------------- */
.line-band-top {
  border-top: 1px solid var(--wp--preset--color--rule-light);
}

/* ---- Mobile menu overlay ----------------------------------------------
   Core right-aligns the top-level items but leaves the Services children
   flush left and indented, so the open menu read as two different
   alignments. The overlay is only ever used at mobile widths (the nav block
   is set to overlayMenu: "mobile"), so these rules need no media query.
   -------------------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  align-items: flex-end;
  padding-left: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li > a {
  justify-content: flex-end;
  text-align: right;
}
/* The parent item keeps its label and arrow together at the right edge. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  justify-content: flex-end;
}

/* Off-screen but readable by assistive tech. Used by the stat counters, where
   the visible figure is aria-hidden while it counts. */
.line-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The footer/quick-link lists carry core's "none" list style, which core only
   registers for some contexts — the markers were still painting. */
.wp-block-list.is-style-none {
  list-style: none;
  padding-left: 0;
}

.line-pagehead {
  border-bottom: 1px solid var(--wp--preset--color--rule-light);
}

/* ---- Filter tabs (Projects index) ------------------------------------- */
.line-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 1px solid var(--wp--preset--color--rule-light);
  padding-bottom: 1rem;
}
.line-filters a {
  font-family: var(--wp--preset--font-family--display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  padding: 0.55rem 1rem;
  text-decoration: none;
  color: var(--wp--preset--color--ink-muted);
  border: 1px solid transparent;
}
.line-filters a:hover { color: var(--wp--preset--color--navy); }
.line-filters a[aria-current="page"] {
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
}

/* ---- Cover fallback ----------------------------------------------------
   Covers use useFeaturedImage + a 70% navy dim. With no featured image the
   dim sits over nothing and renders washed grey. Painting the cover element
   itself navy makes missing-image covers solid navy; with an image, the
   image sits above this and the dim applies as designed.
   -------------------------------------------------------------------- */
.wp-block-cover {
  background-color: var(--wp--preset--color--navy);
}

/* ---- Icons ------------------------------------------------------------
   Stroked line icons inheriting currentColor: amber on navy, deep gold on
   light, per the same rules as eyebrows. See inc/icons.php.
   -------------------------------------------------------------------- */
.line-icon {
  display: block;
  color: var(--wp--preset--color--gold-muted);
}
.has-navy-background-color .line-icon,
.has-navy-raised-background-color .line-icon {
  color: var(--wp--preset--color--amber);
}
.line-icon--center { margin-inline: auto; }

/* ---- Icon tiles (service capability grids) ----------------------------
   The comps render each service's capabilities as icon tiles rather than
   bullet lists. Light card, icon, condensed title, one-liner.
   -------------------------------------------------------------------- */
.line-tiles {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1100px) { .line-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .line-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .line-tiles { grid-template-columns: 1fr; } }

.line-tile {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--rule-light);
  border-top: 3px solid var(--wp--preset--color--gold-muted);
  padding: 1.25rem 1.25rem 1.4rem;
}
.line-tile .line-icon { margin-bottom: 0.75rem; }
.line-tile__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  margin: 0 0 0.35rem;
  color: var(--wp--preset--color--navy);
}
.line-tile__text {
  font-size: 0.86rem;
  color: var(--wp--preset--color--ink-muted);
  margin: 0;
}

/* ---- Checklist + fleet figure (We own our operation) -------------------
   Amber checkmarks drawn with a mask so the color stays on the token.
   -------------------------------------------------------------------- */
.line-checks { list-style: none; padding-left: 0; }
.line-checks li { position: relative; padding-left: 1.6rem; }
.line-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1em;
  height: 1em;
  background-color: var(--wp--preset--color--gold-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.line-fleet { margin: 0; height: 100%; }
.line-fleet img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

/* Tiles sitting on a navy section flip to raised-navy cards. */
.has-navy-background-color .line-tile {
  background: var(--wp--preset--color--navy-raised);
  border-color: var(--wp--preset--color--rule-dark);
  border-top-color: var(--wp--preset--color--amber);
}
.has-navy-background-color .line-tile__title { color: var(--wp--preset--color--white); }
.has-navy-background-color .line-tile__text { color: var(--wp--preset--color--on-navy-muted); }

/* ---- Capability row ---------------------------------------------------
   Icon above an uppercase label, repeated across a row. Used for the About
   page's "What we do" band and the four credential markers under each
   service hero. Hairline dividers between items, as in the comps.
   -------------------------------------------------------------------- */
.line-caprow {
  display: grid;
  gap: 1.5rem 0;
  grid-template-columns: repeat(var(--line-caprow-cols, 4), 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.line-caprow > li {
  padding-inline: 1.25rem;
  border-left: 1px solid var(--wp--preset--color--rule-dark);
  text-align: center;
}
.line-caprow > li:first-child { border-left: 0; }

.line-caprow .line-icon {
  margin: 0 auto 0.7rem;
  width: 42px;
  height: 42px;
}
.line-caprow__label {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  line-height: 1.25;
  text-wrap: balance;
  margin: 0;
  color: var(--wp--preset--color--navy);
}
.line-caprow__sub {
  font-size: 0.82rem;
  line-height: 1.35;
  margin: 0.3rem 0 0;
  color: var(--wp--preset--color--ink-muted);
}

/* Light is the default now that the sections are light; the dark tokens apply
   only where the row genuinely sits on navy. Previously this was inverted and
   the --light modifier had to be opted into, so when the palette flipped these
   labels became white on white. */
.line-caprow--light > li { border-left-color: var(--wp--preset--color--rule-light); }
.line-caprow > li { border-left-color: var(--wp--preset--color--rule-light); }

.has-navy-background-color .line-caprow > li,
.wp-block-cover .line-caprow > li { border-left-color: var(--wp--preset--color--rule-dark); }
.has-navy-background-color .line-caprow__label,
.wp-block-cover .line-caprow__label { color: var(--wp--preset--color--white); }
.has-navy-background-color .line-caprow__sub,
.wp-block-cover .line-caprow__sub { color: var(--wp--preset--color--on-navy-muted); }
.line-caprow--light .line-icon { color: var(--wp--preset--color--gold-deep); }

@media (max-width: 1100px) {
  .line-caprow { grid-template-columns: repeat(4, 1fr); }
  .line-caprow > li:nth-child(4n + 1) { border-left: 0; }
}
@media (max-width: 720px) {
  .line-caprow { grid-template-columns: repeat(2, 1fr); }
  .line-caprow > li:nth-child(odd) { border-left: 0; }
}

/* ---- Project facts (At a glance) --------------------------------------- */
.line-facts {
  margin: 0;
  display: grid;
  gap: 1rem;
}
.line-fact { display: grid; gap: 0.1rem; }
.line-fact__label {
  font-family: var(--wp--preset--font-family--display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--wp--preset--color--ink-muted);
}
.line-fact__value {
  margin: 0;
  font-size: 1rem;
  color: var(--wp--preset--color--navy);
}

/* ---- Project gallery (case study) --------------------------------------
   Full width beneath the overview columns. Equal-height tiles so a mix of
   portrait and landscape shots still reads as a tidy grid.
   -------------------------------------------------------------------- */
.line-project-gallery .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: var(--wp--preset--spacing--50);
}
@media (max-width: 1000px) { .line-project-gallery .wp-block-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .line-project-gallery .wp-block-gallery { grid-template-columns: 1fr; } }

.line-project-gallery .wp-block-image {
  margin: 0;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--rule-light);
}
.line-project-gallery .wp-block-image img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
}
.line-project-gallery figcaption {
  padding: 0.6rem 0.85rem 0.75rem;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--wp--preset--color--ink-muted);
  text-align: left;
}

/* ---- Trusted by --------------------------------------------------------
   Client roster on navy. Logos are knocked out to white so a roster of mixed
   brand colours reads as one row; if a client supplies a proper white/mono
   asset, drop the filter for that file rather than double-treating it.
   -------------------------------------------------------------------- */
.line-clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem clamp(2rem, 5vw, 3.5rem);
  margin: var(--wp--preset--spacing--50) 0 0;
  padding: 0;
  list-style: none;
}
.line-client {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.line-client img {
  max-height: 44px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity 150ms ease;
}
.line-client img:hover { opacity: 1; }

/* Text stand-in until artwork arrives — set in the display face so the row
   still reads as a considered lockup rather than a gap. */
.line-client__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: var(--wp--preset--color--white);
  opacity: 0.85;
}
.line-client--more span {
  font-family: var(--wp--preset--font-family--display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--wp--preset--color--amber);
}

@media (prefers-reduced-motion: reduce) {
  .line-client img { transition: none; }
}

/* ---- Two-up panels (Safety) -------------------------------------------- */
.line-grid-2 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 860px) { .line-grid-2 { grid-template-columns: 1fr; } }

.line-panel {
  background: var(--wp--preset--color--grey);
  border-top: 3px solid var(--wp--preset--color--gold-muted);
  color: var(--wp--preset--color--navy);
  padding: 2rem 1.85rem 2.25rem;
  height: 100%;
}
.line-panel .line-eyebrow { color: var(--wp--preset--color--gold-deep); }
.line-panel__heading {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.15;
  margin: 0 0 0.85rem;
}
.line-panel__body {
  color: var(--wp--preset--color--ink-muted);
  font-size: 0.95rem;
  margin: 0 0 1.4rem;
}
/* Two checklist columns, as in the comp. */
.line-panel__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem 1.25rem;
  margin: 0;
  font-size: 0.92rem;
}
@media (max-width: 520px) { .line-panel__list { grid-template-columns: 1fr; } }

/* ---- Promise box -------------------------------------------------------
   Navy panel with a doubled amber rule, per the About comp.
   -------------------------------------------------------------------- */
.line-promise {
  background: var(--wp--preset--color--navy);
  border: 1px solid var(--wp--preset--color--amber);
  outline: 6px solid var(--wp--preset--color--navy);
  outline-offset: -14px;
  padding: 2.25rem 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.line-promise__eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.9rem;
  color: var(--wp--preset--color--amber);
  margin: 0 0 0.9rem;
}
.line-promise__lines {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  color: var(--wp--preset--color--white);
  margin: 0;
}

/* ---- Contact form ----------------------------------------------------- */
.line-form__row {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) { .line-form__row { grid-template-columns: 1fr; } }

.line-form__field { margin: 0 0 1.25rem; }
.line-form__field label {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  margin-bottom: 0.35rem;
}
.line-form__field input,
.line-form__field select,
.line-form__field textarea {
  width: 100%;
  /* The theme has no global border-box reset, so width:100% plus 0.85rem of
     padding and a 1px border pushed these 29px past their container and gave
     the contact page a horizontal scrollbar on phones. */
  box-sizing: border-box;
  font: inherit;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--wp--preset--color--rule-light);
  border-radius: 2px;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--navy);
}
.line-form__field textarea { resize: vertical; }
.line-form__field input:focus-visible,
.line-form__field select:focus-visible,
.line-form__field textarea:focus-visible {
  border-color: var(--wp--preset--color--gold-deep);
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.line-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.line-form__small {
  font-size: 0.82rem;
  color: var(--wp--preset--color--ink-muted);
}

.line-form__notice {
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  border-left: 3px solid;
}
.line-form__notice p { margin: 0; }
.line-form__notice--ok {
  background: #E4F1E9;
  border-left-color: #14603A;
  color: #14603A;
}
.line-form__notice--error {
  background: #FBE6E4;
  border-left-color: #96261B;
  color: #96261B;
}

/* ---- Accessibility ---------------------------------------------------- */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--wp--preset--color--amber);
  outline-offset: 3px;
}

/* Core injects its own skip link into block themes; style it to match. */
.skip-link.screen-reader-text:focus {
  background: var(--wp--preset--color--amber);
  color: var(--wp--preset--color--navy);
  font-family: var(--wp--preset--font-family--display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Hero video is decorative; honour reduced-motion by showing the poster. */
@media (prefers-reduced-motion: reduce) {
  .line-hero__video { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Hero video ------------------------------------------------------- */
.line-hero { position: relative; isolation: isolate; }
.line-hero .line-hero__video,
.line-hero .line-hero__poster {
  position: absolute;
  inset: 0;
  /* Core block-gap put margin-block-start:24px on the video (non-first
     child), shifting it out of the hero box — a dark band above, overhang
     below. Zeroed at higher specificity than core's container rule. */
  margin: 0;
  width: 100%;
  /* Core's constrained layout puts max-width:1200px on group children, which
     letterboxed the video inside the navy band on wide screens. */
  max-width: none;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Scrim keeps white hero text legible over any frame of the footage. */
/* Scrim removed 2026-09-23 at the client's direction — the footage shows
   unfiltered. Legibility over bright frames comes from a shadow on the type
   itself, which covers nothing. */
.line-hero__content h1,
.line-hero__content .line-hero__lede {
  text-shadow: 0 2px 6px rgba(0, 12, 28, 0.65), 0 0 28px rgba(0, 12, 28, 0.45);
}
/* (mobile video hide removed Sep 24 — client wants playback on phones;
   the loader streams the 720p rendition there.) */

/* ---- Lightbox ----------------------------------------------------------
   Grouped photo viewer (assets/js/line-lightbox.js). Amber controls on the
   navy backdrop follow the same 8.18:1 contract as everything else.
   -------------------------------------------------------------------- */
.line-lb-target { cursor: zoom-in; }
.line-lb-target:focus-visible {
  outline: 3px solid var(--wp--preset--color--amber);
  outline-offset: 3px;
}

.line-lb-open, .line-lb-open body { overflow: hidden; }

/* The explicit display below would defeat the [hidden] attribute the script
   toggles — without this rule the overlay opens once and never closes. */
.line-lb[hidden] { display: none; }

.line-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 12, 28, 0.96);
  display: grid;
  grid-template-columns: 4rem 1fr 4rem;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
}
@media (prefers-reduced-motion: no-preference) {
  .line-lb { animation: line-lb-in 160ms ease-out; }
  @keyframes line-lb-in { from { opacity: 0; } to { opacity: 1; } }
}

.line-lb__stage {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  max-width: min(1200px, 92vw);
  text-align: center;
}
.line-lb__img {
  max-width: 100%;
  max-height: 82vh;
  display: block;
  margin-inline: auto;
  border-radius: 2px;
}
.line-lb__caption {
  margin-top: 0.75rem;
  color: var(--wp--preset--color--on-navy-muted);
  font-size: 0.9rem;
}

.line-lb__close,
.line-lb__nav {
  background: transparent;
  border: 0;
  color: var(--wp--preset--color--amber);
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem 0.9rem;
}
.line-lb__close:hover,
.line-lb__nav:hover { color: var(--wp--preset--color--gold); }
.line-lb__close:focus-visible,
.line-lb__nav:focus-visible {
  outline: 3px solid var(--wp--preset--color--gold);
  outline-offset: 2px;
}

.line-lb__close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 2.2rem;
}
.line-lb__prev { grid-column: 1; grid-row: 1; }
.line-lb__next { grid-column: 3; grid-row: 1; }

.line-lb__count {
  grid-column: 2;
  grid-row: 2;
  margin: 0 0 1.25rem;
  font-family: var(--wp--preset--font-family--display);
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  color: var(--wp--preset--color--on-navy-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .line-lb { grid-template-columns: 3rem 1fr 3rem; }
  .line-lb__nav { font-size: 2.1rem; padding: 0.4rem 0.5rem; }
  .line-lb__img { max-height: 74vh; }
}

/* ---- Print ------------------------------------------------------------ */
@media print {
  .line-topbar, .wp-block-navigation, .line-filters { display: none; }
  body { color: #000; background: #fff; }
}

/* Footer NAP block — visible address, matching the schema. */
/* Was on-navy-muted for the old dark footer; on the light footer that is
   2.25:1. ink-muted is the light-surface equivalent (5.88:1 on grey). */
.line-address {
  margin: 0 0 0.6rem;
  color: var(--wp--preset--color--ink-muted);
}
.has-navy-background-color .line-address,
.has-navy-raised-background-color .line-address {
  color: var(--wp--preset--color--on-navy-muted);
}

/* --------------------------------------------------------------------------
 * Home page v2 — client's Aug 26 mockup, adjusted per the Aug 27 call.
 * -------------------------------------------------------------------------- */

/* Trust bar — four credential items with gold icons and hairline dividers. */
.line-trustbar { border-bottom: 1px solid var(--wp--preset--color--rule-light); }
.line-trustbar__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.line-trustbar__item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--wp--preset--color--rule-light);
}
.line-trustbar__row > .line-trustbar__item:first-child { border-left: 0; padding-left: 0; }
.line-trustbar__icon svg { width: 40px; height: 40px; color: var(--wp--preset--color--gold-muted); }
.line-trustbar__title { margin: 0; font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em; }
.line-trustbar__sub {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--wp--preset--color--ink-muted);
}
@media (max-width: 900px) {
  .line-trustbar__row { grid-template-columns: repeat(2, 1fr); }
  .line-trustbar__row > .line-trustbar__item:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) {
  .line-trustbar__row { grid-template-columns: 1fr; }
  .line-trustbar__item { border-left: 0; padding-left: 0; }
}

/* Section heading row: title left, "View All" link right. */
.line-sechead { padding-bottom: 0; }
.line-sechead__link a {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Who-we-are photo panel. */
img.line-photo-panel {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* Services band — six columns with hairline rules on navy. */
.line-services-band__row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.75rem;
}
.line-services-band__col {
  padding-left: 1.1rem;
  border-left: 1px solid rgba(232, 199, 122, 0.35);
}
.line-services-band__row > .line-services-band__col:first-child { border-left: 0; padding-left: 0; }
.line-services-band__title {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
@media (min-width: 1101px) {
  /* Longest category name runs three lines at this width — reserve that in
     every column and bottom-anchor the text, so all six bullet lists start
     at the same y. */
  .line-services-band__title {
    min-height: 3.9em;
    display: flex;
    align-items: flex-end;
  }
}
.line-services-band__title a { color: inherit; text-decoration: none; }
.line-services-band__title a:hover,
.line-services-band__title a:focus-visible {
  color: var(--wp--preset--color--gold);
  text-decoration: underline;
}
.line-services-band__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.line-services-band__list li {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--wp--preset--color--on-navy-muted);
  padding-left: 0.85rem;
  position: relative;
  margin-top: 0.45rem;
}
.line-services-band__list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--gold);
}
@media (max-width: 1100px) { .line-services-band__row { grid-template-columns: repeat(3, 1fr); row-gap: 2.25rem; } }
@media (max-width: 640px)  { .line-services-band__row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .line-services-band__row { grid-template-columns: 1fr; } .line-services-band__col { border-left: 0; padding-left: 0; } }

/* Why-choose columns (home). */
/* (why-choose icon styles retired 2026-09-01 — v3 uses gold display lines) */

/* Who-we-build-for tiles — 7 across on desktop, labels on a navy bar. */
.line-sectors {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.6rem;
}
.line-sectors__tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  text-decoration: none;
}
.line-sectors__tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 0.85;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.line-sectors { align-items: start; }
.line-sectors__tile:hover img,
.line-sectors__tile:focus-visible img { transform: scale(1.05); }
.line-sectors__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.55rem 0.5rem;
  background: rgba(0, 12, 28, 0.85);
  color: var(--wp--preset--color--white);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 1100px) { .line-sectors { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .line-sectors { grid-template-columns: repeat(2, 1fr); } .line-sectors__label { font-size: 0.78rem; } }

/* Header CTA button — compact so the bar stays one line. Kept on mobile
   deliberately: it is the page's only proposal CTA (Aug 27 call removed the
   body CTAs), so it must survive the hamburger collapse. */
.line-header__cta .wp-block-button__link { padding: 0.55rem 1.1rem; }
/* (mobile header button retired Sep 2 — client asked for its complete removal on mobile) */

/* --------------------------------------------------------------------------
 * Mockup-fidelity pass (v1.22.0) — bold caps headings live in theme.json;
 * everything below copies the mockup's component treatments.
 * -------------------------------------------------------------------------- */

/* Hero composite: cream ground, photo bleeding off the right edge, soft cream
   fade where copy meets photo — no CTA buttons by client decision. */
.line-hero3 { background: #F2EFEB; overflow: hidden; }
.line-hero3__inner {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: stretch;
}
.line-hero3__copy {
  padding-block: var(--wp--preset--spacing--60);
  padding-right: 1rem;
  align-self: center;
  position: relative;
  z-index: 2;
}
.line-hero3__copy h1 { margin: 0; }
.line-hero3__lede {
  margin-top: 1.4rem;
  max-width: 36em;
  font-size: 1.05rem;
  line-height: 1.7;
}
.line-hero3__media {
  position: relative;
  /* bleed to the viewport's right edge from inside the 1200px container */
  margin-right: min(0px, calc((1200px - 100vw) / 2));
}
.line-hero3__media img,
.line-hero3__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.line-hero3__media .line-hero__video { position: absolute; inset: 0; }
.line-hero3__media::before {
  /* cream fade so the photo melts into the copy side, like the mockup */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: linear-gradient(90deg, #F2EFEB 0%, rgba(242, 239, 235, 0) 100%);
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 860px) {
  .line-hero3__inner { grid-template-columns: 1fr; }
  .line-hero3__copy { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
  .line-hero3__media { margin-right: 0; }
  .line-hero3__media::before { display: none; }
  .line-hero3__media img { max-height: 320px; }
  .line-hero3__media .line-hero__video { display: none; }
}

/* Nav: small caps like the mockup. */
.line-header .wp-block-navigation .wp-block-navigation-item__label {
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Featured projects, overlay cards: photo + navy caption bar + gold arrow. */
.line-featured--overlay .line-project-card {
  position: relative;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: hidden;
  height: 230px;
}
.line-featured--overlay .line-project-card__type,
.line-featured--overlay .line-project-card__scope { display: none; }
.line-featured--overlay .line-project-card__body {
  position: absolute;
  inset: auto 0 0 0;
  background: rgba(0, 12, 28, 0.92);
  color: var(--wp--preset--color--white);
  padding: 0.7rem 3rem 0.7rem 0.9rem;
  min-height: 4.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-block-start: 0;
}
/* One even image row regardless of source photo shape. */
.line-featured--overlay .wp-block-post-featured-image,
.line-featured--overlay .wp-block-post-featured-image a,
.line-featured--overlay .wp-block-post-featured-image img {
  display: block;
  height: 230px;
  width: 100%;
  object-fit: cover;
}
.line-featured--overlay .line-project-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.25;
  margin: 0;
  color: var(--wp--preset--color--white);
}
.line-featured--overlay .line-project-card__title a { color: inherit; }
.line-featured--overlay .line-project-card__title a:hover { color: var(--wp--preset--color--gold); }
.line-featured--overlay .line-project-card__loc {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--wp--preset--color--on-navy-muted);
}
.line-featured--overlay .line-project-card__body::after {
  /* gold arrow chip, right edge of the bar */
  content: "→";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2.4rem;
  display: grid;
  place-items: center;
  background: var(--wp--preset--color--amber);
  color: var(--wp--preset--color--navy);
  font-weight: 700;
}

/* Services band: photo texture under the navy. */
.line-services-band {
  background-image:
    linear-gradient(rgba(0, 12, 28, 0.93), rgba(0, 12, 28, 0.93)),
    url(assets/images/services-bg.jpg);
  background-size: cover;
  background-position: center;
}

/* Why-choose columns: hairline rules between, like the mockup. */
.line-whyline .line-whyline__item {
  border-left: 1px solid var(--wp--preset--color--rule-light);
  padding-inline: 1.1rem;
}
.line-whyline .line-whyline__item:first-child { border-left: 0; }
@media (max-width: 820px) {
  .line-whyline .line-whyline__item { border-left: 0; padding-inline: 0; }
}

/* Sector tiles: small glyph above the label. */
.line-sectors__label { display: grid; justify-items: center; align-content: center; gap: 0.2rem; min-height: 3.9rem; }
.line-sectors__glyph svg { width: 18px; height: 18px; color: var(--wp--preset--color--gold); display: block; }

/* CTA bar single-sentence variant. */
.line-ctabar__text { max-width: 46em; font-size: 0.98rem; line-height: 1.55; }

/* Bold-caps pass support: the mockup's headline font is condensed; Montserrat
   is wider, so the hero headline runs slightly smaller and overlaps the photo
   fade (as the mockup's does) to keep the two-line break. */
.line-hero3__copy h1 {
  letter-spacing: 0;
  font-weight: 800;
  line-height: 1.03;
  /* !important required: core's .has-hero-font-size preset class is !important */
  font-size: clamp(2rem, 3.9vw, 3.3rem) !important;
  max-width: none;
  width: 135%;
}
@media (max-width: 860px) { .line-hero3__copy h1 { width: auto; } }

/* --------------------------------------------------------------------------
 * Home v3 — client's Aug 31 spec: wording over video, counters, photo
 * service cards, icon-free why-choose.
 * -------------------------------------------------------------------------- */

/* Hero content sits above the poster/video + scrim (z-index from .line-hero
   rules further up). */
.line-hero__content { position: relative; z-index: 2; max-width: 780px; }
.line-hero__content h1 { margin: 0; }
.line-hero__lede {
  margin-top: 1.1rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #E4E9EF;
}

/* Pill button — Aug 31 call: circular/oval, never square. */
.line-pill .wp-block-button__link {
  border-radius: 999px;
  padding: 0.8rem 1.9rem;
}

/* Counters band: gold figures, roomy labels. */
.line-statband--counters .line-stat {
  display: block;
  text-align: center;
}
.line-statband--counters .line-stat__figure {
  color: var(--wp--preset--color--gold-muted);
  font-weight: 800;
  font-size: clamp(2.3rem, 3.8vw, 3.2rem);
}
.line-statband--counters .line-stat__label {
  margin-top: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 0.95rem;
}
.line-statband--counters .line-stat__sub {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--wp--preset--color--ink-muted);
}

/* Services photo cards — 3×2, whole card clickable. */
.line-svc-cards__sub { max-width: 44em; margin-inline: auto; }
.line-svc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.line-svc-cards > * { margin-block-start: 0; }
.line-svc-card {
  display: block;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--rule-light);
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  color: var(--wp--preset--color--navy);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.line-svc-card:hover,
.line-svc-card:focus-visible {
  box-shadow: 0 10px 28px rgba(0, 12, 28, 0.14);
  transform: translateY(-2px);
}
.line-svc-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1.5;
  height: auto;
  object-fit: cover;
}
.line-svc-card__body { display: block; padding: 1rem 1.1rem 1.2rem; }
.line-svc-card__tick {
  display: block;
  width: 2rem;
  height: 3px;
  background: var(--wp--preset--color--amber);
  margin-bottom: 0.6rem;
}
.line-svc-card__title {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  line-height: 1.3;
  min-height: 2.6em;
}
.line-svc-card__list {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--wp--preset--color--ink-muted);
}
@media (min-width: 561px) {
  /* Longest service list runs three lines — reserve it so all six cards are
     the same height in both rows. */
  .line-svc-card__list { min-height: 4.65em; }
}
.line-svc-cards__all { margin-top: 1.5rem; }
.line-svc-cards__allbtn {
  display: block;
  text-align: center;
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 2px;
  text-decoration: none;
}
.line-svc-cards__allbtn:hover,
.line-svc-cards__allbtn:focus-visible {
  background: var(--wp--preset--color--gold-muted);
  color: var(--wp--preset--color--white);
}
@media (max-width: 980px) { .line-svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .line-svc-cards { grid-template-columns: 1fr; } .line-svc-card__title { min-height: 0; } }

/* Why-choose v3 — no icons: gold display line, navy caps subtitle, gold rule. */
.line-heading-rule {
  width: 3.5rem;
  height: 3px;
  background: var(--wp--preset--color--amber);
  margin: 0.9rem auto 0;
}
.line-whyline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}
.line-whyline > * { margin-block-start: 0; }
.line-whyline__item {
  text-align: center;
  border-left: 1px solid var(--wp--preset--color--rule-light);
  padding-inline: 1.1rem;
}
.line-whyline__item:first-child { border-left: 0; }
.line-whyline__display {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  text-transform: uppercase;
  /* gold-deep, not gold-muted: on the grey section ground the brighter gold
     measures 2.98:1 and misses the 3:1 large-text minimum. */
  color: var(--wp--preset--color--gold-deep);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.05;
}
.line-whyline__subtitle {
  margin: 0.3rem 0 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}
@media (min-width: 821px) {
  /* Level the paragraphs: display+subtitle blocks reserve the same space. */
  .line-whyline__display { min-height: 2.2em; display: flex; align-items: flex-end; justify-content: center; }
  .line-whyline__subtitle { min-height: 3.25em; }
}
.line-whyline__rule {
  display: block;
  width: 2.2rem;
  height: 2px;
  background: var(--wp--preset--color--amber);
  margin: 0.7rem auto;
}
.line-whyline__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--wp--preset--color--ink-muted);
}
@media (max-width: 820px) {
  .line-whyline { grid-template-columns: 1fr; gap: 2.25rem; }
  .line-whyline__item { border-left: 0; padding-inline: 0; }
}

/* Menu font consistency (client's Aug 31 call item): one family/weight/size
   for top-level links, submenu items, and the mobile overlay. */
.line-header .wp-block-navigation .wp-block-navigation-item__label,
.line-header .wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--display);
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
 * Client's Sep 2 "homepage update" — bronze-gold statistics, What Sets LINE
 * Apart, full street photo, mobile header, scroll restoration support.
 *
 * Client-specified hexes: bronze gold #A67C24 (all large statistics and
 * numbers, flat, site-wide) and deep navy #0A2A4A (the stat underlines).
 * #A67C24 on white is 3.8:1 and on the grey ground 3.5:1 — large-text only,
 * so everything painted with it stays at large/bold sizes.
 * -------------------------------------------------------------------------- */

/* All large statistics and numbers → bronze gold. */
.line-stat__figure,
.line-statband--counters .line-stat__figure,
.line-whyline__display { color: #A67C24; }

/* Counters band, his layout: no vertical dividers, a navy line under each
   number (same width/thickness/alignment), bronze category headings at
   large-text size, slate descriptions. */
.line-statband--counters .line-stat { border-left: 0 !important; padding-left: 0 !important; }
.line-statband--counters .line-stat__figure::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: 2px;
  background: #0A2A4A;
  margin: 0.7rem auto 0;
}
.line-statband--counters .line-stat__label {
  color: #A67C24;
  font-size: 1.2rem; /* ≥18.66px bold keeps the client's bronze at the 3:1 large-text tier */
  font-weight: 700;
}
.line-statband--counters .line-stat__sub { color: var(--wp--preset--color--ink-muted); }

/* What Sets LINE Apart — panel inside Who We Are (client's design). */
.line-apart {
  position: relative;
  background: var(--wp--preset--color--grey);
  border-top: 2px solid #A67C24;
  padding: 2.4rem 1.6rem 1.4rem;
  margin-top: 1.75rem;
  text-align: center;
}
.line-apart__badge {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wp--preset--color--navy);
  display: grid;
  place-items: center;
}
.line-apart__badge svg { width: 24px; height: 24px; color: var(--wp--preset--color--gold); }
.line-apart__title {
  margin: 0;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.line-apart__dash { width: 1.75rem; height: 2px; background: #A67C24; }
.line-apart__rule {
  display: block;
  width: 3rem;
  height: 3px;
  background: #A67C24;
  margin: 0.6rem auto 0.9rem;
}
.line-apart__text {
  margin: 0;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Street photo shows the FULL building, top to street — never cropped
   (client, Sep 5: "We aren't able to see the full building from street
   view"). The frame follows the image, not the column. */
img.line-photo-panel--tall { height: auto; object-fit: unset; }

/* Navy four-item credentials band under Who We Are. */
.line-apartband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.line-apartband > * { margin-block-start: 0; }
.line-apartband__item {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding-left: 1.25rem;
  border-left: 1px solid var(--wp--preset--color--rule-dark);
}
.line-apartband__item:first-child { border-left: 0; padding-left: 0; }
.line-apartband__icon svg { width: 34px; height: 34px; color: var(--wp--preset--color--gold); flex: none; }
.line-apartband__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
  color: var(--wp--preset--color--gold);
  line-height: 1.35;
}
.line-apartband__text {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--wp--preset--color--on-navy-muted);
}
@media (max-width: 900px) {
  .line-apartband { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; }
  .line-apartband__item:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) { .line-apartband { grid-template-columns: 1fr; } .line-apartband__item { border-left: 0; padding-left: 0; } }

/* Footer social row — icon + name, per the client's example. */
.line-social a { display: inline-flex; align-items: center; gap: 0.45rem; }
.line-social__icon { flex: none; }

/* Mobile header (client's Sep 2 before/after): no Request a Proposal button,
   larger logo left, hamburger far right, one tight vertically-centered row. */
@media (max-width: 782px) {
  .line-header .wp-block-buttons.line-header__cta { display: none; }
  .line-header .line-logo__link img { width: 200px; height: auto; }
  .line-header > .wp-block-group { padding-top: 0.35rem; padding-bottom: 0.35rem; }
  .line-header .wp-block-group { flex-wrap: nowrap; align-items: center; }
}

/* Gold tick under the Safety & Insurance page headings (client's design). */
.line-tickrule {
  display: block;
  width: 2.6rem;
  height: 3px;
  background: #A67C24;
  margin: 0.9rem 0 1.2rem;
}

/* --------------------------------------------------------------------------
 * Services page (client's Sep 4 design): banner hero, numbered photo cards
 * with his expanded lists, credentials row, proposal CTA.
 * -------------------------------------------------------------------------- */
.line-svchero {
  background:
    linear-gradient(90deg, #F7F5F1 0%, #F7F5F1 34%, rgba(247, 245, 241, 0) 68%),
    #F7F5F1 url(assets/images/services-hero.jpg) right center / auto 100% no-repeat;
  min-height: 320px;
  display: grid;
  align-items: center;
}
.line-svchero__copy {
  max-width: 26rem;
  padding-block: var(--wp--preset--spacing--60);
}
.line-svchero__lede { font-size: 0.98rem; line-height: 1.65; }
@media (max-width: 780px) {
  .line-svchero {
    background:
      linear-gradient(rgba(247, 245, 241, 0.94), rgba(247, 245, 241, 0.94)),
      #F7F5F1 url(assets/images/services-hero.jpg) right center / cover no-repeat;
  }
}

/* Numbered service cards — 3×2, whole card clickable. */
.line-numcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.line-numcard {
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--rule-light);
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  color: var(--wp--preset--color--navy);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.line-numcard:hover,
.line-numcard:focus-visible {
  box-shadow: 0 10px 28px rgba(0, 12, 28, 0.14);
  transform: translateY(-2px);
}
.line-numcard__media { position: relative; display: block; }
.line-numcard__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1.6;
  height: auto;
  object-fit: cover;
}
.line-numcard__num {
  position: absolute;
  left: 0.9rem;
  bottom: -0.85rem;
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--gold);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.35rem 0.65rem;
  letter-spacing: 0.04em;
}
.line-numcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.1rem 1.2rem;
}
@media (min-width: 561px) {
  /* Design: title sits beside the number badge; list and link align to it. */
  .line-numcard__body { padding-left: 4.5rem; padding-top: 0.55rem; }
}
.line-numcard__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  line-height: 1.3;
  min-height: 2.6em;
  display: block;
}
.line-numcard__list {
  margin: 0.5rem 0 1rem;
  padding: 0;
  list-style: none;
  flex: 1;
}
.line-numcard__list li {
  position: relative;
  padding-left: 0.85rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--wp--preset--color--ink-muted);
}
.line-numcard__list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: #A67C24;
  font-weight: 700;
}
.line-numcard__link {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.78rem;
  color: var(--wp--preset--color--gold-deep);
  border-top: 1px solid var(--wp--preset--color--rule-light);
  padding-top: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.line-numcard:hover .line-numcard__link { text-decoration: underline; }
@media (max-width: 980px) { .line-numcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .line-numcards { grid-template-columns: 1fr; } .line-numcard__title { min-height: 0; } }

/* Services CTA band text measure + skyline watermark (client's design). */
.line-svccta__text { max-width: 38em; }
.line-svccta {
  background-image: url(assets/images/cta-skyline.jpg);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 100%;
  background-blend-mode: multiply;
}
@media (max-width: 780px) { .line-svccta { background-image: none; } }

/* Service-page capability list — two columns, bronze dots (Sep 4 pages). */
ul.line-svclist {
  margin: 1.75rem 0 0;
  padding: 1.5rem 1.75rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem 2rem;
  background: var(--wp--preset--color--grey);
  border-left: 3px solid #A67C24;
}
ul.line-svclist li {
  position: relative;
  padding-left: 0.95rem;
  font-weight: 500;
  font-size: 0.95rem;
}
ul.line-svclist li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: #A67C24;
  font-weight: 700;
}
@media (max-width: 560px) { ul.line-svclist { grid-template-columns: 1fr; } }