/*
 * Digital Deckhand — theme overrides.
 * Loaded after assets/css/site.css. Tailwind's compiled output lives entirely
 * inside `@layer utilities`, and unlayered rules always beat layered ones, so
 * everything below wins without needing !important — except where a rule here
 * is noted as fighting an existing `!important` rule in site.css, which is
 * placed in `@layer base` (declared earlier than `utilities` in site.css) so
 * it still wins under the CSS important/layer-reversal rule.
 */

/* ============ Header: bg full-width, content still max-width, sticky, hide/show, transparent-to-solid ============ */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  height:108px;
  background:transparent;
  border-bottom:none;
  transition:transform .32s ease, height .32s ease;
  transform:translateY(0);
}
/* Full-bleed background/border layer behind the still-constrained (.shell) content row. */
.site-header::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:transparent;
  border-bottom:1px solid transparent;
  z-index:-1;
  transition:background-color .32s ease, border-color .32s ease;
}
.site-header.is-hidden{
  transform:translateY(-100%);
}
.site-header.is-scrolled{
  height:80px;
}
.site-header.is-scrolled::before{
  background:var(--ink);
  border-bottom-color:#ffffff24;
}

.brand-logo{
  width:150px;
  transition:width .28s ease;
}
.site-header.is-scrolled .brand-logo{
  width:110px;
}

/* header-cta: fights an existing `!important` rule scoped to hero sections, so it
   has to live in the same (earlier-declared) layer with matching !important. */
@layer base{
  .header-cta{
    background:var(--teal) !important;
    border-color:transparent !important;
    border-width:0 !important;
    color:#fff !important;
  }
  .header-cta:hover{
    background:var(--ink) !important;
    border-color:transparent !important;
    color:#fff !important;
  }
  .site-header:not(.is-scrolled) .header-cta{
    background:transparent !important;
    border-width:1px !important;
    border-style:solid !important;
    border-color:#ffffff70 !important;
    color:#fff !important;
  }
  .site-header:not(.is-scrolled) .header-cta:hover{
    background:#ffffff1a !important;
    border-color:#fff !important;
  }
}
.header-cta{
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.header-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.header-cta span{
  color:#fff;
}

/* Chevron instead of the "↓" glyph on the services trigger; the existing
   .is-open rule still rotates the whole span 180deg, which combines with the
   pseudo-element's own 45deg to flip the chevron correctly. */
.services-menu-trigger span{
  font-size:0;
  line-height:0;
  width:7px;
  height:7px;
  margin-top:-5px;
  display:inline-block;
  position:relative;
  transition:transform .2s, margin-top .2s;
}
/* Rotating 180deg doesn't flip the margin-top nudge, so it needs its own
   compensated offset in the open state to keep the chevron in place. */
.services-menu.is-open .services-menu-trigger span{
  margin-top:5px;
}
.services-menu-trigger span::after{
  content:"";
  position:absolute;
  inset:0;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s;
}

/* Same chevron treatment on the mobile services accordion; its own
   [open] rule in site.css already rotates the span 180deg. */
.mobile-services-menu summary span{
  font-size:0;
  line-height:0;
  width:7px;
  height:7px;
  display:inline-block;
  position:relative;
}
.mobile-services-menu summary span::after{
  content:"";
  position:absolute;
  inset:0;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg);
}

/* ============ Leadership section: less top padding, small top margin ============ */
.leadership{
  padding-top:120px;
  padding-bottom:140px;
  margin-top:10px;
}
@media (max-width:700px){
  .leadership{
    padding-block:90px;
  }
}

/* ============ Homepage hero: sits close under the fixed 108px header ============ */
.hero-content{
  padding-top:calc(108px + 24px);
}

/* ============ Homepage route cards: arrow badge anchors to its own card ============ */
/* The design already pins the icon with position:absolute;right:24px — it just
   had nothing to anchor to, so it was positioning against a distant ancestor
   instead of its own card. Anchoring it here is the actual fix; the earlier
   justify-content/position:static attempt fought the design instead. */
