/* ============================================================
   DePARIS Studio
   Design tokens live in :root. Change a colour once, here.
   ============================================================ */

:root{
  --canvas:#E7E6E1;      /* cool pale stone — neutral, architectural, not tan */
  --canvas-2:#DEDCD5;
  --ink:#1D1C18;         /* neutral graphite near-black */
  --taupe:#86847C;       /* cool stone grey */
  --gold:#8F8368;        /* muted sand-taupe — hairlines & micro only, never fills */
  --ivory:#F4F2EC;       /* text over the film */
  --film:#100E0A;        /* film base */
  --client:#57544C;      /* client index names */

  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-label:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- the opening frame, before the film is played ----
     Photograph:  --opening-image: url("/assets/hero/opening.jpg");
                  --opening-scrim: rgba(16,14,10,.38);
     Flat colour: --opening-image: none;
                  --opening-scrim: var(--film);        (or any colour you like)
     The scrim is what keeps the wordmark readable over a photograph.
     Raise it towards .6 for a darker, more cinematic opening. */
  --opening-image:url("/assets/hero/opening.jpg");
  --opening-scrim:rgba(16,14,10,.38);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-label);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: `overflow:hidden` turns the body into a scroll container,
     which silently disables position:sticky on everything inside it.
     The first declaration is the fallback for browsers without `clip`. */
  overflow-x:hidden;
  overflow-x:clip;
}
::selection{background:var(--gold);color:var(--ivory)}

/* keyboard focus — visible everywhere, never on mouse click */
:focus{outline:none}
:focus-visible{
  outline:1px solid var(--gold);
  outline-offset:6px;
  border-radius:1px;
}
.hero :focus-visible,.site-header:not(.scrolled) :focus-visible{outline-color:var(--ivory)}

.skip-link{
  position:absolute;left:50%;top:0;transform:translate(-50%,-140%);
  z-index:60;background:var(--ink);color:var(--ivory);
  font-family:var(--font-label);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  padding:12px 20px;text-decoration:none;transition:transform .3s ease;
}
.skip-link:focus-visible{transform:translate(-50%,0)}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(20px,3vw,34px) clamp(22px,5vw,64px);
  color:var(--ivory);
  transition:color .6s ease, background .6s ease;
  mix-blend-mode:normal;
}
.site-header.scrolled{color:var(--ink)}
.brand{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(19px,2vw,23px);
  letter-spacing:.42em;
  text-indent:.42em;
  text-transform:uppercase;
}
.site-header nav a{
  color:inherit;text-decoration:none;
  font-size:11px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;
  text-indent:.34em;
  padding-bottom:4px;position:relative;
}
.site-header nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .5s ease;
}
.site-header nav a:hover::after,.site-header nav a:focus-visible::after{width:100%}

/* ---------- hero / film ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* Three stacked layers, lowest first:
     .film            solid ground, always there
     .film::after     the opening image + its scrim — what you see before play
     video            the film itself, fades in over both
   The opening layer is opaque, so it is what the visitor actually sees.
   Anything painted below it is a safety net, never a design choice. */
.film{position:absolute;inset:0;z-index:0;background:var(--film);overflow:hidden}

/* the opening frame */
.film::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(var(--opening-scrim),var(--opening-scrim)),
    var(--opening-image) center 42%/cover no-repeat;
  transition:opacity 1.4s ease;
}

.film video{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;
  /* contain, not cover: the film carries burned-in subtitles, so the frame
     must never be cropped, whatever the shape of the screen */
  object-fit:contain;object-position:center;
  opacity:0;transition:opacity 1.4s ease;
  border:0;background:var(--film);
}

/* once playing: the opening steps aside and the grain and vignette pull back,
   so nothing sits between the visitor and the film */
.hero.is-playing .film::after{opacity:0}
.hero.is-playing .film video{opacity:1}
.hero.is-playing .grain{opacity:.05}
.hero.is-playing .vignette{opacity:.3}
.hero.is-playing .scroll-cue{opacity:0}
.grain,.vignette,.scroll-cue{transition:opacity 1.2s ease}

.grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;mix-blend-mode:soft-light;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 30%,transparent 40%,rgba(8,6,3,.55))}

.hero-inner{position:relative;z-index:3;width:100%;color:var(--ivory);text-align:center;
  padding:0 clamp(22px,5vw,64px)}
.hero-inner::before{content:"";position:absolute;inset:-30% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 58% at 50% 50%, rgba(8,7,4,.42), transparent 72%)}
.eyebrow{font-size:11px;font-weight:400;letter-spacing:.5em;text-transform:uppercase;
  text-indent:.5em;color:rgba(243,238,228,.72);margin-bottom:clamp(18px,3vh,30px)}
.hero-mark{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(58px,13vw,190px);line-height:.9;letter-spacing:.02em;
}
.hero-mark .cap{letter-spacing:.06em}
.hero-rule{width:0;height:1px;background:var(--gold);margin:clamp(22px,4vh,38px) auto clamp(16px,3vh,26px)}
.hero-line{font-size:clamp(11px,1.4vw,13px);font-weight:400;letter-spacing:.44em;
  text-transform:uppercase;text-indent:.44em;color:rgba(243,238,228,.9)}
.scroll-cue{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);
  color:rgba(243,238,228,.6);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue span{display:block;width:1px;height:44px;background:linear-gradient(rgba(243,238,228,.6),transparent);
  animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:.9}}

/* ---------- the opening card, and how it steps aside ---------- */
.hero-inner{transition:opacity 1.1s ease, transform 1.1s ease}
.hero.is-playing .hero-inner{
  opacity:0;transform:translateY(-14px);pointer-events:none;
}

/* ---------- play ---------- */
.play{
  display:inline-flex;flex-direction:column;align-items:center;gap:16px;
  margin-top:clamp(34px,6vh,58px);
  background:none;border:0;padding:6px;cursor:pointer;color:var(--ivory);
}
.play-disc{
  position:relative;display:block;
  width:clamp(58px,7vw,76px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(243,238,228,.5);
  transition:border-color .5s ease, transform .5s ease, background .5s ease;
}
/* the triangle, drawn rather than typed so it stays crisp at any size */
.play-disc::after{
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-42%,-50%);
  border-style:solid;border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent var(--ivory);
  transition:border-left-color .5s ease;
}
.play:hover .play-disc,.play:focus-visible .play-disc{
  border-color:var(--gold);background:rgba(143,131,104,.12);transform:scale(1.06);
}
.play:hover .play-disc::after,.play:focus-visible .play-disc::after{border-left-color:var(--gold)}
.play-label{
  font-family:var(--font-label);font-size:10px;font-weight:400;
  letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;
  color:rgba(243,238,228,.78);transition:color .5s ease;
}
.play:hover .play-label,.play:focus-visible .play-label{color:var(--ivory)}
.play.is-loading{cursor:progress}
.play.is-loading .play-disc{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.rotate-hint{
  margin-top:clamp(20px,3vh,28px);
  font-family:var(--font-label);font-size:9px;font-weight:400;
  letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;
  color:rgba(243,238,228,.5);
}

/* ---------- pause and sound, while the film runs ---------- */
.controls{
  position:absolute;z-index:4;right:clamp(22px,5vw,64px);bottom:clamp(22px,4vh,34px);
  display:flex;align-items:center;gap:clamp(14px,2vw,22px);
  opacity:0;pointer-events:none;transition:opacity .8s ease;
}
.controls[hidden]{display:none}
.hero.is-playing .controls{opacity:1;pointer-events:auto}
.ctrl{
  position:relative;background:none;border:0;padding:6px 2px;cursor:pointer;
  font-family:var(--font-label);font-size:10px;font-weight:400;
  letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;
  color:rgba(243,238,228,.72);
  transition:color .5s ease;
  /* the widest label decides the width, so the line never shifts when it flips */
  min-width:8ch;text-align:center;
}
.ctrl:hover,.ctrl:focus-visible{color:var(--ivory)}
.ctrl::after{
  content:"";position:absolute;left:0;right:10px;bottom:0;height:1px;
  background:currentColor;opacity:.4;transition:opacity .5s ease;
}
.ctrl:hover::after,.ctrl:focus-visible::after{opacity:.9}
.ctrl-sep{width:1px;height:11px;background:rgba(243,238,228,.28)}

/* while the film runs, the frame itself pauses and resumes on click */
.hero.is-playing{cursor:pointer}
.hero.is-playing .controls{cursor:auto}

/* ---------- stacked sections ----------
   Each band pins to the top of the screen and the next one slides over it.
   The hero is pinned too, so the film sits underneath the whole stack. */
.hero-sentinel{height:0}
.hero{position:sticky;top:0;z-index:0}
.flow > section{
  position:sticky;top:0;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--canvas);
  box-shadow:0 -40px 70px rgba(10,8,5,.22);
}
.flow > section.contact{background:var(--canvas-2)}
.flow > section:nth-of-type(1){z-index:1}
.flow > section:nth-of-type(2){z-index:2}
.flow > section:nth-of-type(3){z-index:3}
footer{position:relative;z-index:4;background:var(--canvas)}

