:root{
  --black:#14110d;        /* warm near-black, a dim restaurant */
  --deep:#1c1813;         /* raised warm layer */
  --deeper:#100d0a;
  --gold:#d9a441;         /* candlelight */
  --gold-soft:#e8c583;
  --cream:#ede4d3;        /* warm light on a wall */
  --muted:#b3a892;        /* dim label text — lightened for readability */
  --line:rgba(217,164,65,0.18);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--black);color:var(--cream);
  font-family:'Inter',system-ui,sans-serif;font-weight:400;
  line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;position:relative;
}
/* grain + vignette wash — makes the page feel like footage */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity:0.045;mix-blend-mode:overlay;
}
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 20%,transparent 40%,rgba(0,0,0,0.55) 100%);
}
/* scrubber — a film progress line */
.scrub{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-soft));z-index:10000;transition:width .1s linear}

/* default link colour — gold, so nothing falls back to browser purple */
a{color:var(--gold)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* top nav / brand mark */
.site-nav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  max-width:var(--maxw);margin:0 auto;padding:24px 28px}
.site-nav .brand{display:inline-flex;line-height:0}
.site-nav .brand img{height:56px;width:auto;display:block;opacity:.95;transition:opacity .25s ease}
.site-nav .brand:hover img{opacity:1}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s ease}
.nav-links a:hover{color:var(--gold-soft)}
.nav-links a.active{color:var(--gold)}
.nav-cta{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);text-decoration:none;transition:color .2s ease}
.nav-cta:hover{color:var(--gold-soft)}
.footer-logo{height:60px;width:auto;display:block;margin:0 auto 22px;opacity:.9}
@media(max-width:480px){.site-nav .brand img{height:44px}.nav-links{gap:18px}}

.eyebrow{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);display:inline-block}
.eyebrow .tc{color:var(--muted);margin-right:.9em}

h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;line-height:1.04;letter-spacing:.01em}
h1{font-size:clamp(3rem,9vw,6.6rem)}
h2{font-size:clamp(2.2rem,5vw,3.8rem)}
h1 em,h2 em{font-style:italic;color:var(--gold-soft)}
p.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--cream);max-width:56ch}
.dim{color:var(--muted)}

/* ---- hero ---- */
header.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:120px 0 80px}
.glow{position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:80vw;height:70vh;
  background:radial-gradient(circle,rgba(217,164,65,0.16) 0%,rgba(217,164,65,0.04) 35%,transparent 68%);
  filter:blur(20px);z-index:0;animation:flicker 6s ease-in-out infinite alternate}
@keyframes flicker{0%{opacity:.75}50%{opacity:1}100%{opacity:.82}}
@media (prefers-reduced-motion:reduce){.glow{animation:none}}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.5fr .9fr;gap:48px;align-items:center}
.hero h1{margin:.22em 0 .32em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:2.2em}
.btn{font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--gold);color:var(--black);background:var(--gold);
  text-decoration:none;transition:transform .25s ease,background .25s ease,color .25s ease;display:inline-block;cursor:pointer}
.btn:hover{transform:translateY(-2px);background:var(--gold-soft);border-color:var(--gold-soft)}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:rgba(217,164,65,0.08);transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}

