/* ============================================================
   GRG — For Projects Development & Management
   Design system: charcoal + gold, arch-driven signature
   ============================================================ */

:root {
  /* Palette — dark blue + gold (client brand, 2026 refresh) */
  --gold:      #af884a;          /* brand gold — fills */
  --gold-lo:   #8a6a38;
  --gold-hi:   #c9a45f;          /* lighter gold — hover / focus */
  --sand:      #E6D5B0;
  --ink:       #04374d;          /* page background — client blue, deepened */
  --charcoal:  #032c3e;          /* recessed bands (stats/why/footer) */
  --surface:   #08445e;          /* cards — lift above the page */
  --surface-2: #0b4e6c;          /* card hover */
  --line:      #16536f;          /* hairline borders */
  --steel:     #aebfca;          /* muted text (AA on cards) */
  --concrete:  #d6e0e7;          /* body copy */
  --white:     #FFFFFF;          /* headings */

  /* Type */
  --display: "Montserrat", system-ui, sans-serif;
  --body:    "Inter", system-ui, sans-serif;
  --mono:    "Space Grotesk", ui-monospace, monospace;

  /* Rhythm */
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(5rem, 11vw, 10rem);
  --radius: 14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* role tokens that differ per theme */
  --gold-ink:  #d8b877;          /* gold as text/icon — AA on blue */
  --on-gold:   #06283a;          /* text on a gold fill — fixed in both themes */
  --scrim:     4,29,42;          /* rgb for photo overlays — deep blue */
  --chip:      #F4F4F2;          /* logo tile background */
  --shadow:    0 12px 30px rgba(2,18,28,.5);
  --nav-blur:  color-mix(in srgb, var(--ink) 82%, transparent);
  color-scheme: dark;
}

/* ------------------------------------------------------------
   LIGHT THEME
   Role-based remap: --white is the heading colour, --concrete is
   body copy, so remapping those flips the page. Gold darkens to
   --gold-ink so small text clears WCAG AA on white.
   ------------------------------------------------------------ */
[data-theme="light"] {
  --ink:       #FFFFFF;
  --charcoal:  #EEF3F6;   /* light blue-grey band */
  --surface:   #FFFFFF;
  --surface-2: #E8EFF3;
  --line:      #D8E2E8;
  --steel:     #4A5A64;   /* AA on white + charcoal */
  --concrete:  #2A3A44;   /* body copy */
  --white:     #10222C;   /* headings — deep blue-black */
  --gold-lo:   #8A6A38;
  --gold-ink:  #7C6029;   /* 5.9:1 on white */
  --scrim:     4,29,42;
  --chip:      #FFFFFF;
  --shadow:    0 10px 30px rgba(16,34,44,.10);
  --nav-blur:  color-mix(in srgb, #FFFFFF 85%, transparent);
  color-scheme: light;
}

/* the hero and page-hero sit on photography/video — they stay dark
   blue in both themes so the imagery keeps its cinematic contrast */
.hero, .page-hero {
  --white: #FFFFFF;
  --concrete: #d6e0e7;
  --steel: #aebfca;
  --gold-ink: #d8b877;
  --line: #16536f;
  --surface: #08445e;
  color-scheme: dark;
  background: #04374d;   /* holds while the video/photo loads */
}

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body {
  font-family: var(--body);
  background: var(--ink);
  color: var(--concrete);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--gold); color: var(--on-gold); }

/* ---------- layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3.5rem,7vw,6rem); }

/* eyebrow / section marker with arch tick */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--mono);
  font-size: .74rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 500;
}
.eyebrow::before {
  content:""; width: 26px; height: 13px;
  border: 1.5px solid var(--gold-ink); border-bottom: 0;
  border-radius: 13px 13px 0 0; opacity: .9;
}