/* A pinned section taller than the screen would keep its bottom permanently
   out of reach: no amount of scrolling can ever bring it back. script.js
   measures each one and hands it this class when it does not fit. */
.flow > section.no-stack{position:relative;min-height:0;box-shadow:none;display:block}

/* ---------- shared section rhythm ---------- */
section.band{padding:clamp(96px,17vh,190px) clamp(22px,5vw,64px)}
.eyebrow-dark{font-size:11px;font-weight:400;letter-spacing:.5em;text-transform:uppercase;
  text-indent:.5em;color:var(--gold);text-align:center;margin-bottom:clamp(46px,7vh,78px)}

/* ---------- clients ---------- */
.clients{border-top:1px solid rgba(29,28,24,.10)}
.client-index{max-width:900px;margin:0 auto;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(20px,3vh,30px) clamp(38px,6vw,84px)}
.client-index li{list-style:none;white-space:nowrap;
  font-family:var(--font-label);font-weight:400;
  font-size:clamp(12px,1.35vw,15px);letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase;color:var(--client);transition:color .5s ease}
.client-index li:hover{color:var(--ink)}

/* ---------- offices ---------- */
.offices{border-top:1px solid rgba(29,28,24,.10)}
.offices-grid{
  max-width:920px;margin:0 auto;text-align:center;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(48px,7vw,96px);
  align-items:start;
}
.office-city{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(19px,2.2vw,25px);letter-spacing:.28em;text-indent:.28em;
  text-transform:uppercase;color:var(--ink);
  margin-bottom:clamp(22px,3.5vh,32px);
}
.office-item{
  font-family:var(--font-label);font-weight:300;
  font-size:clamp(12px,1.2vw,14px);line-height:1.9;letter-spacing:.03em;
  color:var(--taupe);
}
.office-item + .office-item{margin-top:clamp(22px,3.5vh,30px)}
.office-item sup{font-size:.62em;vertical-align:super;line-height:0}
.office-label{
  display:block;font-size:10px;font-weight:400;
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px;
}
/* echoes the main contact address, one size down: the page keeps a single
   way of writing an e-mail, so the hierarchy reads at a glance */
.office-email{
  display:inline-block;margin-top:clamp(24px,3.5vh,32px);
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(15px,1.5vw,18px);letter-spacing:.02em;
  color:var(--ink);text-decoration:none;
  padding-bottom:6px;border-bottom:1px solid var(--gold);
  transition:color .5s ease;
}
.office-email:hover,.office-email:focus-visible{color:var(--gold)}

@media (max-width:700px){
  .offices-grid{grid-template-columns:1fr;gap:clamp(48px,8vh,68px)}
}

