:root{
  --ground:#0B0705; --ink:#F3E6CC; --cream:#F6F1E7; --muted:#B9A582; --quiet:#A8916A; --faint:#8A7656;
  --gold:#E7B45A; --gold-soft:#E8C98A; --amber:#E39A3B; --bracket:#B8741C; --line:#2A1C12;
  --sun:linear-gradient(200deg,#F05A0A 0%,#F7893A 45%,#FFC46B 100%);
  /* golden hour into recording red: used sparingly, on rules, highlights and the REC light */
  --red:#E3261B; --gold-hot:#F4C766;
  --sunset:linear-gradient(90deg,rgba(156,84,24,0) 0%,#C98A2E 18%,var(--gold-hot) 45%,#F7893A 70%,var(--red) 88%,rgba(227,38,27,0) 100%);
  --gild:linear-gradient(120deg,#FFE1A0 0%,var(--gold) 40%,#F7893A 100%);
  --serif:'Bodoni Moda',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
  --gutter:clamp(20px,6vw,96px);
  --section:clamp(88px,12vw,160px);
  color-scheme:dark;
}
/* The REC light */
.rec{display:inline-flex;align-items:center;gap:.7em}
.rec__dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px rgba(227,38,27,.75);animation:rec 1.6s ease-in-out infinite}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.25}}
/* A thin golden-hour rule at the top of a section */
.has-rule{position:relative}
.has-rule::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--sunset);opacity:.55}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}
a{color:var(--gold-soft)}a:hover{color:#FFF1C9}
img,video{display:block;max-width:100%}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{margin:0 0 10px;font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--quiet)}
.h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,52px);color:var(--ink)}
.h2 em{color:var(--gold)}

