/* ============================================================
   Legallab — Design tokens & base
   ============================================================ */

:root{
  /* brand colour tokens */
  --navy-deep:   #082d49;
  --navy:        #103c5c;
  --navy-light:  #1d567d;
  --navy-haze:   #2c6a92;
  --orange:      #f7941d;
  --orange-deep: #d97600;
  --white:       #ffffff;
  --paper:       #f5f6f4;
  --ink:         #0b1f2e;
  --slate:       #51626f;
  --line-on-dark:  rgba(255,255,255,.14);
  --line-on-light: rgba(8,45,73,.12);

  /* type */
  --font: 'Montserrat', Arial, sans-serif;
  --fs-display: clamp(2.6rem, 5.4vw, 5.5rem);
  --fs-h2:      clamp(2rem, 3.6vw, 3.4rem);
  --fs-h3:      clamp(1.3rem, 1.9vw, 1.7rem);
  --fs-lead:    clamp(1.05rem, 1.3vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   .92rem;
  --fs-eyebrow: .8rem;

  /* layout */
  --container: 1320px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --section-pad: clamp(4.5rem, 9vw, 8rem);
  --ease: cubic-bezier(.16,.84,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.3;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0 0 20px 0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.01em; color:var(--navy-deep); line-height:1.1; }
p{ margin:0; }

:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--pad); position:relative; z-index:1; }

section{ position:relative; }
section[id]{ scroll-margin-top:6rem; }

.section-pad{ padding-top:var(--section-pad); padding-bottom:var(--section-pad); }

/* surfaces */
.surface-dark{ background:var(--navy-deep); color:var(--white); }
.surface-dark h1,.surface-dark h2,.surface-dark h3,.surface-dark h4{ color:var(--white); }
.surface-dark .lead, .surface-dark p{ color:rgba(255,255,255,.82); }
.surface-light{ background:var(--paper); color:var(--ink); }

/* eyebrow + corner-emblem heading tag */
.tag-row{
  display:flex; align-items:center; gap:.7rem;
  margin-bottom:1.1rem;
}
.eyebrow{
  font-size:var(--fs-eyebrow);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--orange);
}
.surface-light .eyebrow{ color:var(--navy); }

.corner-mark{
  position:absolute;
  top:-.3rem; right:0;
  width:1.8rem; height:1.8rem;
  background-image:url('../img/logos/corner-emblem.svg');
  background-size:contain;
  background-repeat:no-repeat;
  pointer-events:none;
}

/* Section headings: the mark floats in the block's top-right corner, so the
   eyebrow and heading wrap clear of it instead of running underneath it on
   narrow screens. Centred blocks get a matching invisible float on the left
   so their text stays centred. */
:not(h1) > .corner-mark{
  position:relative; float:right;
  top:-.3rem; right:auto;
  margin:0 0 .3rem .6rem;
}
.center:has(> .corner-mark)::before{
  content:''; float:left;
  width:1.8rem; height:1.8rem;
  margin:0 .6rem .3rem 0;
}

/* Hero titles: the mark sits inside the <h1> (last child) and main.js
   (initCornerMarks) positions it against the actual rendered first line —
   width:fit-content can't do this because it collapses back to the full
   container width as soon as the title wraps to multiple lines. position:
   relative here makes the h1 the positioning context JS measures against. */
.heading-frame h1,
.hero-copy h1{ position:relative; }

@media (max-width:720px){
  .corner-mark,
  .center:has(> .corner-mark)::before{ width:1.1rem; height:1.1rem; }
  /* room at the end of hero titles so a first line that fills the screen
     wraps before the mark instead of running into it */
  .heading-frame h1,
  .hero-copy h1{ padding-right:1.6rem; }
}

.lead{ font-size:var(--fs-lead); font-weight:300; line-height:1.4; color:var(--slate); max-width: 60ch; }
.surface-dark .lead{ font-weight:300; }

