/* ============================================================
   UAC — Ufuq Al-Thiqa Company | uac-eng.com
   Palette sampled from the official logo:
   cream #f3f4ee · charcoal #494a45 · copper #c08460
   Logical properties (inline-start/end) are used throughout so
   the layout flips automatically between RTL (ar) and LTR (en).
   ============================================================ */

:root {
  --cream:        #f3f4ee;
  --cream-deep:   #e9eae2;
  --charcoal:     #494a45;
  --charcoal-dark:#33342f;
  --copper:       #c08460;
  --copper-deep:  #a96e4a;
  /* small copper text needs to be darker than --copper-deep, which only
     reaches 3.8:1 on cream — under AA. Use this for body-size copper. */
  --copper-ink:   #75452a;
  /* Three coppers, because one can't clear AA on both backings:
       --copper       #c08460  borders, icons, decorative fills only
       --copper-ink   #75452a  small text on cream   (--copper-deep is 3.8:1)
       --copper-lite  #d29a72  text on charcoal      (--copper is 4.0:1)     */
  --copper-lite:  #d29a72;
  --ink:          #2e2f2b;
  --line:         rgba(73, 74, 69, .14);
  --radius:       14px;
  --shadow:       0 10px 30px rgba(51, 52, 47, .10);
  --header-h:     76px;
  /* Built-in CSS eases are too weak to feel intentional. One strong ease-out
     for anything entering or reacting; interactions should snap, not drift. */
  --ease-out-strong: cubic-bezier(.23, 1, .32, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Cairo', 'Segoe UI', sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.8;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: 1140px; margin-inline: auto; padding-inline: 24px; }

/* anchors land below the sticky header */
section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
.service-card[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ============ Header ============ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(243, 244, 238, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

/* Grid, not flex with space-between: that only centres the nav when the brand
   and the actions happen to be the same width, and they aren't (214px vs 66px
   in English). The 1fr / auto / 1fr track pattern centres the middle column
   against the page regardless of what flanks it. */
.header-inner {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.main-nav       { justify-self: center; }
.header-actions { justify-self: end; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 48px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-text strong { font-size: 1.05rem; font-weight: 800; color: var(--charcoal-dark); }
.brand-text small { font-size: .72rem; color: var(--copper-deep); letter-spacing: .02em; }

.main-nav { display: flex; gap: 26px; }
.main-nav a {
  font-weight: 600; font-size: .95rem; color: var(--charcoal);
  padding-block: 6px; position: relative;
}
.main-nav a::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 0; height: 2px; background: var(--copper);
  transition: width .3s var(--ease-out-strong);
}
.main-nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 12px; }

.lang-toggle {
  font-family: inherit; font-weight: 700; font-size: .85rem;
  padding: 6px 16px; cursor: pointer;
  color: var(--charcoal); background: transparent;
  border: 1.5px solid var(--charcoal); border-radius: 999px;
  transition: all .2s;
}
.lang-toggle:hover { background: var(--charcoal); color: var(--cream); }
.lang-toggle:active { transform: scale(.94); }

.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-burger span {
  display: block; width: 24px; height: 2.5px; margin: 5px 0;
  background: var(--charcoal); border-radius: 2px; transition: transform .25s, opacity .25s;
}

/* ============ Hero ============ */
.hero { padding-block: 90px 70px; overflow: hidden; }

.hero-inner {
  display: grid; grid-template-columns: 1.2fr .8fr;
  align-items: center; gap: 48px;
}

/* Text sitting directly on video gets a tight cream halo on the glyphs
   themselves rather than a glow behind the block. A localised glow reads as
   glare; a halo hugs the letterforms and stays invisible as a shape while
   still separating the text from whatever frame is behind it. */


.hero-kicker {
  color: var(--copper-ink); font-weight: 700; font-size: .95rem;
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800; color: var(--charcoal-dark); line-height: 1.35;
  margin-bottom: 18px;
}

.hero-sub { font-size: 1.08rem; color: var(--charcoal); max-width: 560px; margin-bottom: 32px; }

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-block; font-weight: 700; font-size: 1rem;
  padding: 13px 34px; border-radius: 999px;
  transition: transform .18s var(--ease-out-strong),
              background .22s, color .22s, border-color .22s;
}
/* A button that doesn't move when pressed feels like it didn't hear you. */
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--charcoal-dark); color: var(--cream); }
.btn-primary:hover { background: var(--copper-deep); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(-1px) scale(.97); }
.btn-ghost { border: 1.5px solid var(--charcoal); color: var(--charcoal); }
.btn-ghost:hover { background: var(--charcoal); color: var(--cream); }

.hero-logo img {
  width: min(360px, 80%); margin-inline: auto;
}

/* The hero is now a dark panel, so its type flips to light — the only way
   text over a fully-visible video reads without veiling the video. */
.hero h1        { color: var(--cream); }
.hero .hero-sub { color: rgba(243, 244, 238, .90); }
.hero-kicker    { color: var(--copper-lite); }
.hero h1, .hero .hero-sub, .hero-kicker {
  text-shadow: 0 1px 12px rgba(20, 21, 18, .55);
}
.hero .btn-primary { background: var(--cream); color: var(--charcoal-dark); }
.hero .btn-primary:hover { background: var(--copper-lite); color: var(--charcoal-dark); }
.hero .btn-ghost {
  border-color: rgba(243, 244, 238, .75); color: var(--cream);
  background: transparent; backdrop-filter: none;
}
.hero .btn-ghost:hover { background: var(--cream); color: var(--charcoal-dark); }

/* ============ Sections ============ */
.section { padding-block: 80px; }
.section-alt { background: var(--cream-deep); }

.section-head { margin-bottom: 44px; }
.section-head h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800;
  color: var(--charcoal-dark);
}

