/* ============================================================
   SK VISUALOGRAPHY — SITE V2
   Dark, cinematic, gallery-grade. Shared across all pages.
   ============================================================ */

@font-face{font-family:"Sinoreta";src:url("fonts/Sinoreta-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sinoreta";src:url("fonts/Sinoreta-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Sinoreta";src:url("fonts/Sinoreta-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#100D0B;        /* page */
  --ink-2:#16110D;      /* raised surface */
  --ink-3:#1E1712;      /* card */
  --ink-4:#271E17;      /* hover card */
  --paper:#F3ECDD;
  --paper-dim:rgba(243,236,221,.96);
  --paper-faint:rgba(243,236,221,.82);
  --paper-ghost:rgba(243,236,221,.16);
  --gold:#D3AC33;
  --gold-2:#B9912A;
  --gold-light:#F3DC8E;
  --maroon:#7F161B;
  --maroon-light:#A8313A;
  --line:rgba(243,236,221,.12);
  --line-2:rgba(243,236,221,.07);

  --display:"Instrument Serif",serif;
  --serif:"Cormorant Garamond",serif;
  --mono:"JetBrains Mono",monospace;
  --wordmark:"Sinoreta","Instrument Serif",serif;

  --pad:clamp(20px,5vw,72px);
  --maxw:1640px;

  /* iOS safe areas are written as env() directly at each use site rather
     than parked in tokens here: a var() that holds an env() is a known weak
     spot in Safari, and Safari is the only browser this matters for. */
}

*{box-sizing:border-box;margin:0;padding:0}
/* ink on the root too, so the canvas behind any bleed region is never the
   browser's default white */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink)}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--serif);font-size:18px;line-height:1.6;
  overflow-x:hidden;position:relative;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* film grain */
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--ink)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase}

/* ============ PRELOADER ============ */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .8s ease,visibility .8s,transform .8s cubic-bezier(.7,0,.3,1)}
.preloader.done{opacity:0;visibility:hidden;transform:translateY(-12px)}
.preloader .pl-brand{font-family:var(--wordmark);font-size:clamp(32px,6vw,64px);color:var(--paper);opacity:0;transform:translateY(10px);animation:plIn 1s cubic-bezier(.16,1,.3,1) forwards;text-transform:uppercase;letter-spacing:.02em}
.preloader .pl-brand .sp{color:var(--gold);font-family:var(--display);font-style:normal;font-size:.5em;vertical-align:.35em;margin-left:2px}
.preloader .pl-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--paper-faint);opacity:0;animation:plIn 1s ease forwards .25s}
.preloader .pl-bar{width:150px;height:1px;background:rgba(243,236,221,.16);overflow:hidden;margin-top:4px}
.preloader .pl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--maroon),var(--gold));animation:plBar 1.5s cubic-bezier(.5,0,.2,1) forwards .15s}
@keyframes plIn{to{opacity:1;transform:none}}
@keyframes plBar{to{width:100%}}
@media (prefers-reduced-motion:reduce){.preloader{display:none}}



/* ============ TOP BAR ============ */
/* top:0 with the inset added as padding, not as an offset. Padding keeps the
   background flush to the top and pushes only the logo/CTA/menu clear of a
   notch, which matters when the site is added to the home screen. */
.bar{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  padding:calc(22px + env(safe-area-inset-top,0px)) calc(var(--pad) + env(safe-area-inset-right,0px)) 22px calc(var(--pad) + env(safe-area-inset-left,0px));
  transition:padding .4s ease,background .4s ease,border-color .4s ease;border-bottom:1px solid transparent}
