:root {
  --bg:#F3F2EE;
  --ink:#151515;
  --dark:#191919;
  --light:#F4F3EF;
  --muted:#686863;
  --line:rgba(21,21,21,.14);
  --line-dark:rgba(244,243,239,.2);
  --surface:#EAE9E5;
  --placeholder:#D8D8D3;
  --placeholder-hero:#C6C6C1;
  --placeholder-dark:#42423F;
  --radius:16px;
  --media-radius:18px;
  --container:1480px;
  --max:var(--container);
  --page-x:clamp(18px,2vw,38px);
  --gutter:var(--page-x);
  --gap:clamp(16px,1.5vw,24px);
  --section-y:clamp(72px,7vw,112px);
  --section:var(--section-y);
  --section-y-small:clamp(48px,5vw,80px);
  --section-small:var(--section-y-small);
  --ease:200ms ease
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Cabinet Grotesk",sans-serif
}

button,a {
  font:inherit
}

a {
  color:inherit;
  text-decoration:none
}

button {
  color:inherit
}

h1,h2,h3,p {
  margin:0
}

h2 {
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.06
}

p {
  line-height:1.5
}

.shell {
  width:calc(100% - var(--gutter) - var(--gutter));
  max-width:none;
  margin-inline:auto
}

.section-space {
  margin-top:var(--section)
}

.services.section-space,.directions.section-space,.process.section-space,
.pricing.section-space,.monthly.section-space,.basics.section-space {
  margin-top:var(--section-small)
}

.section-kicker {
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.2
}

.section-header {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
  align-items:end;
  margin-bottom:48px
}

.section-header>div {
  grid-column:1/span 7
}

.section-header>p {
  grid-column:9/span 4;
  max-width:390px;
  color:var(--muted);
  font-size:14px
}

.section-header h2 {
  font-size:clamp(34px,3.2vw,48px);
  margin-top:20px;
  max-width:740px
}

.media-frame {
  position:relative;
  overflow:hidden;
  background:var(--placeholder)
}

.media-frame img,.media-frame video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

.cta {
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:max-content;
  min-height:34px;
  padding:3px 3px 3px 14px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.055em;
  line-height:1;
  transition:opacity var(--ease)
}

.cta-label {
  display:block
}

.cta-arrow {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  flex:none;
  transition:transform var(--ease)
}

.cta-arrow svg {
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round
}

.cta--light .cta-label {
  color:var(--ink)
}

.cta--light {
  background:var(--light)
}

.cta--light .cta-arrow {
  background:var(--ink);
  color:var(--light)
}

.cta--dark .cta-label {
  color:var(--light)
}

.cta--dark {
  background:rgba(21,21,21,.5);
  box-shadow:inset 0 0 0 1px rgba(244,243,239,.25)
}

.cta--dark .cta-arrow {
  background:var(--light);
  color:var(--ink)
}

.cta:hover {
  opacity:.78
}

.cta:hover .cta-arrow {
  transform:translate(1px,-1px)
}

.cta--compact {
  min-height:28px;
  padding:3px 3px 3px 11px;
  gap:7px;
  font-size:10px
}

.cta--compact .cta-arrow {
  width:22px;
  height:22px
}

.cta--compact .cta-arrow svg {
  width:12px;
  height:12px
}

.brand-small {
  font-size:18px;
  font-weight:500;
  letter-spacing:-.075em;
  line-height:.9;
  white-space:nowrap
}

.brand-small img {
  display:block;
  width:150px;
  max-width:100%;
  height:auto
}

.desktop-nav {
  display:flex;
  align-items:center;
  gap:clamp(28px,3vw,56px)
}

.desktop-nav a {
  font-size:14px;
  font-weight:500;
  transition:opacity var(--ease)
}

.desktop-nav a:hover {
  opacity:.5
}

.header-contact {
  justify-self:end
}

.menu-toggle,.mobile-nav {
  display:none
}

.hero-panel {
  background:#E7E7E3;
  border-radius:var(--media-radius);
  overflow:hidden;
  position:relative;
  min-height:clamp(510px,47vw,700px);
  isolation:isolate
}

.hero-panel:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(0,0,0,.26)
}

.hero-top {
  min-height:clamp(510px,47vw,700px);
  padding:38px 38px 34px;
  display:grid;
  grid-template-columns:8fr 3fr;
  gap:5%;
  align-items:start
}

.hero-content {
  position:relative;
  z-index:2;
  color:var(--light)
}

.hero-copy {
  padding-top:8px;
  max-width:340px
}

.hero-copy p {
  font-size:14px;
  line-height:1.5
}

.hero-copy .hero-lead {
  font-size:18px;
  line-height:1.06;
  letter-spacing:-.04em;
  font-weight:600;
  margin-bottom:17px
}

.hero-copy .cta {
  margin-top:22px
}

.hero-media {
  position:absolute;
  inset:0;
  z-index:0;
  height:auto;
  background:var(--placeholder-hero)
}

.hero--image .hero-panel {
  background:#fff
}

.hero--image .hero-panel:after {
  display:none
}

.hero--image .hero-media {
  background:#fff
}

.hero--image .hero-media img {
  object-fit:contain;
  object-position:center bottom
}

.hero--image .hero-top {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:clamp(32px,4vw,56px) 28px 34px;
  text-align:center
}

.hero--image .hero-content {
  color:var(--ink)
}

.hero--image .hero-copy {
  width:100%;
  max-width:1200px;
  padding:0
}

.hero--image .hero-copy .hero-lead {
  max-width:none;
  margin:0 auto 14px;
  font-size:clamp(38px,4vw,62px);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.04;
  white-space:nowrap
}

.header-contact {
  font-size:12px
}

.hero--image .hero-copy p {
  max-width:100%;
  margin:0 auto;
  color:#42423f;
  font-size:10px;
  font-weight:600;
  letter-spacing:.11em;
  line-height:1.4;
  white-space:nowrap
}

.hero--image .hero-service-line span {
  display:inline-block;
  margin:0 9px;
  color:rgba(21,21,21,.55)
}

.hero--image .hero-copy .cta {
  margin-top:22px
}

.hero--image .cta--dark {
  background:var(--dark);
  box-shadow:none
}

.hero--image .cta--dark .cta-label {
  color:var(--light)
}

.intro {
  display:grid;
  grid-template-columns:4fr 8fr;
  gap:16px;
  align-items:start
}

.intro-main {
  grid-column:2;
  display:grid;
  grid-template-columns:8fr 4fr;
  gap:32px;
  align-items:end
}

.intro h2 {
  font-size:clamp(34px,3.2vw,48px);
  max-width:690px
}

.intro-main p {
  font-size:14px;
  color:var(--muted);
  max-width:260px
}

.capabilities {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.7vw,30px);
  width:calc(100% - var(--gutter) * 2);
  max-width:none;
  margin:34px auto 0
}

.capability-card {
  position:relative;
  aspect-ratio:4/5;
  background:#F5F3EF;
  border-radius:var(--radius);
  min-width:0;
  overflow:hidden;
  isolation:isolate
}

.capability-card:after {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,transparent 66%,rgba(16,16,16,.48) 100%)
}

.capability-media {
  position:absolute;
  inset:0;
  height:100%;
  border:0;
  background:transparent
}

.capability-media img,
.capability-media video {
  max-width:none;
  object-fit:cover;
  object-position:center
}

.capability-product {
  background:#F1D7CA
}

.capability-on-model img {
  object-position:50% 24%
}

.capability-product img {
  object-position:50% 32%
}

.capability-brand-content img {
  object-position:50% 20%
}

.capability-video video {
  object-position:50% 42%
}

.capability-content {
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(16px,1.8vw,28px);
  color:var(--light);
  pointer-events:none
}

.capability-content h3 {
  max-width:100%;
  font-size:clamp(22px,1.5vw,30px);
  color:var(--ink);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:.98
}

.capability-video .capability-content h3 {
  color:var(--light);
  text-shadow:0 1px 10px rgba(0,0,0,.35)
}

.capability-content p {
  font-size:clamp(13px,1.15vw,18px);
  font-weight:500;
  line-height:1.5;
  color:var(--light);
  margin:0;
  max-width:90%
}

.dark-panel {
  background:var(--dark);
  color:var(--light);
  border-radius:var(--media-radius);
  padding:42px 32px 36px
}

.services-header {
  margin-bottom:38px
}

.services-header>p {
  color:#B7B7B1
}

.service-list {
  border-top:1px solid var(--line-dark)
}

.service-row {
  border-bottom:1px solid var(--line-dark)
}

.service-row summary {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
  align-items:start;
  padding:26px 0;
  cursor:pointer
}

.service-row summary::-webkit-details-marker {
  display:none
}

.service-number {
  grid-column:1/span 2;
  font-size:11px;
  color:#ABABA5;
  padding-top:5px
}

.service-copy {
  grid-column:3/span 5
}

.service-title {
  display:block;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.04em
}

.service-summary {
  display:block;
  font-size:13px;
  color:#B7B7B1;
  max-width:330px;
  line-height:1.5;
  margin-top:8px
}

.service-icon {
  grid-column:12;
  justify-self:end;
  width:30px;
  height:30px;
  border:1px solid var(--line-dark);
  border-radius:50%;
  position:relative;
  transition:background var(--ease)
}

.service-icon:before,.service-icon:after {
  content:"";
  position:absolute;
  background:var(--light);
  left:9px;
  right:9px;
  top:14px;
  height:1px
}

.service-icon:after {
  transform:rotate(90deg);
  transition:transform var(--ease)
}

.service-row[open] .service-icon:after {
  transform:rotate(0)
}

.service-row[open] summary {
  padding-bottom:12px
}

.service-row summary:hover .service-icon {
  background:rgba(255,255,255,.12)
}

.service-detail {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
  padding:0 0 22px
}

.service-tags {
  grid-column:3/span 5;
  display:flex;
  flex-wrap:wrap;
  align-content:start;
  gap:7px
}

.service-tags span {
  font-size:10px;
  letter-spacing:.035em;
  border:1px solid var(--line-dark);
  border-radius:100px;
  padding:7px 10px;
  white-space:nowrap
}

.service-visuals {
  grid-column:8/span 4;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.service-visuals {
  max-width:450px;
  justify-self:end
}

.service-visuals .media-frame {
  width:100%;
  aspect-ratio:3/4;
  border-radius:12px;
  background:var(--placeholder-dark)
}

.directions-header {
  margin-bottom:28px
}

.direction-list {
  display:grid;
  gap:12px
}

.direction-tabs {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:flex-start;
  gap:clamp(18px,2.4vw,34px);
  margin-bottom:18px
}

.direction-tabs button {
  position:relative;
  padding:0 0 12px;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:11px;
  font-weight:500;
  letter-spacing:.055em
}

.direction-tabs button[aria-selected="true"] {
  color:var(--ink);
  font-weight:600
}

.direction-tabs button[aria-selected="true"]:after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:30px;
  height:1px;
  background:var(--ink)
}

.direction-tabs button:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:4px
}

.direction-gallery-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px
}

.direction-gallery-grid img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius)
}

.direction-gallery-grid img {
  animation:direction-image-in 200ms ease-out both
}

@keyframes direction-image-in {
  from { opacity:0; transform:translateY(6px) }
  to { opacity:1; transform:translateY(0) }
}

.direction-legacy {
  display:none
}

.direction-card {
  display:grid;
  gap:18px
}

.direction-meta {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px
}

.direction-meta h3 {
  font-size:clamp(24px,2.6vw,42px);
  font-weight:500;
  letter-spacing:-.055em
}

.direction-meta p {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:12px
}

.direction-meta p span {
  height:3px;
  width:3px;
  border-radius:50%;
  background:currentColor
}

.direction-media-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px
}

.direction-media-grid img {
  display:block;
  width:100%;
  aspect-ratio:3/4;
  border-radius:var(--radius);
  object-fit:cover
}

.process-header {
  margin-bottom:34px
}

.process-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px
}

.process-graphic {
  height:184px;
  border:1px solid var(--line);
  position:relative;
  background:transparent
}

.step-bar {
  position:absolute;
  left:0;
  right:0;
  top:16px;
  background:var(--dark);
  color:var(--light);
  padding:11px 13px;
  font-size:11px;
  font-weight:500
}

.process-step:nth-child(2) .step-bar {
  top:58px
}

.process-step:nth-child(3) .step-bar {
  top:100px
}

.process-step:nth-child(4) .step-bar {
  top:142px
}

.step-index {
  position:absolute;
  bottom:13px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  color:var(--muted)
}

.process-body {
  margin-top:10px;
  padding:0 3px;
  min-height:48px
}

.process-body p {
  font-size:12px;
  color:var(--muted);
  margin-top:0;
  max-width:230px
}

.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap)
}

.price-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  min-height:400px;
  display:flex;
  flex-direction:column
}

.price-card.featured {
  background:var(--dark);
  color:var(--light);
  border-color:var(--dark)
}

.price-card h3 {
  font-size:12px;
  letter-spacing:.055em;
  font-weight:600
}

.price {
  font-size:clamp(30px,2.5vw,42px);
  letter-spacing:-.06em;
  line-height:1.1;
  margin-top:34px;
  font-weight:500;
  white-space:nowrap
}

.price span {
  font-size:15px;
  letter-spacing:-.02em
}

.price-description {
  font-size:13px;
  max-width:320px;
  margin-top:12px;
  color:var(--muted)
}

.featured .price-description {
  color:#BCBCB7
}

.price-card ul {
  list-style:none;
  padding:0;
  margin:auto 0 22px
}

.price-card li {
  font-size:12px;
  padding:9px 0;
  border-bottom:1px solid var(--line)
}

.featured li {
  border-color:var(--line-dark)
}

.price-action {
  width:100%;
  align-self:stretch;
  justify-content:space-between;
  margin-top:0
}

.pricing-notes {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid var(--line);
  margin-top:28px;
  padding-top:18px
}

.pricing-notes p {
  font-size:12px;
  color:var(--muted)
}

.month-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap)
}

.month-card {
  min-height:228px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:34px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius)
}

