/* Corporate. Its own stylesheet, sharing nothing with the family site.
   Look (Dario, Oct 24): dark, clean and elegant, with gold accents and a
   classic serif, in full colour; the studio's hero wordmark stays exactly as
   it is on the main site. Layout is answer-first: the sentence a buyer (or an
   answer engine) would quote, then the facts, then the questions. */
/* Self-hosted (SIL Open Font License), so nothing loads from a third party. */
@font-face{font-family:"Special Gothic Expanded One";src:url("/fonts/special-gothic-expanded-one-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Luxurious Script";src:url("/fonts/luxurious-script-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("/fonts/eb-garamond-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("/fonts/eb-garamond-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("/fonts/eb-garamond-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --ground:#0c0b0a; --ink:#131210; --ink-2:#1b1916; --line:rgba(201,169,110,.22);
  --text:#ece6dc; --text-soft:#c9c2b6; --muted:#9a9286; --faint:#6f685e;
  --gold:#c9a96e; --gold-light:#dcc39a; --gold-deep:#a8894f; --gold-tint:rgba(201,169,110,.08);
  --on-ink:#ece6dc; --on-ink-muted:#9a9286; --on-gold:#0c0b0a;
  --display:"Special Gothic Expanded One","Arial Narrow",system-ui,sans-serif;
  --serif:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --body:"EB Garamond",Georgia,"Times New Roman",serif;
  --font-script:"Luxurious Script","Snell Roundhand",cursive;
  --hero-shade:rgba(8,7,6,0.62);
  --lightbox-shade:rgba(8,7,6,.94);
  --tracking-caps:.3em;
  --gutter:24px; --max:1080px; --section:88px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--body);font-size:19px;line-height:1.65}
a{color:var(--gold)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;text-wrap:balance;color:var(--text)}
h1,h2{text-transform:uppercase;letter-spacing:.04em;line-height:1.1}
h1{font-size:clamp(34px,5vw,58px);margin-bottom:22px}
h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:32px}
h3{font-size:24px;line-height:1.25}
p{margin:0 0 16px;max-width:62ch}
.muted{color:var(--muted)}

/* Draft banner: only rendered while answers are still "To confirm". */
.draft{background:var(--gold-tint);border-bottom:1px solid var(--gold-deep);color:var(--gold-light);font-size:15px;padding-block:10px}

/* Header: the studio name spaced out in gold, quiet links. */
.top{background:var(--ground);color:var(--on-ink);padding-block:22px;border-bottom:1px solid var(--line)}
.top__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mark{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.32em;font-size:17px;color:var(--gold);text-decoration:none}
.mark span{color:var(--on-ink-muted);margin-left:8px;letter-spacing:.28em;font-size:13px}
.top nav a{color:var(--on-ink);text-decoration:none;font-family:var(--serif);font-size:13px;text-transform:uppercase;letter-spacing:.22em;margin-left:22px;padding-bottom:4px;border-bottom:1px solid transparent}
.top nav a:hover,.top nav a[aria-current="page"]{border-bottom-color:var(--gold);color:var(--gold-light)}
.top--over{border-bottom:0}

/* Hero: one full-height photograph per page, the header sitting over it in
   white, and the studio wordmark pinned to the bottom. The big word is sized
   from --chars, the number of characters in it, so it fills the width without
   overflowing at any viewport. --chars is set by a class, not an inline style
   attribute: _headers sends style-src 'self' with no 'unsafe-inline', so a
   style="" attribute is blocked by the browser and the word would lose its
   size entirely.
   118vw, not the main site's 126vw: measured in the real face, CORPORATE is
   7.452em wide across 9 characters, so 126vw/chars renders it 4.3 per cent
   wider than the viewport. The main site hides that bleed behind
   overflow:hidden; here the word has to stay inside at every width. 118
   leaves the tightest word about 1 per cent clear on each side. */
.hero{position:relative;height:100svh;overflow:hidden;background:var(--ink);color:var(--on-ink)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__pin{position:relative;z-index:1;height:100%;display:grid;grid-template-rows:1fr auto;justify-items:center;text-align:center}
.hero__pin::before{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(to bottom,transparent,var(--hero-shade))}
.hero__kicker{position:relative;align-self:end;max-width:none;margin:0 0 clamp(.75rem,3svh,2.5rem);padding-inline:var(--gutter);font-family:var(--serif);font-weight:500;font-size:clamp(.8rem,.65rem + .6vw,1.15rem);letter-spacing:.32em;line-height:1.6;text-transform:uppercase;text-wrap:balance;color:var(--gold)}
.wordmark{position:relative;display:grid;justify-items:center;max-width:none;margin:0}
.wordmark .script{font-family:var(--font-script);font-size:clamp(3rem,1rem + 8vw,9rem);line-height:.9;margin-bottom:-.2em;z-index:1;text-transform:none}
.wordmark__big{font-family:var(--display);font-size:min(26rem,calc(118vw / var(--chars)));line-height:.74;text-transform:uppercase;margin-bottom:0;white-space:nowrap}
/* margin-bottom is 0, not the main site's -.1em. Measured in the real face:
   with line-height .74 the glyph ink already ends .735em below the content
   box top, so the letters sit flush with the hero's bottom edge on their
   own. The extra -.1em pushed the box past the edge and overflow:hidden cut
   about 18px off the bottom of every letter at 1440px. */
.hero--chars-6{--chars:6}
.hero--chars-9{--chars:9}
.hero--chars-10{--chars:10}

/* The opening screen is exactly one screen: the draft banner, the header and
   the hero share it rather than stacking past the fold. Without this the
   banner pushes a 100svh hero down by its own height and the wordmark, which
   sits flush to the hero's bottom edge, falls off the screen. At 375px the
   banner runs to three lines and takes the kicker with it.

   The header and the hero are given the same grid cell, which is how the
   header ends up over the photograph. Absolute positioning was the obvious
   way and it is wrong here: an absolutely positioned child of a flex or grid
   container takes the container's own corner as its static position, so the
   header jumped on top of the draft banner. Sharing a cell needs no height
   to be known in advance. */
.screen{display:grid;grid-template-rows:auto 1fr;height:100svh}
.screen > .draft{grid-row:1}
.screen > .top--over{grid-row:2;grid-column:1;align-self:start;position:relative;z-index:2;background:transparent}
.screen > .hero{grid-row:2;grid-column:1;height:auto;min-height:0}


/* Intro: the answer, then the action. Sits below the hero. */
.intro{padding-block:var(--section) 64px}
.intro__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.kicker{font-family:var(--serif);font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--gold);margin-bottom:18px}
.answer{font-size:22px;line-height:1.6;color:var(--text-soft);max-width:56ch}
.actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:32px}
.btn,.ask__form button{display:inline-block;font-family:var(--serif);font-weight:500;font-size:15px;text-transform:uppercase;letter-spacing:.26em;padding:16px 30px;background:transparent;color:var(--text);border:1px solid var(--gold);text-decoration:none;cursor:pointer;transition:background .25s ease,color .25s ease}
.btn:hover,.ask__form button:hover{background:var(--gold);color:var(--on-gold)}
.link{font-family:var(--serif);font-size:15px;text-transform:uppercase;letter-spacing:.22em;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:3px;color:var(--text)}

