/* ==========================================================================
   FOUR ONE FIVE VISUALS - standalone page skin
   Structure and type follow the SkyClinics reference (fixed atmospheric
   hero the page scrolls over, numbered service frames that alternate
   sides, glass inquiry card, slim dark footer). Colour keeps the 415 fog
   identity: mist page, graphite type, steel-blue accent. Loaded alone -
   style.css is NOT included on this page. js/main.js still drives the
   nav toggle, cursor, reveal, hover-gated media and portfolio modal.
   ========================================================================== */

:root {
  --bg: #eef1f5;
  --bg-rgb: 238, 241, 245;
  --bg-alt: #f5f7fa;
  --text: #1c2127;
  --text-rgb: 28, 33, 39;
  --text-2: #5a646f;
  --heading: #0f1216;
  --accent: #5e87ab;
  --accent-rgb: 94, 135, 171;
  --accent-end: #8fb3d1;
  --accent-deep: #3f6688;
  --num: #9aa3ad;
  --label: #8b95a0;
  --line: rgba(28, 33, 39, 0.2);
  --footer-bg: #1c2127;
  --footer-end: #0f1216;
  --sans: "Satoshi", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --nav-h: 80px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --frame-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), 0 8px 24px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.04);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light only; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: #fff; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.label {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--label);
}

.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 200;
  background: var(--text);
  color: var(--bg);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 6px 6px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   Aperture cursor (main.js) - graphite ring
   -------------------------------------------------------------------------- */
.cursor-ring, .cursor-trail { display: none; }
@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
  body.has-cursor .cursor-ring, body.has-cursor .cursor-trail { display: block; }
  .cursor-ring, .cursor-trail {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform, width, height;
  }
  .cursor-ring {
    width: 34px; height: 34px;
    border: 1.5px solid var(--text);
    transition: width 0.22s ease, height 0.22s ease, opacity 0.2s ease;
  }
  .cursor-ring::after {
    content: "";
    position: absolute;
    inset: 50%;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--text);
    transform: translate(-50%, -50%);
  }
  .cursor-ring.is-tight { width: 18px; height: 18px; }
  .cursor-trail {
    width: 52px; height: 52px;
    border: 1px solid rgba(28, 33, 39, 0.28);
    transition: width 0.3s ease, height 0.3s ease;
  }
  .cursor-trail.is-tight { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
  body.has-cursor .cursor-ring, body.has-cursor .cursor-trail { display: none; }
}

/* --------------------------------------------------------------------------
   Navigation - brandline left, pill link group + filled CTA right.
   Transparent over the hero; frosts once the page starts scrolling.
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.nav.is-solid {
  background: rgba(238, 241, 245, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(28, 33, 39, 0.08);
}
.nav-inner {
  width: 100%;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Brandline - "DPM › Four One Five Visuals". Same build-out-on-hover
   behaviour as the other division pages, in this page's type. */
.nav-brandline { display: flex; align-items: center; gap: 0.6em; white-space: nowrap; }
.nav-parent {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.5;
  transition: opacity 0.25s ease, font-size 0.32s ease 0.28s;
}
.nav-parent:hover { opacity: 1; font-size: 0.95rem; transition: opacity 0.25s ease, font-size 0.32s ease; }
.pw-rest {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  opacity: 0;
  transform: translateY(0.35em);
  transition: max-width 0.32s ease, opacity 0.28s ease, transform 0.32s ease;
}
.nav-parent .pw-rest:nth-of-type(1) { transition-delay: 0s; }
.nav-parent .pw-rest:nth-of-type(2) { transition-delay: 0.08s; }
.nav-parent .pw-rest:nth-of-type(3) { transition-delay: 0.16s; }
.nav-parent .pw-rest:nth-of-type(4) { transition-delay: 0.24s; }
.nav-parent:hover .pw-rest { max-width: 6ch; opacity: 1; transform: translateY(0); }
.nav-parent:hover .pw-rest:nth-of-type(1) { transition-delay: 0.08s; }
.nav-parent:hover .pw-rest:nth-of-type(2) { transition-delay: 0.16s; }
.nav-parent:hover .pw-rest:nth-of-type(3) { transition-delay: 0.24s; }
.nav-parent:hover .pw-rest:nth-of-type(4) { transition-delay: 0.32s; }
.nav-caret { font-size: 1.05rem; color: var(--text); opacity: 0.45; }
.nav-logo {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text);
  transition: opacity 0.25s ease, font-size 0.32s ease 0.28s;
}
.nav-logo .logo-accent { font-weight: 500; }
.nav-parent:hover ~ .nav-logo { opacity: 0.5; font-size: 0.66rem; transition: opacity 0.25s ease, font-size 0.32s ease; }

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  height: 41px;
  padding: 0 0.3rem 0 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  background: rgba(238, 241, 245, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 1.1rem;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(28, 33, 39, 0.75);
  transition: color 0.3s ease;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--text); }
