/* UrbanKriti service ecosystem — drawing, assembly, transformation and scale. */
:root {
  --svc-ivory: #f5efe4;
  --svc-paper: #fbf7ef;
  --svc-sand: #e7dac7;
  --svc-stone: #c8b7a1;
  --svc-brown: #5c3a21;
  --svc-walnut: #31201d;
  --svc-copper: #a96028;
  --svc-line: rgba(92, 58, 33, .18);
  --svc-line-dark: rgba(247, 239, 225, .18);
  --svc-frame: min(1420px, calc(100vw - 2.5rem));

  /* Explicit stacking order — the header/dropdown are shared chrome and
     already have their own working z-index in global.css; these cover the
     Services-only floating pieces that used to fight for space. */
  --z-hero-content: 10;
  --z-rail: 60;
  --z-dropdown: 1100;
  --z-progress: 5000;
  --z-transition: 9000;
  --z-cursor: 10000;
}
html { background: var(--svc-paper); }
body.service-experience { background: var(--svc-paper); color: var(--svc-walnut); overflow-x: clip; }
.service-experience h1, .service-experience h2, .service-experience h3 { text-wrap: balance; }
.service-experience p { text-wrap: pretty; }
.service-experience ::selection { color: var(--svc-paper); background: var(--svc-copper); }
.service-frame { width: var(--svc-frame); margin-inline: auto; }
/* Layout-aware architectural rules. Full rules are reserved for sections
   without adjacent artwork; contained rules inherit the width of their copy
   column and can never extend into a sibling image or diagram cell. */
.service-rule--full { width: 100%; }
.service-rule--contained { width: min(100%, var(--rule-contained-width, 42rem)); max-width: 100%; }
.service-main { position: relative; z-index: 1; }
.service-main section { position: relative; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 10000; padding: .7rem 1rem; color: var(--svc-paper); background: var(--svc-walnut); transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
.service-experience :focus-visible { outline: 1px solid var(--svc-copper); outline-offset: 5px; }
/* The Services dropdown intentionally uses the exact same .hdr-sub styling
   as every other page's nav dropdown (see src/shared/components/header/header.js
   and global.css) — no numbered rows, no active dot, no dedicated
   .service-dropdown card treatment, and no hero movement on open. A more
   "architectural sheet index" version of this was tried and reverted; it
   read as too heavy and too separate from normal site navigation. Only the
   theme-ink override below remains, since Construction's dark hero needs
   the header ink to stay light regardless of scroll position. */
/* All five Services heroes are light now (client feedback 2026-10-01: one
   shared light hero on every service page), so the header ink stays dark on
   every Services page, Construction included. */
body.service-experience .site-header:not(.is-stuck) { --hdr-ink: var(--uk-umber); --hdr-mark-dark: 1; }
/* Header-01 reskin: hidden site-wide. This is the Services-family twin of
   .uk-page-progress — a 2px fixed bar pinned to the top of the viewport at
   z-index 5000, above the header, with an ochre fill. It read as a red/orange
   rule stuck to the header and as a loading indicator the site does not
   otherwise have. Hidden rather than removed, so services.shared.js and its
   --service-progress writer are left exactly as they are. */
.service-progress { display: none !important; position: fixed; inset: 0 0 auto; z-index: var(--z-progress); height: 2px; background: rgba(92,58,33,.08); pointer-events: none; }
.service-progress i { display: block; height: 100%; width: calc(var(--service-progress, 0) * 100%); background: var(--svc-copper); transform-origin: left; }
/* The pause-triggered "SERVICES / 00 · Overview" label used to pop up right
   at the top edge of the viewport — directly over the header/logo, and
   redundant with .sheet-meta below. The thin progress line stays; the text
   doesn't. */
.service-progress span, .service-progress b { display: none; }
/* Hidden on every Services page (not just Overview) — a fixed right-side
   index duplicating the header's own Services dropdown read as clutter
   competing for space with hero content. Kept in the DOM (still built by
   services-header.js) and in CSS rather than ripped out of the build
   pipeline, since the ask here is a visual cleanup, not a routing change. */
.service-rail { display: none; position: fixed; z-index: var(--z-rail); right: 1.25rem; top: 50%; width: 172px; padding: .4rem .85rem; border: 1px solid var(--svc-line); background: var(--svc-paper); box-shadow: 0 10px 30px rgba(49,32,29,.14); transform: translateY(-50%); }
.service-rail a { display: grid; grid-template-columns: 1.4rem 1fr .4rem; align-items: center; gap: .45rem; min-height: 2.7rem; color: color-mix(in srgb, var(--svc-walnut) 60%, transparent); font-size: 0.76rem; line-height: 1.2; letter-spacing: 0; }
.service-rail a b { font-weight: 500; }
.service-rail a i { width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.service-rail a[aria-current="page"] { color: var(--svc-copper); }
.service-rail a[aria-current="page"] i { background: currentColor; }
.architectural-grid { background-color: var(--svc-paper); background-image: linear-gradient(var(--svc-line) 1px, transparent 1px), linear-gradient(90deg, var(--svc-line) 1px, transparent 1px); background-size: min(7vw, 96px) min(7vw, 96px); }
.architectural-grid::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--svc-paper); opacity: .72; }
.architectural-grid > * { position: relative; z-index: 1; }
/* The old Overview hero rules were retired 2026-10-01: every Services page
   now opens on .ovh (Overview) or the shared .svc-hero below. */
