/* 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:20px;border-bottom:1px solid var(--line)}
.top__row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:nowrap}
.mark{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:17px;line-height:1;color:var(--gold);text-decoration:none;white-space:nowrap;display:flex;align-items:center}
.mark span{color:#fff;opacity:.8;margin-left:10px;letter-spacing:.22em;font-size:12.5px}
.top__nav{display:flex;align-items:center;gap:22px;white-space:nowrap}
.top__nav a{color:#fff;text-decoration:none;font-family:var(--serif);font-size:13.5px;line-height:1;text-transform:uppercase;letter-spacing:.1em;padding-block: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}
.top--over .mark,.top--over .top__nav a{text-shadow:0 1px 10px rgba(0,0,0,.7)}
.top--over .mark{color:var(--gold-light)}

/* Phone menu: a three-line button top right that opens a full-screen list.
   Built on <details>, so it needs no script (the CSP allows none inline).
   Hidden on wider screens, where the links sit in the header. */
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;position:relative;z-index:61}
.menu summary::-webkit-details-marker{display:none}
.menu__bars,.menu__bars::before,.menu__bars::after{display:block;width:30px;height:1px;background:var(--text);transition:transform .25s ease,background .25s ease}
.menu__bars{position:relative}
.menu__bars::before,.menu__bars::after{content:"";position:absolute;left:0}
.menu__bars::before{top:-9px}
.menu__bars::after{top:9px}
.menu[open] .menu__bars{background:transparent}
.menu[open] .menu__bars::before{transform:translateY(9px) rotate(45deg);background:var(--gold)}
.menu[open] .menu__bars::after{transform:translateY(-9px) rotate(-45deg);background:var(--gold)}
.menu[open] summary{position:fixed;top:14px;right:var(--gutter)}
.menu__panel{position:fixed;inset:0;z-index:60;background:var(--ground);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px}
.menu__panel a{color:var(--text);text-decoration:none;font-family:var(--serif);font-size:17px;text-transform:uppercase;letter-spacing:.3em;padding-bottom:6px;border-bottom:1px solid transparent}
.menu__panel a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}

/* Where each hero photograph's subject sits, so a narrow phone crop keeps
   the person in frame rather than the middle of the room. */
.hero__img--x40{object-position:40% 50%}
.hero__img--x50{object-position:50% 50%}
.hero__img--x55{object-position:55% 50%}
.hero__img--x80{object-position:80% 50%}

/* 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}
.hero--chars-11{--chars:11}

/* 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: four plain readouts. The figure in gold, what it means in a full
   sentence under it, each opened by a fine gold rule. On phones they become
   a list: figure on the left, meaning on the right, so nothing wraps into
   spaced capitals (Dario, Oct 24: the first version read as unclear). */
