/* ══════════════════════════════════════════════════════
   SUVERA — Stylesheet
   Font    : Inter
   Palette : #0A0A0A / #FFFFFF / #FAF9F7 / #E2E2DE / ...
   Updated : 2026
══════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  /* Colour */
  --black:      #0A0A0A;
  --white:      #FFFFFF;
  --off-white:  #FAF9F7;
  --rule:       #E2E2DE;
  --muted:      #999896;
  --mid:        #555553;
  --light:      #CCCCCA;
  --xlight:     #E8E8E5;

  /* Type */
  --fd: 'Inter', system-ui, -apple-system, sans-serif;
  --fb: 'Inter', system-ui, -apple-system, sans-serif;

  /* Layout */
  --max:        1200px;
  --pad-x:      clamp(28px, 5.5vw, 72px);
  --pad-y:      clamp(64px, 9vw, 112px);
  --gap:        24px;

  /* Motion */
  --ease:       cubic-bezier(.16, 1, .3, 1);
  --dur:        0.7s;
}


/* ─────────────────────────────────────────────
   RESET
───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family:              var(--fb);
  font-weight:              300;
  background:               var(--off-white);
  color:                    var(--black);
  line-height:              1.78;
  overflow-x:               hidden;
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
  font-feature-settings:    'kern' 1, 'liga' 1;
}

img  { display: block; max-width: 100%; height: 100%; object-fit: cover; }
a    { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
address { font-style: normal; }
button { cursor: pointer; font-family: inherit; }


/* ─────────────────────────────────────────────
   UTILITIES
───────────────────────────────────────────── */
.label {
  display:        block;
  font-family:    var(--fb);
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  32px;
}


/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
.btn {
  display:        inline-block;
  font-family:    var(--fb);
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding:        14px 38px;
  border:         0.5px solid transparent;
  transition:     background 0.28s ease,
                  color      0.28s ease,
                  border-color 0.28s ease;
}

.btn--outline {
  border-color: rgba(255, 255, 255, 0.45);
  color:        var(--white);
}
.btn--outline:hover {
  background:   var(--white);
  color:        var(--black);
  border-color: var(--white);
}

.btn--solid {
  background:   var(--black);
  color:        var(--white);
  border-color: var(--black);
}
.btn--solid:hover {
  background:   transparent;
  color:        var(--black);
}


/* ─────────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────────── */

/* Hero — on-load stagger */
.fade-in {
  opacity:   0;
  transform: translateY(20px);
  animation: fadeUp var(--dur) var(--ease) forwards;
}
.fade-in[data-d="0"] { animation-delay: 0.10s; }
.fade-in[data-d="1"] { animation-delay: 0.22s; }
.fade-in[data-d="2"] { animation-delay: 0.34s; }
.fade-in[data-d="3"] { animation-delay: 0.46s; }
.fade-in[data-d="4"] { animation-delay: 0.58s; }
.fade-in[data-d="5"] { animation-delay: 0.70s; }

/* Scroll reveal */
.reveal {
  opacity:    0;
  transform:  translateY(20px);
  transition: opacity   var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.reveal[data-d="1"] { transition-delay: 0.10s; }
.reveal[data-d="2"] { transition-delay: 0.20s; }
.reveal[data-d="3"] { transition-delay: 0.30s; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Image bands — opacity fade only (no translateY to avoid layout shift) */
.imgbreak.reveal,
.about-imgbreak.reveal,
.svc-imgbreak.reveal,
.process-fullimg.reveal,
.process-endimg.reveal {
  transform:  none;
  transition: opacity 0.9s var(--ease);
}
.imgbreak.reveal.in,
.about-imgbreak.reveal.in,
.svc-imgbreak.reveal.in,
.process-fullimg.reveal.in,
.process-endimg.reveal.in {
  transform: none;
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroZoom {
  from { transform: scale(1.03); }
  to   { transform: scale(1.00); }
}


/* ══════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════ */
.header {
  position:     fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index:      100;
  height:       80px;
  display:      flex;
  align-items:  center;
  padding:      0 var(--pad-x);
  transition:   background 0.4s, border-color 0.4s;
  border-bottom: 0.5px solid transparent;
}

.header.scrolled {
  background:    rgba(10, 10, 10, 0.96);
  border-bottom-color: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
}

.header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  max-width:       var(--max);
  margin:          0 auto;
}

.header__logo {
  font-family:    var(--fb);
  font-size:      14px;
  font-weight:    300;
  letter-spacing: 0.42em;
  color:          var(--white);
  mix-blend-mode: difference;
  text-indent:    0.42em;
}

.header__nav {
  display:     flex;
  align-items: center;
  gap:         56px;
}

.header__link {
  font-family:    var(--fb);
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--white);
  mix-blend-mode: difference;
  transition:     opacity 0.2s;
}
.header__link:hover { opacity: 0.50; }

.header__cta {
  font-family:    var(--fb);
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--white);
  border:         0.5px solid rgba(255, 255, 255, 0.45);
  padding:        10px 24px;
  mix-blend-mode: difference;
  transition:     background 0.25s, color 0.25s;
}
.header__cta:hover {
  background: var(--white);
  color:      var(--black);
}


/* ══════════════════════════════════════════════════════
   01  HERO
══════════════════════════════════════════════════════ */
.hero {
  position:        relative;
  height:          80vh;
  min-height:      520px;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  overflow:        hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__img {
  position:            absolute;
  inset:               -8%;
  background-size:     cover;
  background-position: center;
  background-color:    #181818;
  animation:           heroZoom 18s var(--ease) forwards;
  will-change:         transform;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* strong vertical gradient: image breathes at top, type reads at bottom */
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.10)  0%,
    rgba(10, 10, 10, 0.22)  30%,
    rgba(10, 10, 10, 0.72)  65%,
    rgba(10, 10, 10, 0.98) 100%
  );
}

.hero__content {
  position:   relative;
  z-index:    2;
  padding:    0 var(--pad-x) clamp(64px, 9vw, 104px);
  max-width:  min(1040px, 96vw);
}