.nav-links .nav-cta {
  margin-left: 0.5rem;
  padding: 0 1.5rem;
  border-radius: 4px;
  background: var(--text);
  color: var(--bg);
  transition: background 0.3s ease, color 0.3s ease;
}
.nav-links .nav-cta:hover, .nav-links .nav-cta:focus-visible { background: var(--accent-deep); color: #fff; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(28, 33, 39, 0.25);
  border-radius: 6px;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 0 1.25rem;
    border: 0;
    border-bottom: 1px solid rgba(28, 33, 39, 0.1);
    border-radius: 0;
    background: rgba(238, 241, 245, 0.97);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
  }
  .nav-links.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-links li { text-align: center; }
  .nav-links a { display: block; height: auto; padding: 0.9rem 1.5rem; font-size: 0.95rem; }
  .nav-links .nav-cta { margin: 0.75rem auto 0; display: inline-block; width: fit-content; padding: 0.8rem 1.6rem; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* --------------------------------------------------------------------------
   Hero - fixed to the viewport; the page scrolls over it. A still frame
   of the hillside shot with fog rolling across it (canvas, js/fofv.js)
   and a mist veil that resolves into the page colour at the bottom edge.
   -------------------------------------------------------------------------- */
.hero {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100svh;
  z-index: 0;
  overflow: hidden;
  background: #d9e3ee;
}
.hero-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* Static fog for the first paint and for reduced motion, under the canvas. */
.hero-mist {
  position: absolute;
  inset: -20%;
  filter: blur(60px);
  background:
    radial-gradient(42% 30% at 22% 38%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(48% 34% at 70% 62%, rgba(211, 224, 238, 0.7) 0%, rgba(211, 224, 238, 0) 72%),
    radial-gradient(60% 40% at 50% 90%, rgba(233, 238, 244, 0.9) 0%, rgba(233, 238, 244, 0) 75%);
}
.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(217, 227, 238, 0.5) 0%,
    rgba(233, 238, 244, 0.28) 38%,
    rgba(238, 241, 245, 0.45) 70%,
    rgba(238, 241, 245, 0.92) 100%);
}
.hero-fog {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-brand {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--nav-h) 1.5rem 0;
  will-change: opacity, transform;
}
/* Soft page-coloured halo behind the brand so graphite type carries over
   the footage - the reference does exactly this behind every text block. */
.hero-brand::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(84vw, 760px);
  height: min(64vh, 460px);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(var(--bg-rgb), 0.78) 0%, rgba(var(--bg-rgb), 0.45) 38%, rgba(var(--bg-rgb), 0) 70%);
  z-index: -1;
}
.hero-logo img {
  width: min(56vw, 340px);
  height: auto;
  filter: drop-shadow(0 14px 34px rgba(51, 64, 80, 0.26));
}
.hero-kicker {
  margin-top: 1.7rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text);
}
.hero-tag {
  margin-top: 0.55rem;
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--text);
}
.hero-link {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--accent-deep);
}
.hero-link .arrow { transition: transform 0.5s var(--ease-out); }
.hero-link:hover .arrow { transform: translateX(6px); }

.scroll-hint {
  position: fixed;
  left: 2rem;
  bottom: 2rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: opacity 0.4s ease;
}
.scroll-hint .arrow { display: inline-block; animation: hint-bob 2.2s ease-in-out infinite; }
.scroll-hint.is-hidden { opacity: 0; pointer-events: none; }
@keyframes hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
body.reduced-motion .scroll-hint .arrow { animation: none; }

/* --------------------------------------------------------------------------
   Page body - rides up over the fixed hero. The top edge is a long
   transparent-to-page gradient so the first frame surfaces out of the fog
   rather than arriving on a hard edge.
   -------------------------------------------------------------------------- */