/* ============ buttons ============ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:.65rem;
  padding:.7rem 1.7rem;
  font-size:.92rem; font-weight:600; letter-spacing:.02em;
  border:1.5px solid transparent;
  border-radius:0;
  white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease);
}
.btn svg{ width:1rem; height:1rem; flex:none; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn:active{ transform:translateY(1px); }

.btn-primary{ background:var(--orange); color:var(--navy-deep); }
.btn-primary:hover{ background:var(--navy-deep); color:var(--white); }

/* for use on orange backgrounds, where btn-primary would blend in */
.btn-primary-inverse{ background:var(--navy-deep); color:var(--white); }
.btn-primary-inverse:hover{ background:var(--white); color:var(--navy-deep); }

.btn-ghost-dark{ border-color:rgba(255,255,255,.45); color:var(--white); }
.btn-ghost-dark:hover{ border-color:var(--orange); background:rgba(247,148,29,.1); }

.btn-ghost-light{ border-color:rgba(8,45,73,.35); color:var(--navy-deep); }
.btn-ghost-light:hover{ border-color:var(--navy); background:rgba(16,60,92,.06); }

.btn-line{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.88rem; font-weight:600; letter-spacing:.03em;
  color:var(--orange);
  padding-bottom:.3rem;
  border-bottom:1.5px solid currentColor;
}
.surface-light .btn-line{ color:var(--navy); }
.btn-line svg{ width:.85rem; height:.85rem; transition:transform .3s var(--ease); }
.btn-line:hover svg{ transform:translateX(4px); }

/* ============ pattern veil ============ */
.pattern-veil{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.pattern-veil::before{
  content:''; position:absolute; inset:-2px;
  background-image:url('../img/logos/pattern-tile-white.svg');
  background-size:46px 46px;
  opacity:.05;
}
.surface-light .pattern-veil::before{
  background-image:url('../img/logos/pattern-tile-navy.svg');
  opacity:.05;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem var(--pad);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), padding .4s var(--ease);
}
/* backdrop-filter lives on a pseudo-element (not the header itself) so the header
   never becomes a CSS containing block for its position:fixed mobile-nav descendant */
.site-header::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:rgba(8,45,73,0);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-header.is-scrolled{
  border-color:rgba(255,255,255,.08);
  padding:.8rem var(--pad);
}
.site-header.is-scrolled::before{
  background:rgba(8,45,73,.92);
  backdrop-filter:blur(10px);
}
.site-header .logo{ display:flex; align-items:center; height:3rem; }
.site-header .logo img{ height:100%; width:auto; }
@media (max-width:720px){
  .site-header .logo{ height:2.2rem; }
}

.main-nav{ display:flex; align-items:center; gap:2.6rem; }
.main-nav ul{ margin: 0; display:flex; align-items:center; gap:2.2rem; }
.main-nav a{
  font-size:.9rem; font-weight:600; color:var(--white);
}
.main-nav ul a{ position:relative; padding-top:.4rem; padding-right:.4rem; }
.main-nav ul a::before,
.main-nav ul a::after{
  content:''; position:absolute; background:var(--orange);
}
.main-nav ul a::before{ top:0; left:0; width:0; height:2px; transition:width .3s var(--ease); }
.main-nav ul a::after{ top:0; right:0; width:2px; height:0; transition:height .3s var(--ease); }
.main-nav ul a:hover::before{ width:100%; }
.main-nav ul a:hover::after{ height:100%; transition-delay:.3s; }
.main-nav ul a.is-active{ color:var(--orange); }

.main-nav li.has-dropdown{ position:relative; }
.main-nav .dropdown-toggle svg{ width:.6rem; height:.6rem; margin-left:.4rem; vertical-align:middle; transition:transform .3s var(--ease); }
.main-nav li.has-dropdown:hover .dropdown-toggle svg,
.main-nav li.has-dropdown:focus-within .dropdown-toggle svg{ transform:rotate(180deg); }

