@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;src:url(/g-assets/fonts/bodoni-moda-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400;font-display:swap;src:url(/g-assets/fonts/bodoni-moda-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:500;font-display:swap;src:url(/g-assets/fonts/bodoni-moda-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/g-assets/fonts/inter-latin-wght-normal.woff2) format('woff2')}
/* the six colours can be changed in the CRM (Link in bio → Colours); every tint below is worked out from them */
:root{--br:999px;--ls:1;--ms:1;--hs:1;--ts:1;--forest:#0A341B;--dark:#060807;--cream:#F2ECDF;--heading:#F2ECDF;--btn:#F2ECDF;--btn-text:#0A341B;--flame:#F26A3D;
  --forest-2:color-mix(in srgb,var(--forest) 85%,white);--muted:color-mix(in srgb,var(--cream) 72%,transparent);--line:color-mix(in srgb,var(--cream) 55%,transparent);
  --serif:'Bodoni Moda',Didot,'Times New Roman',serif;--sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:color-mix(in srgb,var(--dark) 70%,black)}
body{min-height:100vh;background:color-mix(in srgb,var(--dark) 70%,black);color:var(--cream);font-family:var(--sans);font-size:calc(14px*var(--ts));line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--flame);outline-offset:3px}
svg{display:block;flex:none}
.phone{max-width:480px;margin:0 auto;background:var(--dark);overflow:hidden;position:relative;min-height:100vh}
@media (min-width:520px){body{padding:28px 0}.phone{border-radius:28px;min-height:0;box-shadow:0 30px 80px rgba(0,0,0,.6)}}

/* photos: black & white when the studio wants it */
.bg{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,var(--forest-2),var(--forest) 55%,color-mix(in srgb,var(--forest) 60%,black));background-size:cover;background-position:center}
.bg img{width:100%;height:100%;object-fit:cover;display:block}
.bw .photo img,.bw .card img,.bw .banner img{filter:grayscale(1) contrast(1.06) brightness(.98)}

/* shared type */
.display{color:var(--heading);font-family:var(--serif);font-weight:400;font-style:italic;line-height:1.05;letter-spacing:-.01em;text-align:center;font-size:calc(40px*var(--hs))}
.display.small{font-size:calc(24px*var(--hs))}
.display.soft{color:var(--heading)}
.lead{text-align:center;color:var(--muted);font-size:calc(13.5px*var(--ts));max-width:330px;margin:12px auto 0}
.quote{font-family:var(--serif);font-style:italic;text-align:center;font-size:calc(15px*var(--ts));color:var(--cream);opacity:.9;margin-top:22px}
.quote:empty,.lead:empty{display:none}