/* centered-mark layout: original flex bar + absolutely-centered small mark */
.bar.scrolled{padding:calc(14px + env(safe-area-inset-top,0px)) calc(var(--pad) + env(safe-area-inset-right,0px)) 14px calc(var(--pad) + env(safe-area-inset-left,0px));background:rgba(16,13,11,.72);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.bar .brand{font-family:var(--wordmark);font-size:30px;line-height:1;color:var(--paper);white-space:nowrap;text-transform:uppercase;letter-spacing:.02em}
.bar .brand .sp{color:var(--gold);font-family:var(--display);font-style:normal;font-size:.62em;vertical-align:.22em;margin-left:2px}
/* small centered monogram mark, recolors with theme, dead-center via absolute */
.bar .brand-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;color:var(--paper)}
.bar .brand-c .sk-mark{display:block;width:54px;height:auto;transition:color .3s ease}
.bar .brand-c:hover{color:var(--gold-light)}
/* the centered mark only shows where there's clearance from the side clusters */
@media (max-width:1180px){.bar .brand-c{display:none}}
.bar .right{display:flex;align-items:center;gap:18px}
.bar .nav-pill{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.bar .nav-pill a{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-dim);padding:10px 18px;transition:color .2s,background .2s;line-height:1}
.bar .nav-pill a + a{border-left:1px solid var(--line)}
.bar .nav-pill a:hover,.bar .nav-pill a.active{color:var(--ink);background:var(--gold)}
.bar .b-loc{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-faint)}
.menu-btn{display:flex;align-items:center;gap:12px;background:none;border:none;color:var(--paper);cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;padding:6px 0}
.menu-btn .bars{display:flex;flex-direction:column;gap:4px;width:24px}
.menu-btn .bars span{height:1.5px;background:var(--paper);width:100%;transition:transform .3s,opacity .3s;transform-origin:center}
.menu-btn:hover .bars span{background:var(--gold-light)}

/* ---- floating menu button (phones) ----
   The bar scrolls away on a phone, so this is the way back to the menu.
   A small inset circle rather than a pinned bar on purpose: a bar has an
   edge running the full width of the screen, and that edge is what reads as
   broken against the strip Safari paints above it. This never touches the
   top of the viewport, so there's no edge to compare against anything.
   Fades in once the bar has scrolled out of reach. */
.menu-fab{display:none;position:fixed;z-index:210;
  top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));
  align-items:center;justify-content:center;width:48px;height:48px;padding:0;
  border-radius:999px;border:1px solid var(--line);color:var(--paper);cursor:pointer;
  background:rgba(16,13,11,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.8);
  opacity:0;transform:scale(.86);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease}
.menu-fab.show{opacity:1;transform:none;pointer-events:auto}
.menu-fab .bars{display:flex;flex-direction:column;gap:4px;width:20px}
.menu-fab .bars span{height:1.5px;width:100%;background:currentColor}
/* the overlay carries its own close button; two at once is noise */
.overlay.open ~ .menu-fab{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.menu-fab{transition:none}}
@media (max-width:860px){.menu-fab{display:flex}}

/* ============ FULL-SCREEN OVERLAY MENU ============ */
/* Full-screen means the whole screen, including the bands iOS Safari keeps
   outside the layout viewport (behind the status bar, under the URL bar). A
   fixed element is clipped to that viewport and can't paint there, so the
   overlay alone always leaves a strip of page showing top and bottom and reads
   as a panel floating over the site. The canvas can paint there, though: give
   the root the overlay's colour while the menu is open and the bands fill in.
   JS pins the body at the same time so no page content is left up there. */
html.menu-open{background:var(--ink-2)}
/* Pinning the page isn't enough on its own: a pinned body is only shifted, and
   its box is still page-height, so it keeps painting into the bands. Hide it
   outright and let the overlay (visibility:visible while open) be the only
   thing drawn. The visibility flip is delayed to the end of the fade so the
   site doesn't cut to black before the menu has arrived; closing has no delay,
   so the page comes straight back as the menu fades out. */
html.menu-open body{position:fixed;left:0;right:0;width:100%;overflow:hidden;
  visibility:hidden;transition:visibility 0s linear .45s}
.overlay{position:fixed;inset:0;z-index:500;background:var(--ink-2);
  opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;display:flex;flex-direction:column}