/* Image slots: a photograph, or an honest labelled gap until one arrives. */
.slot{margin:0}
.slot__box{aspect-ratio:3/2;background:var(--ink-2);border:1px dashed var(--faint);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px}
.slot--intro .slot__box{aspect-ratio:4/5}
.slot__file{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.slot__shows{font-size:15px;color:var(--muted);line-height:1.45}
.slot img{display:block;width:100%;height:100%;object-fit:cover}
.slot--photo{aspect-ratio:3/2;overflow:hidden;background:var(--ink)}
.slot--intro.slot--photo{aspect-ratio:4/5;outline:1px solid var(--line);outline-offset:14px}

/* Facts: readouts, the figure over the word, divided by fine gold rules. */
.band{background:var(--ink);color:var(--on-ink);padding-block:44px;border-block:1px solid var(--line)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0}
.fact{padding:6px 28px;border-left:1px solid var(--line);display:flex;flex-direction:column-reverse;gap:8px}
.fact:first-child{border-left:0;padding-left:0}
.fact dd{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.6vw,32px);line-height:1.15;color:var(--gold-light)}
.fact dt{font-family:var(--serif);font-size:12px;color:var(--on-ink-muted);text-transform:uppercase;letter-spacing:.24em}
.fact--tbc dd{color:var(--on-ink-muted);font-style:italic;font-size:19px}