/* ---------- contact ---------- */
.contact{background:var(--canvas-2);text-align:center}
.contact .lead{font-family:var(--font-display);font-weight:300;font-style:italic;
  font-size:clamp(24px,3.6vw,40px);line-height:1.25;color:var(--ink);
  /* wide enough for the longest clause to hold one line, so the <br> decides the break */
  max-width:26ch;margin:0 auto clamp(34px,5vh,52px)}
.contact .email{display:inline-block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(22px,3vw,34px);letter-spacing:.02em;color:var(--ink);text-decoration:none;
  padding-bottom:8px;border-bottom:1px solid var(--gold);
  transition:color .5s ease}
.contact .email:hover{color:var(--gold)}

/* ---------- footer ---------- */
footer{padding:clamp(30px,5vh,46px) clamp(22px,5vw,64px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(33,30,23,.12)}
footer .fmark{font-family:var(--font-display);font-size:16px;letter-spacing:.4em;
  text-indent:.4em;text-transform:uppercase;color:var(--ink)}
footer small{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe)}
footer .fmeta{display:flex;flex-direction:column;align-items:flex-end;gap:9px;text-align:right}
/* the footer link row: social profiles and the discreet way in for applications */
.social{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.social a{
  position:relative;padding-bottom:3px;text-decoration:none;
  font-family:var(--font-label);font-size:10px;font-weight:400;
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
  color:var(--taupe);transition:color .5s ease;
}
.social a:hover,.social a:focus-visible{color:var(--ink)}
.social a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .5s ease;
}
.social a:hover::after,.social a:focus-visible::after{width:calc(100% - .26em)}
.social-sep{width:1px;height:10px;background:rgba(29,28,24,.22)}
footer .fmeta span{font-family:var(--font-label);font-weight:400;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
@media (max-width:600px){footer .fmeta{align-items:flex-start;text-align:left}}

/* ---------- reveals ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1.1s ease,transform 1.1s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:600px){
  .site-header nav a{font-size:10px}
}

/* On a phone every section still has to fit the screen, otherwise it cannot be
   pinned at all. The vertical rhythm tightens so the stack survives the small
   viewport instead of degrading back to an ordinary scroll. */
@media (max-width:700px){
  section.band{padding:clamp(60px,9vh,104px) clamp(22px,5vw,64px)}
  .eyebrow-dark{margin-bottom:clamp(28px,4.5vh,50px)}
  .client-index{gap:clamp(14px,2vh,22px) clamp(28px,6vw,60px)}
  .offices-grid{gap:clamp(32px,4.5vh,48px)}
  .office-city{margin-bottom:clamp(16px,2.5vh,24px)}
  .office-item{line-height:1.75}
  .office-item + .office-item{margin-top:clamp(16px,2.4vh,24px)}
  .office-email{margin-top:clamp(18px,2.6vh,26px)}
  .contact .lead{margin-bottom:clamp(26px,4vh,40px)}
  .flow > section{box-shadow:0 -26px 48px rgba(10,8,5,.2)}
}

/* down to 360px: the wordmark and the tracked labels are what break first */
@media (max-width:400px){
  .site-header{padding:18px}
  .brand{font-size:17px;letter-spacing:.34em;text-indent:.34em}
  .site-header nav a{letter-spacing:.24em;text-indent:.24em}
  .hero-line{letter-spacing:.3em;text-indent:.3em}
  .client-index{gap:20px 30px}
  .client-index li{letter-spacing:.24em;text-indent:.24em}
  .office-city{letter-spacing:.2em;text-indent:.2em}
  .social a{letter-spacing:.18em;text-indent:.18em}
  footer{padding:28px 18px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-rule{width:64px!important}
  .film video,.film::after{transition:none}
  .hero-inner{transition:none}
  /* no pinning either: sections that slide over one another are motion too */
  .hero{position:relative}
  .flow > section{position:relative;min-height:0;box-shadow:none;display:block}
}