.overlay.open{opacity:1;visibility:visible}
.overlay::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 80% 20%,rgba(127,22,27,.30),transparent 60%),radial-gradient(50% 60% at 10% 90%,rgba(211,172,51,.12),transparent 60%)}
.ov-top{display:flex;align-items:center;justify-content:space-between;
  padding:calc(22px + env(safe-area-inset-top,0px)) calc(var(--pad) + env(safe-area-inset-right,0px)) 22px calc(var(--pad) + env(safe-area-inset-left,0px));
  position:relative;z-index:2;border-bottom:1px solid var(--line-2)}
.ov-top .brand{font-family:var(--wordmark);font-size:30px;color:var(--paper);text-transform:uppercase;letter-spacing:.02em}
.ov-top .brand .sp{color:var(--gold);font-family:var(--display);font-size:.62em;vertical-align:.22em}
.ov-close{background:none;border:none;color:var(--paper);cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.ov-close:hover{color:var(--gold-light)}
.ov-body{flex:1;display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;
  padding:30px calc(var(--pad) + env(safe-area-inset-right,0px)) calc(30px + env(safe-area-inset-bottom,0px)) calc(var(--pad) + env(safe-area-inset-left,0px));
  position:relative;z-index:2;min-height:0}
.ov-nav{display:flex;flex-direction:column;gap:6px}
.ov-nav a{font-family:var(--display);font-style:italic;font-size:clamp(40px,7vw,84px);line-height:1.02;color:var(--paper-dim);transition:color .3s,transform .4s ease;width:max-content;max-width:100%;display:flex;align-items:baseline;gap:18px}
.ov-nav a .n{font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.2em;color:var(--paper-faint);transition:color .3s}
.ov-nav a:hover,.ov-nav a.active{color:var(--paper)}
.ov-nav a:hover{transform:translateX(14px)}
.ov-nav a:hover .n{color:var(--gold)}
.ov-side{display:flex;flex-direction:column;gap:30px;border-left:1px solid var(--line);padding-left:40px;align-self:stretch;justify-content:center}
.ov-side .grp h5{font-family:var(--mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.ov-side .grp a,.ov-side .grp p{display:block;font-family:var(--serif);font-size:19px;color:var(--paper-dim);line-height:1.7;transition:color .25s}
.ov-side .grp a:hover{color:var(--gold-light)}
.ov-cats{display:flex;flex-direction:column;gap:7px}
/* menu CTA: bordered gold (matches footer), fills on hover */
.ov-cta-grp{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.ov-portal-blk{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ov-portal-blk h5{font-family:var(--mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0}
.ov-side .grp a.btn.ov-cta{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper);background:transparent;border:1px solid var(--gold);border-radius:999px;padding:16px 28px;line-height:1;transition:background .3s,color .3s,transform .2s}
.ov-side .grp a.btn.ov-cta:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.ov-side .grp a.ov-portal{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-light);background:rgba(211,172,51,.08);border:1px solid var(--gold);border-radius:999px;padding:14px 24px;line-height:1;transition:background .3s,color .3s,transform .2s}
.ov-side .grp a.ov-portal:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.ov-side .grp a.ov-portal .arr{transition:transform .25s}
.ov-side .grp a.ov-portal:hover .arr{transform:translateX(4px)}
.ov-foot{display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad);border-top:1px solid var(--line-2);position:relative;z-index:2;flex-wrap:wrap;gap:14px}
.ov-foot .socials{display:flex;gap:24px;font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-faint)}
.ov-foot .socials a:hover{color:var(--gold-light)}

/* motion toggle */
.motion-toggle{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.motion-toggle button{background:none;border:none;color:var(--paper-faint);cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;padding:8px 15px;transition:color .25s,background .25s}
.motion-toggle button.on{background:var(--gold);color:var(--ink)}
.motion-toggle .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-faint);margin-right:12px}

/* ============ FOOTER ============ */
.site-foot{background:var(--ink-2);border-top:1px solid var(--line);
  padding:80px 0 calc(36px + env(safe-area-inset-bottom,0px));position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;align-items:start}
.foot-grid .fbrand{font-family:var(--wordmark);font-size:46px;color:var(--paper);line-height:1;text-transform:uppercase;letter-spacing:.02em}
.foot-grid .flogo{display:block;width:170px;color:var(--paper);transition:color .4s ease;margin:-6px 0 0 -4px}
.foot-grid .flogo .sk-mark{display:block;width:100%;height:auto}
.foot-grid .flogo:hover{color:var(--gold)}
.foot-grid .fbrand .sp{color:var(--gold);font-family:var(--display);font-size:.5em;vertical-align:.4em}
.foot-grid .ftag{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--paper-dim);margin-top:14px;max-width:34ch;line-height:1.5}
.foot-grid h5{font-family:var(--mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.foot-grid a,.foot-grid p{display:block;font-family:var(--serif);font-size:17px;color:var(--paper-dim);line-height:1.9;transition:color .25s}
.foot-grid a:hover{color:var(--gold-light)}
.foot-cta{margin-top:8px}
.foot-cta .btn.gold{padding:12px 22px;font-size:9.5px;letter-spacing:.26em;background:transparent;color:var(--paper);border:1px solid var(--gold)}
.foot-cta .btn.gold:hover{background:var(--gold);color:var(--ink)}
.foot-cta .btn .arr{color:inherit}
.foot-bot{display:flex;justify-content:space-between;align-items:center;margin-top:60px;padding-top:26px;border-top:1px solid var(--line-2);font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-faint);flex-wrap:wrap;gap:12px}
.foot-credit{color:var(--paper-faint);transition:color .25s}
.foot-credit b{color:var(--paper-dim);font-weight:500;letter-spacing:.22em}
.foot-credit:hover{color:var(--gold-light)}
.foot-credit:hover b{color:var(--gold-light)}
.foot-legal{display:inline-flex;gap:18px}
.foot-legal a{color:var(--paper-faint);transition:color .25s}
.foot-legal a:hover{color:var(--gold-light)}
/* Social row in the Studio column. Each icon carries a 42px tap target with
   a matching negative margin, so the row lines up with the text above it and
   the layout doesn't shift. */
.foot-social{display:flex;gap:4px;margin:16px 0 -10px -10px}
.foot-grid .foot-social a{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;margin:0;line-height:0;color:var(--paper-dim)}
.foot-grid .foot-social a:hover{color:var(--gold-light)}
.foot-social svg{width:19px;height:19px;display:block}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;padding:16px 28px;border-radius:999px;cursor:pointer;transition:transform .2s ease,background .3s,color .3s,border-color .3s;border:1px solid transparent;white-space:nowrap}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(5px)}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.gold:hover{background:var(--gold-light);transform:translateY(-2px)}
.btn.ghost{border-color:var(--line);color:var(--paper)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-light)}
.btn.maroon{background:var(--maroon);color:var(--paper)}
.btn.maroon:hover{background:var(--maroon-light);transform:translateY(-2px)}