.page {
  position: relative;
  z-index: 10;
  margin-top: 100vh;
  margin-top: 100svh;
  background: var(--bg);
}
.page::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -34vh;
  height: 34vh;
  background: linear-gradient(to bottom,
    rgba(var(--bg-rgb), 0) 0%,
    rgba(var(--bg-rgb), 0.15) 22%,
    rgba(var(--bg-rgb), 0.5) 55%,
    rgba(var(--bg-rgb), 0.85) 80%,
    var(--bg) 100%);
  pointer-events: none;
}

/* Media frames - 3px radius, layered soft shadow, halo underneath. */
.frame {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(28, 33, 39, 0.04) 0%, rgba(var(--accent-rgb), 0.06) 100%);
  box-shadow: var(--frame-shadow);
  contain: layout paint;
}
.frame > img, .frame > video, .frame .svc-media, .frame .svc-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The loops and stills are 2.35:1 pictures letterboxed inside 16:9 files;
   a 2.35:1 frame with object-fit: cover crops the black bars exactly. */
.frame-235 { aspect-ratio: 2.35 / 1; }
.frame-16 { aspect-ratio: 16 / 9; }
.halo { position: relative; }
.halo::before {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 16px;
  background: radial-gradient(ellipse at center, rgba(var(--bg-rgb), 0.6) 0%, rgba(var(--bg-rgb), 0.3) 30%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.frame-label {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  padding: 0.42rem 0.75rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f4f6f9;
  background: rgba(24, 28, 33, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.reel .reel-item { opacity: 0; transition: opacity 1s ease; }
.reel .reel-item.is-active { opacity: 1; }
.svc-slideshow img { opacity: 0; transition: opacity 1.1s ease; }
.svc-slideshow img.is-active { opacity: 1; }

/* Scroll entrances. .reveal rises and fades (main.js adds .is-in);
   .wipe frames un-clip from the left instead, like the reference. */
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s var(--ease-out); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal.wipe { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.5s var(--ease-out); }
html.js .reveal.wipe-center { clip-path: inset(25%); }
html.js .reveal.wipe.is-in { clip-path: inset(0); }
html.js body.reduced-motion .reveal { opacity: 1; transform: none; clip-path: none; transition: none; }

/* --------------------------------------------------------------------------
   Intro - showpiece frame, the begin-here button, the approach statement
   -------------------------------------------------------------------------- */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2vh clamp(0.5rem, 1.5vw, 1.25rem) 4vh;
}
/* Shrunk for now: the clips and a few stills in the reel are low resolution, so a
   smaller frame keeps them from being scaled up as far. Raise the cap once the
   sources are re-rendered. */
.intro .intro-frame { width: 100%; max-width: min(100%, 880px); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
.reel { aspect-ratio: 16 / 9; }
/* The listing-film loop is still a 2.35:1 picture letterboxed in a 16:9 file;
   scaling it 1.32x in a 16:9 frame crops the baked-in bars. */
.reel video.reel-item[data-bars] { transform: scale(1.32); }
.intro-cta { margin-top: 7vh; position: relative; }
.intro-cta-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 56px;
  background: rgba(var(--accent-rgb), 0.9);
  border: 1px solid rgba(var(--accent-rgb), 0.85);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(var(--accent-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s var(--ease-out);
}
.intro-cta-btn::before {
  content: "";
  position: absolute;
  inset: -28px -48px;
  border-radius: 20px;
  background: radial-gradient(ellipse at center, rgba(var(--bg-rgb), 1) 0%, rgba(var(--bg-rgb), 0.92) 35%, rgba(var(--bg-rgb), 0.6) 65%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}
.intro-cta-btn:hover { background: var(--accent-deep); box-shadow: 0 8px 32px rgba(var(--accent-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14); transform: translateY(-2px); }
.intro-cta-kicker { font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase; opacity: 0.75; }
.intro-cta-label { font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase; transition: letter-spacing 0.7s var(--ease-out); }
.intro-cta-btn:hover .intro-cta-label { letter-spacing: 0.28em; }
.intro-cta-line {
  display: block;
  width: 80px;
  height: 1px;
  margin-top: 4px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform-origin: center;
  animation: cta-breathe 3.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes cta-breathe { 0%, 100% { transform: scaleX(1); opacity: 0.7; } 50% { transform: scaleX(1.35); opacity: 1; } }
body.reduced-motion .intro-cta-line { animation: none; }

.approach {
  min-height: 56vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10vh clamp(1.25rem, 5vw, 3rem);
}
.approach-inner { max-width: 900px; position: relative; }
.approach-inner::before {
  content: "";
  position: absolute;
  inset: -16px -24px;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(var(--bg-rgb), 0.92) 0%, rgba(var(--bg-rgb), 0.75) 40%, rgba(var(--bg-rgb), 0.35) 70%, transparent 100%);
  z-index: -1;
}
.approach .label { font-size: 0.85rem; display: block; margin-bottom: 2rem; }
.approach h2 {
  font-size: clamp(1.8rem, 3.8vw, 2.75rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--heading);
}

/* --------------------------------------------------------------------------
   Services - numbered blocks, media and copy trading sides
   -------------------------------------------------------------------------- */
.svc {
  position: relative;
  padding: 3vh clamp(1.25rem, 8vw, 7rem);
  isolation: isolate;
}
.svc-row { display: flex; align-items: center; gap: 5vw; }
.svc-row.is-reverse { flex-direction: row-reverse; }
.svc-media-col { flex-shrink: 0; }
.svc-copy { flex: 1 1 0; position: relative; }
.svc-copy::before {
  content: "";
  position: absolute;
  inset: -16px -24px;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(var(--bg-rgb), 0.92) 0%, rgba(var(--bg-rgb), 0.75) 40%, rgba(var(--bg-rgb), 0.35) 70%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}
.svc-num { display: block; margin-bottom: 1rem; color: var(--num); }
.svc h3 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--heading);
  margin-top: 0.75rem;
}
.svc p {
  font-size: 0.95rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--text-2);
  margin-top: 1.5rem;
  max-width: 54ch;
}
.svc--left .svc-media-col { width: 52%; }
.svc--wide { padding-left: clamp(1.25rem, 12vw, 10rem); }
.svc--wide .svc-copy { max-width: 50%; margin-bottom: 2.5rem; }
.svc--wide .svc-media-col { width: 70%; }
.svc--right .svc-media-col { width: 54%; }

.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 2.8rem;
  color: var(--accent-deep);
  position: relative;
}
.cta-link::before {
  content: "";
  position: absolute;
  inset: -36px -44px -30px;
  border-radius: 16px;
  background: radial-gradient(ellipse at center, rgba(var(--bg-rgb), 0.97) 0%, rgba(var(--bg-rgb), 0.88) 35%, rgba(var(--bg-rgb), 0.5) 65%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}
.cta-text {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: letter-spacing 0.5s var(--ease-out), color 0.4s ease;
}
.cta-line {
  width: 100px;
  flex: 0 1 100px;   /* gives way on narrow screens instead of wrapping the label */
  min-width: 36px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-end));
  transform-origin: left center;
  transition: width 0.5s var(--ease-out);
}
.cta-arrow { display: inline-block; font-size: 1rem; line-height: 1; transition: transform 0.5s var(--ease-out); }
.cta-link:hover .cta-text, .cta-link:focus-visible .cta-text { letter-spacing: 0.2em; color: var(--accent); }
.cta-link:hover .cta-line, .cta-link:focus-visible .cta-line { width: 140px; }
.cta-link:hover .cta-arrow, .cta-link:focus-visible .cta-arrow { transform: translateX(6px); }

.svc-secondary {
  padding: 4vh clamp(1.25rem, 12vw, 10rem) 6vh;
  max-width: 78ch;
}
.svc-secondary .label { display: block; margin-bottom: 0.8rem; }
.svc-secondary p { font-size: 0.95rem; line-height: 1.7; color: var(--text-2); }
.svc-secondary a { color: var(--accent-deep); border-bottom: 1px solid rgba(var(--accent-rgb), 0.4); transition: border-color 0.3s ease; }
.svc-secondary a:hover { border-bottom-color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   Process strip
   -------------------------------------------------------------------------- */
.process { padding: 8vh clamp(1.25rem, 8vw, 7rem) 6vh; }
.process-head { max-width: 700px; margin-bottom: 3.5rem; }
.process-head .label { display: block; margin-bottom: 1.2rem; }
.process-head h2, .work-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--heading);
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--line);
}
.step { padding-top: 1.4rem; position: relative; }
.step::before { content: ""; position: absolute; top: -1px; left: 0; width: 34px; height: 1px; background: var(--accent); }
.step .label { display: block; font-size: 0.68rem; margin-bottom: 0.9rem; }
.step h4 { font-size: 1.15rem; font-weight: 400; letter-spacing: -0.01em; color: var(--heading); }
.step p { font-size: 0.88rem; line-height: 1.65; color: var(--text-2); margin-top: 0.6rem; }

