@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');
:root {
  --bg:#f5f3eb;
  --ink:#171c15;
  --accent:#274e13;
  --muted:#66705f;
  --panel:#e7e9df;
  --line:#c9cec2;
  --highlight:#b8e986;
}
html[data-theme="dark"] {
  --bg:#171c15;
  --ink:#f5f3eb;
  --accent:#b8e986;
  --muted:#b7c0ae;
  --panel:#263023;
  --line:#455341;
  --highlight:#274e13;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.55 'DM Sans',Arial,sans-serif;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  font:inherit;
}
img {
  max-width:100%;
  display:block;
}
.wrap {
  max-width:1320px;
  margin:auto;
  padding:0 5vw;
}
.header {
  position:sticky;
  top:0;
  z-index:20;
  background:color-mix(in srgb,var(--bg) 93%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner {
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.logo {
  font-weight:800;
  letter-spacing:-.09em;
  font-size:32px;
  color:var(--accent);
}
.nav {
  display:flex;
  gap:32px;
  align-items:center;
}
.nav a {
  font-size:14px;
  font-weight:700;
}
.nav a:hover,.text-link:hover {
  color:var(--accent);
}
.theme-toggle,.menu-toggle {
  border:1px solid var(--line);
  border-radius:50%;
  width:38px;
  height:38px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
}
.menu-toggle {
  display:none;
}
.hero {
  padding:90px 0 110px;
}
.hero-grid {
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:5vw;
  align-items:center;
}
.eyebrow {
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--accent);
}
h1,h2,h3,p {
  margin-top:0;
}
h1 {
  font-size:clamp(64px,8.2vw,132px);
  letter-spacing:-.085em;
  line-height:.96;
  font-weight:800;
  margin:20px 0 30px;
}
h2 {
  font-size:clamp(43px,6vw,88px);
  letter-spacing:-.075em;
  line-height:1.04;
  margin-bottom:26px;
}
h3 {
  font-size:clamp(27px,3vw,43px);
  letter-spacing:-.055em;
  line-height:1.1;
}
em,.serif {
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;
  letter-spacing:-.035em;
}
.lead {
  font-size:clamp(18px,2vw,23px);
  max-width:650px;
  line-height:1.5;
  color:var(--muted);
}
.hero-photo {
  aspect-ratio:4/4.7;
  object-fit:cover;
  width:100%;
  filter:grayscale(100%);
  border-radius:2px;
}
.portrait-frame {
  position:relative;
  margin:0 18px 20px 0;
}
.portrait-frame:after {
  content:'';
  position:absolute;
  inset:22px -18px -20px 22px;
  border:2px solid var(--accent);
  z-index:-1;
}
.btn {
  display:inline-flex;
  align-items:center;
  gap:24px;
  background:var(--accent);
  color:var(--bg);
  padding:14px 22px;
  border-radius:4px;
  font-size:14px;
  font-weight:800;
}
.btn:hover {
  transform:translateY(-3px);
}
.text-link {
  font-weight:800;
  display:inline-flex;
  gap:16px;
  align-items:center;
}
.circle {
  border:1px solid currentColor;
  border-radius:50%;
  width:38px;
  height:38px;
  display:inline-grid;
  place-items:center;
  transition:transform .25s;
}
.text-link:hover .circle {
  transform:rotate(45deg);
}
.section {
  padding:105px 0;
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:44px;
}
.section-head h2 {
  margin:0;
}
.dark-band {
  background:#274e13;
  color:#f5f3eb;
}
.dark-band .eyebrow,.dark-band .lead {
  color:#c8e0b9;
}
.project-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px 7vw;
  align-items:start;
}
.project-card:nth-child(even) {
  margin-top:105px;
}
.media {
  aspect-ratio:1.35;
  background:var(--panel);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  color:var(--muted);
}
.media:before {
  content:'';
  width:58%;
  height:60%;
  border:1px solid var(--line);
  transform:rotate(-8deg);
  position:absolute;
}
.media:after {
  content:'';
  width:40%;
  height:45%;
  background:var(--accent);
  opacity:.13;
  transform:rotate(12deg);
  position:absolute;
}
.media span {
  position:relative;
  z-index:2;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
}
.project-card .media {
  transition:transform .35s;
}
.project-card:hover .media {
  transform:translateY(-7px);
}
.card-meta {
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin:20px 0 8px;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
}
.project-card h3 {
  margin-bottom:12px;
}
.project-card p {
  color:var(--muted);
  max-width:520px;
}
.tiles {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.tile {
  border:1px solid var(--line);
  padding:36px;
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.tile h3 {
  font-size:30px;
}
.tile p {
  max-width:450px;
  color:var(--muted);
}
.tool-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.tool {
  border-top:2px solid var(--accent);
  padding:28px 0;
}
.tool h3 {
  font-size:30px;
}
.tool p {
  color:var(--muted);
}
.footer {
  background:#171c15;
  color:#f5f3eb;
  padding:80px 0 35px;
}
.footer h2 {
  font-size:clamp(50px,7vw,100px);
}
.footer-bottom {
  border-top:1px solid #455341;
  margin-top:75px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#aebaaa;
}
.page-intro {
  padding:95px 0 70px;
}
.page-intro h1 {
  font-size:clamp(65px,9vw,130px);
}
.case-hero {
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:6vw;
  align-items:center;
  padding:80px 0;
}
.case-hero h1 {
  font-size:clamp(50px,6.2vw,94px);
}
.case-section {
  padding:50px 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:.42fr 1fr;
  gap:50px;
}
.case-section h2 {
  font-size:32px;
}
.case-section p {
  font-size:clamp(18px,2vw,24px);
  line-height:1.6;
  max-width:800px;
}
.pills {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:28px 0;
}
.pill {
  border:1px solid var(--line);
  border-radius:100px;
  padding:7px 13px;
  font-size:12px;
  font-weight:700;
}
.results {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin:30px 0;
}
.result {
  background:var(--panel);
  padding:26px;
  font-size:21px;
  font-weight:800;
  letter-spacing:-.03em;
}
.video-hint {
  position:absolute;
  bottom:12px;
  right:12px;
  z-index:3;
  background:var(--bg);
  color:var(--ink);
  padding:8px 10px;
  font-size:11px;
}
.video-placeholder {
  position:absolute;
  inset:0;
  background:#274e13;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .25s;
}
.hover-video:hover .video-placeholder,.hover-video:focus .video-placeholder {
  opacity:1;
}
.service-visual {
  aspect-ratio:1.6;
  background:var(--panel);
  margin-bottom:22px;
  display:grid;
  place-items:center;
  border:1px dashed var(--line);
  color:var(--muted);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.contact-email {
  font-size:clamp(26px,5vw,65px);
  font-weight:800;
  letter-spacing:-.05em;
  overflow-wrap:anywhere;
}
.form-preview {
  max-width:650px;
  display:grid;
  gap:16px;
  opacity:.65;
}
.form-preview input,.form-preview textarea {
  padding:16px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  font:inherit;
  width:100%;
}
.form-preview textarea {
  min-height:130px;
}
.reveal {
  animation:appear .65s ease both;
}
@keyframes appear {
  from {
    opacity:0;
    transform:translateY(15px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}
@media(max-width:800px) {
  .header-inner {
    min-height:68px;
  }
  .menu-toggle {
    display:block;
  }
  .nav {
    display:none;
    position:absolute;
    top:68px;
    left:0;
    right:0;
    background:var(--bg);
    padding:24px 5vw;
    flex-direction:column;
    align-items:start;
    border-bottom:1px solid var(--line);
  }
  .nav.open {
    display:flex;
  }
  .hero-grid,.case-hero {
    grid-template-columns:1fr;
  }
  .hero {
    padding:65px 0;
  }
  .hero-photo {
    max-height:470px;
  }
  .project-grid,.tiles,.tool-grid {
    grid-template-columns:1fr;
  }
  .project-card:nth-child(even) {
    margin-top:0;
  }
  .section {
    padding:70px 0;
  }
  .section-head {
    align-items:start;
    flex-direction:column;
  }
  .case-section {
    grid-template-columns:1fr;
    gap:5px;
  }
  .results {
    grid-template-columns:1fr;
  }
  .page-intro {
    padding:65px 0 35px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
/* Editorial hero v2: edge-to-edge portrait, staggered headline and overlapping typography */
.hero-editorial {
  position:relative;
  isolation:isolate;
  min-height:min(850px,calc(100svh - 78px));
  padding:0;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  background:var(--bg);
}
.hero-editorial-photo {
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:49%;
  overflow:hidden;
  background:#65705f;
  z-index:-1;
}
.hero-editorial-photo:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(23,28,21,.12),transparent 40%);
}
.hero-editorial .hero-photo {
  width:100%;
  height:100%;
  max-height:none;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center 33%;
  border-radius:0;
  filter:grayscale(100%);
}
.hero-editorial-inner {
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:clamp(65px,7vw,110px) 5vw 68px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  min-height:inherit;
}
.hero-kicker {
  position:relative;
  z-index:2;
}
.hero-statement {
  font-size:clamp(72px,10.2vw,165px);
  line-height:.83;
  letter-spacing:-.095em;
  margin:55px 0 55px;
  max-width:none;
  position:relative;
  z-index:2;
  font-weight:800;
}
.hero-statement span,.hero-statement em {
  display:block;
  width:max-content;
  max-width:100%;
}
.hero-statement span:nth-child(2) {
  margin-left:clamp(25px,5.8vw,90px);
}
.hero-statement em {
  font-size:.91em;
  font-weight:400;
  letter-spacing:-.055em;
  margin-left:clamp(0px,2vw,32px);
  color:var(--accent);
}
.hero-editorial-bottom {
  display:flex;
  align-items:end;
  gap:50px;
  justify-content:space-between;
  width:47%;
  position:relative;
  z-index:2;
}
.hero-editorial-bottom .lead {
  font-size:clamp(16px,1.45vw,20px);
  max-width:440px;
  margin:0;
}
.hero-cta {
  flex-shrink:0;
  white-space:nowrap;
  font-size:13px;
}
.hero-vertical {
  position:absolute;
  bottom:32px;
  right:24px;
  color:white;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.2em;
  writing-mode:vertical-rl;
  z-index:2;
}
@media(min-width:1100px) {
  .hero-statement span:nth-child(2),.hero-statement em {
    max-width:none;
  }
  .hero-editorial-bottom {
    width:51%;
  }
}
@media(max-width:1100px) {
  .hero-editorial-bottom {
    width:48%;
    display:block;
  }
  .hero-cta {
    margin-top:24px;
  }
  .hero-statement {
    font-size:clamp(70px,10vw,115px);
  }
}
@media(max-width:700px) {
  .hero-editorial {
    min-height:0;
    display:block;
    overflow:hidden;
  }
  .hero-editorial-photo {
    position:relative;
    width:100%;
    height:390px;
    z-index:0;
    margin-left:16%;
    width:84%;
  }
  .hero-editorial-inner {
    min-height:0;
    padding:36px 5vw 56px;
    display:block;
  }
  .hero-kicker {
    display:block;
    margin-bottom:22px;
  }
  .hero-statement {
    font-size:clamp(57px,12.7vw,92px);
    margin:-95px 0 30px;
    line-height:.89;
  }
  .hero-statement span:nth-child(1),.hero-statement span:nth-child(2) {
    color:#f5f3eb;
    text-shadow:0 2px 16px rgba(0,0,0,.22);
  }
  .hero-statement span:nth-child(2) {
    margin-left:7vw;
  }
  .hero-statement em {
    color:var(--accent);
    margin-left:0;
    max-width:100%;
    font-size:.88em;
  }
  .hero-editorial-bottom {
    width:100%;
  }
  .hero-editorial-bottom .lead {
    max-width:540px;
  }
  .hero-vertical {
    top:110px;
    bottom:auto;
    right:10px;
  }
}
@media(max-width:390px) {
  .hero-statement {
    font-size:12vw;
  }
  .hero-editorial-photo {
    height:330px;
  }
}
/* Transparent navigation overlay and accessible refinements */
.header {
  position:absolute;
  top:0;
  left:0;
  right:0;
  background:transparent;
  border-bottom:0;
  backdrop-filter:none;
  z-index:50;
}
.header-inner {
  position:relative;
}
.header .nav a,.header .logo {
  color:var(--ink);
}
.header .nav a:hover {
  color:var(--accent);
}
.header .theme-toggle,.header .menu-toggle {
  background:var(--bg);
  color:var(--ink);
}
main {
  padding-top:78px;
}
body:has(.hero-editorial) main {
  padding-top:0;
}
.hero-editorial {
  min-height:850px;
}
.hero-editorial-inner {
  padding-top:145px;
}
.hero-editorial-bottom {
  padding-bottom:20px;
}
.icon-arrow {
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0;
}
.circle .icon-arrow {
  width:18px;
  height:18px;
}
.text-link:hover .circle {
  transform:translate(2px,-2px);
}
.tools-home-section {
  background:var(--bg);
  color:var(--ink);
}
.tools-home-section .eyebrow {
  color:var(--accent);
}
.tool-preview-image {
  display:block;
  width:100%;
  height:205px;
  object-fit:cover;
  object-position:top left;
  border:1px solid var(--line);
  border-radius:4px;
  margin-bottom:25px;
  background:var(--panel);
}
.tools-home-section .tool {
  border-color:var(--accent);
}
.tools-features {
  padding-top:20px;
}
.tool-feature {
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  align-items:center;
  gap:6vw;
  padding:65px 0;
  border-top:1px solid var(--line);
}
.tool-feature:nth-child(even) .tool-feature-copy {
  order:2;
}
.tool-feature:nth-child(even) .tool-stage {
  order:1;
}
.tool-feature-copy h2 {
  font-size:clamp(46px,5.4vw,78px);
  margin:18px 0 20px;
}
.tool-feature-copy p {
  font-size:19px;
  line-height:1.6;
  max-width:570px;
}
.tool-feature-copy ul {
  padding-left:21px;
  margin:24px 0 30px;
  line-height:1.9;
}
.tool-feature-copy li::marker {
  color:var(--accent);
}
.tool-url-pending {
  display:block;
  margin-top:25px;
}
.tool-stage {
  position:relative;
  height:440px;
  overflow:hidden;
  border-radius:12px;
  background:#17482f;
  isolation:isolate;
}
.tool-stage.roast {
  background:#ff582a;
}
.tool-stage.profit {
  background:#173e2c;
}
.tool-stage:before {
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(#ffffff50 1px,transparent 1px);
  background-size:18px 18px;
  opacity:.5;
}
.tool-shot {
  position:absolute;
  width:73%;
  height:auto;
  max-height:84%;
  object-fit:cover;
  object-position:top;
  border-radius:6px;
  box-shadow:0 14px 35px #0005;
  border:1px solid #ffffff50;
}
.tool-shot.back {
  right:4%;
  top:8%;
  transform:rotate(5deg);
}
.tool-shot.front {
  left:4%;
  top:22%;
  transform:rotate(-5deg);
}
.btn {
  color:var(--bg);
}
:root:not([data-theme="dark"]) .btn {
  color:#fff;
}
:root[data-theme="dark"] .btn {
  color:#171c15;
}
:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:4px;
}
.dark-band .text-link,.dark-band .btn {
  color:#f5f3eb;
}
.dark-band .eyebrow {
  color:#d9f4c8;
}
@media(min-width:1100px) {
  .hero-editorial .hero-statement {
    margin-top:70px;
  }
}
@media(max-width:800px) {
  main {
    padding-top:68px;
  }
  .hero-editorial-inner {
    padding-top:36px;
  }
  .nav.open {
    background:var(--bg);
    box-shadow:0 10px 20px #0002;
  }
  .tool-feature {
    grid-template-columns:1fr;
    gap:28px;
    padding:45px 0;
  }
  .tool-feature:nth-child(even) .tool-feature-copy,.tool-feature:nth-child(even) .tool-stage {
    order:initial;
  }
  .tool-stage {
    height:340px;
  }
  .tool-preview-image {
    height:240px;
  }
}
@media(max-width:700px) {
  .hero-editorial-photo {
    height:420px;
  }
  .hero-editorial-inner {
    padding-top:36px;
  }
  .hero-editorial {
    min-height:0;
  }
  .hero-kicker {
    margin-bottom:22px;
  }
  .header .logo {
    color:var(--ink);
  }
  .tool-stage {
    height:300px;
  }
}
/* Fixed translucent navigation, visible on interiors and after homepage scroll */
.header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background:color-mix(in srgb,var(--bg) 12%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease;
}
.is-home .header:not(.is-scrolled) {
  background:transparent;
  border-bottom-color:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.is-home .header.is-scrolled {
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  border-bottom-color:var(--line);
}
.is-interior .header {
  background:color-mix(in srgb,var(--bg) 82%,transparent);
}
.header .nav a,.header .logo {
  color:var(--ink);
}
.footer .footer-eyebrow {
  color:#d9dfd0;
}
.result {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  min-height:180px;
}
.result-number {
  font-size:clamp(66px,7.8vw,122px);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.09em;
  color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;
}
.result-label {
  font-size:clamp(17px,1.7vw,22px);
  font-weight:650;
  line-height:1.35;
  letter-spacing:-.025em;
  color:var(--ink);
}
@media(max-width:800px) {
  .result {
    min-height:155px;
  }
  .result-number {
    font-size:clamp(66px,16vw,100px);
  }
}
/* Consistent homepage content alignment and equal-width featured projects */
.home-work {
  max-width:1320px;
  margin-inline:auto;
  padding-inline:5vw;
}
.home-work .project-grid {
  gap:32px 18px;
}
.home-work .project-card:nth-child(even) {
  margin-top:0;
}
.home-work .project-card {
  min-width:0;
}
.home-work .section-head,.section-head {
  max-width:100%;
}
/* Project artwork: use supplied client image without placeholder decoration */
.project-image-media {
  background:transparent;
  border:0;
}
.project-image-media:before,.project-image-media:after {
  display:none;
}
.project-image-media>img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.case-hero .project-image-media {
  aspect-ratio:1.35;
}
/* Large illustrative service icons */
.service-icon-visual {
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--accent);
  min-height:230px;
}
.service-icon-visual svg {
  width:min(45%,170px);
  height:auto;
  stroke-width:1.2;
}
/* Separate adjacent neutral sections and footer in dark mode */
html[data-theme="dark"] .footer {
  border-top:1px solid #74836f;
}
@media(max-width:800px) {
  .home-work .project-grid {
    grid-template-columns:1fr;
  }
  .home-work .project-card:nth-child(even) {
    margin-top:0;
  }
}
/* About section and Lucide service icons */
.dark-band h2 {
  margin-top: 12px;
  margin-bottom: 20px;
}
.service-icon-visual svg {
  width: min(150px, 40%);
  height: min(150px, 40%);
  stroke-width: 1.4;
}
/* Align the header wordmark with the same left grid edge as page eyebrows. */
.header-inner {
  max-width:1320px;
  margin-inline:auto;
  padding-left:5vw;
  padding-right:5vw;
}
/* Mobile homepage hero: clean editorial stack, desktop unaffected. */
@media (max-width: 700px) {
  .is-home .hero-editorial {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    padding: 0;
    background: var(--bg);
  }

  .is-home .hero-editorial-inner {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    width: 100%;
    padding: 112px 6vw 36px;
  }

  .is-home .hero-kicker {
    display: block;
    margin: 0 0 30px;
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: .13em;
  }

  .is-home .hero-statement {
    width: 100%;
    max-width: 100%;
    margin: 0 0 28px;
    font-size: clamp(44px, 11.3vw, 74px);
    line-height: .94;
    letter-spacing: -.075em;
    overflow-wrap: normal;
  }

  .is-home .hero-statement span,
  .is-home .hero-statement em {
    display: block;
    width: auto;
    max-width: 100%;
    margin-left: 0;
    text-shadow: none;
  }

  .is-home .hero-statement span {
    color: var(--ink);
  }

  .is-home .hero-statement em {
    margin-top: 5px;
    font-size: .92em;
    color: var(--accent);
  }

  .is-home .hero-editorial-bottom {
    display: block;
    width: 100%;
    padding: 0;
  }

  .is-home .hero-editorial-bottom .lead {
    max-width: 480px;
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
  }

  .is-home .hero-editorial-photo {
    order: 2;
    position: relative;
    inset: auto;
    z-index: auto;
    width: 100%;
    height: clamp(260px, 75vw, 430px);
    margin: 0;
    overflow: hidden;
  }

  .is-home .hero-editorial-photo::after {
    display: none;
  }

  .is-home .hero-editorial .hero-photo {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center 30%;
  }

  .is-home .hero-vertical {
    display: none;
  }
}

@media (max-width: 360px) {
  .is-home .hero-statement {
    font-size: 11vw;
  }
}

/* Interior page alignment and mobile text gutters */
@media (min-width: 801px) {
  /* Align interior introductions consistently with the header's content grid. */
  .is-interior .page-intro,
  body:not(.is-home) .page-intro {
    padding-left: calc(5vw + 24px);
    padding-right: calc(5vw + 24px);
  }
}

@media (max-width: 800px) {
  /* A single readable text gutter across all pages. */
  :root {
    --mobile-text-gutter: 24px;
  }

  .wrap,
  .header-inner,
  .home-work,
  .page-intro {
    padding-left: var(--mobile-text-gutter);
    padding-right: var(--mobile-text-gutter);
  }

  /* Avoid overflow caused by large headings and grid children. */
  .page-intro,
  .case-hero,
  .tiles,
  .tile,
  .tool-feature,
  .tool-feature-copy,
  .project-card {
    min-width: 0;
  }

  .page-intro h1,
  .case-hero h1 {
    overflow-wrap: break-word;
  }

  /* Services: one service per row, contained within the viewport. */
  .tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .tile {
    width: 100%;
    max-width: 100%;
    padding: 24px;
  }

  /* Project cards: images bleed to the edge, copy stays in the gutter. */
  .project-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-card > .media {
    margin-left: calc(-1 * var(--mobile-text-gutter));
    margin-right: calc(-1 * var(--mobile-text-gutter));
  }

  .project-card > .card-meta,
  .project-card > h3,
  .project-card > p {
    margin-left: 0;
    margin-right: 0;
  }

  /* The project title is inset, while its image and case sections keep their layout. */
  .case-hero > :first-child {
    padding-left: 0;
    padding-right: 0;
    min-width: 0;
  }

  /* Tool descriptions are inset, but the visual stages remain full bleed. */
  .tool-feature-copy {
    padding-left: 0;
    padding-right: 0;
  }

  .tool-stage {
    margin-left: calc(-1 * var(--mobile-text-gutter));
    margin-right: calc(-1 * var(--mobile-text-gutter));
    width: calc(100% + 2 * var(--mobile-text-gutter));
    border-radius: 0;
  }

  /* Contact form and surrounding copy use the same gutter. */
  .form-preview {
    width: 100%;
    min-width: 0;
  }

  .contact-email {
    overflow-wrap: anywhere;
  }
}

/* Scroll reveals: subtle, one-time entrance animations.
   Applied only after JavaScript has identified visible targets. */
@media (prefers-reduced-motion: no-preference) {
  .scroll-reveal.is-pending {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }

  .scroll-reveal {
    transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Headings move a little less than project cards. */
  .scroll-reveal.scroll-reveal-heading.is-pending {
    transform: translate3d(0, 15px, 0);
  }
}

/* Theme toggle: one clockwise half-turn per click. */
.theme-toggle { transition: transform 350ms ease; }
.theme-toggle.is-rotated { transform: rotate(180deg); }
.back-projects-link { display: inline-flex; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }

/* Shared header logo, with automatic dark-theme treatment. */
.logo { display: inline-flex; align-items: center; line-height: 1; }
.logo-image { display: block; width: 110px; height: auto; max-height: 48px; object-fit: contain; }
html[data-theme="dark"] .logo-image { filter: brightness(0) invert(1); }
@media (max-width: 800px) { .logo-image { width: 95px; max-height: 40px; } }

.not-found {
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}

/* Shared hover video treatment for project cards and case study hero images. */
.project-image-media.hover-video {
  position: relative;
  overflow: hidden;
}
.project-image-media.hover-video > video.project-hover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 250ms ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-image-media.hover-video.is-playing > video.project-hover-video {
    opacity: 1;
  }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .project-image-media.hover-video > video.project-hover-video {
    display: none;
  }
  .project-image-media .video-hint {
    display: none;
  }
}