/* ============ SECTION FURNITURE ============ */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:36px;height:1px;background:var(--gold)}
.sec-title{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(40px,6vw,92px);line-height:1;letter-spacing:-.01em;color:var(--paper)}
.sec-title .gold{color:var(--gold-light)}
.lede{font-family:var(--serif);font-size:clamp(20px,2.4vw,27px);line-height:1.55;color:var(--paper-dim);max-width:60ch}
.lede em{font-style:italic;color:var(--paper)}

/* ============ IMAGE SLOT WRAPPER ============ */
image-slot{--ph-bg:var(--ink-3)}
.shot{position:relative;overflow:hidden;background:var(--ink-3);display:block}
.shot image-slot{width:100%;height:100%;display:block}
.shot .cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:4;display:flex;justify-content:space-between;align-items:flex-end;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;pointer-events:none}
.shot .cap .nm{font-family:var(--display);font-style:italic;font-size:17px;letter-spacing:0;text-transform:none}
.shot:hover .cap{opacity:1;transform:none}
.shot .cap-grad{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.66));opacity:0;transition:opacity .4s;pointer-events:none}
.shot:hover .cap-grad{opacity:1}
.shot .tag{position:absolute;top:14px;left:14px;z-index:4;font-family:var(--mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-light);background:rgba(16,13,11,.6);padding:5px 10px;backdrop-filter:blur(4px)}

