/* ============================================================================
   COPYPRINT — Home page
   Design tokens · light theme (forced) · yellow + black on paper
   ========================================================================== */

:root {
  /* palette */
  --paper:      #FBFAF7;   /* warm white "paper" */
  --paper-2:    #F2EFE7;   /* section tint */
  --ink:        #0E0E0E;   /* near-black */
  --ink-2:      #1C1C1C;
  --muted:      #6A675F;   /* secondary text */
  --line:       #E3DFD4;   /* hairlines */
  --yellow:     #FFD400;   /* brand yellow */
  --yellow-2:   #FFCB05;
  --yellow-ink: #C99A00;   /* yellow shadow */
  --white:      #ffffff;

  /* type */
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;

  /* layout */
  --shell: 1240px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 14px;

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-ink: cubic-bezier(.7, 0, .2, 1);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* faint paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
/* the hidden attribute must always win over component display rules */
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--yellow); color: var(--ink); }

.shell { width: min(100% - 2*var(--pad), var(--shell)); margin-inline: auto; }

/* ------------------------------------------------------------------ buttons */
.btn {
  --bg: var(--ink); --fg: var(--paper); --bd: var(--ink);
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--display); font-weight: 600; font-size: .98rem;
  letter-spacing: -.01em; line-height: 1;
  padding: 1.05em 1.5em; border: 1.5px solid var(--bd);
  background: var(--bg); color: var(--fg);
  border-radius: 100px; cursor: pointer;
  transition: transform .35s var(--ease), background .25s, color .25s, box-shadow .35s var(--ease);
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(14,14,14,.45); }
.btn:hover svg { transform: translateX(4px); }
.btn--sm { padding: .8em 1.15em; font-size: .9rem; }

.btn--solid { --bg: var(--yellow); --fg: var(--ink); --bd: var(--ink); }
.btn--solid:hover { --bg: var(--ink); --fg: var(--yellow); }

.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--ink); }
.btn--ghost:hover { --bg: var(--ink); --fg: var(--paper); }
.btn--ghost-light { --fg: var(--paper); --bd: rgba(251,250,247,.4); }
.btn--ghost-light:hover { --bg: var(--paper); --fg: var(--ink); --bd: var(--paper); }

.btn--ink { --bg: var(--ink); --fg: var(--yellow); --bd: var(--ink); }
.btn--ink:hover { --bg: var(--paper); --fg: var(--ink); --bd: var(--paper); }
.btn--ink-ghost { --bg: transparent; --fg: var(--ink); --bd: rgba(14,14,14,.45); }
.btn--ink-ghost:hover { --bg: var(--ink); --fg: var(--yellow); --bd: var(--ink); }

/* ------------------------------------------------------------------ shared bits */
.seclabel {
  font-family: var(--display); font-weight: 600; font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: .7em; margin-bottom: 1.4rem;
}
.seclabel--light { color: rgba(251,250,247,.65); }

/* registration target mark (printing motif) */
.regmark {
  width: 18px; height: 18px; flex: none; position: relative; display: inline-block;
  border-radius: 50%; border: 1.5px solid currentColor;
}
.regmark::before, .regmark::after {
  content: ""; position: absolute; background: currentColor;
}
.regmark::before { left: 50%; top: -5px; bottom: -5px; width: 1.5px; transform: translateX(-50%); }
.regmark::after { top: 50%; left: -5px; right: -5px; height: 1.5px; transform: translateY(-50%); }

/* ink highlighter behind words */
.hl-ink { position: relative; white-space: nowrap; }
.hl-ink::after {
  content: ""; position: absolute; left: -.08em; right: -.08em; bottom: .06em; height: .42em;
  background: var(--yellow); z-index: -1; transform: skewX(-6deg) scaleX(0);
  transform-origin: left; transition: transform .6s var(--ease);
}
.in-view .hl-ink::after, .reveal.in-view .hl-ink::after { transform: skewX(-6deg) scaleX(1); }

/* reveal animation base */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in-view {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s);
}

