/* ==== 01_fonts_tokens.css ==== */
/* ==========================================================================
   Darclight Productions — presentation layer (hand-written, no build step)
   Loaded after the app stylesheet so it always wins.
   Palette is locked: black #020100, panel #0a0900, gold #D6B06A,
   light gold #E7C88A, muted gold, cream #F7F5F0, hairlines #1a1508 / #2A2418.
   ========================================================================== */

/* ---------- Self-hosted type. No CDN, no runtime font request. ---------- */

@font-face{
  font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;
  font-display:swap;
  src:url("/assets/fonts/cormorant-garamond-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;
  font-display:swap;
  src:url("/assets/fonts/cormorant-garamond-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;
  font-display:swap;
  src:url("/assets/fonts/cormorant-garamond-400i-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;
  font-display:swap;
  src:url("/assets/fonts/cormorant-garamond-400i-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Lora";font-style:normal;font-weight:400 700;
  font-display:swap;
  src:url("/assets/fonts/lora-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Lora";font-style:normal;font-weight:400 700;
  font-display:swap;
  src:url("/assets/fonts/lora-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Lora";font-style:italic;font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/lora-400i-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Lora";font-style:italic;font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/lora-400i-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root{
  --dl-black:#020100;
  --dl-panel:#0a0900;
  --dl-panel-lift:#0d0b05;
  --dl-gold:#D6B06A;
  --dl-gold-lt:#E7C88A;
  --dl-gold-mut:#B5A585;      /* lifted from #9A8A6A: 8.1:1 on black */
  --dl-cream:#F7F5F0;
  --dl-line:#1a1508;
  --dl-line-2:#2A2418;
  --dl-maxw:1280px;
  --dl-gutter:clamp(1.5rem,5vw,4rem);
  --dl-rhythm:clamp(5rem,9vw,8rem);
  --dl-ease:cubic-bezier(.22,.75,.2,1);
  --dl-slow:900ms;
}

/* ---------- Base ---------- */
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--dl-black);
  color:var(--dl-cream);
  font-family:"Lora",Georgia,serif;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
}
body,body *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
::selection{background:var(--dl-gold);color:#000;}

/* Headings: keep the serif voice, tighten the tracking, open the leading. */
h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,serif;font-synthesis:none;}

/* Visible focus ring in gold, keyboard only. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--dl-gold);
  outline-offset:3px;
  border-radius:2px;
}

/* Kill the leftover builder artefacts: empty dashed image slots on credits/projects. */
#app .border-dashed{border-style:none;}

/* Respect reduced motion everywhere, including the app's own transitions. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==== 02_header_hero.css ==== */
/* ---------- Header ------------------------------------------------------- */

#app header{
  padding-top:env(safe-area-inset-top,0px);
  transition:background-color 700ms var(--dl-ease),border-color 700ms var(--dl-ease),backdrop-filter 700ms var(--dl-ease);
}
#app header > div{max-width:var(--dl-maxw);}

/* Remove the boxed "DP" builder mark. Both marks are React-owned, so they are
   hidden rather than deleted; the header keeps a deliberate wordmark instead of
   an empty gap. */
#app header a[href="/"] > div:first-child{
  display:none !important;
}
/* Scoped to the brand link only. A bare `header a::before` also decorated
   every nav link, which printed DARCLIGHT eight times across the bar. */
#app header a[href="/"]{
  position:relative;
  padding-left:0;
  min-height:44px;
  align-items:center;
  gap:0;
}
#app header a[href="/"]::before{
  content:"DARCLIGHT";
  display:block;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:600;
  font-size:clamp(17px,1.5vw,21px);
  line-height:1;
  letter-spacing:.2em;
  color:var(--dl-cream);
  text-transform:uppercase;
  padding-right:.2em;         /* optical: compensates the trailing tracking */
}
/* The React wordmark beside the box duplicates the CSS one at xl+. Hide it. */
#app header a[href="/"] > span.hidden{
  display:none !important;
}
#app header a[href="/"]::before{transition:color 700ms var(--dl-ease);}
#app header a[href="/"]:hover::before{color:var(--dl-gold-lt);}

#app header nav a{
  color:var(--dl-gold-mut);
  font-family:"Lora",Georgia,serif;
  font-weight:500;
  transition:color 700ms var(--dl-ease);
}
#app header nav a:hover{color:var(--dl-gold-lt);}
#app header nav a[href="/investors"]{
  color:var(--dl-gold);
  border-color:rgba(214,176,106,.35);
}

/* Menu button: real 44px target, no layout jump. */
/* Menu button: real 44px target, no layout jump. Scoped below lg only — an
   unscoped display value here overrode Tailwind's lg:hidden and left the
   hamburger sitting next to the desktop nav. */
@media (max-width:1023.98px){
  #app header button[aria-label="Toggle menu"]{
    min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
    margin-right:-10px;
  }
}

/* Mobile drawer: hairline top, generous rows, gold rule per item. */
#app header .lg\:hidden.bg-\[\#020100\]\/98{
  background:#020100 !important;
  border-top:1px solid var(--dl-line);
  box-shadow:0 24px 60px rgba(0,0,0,.7);
}
#app header .lg\:hidden.bg-\[\#020100\]\/98 nav{padding:1.25rem 1.5rem 2rem;}
#app header .lg\:hidden.bg-\[\#020100\]\/98 nav a{
  min-height:44px;display:flex;align-items:center;
  border-bottom:1px solid var(--dl-line);
  font-size:11px;letter-spacing:.24em;
}

/* ---------- Hero -------------------------------------------------------- */
/* Desktop: an asymmetric two-column hero. A tall portrait panel occupies the
   right 45% as a solid vertical presence, and the copy sits in a left column
   that ends before the portrait begins — so no type can ever cross the face.
   Mobile: the same idea stacked, portrait on top, copy beneath it.
   The photograph is a real <img> (a ::before background cannot be cropped to a
   panel), so it is emitted in the markup after #app and absolutely positioned;
   the React hero section is then pulled back underneath the type layer. */

