:root{
  --cream:#F2ECE1;
  --cream-dark:#E9E0D0;
  --ink:#22201D;
  --ink-soft:#4A453E;
  --red:#9C2B1F;
  --red-dark:#7C2016;
  --rule:#D8CDB9;
  --white:#FFFDF9;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-hand: 'Homemade Apple', cursive;
  --content-max: 1280px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:var(--content-max); margin:0 auto; padding:0 32px;}
section{padding:88px 0;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.15;}
.eyebrow{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); font-weight:700;
}
.rule{width:52px; height:3px; background:var(--red); margin:18px 0;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--red); color:var(--white);
  font-family:var(--font-body); font-weight:600; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase;
  padding:16px 26px; border-radius:2px;
  transition:background .2s ease, transform .2s ease;
}
.btn:hover{background:var(--red-dark); transform:translateY(-1px);}
.btn svg{width:14px; height:14px;}

/* ---------- HEADER / LOGO ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(242,236,225,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 32px;}
.logo{display:flex; align-items:center; user-select:none;}
.logo img{display:block;}
.logo .group-mark{margin-left:0;}

nav.links{display:flex; align-items:center; gap:32px;}
nav.links a{
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:4px; padding-bottom:4px;
  border-top:2px solid transparent;
  border-bottom:2px solid transparent;
}
nav.links a:hover{color:var(--red);}
nav.links a.active{color:var(--red); border-bottom-color:var(--red);}
.nav-cta{
  background:var(--red); color:var(--cream) !important; padding:11px 20px;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border-radius:2px;
}
.nav-cta:hover{background:var(--red-dark); color:var(--cream) !important;}

/* ---------- HERO (home) — horizontal, full-bleed right image ---------- */
.hero{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  align-items:stretch;
  min-height:560px;
}
.hero-text{
  display:flex; flex-direction:column; justify-content:center;
  padding-left:max(32px, calc((100vw - var(--content-max)) / 2 + 32px));
  padding-right:56px;
  padding-top:56px; padding-bottom:56px;
}
.hero-text h1{font-size:50px; color:var(--ink);}
.hero-text h1 em{font-style:normal; color:var(--red);}
.hero-text p.lede{margin-top:22px; font-size:17px; color:var(--ink-soft); max-width:440px;}
.hero-text .cta-row{margin-top:32px;}

.hero-media{position:relative; overflow:hidden; background:var(--cream-dark);}
.hero-media img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-note{
  position:absolute; left:28px; bottom:28px;
  background:var(--white);
  padding:14px 20px 10px 20px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transform:rotate(-2.5deg);
  max-width:260px;
}
.hero-note p{
  font-family:var(--font-hand); font-size:26px; line-height:1.3; color:var(--ink);
}

/* ---------- PAGE BANNER (interior pages) — horizontal title band ---------- */
.page-banner{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:64px 0 48px 0;
  border-bottom:1px solid var(--rule);
}
.page-banner h1{font-size:42px;}
.page-banner .page-banner-sub{color:var(--ink-soft); font-size:15.5px; max-width:420px; text-align:right;}

/* ---------- HOME: HORIZONTAL BOXED SECTION GRID ---------- */
.section-boxes{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.section-box{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:16px;
  padding:32px 26px;
  border:1px solid var(--rule);
  background:var(--white);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.section-box:hover{
  border-color:var(--red);
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(34,32,29,.08);
}
.sl-icon{
  flex:none; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--red); border-radius:50%;
  color:var(--red);
}
.sl-icon svg{width:26px; height:26px;}
.sl-text{display:flex; flex-direction:column; gap:8px;}
.sl-title{
  font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--ink);
}
.sl-desc{color:var(--ink-soft); font-size:14px;}
.sl-arrow{
  margin-top:auto; align-self:flex-end;
  width:20px; height:20px; color:var(--red);
}
.sl-arrow svg{width:100%; height:100%;}

/* ---------- WHAT WE DO / SERVICES ---------- */
.section-head{text-align:center; max-width:600px; margin:0 auto 56px auto;}
.section-head .rule{margin:18px auto;}
.section-head h2{font-size:34px;}

.services-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
}
.service{padding:44px 34px; border-right:1px solid var(--rule);}
.service:last-child{border-right:none;}
.service .icon{width:34px; height:34px; color:var(--red); margin-bottom:20px;}
.service h3{font-size:22px; margin-bottom:12px;}
.service p{color:var(--ink-soft); font-size:14.5px; line-height:1.65;}
.service .learn-more{
  display:inline-block; margin-top:16px; font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--red);
}
.use-cases-label{
  display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--red); font-weight:700;
  margin-top:32px; padding-top:24px; border-top:1px solid var(--rule);
}
.use-cases{list-style:none; margin-top:14px;}
.use-cases li{
  padding:14px 0 14px 16px; border-top:1px solid var(--rule);
  font-size:13.5px; line-height:1.6; color:var(--ink-soft); position:relative;
}
.use-cases li:first-child{border-top:none;}
.use-cases li::before{
  content:""; position:absolute; left:0; top:20px;
  width:6px; height:6px; background:var(--red); border-radius:1px;
}
.use-cases li strong{color:var(--ink); font-weight:600; display:block; margin-bottom:3px;}