/* ============ About ============ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.about-lead {
  font-size: 1.25rem; font-weight: 700; color: var(--charcoal-dark);
  border-inline-start: 4px solid var(--copper); padding-inline-start: 20px;
}
.about-body { font-size: 1.05rem; color: var(--charcoal); }

/* ============ Slider ============ */
.slider { position: relative; max-width: 1140px; margin-inline: auto; padding-inline: 24px; }

.slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;           /* Firefox */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--cream);
}
.slider-track::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 24px;
  padding: 48px;
  min-height: 400px;
}

.slide-art svg { width: 100%; height: auto; }

/* blueprint drawing styles — same language as the logo */
.bp-grid path { stroke: var(--charcoal); stroke-opacity: .13; stroke-width: 1; fill: none; }
.bp-line path, .bp-line rect { stroke: var(--charcoal); stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bp-copper path, .bp-copper rect { stroke: var(--copper); stroke-width: 6; fill: none; stroke-linecap: round; }
.bp-copper circle { fill: var(--copper); stroke: none; }

.slide-count {
  display: inline-block; font-weight: 700; font-size: .85rem;
  color: var(--copper-deep); letter-spacing: .12em; margin-bottom: 10px;
  direction: ltr;   /* keep "01 / 06" reading order in RTL */
}
.slide-info h3 {
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800;
  color: var(--charcoal-dark); margin-bottom: 12px;
}
.slide-info p { font-size: 1.05rem; color: var(--charcoal); max-width: 460px; }

.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%;
  border: none; cursor: pointer;
  display: grid; place-items: center;
  background: var(--charcoal-dark); color: var(--cream);
  box-shadow: var(--shadow);
  transition: background .2s, transform .15s var(--ease-out-strong);
}
/* SVG chevrons (not text) so RTL bidi mirroring can't flip them */
.slider-arrow svg {
  width: 20px; height: 20px;
  stroke: currentColor; stroke-width: 2.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.slider-arrow:hover { background: var(--copper-deep); }
/* keep the vertical centring while the press scales it */
.slider-arrow:active { transform: translateY(-50%) scale(.9); }
/* physical left/right on purpose: arrows always mean "that direction" */
.slider-arrow.prev { left: 2px; }
.slider-arrow.next { right: 2px; }

.slider-dots { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.slider-dots button {
  width: 10px; height: 10px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--charcoal); opacity: .25;
  transition: opacity .25s, background .25s, transform .25s var(--ease-out-strong);
}
.slider-dots button:active { transform: scale(.8); }
.slider-dots button.active { opacity: 1; background: var(--copper); transform: scale(1.3); }

/* ============ Services ============ */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.service-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; transition: transform .25s, box-shadow .25s;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.service-icon { width: 44px; height: 44px; display: block; margin-bottom: 14px; }
.service-icon .si   { stroke: var(--charcoal); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.service-icon .si-c { stroke: var(--copper);   stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { font-size: 1.15rem; font-weight: 800; color: var(--charcoal-dark); margin-bottom: 8px; }
.service-card p { font-size: .95rem; color: var(--charcoal); }

/* ============ Why us ============ */
.section-dark { background: var(--charcoal-dark); color: var(--cream); }
.section-dark .section-head h2 { color: var(--cream); }

/* A statement, not a card grid: one oversized claim, then four plain text
   groups under a single copper rule. The section itself is the panel. */
.why-lead {
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-weight: 800; color: var(--cream); line-height: 1.55;
  max-width: 30ch;
  margin-bottom: 40px;
}
.why-lead em { font-style: normal; color: var(--copper-lite); }

.why-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 30px 56px;
  border-top: 2px solid var(--copper);
  padding-top: 34px;
}
.why-item h3 { color: var(--copper-lite); font-size: 1.12rem; font-weight: 800; margin-bottom: 6px; }
.why-item p { color: rgba(243, 244, 238, .85); font-size: .97rem; max-width: 46ch; }

/* ============ Contact ============ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }

.contact-cards { display: grid; gap: 16px; }
/* Rows, not boxes — the last echo of the card anatomy. Generous block padding
   keeps each row an easy phone-first tap target. */
.contact-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 4px;
  border-top: 1px solid var(--line);
  transition: padding-inline-start .25s var(--ease-out-strong),
              border-color .25s;
}
.contact-cards { gap: 0; }
.contact-card:first-child { border-top: 2px solid var(--copper); }
a.contact-card:hover {
  padding-inline-start: 14px;
  border-top-color: var(--copper);
}
.contact-label { font-size: .8rem; font-weight: 700; color: var(--copper-ink); }
.contact-value { font-size: 1.05rem; font-weight: 700; color: var(--charcoal-dark); }

.contact-map iframe {
  width: 100%; height: 340px; border: 0;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.map-link {
  display: inline-block; margin-top: 12px;
  font-size: .9rem; font-weight: 700; color: var(--copper-ink);
}
.map-link:hover { color: var(--charcoal-dark); }

/* Footer lives in its own section further down — the original single-column
   rules were removed when it became a four-column layout. */

/* ============ Scroll reveal ============ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-text { order: 2; }
  .hero-logo { order: 1; }
  .hero-sub { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .about-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }

  .slide { grid-template-columns: 1fr; padding: 32px 28px 40px; text-align: center; }
  .slide-art { max-width: 340px; margin-inline: auto; }
  .slide-info p { margin-inline: auto; }
}

@media (max-width: 720px) {
  .main-nav {
    position: absolute; top: var(--header-h); inset-inline: 0;
    flex-direction: column; gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .main-nav.open { max-height: 320px; }
  /* .main-nav is absolutely positioned here, so it no longer occupies a grid
     track — without this the actions would land in the middle column. */
  .header-inner { grid-template-columns: 1fr auto; }
  .main-nav a { padding: 14px 24px; border-top: 1px solid var(--line); }
  .nav-burger { display: block; }

  .services-grid, .why-grid { grid-template-columns: 1fr; }
  .brand-text small { display: none; }
}

/* ============================================================
   PRELOADER — blueprint draw-on
   The whole sequence is CSS-driven (JS only removes the layer at
   the end), so it starts painting the instant the stylesheet lands
   instead of waiting on a script. Every path carries pathLength="1",
   which normalises its length to 1 unit — that's what lets a single
   keyframe drive strokes of wildly different real lengths at the
   same visual speed.
   ============================================================ */

/* Applied to <html> by the inline head script, before first paint. */
.uac-loading { overflow: hidden; }
html:not(.uac-loading) .preloader { display: none; }

.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--cream);
  transition: transform .75s cubic-bezier(.76, 0, .24, 1), opacity .5s ease .2s;
  /* Failsafe: if JS never runs, the layer still gets out of the way. */
  animation: preFailsafe 0s linear 9s forwards;
}
@keyframes preFailsafe { to { transform: translateY(-102%); visibility: hidden; } }