/* Hero wordmark — dominant brand mark */
.hero__wordmark {
  display:        block;
  font-family:    var(--fd);
  font-size:      clamp(52px, 9vw, 96px);
  font-weight:    300;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-indent:    0.20em;
  color:          var(--white);
  line-height:    1;
  margin-bottom:  clamp(32px, 5vw, 56px);
}

.hero__eyebrow {
  display:        block;
  font-family:    var(--fb);
  font-size:      11px;
  font-weight:    300;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.38);
  margin-bottom:  48px;
}

.hero__headline {
  font-family:    var(--fd);
  font-size:      clamp(20px, 2.8vw, 36px);
  font-weight:    300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height:    1.7;
  color:          rgba(255, 255, 255, 0.58);
  margin-bottom:  52px;
}

.hero__copy {
  font-family:   var(--fb);
  font-size:     14px;
  font-weight:   300;
  line-height:   1.90;
  color:         rgba(255, 255, 255, 0.40);
  max-width:     580px;
  margin-bottom: 52px;
  letter-spacing: 0.01em;
}

.hero__tagline {
  display:        block;
  margin-top:     48px;
  font-family:    var(--fb);
  font-size:      11px;
  font-weight:    300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.45);
}


/* ══════════════════════════════════════════════════════
   02  INTRO
══════════════════════════════════════════════════════ */
.intro {
  padding:       clamp(52px, 6.5vw, 80px) var(--pad-x);
  border-bottom: 0.5px solid var(--rule);
}

.intro__inner {
  max-width:             var(--max);
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(64px, 9vw, 128px);
  align-items:           center;
}

.intro__display {
  font-family:    var(--fd);
  font-size:      clamp(26px, 3.5vw, 44px);
  font-weight:    300;
  line-height:    1.55;
  letter-spacing: 0.04em;
  color:          var(--black);
}

.intro__body {
  font-size:   14px;
  font-weight: 300;
  line-height: 1.88;
  color:       var(--mid);
  padding-top: 6px;
  letter-spacing: 0.01em;
}


/* ══════════════════════════════════════════════════════
   03  IMAGE BREAK
══════════════════════════════════════════════════════ */
.imgbreak {
  position: relative;
  height:   clamp(480px, 55vh, 640px);
  overflow: hidden;
}

.imgbreak__inner {
  position:            absolute;
  inset:               -20%;
  background-size:     cover;
  background-position: center 28%; /* upper-third crop — structural, not centre-mass */
  background-color:    #1a1a1a;
  will-change:         transform;
}


/* ══════════════════════════════════════════════════════
   04  SERVICES
══════════════════════════════════════════════════════ */
.services {
  padding-top:    var(--pad-y);
  padding-bottom: var(--pad-y);
}

.services__head {
  border-bottom: 0.5px solid var(--rule);
  margin-bottom: 0;
}
.services__head-inner {
  max-width: var(--max);
  margin:    0 auto;
  padding:   0 var(--pad-x) 32px;
}

/* ── Service split rows (01–03) ── */
.svc-split {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  border-bottom:         0.5px solid var(--rule);
  overflow:              hidden;
}

.svc-split__media {
  overflow:   hidden;
  background: var(--xlight);
  aspect-ratio: unset;
  min-height: 480px;
}
.svc-split__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.svc-split:hover .svc-split__media img {
  transform: scale(1.04);
}

.svc-split__body {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         clamp(48px, 7vw, 80px) clamp(40px, 6vw, 72px);
  background:      var(--off-white);
}

.svc-split__num {
  display:        block;
  font-family:    var(--fd);
  font-size:      11px;
  font-weight:    300;
  letter-spacing: 0.12em;
  color:          var(--muted);
  margin-bottom:  20px;
}

.svc-split__title {
  font-family:    var(--fd);
  font-size:      clamp(22px, 2.8vw, 32px);
  font-weight:    400;
  letter-spacing: -0.01em;
  line-height:    1.15;
  margin-bottom:  20px;
}

.svc-split__copy {
  font-size:     13px;
  font-weight:   300;
  line-height:   1.82;
  color:         var(--mid);
  margin-bottom: 18px;
}

.svc-split__tags {
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--muted);
}

/* ── Service list rows (04–06) ── */
.svc-list {
  max-width:  var(--max);
  margin:     0 auto;
  padding:    0 var(--pad-x);
}

.svc-list__item {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  gap:                   clamp(24px, 5vw, 72px);
  padding:               44px 0;
  border-bottom:         0.5px solid var(--rule);
  align-items:           start;
}
.svc-list__item:first-child {
  border-top: 0.5px solid var(--rule);
}

.svc-list__left {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.svc-list__num {
  font-family:    var(--fd);
  font-size:      11px;
  font-weight:    300;
  letter-spacing: 0.12em;
  color:          var(--muted);
}

.svc-list__title {
  font-family:    var(--fd);
  font-size:      clamp(18px, 2.2vw, 26px);
  font-weight:    400;
  letter-spacing: -0.01em;
  line-height:    1.18;
}

.svc-list__copy {
  font-size:     13px;
  font-weight:   300;
  line-height:   1.82;
  color:         var(--mid);
  margin-bottom: 14px;
}

.svc-list__tags {
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--muted);
}


/* ══════════════════════════════════════════════════════
   05  ABOUT
══════════════════════════════════════════════════════ */
.about {
  position:      relative;
  padding:       var(--pad-y) var(--pad-x);
  background:    var(--white);
  border-top:    0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}

/* Texture as material layer */
.about::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     url('../../texture.png') center / cover;
  opacity:        0.025;
  pointer-events: none;
}

.about__inner {
  position:              relative;
  max-width:             var(--max);
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(48px, 7vw, 96px);
  align-items:           start;
}

.about__heading {
  font-family:    var(--fd);
  font-size:      clamp(22px, 2.6vw, 34px);
  font-weight:    300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height:    1.25;
  margin-bottom:  36px;
}

.about__body {
  display:       flex;
  flex-direction: column;
  gap:           32px;
  margin-bottom: 68px;
}
.about__body p {
  font-size:   14px;
  font-weight: 300;
  line-height: 1.92;
  color:       var(--mid);
}

