@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@1,500;1,600&display=swap");

:root { --ink:#171714; --paper:#f2efe7; --paper-2:#e7e2d7; --red:#df2d22; --line:rgba(23,23,20,.18); --font-sans:"Archivo",Arial,sans-serif; --font-serif:"Cormorant Garamond",Georgia,serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:92px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans),Arial,sans-serif; font-size:16px; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button,summary { font:inherit; }
img { object-fit:cover; }
.hero-image>img,.work-item>img { position:absolute; inset:0; width:100%; height:100%; }
::selection { background:var(--red); color:white; }

.site-header { position:fixed; z-index:50; top:0; left:0; right:0; height:76px; padding:0 3.5vw; display:flex; align-items:center; justify-content:space-between; color:var(--paper); background:rgba(23,23,20,.88); backdrop-filter:blur(18px); border-bottom:1px solid rgba(255,255,255,.15); }
.wordmark { display:flex; align-items:flex-end; gap:.32rem; font-weight:800; letter-spacing:-.06em; line-height:.8; font-size:1rem; }
.wordmark span:last-child { font-size:1.58rem; }
.desktop-nav { display:flex; align-items:center; gap:2.2rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; }
.desktop-nav a { transition:opacity .25s; }
.desktop-nav a:hover { opacity:.58; }
.desktop-nav .nav-cta { border:1px solid rgba(255,255,255,.6); padding:.72rem 1rem; }
.mobile-nav { display:none; position:relative; }

.hero { min-height:100svh; padding:76px 3.5vw 0; background:var(--ink); color:var(--paper); display:grid; grid-template-columns:54% 46%; position:relative; }
.hero-copy { display:flex; flex-direction:column; justify-content:space-between; padding:8vh 5vw 10vh 0; }
.eyebrow,.section-kicker { margin:0; display:flex; align-items:center; gap:.65rem; text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; font-weight:700; }
.eyebrow span { display:block; width:28px; height:2px; background:var(--red); }
.hero h1,.section-heading h2,.work-head h2,.company-title h2,.contact h2 { margin:1.5rem 0 0; text-transform:uppercase; font-size:clamp(4rem,7.3vw,8.5rem); letter-spacing:-.075em; line-height:.78; font-weight:750; }
.hero h1 em,.work-head h2 em,.company-title h2 em,.contact h2 em,.intro-statement em { font-family:var(--font-serif),serif; font-weight:500; text-transform:none; letter-spacing:-.04em; }
.hero h1 em { color:var(--red); }
.hero-bottom { display:grid; grid-template-columns:minmax(220px,410px); gap:2rem; }
.hero-bottom>p { margin:0; color:rgba(242,239,231,.72); font-size:clamp(1rem,1.3vw,1.25rem); line-height:1.55; }
.button-row { display:flex; gap:.75rem; flex-wrap:wrap; }
.button { min-width:145px; padding:1rem 1.15rem; display:flex; justify-content:space-between; gap:1.5rem; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700; transition:background .25s,color .25s,border-color .25s; }
.button-light { color:var(--ink); background:var(--paper); }
.button-light:hover { background:var(--red); color:white; }
.button-ghost { border:1px solid rgba(255,255,255,.35); }
.button-ghost:hover { border-color:var(--paper); }
.hero-image { position:relative; overflow:hidden; }
.hero-image:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(23,23,20,.28),transparent 45%),linear-gradient(0deg,rgba(23,23,20,.4),transparent 40%); }
.image-tag { position:absolute; z-index:2; top:2rem; right:2rem; background:var(--red); padding:1.1rem; width:126px; height:126px; display:flex; flex-direction:column; justify-content:space-between; }
.image-tag b { font-size:1.7rem; letter-spacing:-.08em; }
.image-tag span { font-size:.58rem; text-transform:uppercase; letter-spacing:.13em; }
.registration-mark { position:absolute; z-index:2; bottom:9%; left:8%; width:74px; height:74px; border:1px solid rgba(255,255,255,.85); border-radius:50%; }
.registration-mark span,.registration-mark i { position:absolute; display:block; background:rgba(255,255,255,.85); }
.registration-mark span { width:130px; height:1px; top:36px; left:-28px; }.registration-mark i { width:1px; height:130px; left:36px; top:-28px; }
.scroll-note { position:absolute; left:3.5vw; bottom:2.1rem; writing-mode:vertical-rl; text-transform:uppercase; letter-spacing:.13em; font-size:.57rem; color:rgba(255,255,255,.42); }