/* --------------------------------------------------------------------------
   Selected work - tiles open the modal player (main.js)
   -------------------------------------------------------------------------- */
.work { padding: 6vh clamp(1.25rem, 8vw, 7rem) 10vh; }
.work-head { max-width: 700px; margin-bottom: 3rem; }
.work-head .label { display: block; margin-bottom: 1.2rem; }
.work-head p { font-size: 0.95rem; color: var(--text-2); margin-top: 1rem; }
.portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.portfolio-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 2.35 / 1;   /* thumbnails are letterboxed 2.35:1 too */
  padding: 0;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background-image: var(--thumb);
  background-size: cover;
  background-position: center;
  background-color: #1c2127;
  box-shadow: var(--frame-shadow);
  cursor: pointer;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s ease;
}
.portfolio-tile:hover, .portfolio-tile:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03), 0 14px 34px rgba(0, 0, 0, 0.1), 0 34px 60px rgba(0, 0, 0, 0.08);
}
.tile-play-icon {
  position: absolute;
  left: 50%; top: 50%;
  width: 64px; height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.5s var(--ease-out), background 0.3s ease;
}
.tile-play-icon svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.portfolio-tile:hover .tile-play-icon,
.portfolio-tile:focus-visible .tile-play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1.08); background: rgba(255, 255, 255, 0.24); }
/* No hover on touch screens: keep the button visible as the tap cue. */
@media (hover: none) {
  .tile-play-icon { opacity: 1; }
  .portfolio-tile { background-image: var(--thumb-touch, var(--thumb)); }  /* touch screens get a different frame */
}