/* vertical reel frame — the phone-native 9:16 */
.frame{position:relative;aspect-ratio:9/16;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:linear-gradient(160deg,#241d15,#14100b 70%);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.frame::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 30%,transparent 45%,rgba(0,0,0,.5))}
.frame .cap{position:absolute;left:12px;bottom:12px;z-index:2;font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.12em;color:var(--gold-soft);text-transform:uppercase}
.frame .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;color:rgba(237,228,211,.5)}
.frame .play svg{width:44px;height:44px}
.frame video,.frame img,.frame iframe{width:100%;height:100%;display:block;border:0}
.frame video,.frame img{object-fit:cover}
.frame.has-embed::after{display:none}
.hero .frame{max-width:300px;margin:0 auto}

section{padding:110px 0;position:relative}
.page-first{padding-top:150px}
.page-min{min-height:calc(100vh - 220px)}
.sec-head{margin-bottom:56px;max-width:60ch}
.sec-head h2{margin-top:.28em}

/* work grid */
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.reels .note{grid-column:1/-1;font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-top:6px}

/* approach */
.approach{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.vals{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.val{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline}
.val .n{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--gold);letter-spacing:.1em}
.val h3{font-size:1.5rem}
.val p{font-size:.95rem;color:var(--muted);margin-top:.3em}

/* packages */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line)}
.pkg{padding:38px 30px;border-right:1px solid var(--line);position:relative}
.pkg:last-child{border-right:none}
.pkg.feat{background:linear-gradient(180deg,rgba(217,164,65,0.07),transparent)}
.pkg .tag{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);position:absolute;top:16px;right:18px}
.pkg h3{font-size:1.9rem;margin-bottom:.1em}
.pkg .price{font-family:'Space Mono',monospace;color:var(--gold-soft);font-size:1rem;margin:.4em 0 1.1em;letter-spacing:.04em}
.pkg .price s{color:var(--muted);text-decoration-color:rgba(154,143,125,.55);margin-right:.5em;font-size:.92em}
.pkg .price ins{color:var(--gold-soft);text-decoration:none}
.pkg .price .off{display:inline-block;margin-left:.55em;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);padding:2px 7px;border-radius:2px;vertical-align:middle}
.pkg-offer{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:.9em}
.pkg p{font-size:.92rem;color:var(--muted)}
.pkg .incl{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:1.2em;padding-top:.95em;border-top:1px solid var(--line)}
.package-notes{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:24px;font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.06em;color:var(--muted)}
.package-notes p::before{content:"＋ ";color:var(--gold)}
.addon{margin-top:26px;font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.06em;color:var(--muted)}
.addon b{color:var(--gold-soft);font-weight:400}

/* testimonial */
.quote{max-width:900px;margin:0 auto;text-align:center}
.quote blockquote{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(1.8rem,4.2vw,3.1rem);line-height:1.18;color:var(--cream);max-width:none}
.quote .who{display:block;margin-top:1.4em;font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.testimonial{background:var(--deeper)}

/* story */
.story{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.story .frame{max-width:270px}
.story p{margin-bottom:1.1em;max-width:52ch}

/* contact */
.contact{background:var(--deep);text-align:center}
.contact h2{margin:.2em 0 .5em}
.contact .lead{margin:0 auto 2em}
.contact-meta{font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2.4em}
.contact-meta a{color:var(--gold);text-decoration:none}

/* ---- enquiry form ---- */
.enquiry-form{max-width:520px;margin:0 auto;text-align:left;display:grid;gap:18px}
.enquiry-form .field{display:grid;gap:7px}
.enquiry-form label span{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.enquiry-form label span .req{color:var(--gold);margin-left:.3em}
.enquiry-form input,.enquiry-form textarea{
  width:100%;background:var(--deeper);border:1px solid var(--line);color:var(--cream);
  font-family:'Inter',sans-serif;font-weight:400;font-size:1rem;padding:13px 15px;border-radius:3px;
  transition:border-color .2s ease}
.enquiry-form textarea{resize:vertical;min-height:120px}
.enquiry-form input:focus,.enquiry-form textarea:focus{outline:none;border-color:var(--gold)}
.enquiry-form input::placeholder,.enquiry-form textarea::placeholder{color:#7a7060}
.enquiry-form button{justify-self:start;margin-top:6px}
.hp{position:absolute;left:-9999px}
.form-note{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-top:.4em}

/* blog placeholder */
.blog-hero{text-align:center}
.blog-hero .wrap{max-width:780px}
.blog-hero h1{font-size:clamp(2.6rem,7vw,5rem);margin:.24em 0 .5em}
.teasers{list-style:none;margin:3.2em auto 0;max-width:560px;text-align:left;border-top:1px solid var(--line)}
.teasers li{padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline}
.teasers .tc{font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.teasers .t{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--cream)}
.teasers .soon{display:block;font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-top:.4em}

footer{padding:40px 0;border-top:1px solid var(--line);text-align:center;
  font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
footer a{color:var(--gold);text-decoration:none}

/* reveal on scroll */
.rise{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero .frame{max-width:230px}
  .approach{grid-template-columns:1fr;gap:40px}
  .reels{grid-template-columns:1fr 1fr;gap:16px}
  .pkgs{grid-template-columns:1fr}
  .pkg{border-right:none;border-bottom:1px solid var(--line)}
  .pkg:last-child{border-bottom:none}
  .story{grid-template-columns:1fr;gap:36px}
  .story .frame{max-width:210px}
  section{padding:84px 0}
  .page-first{padding-top:130px}
}
@media(max-width:480px){.reels{grid-template-columns:1fr 1fr;gap:12px}}