.main-nav .dropdown-menu{
  position:absolute; top:100%; left:50%;
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  min-width:300px;
  background:var(--navy-deep);
  border:1px solid rgba(255,255,255,.1);
  padding:.5rem;
  opacity:0; visibility:hidden;
  transform:translate(-50%, 4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index:50;
}
.main-nav li.has-dropdown:hover .dropdown-menu,
.main-nav li.has-dropdown:focus-within .dropdown-menu{
  opacity:1; visibility:visible; transform:translate(-50%, 0);
}
.main-nav .dropdown-menu a{
  display:block; padding:.75rem .9rem; font-size:.85rem; font-weight:500;
  color:rgba(255,255,255,.85); white-space:nowrap;
}
.main-nav .dropdown-menu a::before,
.main-nav .dropdown-menu a::after{ content:none; }
.main-nav .dropdown-menu a:hover{ background:rgba(255,255,255,.07); color:var(--orange); }
.main-nav .dropdown-menu a.is-active{ color:var(--orange); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:26px; background:none; border:none; padding:0;
}
.nav-toggle span{ height:2px; width:100%; background:var(--white); transition:transform .3s var(--ease), opacity .3s var(--ease); }

@media (max-width: 920px){
  .main-nav ul{
    position:fixed; inset:0; top:0;
    flex-direction:column; justify-content:center; align-items:center; gap:2rem;
    background:var(--navy-deep);
    transform:translateY(-100%);
    transition:transform .45s var(--ease);
    z-index:90;
  }
  .main-nav ul a{ font-size:1.3rem; }
  .main-nav.is-open ul{ transform:translateY(0); }
  .main-nav .nav-cta{ display:none; }

  .main-nav li.has-dropdown{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
  .main-nav .dropdown-toggle svg{ display:none; }
  .main-nav .dropdown-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    background:none; border:none; padding:0; min-width:0;
    display:flex; flex-direction:column; align-items:center; gap:1rem;
  }
  .main-nav .dropdown-menu a{ padding:0; font-size:1rem; color:rgba(255,255,255,.7); }
  .nav-toggle{ display:flex; position:relative; z-index:95; }
  .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   CONTACT RAIL
   ============================================================ */
.contact-rail{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:95; display:flex; flex-direction:column;
}
.contact-rail .rail-item{
  display:flex; align-items:center; justify-content:flex-start;
  position:relative;
  background:var(--navy-deep);
  border-bottom:1px solid rgba(255,255,255,.1);
  height:3rem;
  overflow:hidden;
  cursor:pointer;
}
.contact-rail .rail-item::before{
  content:''; position:absolute; inset:0;
  background:var(--orange); opacity:0;
  transition:opacity .3s var(--ease);
}
.contact-rail .rail-item:hover::before{ opacity:1; }
.contact-rail .rail-item .rail-label{
  position:relative; z-index:1;
  white-space:nowrap;
  font-size:.8rem; font-weight:600; color:var(--white);
  max-width:0; opacity:0;
  padding-left:0; padding-right:0;
  transition:max-width .7s var(--ease), padding .7s var(--ease), opacity .5s var(--ease) .35s;
}
.contact-rail:hover .rail-item .rail-label{
  max-width:14rem; opacity:1; padding-left:.85rem; padding-right:1rem;
}
.contact-rail .rail-item .rail-icon{
  width:3rem; height:3rem; flex:none; order:-1;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
  color:var(--white);
}
.contact-rail .rail-item .rail-icon svg{ width:1.1rem; height:1.1rem; }

/* phones: slightly smaller squares, and the labels open on a tap instead of
   on hover — main.js (initContactRail) toggles .is-open, so the first tap
   opens the bar and the second follows the link. Touch browsers fake :hover
   on tap, so hover is switched off here to keep that predictable. */
@media (max-width: 720px){
  .contact-rail .rail-item{ height:2.5rem; }
  .contact-rail .rail-item .rail-icon{ width:2.5rem; height:2.5rem; }
  .contact-rail .rail-item .rail-icon svg{ width:1rem; height:1rem; }
  .contact-rail:not(.is-open):hover .rail-item .rail-label{ max-width:0; opacity:0; padding-left:0; padding-right:0; }
  .contact-rail .rail-item:hover::before{ opacity:0; }
  .contact-rail.is-open .rail-item .rail-label{ max-width:14rem; opacity:1; padding-left:.75rem; padding-right:.9rem; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--navy-deep); color:var(--white); }
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem;
  padding:5rem var(--pad) 3.5rem;
  max-width:var(--container); margin:0 auto;
}
.footer-brand img{ height:8rem; margin-bottom:1.2rem; }
.footer-brand p{ color:rgba(255,255,255,.65); font-size:.92rem; max-width:30ch; }
.footer-col h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.14em; color:var(--orange); margin-bottom:1.2rem; font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:.75rem; }
.footer-col a, .footer-col li span{ font-size:.92rem; color:rgba(255,255,255,.75); transition:color .25s; }
.footer-col a:hover{ color:var(--orange); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:1.5rem var(--pad);
  display:flex; justify-content:space-between; align-items:center;
  max-width:var(--container); margin:0 auto;
  font-size:.82rem; color:rgba(255,255,255,.55);
  flex-wrap:wrap; gap:1rem;
}
.footer-bottom a{ transition:color .25s; }
.footer-bottom a:hover{ color:var(--orange); }

