@layer base, type, mobile;
@layer base{

/* =====================================================================
   LUXE & LEGACYE  ·  DESIGN SYSTEM  ·  v2

   1. THE GREY / IVORY RELATIONSHIP is the identity. Charcoal, graphite,
      stone-grey and ivory carry every surface.
   2. GOLD IS ONLY EVER THE FRAME. It appears in the logo mark, the hero
      corners, the seams between sections, the hover-frame on images and
      the bracket on primary calls to action. Nowhere else.
   3. THE FRAME is an "L" and a rotated "L" (see the logo). Used five ways
      only: hero corners · section seams · image hover · CTA · the enquiry.
   ===================================================================== */
:root{
  --ink:#0C0C0D; --charcoal:#1E1F23; --graphite:#2A2B30;
  --ivory:#F5F1E8; --ivory-warm:#F1EADC; --stone:#D9D7D0;
  --champagne:#CDB88E; --gold-deep:#8A7443;
  --fg-dark:#F3EFE6; --muted-dark:rgba(243,239,230,.68);
  --fg-light:#1E1F23; --muted-light:#55524B; --muted-stone:#45433D;
  --serif:"Bodoni Moda","Bodoni 72","Didot",Georgia,serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(1.25rem,4.6vw,5.5rem);
  --space:clamp(6rem,15vw,14rem);
  --ease:cubic-bezier(.22,.7,.12,1);
  --header-h:68px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark light;
}
@media (min-width:900px){:root{--header-h:88px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ivory:#E9E4D7;--ivory-warm:#E6DFCF;--stone:#CBC9C2;--muted-light:#4F4C46}}
:root[data-theme="dark"]{--ivory:#E9E4D7;--ivory-warm:#E6DFCF;--stone:#CBC9C2;--muted-light:#4F4C46}

.tone-dark,.tone-ink{--bg:var(--charcoal);--fg:var(--fg-dark);--muted:var(--muted-dark);--hair:rgba(243,239,230,.18);--hair-strong:rgba(243,239,230,.38);--frame:var(--champagne);--btn-fill:var(--ivory);--btn-ink:var(--charcoal);background:var(--bg);color:var(--fg)}
.tone-ink{--bg:var(--ink)}
.tone-light,.tone-warm,.tone-stone{--bg:var(--ivory);--fg:var(--fg-light);--muted:var(--muted-light);--hair:rgba(30,31,35,.18);--hair-strong:rgba(30,31,35,.42);--frame:var(--gold-deep);--btn-fill:var(--charcoal);--btn-ink:var(--ivory);background:var(--bg);color:var(--fg)}
.tone-warm{--bg:var(--ivory-warm)}
.tone-stone{--bg:var(--stone);--muted:var(--muted-stone);--hair:rgba(30,31,35,.22)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 5.5rem)}
html.menu-open{overflow:hidden}
body{margin:0;background:var(--ink);color:var(--fg-dark);font:400 1rem/1.7 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main,footer{overflow-x:clip}
h1,h2,h3,p,ul,dl,dd,figure{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
fieldset{border:0;margin:0;padding:0;min-width:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-5rem;z-index:100;background:var(--ivory);color:var(--charcoal);padding:.8rem 1.2rem;text-decoration:none;transition:top .3s}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 1rem)}

.wrap{width:100%;max-width:1720px;margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--space)}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.2rem,6vw,3.5rem)}
@media (min-width:900px){.grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(.75rem,2vw,2rem);row-gap:0}}

/* Type */
.h2{font:400 clamp(2.3rem,5.4vw,5.4rem)/1.05 var(--serif);letter-spacing:-.012em;font-optical-sizing:auto}
.h2 .it{font-style:italic}
.h3{font:400 clamp(1.5rem,2.1vw,2rem)/1.15 var(--serif)}
.lede{font-size:clamp(1.05rem,1.25vw,1.2rem);line-height:1.8;color:var(--muted);max-width:34rem}
.small{font-size:.9rem;color:var(--muted)}
.mask{display:block;overflow:hidden;padding-block:.07em;margin-block:-.07em}
.mask>span{display:block;transition:transform 1.5s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal]:not(.is-in) .mask>span{transform:translateY(112%)}
.js [data-fade]:not(.is-in){opacity:0}
[data-fade]{transition:opacity 1.8s var(--ease);transition-delay:var(--d,0s)}

/* Text link: sentence case, a line that lengthens */
.link{display:inline-flex;align-items:center;gap:.9rem;padding-block:.65rem;font:500 .95rem/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;color:inherit}
.link::after{content:"";height:1px;width:2rem;background:currentColor;opacity:.7;transition:width .8s var(--ease)}
@media (hover:hover){.link:hover::after{width:4rem}}