/* ============================================================================
   LOADER — white paper, ink roller sweeps & prints the wordmark, then lifts
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--paper);
  display: grid; place-items: center;
  overflow: hidden;
}
.loader__crops { position: absolute; inset: clamp(16px, 4vw, 42px); pointer-events: none; }
.loader__crops span { position: absolute; width: 26px; height: 26px; opacity: .5; }
.loader__crops span::before, .loader__crops span::after { content: ""; position: absolute; background: var(--ink); }
.loader__crops span::before { width: 1.5px; height: 100%; }
.loader__crops span::after { height: 1.5px; width: 100%; }
.loader__crops span:nth-child(1) { top: 0; left: 0; }
.loader__crops span:nth-child(2) { top: 0; right: 0; }
.loader__crops span:nth-child(2)::before { right: 0; } .loader__crops span:nth-child(2)::after { right: 0; }
.loader__crops span:nth-child(3) { bottom: 0; left: 0; }
.loader__crops span:nth-child(3)::before { bottom: 0; } .loader__crops span:nth-child(3)::after { bottom: 0; }
.loader__crops span:nth-child(4) { bottom: 0; right: 0; }
.loader__crops span:nth-child(4)::before { bottom: 0; right: 0; } .loader__crops span:nth-child(4)::after { bottom: 0; right: 0; }

.loader__stage {
  position: relative;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 8.5rem); letter-spacing: -.04em; line-height: 1;
}
.loader__ghost { color: transparent; -webkit-text-stroke: 1.5px rgba(14,14,14,.16); }
.loader__ink {
  position: absolute; inset: 0; color: var(--ink);
  clip-path: inset(0 100% 0 0);   /* hidden, revealed by JS animation */
}
.loader__roller {
  position: absolute; top: -12%; bottom: -12%; left: 0; width: clamp(34px, 6vw, 60px);
  background: linear-gradient(90deg, rgba(14,14,14,0), var(--ink) 40%, var(--ink) 60%, rgba(14,14,14,.85));
  transform: translateX(-140%); opacity: 0;
  filter: blur(.3px);
  box-shadow: 0 0 30px rgba(14,14,14,.25);
}
.loader__meta {
  position: absolute; bottom: clamp(26px, 7vw, 64px); left: 0; right: 0;
  display: flex; gap: .8em; justify-content: center; align-items: center;
  font-family: var(--display); font-size: .72rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--muted);
}
.loader__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--yellow-ink); }

/* play */
.loader.is-print .loader__roller {
  opacity: 1; animation: roller 1.15s var(--ease-ink) forwards;
}
.loader.is-print .loader__ink {
  animation: ink 1.15s var(--ease-ink) forwards;
}
@keyframes roller { 0% { transform: translateX(-140%); } 100% { transform: translateX(calc(100% + 140%)); } }
@keyframes ink { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }

/* lift away */
.loader.is-lift { transition: clip-path .8s var(--ease-ink), transform .8s var(--ease-ink); clip-path: inset(0 0 100% 0); }
.loader.is-done { display: none; }

/* ============================================================================
   PREVIEW EXPIRED
   ========================================================================== */
.expired {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center; text-align: center;
  padding: var(--pad);
}
.expired__marks { position: absolute; inset: clamp(16px,4vw,40px); pointer-events: none; }
.expired__marks span { position: absolute; width: 28px; height: 28px; opacity: .5; }
.expired__marks span::before, .expired__marks span::after { content: ""; position: absolute; background: var(--yellow); }
.expired__marks span::before { width: 1.5px; height: 100%; } .expired__marks span::after { height: 1.5px; width: 100%; }
.expired__marks span:nth-child(1){top:0;left:0}
.expired__marks span:nth-child(2){top:0;right:0}.expired__marks span:nth-child(2)::before{right:0}.expired__marks span:nth-child(2)::after{right:0}
.expired__marks span:nth-child(3){bottom:0;left:0}.expired__marks span:nth-child(3)::before{bottom:0}.expired__marks span:nth-child(3)::after{bottom:0}
.expired__marks span:nth-child(4){bottom:0;right:0}.expired__marks span:nth-child(4)::before{bottom:0;right:0}.expired__marks span:nth-child(4)::after{bottom:0;right:0}
.expired__inner { max-width: 560px; }
.expired__eyebrow { font-family: var(--display); letter-spacing: .25em; text-transform: uppercase; font-size: .8rem; color: var(--yellow); margin-bottom: 1.4rem; }
.expired__title { font-size: clamp(3rem, 13vw, 7rem); line-height: .92; }
.expired__title span { color: var(--yellow); }
.expired__text { color: rgba(251,250,247,.7); margin: 1.6rem auto 2.2rem; max-width: 44ch; }
.expired__cta { margin-inline: auto; }
.expired__foot { margin-top: 2.4rem; font-size: .82rem; color: rgba(251,250,247,.45); letter-spacing: .04em; }
.expired__foot strong { color: var(--paper); }

