@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

:root { --ink:#111; --paper:#fff; --red:#d42d20; --max:1480px; }
* { box-sizing:border-box; }
html { overflow-x:clip; scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:'Open Sans',Arial,sans-serif; font-size:16px; margin:0; overflow-x:clip; }
a { color:inherit; }
.site-header { align-items:center; border-top:1px solid var(--ink); display:grid; font-size:.78rem; gap:1rem; grid-template-columns:1fr 1fr auto; left:4vw; letter-spacing:.05em; padding-top:.6rem; position:absolute; right:4vw; text-transform:uppercase; top:22px; z-index:5; }
.site-header .wordmark { font-weight:700; text-decoration:none; }
.home-hero { display:flex; flex-direction:column; min-height:100svh; padding:23vh 4vw 4vh; }
.kicker { font-size:.76rem; letter-spacing:.06em; margin:0 0 1.4rem; text-transform:uppercase; }
h1,h2 { font-family:'Open Sans',Arial,sans-serif; font-weight:600; letter-spacing:-.065em; line-height:.92; margin:0; }
h1 { font-size:clamp(4.1rem,11vw,12.3rem); }
h2 { font-size:clamp(2.6rem,6vw,7.2rem); }
.hero-foot { align-items:end; display:flex; gap:3rem; justify-content:space-between; margin-top:auto; }
.hero-foot p { font-size:clamp(1rem,1.25vw,1.25rem); line-height:1.35; margin:0; max-width:31rem; }
.work-index { display:grid; grid-template-columns:repeat(2,1fr); }
.work-card { aspect-ratio:1/.78; color:#fff; display:block; overflow:hidden; padding:1.5rem; position:relative; text-decoration:none; }
.work-card::after { background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.74)); content:""; inset:0; position:absolute; }
.work-card img { height:100%; inset:0; object-fit:cover; position:absolute; transition:transform .6s ease; width:100%; }
.work-card:hover img { transform:scale(1.035); }
.work-card>*:not(img) { position:relative; z-index:1; }
.work-card>div { bottom:1.8rem; left:1.5rem; position:absolute; right:1.5rem; }
.work-card p { font-size:.82rem; font-weight:600; letter-spacing:.045em; margin:0; text-transform:uppercase; }
.view-case { border-bottom:1px solid currentColor; bottom:.2rem; font-size:.75rem; letter-spacing:.05em; position:absolute; right:0; text-transform:uppercase; }
.profile { align-items:start; background:#fff; display:grid; gap:8vw; grid-template-columns:.65fr 1fr; margin:0 auto; max-width:var(--max); padding:15vh 4vw; }
.profile img { max-width:430px; width:100%; }
.profile-copy { font-size:clamp(1.08rem,1.6vw,1.45rem); line-height:1.38; margin:2rem 0 0; max-width:35rem; }
footer { background:#050505; color:#fff; min-height:76svh; padding:16vh 4vw 4vw; position:relative; }
footer h2 { font-size:clamp(4rem,10.5vw,12rem); }
footer div { bottom:4vw; display:flex; flex-wrap:wrap; gap:2rem; position:absolute; }
footer a { font-size:clamp(1rem,1.7vw,1.7rem); text-underline-offset:.18em; }
.case-page { background:#111; color:#fff; }
.case-page .site-header { border-color:rgba(255,255,255,.45); }
.case-page .site-header a { color:#fff; }
.case-back { border:1px solid rgba(255,255,255,.55); color:#fff; font-size:.72rem; left:4vw; letter-spacing:.06em; padding:.55rem .75rem; position:absolute; text-decoration:none; text-transform:uppercase; top:58px; transition:background .2s ease,color .2s ease; z-index:5; }
.case-back:hover { background:#fff; color:#111; }
.case-hero { min-height:96svh; overflow:hidden; position:relative; }
.case-hero>img { height:100%; inset:0; object-fit:cover; position:absolute; transform:scale(1.05); width:100%; }
.case-hero::after { background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.7)); content:""; inset:0; position:absolute; }
.case-hero-copy { bottom:5vw; left:4vw; max-width:65rem; position:absolute; z-index:1; }
.case-hero-copy p { font-size:.78rem; letter-spacing:.06em; margin:0 0 1rem; text-transform:uppercase; }
.case-hero-copy h1 { font-size:clamp(4rem,10vw,12rem); }
.case-hero-copy .strapline { font-size:clamp(1.2rem,2.1vw,2rem); font-weight:500; letter-spacing:-.035em; line-height:1.18; margin-top:1.7rem; max-width:28rem; text-transform:none; }
.case-body { margin:0 auto; max-width:var(--max); padding:14vh 4vw; }
.case-summary { display:grid; gap:9vw; grid-template-columns:.72fr 1.28fr; }
.case-summary h2 { font-size:clamp(3rem,6vw,7rem); }
.case-summary>div { display:grid; gap:2.4rem; grid-template-columns:1fr 1fr; }
.case-summary h3 { font-size:.75rem; letter-spacing:.06em; margin:0 0 .65rem; text-transform:uppercase; }
.case-summary p,.case-summary li { font-size:1.03rem; line-height:1.45; margin:0; }
.case-summary ul { list-style:none; margin:0; padding:0; }
.case-summary li+li { margin-top:.25rem; }
.case-summary li::before { content:'— '; color:var(--red); }
.media-block { margin-top:13vh; }
.media-block video { background:#000; display:block; height:auto; max-height:80vh; width:100%; }
.media-caption { font-size:.76rem; letter-spacing:.05em; margin:1rem 0 0; text-transform:uppercase; }
.image-grid { display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); margin-top:1rem; overflow:hidden; }
.image-grid img { display:block; height:100%; object-fit:cover; transform:scale(1.05); width:100%; }
.case-end { align-items:end; border-top:1px solid rgba(255,255,255,.4); display:flex; justify-content:space-between; margin-top:14vh; padding-top:1rem; }
.case-end a { font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; }
.theme-smeg { background:#3a100c; }.theme-paw { background:#202d47; }.theme-lemans { background:#101010; }.theme-cayenne { background:#202422; }

@media(max-width:720px) {
  .site-header { left:20px; right:20px; grid-template-columns:1fr auto; }.site-header span { display:none; }
  .home-hero { min-height:84svh; padding:20vh 20px 3vh; }.hero-foot { align-items:start; flex-direction:column; gap:1.1rem; }
  .work-index { grid-template-columns:1fr; }.work-card { aspect-ratio:1/1.08; padding:1.15rem; }.work-card>div { bottom:1.25rem; left:1.15rem; right:1.15rem; }.view-case { display:none; }
  .profile { gap:3rem; grid-template-columns:1fr; padding:14vh 20px; }.profile img { margin:0 auto; width:74%; }.profile-copy { font-size:1.08rem; }
  .case-back { left:20px; top:58px; }
  .case-hero { min-height:82svh; }.case-hero-copy { bottom:28px; left:20px; right:20px; }.case-body { padding:12vh 20px; }
  .case-summary { gap:3.5rem; grid-template-columns:1fr; }.case-summary>div { gap:1.8rem; grid-template-columns:1fr; }.media-block { margin-top:10vh; }.image-grid { gap:.65rem; grid-template-columns:1fr; }.case-end { align-items:flex-start; flex-direction:column; gap:1rem; margin-top:11vh; }
  footer { min-height:70svh; padding:14vh 20px 20px; }footer div { bottom:20px; flex-direction:column; gap:.7rem; }
}