/* CTA: bracketed. The Frame's L and rotated L hug the label, then close. */
.cta{--a:16px;position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:3.6rem;padding:1.15rem 2.6rem;font:500 .74rem/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--fg);cursor:pointer;background:none;border:0}
.cta::before,.cta::after{content:"";position:absolute;width:var(--a);height:var(--a);border:0 solid var(--frame);transition:width 1s var(--ease),height 1s var(--ease)}
.cta::before{left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.cta::after{right:0;top:0;border-right-width:1px;border-top-width:1px}
@media (hover:hover){.cta:hover::before,.cta:hover::after,.cta:focus-visible::before,.cta:focus-visible::after{width:100%;height:100%}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.6rem;padding:1.1rem 2.6rem;background:var(--btn-fill);color:var(--btn-ink);border:1px solid var(--btn-fill);font:500 .74rem/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .6s var(--ease),color .6s var(--ease)}
@media (hover:hover){.btn:hover{background:transparent;color:var(--fg)}}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.4rem}

/* ---------- THE FRAME (image hover) ---------- */
.frame{position:relative;--ax:26px;--ay:56px;--off:12px;--x:0px}
.frame::before,.frame::after{content:"";position:absolute;z-index:3;pointer-events:none;border:0 solid var(--frame);transition:width 1.4s var(--ease),height 1.4s var(--ease)}
.frame::before{left:calc(var(--off)*-1);bottom:calc(var(--off)*-1);width:calc(var(--ax) + var(--x));height:calc(var(--ay) + var(--x));border-left-width:1px;border-bottom-width:1px}
.frame::after{right:calc(var(--off)*-1);top:calc(var(--off)*-1);width:calc(var(--ax) + var(--x));height:calc(var(--ay) + var(--x));border-right-width:1px;border-top-width:1px}
.js .frame:not(.is-in){--ax:0px;--ay:0px}
@media (hover:hover){.hoverframe:hover .frame,.hoverframe:focus-visible .frame{--ax:100%;--ay:100%;--x:calc(var(--off)*2)}}

/* ---------- IMAGE SLOTS ----------
   Every photograph on the site is a slot: <img data-slot="name">.
   Replace via the IMAGES manifest in the script. Open the page with ?slots
   to see each slot's name, ratio and recommended size.               */