.service-intro { padding: clamp(6rem, 12vw, 11rem) 0; }
.editorial-columns { display: grid; gap: 2.5rem; }
.editorial-columns h2 { max-width: 15ch; font-size: calc(clamp(2.6rem, 5.6vw, 5.6rem) * var(--k-display)); line-height: 1.05; }
.editorial-columns > div:last-child { max-width: 42rem; }
.editorial-columns p + p { margin-top: 1.35rem; }
.editorial-columns strong { font-weight: 500; color: var(--svc-copper); }
.section-heading { display: grid; gap: 1rem; max-width: 60rem; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.section-heading h2 { font-size: calc(clamp(2.8rem, 6vw, 6rem) * var(--k-display)); line-height: 1.05; }
.section-heading > p:last-child { max-width: 40rem; }
.project-conclusion, .case-logic, .integrated-finale { color: var(--text-on-dark); background: var(--svc-walnut); }
.framed-cta { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 4rem; min-width: min(100%, 30rem); margin-top: 4rem; padding: 1.25rem 1.5rem; color: var(--text-on-dark); letter-spacing: .01em; font-size: 0.9rem; }
.framed-cta::before, .framed-cta::after { content: ""; position: absolute; inset: 0; border: solid var(--svc-copper); transition: inset .22s var(--ease-out); }
.framed-cta::before { border-width: 1px 0 0 1px; clip-path: polygon(0 0, 34px 0, 34px 1px, 1px 1px, 1px 34px, 0 34px); }
.framed-cta::after { border-width: 0 1px 1px 0; clip-path: polygon(calc(100% - 34px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 34px), 100% calc(100% - 34px), 100% 100%, calc(100% - 34px) 100%); }
.framed-cta:hover::before, .framed-cta:hover::after { inset: 8px; }
.design-chapters, .planning-layers, .build-sequence { padding: clamp(6rem, 10vw, 10rem) 0; }
.design-chapter-grid, .planning-grid, .build-grid { display: grid; gap: 4rem; }
.design-sticky, .planning-sticky, .build-sticky { align-self: start; }
/* These three were formerly scroll-hijacked "vertical sequences" — a
   sticky visual pinned beside a tall stack of full-viewport-height
   articles that faded in/out as IntersectionObserver watched them pass.
   Reworked (design.js / construction-execution.js / master-planning.js)
   into plain, always-visible, click-driven content — so the copy needs no
   scroll-linked height/opacity choreography any more, just normal flow. */
.chapter-copy article, .build-steps article { margin-bottom: 2.5rem; }
.chapter-copy article:last-child, .build-steps article:last-child { margin-bottom: 0; }
.chapter-copy h2, .planning-copy-stack h2, .build-steps h2 { margin: .8rem 0 1.5rem; font-size: clamp(2.6rem, 5vw, 5rem); }
.drawing-index, .planning-scope, .coordination-line, .retain-plan, .renovation-intro { padding: clamp(6rem, 11vw, 11rem) 0; }
.drawing-index li span, .planning-scope li span { color: var(--svc-copper); font-size: .64rem; letter-spacing: .1em; }
/* Shared service closing (client feedback 2026-10-01: "make this section
   same as last sections on other services"). One pattern for Design,
   Construction & Execution, Renovations and Master Planning: a dark walnut
   band; eyebrow, heading and one short paragraph on the left; one framed 3:2
   photograph with a mono caption on the right; then the next-service row at
   the left content edge below. Each page keeps only its own words and
   image. Markup:
   section.svc-closing[data-nav-theme="dark"] > .service-frame >
     .svc-closing__grid > (.svc-closing__copy > p.eyebrow + h2 + p)
                        + (figure.svc-closing__visual > img + figcaption)
     + a.next-service
   Scoped under .service-experience where a page sets its own h2 face or
   frame width (Master Planning), so the closings stay identical. */
.svc-closing {
  padding: clamp(4.5rem, 8vw, 7.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
  overflow: clip;
  color: var(--text-on-dark);
  background: var(--svc-walnut);
}
.service-experience .svc-closing > .service-frame { width: var(--svc-frame); }
.svc-closing__grid { display: grid; gap: 2rem; align-items: start; }
.svc-closing__copy { display: grid; align-content: start; gap: 1rem; min-width: 0; }
.service-experience .svc-closing__copy h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: calc(clamp(2.5rem, 4.7vw, 4.3rem) * var(--k-display));
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.025em;
}
.svc-closing__copy > p:not(.eyebrow) {
  max-width: 34rem;
  margin: 0;
  color: color-mix(in srgb, var(--text-on-dark) 80%, transparent);
  font-size: clamp(.95rem, 1.05vw, 1.02rem);
  line-height: 1.65;
}
.svc-closing__visual {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--svc-line-dark);
  background: #2a1b18;
}
.svc-closing__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.svc-closing__visual figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: .45rem .7rem;
  color: var(--clay-on-dark);
  background: rgba(49, 32, 29, .86);
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1rem;
  letter-spacing: 0;
}
.svc-closing .next-service { margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .svc-closing__grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, .72fr); gap: 3rem; }
}