/* headings */
h1,h2,h3,h4 { font-family: var(--display); color: var(--white); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.h-xl  { font-size: clamp(2.6rem, 7vw, 5.5rem); font-weight: 800; }
.h-lg  { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.h-md  { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.lead  { font-size: clamp(1.05rem,1.5vw,1.25rem); color: var(--concrete); max-width: 60ch; }
.muted { color: var(--steel); }
.gold  { color: var(--gold-ink); }

.num { font-family: var(--mono); font-feature-settings: "tnum"; }

/* section header block */
.sec-head { display:grid; gap: 1.1rem; max-width: 62ch; margin-bottom: clamp(2.5rem,5vw,4rem); }
.sec-head.center { margin-inline:auto; text-align:center; justify-items:center; }

/* ---------- buttons ---------- */
.btn {
  --pad: .95rem 1.6rem;
  display: inline-flex; align-items: center; gap: .65rem;
  padding: var(--pad);
  font-family: var(--display); font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  border-radius: 100px; position: relative; overflow: hidden;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  will-change: transform;
}
.btn svg { width: 17px; height: 17px; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { background: var(--gold-hi); transform: translateY(-2px); }
.btn--ghost { border: 1px solid var(--line); color: var(--white); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-hi); transform: translateY(-2px); }
.btn--lg { --pad: 1.15rem 2.1rem; font-size: 1rem; }

/* text link with arch underline */
.tlink { display:inline-flex; align-items:center; gap:.5rem; color: var(--gold-ink); font-family: var(--display); font-weight:600; font-size:.9rem; }
.tlink svg { width:16px;height:16px; transition: transform .4s var(--ease); }
.tlink:hover svg { transform: translateX(4px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: var(--nav-blur);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--line);
  padding-block: .8rem;
}
/* Before scroll the nav floats over the dark hero, so it always uses
   light-on-dark tokens regardless of theme. */
.nav:not(.scrolled) {
  --concrete: #C9CCD1;
  --white: #FFFFFF;
  --line: #2A2A2E;
}
/* ...unless the mobile menu is open, which paints a themed panel behind it */
[data-theme="light"] body.menu-open .nav:not(.scrolled) {
  --concrete: #3C3F45;
  --white: #111111;
  --line: #E3DFD7;
}
.brand { display: flex; align-items: center; }
.brand__logo { height: 78px; width: auto; transition: height .5s var(--ease); }
.brand__logo--footer { height: 96px; }
.nav.scrolled .brand__logo { height: 62px; }

/* Logo variant follows the background, not the theme: the white lockup on
   dark surfaces, the charcoal lockup once the surface turns light. */
.brand__logo--on-light { display: none; }
[data-theme="light"] .nav.scrolled .brand__logo--on-dark,
[data-theme="light"] .footer .brand__logo--on-dark,
[data-theme="light"] body.menu-open .nav .brand__logo--on-dark { display: none; }
[data-theme="light"] .nav.scrolled .brand__logo--on-light,
[data-theme="light"] .footer .brand__logo--on-light,
[data-theme="light"] body.menu-open .nav .brand__logo--on-light { display: block; }

/* ---------- theme toggle ---------- */
.theme-toggle {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--concrete);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.theme-toggle:hover { color: var(--gold-hi); border-color: var(--gold); }
.theme-toggle .ti { width: 18px; height: 18px; grid-area: 1/1; transition: opacity .35s var(--ease), transform .45s var(--ease); }
/* dark theme -> offer the sun */
.theme-toggle .ti--moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
.theme-toggle .ti--sun  { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-toggle .ti--sun  { opacity: 0; transform: rotate(40deg) scale(.6); }
[data-theme="light"] .theme-toggle .ti--moon { opacity: 1; transform: rotate(0) scale(1); }
.nav-links { display: flex; align-items: center; gap: clamp(1rem,2vw,2rem); }
.nav-links a { font-size: .9rem; font-weight: 500; color: var(--concrete); position: relative; padding: .3rem 0; transition: color .3s; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--gold); transition:width .35s var(--ease); }
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width:100%; }
.nav-links .btn { display:none; } /* duplicate CTA — only shown in mobile menu */
.nav-links .btn::after { display:none; }
/* .nav-menu is z-index:99 and covers the full viewport once open (mobile),
   so nav-cta must out-rank it or its own toggle/theme buttons become
   invisible and unclickable behind the panel. */
.nav-cta { display:flex; align-items:center; gap:1rem; position:relative; z-index:101; }
.nav-toggle { display:none; width:44px;height:44px; align-items:center; justify-content:center; }
.nav-toggle span { position:relative; width:22px; height:1.5px; background:var(--white); transition:.3s; }
.nav-toggle span::before,.nav-toggle span::after { content:""; position:absolute; left:0; width:22px; height:1.5px; background:var(--white); transition:.3s; }
.nav-toggle span::before { top:-6px; }
.nav-toggle span::after { top:6px; }
body.menu-open .nav-toggle span { background:transparent; }
body.menu-open .nav-toggle span::before { top:0; transform:rotate(45deg); }
body.menu-open .nav-toggle span::after { top:0; transform:rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position:absolute; inset:0; z-index:0; }
.hero__media video, .hero__media img { width:100%; height:100%; object-fit: cover; }
.hero__media::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,22,31,.36) 0%, rgba(3,22,31,.10) 30%, rgba(4,55,77,.30) 62%, rgba(4,55,77,.92) 100%),
    linear-gradient(90deg, rgba(3,22,31,.52) 0%, rgba(3,22,31,.06) 55%, transparent 100%);
}

