
:root { --ink:#0a0a0a; --paper:#f2f0eb; --line:#c7c4bd; --muted:#74716b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:absolute; z-index:10; top:0; left:0; width:100%; height:100px; padding:24px 4vw; display:flex; align-items:center; justify-content:space-between; color:white; border-bottom:1px solid rgba(255,255,255,.18); }
.brand { display:flex; align-items:center; gap:13px; }
.brand-mark { width:48px; height:48px; display:grid; place-items:center; border:1px solid currentColor; font-size:19px; font-weight:800; letter-spacing:-2px; }
.brand-name { font-size:14px; font-weight:700; letter-spacing:.03em; line-height:1.05; text-transform:uppercase; }
.brand-name small { display:block; margin-top:5px; font-size:9px; font-weight:500; letter-spacing:.32em; }
nav { display:flex; gap:36px; align-items:center; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
nav a { opacity:.8; transition:.2s; } nav a:hover { opacity:1; }
.nav-cta { opacity:1; border:1px solid rgba(255,255,255,.55); padding:14px 20px; }
.hero { min-height:860px; height:100vh; position:relative; overflow:hidden; display:flex; align-items:center; padding:140px 8vw 90px; color:white; background:radial-gradient(circle at 72% 35%,#454545 0,#171717 23%,#080808 56%,#000 100%); }
.hero.has-featured-photo {
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, .62) 0%,
      rgba(0, 0, 0, .30) 55%,
      rgba(0, 0, 0, .10) 100%
    ),
    var(--hero-photo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero.has-featured-photo .hero-art {
  display: none;
}
.hero-grain { position:absolute; inset:0; opacity:.17; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.hero-copy { position:relative; z-index:2; width:58%; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; }
.eyebrow:before { content:""; display:inline-block; width:34px; height:1px; margin:0 14px 3px 0; background:currentColor; }
.eyebrow.dark { color:var(--muted); }
.hero h1 { margin:30px 0; font-size:clamp(64px,8.4vw,130px); line-height:.82; font-weight:600; letter-spacing:-.07em; }
h1 em, h2 em { font-family:Georgia, serif; font-weight:400; }
.hero-intro { max-width:550px; font-size:18px; line-height:1.65; color:#c9c9c9; }
.hero-actions { margin-top:42px; display:flex; gap:30px; align-items:center; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:38px; min-width:205px; padding:19px 24px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; transition:.25s; }
.button-light { background:white; color:black; }.button-light:hover { background:#d8d6d1; }
.button-dark { background:black; color:white; }.button-dark:hover { background:#333; }
.text-link { display:inline-flex; gap:14px; align-items:center; padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.5); font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.text-link.light { color:white; }
.hero-art { position:absolute; right:2vw; top:50%; width:43vw; height:60vh; transform:translateY(-46%); opacity:.8; }
.frame { position:absolute; border:1px solid rgba(255,255,255,.35); background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.01) 45%,rgba(255,255,255,.08)); box-shadow:0 30px 80px rgba(0,0,0,.45); display:flex; align-items:flex-end; padding:20px; font:italic 18px Georgia,serif; }
.frame-one { width:51%; height:73%; left:3%; top:16%; transform:rotate(-8deg); }
.frame-two { width:51%; height:78%; right:6%; top:3%; transform:rotate(8deg); }
.frame-three { width:45%; height:66%; left:29%; top:28%; transform:rotate(1deg); background:linear-gradient(145deg,#777,#1c1c1c 42%,#555); }
.hero-footer { position:absolute; bottom:30px; left:4vw; right:4vw; display:flex; justify-content:space-between; font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:#aaa; }
.work-section,.services-section,.contact-section { padding:130px 6vw; }
.section-heading h2,.contact-section h2 { margin:25px 0 35px; font-family:Georgia,serif; font-size:clamp(48px,6vw,88px); line-height:.98; font-weight:400; letter-spacing:-.04em; }
.outline-link { display:inline-flex; gap:16px; align-items:center; padding-bottom:8px; border-bottom:1px solid; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.work-grid { margin-top:75px; display:grid; grid-template-columns:1.3fr .85fr 1fr; height:610px; gap:16px; }
.work-tile { position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:flex-end; padding:25px; color:white; background:#222; transition:.35s; }
.work-tile:before { content:""; position:absolute; inset:0; background:var(--tile); transition:.5s; }
.work-tile:hover:before { transform:scale(1.04); filter:brightness(1.15); }
.work-tile span,.work-tile b { position:relative; z-index:1; text-transform:uppercase; letter-spacing:.13em; font-size:12px; }
.tile-portrait { margin-bottom:55px; --tile:radial-gradient(ellipse at 50% 25%,#aaa 0,#555 20%,#181818 55%,#050505); }
.tile-event { margin-top:70px; --tile:linear-gradient(145deg,#070707,#656565 48%,#1a1a1a 49%,#050505); }
.tile-auto { margin-bottom:25px; --tile:radial-gradient(ellipse at 65% 60%,#8b8b8b 0,#202020 30%,#050505 65%); }
.work-grid.photo-grid { height:auto; grid-template-columns:repeat(3,1fr); }
.uploaded-photo { min-height:440px; margin:0; }
.uploaded-photo:before { background-image:linear-gradient(0deg,rgba(0,0,0,.66),transparent 50%),var(--photo); background-position:center; background-size:cover; }
.services-section { background:#e7e4de; }
.section-heading.compact { max-width:850px; }
.service-list { margin-top:70px; border-top:1px solid var(--line); }
.service { min-height:150px; display:grid; grid-template-columns:80px 1fr 1fr; align-items:center; gap:30px; border-bottom:1px solid var(--line); }
.service>span { color:var(--muted); font-size:11px; }.service h3 { font-family:Georgia,serif; font-size:30px; font-weight:400; }.service p { max-width:520px; color:#55524c; line-height:1.65; }
.about-section { min-height:720px; display:grid; grid-template-columns:1fr 1fr; color:white; background:#080808; overflow:hidden; }
.about-monogram { display:grid; place-items:center; min-height:720px; font-size:clamp(180px,28vw,500px); line-height:1; font-weight:800; letter-spacing:-.13em; color:#141414; transform:translateX(-5%); background:radial-gradient(circle,#212121,#080808 68%); }
.about-copy { align-self:center; padding:100px 8vw 100px 4vw; }
.about-copy h2 { margin:25px 0; font:400 clamp(45px,5vw,75px)/1.02 Georgia,serif; letter-spacing:-.04em; }
.about-copy>p:not(.eyebrow) { max-width:640px; color:#aaa; font-size:17px; line-height:1.8; margin-bottom:40px; }
.contact-section { text-align:center; }
.contact-section .eyebrow:before { display:none; }.contact-section h2 { font-size:clamp(60px,9vw,135px); }.contact-copy { max-width:640px; margin:0 auto 38px; color:#595650; line-height:1.7; }
.contact-meta { margin-top:110px; padding-top:30px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); text-align:left; }
.contact-meta div { display:flex; flex-direction:column; gap:10px; }.contact-meta span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.14em; }.contact-meta strong,.contact-meta a { font:400 17px Georgia,serif; }
footer { padding:35px 4vw; display:flex; align-items:center; justify-content:space-between; color:white; background:#050505; border-top:1px solid #292929; }
footer p,footer>a:last-child { font-size:10px; color:#888; text-transform:uppercase; letter-spacing:.1em; }

@media(max-width:850px){
  .site-header { height:82px; }.site-header nav a:not(.nav-cta) { display:none; }.nav-cta { padding:12px; }.brand-name { display:none; }
  .hero { min-height:760px; padding:130px 7vw 80px; align-items:flex-end; }.hero-copy { width:100%; }.hero h1 { font-size:clamp(58px,18vw,92px); }.hero-intro { font-size:16px; }.hero-art { width:85vw; height:42vh; right:-22vw; top:27%; opacity:.45; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:22px; }.hero-footer span:last-child { display:none; }
  .work-section,.services-section,.contact-section { padding:85px 6vw; }.work-grid,.work-grid.photo-grid { height:auto; grid-template-columns:1fr; }.work-tile { min-height:440px; margin:0; }.work-tile:nth-child(2),.work-tile:nth-child(3) { min-height:320px; }
  .service { padding:30px 0; grid-template-columns:45px 1fr; }.service p { grid-column:2; margin:0; }.service h3 { font-size:25px; margin:0; }
  .about-section { grid-template-columns:1fr; }.about-monogram { min-height:380px; }.about-copy { padding:75px 7vw; }.contact-meta { grid-template-columns:1fr; gap:35px; margin-top:70px; }
  footer { gap:25px; flex-wrap:wrap; }.footer-brand .brand-name { display:block; } footer p { order:3; width:100%; }
}

@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto}.work-tile:before{transition:none} }