.month-card h3 {
  font-size:11px;
  font-weight:500;
  letter-spacing:.05em
}

.month-card ul {
  list-style:none;
  margin:auto 0 0;
  padding:0
}

.month-card li {
  padding:8px 0;
  border-top:1px solid var(--line);
  font-size:14px;
  line-height:1.35
}

.monthly-closing {
  margin-top:20px;
  max-width:720px;
  font-size:12px;
  color:var(--muted)
}

.monthly .section-header {
  margin-bottom:28px
}

.monthly .section-header h2,
.basics .section-header h2 {
  font-size:clamp(32px,3vw,46px)
}

.basics-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,5vw,72px);
  border-top:1px solid var(--line)
}

.basics-grid article {
  padding:18px 0;
  min-height:96px;
  display:flex;
  align-items:flex-start;
  gap:18px;
  border-bottom:1px solid var(--line)
}

.basics-grid article>span {
  min-width:24px;
  padding-top:2px;
  font-size:10px;
  color:var(--muted)
}

.basics-grid article>div {
  display:grid;
  gap:9px
}

.basics-grid h3 {
  font-size:11px;
  font-weight:600;
  letter-spacing:.055em
}

.basics-grid p {
  font-size:14px;
  line-height:1.4;
  color:var(--muted);
  max-width:300px
}

.final-cta {
  padding-top:60px;
  padding-bottom:128px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:32px
}

.final-cta h2 {
  font-size:clamp(48px,6vw,96px)
}

.final-cta-keep {
  white-space:nowrap
}

.final-cta>div {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:32px;
  min-width:230px
}

.email-link {
  font-size:15px;
  border-bottom:1px solid currentColor;
  padding-bottom:3px
}

.footer {
  padding-bottom:12px
}

.footer-panel {
  background:var(--dark);
  color:var(--light);
  border-radius:var(--media-radius);
  padding:44px 38px 24px
}

.footer-brand-row {
  display:flex;
  justify-content:space-between;
  align-items:start
}

.footer-brand-row img {
  display:block;
  width:min(100%, 720px);
  height:auto;
  object-fit:contain;
  object-position:left center
}

.footer-brand-row a {
  font-size:23px;
  border:1px solid var(--line-dark);
  border-radius:50%;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  transition:background var(--ease)
}

.footer-brand-row a:hover {
  background:rgba(255,255,255,.12)
}

.footer-main {
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:28px;
  margin-top:110px
}

.footer-description {
  font-size:13px;
  color:#B7B7B1;
  max-width:230px
}

.footer-column {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px
}

.footer-column h2 {
  font-size:10px;
  color:#A8A8A2;
  font-weight:500;
  letter-spacing:.055em;
  margin-bottom:5px
}

.footer-column a,.footer-column span {
  font-size:13px
}

.footer-column a:hover {
  opacity:.55
}

.footer-bottom {
  border-top:1px solid var(--line-dark);
  margin-top:100px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  gap:24px
}

.footer-legal,.footer-language {
  display:flex;
  gap:28px;
  font-size:11px;
  color:#A8A8A2
}

.footer-legal a:hover {
  color:var(--light)
}

.footer-language .active {
  color:var(--light)
}

.enquiry-overlay[hidden],.enquiry-step[hidden],.enquiry-success[hidden] {
  display:none
}

.enquiry-overlay {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(12,12,12,.58);
  opacity:0;
  transition:opacity 220ms ease
}

.enquiry-overlay.is-open {
  opacity:1
}

.enquiry-modal {
  width:min(100%,1000px);
  max-height:none;
  overflow:visible;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--media-radius);
  padding:26px 38px 28px;
  box-shadow:0 28px 90px rgba(0,0,0,.18);
  transform:translateY(14px);
  transition:transform 220ms ease
}

.enquiry-overlay.is-open .enquiry-modal {
  transform:translateY(0)
}

.enquiry-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px
}

.enquiry-progress {
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--muted)
}

.enquiry-close {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  font-size:22px;
  line-height:1
}

.enquiry-step h2,.enquiry-success h2 {
  font-size:clamp(34px,3.9vw,56px);
  margin-bottom:24px
}

.enquiry-questions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 30px
}

.enquiry-fieldset {
  border:0;
  min-width:0;
  margin:0;
  padding:0
}

.enquiry-fieldset legend,.enquiry-field>label {
  display:block;
  width:100%;
  margin-bottom:8px;
  font-size:13px;
  font-weight:500;
  line-height:1.4
}

.enquiry-fieldset legend span,.enquiry-field>label span:not(.enquiry-optional) {
  color:var(--muted)
}

.enquiry-options {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}

.enquiry-options label {
  position:relative;
  cursor:pointer
}

.enquiry-options input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0
}

.enquiry-options label span {
  display:block;
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  font-size:11px;
  font-weight:500;
  line-height:1.25;
  white-space:nowrap;
  transition:background var(--ease),color var(--ease),border-color var(--ease)
}

.enquiry-options input:checked+span {
  background:var(--dark);
  color:var(--light);
  border-color:var(--dark)
}

.enquiry-options input:focus-visible+span {
  outline:2px solid var(--ink);
  outline-offset:3px
}

.enquiry-options label:hover span {
  border-color:var(--ink)
}

.enquiry-error {
  min-height:0;
  margin-top:0;
  color:#a3322c;
  font-size:11px
}

.enquiry-error:not(:empty) {
  margin-top:7px
}

.enquiry-fieldset.is-invalid legend,.enquiry-field.is-invalid>label {
  color:#a3322c
}

.enquiry-actions {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top:24px
}

.enquiry-actions--split {
  justify-content:space-between
}

.enquiry-action {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:38px;
  padding:5px 6px 5px 17px;
  border:0;
  border-radius:999px;
  background:var(--dark);
  color:var(--light);
  cursor:pointer;
  font-size:11px;
  font-weight:600;
  letter-spacing:.05em
}

.enquiry-action span {
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:50%;
  background:var(--light);
  color:var(--ink);
  font-size:17px;
  font-weight:400
}

.enquiry-back {
  border:0;
  padding:10px 0;
  background:transparent;
  cursor:pointer;
  font-size:11px;
  font-weight:600;
  letter-spacing:.05em
}

.enquiry-details-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 22px;
  margin-bottom:0
}

.enquiry-field {
  min-width:0
}

.enquiry-field input,.enquiry-field textarea {
  display:block;
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.45);
  color:var(--ink);
  padding:8px 11px;
  font:inherit;
  font-size:13px;
  line-height:1.4
}

.enquiry-field textarea {
  min-height:76px;
  resize:vertical
}

.enquiry-field input:focus,.enquiry-field textarea:focus {
  border-color:var(--ink);
  outline:2px solid transparent
}

.enquiry-field input:focus-visible,.enquiry-field textarea:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:2px
}

.enquiry-field.is-invalid input {
  border-color:#a3322c
}

.enquiry-brief-field {
  margin-top:24px
}

.enquiry-links-field {
  margin-top:14px
}

.enquiry-field textarea::placeholder {
  color:var(--muted);
  opacity:1
}

.enquiry-optional {
  margin-left:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:400
}

.enquiry-step[data-step="2"] .enquiry-actions {
  margin-top:18px
}

.enquiry-privacy-note {
  margin:12px 0 -8px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45
}

.enquiry-privacy-note a {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:2px
}

.enquiry-success {
  min-height:300px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center
}

.enquiry-success h2 {
  margin-bottom:16px
}

.enquiry-success p {
  font-size:15px
}

.enquiry-success-close {
  margin-top:36px;
  padding-right:18px
}

body.enquiry-open {
  overflow:hidden
}

@media(max-width:1100px) {
  :root {
    --gutter:32px;
    --section:88px
  }

  .section-header {
    grid-template-columns:repeat(8,minmax(0,1fr))
  }

  .section-header>div {
    grid-column:1/span 5
  }

  .section-header>p {
    grid-column:6/span 3
  }

  .hero-top {
    min-height:clamp(500px,65vw,650px)
  }

  .intro {
    grid-template-columns:2fr 6fr
  }

  .intro-main {
    grid-template-columns:1fr
  }

  .capabilities {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .service-detail {
    grid-template-columns:repeat(12,minmax(0,1fr))
  }

  .service-visuals {
    max-width:400px
  }

  .footer-main {
    margin-top:90px
  }

}

@media(max-width:760px) {
  :root {
    --gutter:20px;
    --section:64px
  }

  .enquiry-overlay {
    padding:8px
  }

  .enquiry-modal {
    width:100%;
    max-height:calc(100dvh - 16px);
    overflow-y:auto;
    overscroll-behavior:contain;
    border-radius:12px;
    padding:20px 20px 26px
  }

  .enquiry-topline {
    margin-bottom:26px
  }

  .enquiry-step h2,.enquiry-success h2 {
    font-size:clamp(36px,9vw,52px);
    margin-bottom:28px
  }

  .enquiry-questions,.enquiry-details-grid {
    grid-template-columns:1fr;
    gap:26px
  }

  .enquiry-details-grid {
    gap:20px
  }

  .enquiry-options label span {
    font-size:11px
  }

  .desktop-nav,.header-contact {
    display:none
  }

  .brand-small {
    font-size:16px
  }

  .menu-toggle {
    display:flex;
    flex-direction:column;
    gap:5px;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    background:transparent;
    border:0;
    cursor:pointer
  }

  .menu-toggle span {
    display:block;
    width:22px;
    height:1px;
    background:var(--ink);
    transition:transform var(--ease)
  }

  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(3px) rotate(45deg)
  }

  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-3px) rotate(-45deg)
  }

  .mobile-nav:not([hidden]) {
    display:flex;
    position:absolute;
    top:64px;
    left:0;
    right:0;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:0 0 12px 12px;
    padding:10px 20px 20px;
    flex-direction:column;
    box-shadow:0 14px 20px rgba(0,0,0,.06)
  }

  .mobile-nav a {
    padding:12px 0;
    font-size:15px;
    border-bottom:1px solid var(--line)
  }

  .mobile-nav .cta {
    margin-top:10px;
    padding:0;
    border:0;
    font-size:10px
  }

  .hero-top {
    min-height:620px;
    display:block;
    padding:28px 20px 34px
  }

  .hero-copy {
    margin-top:35px;
    max-width:440px
  }

  .hero-copy p {
    font-size:13px
  }

  .hero--image .hero-service-line {
    white-space:normal;
    max-width:340px;
    margin-inline:auto
  }

  .hero--image .hero-copy .hero-lead {
    white-space:normal;
    font-size:clamp(35px,8vw,46px)
  }

  .hero--image .hero-service-line span {
    margin-inline:5px
  }

  .hero-copy .hero-lead {
    margin-bottom:10px
  }

  .hero-copy .cta {
    margin-top:13px
  }

  .intro {
    display:block
  }

  .intro h2 {
    font-size:clamp(35px,7vw,54px)
  }

  .intro-main {
    gap:20px
  }

  .intro-main p {
    font-size:13px
  }

  .capabilities {
    grid-template-columns:1fr;
    margin-top:40px;
    gap:10px
  }

  .capability-content {
    padding:22px
  }

  .dark-panel {
    padding:38px 20px 30px
  }

  .section-header {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    margin-bottom:32px
  }

  .section-header>div,.section-header>p {
    grid-column:1/-1
  }

  .direction-tabs {
    width:100%;
    justify-content:flex-start;
    gap:18px 24px
  }

  .section-header h2 {
    font-size:clamp(35px,7vw,52px);
    margin-top:14px
  }

  .section-header>p {
    margin-top:20px;
    font-size:13px
  }

  .services-header {
    margin-bottom:40px
  }

  .service-row summary {
    grid-template-columns:32px 1fr 30px;
    gap:8px;
    padding:22px 0
  }

  .service-number {
    grid-column:1;
    font-size:10px
  }

  .service-copy {
    grid-column:2
  }

  .service-title {
    font-size:19px
  }

  .service-summary {
    font-size:12px;
    margin-top:9px
  }

  .service-icon {
    grid-column:3;
    grid-row:1
  }

  .service-detail {
    grid-template-columns:1fr;
    margin-left:40px;
    padding-right:0;
    gap:20px
  }

  .service-tags,.service-visuals {
    grid-column:1
  }

  .directions-header {
    margin-bottom:28px
  }

  .direction-media-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .process-header {
    margin-bottom:34px
  }

  .process-grid {
    grid-template-columns:1fr;
    gap:10px
  }

  .process-step {
    display:grid;
    grid-template-columns:110px 1fr;
    gap:10px
  }

  .process-graphic {
    height:140px
  }

  .process-step .step-bar,.process-step:nth-child(n) .step-bar {
    top:14px;
    font-size:10px;
    padding:8px
  }

  .process-step:nth-child(2) .step-bar {
    top:42px
  }

  .process-step:nth-child(3) .step-bar {
    top:70px
  }

  .process-step:nth-child(4) .step-bar {
    top:98px
  }

  .process-body {
    margin:0;
    min-height:140px;
    padding:18px
  }

  .process-body p {
    font-size:12px
  }

  .pricing-grid,.month-grid,.basics-grid {
    grid-template-columns:1fr
  }

  .price-card {
    min-height:440px;
    padding:24px
  }

  .price {
    margin-top:38px
  }

  .pricing-notes {
    flex-direction:column;
    gap:6px
  }

  .month-card {
    height:205px
  }

  .month-card p {
    font-size:26px
  }

  .monthly-closing {
    font-size:13px
  }

  .basics-grid {
    gap:10px
  }

  .basics-grid article {
    min-height:135px
  }

  .basics-grid p {
    font-size:18px
  }

  .final-cta {
    padding-top:10px;
    padding-bottom:80px;
    display:block
  }

  .final-cta h2 {
    font-size:clamp(43px,8vw,64px)
  }

  .final-cta>div {
    margin-top:40px;
    gap:28px
  }

  .footer-panel {
    padding:30px 20px 24px
  }

  .footer-brand-row img {
    width:calc(100% - 48px);
  }

  .footer-brand-row a {
    flex:none;
    width:35px;
    height:35px;
    font-size:18px
  }

  .footer-main {
    grid-template-columns:repeat(2,1fr);
    gap:38px 18px;
    margin-top:64px
  }

  .footer-description {
    grid-column:1/-1
  }

  .footer-bottom {
    margin-top:70px
  }

  .footer-legal {
    gap:14px;
    flex-wrap:wrap
  }

}