/* ============ VIDEO FRAME (theater) ============ */
.vid{position:relative;overflow:hidden;background:#0a0807;display:block;cursor:pointer;border:1px solid var(--line-2)}
.vid .embed{position:absolute;inset:0}
.vid .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .poster{position:absolute;inset:0;background:var(--ink-3);z-index:1}
.vid .poster image-slot{width:100%;height:100%}
.vid .poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.55));z-index:2}
.vid .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;width:84px;height:84px;border-radius:999px;
  border:1px solid rgba(243,236,221,.5);display:flex;align-items:center;justify-content:center;background:rgba(16,13,11,.35);backdrop-filter:blur(3px);transition:transform .3s,background .3s,border-color .3s}
.vid:hover .play{transform:translate(-50%,-50%) scale(1.08);background:var(--gold);border-color:var(--gold)}
.vid .play::before{content:"";border-left:20px solid var(--paper);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px;transition:border-color .3s}
.vid:hover .play::before{border-left-color:var(--ink)}
.vid .meta{position:absolute;left:20px;right:20px;bottom:18px;z-index:5;display:flex;justify-content:space-between;align-items:flex-end}
.vid .meta .ttl{font-family:var(--display);font-style:italic;font-size:clamp(20px,2.4vw,30px);color:var(--paper);line-height:1.05}
.vid .meta .rt{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-light)}
.vid .toplab{position:absolute;top:18px;left:20px;z-index:5;font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-faint)}
/* hover preview: animated still (preview.webp from the portal feed) fades in
   over the poster on hover. Sits under the ::after gradient (z2) and the
   play button (z5), so labels stay legible while the frame moves. */
.vid .poster .vid-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;opacity:0;transition:opacity .5s ease;pointer-events:none}
.vid .poster .vid-preview.on{opacity:1}
/* film frame with no video wired yet: a clean still, no dead play button */
.vid.novideo{cursor:default}
.vid.novideo .play{display:none}

/* ============ REVEAL ANIMATIONS ============ */
.reveal{opacity:0;transform:translateY(38px);transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.reveal-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s cubic-bezier(.16,1,.3,1)}
.reveal-img.in{clip-path:inset(0 0 0 0)}
/* subtle mode: gentler, faster, no big translate */
body[data-motion="subtle"] .reveal{transform:translateY(14px);transition-duration:.6s;transition-delay:0s !important}
body[data-motion="subtle"] .reveal-img{clip-path:none;opacity:0;transition:opacity .6s ease}
body[data-motion="subtle"] .reveal-img.in{opacity:1}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-img{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* parallax only in cinematic */
body[data-motion="subtle"] [data-parallax]{transform:none !important}

/* ============ MISC LAYOUT HELPERS ============ */
.kicker-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.divider{height:1px;background:var(--line);width:100%}
.count{font-family:var(--display);font-style:italic;font-size:clamp(40px,5vw,72px);color:var(--gold-light);line-height:1}
.count-l{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-faint);margin-top:8px}

/* ============ BAR INQUIRE BUTTON ============ */
.bar .bar-cta{padding:11px 20px;font-size:10px}
.bar.scrolled .bar-cta{background:var(--gold)}

/* ============ TESTIMONIALS STRIP ============ */
.reviews-strip{padding:clamp(70px,10vh,120px) 0;background:var(--ink-2);border-top:1px solid var(--line);position:relative;z-index:2}
.reviews-strip .rev-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.reviews-strip .rev-count{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
a.rev-count{border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .25s}
a.rev-count:hover{color:var(--gold-light)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev-card{border:1px solid var(--line);background:var(--ink-3);padding:32px 30px;display:flex;flex-direction:column;gap:18px;margin:0}
.rev-card .rev-stars{color:var(--gold-2);font-size:13px;letter-spacing:3px}
.rev-card blockquote{font-family:var(--display);font-style:italic;font-size:clamp(22px,2.2vw,29px);line-height:1.18;color:var(--paper);margin:0}
.rev-card figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper);margin-top:auto}
.rev-card figcaption span{color:var(--paper-faint)}