.hero__inner { position: relative; z-index: 2; width:100%; padding-bottom: clamp(3.5rem, 8vh, 7rem); }
.hero__eyebrow { margin-bottom: 1.6rem; }
.hero h1 { max-width: 16ch; margin-bottom: 1.6rem; }
.hero h1 .l2 { color: var(--gold-ink); display:block; }
.hero__sub { max-width: 46ch; font-size: clamp(1.05rem,1.5vw,1.28rem); color: var(--concrete); margin-bottom: 2.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__scroll { position:absolute; z-index:2; right:var(--gutter); bottom:clamp(3.5rem,8vh,7rem); display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.hero__scroll span { writing-mode: vertical-rl; font-family:var(--mono); font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--steel); }
.hero__scroll i { width:1px; height:56px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden; }
.hero__scroll i::after { content:""; position:absolute; top:-56px; left:0; width:1px; height:56px; background:var(--gold-hi); animation:scrollDot 2.4s var(--ease) infinite; }
@keyframes scrollDot { to { top:100%; } }

/* reveal words */
.reveal-line { overflow: hidden; }
.reveal-line > * { display:block; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  position: relative; overflow: hidden;
  padding-top: clamp(9rem, 16vh, 13rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--line);
}
.page-hero__media { position:absolute; inset:0; z-index:0; }
.page-hero__media img { width:100%; height:100%; object-fit:cover; }
.page-hero__media::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,22,31,.84) 0%, rgba(4,55,77,.72) 55%, #04374d 100%),
    linear-gradient(90deg, rgba(3,22,31,.9) 0%, rgba(3,22,31,.4) 70%, transparent 100%);
}
.page-hero__arch { position:absolute; z-index:1; right:4%; top:50%; transform:translateY(-46%); width:min(46vh,420px); aspect-ratio:1/1.12; opacity:.2; pointer-events:none; }
.page-hero__arch svg { width:100%; height:100%; }
.page-hero__arch path { fill:none; stroke:var(--gold); stroke-width:1.3; }
.page-hero__inner { position:relative; z-index:2; }
.page-hero h1 { font-size:clamp(2.4rem,6vw,4.4rem); font-weight:800; max-width:18ch; margin-top:1.2rem; }
.page-hero p { margin-top:1.4rem; max-width:56ch; font-size:clamp(1rem,1.4vw,1.18rem); color:var(--concrete); }

/* breadcrumb */
.crumb { display:flex; align-items:center; gap:.55rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); }
.crumb a:hover { color:var(--gold-ink); }
.crumb span { color:var(--gold-ink); }

/* active nav link */
.nav-links a[aria-current="page"] { color:var(--white); }
.nav-links a[aria-current="page"]::after { width:100%; }

/* ============================================================
   STATS
   ============================================================ */
.stats { border-block: 1px solid var(--line); background: var(--charcoal); }
.stats__grid { display:grid; grid-template-columns: repeat(6,1fr); }
.stats--4 .stats__grid { grid-template-columns: repeat(4,1fr); }
@media (max-width:820px){ .stats--4 .stats__grid { grid-template-columns: repeat(2,1fr); } .stats--4 .stat:nth-child(2){border-right:0} .stats--4 .stat:nth-child(n+3){border-top:1px solid var(--line)} }
.stat { padding: clamp(2rem,4vw,3.2rem) 1.4rem; text-align:center; position:relative; border-right:1px solid var(--line); }
.stat:last-child { border-right:0; }
.stat__icon { width:26px;height:26px; margin:0 auto .9rem; color:var(--gold-ink); opacity:.85; }
.stat__num { font-family:var(--mono); font-weight:600; font-size:clamp(2.1rem,4vw,3.1rem); color:var(--white); line-height:1; letter-spacing:-.02em; }
.stat__num .suf { color:var(--gold-ink); }
.stat__label { margin-top:.7rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); }

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid { display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.about__media { position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio: 4/3.4; }
.about__media img { width:100%;height:100%;object-fit:cover; }
.about__media::after { content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 1px rgba(184,147,78,.28); border-radius:var(--radius-lg); }
.about__badge { position:absolute; left:0; bottom:0; background:var(--gold); color:var(--on-gold); padding:1.1rem 1.4rem; border-radius:0 var(--radius) 0 var(--radius-lg); }
.about__badge b { font-family:var(--mono); font-size:1.9rem; display:block; line-height:1; }
.about__badge span { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.about__body p { margin-top:1.3rem; }
.values { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 1.6rem; margin-top:2rem; }
.value { display:flex; align-items:center; gap:.75rem; font-family:var(--display); font-weight:600; color:var(--white); font-size:.98rem; }
.value svg { width:20px;height:20px; color:var(--gold-ink); flex:none; }
.about__body .btn { margin-top:2.2rem; }

/* ============================================================
   SERVICES
   ============================================================ */
.serv__grid { display:grid; grid-template-columns:repeat(3,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:visible; }
.serv {
  background: var(--surface); padding: clamp(1.8rem,3vw,2.6rem);
  min-height: 320px; display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  transition: background .5s var(--ease), transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-radius .45s var(--ease);
}
.serv::before { content:""; position:absolute; inset:0; background: radial-gradient(120% 80% at 100% 0%, rgba(175,136,74,.20), transparent 60%); opacity:0; transition:opacity .5s var(--ease); }
/* the whole card pops out and enlarges on hover (client request) */
.serv:hover {
  background: var(--surface-2);
  transform: translateY(-8px) scale(1.05);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  z-index: 3;
}
.serv:hover::before { opacity:1; }
@media (prefers-reduced-motion: reduce){ .serv:hover { transform:none; } }
.serv__idx { font-family:var(--mono); font-size:.8rem; color:var(--gold-ink); letter-spacing:.1em; }
.serv__icon {
  width:44px;height:44px; margin:1.4rem 0 auto; color:var(--gold-ink);
  transform-origin:left center;
  transition: transform .5s var(--ease-out), color .4s var(--ease);
}
.serv__icon svg { width:100%;height:100%; }
/* icons pop on hover */
.serv:hover .serv__icon { transform: translateY(-8px) scale(1.18); color: var(--gold-hi); }
@media (prefers-reduced-motion: reduce){ .serv:hover .serv__icon { transform:none; } }
.serv h3 { font-size:1.35rem; margin-top:1.6rem; }
.serv p { margin-top:.7rem; font-size:.92rem; color:var(--steel); }
.serv__tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem; }
.serv__tags span { font-size:.7rem; color:var(--concrete); border:1px solid var(--line); border-radius:100px; padding:.25rem .7rem; }
.serv__go { position:absolute; top:clamp(1.8rem,3vw,2.6rem); right:clamp(1.8rem,3vw,2.6rem); width:34px;height:34px; border-radius:50%; border:1px solid var(--line); display:flex;align-items:center;justify-content:center; color:var(--gold-ink); transition:.4s var(--ease); }
.serv:hover .serv__go { background:var(--gold); color:var(--on-gold); border-color:var(--gold); transform:rotate(-45deg); }
.serv__go svg { width:15px;height:15px; }

/* ============================================================
   WHY / feature strip
   ============================================================ */
.why { background: var(--charcoal); }
.why__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); }
.why__item { padding-top:1.6rem; border-top:1px solid var(--line); }
.why__item .n { font-family:var(--mono); color:var(--gold-ink); font-size:.8rem; letter-spacing:.1em; }
.why__item h3 { font-size:1.2rem; margin:.8rem 0 .5rem; }
.why__item p { font-size:.9rem; color:var(--steel); }

