/* ==========================================================================
   Xperts Advertising L.L.C
   No framework, no build step.

   PALETTE follows the company's own signboard artwork, not a dark theme:
   a white field, a gold frame, and a gold rule with a red hairline beneath it.
   Black is reserved for type, the footer and the hero scrim.
   Sampled from the logo badge: gold #B4851B, red #C1020A, near-black #10100E.

   The badge pairs the two: a gold X against a red PERTS. The site follows the
   same division of labour, so both brand colours carry weight:
     GOLD  = structure -> frames, rules, kickers, primary buttons, "explore"
                          links, tick marks, the ticker
     RED   = emphasis  -> PERTS in the wordmark, the accented word in every
                          heading, every index number, category labels, the
                          FAQ toggle, hover and active states
   Red is never a large surface, which is what would make it read as a
   different company's identity.

   Contrast, measured not eyeballed (WCAG AA needs 4.5:1 for body text):
     gold  #8A6410 on #FFFFFF ... 5.4:1  -> accents on light  (the default)
     red   #C1020A on #FFFFFF ... 6.4:1  -> emphasis on light
     gold  #C79A2E on #10100E ... 7.3:1  -> accents on the footer / scrim
     red   #EE4148 on #10100E ... 5.0:1  -> emphasis on dark. The logo's own
            #C1020A only reaches 2.9:1 there, so it is lightened rather than
            used raw, and --emph flips to it automatically on dark surfaces.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  --gold: #b4851b;
  --gold-lite: #c79a2e;      /* AA on the dark surface */
  --gold-deep: #8a6410;      /* AA on white */
  --red: #c1020a;            /* 6.4:1 on white */
  --red-lite: #ee4148;       /* 5.0:1 on the near-black; #e0303a only made 4.2 */
  --red-bright: #ff5c62;     /* 5.1:1 on the card tile, for 10px labels over photos */
  --emph: var(--red);        /* emphasis colour, flipped on dark surfaces */

  --black: #10100e;
  --black-2: #1a1a17;
  --black-3: #262622;
  --paper: #f7f6f4;
  --paper-2: #efedea;

  --bg: #ffffff;
  --fg: #17171a;
  --fg-2: #4b4b52;
  --fg-3: #67676f;          /* 5.1:1 on --paper, 5.5:1 on white */
  --accent: var(--gold-deep);
  --rule: var(--red);
  --line: rgba(16, 16, 14, 0.14);
  --line-2: rgba(16, 16, 14, 0.26);
  --edge: rgba(16, 16, 14, 0.22);   /* card boundaries, must survive white-on-white */

  --f-display: 'Display', 'Display Fallback', 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-body: 'Body', 'Body Fallback', -apple-system, system-ui, sans-serif;

  --gut: clamp(1.15rem, 4vw, 3rem);
  --shell: 76rem;
  --section: clamp(4rem, 9vw, 7.5rem);
  --r: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark surfaces flip the ramp. Gold brightens to hold AA. */
.invert,
.hero,
.subhero,
.chead,
.cta,
.footer,
.e404 {
  --bg: var(--black);
  --fg: #f4f3f0;
  --fg-2: #c5c3bd;
  --fg-3: #8e8c86;
  --accent: var(--gold-lite);
  --emph: var(--red-lite);
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.3);
  --edge: rgba(255, 255, 255, 0.2);
  background: var(--bg);
  color: var(--fg);
}

.paper {
  --bg: var(--paper);
  background: var(--bg);
}

/* The signboard's gold-over-red rule, used as the section marker. */
.kick {
  position: relative;
  padding-bottom: 0.85rem;
}
.kick::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.4rem;
  height: 3px;
  background: var(--gold);
}
.kick::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 2.1rem;
  height: 2px;
  background: var(--red);
}
.invert .kick::after,
.footer .kick::after,
.cta .kick::after { background: var(--red-lite); }

/* ---- 2. Reset & fonts --------------------------------------------------- */
@font-face {
  font-family: 'Display';
  src: url('../fonts/display.woff2') format('woff2');
  font-weight: 100 900;
  font-display: block;
}
@font-face {
  font-family: 'Body';
  src: url('../fonts/body.woff2') format('woff2');
  font-weight: 100 900;
  font-display: block;
}
@font-face {
  font-family: 'Display Fallback';
  src: local('Segoe UI Semibold'), local('Helvetica Neue'), local('Arial');
  size-adjust: 97%;
  ascent-override: 92%;
}
@font-face {
  font-family: 'Body Fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 100%;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img,
svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.028em;
}
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

