/* Layout: centred, inset column (like a printed programme); framed monochrome photography; work in colour, crew in black and white. */
:root{
  color-scheme:dark;
  --ink:#0B0A09; --panel:#15120F; --rule:#3A342D;
  --cream:#EDE6DA; --body:#C9C1B4; --muted:#8F877A;
  --gold:#C2A36B; --gold-soft:#E8CFA0; --wine:#6B0F1A; --wine-deep:#2A0A0F;
  --display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --text:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --gutter:clamp(22px, 6vw, 80px);
  --section:clamp(64px, 8vw, 120px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--ink);color:var(--body);font-family:var(--text);font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:500;color:var(--cream);text-wrap:balance}
h1{font-size:clamp(2.9rem, 6.6vw, 5.4rem);line-height:1.02}
h2{font-size:clamp(2rem, 4vw, 3.3rem);line-height:1.08}
h3{font-size:clamp(1.4rem, 2vw, 1.8rem);line-height:1.2}
em{font-style:italic;color:var(--gold)}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:860px;margin-inline:auto}
section{padding-block:var(--section)}
.tight{padding-top:0}
.ruled{border-top:1px solid var(--rule)}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.lede{font-size:clamp(1.05rem, 1.35vw, 1.22rem);line-height:1.65;color:var(--cream)}
.center{text-align:center;justify-items:center}
.head{display:grid;gap:16px;margin-bottom:clamp(32px, 4.5vw, 56px)}
.head.center p{max-width:60ch}
.lined{display:flex;align-items:center;gap:18px;justify-content:center}
.lined::before,.lined::after{content:"";width:44px;height:1px;background:var(--gold);opacity:.7}
.stack{display:grid;gap:20px;align-content:start}
.more{display:inline-flex;align-items:center;gap:12px;font-size:.74rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--cream);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:8px;justify-self:start}
.more::after{content:"\2192";color:var(--gold);transition:transform .25s}
.more:hover::after{transform:translateX(5px)}
.center .more{justify-self:center}
.btn{display:inline-block;font-family:var(--text);font-size:.74rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;padding:17px 30px;border:1px solid var(--gold);background:var(--gold);color:var(--ink);cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.btn.ghost{background:transparent;color:var(--cream)}
.btn.ghost:hover{background:var(--gold);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:center}

/* header */
.site-head{position:absolute;top:env(safe-area-inset-top, 0px);left:0;right:0;z-index:30}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px}
.site-head .bar{border-bottom:1px solid rgba(237,230,218,.14)}
.logo img{height:74px;width:auto}
.menu{display:flex;align-items:center;gap:clamp(18px, 2.4vw, 34px)}
.menu a:not(.btn){font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--cream);padding-block:6px;border-bottom:1px solid transparent}
.menu a:not(.btn):hover,.menu a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
.menu .btn{padding:13px 20px}
.burger{display:none;background:none;border:1px solid var(--rule);color:var(--cream);font:600 .72rem var(--text);letter-spacing:.2em;text-transform:uppercase;padding:12px 16px;cursor:pointer}
@media (max-width:980px){
  .burger{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 24px}
  .menu.open{display:flex}
  .menu a:not(.btn){padding-block:16px;border-bottom:1px solid var(--rule)}
  .menu .btn{margin-top:18px;text-align:center}
  .logo img{height:58px}
}