#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type{
  background-color:var(--dl-black);
  min-height:100svh;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  padding:0;
  overflow:hidden;
}
/* Decorative React layers: the hairline beam, glow, dots and the DP lozenge all
   read as template chrome. Removed so the photograph carries the drama. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.absolute.inset-0{
  display:none !important;
}
/* The DP lozenge wrapper. `:not(.flex-col)` keeps this from also matching the
   CTA row, which carries .flex and .justify-center too. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative > div.flex.justify-center.mb-10{
  display:none !important;
}

/* Copy column: left, bottom-anchored, never wider than the space left of the
   portrait. At 1440 this is 52% of the viewport, which keeps the 132px wordmark
   off the subject entirely. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative{
  position:relative;z-index:2;
  width:100%;max-width:var(--dl-maxw);
  margin:0 auto;
  padding:clamp(6.5rem,14vh,9rem) var(--dl-gutter) clamp(3rem,7vh,5rem);
  text-align:left;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100svh;
}
@media (min-width:900px){
  #app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative{
    padding-right:calc(var(--dl-maxw) * .48);
  }
}

/* Eyebrow lives above the wordmark as a gold label, not a floating chip. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative::before{
  content:"Independent Film \0026 Television";
  display:block;
  font-family:"Lora",Georgia,serif;
  font-size:10.5px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--dl-gold);
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}

/* The wordmark: the largest thing on the page, tight, two stacked lines. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type h1{
  font-family:"Cormorant Garamond",Georgia,serif !important;
  font-size:clamp(3rem,9vw,8.6rem) !important;      /* 48 → 138px */
  font-weight:600 !important;
  line-height:.86 !important;
  letter-spacing:-.022em !important;
  color:var(--dl-cream);
  text-align:left;
  margin:0 0 clamp(1.1rem,2vw,1.6rem) 0;
  max-width:100%;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type h1 span{
  display:block;
  color:var(--dl-gold);
  font-weight:500;
  letter-spacing:-.022em;
  line-height:.9;
}

/* Tagline: italic Cormorant, wide-tracked, restrained. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type p{
  font-family:"Cormorant Garamond",Georgia,serif !important;
  font-style:italic !important;
  font-weight:400 !important;
  font-size:clamp(1.05rem,1.55vw,1.5rem) !important;
  line-height:1.35 !important;
  letter-spacing:.12em !important;
  text-transform:none !important;
  color:var(--dl-gold-lt) !important;
  max-width:30ch;
  margin:0 0 clamp(2rem,4vw,3rem) 0;
}

/* One accent flourish: a short gold hairline with a diamond. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative > div.flex.items-center.justify-center{
  display:flex !important;
  justify-content:flex-start !important;
  gap:.8rem !important;
  margin:clamp(1.4rem,2.6vw,2rem) 0 clamp(1.6rem,3vw,2.4rem) !important;
  transform:none !important;
  opacity:1 !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative > div.flex.items-center.justify-center > div:first-child{
  width:clamp(2.5rem,5vw,4rem) !important;
  height:1px !important;
  background:var(--dl-gold) !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative > div.flex.items-center.justify-center > div:last-child{
  width:5px !important;height:5px !important;
  background:var(--dl-gold) !important;
  transform:rotate(45deg) !important;
}

/* CTAs: one solid gold, one hairline outline. 52px tall. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative > div.flex.flex-col{
  flex-direction:row !important;
  justify-content:flex-start !important;
  gap:.85rem !important;
  opacity:1 !important;transform:none !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type a[href="/#credits"],
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type a[href="/#projects"]{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 2.1rem;
  font-family:"Lora",Georgia,serif !important;
  font-size:10.5px !important;font-weight:500 !important;
  letter-spacing:.26em !important;text-transform:uppercase;
  border-radius:0;
  transition:background-color 700ms var(--dl-ease),color 700ms var(--dl-ease),border-color 700ms var(--dl-ease);
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type a[href="/#projects"]{
  background:var(--dl-gold) !important;
  border:1px solid var(--dl-gold) !important;
  color:#020100 !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type a[href="/#projects"]:hover{
  background:var(--dl-gold-lt) !important;border-color:var(--dl-gold-lt) !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type a[href="/#credits"]{
  background:transparent !important;
  border:1px solid rgba(214,176,106,.5) !important;
  color:var(--dl-gold) !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type a[href="/#credits"]:hover{
  border-color:var(--dl-gold) !important;color:var(--dl-cream) !important;
}

/* Scroll cue removed: it duplicated the CTAs and cluttered the plate. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.absolute.bottom-10{
  display:none !important;
}

/* The legacy `landing-hero-v1` block painted hero.jpg as a ::before background
   on this same React section. The v3 plate is a real <img> in the same place,
   so both were painting the same photograph at different crops — the top of the
   head from the <img>, then the torso again from the background. That is the
   doubling. One photograph, once: the background copy goes. */
body.dl-home #app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type::before{
  display:none !important;
  background-image:none !important;
}

/* ---- The portrait plate ------------------------------------------------ */
/* Emitted in the markup after #app as a real <img> so it can be cropped to a
   tall panel. Pinned to the top of the document (the home hero is the first
   thing on the page), behind the copy layer, and inert to pointer events. */
:root{--dl-plate:48%;--dl-plate-h:clamp(330px,56vh,470px);--dl-plate-inset:18px;}
.dl-hero{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100svh;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.dl-hero__plate{
  position:absolute;
  top:var(--dl-plate-inset);right:0;bottom:0;
  width:var(--dl-plate);
  margin:0;
  overflow:hidden;
}
.dl-hero__plate img{
  position:relative;z-index:0;
  display:block;
  /* The photograph renders at its true aspect and is anchored to the top of the
     plate, which clips the excess below. object-fit:cover was cropping the top
     of the frame — exactly where his crown sits — so it is gone: the top edge of
     the photograph is always the top edge of the plate. */
  width:100%;height:auto;max-width:none;
  filter:saturate(1.02) contrast(1.03);
}
/* The source photograph was shot with the crown of his head on the very top
   row — there is no wall above it to show. Rather than invent pixels, the
   photograph's own top edge dissolves into the plate: the crop stops reading
   as a cut and the crown sits in black, which is what "headroom" looks like
   here. Same trick at the bottom, so the plate has no hard edge anywhere. */
/* No top fade any more: the photograph carries its own wall above the crown,
   so a clean top edge against the black header is correct. */
/* One soft left edge so the photograph dissolves into the black plate rather
   than ending on a hard seam. No glow, no vignette. */
.dl-hero__plate::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,var(--dl-black) 0%,rgba(2,1,0,.86) 10%,rgba(2,1,0,.32) 30%,rgba(2,1,0,0) 56%);
}