/* ------------------------------------------------------------------ preview badge */
.pbadge {
  position: fixed; left: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px); z-index: 120;
  display: inline-flex; align-items: center; gap: .55em;
  background: var(--ink); color: var(--paper);
  font-family: var(--display); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .6em .85em; border-radius: 100px; box-shadow: 0 10px 30px -14px rgba(0,0,0,.6);
}
.pbadge__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 0 var(--yellow); animation: pulse 2s infinite; }
.pbadge__sep { width: 1px; height: 12px; background: rgba(251,250,247,.25); }
.pbadge__time { color: var(--yellow); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,212,0,.5)} 70%{box-shadow:0 0 0 8px rgba(255,212,0,0)} 100%{box-shadow:0 0 0 0 rgba(255,212,0,0)} }

/* ============================================================================
   HEADER
   ========================================================================== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: transform .4s var(--ease), background .4s, box-shadow .4s, border-color .4s;
  border-bottom: 1.5px solid transparent;
}
.header__inner { display: flex; align-items: center; gap: 1.5rem; padding: 1.1rem 0; }
.header.scrolled { background: rgba(251,250,247,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
.header.hide { transform: translateY(-110%); }

.brand { margin-right: auto; font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.04em; }

.nav { display: flex; gap: 1.9rem; }
.nav a { font-family: var(--display); font-weight: 500; font-size: .98rem; position: relative; padding: .2em 0; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--yellow); transition: width .3s var(--ease); }
.nav a:hover::after { width: 100%; }

.burger { display: none; width: 46px; height: 46px; border: 1.5px solid var(--ink); background: transparent; border-radius: 50%; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 50%; height: 1.8px; width: 18px; background: var(--ink); transform: translateX(-50%); transition: .3s var(--ease); }
.burger span:nth-child(1) { top: 17px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: translateX(-50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: translateX(-50%) rotate(-45deg); }

/* mobile drawer */
.mnav {
  position: fixed; inset: 0; z-index: 99; background: var(--paper);
  padding: clamp(5rem, 18vw, 7rem) var(--pad) var(--pad);
  display: flex; flex-direction: column; justify-content: center; gap: .4rem;
  transform: translateY(-100%); transition: transform .5s var(--ease);
}
.mnav.open { transform: none; }
.mnav nav { display: flex; flex-direction: column; }
.mnav a { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 10vw, 3rem); letter-spacing: -.03em; padding: .35em 0; border-bottom: 1.5px solid var(--line); display: flex; align-items: baseline; gap: .6em; }
.mnav a span { font-size: .9rem; color: var(--yellow-ink); font-weight: 500; }
.mnav__cta { margin-top: 2rem; justify-content: center; }

/* ============================================================================
   HERO — clean, image-forward
   ========================================================================== */
.hero { position: relative; padding: clamp(7rem, 14vh, 9.5rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

.hero__eyebrow { font-family: var(--display); font-weight: 500; letter-spacing: .04em; color: var(--muted); font-size: clamp(.82rem, 2.5vw, .95rem); display: flex; align-items: center; gap: .7em; }
.hero__eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--yellow); flex: none; }

.hero__title { font-size: clamp(3rem, 8vw, 6.4rem); line-height: .9; margin: 1.1rem 0 0; letter-spacing: -.04em; text-transform: lowercase; }
.hero__title span { display: block; }
.hero__hl { position: relative; width: max-content; }
.hero__hl em { position: absolute; left: -.04em; right: -.04em; bottom: .1em; height: .3em; background: var(--yellow); z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform .8s .5s var(--ease); border-radius: 2px; }
.is-loaded .hero__hl em { transform: scaleX(1); }

.hero__lede { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--ink-2); max-width: 44ch; margin-top: clamp(1.4rem, 3vw, 2rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(1.6rem, 3vw, 2.2rem); }