.fig{position:relative;overflow:hidden;background:var(--graphite)}
.fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fig img.par{inset:-6% 0;height:112%;will-change:transform}
.js .fig[data-reveal]:not(.is-in){clip-path:inset(0 0 100% 0)}
.fig[data-reveal]{clip-path:inset(0);transition:clip-path 1.7s var(--ease)}
.r45{aspect-ratio:4/5}.r34{aspect-ratio:3/4}.r32{aspect-ratio:3/2}
.show-slots [data-label]{position:relative}
.show-slots [data-label]::before{content:attr(data-label);position:absolute;top:.6rem;left:.6rem;z-index:30;background:#fff;color:#000;padding:.35rem .55rem;font:600 11px/1.3 ui-monospace,monospace;letter-spacing:0;max-width:calc(100% - 1.2rem)}

/* ---------- SEAMS (Frame at section boundaries) ---------- */
.seam{position:absolute;z-index:6;top:-4.5rem;width:3rem;height:9rem;pointer-events:none}
.seam i,.seam b{position:absolute;display:block;transition:transform 1.5s var(--ease)}
.seam i{left:0;top:0;width:1px;height:100%;background:linear-gradient(180deg,var(--sa) 50%,var(--sb) 50%);transform-origin:top}
.seam b{left:0;bottom:0;height:1px;width:100%;background:var(--sb);transform-origin:left;transition-delay:.9s}
.seam--l{left:var(--gutter)}
.seam--r{right:var(--gutter)}.seam--r i{left:auto;right:0}.seam--r b{left:auto;right:0;transform-origin:right}
.seam--dl{--sa:var(--champagne);--sb:var(--gold-deep)}
.seam--ld{--sa:var(--gold-deep);--sb:var(--champagne)}
.js .seam:not(.is-in) i{transform:scaleY(0)}
.js .seam:not(.is-in) b{transform:scaleX(0)}

/* ---------- HEADER (always dark: the logo is gold and lives on dark) ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:70;padding-top:env(safe-area-inset-top,0px);color:var(--fg-dark);transition:background-color .6s var(--ease)}
.site-header.is-scrolled{background:rgba(12,12,13,.95)}
.site-header.is-open{background:transparent}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--header-h);padding-inline:var(--gutter);max-width:1720px;margin-inline:auto}
.brand{display:inline-flex;align-items:center;flex:none;text-decoration:none}
/* OFFICIAL LOGO SLOTS: images are never stretched, recoloured or cropped */
.logo{display:block;line-height:0}
.logo img{display:block;width:auto;height:auto;max-width:100%;object-fit:contain}
.brand .logo img{height:46px;width:auto}
@media (min-width:900px){.brand .logo img{height:62px}}
.nav{display:none}
.nav ul{display:flex;gap:clamp(1.4rem,2.2vw,2.6rem)}
.nav a{position:relative;display:block;padding:.9rem 0;font:500 .68rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-decoration:none}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.4rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.nav a[aria-current="true"]::after,.nav a:hover::after{transform:scaleX(1)}
.nav-cta{display:none;--frame:var(--champagne);min-height:2.9rem;padding:.8rem 1.7rem;--a:11px}
.menu-btn{display:inline-flex;align-items:center;gap:.9rem;padding:.8rem 0;background:none;border:0;cursor:pointer;font:500 .68rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.menu-btn__lines{position:relative;width:26px;height:9px}
.menu-btn__lines::before,.menu-btn__lines::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .7s var(--ease),top .7s var(--ease)}
.menu-btn__lines::before{top:0}.menu-btn__lines::after{top:8px}
.menu-btn[aria-expanded="true"] .menu-btn__lines::before{top:4px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__lines::after{top:4px;transform:rotate(-45deg)}
@media (min-width:1240px){.nav{display:block}.nav-cta{display:inline-flex}.menu-btn{display:none}}

.menu{position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--fg-dark);--muted:var(--muted-dark);--hair:rgba(243,239,230,.18);--frame:var(--champagne);padding:calc(env(safe-area-inset-top,0px) + var(--header-h) + 1.2rem) 0 calc(env(safe-area-inset-bottom,0px) + 2rem);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s .7s}
.menu.is-open{opacity:1;visibility:visible;transition-delay:0s}
.menu__in{display:grid;gap:2.2rem}
.menu__list a{display:block;padding:.28rem 0;font:400 clamp(1.9rem,8.4vw,3rem)/1.12 var(--serif);text-decoration:none}
.menu__list li{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.menu.is-open .menu__list li{opacity:1;transform:none;transition-delay:calc(.12s + var(--i)*.06s)}
.menu__label{font-size:.85rem;color:var(--muted);margin-bottom:.6rem}
.menu__soon li{display:flex;align-items:baseline;gap:.9rem;padding:.25rem 0;font:italic 400 1.25rem/1.3 var(--serif);color:var(--muted)}
.menu__soon small,.foot-soon small{font:500 .66rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;font-style:normal}
.menu__contact{display:grid;gap:.3rem;font-size:.98rem}
.menu__contact a{text-decoration:none}
.menu__cta{justify-self:start;margin-left:0}

.fab{position:fixed;right:max(1rem,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);z-index:55;display:grid;place-items:center;width:3.1rem;height:3.1rem;background:var(--charcoal);border:1px solid rgba(243,239,230,.45);color:var(--fg-dark);text-decoration:none;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .8s var(--ease),transform .8s var(--ease),background-color .5s}
.fab.is-on{opacity:1;transform:none;pointer-events:auto}
.fab svg{width:22px;height:22px}
@media (hover:hover){.fab:hover{background:var(--ivory);color:var(--charcoal)}}

/* ---------- HERO ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--fg-dark);--muted:var(--muted-dark)}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform-origin:72% 62%;animation:push 42s ease-out forwards;will-change:transform}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,12,13,.5),transparent 24%),linear-gradient(0deg,rgba(12,12,13,.78),rgba(12,12,13,.22) 46%,transparent 74%)}
.hero__frame{--fi:10px;position:absolute;z-index:1;inset:calc(var(--header-h) + 10px) var(--fi) var(--fi) var(--fi);pointer-events:none;--fx:clamp(34px,5vw,72px);--fy:clamp(72px,15vh,150px)}
.hero__frame::before,.hero__frame::after{content:"";position:absolute;width:var(--fx);height:var(--fy);border:0 solid var(--champagne);animation:grow 2s var(--ease) .9s both}
.hero__frame::before{left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.hero__frame::after{right:0;top:0;border-right-width:1px;border-top-width:1px}
@keyframes grow{from{width:0;height:0}}
.hero__content{position:relative;padding-bottom:calc(var(--fi,10px) + clamp(2.6rem,7vh,4.6rem))}
.hero__logo{width:clamp(200px,56vw,270px)}
.hero__logo img{width:100%;height:auto}
.hero__line{margin-top:1.4rem;font:italic 400 1.2rem/1.35 var(--serif);color:var(--fg-dark);max-width:18rem}
@media (min-width:900px){
  .hero__row{display:flex;align-items:flex-end;justify-content:space-between;gap:3rem}
  .hero__logo{width:clamp(260px,23vw,410px)}
  .hero__line{margin:0 0 1.4rem;text-align:right;font-size:clamp(1.1rem,1.35vw,1.3rem)}
  .hero__frame{--fi:26px}
  .hero__content{padding-bottom:calc(26px + clamp(2.6rem,7vh,4.6rem))}
}

/* ---------- THESIS ---------- */
.thesis__body{display:grid;gap:1.8rem;align-content:end}
@media (min-width:900px){
  .thesis .h2{grid-column:1/10}
  .thesis__body{grid-column:1/6;grid-row:2;margin-top:clamp(3rem,8vw,8rem)}
  .thesis__fig{grid-column:7/13;grid-row:2;margin-top:clamp(3rem,8vw,8rem)}
}

/* ---------- OCCASIONS ---------- */
.doors{display:grid;gap:clamp(4rem,10vw,5rem)}
.door{display:block;text-decoration:none;color:inherit}
.door .frame{--off:10px;margin:0 0 1.9rem}
.door .fig img{transition:transform 2.6s var(--ease)}
.door--b .fig img{object-position:66% 50%}
.wed__b img{object-position:66% 50%}
.door__text{display:grid;gap:.8rem;max-width:26rem}
.door .link{justify-self:start}
@media (hover:hover){.door:hover .fig img{transform:scale(1.035)}.door:hover .link::after{width:4rem}}
@media (min-width:900px){
  .occ__head{grid-column:1/8;margin-bottom:clamp(3rem,7vw,7rem)}
  .doors{grid-column:1/-1;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(.75rem,2vw,2rem)}
  .door--a{grid-column:1/7}
  .door--b{grid-column:7/13;margin-top:clamp(5rem,13vw,14rem)}
  .door--b .frame,.door--b .door__text{margin-left:clamp(0px,4vw,5rem)}
}

/* ---------- THE HOUSE ---------- */
.band{padding-block:clamp(7rem,18vw,16rem);position:relative}
.band__quote{font:400 clamp(2.8rem,9vw,9.4rem)/1 var(--serif);letter-spacing:-.015em}
.band__quote .mask:nth-child(2){font-style:italic;margin-left:clamp(0rem,12vw,14rem)}
.band__sig{margin-top:clamp(2rem,4vw,3.5rem);margin-left:clamp(0rem,12vw,14rem);color:var(--muted);max-width:26rem}

/* ---------- CORPORATE: architectural, aligned, rectilinear ---------- */
.corp__head{display:grid;gap:2rem}
@media (min-width:900px){.corp__head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(.75rem,2vw,2rem);align-items:end}.corp__head .h2{grid-column:1/9}.corp__head .lede{grid-column:9/13;padding-bottom:.6rem}}
.bleed{margin-top:clamp(3rem,7vw,6rem)}
.bleed .fig{aspect-ratio:4/5}
@media (min-width:900px){.bleed .fig{aspect-ratio:21/9}}
.schedule{display:grid;gap:2.6rem clamp(1.5rem,3vw,3rem);margin-top:clamp(3rem,7vw,6rem)}
.schedule li{border-top:1px solid var(--hair);padding-top:1.4rem}
.schedule h3{font:400 clamp(1.45rem,2vw,1.95rem)/1.15 var(--serif);margin-bottom:.6rem}
.schedule p{color:var(--muted);max-width:26rem}
@media (min-width:760px){.schedule{grid-template-columns:repeat(3,minmax(0,1fr))}}
.occasions{display:flex;flex-wrap:wrap;gap:.4rem clamp(1.6rem,3vw,3rem);margin-top:clamp(3.5rem,7vw,6rem);font:italic 400 clamp(1.2rem,2vw,1.8rem)/1.3 var(--serif)}
.chapter__cta{margin-top:clamp(2.5rem,5vw,4rem)}

/* ---------- WEDDING: tactile, staggered, softer ---------- */
.wed__head{display:grid;gap:1.8rem}
@media (min-width:900px){.wed__head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(.75rem,2vw,2rem)}.wed__head .h2{grid-column:3/13}.wed__head .lede{grid-column:3/8;margin-top:2rem}}
.wed{display:grid;gap:3.2rem;margin-top:clamp(3rem,7vw,6rem)}
.wed__b{width:72%;justify-self:end}
.wed__list li{padding-block:.55rem;font:400 clamp(1.35rem,2.1vw,1.9rem)/1.35 var(--serif)}
.wed__list i{color:var(--muted);font-size:.86em}
@media (min-width:900px){
  .wed{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(.75rem,2vw,2rem);align-items:start}
  .wed__a{grid-column:1/8;grid-row:1}
  .wed__b{grid-column:9/13;grid-row:1;width:auto;justify-self:stretch;align-self:end}
  .wed__list{grid-column:1/13;grid-row:2;margin-top:clamp(1.5rem,4vw,4rem);column-count:2;column-gap:clamp(2rem,6vw,6rem)}
  .wed__list li{break-inside:avoid}
}
.extras{margin-top:clamp(3rem,6vw,5rem)}