@media (max-width:899px){
  /* Stacked: portrait band on top, copy beneath it, face clear of all type. */
  /* The portrait band has to leave room for the headline, the tagline and both
     buttons, or a phone visitor lands on a page whose only calls to action sit
     below the fold. 56svh of plate pushed them off on a 390x844 screen; 44svh
     keeps his face large and puts the buttons on the first screen. */
  :root{--dl-plate-h:clamp(300px,44svh,400px);--dl-plate-inset:80px;}
  .dl-hero{
    height:var(--dl-plate-h);
  }
  .dl-hero__plate{
    top:var(--dl-plate-inset);
    width:100%;
    height:calc(var(--dl-plate-h) - var(--dl-plate-inset));
  }
  .dl-hero__plate::after{
    background:linear-gradient(to bottom,rgba(2,1,0,0) 52%,rgba(2,1,0,.5) 76%,var(--dl-black) 100%);
  }
  #app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type{
    min-height:0;
    align-items:stretch !important;
  }
  #app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative{
    min-height:0;
    padding-top:calc(var(--dl-plate-h) + clamp(1.5rem,4vw,2.25rem)) !important;
    padding-bottom:clamp(2.75rem,7vw,3.5rem) !important;
  }
  #app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type h1{
    font-size:clamp(2.6rem,13vw,4rem) !important;
  }
  #app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type p{
    font-size:clamp(.95rem,3.6vw,1.1rem) !important;
    letter-spacing:.1em !important;
    max-width:26ch;
  }
  #app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative > div.flex.flex-col a{
    flex:1 1 auto;
    padding:0 1.1rem !important;
    font-size:9.5px !important;
    letter-spacing:.2em !important;
  }
}

/* ---------- Cookie banner ----------------------------------------------- */
/* The GoDaddy consent bar ships white with a grey paragraph and a blue "Learn
   more" link — the single brightest element on the site. Re-skinned to the
   palette so it reads as part of the studio, not as a third-party widget. */
div.fixed.bottom-0[role="alertdialog"]{
  background:var(--dl-panel) !important;
  border-top:1px solid rgba(214,176,106,.35) !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  color:var(--dl-gold-mut) !important;
}
div.fixed.bottom-0[role="alertdialog"] *{font-family:"Lora",Georgia,serif !important;}
div.fixed.bottom-0[role="alertdialog"] h2,
div.fixed.bottom-0[role="alertdialog"] h3{
  font-family:"Cormorant Garamond",Georgia,serif !important;
  color:var(--dl-cream) !important;
  font-weight:600 !important;
  font-size:1.05rem !important;
  letter-spacing:.02em;
}
div.fixed.bottom-0[role="alertdialog"] p{color:var(--dl-gold-mut) !important;font-size:11.5px !important;line-height:1.6 !important;}
div.fixed.bottom-0[role="alertdialog"] a{
  color:var(--dl-gold) !important;
  text-decoration:underline;text-underline-offset:3px;
  background:none !important;
}
div.fixed.bottom-0[role="alertdialog"] a:hover{color:var(--dl-gold-lt) !important;}
div.fixed.bottom-0[role="alertdialog"] button{
  border-radius:0 !important;
  min-height:44px;
  padding:0 1.6rem !important;
  font-family:"Lora",Georgia,serif !important;
  font-size:10px !important;font-weight:500 !important;
  letter-spacing:.22em !important;text-transform:uppercase;
  transition:background-color 700ms var(--dl-ease),color 700ms var(--dl-ease),border-color 700ms var(--dl-ease) !important;
}
div.fixed.bottom-0[role="alertdialog"] button:first-of-type{
  background:var(--dl-gold) !important;
  border:1px solid var(--dl-gold) !important;
  color:#020100 !important;
}
div.fixed.bottom-0[role="alertdialog"] button:first-of-type:hover{background:var(--dl-gold-lt) !important;}
div.fixed.bottom-0[role="alertdialog"] button:last-of-type{
  background:transparent !important;
  border:1px solid rgba(214,176,106,.45) !important;
  color:var(--dl-gold) !important;
}
div.fixed.bottom-0[role="alertdialog"] button:last-of-type:hover{border-color:var(--dl-gold) !important;color:var(--dl-cream) !important;}


/* On phones the consent bar is 208px tall — a quarter of the screen — and it
   covers the hero CTAs. Tighten it, and reserve room above it in the hero. */
@media (max-width:600px){
  div.fixed.bottom-0[role="alertdialog"] > div{padding:.85rem 1.1rem .9rem !important;}
  div.fixed.bottom-0[role="alertdialog"] h3{font-size:.95rem !important;margin-bottom:.3rem !important;}
  /* The consent paragraph is boilerplate; two lines is enough on a phone and
     keeps the bar from eating a quarter of the viewport. */
  div.fixed.bottom-0[role="alertdialog"] p{
    font-size:10.5px !important;line-height:1.5 !important;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  div.fixed.bottom-0[role="alertdialog"] button{
    flex:1 1 0;min-height:44px;padding:0 .5rem !important;font-size:9px !important;letter-spacing:.16em !important;
  }
  #app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative{
    /* Let the hero be content-height on phones instead of a forced full
       viewport: that keeps the CTAs clear of the consent bar on short screens
       (360x800) as well as tall ones. */
    padding-bottom:clamp(2.5rem,6vw,3.25rem) !important;
    min-height:0 !important;
  }
}

/* ==== 03_pages.css ==== */
/* ---------- Interior page rhythm --------------------------------------- */
/* Every route shares the same two React sections: a PageHero and a body.
   These rules give them a consistent measure, vertical rhythm and type scale. */

#app section.relative.pt-40{
  padding-top:clamp(8rem,15vh,11rem) !important;
  padding-bottom:clamp(3.5rem,7vw,5.5rem) !important;
}
#app section.relative.pt-40 > div{max-width:var(--dl-maxw);}
#app section.relative.pt-40 h1{
  font-family:"Cormorant Garamond",Georgia,serif !important;
  font-size:clamp(2.6rem,6.6vw,5rem) !important;
  font-weight:600 !important;
  line-height:1.02 !important;
  letter-spacing:.005em !important;
  color:var(--dl-cream);
}
#app section.relative.pt-40 p:first-child,
#app section.relative.pt-40 > div > div > p:first-child{
  font-family:"Lora",Georgia,serif;
  font-size:10.5px !important;
  letter-spacing:.34em !important;
  color:var(--dl-gold) !important;
}
/* The little rule-and-diamond under each page title. */
#app section.relative.pt-40 div.h-px.w-16{width:3.5rem;}
#app section.relative.pt-40 p.text-\[\#9A8A6A\]{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-size:1.05rem !important;
  letter-spacing:.02em !important;
  color:var(--dl-gold-mut) !important;
}