.hero__facts { display: flex; gap: clamp(1.4rem, 4vw, 2.6rem); margin-top: clamp(2rem, 4vw, 2.8rem); border-top: 1.5px solid var(--line); padding-top: clamp(1.2rem, 3vw, 1.6rem); flex-wrap: wrap; }
.hero__facts li { display: flex; flex-direction: column; gap: .15rem; }
.hero__facts b { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.03em; line-height: 1; }
.hero__facts sup { font-size: .42em; vertical-align: super; }
.hero__facts span { font-size: .82rem; color: var(--muted); }

/* hero image */
.hero__media { position: relative; }
.hero__media-block { position: absolute; z-index: 0; right: -4%; top: -8%; width: 64%; height: 88%; background: var(--yellow); border-radius: var(--radius); }
.hero__media img { position: relative; z-index: 1; width: 100%; aspect-ratio: 7 / 5; object-fit: cover; border-radius: var(--radius); border: 1.5px solid var(--ink); box-shadow: 0 40px 80px -44px rgba(14,14,14,.5); }
.hero__media-tag { position: absolute; z-index: 2; left: clamp(.8rem,2vw,1.1rem); bottom: clamp(.8rem,2vw,1.1rem); background: var(--ink); color: var(--paper); font-family: var(--display); font-size: .76rem; letter-spacing: .02em; padding: .5em .9em; border-radius: 100px; }

/* ============================================================================
   MARQUEE
   ========================================================================== */
.marquee { background: var(--ink); color: var(--paper); overflow: hidden; padding: 1.1rem 0; border-block: 1.5px solid var(--ink); }
.marquee__track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee__track span { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 3vw, 1.7rem); letter-spacing: -.01em; white-space: nowrap; padding-right: 1rem; }
.marquee__track b { color: var(--yellow); font-weight: 400; padding: 0 .4em; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ============================================================================
   ABOUT
   ========================================================================== */
.about { padding: clamp(4.5rem, 11vw, 8rem) 0; }
.about__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.about__title { font-size: clamp(2.1rem, 5vw, 3.6rem); text-wrap: balance; max-width: 22ch; margin: .4rem 0 1.4rem; }
.about__lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ink-2); }
.about__sub { color: var(--muted); margin-top: 1rem; }

.about__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); border: 1.5px solid var(--ink); box-shadow: 0 36px 70px -44px rgba(14,14,14,.45); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; margin-top: clamp(1.8rem, 4vw, 2.4rem); border-top: 1.5px solid var(--ink); padding-top: clamp(1.6rem, 4vw, 2.2rem); }
.stat { display: flex; flex-direction: column; gap: .3rem; }
.stat__num { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.04em; }
.stat__num sup { font-size: .4em; vertical-align: super; }
.stat__label { font-size: .88rem; color: var(--muted); max-width: 18ch; }

/* ============================================================================
   SERVICES — dark section, big interactive list
   ========================================================================== */
.services { background: var(--ink); color: var(--paper); padding: clamp(4.5rem, 11vw, 8rem) 0; position: relative; }
.services__head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.services__title { font-size: clamp(2.4rem, 7vw, 5rem); color: var(--paper); }
.services__intro { color: rgba(251,250,247,.6); max-width: 40ch; }
.seclabel--light .regmark--light { color: var(--yellow); }

.svc { border-top: 1.5px solid rgba(251,250,247,.16); }
.svc__row {
  display: grid; grid-template-columns: auto 1.3fr 1.6fr auto auto;
  align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 3.5vw, 2.3rem) 0; border-bottom: 1.5px solid rgba(251,250,247,.16);
  position: relative; transition: padding .4s var(--ease), color .3s;
}
.svc__row::before { content: ""; position: absolute; inset: 0; background: var(--yellow); transform: scaleY(0); transform-origin: bottom; transition: transform .4s var(--ease); z-index: -1; }
.svc__no { font-family: var(--display); font-size: .9rem; color: rgba(251,250,247,.4); letter-spacing: .1em; }
.svc__name { font-size: clamp(1.5rem, 4vw, 2.6rem); color: var(--paper); transition: color .3s; }
.svc__desc { color: rgba(251,250,247,.6); font-size: .98rem; transition: color .3s; }
.svc__tags { font-family: var(--display); font-size: .82rem; color: rgba(251,250,247,.4); letter-spacing: .02em; white-space: nowrap; transition: color .3s; }
.svc__arrow { font-size: 1.6rem; color: var(--yellow); transform: translateX(-6px); opacity: 0; transition: .35s var(--ease); }