/* Values */
.values {
  display:        flex;
  flex-direction: column;
}
.values__item {
  display:               grid;
  grid-template-columns: 120px 1fr;
  gap:                   36px;
  padding:               36px 0;
  border-top:            0.5px solid var(--rule);
  align-items:           baseline;
}
.values__item:last-child {
  border-bottom: 0.5px solid var(--rule);
}

.values__term {
  font-family:    var(--fd);
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--black);
}

.values__def {
  font-size:      14px;
  font-weight:    300;
  line-height:    1.90;
  letter-spacing: 0.01em;
  color:          var(--mid);
}

/* Company facts panel */
.firm-facts {
  margin-top:     40px;
  border-top:     0.5px solid var(--rule);
  display:        flex;
  flex-direction: column;
}
.firm-facts__item {
  display:               grid;
  grid-template-columns: 96px 1fr;
  gap:                   0 16px;
  padding:               10px 0;
  border-bottom:         0.5px solid var(--rule);
  align-items:           baseline;
}
.firm-facts__item dt {
  font-family:    var(--fb);
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--muted);
}
.firm-facts__item dd {
  font-size:   12px;
  font-weight: 300;
  line-height: 1.75;
  color:       var(--mid);
}
.firm-facts__item dd em {
  font-family: var(--fd);
  font-style:  normal;
  font-size:   12px;
  font-weight: 400;
  color:       var(--black);
}

/* Sticky image */
.about__media {
  position:   sticky;
  top:        96px; /* clear 80px header + breathing room */
  overflow:   hidden;
}
.about__media img {
  width:            100%;
  aspect-ratio:     3 / 4;
  object-fit:       cover;
  object-position:  center 20%; /* frames upper portion — reads as site, not floor */
}


/* ══════════════════════════════════════════════════════
   06  PROCESS
══════════════════════════════════════════════════════ */
.process {
  padding:    var(--pad-y) var(--pad-x);
  border-top: 0.5px solid var(--rule);
}

.process__inner {
  max-width:             var(--max);
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(48px, 7vw, 96px);
  align-items:           center;
}

.process__media { overflow: hidden; }
.process__media img {
  width:        100%;
  aspect-ratio: 3 / 4;
  object-fit:   cover;
}

.process__body { max-width: 480px; }

.process__heading {
  font-family:    var(--fd);
  font-size:      clamp(24px, 3vw, 36px);
  font-weight:    400;
  letter-spacing: -0.01em;
  line-height:    1.2;
  margin-bottom:  52px;
}

.steps {
  display:        flex;
  flex-direction: column;
}

.steps__item {
  display:     flex;
  align-items: baseline;
  gap:         24px;
  padding:     20px 0;
  border-top:  0.5px solid var(--rule);
}
.steps__item:last-child {
  border-bottom: 0.5px solid var(--rule);
}

.steps__num {
  font-family:    var(--fd);
  font-size:      11px;
  font-weight:    300;
  letter-spacing: 0.1em;
  color:          var(--muted);
  flex-shrink:    0;
  width:          28px;
}

.steps__label {
  font-size:   15px;
  font-weight: 300;
  color:       var(--black);
}


/* ══════════════════════════════════════════════════════
   07  STATEMENT
══════════════════════════════════════════════════════ */
.statement {
  position: relative;
  padding:  clamp(112px, 16vw, 192px) var(--pad-x);
  display:  flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.statement__bg {
  position:            absolute;
  inset:               -12%;
  background-size:     cover;
  background-position: center 40%; /* intentional crop — mid-frame tension */
  background-color:    #111;
  will-change:         transform;
}

.statement__overlay {
  position:   absolute;
  inset:      0;
  background: rgba(10, 10, 10, 0.62);
}

.statement__quote {
  position:       relative;
  z-index:        2;
  font-family:    var(--fd);
  font-size:      clamp(32px, 4.5vw, 52px);
  font-weight:    300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height:    1.55;
  color:          var(--white);
  text-align:     center;
  max-width:      800px;
}
.statement__quote::after {
  content:    '';
  display:    block;
  width:      40px;
  height:     0.5px;
  background: rgba(255, 255, 255, 0.20);
  margin:     56px auto 0;
}


/* ══════════════════════════════════════════════════════
   08  NAME ORIGIN
══════════════════════════════════════════════════════ */
.name-origin {
  padding:       clamp(56px, 7vw, 80px) var(--pad-x);
  border-top:    0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}

.name-origin__inner {
  max-width: var(--max);
  margin:    0 auto;
}

.name-origin__heading {
  font-family:    var(--fd);
  font-size:      clamp(22px, 2.8vw, 36px);
  font-weight:    300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height:    1.25;
  margin-bottom:  28px;
  max-width:      600px;
}

.name-origin__body {
  font-size:     14px;
  font-weight:   300;
  line-height:   1.85;
  color:         var(--mid);
  max-width:     640px;
  margin-bottom: 60px;
}
.name-origin__body em { font-style: italic; }

/* Etymology table */
.etymology {
  max-width:  800px;
  border-top: 0.5px solid var(--rule);
}

.etymology__row {
  display:               grid;
  grid-template-columns: 100px 72px 72px 1fr;
  gap:                   24px;
  padding:               16px 0;
  border-bottom:         0.5px solid var(--rule);
  align-items:           baseline;
}

.etymology__row--head span {
  font-family:    var(--fb);
  font-size:      9px;
  font-weight:    400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--muted);
}

.etymology__row:not(.etymology__row--head) span {
  font-size:   13px;
  font-weight: 300;
  color:       var(--mid);
  line-height: 1.5;
}

/* Root column in display serif */
.etymology__row:not(.etymology__row--head) span:nth-child(3) {
  font-family:    var(--fd);
  font-size:      15px;
  font-weight:    500;
  letter-spacing: 0.04em;
  color:          var(--black);
}


/* ══════════════════════════════════════════════════════
   09  CONTACT
══════════════════════════════════════════════════════ */
.contact {
  padding:    clamp(60px, 7.5vw, 88px) var(--pad-x);
  background: var(--white);
  border-top: 0.5px solid var(--rule);
}

.contact__inner {
  max-width:             var(--max);
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1fr 1.6fr;
  gap:                   clamp(48px, 9vw, 128px);
  align-items:           start;
}