/* Closing "next service" row: one pattern on all service pages. A thin rule,
   the service name (serif) with its one line inline after it, and the arrow
   at the far right. No label: the row itself reads as navigation (round 6,
   2026-10-08, "Next service" removed). Works on light and dark closings via
   data-nav-theme. Markup: a.next-service > span.next-service__copy (strong +
   span) + i. */
.next-service {
  --ns-line: var(--svc-line);
  --ns-accent: var(--clay-on-light);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy arrow";
  align-items: center; gap: .7rem 1.5rem; margin-top: clamp(4rem, 7vw, 6.5rem); padding: clamp(1.4rem, 2.4vw, 2rem) 0;
  border-top: 1px solid var(--ns-line); border-bottom: 1px solid var(--ns-line); color: inherit; text-decoration: none;
}
[data-nav-theme="dark"] .next-service { --ns-line: var(--svc-line-dark); --ns-accent: var(--clay-on-dark); }
.next-service > .eyebrow { display: none; }
.next-service__copy { grid-area: copy; display: grid; gap: .35rem; min-width: 0; }
.next-service__copy strong { color: inherit; font-family: var(--font-display); font-size: calc(clamp(2rem, 3.4vw, 3.2rem) * var(--k-display)); font-weight: 300; line-height: 1.06; letter-spacing: -.02em; }
.next-service__copy > span { color: color-mix(in srgb, currentColor 74%, transparent); font-size: .94rem; line-height: 1.5; }
.next-service > i { grid-area: arrow; align-self: center; font-style: normal; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1; color: var(--ns-accent); transition: transform .3s ease; }
.next-service::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--svc-copper); transform: scaleX(0); transform-origin: left; transition: transform .38s ease; }
.next-service:hover::after, .next-service:focus-visible::after { transform: scaleX(1); }
.next-service:hover > i, .next-service:focus-visible > i { transform: translateX(.4rem); }
.next-service:focus-visible { outline-offset: .45rem; }
@media (min-width: 768px) {
  .next-service__copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .next-service::after, .next-service > i { transition: none; }
}
.masterplan-svg { width: 100%; height: 100%; transform: scale(var(--plan-scale, 1.8)); transform-origin: var(--plan-origin-x, 55%) var(--plan-origin-y, 52%); transition: transform .15s linear; }
.masterplan-svg path, .masterplan-svg rect, .masterplan-svg ellipse { fill: none; stroke: var(--svc-brown); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: opacity .5s, fill .5s; }
.masterplan-svg .mp-site path:first-child { stroke-width: 2; }
.masterplan-svg .mp-site path:not(:first-child) { stroke: rgba(92,58,33,.32); }
.masterplan-svg .mp-roads path:first-child { stroke-width: 8; }
.masterplan-svg .mp-roads path { stroke: rgba(92,58,33,.45); stroke-width: 4; }
.masterplan-svg .mp-buildings rect { fill: #b99170; stroke-width: 1; }
.masterplan-svg .mp-landscape ellipse, .masterplan-svg .mp-landscape path { fill: #b9b39b; opacity: .72; }
.masterplan-svg .mp-movement path { stroke: var(--svc-copper); stroke-width: 2.3; stroke-dasharray: 10 8; }
.masterplan-svg .mp-movement .pedestrian { stroke-dasharray: 3 6; }
.masterplan-svg .mp-movement .service { stroke: #765653; stroke-dasharray: 1 7; }
.masterplan-svg .mp-phases path { fill: rgba(169,96,40,.12); stroke: var(--svc-copper); stroke-dasharray: 8 8; }
.masterplan-svg text { fill: var(--svc-brown); font: 600 11px var(--font-mono); letter-spacing: .12em; }
/* Footer and transitions */
.service-footer { padding: 6rem 0 1.5rem; }
.service-footer-top { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 3rem; border-bottom: 1px solid var(--border-on-dark); }
.footer-brand { display: inline-block; }
.footer-brand img { display: block; width: auto; height: 52px; } /* the brand lockup, not the name typed in a stand-in face */
.service-footer-grid { display: grid; gap: 2.5rem; padding: 3rem 0; }
.service-footer-grid nav { display: flex; flex-direction: column; gap: .35rem; }
.service-footer-grid p, .service-footer-grid a { font-size: .9rem; }
.service-footer-base { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-on-dark); font-size: 0.884rem; letter-spacing: 0; }
/* Disabled by default — see the gate in services.shared.js's initCursor().
   Both the hidden native cursor (cursor: none, below) and the drawn
   replacement are scoped to body[data-architectural-cursor="true"], which
   no page sets today, so hovering a Services page shows the normal
   pointer with nothing floating over the header, nav or hero. */
.architectural-cursor { display: none; position: fixed; z-index: var(--z-cursor, 10000); left: 0; top: 0; width: 28px; height: 28px; pointer-events: none; color: var(--svc-paper); background: var(--svc-walnut); transform: translate3d(-100px,-100px,0); }
.architectural-cursor::before, .architectural-cursor::after { content: ""; position: absolute; background: var(--svc-paper); }
.architectural-cursor::before { width: 10px; height: 1px; left: 9px; top: 13px; }
.architectural-cursor::after { width: 1px; height: 10px; left: 13px; top: 9px; }
.architectural-cursor i { opacity: 0; }
.architectural-cursor span { position: absolute; left: 34px; top: 6px; min-width: max-content; color: var(--svc-walnut); font-size: 0.76rem; letter-spacing: 0; }
.architectural-cursor.has-label span { padding: .25rem .4rem; background: var(--svc-paper); }
.route-transition { position: fixed; z-index: var(--z-transition); inset: 0; pointer-events: none; background: var(--svc-paper); clip-path: inset(0 100% 0 0); transition: clip-path .8s cubic-bezier(.76,0,.24,1); }
/* Whole-pixel grid cells (client, 2026-10-02): 7vw cells fell on fractional
   pixels and the lines drew unevenly; fixed cells keep every line crisp. */
.route-transition::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--svc-line) 1px, transparent 1px), linear-gradient(90deg,var(--svc-line) 1px,transparent 1px); background-size: 96px 96px; background-position: 0 0; }
/* The extra frame rectangle sat just off the grid and read as broken,
   doubled lines; the transition is now the grid and the service name. */