/* ============================================================
   PROJECTS
   ============================================================ */
.proj__head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
/* horizontal motion rail for the home projects summary */
.proj__rail { display:flex; gap:1rem; overflow-x:auto; padding-bottom:1.4rem; margin-top:clamp(2.5rem,4vw,3.5rem);
  scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--gold-ink) var(--line); cursor:grab; }
.proj__rail::-webkit-scrollbar { height:5px; }
.proj__rail::-webkit-scrollbar-track { background:var(--line); border-radius:10px; }
.proj__rail::-webkit-scrollbar-thumb { background:var(--gold); border-radius:10px; }
.proj__rail .pcard { flex:0 0 min(82vw,360px); scroll-snap-align:start; min-height:400px; }
.proj__grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr; grid-auto-rows: 1fr; gap:1rem; margin-top:clamp(2.5rem,4vw,3.5rem); }
/* fixed dark card — no photo behind it any more, so colors are hardcoded
   rather than theme-swapped, matching the .hero/.logos "always dark" bands */
.pcard { position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:340px;
  display:flex; align-items:flex-end; isolation:isolate;
  background:#032c3e; border:1px solid #16536f;
  transition:border-color .4s var(--ease), transform .4s var(--ease); }
.pcard:hover { border-color:var(--gold); transform:translateY(-4px); }
.pcard--tall { grid-row: span 2; }
.pcard__body { padding: clamp(1.4rem,2.4vw,2rem); width:100%; }
.pcard__cat { font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#d8b877; }
.pcard h3 { font-size:clamp(1.3rem,2vw,1.7rem); margin-top:.5rem; color:#FFFFFF; }
.pcard p { font-size:.86rem; color:#aebfca; margin-top:.5rem; max-width:38ch; opacity:0; transform:translateY(8px); transition:.5s var(--ease); }
.pcard:hover p { opacity:1; transform:none; }
/* brand logo is the primary identifier on each card; a white chip keeps
   it legible against the dark card background */
.pcard__logo {
  position:absolute; top:clamp(1.2rem,2.2vw,1.7rem); left:clamp(1.2rem,2.2vw,1.7rem);
  height:52px; padding:.7rem 1.1rem; background:#FFFFFF; border-radius:12px;
  box-shadow:0 8px 22px rgba(2,18,28,.28); display:flex; align-items:center;
}
.pcard__logo img { height:100%; width:auto; max-width:118px; object-fit:contain; }

/* ============================================================
   GROUP / brands
   ============================================================ */
.group { background:var(--charcoal); }
.group__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
/* logos-only cards: a white chip keeps every full-colour brand mark
   legible regardless of theme, so the grid reads as one clean set */
.gcard { background:#FFFFFF; padding:clamp(1.8rem,3vw,2.6rem); min-height:180px; display:flex; align-items:center; justify-content:center; transition:background .4s var(--ease), transform .4s var(--ease); }
.gcard:hover { transform:scale(1.03); }
.gcard__logo { height:84px; display:flex; align-items:center; justify-content:center; }
.gcard__logo img { max-height:84px; max-width:100%; width:auto; object-fit:contain; }

/* ============================================================
   INDUSTRIES
   ============================================================ */
.ind__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.ind { background:var(--surface); padding:1.8rem 1.4rem; display:flex; flex-direction:column; gap:1rem; transition:background .4s, color .4s; }
.ind:hover { background:var(--gold); --white:var(--on-gold); --gold-ink:var(--on-gold); color:var(--on-gold); }
.ind svg { width:30px;height:30px; color:var(--gold-ink); transition:color .4s; }
.ind:hover svg, .ind:hover span { color:var(--ink); }
.ind span { font-family:var(--display); font-weight:600; color:var(--white); font-size:.98rem; transition:color .4s; }

/* ============================================================
   PROCESS
   ============================================================ */
.process { background:var(--surface); }
.proc__track { display:grid; grid-template-columns:repeat(7,1fr); gap:1rem; margin-top:clamp(2.5rem,4vw,3.5rem); position:relative; }
.proc__track::before { content:""; position:absolute; top:22px; left:0; right:0; height:1px; background:var(--line); z-index:0; }
.proc__line { position:absolute; top:22px; left:0; height:1px; background:var(--gold); z-index:1; width:0; }
.pstep { position:relative; z-index:2; }
.pstep .dot { width:44px;height:44px; border-radius:50%; background:var(--surface); border:1px solid var(--line); display:flex;align-items:center;justify-content:center; font-family:var(--mono); font-size:.85rem; color:var(--gold-ink); margin-bottom:1.3rem; transition:.4s; }
.pstep.on .dot { background:var(--gold); color:var(--on-gold); border-color:var(--gold); }
.pstep h4 { font-size:1rem; }
.pstep p { font-size:.82rem; color:var(--steel); margin-top:.4rem; }

/* ============================================================
   TIMELINE (horizontal scroll)
   ============================================================ */
.tl__head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2rem,4vw,3rem); }
.tl__rail { display:flex; gap:1.5rem; overflow-x:auto; padding-bottom:1.5rem; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--gold-ink) var(--line); }
.tl__rail::-webkit-scrollbar { height:5px; }
.tl__rail::-webkit-scrollbar-track { background:var(--line); border-radius:10px; }
.tl__rail::-webkit-scrollbar-thumb { background:var(--gold); border-radius:10px; }
.tcard { flex:0 0 min(80vw,440px); scroll-snap-align:start; }
.tcard__img { border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/2; border:1px solid var(--line); position:relative; }
.tcard__img img { width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease); }
.tcard:hover .tcard__img img { transform:scale(1.05); }
.tcard__year { position:absolute; top:1rem; left:1rem; background:color-mix(in srgb,#041d2a 72%,transparent); backdrop-filter:blur(8px); border:1px solid rgba(175,136,74,.5); color:#d8b877; font-family:var(--mono); font-size:.82rem; padding:.35rem .8rem; border-radius:100px; }
.tcard h4 { font-size:1.15rem; margin:1.2rem 0 .5rem; }
.tcard p { font-size:.88rem; color:var(--steel); }

/* ============================================================
   LEADERSHIP
   ============================================================ */
.lead-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.6rem); }
.person { }
.person__img { position:relative; border-radius:var(--radius-lg) var(--radius-lg) 120px 120px; overflow:hidden; aspect-ratio:4/4.4; border:1px solid var(--line); background:var(--surface); }
.person__img img { width:100%;height:100%;object-fit:cover; object-position:top center; filter:grayscale(.15) contrast(1.02); transition:filter .6s, transform .8s var(--ease); }
.person:hover .person__img img { filter:none; transform:scale(1.03); }
.person__img::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(var(--scrim),.6),transparent 45%); }
.person__name { margin-top:1.2rem; font-family:var(--display); font-weight:700; color:var(--white); font-size:1.15rem; }
.person__role { color:var(--gold-ink); font-size:.82rem; font-family:var(--mono); letter-spacing:.04em; margin-top:.25rem; }
.person__bio { color:var(--steel); font-size:.88rem; margin-top:.7rem; }