.preloader.done { transform: translateY(-102%); opacity: 0; }

.pre-inner { display: grid; justify-items: center; gap: 22px; width: min(340px, 66vw); }

/* Skip: quiet, late, and honest — clicking anywhere already skipped, this just
   says so. Fades in only after the draw has had 1.6s to make its case. */
.pre-skip {
  position: absolute; bottom: 30px; inset-inline-end: 30px;
  font-family: inherit; font-size: .82rem; font-weight: 700;
  color: var(--charcoal); background: transparent;
  border: 1.5px solid rgba(73, 74, 69, .35); border-radius: 999px;
  padding: 6px 18px; cursor: pointer;
  opacity: 0; animation: skipIn .4s var(--ease-out-strong) 1.6s forwards;
  transition: border-color .2s, transform .15s var(--ease-out-strong);
}
.pre-skip:hover  { border-color: var(--charcoal); }
.pre-skip:active { transform: scale(.94); }
@keyframes skipIn { to { opacity: .8; } }

.pre-mark { width: 100%; height: auto; overflow: visible; }

/* One keyframe drives every stroke. */
@keyframes uacDraw { to { stroke-dashoffset: 0; } }

.pre-mark path[pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* linear, NOT an ease. Every stroke used to ease in and out of itself, so the
     pen visibly braked at the end of each segment and took off again at the
     start of the next. Constant speed is what reads as one continuous hand. */
  animation: uacDraw var(--dur, .5s) linear var(--d, 0s) forwards;
}