/* ---------- CONCIERGE INVITATION ---------- */
.eyebrow{font:italic 400 1.05rem/1 var(--serif);color:var(--muted);margin-bottom:1.5rem}
.conc{display:grid;gap:3.2rem}
.conc__sub{font:italic 400 clamp(1.7rem,3.2vw,2.9rem)/1.15 var(--serif);margin:1.4rem 0 2rem}
.conc .lede{max-width:33rem}
.brief{margin:2.4rem 0 2.8rem;border-top:1px solid var(--hair);max-width:30rem}
.brief li{padding:.85rem 0;border-bottom:1px solid var(--hair);font:400 1.1rem/1.3 var(--serif);color:var(--muted)}
.brief li.brief__key{font-style:italic;color:var(--fg);font-size:clamp(1.25rem,1.9vw,1.6rem)}
.conc .h2{font-size:clamp(3rem,7.2vw,7rem)}
@media (min-width:900px){
  .conc{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(.75rem,2vw,2rem);align-items:center}
  .conc__text{grid-column:1/7}
  .conc__figwrap{grid-column:8/13}
}

/* ---------- DIRECT CONTACT LIST (reused inside the Concierge section) ---------- */
.direct{border-top:1px solid var(--hair);margin-top:2rem;max-width:26rem}
.direct div{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding-block:.95rem;border-bottom:1px solid var(--hair);align-items:baseline}
.direct dt{font-size:.88rem;color:var(--muted)}
.direct a{text-decoration:none;overflow-wrap:anywhere}
@media (hover:hover){.direct a:hover{text-decoration:underline;text-underline-offset:.35em}}
.is-ph{font-style:italic}