/* Body sections: consistent gutters and vertical air. */
#app section.bg-\[\#020100\]{
  padding-left:var(--dl-gutter) !important;
  padding-right:var(--dl-gutter) !important;
  padding-top:clamp(3rem,6vw,5rem) !important;
  padding-bottom:clamp(4.5rem,8vw,7rem) !important;
}
#app section.bg-\[\#020100\] > div{max-width:var(--dl-maxw);}

/* Eyebrows used across routes ("Our Philosophy", "Darclight Originals"...). */
#app p.text-\[\#D6B06A\].text-xs.tracking-\[0\.4em\]{
  font-family:"Lora",Georgia,serif;font-size:10.5px;letter-spacing:.34em;
}

/* Body copy: readable measure, softer than pure cream, but still AA. */
#app .text-\[\#9A8A6A\]{color:var(--dl-gold-mut) !important;}
#app p.text-\[\#9A8A6A\].leading-relaxed,
#app div.flex.flex-col.gap-5 p,
#app div.flex.flex-col.gap-6 p{
  max-width:66ch;
  line-height:1.85;
  font-size:.95rem;
}

/* Section openers get the serif headline scale from the brief. */
#app h2.text-3xl{
  font-size:clamp(1.9rem,3.4vw,2.75rem) !important;
  letter-spacing:.01em;
  line-height:1.1;
}

/* ---------- About: pull-quote, portrait, philosophy -------------------- */
body.dl-about #app section.bg-\[\#020100\] > div > div:first-child{
  position:relative;
  max-width:52ch;
  padding-left:clamp(1.5rem,3vw,2.75rem);
  border-left:1px solid rgba(214,176,106,.35);
}
body.dl-about #app blockquote{font-style:italic;}

/* ---------- Darcas Macopson: the name is the hero --------------------- */
body.dl-darcas #app section.relative.pt-40{
  padding-top:clamp(9rem,17vh,12rem) !important;
  padding-bottom:clamp(2.5rem,5vw,4rem) !important;
}
body.dl-darcas #app section.relative.pt-40 h1{
  font-size:clamp(3rem,11.4vw,9rem) !important;
  line-height:.9 !important;
  letter-spacing:-.015em !important;
  font-weight:500 !important;
  /* The name set as a two-line graphic, not a line of text. Narrow measure
     forces the break; the size carries the page. */
  max-width:9ch !important;
  color:var(--dl-cream) !important;
}
body.dl-darcas #app section.relative.pt-40 p.text-\[\#9A8A6A\]{
  font-size:clamp(1rem,2vw,1.35rem) !important;
  letter-spacing:.06em !important;
}
/* Portrait plate: generous margin, thin frame, no clutter. */
body.dl-darcas #app .aspect-\[3\/4\]{
  border:1px solid rgba(214,176,106,.28) !important;
}
body.dl-darcas #app .aspect-\[3\/4\] .absolute.-inset-3{
  border-color:rgba(214,176,106,.10) !important;
  inset:-12px !important;
}
body.dl-darcas #app img{filter:saturate(.96) contrast(1.03);}
/* Pull-quote on the founder page. */
body.dl-darcas #app .border-\[\#D6B06A\]\/20{background:#080701 !important;}
body.dl-darcas #app .border-\[\#D6B06A\]\/20 p.text-2xl{
  font-size:clamp(1.4rem,2.6vw,2rem) !important;
  line-height:1.35 !important;
  letter-spacing:.005em;
}
/* "At a Glance" plate: quieter, tighter. */
body.dl-darcas #app .border-\[\#1a1508\].p-8{background:var(--dl-panel) !important;}
body.dl-darcas #app .border-\[\#1a1508\].p-8 p.text-\[10px\]{color:var(--dl-gold);opacity:.85;}

/* ---------- Credits / Projects / Press / Contact: rebuilt bodies ------- */
/* The React bodies on these four routes carried fabricated or broken content,
   so they are hidden and replaced with markup appended after #app. */
body.dl-credits #app section.bg-\[\#020100\],
body.dl-projects #app section.bg-\[\#020100\],
body.dl-press #app section.bg-\[\#020100\],
body.dl-contact #app section.bg-\[\#020100\],
body.dl-investors #app div.min-h-screen.bg-black{
  display:none !important;
}

/* ---------- Small-screen overflow guards ------------------------------ */
@media (max-width:420px){
  #app section.bg-\[\#020100\]{padding-left:1.25rem !important;padding-right:1.25rem !important;}
  #app .grid-cols-3{gap:1rem !important;}
  /* The React three-up stat grid keeps a min-content floor on its columns and
     pushed the /about document 10px wider than the viewport. minmax(0,1fr)
     lets the tracks shrink; the clip is the belt-and-braces. */
  body.dl-about #app .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  html{overflow-x:clip;}
  body{overflow-x:clip;}
}

/* ---------- Single footer / no orphan wrapper height ------------------- */
/* The React footer duplicates the rebuilt footer on every route, and on the
   four rebuilt routes the hidden body left the flex wrapper holding a
   full-viewport min-height, which read as a large blank band. */
#app footer.bg-black.border-t{border-top:0 !important;}
body.dl-home #app footer.bg-black.border-t,
body.dl-about #app footer.bg-black.border-t,
body.dl-credits #app footer.bg-black.border-t,
body.dl-projects #app footer.bg-black.border-t,
body.dl-press #app footer.bg-black.border-t,
body.dl-contact #app footer.bg-black.border-t,
body.dl-investors #app footer.bg-black.border-t,
body.dl-darcas #app footer.bg-black.border-t{
  display:none !important;
}
body.dl-credits #app > div.min-h-screen,
body.dl-projects #app > div.min-h-screen,
body.dl-press #app > div.min-h-screen,
body.dl-contact #app > div.min-h-screen,
body.dl-investors #app > div.min-h-screen{
  min-height:0 !important;
}
/* Home: the React "Explore" index and its closing band are replaced by the
   editorial sections appended after #app. */
body.dl-home #app > div.min-h-screen > section.bg-\[\#020100\]{
  display:none !important;
}
/* Keep the rebuilt markup sitting directly under the React hero. */
body.dl-home #app > div.min-h-screen{min-height:0 !important;}

/* ---------- Mastheads on the rebuilt routes ---------------------------- */
/* These routes have no React hero (their bodies are replaced wholesale), so the
   page needs its own masthead: eyebrow, oversized serif h1, one line of copy. */