/* ============ INQUIRY BLOCK (dark, cinematic — matches the site) ============ */
.inquiry-block{padding:clamp(72px,11vh,150px) 0;position:relative;z-index:2;background:var(--ink);color:var(--paper)}
.inquiry-block .iq-inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,90px);align-items:center}
.inquiry-block .iq-copy h2{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(40px,5.5vw,88px);line-height:.98;color:var(--paper);letter-spacing:-.01em;margin-top:18px}
.inquiry-block .iq-copy h2 .gold{color:var(--gold-light)}
.inquiry-block .iq-copy .iq-lede{font-family:var(--serif);font-size:clamp(19px,1.7vw,23px);line-height:1.55;color:var(--paper-dim);margin-top:22px;max-width:42ch}
.inquiry-block .iq-copy .iq-rev{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--display);font-style:italic;font-size:clamp(21px,2vw,27px);color:var(--gold-light);line-height:1.2;max-width:30ch}
.inquiry-block .iq-copy .iq-rev .src{display:block;font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-faint);margin-top:12px}
.inquiry-block .iq-avail{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-light);margin-top:18px}
.inquiry-block .iq-sales{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-light);border-bottom:1px solid var(--line);padding-bottom:6px}
.inquiry-block .iq-sales:hover{color:var(--gold)}
/* the embedded portal inquiry form (one form for all of SK) */
.iq-embed{border:1px solid var(--line);background:#0d0a08;box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
.iq-embed iframe{display:block;width:100%;height:660px;border:0}
/* fallback line: the embed card stays dark in both themes */
.iq-embed .iq-note{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,236,221,.82);padding:12px 16px;margin:0;border-top:1px solid rgba(243,236,221,.1)}
.iq-embed .iq-note a{color:#F3DC8E;text-transform:none;letter-spacing:.08em;display:inline-block;padding:8px 0;margin:-8px 0}
@media (max-width:640px){.iq-embed iframe{height:620px}}

/* ============ HEIRLOOM / DREAM-OUTCOME ============ */
.heirloom{padding:clamp(80px,12vh,150px) 0;background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;z-index:2}
.heirloom .hl-head{max-width:60ch;margin-bottom:clamp(40px,6vh,64px)}
.heirloom .hl-head h2{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(38px,5.6vw,90px);line-height:1;color:var(--paper);letter-spacing:-.01em;margin-top:18px}
.heirloom .hl-head h2 .gold{color:var(--gold-light)}
.heirloom .hl-head .lede{margin-top:24px}
.heirloom .hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.heirloom .hl-card{display:flex;flex-direction:column;gap:0;margin:0}
.heirloom .hl-card .shot{aspect-ratio:4/5;width:100%}
.heirloom .hl-card figcaption{padding:22px 4px 0}
.heirloom .hl-card h4{font-family:var(--display);font-style:italic;font-size:clamp(26px,2.6vw,34px);color:var(--paper);line-height:1.04}
.heirloom .hl-card p{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--paper-dim);margin-top:8px}
.heirloom .hl-card .hk{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.heirloom .hl-cta{margin-top:clamp(34px,5vh,52px)}

/* heirloom: matted gallery frame, the window fades through starred photos */
.hl-top{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,80px);align-items:center;margin-bottom:clamp(40px,6vh,64px)}
.hl-top .hl-head{margin-bottom:0}
.hl-frame{margin:0;position:relative;width:100%;max-width:480px;justify-self:center}
/* the moulding: warm dark wood with a gold edge */
.fr-frame{position:relative;padding:clamp(12px,1.5vw,18px);
  background:linear-gradient(145deg,#4A3A22 0%,#241B10 42%,#43331D 74%,#1C140B 100%);
  border:1px solid rgba(243,220,142,.35);
  box-shadow:0 44px 70px -28px rgba(0,0,0,.75),inset 0 0 0 1px rgba(0,0,0,.55)}
/* the mat: cream, weighted at the bottom, gold fillet where it meets the frame */
.fr-mat{background:#EFE7D6;border:1px solid rgba(211,172,51,.5);
  padding:clamp(24px,3.2vw,44px) clamp(24px,3.2vw,44px) clamp(32px,4.2vw,58px);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.18)}