/* ---------- LEAD PANEL: light side drawer, always available ---------- */
.lead-tab{position:fixed;z-index:54;right:0;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;background:var(--ivory);color:var(--charcoal);border:0;padding:1.5rem .95rem;font:500 .7rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;cursor:pointer;transition:padding .6s var(--ease)}
@media (hover:hover){.lead-tab:hover{padding-inline:1.2rem}}
.lead-tab:focus-visible{outline:2px solid var(--champagne);outline-offset:2px}
@media (max-width:899px){
  .lead-tab{writing-mode:horizontal-tb;transform:none;top:auto;right:auto;left:max(1rem,env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);height:3.1rem;padding:0 1.5rem;display:inline-flex;align-items:center;opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
  .lead-tab.is-on{opacity:1;pointer-events:auto}
}
.lead{position:fixed;inset:0;z-index:90;visibility:hidden;transition:visibility 0s .7s}
.lead.is-open{visibility:visible;transition-delay:0s}
.lead__scrim{position:absolute;inset:0;background:rgba(12,12,13,.6);opacity:0;transition:opacity .6s var(--ease)}
.lead.is-open .lead__scrim{opacity:1}
.lead__panel{position:absolute;top:0;right:0;bottom:0;width:min(540px,100%);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .7s var(--ease);padding-bottom:env(safe-area-inset-bottom,0px)}
.lead.is-open .lead__panel{transform:none}
.lead__bar{display:flex;align-items:center;justify-content:space-between;flex:none;height:72px;padding:env(safe-area-inset-top,0px) clamp(1.25rem,5vw,2.2rem) 0;box-sizing:content-box}
.lead__bar .logo img{height:44px;width:auto}
.lead__close{display:inline-flex;align-items:center;gap:.8rem;background:none;border:0;padding:.8rem 0;color:var(--fg-dark);cursor:pointer;font:500 .68rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.lead__close i{position:relative;width:20px;height:20px}
.lead__close i::before,.lead__close i::after{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:currentColor;transform:rotate(45deg)}
.lead__close i::after{transform:rotate(-45deg)}
.lead__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:clamp(1.6rem,5vw,2.4rem) clamp(1.25rem,5vw,2.2rem) 3rem;--err:#A63A24}
.lead__title{font:400 clamp(1.9rem,4.4vw,2.5rem)/1.08 var(--serif);margin-bottom:.9rem}
.enq-context{font:italic 400 1.08rem/1.45 var(--serif);color:var(--muted);margin-bottom:1.8rem;padding-bottom:1.2rem;border-bottom:1px solid var(--hair)}
.enq-context b{font-style:normal;font-weight:400;color:var(--fg)}
.q{border:0;margin:0 0 1.9rem;padding:0;min-width:0}
.q__l{display:block;font:400 1.2rem/1.3 var(--serif);margin-bottom:.8rem;padding:0}
.q__opt{font:400 .82rem/1 var(--sans);color:var(--muted);margin-left:.4rem}
.fields{display:grid;gap:1.4rem 1.4rem;grid-template-columns:1fr 1fr}
.fields .span2{grid-column:1/-1}
.field label{display:block;font-size:.86rem;color:var(--muted);margin-bottom:.1rem}
.field input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair-strong);border-radius:0;outline:0;padding:.55rem 0;font:400 1.05rem/1.4 var(--sans);color:var(--fg)}
.field input:focus{border-bottom-color:var(--fg);box-shadow:0 1px 0 var(--fg)}
.field input::placeholder,.q textarea::placeholder{color:var(--muted);opacity:.75;font-style:italic;font-family:var(--serif)}
.field input[aria-invalid="true"]{border-bottom-color:var(--err)}
.q--story{--off:12px;--ax:26px;--ay:60px;padding:.4rem 0;margin-block:2.4rem}
.q--story .q__l{font-size:1.45rem;line-height:1.25;margin-bottom:.5rem}
.q__hint{font:italic 400 1rem/1.5 var(--serif);color:var(--muted);margin:0 0 .9rem}
.q textarea{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair-strong);border-radius:0;outline:0;padding:.7rem 0;font:400 1.05rem/1.6 var(--sans);color:var(--fg);resize:vertical}
.q--story textarea{min-height:9.5rem;border-top:1px solid var(--hair);font-size:1.12rem}
.q textarea:focus{border-bottom-color:var(--fg);box-shadow:0 1px 0 var(--fg)}
.chips__row{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:block;padding:.7rem 1rem;border:1px solid var(--hair-strong);font-size:.93rem;line-height:1;transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.chip input:checked+span{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.chip input:focus-visible+span{outline:2px solid currentColor;outline-offset:3px}
.err{min-height:1.4em;font-size:.92rem;color:var(--err,#F0B7A5);margin-top:.4rem}
.form__foot{display:grid;gap:.9rem;margin-top:.8rem}
.form__foot .btn{justify-self:stretch}
.confirm h3{font:400 clamp(1.8rem,4vw,2.3rem)/1.1 var(--serif);margin-bottom:.8rem}
.confirm .lede{max-width:none;font-size:1rem}
.confirm__preview{margin:1.4rem 0;padding:1.1rem 1.2rem;border-left:1px solid var(--hair-strong);white-space:pre-wrap;font:400 .95rem/1.7 var(--sans);color:var(--fg)}
.confirm__note{font-size:.86rem;color:var(--muted);margin-top:1rem}
.confirm .actions .btn{width:100%}
.confirm:focus{outline:0}
.textbtn{background:none;border:0;padding:.7rem 0;cursor:pointer;text-decoration:underline;text-underline-offset:.35em;font-size:.95rem;color:inherit}
html.lead-open{overflow:hidden}
@media (max-width:420px){.fields{grid-template-columns:1fr}}

/* ---------- SOME OF OUR WORK: full-bleed, self-playing reel ---------- */
.reel{position:relative;width:100%;overflow:hidden;background:var(--ink);color:var(--fg-dark);height:64vh;min-height:360px;margin-top:clamp(2rem,5vw,3.5rem)}
.reel__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:inherit;display:block}
.reel__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,12,13,.82),rgba(12,12,13,.15) 45%,transparent 68%);pointer-events:none}
.reel__cap{position:absolute;left:var(--gutter);right:var(--gutter);bottom:4.5rem;max-width:36rem}
.reel__cap #film-title{margin-bottom:.3rem}
.reel__bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:1.4rem}
.reel__dots{display:flex;gap:.5rem;max-width:16rem}
.reel__dot{flex:1;min-width:44px;min-height:44px;padding:0;background:none;border:0;cursor:pointer;display:flex;align-items:center}
.reel__dot::before{content:"";display:block;width:100%;height:2px;background:rgba(243,239,230,.3)}
.reel__dotfill{position:relative;display:block;height:2px;width:0;background:var(--champagne);margin-top:-2px}
@keyframes reel-fill{from{width:0}to{width:100%}}
@media (min-width:700px){.reel{height:78vh}}
@media (min-width:1100px){.reel{height:82vh;max-height:820px}}