/* Draw order: frame rails -> corner brackets -> U straight on into the A as ONE
   unbroken stroke -> the U's remaining right-hand stub -> C -> copper crossbar.
   The U and A share a stroke because the artwork does: the A's left leg IS the
   U's bottom curve continuing upward, and the U's right side is a separate stub
   with a mitred cut. Drawing them apart broke a letter that isn't broken.

   --dur is LENGTH / 1225 units-per-second for every path, so the pen moves at
   one speed throughout. pathLength="1" normalises each path to a length of 1,
   which is what lets a single keyframe drive them all — but it also means a
   1000-unit rail and a 190-unit bracket finish in whatever time you give them.
   Equal durations therefore mean wildly unequal speeds. Keep the ratio if you
   retune: pick a new speed and recompute, don't hand-edit one value.

   Timeline ends at 4.13s. The JS HOLD constant in main.js must stay at or above
   this — retune both together. */
.pm-t    { --d: 0.15s; --dur: 1.06s; }   /* 1304u  upper bracket, one stroke from
                                            its first point at bottom-left: up,
                                            across, and down the right side */
.pm-b    { --d: 0.30s; --dur: 1.06s; }   /* 1304u  lower bracket, mirrored */
.pm-u    { --d: 1.12s; --dur: 1.27s; }   /* 1550u  U + A, one stroke */
.pm-stub { --d: 2.44s; --dur: 0.24s; }   /*  288u  the U's last fragment */
.pm-c    { --d: 2.78s; --dur: 0.90s; }   /* 1098u */

/* Copper bar wipes in last. */
.pm-bar {
  clip-path: inset(0 100% 0 0);
  animation: barWipe .35s cubic-bezier(.65, 0, .35, 1) 3.78s forwards;
}
@keyframes barWipe { to { clip-path: inset(0 0 0 0); } }