.dl-mast{
  background:var(--dl-black);
  padding-top:clamp(8.5rem,16vh,11.5rem);
  padding-bottom:clamp(1.75rem,3.5vw,2.75rem);
  border-bottom:1px solid var(--dl-line);
}
.dl-mast .dl-rule{margin-bottom:clamp(1.75rem,3.5vw,2.5rem);}
.dl-mast__title{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:600;
  font-size:clamp(3.4rem,10.5vw,8rem);
  line-height:.9;
  letter-spacing:-.018em;
  color:var(--dl-cream);
  margin:1rem 0 0;
  max-width:18ch;
}
.dl-mast__sub{
  margin:clamp(1.25rem,2.5vw,1.9rem) 0 0;
  max-width:52ch;
  font-family:"Lora",Georgia,serif;
  font-size:clamp(.95rem,1.2vw,1.06rem);
  line-height:1.75;
  color:var(--dl-gold-mut);
}
@media (max-width:600px){
  .dl-mast__title{font-size:clamp(2.9rem,13.5vw,4.2rem);}
}

/* ==== 04_components.css ==== */
/* ==========================================================================
   Editorial components. Everything below builds the sections that live
   outside #app, so React never reconciles them.
   ========================================================================== */

.dl-wrap{width:100%;max-width:var(--dl-maxw);margin:0 auto;padding:0 var(--dl-gutter);}

.dl-sec{position:relative;padding:clamp(4.5rem,9vw,8rem) 0;background:var(--dl-black);}
.dl-sec--tight{padding:clamp(3rem,6vw,5rem) 0;}
.dl-sec--panel{background:var(--dl-panel);}
.dl-sec > .dl-wrap{position:relative;}

/* One accent flourish per section: a hairline with a small diamond. */
.dl-rule{display:flex;align-items:center;gap:.9rem;margin:0 0 clamp(2rem,4vw,3rem);}
.dl-rule::before{content:"";display:block;width:clamp(2.5rem,6vw,4.5rem);height:1px;background:var(--dl-gold);}
.dl-rule::after{content:"";display:block;width:5px;height:5px;background:var(--dl-gold);transform:rotate(45deg);flex:none;}
.dl-rule--center{justify-content:center;}
.dl-rule--center::before{background:linear-gradient(to right,rgba(214,176,106,0),var(--dl-gold));}
.dl-rule--center::after{order:2;}
.dl-rule--center > span{display:block;width:clamp(2.5rem,6vw,4.5rem);height:1px;background:linear-gradient(to left,rgba(214,176,106,0),var(--dl-gold));order:3;}

.dl-eyebrow{
  margin:0 0 .9rem;color:var(--dl-gold);
  font-family:"Lora",Georgia,serif;font-size:10.5px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;line-height:1.5;
}
.dl-h2{
  margin:0 0 1.25rem;color:var(--dl-cream);
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.02;letter-spacing:.005em;
  text-wrap:balance;
}
.dl-h2 em{font-style:italic;color:var(--dl-gold-lt);font-weight:500;}
.dl-h3{
  margin:0 0 .6rem;color:var(--dl-cream);
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.15;
}
.dl-lede{
  margin:0;color:var(--dl-gold-mut);
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.6;max-width:46ch;
}
.dl-body{
  margin:0;color:var(--dl-gold-mut);font-size:.95rem;line-height:1.85;max-width:64ch;
}
.dl-body + .dl-body{margin-top:1.05rem;}

/* ---------- Statement --------------------------------------------------- */
.dl-statement{padding:clamp(5rem,10vw,9rem) 0;background:var(--dl-black);border-top:1px solid var(--dl-line);}
.dl-statement__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
.dl-statement__line{
  margin:0;color:var(--dl-cream);
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.16;letter-spacing:.002em;
  max-width:30ch;text-wrap:balance;
}
.dl-statement__line em{font-style:italic;color:var(--dl-gold-lt);}
.dl-statement__side{border-left:1px solid rgba(214,176,106,.28);padding-left:clamp(1.25rem,2.5vw,2rem);}
.dl-statement__side p{margin:0;color:var(--dl-gold-mut);font-size:.92rem;line-height:1.9;max-width:34ch;}
.dl-statement__sig{
  margin-top:1.5rem;display:flex;align-items:center;gap:.75rem;
  color:var(--dl-gold);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  font-family:"Lora",Georgia,serif;
}
.dl-statement__sig::before{content:"";width:26px;height:1px;background:var(--dl-gold);display:block;}

@media (min-width:900px){
  .dl-statement__grid{grid-template-columns:1.45fr .55fr;}
}

/* ---------- Stats strip ------------------------------------------------- */
.dl-stats{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--dl-line);border-bottom:1px solid var(--dl-line);
}
.dl-stats__item{
  padding:clamp(1.5rem,3vw,2.4rem) clamp(.5rem,2vw,1.5rem);
  border-right:1px solid var(--dl-line);
}
.dl-stats__item:last-child{border-right:0;}
.dl-stats__n{
  display:block;color:var(--dl-gold);
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.01em;
}
.dl-stats__n sup{font-size:.45em;vertical-align:super;font-weight:400;letter-spacing:0;color:var(--dl-gold);}
.dl-stats__l{
  display:block;margin-top:.7rem;color:var(--dl-gold-mut);
  font-family:"Lora",Georgia,serif;font-size:9.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;line-height:1.7;
}
@media (min-width:760px){
  .dl-stats{grid-template-columns:repeat(4,1fr);}
  .dl-stats--3{grid-template-columns:repeat(3,1fr);}
}