@media (min-width:761px) and (max-height:700px) {
  .enquiry-modal {
    max-height:calc(100dvh - 32px);
    overflow-y:auto;
    overscroll-behavior:contain
  }
}

@media(max-width:480px) {
  :root {
    --gutter:18px
  }

  .hero-top {
    min-height:560px
  }

  .capabilities {
    grid-template-columns:1fr
  }

  .capability-card {
    display:block
  }

  .capability-content {
    padding:20px
  }

  .capability-content p {
    font-size:12px
  }

  .service-detail {
    margin-left:0
  }

  .service-tags {
    max-width:100%
  }

  .direction-meta {
    align-items:flex-start;
    flex-direction:column;
    gap:8px
  }

  .direction-media-grid {
    grid-template-columns:1fr
  }

  .price-card {
    min-height:430px
  }

  .footer-legal,.footer-language {
    font-size:10px
  }

}

/* Mobile density and type hierarchy pass */
@media(max-width:760px) {
  :root {
    --section:56px;
    --section-small:44px
  }

  .brand-small {
    font-size:12px;
    position:relative;
    z-index:2
  }

  .menu-toggle {
    position:relative;
    z-index:2
  }

  .mobile-nav:not([hidden]) {
    position:absolute;
    z-index:1;
    top:0;
    left:calc(4px - var(--gutter));
    right:calc(4px - var(--gutter));
    padding:54px calc(var(--gutter) - 4px) 14px;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 18px 36px rgba(0,0,0,.1)
  }

  body:has(.mobile-nav:not([hidden]))::before {
    content:"";
    position:fixed;
    z-index:19;
    inset:0;
    background:rgba(0,0,0,.2)
  }

  .mobile-nav a {
    min-height:42px;
    padding:10px 0;
    font-size:14px
  }

  .mobile-nav .cta {
    min-height:40px;
    margin-top:8px
  }

  .hero-panel,
  .hero--image .hero-top {
    min-height:clamp(470px,125vw,520px)
  }

  .hero--image .hero-top {
    padding:20px 18px 22px
  }

  .hero--image .hero-copy {
    margin-top:18px
  }

  .hero--image .hero-copy .hero-lead {
    font-size:clamp(34px,8.7vw,40px);
    line-height:1.03;
    margin-bottom:12px
  }

  .hero--image .hero-copy p {
    max-width:none;
    font-size:clamp(7.5px,2.15vw,9px);
    line-height:1.55;
    letter-spacing:.035em;
    white-space:nowrap
  }

  .hero--image .hero-service-line span {
    margin-inline:2px
  }

  .hero--image .hero-copy .cta {
    min-height:32px;
    margin-top:14px;
    font-size:10px
  }

  .hero--image .hero-copy .cta-arrow {
    width:25px;
    height:25px
  }

  .intro.section-space {
    margin-top:48px
  }

  .intro-main {
    grid-template-columns:1fr;
    gap:10px
  }

  .intro h2 {
    font-size:clamp(26px,7.4vw,32px);
    line-height:1.08
  }

  .intro-main p {
    font-size:12px;
    line-height:1.45
  }

  .capabilities {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:calc(100% - var(--gutter) * 2);
    margin:24px 0 0;
    margin-inline:auto;
    gap:10px;
    overflow:visible
  }

  .capability-card {
    width:100%;
    aspect-ratio:4/5
  }

  .capability-card:after {
    inset:0
  }

  .capability-content {
    padding:clamp(12px,3.3vw,22px)
  }

  .capability-content h3 {
    font-size:clamp(14px,3.6vw,24px);
    line-height:.98
  }

  .capability-content p {
    margin:0;
    font-size:clamp(11px,3vw,15px);
    line-height:1.3
  }

  .dark-panel {
    padding:28px 18px 24px
  }

  .section-header {
    margin-bottom:24px
  }

  .section-header h2,
  .monthly .section-header h2,
  .basics .section-header h2 {
    margin-top:10px;
    font-size:clamp(27px,7.2vw,34px);
    line-height:1.08
  }

  .section-header>p {
    margin-top:10px;
    font-size:12px;
    line-height:1.45
  }

  .services-header {
    margin-bottom:26px
  }

  .service-row summary {
    grid-template-columns:26px minmax(0,1fr) 28px;
    gap:8px;
    padding:17px 0
  }

  .service-title {
    font-size:16px
  }

  .service-summary {
    margin-top:6px;
    font-size:11px
  }

  .service-detail {
    gap:14px
  }

  .directions-header {
    margin-bottom:16px
  }

  .direction-tabs {
    width:100%;
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:4px
  }

  .direction-tabs button {
    min-height:44px;
    padding-bottom:12px;
    font-size:clamp(9px,2.9vw,11px);
    letter-spacing:.02em;
    white-space:nowrap
  }

  .direction-tabs button[aria-selected="true"]:after {
    width:22px
  }

  .direction-gallery-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px
  }

  .process-header {
    margin-bottom:22px
  }

  .process-grid {
    display:block;
    border-top:1px solid var(--line)
  }

  .process-step {
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    min-width:0;
    column-gap:14px;
    row-gap:4px;
    padding:16px 0;
    border-bottom:1px solid var(--line)
  }

  .process-graphic {
    display:contents
  }

  .process-step .step-bar,
  .process-step:nth-child(n) .step-bar {
    position:static;
    grid-column:2;
    grid-row:1;
    padding:0;
    background:transparent;
    color:var(--ink);
    font-size:14px;
    font-weight:500;
    line-height:1.2
  }

  .step-index {
    position:static;
    grid-column:1;
    grid-row:1 / span 2;
    align-self:start;
    transform:none;
    font-size:10px
  }

  .process-body {
    grid-column:2;
    grid-row:2;
    min-height:0;
    margin:0;
    padding:0
  }

  .process-body p {
    max-width:none;
    font-size:12px;
    line-height:1.4
  }

  .pricing-grid {
    grid-template-columns:1fr;
    gap:12px
  }

  .price-card {
    min-height:0;
    padding:20px
  }

  .price-card h3 {
    font-size:10px
  }

  .price {
    margin-top:20px;
    font-size:clamp(28px,8vw,34px)
  }

  .price span {
    font-size:13px
  }

  .price-description {
    margin-top:8px;
    font-size:12px;
    line-height:1.45
  }

  .price-card ul {
    margin:18px 0 16px
  }

  .price-card li {
    padding:7px 0;
    font-size:11px
  }

  .price-action {
    min-height:40px
  }

  .pricing-notes {
    margin-top:20px;
    padding-top:14px
  }

  .pricing-notes p {
    font-size:11px
  }

  .month-grid {
    display:flex;
    gap:10px;
    margin-right:calc(-1 * var(--gutter));
    padding-right:var(--gutter);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none
  }

  .month-grid::-webkit-scrollbar {
    display:none
  }

  .month-card {
    flex:0 0 82%;
    min-height:172px;
    height:auto;
    gap:14px;
    padding:18px;
    scroll-snap-align:start
  }

  .month-card ul {
    margin-top:0
  }

  .month-card h3 {
    font-size:9px;
    letter-spacing:.04em
  }

  .month-card li {
    padding:7px 0;
    font-size:12px;
    line-height:1.35
  }

  .monthly-closing {
    margin-top:16px;
    font-size:11px;
    line-height:1.45
  }

  .basics-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:16px;
    row-gap:0
  }

  .basics-grid article {
    min-height:0;
    gap:9px;
    padding:12px 0
  }

  .basics-grid article>span {
    min-width:18px;
    font-size:9px
  }

  .basics-grid article>div {
    min-width:0;
    gap:5px
  }

  .basics-grid h3 {
    font-size:9px;
    line-height:1.25
  }

  .basics-grid p {
    font-size:11px;
    line-height:1.35
  }

  .final-cta {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding-top:0;
    padding-bottom:52px
  }

  .final-cta h2 {
    font-size:clamp(32px,8.7vw,38px);
    line-height:1.04;
    text-wrap:balance
  }

  .final-cta>div {
    align-items:center;
    min-width:0;
    margin-top:24px;
    gap:16px
  }

  .final-cta .cta {
    min-height:36px;
    font-size:10px
  }

  .email-link {
    font-size:13px
  }

  .footer-main {
    margin-top:44px
  }

  .footer-bottom {
    margin-top:42px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*:before,*:after {
    transition-duration:.01ms!important;
    animation-duration:.01ms!important
  }

  .enquiry-overlay,.enquiry-modal {
    transition:none
  }

}

/* Compact editorial utility pages */
.utility-main {
  width:min(1100px,calc(100% - var(--gutter) * 2));
  padding-top:clamp(80px,8vw,108px);
  padding-bottom:clamp(80px,8vw,108px)
}

.utility-intro {
  max-width:820px;
  margin-bottom:68px
}

.utility-eyebrow {
  margin-bottom:18px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.2
}

.utility-title {
  margin:0;
  font-size:clamp(44px,4vw,64px);
  font-weight:500;
  letter-spacing:-.06em;
  line-height:1.02
}

.utility-lede {
  max-width:680px;
  margin-top:18px;
  color:var(--muted);
  font-size:16px;
  line-height:1.5
}

.faq-list {
  border-top:1px solid var(--line)
}

.faq-item {
  border-bottom:1px solid var(--line)
}

.faq-question {
  width:100%;
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 0;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
  font-size:20px;
  font-weight:500;
  letter-spacing:-.035em
}

.faq-question:focus-visible,
.footer-legal a:focus-visible {
  outline:2px solid currentColor;
  outline-offset:5px
}

.faq-icon {
  position:relative;
  flex:0 0 24px;
  width:24px;
  height:24px;
  border:1px solid var(--line);
  border-radius:50%
}

.faq-icon::before,
.faq-icon::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:9px;
  height:1px;
  background:var(--ink);
  transform:translate(-50%,-50%);
  transition:transform 200ms ease
}

.faq-icon::after {
  transform:translate(-50%,-50%) rotate(90deg)
}

.faq-question[aria-expanded="true"] .faq-icon::after {
  transform:translate(-50%,-50%) rotate(0)
}

.faq-answer {
  max-width:760px;
  padding:0 48px 24px 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.6
}

.faq-answer:not([hidden]) {
  animation:utility-answer-in 200ms ease both
}

@keyframes utility-answer-in {
  from { opacity:0; transform:translateY(4px) }
  to { opacity:1; transform:translateY(0) }
}

.utility-cta {
  margin-top:92px;
  padding-top:24px;
  border-top:1px solid var(--line)
}

.utility-cta > p {
  color:var(--muted);
  font-size:13px
}

.utility-cta h2 {
  margin:7px 0 20px;
  font-size:clamp(28px,3vw,38px);
  letter-spacing:-.055em;
  font-weight:500
}

.usage-content {
  max-width:920px
}

.usage-section {
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:20px;
  padding:34px 0;
  border-top:1px solid var(--line)
}

.usage-number {
  padding-top:5px;
  color:var(--muted);
  font-size:11px
}

.usage-section h2 {
  margin-bottom:11px;
  font-size:22px;
  font-weight:500;
  letter-spacing:-.035em
}

.usage-section p {
  max-width:760px;
  color:var(--muted);
  font-size:16px;
  line-height:1.6
}

.usage-section p + p {
  margin-top:12px
}

.usage-note {
  margin-top:8px;
  padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  line-height:1.5
}

.utility-updated {
  margin-top:14px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45
}

.utility-context {
  max-width:760px;
  margin-top:16px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55
}

.legal-content {
  max-width:1000px
}

.legal-section {
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:20px;
  padding:30px 0 32px;
  border-top:1px solid var(--line)
}

.legal-number {
  padding-top:5px;
  color:var(--muted);
  font-size:11px;
  font-variant-numeric:tabular-nums
}

.legal-section h2 {
  margin:0 0 12px;
  font-size:21px;
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.25
}

.legal-section h3.legal-subtitle {
  margin:22px 0 7px;
  font-size:16px;
  font-weight:600;
  line-height:1.4
}

.legal-section h3.legal-subtitle:first-of-type {
  margin-top:0
}

.legal-section p,
.legal-list {
  max-width:780px;
  color:var(--muted);
  font-size:16px;
  line-height:1.65
}

.legal-section p + p {
  margin-top:12px
}

.legal-list {
  margin:12px 0 16px;
  padding-left:20px
}

.legal-list li + li {
  margin-top:3px
}

.legal-section a {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px
}

.legal-bottom {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:18px;
  padding-top:20px;
  border-top:1px solid var(--line)
}

.legal-bottom a {
  color:var(--muted);
  font-size:13px;
  text-decoration:none;
  transition:color 160ms ease
}

.legal-bottom a:hover {
  color:var(--ink)
}

.legal-bottom a:focus-visible {
  outline:2px solid currentColor;
  outline-offset:5px
}

.terms-business-info {
  max-width:1000px;
  margin-top:36px;
  padding-top:22px;
  border-top:1px solid var(--line)
}

.terms-business-info h2 {
  margin:0 0 10px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase
}

.terms-business-info p {
  color:var(--muted);
  font-size:14px;
  line-height:1.65
}

.terms-business-info a {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px
}

@media(max-width:760px) {
  .utility-main {
    padding-top:64px;
    padding-bottom:64px
  }

  .utility-intro {
    margin-bottom:44px
  }

  .utility-eyebrow {
    margin-bottom:14px
  }

  .utility-title {
    font-size:clamp(36px,9vw,46px)
  }

  .utility-lede {
    margin-top:14px;
    font-size:15px
  }

  .faq-question {
    min-height:68px;
    gap:16px;
    padding:16px 0;
    font-size:17px
  }

  .faq-answer {
    padding:0 30px 20px 0;
    font-size:15px
  }

  .utility-cta {
    margin-top:64px
  }

  .usage-section {
    grid-template-columns:28px minmax(0,1fr);
    gap:12px;
    padding:26px 0
  }

  .usage-section h2 {
    font-size:19px
  }

  .usage-section p {
    font-size:15px
  }

  .legal-section {
    grid-template-columns:28px minmax(0,1fr);
    gap:12px;
    padding:24px 0 26px
  }

  .legal-section h2 {
    font-size:19px
  }

  .legal-section h3.legal-subtitle {
    font-size:15px
  }

  .legal-section p,
  .legal-list {
    font-size:15px
  }

  .legal-bottom {
    gap:18px
  }
}