.pre-word {
  font-size: .82rem; font-weight: 700; color: var(--charcoal);
  letter-spacing: .06em; text-align: center;
  opacity: 0; transform: translateY(8px);
  animation: preWord .6s ease 2.90s forwards;
}
@keyframes preWord { to { opacity: .78; transform: none; } }

.pre-bar-track {
  width: 120px; height: 2px; border-radius: 2px;
  background: var(--line); overflow: hidden;
}
.pre-bar-track i {
  display: block; height: 100%; width: 100%;
  background: var(--copper); transform-origin: left center;
  transform: scaleX(0);
  animation: preProgress 4s cubic-bezier(.4, 0, .2, 1) .1s forwards;
}
/* transform-origin stays physical-left in both languages on purpose:
   a progress bar reads as "filling up", not as text. */
@keyframes preProgress { to { transform: scaleX(1); } }

/* Respect the OS setting: show the finished mark, skip the performance. */
@media (prefers-reduced-motion: reduce) {
  .pre-mark path[pathLength] { stroke-dashoffset: 0; animation: none; }
  .pm-bar    { clip-path: none; animation: none; }
  .pre-word  { opacity: .78; transform: none; animation: none; }
  .pre-bar-track i { animation-duration: .6s; }
  .preloader { transition-duration: .3s; }
  .pre-skip  { display: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--charcoal-dark);
  color: rgba(243, 244, 238, .78);
  border-top: 3px solid var(--copper);
  padding-block: 0;
  text-align: start;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-block: 60px 44px;
}

.f-col h4 {
  position: relative;
  font-size: .95rem; font-weight: 800; color: var(--cream);
  margin-bottom: 20px; padding-bottom: 12px;
}
/* copper underline grows in once the column reveals */
.f-col h4::after {
  content: ''; position: absolute; bottom: 0; inset-inline-start: 0;
  width: 0; height: 2px; background: var(--copper);
  transition: width .6s cubic-bezier(.65, 0, .35, 1) .25s;
}
.f-col.visible h4::after { width: 34px; }

/* --- brand column --- */
.footer-logo {
  height: 66px; width: auto; margin-bottom: 18px;
  /* no plate — assets/uac-logo-light.svg draws in cream, so it reads
     straight off the charcoal */
}
.f-legal { font-size: .88rem; line-height: 1.9; margin-bottom: 12px; }
.f-tag {
  font-size: .92rem; font-weight: 700; color: var(--copper-lite);
  border-inline-start: 2px solid var(--copper);
  padding-inline-start: 12px;
}

/* --- link columns --- */
.f-links { list-style: none; display: grid; gap: 11px; }
.f-links a {
  position: relative; display: inline-block;
  font-size: .92rem; color: rgba(243, 244, 238, .78);
  transition: color .22s ease, padding-inline-start .22s ease;
}
/* a copper dash slides out of the link as the label slides in */
.f-links a::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 50%;
  width: 0; height: 1.5px; background: var(--copper);
  transition: width .22s ease;
}
.f-links a:hover { color: var(--cream); padding-inline-start: 20px; }
.f-links a:hover::before { width: 13px; }

/* --- contact column --- */
.f-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; margin-bottom: 8px;
  border: 1px solid rgba(243, 244, 238, .12); border-radius: 10px;
  font-size: .92rem; color: rgba(243, 244, 238, .82);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.f-row svg {
  flex: 0 0 18px; width: 18px; height: 18px;
  fill: none; stroke: var(--copper); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .22s ease;
}
a.f-row:hover {
  transform: translateY(-3px);
  border-color: var(--copper);
  background: rgba(192, 132, 96, .10);
  color: var(--cream);
}
a.f-row:hover svg { transform: scale(1.12); }
.f-row-static { cursor: default; }

/* --- bottom bar --- */
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-block: 20px;
  border-top: 1px solid rgba(243, 244, 238, .12);
}
/* .65 put this at 4.2:1 — under AA, and that predates the credit line below.
   Nested opacity compounds, so anything inside it gets dimmed twice. */
.footer-copy { font-size: .84rem; opacity: .78; }