/* pill buttons, as in the mock-up: thin outline, spaced capitals */
.pills{display:flex;flex-direction:column;align-items:center;gap:11px;margin-top:22px}
.pill{display:flex;align-items:center;justify-content:center;width:100%;max-width:300px;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:var(--br);
  font-size:calc(11.5px*var(--ts));font-weight:500;letter-spacing:.22em;text-transform:uppercase;text-align:center;color:var(--cream);background:color-mix(in srgb,var(--dark) 18%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s,color .2s,transform .2s}
.pill:hover{background:var(--btn);color:var(--btn-text);border-color:var(--btn)}
.pill:active{transform:scale(.98)}
.pill.primary{background:var(--btn);color:var(--btn-text);border-color:var(--btn);font-weight:600}
.pill.primary:hover{background:color-mix(in srgb,var(--btn) 85%,white)}
.pills.light .pill{background:transparent}

/* 1 · hero */
.hero{position:relative;min-height:640px;display:flex;align-items:flex-end}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,5,.25) 0%,rgba(5,6,5,.05) 22%,rgba(5,6,5,.35) 50%,rgba(5,6,5,.88) 100%)}
.hero-in{position:relative;z-index:1;width:100%;padding:34px 24px 38px;display:flex;flex-direction:column;align-items:center;text-align:center}
.avatar{width:calc(92px*var(--ms));height:calc(92px*var(--ms));border-radius:50%;background:var(--forest);border:1px solid color-mix(in srgb,var(--cream) 60%,transparent);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.avatar img{width:calc(56px*var(--ms));height:auto}
.name{color:var(--heading);font-family:var(--serif);font-weight:500;font-size:calc(44px*var(--hs));line-height:1;letter-spacing:.06em;text-transform:uppercase;margin-top:18px}
.logo{display:block;width:100%;max-width:min(calc(290px*var(--ls)),100%);aspect-ratio:1400/222;margin-top:24px;background:var(--heading);-webkit-mask:url(/l-assets/wordmark.png) center/contain no-repeat;mask:url(/l-assets/wordmark.png) center/contain no-repeat}
.avatar[hidden]+.logo,.avatar[hidden]+.name{margin-top:6px}
.tagline{font-size:calc(10.5px*var(--ts));font-weight:600;letter-spacing:.26em;line-height:1.85;text-transform:uppercase;color:var(--muted);margin-top:10px;max-width:320px;text-wrap:balance}
.logo+.name+.tagline,.logo:not([hidden])~.tagline{margin-top:20px}
.tagline:empty{display:none}
.bio{margin-top:18px;background:color-mix(in srgb,var(--forest) 86%,transparent);border:1px solid color-mix(in srgb,var(--cream) 14%,transparent);border-radius:18px;padding:16px 18px;font-size:calc(13px*var(--ts));line-height:1.6;color:color-mix(in srgb,var(--cream) 92%,transparent);max-width:340px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bio:empty{display:none}

/* 2 · stories (forest) */
.stories{background:var(--forest);padding:44px 0 40px}
.stories .display,.stories .lead{padding:0 24px}
.stories .lead{border-bottom:1px solid color-mix(in srgb,var(--cream) 25%,transparent);padding-bottom:16px;max-width:300px}
.cards{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:22px 24px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cards::-webkit-scrollbar{display:none}
.card{flex:0 0 62%;scroll-snap-align:center;position:relative;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--forest) 80%,black);border:1px solid color-mix(in srgb,var(--cream) 18%,transparent)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover img{transform:scale(1.04)}
.card span{position:absolute;left:0;right:0;bottom:0;padding:28px 10px 12px;background:linear-gradient(180deg,transparent,rgba(5,6,5,.7));font-size:calc(10.5px*var(--ts));font-weight:500;letter-spacing:.24em;text-transform:uppercase;text-align:center}
.stories .pills{padding:0 24px;margin-top:26px;border-top:1px solid color-mix(in srgb,var(--cream) 25%,transparent);padding-top:24px}

/* 3 · banners (black) */
.banners{background:var(--dark);padding:46px 22px 44px}
.banner-list{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.banner{position:relative;display:flex;align-items:center;justify-content:center;height:92px;border-radius:10px;overflow:hidden;background:var(--forest-2)}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.banner::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,5,.55),rgba(5,6,5,.25),rgba(5,6,5,.55))}
.banner b{color:var(--cream);position:relative;z-index:1;padding:0 52px;text-align:center;font-family:var(--serif);font-style:italic;font-weight:400;font-size:calc(32px*var(--hs));line-height:1.05;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.banner b.long{font-size:calc(25px*var(--hs))}
.banner i{color:var(--cream);position:absolute;right:16px;z-index:1;font-style:normal;font-size:18px;opacity:.8;transition:transform .2s}
.banner:hover img{transform:scale(1.05)}
.banner:hover i{transform:translateX(3px)}

/* 4 · call to action on a photo + 5 · thanks card */
.cta{position:relative;padding:62px 24px 26px}
.cta::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,6,5,.86),rgba(5,6,5,.7) 32%,rgba(5,6,5,.62) 60%,rgba(5,6,5,.92))}
.cta .lead{color:color-mix(in srgb,var(--cream) 86%,transparent);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.cta>*{position:relative;z-index:2}
.cta>.bg{position:absolute;z-index:0}
.thanks{margin:44px auto 0;max-width:330px;background:color-mix(in srgb,var(--forest) 92%,transparent);border:1px solid color-mix(in srgb,var(--cream) 14%,transparent);border-radius:14px;padding:26px 22px 22px;text-align:center}
.thanks p{font-size:calc(12.5px*var(--ts));line-height:1.65;color:color-mix(in srgb,var(--cream) 85%,transparent)}
.thanks .display{margin-top:16px}
.ig-big{display:inline-flex;margin-top:12px;color:var(--cream)}
.ig-big svg{width:26px;height:26px}
.socials{display:flex;justify-content:center;gap:10px;margin-top:26px}
.socials a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--cream) 35%,transparent);color:var(--cream);transition:background .2s,color .2s}
.socials a:hover{background:var(--btn);color:var(--btn-text);border-color:var(--btn)}
.socials svg{width:17px;height:17px}
.foot{text-align:center;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--cream) 45%,transparent);margin-top:22px}

/* gentle entrance */
.rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}*{transition:none!important}}