:root {
  --ink: #101113;
  --ink-soft: #181a1d;
  --paper: #f2efe9;
  --paper-2: #e8e3da;
  --line: rgba(16, 17, 19, .18);
  --white: #f8f6f1;
  --olive: #777964;
  --muted: #a6a39c;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top:96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img { width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .055; z-index: 9999; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 22px 34px; color: var(--white); mix-blend-mode: difference; }
.brand { display: inline-flex; align-items: baseline; gap: 14px; letter-spacing: .14em; }
.brand-by { font-size: 10px; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.brand-name { font-family: var(--serif); font-size: 22px; letter-spacing: .12em; }
.nav { display: flex; gap: 28px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.nav a { position: relative; }
.nav a:after { content:''; position:absolute; left:0; right:100%; bottom:-5px; height:1px; background:currentColor; transition:.3s; }
.nav a:hover:after { right:0; }
.menu-toggle { display:none; background:none; border:0; color:inherit; font-size:11px; letter-spacing:.15em; }
.hero { min-height: 100svh; position: relative; overflow: hidden; background: #0e0f11; color: var(--white); }
.hero-media, .hero-media img, .hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.hero-media img { object-fit: cover; object-position: 53% 38%; filter: saturate(.68) contrast(1.05) brightness(.72); }
.hero-shade { background: linear-gradient(90deg, rgba(10,11,12,.88) 0%, rgba(10,11,12,.53) 42%, rgba(10,11,12,.08) 70%, rgba(10,11,12,.15) 100%); }
.hero-copy { position:absolute; z-index:2; left:6vw; bottom:12vh; max-width:760px; }
.eyebrow, .section-kicker { font-size: 11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; }
.hero h1 { font-family:var(--serif); font-size:clamp(58px, 7.4vw, 120px); line-height:.92; font-weight:500; margin:22px 0 26px; letter-spacing:-.035em; }
.hero p { max-width:620px; font-size:18px; line-height:1.6; color:rgba(248,246,241,.82); }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:34px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; text-transform:uppercase; letter-spacing:.12em; font-size:11px; border:1px solid transparent; transition:.25s; }
.button-light { background:var(--white); color:var(--ink); }
.button-light:hover { background:transparent; color:var(--white); border-color:var(--white); }
.text-link { display:inline-flex; align-items:center; gap:10px; font-size:13px; text-transform:uppercase; letter-spacing:.12em; border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:5px; }
.text-link.dark { border-color: rgba(16,17,19,.35); }
.monogram { width:76px; height:76px; border:1px solid currentColor; border-radius:50%; display:grid; grid-template-rows:1fr auto 1fr; place-items:center; font-family:var(--serif); font-size:22px; }
.monogram span{display:block;line-height:1}.monogram span:first-child{transform:translateY(2px)}.monogram span:last-child{transform:translateY(-2px)}
.monogram i { width:20px; height:1px; background:currentColor; display:block; opacity:.65; }
.hero-mark { position:absolute; right:4vw; bottom:6vh; z-index:3; }
.section-pad { padding: 120px 6vw; }
.manifesto { display:grid; grid-template-columns:1fr 3fr; gap:7vw; border-bottom:1px solid var(--line); }
.manifesto-copy { font-family:var(--serif); font-size:clamp(34px, 4.3vw, 70px); line-height:1.12; margin:0; max-width:1200px; }
.manifesto-copy em { font-weight:500; color:var(--olive); }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:48px; }
.section-head h2, .about h2, .retainer h2, .enquire h2 { font-family:var(--serif); font-weight:500; font-size:clamp(42px,5vw,78px); line-height:1; margin:15px 0 0; letter-spacing:-.025em; }
#hero-heading,#about-heading{white-space:pre-line}
.section-head > p { max-width:440px; color:#66645f; line-height:1.6; margin:0; }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.filter { border:1px solid var(--line); background:transparent; padding:10px 15px; border-radius:99px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; }
.filter.active, .filter:hover { background:var(--ink); color:var(--paper); }
.project-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:290px; gap:12px; }
.project { position:relative; overflow:hidden; grid-column:span 4; background:#222; cursor:pointer; }
.project-tall { grid-row:span 2; }
.project-wide { grid-column:span 8; }
.project img,.project>video { height:100%; width:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.65,.2,1), filter .5s; filter:saturate(.82) contrast(1.03); }
.project:hover img,.project:hover>video { transform:scale(1.035); filter:saturate(1); }
.project-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(7,8,9,.82)); }
.project-meta { position:absolute; left:22px; bottom:20px; color:var(--white); }
.project-meta span { font-size:10px; text-transform:uppercase; letter-spacing:.18em; opacity:.72; }
.project-meta h3 { font-family:var(--serif); font-size:30px; margin:5px 0 2px; font-weight:500; }
.project-meta p { margin:0; font-size:12px; opacity:.72; }
.project.is-hidden { display:none; }
.project-fallback{position:absolute;inset:0;background:linear-gradient(135deg,#2d2f31,#111214)}
.portfolio-loading{grid-column:1/-1;padding:80px 0;text-align:center;color:#66645f}
.about { background:var(--ink); color:var(--white); }
.about-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:8vw; align-items:center; }
.about-photo { position:relative; }
.about-photo img { aspect-ratio:4/5; object-fit:cover; object-position:center; filter:saturate(.65) contrast(1.06); }
.floating-mark { position:absolute; right:-35px; bottom:50px; background:var(--paper); color:var(--ink); }
.about-copy p { color:rgba(248,246,241,.7); line-height:1.8; font-size:17px; max-width:620px; }
.about-copy .text-link { margin-top:18px; border-color:rgba(255,255,255,.35); }
.services { background:var(--paper-2); }
.service-list { border-top:1px solid var(--line); }
.service { display:grid; grid-template-columns:80px minmax(260px,1fr) 1.2fr; gap:35px; align-items:start; border-bottom:1px solid var(--line); padding:34px 0; }
.service > span { font-size:11px; letter-spacing:.15em; }
.service h3 { font-family:var(--serif); font-size:32px; margin:0; font-weight:500; }
.service p { margin:0; line-height:1.7; color:#66645f; max-width:600px; }
.retainer { display:grid; grid-template-columns:1fr 1fr; gap:9vw; align-items:end; border-top:1px solid var(--line); }
.retainer p { line-height:1.7; color:#66645f; max-width:560px; }
.button-dark { margin-top:18px; background:var(--ink); color:var(--white); }
.button-dark:hover { background:transparent; color:var(--ink); border-color:var(--ink); }
.enquire { background:var(--ink-soft); color:var(--white); }
.enquire-inner { max-width:1450px; }
.enquire h2 { font-size:clamp(55px,7vw,112px); max-width:1100px; }
.enquire p { color:rgba(248,246,241,.66); line-height:1.7; max-width:670px; font-size:17px; }
.big-email { display:inline-block; margin-top:48px; font-family:var(--serif); font-size:clamp(27px,4vw,62px); border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:8px; }
.contact-actions { display:flex; gap:28px; margin-top:50px; text-transform:uppercase; letter-spacing:.12em; font-size:11px; }
footer { background:#0c0d0e; color:var(--white); display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:30px; padding:42px 6vw; border-top:1px solid rgba(255,255,255,.12); }
.footer-brand { align-self:center; }
footer p { margin:0; font-size:12px; color:rgba(255,255,255,.55); }
.copyright { text-align:right; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }
.project-modal{position:fixed;inset:0;z-index:1000;background:rgba(10,11,12,.985);color:var(--white);display:none;overflow:auto}.project-modal.open{display:block}
.modal-close{position:fixed;right:30px;top:24px;z-index:1002;width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(10,11,12,.65);backdrop-filter:blur(8px);color:white;font-size:24px;line-height:1;cursor:pointer}
.modal-shell{width:min(1680px,100%);margin:0 auto;padding:90px 5vw 7vw}.modal-project-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);gap:7vw;align-items:end;padding:0 0 54px;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:26px}.modal-project-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(54px,7vw,118px);line-height:.92;letter-spacing:-.035em;margin:14px 0 12px}.modal-project-head p{margin:0;color:rgba(248,246,241,.66);line-height:1.75;font-size:16px;max-width:600px}.modal-client{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgba(248,246,241,.55)}
.project-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}.gallery-item{margin:0;background:#111;overflow:hidden}.gallery-item img,.gallery-item video{display:block;width:100%;height:auto;max-height:none}.gallery-item video{background:#000}.gallery-item figcaption{padding:10px 12px;background:#17181a;color:rgba(248,246,241,.68);font-size:12px;line-height:1.5}.gallery-empty{grid-column:1/-1;padding:70px;text-align:center;color:rgba(255,255,255,.6)}
@media (max-width: 1100px){.project-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.modal-project-head{grid-template-columns:1fr;gap:20px}}
@media (max-width: 980px) {
  .site-header { padding:18px 20px; }
  .brand-name { font-size:17px; }
  .menu-toggle { display:block; }
  .nav { position:absolute; top:100%; right:20px; background:rgba(15,16,18,.95); display:none; flex-direction:column; gap:0; padding:10px 0; width:190px; mix-blend-mode:normal; }
  .nav.open { display:flex; }
  .nav a { padding:14px 18px; }
  .hero-copy { left:7vw; right:7vw; bottom:10vh; }
  .hero-media img { object-position:62% 40%; }
  .hero-shade { background:linear-gradient(0deg,rgba(10,11,12,.9) 0%,rgba(10,11,12,.55) 46%,rgba(10,11,12,.12) 82%); }
  .hero-mark { width:58px; height:58px; font-size:17px; right:7vw; bottom:4vh; }
  .section-pad { padding:85px 7vw; }
  .manifesto { grid-template-columns:1fr; gap:30px; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .project { grid-column:span 6; }
  .project-wide { grid-column:span 12; }
  .about-grid { grid-template-columns:1fr; }
  .about-photo { max-width:720px; }
  .floating-mark { right:18px; bottom:18px; }
  .service { grid-template-columns:55px 1fr; }
  .service p { grid-column:2; }
  .retainer { grid-template-columns:1fr; }
  footer { grid-template-columns:1fr; align-items:start; }
  .copyright { text-align:left; }
}
@media (max-width: 640px) {
  .brand-name { letter-spacing:.07em; }
  .hero h1 { font-size:clamp(52px,16vw,78px); }
  .hero p { font-size:15px; max-width:82%; }
  .hero-actions { flex-direction:column; align-items:flex-start; gap:18px; }
  .manifesto-copy { font-size:38px; }
  .project-grid { display:block; }
  .project { height:440px; margin-bottom:10px; }
  .project-wide { height:320px; }
  .filters { gap:6px; }
  .filter { font-size:10px; padding:9px 12px; }
  .service { grid-template-columns:42px 1fr; gap:16px; }
  .service h3 { font-size:27px; }
  .contact-actions { flex-direction:column; gap:16px; }
  .project-gallery{grid-template-columns:1fr}.modal-shell{padding:80px 14px 40px}.modal-close{right:14px;top:14px}.modal-project-head{padding:0 4px 34px;margin-bottom:14px}.modal-project-head h2{font-size:52px}
}