/* ---------- GLIMPSE STRIP: five matched stills, full-bleed, above the reel ---------- */
.glimpse{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;background:var(--ink)}
.glimpse::-webkit-scrollbar{display:none}
.glimpse__item{flex:0 0 42vw;aspect-ratio:1;margin:0;scroll-snap-align:start;background:var(--graphite);overflow:hidden}
.glimpse__item img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:700px){
  .glimpse{gap:3px;overflow-x:visible}
  .glimpse__item{flex:1 1 0}
}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* ---------- FOOTER ---------- */
.footer{padding-block:clamp(4rem,8vw,7rem) calc(2rem + 3.5rem);border-top:1px solid rgba(243,239,230,.12)}
.footer__grid{display:grid;gap:2.6rem}
.footer__brand{display:grid;gap:1.2rem;align-content:start}
.footer__brand p{font:italic 400 1.4rem/1.25 var(--serif);max-width:15ch}
.footer h2{font:italic 400 1.1rem/1 var(--serif);color:var(--muted-dark);margin-bottom:1rem}
.footer li{padding:.25rem 0}
.footer a{text-decoration:none;color:var(--fg-dark)}
.foot-soon li{display:flex;align-items:baseline;gap:.8rem;color:var(--muted-dark)}
.footer__base{margin-top:clamp(3rem,6vw,5rem);padding-top:1.4rem;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:.85rem;color:var(--muted-dark)}
@media (hover:hover){.footer a:hover{text-decoration:underline;text-underline-offset:.35em}}
@media (min-width:900px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}