h1 { font-size: clamp(2.5rem, 1.4rem + 5.2vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.35rem); }
h3 { font-size: clamp(1.12rem, 1.02rem + 0.45vw, 1.4rem); }

h1 em, h2 em { font-style: normal; color: var(--emph); }

.lead {
  max-width: 44ch;
  color: var(--fg-2);
  font-size: clamp(1.03rem, 0.99rem + 0.3vw, 1.22rem);
  line-height: 1.62;
}

.skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.8rem 1.2rem;
  background: var(--gold);
  color: #14140f;
  font-weight: 700;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 3px solid var(--gold-lite);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- 3. Layout ---------------------------------------------------------- */
.shell {
  width: min(100% - var(--gut) * 2, var(--shell));
  margin-inline: auto;
}
.shell--nar { width: min(100% - var(--gut) * 2, 52rem); }

.sec { padding-block: var(--section); }
.sec--tight { padding-top: clamp(2rem, 4vw, 3.5rem); }

.kick {
  display: block;
  margin: 0 0 1.35rem;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.sechead { margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.sechead .lead { margin-top: 1.1rem; }
.sechead--split {
  display: grid;
  gap: clamp(1.2rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: end;
}
.sechead--split .lead { margin-top: 0; }
@media (max-width: 54rem) {
  .sechead--split { grid-template-columns: 1fr; }
}

/* ---- 4. Buttons --------------------------------------------------------- */
.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.9rem;
}
.btns--c { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: #14140f;
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.3s, box-shadow 0.3s;
}
.btn:hover {
  transform: translateY(-2px);
  background: #d3a027;
  box-shadow: 0 10px 26px rgba(180, 133, 27, 0.3);
}
.btn .i { transition: transform 0.35s var(--ease); }
.btn:hover .i { transform: translateX(3px); }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1.6px var(--line-2);
}
.btn--ghost:hover {
  background: rgba(180, 133, 27, 0.12);
  box-shadow: inset 0 0 0 1.6px var(--gold);
  color: var(--fg);
}
.btn--wa { background: #25d366; color: #07200f; }
.btn--wa:hover { background: #33e176; box-shadow: 0 10px 26px rgba(37, 211, 102, 0.28); }
.btn--sm { min-height: 40px; padding: 0.6rem 1.15rem; font-size: 0.7rem; }

/* ---- 5. Header ---------------------------------------------------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding-block: 0.9rem;
  transition: background 0.35s, box-shadow 0.35s, padding 0.35s;
}
.hdr::before {
  content: '';
  position: absolute;
  inset: 0;
  /* The header floats over imagery, so it carries its own scrim: the nav text
     must keep AA even where the photo behind it is bright. */
  background: linear-gradient(180deg, rgba(16, 16, 14, 0.92) 0%, rgba(16, 16, 14, 0.72) 62%, rgba(16, 16, 14, 0) 100%);
  pointer-events: none;
}
.hdr.is-stuck,
.solid-nav .hdr {
  background: rgba(16, 16, 14, 0.94);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
}
.hdr.is-stuck::before,
.solid-nav .hdr::before { opacity: 0; }
.hdr.is-stuck { padding-block: 0.55rem; }

.hdr__in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(100% - var(--gut) * 2, var(--shell));
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #f4f3f0;
  flex: none;
}
.brand img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
}
.brand--lg img { width: 56px; height: 56px; }
.brand__tx { display: grid; gap: 0.28rem; }
.brand__name {
  font-family: var(--f-display);
  font-size: 1.24rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.brand__name { color: var(--red-lite); }              /* PERTS, as on the badge */
.brand__name i { font-style: normal; color: var(--gold-lite); }   /* the gold X */
.face .brand__name,
.paper .brand__name { color: var(--red); }
.brand__sub {
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #a6a29a;
}
.brand--lg .brand__name { font-size: 1.42rem; }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.nav__links { display: flex; align-items: center; gap: 1.55rem; }
.nav__links a {
  position: relative;
  color: #ddd9d2;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: color 0.25s;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after,
.nav__links a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.nav__links a[aria-current='page'] { color: var(--gold-lite); }

.burger {
  display: none;
  width: 46px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: #f4f3f0;
  transition: transform 0.35s var(--ease), opacity 0.25s;
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 62rem) {
  .burger { display: block; margin-left: auto; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 22rem);
    margin: 0;
    padding: 6rem 1.6rem 2rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    background: var(--black-2);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.42s var(--ease), visibility 0.42s;
    overflow-y: auto;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a {
    display: block;
    padding: 1rem 0.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.95rem;
    min-height: 44px;
  }
  .nav__links a::after { display: none; }
  .nav__cta { margin-top: 1.4rem; justify-content: center; }
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(8, 8, 7, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}
.scrim.is-on { opacity: 1; visibility: visible; }

/* ---- 6. Hero ------------------------------------------------------------ */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(100svh, 54rem);
  padding-block: 9rem 0;
  overflow: hidden;
}
.hero__bg,
.subhero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.hero::after,
.subhero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 16, 14, 0.72) 0%, rgba(16, 16, 14, 0.32) 38%, rgba(16, 16, 14, 0.95) 100%),
    radial-gradient(80% 60% at 12% 78%, rgba(180, 133, 27, 0.18), transparent 70%);
}
.hero__in,
.subhero__in { position: relative; z-index: 2; }