/* ---------- Founder plate ---------------------------------------------- */
.dl-founder{border-top:1px solid var(--dl-line);background:var(--dl-black);}
.dl-founder__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;}
.dl-founder__plate{position:relative;}
.dl-founder__plate img{
  display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%;
  border:1px solid rgba(214,176,106,.26);filter:saturate(.97) contrast(1.02);
}
.dl-founder__plate::after{
  content:"";position:absolute;inset:10px;border:1px solid rgba(214,176,106,.10);pointer-events:none;
}
.dl-founder__name{
  margin:0 0 .85rem;color:var(--dl-cream);
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  font-size:clamp(2.6rem,6.4vw,4.75rem);line-height:.94;letter-spacing:-.01em;
}
.dl-founder__role{
  margin:0 0 1.5rem;color:var(--dl-gold);
  font-family:"Lora",Georgia,serif;font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
}
.dl-founder__quote{
  margin:0 0 1.6rem;color:var(--dl-cream);
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,2.5vw,1.7rem);line-height:1.45;max-width:30ch;
}
.dl-founder__quote::before{content:"\201C";color:var(--dl-gold);}
.dl-founder__quote::after{content:"\201D";color:var(--dl-gold);}
.dl-link{
  display:inline-flex;align-items:center;gap:.7rem;min-height:44px;
  color:var(--dl-gold);font-family:"Lora",Georgia,serif;
  font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid rgba(214,176,106,.45);
  padding-bottom:.35rem;
  transition:color 700ms var(--dl-ease),border-color 700ms var(--dl-ease);
}
.dl-link::after{content:"\2192";font-size:1em;transition:transform 700ms var(--dl-ease);}
.dl-link:hover{color:var(--dl-gold-lt);border-bottom-color:var(--dl-gold-lt);}
.dl-link:hover::after{transform:translateX(4px);}
@media (min-width:900px){
  .dl-founder__grid{grid-template-columns:.9fr 1.1fr;}
  .dl-founder__plate{margin-left:clamp(0rem,1vw,1rem);}
}

/* ---------- Gallery ----------------------------------------------------- */
.dl-gallery{padding:clamp(4rem,8vw,7rem) 0 clamp(3rem,6vw,5rem);background:var(--dl-black);border-top:1px solid var(--dl-line);}
.dl-gallery__head{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:end;margin-bottom:clamp(2rem,4vw,3rem);}
@media (min-width:820px){.dl-gallery__head{grid-template-columns:1fr auto;}}
.dl-gallery__count{
  color:var(--dl-gold-mut);font-family:"Lora",Georgia,serif;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;padding-bottom:.4rem;
}

.dl-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(.5rem,1.1vw,.9rem);
  grid-auto-flow:row dense;
}
.dl-grid__item{
  position:relative;display:block;overflow:hidden;background:#070601;
  border:1px solid transparent;
  transition:border-color 700ms var(--dl-ease);
  aspect-ratio:3/4;
}
.dl-grid__item img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--dl-ease),opacity 700ms var(--dl-ease);
  will-change:transform;
}
.dl-grid__item::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(214,176,106,0);
  transition:box-shadow 700ms var(--dl-ease);
}
.dl-grid__item:hover,.dl-grid__item:focus-visible{border-color:rgba(214,176,106,.55);}
.dl-grid__item:hover img,.dl-grid__item:focus-visible img{transform:scale(1.035);}
.dl-grid__item:focus-visible{outline:2px solid var(--dl-gold);outline-offset:3px;}

/* The one feature frame: occupies two columns by two rows on wide screens,
   full width on phones, and carries a quiet corner caption. */
.dl-grid__item--feature{grid-column:span 2;grid-row:span 1;aspect-ratio:3/4;}
.dl-grid__item--feature .dl-grid__cap{
  position:absolute;left:0;bottom:0;right:0;
  padding:1.5rem 1.25rem 1.1rem;
  background:linear-gradient(to top,rgba(2,1,0,.92),rgba(2,1,0,0));
  color:var(--dl-gold);font-family:"Lora",Georgia,serif;
  font-size:9.5px;letter-spacing:.30em;text-transform:uppercase;text-align:left;
  opacity:0;transform:translateY(6px);
  transition:opacity 700ms var(--dl-ease),transform 700ms var(--dl-ease);
}
.dl-grid__item--feature:hover .dl-grid__cap,
.dl-grid__item--feature:focus-visible .dl-grid__cap{opacity:1;transform:none;}
.dl-grid__item--bw img{filter:grayscale(1) contrast(1.04);}
.dl-grid__item--bw:hover img{filter:grayscale(1) contrast(1.06);}

@media (min-width:600px){
  .dl-grid{grid-template-columns:repeat(3,1fr);}
  .dl-grid__item--feature{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}
}
@media (min-width:1080px){
  .dl-grid{grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1vw,1rem);}
}

/* ---------- Slate / credits / press / contact blocks ------------------- */
.dl-filmo{border-top:1px solid var(--dl-line);}
.dl-filmo__row{
  display:grid;grid-template-columns:auto 1fr;gap:.25rem 1.25rem;
  align-items:baseline;
  padding:clamp(1.1rem,2.2vw,1.6rem) 0;
  border-bottom:1px solid var(--dl-line);
  transition:background-color 700ms var(--dl-ease);
}
.dl-filmo__yr{
  color:var(--dl-gold);font-family:"Cormorant Garamond",Georgia,serif;
  font-size:.95rem;letter-spacing:.12em;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.dl-filmo__title{
  color:var(--dl-cream);font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600;line-height:1.2;margin:0;
}
.dl-filmo__meta{
  grid-column:2;color:var(--dl-gold-mut);font-size:.82rem;line-height:1.7;margin:.15rem 0 0;
}
.dl-filmo__row:hover{background:rgba(214,176,106,.035);}
@media (min-width:760px){
  .dl-filmo__row{grid-template-columns:5.5rem 1fr 9rem;align-items:baseline;}
  .dl-filmo__meta{grid-column:3;text-align:right;margin:0;}
}

.dl-slate{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2vw,1.5rem);}
@media (min-width:840px){.dl-slate{grid-template-columns:repeat(2,1fr);}}
.dl-card{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--dl-line);background:var(--dl-panel);
  padding:clamp(1.75rem,3.5vw,2.75rem);
  transition:border-color 700ms var(--dl-ease),background-color 700ms var(--dl-ease);
  min-height:100%;
}
.dl-card:hover{border-color:rgba(214,176,106,.45);background:var(--dl-panel-lift);}
.dl-card--wide{grid-column:1 / -1;}
.dl-card__status{
  align-self:flex-start;margin:0 0 1.4rem;
  color:var(--dl-gold);font-family:"Lora",Georgia,serif;
  font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  border:1px solid rgba(214,176,106,.35);padding:.45rem .8rem;
}
.dl-card__kind{
  margin:0 0 .6rem;color:var(--dl-gold-mut);
  font-family:"Lora",Georgia,serif;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
}
.dl-card__title{
  margin:0 0 1rem;color:var(--dl-cream);
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  font-size:clamp(1.9rem,4vw,3rem);line-height:.98;letter-spacing:-.005em;
  text-transform:uppercase;
}
.dl-card__log{
  margin:0 0 1.1rem;color:var(--dl-cream);
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.5;max-width:40ch;
}
.dl-card__body{margin:0;color:var(--dl-gold-mut);font-size:.88rem;line-height:1.8;max-width:52ch;}
.dl-card__foot{
  margin-top:auto;padding-top:1.5rem;display:flex;align-items:center;gap:.75rem;
  color:var(--dl-gold-mut);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
}
.dl-card__foot::before{content:"";width:22px;height:1px;background:rgba(214,176,106,.5);}