/* Studio credit — sits under the copyright rather than beside it, so the
   ownership line reads first and the credit stays quiet. `Wyzcode` is a Latin
   brand name inside Arabic copy, so the span is isolated to stop bidi
   reordering from moving it around the sentence. */
.footer-credit {
  display: block;
  margin-top: 4px;
  font-size: .8rem;
  /* no extra opacity — it would multiply with .footer-copy's and drop this
     under AA. Smaller type is enough to keep it secondary. */
  unicode-bidi: isolate;
}

.f-top {
  font-size: .84rem; font-weight: 700; color: var(--copper-lite);
  transition: opacity .2s ease;
}
.f-top::after { content: ' \2191'; }
.f-top:hover { opacity: .7; }

/* Lets any .reveal element stagger via an inline --d. */
.reveal { transition-delay: var(--d, 0s); }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 34px; }
  .f-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ============================================================
   VIDEO BACKGROUNDS
   Three sections carry a muted looping clip behind a cream scrim.
   The scrim is the whole point: the palette stays cream/charcoal/copper
   and the footage reads as texture, not as a video player. Opacity is
   tuned per section because the text sitting on top differs.
   ============================================================ */

.section-video { position: relative; isolation: isolate; overflow: hidden; }

/* The video layer sits behind everything in the section.
   z-index is 0 here, NOT -1. A negative z-index pushes the element behind its
   own stacking context's background, and iOS Safari will not composite a
   hardware-decoded <video> that lands there — it paints the poster frame once
   and then never updates it. The symptom is a video that looks like a still
   image on iPhone while working perfectly on desktop. Keep this at 0 and lift
   the content above it instead. */
.sec-video { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Everything in the section that ISN'T the video layer rides above it.
   Selector is written by exclusion so it keeps working if a section's content
   wrapper is renamed. */
.section-video > *:not(.sec-video) { position: relative; z-index: 1; }

.bg-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Desaturating pulls the footage toward the brand's muted range —
     raw stock colour (blue sky, orange autumn) fights the cream. */
  /* --vid-bright tames glare (bright sky, white drawing paper) WITHOUT
     hiding the footage — unlike raising the scrim, which would. Darker
     footage actually reads slightly *more* against a cream scrim. */
  filter: saturate(var(--vid-sat, .6)) contrast(var(--vid-con, .95)) brightness(var(--vid-bright, 1));
}

/* ---- The dimming lives here ----------------------------------------
   Three stops per section: --s1 top, --s2 middle, --s3 bottom. The middle
   is where the footage shows most; the ends stay heavier so text near the
   section edges keeps its contrast. Lower the numbers to reveal more video,
   raise them to hide it. Nothing else needs touching.
   -------------------------------------------------------------------- */
/* Background videos must never show player chrome — Chromium will render
   default controls in some states even with no `controls` attribute. */
.bg-video::-webkit-media-controls,
.bg-video::-webkit-media-controls-enclosure,
.bg-video::-webkit-media-controls-panel { display: none !important; }
.bg-video { pointer-events: none; }

.sec-scrim {
  position: absolute; inset: 0;
  /* Three stacked layers, topmost first:
     1. vignette  — --vig darkens the corners, so the section has depth
                    instead of reading as one flat wash
     2. dark wash — --tint, a flat charcoal veil over everything
     3. cream scrim — the original --s1/2/3 gradient sitting on the video   */
  background:
    radial-gradient(125% 95% at 50% 42%,
      transparent 28%, rgba(38, 39, 35, var(--vig, 0)) 100%),
    linear-gradient(rgba(43, 44, 40, var(--tint, 0)), rgba(43, 44, 40, var(--tint, 0))),
    linear-gradient(to bottom,
      rgba(243, 244, 238, var(--s1)) 0%,
      rgba(243, 244, 238, var(--s2)) 45%,
      rgba(243, 244, 238, var(--s3)) 100%);
}

/* Hero — a directional charcoal gradient instead of a flat veil: dense behind
   the copy, near-clear over the open side so the footage stays fully visible.
   No localised bright patch, so nothing reads as glare. The text side flips
   with `dir`, so the gradient direction has to flip with it. */
