/* ============================================================
   Legallab — shared section components
   ============================================================ */

/* ---------- fold card (literal dog-eared corner, lifted from the logo mark) ----------
   .fold-card-photo / .fold-card-photo-img / ::before / ::after is a direct
   copy of the .page-hero-bg / .page-hero-bg-img / ::before / ::after layer
   stack used on the page heroes (same photo filter, same two overlay
   gradients, same z-index order) — kept as its own wrapper, rather than
   pseudo-elements of .fold-card itself, because .fold-card::before is
   already the dog-ear corner accent. */
.fold-card{
  position:relative;
  padding:2.4rem 2.1rem 2.1rem;
  clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  transition:clip-path .45s var(--ease), transform .45s var(--ease);
}
.fold-card--text-bottom{ display:flex; flex-direction:column; }
.fold-card--text-bottom .fold-icon{ margin-top:auto; }
.fold-card > .fold-card-photo{ position:absolute; inset:0; z-index:0; }
.fold-card-photo-img{
  position:absolute; inset:0; z-index:0;
  background:var(--card-img) center/cover;
  filter:grayscale(1) contrast(1.15) brightness(.85);
}
.fold-card-photo::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(155deg, rgba(8,45,73,.92) 0%, rgba(16,60,92,.85) 45%, rgba(247,148,29,.35) 100%);
  mix-blend-mode:multiply;
  background-color:rgba(8,45,73,.55);
}
.fold-card-photo::before{
  content:'';
  position:absolute; inset:0; z-index:2;
  background:radial-gradient(120% 90% at 50% 0%, transparent 0%, rgba(8,45,73,.4) 60%, rgba(8,45,73,.85) 100%);
}
.fold-card::before{
  content:'';
  position:absolute; top:0; right:0;
  width:26px; height:26px;
  background:var(--orange);
  z-index:1;
  transition:width .45s var(--ease), height .45s var(--ease);
}
.fold-card > *{ position:relative; z-index:1; }
.fold-card:hover{
  clip-path:polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 0 100%);
  transform:translateY(-5px);
}
.fold-card:hover::before{ width:42px; height:42px; }
.fold-card .fold-icon{ width:2.6rem; height:2.6rem; color:var(--orange); margin-bottom:1.3rem; }
.fold-card .fold-icon svg{ width:100%; height:100%; }
.fold-card h3{ color:var(--white); font-size:1.2rem; margin-bottom:.7rem; }
.fold-card p{ color:rgba(255,255,255,.72); font-size:.95rem; }

.fold-card--light{ background:var(--white); }
.fold-card--light::before{ background:var(--navy-deep); }
.fold-card--light h3{ color:var(--navy-deep); }
.fold-card--light p{ color:var(--slate); }

/* ---------- mission & vision ----------
   .mission-vision-bg / .mission-vision-bg-img / ::before / ::after is a
   direct copy of the .page-hero-bg / .page-hero-bg-img / ::before / ::after
   layer stack used on the page heroes (same photo filter, same two overlay
   gradients, same z-index order), kept as its own wrapper sibling to the
   real content rather than pseudo-elements of .mission-vision itself —
   otherwise the vignette's z-index:2 would paint over the text. */
.mission-vision{
  position:relative;
  width:75%;
  margin:0 auto;
}
.mission-vision > .mission-vision-bg{ position:absolute; inset:0; z-index:0; }
/* phones: heading left-aligned to line up with the Mission / Vision text below */
@media (max-width:720px){
  .mission-vision .section-head.center{ text-align:left; margin-left:0; }
  .mission-vision .section-head.center::before{ content:none; }
}
.mission-vision-bg-img{
  position:absolute; inset:0; z-index:0;
  background:var(--mv-bg) center/cover;
  filter:grayscale(1) contrast(1.15) brightness(.85);
}
.mission-vision-bg::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(155deg, rgba(8,45,73,.92) 0%, rgba(16,60,92,.85) 45%, rgba(247,148,29,.35) 100%);
  mix-blend-mode:multiply;
  background-color:rgba(8,45,73,.55);
}
.mission-vision-bg::before{
  content:'';
  position:absolute; inset:0; z-index:2;
  background:radial-gradient(120% 90% at 50% 0%, transparent 0%, rgba(8,45,73,.4) 60%, rgba(8,45,73,.85) 100%);
}
.mission-vision > *{ position:relative; z-index:1; }
.mission-vision-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:3rem;
}
.mission-vision-divider{ width:1px; background:rgba(255,255,255,.25); }
.mission-vision-col h3{ color:var(--orange); font-size:var(--fs-h3); margin-bottom:1.1rem; }
.mission-vision-col p{ color:rgba(255,255,255,.82); }