/* ============================================================
   CHAIRMAN quote
   ============================================================ */
.quote { background:var(--charcoal); }
.quote__inner { display:grid; grid-template-columns: .9fr 1.3fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.quote__portrait { border-radius:var(--radius-lg) var(--radius-lg) 140px 140px; overflow:hidden; aspect-ratio:4/4.6; border:1px solid var(--line); position:relative; }
.quote__portrait img { width:100%;height:100%;object-fit:cover; object-position:top; }
.quote blockquote { font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,2.6vw,2.05rem); line-height:1.35; color:var(--white); letter-spacing:-.01em; }
.quote blockquote .mk { color:var(--gold-ink); }
.quote__by { margin-top:1.8rem; }
.quote__by b { color:var(--white); font-family:var(--display); font-size:1.05rem; display:block; }
.quote__by span { color:var(--gold-ink); font-family:var(--mono); font-size:.82rem; }

/* ============================================================
   OWNERS grid (Chairman / CEO / Partner) — three equal cards.
   All portraits share the leadership arch-crop treatment.
   ============================================================ */
.owners { background:var(--charcoal); }
.owners-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; }

.ocard {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; height:100%;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.ocard:hover { border-color:var(--gold); transform:translateY(-4px); }
.ocard__img { position:relative; overflow:hidden; background:var(--charcoal);
  border-radius:var(--radius-lg) var(--radius-lg) 90px 90px; aspect-ratio:4/3.6; }
.ocard__img img { width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:grayscale(.2) contrast(1.02); transition:filter .6s, transform .8s var(--ease); }
.ocard:hover .ocard__img img { filter:none; transform:scale(1.04); }
.ocard__t { padding:clamp(1.1rem,2vw,1.5rem); display:flex; flex-direction:column; gap:.25rem; }
.ocard__t b { color:var(--white); font-family:var(--display); font-size:1.05rem; line-height:1.15; }
.ocard__t span { color:var(--gold-ink); font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; }
.ocard__t p { color:var(--steel); font-size:.86rem; margin-top:.5rem; }

/* ============================================================
   CHAIRMAN'S STATEMENT — standalone section, photo + quote.
   ============================================================ */
.statement { background:var(--surface); overflow:hidden; }
.statement__grid {
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center;
}
.statement__img { position:relative; overflow:hidden; border-radius:var(--radius-lg); background:var(--charcoal); aspect-ratio:2/3; }
.statement__img img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.statement__body { position:relative; }
.statement__arch { position:absolute; right:-10%; bottom:-14%; width:min(55%,300px); opacity:.1; pointer-events:none; }
.statement__arch svg { width:100%; height:100%; }
.statement__arch path { fill:none; stroke:var(--gold); stroke-width:2; }
.statement blockquote { position:relative; z-index:1; margin-top:1.2rem; font-family:var(--display); font-weight:500;
  font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.36; color:var(--white); letter-spacing:-.01em; }
.statement blockquote .mk { color:var(--gold-ink); }
.statement__by { position:relative; z-index:1; margin-top:1.8rem; }
.statement__by b { display:block; color:var(--white); font-family:var(--display); font-size:1.05rem; }
.statement__by span { color:var(--gold-ink); font-family:var(--mono); font-size:.82rem; }

/* ============================================================
   ISO CERTIFICATIONS
   ============================================================ */
.iso { background:var(--charcoal); }
.iso__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,3vw,2.5rem); max-width:760px; margin-inline:auto; }
.iso__card {
  display:block; background:#FFFFFF; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.iso__card:hover { transform:translateY(-6px); }
.iso__card img { width:100%; height:auto; display:block; aspect-ratio:1000/1379; object-fit:cover; object-position:top; }
/* the card itself is always white (a certificate on paper), so its
   label text is fixed dark too — it must not flip with the theme */
.iso__label { padding:1.1rem 1.3rem; border-top:1px solid #E3E7EA; background:#FFFFFF; }
.iso__label b { display:block; color:var(--on-gold); font-family:var(--display); font-size:1rem; }
.iso__label span { color:#7C6029; font-family:var(--mono); font-size:.78rem; letter-spacing:.03em; }

/* ============================================================
   MARQUEE logos
   ============================================================ */
/* The supplied partner/client marks are white-silhouette exports, so these
   rows stay a dark band in both themes — it is the background they are cut
   for. On a light tile they were invisible. */
.logos {
  background:#022733;
  border-block:1px solid #0f4863;
  --steel:#9fb6c2;
}
.logos__lbl { text-align:center; font-family:var(--mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--steel); margin-bottom:2.4rem; }
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track { display:flex; gap:clamp(.25rem,.8vw,.5rem); align-items:center; width:max-content; animation:scrollX 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
.marquee--rev .marquee__track { animation-direction:reverse; animation-duration:56s; }
@keyframes scrollX { to { transform:translateX(-50%); } }
.marquee img {
  height:140px; width:220px; object-fit:contain; flex:none;
  padding:6px 4px; background:transparent;
  filter:grayscale(1); opacity:.9;
  transition:filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.marquee img:hover { filter:none; opacity:1; transform:translateY(-5px) scale(1.04); }
@media (max-width:620px){ .marquee img { height:120px; width:190px; } }
.logos + .logos { border-top:0; }

/* ============================================================
   NEWS
   ============================================================ */
.news__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.ncard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:border-color .4s, transform .4s var(--ease); }
.ncard:hover { border-color:var(--gold); transform:translateY(-4px); }
.ncard__media { aspect-ratio:16/9; overflow:hidden; background:var(--charcoal); position:relative; }
.ncard__media video, .ncard__media img { width:100%;height:100%;object-fit:cover; }
.ncard__play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.ncard__play i { width:52px;height:52px; border-radius:50%; background:color-mix(in srgb,#041d2a 55%,transparent); border:1px solid rgba(255,255,255,.35); display:flex;align-items:center;justify-content:center; backdrop-filter:blur(6px); }
.ncard__play svg { width:16px;height:16px;color:var(--white); margin-left:2px; }
.ncard__body { padding:1.6rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.ncard__tag { font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); }
.ncard h3 { font-size:1.08rem; line-height:1.3; }
.ncard__ar { font-size:.86rem; color:var(--steel); line-height:1.6; }
.ncard time { color:var(--steel); font-size:.8rem; margin-top:auto; font-family:var(--mono); letter-spacing:.03em; }
.news__grid--4 { grid-template-columns:repeat(4,1fr); }

/* press coverage — text cards linking to the real articles */
.press__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:clamp(2rem,4vw,3rem); }
.pnews {
  display:flex; flex-direction:column; gap:.7rem; padding:clamp(1.3rem,2vw,1.7rem);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  min-height:190px; transition:border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.pnews:hover { border-color:var(--gold); transform:translateY(-4px); background:var(--surface-2); }
.pnews__tag { font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); }
.pnews h3 { font-size:1rem; line-height:1.32; color:var(--white); }
.pnews__ar { font-size:.86rem; color:var(--steel); line-height:1.6; }
.pnews__src { margin-top:auto; display:inline-flex; align-items:center; gap:.4rem; color:var(--concrete); font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; }
.pnews__src::after { content:"↗"; color:var(--gold-ink); font-size:.9rem; }

/* ============================================================
   CTA / contact
   ============================================================ */
.cta { position:relative; overflow:hidden; }
.cta__arch { position:absolute; right:-8%; top:50%; transform:translateY(-50%); width:min(60vh,620px); aspect-ratio:1/1.1; opacity:.14; pointer-events:none; }
.cta__arch svg { width:100%;height:100%; }
.cta__arch path { fill:none; stroke:var(--gold); stroke-width:1.2; }
.cta__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; position:relative; z-index:1; }
.cta h2 { margin-bottom:1.4rem; }
.cta .lead { margin-bottom:2.5rem; }
.contact-item { display:flex; gap:1rem; padding:1.3rem 0; border-top:1px solid var(--line); align-items:center; }
.contact-item:last-child { border-bottom:1px solid var(--line); }
.contact-item svg { width:22px;height:22px; color:var(--gold-ink); flex:none; }
a.contact-item { transition:background .3s var(--ease), padding-left .3s var(--ease); border-radius:8px; }
a.contact-item:hover { background:var(--surface); padding-left:.5rem; }

.map__frame { aspect-ratio:16/7; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); }
@media (max-width:760px){ .map__frame { aspect-ratio:4/5; } }
.contact-item b { display:block; color:var(--white); font-family:var(--display); font-size:1rem; }
.contact-item span { color:var(--steel); font-size:.88rem; }
.form { display:grid; gap:1rem; }
.form .row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { display:flex; flex-direction:column; gap:.45rem; }
.field label { font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); }
.field input, .field textarea, .field select {
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:.85rem 1rem; color:var(--white); font-family:var(--body); font-size:.95rem;
  transition:border-color .3s, background .3s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--gold); background:var(--surface-2); outline:none; }
.field textarea { resize:vertical; min-height:120px; }
.form button { margin-top:.5rem; justify-content:center; }
.form__note { font-size:.78rem; color:var(--steel); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--charcoal); border-top:1px solid var(--line); padding-top:clamp(4rem,7vw,6rem); }
.footer__top { display:grid; grid-template-columns: 1.8fr 1fr 1fr; gap:clamp(2rem,4vw,3rem); padding-bottom:3.5rem; }
.footer__brand p { color:var(--steel); font-size:.9rem; margin-top:1.4rem; max-width:34ch; }
.footer__brand .brand { margin-bottom:0; }
.fcol h5 { color:var(--white); font-family:var(--display); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.2rem; }
.fcol a { display:block; color:var(--steel); font-size:.88rem; padding:.35rem 0; transition:color .3s, padding-left .3s; }
.fcol a:hover { color:var(--gold-ink); padding-left:4px; }
.social { display:flex; gap:.7rem; margin-top:1.6rem; }
.social a { width:40px;height:40px; border:1px solid var(--line); border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--concrete); transition:.35s var(--ease); }
.social a:hover { background:var(--gold); color:var(--on-gold); border-color:var(--gold); transform:translateY(-3px); }
.social svg { width:17px;height:17px; }
.footer__bottom { border-top:1px solid var(--line); padding-block:1.8rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.footer__bottom p, .footer__bottom a { font-size:.8rem; color:var(--steel); }
.footer__bottom a:hover { color:var(--gold-ink); }
.footer__legal { display:flex; gap:1.5rem; }

/* ============================================================
   MISSION / VISION split
   ============================================================ */
.mv { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); }
.mv__col { position:relative; }
.mv__col + .mv__col { padding-left:clamp(2rem,5vw,4.5rem); border-left:1px solid var(--line); }
.mv__text {
  margin-top:1.2rem; font-family:var(--display); font-weight:500;
  font-size:clamp(1.3rem,2.3vw,1.95rem); line-height:1.32;
  color:var(--white); letter-spacing:-.01em;
}
.mv__text .gold { color:var(--gold-ink); }