.hero { --vid-sat: .62; --vid-bright: .58; --vid-con: 1.12; --hero-dir: 270deg; }
[dir="ltr"] .hero { --hero-dir: 90deg; }

.hero .sec-scrim {
  background: linear-gradient(var(--hero-dir),
    rgba(33, 34, 30, .96)  4%,
    rgba(45, 46, 42, .88) 42%,
    rgba(51, 52, 47, .55) 72%,
    rgba(51, 52, 47, .22) 100%);
}

/* Designs — same principle as the hero, turned vertical: the scrim holds
   dense through the heading and lead at the top, then opens up over the card
   grid, which has its own background. A gradient rather than a glow behind the
   text, so nothing reads as glare. */
/* .54 rather than .66: this clip has a teal drafting template in it, the one
   colour on the page that fights cream/copper. Pulling saturation down keeps
   the scene readable while the teal stops registering as a second accent. */
#designs  { --vid-sat: .58; --vid-bright: .32; --vid-con: 1.24;
            --tint: .18; --vig: .38; --ds-dir: 270deg; }
[dir="ltr"] #designs { --ds-dir: 90deg; }
/* Directional, like the hero: the sequence column sits on the dense cream
   side and the footage stays visible on the other. The old top-to-bottom
   wash existed to back six floating cards; the cards are gone. */
#designs .sec-scrim {
  background:
    radial-gradient(125% 95% at 50% 42%,
      transparent 28%, rgba(38, 39, 35, var(--vig)) 100%),
    linear-gradient(rgba(43, 44, 40, var(--tint)), rgba(43, 44, 40, var(--tint))),
    linear-gradient(var(--ds-dir),
      rgba(243, 244, 238, .96)  0%,
      rgba(243, 244, 238, .93) 46%,
      rgba(243, 244, 238, .55) 70%,
      rgba(243, 244, 238, .20) 100%);
}
@media (max-width: 900px) {
  /* One column on phones — the footage peeks through a uniform wash instead. */
  #designs .sec-scrim {
    background:
      linear-gradient(rgba(43, 44, 40, var(--tint)), rgba(43, 44, 40, var(--tint))),
      linear-gradient(rgba(243, 244, 238, .93), rgba(243, 244, 238, .93));
  }
}

/* Why Us — dark section, so the scrim is charcoal instead of cream and the
   footage is dimmed further; cream text needs the backing to stay dark. */
.section-dark.section-video .sec-scrim {
  background:
    linear-gradient(to bottom,
      rgba(51, 52, 47, var(--s1)) 0%,
      rgba(51, 52, 47, var(--s2)) 45%,
      rgba(51, 52, 47, var(--s3)) 100%);
}
.section-dark.section-video { --s1: .84; --s2: .70; --s3: .84; }
.section-dark.section-video { --vid-sat: .45; --vid-bright: .8; }

/* Phones now get a lighter 720px encode rather than no video at all — see the
   sourceFor() helper in main.js. Under reduced-motion, or with the browser's
   data-saver on, main.js still attaches no src and the poster carries the
   section. Nothing to hide here; the poster IS the fallback. If the poster
   fails too, the scrim colour carries it. */
.sec-video { background: var(--cream); }
.section-dark .sec-video { background: var(--charcoal-dark); }

/* ============================================================
   DESIGNS — process timeline
   ============================================================ */
.designs-lead {
  max-width: 720px;
  font-size: 1.12rem; font-weight: 600; color: var(--charcoal-dark);
  border-inline-start: 4px solid var(--copper);
  padding-inline-start: 20px;
  margin-bottom: 44px;
}

/* The process is DRAWN, not boxed: one copper line with drafting-diamond
   nodes, the same pen that draws the logo in the intro. Six identical cards
   were the one place this page read as template; the sequence is the site's
   own motif spent where trust is won. */