@media (max-width:760px){
  .mission-vision{ width:100%; }
  .mission-vision-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .mission-vision-divider{ width:100%; height:1px; }
}

/* ---------- benefit grid (home hero, bento) ---------- */
.benefit-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:1.1rem;
}
.benefit-grid .fold-card:nth-child(1){ grid-row:1 / 3; }
.benefit-grid .fold-card:nth-child(4){ grid-column:2 / 4; }

@media (max-width:980px){
  .benefit-grid{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .benefit-grid .fold-card:nth-child(1){ grid-column:1/3; grid-row:auto; }
  .benefit-grid .fold-card:nth-child(4){ grid-column:1/3; }
}
@media (max-width:620px){
  .benefit-grid{ grid-template-columns:1fr; }
  .benefit-grid .fold-card:nth-child(1),
  .benefit-grid .fold-card:nth-child(4){ grid-column:1; }
}

/* ---------- "Why Become a Member" cards (Partner page) — plain equal-width
   cards, not the bento layout/dog-eared fold used elsewhere for .fold-card ---------- */
#why-member .benefit-grid{ grid-template-columns:repeat(4,1fr); grid-template-rows:none; }
#why-member .fold-card:nth-child(1),
#why-member .fold-card:nth-child(4){ grid-column:auto; grid-row:auto; }
#why-member .fold-card,
#why-member .fold-card:hover{ clip-path:none; background:rgba(255,255,255,.07); backdrop-filter:blur(8px); }
#why-member .fold-card::before{ content:none; }

@media (max-width:980px){ #why-member .benefit-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ #why-member .benefit-grid{ grid-template-columns:1fr; } }

/* ---------- clause list (sharp square bullets) ---------- */
.clause-list li{
  display:flex; gap:1rem; align-items:flex-start;
  padding: 0.5rem 0;
  border-bottom:1px solid var(--line-on-light);
  font-size:1rem;
}
.surface-dark .clause-list li{ border-color:var(--line-on-dark); }
.clause-list li::before{
  content:''; flex:none; width:.55rem; height:.55rem; margin-top:.5rem;
  background:var(--orange);
}

/* ---------- pillar grid (4 service categories) ---------- */
.pillar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pillar{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(8px);
  padding:2.6rem 1.9rem;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.pillar .pillar-num{
  font-family:var(--font); font-weight:800; font-size:3rem;
  color:rgba(255,255,255,.08);
  position:absolute; top:1rem; right:1.4rem; line-height:1;
}
.pillar h3{ color:var(--white); font-size:1.15rem; margin:1.5rem 0 .8rem; position:relative; }
.pillar p{ color:rgba(255,255,255,.68); font-size:.92rem; position:relative; }

@media (max-width:980px){ .pillar-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pillar-grid{ grid-template-columns:1fr; } }

.pillar-grid--compact .pillar{ padding:1.5rem 1.3rem; min-height:14rem; }
.pillar-grid--compact .pillar h3{ font-size:1.02rem; margin:1rem 0 .5rem; }
.pillar-grid--compact .pillar p{ font-size:.85rem; }
.pillar-grid--compact .pillar .pillar-num{ font-size:2.2rem; }

/* home page: the compact cards stay two-up on phones, with tighter padding
   and type so the longer words still fit a half-width card */
@media (max-width:560px){
  .pillar-grid--compact{ grid-template-columns:repeat(2,1fr); }
  .pillar-grid--compact .pillar{ padding:1.1rem .85rem; min-height:11rem; min-width:0; }
  .pillar-grid--compact .pillar h3{ font-size:.86rem; margin:.9rem 0 .4rem; overflow-wrap:break-word; hyphens:auto; }
  .pillar-grid--compact .pillar p{ font-size:.74rem; line-height:1.45; }
  .pillar-grid--compact .pillar .pillar-num{ font-size:1.6rem; top:.7rem; right:.8rem; }
}

/* ---------- insight cards (blog teaser) ---------- */
.insight-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; }
.insight-card .insight-mark{ width:2.4rem; height:2px; background:var(--orange); margin-bottom:1.4rem; }
.insight-card h3{ font-size:1.15rem; margin-bottom:.7rem; color:var(--navy-deep); }
.insight-card p{ color:var(--slate); font-size:.95rem; }

@media (max-width:880px){ .insight-grid{ grid-template-columns:1fr; gap:2.6rem; } }

/* ---------- category grid (Services hub — browse by category) ---------- */
.category-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; }
.category-card{ display:flex; flex-direction:column; height:100%; min-width:0; }
.category-card .insight-mark{ width:2.4rem; height:2px; background:var(--orange); margin-bottom:1.4rem; }
.category-card h3{ font-size:1.4rem; margin-bottom:.8rem; }
.category-card > p.lead{ font-size:.95rem; margin-bottom:1.4rem; }
.category-card .btn{ margin-top:auto; align-self:flex-start; justify-self:start; white-space:normal; text-align:left; }

@media (max-width:880px){ .category-grid{ grid-template-columns:1fr; gap:2.8rem; } }

/* Cards share the grid's rows rather than each sizing its own, so every column's
   list — and the rule above each item — starts at the same height however far
   the title or intro above it wraps. Only while the cards sit side by side:
   below 881px they stack, and each is a plain flex column again. The row gap
   goes to 0 because a subgrid inherits it, and here it would fall between the
   parts of a card rather than between cards — the columns keep the column gap,
   and the stacked layout below keeps both. */
@media (min-width:881px){
  @supports (grid-template-rows:subgrid){
    .category-grid{ grid-template-rows:repeat(5, auto); row-gap:0; } /* mark, title, intro, list, button */
    .category-card{ display:grid; grid-row:1 / -1; grid-template-rows:subgrid; }
  }
}

/* ---------- bot grid (AI Bots page — 3 specialist bots side by side) ---------- */
.bot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; }
.bot-card{ display:flex; flex-direction:column; height:100%; min-width:0; }
.bot-card .service-media{ aspect-ratio:4/5; margin-bottom:1.6rem; }
.bot-card h3{ font-size:1.4rem; margin-bottom:.8rem; }
.bot-card > p.lead{ font-size:.95rem; margin-bottom:1.4rem; }
.bot-card .clause-label{ color:var(--orange); font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem; display:block; }
.bot-card .btn{ margin-top:auto; align-self:flex-start; justify-self:start; }