/* Logo mark (stacked GL / DN with the sun) */
.mark{position:relative;display:inline-flex;flex-direction:column;font-family:var(--serif);font-weight:600;line-height:.84;color:var(--cream)}
.mark__gl{position:relative}
.mark__sun{position:absolute;left:100%;top:0;width:.36em;height:.36em;margin-left:.04em;border-radius:50%;background:var(--sun)}
.mark--sm{font-size:17px}.mark--xs{font-size:15px}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:16px;padding:clamp(14px,2.4vw,22px) clamp(16px,4vw,56px);background:linear-gradient(180deg,rgba(11,7,5,.85),rgba(11,7,5,0));opacity:0;pointer-events:none;transition:opacity .5s ease}
.site-header.is-on{opacity:1;pointer-events:auto}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand__rule{width:1px;height:22px;margin-left:6px;background:#6B4A26}
.brand__media{font-size:11px;letter-spacing:.6em;color:var(--gold-soft)}
.nav{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(14px,2.4vw,28px);font-size:12px;letter-spacing:.28em;text-transform:uppercase}
.nav a{text-decoration:none;color:#CDB894;padding:12px 0;white-space:nowrap;background-image:var(--gild);background-size:0 1px;background-position:0 calc(100% - 6px);background-repeat:no-repeat;transition:background-size .35s ease,color .35s ease}
.nav a:hover{color:var(--gold-hot);background-size:100% 1px}
.nav__ig{background:none!important}
.nav__ig{display:flex;color:var(--gold-soft)!important}

/* Intro / flipbook */
.intro{position:relative;height:520vh}
.intro__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#FBF8F1}
.book-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:1800px;perspective-origin:50% 35%}
.book{position:relative;width:min(72vw,96vh);aspect-ratio:3/2;transform-style:preserve-3d;will-change:transform}
.book__shadow{position:absolute;left:3%;right:-3%;top:8%;bottom:-8%;background:rgba(0,0,0,.6);filter:blur(30px);opacity:0;transform:translateZ(-3px)}
.book__stack{position:absolute;inset:0;border-radius:2px;opacity:0;transform:translateZ(-1px);background:repeating-linear-gradient(135deg,#E9E1D0 0 1px,#BFB197 1px 2px)}
.book__clip{position:absolute;left:-1.4%;top:40%;width:3.4%;height:20%;border-radius:3px;background:#161412;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);opacity:0;transform:translateZ(2px)}
.page{position:absolute;inset:0;container-type:size;overflow:hidden;border-radius:2px;background:#F3EEE3}
.page--flip{transform-origin:0 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
.page.is-cover{background:#FBF8F1}
.page__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.5));opacity:0}
.cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cover__frame{position:relative;width:76cqh;height:84cqh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cover__frame i{position:absolute;width:14cqh;height:13cqh;border:0 solid var(--bracket)}
.cover__frame i:nth-child(1){top:0;left:0;border-top-width:.8cqh;border-left-width:.8cqh}
.cover__frame i:nth-child(2){top:0;right:0;border-top-width:.8cqh;border-right-width:.8cqh}
.cover__frame i:nth-child(3){bottom:0;left:0;border-bottom-width:.8cqh;border-left-width:.8cqh}
.cover__frame i:nth-child(4){bottom:0;right:0;border-bottom-width:.8cqh;border-right-width:.8cqh}
.cover__mark{position:relative;display:flex;flex-direction:column;align-items:flex-start;font-family:var(--serif);font-weight:600;font-size:31cqh;line-height:.84;letter-spacing:-.01em;color:#111}
.cover__sun{position:absolute;right:-.04em;top:.02em;width:.36em;height:.36em;border-radius:50%;background:var(--sun)}
.cover__media{margin-top:5cqh;padding-left:.7em;font-size:3.8cqh;font-weight:400;letter-spacing:.7em;color:#141414}
.frame__img{position:absolute;inset:4.5% 4.5% 9% 4.5%;overflow:hidden;background:#DADAD8}
.frame__img img{width:100%;height:100%;object-fit:cover}
.frame__foot{position:absolute;bottom:3%;font-size:3.2cqh;letter-spacing:.3em;color:#8A7B62;font-variant-numeric:tabular-nums}
.frame__foot--l{left:4.5%}.frame__foot--r{right:4.5%;letter-spacing:.2em}
.intro__grain{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.intro__counter{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);font-size:11px;letter-spacing:.4em;color:rgba(243,230,204,.6);font-variant-numeric:tabular-nums;opacity:0;white-space:nowrap}
.intro__skip{position:absolute;top:18px;right:clamp(20px,4vw,56px);padding:12px 4px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;text-decoration:none;color:rgba(243,230,204,.6)!important;opacity:0}
.intro__cue{position:absolute;left:50%;bottom:3vh;width:80px;margin-left:-40px;text-align:center}
.cue-in{animation:cuein 1.2s ease 3s both}
section[id]{scroll-margin-top:88px}
#top{scroll-margin-top:0}
.cue{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:#3A2A1A;animation:cue 2.4s ease-in-out infinite}
.cue__line{width:1px;height:32px;margin:10px auto 0;background:#3A2A1A}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(8px);opacity:.9}}
@keyframes cuein{from{opacity:0}to{opacity:1}}

/* Statement */
.statement{padding:var(--section) var(--gutter) calc(var(--section) * .75);text-align:center;background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(231,180,90,.13) 0%,rgba(227,38,27,.04) 45%,rgba(11,7,5,0) 75%)}
.statement .eyebrow{margin-bottom:28px}
.statement__line{margin:0 auto;max-width:980px;font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.4vw,76px);line-height:1.08;text-wrap:balance}
.statement__line em{background:var(--gild);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.statement__horizon{width:min(320px,60%);height:1px;margin:clamp(36px,5vw,56px) auto 0;background:var(--sunset)}

/* Work coverflow */
.work{padding:40px 0 var(--section);overflow:hidden}
.eyebrow.rec{display:flex}
.eyebrow .rec__dot{width:7px;height:7px}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 var(--gutter) 48px}
.insta .section-head{padding:0 0 32px}
.filters{display:flex;gap:8px}
.pill{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 22px;border-radius:999px;font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;background:transparent;color:#CDB894;border:1px solid rgba(231,180,90,.35);text-decoration:none}
.pill:hover{border-color:var(--gold)}
.pill.is-on{background:var(--gild);color:#120B07;border-color:transparent}
.pill--line{border-color:var(--gold);color:var(--gold)!important}
.coverflow{position:relative;height:clamp(360px,42vw,560px)}
.card{--w:clamp(240px,30vw,400px);position:absolute;left:50%;top:0;width:var(--w);aspect-ratio:3/4;margin-left:calc(var(--w)/-2);padding:0;border:1px solid rgba(231,180,90,.18);border-radius:3px;overflow:hidden;cursor:pointer;text-align:left;color:var(--ink);font-family:var(--sans);background:#2B1A10;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s ease,filter .7s ease}
.card__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,7,5,.35) 0%,rgba(11,7,5,0) 30%,rgba(11,7,5,0) 55%,rgba(11,7,5,.75) 100%)}
.card__top{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:rgba(243,230,204,.75)}
.card__kind{display:inline-flex;align-items:center;gap:.8em}
.card .rec__dot{display:none;width:7px;height:7px}
.card.is-active .rec__dot{display:block}
.card.is-active{border-color:rgba(244,199,102,.55);box-shadow:0 30px 80px -30px rgba(231,140,50,.45)}
.card__play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:1px solid rgba(255,241,201,.7);display:flex;align-items:center;justify-content:center}
.card__foot{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:4px}
.card__title{font-family:var(--serif);font-size:22px;color:var(--ink)}
.card__tag{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#CDB894}
.coverflow__controls{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:40px}
.coverflow__count{min-width:80px;text-align:center;font-size:12px;letter-spacing:.32em;color:#CDB894}
.round{width:48px;height:48px;border-radius:50%;border:1px solid rgba(231,180,90,.45);background:transparent;color:var(--gold);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s ease,color .3s ease}
.round:hover{background:var(--gild);color:#120B07;border-color:transparent}

/* The range: looping, draggable rows */
.range{padding:var(--section) 0;overflow:hidden}
.range__head{padding:0 var(--gutter) 48px;display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:32px;row-gap:8px}
.range__head .eyebrow{flex-basis:100%}
.range__hint{margin:0 0 6px auto;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--faint)}
.range__rows{display:flex;flex-direction:column;gap:28px}
.row__label{display:flex;align-items:baseline;gap:14px;padding:0 var(--gutter) 12px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--quiet)}
.row__label b{font-weight:500;background:var(--gild);-webkit-background-clip:text;background-clip:text;color:transparent}
.row__view{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.row__view.is-drag{cursor:grabbing}
.row__track{display:flex;gap:12px;width:max-content;will-change:transform}
.tile{--h:clamp(170px,22vw,300px);position:relative;flex:0 0 auto;height:var(--h);padding:0;border:0;border-radius:3px;overflow:hidden;background:#2A1A10;cursor:inherit;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.tile img{height:100%;width:auto;display:block;pointer-events:none;-webkit-user-drag:none}
.tile--ph{display:flex;align-items:flex-end;padding:12px;font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(243,230,204,.45);text-align:left}
.row__view:not(.is-drag) .tile:hover{transform:scale(1.03);filter:brightness(1.08);z-index:2;box-shadow:0 0 0 1px rgba(244,199,102,.6),0 18px 50px -20px rgba(231,140,50,.6)}

/* Brands */
.brands{padding:var(--section) var(--gutter);text-align:center}
.brands .eyebrow{margin-bottom:40px}
.brands__list{list-style:none;margin:0 auto;padding:0;max-width:1180px;display:flex;flex-wrap:wrap;justify-content:center;font-family:var(--serif);font-size:clamp(20px,2.2vw,30px);line-height:1.2;color:var(--ink)}
.brands__list li{flex:0 1 236px;display:flex;align-items:center;justify-content:center;min-height:96px;padding:20px 16px;border-top:1px solid rgba(231,180,90,.16);border-bottom:1px solid rgba(231,180,90,.16);margin-top:-1px;transition:color .3s ease}
.brands__list li:hover{color:var(--gold-hot)}

/* Services */
.services{padding:var(--section) var(--gutter)}
.services .eyebrow{margin-bottom:48px}
.services__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.service{position:relative;background:var(--ground);padding:clamp(28px,4vw,40px) clamp(22px,3vw,32px) clamp(32px,4vw,48px);display:flex;flex-direction:column;gap:16px;transition:background .5s ease}
.service::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sunset);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.service:hover{background:radial-gradient(ellipse 90% 70% at 50% 110%,rgba(231,180,90,.12),var(--ground) 70%)}
.service:hover::after{transform:scaleX(1)}
.service__n{font-size:11px;letter-spacing:.3em;font-weight:500;background:var(--gild);-webkit-background-clip:text;background-clip:text;color:transparent;align-self:flex-start}
.service h3{margin:0;font-family:var(--serif);font-weight:400;font-size:34px;color:var(--ink)}
.service p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}

/* Instagram */
.insta{padding:var(--section) var(--gutter)}
.insta__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,40%),1fr));gap:8px}
.insta__cell{transition:box-shadow .3s ease}
.insta__cell:hover{box-shadow:inset 0 0 0 1px rgba(244,199,102,.6)}
.insta__cell{aspect-ratio:1/1;display:flex;align-items:flex-end;padding:12px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(243,230,204,.5);overflow:hidden;position:relative}
.insta__cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Contact */
.contact{position:relative;padding:var(--section) var(--gutter);text-align:center;overflow:hidden;background:radial-gradient(ellipse 80% 70% at 50% 115%,rgba(244,199,102,.32) 0%,rgba(227,120,40,.22) 28%,rgba(160,30,18,.12) 48%,var(--ground) 72%)}
.contact .eyebrow{margin-bottom:28px;justify-content:center}
.contact__line{margin:0 auto 48px;max-width:900px;font-family:var(--serif);font-weight:400;font-size:clamp(36px,5.6vw,82px);line-height:1.05;text-wrap:balance}
.contact__line em{background:var(--sun);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 clamp(24px,4vw,36px);border-radius:999px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.btn--gold{background:var(--gild);background-size:160% 100%;background-position:0 0;color:#120B07!important;font-weight:500;box-shadow:0 12px 40px -16px rgba(231,140,50,.7);transition:background-position .5s ease,box-shadow .5s ease}
.btn--gold:hover{background-position:100% 0;box-shadow:0 14px 44px -14px rgba(227,38,27,.55)}
.btn--line{border:1px solid rgba(231,180,90,.6);color:var(--gold-soft);transition:border-color .3s ease,color .3s ease}
.btn--line:hover{border-color:var(--gold-hot);color:var(--gold-hot)}
.contact__note{margin:32px 0 0;font-size:13px;letter-spacing:.08em;color:var(--quiet)}

/* Footer */
.footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:40px var(--gutter);border-top:1px solid var(--line);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.footer__brand{display:flex;align-items:center;gap:14px}
.footer__brand .mark{letter-spacing:0;text-transform:none}
.footer__links{display:flex;gap:24px}
.footer__links a{color:var(--faint);text-decoration:none}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,64px);background:rgba(5,3,2,.94)}
.lightbox[hidden]{display:none}
.lightbox__body{width:min(1400px,100%);max-height:100%;display:flex;justify-content:center}
.lightbox__body video,.lightbox__body img{max-width:100%;max-height:calc(100vh - 128px);border-radius:2px}
.lightbox__close{position:absolute;top:16px;right:16px;width:48px;height:48px;border:0;background:transparent;color:var(--ink);cursor:pointer}

/* Narrow windows: a third or quarter of a laptop screen, and phones */
@media (max-width:640px){
  .nav a:not(.nav__ig){font-size:11px;letter-spacing:.2em}
  .book{width:88vw}
  .footer{justify-content:center;text-align:center}
}
@media (max-width:520px){
  .brand__rule,.brand__media{display:none}
  .nav a[href="#services"]{display:none}
  .section-head{gap:16px}
  .filters{width:100%}
  .filters .pill{flex:1 1 0;padding:0 10px;justify-content:center}
  .range__hint{margin-left:0}
  .contact__ctas .btn{flex:1 1 100%}
  .eyebrow{letter-spacing:.38em}
}
@media (max-width:360px){
  .nav{gap:12px}
  .nav a:not(.nav__ig){font-size:10px;letter-spacing:.16em}
  .coverflow__controls{gap:16px}
}
/* Short windows: keep the flipbook and big type inside the frame */
@media (max-height:560px){
  .book{width:min(64vw,84vh)}
  .intro__counter{bottom:3vh}
  .coverflow{height:clamp(300px,70vh,560px)}
  .card{--w:clamp(200px,min(30vw,52vh),400px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .intro{height:100vh}
  .cue,.cue-in,.rec__dot{animation:none}
  .card,.tile,.service,.service::after,.btn--gold{transition:none}
}