/* The hero copy sits inside the company's own signboard: white face, gold
   double frame, black type. It is the product they make, used as the layout. */
.face {
  --bg: #fff;
  --fg: #17171a;
  --fg-2: #4b4b52;
  --fg-3: #67676f;
  --accent: var(--gold-deep);
  /* the panel is white, so it takes the deep brand red back off the hero's
     lightened one, which would read pink here */
  --emph: var(--red);
  --line: rgba(16, 16, 14, 0.14);
  --line-2: rgba(16, 16, 14, 0.26);
  --edge: rgba(16, 16, 14, 0.22);
  position: relative;
  max-width: 46rem;
  padding: clamp(1.9rem, 4vw, 3.2rem) clamp(1.6rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3rem);
  background: #fff;
  color: var(--fg);
  border: 3px solid var(--gold);
  outline: 1px solid var(--gold);
  outline-offset: 5px;
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.45);
}
.face__pin {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.face__pin--tl { top: 10px; left: 10px; }
.face__pin--tr { top: 10px; right: 10px; }
.face__pin--bl { bottom: 10px; left: 10px; }
.face__pin--br { bottom: 10px; right: 10px; }

.face__tag {
  position: relative;
  margin: 0 0 1.5rem;
  padding-bottom: 0.85rem;
  color: var(--gold-deep);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.face__tag::before,
.face__tag::after {
  content: '';
  position: absolute;
  left: 0;
}
.face__tag::before { bottom: 0; width: 100%; height: 3px; background: var(--gold); }
.face__tag::after { bottom: -5px; width: 46%; height: 2px; background: var(--red); }
.face__tag span { color: var(--red); padding: 0 0.25rem; }

.face .btn--ghost { color: var(--fg); box-shadow: inset 0 0 0 1.6px var(--line-2); }

.hero h1 { text-transform: uppercase; }
.hero .lead { margin-top: 1.4rem; max-width: 40ch; }

/* full-width service index across the foot of the hero */
.hero__index {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  margin-top: clamp(2.4rem, 5vw, 4rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hero__index a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1.15rem clamp(0.9rem, 2vw, 1.6rem);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  color: #d8d5cf;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: background 0.3s, color 0.3s;
}
.hero__index a:last-child { border-right: 0; }
.hero__index a .i { color: var(--gold-lite); transition: transform 0.35s var(--ease); }
.hero__index a:hover { background: rgba(199, 154, 46, 0.16); color: #fff; box-shadow: inset 0 3px 0 var(--red-lite); }
.hero__index a:hover .i { transform: translateX(4px); }
@media (max-width: 78rem) {
  .hero__index a { font-size: 0.72rem; padding-inline: 0.8rem; }
}
@media (max-width: 62rem) {
  .hero__index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__index a { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  .hero__index a:nth-child(even) { border-right: 0; }
  .hero__index a:last-child { border-bottom: 0; }
}
@media (max-width: 34rem) {
  .hero__index { grid-template-columns: 1fr; }
  .hero__index a { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  .hero__index a:last-child { border-bottom: 0; }
}

/* homepage intro: heading left, argument right */
.intro {
  display: grid;
  gap: clamp(1.2rem, 4vw, 3.6rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  margin-bottom: clamp(2.4rem, 5vw, 3.8rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 54rem) { .intro { grid-template-columns: 1fr; } }
.intro__b > p:not(.lead) { margin-top: 0.9rem; color: var(--fg-2); }

/* ---- 7. Subhero & contact head ------------------------------------------ */
.subhero {
  position: relative;
  padding-block: clamp(8rem, 14vw, 11rem) clamp(3.4rem, 7vw, 5.5rem);
  overflow: hidden;
}
.subhero h1 { font-size: clamp(2.2rem, 1.3rem + 4.2vw, 4.2rem); text-transform: uppercase; }
.subhero .lead { margin-top: 1.3rem; }

.chead { padding-block: clamp(8rem, 14vw, 10.5rem) clamp(3rem, 6vw, 4.5rem); }
.chead h1 { font-size: clamp(2.2rem, 1.3rem + 4.2vw, 4.2rem); text-transform: uppercase; }
.chead .lead { margin-top: 1.3rem; }

/* ---- 8. Ticker ---------------------------------------------------------- */
.ticker {
  overflow: hidden;
  padding-block: 1rem;
  background: var(--gold);
  color: #14140f;
  border-block: 1px solid rgba(0, 0, 0, 0.14);
}
.ticker__row { display: flex; width: max-content; animation: slide 46s linear infinite; }
.ticker__grp { display: flex; }
.ticker__grp span {
  display: flex;
  align-items: center;
  padding-inline: 1.4rem;
  font-family: var(--f-display);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__grp span::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: 1.4rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ---- 10. Service cards -------------------------------------------------- */
.scards {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.scards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 62rem) { .scards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 44rem) {
  .scards,
  .scards--3 { grid-template-columns: 1fr; }
}

.scard__link {
  display: grid;
  height: 100%;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: transform 0.45s var(--ease), box-shadow 0.4s;
}
.paper .scard__link { background: #fff; }
.invert .scard__link { background: var(--black-2); }
.scard__link:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px var(--gold), 0 18px 44px rgba(16, 16, 14, 0.16);
}
.scard__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--black-3);
}
.scard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.scard__link:hover .scard__media img { transform: scale(1.055); }
.scard__body {
  display: block;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}
.scard__no {
  font-family: var(--f-display);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--emph);
  letter-spacing: 0.1em;
}
.scard__kick {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.scard__body h3 { margin-top: 0.5rem; }
.scard__lede {
  display: block;
  margin-top: 0.7rem;
  color: var(--fg-2);
  font-size: 0.95rem;
  line-height: 1.6;
}
.scard__more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ---- 11. Capabilities --------------------------------------------------- */
.caps {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 62rem) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .caps { grid-template-columns: 1fr; } }

.cap {
  padding: clamp(1rem, 2vw, 1.4rem);
  border-radius: var(--r);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.paper .cap { background: #fff; }
.invert .cap { background: rgba(255, 255, 255, 0.05); }
.cap__media {
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: 1.1rem;
  border-radius: 9px;
  overflow: hidden;
  background: var(--black-3);
}
.cap__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.cap p { margin-top: 0.6rem; color: var(--fg-2); font-size: 0.94rem; }

.cap--link {
  display: block;
  transition: transform 0.4s var(--ease), box-shadow 0.35s;
}
.cap--link:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--gold), 0 16px 40px rgba(16, 16, 14, 0.14);
}
.cap--link:hover .cap__media img { transform: scale(1.055); }
.cap__more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.95rem;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.cap--link:hover .cap__more .i { transform: translateX(3px); }
.cap__more .i { transition: transform 0.35s var(--ease); }

/* ---- 10b. Cutout tiles --------------------------------------------------
   Catalogue shots arrive as a subject floating on white. Cropping one to fill
   a tile slices the subject and, because the tile then reads as plain white,
   erases the card edge. These sit on their own white plate instead, with the
   whole subject visible and a hairline so the tile still has a boundary. */
.is-cut {
  background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--edge);
}
/* the plate must read as a panel, not as the card simply going white, so it
   is ruled off from the copy below it */
.scard__media.is-cut,
.svc__media.is-cut { border-bottom: 1px solid var(--edge); }
.is-cut img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  padding: clamp(0.6rem, 1.6vw, 1.1rem);
  transform: none !important;
}
/* a cutout must not zoom on hover: there is no bleed to hide the edges */
.scard__link:hover .scard__media.is-cut img,
.cap--link:hover .cap__media.is-cut img,
.gal__it.is-cut:hover img,
.work__it.is-cut:hover img { transform: none !important; }

/* The work grid prints its caption over the image. On a white plate the
   light-on-dark caption is invisible, so that case flips to dark type and
   reserves clear space at the foot of the tile instead of a scrim. */
.work__it.is-cut img { padding-bottom: 4.4rem; }
.work__it.is-cut figcaption { background: none; }
.work__it.is-cut .work__name { color: var(--fg); }
.work__it.is-cut .work__cat { color: var(--red); }

/* ---- 11a. Plant / equipment -------------------------------------------- */
.plant + .plant { margin-top: clamp(2.4rem, 5vw, 4rem); }
.plant__h {
  position: relative;
  margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
  padding-bottom: 0.9rem;
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.plant__h::before,
.plant__h::after { content: ''; position: absolute; left: 0; }
.plant__h::before { bottom: 0; width: 100%; height: 3px; background: var(--gold); }
.plant__h::after { bottom: -5px; width: 6rem; height: 2px; background: var(--red); }

.plant__grid {
  display: grid;
  gap: clamp(0.8rem, 1.8vw, 1.3rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 62rem) { .plant__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .plant__grid { grid-template-columns: 1fr; } }

.mach {
  display: flex;
  flex-direction: column;
  padding: clamp(0.9rem, 1.8vw, 1.2rem);
  border-radius: var(--r);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.mach__media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 1rem;
  border-radius: 9px;
  overflow: hidden;
  /* most of these are catalogue shots on white, so the tile stays white */
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.mach__media img { width: 100%; height: 100%; object-fit: contain; }
.mach h4 {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.mach__note {
  margin-top: 0.35rem;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
}
.mach__specs {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.3rem;
}
.mach__specs li {
  padding-left: 0.9rem;
  color: var(--fg-2);
  font-size: 0.83rem;
  line-height: 1.5;
  position: relative;
}
.mach__specs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--gold);
}

/* ---- 11b. Signboard types (anchored detail rows) ------------------------ */
.stype {
  display: grid;
  gap: clamp(1rem, 3vw, 2.6rem);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  padding-block: clamp(1.4rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
.stype:last-child { border-bottom: 0; }
.stype:nth-child(even) .stype__media { order: 2; }
@media (max-width: 54rem) {
  .stype { grid-template-columns: 1fr; }
  .stype:nth-child(even) .stype__media { order: 0; }
}
.stype__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--black-3);
}
.stype__media img { width: 100%; height: 100%; object-fit: cover; }
.stype__no {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--f-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--emph);
}
.stype__body p { margin-top: 0.7rem; max-width: 52ch; color: var(--fg-2); }

.fig--gap { margin-top: clamp(0.7rem, 1.6vw, 1.1rem); }

/* ---- 12. Steps ---------------------------------------------------------- */
.steps {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: s;
}
@media (max-width: 62rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .steps { grid-template-columns: 1fr; } }

.steps__it {
  padding-top: 1.4rem;
  border-top: 3px solid var(--line);
  transition: border-color 0.35s;
}
.steps__it:hover { border-top-color: var(--emph); }
.steps__no {
  display: block;
  font-family: var(--f-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--emph);
}
.steps__it h3 { margin-top: 0.55rem; }
.steps__it p { margin-top: 0.6rem; color: var(--fg-2); font-size: 0.95rem; }

/* ---- 13. Materials ------------------------------------------------------ */
.mats {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
@media (max-width: 46rem) { .mats { grid-template-columns: 1fr; } }
.mats__it {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 46rem) { .mats__it { grid-template-columns: 1fr; gap: 0.3rem; } }
.mats dt {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 800;
}
.mats dd { color: var(--fg-2); font-size: 0.95rem; }
.mats__it + .mats__it { border-left: 0; }
@media (min-width: 46.001rem) {
  .mats__it:nth-child(odd) { padding-right: clamp(1rem, 3vw, 2.6rem); }
  .mats__it:nth-child(even) { padding-left: clamp(1rem, 3vw, 2.6rem); border-left: 1px solid var(--line); }
}

/* ---- 14. Gallery -------------------------------------------------------- */
.gal {
  display: grid;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 62rem) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gal__it {
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--black-3);
}
.gal__it img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.gal__it:hover img { transform: scale(1.06); }

/* ---- 15. Industries & emirates ------------------------------------------ */
.inds,
.emirates {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 62rem) { .inds, .emirates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .inds, .emirates { grid-template-columns: 1fr; } }

.inds li,
.emirates li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.1rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.92rem;
  font-weight: 600;
}
.invert .inds li,
.invert .emirates li { background: rgba(255, 255, 255, 0.05); }
.inds li::before,
.emirates li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--gold);
  flex: none;
}

/* ---- 16. FAQ ------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq__it { border-bottom: 1px solid var(--line); }
.faq__it summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem 0;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.24rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  list-style: none;
}
.faq__it summary::-webkit-details-marker { display: none; }
.faq__it summary::after {
  content: '';
  width: 13px;
  height: 13px;
  margin-left: auto;
  margin-top: 0.35em;
  flex: none;
  background: var(--emph);
  clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%);
  transition: transform 0.35s var(--ease);
}
.faq__it[open] summary::after { transform: rotate(135deg); }
.faq__a { padding-bottom: 1.3rem; }
.faq__a p { max-width: 68ch; color: var(--fg-2); }

/* ---- 17. Service detail ------------------------------------------------- */
.svc {
  display: grid;
  gap: clamp(1.4rem, 4vw, 3.4rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 3.6rem);
  border-bottom: 1px solid var(--line);
}
.svc:last-child { border-bottom: 0; }
.svc:nth-child(even) .svc__media { order: 2; }
@media (max-width: 58rem) {
  .svc { grid-template-columns: 1fr; }
  .svc:nth-child(even) .svc__media { order: 0; }
}
.svc__media {
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--black-3);
}
.svc__media img { width: 100%; height: 100%; object-fit: cover; }
.svc__no {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--f-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--emph);
}
.svc__body .lead { margin-top: 1rem; }
.svc__body > p:not(.lead) { margin-top: 0.9rem; color: var(--fg-2); }
.svc__body .btn { margin-top: 1.6rem; }