/* ============================================================
   CHAIRMAN — centred statement
   ============================================================ */
.quote--center { background:var(--charcoal); text-align:center; }
.quote--center .eyebrow { justify-content:center; }
.quote__big {
  max-width:26ch; margin:1.6rem auto 0;
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.5rem,3.2vw,2.55rem); line-height:1.3;
  color:var(--white); letter-spacing:-.01em;
}
.quote__big .mk { color:var(--gold-ink); }
.quote__person { display:flex; align-items:center; justify-content:center; gap:1.1rem; margin-top:2.6rem; }
.quote__ph {
  width:74px; height:88px; flex:none; overflow:hidden;
  border-radius:14px 14px 44px 44px; border:1px solid var(--line); background:var(--surface);
}
.quote__ph img { width:100%; height:100%; object-fit:cover; object-position:top center; filter:grayscale(.15) contrast(1.02); }
.quote__person > div { text-align:left; }
.quote__person b { display:block; color:var(--white); font-family:var(--display); font-size:1.05rem; }
.quote__person span { color:var(--gold-ink); font-family:var(--mono); font-size:.8rem; }

/* ============================================================
   COMPACT CTA band (home / projects)
   ============================================================ */
.cta__band { display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; position:relative; z-index:1; }
.cta__band > div { max-width:46ch; }
.cta__band .lead { margin-top:1.2rem; margin-bottom:0; }