.contact__heading {
  font-family:    var(--fd);
  font-size:      clamp(32px, 5vw, 64px);
  font-weight:    300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height:    1.18;
  margin-bottom:  36px;
}

.contact__intro {
  font-size:     13px;
  font-weight:   300;
  line-height:   1.82;
  color:         var(--mid);
  margin-bottom: 36px;
}

.contact__intro a,
.contact__details a {
  color:         var(--black);
  border-bottom: 0.5px solid var(--light);
  padding-bottom: 1px;
  transition:    border-color 0.2s;
}
.contact__intro a:hover,
.contact__details a:hover {
  border-bottom-color: var(--black);
}

.contact__details {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}
.contact__details p {
  font-size:   12px;
  font-weight: 300;
  line-height: 1.65;
  color:       var(--mid);
}

/* ── Form ── */
.contact__form {
  display:        flex;
  flex-direction: column;
  gap:            clamp(20px, 2.5vw, 32px);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
}

.form-row--2 {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(16px, 2vw, 28px);
}

.form-field {
  display:        flex;
  flex-direction: column;
  margin-bottom:  0;
}

.form-field label {
  display:        block;
  font-family:    var(--fb);
  font-size:      9px;
  font-weight:    400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  12px;
}

.form-field input,
.form-field textarea,
.form-field select {
  font-family:       var(--fb);
  font-size:         13px;
  font-weight:       300;
  color:             var(--black);
  background:        var(--xlight);
  border:            none;
  border-bottom:     0.5px solid var(--rule);
  padding:           18px 20px;
  width:             100%;
  outline:           none;
  appearance:        none;
  -webkit-appearance: none;
  border-radius:     0;
  transition:        border-color 0.2s, background 0.2s;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-bottom-color: var(--black);
  background:          var(--white);
}

.form-field textarea {
  resize:     vertical;
  min-height: 140px;
  line-height: 1.82;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color:       var(--light);
  font-weight: 300;
}

/* Custom select arrow */
.select-wrap { position: relative; }
.select-wrap::after {
  content:       '';
  position:      absolute;
  right:         16px;
  top:           50%;
  transform:     translateY(-50%);
  width:         0;
  height:        0;
  border-left:   4px solid transparent;
  border-right:  4px solid transparent;
  border-top:    4px solid var(--mid);
  pointer-events: none;
}

.form-submit {
  display:     flex;
  align-items: center;
  gap:         24px;
  margin-top:  48px;
  flex-wrap:   wrap;
}

.form__note {
  font-size:      10px;
  font-weight:    300;
  letter-spacing: 0.05em;
  color:          var(--muted);
}

.form__success {
  padding:       24px;
  background:    var(--xlight);
  border-left:   2px solid var(--black);
  font-size:     13px;
  font-weight:   300;
  line-height:   1.75;
  color:         var(--mid);
  margin-top:    16px;
}
.form__success[hidden] { display: none; }


/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.footer {
  background:  var(--black);
  padding:     88px var(--pad-x) 72px;
  border-top:  0.5px solid rgba(255, 255, 255, 0.06);
}

.footer__inner {
  max-width:       var(--max);
  margin:          0 auto;
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  flex-wrap:       wrap;
  gap:             32px;
}

.footer__brand {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.footer__logo {
  font-family:    var(--fb);
  font-size:      14px;
  font-weight:    300;
  letter-spacing: 0.42em;
  text-indent:    0.42em;
  color:          var(--white);
}

.footer__tagline {
  font-family:    var(--fd);
  font-size:      10px;
  font-weight:    300;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.22);
}



/* ══════════════════════════════════════════════════════
   RESPONSIVE  —  TABLET  ≤ 1024px
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  .intro__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .svc-split {
    grid-template-columns: 1fr;
  }
  .svc-split__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  /* img-right: text first on mobile → image second */
  .svc-split--img-right .svc-split__body  { order: 1; }
  .svc-split--img-right .svc-split__media { order: 2; }

  .svc-list__item {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .about__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .about__media {
    position:     static;
    order:        -1;
  }
  .about__media img { aspect-ratio: 16 / 9; }

  .process__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .process__media img { aspect-ratio: 16 / 9; }
  .process__body { max-width: 100%; }

  .contact__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .form-row--2 {
    grid-template-columns: 1fr;
  }
}


/* ══════════════════════════════════════════════════════
   RESPONSIVE  —  MOBILE  ≤ 640px
══════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  .svc-split__body {
    padding: 44px 28px;
  }

  .etymology__row {
    grid-template-columns: 80px 1fr;
    gap: 12px;
  }
  /* Hide script + root columns on very small screens */
  .etymology__row span:nth-child(2),
  .etymology__row span:nth-child(3) { display: none; }

  .footer__inner {
    flex-direction: column;
    align-items:    flex-start;
  }
  .footer__nav {
    flex-direction: row;
    flex-wrap:      wrap;
    gap:            20px 32px;
  }

  /* Hero */
  .hero {
    height:     70vh;
    min-height: 480px;
  }

  /* Section padding — mobile */
  .intro,
  .what-we-do,
  .process-preview        { padding: 48px var(--pad-x); }
  .contact-cta            { padding: 48px var(--pad-x); }
  .about-intro,
  .about-values-section,
  .sectors-section,
  .process-steps-section  { padding: 48px var(--pad-x); }
  .process-intro          { padding: 28px var(--pad-x); }
  .add-scopes,
  .contact                { padding: 48px var(--pad-x); }
  .name-origin            { padding: 48px var(--pad-x); }
  .svc-page__item         { padding: 52px var(--pad-x); }
  .statement              { padding: 72px var(--pad-x); }
}


/* ══════════════════════════════════════════════════════
   MULTI-PAGE — SHARED
══════════════════════════════════════════════════════ */