@media (max-width:880px){ .bot-grid{ grid-template-columns:1fr; gap:3rem; } }

/* shared rows, as for .category-card above — see the note there */
@media (min-width:881px){
  @supports (grid-template-rows:subgrid){
    .bot-grid{ grid-template-rows:repeat(6, auto); row-gap:0; } /* image, title, intro, label, list, button */
    .bot-card{ display:grid; grid-row:1 / -1; grid-template-rows:subgrid; }
  }
}

/* ---------- split banner (diagonal navy/orange — Employee Enquiries) ---------- */
.split-banner{
  position:relative; display:grid; grid-template-columns:1.4fr 1fr; min-height:240px; overflow:hidden;
}
.split-banner .split-navy{
  background:var(--navy-deep); color:var(--white);
  display:flex; align-items:center;
  padding:2.5rem var(--pad);
  padding-right:7rem;
  clip-path:polygon(0 0, 100% 0, 86% 100%, 0 100%);
}
.split-banner .split-orange{
  background:var(--orange); color:var(--navy-deep);
  display:flex; align-items:center; justify-content:flex-start;
  margin-left:-12%;
  padding:2.5rem var(--pad);
  padding-left:7rem;
  clip-path:polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
}
.split-banner h3{ font-size:1.5rem; color:var(--white); margin-bottom:.4rem; }
.split-banner .split-orange .btn{ background:var(--navy-deep); color:var(--white); }
.split-banner .split-orange .btn:hover{ background:var(--white); color:var(--navy-deep); }

@media (max-width:780px){
  .split-banner{ grid-template-columns:1fr; min-height:0; }
  .split-banner .split-navy{ clip-path:none; padding:3rem var(--pad) 4rem; }
  .split-banner .split-orange{ clip-path:none; margin-left:0; padding:3rem var(--pad); justify-content:flex-start; }
}

