/* Shared website sizing. Content width excludes the responsive outer gutters. */
:root{
  --content-max:1400px;
  --hero-art-max:54rem; /* Give the five-character group a stronger presence. */
  --page-gutter:clamp(20px,4vw,64px);
  --content-inset:max(var(--page-gutter),calc((100% - var(--content-max))/2));
  --text-body:16px;
  --text-small:14px;
  --text-label:12px;
  --heading-section:clamp(32px,3vw,42px);
  --heading-hero:clamp(42px,5vw,72px);
}
body{font-size:var(--text-body);line-height:1.6}
body>header{margin-inline:var(--content-inset)}
body.a main>section,body>footer,body>.note{padding-inline:var(--content-inset)}
nav{font-size:var(--text-small)}
.eyebrow,.number,.sample-label{font-size:var(--text-label)}
.location{font-size:var(--text-small)}
.hero h1{font-size:var(--heading-hero);max-width:1000px}
.intro{font-size:var(--text-body);max-width:560px}
.button{font-size:var(--text-small)}
h2,.contact h2,.services h2{font-size:var(--heading-section)}
.section-head>p{font-size:var(--text-small);max-width:460px}
.person h3{font-size:18px}
.person p{font-size:var(--text-small);max-width:205px}
.service-grid h3{font-size:18px}
.service-grid p{font-size:var(--text-small);line-height:1.6}
.clients h2{font-size:var(--text-small)}
#client-motion,#action-toggle{font-size:var(--text-label)}
.portfolio-card .project-meta h3{font-size:22px}
.portfolio-card .project-meta p,.prototype-note,.work-foot,.contact p{font-size:var(--text-small)}
.case-trigger{font-size:var(--text-small)}
body>footer,body>.note{font-size:var(--text-label)}
@media(max-width:650px){
  nav{gap:12px;font-size:12px}
  nav a:last-child{padding:10px 12px}
  .location{gap:6px 16px;font-size:12px}
  .person h3{font-size:16px}
  .person p{font-size:12px}
  .service-grid h3{font-size:16px}
  .section-head>p{max-width:100%}
}

/* Service cards stack on narrow screens. */
@media(max-width:650px){.services .service-grid{grid-template-columns:1fr}}


/* Original half-body framing for the Caleb wardrobe revision. */
.hero .group-original-edit{width:min(100%,var(--hero-art-max));height:auto;aspect-ratio:2496/1564;object-fit:contain;object-position:50% 100%;mix-blend-mode:normal}

/* Roomier services and a quiet, consistent client grid. */
.services,.brand-work,.team{padding-block:clamp(48px,6vw,88px)}
.services .section-head{align-items:end;gap:32px;margin-bottom:40px}
.services .section-head h2{max-width:20ch}
.services .section-head>p{font-size:16px;max-width:40ch}
.services .service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.services .service-grid article{display:block;padding:clamp(28px,3.5vw,48px);border-top:2px solid var(--purple)}
.services .number{display:block;margin-bottom:24px;color:var(--purple);font-weight:800}
.services .service-grid h3{font-size:24px;margin-bottom:12px}
.services .service-grid p{font-size:16px;line-height:1.75;margin:0;max-width:54ch}
.brand-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.brand-card{display:flex;flex-direction:column;padding:28px;background:#fff;border:1px solid var(--line);border-radius:12px}
.brand-logo{height:100px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:28px}
.brand-logo img{display:block;width:auto;height:auto;max-width:100%;max-height:80px;object-fit:contain}
.brand-wordmark{font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1.1;color:var(--ink)}
.brand-card h3{font-size:20px}.brand-card p{font-size:14px;line-height:1.7;margin:12px 0 24px}
.brand-card a{margin-top:auto;display:flex;justify-content:space-between;align-items:center;min-height:44px;font-size:14px;font-weight:700;color:var(--purple)}
.brand-card a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:1100px){.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:750px){.services .service-grid{grid-template-columns:1fr;gap:32px}.services .number{margin-bottom:12px}.services .service-grid p{max-width:none}}
@media(max-width:500px){.brand-grid{grid-template-columns:1fr}.brand-logo{height:80px;margin-bottom:20px}}

.services .number{color:var(--lav)}
.brand-card:has(img[src*="cr-mold"] ) .brand-logo{background:var(--ink);border-radius:6px;padding:12px}

/* Video studies in the service cards: preserve the complete 3:2 artwork. */
.services .service-grid article{min-inline-size:0;padding:clamp(20px,2.6vw,36px);border-radius:12px;overflow:clip}
.service-motion{margin-block-end:26px;aspect-ratio:3/2;background:#dab0ed;border-radius:8px;overflow:hidden}
.service-motion video{display:block;inline-size:100%;block-size:100%;object-fit:contain}
.service-motion-controls{display:flex;justify-content:flex-end;margin-block:-16px 22px}
#service-motion-toggle{min-block-size:44px;padding:8px 14px;border:1px solid #9483a7;border-radius:6px;background:transparent;color:#eee5fa;font:inherit;font-size:13px;cursor:pointer}
#service-motion-toggle:hover{background:#4a365b}
#service-motion-toggle:focus-visible{outline:3px solid #e6d5ff;outline-offset:4px}
@media(max-width:750px){.service-motion{margin-block-end:20px}.service-motion-controls{justify-content:flex-start;margin-block:0 20px}}