.route-card{
  position:relative;
}
/* The very first .route-card rule in the cascade set flex-direction:column,
   and nothing later in the many redesigns of this component ever overrode
   it — so the "row" look (justify-content:flex-start, absolute-positioned
   icon) never actually had a row to work with. This was the real bug. */
.route-card{
  flex-direction:row;
}

/* Collapses the awkward 2-column tablet state (701-1000px) straight to the
   single-column layout instead — one card per row from 1000px down. */
@media (max-width:1000px){
  .route-grid{
    grid-template-columns:1fr;
  }
}

/* ============ Services mega-menu copy: no forced caps/tracking ============ */
.services-menu-list a span,
.services-menu-feature>p{
  text-transform:none;
  letter-spacing:normal;
}

/* ============ Card headings: small fixed top margin instead of auto/large fixed values ============ */
/* Site-wide sweep of every "label -> heading -> copy" card that pushes its
   heading down with margin:auto or a large fixed margin-top.
   .growth-core-grid h3, .about-story-days strong and .framework-half-card>strong
   (giant display numbers/letters, not card headings) are intentionally left untouched. */
.service-card h3,
.service-feature h3,
.growth-command-card>strong,
.growth-page-stealth .growth-lead-card>strong,
.growth-page-stealth .growth-crew-card>strong,
.growth-fit-copy h3,
.growth-commercial-options h3,
.paid-outcome-grid h3,
.paid-process-grid h3,
.audience-grid h3,
.audience-card h3,
.marine-service-demand-grid h3,
.marine-service-type-grid h3,
.charter-stage-grid h3,
.charter-operator-grid h3,
.contact-problem-layout aside h3,
.contact-next-steps h3,
.embedded-proof-title h3,
.web-route-copy h3,
.web-timeline button h3,
.marketing-service-card h3,
.marketing-startup-clarity h3,
.marketing-startup-partnership h3,
.marketing-engagement-grid h3,
.paid-channel-copy h3,
.paid-foundation-copy h3,
.seo-work-copy h3,
.seo-os-copy h3,
.seo-pace-panel h3,
.strategy-entry-grid h3,
.strategy-clarity-copy h3,
.strategy-authority-grid h3,
.strategy-process-grid h3,
.strategy-engagement article h3,
.social-reality-grid h3,
.social-multiplier-input h3,
.social-scope-panel h3,
.social-commitment-grid h3,
.social-loop-grid h3,
.growth-framework-grid h3,
.growth-economics-grid h3,
.about-crew-grid h3,
.about-evolution-grid h3,
.framework-half-card h3,
.framework-stage-copy h3,
.framework-discipline-grid h3,
.services-overview-card h3,
.work-engagement-grid h3,
.commerce-lever-grid h3,
.commerce-capability-grid h3,
.manufacturer-capability-grid h3,
.startup-stage-grid h3,
.industries-sector-content h3,
.blog-article-copy h3,
.case-audiences h3,
.case-scope-grid h3,
.work-modal-copy h3,
.contact-route-options strong,
.services-menu-feature>strong,
.paid-content-phone>strong,
.startup-model-grid strong,
.about-founder-card>strong,
.growth-extended-label>strong{
  margin-top:12px;
}

/* Matching container min-heights, reduced now that headings no longer need
   room to be pushed to the bottom of the card. */
.service-card{
  min-height:160px;
}
.service-feature{
  min-height:360px;
}
.growth-command-card{
  min-height:300px;
}
@media (max-width:1000px){
  .service-feature{
    min-height:320px;
  }
}
@media (max-width:760px){
  .growth-command-card{
    min-height:260px;
  }
}
@media (max-width:700px){
  .service-card{
    min-height:140px;
  }
  .service-feature{
    min-height:300px;
  }
}

/* ============ Paid outcome cards: drop the forced min-height ============ */
.paid-outcome-grid article{
  min-height:0;
}

/* ============ Paid process block: round only the top corners ============ */
.paid-process{
  border-radius:32px 32px 0 0;
}
@media (max-width:760px){
  .paid-process{
    border-radius:23px 23px 0 0;
  }
}