/* ---------- enquiry banner (flat navy band + bleeding photo — Employee Enquiries) ---------- */
.enquiry-wrap{ position:relative; }
.enquiry-pattern{
  position:relative;
  height:34px;
  background:var(--white);
  overflow:hidden;
  margin-bottom:10px;
}
.enquiry-pattern::before{
  content:'';
  position:absolute; inset:0;
  background-image:url('../img/logos/pattern-svg.svg');
  background-repeat:repeat-x;
  background-size:auto 100%;
}
.enquiry-pattern::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, var(--orange) 50%, transparent 100%);
  background-repeat:no-repeat;
  background-size:50% 100%;
  -webkit-mask-image:url('../img/logos/pattern-svg.svg');
  mask-image:url('../img/logos/pattern-svg.svg');
  -webkit-mask-repeat:repeat-x;
  mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%;
  mask-size:auto 100%;
  animation:enquiry-pattern-sweep 3.5s linear infinite;
}
@keyframes enquiry-pattern-sweep{
  0%{ background-position:-60% 0; }
  100%{ background-position:160% 0; }
}
.enquiry-banner{
  position:relative;
  background:var(--navy-deep);
  min-height:260px;
}
.enquiry-inner{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.enquiry-text{
  text-align: right;
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:.9rem;
  max-width:26rem;
  padding:2.5rem 0;
}
.enquiry-text h3{ color:var(--white); font-size:1.6rem; }
.enquiry-text .btn{ align-self:flex-end; }
.enquiry-photo-frame{
  position:relative;
  flex:none;
  width:380px;
  height:355px;
}
.enquiry-photo{
  position:absolute;
  top:-120px; left:0;
  width:380px;
  height:475px;
  object-fit:cover;
  object-position:top center;
  pointer-events:none;
}

/* small screens: photo centred above the text, head and shoulders sticking up
   out of the band; the bottom fades into the navy because the figure ends
   mid-band here instead of on the band's bottom edge */
@media (max-width:780px){
  .enquiry-inner{ flex-direction:column; }
  .enquiry-photo-frame{ order:-1; width:220px; height:185px; }
  .enquiry-photo{
    top:-90px; width:220px; height:275px;
    -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
  }
  .enquiry-text{ max-width:none; text-align:center; align-items:center; padding:.4rem 0 2.8rem; }
  .enquiry-text .btn{ align-self:center; }
}

/* Home page sweep — much darker than the pattern's own navy so the highlight
   actually reads against it (not orange, reserved for the static variant below).
   background-image only: the background shorthand would reset the base rule's
   background-size/repeat, collapsing the gradient to 100% width and leaving
   the sweep animation nothing left to move (it'd just sit frozen in place). */
.enquiry-pattern:not(.enquiry-pattern--static)::after{ background-image:linear-gradient(90deg, transparent 0%, var(--ink) 50%, transparent 100%); }

/* Contact page duplicate — orange banner, no sweep animation on the pattern */
.enquiry-pattern--static::after{ animation:none; }
.enquiry-banner--orange{ background:var(--orange); }
.enquiry-banner--orange .enquiry-text h3{ color:var(--navy-deep); }

/* ---------- CTA banner (image + gradient, reused end-of-page) ---------- */
.cta-banner{
  position:relative;
  min-height:64vh;
  padding:4rem 0;
  display:flex; align-items:center;
  background:var(--navy-deep);
  overflow:hidden;
}
/* Flex items shrink-to-fit by default — without this, a short CTA title (one
   that doesn't need to wrap) lets .container collapse to its narrowest child
   instead of filling the banner, unlike a long title that forces a wrap and
   incidentally fills the space. */
.cta-banner .container{ width:100%; }
.cta-banner .cta-bg{
  position:absolute; inset:0;
  background-image:url('../img/home/lastSectionBackground.webp');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  opacity:.4; filter:grayscale(1) contrast(1.15) brightness(.85);
}
.cta-banner .cta-scrim{
  position:absolute; inset:0;
  background:linear-gradient(125deg, rgba(8,45,73,.96) 10%, rgba(16,60,92,.82) 55%, rgba(247,148,29,.3) 100%);
}
.cta-banner .cta-content{ position:relative; z-index:2; }
.cta-banner .cta-content .lead{ color:rgba(255,255,255,.82); }
.cta-banner .cta-content h2{ font-size:var(--fs-h2); color:var(--white); }
@media (max-width:720px){
  .cta-banner .cta-content h2{ font-size:1.55rem; }
}

/* ---------- service block (Services & service-category pages) ----------
   Each block sits in its own surface-light/surface-dark section (see
   .section-pad on the wrapping <section>), so it carries no padding or
   divider of its own — the alternating section background is what
   separates one service from the next. */
.service-block{
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
}
.service-media{ position:relative; aspect-ratio:5/4; overflow:hidden; }
.service-media img{ width:100%; height:100%; object-fit:cover; }
.service-media::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(155deg, rgba(247,148,29,.22), rgba(8,45,73,.55));
  mix-blend-mode:multiply;
}
.service-block.flip{ direction:rtl; }
.service-block.flip > *{ direction:ltr; }
.service-block h3{ font-size:1.7rem; margin-bottom:1rem; }
.surface-dark .service-block h3{ color:var(--white); }
.service-block > div > p.lead{ font-size:.95rem; margin-bottom:1.6rem; }
.surface-dark .service-block > div > p.lead{ color:rgba(255,255,255,.75); }
.service-block .clause-label{ color:var(--orange); font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem; display:block; }