/* heroes */
.hero{padding-block:clamp(170px, 17vw, 230px) 0;background:radial-gradient(ellipse at 50% 0%, #241A12 0%, var(--ink) 62%)}
.hero .wrap{display:grid;gap:26px}
.hero p.sub{max-width:44ch;font-size:1.05rem;color:var(--body)}
.frame{border:1px solid rgba(194,163,107,.45);padding:9px;margin-top:clamp(28px, 4vw, 52px)}
.frame img{width:100%;aspect-ratio:21/9;object-fit:cover}
.page-hero{padding-block:clamp(170px, 17vw, 230px) clamp(48px, 6vw, 80px);background:radial-gradient(ellipse at 50% 0%, #241A12 0%, var(--ink) 70%);border-bottom:1px solid var(--rule)}
.page-hero .wrap{display:grid;gap:22px}
.page-hero p.sub{max-width:56ch;color:var(--body);font-size:1.05rem}

/* generic grids */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px, 6vw, 88px);align-items:center}
.split > *{min-width:0}
.split.flip > .pic{order:-1}
.pic{aspect-ratio:4/5;overflow:hidden;border:1px solid rgba(194,163,107,.3);padding:8px}
.pic img{width:100%;height:100%;object-fit:cover}
.pic.land{aspect-ratio:4/3}
@media (max-width:900px){.split{grid-template-columns:1fr}.pic{aspect-ratio:4/3}.split.flip > .pic{order:0}}
.cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:22px}
.cards > *{background:var(--panel);border:1px solid var(--rule);padding:32px 30px;display:grid;gap:12px;align-content:start;min-width:0}
.cards .eyebrow{margin-bottom:2px}
.cols{display:grid;grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));gap:clamp(26px, 3.5vw, 48px)}
.cols > *{border-top:1px solid var(--gold);padding-top:24px;display:grid;gap:12px;align-content:start;min-width:0}
.cols.it h3{font-style:italic;color:var(--gold)}
.cols p{color:var(--cream)}
.ticks{display:grid;gap:6px;margin-top:6px}
.ticks li{color:var(--cream);font-size:.95rem;padding-left:20px;position:relative}
.ticks li::before{content:"/";color:var(--gold);position:absolute;left:0}

/* band */
.band{background:var(--wine)}
.band .eyebrow,.band .lined{color:var(--gold-soft)}
.band .lined::before,.band .lined::after{background:var(--gold-soft)}
.band em{color:var(--cream)}
.nums{display:grid;grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));gap:clamp(22px, 3vw, 44px)}
.nums div{border-top:1px solid var(--gold-soft);padding-top:20px;display:grid;gap:6px;align-content:start;min-width:0}
.nums b{font-weight:500;font-size:clamp(3.2rem, 6vw, 5.4rem);line-height:1;letter-spacing:-.03em;color:var(--cream);font-variant-numeric:tabular-nums}
.nums span{color:var(--cream)}
.band .note{margin-top:clamp(26px, 3.5vw, 44px);border-top:1px solid var(--gold-soft);padding-top:20px;color:var(--cream);text-align:center}

/* quote */
.quote{position:relative;overflow:hidden}
.quote > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.quote::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, var(--ink) 0%, rgba(11,10,9,.84) 50%, rgba(11,10,9,.6) 100%)}
.quote .wrap{position:relative;z-index:1;display:grid;gap:26px;text-align:center;justify-items:center}
.quote blockquote{font-family:var(--display);font-size:clamp(1.8rem, 3.8vw, 3.3rem);line-height:1.14;color:var(--cream);max-width:24em;text-wrap:balance}
.quote cite{font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--body)}

/* feature + credits */
.feature{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(28px, 5vw, 72px);align-items:center}
.feature > *{min-width:0}
.feature .poster{border:1px solid var(--rule);width:100%}
.laurels{display:flex;flex-wrap:wrap;gap:16px 26px}
.laurels img{width:160px;height:auto}
.small{font-size:.92rem}
@media (max-width:900px){.feature{grid-template-columns:1fr}.feature .poster{max-width:400px}}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 32px;align-items:center;border-top:1px solid var(--rule);padding-block:22px}
.rows li:last-child{border-bottom:1px solid var(--rule)}
.rows li > div{display:grid;gap:4px;min-width:0}
.tag{font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.rows .tag{color:var(--cream);text-align:right}
@media (max-width:700px){.rows li{grid-template-columns:1fr}.rows .tag{text-align:left;color:var(--gold)}}
.two{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));column-gap:clamp(28px, 5vw, 72px)}
.two li{border-top:1px solid var(--rule);padding-block:18px;display:grid;gap:2px;min-width:0}
.two.list li{display:block;color:var(--cream)}
.two.list li::before{content:"/";color:var(--gold);margin-right:14px}
.awards{display:grid;grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));gap:20px}
.awards li{background:var(--panel);border:1px solid var(--rule);padding:30px;display:grid;gap:12px;align-content:start;min-width:0}
.awards li.alt{background:var(--wine-deep);border-color:var(--wine)}
.awards .film{font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--cream);margin-top:8px}