@media (hover: hover) {
  .svc__row:hover { z-index: 1; padding-inline: clamp(1rem, 3vw, 2.2rem); color: var(--ink); }
  .svc__row:hover::before { transform: scaleY(1); }
  .svc__row:hover .svc__no { color: rgba(14,14,14,.5); }
  .svc__row:hover .svc__name { color: var(--ink); }
  .svc__row:hover .svc__desc { color: rgba(14,14,14,.75); }
  .svc__row:hover .svc__tags { color: rgba(14,14,14,.55); }
  .svc__row:hover .svc__arrow { color: var(--ink); opacity: 1; transform: translateX(0); }
}

/* ============================================================================
   WORK — real-photo gallery (clean, structured)
   ========================================================================== */
.work { padding: clamp(4.5rem, 11vw, 8rem) 0; background: var(--paper-2); }
.work__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2rem; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.work__title { font-size: clamp(2.6rem, 8vw, 5.5rem); margin-top: .4rem; }
.work__note { color: var(--muted); max-width: 32ch; }

.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(150px, 18vw, 232px); gap: clamp(.8rem, 1.6vw, 1.3rem); }
.ptile { position: relative; overflow: hidden; border-radius: var(--radius); border: 1.5px solid var(--ink); background: var(--ink); }
.ptile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.ptile:hover img { transform: scale(1.05); }
.ptile__cap { position: absolute; inset: auto 0 0 0; padding: clamp(1rem, 2vw, 1.4rem); display: flex; flex-direction: column; gap: .15rem; background: linear-gradient(transparent, rgba(14,14,14,.85) 60%); color: var(--paper); }
.ptile__cap span { font-family: var(--display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.ptile__cap h3 { font-size: clamp(1.05rem, 1.6vw, 1.4rem); color: var(--paper); }

.ptile--feature { grid-column: span 2; grid-row: span 2; }
.ptile--tall { grid-row: span 2; }
.ptile--wide { grid-column: span 3; }

/* ============================================================================
   TRUST / CERTIFICATES
   ========================================================================== */
.trust { background: var(--ink); color: var(--paper); padding: clamp(4.5rem, 11vw, 8rem) 0; }
.trust__head { max-width: min(100%, 960px); margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.trust__title { font-size: clamp(2rem, 5.2vw, 3.8rem); color: var(--paper); }
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem); }
.badge { border: 1.5px solid rgba(251,250,247,.18); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .7rem; transition: border-color .3s, transform .4s var(--ease), background .3s; }
.badge:hover { border-color: var(--yellow); transform: translateY(-5px); background: rgba(255,212,0,.05); }
.badge__mark { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--yellow); line-height: 1; letter-spacing: -.03em; }
.badge__mark sup { font-size: .4em; vertical-align: super; }
.badge__mark small { font-size: .35em; font-weight: 500; letter-spacing: .05em; }
.badge__name { font-size: 1.15rem; color: var(--paper); }
.badge__desc { font-size: .9rem; color: rgba(251,250,247,.6); }
.trust__line { margin-top: clamp(2rem, 5vw, 3rem); font-family: var(--display); font-size: clamp(1.1rem, 2.5vw, 1.6rem); color: rgba(251,250,247,.55); }
.trust__line strong { color: var(--paper); font-weight: 600; }

/* ============================================================================
   CTA BAND
   ========================================================================== */
.cta { background: var(--yellow); color: var(--ink); padding: clamp(4rem, 10vw, 7rem) 0; position: relative; overflow: hidden; }
.cta__inner { position: relative; text-align: center; }
.cta__eyebrow { font-family: var(--display); letter-spacing: .25em; text-transform: uppercase; font-size: .82rem; font-weight: 600; }
.cta__title { font-size: clamp(2.6rem, 9vw, 6rem); margin: .6rem 0 1rem; }
.cta__text { max-width: 44ch; margin: 0 auto 2rem; font-size: clamp(1.02rem, 1.5vw, 1.2rem); }
.cta__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================================
   CONTACT
   ========================================================================== */