/* ============ Web project teasers: equal width ============ */
.web-project-1,
.web-project-2{
  grid-column:span 6;
}

/* ============ Growth convergence line: centered ============ */
.growth-convergence-lines:after{
  left:50%;
}

/* ============ Paid intro: tighter gap between heading and copy ============ */
.paid-intro{
  gap:20px;
}
@media (max-width:1100px){
  .paid-intro{
    gap:16px;
  }
}

/* ============ Breadcrumbs: removed site-wide ============ */
/* display:none would pull the breadcrumb out of grid/flex layout entirely.
   Several hero sections (e.g. .growth-hero-content: grid-template-rows:auto 1fr auto)
   rely on it being the first grid item to keep the following siblings in their
   intended rows — removing it from flow shifted the hero copy into row 1
   (overlapping the fixed header) and the rail into the 1fr row (stretching
   to fill it). Collapsing it to zero size instead keeps its layout slot. */
[class$="-breadcrumb"]{
  visibility:hidden;
  height:0;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  overflow:hidden;
  pointer-events:none;
}

/* ============ Footer ============ */
/* Scoped to main>footer (not bare "footer") because the site also uses a
   plain <footer> tag as a decorative wrapper inside unrelated components
   (e.g. .strategy-five-second-visual footer) — a bare element selector here
   was leaking padding into those too. */
main>footer{
  padding-top:60px;
}
.footer-inner{
  gap:28px;
  min-height:0;
}

/* ============ Strategy page fixes ============ */
.strategy-five-second-visual footer{
  background:var(--ink);
}
.strategy-engagement article{
  min-height:0;
}

/* ============ About page ============ */
.about-story-days span{
  margin-top:0;
}
.about-story-mark{
  min-height:0;
}
.about-evolution-grid article{
  min-height:190px;
}
.about-crew-grid article{
  min-height:210px;
}
.about-principles-grid article>span{
  margin-top:15px;
}
@media (max-width:700px){
  .about-evolution-grid article{
    min-height:160px;
  }
  .about-crew-grid article{
    min-height:165px;
  }
}

/* ============ Framework page ============ */
.framework-hero-cycle i svg{
  display:block;
}
/* The fixed 120px/82px rows left a gap between the short label and the
   bottom-aligned heading; let rows size to their own content instead. */
.framework-entry-grid>a{
  grid-template-rows:auto auto auto auto;
}
.framework-entry-grid h3{
  align-self:start;
}

/* ============ Work page ============ */
.work-engagements>header{
  align-items:flex-start;
  gap:10px;
  display:flex;
  flex-direction:column;
}
.work-engagement-grid article{
  min-height:0;
}
.work-final>div{
  align-items:flex-start;
  gap:30px;
  display:flex;
  flex-direction:column;
}

/* ============ Work engagement grid: no space-between on the top row ============ */
.work-engagement-grid article>div:first-child{
  justify-content:flex-start;
}

/* Modal always stacked, screenshot on top like the mobile layout. */
.work-modal{
  grid-template-columns:1fr;
}
.work-modal-visual{
  min-height:320px;
  padding:32px;
}
.work-modal-copy{
  min-height:0;
}

/* ============ SEO work tabs ============ */
.seo-work-tabs button{
  border-radius:0;
}

/* ============ Work gallery project list ============ */
.gallery-project-list button{
  border-radius:0 !important;
}

/* ============ Contrast: light-background em accents ============ */
/* The shared rule painted these in --aqua (a light mint), which is only
   legible on the dark sections (.contact sits on a dark photo bg and is
   correctly left alone). .growth-statement/.audience/.signal all render on
   the light page background, so they need a dark accent instead. */
.growth-statement em,
.audience h2 em,
.signal h2 em{
  color:#177477;
}

/* ============ Crew section copy: less horizontal padding ============ */
.crew-copy{
  padding-left:clamp(35px, 4.5vw, 70px);
  padding-right:clamp(35px, 4.5vw, 70px);
}