.route-transition span { display: none; }
.route-transition > b { position: absolute; left: 10%; bottom: 8%; max-width: 80%; width: max-content; padding: .15em .35em; margin-left: -.35em; background: var(--svc-paper); color: var(--svc-copper); font-family: var(--font-display); font-style: normal; font-size: calc(clamp(2.4rem, 5vw, 5.5rem) * var(--k-display)); font-weight: 300; line-height: 1.05; letter-spacing: -.025em; }
body.is-leaving .route-transition { clip-path: inset(0); }
::view-transition-old(root) { animation: uk-old .55s ease both; }
::view-transition-new(root) { animation: uk-new .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes uk-old { to { opacity: 0; transform: scale(.985); } }
@keyframes uk-new { from { opacity: 0; clip-path: inset(0 0 0 100%); } }
@media (min-width: 768px) {
  :root { --svc-frame: min(1420px, calc(100vw - 6rem)); }
  .editorial-columns { grid-template-columns: minmax(0,1.1fr) minmax(20rem,.9fr); justify-content: space-between; gap: 6rem; }
  .service-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .service-footer-top { flex-direction: row; justify-content: space-between; align-items: end; }
}
@media (min-width: 1100px) {
  .design-chapter-grid, .planning-grid, .build-grid { grid-template-columns: minmax(0,1.15fr) minmax(24rem,.75fr); gap: 8vw; }
  .design-sticky, .planning-sticky, .build-sticky { position: sticky; top: calc(var(--hdr-safe) + 2rem); }
}
@media (pointer: fine) and (min-width: 900px) {
  body[data-architectural-cursor="true"].service-experience,
  body[data-architectural-cursor="true"] .service-experience a,
  body[data-architectural-cursor="true"] .service-experience button { cursor: none; }
  body[data-architectural-cursor="true"] .architectural-cursor { display: block; }
}
@media (max-width: 767px) {
  .design-sticky, .planning-sticky, .build-sticky { position: sticky; top: calc(var(--hdr-safe) + .5rem); z-index: 2; }
}
/* Shared service hero (client feedback 2026-10-01: "all 4 services should
   have the same format at top"). One pattern for Design, Construction &
   Execution, Renovations and Master Planning: a light paper hero, the
   heading, a ruled intro paragraph and one supporting line on the left, and
   one framed 3:2 image with a caption bar on the right. No buttons. Each
   page keeps only its own words and image; type scale, spacing, frame and
   mobile behaviour all live here. Scoped under .service-experience so the
   per-page type overrides (Master Planning sets Questrial on h1/h2) cannot
   reach it. */
.svc-hero {
  position: relative;
  padding: calc(var(--hdr-safe) + clamp(4.75rem, 12vw, 5.5rem)) 0 clamp(3.5rem, 8vw, 5rem);
  overflow: clip;
  color: var(--svc-walnut);
  background:
    radial-gradient(ellipse 60% 70% at 78% 45%, rgba(231, 218, 199, .55), transparent 70%),
    var(--svc-paper);
  border-bottom: 1px solid var(--svc-line);
}
.svc-hero__grid {
  width: var(--svc-frame);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 6vw, 3.5rem);
  align-items: center;
}
.svc-hero__copy { min-width: 0; display: grid; gap: clamp(1.25rem, 2vw, 1.6rem); max-width: 40rem; }
.service-experience .svc-hero__title {
  max-width: calc(12ch * var(--k-measure));
  margin: 0;
  color: var(--svc-walnut);
  font-family: var(--font-display);
  font-size: calc(clamp(3rem, 13vw, 4rem) * var(--k-display));
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.svc-hero__intro {
  padding-top: clamp(1rem, 1.6vw, 1.35rem);
  border-top: 1px solid var(--svc-line);
}
.svc-hero__intro p {
  max-width: 38rem;
  color: color-mix(in srgb, var(--svc-walnut) 88%, transparent);
  font-size: clamp(.95rem, 1.1vw, 1.06rem);
  line-height: 1.72;
}
.svc-hero__support {
  max-width: 36rem;
  margin: 0;
  color: #96532a; /* a deeper cut of --svc-copper: 5.4:1 on --svc-paper (the plain copper is 4.47:1) */
  font-size: clamp(.9rem, 1vw, 1rem);
  font-weight: 500;
  line-height: 1.6;
}
.svc-hero__media {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: clamp(.4rem, .7vw, .65rem);
  border: 1px solid var(--svc-line);
  background: #efe4d3;
  box-shadow: 0 1.5rem 4rem rgba(49, 32, 29, .09);
}
.svc-hero__media > img,
.svc-hero__frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.svc-hero__frame { position: relative; overflow: hidden; }
.svc-hero__caption {
  position: absolute;
  z-index: 5;
  right: clamp(.4rem, .7vw, .65rem);
  bottom: clamp(.4rem, .7vw, .65rem);
  left: clamp(.4rem, .7vw, .65rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 2.6rem;
  padding: .6rem .85rem;
  color: var(--svc-paper);
  background: rgba(49, 32, 29, .86);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.3;
  letter-spacing: 0;
}
.svc-hero__caption span { color: #e7b48e; font-family: var(--font-display); font-style: normal; font-size: 1.2em; }
.svc-hero__caption b { font-weight: 500; text-align: right; }
@media (max-width: 559px) {
  /* Mobile pass 2026-10-01: both caption parts stay (the second used to be
     hidden), at a legible size, the second wrapping under the first when
     the frame is narrow. */
  .svc-hero__caption { flex-wrap: wrap; row-gap: .2rem; min-height: 2.1rem; padding: .45rem .7rem; font-size: .76rem; letter-spacing: 0; }
  .svc-hero__caption b { text-align: left; }
  .svc-closing__visual figcaption { font-size: .9rem; }
  .route-transition > b { font-size: calc(clamp(2rem, 10vw, 2.6rem) * var(--k-display)); line-height: 1.1; letter-spacing: -.01em; }
  .route-transition::before { background-size: 48px 48px; }
}
@media (min-width: 768px) {
  .service-experience .svc-hero__title { font-size: calc(clamp(4rem, 9vw, 5.4rem) * var(--k-display)); }
}
@media (min-width: 1100px) {
  .svc-hero { padding: calc(var(--hdr-safe) + clamp(4.5rem, 6vw, 6rem)) 0 clamp(5rem, 7vw, 7rem); }
  .svc-hero__grid { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: clamp(3rem, 5vw, 6rem); }
  .service-experience .svc-hero__title { font-size: calc(clamp(4.4rem, 5.8vw, 6.1rem) * var(--k-display)); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-hero * { transition: none !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .service-experience *, .service-experience *::before, .service-experience *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .route-transition { display: none; }
}