/* the window: bevel rim + inner shadow so the print sits behind the mat */
.fr-window{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-3);border:3px solid #F8F2E4}
.fr-window img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.fr-window img.on{opacity:1}
.fr-window::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 3px 9px rgba(0,0,0,.38),inset 0 0 0 1px rgba(0,0,0,.12)}
.fr-cap{margin-top:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-faint);text-align:center}
@media (max-width:900px){.hl-top{grid-template-columns:1fr;gap:36px}.hl-frame{max-width:420px}}

/* sales-page minimal footer */
.foot-grid.foot-min{grid-template-columns:1.6fr 1fr}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .rev-grid{grid-template-columns:1fr}
  .inquiry-block .iq-inner{grid-template-columns:1fr;gap:34px}
  .heirloom .hl-grid{grid-template-columns:1fr;gap:34px}
  .heirloom .hl-card .shot{aspect-ratio:16/10}
  .ov-body{grid-template-columns:1fr;align-items:start;overflow-y:auto;gap:30px}
  .ov-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:26px}
  .foot-grid{grid-template-columns:1fr;gap:34px}
  .bar .b-loc{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .bar .brand,.ov-top .brand{font-size:24px}
}

/* ============ MOBILE HARDENING ============ */
@media (max-width:820px){
  /* bar: drop the quick-pill (those links live in the menu), tighten */
  /* Not fixed on a phone. iOS Safari paints page content up behind the
     status bar but clips fixed elements to the viewport, so a pinned bar
     always sits under a band of whatever is scrolling past — the thing that
     looks broken. Letting it scroll away removes the boundary entirely.
     Every CTA it carried is repeated down the page and in the footer. */
  .bar{position:absolute;
    padding:calc(14px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) 14px calc(18px + env(safe-area-inset-left,0px))}
  /* it's on its way off-screen by the time this fires, so don't have it
     turn dark and frosted as it leaves */
  .bar.scrolled{background:none;backdrop-filter:none;border-bottom-color:transparent;
    padding:calc(12px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) 12px calc(18px + env(safe-area-inset-left,0px))}
  .bar .nav-pill{display:none}
  .bar .brand-c{display:none}
  .bar .right{gap:10px}
  .bar .bar-cta{padding:10px 15px;font-size:9px;letter-spacing:.18em}
  /* menu button: keep the icon, hide the word to save space. The padding and
     matching negative margin grow the tap area to 44px without moving the
     icon a pixel — at 22x25 it was the smallest target on the site, and it's
     the only way into the nav on a phone. */
  .menu-btn{font-size:0;gap:0;padding:16px 10px;margin:-16px -10px -16px 0}
  .menu-btn .bars{width:24px}
  /* overlay nav: a touch smaller so 7 links fit without scroll-fighting */
  .ov-nav a{font-size:clamp(34px,9vw,56px);min-height:44px;align-items:center}
  .reviews-strip .rev-head{margin-bottom:28px}
}
@media (max-width:640px){
  .bar .brand{font-size:19px}
  .ov-top .brand{font-size:21px}
  /* inquiry takeover + reviews padding trim */
  .reviews-strip{padding:54px 0}
  .rev-card{padding:26px 24px}
  .rev-card blockquote{font-size:22px}
  /* footer logo a bit smaller */
  .foot-grid .flogo{width:150px;height:104px}
  /* buttons go full-width so they're easy to tap */
  .btn{padding:15px 22px}
}
/* ---- touch targets (phones) ----
   Everything below sat under the ~44px minimum. Each fix is padding plus an
   equal negative margin, so the tap area grows and the layout doesn't move. */