@media(prefers-reduced-motion:reduce) {
  .faq-icon::before,
  .faq-icon::after,
  .faq-answer:not([hidden]) {
    transition:none;
    animation:none
  }
}

:focus-visible {
  outline:2px solid currentColor;
  outline-offset:4px
}

/* Phase 1 refresh: tokens are scoped to the header and sections through Services. */
:root {
  --phase1-page:#FAFAF7;
  --phase1-white:#FFFFFF;
  --phase1-soft:#F1F1EE;
  --phase1-ink:#141414;
  --phase1-muted:#696963;
  --phase1-sage:#879176;
  --phase1-sage-dark:#68715C;
  --phase1-sage-pale:#E8EAE3;
  --phase1-dark:#181818;
  --phase1-border:rgba(20,20,20,.12);
  --phase1-radius:13px
}

body:has(.hero--image) { background:#FAFAF7 }
.hero.shell,.intro.shell,.capabilities.shell,.services.shell {
  width:calc(100% - 48px);
  max-width:1600px;
  margin-inline:auto
}
.hero { margin-top:0 }
.hero-panel {
  position:relative;
  min-height:clamp(520px,40vw,620px);
  border-radius:var(--phase1-radius);
  overflow:hidden;
  background:var(--phase1-soft);
  isolation:auto
}
.hero--image .hero-panel:after { display:none }
.hero-media {
  position:absolute;
  inset:0;
  z-index:0;
  height:100%;
  background:var(--phase1-soft)
}
.hero--image .hero-media img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:right bottom;
  transform:translateY(-clamp(100px,9vw,130px))
}
.desktop-nav {
  grid-column:1;
  justify-self:start;
  display:flex;
  gap:24px;
  align-items:center
}
.desktop-nav a,.header-contact {
  color:var(--phase1-ink);
  font-size:11px;
  font-weight:500;
  line-height:1.2;
  transition:opacity var(--ease)
}
.desktop-nav a:hover,.header-contact:hover { opacity:.55 }
.brand-small {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:block;
  width:128px;
  line-height:0
}
.brand-small img { display:block; width:100%; height:auto }
.header-contact {
  grid-column:3;
  justify-self:end;
  padding:0;
  background:none;
  border:0;
  border-radius:0
}
.menu-toggle { display:none }
.mobile-nav { display:none }
.hero-top {
  position:relative;
  z-index:2;
  min-height:clamp(520px,40vw,620px);
  display:flex;
  align-items:flex-end;
  padding:32px 28px 32px;
  text-align:left
}
.hero--image .hero-top {
  justify-content:flex-start;
  align-items:flex-end;
  padding:32px 28px;
  text-align:left
}
.hero--image .hero-content { width:100%; color:var(--phase1-ink) }
.hero--image .hero-copy {
  width:min(44%,540px);
  max-width:540px;
  margin:0;
  padding:0
}
.hero--image .hero-copy .hero-lead {
  max-width:520px;
  margin:0 0 14px;
  font-family:"Cabinet Grotesk",sans-serif;
  font-size:clamp(38px,3.4vw,52px);
  font-weight:500;
  line-height:.96;
  letter-spacing:-.04em;
  white-space:normal
}
.hero--image .hero-copy p {
  max-width:none;
  margin:0;
  color:var(--phase1-muted);
  font-size:9px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.07em;
  white-space:normal
}
.hero--image .hero-service-line span { margin:0 6px; color:var(--phase1-muted) }
.hero--image .hero-copy .cta {
  min-height:29px;
  margin-top:18px;
  padding:0 15px;
  border:1px solid rgba(20,20,20,.65);
  border-radius:999px;
  background:transparent;
  color:var(--phase1-ink);
  font-size:10px;
  font-weight:500;
  letter-spacing:.015em;
  transition:background-color var(--ease),border-color var(--ease)
}
.hero--image .hero-copy .cta .cta-label { color:var(--phase1-ink) }
.hero--image .hero-copy .cta:hover { background:rgba(20,20,20,.04); border-color:var(--phase1-ink); opacity:1 }
.hero--image .hero-copy .cta-arrow { display:none }