@media (max-width:880px){
  .service-block, .service-block.flip{ grid-template-columns:1fr; direction:ltr; gap:2rem; }
}

/* ---------- connect panel (Contact page — photo bg, very dark scrim) ----------
   Photo and scrim are split across ::before/::after (rather than combined in
   one background shorthand) so the photo alone can carry a grayscale filter
   without desaturating the white heading/text sitting above it. */
.connect-panel{ position:relative; }
.connect-panel::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background:var(--connect-bg) center/cover;
  filter:grayscale(1) contrast(1.15) brightness(.85);
}
.connect-panel::after{
  content:'';
  position:absolute; inset:0; z-index:0;
  background:rgba(8,45,73,.93);
  pointer-events:none;
}
.connect-panel > *{ position:relative; z-index:1; }

/* ---------- contact details list ---------- */
.contact-detail-list{ display:flex; flex-direction:column; gap:1.6rem; }
.contact-detail-list .detail-item{ display:flex; gap:1.1rem; align-items:flex-start; }
.contact-detail-list .detail-icon{
  width:2.6rem; height:2.6rem; flex:none;
  background:var(--orange); color:var(--navy-deep);
  display:flex; align-items:center; justify-content:center;
}
.contact-detail-list .detail-icon svg{ width:1.15rem; height:1.15rem; }
.contact-detail-list .detail-item h4{ color:var(--white); font-size:.95rem; margin-bottom:.3rem; }
.contact-detail-list .detail-item p, .contact-detail-list .detail-item a{ color:rgba(255,255,255,.72); font-size:.95rem; }

/* ---------- form ---------- */
.lab-form{ display:flex; flex-direction:column; gap:1.4rem; }
.lab-form .field{ display:flex; flex-direction:column; gap:.5rem; }
.lab-form label{ font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--navy); }
.lab-form input, .lab-form textarea, .lab-form select{
  width:100%; min-width:0;   /* inputs have a built-in minimum width that overflows very small phones */
  font-family:var(--font); font-size:1rem; padding:.9rem 1rem;
  background:var(--white); border:1.5px solid var(--line-on-light);
  color:var(--ink); border-radius:0;
  transition:border-color .25s;
}
.lab-form input:focus, .lab-form textarea:focus, .lab-form select:focus{ border-color:var(--orange); outline:none; }
.lab-form .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media (max-width:560px){ .lab-form .row-2{ grid-template-columns:1fr; } }
.lab-form .consent-field{
  display:flex; align-items:flex-start; gap:.7rem;
  font-size:.9rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--slate);
  cursor:pointer;
}
.lab-form .consent-field input{ padding:0; width:1.1rem; height:1.1rem; margin-top:.15rem; flex-shrink:0; accent-color:var(--orange); }
.lab-form .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* heading above the form — only where the form sits below the contact panel */
.lab-form .form-intro{ display:none; }
@media (max-width:880px){
  .lab-form .form-intro{ display:block; margin-bottom:.4rem; }
  .lab-form .form-intro h2{ font-size:1.55rem; margin-bottom:.7rem; }
  .lab-form .form-intro p{ color:var(--slate); font-size:.95rem; }
}