/* ---------- PULL QUOTE ---------- */
.quote-band{background:var(--ink); color:var(--cream); padding:60px 0;}
.quote-grid{display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;}
.quote-grid blockquote{
  font-family:var(--font-display); font-size:26px; font-style:italic; max-width:640px;
  line-height:1.4;
}
.quote-grid blockquote .mark{color:var(--red); font-size:44px; line-height:0; vertical-align:-16px; margin-right:6px; font-style:normal;}
.quote-grid blockquote span.hi{color:#d9694f;}
.quote-side{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; white-space:nowrap;}
.quote-side .rule{background:var(--red);}

/* ---------- ABOUT ---------- */
.about-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:72px; align-items:start;}
.about-grid p{color:var(--ink-soft); margin-bottom:16px; font-size:15.5px;}
.byline{
  font-family:var(--font-display); font-style:italic; font-size:16px;
  color:var(--ink); margin-top:6px; margin-bottom:22px !important;
}
.signature{
  font-family:var(--font-display); font-size:17px; color:var(--ink);
  margin-top:8px !important;
}
.competencies{list-style:none; margin-top:8px;}
.competencies li{
  padding:12px 0; border-bottom:1px solid var(--rule);
  font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:10px;
}
.competencies li:first-child{padding-top:0;}
.competencies li::before{content:""; width:6px; height:6px; background:var(--red); border-radius:1px; flex:none;}
.competencies-label{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); font-weight:700; margin-bottom:14px; display:block;}

/* ---------- APPROACH ---------- */
.approach-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.approach-grid p{color:var(--ink-soft); margin-bottom:16px; font-size:15.5px;}
.approach-art{border:1px solid var(--rule); padding:36px; background:var(--white);}
.approach-step{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--rule);}
.approach-step:last-child{border-bottom:none;}
.approach-step .num{font-family:var(--font-display); font-weight:700; color:var(--red); font-size:20px; flex:none; width:32px;}
.approach-step h4{font-size:15px; margin-bottom:4px;}
.approach-step p{font-size:13.5px; color:var(--ink-soft); margin:0;}

/* ---------- WORK ---------- */
.case{background:var(--white); border:1px solid var(--rule); padding:40px; margin-bottom:22px;}
.case:last-child{margin-bottom:0;}
.case-top{display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:18px; flex-wrap:wrap;}
.case h3{font-size:24px; max-width:640px;}
.case-tag{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--red); border:1px solid var(--red); padding:5px 10px; border-radius:20px; white-space:nowrap;
}
.case-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.case-cols h5{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin-bottom:8px;}
.case-cols p{font-size:14px; color:var(--ink-soft);}
.portfolio-cta{
  margin-top:32px; padding:28px 32px;
  border:1px dashed var(--red);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.portfolio-cta p{font-size:15px; color:var(--ink); margin:0;}
.portfolio-cta a{
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--red);
  white-space:nowrap;
}

/* ---------- CONTACT ---------- */
.contact-hero{background:var(--ink); color:var(--cream); text-align:center; padding:110px 0;}
.contact-hero h1{font-size:40px; color:var(--white); margin-bottom:16px;}
.contact-hero p{color:#c9c2b4; max-width:480px; margin:0 auto 32px auto; font-size:15.5px;}

footer{background:var(--ink); border-top:1px solid #3a352e; padding:32px 0;}
.footer-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-meta{color:#9a927f; font-size:12.5px;}
footer nav.links a{color:#c9c2b4;}

@media (max-width:1100px){
  .section-boxes{grid-template-columns:repeat(2, 1fr);}
}

@media (max-width:920px){
  .hero{grid-template-columns:1fr;}
  .hero-media{min-height:320px;}
  .hero-text{padding-left:32px; padding-top:48px; padding-bottom:48px;}
  .about-grid, .approach-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .section-boxes{grid-template-columns:1fr;}
  .service{border-right:none; border-bottom:1px solid var(--rule);}
  .case-cols{grid-template-columns:1fr;}
  nav.links{display:none;}
  .hero-text h1{font-size:36px;}
  .page-banner{flex-direction:column; align-items:flex-start;}
  .page-banner .page-banner-sub{text-align:left;}
}