.dl-two{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);}
@media (min-width:900px){.dl-two{grid-template-columns:1fr 1fr;}}

.dl-note{
  border-left:1px solid rgba(214,176,106,.35);
  padding:.15rem 0 .15rem clamp(1.1rem,2.2vw,1.75rem);
}
.dl-note p{margin:0;color:var(--dl-gold-mut);font-size:.9rem;line-height:1.85;max-width:52ch;}
.dl-note p + p{margin-top:.8rem;}

/* Press page: honest "no coverage yet" state, plus a real mailto EPK request. */
.dl-empty{
  border:1px solid var(--dl-line);background:var(--dl-panel);
  padding:clamp(1.75rem,3.5vw,2.75rem);
}
.dl-empty__t{margin:0 0 .75rem;color:var(--dl-cream);font-family:"Cormorant Garamond",Georgia,serif;font-size:1.35rem;font-weight:600;}
.dl-empty__p{margin:0 0 1.4rem;color:var(--dl-gold-mut);font-size:.9rem;line-height:1.85;max-width:52ch;}

/* Contact page: email as the primary action, no fake form. */
.dl-mail{
  display:inline-block;margin:.4rem 0 0;
  color:var(--dl-cream);text-decoration:none;
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  font-size:clamp(1.5rem,4vw,2.6rem);line-height:1.15;letter-spacing:-.005em;
  border-bottom:1px solid rgba(214,176,106,.4);
  transition:color 700ms var(--dl-ease),border-color 700ms var(--dl-ease);
  word-break:break-word;
}
.dl-mail:hover{color:var(--dl-gold-lt);border-bottom-color:var(--dl-gold-lt);}
.dl-facts{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--dl-line);}
.dl-facts__row{
  display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:baseline;
  padding:1.1rem 0;border-bottom:1px solid var(--dl-line);
}
.dl-facts__k{color:var(--dl-gold);font-family:"Lora",Georgia,serif;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;}
.dl-facts__v{color:var(--dl-cream);font-size:.95rem;line-height:1.7;word-break:break-word;}

/* ---------- Closing band + footer -------------------------------------- */
.dl-close{
  padding:clamp(4.5rem,9vw,7.5rem) 0;background:var(--dl-black);
  border-top:1px solid var(--dl-line);text-align:center;
}
.dl-close__line{
  margin:0 auto 1.1rem;max-width:24ch;color:var(--dl-cream);
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(1.9rem,4.6vw,3.25rem);line-height:1.15;text-wrap:balance;
}
.dl-close__sub{margin:0 auto clamp(1.75rem,3.5vw,2.5rem);max-width:44ch;color:var(--dl-gold-mut);font-size:.92rem;line-height:1.8;}
.dl-btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;}
.dl-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 clamp(1.5rem,3vw,2.4rem);
  font-family:"Lora",Georgia,serif;font-size:10.5px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;text-decoration:none;
  transition:background-color 700ms var(--dl-ease),color 700ms var(--dl-ease),border-color 700ms var(--dl-ease);
}
.dl-btn--solid{background:var(--dl-gold);border:1px solid var(--dl-gold);color:#0b0800;}
.dl-btn--solid:hover{background:var(--dl-gold-lt);border-color:var(--dl-gold-lt);}
.dl-btn--ghost{background:transparent;border:1px solid rgba(214,176,106,.45);color:var(--dl-gold);}
.dl-btn--ghost:hover{border-color:var(--dl-gold);background:rgba(214,176,106,.08);}

.dl-footer{background:#000;border-top:1px solid rgba(214,176,106,.35);}
.dl-footer__inner{padding:clamp(2.75rem,5vw,4rem) 0 1.5rem;}
.dl-footer__top{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);}
@media (min-width:820px){.dl-footer__top{grid-template-columns:1.4fr .6fr .6fr .8fr;}}
.dl-footer__mark{
  margin:0 0 .8rem;color:var(--dl-cream);
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.65rem);letter-spacing:.2em;text-transform:uppercase;
}
.dl-footer__pos{margin:0;color:var(--dl-gold-mut);font-size:.88rem;line-height:1.8;max-width:34ch;}
.dl-footer__h{
  margin:0 0 1rem;color:var(--dl-gold);
  font-family:"Lora",Georgia,serif;font-size:9.5px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;
}
.dl-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.dl-footer__list a{
  color:var(--dl-gold-mut);text-decoration:none;font-size:.85rem;line-height:1.6;
  display:inline-flex;align-items:center;min-height:44px;
  transition:color 700ms var(--dl-ease);
}
.dl-footer__list{gap:.1rem;}
.dl-footer__list a:hover{color:var(--dl-gold-lt);}
.dl-footer__bottom{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;
  border-top:1px solid var(--dl-line);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;align-items:center;
}
.dl-footer__bottom p{margin:0;color:var(--dl-gold-mut);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;}

/* ---------- Lightbox ---------------------------------------------------- */
.dl-lb{
  position:fixed;inset:0;z-index:9999;display:none;
  background:rgba(2,1,0,.965);
  padding:clamp(1rem,3vw,2.5rem);
}
.dl-lb[open],.dl-lb.is-open{display:flex;align-items:center;justify-content:center;}
.dl-lb__stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.dl-lb__img{
  max-width:min(96vw,1100px);max-height:calc(100vh - 8rem);
  width:auto;height:auto;display:block;
  border:1px solid rgba(214,176,106,.45);
  background:#070601;
}
.dl-lb__bar{
  position:absolute;left:0;right:0;bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:center;gap:1.25rem;
  pointer-events:none;
}
.dl-lb__count{
  color:var(--dl-gold);font-family:"Lora",Georgia,serif;
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
}
.dl-lb__btn{
  pointer-events:auto;appearance:none;cursor:pointer;
  width:52px;height:52px;min-width:52px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(10,9,0,.86);border:1px solid rgba(214,176,106,.4);
  color:var(--dl-gold);font-size:17px;line-height:1;border-radius:0;
  transition:background-color 700ms var(--dl-ease),color 700ms var(--dl-ease),border-color 700ms var(--dl-ease);
}
.dl-lb__btn:hover{background:rgba(214,176,106,.14);border-color:var(--dl-gold);color:var(--dl-gold-lt);}
.dl-lb__btn:focus-visible{outline:2px solid var(--dl-gold);outline-offset:3px;}
.dl-lb__close{position:absolute;top:0;right:0;}
.dl-lb__prev{position:absolute;left:0;top:50%;transform:translateY(-50%);}
.dl-lb__next{position:absolute;right:0;top:50%;transform:translateY(-50%);}
body.dl-lb-lock{overflow:hidden;}