/* ============================================================
   scroll-reveal utility
   ============================================================ */
[data-reveal] { opacity:0; transform:translateY(16px); transition:opacity .45s var(--ease-out), transform .45s var(--ease-out); }
[data-reveal].in { opacity:1; transform:none; }
[data-reveal-d="1"]{ transition-delay:.08s; }
[data-reveal-d="2"]{ transition-delay:.16s; }
[data-reveal-d="3"]{ transition-delay:.24s; }
[data-reveal-d="4"]{ transition-delay:.32s; }
[data-reveal-d="5"]{ transition-delay:.40s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  .stats__grid { grid-template-columns:repeat(3,1fr); }
  .stat:nth-child(3){ border-right:0; }
  .stat:nth-child(n+4){ border-top:1px solid var(--line); }
  .serv__grid { grid-template-columns:repeat(2,1fr); }
  .group__grid { grid-template-columns:repeat(2,1fr); }
  .ind__grid { grid-template-columns:repeat(3,1fr); }
  .lead-grid { grid-template-columns:repeat(3,1fr); }
  .news__grid, .news__grid--4 { grid-template-columns:repeat(2,1fr); }
  .press__grid { grid-template-columns:repeat(2,1fr); }
  .proc__track { grid-template-columns:repeat(4,1fr); row-gap:2rem; }
  .proc__track::before,.proc__line { display:none; }
}
body.menu-open { overflow:hidden; }
/* backdrop-filter on the nav makes it the containing block for the fixed
   full-screen menu (menu collapses to nav height once scrolled) — drop it while open */