/* Interior pages: header is always dark (no dark hero beneath it) */
.page-interior .header {
  background:          rgba(10, 10, 10, 0.96);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

/* Active nav link */
.header__link--active {
  opacity: 0.45;
  pointer-events: none;
}

/* ── Mobile hamburger button ── */
.header__menu-btn {
  display:          none;
  flex-direction:   column;
  justify-content:  space-between;
  width:            22px;
  height:           14px;
  background:       none;
  border:           none;
  padding:          0;
  cursor:           pointer;
  mix-blend-mode:   difference;
  flex-shrink:      0;
}
.header__menu-btn span {
  display:          block;
  width:            100%;
  height:           0.5px;
  background:       var(--white);
  transition:       transform 0.3s var(--ease), opacity 0.2s;
  transform-origin: center;
}
.header__menu-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.75px) rotate(45deg);
}
.header__menu-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.header__menu-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.75px) rotate(-45deg);
}

/* ── Mobile nav overlay ── */
.mobile-nav {
  position:        fixed;
  inset:           0;
  z-index:         150;
  background:      rgba(10, 10, 10, 0.98);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.35s var(--ease);
}
.mobile-nav.open {
  opacity:        1;
  pointer-events: all;
}
.mobile-nav__links {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0;
  width:          100%;
}
.mobile-nav__links a {
  display:        block;
  font-family:    var(--fd);
  font-size:      clamp(22px, 5.5vw, 36px);
  font-weight:    300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height:    1;
  color:          var(--white);
  opacity:        0;
  transform:      translateY(10px);
  padding:        28px var(--pad-x);
  width:          100%;
  text-align:     center;
  border-bottom:  0.5px solid rgba(255, 255, 255, 0.07);
  transition:     opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.mobile-nav__links a:first-child {
  border-top: 0.5px solid rgba(255, 255, 255, 0.07);
}
.mobile-nav.open .mobile-nav__links a {
  opacity:   0.72;
  transform: translateY(0);
}
.mobile-nav.open .mobile-nav__links a:nth-child(1) { transition-delay: 0.10s; }
.mobile-nav.open .mobile-nav__links a:nth-child(2) { transition-delay: 0.18s; }
.mobile-nav.open .mobile-nav__links a:nth-child(3) { transition-delay: 0.26s; }
.mobile-nav.open .mobile-nav__links a:nth-child(4) { transition-delay: 0.34s; }
.mobile-nav__links a:hover,
.mobile-nav__links a:focus {
  opacity: 1;
}
.mobile-nav__footer {
  margin-top:     40px;
  font-family:    var(--fb);
  font-size:      10px;
  font-weight:    300;
  letter-spacing: 0.12em;
  color:          rgba(255, 255, 255, 0.22);
  text-align:     center;
}

/* On screens where hamburger is shown, raise header above overlay */
@media (max-width: 768px) {
  .header {
    z-index: 200;
  }
  .header__link,
  .header__cta {
    display: none;
  }
  .header__menu-btn {
    display: flex;
  }
}

/* ── Page Hero (interior pages) ── */
.page-hero {
  background:     var(--black);
  padding:        clamp(104px, 13vw, 144px) var(--pad-x) clamp(56px, 7vw, 80px);
  border-bottom:  0.5px solid rgba(255, 255, 255, 0.07);
}

.page-hero__inner {
  max-width: var(--max);
  margin:    0 auto;
}

.page-hero__label {
  display:        block;
  font-family:    var(--fb);
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.32);
  margin-bottom:  28px;
}

.page-hero__heading {
  font-family:    var(--fd);
  font-size:      clamp(40px, 6.5vw, 88px);
  font-weight:    300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height:    1.15;
  color:          var(--white);
  margin-bottom:  28px;
}

.page-hero__copy {
  font-family:    var(--fb);
  font-size:      14px;
  font-weight:    300;
  line-height:    1.82;
  letter-spacing: 0.01em;
  color:          rgba(255, 255, 255, 0.38);
  max-width:      560px;
}

/* ── Text link ── */
.text-link {
  display:        inline-block;
  font-family:    var(--fb);
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--black);
  border-bottom:  0.5px solid var(--light);
  padding-bottom: 3px;
  transition:     border-color 0.2s;
}
.text-link:hover { border-bottom-color: var(--black); }

/* ── Footer nav ── */
.footer__nav {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}
.footer__nav a {
  font-family:    var(--fb);
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.38);
  transition:     color 0.2s;
}
.footer__nav a:hover { color: var(--white); }


/* ══════════════════════════════════════════════════════
   HOME — WHAT WE DO
══════════════════════════════════════════════════════ */
.what-we-do {
  padding:       clamp(64px, 8vw, 96px) var(--pad-x);
  border-bottom: 0.5px solid var(--rule);
}

.what-we-do__inner {
  max-width: var(--max);
  margin:    0 auto;
}

.what-we-do__head {
  margin-bottom: clamp(40px, 5vw, 56px);
}

.what-we-do__heading {
  font-family:    var(--fd);
  font-size:      clamp(28px, 3.8vw, 52px);
  font-weight:    300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height:    1.2;
}

.what-we-do__list {
  border-top: 0.5px solid var(--rule);
}

.wwd-item {
  display:               grid;
  grid-template-columns: 64px 1fr;
  gap:                   0 clamp(32px, 5vw, 64px);
  padding:               52px 0;
  border-bottom:         0.5px solid var(--rule);
  align-items:           start;
}

.wwd-item__num {
  font-family:    var(--fd);
  font-size:      11px;
  font-weight:    300;
  letter-spacing: 0.1em;
  color:          var(--light);
  padding-top:    6px;
}

.wwd-item__title {
  font-family:    var(--fd);
  font-size:      clamp(13px, 1.4vw, 16px);
  font-weight:    400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height:    1.4;
  margin-bottom:  20px;
}

.wwd-item__copy {
  font-size:   15px;
  font-weight: 300;
  line-height: 1.82;
  color:       var(--mid);
  max-width:   560px;
  letter-spacing: 0.01em;
}

.what-we-do__footer {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             20px;
  margin-top:      52px;
  padding-top:     36px;
  border-top:      0.5px solid var(--rule);
}

.what-we-do__sectors {
  font-family:    var(--fd);
  font-size:      11px;
  font-weight:    300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--muted);
}


/* ══════════════════════════════════════════════════════
   3-IMAGE STRIP  (services strip on homepage + services page)
══════════════════════════════════════════════════════ */
.svc-img3 {
  display:       grid;
  grid-template-columns: 1fr 1fr 1fr;
  height:        clamp(260px, 36vh, 440px);
  overflow:      hidden;
  border-top:    0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}