.ticks { display: grid; gap: 0.55rem; margin-top: 1.4rem; }
.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 40rem) { .ticks--2 { grid-template-columns: 1fr; } }
.ticks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  font-size: 0.95rem;
  color: var(--fg-2);
}
.ticks li::before {
  content: '';
  width: 15px;
  height: 15px;
  margin-top: 0.28em;
  background: var(--accent);
  clip-path: polygon(14% 47%, 4% 58%, 38% 90%, 96% 24%, 85% 14%, 37% 68%);
}

/* ---- 18. Two-column ----------------------------------------------------- */
.two {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.6rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.two--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.two--form { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
@media (max-width: 58rem) {
  .two,
  .two--wide,
  .two--form { grid-template-columns: 1fr; }
  .two--rev .two__b { order: -1; }
}
.two__a > p:not(.lead) { margin-top: 0.9rem; color: var(--fg-2); }
.two__a .lead { margin-top: 1rem; }
.two__h {
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--gold);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.two__b .ticks { margin-top: 1.2rem; }

.fig {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--black-3);
}
.fig img { width: 100%; height: auto; }

/* ---- 19. Facts & activities --------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 46rem) { .facts { grid-template-columns: 1fr; } }
.facts > div {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 34rem) { .facts > div { grid-template-columns: 1fr; gap: 0.15rem; } }
.facts dt {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 0.2em;
}
.facts dd { font-weight: 600; }
@media (min-width: 46.001rem) {
  .facts > div:nth-child(odd) { padding-right: clamp(1rem, 3vw, 2.4rem); }
  .facts > div:nth-child(even) { padding-left: clamp(1rem, 3vw, 2.4rem); border-left: 1px solid var(--line); }
}
.facts--sm { grid-template-columns: 1fr; }
.facts--sm > div { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); padding-right: 0 !important; padding-left: 0 !important; border-left: 0 !important; }

.acts {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
@media (max-width: 46rem) { .acts { grid-template-columns: 1fr; } }
.acts li {
  padding: 1.1rem 1.3rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  border-left: 3px solid var(--gold);
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.acts li span {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--f-body);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---- 20. Values --------------------------------------------------------- */
.vals {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 68rem) { .vals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .vals { grid-template-columns: 1fr; } }
.val {
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border-radius: var(--r);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.invert .val { background: rgba(255, 255, 255, 0.05); }
.val__no {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--emph);
}
.val p { margin-top: 0.6rem; color: var(--fg-2); font-size: 0.94rem; }

/* ---- 21. Work grid ------------------------------------------------------ */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.filters__b {
  min-height: 40px;
  padding: 0.55rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.28s, color 0.28s, box-shadow 0.28s;
}
.filters__b:hover { box-shadow: inset 0 0 0 1.5px var(--gold); }
.filters__b.is-on { background: var(--gold); color: #14140f; box-shadow: none; }

.work {
  display: grid;
  gap: clamp(0.7rem, 1.6vw, 1.15rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 62rem) { .work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .work { grid-template-columns: 1fr; } }

.work__it {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--black-3);
}
.work__it[hidden] { display: none; }
.work__it img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.75s var(--ease); }
.work__it:hover img { transform: scale(1.06); }
.work__it figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.6rem 1.15rem 1.05rem;
  background: linear-gradient(180deg, transparent, rgba(16, 16, 14, 0.92));
  color: #f4f3f0;
}
.work__cat {
  display: block;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--red-bright);
}
.work__name {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 800;
}
.work__note {
  margin-top: 1.6rem;
  color: var(--fg-3);
  font-size: 0.85rem;
}