/* galleries */
.mosaic{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));grid-auto-rows:clamp(140px, 17vw, 260px);gap:8px}
.mosaic figure{overflow:hidden;min-width:0}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mosaic figure:hover img{transform:scale(1.04)}
.mosaic .big{grid-column:span 2;grid-row:span 2}
.mosaic .wide{grid-column:span 2}
@media (max-width:760px){.mosaic{grid-template-columns:repeat(2, minmax(0,1fr));grid-auto-rows:40vw}}
.frames{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px}
.frames img{width:100%;aspect-ratio:2.2/1;object-fit:cover}
@media (max-width:760px){.frames{grid-template-columns:1fr}}
.photos{display:grid;grid-template-columns:.8fr 1.5fr 1fr 1.5fr;gap:10px}
.photos img{width:100%;height:clamp(200px, 26vw, 400px);object-fit:cover}
@media (max-width:760px){.photos{grid-template-columns:1fr 1fr}}

/* clients */
.logos{width:100%;max-width:980px;margin-inline:auto}
.groups{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:clamp(24px, 3vw, 44px)}
.groups div{border-top:1px solid var(--rule);padding-top:18px;display:grid;gap:8px;align-content:start;min-width:0}
.groups p:last-child{color:var(--cream)}
.case{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px, 6vw, 88px);align-items:start}
.case > *{min-width:0}
.case .aside{font-family:var(--display);font-style:italic;font-size:clamp(1.4rem, 2.2vw, 1.9rem);color:var(--gold-soft)}
.case p{color:var(--cream)}
.case ul{display:grid;grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));column-gap:36px}
.case li{border-top:1px solid var(--gold-soft);padding-block:22px 28px;display:grid;gap:8px;align-content:start;min-width:0}
@media (max-width:900px){.case{grid-template-columns:1fr}}

/* people */
.people article{border-top:1px solid var(--rule);padding-block:24px;display:grid;gap:8px}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:clamp(26px, 3.5vw, 48px)}
.steps li{counter-increment:s;border-top:1px solid var(--gold);padding-top:22px;display:grid;gap:10px;align-content:start;min-width:0}
.steps li::before{content:"0" counter(s);font-family:var(--display);font-style:italic;font-size:2.6rem;line-height:1;color:var(--gold)}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px, 6vw, 88px);align-items:start}
.contact-grid > *{min-width:0}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
form{display:grid;gap:20px}
.field{display:grid;gap:8px}
.pair{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:20px}
label{font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
input,select,textarea{width:100%;font:inherit;color:var(--cream);background:var(--panel);border:1px solid var(--rule);padding:15px 16px;border-radius:0}
textarea{min-height:170px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{padding:16px 18px;border:1px solid var(--gold);color:var(--cream)}
.status.err{border-color:#B4505C}
.details{display:grid;gap:0}
.details div{border-top:1px solid var(--rule);padding-block:20px;display:grid;gap:6px}
.details a,.details p.v{color:var(--cream);font-size:1.12rem;text-decoration:none;overflow-wrap:anywhere}
.details a:hover{color:var(--gold)}
.cta{background:radial-gradient(ellipse at 50% 100%, #241A12 0%, var(--ink) 70%);border-top:1px solid var(--rule)}

/* footer */
footer{border-top:1px solid var(--rule);padding-block:clamp(44px, 5vw, 72px) 28px}
.foot{display:grid;grid-template-columns:1.3fr repeat(3, minmax(0,1fr));gap:clamp(28px, 4vw, 56px)}
.foot > *{min-width:0;display:grid;gap:10px;align-content:start}
.foot img{height:88px;width:auto}
.foot a{text-decoration:none;color:var(--body);font-size:.94rem}
.foot a:hover{color:var(--gold)}
.foot .tagline{font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--cream)}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}}
.legal{margin-top:40px;border-top:1px solid var(--rule);padding-top:22px;display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