.design-steps {
  list-style: none;
  position: relative;
  max-width: 640px;
  counter-reset: step;
}
.design-steps::before {
  content: '';
  /* Centred through the nodes, exactly: the diamonds are 30px boxes starting
     at inline 5px, so their centre is 20px — a 2px line needs inline 19px.
     Starts at the FIRST node's centre (28px top pad + 15px half-node) rather
     than above it; a stub poking past the first stop reads as misaligned. */
  position: absolute; inset-block: 43px 26px; inset-inline-start: 19px;
  width: 2px;
  background: linear-gradient(var(--copper) 72%, rgba(192, 132, 96, .25));
}

.design-step {
  position: relative;
  padding-block: 18px;
  padding-inline-start: 62px;
}
.design-step + .design-step { border-top: 1px solid rgba(73, 74, 69, .12); }

/* node: a drafting tick on the line, numbered */
.design-step::before {
  content: '';
  position: absolute; inset-inline-start: 5px; top: 28px;
  width: 26px; height: 26px;
  background: var(--cream);
  border: 2px solid var(--copper);
  transform: rotate(45deg);
}
/* handover lands like the logo's copper crossbar */
.design-step:last-child::before { background: var(--copper); }
.design-step:last-child h3      { color: var(--copper-ink); }

.ds-num {
  position: absolute; inset-inline-start: 5px; top: 28px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; line-height: 1;
  color: var(--copper-ink);
}
.design-step:last-child .ds-num { color: var(--cream); }

.design-step h3 {
  font-size: 1.1rem; font-weight: 800; color: var(--charcoal-dark);
  margin-bottom: 4px;
}
.design-step p { font-size: .95rem; color: var(--ink); max-width: 56ch; }

@media (max-width: 560px) {
  .designs-lead { font-size: 1.02rem; }
  .design-step { padding-inline-start: 54px; }
}

/* ============================================================
   HERO ENTRANCE
   The intro lifts, then the hero assembles rather than being
   simply revealed — the two motions read as one continuous move.
   Driven by .uac-ready on <html>, which main.js sets the moment
   the preloader is dismissed.
   ============================================================ */

/* Hold state. The failsafe animation matters: if JS ever dies after the head
   script ran, .uac-ready never arrives and the hero would stay invisible
   forever. This forces it visible at 9s regardless — same guarantee the
   preloader itself has. */
.hero-anim {
  opacity: 0;
  transform: translateY(26px);
  animation: heroFailsafe 0s linear 9s forwards;
}
@keyframes heroFailsafe { to { opacity: 1; transform: none; } }

.uac-ready .hero-anim {
  animation: none;
  opacity: 1;
  transform: none;
  transition:
    opacity   .9s cubic-bezier(.22, 1, .36, 1) var(--hd, 0s),
    transform .9s cubic-bezier(.22, 1, .36, 1) var(--hd, 0s);
}

/* The footage settles out of a slight push-in as the copy arrives, so the
   whole panel feels like it lands rather than just appearing. */
.hero .bg-video {
  transform: scale(1.09); transform-origin: center;
  animation: heroVidFailsafe 0s linear 9s forwards;
}
@keyframes heroVidFailsafe { to { transform: scale(1); } }
.uac-ready .hero .bg-video { animation: none; }
.uac-ready .hero .bg-video {
  transform: scale(1);
  transition: transform 2.6s cubic-bezier(.22, 1, .36, 1);
}

/* The gradient panel itself washes in. Same failsafe reasoning as .hero-anim —
   a stuck hold state here would leave the copy on a half-strength scrim, which
   is the one place contrast actually depends on it. */
.hero .sec-scrim {
  opacity: .55;
  animation: heroScrimFailsafe 0s linear 9s forwards;
}
@keyframes heroScrimFailsafe { to { opacity: 1; } }
.uac-ready .hero .sec-scrim { animation: none; }
.uac-ready .hero .sec-scrim {
  opacity: 1;
  transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim { opacity: 1; transform: none; animation: none; }
  .uac-ready .hero-anim { transition: none; }
  .hero .bg-video, .uac-ready .hero .bg-video { transform: none; transition: none; }
  .hero .sec-scrim { opacity: 1; }
}