/* ---------- page hero (sub-pages) ---------- */
.page-hero{
  padding:calc(var(--section-pad) + 4.5rem) 0 var(--section-pad);
  position:relative;
  overflow:hidden;
}
.page-hero .eyebrow{ display:block; margin-bottom:1rem; }
/* more breathing room between the eyebrow and the hero title on small screens
   (sub-page titles carry an inline margin-top:1rem, which this larger
   margin-bottom collapses over) */
@media (max-width:720px){
  .page-hero .eyebrow{ margin-bottom:1.75rem; }
  .hero-copy .tag-row{ margin-bottom:1.75rem; }
}
.page-hero h1{ max-width:18ch; }
/* sub-service page titles: held to 70% width on larger screens, full width
   on phones and tablets so more words fit on each line */
.page-hero h1.page-hero-title--narrow{ max-width:70%; }
@media (max-width:880px){
  .page-hero h1.page-hero-title--narrow{ max-width:none; }
}
.page-hero .lead{ margin-top:1.4rem; }

/* full-viewport page hero with photo background (e.g. About) */
.page-hero--full{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:7rem;
  padding-bottom:4rem;
}
.page-hero--full .container{ width:100%; }
.page-hero--full h1{ max-width:none; }
.page-hero-bg{ position:absolute; inset:0; z-index:0; }
.page-hero-bg-img{
  position:absolute; inset:0; z-index:0;
  background:var(--hero-bg) center/cover fixed;
  filter:grayscale(1) contrast(1.15) brightness(.85);
}
.page-hero-bg::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(155deg, rgba(8,45,73,.92) 0%, rgba(16,60,92,.85) 45%, rgba(247,148,29,.35) 100%);
  mix-blend-mode:multiply;
  background-color:rgba(8,45,73,.55);
}
.page-hero-bg::before{
  content:'';
  position:absolute; inset:0; z-index:2;
  background:radial-gradient(120% 90% at 50% 0%, transparent 0%, rgba(8,45,73,.4) 60%, rgba(8,45,73,.85) 100%);
}

/* ---------- generic two-col ---------- */
.two-col{ display:grid; grid-template-columns:.9fr 1.1fr; gap:4rem; align-items:start; }
.two-col > *{ min-width:0; }
.two-col--form{ grid-template-columns:1.2fr .8fr; }
@media (max-width:880px){
  .two-col, .two-col--form{ grid-template-columns:1fr; gap:2.5rem; }
  /* contact page: contact details first, enquiry form below */
  .two-col--form .connect-panel{ order:-1; }
}

.section-head{ max-width:640px; margin-bottom:3.5rem; position:relative; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.heading-frame{ position:relative; }

/* ---------- home hero ---------- */
.hero-copy{ position:relative; }
.hero-ctas{ margin:1.8rem 0 0; }

/* two buttons side by side; on phones they shrink to share one row instead of stacking */
.btn-pair{ display:flex; gap:1rem; flex-wrap:wrap; }
@media (max-width:720px){
  .btn-pair{ flex-wrap:nowrap; gap:.6rem; }
  .btn-pair .btn{ flex:1 1 0; min-width:0; justify-content:center; padding:.75rem .7rem; font-size:.8rem; gap:.4rem; }
  .btn-pair .btn svg{ width:.85rem; height:.85rem; }
}

/* ---------- specialists (zone section 2) ---------- */
.specialists-clauses{ background:rgba(255,255,255,.07); border-left:2px solid var(--orange); padding:4rem 2.4rem; backdrop-filter:blur(8px); }

/* ---------- pillar sub-items ---------- */
.pillar .pillar-sub{ display:flex; flex-direction:column; gap:.5rem; margin-top:1.1rem; position:relative; }
.pillar .pillar-sub li{ font-size:.85rem; color:rgba(255,255,255,.55); padding-left:.9rem; position:relative; }
.pillar .pillar-sub li::before{ content:''; position:absolute; left:0; top:.5em; width:.4rem; height:.4rem; background:var(--orange); }