@media (max-width:600px){
  .dl-lb__img{max-height:calc(100vh - 10rem);}
  .dl-lb__prev,.dl-lb__next{top:auto;bottom:0;transform:none;}
  .dl-lb__bar{bottom:0;justify-content:space-between;}
}

/* ---------- Teasers (home, "The Company") ------------------------------ */
.dl-teasers{display:grid;grid-template-columns:1fr;border-top:1px solid var(--dl-line);}
@media (min-width:760px){.dl-teasers{grid-template-columns:repeat(2,1fr);}}
.dl-teaser{
  position:relative;display:grid;grid-template-columns:1fr auto;
  gap:.4rem 1.25rem;align-items:baseline;
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1rem,2vw,1.75rem) clamp(1.5rem,3vw,2.25rem) 0;
  border-bottom:1px solid var(--dl-line);
  text-decoration:none;
  transition:background-color 700ms var(--dl-ease);
}
@media (min-width:760px){
  .dl-teaser:nth-child(odd){padding-right:clamp(1.5rem,3vw,2.5rem);border-right:1px solid var(--dl-line);}
  .dl-teaser:nth-child(even){padding-left:clamp(1.5rem,3vw,2.5rem);}
}
.dl-teaser:hover{background:rgba(214,176,106,.035);}
.dl-teaser__t{
  grid-column:1;color:var(--dl-cream);
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.1;
  transition:color 700ms var(--dl-ease);
}
.dl-teaser:hover .dl-teaser__t{color:var(--dl-gold-lt);}
.dl-teaser__b{
  grid-column:1;color:var(--dl-gold-mut);font-size:.87rem;line-height:1.75;max-width:44ch;
}
.dl-teaser__go{
  grid-column:2;grid-row:1 / span 2;align-self:center;
  color:var(--dl-gold);font-size:1rem;
  transition:transform 700ms var(--dl-ease);
}
.dl-teaser:hover .dl-teaser__go{transform:translateX(5px);}

/* ==== 05_motion.css ==== */
/* ---------- Entrance motion -------------------------------------------- */
/* One gesture: a 14px rise with a fade, 900ms, ease-out. Staggered by --i,
   set inline per block. Nothing bounces; nothing runs on scroll. */

@keyframes dl-rise{from{opacity:0;transform:translate3d(0,14px,0);}to{opacity:1;transform:none;}}

.dl-anim{
  opacity:0;transform:translate3d(0,14px,0);
  animation:dl-rise 900ms var(--dl-ease) forwards;
  animation-delay:calc(var(--i,0) * 90ms);
}
@media (prefers-reduced-motion:reduce){
  .dl-anim{opacity:1;transform:none;animation:none;}
}

/* Gallery hover zoom is the only transform on the page; keep it slow. */
@media (prefers-reduced-motion:reduce){
  .dl-grid__item:hover img,.dl-grid__item:focus-visible img{transform:none;}
}

/* ---------- Content loader hook ------------------------------------------ */
/* dl-content.js is optional: it fails soft and leaves the static markup in
   place when the API is absent. It is loaded on every route so a saved
   override reaches the page the owner edited. */

/* ---------- Legacy scroll-reveal: force the copy visible ----------------
   The React export marked large blocks `style="opacity:0; transform:translateY(30px)"`
   and relied on a scroll listener to fade them in. On this build that listener
   never fires on a direct visit, so whole paragraphs — even the home headline
   and the About masthead — sat at zero opacity, and the page read as a black
   void. The reveal is cosmetic; the words are not. Every such wrapper carries a
   translate() in the same inline style, which is what these two selectors key
   on, so nothing else in the document is touched. Left alone: the CSS-driven
   `.dl-anim` entrance, which does run. */
#app [style*="opacity: 0; transform: translate"],
#app [style*="opacity:0;transform:translate"]{
  opacity:1 !important;
  transform:none !important;
}

/* ---------- Cookie consent: quiet it down, and stop it eating the fold --
   This banner ships fixed to the bottom of the viewport from the original
   GoDaddy export. On a phone its paragraph is six lines tall, so it covered
   the hero CTAs outright — the two buttons a visitor is meant to press first.
   It is a legal notice, not the message of the page: shrink the type, cut the
   paragraph to the sentence that matters, and keep it tight enough that the
   hero still reads. The "Learn more" link pointed at GoDaddy's privacy policy
   on the owner's own site; that address is not the studio's and does not
   belong in its footer, so it goes. */
.dl-cookie,
[role="alertdialog"][aria-label="Cookie consent banner"]{
  background:#0A0900 !important;
  border-top:1px solid var(--dl-line2) !important;
  box-shadow:none !important;
  padding:0 !important;
}
[role="alertdialog"][aria-label="Cookie consent banner"] > div{padding:.9rem 1.25rem !important;}
[role="alertdialog"][aria-label="Cookie consent banner"] h3{
  color:var(--dl-gold) !important;
  font-size:9.5px !important;letter-spacing:.28em !important;text-transform:uppercase !important;
  font-family:"Lora",Georgia,serif !important;font-weight:400 !important;
  margin-bottom:.35rem !important;
}
[role="alertdialog"][aria-label="Cookie consent banner"] p{
  color:var(--dl-mute) !important;
  font-size:11px !important;line-height:1.5 !important;
  font-family:"Lora",Georgia,serif !important;
}
/* The address belongs to the site builder, not the studio. */
[role="alertdialog"][aria-label="Cookie consent banner"] a[href*="godaddy.com"]{display:none !important;}
@media (max-width:640px){
  [role="alertdialog"][aria-label="Cookie consent banner"] p{
    font-size:10px !important;line-height:1.45 !important;
    display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  [role="alertdialog"][aria-label="Cookie consent banner"] > div{padding:.7rem 1rem !important;}
  [role="alertdialog"][aria-label="Cookie consent banner"] button{
    padding:.4rem .9rem !important;font-size:10px !important;letter-spacing:.18em !important;
  }
}