@media (max-width:860px){
  .ov-close{padding:14px;margin:-14px}
  .ov-top .brand{padding:8px 0;margin:-8px 0}
  /* These links are already display:block, so only the padding is added —
     switching them to inline-block ran the stacked lists together on one row
     ("FilmsGalleriesAboutInvestmentJournal"). */
  .ov-cats a,.ov-side .grp a{padding:6px 0;margin:-6px 0}
  /* .fs is the social row, which already carries its own 42px target */
  .foot-grid a:not(.btn):not(.flogo):not(.fs){padding:6px 0;margin:-6px 0}
  .foot-legal a{display:inline-block;padding:14px 6px;margin:-14px -6px}
  .inquiry-block .iq-sales{padding-top:11px;padding-bottom:17px;margin-top:15px}
  .cinfo .blk a{display:inline-block;padding:12px 0;margin:-12px 0}
}
@media (max-width:430px){
  .bar .brand{font-size:17px;letter-spacing:0}
  /* the wordmark's own line-box is ~17px tall; pad it to a tappable height */
  .bar .brand{padding:12px 0;margin:-12px 0}
  .eyebrow{font-size:9.5px;letter-spacing:.24em}
  .eyebrow::before{width:24px}
  .sec-title{font-size:clamp(34px,11vw,52px)}
}

/* Site-Editor-managed slots with no baked fallback: stay a clean dark panel
   (no drop-icon chrome) until the portal photo fades in. */
image-slot[data-noph]::part(empty){display:none}

/* ---- mobile vertical rhythm ----
   Sections were carrying 75-89px of padding top and bottom on a phone, which
   added up to roughly 7,000px of empty space across the site — up to 18% of a
   page. Everything below is phones only; desktop spacing is untouched.
   The [style] rules use !important because those paddings are inline. */
@media (max-width:600px){
  .inquiry-block{padding:52px 0}
  .reviews-strip{padding:40px 0}
  .site-foot{padding:52px 0 calc(28px + env(safe-area-inset-bottom,0px))}
  section[style*="padding-bottom:clamp"]{padding-bottom:48px !important}
  section[style*="padding-top:clamp"]{padding-top:44px !important}
  section[style*="padding:clamp"]{padding-top:40px !important;padding-bottom:40px !important}

  /* ---- card grids become swipe rails ----
     Every one of these stacked one card per row on a phone, so three or eight
     items cost three or eight screens of scrolling. As a snap rail each costs
     one card's height and the rest is a thumb flick away.

     Selectors are prefixed with `body` on purpose: these grids are defined in
     each page's own <style>, which loads after this file, so a plain class
     selector would lose on source order. `body .inc` (0,1,1) beats `.inc`
     (0,1,0) regardless of order, which keeps this in one place with no
     !important. */
  body .heirloom .hl-grid, body .gtease, body .steps3, body .rev-grid,
  body .values, body .whichfilm, body .inc, body .proc, body .itest{
    display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
    /* without this, snap aligns to the first card's edge and scrolls the
       padding away, so a rail starts flush while the copy above is indented */
    scroll-padding-inline:var(--pad)}
  body .heirloom .hl-grid::-webkit-scrollbar, body .gtease::-webkit-scrollbar,
  body .steps3::-webkit-scrollbar, body .rev-grid::-webkit-scrollbar,
  body .values::-webkit-scrollbar, body .whichfilm::-webkit-scrollbar,
  body .inc::-webkit-scrollbar, body .proc::-webkit-scrollbar,
  body .itest::-webkit-scrollbar{display:none}
  body .heirloom .hl-card, body .gtease .gcard, body .steps3 .s3, body .rev-grid .rev-card,
  body .values .val, body .whichfilm .wf, body .inc .card,
  body .proc .step, body .itest .itc{flex:0 0 76%;scroll-snap-align:start}
  .heirloom .hl-card figcaption{padding:16px 2px 0}
  .heirloom .hl-head{margin-bottom:28px}
  .hl-top{margin-bottom:28px}
  /* The matted frame is a desktop showpiece; on a phone it cost 445px to show
     one photo the galleries already carry. The cards keep the section's job. */
  .hl-frame{display:none}
}