.band{background:var(--ink);color:var(--on-ink);padding-block:56px;border-block:1px solid var(--line)}
.facts__label{font-family:var(--serif);font-size:13px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--gold);margin:0 0 24px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:0}
.fact{border-top:1px solid var(--gold-deep);padding-top:20px;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px}
.fact dd{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(28px,2.8vw,36px);line-height:1.1;color:var(--gold-light)}
.fact dt{font-family:var(--body);font-size:17px;line-height:1.45;color:var(--text-soft)}
.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:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.ask__wide{grid-column:1/-1}
.ask__form label{display:flex;flex-direction:column;gap:6px;font-family:var(--serif);font-size:11px;text-transform:uppercase;letter-spacing:.18em;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:16px;text-transform:none;letter-spacing:0;padding:9px 12px;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{grid-column:1/-1;justify-self:start;margin-top:6px}

/* 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:1380px){
  .top__nav{display:none}
  .menu{display:block}
}
@media (max-width:860px){
  :root{--section:60px}
  .mark{font-size:14px;letter-spacing:.24em}
  .mark span{display:none}
  .intro__grid,.ask{grid-template-columns:1fr;gap:40px}
  .ask__form{grid-template-columns:1fr}
  .slot--intro .slot__box{aspect-ratio:3/2}
  .slot--intro.slot--photo{aspect-ratio:1/1;outline-offset:8px}
  .facts{grid-template-columns:1fr;gap:0}
  .fact{display:grid;grid-template-columns:42% 1fr;column-gap:20px;align-items:baseline;padding-block:18px;border-top:1px solid var(--line)}
  .fact dd{grid-column:1;grid-row:1;font-size:26px}
  .fact dt{grid-column:2;grid-row:1;font-size:17px}
  .fact:first-child{border-top-color:var(--gold-deep)}
  .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}
  .mark{letter-spacing:.24em}
}
/* Guides (articles) and the guide cards on a service page */
.article__wrap{max-width:760px}
.article .kicker a{color:inherit;text-decoration:none}
.prose{margin-top:40px}
.prose h2{font-size:clamp(24px,2.6vw,32px);margin:48px 0 16px}
.prose p,.prose li{font-size:19px;line-height:1.65;color:var(--text-soft)}
.prose ol,.prose ul{padding-left:1.3em;margin:0 0 24px}
.prose li{margin-bottom:10px}
.prose li strong{color:var(--text)}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:18px}
.prose th,.prose td{text-align:left;padding:14px 12px;border-top:1px solid var(--line)}
.prose th{font-weight:600;color:var(--text)}
.guides{list-style:none;margin:0;padding:0;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.guide{display:block;height:100%;padding:28px;border:1px solid var(--line);text-decoration:none;color:inherit}
.guide:hover,.guide:focus-visible{border-color:var(--text-soft)}
.guide h3{margin-bottom:10px}
.guide p{margin:0;color:var(--text-soft)}
/* Footer: studio, services, guides */
.foot__grid{display:grid;gap:40px 48px;grid-template-columns:1.2fr 1fr 1.4fr;padding-block:16px}
.foot__col p{margin:12px 0 0;color:var(--muted);line-height:1.6}
.foot__label{margin:0 0 14px!important;font-family:var(--serif);letter-spacing:.24em;text-transform:uppercase;font-size:13px;color:var(--text-soft)!important}
.foot__col ul{list-style:none;margin:0;padding:0}
.foot__col li{margin-bottom:10px;line-height:1.45}
.foot__col a{color:var(--text-soft);text-decoration:none}
.foot__col a:hover,.foot__col a:focus-visible{color:var(--text);text-decoration:underline}
@media (max-width:820px){.foot__grid{grid-template-columns:1fr}}
/* The date a page last changed, from git. It sits under the footer row and is
   the same value the sitemap sends as lastmod, so a reader and a crawler are
   told the same thing. */
.updated{max-width:var(--max);margin:14px auto 0;padding-inline:var(--gutter);font-family:var(--serif);font-size:13px;letter-spacing:.08em;color:var(--muted)}

/* Consent banner. Both answers are the same size, the same shape and the same
   distance away: the accepted one is filled and the declined one is not,
   following the site's own buttons rather than nudging. It appears once and
   does not return after a choice. Tokens only: this sheet has --gold, not an
   --accent, which is why an earlier version rendered one button invisible. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);color:var(--text);
  border-top:1px solid var(--line);padding:18px var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;justify-content:center}
.consent__text{margin:0;max-width:62ch;font-family:var(--body);font-size:15px;line-height:1.5;color:var(--text-soft)}
.consent__buttons{display:flex;flex-wrap:wrap;gap:12px}
.consent__btn{font-family:var(--serif);font-weight:500;font-size:14px;text-transform:uppercase;
  letter-spacing:.2em;padding:13px 22px;cursor:pointer;
  background:var(--gold);color:var(--on-gold);border:1px solid var(--gold);
  transition:background .25s ease,color .25s ease}
.consent__btn--plain{background:transparent;color:var(--text)}
.consent__btn:hover{background:var(--gold-light);border-color:var(--gold-light)}
.consent__btn--plain:hover{background:var(--gold);color:var(--on-gold)}
@media (max-width:40rem){.consent{justify-content:flex-start}.consent__buttons{width:100%}.consent__btn{flex:1 1 auto}}