/* Questions: the question as a heading, the answer straight under it. */
.block{padding-block:var(--section);border-top:1px solid var(--line)}
.block--wash{background:var(--ink);border-top:0}
.block--ink{background:var(--ink-2);color:var(--on-ink);border-top:1px solid var(--line)}
.qas{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px}
.qa{padding-block:26px;border-top:1px solid var(--line)}
.qa h3{margin-bottom:10px}
.qa p{margin:0;color:var(--text-soft)}
.tbc{color:var(--faint);font-style:italic}
.qa--tbc h3{color:var(--muted)}

/* Gallery strip on each page */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* Steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.steps li{border-top:1px solid var(--gold);padding-top:22px}
.step__n{display:block;font-family:var(--serif);font-size:40px;line-height:1;color:var(--gold);margin-bottom:14px}
.steps h3{margin-bottom:8px}
.steps p{color:var(--text-soft)}

/* Ask: the one action. */
.ask{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.block--ink h2{color:var(--on-ink)}
.block--ink a{color:var(--gold-light)}
.ask__form{display:flex;flex-direction:column;gap:16px}
.ask__form label{display:flex;flex-direction:column;gap:8px;font-family:var(--serif);font-size:13px;text-transform:uppercase;letter-spacing:.2em;color:var(--text-soft)}
.opt{text-transform:none;letter-spacing:0;font-style:italic;color:var(--on-ink-muted)}
.ask__form input,.ask__form textarea,.ask__form select{font:inherit;font-family:var(--body);font-size:18px;text-transform:none;letter-spacing:0;padding:12px 14px;border:1px solid var(--line);background:var(--ground);color:var(--text)}
.ask__form input:focus,.ask__form textarea:focus,.ask__form select:focus{outline:1px solid var(--gold);outline-offset:2px;border-color:var(--gold)}
.ask__form button{align-self:flex-start;margin-top:8px}

/* Footer */
.foot{background:var(--ground);padding-block:40px;font-size:15px;color:var(--muted);border-top:1px solid var(--line)}
.foot__row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}

/* Gallery page: a grid of thumbnails, each a link to the full photograph.
   lightbox.js turns the links into a viewer over a darkened page; without
   the script, a tap simply opens the photograph. */
.intro--gallery{padding-block:var(--section) 8px}
.shots{border-top:0;padding-block:36px}
.shots__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.shot{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--ink)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease,opacity .4s ease;opacity:.92}
.shot:hover img,.shot:focus-visible img{transform:scale(1.04);opacity:1}
.shot:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.lightbox{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:transparent;color:var(--on-ink)}
.lightbox::backdrop{background:var(--lightbox-shade)}
.lightbox[open]{display:grid;grid-template-columns:56px 1fr 56px;align-items:center}
.lightbox__fig{margin:0;display:grid;justify-items:center;gap:14px;padding:56px 0 24px;max-height:100vh}
.lightbox__img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain}
.lightbox__cap{font-style:italic;font-size:16px;color:var(--on-ink-muted);text-align:center;max-width:60ch;padding-inline:8px}
.lightbox__nav,.lightbox__close{background:transparent;border:0;color:var(--gold);cursor:pointer;font:inherit;line-height:1}
.lightbox__nav{font-size:48px;height:100%;opacity:.8}
.lightbox__nav:hover,.lightbox__close:hover{opacity:1;color:var(--gold-light)}
.lightbox__close{position:absolute;top:12px;right:16px;font-size:40px;opacity:.85;z-index:1}

@media (max-width:860px){
  :root{--section:60px}
  .intro__grid,.ask{grid-template-columns:1fr;gap:40px}
  .slot--intro .slot__box{aspect-ratio:3/2}
  .slot--intro.slot--photo{aspect-ratio:1/1;outline-offset:8px}
  .facts{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .fact:nth-child(3){border-left:0;padding-left:0}
  .qas{grid-template-columns:1fr}
  .gallery,.steps{grid-template-columns:1fr}
  .shots__grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .lightbox[open]{grid-template-columns:36px 1fr 36px}
  .lightbox__nav{font-size:36px}
}
@media (max-width:520px){
  :root{--gutter:18px}
  body{font-size:18px}
  .top nav a{margin:0 16px 0 0;display:inline-block}
  .mark{letter-spacing:.24em}
}