.menu__soon{font:italic 400 1.3rem/1.35 var(--serif);color:var(--muted)}
.foot-soon{font:italic 400 1.2rem/1.4 var(--serif);color:var(--muted-dark)}
.soon-note{font:400 .9rem/1.6 var(--sans);font-style:normal;color:var(--muted-dark)}
.footer__logo .logo img{width:clamp(190px,22vw,270px);height:auto}
.footer__brand p{max-width:none}
.show-slots [data-logo][data-label]{position:relative;display:block}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
}

}
@layer type{
/* =====================================================================
   TYPE SYSTEM: the single source of truth for every piece of text.
   Two families, one weight for reading text, no italics anywhere.

     HEADING          Bodoni Moda   large   section headings
     SUB HEADING      Bodoni Moda   medium  titles of items, cards, panels
     DESCRIPTION      Instrument    large   the paragraph under a heading
     SUB DESCRIPTION  Instrument    small   the text under a sub heading
     LABEL            Instrument    caps    eyebrows, group titles, nav, buttons
     LINK             Instrument    500     text links and text buttons
     INPUT            Instrument    16px    anything the visitor types

   Change a value here and it changes everywhere.
   ===================================================================== */
:root{
  --t-h:clamp(2.3rem,5.4vw,5.4rem);
  --t-sub:clamp(1.4rem,1.9vw,1.85rem);
  --t-desc:clamp(1.05rem,1.25vw,1.2rem);
  --t-small:.95rem;
  --t-label:.78rem;
  --t-input:1rem;
}
/* HEADING */
.h2,.band__quote{font:400 var(--t-h)/1.06 var(--serif);letter-spacing:-.012em;font-style:normal;text-transform:none}
/* SUB HEADING */
.h3,.schedule h3,.work__title,.films__name,.lead__title,.confirm h3,.q--story .q__l,.conc__sub,.hero__line,.footer__brand p,.menu__list a,.brief li.brief__key,.occasions li,.wed__list li{font:400 var(--t-sub)/1.2 var(--serif);letter-spacing:0;font-style:normal;text-transform:none}
/* DESCRIPTION */
.lede,.band__sig{font:400 var(--t-desc)/1.75 var(--sans);letter-spacing:0;font-style:normal;text-transform:none;color:var(--muted)}
/* SUB DESCRIPTION */
.small,.schedule p,.work__desc,.wed__list i,.brief li,.direct dd,.footer li,.partner__note,.q__hint,.enq-context,.confirm__preview,.confirm__note,.menu__soon,.foot-soon,.soon-note,.menu__contact,.q__opt,.fig.is-empty::after,.chip span,.door__text .small,.footer__base{font:400 var(--t-small)/1.7 var(--sans);letter-spacing:0;font-style:normal;text-transform:none}
.small,.schedule p,.work__desc,.wed__list i,.brief li,.partner__note,.q__hint,.enq-context,.confirm__preview,.confirm__note,.menu__soon,.foot-soon,.soon-note,.q__opt,.footer__base{color:var(--muted)}
.brief li.brief__key{color:inherit}
.enq-context b{font-weight:500;font-style:normal;color:var(--fg)}
.wed__list i{display:block;margin-top:.2rem}
.chip span{line-height:1}
.fig.is-empty::after{color:rgba(243,239,230,.4)}
/* LABEL (and interface text: navigation, buttons) */
.eyebrow,.work__type,.footer h2,.menu__label,.direct dt,.q__l,.field label,.partner__l,.nav a,.menu-btn,.cta,.btn,.lead-tab,.lead__close{font:500 var(--t-label)/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;font-style:normal}
.eyebrow,.work__type,.footer h2,.menu__label,.direct dt,.q__l,.field label,.partner__l{color:var(--muted)}
.q--story .q__l{color:inherit}
.q__l{margin-bottom:.9rem}
.q__opt{margin-left:.5rem}
/* LINK */
.link,.textbtn,.skip,.reel__mute,.direct a,.footer a,.menu__contact a{font:500 var(--t-small)/1.4 var(--sans);letter-spacing:0;font-style:normal;text-transform:none;color:inherit}
.footer li a{font-weight:400}
.direct a,.menu__contact a{font-weight:400}
/* INPUT */
input,textarea,select{font:400 var(--t-input)/1.5 var(--sans);font-style:normal}
input::placeholder,textarea::placeholder{font:400 var(--t-input)/1.5 var(--sans);font-style:normal;color:var(--muted);opacity:.85}
/* nothing italic, anywhere */
i,em,cite,.it,.is-ph,.mask,.mask>span{font-style:normal}
/* spacing that goes with the scale */
.menu__list a{padding:.55rem 0}
.occasions{gap:.5rem clamp(1.6rem,3vw,3rem)}
.wed__list li{padding-block:.75rem}
.occasions{margin-top:1.1rem}

}
@layer mobile{
/* =====================================================================
   MOBILE & TABLET: touch comfort, spacing, tablet layouts.
   Every interactive element is at least 44px tall; nothing relies on hover.
   ===================================================================== */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
a,button,label,select{touch-action:manipulation}
:root{--space:clamp(4.5rem,13vw,14rem)}

/* brief section: one photograph in the Frame */
.thesis__brief{aspect-ratio:1024/820}
.thesis__fig{--off:10px}

/* touch targets */
.link,.textbtn,.partner__n,.menu-btn,.lead__close{min-height:44px}
.link,.textbtn,.partner__n{display:inline-flex;align-items:center}
.cta,.btn{min-height:48px}
.field input{min-height:48px}
.chip span{display:flex;align-items:center;min-height:44px}
.footer li{padding:0}
.footer li a,.menu__contact a,.direct a{display:inline-flex;align-items:center;min-height:44px;padding-block:.2rem}
.menu__list a{min-height:48px;display:flex;align-items:center}

/* the enquiry panel follows the visible screen height (mobile browser bars, keyboards) */
@supports (height:100dvh){.lead__panel{height:100dvh;bottom:auto}}
.lead__body{-webkit-overflow-scrolling:touch;scroll-padding-block:6rem}

@media (max-width:899px){
  .hero__content{padding-bottom:calc(var(--fi,10px) + 2.4rem)}
  .footer{padding-bottom:calc(2rem + 4.5rem + env(safe-area-inset-bottom,0px))}
}

/* small tablets and large phones held upright: use the width, do not just stretch */
@media (min-width:600px) and (max-width:899px){
  .doors{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem;align-items:start}
  .door--b{margin-top:4rem}
  .bleed .fig{aspect-ratio:16/9}
  .thesis__fig,.conc__figwrap{max-width:30rem}
  .thesis__fig{justify-self:end}
  .work__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .work__item--lead{grid-column:1/-1}
  .work__item--lead .fig{aspect-ratio:16/10}
  .work__item:last-child:nth-child(even){grid-column:auto}
  .work__item:last-child:nth-child(even) .fig{aspect-ratio:4/5}
  .work__item:not(.work__item--lead) .work__desc{display:block}
}

/* phones held sideways: short screens */
@media (max-height:500px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 1rem)}
  .hero__logo{width:clamp(130px,20vw,190px)}
  .hero__frame{display:none}
  .lead__bar{height:56px}
  .menu__in{gap:1.2rem}
  .menu__list a{font-size:1.4rem;min-height:44px}
}

/* short phones: give the hero subject room above the logo */
@media (max-width:899px) and (max-height:700px){
  .hero__logo{width:clamp(150px,46vw,200px)}
  .hero__line{margin-top:1rem}
}

}