.svc-img3__item {
  overflow: hidden;
  position: relative;
}

.svc-img3__item + .svc-img3__item {
  border-left: 0.5px solid var(--rule);
}

.svc-img3__item img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center 35%;
  display:          block;
  transition:       transform 0.7s var(--ease);
}
.svc-img3__item:hover img {
  transform: scale(1.02);
}

@media (max-width: 640px) {
  .svc-img3 {
    grid-template-columns: 1fr;
    height:                auto;
  }
  .svc-img3__item {
    height: 220px;
  }
  .svc-img3__item + .svc-img3__item {
    border-left:  none;
    border-top:   0.5px solid var(--rule);
  }
}


/* ══════════════════════════════════════════════════════
   HOME — FIRM PREVIEW
══════════════════════════════════════════════════════ */
.firm-preview {
  padding:       clamp(112px, 15vw, 176px) var(--pad-x);
  background:    var(--white);
  border-bottom: 0.5px solid var(--rule);
}

.firm-preview__inner {
  max-width: 740px;
  margin:    0 auto;
}

.firm-preview__copy {
  font-family:    var(--fd);
  font-size:      clamp(21px, 2.6vw, 28px);
  font-weight:    300;
  line-height:    1.66;
  letter-spacing: -0.008em;
  color:          var(--mid);
  margin-bottom:  44px;
}


/* ══════════════════════════════════════════════════════
   HOME — CONTACT CTA
══════════════════════════════════════════════════════ */
.contact-cta {
  padding:    clamp(80px, 11vw, 120px) var(--pad-x);
  border-top: 0.5px solid var(--rule);
}

.contact-cta__inner {
  max-width:       var(--max);
  margin:          0 auto;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             40px;
  flex-wrap:       wrap;
}

.contact-cta__text {
  font-family:    var(--fd);
  font-size:      clamp(20px, 2.8vw, 36px);
  font-weight:    300;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height:    1.3;
  color:          var(--black);
}


/* ══════════════════════════════════════════════════════
   SERVICES PAGE
══════════════════════════════════════════════════════ */
.svc-page {
  border-bottom: 0.5px solid var(--rule);
}

.svc-page__item {
  border-bottom: 0.5px solid var(--rule);
  padding:       clamp(60px, 8vw, 96px) var(--pad-x);
}

.svc-page__item-inner {
  max-width:             var(--max);
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 280px 1fr;
  gap:                   clamp(64px, 10vw, 144px);
  align-items:           start;
}

.svc-page__item--image {
  padding: 0;
}

.svc-page__item--image .svc-page__item-inner {
  padding: var(--pad-y) var(--pad-x);
}

.svc-page__item--image-left {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  max-width:             100%;
}

.svc-page__item--image-left .svc-page__item-inner {
  padding:    var(--pad-y) var(--pad-x) var(--pad-y) clamp(40px, 5vw, 72px);
  max-width:  none;
  display:    grid;
  grid-template-columns: 280px 1fr;
  gap:        clamp(40px, 5vw, 72px);
  align-items: start;
}

.svc-page__image {
  overflow:    hidden;
  min-height:  480px;
  flex-shrink: 0;
}

.svc-page__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Right-image variant: image is second column */
.svc-page__item--image:not(.svc-page__item--image-left) {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  max-width:             100%;
  padding:               0;
}
.svc-page__item--image:not(.svc-page__item--image-left) .svc-page__item-inner {
  padding: var(--pad-y) clamp(40px, 5vw, 72px) var(--pad-y) var(--pad-x);
}

.svc-page__meta {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.svc-page__num {
  font-family:    var(--fb);
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.18em;
  color:          var(--light);
  text-transform: uppercase;
}

.svc-page__title {
  font-family:    var(--fd);
  font-size:      clamp(24px, 3.2vw, 42px);
  font-weight:    300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height:    1.25;
  margin-bottom:  20px;
}

.svc-page__body {
  display:        flex;
  flex-direction: column;
  gap:            36px;
}

.svc-page__body p {
  font-size:      14px;
  font-weight:    300;
  line-height:    1.95;
  color:          var(--mid);
  letter-spacing: 0.01em;
  max-width:      680px;
}

/* ── Services page section label row ── */
.svc-section-head {
  border-bottom: 0.5px solid var(--rule);
}
.svc-section-head__inner {
  max-width: var(--max);
  margin:    0 auto;
  padding:   36px var(--pad-x) 28px;
}

/* ── Sectors ── */
.sectors {
  border-top: 0.5px solid var(--rule);
}

.sectors__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(48px, 7vw, 104px);
  align-items:           center;
  max-width:             var(--max);
  margin:                0 auto;
  padding:               var(--pad-y) var(--pad-x);
}

.sectors__heading {
  font-family:    var(--fd);
  font-size:      clamp(20px, 2.4vw, 28px);
  font-weight:    400;
  letter-spacing: -0.008em;
  line-height:    1.22;
  margin-bottom:  24px;
}

.sectors__copy {
  font-size:   14px;
  font-weight: 300;
  line-height: 1.85;
  color:       var(--mid);
}

.sectors__list {
  display:        flex;
  flex-direction: column;
  border-top:     0.5px solid var(--rule);
}

.sectors__item {
  font-family:    var(--fd);
  font-size:      clamp(16px, 1.8vw, 22px);
  font-weight:    300;
  letter-spacing: -0.005em;
  padding:        20px 0;
  border-bottom:  0.5px solid var(--rule);
  color:          var(--mid);
}

.sectors__image {
  overflow:   hidden;
  border-top: 0.5px solid var(--rule);
  height:     520px;
}
.sectors__image img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center 30%; /* deliberate upper crop — architectural framing */
}

/* ── Services atmospheric image strip ── */
.svc-imgstrip {
  position:   relative;
  height:     clamp(480px, 68vh, 760px);
  overflow:   hidden;
  border-top: 0.5px solid var(--rule);
}
.svc-imgstrip img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center 25%; /* upper-third crop — structural, not literal */
  display:          block;
}