/* ============ Growth partnership: lead/crew cards get a full border + real gap ============ */
/* They previously shared one divider line (lead-card's border-right) with no
   gap; now each card is bordered on its own and separated by a real gap. */
.growth-page-stealth .growth-leadership-system{
  gap:20px;
}
.growth-page-stealth .growth-lead-card,
.growth-page-stealth .growth-crew-card{
  border:1px solid #91d9d133;
}
@media (max-width:1000px){
  /* Cards stack at this breakpoint, so matching heights no longer serves a
     purpose — let each one size to its own content instead. */
  .growth-page-stealth .growth-lead-card,
  .growth-page-stealth .growth-crew-card{
    min-height:0;
  }
}

/* ============ Growth partnership: fit-tabs border radius ============ */
.growth-page-stealth .growth-fit-tabs button{
  border-radius:0 !important;
}

/* ============ Growth framework grid: no bottom border on the cards ============ */
.growth-framework-grid article{
  border-bottom:none;
}

/* ============ Growth commercial options: tag row pinned to the card bottom ============ */
.growth-commercial-options article>strong{
  margin-top:auto;
}

/* ============ Growth commercial: no bottom border on the stealth variant ============ */
.growth-page-stealth .growth-commercial{
  border-bottom:none;
}

/* ============ Growth startup route: group label+heading, pair with the copy ============ */
/* Previously span/strong/p sat in three disconnected grid columns at desktop
   width, which read as unrelated fragments rather than one banner. Grouping
   label+heading in one column next to the paragraph, with the link spanning
   below, matches the "intro block" pattern used elsewhere on the site.
   Scoped to >1120px only so the already-sensible tablet/mobile stacking
   (defined in site.css) is untouched. */
@media (min-width:1121px){
  .growth-startup-route{
    grid-template-columns:1fr 1.4fr;
    grid-template-rows:auto auto auto;
  }
  .growth-startup-route>span{
    grid-column:1;
    grid-row:1;
  }
  .growth-startup-route>strong{
    grid-column:1;
    grid-row:2;
  }
  .growth-startup-route>p{
    grid-column:2;
    grid-row:1/3;
    align-self:center;
  }
  .growth-startup-route>b{
    grid-column:1/-1;
    grid-row:3;
  }
}

/* ============ Growth fit check: header centered at every level ============ */
.growth-fit-check>header{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  max-width:760px;
  margin-inline:auto;
}

/* ============ Growth fit check: no padding on the stealth variant, except top ============ */
.growth-page-stealth .growth-fit-check{
  padding:0;
  padding-top:80px;
}

/* ============ Service bridge: heading + paragraph grouped in one column ============ */
/* Used on design/marine-services/social-media/paid-advertising. The markup
   groups <strong> and <p> into one wrapper div (see content edits); the grid
   goes from 4 tracks to 3 to match. */
@media (min-width:761px){
  .service-bridge{
    grid-template-columns:.65fr 2.3fr auto;
  }
}

/* ============ Web process head: eyebrow sits closer to the heading ============ */
.web-process-head{
  row-gap:12px;
}

/* ============ Paid content phone callout ============ */
.paid-content-phone{
  min-height:0;
}
.paid-content-phone>strong{
  display:flex;
  align-items:center;
  gap:14px;
}

/* ============ Paid process grid: no forced card height ============ */
.paid-process-grid article{
  min-height:0;
}

/* ============ Strategy authority: no forced heights ============ */
.strategy-authority-system{
  min-height:0;
}
.strategy-authority-grid article{
  min-height:0;
}

/* ============ Tab components: hardened border-radius ============ */
/* WordPress's front-end styles can impose a default border-radius on
   generic buttons; these components were never given an explicit radius of
   their own, so they're pinned to 0 (including hover/active) rather than
   left to inherit whatever WordPress supplies. */
