:root{
  --bg:#FAFAF8;
  --ink:#141412;
  --muted:#6B6B66;
  --rule:#E3E1D6;
  --accent:#1F2A44;
  --paper:#F2F0E8;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.eyebrow{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}

/* header */
header{
  position:sticky;top:0;z-index:20;
  background:rgba(250,250,248,.9);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;}
.logo{font-family:'Fraunces',serif;font-weight:600;font-size:19px;letter-spacing:.01em;font-variation-settings:'opsz' 30;}
nav{display:flex;gap:32px;}
nav a{font-size:14px;font-weight:500;color:var(--ink);position:relative;}
nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
nav a:hover::after{transform:scaleX(1);}
nav a.active::after{transform:scaleX(1);}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Inter',sans-serif;font-weight:500;font-size:14px;
  padding:11px 20px;border:1px solid var(--ink);border-radius:2px;
  transition:background .2s ease,color .2s ease;white-space:nowrap;
  cursor:pointer;background:none;
}
.btn:hover{background:var(--ink);color:var(--bg);}
.btn-ghost{border-color:var(--rule);}
.btn-ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);}

/* generic section rhythm */
section{padding:96px 0;}
.section-border{border-bottom:1px solid var(--rule);}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:48px;gap:24px;flex-wrap:wrap;
}
.section-head h2{font-family:'Fraunces',serif;font-weight:500;font-size:32px;font-variation-settings:'opsz' 30;}

/* image placeholder block — swap for real photography */
.media{
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:13px;text-align:center;
  overflow:hidden;
}
.media span{padding:12px 20px;}
.media-hero{height:420px;}
.media-square{aspect-ratio:1/1;}
.media-wide{aspect-ratio:16/9;}

/* hero (home) */
.hero-banner{width:100%;border-bottom:1px solid var(--rule);}
.hero-banner .media{height:420px;border:none;border-radius:0;}
.hero-content{padding:96px 0;border-bottom:1px solid var(--rule);}
.hero-content h1{
  font-family:'Fraunces',serif;font-weight:500;font-variation-settings:'opsz' 30;
  font-size:clamp(44px,7vw,84px);line-height:1.03;letter-spacing:-.01em;
  max-width:820px;
}
.hero-content .lede{margin-top:28px;max-width:460px;font-size:17px;color:var(--muted);line-height:1.7;}
.hero-actions{margin-top:44px;display:flex;gap:16px;}

/* services strip (home) */
.services{border-bottom:1px solid var(--rule);}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.service{padding:36px 28px;border-right:1px solid var(--rule);transition:background .2s ease;}
.service:last-child{border-right:none;}
.service:hover{background:var(--paper);}
.service h3{font-family:'Fraunces',serif;font-weight:500;font-size:21px;margin-bottom:10px;font-variation-settings:'opsz' 30;}
.service p{font-size:14px;color:var(--muted);margin-bottom:18px;}
.service .go{font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;}
.service .go svg{transition:transform .2s ease;}
.service:hover .go svg{transform:translateX(3px);}

/* work */
.work-feature{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:28px;}
.work-feature-3{grid-template-columns:repeat(3,1fr);}
.work-card{
  background:var(--paper);aspect-ratio:4/3;
  display:flex;flex-direction:column;justify-content:flex-end;padding:28px;
  position:relative;overflow:hidden;
}
.work-card .tag{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.work-card h3{font-family:'Fraunces',serif;font-weight:500;font-size:24px;font-variation-settings:'opsz' 30;}
.work-grid-small{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.work-grid-small .work-card{aspect-ratio:1/1;padding:20px;}
.work-grid-small h3{font-size:17px;}

/* clients */
.clients-row{
  display:grid;grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
.clients-row span{
  padding:28px 16px;text-align:center;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:16px;color:var(--muted);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
}

/* testimonials */
.t-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
blockquote{
  font-family:'Fraunces',serif;font-style:italic;font-weight:400;
  font-size:22px;line-height:1.5;border-left:2px solid var(--rule);padding-left:24px;
}
blockquote cite{
  display:block;margin-top:20px;font-family:'Inter',sans-serif;
  font-style:normal;font-weight:500;font-size:13px;color:var(--muted);
}

/* closing cta */
.cta{text-align:center;padding:120px 0;}
.cta h2{
  font-family:'Fraunces',serif;font-weight:500;font-size:clamp(32px,5vw,52px);font-variation-settings:'opsz' 30;
  max-width:640px;margin:0 auto 32px;line-height:1.15;
}

footer{border-top:1px solid var(--rule);padding:40px 0;}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
footer .fmuted{font-size:13px;color:var(--muted);}

/* ===== service page template ===== */
.service-hero{border-bottom:1px solid var(--rule);}
.service-hero .media-hero{margin-bottom:0;}
.service-intro{padding:80px 0 0;}
.service-intro .eyebrow{
  font-family:'Fraunces',serif;font-size:36px;font-weight:500;font-variation-settings:'opsz' 30;
  text-transform:none;letter-spacing:0;color:var(--ink);
}
.service-intro p{font-size:19px;max-width:640px;color:var(--ink);}
.service-statement{padding:64px 0;}
.service-statement h2{
  font-family:'Fraunces',serif;font-weight:500;font-size:36px;line-height:1.2;margin-bottom:16px;font-variation-settings:'opsz' 30;
}
.service-statement p{color:var(--muted);font-size:16px;line-height:1.7;max-width:420px;}
.service-block{padding:64px 0;border-top:1px solid var(--rule);}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.service-block.reverse{direction:rtl;}
.service-block.reverse > *{direction:ltr;}
.service-block .eyebrow{margin-bottom:16px;}
.service-block ul{list-style:none;}
.service-block li{
  font-size:16px;padding:14px 0;border-bottom:1px solid var(--rule);
}
.service-block li:first-child{border-top:1px solid var(--rule);}
.service-block .lead-text{font-family:'Fraunces',serif;font-style:italic;font-size:24px;line-height:1.4;font-variation-settings:'opsz' 30;}
.service-outcome{
  padding:96px 0;text-align:center;border-top:1px solid var(--rule);
}
.service-outcome p{
  font-family:'Fraunces',serif;font-weight:500;font-size:clamp(26px,4vw,38px);font-variation-settings:'opsz' 30;
  max-width:680px;margin:0 auto 36px;line-height:1.3;
}

@media (max-width:860px){
  .services-grid{grid-template-columns:1fr;}
  .service{border-right:none;border-bottom:1px solid var(--rule);}
  .service:last-child{border-bottom:none;}
  .work-feature,.work-feature-3{grid-template-columns:1fr;}
  .work-grid-small{grid-template-columns:1fr 1fr;}
  .t-grid{grid-template-columns:1fr;}
  nav{display:none;}
  .clients-row{grid-template-columns:repeat(2,1fr);}
  .service-grid{grid-template-columns:1fr;}
  .service-grid > .media{order:-1;}
  .service-block.reverse{direction:ltr;}
  .media-hero{height:300px;}
}