.section-pad { padding:clamp(5rem,10vw,10rem) 6vw; }
.intro { min-height:76vh; display:grid; grid-template-columns:1fr 3fr; align-items:start; border-bottom:1px solid var(--line); }
.section-kicker:before { content:""; width:7px; height:7px; border-radius:50%; background:var(--red); }
.intro-statement { max-width:1100px; margin:-.6rem 0 0; font-size:clamp(2.6rem,5vw,6.4rem); line-height:.93; letter-spacing:-.055em; font-weight:650; text-transform:uppercase; }
.intro-statement em { color:var(--red); }

.services { padding-top:8rem; }
.section-heading { display:grid; grid-template-columns:2fr 1fr; align-items:end; gap:7vw; margin-bottom:5rem; }
.section-heading h2,.work-head h2,.company-title h2,.contact h2 { font-size:clamp(3.2rem,6.4vw,7.6rem); }
.section-heading>p,.work-head>p { margin:0; font-size:1rem; line-height:1.6; max-width:420px; }
.service-grid { border-top:1px solid var(--ink); display:grid; grid-template-columns:repeat(3,1fr); }
.service-card { min-height:330px; padding:1.5rem 1.6rem 2rem; border-bottom:1px solid var(--ink); border-right:1px solid var(--ink); position:relative; display:flex; flex-direction:column; transition:background .3s,color .3s; }
.service-card:nth-child(3n) { border-right:0; }
.service-card:hover { background:var(--ink); color:var(--paper); }
.service-number { font-size:.68rem; letter-spacing:.12em; }
.service-cross { position:absolute; right:1.5rem; top:1.2rem; color:var(--red); font-size:1.7rem; font-weight:300; transition:transform .3s; }
.service-card:hover .service-cross { transform:rotate(45deg); }
.service-card h3 { margin:auto 0 1rem; font-size:clamp(1.5rem,2.1vw,2.4rem); letter-spacing:-.055em; text-transform:uppercase; line-height:.95; }
.service-card p { max-width:330px; margin:0; line-height:1.55; font-size:.88rem; color:#5e5b54; }
.service-card:hover p { color:rgba(242,239,231,.68); }

.work { background:var(--ink); color:var(--paper); }
.section-kicker-light { color:rgba(242,239,231,.66); }
.work-head { display:grid; grid-template-columns:1.2fr 2fr 1fr; align-items:end; gap:3vw; margin-bottom:5rem; }
.work-head h2 { margin:0; }.work-head h2 em { color:var(--red); }.work-head>p { color:rgba(242,239,231,.64); }
.work-grid { display:grid; grid-template-columns:1.7fr 1fr; gap:1rem; }
.work-item { position:relative; height:420px; margin:0; overflow:hidden; background:#292925; }
.work-item-large { height:620px; }.work-item-tall { height:620px; }.work-item-wide { height:420px; }
.work-item img { transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s; filter:saturate(.76) contrast(1.03); }
.work-item:hover img { transform:scale(1.035); filter:saturate(1); }
.work-item:after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.75)); }
.work-item figcaption { z-index:2; position:absolute; left:1.5rem; right:1.5rem; bottom:1.4rem; display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.work-item figcaption span { font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; }.work-item figcaption b { font-size:1.15rem; text-transform:uppercase; }

.process-heading { margin-bottom:4rem; }
.process-list { list-style:none; padding:0; margin:0; border-top:1px solid var(--ink); }
.process-list li { display:grid; grid-template-columns:70px 1fr 1.2fr 40px; gap:2rem; align-items:center; min-height:140px; border-bottom:1px solid var(--line); transition:padding .25s,background .25s; }
.process-list li:hover { padding:0 1rem; background:var(--paper-2); }
.process-list span { font-size:.7rem; }.process-list h3 { margin:0; text-transform:uppercase; font-size:clamp(1.5rem,2.4vw,2.8rem); letter-spacing:-.05em; }.process-list p { margin:0; max-width:500px; line-height:1.5; color:#666159; }.process-list i { color:var(--red); font-style:normal; font-size:1.5rem; }

.company { background:var(--red); color:var(--paper); display:grid; grid-template-columns:1.1fr 1fr; gap:8vw; }
.company-title { position:sticky; top:130px; align-self:start; }.company-title h2 em { color:var(--ink); }
.benefit-grid article { padding:2rem 0 2.3rem; display:grid; grid-template-columns:60px 1fr; border-top:1px solid rgba(255,255,255,.4); }
.benefit-grid article:last-child { border-bottom:1px solid rgba(255,255,255,.4); }
.benefit-grid span { font-size:.68rem; }.benefit-grid h3 { margin:0 0 .8rem; font-size:1.75rem; line-height:1; letter-spacing:-.05em; text-transform:uppercase; }.benefit-grid p { grid-column:2; max-width:430px; margin:0; line-height:1.55; color:rgba(255,255,255,.73); }

.contact { padding-bottom:7rem; }
.contact-top h2 { max-width:1050px; }.contact-top h2 em { color:var(--red); }
.contact-mail { margin-top:3.5rem; width:100%; padding:1.5rem 0; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); font-size:clamp(1.2rem,3vw,3.4rem); letter-spacing:-.04em; transition:color .2s,padding .2s; }
.contact-mail:hover { color:var(--red); padding-left:1rem; padding-right:1rem; }
.contact-details { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:5rem; }
.contact-details>div { border-top:1px solid var(--line); padding-top:1rem; }
.contact-details span,.footer-legal b { display:block; margin-bottom:1rem; font-size:.64rem; text-transform:uppercase; letter-spacing:.14em; color:#777269; }
.contact-details a,.contact-details address,.contact-details p { margin:0; font-style:normal; line-height:1.65; font-size:.88rem; }

footer { background:var(--ink); color:var(--paper); padding:6rem 3.5vw 2rem; }
.footer-main { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:6vw; align-items:start; padding-bottom:5rem; }
.footer-wordmark { font-size:clamp(3.4rem,7vw,8rem); font-weight:800; line-height:.65; letter-spacing:-.085em; }.footer-wordmark span { color:var(--red); }
.footer-main>p { max-width:320px; margin:0; line-height:1.6; color:rgba(242,239,231,.62); }.footer-main nav { display:grid; gap:.8rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; }.footer-main nav a:hover { color:var(--red); }
.footer-legal { border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); padding:2rem 0; display:grid; grid-template-columns:1.1fr 1.3fr 1.3fr 1fr; gap:2.5rem; }
.footer-legal b { color:rgba(242,239,231,.45); }.footer-legal span,.footer-legal a { display:block; font-size:.77rem; line-height:1.65; color:rgba(242,239,231,.76); }
.footer-legal a:hover { color:var(--red); }.footer-bottom { padding-top:1.5rem; display:flex; justify-content:space-between; font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; color:rgba(242,239,231,.42); }

a:focus-visible,summary:focus-visible { outline:2px solid var(--red); outline-offset:4px; }

@media (max-width:900px) {
  .desktop-nav { display:none; }.mobile-nav { display:block; }.mobile-nav summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:.7rem; text-transform:uppercase; font-size:.7rem; letter-spacing:.12em; }.mobile-nav summary::-webkit-details-marker { display:none; }.mobile-nav summary i,.mobile-nav summary i:after { display:block; content:""; width:22px; height:1px; background:var(--paper); }.mobile-nav summary i:after { transform:translateY(6px); }.mobile-nav[open] summary i { transform:rotate(45deg); }.mobile-nav[open] summary i:after { transform:rotate(90deg); }.mobile-nav nav { position:absolute; right:-3.5vw; top:30px; width:100vw; background:var(--ink); padding:2rem 6vw 2.5rem; display:grid; gap:1.25rem; border-bottom:1px solid rgba(255,255,255,.2); font-size:1.5rem; text-transform:uppercase; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:76px; }.hero-copy { min-height:660px; padding:4rem 0 4rem; }.hero-image { height:68vh; min-height:480px; }.hero h1 { font-size:clamp(3.8rem,12vw,7rem); }.scroll-note { display:none; }
  .intro { grid-template-columns:1fr; gap:3rem; min-height:auto; }.intro-statement { margin:0; }
  .service-grid { grid-template-columns:repeat(2,1fr); }.service-card:nth-child(3n) { border-right:1px solid var(--ink); }.service-card:nth-child(2n) { border-right:0; }
  .section-heading,.work-head { grid-template-columns:1fr; align-items:start; }.work-head h2 { order:2; }.work-head>p { order:3; }.work-grid { grid-template-columns:1fr 1fr; }.work-item,.work-item-large,.work-item-tall,.work-item-wide { height:460px; }
  .company { grid-template-columns:1fr; }.company-title { position:static; }.contact-details { grid-template-columns:repeat(2,1fr); }.footer-main { grid-template-columns:1fr 1fr; }.footer-wordmark { grid-column:1/-1; }.footer-legal { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:620px) {
  .site-header { height:68px; padding:0 5vw; }.hero { padding:68px 5vw 0; }.hero-copy { min-height:580px; padding:3.5rem 0; }.eyebrow { font-size:.6rem; }.hero h1 { font-size:clamp(3.35rem,17.5vw,5rem); }.hero-bottom { gap:1.5rem; }.button { flex:1; }.hero-image { margin:0 -5vw; height:66vh; min-height:430px; }.image-tag { width:100px; height:100px; top:1rem; right:1rem; }.registration-mark { left:12%; }
  .section-pad { padding:5.5rem 5vw; }.section-heading { margin-bottom:3.5rem; }.section-heading h2,.work-head h2,.company-title h2,.contact h2 { font-size:clamp(3.1rem,15vw,5rem); }
  .service-grid { grid-template-columns:1fr; }.service-card,.service-card:nth-child(3n),.service-card:nth-child(2n) { border-right:0; }.service-card { min-height:270px; padding-left:0;padding-right:0; }
  .work-head { margin-bottom:3rem; }.work-grid { grid-template-columns:1fr; }.work-item,.work-item-large,.work-item-tall,.work-item-wide { height:62vh; min-height:430px; }.work-item figcaption { align-items:start; flex-direction:column; }
  .process-list li { grid-template-columns:35px 1fr 20px; gap:1rem; padding:1.5rem 0; }.process-list li:hover { padding:1.5rem .5rem; }.process-list p { grid-column:2/4; }.process-list i { grid-column:3; grid-row:1; }
  .company { gap:4rem; }.benefit-grid article { grid-template-columns:40px 1fr; }.contact-mail { font-size:1.05rem; }.contact-details { grid-template-columns:1fr; gap:2.5rem; margin-top:4rem; }
  footer { padding:5rem 5vw 2rem; }.footer-main { grid-template-columns:1fr; }.footer-wordmark { grid-column:auto; font-size:17vw; }.footer-legal { grid-template-columns:1fr; }.footer-bottom { gap:1rem; flex-direction:column; }
}

@media (prefers-reduced-motion:no-preference) {
  .hero-copy>* { animation:reveal .75s both cubic-bezier(.2,.7,.2,1); }.hero-copy h1 { animation-delay:.08s; }.hero-bottom { animation-delay:.16s; }.hero-image img { animation:image-in 1.2s both cubic-bezier(.2,.7,.2,1); }
  @keyframes reveal { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
  @keyframes image-in { from { opacity:0; transform:scale(1.06); } to { opacity:1; transform:scale(1); } }
}