.seo-work-tabs button,
.growth-page-stealth .growth-fit-tabs button,
.framework-stage-nav button,
.paid-channel-tabs button,
.paid-foundations-tabs button,
.strategy-clarity-tabs button,
.gallery-project-list button{
  border-radius:0 !important;
}
.seo-work-tabs button:hover, .seo-work-tabs button.is-active,
.growth-page-stealth .growth-fit-tabs button:hover, .growth-page-stealth .growth-fit-tabs button.is-active,
.framework-stage-nav button:hover, .framework-stage-nav button.is-active,
.paid-channel-tabs button:hover, .paid-channel-tabs button.is-active,
.paid-foundations-tabs button:hover, .paid-foundations-tabs button.is-active,
.strategy-clarity-tabs button:hover, .strategy-clarity-tabs button.is-active,
.gallery-project-list button:hover, .gallery-project-list button.is-selected,
.seo-pace-tabs button, .seo-pace-tabs button:hover, .seo-pace-tabs button.is-active{
  border-radius:0 !important;
}

/* ============ SEO OS map: connector centered as one vertical spine ============ */
/* display:flex defaults to row, so the 3 dots were laying out horizontally
   at the bottom of a left-indented 44px box instead of forming a centered
   vertical connector between the three stacked stages. */
.seo-os-flow{
  flex-direction:column;
  align-items:center;
  align-self:center;
  margin-left:0;
  gap:6px;
}

/* ============ SEO measure grid heading ============ */
.seo-measure-grid strong{
  margin-top:10px;
}

/* ============ SEO next-routes: arrow pinned bottom-right, real hover feedback ============ */
.seo-next-routes>a{
  position:relative;
  padding-right:70px;
  transition:background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.seo-next-routes>a>span:last-child{
  position:absolute;
  right:26px;
  bottom:24px;
}
.seo-next-routes>a:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 45px rgba(3,25,29,.18);
}
/* The second card is already dark by default, so the shared hover rule
   (background -> ink) was a no-op on it — nothing visibly changed on hover. */
.seo-next-routes>a+a:hover{
  background:#0d2b31;
}
@media (max-width:760px){
  .seo-next-routes>a{
    padding-right:58px;
  }
  .seo-next-routes>a>span:last-child{
    right:20px;
    bottom:18px;
  }
}

/* ============ Social page fixes ============ */
.social-reality-grid article{
  min-height:0;
}
.social-loop-grid article{
  min-height:0;
  border-bottom:1px solid #ffffff2e;
}
.social-source-tabs button,
.social-source-tabs button:hover,
.social-source-tabs button.is-active,
.social-scope-tabs button,
.social-scope-tabs button:hover,
.social-scope-tabs button.is-active{
  border-radius:0 !important;
}

/* ============ Services overview final: two columns instead of three ============ */
@media (min-width:701px){
  .services-overview-final>div{
    grid-template-columns:1.6fr .8fr;
  }
}

/* ============ Work confidential: no left margin ============ */
.work-confidential>div{
  margin-left:0;
}

/* ============ Work public gallery: hardened border-radius ============ */
/* Same behaviour as the homepage gallery — already handled generically by
   .gallery-project-list button in setupWorkGallery() since this page reuses
   the same .work-gallery/.gallery-project-list markup. Scoped rule added
   here too for explicitness. */
.work-public .gallery-project-list button{
  border-radius:0 !important;
}