@media (max-width: 880px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:2.5rem; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns:1fr; }
}

/* ============================================================
   WORKFORCE HERO — hero/specialists/services intro sequence.
   The photo mosaic behind these three panels holds still while the panels
   scroll over it: the same fixed-photo treatment the sub-page heroes get
   from background-attachment:fixed, which can't be used here because a
   mosaic of separate <img> tiles has no single background to fix. A sticky
   mosaic on a track that outruns the block (below) gives the same result.
   Tiles are laid in brick courses — every second column is lifted half a
   tile — so no tile edge lines up with the column beside it.
   ============================================================ */
/* clip, not hidden: cropping the mosaic to this block without turning the block
   into a scroll container is what lets the sticky mosaic inside keep measuring
   itself against the viewport. Browsers without overflow:clip fall back to
   hidden — there the mosaic scrolls with the block instead of holding still. */
.workforce-hero{ position:relative; background:var(--navy-deep); overflow:hidden; overflow:clip; }

.zone-panel{
  position:relative; z-index:3;
  width:100%; padding:7rem 0 4rem;
  color:var(--white);
}
.zone-panel--hero{ min-height:100vh; display:flex; align-items:center; }
.zone-panel--hero .container{ width:100%; }
/* the last panel runs deeper than the others so the mosaic carries on below it
   rather than ending on the button */
.workforce-hero .zone-panel:last-child{ padding-bottom:clamp(6rem, 9vw, 10rem); }
.zone-panel h1,.zone-panel h2,.zone-panel h3,.zone-panel h4{ color:var(--white); }
.zone-panel .lead,.zone-panel p{ color:rgba(255,255,255,.82); }
.zone-panel .eyebrow{ color:var(--orange); }

/* the mosaic's sticky track. It runs one full screen past the end of the block
   so the mosaic never reaches the end of its travel while any of the block is
   still on screen — the block's own clip takes the mosaic away instead, so the
   photos hold perfectly still the whole way past, the same as the
   background-attachment:fixed heroes on the sub-pages. */
.workforce-backdrop{
  position:absolute; top:0; left:0; right:0;
  height:calc(100% + 100vh);
  z-index:0;
}
.workforce-grid{
  --wf-gap:2px;
  --wf-tile-h:calc(100vh / 3);
  position:sticky; top:0;
  height:100vh;
  overflow:hidden;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:var(--wf-gap);
  background:var(--navy-deep);
}
.wf-col{
  display:flex;
  flex-direction:column;
  gap:var(--wf-gap);
}
/* the brick offset — main.js counts a column's tiles from this half-tile lift,
   so a lifted column still reaches the bottom of the screen */
.wf-col--offset{ transform:translateY(calc((var(--wf-tile-h) + var(--wf-gap)) / -2)); }
.wf-tile{
  position:relative;
  flex:none;
  height:var(--wf-tile-h);
  overflow:hidden;
}
.wf-tile img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(.85);
}
.workforce-grid::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);
}
.workforce-grid::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%);
}

@media (max-width:720px){
  .workforce-grid{
    grid-template-columns:repeat(3, 1fr);
    --wf-tile-h:calc(100vh / 4);
  }
}

/* ============================================================
   REVEAL (animated by GSAP; CSS just guards no-JS fallback)
   ============================================================ */
.reveal{ opacity:1; }
html.js .reveal{ opacity:0; }
html.js .reveal.is-ready{ }