body.menu-open .nav { backdrop-filter:none; -webkit-backdrop-filter:none; }
@media (max-width: 860px){
  .nav-links, .nav-cta .btn { display:none; }
  .nav-toggle { display:flex; }
  .nav-menu {
    position:fixed; inset:0; z-index:99; background:var(--ink);
    display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:clamp(6.5rem,20vh,8.5rem) var(--gutter) 2rem;
    transform:translateX(100%); transition:transform .5s var(--ease); visibility:hidden;
    overflow-y:auto; counter-reset:navi;
  }
  body.menu-open .nav-menu { transform:none; visibility:visible; }
  .nav-menu a:not(.btn) {
    display:flex; align-items:baseline; gap:.9rem;
    font-family:var(--display); font-size:clamp(1.7rem,7vw,2.3rem); font-weight:800;
    color:var(--white); letter-spacing:-.02em; text-align:left;
    padding:1.05rem 0; border-top:1px solid var(--line);
  }
  .nav-menu a:nth-last-child(2) { border-bottom:1px solid var(--line); } /* last real link, before the .btn */
  .nav-menu a:not(.btn)::before {
    content:counter(navi,decimal-leading-zero); counter-increment:navi;
    font-family:var(--mono); font-size:.85rem; font-weight:500; color:var(--gold-ink);
    letter-spacing:.04em;
  }
  .nav-menu a::after { display:none; }
  .nav-menu a:not(.btn)[aria-current="page"] { color:var(--gold-ink); }
  .nav-menu .btn { display:inline-flex; margin-top:1.8rem; align-self:flex-start; padding:.95rem 1.6rem; }
  .nav > .brand { position:relative; z-index:101; } /* keep the logo above the open menu panel */
  .about__grid, .quote__inner, .cta__grid { grid-template-columns:1fr; }
  .owners-grid { grid-template-columns:1fr 1fr; }
  .statement__grid { grid-template-columns:1fr; }
  .statement__img { aspect-ratio:3/4; max-width:420px; margin-inline:auto; }
  .mv { grid-template-columns:1fr; }
  .mv__col + .mv__col { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:2rem; }
  .proj__grid { grid-template-columns:1fr 1fr; }
  .pcard--tall { grid-row:span 1; }
  .why__grid { grid-template-columns:1fr; }
  .footer__top { grid-template-columns:1fr 1fr; }
  .footer__brand { grid-column:1/-1; }
}
@media (max-width: 620px){
  :root { --gutter: 1.25rem; }
  .crumb a, .tlink { display:inline-flex; align-items:center; min-height:44px; }
  .brand__logo { height:58px; }
  .nav.scrolled .brand__logo { height:50px; }
  .stats__grid { grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-right:1px solid var(--line); }
  .stat:nth-child(2n){ border-right:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }
  .serv__grid, .group__grid { grid-template-columns:1fr; }
  .owners-grid { grid-template-columns:1fr; }
  .lead-grid { grid-template-columns:repeat(2,1fr); }
  .iso__grid { grid-template-columns:1fr; max-width:360px; }
  .news__grid, .news__grid--4, .press__grid, .proj__grid { grid-template-columns:1fr; }
  .form .row { grid-template-columns:1fr; }
  .footer__top { grid-template-columns:1fr; }
  .hero__scroll { display:none; }
  .values { grid-template-columns:1fr; }
}