/* ---- 22. Contact -------------------------------------------------------- */
.cgrid {
  display: grid;
  gap: clamp(0.8rem, 1.8vw, 1.2rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 68rem) { .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .cgrid { grid-template-columns: 1fr; } }

.ccard {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: transform 0.4s var(--ease), box-shadow 0.35s;
}
.ccard:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--gold), 0 16px 38px rgba(16, 16, 14, 0.14);
}
.ccard__k {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.ccard__v {
  font-family: var(--f-display);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ccard__m {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  color: var(--fg-3);
  font-size: 0.75rem;
  font-weight: 700;
}

.form {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.8rem;
}
@media (max-width: 40rem) { .form { grid-template-columns: 1fr; } }
.field--full { grid-column: 1 / -1; }
.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.7rem 0.9rem;
  border: 0;
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 0.98rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form__alt { color: var(--fg-3); font-size: 0.87rem; }
.form__alt a { color: var(--gold-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.form__err {
  grid-column: 1 / -1;
  color: var(--red);
  font-size: 0.87rem;
  font-weight: 700;
}

.panel {
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  border-radius: var(--r);
  background: var(--black);
  color: #f4f3f0;
}
.panel h3 { color: #fff; }
.panel__h2 { margin-top: 1.6rem; }
.panel .facts { border-top-color: rgba(255, 255, 255, 0.16); margin-top: 1rem; }
.panel .facts > div { border-bottom-color: rgba(255, 255, 255, 0.16); }
.panel .facts dt { color: #9d9a93; }
.panel .ticks { color: #c5c3bd; }
.panel .ticks li { color: #c5c3bd; }
.panel .ticks li::before { background: var(--gold-lite); }

/* ---- 23. CTA & footer --------------------------------------------------- */
.cta { padding-block: clamp(3.6rem, 8vw, 6rem); text-align: center; }
.cta__in { display: grid; justify-items: center; }
.cta .kick::before { display: none; }
.cta .lead { margin-top: 1.2rem; margin-inline: auto; text-align: center; }
.cta .btns { justify-content: center; }

.footer { padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid {
  display: grid;
  gap: clamp(1.8rem, 3.5vw, 3rem);
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 68rem) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 44rem) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
  .footer__grid { grid-template-columns: 1fr; }
}
.footer__brand p {
  margin-top: 1.1rem;
  max-width: 34ch;
  color: var(--fg-2);
  font-size: 0.93rem;
}
.footer__lic {
  color: var(--fg-3) !important;
  font-size: 0.79rem !important;
  letter-spacing: 0.02em;
}
.footer__col h3 {
  font-family: var(--f-body);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold-lite);
}
.footer__col ul { margin-top: 1rem; display: grid; gap: 0.6rem; }
.footer__col a,
.footer__col address {
  color: var(--fg-2);
  font-size: 0.93rem;
  font-style: normal;
  transition: color 0.25s;
}
.footer__col a:hover { color: var(--gold-lite); }
.footer__contact address { line-height: 1.6; }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  justify-content: space-between;
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 0.8rem;
}

/* ---- 24. 404 ------------------------------------------------------------ */
.e404 {
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding-block: 6rem;
}
.e404 h1 { text-transform: uppercase; }
.e404 .lead { margin-top: 1.3rem; }
.e404__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.e404__links a {
  color: var(--fg-2);
  font-size: 0.85rem;
  font-weight: 700;
}
.e404__links a:hover { color: var(--gold-lite); }

/* ---- 25. Motion --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease) var(--d, 0ms), transform 0.7s var(--ease) var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ticker__row { animation: none; }
}

/* ---- King Group sister companies (about page) --------------------------- */
.gcards {
  display: grid;
  gap: clamp(0.8rem, 1.8vw, 1.2rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 62rem) { .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .gcards { grid-template-columns: 1fr; } }

.gcard {
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.gcard h3 { font-size: 1rem; line-height: 1.3; }
.gcard__city {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.gcard p:last-child { margin-top: 0.7rem; font-size: 0.92rem; color: var(--fg-2); }

/* The company tagline, under the hero headline. */
.face__motto {
  margin-top: 0.9rem;
  font-family: var(--f-display, inherit);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--gold-lite);
}

/* The address-book links in the contact panel are 21px tall, under the 24px
   WCAG 2.2 (2.5.8) target minimum. They are inline, so vertical padding grows
   the hit area without moving the line box. */
.facts dd a { padding-block: 0.45rem; }

/* ---- Floating utility bar + WhatsApp button ------------------------------
   The utility bar sits above the fixed header and slides away on scroll down,
   so the contact details are there on arrival without permanently eating
   vertical space. The header shifts up to take its place. */
.ubar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 61;
  background: var(--ink, #10100e);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.35s var(--ease), opacity 0.3s;
}
.ubar__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem clamp(1rem, 3vw, 2.2rem);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0.5rem var(--gut);
}
.ubar__i {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 26px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #c5c3bd;                       /* 10.8:1 on #10100E */
}
a.ubar__i:hover { color: var(--gold-lite); }
.ubar__i svg { width: 14px; height: 14px; flex: none; color: var(--gold-lite); }

/* Once the page is scrolled the bar retracts and the header takes the top. */
.ubar.is-up { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.hdr { top: var(--ubar-h, 0px); transition: top 0.35s var(--ease), background 0.35s, box-shadow 0.35s, padding 0.35s; }
.hdr.is-stuck { top: 0; }

/* the two wider items are noise on a phone; the phone and email stay */
@media (max-width: 46rem) {
  .ubar__i--wide { display: none; }
  .ubar__in { justify-content: space-between; gap: 0.5rem; padding-block: 0.3rem; }
  /* 26px is a tight thumb target, so the bar links get a little more height */
  .ubar__i { font-size: 0.72rem; min-height: 34px; }
}

/* ---- WhatsApp floating action button ------------------------------------ */
.wafab {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.7rem);
  bottom: clamp(1rem, 2.5vw, 1.7rem);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.15rem;
  border-radius: 999px;
  background: #25d366;
  color: #06331a;                       /* 9.6:1 on #25D366 */
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px rgba(6, 51, 26, 0.34);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.wafab svg { width: 22px; height: 22px; flex: none; }
.wafab:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(6, 51, 26, 0.44); }
.wafab:active { transform: translateY(-1px); }

/* Collapse to a circle on small screens so it never covers content. */
@media (max-width: 46rem) {
  .wafab { padding: 0.85rem; }
  .wafab__t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ubar, .hdr, .wafab { transition: none; }
}

/* ---- Google map on the contact page ------------------------------------- */
.mapwrap {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--edge);
  background: var(--paper);
  aspect-ratio: 16 / 7;
}
.mapwrap iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 46rem) { .mapwrap { aspect-ratio: 4 / 3; } }