/* --------------------------------------------------------------------------
   Closing - headline + badge on the left, glass inquiry card on the right
   -------------------------------------------------------------------------- */
.closing {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: 12vh clamp(1.25rem, 6vw, 5rem);
  overflow: hidden;
}
.closing-copy { max-width: 520px; }
.closing-img {
  width: 230px;
  height: 98px;            /* 2.35:1 - crops the letterbox out of the still */
  object-fit: cover;
  border-radius: 3px;
  opacity: 0.88;
  transform: rotate(3deg);
  margin: 0 0 1.4rem 2.5rem;
  box-shadow: var(--frame-shadow);
}
.closing h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.3rem);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
}
.grad-text {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 400;
}
.badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.8rem;
  padding: 0.6rem 1.4rem;
  border-radius: 4px;
  background: var(--text);
  color: #fff;
  font-size: clamp(0.72rem, 1.3vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.badge .dot { opacity: 0.5; }

.card {
  position: relative;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(var(--bg-rgb), 0.9));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  border: 1px solid rgba(var(--text-rgb), 0.1);
  box-shadow: 0 12px 48px rgba(var(--text-rgb), 0.12), 0 4px 16px rgba(var(--text-rgb), 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.card-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-end), var(--accent-deep));
  background-size: 200% 100%;
  animation: bar-slide 7s linear infinite;
}
@keyframes bar-slide { from { background-position: 0 0; } to { background-position: 200% 0; } }
body.reduced-motion .card-bar { animation: none; }
.card-body { padding: 2.5rem 3rem; }
.card h3 { font-size: 2.2rem; font-weight: 200; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); }
.card h3 .grad-text { font-weight: 300; }
.form-label { display: block; margin-top: 1rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); }
.fields { margin-top: 2.5rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { position: relative; margin-bottom: 1.5rem; }
.field input {
  width: 100%;
  padding: 12px 0;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(var(--text-rgb), 0.15);
  border-radius: 0;
  outline: 0;
  transition: border-color 0.3s ease;
}
.field input:focus { border-bottom-color: var(--accent); }
.field label {
  position: absolute;
  left: 0; top: 12px;
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(var(--text-rgb), 0.5);
  pointer-events: none;
  transform-origin: left center;
  transition: 0.3s var(--ease-out);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  top: -10px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.card-submit {
  width: 100%;
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--text);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease;
}
.card-submit:hover, .card-submit:focus-visible { background: var(--accent-deep); }
.card-submit .cta-arrow { transition: transform 0.5s var(--ease-out); }
.card-submit:hover .cta-arrow { transform: translateX(5px); }
.card-or { text-align: center; margin: 1rem 0 0.5rem; font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(var(--text-rgb), 0.45); }
.card-alt {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.card-alt .cta-arrow { transition: transform 0.5s var(--ease-out); }
.card-alt:hover .cta-arrow { transform: translateX(5px); }
.card-addr {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  color: rgba(var(--text-rgb), 0.55);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Footer - slim dark bar
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 50;
  background: linear-gradient(180deg, var(--footer-bg), var(--footer-end));
  padding: 1.25rem 5%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #fff;
}
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-brand { font-size: 1.3rem; font-weight: 200; letter-spacing: -0.01em; }
.footer-social { display: flex; align-items: center; gap: 1rem; }
.footer-social a { display: flex; opacity: 0.5; transition: opacity 0.3s ease; }
.footer-social a:hover { opacity: 1; }
.footer-social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.footer-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); }
.footer-small { font-size: 0.78rem; color: rgba(255, 255, 255, 0.4); white-space: nowrap; }
.footer-links { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.footer-links a { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); transition: color 0.3s ease; white-space: nowrap; }
.footer-links a:hover { color: #fff; }
.footer-links .sep { color: rgba(255, 255, 255, 0.25); font-size: 0.7rem; line-height: 1; }

/* --------------------------------------------------------------------------
   Portfolio modal (main.js)
   -------------------------------------------------------------------------- */
.portfolio-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.portfolio-modal.open { display: flex; pointer-events: auto; }
.portfolio-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(238, 241, 245, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.portfolio-modal.open .portfolio-modal-backdrop { opacity: 1; }
.portfolio-modal-container {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 1200px;
  aspect-ratio: 16 / 10;
  background: #101215;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(45, 58, 72, 0.4);
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.45s var(--ease-out), opacity 0.35s ease;
}
.portfolio-modal.open .portfolio-modal-container { transform: scale(1); opacity: 1; }
.portfolio-modal-close {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  z-index: 2;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(28, 32, 38, 0.85);
  color: #f4f6f9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.portfolio-modal-close:hover { transform: scale(1.08); background: rgba(60, 66, 74, 0.9); }
.portfolio-modal-video { width: 100%; height: 100%; object-fit: contain; background: #101215; }
html.modal-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .closing { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 900px) {
  .svc-row, .svc-row.is-reverse { flex-direction: column; align-items: stretch; gap: 2rem; }
  .svc--left .svc-media-col, .svc--wide .svc-media-col, .svc--right .svc-media-col { width: 100%; }
  .svc--wide { padding-left: clamp(1.25rem, 8vw, 7rem); }
  .svc--wide .svc-copy { max-width: none; }
  .svc { padding-top: 5vh; padding-bottom: 5vh; }
  .steps { grid-template-columns: 1fr 1fr; }
  .closing { grid-template-columns: 1fr; min-height: 0; padding-top: 8vh; }
  .closing-img { display: none; }
  .card-body { padding: 2rem 1.6rem; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .scroll-hint { left: 1.25rem; bottom: 1.25rem; }
  .hero-brand::before { width: 92vw; }
}
@media (max-width: 560px) {
  /* Compact brandline so the menu toggle keeps its place on phones */
  .nav-inner { gap: 1rem; }
  .nav-brandline { gap: 0.45em; min-width: 0; }
  .nav-parent { font-size: 0.58rem; letter-spacing: 0.14em; }
  .nav-parent:hover { font-size: 0.78rem; }
  .nav-logo { font-size: 0.78rem; letter-spacing: 0.16em; }
  .nav-parent:hover ~ .nav-logo { font-size: 0.58rem; }
  .steps { grid-template-columns: 1fr; }
  .card h3 { font-size: 1.8rem; }
  .footer-row { justify-content: center; text-align: center; }
}