.intro.section-space,.intro { margin-top:30px }
.intro {
  display:grid;
  grid-template-columns:1fr;
  gap:0
}
.intro-main {
  grid-column:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:end
}
.intro h2 {
  max-width:620px;
  color:var(--phase1-ink);
  font-size:clamp(30px,2.8vw,38px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.04em
}
.intro-main p {
  max-width:350px;
  padding:0 0 2px;
  color:var(--phase1-sage-dark);
  font-size:13px;
  font-weight:500;
  line-height:1.4
}

.capabilities {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  width:calc(100% - 48px);
  margin-top:24px
}
.capability-card {
  border-radius:var(--phase1-radius);
  background:var(--phase1-soft)
}
.capability-card:after { display:none }
.capability-on-model:after,.capability-video:after,.capability-brand-content:after {
  display:block;
  inset:auto 0 0;
  height:24%;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.22))
}
.capability-content {
  padding:18px;
  color:var(--phase1-ink)
}
.capability-content h3 {
  max-width:100%;
  color:var(--phase1-ink);
  font-size:16px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.02em;
  text-transform:lowercase
}
.capability-content p {
  max-width:90%;
  margin:0;
  font-size:12px;
  font-weight:400;
  line-height:1.25
}
.capability-on-model .capability-content p,.capability-brand-content .capability-content p,.capability-video .capability-content p { color:#fff }
.capability-product:after { display:none }
.capability-product .capability-content p { color:var(--phase1-ink) }
.capability-video .capability-content h3 { color:#fff; text-shadow:none }

.services.section-space { margin-top:56px }
.services .dark-panel {
  padding:30px 28px 24px;
  border-radius:var(--phase1-radius);
  background:var(--phase1-soft);
  color:var(--phase1-ink);
  box-shadow:none
}
.services .section-header {
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
  align-items:end;
  margin-bottom:22px
}
.services .section-header>div { grid-column:1/span 7 }
.services .section-header>p {
  grid-column:9/span 4;
  max-width:360px;
  color:var(--phase1-muted);
  font-size:13px;
  font-weight:400;
  line-height:1.4
}
.services .section-kicker {
  color:var(--phase1-sage-dark);
  font-size:10px;
  font-weight:500;
  letter-spacing:.07em
}
.services .section-header h2 {
  max-width:740px;
  margin-top:10px;
  color:var(--phase1-ink);
  font-size:clamp(30px,2.8vw,38px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.04em
}
.services .service-list,.services .service-row { border-color:var(--phase1-border) }
.services .service-row summary {
  grid-template-columns:50px minmax(0,1fr) 28px;
  padding:17px 0;
  align-items:center
}
.services .service-number { grid-column:1 }
.services .service-copy { grid-column:2 }
.services .service-icon { grid-column:3 }
.services .service-number {
  padding-top:0;
  color:var(--phase1-sage-dark);
  font-size:10px;
  font-weight:500
}
.services .service-title {
  color:var(--phase1-ink);
  font-size:18px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.025em
}
.services .service-summary {
  max-width:360px;
  margin-top:5px;
  color:var(--phase1-muted);
  font-size:12px;
  font-weight:400;
  line-height:1.4
}
.services .service-icon {
  width:24px;
  height:24px;
  border-color:rgba(20,20,20,.28)
}
.services .service-icon:before,.services .service-icon:after {
  top:11px;
  left:7px;
  right:7px;
  background:var(--phase1-ink)
}
.services .service-row summary:hover .service-icon { background:rgba(20,20,20,.04) }
.services .service-detail { padding-bottom:18px }
.services .service-tags span { border-color:var(--phase1-border) }

@media(max-width:1100px) {
  .hero.shell,.intro.shell,.capabilities.shell,.services.shell { width:calc(100% - 40px) }
  .hero-panel,.hero-top { min-height:clamp(500px,56vw,600px) }
  .desktop-nav { gap:17px }
  .hero--image .hero-copy { width:48% }
  .hero--image .hero-copy .hero-lead { font-size:clamp(38px,4.3vw,48px) }
  .capabilities { width:calc(100% - 40px); grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
}
@media(max-width:760px) {
  .hero.shell,.intro.shell,.capabilities.shell,.services.shell { width:calc(100% - 32px) }
  .hero-panel,.hero-top { min-height:clamp(500px,128vw,580px) }
  .brand-small { width:116px; left:50% }
  .desktop-nav,.header-contact { display:none }
  .menu-toggle {
    grid-column:2;
    justify-self:end;
    position:relative;
    z-index:3;
    display:flex;
    width:40px;
    height:40px;
    padding:0;
    border:0;
    background:transparent
  }
  .menu-toggle span { background:var(--phase1-ink) }
  .mobile-nav:not([hidden]) {
    position:absolute;
    z-index:2;
    top:46px;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    padding:8px 14px 12px;
    border:1px solid var(--phase1-border);
    border-radius:10px;
    background:var(--phase1-white);
    box-shadow:none
  }
  .mobile-nav a {
    min-height:40px;
    padding:12px 0;
    border-bottom:1px solid var(--phase1-border);
    color:var(--phase1-ink);
    font-size:12px;
    font-weight:500
  }
  .mobile-nav a:last-child { border:0 }
  body:has(.mobile-nav:not([hidden]))::before { display:none }
  .hero-top,.hero--image .hero-top {
    min-height:clamp(500px,128vw,580px);
    justify-content:flex-start;
    align-items:flex-end;
    padding:24px 18px 24px
  }
  .hero--image .hero-copy { width:52%; max-width:390px }
  .hero--image .hero-copy .hero-lead { max-width:390px; font-size:clamp(36px,8vw,46px); line-height:.96; margin-bottom:12px }
  .hero--image .hero-copy p { max-width:320px; font-size:9px; line-height:1.5; letter-spacing:.05em }
  .hero--image .hero-service-line span { margin-inline:4px }
  .hero--image .hero-copy .cta { min-height:29px; margin-top:15px; font-size:10px }
  .intro.section-space,.intro { margin-top:28px }
  .intro-main { grid-template-columns:1fr; gap:10px }
  .intro h2 { font-size:clamp(30px,7.8vw,36px); line-height:.98 }
  .intro-main p { max-width:360px; font-size:12px; line-height:1.4 }
  .capabilities { width:calc(100% - 32px); grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:22px }
  .capability-card { aspect-ratio:4/5; border-radius:12px }
  .capability-content { padding:14px }
  .capability-content h3 { font-size:15px }
  .capability-content p { font-size:11px; line-height:1.25 }
  .services.section-space { margin-top:42px }
  .services .dark-panel { padding:24px 18px 18px }
  .services .section-header { display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:16px }
  .services .section-header>div,.services .section-header>p { grid-column:1 }
  .services .section-header h2 { margin-top:8px; font-size:clamp(30px,7.8vw,36px) }
  .services .section-header>p { font-size:12px }
  .services .service-row summary { grid-template-columns:24px minmax(0,1fr) 24px; gap:8px; padding:15px 0 }
  .services .service-title { font-size:16px }
  .services .service-summary { max-width:none; font-size:11px }
  .services .service-icon { grid-column:3; width:23px; height:23px }
  .services .service-detail { grid-template-columns:1fr; margin-left:32px; gap:14px }
  .services .service-tags,.services .service-visuals { grid-column:1 }
  .services .service-visuals { justify-self:start }
}
@media(max-width:380px) {
  .hero--image .hero-copy .hero-lead { font-size:34px }
  .capability-content { padding:12px }
  .capability-content p { font-size:10px }
}

/* Keep the centered mobile wordmark clear of the hero subject. */
@media(max-width:760px) {
  body:has(.hero--image) .hero--image .hero-media img {
    transform:translateY(46px) scale(1.42)
  }
}

/* Keep the centered mobile wordmark clear of the hero subject. */
@media(max-width:760px) {
  body:has(.hero--image) .hero--image .hero-media img {
    transform:translateY(46px) scale(1.42)
  }
}

/* Phase 2: extend the approved Phase 1 language below Services. */
.directions { margin-top:clamp(64px,5vw,80px) }
.process { margin-top:64px }
.pricing { margin-top:64px }
.monthly { margin-top:68px }
.basics { margin-top:68px }
.final-cta {
  margin-top:clamp(64px,5vw,80px)
}

.directions .section-header,
.process .section-header,
.pricing .section-header,
.monthly .section-header,
.basics .section-header {
  margin-bottom:24px
}

.directions .section-header h2,
.process .section-header h2,
.pricing .section-header h2,
.monthly .section-header h2,
.basics .section-header h2 {
  margin-top:12px;
  font-size:clamp(30px,2.8vw,38px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.04em
}

.directions .section-header>p,
.process .section-header>p,
.monthly .section-header>p {
  max-width:340px;
  color:#68715C;
  font-size:13px;
  font-weight:500;
  line-height:1.4
}

.directions .direction-tabs {
  gap:24px;
  margin-bottom:14px
}

.directions .direction-tabs button {
  padding-bottom:8px;
  color:#6C6B66;
  font-size:10px;
  font-weight:500;
  letter-spacing:.07em
}

.directions .direction-tabs button[aria-selected="true"] {
  color:#68715C;
  font-weight:600
}

.directions .direction-tabs button[aria-selected="true"]:after {
  width:100%;
  background:#68715C
}

.directions .direction-gallery-grid,
.directions .direction-media-grid { gap:14px }

.directions .direction-gallery-grid img,
.directions .direction-media-grid img { border-radius:14px }

.process .process-header { margin-bottom:26px }
.process .process-grid { gap:0 }
.process .process-step {
  min-width:0;
  padding:0 16px 0 0;
  margin-right:16px;
  border-top:1px solid rgba(20,20,20,.12)
}
.process .process-step:last-child { margin-right:0; padding-right:0 }
.process .process-graphic {
  height:auto;
  min-height:0;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 0 0;
  border:0;
  background:transparent
}
.process .step-bar {
  position:static;
  order:1;
  padding:0;
  background:none;
  color:#141414;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em
}
.process .step-index {
  position:static;
  order:0;
  transform:none;
  color:#6C6B66;
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em
}
.process .process-body { margin:12px 0 0; padding:0; min-height:0 }
.process .process-body p {
  max-width:220px;
  color:#6C6B66;
  font-size:13px;
  line-height:1.4
}

.pricing .pricing-grid { gap:14px }
.pricing .price-card {
  min-height:340px;
  padding:22px;
  border:1px solid rgba(20,20,20,.12);
  border-radius:14px;
  background:#fff;
  color:#141414
}
.pricing .price-card.featured {
  border-color:rgba(20,20,20,.12);
  background:#E8EAE3;
  color:#141414
}
.pricing .price-card h3 {
  color:#6C6B66;
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em
}
.pricing .price {
  margin-top:28px;
  font-size:clamp(30px,2.5vw,38px);
  line-height:.98;
  letter-spacing:-.045em
}
.pricing .price span { font-size:13px; letter-spacing:0 }
.pricing .price-description,
.pricing .featured .price-description {
  max-width:300px;
  color:#6C6B66;
  font-size:13px;
  line-height:1.4
}
.pricing .price-card ul { margin-bottom:20px }
.pricing .price-card li {
  padding:9px 0;
  border-color:rgba(20,20,20,.12);
  font-size:13px;
  line-height:1.35
}
.pricing .price-action,
.final-cta .cta {
  display:inline-flex;
  width:max-content;
  min-height:29px;
  align-self:flex-start;
  padding:0 15px;
  border:1px solid rgba(20,20,20,.65);
  border-radius:999px;
  background:transparent;
  color:#141414;
  font-size:10px;
  font-weight:500;
  letter-spacing:.015em;
  transition:background-color var(--ease),border-color var(--ease)
}
.pricing .price-action .cta-label,
.final-cta .cta .cta-label { color:#141414 }
.pricing .price-action .cta-arrow,
.final-cta .cta .cta-arrow { display:none }
.pricing .price-action:hover,
.final-cta .cta:hover { background:rgba(20,20,20,.04); border-color:var(--phase1-ink); opacity:1 }
.pricing .pricing-notes {
  margin-top:20px;
  padding-top:14px;
  border-color:rgba(20,20,20,.12)
}
.pricing .pricing-notes p { font-size:12px; line-height:1.4 }

.monthly .section-header,
.basics .section-header { margin-bottom:18px }
.monthly .section-header h2,
.basics .section-header h2 { font-size:clamp(30px,2.8vw,38px) }
.monthly .month-grid {
  gap:18px;
  border-top:1px solid rgba(20,20,20,.12)
}
.monthly .month-card {
  min-height:174px;
  gap:18px;
  padding:16px 12px 0 0;
  border:0;
  border-radius:0;
  background:transparent
}
.monthly .month-card h3 {
  color:#6C6B66;
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em
}
.monthly .month-card li {
  padding:8px 0;
  font-size:13px;
  line-height:1.35
}
.monthly .monthly-closing {
  max-width:700px;
  margin-top:14px;
  color:#6C6B66;
  font-size:12px;
  line-height:1.4
}

.basics .basics-grid { column-gap:48px }
.basics .basics-grid article {
  min-height:76px;
  gap:16px;
  padding:14px 0
}
.basics .basics-grid article>span {
  color:#6C6B66;
  font-size:10px;
  font-weight:600
}
.basics .basics-grid article>div { gap:7px }
.basics .basics-grid h3 {
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em
}
.basics .basics-grid p { color:#6C6B66; font-size:13px; line-height:1.4 }

.final-cta {
  padding-top:0;
  padding-bottom:80px;
  align-items:end
}
.final-cta h2 {
  max-width:850px;
  font-size:clamp(42px,4.6vw,68px);
  font-weight:500;
  line-height:.94;
  letter-spacing:-.045em
}
.final-cta>div { min-width:0; gap:18px }
.final-cta .email-link {
  color:#6C6B66;
  font-size:13px
}

.footer-panel {
  border-radius:14px;
  padding:36px 32px 22px;
  box-shadow:none
}
.footer-brand-row { align-items:center }
.footer-brand-row>img { width:min(68%,640px) }
.footer-brand-row a {
  width:112px;
  height:112px;
  margin-right:-20px;
  border:0;
  border-radius:50%;
  transition:opacity 180ms ease
}
.footer-brand-row a img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}
.footer-brand-row a:hover { background:none; opacity:.76 }
.footer-main { gap:24px; margin-top:60px }
.footer-description { font-size:12px; line-height:1.4 }
.footer-column { gap:10px }
.footer-column h2 { margin-bottom:3px; font-weight:600; letter-spacing:.07em }
.footer-column a,.footer-column span { font-size:12px; line-height:1.35 }
.footer-bottom { margin-top:48px; padding-top:16px }
.footer-legal,.footer-language { gap:22px; font-size:10px }

@media(max-width:1100px) {
  .process .process-step { padding-right:12px; margin-right:12px }
  .pricing .price-card { min-height:360px; padding:18px }
  .final-cta { padding-bottom:68px }
  .footer-panel { padding-inline:26px }
}

@media(max-width:760px) {
  .directions { margin-top:64px }
  .process,.pricing { margin-top:56px }
  .monthly,.basics { margin-top:60px }
  .final-cta { margin-top:64px }
  .directions .section-header,
  .process .section-header,
  .pricing .section-header { margin-bottom:20px }
  .monthly .section-header,.basics .section-header { margin-bottom:16px }
  .pricing .section-header { margin-bottom:16px }
  .directions .section-header h2,
  .process .section-header h2,
  .pricing .section-header h2,
  .monthly .section-header h2,
  .basics .section-header h2 { font-size:clamp(30px,7.5vw,36px) }
  .directions .section-header>p,
  .process .section-header>p,
  .monthly .section-header>p { font-size:12px }
  .directions .direction-tabs { gap:18px; margin-bottom:12px }
  .directions .direction-gallery-grid,
  .directions .direction-media-grid { gap:10px }
  .process .process-grid { grid-template-columns:1fr; gap:0 }
  .process .process-step,
  .process .process-step:last-child { margin:0; padding:14px 0 16px }
  .process .process-graphic { padding:0; gap:14px }
  .process .process-body { margin:8px 0 0 35px }
  .process .process-body p { max-width:360px; font-size:12px }
  .pricing .pricing-grid { grid-template-columns:1fr; gap:12px }
  .pricing .price-card { min-height:0; padding:20px }
  .pricing .price { margin-top:20px }
  .pricing .price-card ul { margin:24px 0 18px }
  .pricing .price-action { margin-top:0 }
  .pricing .pricing-notes { flex-direction:column; gap:8px; margin-top:16px }
  .monthly .month-grid { grid-template-columns:repeat(3,minmax(230px,78vw)); gap:12px; overflow-x:auto; padding-bottom:5px; scroll-snap-type:x mandatory; overscroll-behavior-x:contain }
  .monthly .month-card { min-height:168px; padding:14px 12px 0 0; scroll-snap-align:start }
  .basics .basics-grid { column-gap:24px }
  .basics .basics-grid article { min-height:72px; gap:10px }
  .final-cta { flex-direction:column; align-items:flex-start; gap:24px; padding-bottom:64px }
  .final-cta h2 { font-size:clamp(38px,9vw,52px) }
  .final-cta>div { gap:14px }
  .footer-panel { padding:28px 20px 20px }
  .footer-brand-row>img { width:calc(100% - 60px) }
  .footer-brand-row a { width:68px; height:68px; margin-right:-8px }
  .footer-main { margin-top:48px; gap:30px 18px }
  .footer-bottom { margin-top:48px; gap:16px; align-items:flex-start }
  .footer-legal,.footer-language { gap:12px }
}

@media(max-width:420px) {
  .basics .basics-grid { grid-template-columns:1fr }
}

@media(prefers-reduced-motion:reduce) {
  .footer-brand-row a { transition:none }
}

/* Fixed overlay navigation: keep the existing hero composition and controls intact. */
.hero--image .hero-panel {
  background:#F5F6F8;
  border-top-left-radius:0;
  border-top-right-radius:0
}
.hero--image .hero-media { background:#F5F6F8 }
.hero-navigation {
  position:absolute;
  z-index:5;
  inset:0 0 auto;
  height:0;
  background:none;
  pointer-events:none
}
.hero-navigation > * { pointer-events:auto }
.hero-navigation .desktop-nav {
  position:absolute;
  top:20px;
  left:36px;
  display:flex;
  gap:24px
}
.hero-navigation .brand-small {
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%)
}
.hero-navigation .header-contact {
  position:absolute;
  top:20px;
  right:36px
}
.hero-navigation .menu-toggle { position:absolute; top:12px; right:14px }
.hero-navigation .mobile-nav { top:58px }
@media(max-width:1100px) {
  .hero-navigation .desktop-nav { left:36px; gap:17px }
  .hero-navigation .header-contact { right:36px }
}
@media(max-width:760px) {
  .hero-navigation .desktop-nav,.hero-navigation .header-contact { display:none }
  .hero-navigation .brand-small { top:12px; left:50%; width:116px }
  .hero-navigation .menu-toggle { top:12px; right:14px }
  .hero-navigation .mobile-nav:not([hidden]) { top:58px }
}

/* Utility pages share the homepage navigation and footer assets without
   inheriting the hero's absolutely positioned header treatment. */
.site-header {
  position:relative;
  z-index:20;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  min-height:60px
}
.site-header .desktop-nav {
  position:static;
  grid-column:1;
  justify-self:start;
  gap:24px
}
.site-header .desktop-nav a {
  color:var(--phase1-ink);
  font-size:11px;
  font-weight:500
}
.site-header .brand-small {
  position:static;
  grid-column:2;
  grid-row:1;
  width:128px;
  transform:none
}
.site-header .header-contact {
  display:block;
  grid-column:3;
  justify-self:end;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:var(--phase1-ink);
  font-size:11px;
  font-weight:500;
  letter-spacing:0
}
.site-header .header-contact .cta-arrow { display:none }
.site-header .menu-toggle { display:none }
.site-header .mobile-nav { display:none }

@media(max-width:760px) {
  .site-header {
    display:block;
    min-height:56px
  }
  .site-header .desktop-nav,
  .site-header .header-contact { display:none }
  .site-header .brand-small {
    position:absolute;
    top:50%;
    left:50%;
    width:116px;
    transform:translate(-50%,-50%)
  }
  .site-header .menu-toggle {
    position:absolute;
    top:8px;
    right:0;
    z-index:3;
    display:flex;
    width:40px;
    height:40px;
    padding:0;
    border:0;
    background:transparent
  }
  .site-header .mobile-nav:not([hidden]) {
    position:absolute;
    z-index:2;
    top:52px;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    padding:8px 14px 12px;
    border:1px solid var(--phase1-border);
    border-radius:10px;
    background:var(--phase1-white);
    box-shadow:0 18px 36px rgba(0,0,0,.1)
  }
  .site-header .mobile-nav a {
    min-height:42px;
    padding:12px 0;
    border-bottom:1px solid var(--phase1-border);
    color:var(--phase1-ink);
    font-size:12px;
    font-weight:500
  }
  .site-header .mobile-nav a:last-child { border:0 }
}

/* Phase 2: bring the enquiry UI into the homepage control system. */
.enquiry-modal {
  border-color:var(--phase1-border);
  border-radius:var(--phase1-radius);
  background:var(--phase1-page)
}
.enquiry-close {
  width:44px;
  height:44px;
  border-color:var(--phase1-border)
}
.enquiry-options label span {
  min-height:40px;
  display:flex;
  align-items:center;
  padding:9px 14px;
  border-color:var(--phase1-border);
  font-size:12px
}
.enquiry-error {
  font-size:12px
}
.enquiry-action {
  min-height:44px;
  justify-content:center;
  gap:0;
  padding:0 16px;
  border:1px solid rgba(20,20,20,.65);
  background:transparent;
  color:var(--phase1-ink);
  font-size:10px;
  font-weight:500;
  letter-spacing:.015em;
  transition:background-color var(--ease),border-color var(--ease)
}
.enquiry-action span { display:none }
.enquiry-action:hover {
  border-color:var(--phase1-ink);
  background:rgba(20,20,20,.04)
}
.enquiry-back {
  min-width:44px;
  min-height:44px;
  padding:0 10px;
  font-size:10px;
  letter-spacing:.015em
}
.enquiry-field input,.enquiry-field textarea {
  border-color:var(--phase1-border);
  border-radius:10px;
  background:#fff;
  padding:10px 12px;
  font-size:14px
}
.enquiry-field textarea { min-height:88px }
.enquiry-field input:focus-visible,.enquiry-field textarea:focus-visible {
  outline-color:var(--phase1-sage-dark)
}
@media(max-width:760px) {
  .hero--image .hero-copy .cta,
  .pricing .price-action,
  .final-cta .cta {
    min-height:44px;
    padding-inline:16px
  }
  .enquiry-modal {
    border-radius:var(--phase1-radius);
    padding:20px 20px 24px
  }
  .enquiry-options { gap:8px }
  .enquiry-options label span {
    min-height:44px;
    padding-inline:13px
  }
  .enquiry-step h2,.enquiry-success h2 { margin-bottom:22px }
  .enquiry-questions,.enquiry-details-grid { gap:20px }
  .enquiry-actions { margin-top:20px }
}
.enquiry-modal {
  scrollbar-width:thin;
  scrollbar-color:rgba(20,20,20,.22) transparent
}
.enquiry-modal::-webkit-scrollbar { width:6px }
.enquiry-modal::-webkit-scrollbar-track { background:transparent }
.enquiry-modal::-webkit-scrollbar-thumb {
  border-radius:999px;
  background:rgba(20,20,20,.22)
}
@media(max-width:380px) {
  .enquiry-modal { padding-inline:16px }
  .enquiry-options label span { padding-inline:11px }
}

/* Homepage visual pass: keep the established copy and behavior, refine its hierarchy. */
body:has(.hero--image) {
  --home-paper:#FAFAF7;
  --home-ink:#171715;
  --home-muted:#62635F;
  --home-line:rgba(23,23,21,.14);
  --home-sage:#68715C;
  --home-sage-wash:#E8EAE3;
  --home-soft:#F1F1EE;
  background:var(--home-paper);
  color:var(--home-ink)
}

body:has(.hero--image) main {
  font-size:16px
}

body:has(.hero--image) .shell {
  width:calc(100% - clamp(40px,6vw,96px));
  max-width:1600px
}

body:has(.hero--image) .hero.shell,
body:has(.hero--image) .intro.shell,
body:has(.hero--image) .capabilities.shell,
body:has(.hero--image) .services.shell {
  width:calc(100% - clamp(40px,6vw,96px))
}

body:has(.hero--image) .hero-panel,
body:has(.hero--image) .hero-top {
  min-height:clamp(560px,43vw,680px)
}

body:has(.hero--image) .hero-panel {
  background:#F4F5F6;
  border-radius:14px;
  overflow:hidden
}

body:has(.hero--image) .hero-media {
  background:#F4F5F6
}

body:has(.hero--image) .hero--image .hero-media img {
  object-fit:contain;
  object-position:right bottom;
  transform:scale(1.08);
  transform-origin:right bottom
}

body:has(.hero--image) .hero-navigation .desktop-nav {
  top:28px;
  left:clamp(28px,3vw,48px);
  gap:clamp(20px,2.2vw,32px)
}

body:has(.hero--image) .hero-navigation .desktop-nav a,
body:has(.hero--image) .hero-navigation .header-contact {
  font-size:13px;
  line-height:1.3
}

body:has(.hero--image) .hero-navigation .brand-small {
  top:26px;
  width:154px
}

body:has(.hero--image) .hero-navigation .header-contact {
  top:28px;
  right:clamp(28px,3vw,48px)
}

body:has(.hero--image) .hero--image .hero-top {
  align-items:flex-end;
  padding:36px clamp(32px,4vw,64px) 42px
}

body:has(.hero--image) .hero--image .hero-copy {
  width:min(48%,620px);
  max-width:620px
}

body:has(.hero--image) .hero--image .hero-copy .hero-lead {
  max-width:600px;
  margin-bottom:18px;
  color:var(--home-ink);
  font-size:clamp(48px,4vw,60px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.045em
}

body:has(.hero--image) .hero--image .hero-copy p {
  color:var(--home-muted);
  font-size:12px;
  line-height:1.5;
  letter-spacing:.065em
}

body:has(.hero--image) .hero--image .hero-service-line span {
  margin-inline:9px;
  color:var(--home-sage)
}

body:has(.hero--image) .hero--image .hero-copy .cta,
body:has(.hero--image) .pricing .price-action,
body:has(.hero--image) .final-cta .cta {
  min-height:46px;
  padding:0 21px;
  border:1px solid rgba(23,23,21,.62);
  border-radius:999px;
  background:transparent;
  color:var(--home-ink);
  font-size:12px;
  font-weight:500;
  letter-spacing:.025em
}

body:has(.hero--image) .hero--image .hero-copy .cta { margin-top:24px }
body:has(.hero--image) .hero--image .hero-copy .cta:hover,
body:has(.hero--image) .pricing .price-action:hover,
body:has(.hero--image) .final-cta .cta:hover {
  border-color:var(--home-ink);
  background:rgba(23,23,21,.045)
}

body:has(.hero--image) .intro.section-space,
body:has(.hero--image) .intro { margin-top:42px }

body:has(.hero--image) .intro-main {
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.75fr);
  gap:clamp(28px,5vw,80px)
}

body:has(.hero--image) .intro h2 {
  max-width:700px;
  color:var(--home-ink);
  font-size:clamp(36px,3.2vw,46px);
  line-height:1.02;
  letter-spacing:-.045em
}

body:has(.hero--image) .intro-main p {
  max-width:440px;
  color:var(--home-muted);
  font-size:16px;
  line-height:1.45
}

body:has(.hero--image) .capabilities {
  width:calc(100% - clamp(40px,6vw,96px));
  gap:clamp(12px,1.4vw,20px);
  margin-top:30px
}

body:has(.hero--image) .capability-card { border-radius:14px }
body:has(.hero--image) .capability-content { padding:clamp(14px,1.6vw,22px) }
body:has(.hero--image) .capability-content h3 {
  color:var(--home-ink);
  font-size:14px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.025em
}

body:has(.hero--image) .capability-content p {
  max-width:94%;
  font-size:15px;
  font-weight:400;
  line-height:1.35;
  text-wrap:pretty
}

body:has(.hero--image) .capability-on-model:after,
body:has(.hero--image) .capability-brand-content:after,
body:has(.hero--image) .capability-video:after {
  height:32%;
  background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.36) 100%)
}

body:has(.hero--image) .capability-on-model .capability-content h3,
body:has(.hero--image) .capability-brand-content .capability-content h3,
body:has(.hero--image) .capability-video .capability-content h3 {
  color:var(--home-ink)
}

body:has(.hero--image) .capability-on-model .capability-content p,
body:has(.hero--image) .capability-brand-content .capability-content p,
body:has(.hero--image) .capability-video .capability-content p { color:#fff }

body:has(.hero--image) .capability-product .capability-content h3,
body:has(.hero--image) .capability-product .capability-content p { color:var(--home-ink) }

body:has(.hero--image) .capability-video:after { height:40% }

body:has(.hero--image) .services.section-space { margin-top:clamp(64px,7vw,96px) }
body:has(.hero--image) .services .dark-panel {
  padding:clamp(26px,3vw,42px);
  border-radius:14px;
  background:var(--home-soft)
}

body:has(.hero--image) .services .section-header {
  grid-template-columns:minmax(0,1fr) minmax(280px,.65fr);
  gap:36px;
  margin-bottom:26px
}

body:has(.hero--image) .services .section-header>div { grid-column:1 }
body:has(.hero--image) .services .section-header>p {
  grid-column:2;
  font-size:16px;
  line-height:1.45
}

body:has(.hero--image) .services .section-kicker,
body:has(.hero--image) .section-kicker { font-size:11px }

body:has(.hero--image) .services .section-header h2,
body:has(.hero--image) .directions .section-header h2,
body:has(.hero--image) .process .section-header h2,
body:has(.hero--image) .pricing .section-header h2,
body:has(.hero--image) .monthly .section-header h2,
body:has(.hero--image) .basics .section-header h2 {
  color:var(--home-ink);
  font-size:clamp(34px,3vw,44px);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.045em
}

body:has(.hero--image) .services .section-header h2 { margin-top:12px }
body:has(.hero--image) .services .service-list,
body:has(.hero--image) .services .service-row { border-color:var(--home-line) }
body:has(.hero--image) .services .service-row summary {
  grid-template-columns:58px minmax(0,1fr) 32px;
  padding:20px 0
}

body:has(.hero--image) .services .service-number {
  color:var(--home-sage);
  font-size:13px;
  font-weight:500
}

body:has(.hero--image) .services .service-title { font-size:20px; font-weight:500 }
body:has(.hero--image) .services .service-summary {
  max-width:590px;
  margin-top:7px;
  color:var(--home-muted);
  font-size:15px;
  line-height:1.5
}

body:has(.hero--image) .services .service-icon {
  width:32px;
  height:32px;
  border-color:rgba(23,23,21,.26)
}

body:has(.hero--image) .services .service-icon:before,
body:has(.hero--image) .services .service-icon:after { top:15px }

body:has(.hero--image) .services .service-detail {
  grid-template-columns:minmax(240px,.72fr) minmax(0,1.5fr);
  align-items:start;
  gap:28px;
  margin-left:58px;
  padding:2px 0 22px
}

body:has(.hero--image) .services .service-tags,
body:has(.hero--image) .services .service-visuals { grid-column:auto }

body:has(.hero--image) .services .service-tags { align-content:start; gap:9px }
body:has(.hero--image) .services .service-tags span {
  min-height:34px;
  padding:8px 13px;
  border-color:var(--home-line);
  border-radius:999px;
  font-size:12px
}

body:has(.hero--image) .services .service-visuals {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  width:100%;
  max-width:none;
  justify-self:stretch
}

body:has(.hero--image) .services .service-visuals .media-frame {
  height:clamp(150px,18vw,240px);
  border-radius:12px
}

body:has(.hero--image) .directions { margin-top:clamp(76px,8vw,112px) }
body:has(.hero--image) .directions .section-header {
  display:block;
  margin-bottom:20px
}

body:has(.hero--image) .directions .section-header>div { display:block }
body:has(.hero--image) .directions .section-header h2 { max-width:900px; margin-top:12px }
body:has(.hero--image) .directions .section-header>p {
  max-width:560px;
  margin-top:12px;
  color:var(--home-muted);
  font-size:16px;
  line-height:1.45
}

body:has(.hero--image) .directions .direction-tabs {
  gap:clamp(22px,3vw,40px);
  margin-bottom:20px
}

body:has(.hero--image) .directions .direction-tabs button {
  padding-bottom:11px;
  color:var(--home-muted);
  font-size:13px;
  letter-spacing:.04em
}

body:has(.hero--image) .directions .direction-tabs button[aria-selected="true"] { color:var(--home-sage) }
body:has(.hero--image) .directions .direction-gallery-grid,
body:has(.hero--image) .directions .direction-media-grid { gap:clamp(12px,1.5vw,20px) }
body:has(.hero--image) .directions .direction-gallery-grid img,
body:has(.hero--image) .directions .direction-media-grid img { border-radius:14px }

body:has(.hero--image) .process { margin-top:clamp(80px,8vw,116px) }
body:has(.hero--image) .process .section-header {
  display:block;
  margin-bottom:28px
}

body:has(.hero--image) .process .section-header h2 { margin-top:12px }
body:has(.hero--image) .process .section-header>p {
  max-width:620px;
  margin-top:14px;
  color:var(--home-muted);
  font-size:16px;
  line-height:1.5
}

body:has(.hero--image) .process .process-step {
  padding-right:clamp(18px,2vw,30px);
  margin-right:clamp(18px,2vw,30px);
  border-color:var(--home-line)
}

body:has(.hero--image) .process .process-step:last-child { margin-right:0; padding-right:0 }
body:has(.hero--image) .process .process-graphic { gap:16px; padding-top:18px }
body:has(.hero--image) .process .step-index { color:var(--home-sage); font-size:12px }
body:has(.hero--image) .process .step-bar { font-size:14px; letter-spacing:.055em }
body:has(.hero--image) .process .process-body { margin-top:16px }
body:has(.hero--image) .process .process-body p {
  max-width:300px;
  color:var(--home-muted);
  font-size:16px;
  line-height:1.5
}

body:has(.hero--image) .pricing { margin-top:clamp(84px,8vw,120px) }
body:has(.hero--image) .pricing .section-header {
  margin-bottom:30px
}

body:has(.hero--image) .pricing .section-header h2 { margin-top:12px }
body:has(.hero--image) .pricing .section-header>p {
  color:var(--home-muted);
  font-size:16px;
  line-height:1.45
}

body:has(.hero--image) .pricing .pricing-grid { gap:18px; align-items:stretch }
body:has(.hero--image) .pricing .price-card {
  display:flex;
  min-height:438px;
  flex-direction:column;
  padding:clamp(22px,2.3vw,32px);
  border:1px solid var(--home-line);
  border-radius:14px;
  background:#fff
}

body:has(.hero--image) .pricing .price-card.featured {
  border-color:rgba(104,113,92,.24);
  background:var(--home-sage-wash)
}

body:has(.hero--image) .pricing .price-card>div { min-height:220px }
body:has(.hero--image) .pricing .price-card h3 {
  color:var(--home-muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.075em
}

body:has(.hero--image) .pricing .price {
  margin-top:26px;
  font-size:clamp(34px,3vw,44px);
  line-height:1;
  letter-spacing:-.045em
}

body:has(.hero--image) .pricing .price span { font-size:15px }
body:has(.hero--image) .pricing .price-description,
body:has(.hero--image) .pricing .featured .price-description {
  max-width:390px;
  margin-top:14px;
  color:var(--home-muted);
  font-size:16px;
  line-height:1.48
}

body:has(.hero--image) .pricing .price-card ul {
  flex:1;
  margin:16px 0 24px
}

body:has(.hero--image) .pricing .price-card li {
  padding:11px 0;
  border-color:var(--home-line);
  font-size:15px;
  line-height:1.4
}

body:has(.hero--image) .pricing-grid .price-card:nth-child(n+2) li:last-child {
  display:inline-flex;
  width:max-content;
  margin-top:9px;
  padding:8px 13px;
  border:1px solid rgba(104,113,92,.25);
  border-radius:999px;
  background:rgba(255,255,255,.44);
  color:#41483A;
  font-size:14px;
  font-weight:500
}

body:has(.hero--image) .pricing .price-action { min-height:46px; font-size:12px }
body:has(.hero--image) .pricing .pricing-notes {
  gap:18px;
  margin-top:22px;
  padding-top:16px;
  border-color:var(--home-line)
}

body:has(.hero--image) .pricing .pricing-notes p {
  color:var(--home-muted);
  font-size:14px;
  line-height:1.5
}

body:has(.hero--image) .monthly { margin-top:clamp(84px,8vw,118px) }
body:has(.hero--image) .monthly .section-header {
  display:block;
  margin-bottom:28px
}

body:has(.hero--image) .monthly .section-header h2 { margin-top:12px }
body:has(.hero--image) .monthly .section-header>p {
  max-width:760px;
  margin-top:14px;
  color:var(--home-muted);
  font-size:16px;
  line-height:1.5
}

body:has(.hero--image) .monthly .month-grid {
  gap:18px;
  border:0
}

body:has(.hero--image) .monthly .month-card {
  min-height:0;
  gap:20px;
  padding:24px;
  border:1px solid var(--home-line);
  border-radius:14px;
  background:var(--home-soft)
}

body:has(.hero--image) .monthly .month-card h3 {
  color:var(--home-sage);
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em
}

body:has(.hero--image) .monthly .month-card li {
  padding:11px 0;
  border-color:var(--home-line);
  font-size:15px;
  line-height:1.4
}

body:has(.hero--image) .monthly .monthly-closing {
  max-width:820px;
  margin-top:18px;
  color:var(--home-muted);
  font-size:14px;
  line-height:1.5
}

body:has(.hero--image) .basics { margin-top:clamp(72px,7vw,100px) }
body:has(.hero--image) .basics .section-header {
  display:block;
  margin-bottom:20px
}

body:has(.hero--image) .basics .section-header h2 { margin-top:12px }
body:has(.hero--image) .basics .basics-grid { column-gap:clamp(32px,5vw,72px) }
body:has(.hero--image) .basics .basics-grid article {
  min-height:88px;
  gap:20px;
  padding:18px 0;
  border-color:var(--home-line)
}

body:has(.hero--image) .basics .basics-grid article>span { color:var(--home-sage); font-size:13px }
body:has(.hero--image) .basics .basics-grid article>div { gap:8px }
body:has(.hero--image) .basics .basics-grid h3 { font-size:13px; letter-spacing:.055em }
body:has(.hero--image) .basics .basics-grid p {
  color:var(--home-muted);
  font-size:15px;
  line-height:1.45
}

body:has(.hero--image) .final-cta {
  margin-top:clamp(88px,9vw,128px);
  padding-top:36px;
  padding-bottom:clamp(72px,7vw,100px);
  border-top:1px solid var(--home-line)
}

body:has(.hero--image) .final-cta h2 {
  max-width:900px;
  font-size:clamp(46px,5vw,72px)
}

body:has(.hero--image) .final-cta>div { gap:18px }
body:has(.hero--image) .final-cta>div>p {
  max-width:470px;
  color:var(--home-muted);
  font-size:16px;
  line-height:1.5
}

body:has(.hero--image) .final-cta .email-link { font-size:14px }
body:has(.hero--image) .footer { margin-top:0 }
body:has(.hero--image) .footer-panel {
  padding:clamp(28px,3vw,44px) clamp(26px,3vw,44px) 24px;
  border-radius:14px
}

body:has(.hero--image) .footer-brand-row>img { width:min(66%,560px) }
body:has(.hero--image) .footer-brand-row a { width:112px; height:112px; margin-right:0 }
body:has(.hero--image) .footer-main { margin-top:54px }
body:has(.hero--image) .footer-description,
body:has(.hero--image) .footer-column a,
body:has(.hero--image) .footer-column span { font-size:14px; line-height:1.5 }
body:has(.hero--image) .footer-column { gap:12px }
body:has(.hero--image) .footer-column h2 { font-size:12px }
body:has(.hero--image) .footer-bottom { margin-top:52px }
body:has(.hero--image) .footer-legal,
body:has(.hero--image) .footer-language { gap:20px; font-size:12px }

@media(max-width:1100px) {
  body:has(.hero--image) .hero--image .hero-copy { width:min(51%,600px) }
  body:has(.hero--image) .hero--image .hero-copy .hero-lead { font-size:clamp(44px,5vw,56px) }
  body:has(.hero--image) .intro-main { grid-template-columns:minmax(0,1fr) minmax(250px,.8fr) }
  body:has(.hero--image) .capabilities { grid-template-columns:repeat(2,minmax(0,1fr)) }
  body:has(.hero--image) .capability-card { aspect-ratio:1.1/1 }
  body:has(.hero--image) .pricing .price-card { min-height:460px; padding:22px }
  body:has(.hero--image) .pricing .price-card>div { min-height:245px }
  body:has(.hero--image) .footer-panel { padding-inline:28px }
}

@media(max-width:900px) {
  body:has(.hero--image) .pricing .pricing-grid { grid-template-columns:1fr; gap:14px }
  body:has(.hero--image) .pricing .price-card {
    min-height:0;
    padding:24px
  }
  body:has(.hero--image) .pricing .price-card>div { min-height:0 }
  body:has(.hero--image) .pricing .price { margin-top:18px }
  body:has(.hero--image) .pricing .price-card ul { margin:18px 0 20px }
  body:has(.hero--image) .pricing .price-action { margin-top:0 }
  body:has(.hero--image) .monthly .month-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
  body:has(.hero--image) .monthly .month-card { padding:18px }
}

@media(max-width:760px) {
  body:has(.hero--image) .shell,
  body:has(.hero--image) .hero.shell,
  body:has(.hero--image) .intro.shell,
  body:has(.hero--image) .capabilities.shell,
  body:has(.hero--image) .services.shell { width:calc(100% - 32px) }

  body:has(.hero--image) .hero-panel,
  body:has(.hero--image) .hero-top { min-height:clamp(560px,145vw,680px) }
  body:has(.hero--image) .hero-panel { border-radius:12px }
  body:has(.hero--image) .hero-navigation .brand-small { top:18px; width:136px }
  body:has(.hero--image) .hero-navigation .menu-toggle {
    top:9px;
    right:12px;
    width:44px;
    height:44px
  }

  body:has(.hero--image) .hero-navigation .mobile-nav:not([hidden]) {
    top:64px;
    right:12px;
    left:12px;
    border-radius:12px
  }

  body:has(.hero--image) .hero--image .hero-media img {
    object-fit:contain;
    object-position:right top;
    transform:scale(1.75);
    transform-origin:right top
  }

  body:has(.hero--image) .hero--image .hero-top {
    min-height:clamp(560px,145vw,680px);
    padding:24px 20px 28px
  }

  body:has(.hero--image) .hero--image .hero-copy {
    width:74%;
    max-width:460px
  }

  body:has(.hero--image) .hero--image .hero-copy .hero-lead {
    max-width:460px;
    font-size:clamp(39px,8.7vw,52px);
    line-height:.99;
    margin-bottom:15px
  }

  body:has(.hero--image) .hero--image .hero-copy p { font-size:11px; line-height:1.55 }
  body:has(.hero--image) .hero--image .hero-service-line span { margin-inline:4px }
  body:has(.hero--image) .hero--image .hero-copy .cta { margin-top:18px }
  body:has(.hero--image) .intro.section-space,
  body:has(.hero--image) .intro { margin-top:38px }
  body:has(.hero--image) .intro-main { grid-template-columns:1fr; gap:12px }
  body:has(.hero--image) .intro h2 { font-size:clamp(34px,8vw,42px) }
  body:has(.hero--image) .intro-main p { font-size:15px }
  body:has(.hero--image) .capabilities {
    width:calc(100% - 32px);
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:24px
  }

  body:has(.hero--image) .capability-card { aspect-ratio:4/5; border-radius:12px }
  body:has(.hero--image) .capability-content { padding:12px }
  body:has(.hero--image) .capability-content h3 { font-size:13px }
  body:has(.hero--image) .capability-content p { max-width:100%; font-size:14px; line-height:1.32 }
  body:has(.hero--image) .services.section-space { margin-top:56px }
  body:has(.hero--image) .services .dark-panel { padding:24px 18px 18px }
  body:has(.hero--image) .services .section-header {
    display:block;
    margin-bottom:18px
  }

  body:has(.hero--image) .services .section-header h2 { font-size:36px }
  body:has(.hero--image) .services .section-header>p { margin-top:12px; font-size:15px }
  body:has(.hero--image) .services .service-row summary {
    grid-template-columns:32px minmax(0,1fr) 32px;
    gap:9px;
    padding:17px 0
  }

  body:has(.hero--image) .services .service-title { font-size:18px }
  body:has(.hero--image) .services .service-summary { font-size:14px; line-height:1.45 }
  body:has(.hero--image) .services .service-detail {
    grid-template-columns:1fr;
    gap:14px;
    margin-left:41px;
    padding-bottom:20px
  }

  body:has(.hero--image) .services .service-tags { grid-column:1; gap:8px }
  body:has(.hero--image) .services .service-tags span { min-height:32px; padding:7px 11px; font-size:11px }
  body:has(.hero--image) .services .service-visuals { grid-column:1; gap:9px }
  body:has(.hero--image) .services .service-visuals .media-frame { height:clamp(120px,32vw,185px) }
  body:has(.hero--image) .directions,
  body:has(.hero--image) .process,
  body:has(.hero--image) .pricing,
  body:has(.hero--image) .monthly,
  body:has(.hero--image) .basics { margin-top:68px }

  body:has(.hero--image) .directions .section-header,
  body:has(.hero--image) .process .section-header,
  body:has(.hero--image) .pricing .section-header,
  body:has(.hero--image) .monthly .section-header,
  body:has(.hero--image) .basics .section-header { margin-bottom:21px }

  body:has(.hero--image) .directions .section-header h2,
  body:has(.hero--image) .process .section-header h2,
  body:has(.hero--image) .pricing .section-header h2,
  body:has(.hero--image) .monthly .section-header h2,
  body:has(.hero--image) .basics .section-header h2 { font-size:clamp(34px,8vw,42px) }

  body:has(.hero--image) .directions .section-header>p,
  body:has(.hero--image) .process .section-header>p,
  body:has(.hero--image) .pricing .section-header>p,
  body:has(.hero--image) .monthly .section-header>p { margin-top:12px; font-size:15px }
  body:has(.hero--image) .directions .direction-tabs { gap:20px; margin-bottom:16px }
  body:has(.hero--image) .directions .direction-tabs button { font-size:12px }
  body:has(.hero--image) .directions .direction-gallery-grid,
  body:has(.hero--image) .directions .direction-media-grid { gap:9px }
  body:has(.hero--image) .process .process-grid { grid-template-columns:1fr; gap:0 }
  body:has(.hero--image) .process .process-step,
  body:has(.hero--image) .process .process-step:last-child {
    margin:0;
    padding:17px 0 18px
  }

  body:has(.hero--image) .process .process-graphic { padding:0; gap:15px }
  body:has(.hero--image) .process .process-body { margin:9px 0 0 38px }
  body:has(.hero--image) .process .process-body p { max-width:460px; font-size:15px }
  body:has(.hero--image) .pricing .price-card { padding:22px }
  body:has(.hero--image) .pricing .price { font-size:38px }
  body:has(.hero--image) .pricing .price-description,
  body:has(.hero--image) .pricing .featured .price-description { max-width:none; font-size:15px }
  body:has(.hero--image) .pricing .price-card li { font-size:15px }
  body:has(.hero--image) .pricing .pricing-notes { flex-direction:column; gap:8px; margin-top:18px }
  body:has(.hero--image) .pricing .pricing-notes p { font-size:14px }
  body:has(.hero--image) .monthly .month-grid { grid-template-columns:1fr; gap:10px }
  body:has(.hero--image) .monthly .month-card { gap:14px; padding:18px }
  body:has(.hero--image) .monthly .month-card li { font-size:15px }
  body:has(.hero--image) .monthly .monthly-closing { font-size:14px }
  body:has(.hero--image) .basics .basics-grid { grid-template-columns:1fr; column-gap:0 }
  body:has(.hero--image) .basics .basics-grid article { min-height:76px; gap:14px; padding:15px 0 }
  body:has(.hero--image) .basics .basics-grid h3 { font-size:12px }
  body:has(.hero--image) .basics .basics-grid p { font-size:15px }
  body:has(.hero--image) .final-cta {
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
    margin-top:76px;
    padding-top:26px;
    padding-bottom:62px
  }

  body:has(.hero--image) .final-cta h2 { font-size:clamp(42px,10vw,56px) }
  body:has(.hero--image) .final-cta>div { gap:15px }
  body:has(.hero--image) .final-cta>div>p { font-size:15px }
  body:has(.hero--image) .footer-panel { padding:28px 20px 22px }
  body:has(.hero--image) .footer-brand-row>img { width:calc(100% - 92px); max-width:460px }
  body:has(.hero--image) .footer-brand-row a { width:76px; height:76px }
  body:has(.hero--image) .footer-main { margin-top:40px; gap:26px 18px }
  body:has(.hero--image) .footer-description,
  body:has(.hero--image) .footer-column a,
  body:has(.hero--image) .footer-column span { font-size:13px }
  body:has(.hero--image) .footer-bottom { margin-top:38px; gap:18px; align-items:flex-start }
  body:has(.hero--image) .footer-legal,
  body:has(.hero--image) .footer-language { gap:13px; font-size:11px }
}

@media(max-width:380px) {
  body:has(.hero--image) .hero--image .hero-copy { width:80% }
  body:has(.hero--image) .hero--image .hero-copy .hero-lead { font-size:38px }
  body:has(.hero--image) .capability-content { padding:10px }
  body:has(.hero--image) .capability-content p { font-size:13px }
  body:has(.hero--image) .services .service-detail { margin-left:0 }
  body:has(.hero--image) .footer-legal,
  body:has(.hero--image) .footer-language { gap:9px }
}

/* Keep the centered mobile wordmark clear of the hero subject. */
@media(max-width:760px) {
  body:has(.hero--image) .hero--image .hero-media img {
    transform:translateY(46px) scale(1.42)
  }
}

@media(max-width:760px) {
  body:has(.hero--image) .monthly .month-grid {
    display:grid;
    overflow:visible;
    padding-bottom:0;
    scroll-snap-type:none
  }
}
@media(max-width:760px) {
  body:has(.hero--image) .monthly .month-grid {
    margin-right:0;
    padding-right:0
  }
}
@media(max-width:380px) {
  body:has(.hero--image) .directions .direction-tabs { gap:10px }
  body:has(.hero--image) .directions .direction-tabs button { font-size:11px }
}

@media(max-width:760px) {
  body:has(.hero--image) .hero--image .hero-media img {
    transform:translateY(42px) scale(1.18)
  }
}

@media(max-width:380px) {
  body:has(.hero--image) .hero--image .hero-media img {
    transform:translateY(40px) scale(1.05)
  }
}

body:has(.hero--image) .capability-video .capability-content h3 {
  color:#fff
}

body:has(.hero--image) .capability-video .capability-content h3 {
  text-shadow:0 1px 6px rgba(0,0,0,.48)
}

/* Homepage section composition: tighter portrait cards with a right-aligned media pair. */
body:has(.hero--image) .capabilities {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1vw,14px);
  margin-top:30px
}

body:has(.hero--image) .capability-card { aspect-ratio:3/5 }

@media(max-width:1100px) {
  body:has(.hero--image) .capabilities { grid-template-columns:repeat(4,minmax(0,1fr)) }
  body:has(.hero--image) .capability-card { aspect-ratio:3/5 }
}

@media(max-width:760px) {
  body:has(.hero--image) .capabilities {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  body:has(.hero--image) .capability-card { aspect-ratio:3/4 }
}

@media(max-width:480px) {
  body:has(.hero--image) .capabilities { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

body:has(.hero--image) .services .service-visuals {
  gap:14px;
  max-width:600px;
  justify-self:end
}

body:has(.hero--image) .services .service-visuals .media-frame {
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  justify-self:stretch;
  align-self:start;
  overflow:hidden
}

body:has(.hero--image) .services .service-visuals .media-frame img,
body:has(.hero--image) .services .service-visuals .media-frame video {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}

body:has(.hero--image) .directions .direction-gallery-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1vw,14px)
}

body:has(.hero--image) .directions .direction-gallery-grid img {
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center
}

@media(max-width:760px) {
  body:has(.hero--image) .directions .direction-gallery-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  body:has(.hero--image) .services .service-visuals { gap:10px }
}

/* Mobile homepage refinement: tighter hero, touch carousels and a unified type scale. */
@media(max-width:760px) {
  body:has(.hero--image) .hero-panel,
  body:has(.hero--image) .hero-top,
  body:has(.hero--image) .hero--image .hero-top {
    min-height:clamp(480px,123vw,570px)
  }

  body:has(.hero--image) .hero--image .hero-media img {
    object-position:right top;
    transform:translateY(48px) scale(1.28);
    transform-origin:right top
  }

  body:has(.hero--image) .hero--image .hero-copy {
    width:100%;
    max-width:460px
  }

  body:has(.hero--image) .hero--image .hero-copy .hero-lead {
    max-width:330px;
    margin-bottom:12px;
    font-size:clamp(34px,8.8vw,38px);
    line-height:1;
    text-wrap:balance
  }

  body:has(.hero--image) .hero--image .hero-copy p {
    width:100%;
    font-size:clamp(7px,2.05vw,8px);
    letter-spacing:.055em;
    white-space:nowrap
  }

  body:has(.hero--image) .hero--image .hero-service-line span { margin-inline:3px }
  body:has(.hero--image) .hero--image .hero-copy .cta {
    min-height:40px;
    margin-top:14px;
    padding-inline:17px;
    font-size:10px
  }

  body:has(.hero--image) .intro.section-space,
  body:has(.hero--image) .intro { margin-top:28px }
  body:has(.hero--image) .intro-main { gap:7px }
  body:has(.hero--image) .intro h2 {
    max-width:360px;
    font-size:clamp(29px,7.2vw,34px);
    line-height:1.02
  }
  body:has(.hero--image) .intro-main p { font-size:14px; line-height:1.4 }

  body:has(.hero--image) .capabilities {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:78%;
    grid-template-columns:none;
    width:calc(100% - 32px);
    gap:10px;
    margin-top:16px;
    padding-bottom:4px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none
  }
  body:has(.hero--image) .capabilities::-webkit-scrollbar { display:none }
  body:has(.hero--image) .capability-card {
    aspect-ratio:4/5;
    border-radius:12px;
    scroll-snap-align:start
  }
  body:has(.hero--image) .capability-content { padding:11px }
  body:has(.hero--image) .capability-content h3 { font-size:12px }
  body:has(.hero--image) .capability-content p { font-size:12px; line-height:1.3 }

  body:has(.hero--image) .services.section-space { margin-top:48px }
  body:has(.hero--image) .services .dark-panel { padding:20px 16px 16px }
  body:has(.hero--image) .services .section-header { margin-bottom:14px }
  body:has(.hero--image) .services .section-header h2 { font-size:31px }
  body:has(.hero--image) .services .section-header>p { margin-top:8px; font-size:14px }
  body:has(.hero--image) .services .service-row summary {
    grid-template-columns:28px minmax(0,1fr) 28px;
    gap:8px;
    padding:14px 0
  }
  body:has(.hero--image) .services .service-title { font-size:16px }
  body:has(.hero--image) .services .service-summary { margin-top:5px; font-size:13px; line-height:1.4 }
  body:has(.hero--image) .services .service-icon { width:28px; height:28px }
  body:has(.hero--image) .services .service-icon:before,
  body:has(.hero--image) .services .service-icon:after { top:13px }
  body:has(.hero--image) .services .service-detail { gap:12px; padding-bottom:16px }
  body:has(.hero--image) .services .service-tags span { min-height:30px; padding:6px 10px; font-size:10px }
  body:has(.hero--image) .services .service-visuals { gap:8px }
  body:has(.hero--image) .services .service-visuals .media-frame { height:auto; aspect-ratio:3/4 }

  body:has(.hero--image) .directions,
  body:has(.hero--image) .process,
  body:has(.hero--image) .pricing,
  body:has(.hero--image) .monthly,
  body:has(.hero--image) .basics { margin-top:56px }
  body:has(.hero--image) .directions .section-header,
  body:has(.hero--image) .process .section-header,
  body:has(.hero--image) .pricing .section-header,
  body:has(.hero--image) .monthly .section-header,
  body:has(.hero--image) .basics .section-header { margin-bottom:16px }
  body:has(.hero--image) .directions .section-header h2,
  body:has(.hero--image) .process .section-header h2,
  body:has(.hero--image) .pricing .section-header h2,
  body:has(.hero--image) .monthly .section-header h2,
  body:has(.hero--image) .basics .section-header h2 { font-size:clamp(30px,7.5vw,35px) }
  body:has(.hero--image) .directions .section-header>p,
  body:has(.hero--image) .process .section-header>p,
  body:has(.hero--image) .pricing .section-header>p,
  body:has(.hero--image) .monthly .section-header>p { margin-top:8px; font-size:14px; line-height:1.45 }
  body:has(.hero--image) .directions .direction-tabs { gap:clamp(10px,3vw,18px); margin-bottom:12px }
  body:has(.hero--image) .directions .direction-tabs button { padding-bottom:8px; font-size:11px }
  body:has(.hero--image) .directions .direction-gallery-grid,
  body:has(.hero--image) .directions .direction-media-grid { gap:8px }

  body:has(.hero--image) .process .process-body p,
  body:has(.hero--image) .pricing .price-description,
  body:has(.hero--image) .pricing .featured .price-description,
  body:has(.hero--image) .pricing .price-card li,
  body:has(.hero--image) .basics .basics-grid p { font-size:14px; line-height:1.45 }
  body:has(.hero--image) .pricing .price-action,
  body:has(.hero--image) .final-cta .cta { min-height:42px; padding-inline:17px }

  body:has(.hero--image) .monthly .month-grid {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:78%;
    grid-template-columns:none;
    gap:10px;
    margin-right:-16px;
    padding:0 16px 6px 0;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none
  }
  body:has(.hero--image) .monthly .month-grid::-webkit-scrollbar { display:none }
  body:has(.hero--image) .monthly .month-card {
    gap:12px;
    padding:16px;
    scroll-snap-align:start
  }
  body:has(.hero--image) .monthly .month-card h3 { font-size:12px }
  body:has(.hero--image) .monthly .month-card li { padding:9px 0; font-size:14px; line-height:1.4 }
  body:has(.hero--image) .monthly .monthly-closing { font-size:13px }

  body:has(.hero--image) .final-cta {
    align-items:center;
    gap:14px;
    margin-top:58px;
    padding-top:22px;
    padding-bottom:44px;
    text-align:center
  }
  body:has(.hero--image) .final-cta h2 {
    max-width:540px;
    font-size:clamp(38px,9vw,46px);
    line-height:.98;
    text-wrap:balance
  }
  body:has(.hero--image) .final-cta>div {
    width:100%;
    align-items:center;
    gap:12px
  }
  body:has(.hero--image) .final-cta>div>p { font-size:14px; line-height:1.45; text-align:center }
  body:has(.hero--image) .final-cta .cta,
  body:has(.hero--image) .final-cta .email-link { align-self:center }
  body:has(.hero--image) .final-cta .email-link { font-size:13px }
}

@media(max-width:380px) {
  body:has(.hero--image) .hero--image .hero-media img { transform:translateY(44px) scale(1.12) }
  body:has(.hero--image) .hero--image .hero-copy .hero-lead { font-size:34px }
  body:has(.hero--image) .hero--image .hero-copy p { font-size:7px; letter-spacing:.035em }
  body:has(.hero--image) .capabilities,
  body:has(.hero--image) .monthly .month-grid { grid-auto-columns:82% }
  body:has(.hero--image) .directions .direction-tabs { gap:9px }
  body:has(.hero--image) .directions .direction-tabs button { font-size:10px }
}

body:has(.hero--image) .hero-media picture {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%
}

@media(max-width:480px) {
  body:has(.hero--image) .hero--image .hero-media img {
    object-fit:cover;
    object-position:right center;
    transform:none
  }

  body:has(.hero--image) .hero--image .hero-panel,
  body:has(.hero--image) .hero--image .hero-top { min-height:clamp(500px,128vw,560px) }
  body:has(.hero--image) .hero--image .hero-top { padding:20px 18px 22px }
  body:has(.hero--image) .hero--image .hero-copy { width:56%; max-width:none }
  body:has(.hero--image) .hero--image .hero-copy .hero-lead {
    max-width:none;
    margin-bottom:12px;
    font-size:clamp(27px,7.2vw,30px);
    line-height:.98
  }
  body:has(.hero--image) .hero--image .hero-copy p {
    width:100%;
    font-size:6.5px;
    letter-spacing:0;
    white-space:nowrap
  }
  body:has(.hero--image) .hero--image .hero-service-line span { margin-inline:1px }
}

/* Visual Directions: make the selected tab and gallery change easier to follow. */
body:has(.hero--image) .directions .direction-tabs button {
  transition:color 220ms ease,opacity 220ms ease
}
body:has(.hero--image) .directions .direction-tabs button[aria-selected="true"] {
  color:var(--home-ink);
}
body:has(.hero--image) .directions .direction-tabs button:after {
  width:100%;
  height:2px;
  background:var(--home-sage);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 360ms cubic-bezier(.22,.75,.25,1)
}
body:has(.hero--image) .directions .direction-tabs button[aria-selected="true"]:after {
  transform:scaleX(1)
}
body:has(.hero--image) .directions .direction-gallery-grid img {
  animation:direction-image-in 520ms cubic-bezier(.2,.75,.2,1) both
}
body:has(.hero--image) .directions .direction-gallery-grid img:nth-child(2) { animation-delay:65ms }
body:has(.hero--image) .directions .direction-gallery-grid img:nth-child(3) { animation-delay:130ms }
body:has(.hero--image) .directions .direction-gallery-grid img:nth-child(4) { animation-delay:195ms }
@keyframes direction-image-in {
  from { opacity:0; transform:translateY(14px) scale(.985) }
  to { opacity:1; transform:translateY(0) scale(1) }
}

/* Smooth media reveal: keep unloaded service assets on the page's light surface. */
body:has(.hero--image) .services .service-visuals .media-frame {
  background:var(--home-soft)
}
body:has(.hero--image) .services .service-visuals img {
  opacity:0;
  transition:opacity 220ms ease
}
body:has(.hero--image) .services .service-visuals img.is-ready { opacity:1 }
body:has(.hero--image) .services .service-row[open]>.service-detail {
  animation:service-detail-in 300ms cubic-bezier(.2,.7,.25,1) both
}
body:has(.hero--image) .services .service-row summary {
  transition:padding 220ms ease
}
@keyframes service-detail-in {
  from { opacity:0; transform:translateY(7px) }
  to { opacity:1; transform:translateY(0) }
}

/* Change Visual Directions only after the next image set has decoded. */
body:has(.hero--image) #direction-gallery .direction-gallery-grid {
  opacity:1;
  transform:translateY(0);
  transition:opacity 180ms ease,transform 180ms ease
}
body:has(.hero--image) #direction-gallery.is-loading .direction-gallery-grid {
  opacity:1;
  transform:none
}
body:has(.hero--image) .directions .direction-gallery-grid img {
  animation:none
}
body:has(.hero--image) .directions .direction-gallery-grid img.is-entering {
  animation:direction-image-in 380ms cubic-bezier(.2,.75,.2,1) both
}
body:has(.hero--image) .directions .direction-gallery-grid img:nth-child(n) {
  animation-delay:0ms
}

/* Keep the two-step enquiry usable without making mobile panels feel oversized. */
@media(max-width:760px) {
  .enquiry-overlay { padding:8px }
  .enquiry-modal {
    width:100%;
    max-height:calc(100dvh - 16px);
    overflow-y:auto;
    padding:16px 16px 18px;
    border-radius:16px
  }
  .enquiry-topline { margin-bottom:16px }
  .enquiry-step h2,.enquiry-success h2 {
    font-size:clamp(29px,8vw,36px);
    line-height:1.02;
    margin-bottom:18px
  }
  .enquiry-questions,.enquiry-details-grid { gap:16px }
  .enquiry-options { gap:7px }
  .enquiry-options label span {
    min-height:40px;
    padding:8px 11px;
    font-size:11px
  }
  .enquiry-actions { margin-top:18px }
  .enquiry-field input,.enquiry-field textarea { font-size:16px }
}

@media(max-width:380px) {
  .enquiry-modal { padding-inline:14px }
  .enquiry-options label span { padding-inline:9px }
}