.contact { background: var(--ink); color: var(--paper); padding: clamp(4.5rem, 11vw, 8rem) 0; }
.contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.contact__title { font-size: clamp(2.6rem, 7vw, 5rem); color: var(--paper); margin: .4rem 0 1.2rem; }
.contact__text { color: rgba(251,250,247,.6); max-width: 38ch; margin-bottom: 2rem; }
.contact__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.contact__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.ccard { border-top: 1.5px solid rgba(251,250,247,.2); padding-top: 1.1rem; }
.ccard__k { font-family: var(--display); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); display: block; margin-bottom: .6rem; }
.ccard__v { font-size: 1rem; color: rgba(251,250,247,.85); line-height: 1.7; }
.ccard__v a:hover { color: var(--yellow); }
.ccard__muted { color: rgba(251,250,247,.45); font-size: .9rem; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--paper); color: var(--ink); padding: clamp(3.5rem, 8vw, 6rem) 0 2rem; border-top: 1.5px solid var(--ink); }
.footer__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.footer__logo { width: clamp(220px, 34vw, 400px); height: auto; }
.footer__tag { color: var(--muted); max-width: 30ch; text-align: right; }
.footer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: clamp(2.5rem, 6vw, 3.5rem) 0; border-top: 1.5px solid var(--line); }
.footer__col { display: flex; flex-direction: column; gap: .7rem; }
.footer__col h4 { font-family: var(--display); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; font-weight: 600; }
.footer__col a, .footer__col p { font-size: .98rem; color: var(--ink-2); }
.footer__col a:hover { color: var(--yellow-ink); }

.footer__bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 2rem; border-top: 1.5px solid var(--line); }
.footer__copy { font-size: .85rem; color: var(--muted); }
.powered {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--display); font-size: .9rem; font-weight: 500;
  background: var(--ink); color: var(--paper); padding: .65em 1.05em; border-radius: 100px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.powered strong { color: var(--yellow); font-weight: 600; }
.powered svg { width: 1em; height: 1em; }
.powered__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.powered:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(14,14,14,.5); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .nav, .header__cta { display: none; }
  .burger { display: block; }
  .hero__inner { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  .hero__media { margin-top: 1rem; }
  .hero__media-block { top: -3%; height: 80%; }
  .about__inner { grid-template-columns: 1fr; }
  .about__media { max-width: 460px; }
  .about__title { max-width: 24ch; }
  .badges { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .hero { padding-top: clamp(6.5rem, 22vw, 8.5rem); }
  .hero__title { font-size: clamp(2.9rem, 15vw, 5rem); }

  .svc__row { grid-template-columns: auto 1fr; grid-template-areas: "no name" "desc desc" "tags tags"; gap: .5rem 1rem; }
  .svc__no { grid-area: no; } .svc__name { grid-area: name; }
  .svc__desc { grid-area: desc; } .svc__tags { grid-area: tags; white-space: normal; }
  .svc__arrow { display: none; }

  .pgrid { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(120px, 30vw, 175px); }
  .ptile--feature { grid-column: span 2; grid-row: span 2; }
  .ptile--tall { grid-row: span 1; }
  .ptile--wide { grid-column: span 2; }

  .contact__inner { grid-template-columns: 1fr; }
  .contact__cards { grid-template-columns: 1fr; }
  .footer__top { flex-direction: column; align-items: flex-start; }
  .footer__tag { text-align: left; }
  .footer__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 460px) {
  .badges { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .btn { width: 100%; justify-content: center; }
  .hero__actions .btn, .cta__actions .btn, .contact__actions .btn { width: auto; }
  .pgrid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ptile, .ptile--feature, .ptile--tall, .ptile--wide { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
}

/* ----- desktop: cap hero + about at one screen (100vh), centred ----- */
@media (min-width: 1025px) {
  .hero { min-height: 100vh; display: grid; align-content: center; padding-top: 5rem; padding-bottom: 2.5rem; }
  /* title scales with viewport height too, so the hero always fits one screen */
  .hero__title { font-size: clamp(2.6rem, min(7.5vw, 11.5vh), 6.4rem); }
  .hero__media img { aspect-ratio: auto; height: clamp(360px, 58vh, 540px); }

  .about { min-height: 100vh; display: grid; align-content: center; padding-top: 3rem; padding-bottom: 3rem; }
  .about__media img { aspect-ratio: auto; height: clamp(340px, 54vh, 520px); }
}

/* ============================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}