/* ============ Framework hero: copy sits at the bottom of the hero ============ */
.framework-hero-content{
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.framework-hero-copy{
  margin-top:0;
  margin-bottom:60px;
}
.framework-hero-cycle{
  bottom:10%;
}

/* ============ Framework entry grid: no forced heights ============ */
.framework-entry-grid>a{
  min-height:0;
}
.framework-entry-grid>a>strong{
  min-height:0;
}

/* ============ About hero: copy sits at the bottom of the hero ============ */
.about-hero-content{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.about-hero-copy{
  padding-bottom:60px;
}

/* ============ Contact hero: clears the fixed 108px header ============ */
/* Same issue as the other heroes: the layout's own top padding maxed out
   around 92px, which is less than the fixed header's height, so the
   contact-journey card was rendering almost flush against it. */
.contact-hero-layout{
  padding-top:calc(108px + 40px);
}

/* ============ Contact next steps ============ */
.contact-next-steps>header{
  grid-template-columns:1.03fr .97fr;
  align-items:flex-start;
  gap:20px;
  display:flex;
  flex-direction:column;
}
.contact-next-steps article{
  min-height:0;
}

/* ============ Crew areas: article rows don't stretch past their content ============ */
/* min-height on .crew-areas article was stretching the auto-sized grid rows
   (grid default align-content behaves like stretch), leaving a large gap
   below the heading before the paragraph's row began. */
.crew-areas article{
  align-content:start;
}

/* ============ Blog index: header solid (no photo hero behind it here), proper header clearance ============ */
.blog-header .site-header::before{
  background:var(--ink);
}
.blog-index{
  padding-top:calc(108px + 40px);
}

/* ============ Blog pagination ============ */
.blog-pagination{
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:48px;
  display:flex;
}
.blog-pagination button{
  color:var(--ink);
  cursor:pointer;
  background:#fff;
  border:1px solid #06191d29;
  border-radius:11px;
  min-height:46px;
  padding:0 20px;
  font:inherit;
  font-size:13px;
  font-weight:700;
  transition:background .2s, color .2s, opacity .2s;
}
.blog-pagination button:hover:not(:disabled){
  background:var(--ink);
  color:#fff;
}
.blog-pagination button:disabled{
  cursor:default;
  opacity:.4;
}
.blog-pagination span{
  color:#66797c;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:730;
}

/* ============ Article content lists: restore bullets/numbers ============ */
/* The theme's base reset (Tailwind preflight: ol,ul,menu{list-style:none})
   applies sitewide, and .article-content ul/ol never set list-style back. */
.article-content ul{
  list-style:disc;
}
.article-content ol{
  list-style:decimal;
}
.article-content li{
  margin-bottom:8px;
}

/* ============ Industries hero: clears the fixed header ============ */
/* Not the breadcrumb-collapse regression this time (that only bites
   multi-row grid templates) — .industries-hero-inner is a simple 2-column
   grid, so this is just the same "top padding tuned before the header went
   fixed" issue as blog/contact/framework/about. */
.industries-hero-inner{
  padding-top:calc(108px + 40px);
}

/* ============ Industries hero mosaic: clean 2x2 instead of 1 tall + overflow ============ */
/* a:first-child spanning both rows left only 2 cells for 3 remaining items,
   so the 4th ("Marine services") fell into an implicit overflow row. */
.industries-hero-mosaic{
  grid-template-columns:1fr 1fr;
}
.industries-hero-mosaic a:first-child{
  grid-row:auto;
}
.industries-hero-mosaic a:first-child img{
  object-fit:cover;
  object-position:center;
}

/* ============ Industries sector content: bottom-aligned ============ */
.industries-sector-content{
  justify-content:flex-end;
}

/* ============ Final-CTA sections sitewide: hardened bottom corners ============ */
/* Every "floating rounded card" closing section (top corners rounded, meant
   to sit flush with the footer below) already sets bottom corners to 0 in
   the theme's own CSS via the border-radius shorthand — hardened here as
   explicit longhand properties as a defensive guarantee. */
.about-final,
.article-cta,
.blog-cta,
.case-next,
.charter-enquiry,
.commerce-final,
.contact,
.contact-direct,
.crew-contact,
.embedded-stage,
.framework-final,
.industries-cta,
.manufacturer-enquiry,
.marine-service-enquiry,
.services-overview-final,
.startup-enquiry{
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

/* ============ Card grids sharing the same template: no forced heights ============ */
.marine-service-type-grid article,
.marine-service-demand-grid article,
.charter-operator-grid article,
.commerce-lever-grid article,
.startup-stage-grid article,
.case-scope-grid article{
  min-height:0;
}

/* ============ Contact page ============ */
.contact-route-options button{
  min-height:0;
}
@media (min-width:901px){
  .contact-hero-layout{
    grid-template-columns:1fr 1fr;
  }
}
/* "Optional" tag sits beside the field label instead of on its own line,
   and reads more subdued regardless of which grid the field is in. */
.field-label{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
}
.field-label>span{
  opacity:.45;
  color:inherit;
}

/* ============ Contrast fixes verified via Lighthouse (PageSpeed Insights) ============ */
/* .eyebrow's fixed grey was borderline-failing 4.5:1 for 12px text even on
   the light page background; darkened for the light default, then
   re-lightened for the one dark section (.service-feature) it's used in. */
.eyebrow{
  color:#45575a;
}
.service-feature .eyebrow{
  color:#cfe3e0;
}
/* Homepage work-gallery preview: the light-bg variant of these two had a
   too-light grey, and the darker/light-bg-appropriate color for the project
   number wasn't reliably winning — restated explicitly (and reasserted for
   the dedicated dark /work/ page so that context isn't affected). */
.gallery-selector>p{
  color:#4a5c5f;
}
.gallery-project-list button>span{
  color:#007d84;
}
.work-public .gallery-selector>p{
  color:#ffffff8c;
}
.work-public .gallery-project-list button>span{
  color:var(--aqua);
}
/* Footer legal row was 40% alpha, too faint against the dark footer bg. */
.footer-small{
  color:#f2efe7cc;
}

/* ============ Remaining batch ============ */
.contact-choice-grid button{
  min-height:0;
}
.contact-journey{
  min-height:0;
}
.growth-commercial-options article{
  min-height:0;
}
.contact-route-options b{
  margin-top:auto;
}
.contact-hero-copy h1{
  font-size:clamp(50px,5.2vw,80px) !important;
}
.growth-page-stealth .growth-fit-system{
  border-radius:24px;
}
.growth-page-stealth .growth-framework-grid article:first-child{
  border-bottom:none;
}
.crew-areas article{
  min-height:0;
}
.manufacturer-decision-grid article,
.manufacturer-capability-grid>a,
.commerce-capability-grid>a{
  min-height:0;
}
.manufacturer-decision-grid h3{
  margin-top:15px;
}
.paid-foundations-tabs,
.seo-work-tabs{
  border-right:none;
}
.manufacturer-work header{
  justify-content:space-between;
  align-items:flex-start;
  gap:0;
  display:flex;
  flex-direction:column;
}
.manufacturer-form-heading{
  border-bottom:1px solid #ffffff2b;
  justify-content:space-between;
  align-items:flex-start;
  gap:0;
  margin-bottom:31px;
  padding-bottom:27px;
  display:flex;
  flex-direction:column;
}
.commerce-capabilities>header{
  row-gap:16px;
}
.seo-os-flow{
  border-left:none;
}
.seo-os-flow:first-of-type{
  margin-top:10px;
}
.seo-pace-tabs{
  padding:0;
}
.social-scope-panel aside>p{
  margin:10px 0;
}
.strategy-clarity-tabs{
  border-right:none;
}
.strategy-canvas footer{
  background:#08252a;
}
.strategy-authority-core{
  border-right:none;
}
.strategy-process-grid{
  border-top:none;
}
.strategy-engagement header{
  row-gap:16px;
}
.article-related header{
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:48px;
  display:flex;
  flex-direction:column;
}
.article-related h2{
  margin:0;
}

.charter-journey>header,
.charter-operators>header{
  gap:20px 70px;
}
.contact-assurance{
  margin-top:30px;
}
.web-timeline button{
  border-radius:0 !important;
}
.growth-page-stealth .growth-leadership-system{
  border:0 !important;
}
.marketing-engagement-grid,
.marketing-engagement-grid article{
  height:auto;
}
.marketing-engagement-grid{
  margin-top:40px;
}

@media (min-width:761px){
  .seo-intro{
    gap:20px 75px;
    grid-template-columns:1.35fr .65fr;
  }
}

/* ============ Work page hero: clears the fixed 108px header ============ */
.work-page-hero-inner{
  padding-top:calc(108px + 24px);
}