/* ══════════════════════════════════════════════════════
   PROCESS PAGE
══════════════════════════════════════════════════════ */
.process-page {
  padding:    var(--pad-y) var(--pad-x);
  border-top: 0.5px solid var(--rule);
}

.process-page__inner {
  max-width:             var(--max);
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1fr 1.4fr;
  gap:                   clamp(56px, 8vw, 112px);
  align-items:           start;
}

.process-page__media {
  position:   sticky;
  top:        100px;
  overflow:   hidden;
}

.process-page__media img {
  width:            100%;
  aspect-ratio:     3 / 4;
  object-fit:       cover;
  object-position:  center 15%; /* top-biased crop — plans/documents at eye level */
}

.process-page__steps {
  display:        flex;
  flex-direction: column;
}

.process-step {
  padding:       60px 0;
  border-bottom: 0.5px solid var(--rule);
}
.process-step:first-child {
  border-top: 0.5px solid var(--rule);
}

.process-step__head {
  display:      flex;
  align-items:  baseline;
  gap:          32px;
  margin-bottom: 28px;
}

.process-step__num {
  font-family:    var(--fb);
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.18em;
  color:          var(--light);
  flex-shrink:    0;
  text-transform: uppercase;
}

.process-step__title {
  font-family:    var(--fd);
  font-size:      clamp(14px, 1.6vw, 18px);
  font-weight:    400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height:    1.4;
}

.process-step__copy {
  font-size:      14px;
  font-weight:    300;
  line-height:    1.95;
  color:          var(--mid);
  max-width:      680px;
  letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════════════════
   ADDITIONAL SCOPES (services page)
══════════════════════════════════════════════════════ */
.add-scopes {
  padding:    clamp(60px, 7.5vw, 88px) var(--pad-x);
  border-top: 0.5px solid var(--rule);
  background: var(--white);
}

.add-scopes__inner {
  max-width: var(--max);
  margin:    0 auto;
}

.add-scopes__head {
  margin-bottom: clamp(48px, 6vw, 72px);
}

.add-scopes__list {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0;
  border-top:            0.5px solid var(--rule);
}

.add-scope {
  padding:      clamp(48px, 6vw, 72px) clamp(36px, 5vw, 56px) clamp(48px, 6vw, 72px) 0;
  border-right: 0.5px solid var(--rule);
}
.add-scope:last-child {
  border-right: none;
  padding-left: clamp(36px, 5vw, 56px);
}
.add-scope:not(:first-child) {
  padding-left: clamp(36px, 5vw, 56px);
}

.add-scope__title {
  font-family:    var(--fd);
  font-size:      clamp(13px, 1.4vw, 16px);
  font-weight:    400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height:    1.4;
  margin-bottom:  20px;
  color:          var(--black);
}

.add-scope__copy {
  font-size:   13px;
  font-weight: 300;
  line-height: 1.90;
  color:       var(--muted);
}

/* ── Enquire page: full-height contact ── */
.contact--page {
  min-height: calc(100vh - 80px);
  padding-top: calc(clamp(40px, 5vw, 56px) + 80px);
  padding-bottom: clamp(60px, 7.5vw, 88px);
}

/* Subtle texture overlay on enquire page */
.contact--texture {
  position: relative;
}
.contact--texture::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     url('../../Texture.png') center / cover;
  opacity:        0.025;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════
   MULTI-PAGE RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  .add-scopes__list {
    grid-template-columns: 1fr;
  }
  .add-scope,
  .add-scope:last-child,
  .add-scope:not(:first-child) {
    padding:       clamp(32px, 5vw, 48px) 0;
    border-right:  none;
    border-bottom: 0.5px solid var(--rule);
  }
  .add-scope:last-child {
    border-bottom: none;
  }

  .svc-page__item-inner {
    grid-template-columns: 200px 1fr;
    gap: clamp(40px, 6vw, 72px);
  }

  .svc-page__item--image,
  .svc-page__item--image:not(.svc-page__item--image-left) {
    grid-template-columns: 1fr;
  }

  .svc-page__item--image-left {
    grid-template-columns: 1fr;
  }

  .svc-page__item--image-left .svc-page__image {
    order: -1;
  }

  .svc-page__item--image-left .svc-page__item-inner {
    padding: var(--pad-y) var(--pad-x);
    grid-template-columns: 1fr;
  }

  .svc-page__item--image:not(.svc-page__item--image-left) .svc-page__item-inner {
    padding: var(--pad-y) var(--pad-x);
    grid-template-columns: 1fr;
  }

  .svc-page__image {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .sectors__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .process-page__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .process-page__media {
    position: static;
  }
  .process-page__media img { aspect-ratio: 16 / 9; }

  .contact-cta__inner {
    flex-direction: column;
    align-items:    flex-start;
  }
}

@media (max-width: 640px) {

  .what-we-do__footer {
    flex-direction: column;
    align-items:    flex-start;
  }

  .wwd-item {
    grid-template-columns: 48px 1fr;
  }

  .svc-page__item-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .process-step__copy {
    max-width: 100%;
  }
}


/* ══════════════════════════════════════════════════════
   HOMEPAGE — PROCESS PREVIEW
══════════════════════════════════════════════════════ */
.process-preview {
  padding:       clamp(72px, 9vw, 104px) var(--pad-x);
  background:    var(--white);
  border-top:    0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}

.process-preview__inner {
  max-width:             var(--max);
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(64px, 9vw, 128px);
  align-items:           center;
}

.process-preview__heading {
  font-family:    var(--fd);
  font-size:      clamp(28px, 3.8vw, 52px);
  font-weight:    300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height:    1.22;
  margin-bottom:  28px;
  color:          var(--black);
}

.process-preview__copy {
  font-size:     14px;
  font-weight:   300;
  line-height:   1.92;
  color:         var(--mid);
  margin-bottom: 40px;
  max-width:     420px;
}

.process-preview__media {
  overflow: hidden;
}
.process-preview__media img {
  width:            100%;
  aspect-ratio:     4 / 5;
  object-fit:       cover;
  object-position:  center 25%;
  transition:       transform 0.7s var(--ease);
  display:          block;
}
.process-preview__media:hover img {
  transform: scale(1.02);
}


/* ══════════════════════════════════════════════════════
   ABOUT PAGE — REBUILT SECTIONS
══════════════════════════════════════════════════════ */
.about-intro {
  padding:       clamp(60px, 7.5vw, 88px) var(--pad-x);
  border-bottom: 0.5px solid var(--rule);
  background:    var(--white);
}
.about-intro__inner {
  max-width: 700px;
  margin:    0 auto;
}
.about-intro p {
  font-size:      14px;
  font-weight:    300;
  line-height:    2.05;
  letter-spacing: 0.01em;
  color:          var(--mid);
}
.about-intro p + p {
  margin-top: 36px;
}

.about-imgbreak {
  overflow:   hidden;
  height:     clamp(360px, 48vh, 520px);
}
.about-imgbreak img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center 35%;
  display:          block;
}

.about-values-section {
  padding:       clamp(64px, 8vw, 96px) var(--pad-x);
  border-top:    0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}
.about-values-section__inner {
  max-width:             var(--max);
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 280px 1fr;
  gap:                   clamp(64px, 9vw, 128px);
  align-items:           start;
}
.about-values-section__heading {
  font-family:    var(--fd);
  font-size:      clamp(20px, 2.4vw, 32px);
  font-weight:    300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height:    1.28;
  color:          var(--black);
  margin-top:     8px;
}

.about-facts-section {
  padding:    clamp(64px, 8vw, 96px) var(--pad-x);
  border-top: 0.5px solid var(--rule);
}
.about-facts-section__inner {
  max-width: var(--max);
  margin:    0 auto;
}


/* ══════════════════════════════════════════════════════
   SERVICES PAGE — INLINE IMAGE BREAKS + SECTORS
══════════════════════════════════════════════════════ */
.svc-imgbreak {
  height:     clamp(360px, 48vh, 520px);
  overflow:   hidden;
  border-top: 0.5px solid var(--rule);
}
.svc-imgbreak img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center 40%;
  display:          block;
}

/* Sectors — updated to text-only two-col list */
.sectors-section {
  padding:       clamp(60px, 7.5vw, 88px) var(--pad-x);
  border-top:    0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}
.sectors-section__inner {
  max-width:             var(--max);
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 280px 1fr;
  gap:                   clamp(64px, 9vw, 128px);
  align-items:           start;
}
.sectors-section__heading {
  font-family:    var(--fd);
  font-size:      clamp(20px, 2.4vw, 32px);
  font-weight:    300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height:    1.28;
  color:          var(--black);
  margin-top:     8px;
  margin-bottom:  20px;
}
.sectors-section__copy {
  font-size:   14px;
  font-weight: 300;
  line-height: 1.88;
  color:       var(--mid);
}
.sectors-section__list {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  border-top:            0.5px solid var(--rule);
}
.sectors-section__item {
  font-family:    var(--fd);
  font-size:      clamp(13px, 1.5vw, 16px);
  font-weight:    400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding:        22px 0 22px 0;
  border-bottom:  0.5px solid var(--rule);
  border-right:   0.5px solid var(--rule);
  padding-right:  clamp(16px, 2vw, 32px);
  color:          var(--black);
}
.sectors-section__item:nth-child(2n) {
  border-right: none;
  padding-left: clamp(16px, 2vw, 32px);
  padding-right: 0;
}
.sectors-section__item:nth-last-child(-n+2):not([class*="odd"]) {
  border-bottom: none;
}
.sectors-section__item:last-child {
  border-bottom: none;
}
.sectors-section__item:nth-last-child(2):nth-child(2n+1) {
  border-bottom: none;
}


/* ══════════════════════════════════════════════════════
   PROCESS PAGE — REBUILT SECTIONS
══════════════════════════════════════════════════════ */
.process-intro {
  padding:       clamp(32px, 4vw, 48px) var(--pad-x);
  border-bottom: 0.5px solid var(--rule);
  background:    var(--white);
}
.process-intro__inner {
  max-width: 700px;
  margin:    0 auto;
}
.process-intro p {
  font-size:   14px;
  font-weight: 300;
  line-height: 1.95;
  color:       var(--mid);
}

.process-fullimg {
  height:     clamp(400px, 52vh, 600px);
  overflow:   hidden;
  border-top: 0.5px solid var(--rule);
}
.process-fullimg img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center 28%;
  display:          block;
}

.process-steps-section {
  padding:       clamp(60px, 7.5vw, 88px) var(--pad-x);
  border-top:    0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}
.process-steps-section__inner {
  max-width: 860px;
  margin:    0 auto;
}
.process-steps-section__head {
  margin-bottom: clamp(32px, 4vw, 48px);
}
.process-steps-section__heading {
  font-family:    var(--fd);
  font-size:      clamp(28px, 3.8vw, 52px);
  font-weight:    300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height:    1.22;
  color:          var(--black);
}

.process-endimg {
  height:     clamp(360px, 52vh, 600px);
  overflow:   hidden;
}
.process-endimg img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center 40%;
  display:          block;
}


/* ══════════════════════════════════════════════════════
   NEW COMPONENT RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .process-preview__inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .process-preview__media img {
    aspect-ratio: 16 / 9;
  }

  .about-values-section__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sectors-section__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .sectors-section__list {
    grid-template-columns: 1fr;
  }
  .sectors-section__item,
  .sectors-section__item:nth-child(2n) {
    border-right: none;
    padding-left: 0;
    padding-right: 0;
  }
  .sectors-section__item:nth-last-child(2):nth-child(2n+1) {
    border-bottom: 0.5px solid var(--rule);
  }

  /* Reduce motion intensity on mobile */
  .reveal      { transform: translateY(12px); }
  .fade-in     { transform: translateY(12px); }
}


/* ══════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    transform:          none;
    animation:          none;
    opacity:            1;
  }

  .reveal {
    transform:  none;
    transition: opacity 0.4s ease;
  }
  .reveal.in { transform: none; }

  .hero__img { animation: none; }

  .mobile-nav__links a {
    transform:  none;
    transition: opacity 0.2s ease;
  }
  .mobile-nav.open .mobile-nav__links a { transform: none; }

  .svc-img3__item:hover img,
  .process-preview__media:hover img {
    transform: none;
  }
}