/*
  SH / рабочие листы цифровых продуктов
  A dark workshop folio: real product captures, drawing-room coordinates,
  and lime marks used only to identify action, status, and links.
*/
:root {
  --bg: #101210;
  --surface: #171a17;
  --surface-raised: #1d211d;
  --text: #f0f1e9;
  --muted: #b4baad;
  --line: #424940;
  --lime: #c6fb4d;
  --ink: #11140f;
  --paper: #d9ddce;
  --mono: "DM Mono", "Cascadia Mono", monospace;
  --sans: "Golos Text", "Manrope", Arial, sans-serif;
  --display: "Golos Text", "Manrope", Arial, sans-serif;
  --page-gutter: clamp(20px, 5vw, 84px);
  --page-width: 1480px;
  --ease-sh: cubic-bezier(.23, 1, .32, 1);
  --motion-ui: 180ms;
  color-scheme: dark;
  scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: 88px; }
body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  background-image: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::before { content: none; }
::selection { color: var(--ink); background: var(--lime); }
:focus-visible { outline: 2px solid var(--lime) !important; outline-offset: 4px; }
a { color: inherit; text-underline-offset: .22em; }
button, input, textarea, select { font: inherit; }
img, video, svg { max-width: 100%; }
img { color: var(--muted); }
.grain { display: none !important; }
.skip-link {
  position: fixed; z-index: 100; top: 8px; left: 8px;
  padding: 10px 14px; transform: translateY(-150%);
  background: var(--lime); color: var(--ink); font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

/* The navigation behaves like the persistent title bar on a working sheet. */
.top {
  position: sticky; top: 0; z-index: 60;
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  min-height: 78px; padding: 10px var(--page-gutter);
  border-bottom: 1px solid #424940; background: rgba(16,18,16,.96);
  backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; gap: 13px; min-width: 0; }
.brand-art { width: 54px; height: 42px; }
.brand-art img { width: 100%; height: 100%; object-fit: contain; }
.brand-domain {
  max-width: 100%; color: var(--muted); font: 11px/1.25 var(--mono);
  letter-spacing: .03em; text-transform: uppercase;
}
.nav.service-nav {
  display: flex; justify-self: end; align-items: center; gap: clamp(14px, 2vw, 32px);
  min-width: 0; overflow: visible; white-space: nowrap;
}
.nav.service-nav a {
  position: relative; padding: 12px 0; color: #c6cbbf;
  font-size: 13px; font-weight: 500; text-decoration: none;
  transition: color var(--motion-ui) ease;
}
.nav.service-nav a:hover, .nav.service-nav a.active { color: var(--text); }
.nav.service-nav a.active::after {
  position: absolute; right: 0; bottom: 4px; left: 0; height: 2px;
  background: var(--lime); content: "";
}
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-main { display: flex; align-items: center; gap: 3px; }
.submenu-toggle { display: none; }
.nav-submenu {
  display: none; position: absolute; top: calc(100% + 6px); left: -18px; z-index: 80;
  min-width: 230px; padding: 8px 14px 10px; border: 1px solid var(--line);
  background: var(--surface); box-shadow: 0 18px 32px #0008;
}
.nav-dropdown:hover .nav-submenu, .nav-dropdown:focus-within .nav-submenu { display: flex; flex-direction: column; }
.nav-submenu a { padding: 9px 6px !important; font-size: 12px !important; white-space: normal; }
.nav-submenu a::after { content: none !important; }
.menu-toggle { display: none; }
.menu-toggle::before, .menu-toggle::after { content: ""; }

main { overflow: clip; }
main > section, .footer { width: min(100%, var(--page-width)); margin-inline: auto; }
.eyebrow {
  margin: 0 0 18px; color: var(--muted); font: 11px/1.5 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
}
.accent, .hero h1 em { color: var(--lime); font-style: normal; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--display); }
.lead { max-width: 62ch; color: #c7ccbf; font-size: clamp(17px, 1.55vw, 21px); line-height: 1.55; }
.button, a.button, button.button {
  display: inline-flex; min-height: 50px; align-items: center; justify-content: space-between;
  gap: 24px; padding: 12px 17px; border: 1px solid var(--lime);
  border-radius: 2px; background: var(--lime); color: var(--ink);
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: background var(--motion-ui) ease, color var(--motion-ui) ease,
    border-color var(--motion-ui) ease, transform 140ms var(--ease-sh);
}
.button:hover { background: #d7ff83; border-color: #d7ff83; color: var(--ink); }
.button:active, button:active { transform: scale(.98); }
.button-outline, a.button-outline {
  border-color: #7b8276; background: transparent; color: var(--text);
}
.button-outline:hover { border-color: var(--lime); color: var(--lime); }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 13px; font-weight: 650; text-decoration: none; }
.text-link span, .button span { display: inline-flex; transition: transform var(--motion-ui) var(--ease-sh); }
.text-link:hover { color: var(--lime); }
.text-link:hover span { transform: translate(3px,-2px); }

/* Home: one actual product is already visible at the top of the page. */
.hero {
  position: relative; display: grid; min-height: min(720px, calc(100svh - 78px));
  align-content: center; padding: 70px var(--page-gutter) 28px;
  border-bottom: 1px solid var(--line); background: #121512;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0,1.12fr) minmax(330px,.88fr);
  align-items: center; gap: clamp(36px,6vw,96px); width: 100%;
}
.hero-copy { position: relative; z-index: 2; max-width: 760px; }
.hero .eyebrow { display: none; }
.hero h1 {
  max-width: 800px; margin: 0; font-size: clamp(48px,7.2vw,104px);
  font-weight: 600; letter-spacing: -.045em; line-height: .98;
}
.hero .lead { max-width: 54ch; margin: 28px 0 0; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 31px; }
.hero-note { max-width: 260px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.hero-note a { display: inline-block; margin-bottom: 4px; color: var(--lime) !important; }
.hero-plate { position: relative; min-width: 0; margin: 0; }
.hero-plate::before {
  position: absolute; z-index: 0; top: -22px; right: -18px; bottom: 42px; left: 30px;
  border: 1px solid #5a6354; content: "";
}
.hero-plate img {
  position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 1.1;
  object-fit: cover; object-position: center top; border: 1px solid #51584d;
  background: #242922; filter: saturate(.82);
}
.hero-plate figcaption {
  position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 18px;
  padding: 12px 0 0; color: var(--muted); font: 11px/1.5 var(--mono);
}
.hero-plate figcaption a { color: var(--text); text-decoration: none; }
.hero-plate figcaption a:hover { color: var(--lime); }
.hero-meta {
  display: flex; justify-content: space-between; gap: 18px; margin-top: clamp(42px,7vh,70px);
  padding-top: 14px; border-top: 1px solid var(--line); color: #aeb4a6;
  font: 11px/1.5 var(--mono); letter-spacing: .035em;
}
.hero-meta span:last-child { color: var(--lime); }
.sales-pitch { padding: 90px var(--page-gutter) 74px; border-bottom: 1px solid var(--line); }
.sales-pitch .sales-section-head { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr); align-items: end; gap: 7vw; margin-bottom: 40px; }
.sales-section-head .eyebrow { display: none; }
.sales-section-head h2 { max-width: 900px; font-size: clamp(34px,5.1vw,68px); font-weight: 500; letter-spacing: -.04em; line-height: 1.03; }
.sales-section-head > p { max-width: 42ch; color: var(--muted); font-size: 14px; }
.sales-pitch-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.sales-pitch-grid article { min-height: 265px; display: flex; flex-direction: column; gap: 12px; padding: 25px 28px 24px 0; border: 0; border-bottom: 1px solid var(--line); background: none; }
.sales-pitch-grid article + article { padding-left: 26px; border-left: 1px solid var(--line); }
.sales-pitch-grid span { color: var(--lime); font: 11px var(--mono); }
.sales-pitch-grid h3 { margin: 20px 0 0; font-size: clamp(22px,2.5vw,31px); font-weight: 550; letter-spacing: -.025em; line-height: 1.15; }
.sales-pitch-grid p { max-width: 38ch; margin: 0; color: var(--muted); font-size: 14px; }
.sales-pitch-grid a { margin-top: auto; padding-top: 18px; color: var(--text); font-size: 12px; text-decoration-color: #737a6c; text-underline-offset: 5px; }
.sales-pitch-grid a:hover { color: var(--lime); }
.sales-pitch-bottom { margin-top: 22px; }
.sales-pitch-bottom > p { max-width: 50ch; color: var(--muted); font-size: 12px; }
.sales-pitch-bottom .button { flex: 0 0 auto; }
.section { padding: 96px var(--page-gutter); border-bottom: 1px solid var(--line); background: transparent; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 46px; }
.section-head .eyebrow { display: none; }
.section-head h2 { max-width: 850px; margin: 0; font-size: clamp(35px,5vw,66px); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; }
.project-list { border-top: 1px solid var(--line); }
.project-row {
  display: grid; grid-template-columns: 50px 1fr minmax(150px,.56fr) 28px; align-items: center;
  gap: 20px; min-height: 98px; padding: 14px 0; border-bottom: 1px solid var(--line);
  color: var(--text); text-decoration: none;
}
.project-row:hover { color: var(--lime); }
.project-num, .project-status { color: var(--muted); font: 11px var(--mono); }
.project-name { font-size: clamp(20px,2.7vw,32px); font-weight: 550; letter-spacing: -.025em; }
.project-name small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: 0; }
.project-arrow { color: var(--lime); }
.home-services { background: var(--surface); }
.home-service-grid { display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 0; border-top: 1px solid var(--line); }
.home-service-grid article { padding: 23px 26px 24px 0; border-bottom: 1px solid var(--line); }
.home-service-grid article + article { padding-left: 24px; border-left: 1px solid var(--line); }
.home-service-grid article > span { color: var(--lime); font: 11px var(--mono); }
.home-service-grid h3 { margin: 23px 0 8px; font-size: 27px; font-weight: 550; }
.home-service-grid p { max-width: 37ch; min-height: 70px; color: var(--muted); font-size: 13px; }
.secondary-service { margin: 22px 0 0; color: var(--muted); font-size: 13px; }
.secondary-service a { color: var(--text); }
.trust-section { background: #151815; }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.trust-grid article { display: grid; grid-template-columns: 55px 1fr; gap: 0 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.trust-grid article > span { grid-row: span 2; padding-top: 5px; color: var(--lime); font: 11px var(--mono); }
.trust-grid h3 { margin: 0; font-size: 20px; font-weight: 550; }
.trust-grid p { max-width: 53ch; margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.process-strip { display: grid; grid-template-columns: 1fr 1fr; column-gap: 52px; background: #151815; }
.process-strip > .eyebrow { grid-column: 1/-1; }
.process-strip > div { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 21px 0; border-top: 1px solid var(--line); }
.process-strip > div > span { color: var(--lime); font: 11px var(--mono); }
.process-strip > div p { margin: 0; color: var(--muted); font-size: 13px; }
.process-strip > div b { color: var(--text); font-weight: 600; }
.statement { padding: 100px var(--page-gutter) 84px; border-bottom: 1px solid var(--line); }
.statement > .eyebrow { display: none; }
.statement > p:not(.eyebrow) { max-width: 990px; margin: 0 0 31px; font-size: clamp(36px,6vw,78px); font-weight: 500; letter-spacing: -.045em; line-height: 1.03; }
.statement > p:not(.eyebrow) span { color: var(--lime); }
.sales-offer-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px var(--page-gutter); border-top: 0; background: #c6fb4d; color: var(--ink); }
.sales-offer-strip strong { font-size: clamp(19px,2.5vw,29px); letter-spacing: -.025em; }
.sales-offer-strip p { margin: 4px 0 0; color: #333a2e; font-size: 13px; }
.sales-offer-strip a:hover, .sale-end a:not(.button):hover, .case-service-cta a:not(.button):hover { color: var(--ink); }

/* Project index: cases carry their own interface as the primary surface. */
.page-intro {
  position: relative; padding: 78px var(--page-gutter) 56px; border-bottom: 1px solid var(--line);
  background: #121512;
}
.page-intro > .eyebrow { display: none; }
.page-intro h1, .detail-hero h1 {
  max-width: 1000px; margin: 0; font-size: clamp(46px,7.5vw,100px);
  font-weight: 550; letter-spacing: -.045em; line-height: .98; text-wrap: balance;
}
.page-intro .lead { margin: 22px 0 0; }
.page-intro .crumb, .crumb { display: inline-block; margin-bottom: 25px; color: var(--muted); font-size: 12px; text-decoration: none; }
.crumb:hover { color: var(--lime); }
.project-cards {
  display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 22px;
  background: transparent;
}
.project-group-heading { grid-column: 1/-1; margin: 32px 0 2px; padding: 0; border: 0; }
.project-group-heading .eyebrow { display: none; }
.project-group-heading h2 { max-width: 860px; margin: 0; font-size: clamp(28px,4vw,50px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
.case-card {
  position: relative; display: flex; grid-column: span 6; flex-direction: column;
  min-height: 0; padding: 0; overflow: hidden; border: 0; background: var(--surface);
  color: var(--text); text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}
.case-card:nth-of-type(2), .case-card:nth-of-type(7) { grid-column: span 7; }
.case-card:nth-of-type(3), .case-card:nth-of-type(8) { grid-column: span 5; }
.case-card:hover { background: #20251e; }
.case-top { display: flex; justify-content: space-between; gap: 14px; padding: 16px 18px; color: var(--muted); font: 11px var(--mono); }
.case-arrow { color: var(--lime); }
.case-card h2 { margin: 10px 20px 0; font-size: clamp(26px,3.4vw,42px); font-weight: 550; letter-spacing: -.035em; line-height: 1.08; }
.case-card p { max-width: 49ch; margin: 12px 20px 23px; color: var(--muted); font-size: 13px; }
.case-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: auto; padding: 13px 20px 16px; border-top: 1px solid var(--line); color: var(--text); font-size: 11px; }
.status-tag { color: var(--muted); }
.case-card .case-preview { display: block; width: 100%; aspect-ratio: 1.64; object-fit: cover; object-position: center top; background: #282d27; filter: saturate(.88); transition: filter 250ms ease, transform 300ms var(--ease-sh); }
.case-card .case-preview.contain { object-fit: contain; }
.case-card[data-case="atlas"], .case-card[data-case="iburo"] { grid-column: span 6; }
.case-card[data-case="atlas"] .case-preview, .case-card[data-case="iburo"] .case-preview { aspect-ratio: 1.25; }
.case-card[data-case="azivolt"] .case-preview { aspect-ratio: 1.76; }
.case-card[data-case="restoration"] .case-preview { aspect-ratio: 1.76; }
.case-card[data-case="reference"] .case-preview { filter: saturate(.68); }
.case-card[data-case="atlas-os"] { grid-column: span 7; background: #20251f; }
.case-card[data-case="iburo"] { grid-column: span 5; background: #1c211d; }
.case-card[data-case="kadam"] { grid-column: span 5; background: #20241e; }
.case-card[data-case="azivolt"] { grid-column: span 7; background: #191e1c; }
.case-card[data-case="nutriciology"] { grid-column: span 5; background: #1e211c; }
.case-card[data-case="paving-stones"] { grid-column: span 7; background: #1d201d; }
.case-card[data-case="online-store"], .case-card[data-case="stomatologika"], .case-card[data-case="lounge-cafe"] { background: #151815; }
.case-page.case-kadam .detail-visual { transform: translateY(9px); }
.case-page.case-iburo .detail-visual .laptop-preview { background: #1d251f; }
.case-page.case-azivolt .detail-visual .laptop-preview { background: #242923; }
.case-page.case-paving-stones .detail-visual .laptop-preview { background: #24251e; }
.case-page.case-lounge-cafe .detail-visual .laptop-preview { background: #24211e; }
.project-cards + .sales-offer-strip { margin-top: 0; }

/* Case studies use the screenshot or project artifact as the page's large plate. */
.detail-hero {
  min-height: 0; padding: 33px var(--page-gutter) 84px;
  background: #121512; background-image: none;
}
.detail-hero > .crumb { margin: 0 0 35px; }
.detail-hero-grid { display: grid; grid-template-columns: minmax(290px,.72fr) minmax(0,1.28fr); align-items: center; gap: clamp(36px,7vw,110px); }
.detail-copy { min-width: 0; }
.detail-copy .eyebrow { display: none; }
.detail-copy .lead { font-size: clamp(16px,1.6vw,21px); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 24px; margin: 26px 0; }
.detail-meta div { min-width: 130px; }
.detail-meta div > span { display: block; margin-bottom: 7px; color: var(--muted); font: 11px var(--mono); letter-spacing: .08em; }
.detail-meta strong { color: var(--text); font-size: 12px; font-weight: 550; }
.detail-visual { min-width: 0; }
.detail-visual .laptop-preview { display: block; padding: 10px; border: 1px solid #60695b; background: #20251f; }
.detail-visual .laptop-screen { overflow: hidden; border: 1px solid #70786d; border-radius: 0; }
.detail-visual .laptop-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #151815; color: #c5ccbd; font: 11px var(--mono); }
.detail-visual .laptop-page { display: block; width: 100%; max-height: 600px; object-fit: cover; object-position: top; }
.detail-visual .laptop-base { display: none; }
.preview-caption { color: var(--muted); font: 11px var(--mono); }
.detail-content { display: grid; grid-template-columns: minmax(220px,.68fr) minmax(0,1.32fr); gap: 7vw; background: var(--surface); }
.detail-label .eyebrow { display: none; }
.detail-content h2 { max-width: 580px; margin: 0; font-size: clamp(30px,4vw,54px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
.detail-text { max-width: 66ch; color: #c4c9bc; }
.detail-text p:first-child { margin-top: 0; color: var(--text); font-size: clamp(17px,1.6vw,21px); }
.detail-text p { line-height: 1.75; }
.case-proof { background: #151815; }
.case-proof-head { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 7vw; margin-bottom: 40px; }
.case-proof-head .eyebrow { display: none; }
.case-proof-head h2 { margin: 0; font-size: clamp(31px,4vw,53px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
.case-proof-head > p:last-child { max-width: 62ch; color: var(--muted); }
.case-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 50px; }
.case-proof-grid article { min-height: 0; padding: 20px 0 28px; border-top: 1px solid var(--line); }
.case-proof-grid article > span { color: var(--lime); font: 11px var(--mono); }
.case-proof-grid h3 { margin: 16px 0 7px; font-size: 20px; font-weight: 550; }
.case-proof-grid p { max-width: 58ch; margin: 0; color: var(--muted); font-size: 13px; }
.story-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 30px; background: transparent; }
.story-grid article { padding: 18px 0 23px; border-top: 1px solid var(--line); }
.story-grid .value-num { color: var(--lime); font: 11px var(--mono); }
.story-grid h3 { margin: 14px 0 7px; font-size: 19px; font-weight: 550; }
.story-grid p, .story-note p:not(.eyebrow) { color: var(--muted); font-size: 13px; }
.story-note { background: #151815; }
.story-note .eyebrow { display: none; }
.story-note p:not(.eyebrow) { max-width: 70ch; margin: 0; font-size: 16px; }
.case-service-cta { background: #c6fb4d; color: var(--ink); text-align: left; }
.case-service-cta .eyebrow { display: none; }
.case-service-cta h2 { max-width: 950px; margin: 0 0 16px; font-size: clamp(34px,5vw,64px); font-weight: 550; letter-spacing: -.04em; line-height: 1.05; }
.case-service-cta > p:not(.eyebrow) { max-width: 58ch; margin: 0 0 22px; color: #31382a; }
.case-service-cta .button-outline { border-color: #343b2b; color: var(--ink); }
.case-service-cta .button-outline:hover { border-color: var(--ink); background: var(--ink); color: var(--lime); }
.next-project { padding: 25px var(--page-gutter); background: var(--surface); }
.next-project a { color: var(--text); font-size: 13px; }
.next-project a:hover { color: var(--lime); }

/* Service pages are index + work diagram, not a uniform grid of tiles. */
.service-catalog { grid-template-columns: repeat(12,minmax(0,1fr)); }
.service-catalog .case-card { grid-column: span 6; min-height: 260px; padding: 16px 0 0; border-top: 1px solid var(--line); background: transparent; }
.service-catalog .case-card + .case-card { border-left: 0; }
.service-catalog .case-card h2 { margin: 28px 18px 0 0; }
.service-catalog .case-card p { margin-left: 0; }
.service-catalog .case-top, .service-catalog .case-bottom { padding-inline: 0; }
.service-catalog .case-bottom { margin-top: auto; }
.service-details { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; background: var(--surface); }
.service-intro .eyebrow { display: none; }
.service-intro h2 { max-width: 620px; margin: 0; font-size: clamp(32px,4.3vw,57px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
.service-intro > p:not(.eyebrow) { max-width: 55ch; color: var(--muted); }
.service-items article { display: grid; grid-template-columns: minmax(110px,.34fr) 1fr; gap: 0 22px; padding: 17px 0 20px; border-top: 1px solid var(--line); }
.service-items article .value-num { grid-row: span 2; color: var(--lime); font: 11px var(--mono); }
.service-items article h3 { margin: 0; font-size: 17px; font-weight: 550; }
.service-items article p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.visual-example { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(0,1.3fr); align-items: center; gap: 7vw; }
.visual-example-copy .eyebrow { display: none; }
.visual-example h2 { margin: 0; font-size: clamp(28px,3.8vw,48px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
.visual-example-copy > p:not(.eyebrow) { color: var(--muted); }
.visual-example figure { min-width: 0; margin: 0; }
.visual-example figure img { display: block; width: 100%; max-height: 600px; object-fit: cover; object-position: top; border: 1px solid var(--line); }
.visual-example figcaption { padding-top: 9px; color: var(--muted); font: 11px var(--mono); }
.examples-carousel { overflow: hidden; }
.examples-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--lime) var(--surface); }
.examples-carousel-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.examples-carousel-slide figure { width: 100%; }
.examples-carousel-screen { overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.examples-carousel-screen img { display: block; width: 100%; aspect-ratio: 1.65; object-fit: cover; object-position: top; }
.examples-carousel-controls { display: flex; align-items: center; gap: 10px; margin-top: 27px; }
.examples-carousel-arrow { display: inline-grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.examples-carousel-arrow:hover:not(:disabled) { border-color: var(--lime); color: var(--lime); }
.examples-carousel-arrow:disabled { opacity: .42; cursor: not-allowed; }
.examples-carousel-status { color: var(--muted); font: 11px var(--mono); }
.service-photo-restoration .visual-example { grid-template-columns: minmax(210px,.62fr) minmax(0,1.38fr); align-items: start; }
.service-photo-restoration .visual-example-copy { position: sticky; top: 104px; }
.service-photo-restoration .visual-example h2 { max-width: 10ch; font-size: clamp(32px,4.4vw,58px); }
.restoration-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.restoration-frame { min-width: 0; }
.restoration-frame > span { display: block; padding: 8px 10px; background: #20251f; color: var(--muted); font: 11px var(--mono); }
.restoration-frame img { display: block; width: 100%; aspect-ratio: 1.34; object-fit: cover; }
.service-photo-restoration .examples-carousel-screen { border: 0; background: transparent; }
.service-photo-restoration .examples-carousel-slide figcaption { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.service-photo-restoration .examples-carousel-kind { color: var(--lime); font: 11px var(--mono); }
.service-business-automation .visual-example { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.service-business-automation .visual-example h2 { max-width: 13ch; }
.service-business-automation .visual-example figure img { aspect-ratio: 1.35; object-fit: contain; background: #20241f; }
.service-apps .visual-example figure img { object-fit: cover; aspect-ratio: 1.4; }
.service-multi-page-sites .visual-example figure img { aspect-ratio: 1.7; }

/* Prices: one service map, grouped and filterable. */
.sales-page, .brief-page { max-width: var(--page-width); }
.sales-hero, .brief-hero { padding: 74px var(--page-gutter) 60px; background: #121512; border-bottom: 1px solid var(--line); }
.sales-hero .eyebrow, .brief-hero .eyebrow { display: none; }
.sales-hero h1, .brief-hero h1 { max-width: 1050px; font-size: clamp(45px,7vw,92px); font-weight: 550; letter-spacing: -.045em; line-height: .98; }
.sales-hero h1 em, .brief-hero h1 em, .sale-end h2 em { color: var(--lime); font-style: normal; }
.sales-lead { max-width: 62ch; color: #c6ccbe; font-size: 18px; line-height: 1.55; }
.sales-content { padding: 62px var(--page-gutter) 78px; border-bottom: 1px solid var(--line); }
.sales-section-head { align-items: end; }
.sales-section-head h2, .sale-end h2 { font-size: clamp(30px,4.1vw,54px); font-weight: 500; letter-spacing: -.035em; line-height: 1.07; }
.sale-filters { gap: 7px; margin-bottom: 30px; }
.sale-filter { min-height: 44px; padding: 11px 14px; border-color: var(--line); border-radius: 2px; background: transparent; color: #c2c8ba; font: 11px var(--mono); transition: color 160ms ease, background 160ms ease, border-color 160ms ease; }
.sale-filter:hover { border-color: #89947f; color: var(--text); }
.sale-filter.is-selected { border-color: var(--lime); background: var(--lime); color: var(--ink); }
#sale-results-count { color: var(--muted); font: 11px var(--mono); }
.sale-category { margin-top: 50px; }
.sale-category > h2 { margin: 0 0 13px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: clamp(24px,3vw,36px); font-weight: 500; }
.sale-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 32px; }
.sale-card { min-height: 0; padding: 25px 0 20px; border: 0; border-top: 1px solid var(--line); background: transparent; transition: color 180ms ease; }
.sale-card:hover { border-color: #77816e; background: transparent; transform: none; }
.sale-card-top { min-height: 0; }
.sale-index { color: var(--lime); font-size: 11px; }
.sale-featured-tag { border-color: #647c43; color: var(--lime); }
.sale-card h3 { margin: 18px 0 8px; font-size: clamp(21px,2.7vw,31px); font-weight: 550; letter-spacing: -.03em; }
.sale-desc { min-height: 0; max-width: 52ch; color: var(--muted); font-size: 12px; }
.sale-price { margin: 17px 0; padding-bottom: 12px; border-color: var(--line); font-size: clamp(26px,3vw,36px); font-variant-numeric: tabular-nums; }
.sale-price small, .sale-price span { color: var(--muted); font-size: 11px; }
.sale-terms strong { color: #e2e6d9; font-size: 11px; }
.sale-terms p { color: var(--muted); font-size: 12px; }
.sale-card-link { margin-top: 12px; padding: 11px 0 3px; border-color: var(--line); color: var(--lime); font-size: 11px; }
.sale-card-link:hover { text-decoration-thickness: 1px; }
.sale-footnote { max-width: 70ch; color: var(--muted); font-size: 11px; }
.sale-benefits { grid-template-columns: 1fr 1fr 1fr; gap: 0 26px; }
.sale-benefits article { min-height: 0; padding: 21px 0; border: 0; border-top: 1px solid var(--line); }
.sale-benefits article span { color: var(--lime); font: 11px var(--mono); }
.sale-benefits h3 { margin: 14px 0 8px; font-size: 19px; font-weight: 550; }
.sale-benefits p { color: var(--muted); font-size: 12px; }
.sale-faq details { border-color: var(--line); }
.sale-faq summary { font-size: 15px; font-weight: 550; }
.sale-faq summary::after { font-size: 20px; }
.sale-faq details p { max-width: 70ch; color: var(--muted); font-size: 13px; }
.sale-end { padding: 76px var(--page-gutter); background: #c6fb4d; color: var(--ink); text-align: left; }
.sale-end .eyebrow { display: none; }
.sale-end h2 { max-width: 900px; margin: 0; font-size: clamp(34px,5vw,65px); }
.sale-end h2 em { color: #24301b; }
.sale-end > p:not(.eyebrow) { max-width: 62ch; margin: 16px 0 24px; color: #35412e; }
.sale-end .sales-actions { justify-content: flex-start; margin-top: 20px; }
.sale-end .button-bright { border-color: var(--ink); background: var(--ink); color: var(--lime); }
.sale-end .button-outline { border-color: #34402d; color: var(--ink); }
.sale-end .button-outline:hover { background: var(--ink); color: var(--lime); }

/* Brief: editing field + generated message remain native and usable. */
.brief-hero { padding-bottom: 38px; }
.brief-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(270px,.65fr); gap: 42px; padding: 40px var(--page-gutter) 84px; }
.brief-form { padding: 0; border: 0; background: transparent; }
.brief-form h2 { margin: 0 0 20px; font-size: 25px; font-weight: 550; }
.brief-field { gap: 7px; margin-bottom: 21px; }
.brief-field label, .brief-field legend { color: #e0e5d8; font-size: 12px; font-weight: 600; }
.brief-field input, .brief-field select, .brief-field textarea {
  min-height: 48px; padding: 12px 13px; border: 1px solid #596055; border-radius: 2px;
  background: #141714; color: var(--text); font-size: 14px;
}
.brief-field textarea { min-height: 120px; }
.brief-choice { gap: 8px; }
.brief-choice label { display: inline-flex; min-height: 44px; align-items: center; padding: 9px 12px; border-color: #596055; }
.brief-choice label:has(input:checked) { border-color: var(--lime); color: var(--lime); }
.brief-aside { top: 96px; }
.brief-estimate { margin-bottom: 18px; padding: 23px; border-color: #8daa58; background: #20291b; }
.brief-estimate span { color: #c8d1ba; font: 11px var(--mono); }
.brief-estimate strong { font-size: clamp(29px,3.8vw,43px); font-variant-numeric: tabular-nums; }
.brief-estimate p { color: #c0c8b9; font-size: 12px; }
.brief-aside .button { min-height: 48px; margin: 8px 0; }
.brief-aside p { color: var(--muted); font-size: 12px; }
.brief-text-preview { max-height: 260px; padding: 14px; border-color: var(--line); background: #111411; color: #d1d6c9; font: 11px/1.55 var(--mono); }
.brief-success { min-height: 26px; color: var(--lime); font-size: 12px; }

/* About: the identity becomes the central artifact, with a quiet reading column. */
.about-layout { display: grid; grid-template-columns: minmax(220px,.72fr) minmax(0,1.28fr); align-items: start; gap: 8vw; background: var(--surface); }
.about-stamp {
  position: sticky; top: 112px; display: grid; min-height: 350px; place-items: center;
  padding: 25px; border: 1px solid var(--line); background: #111411;
}
.about-stamp img { width: min(82%,270px); height: auto; object-fit: contain; }
.about-copy h2 { max-width: 850px; margin: 0 0 25px; font-size: clamp(29px,4vw,50px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
.about-copy p { max-width: 66ch; color: #c6ccbf; font-size: 14px; line-height: 1.8; }
.about-copy .text-link { margin-top: 12px; }
.values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 28px; background: transparent; }
.values > div { padding: 20px 0 10px; border-top: 1px solid var(--line); }
.value-num { color: var(--lime); font: 11px var(--mono); }
.values h3 { margin: 17px 0 8px; font-size: 20px; font-weight: 550; }
.values p { color: var(--muted); font-size: 13px; }

/* Footer and chat controls. */
.footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 25px var(--page-gutter); border-top: 1px solid var(--line); }
.footer-contact { display: flex; gap: 22px; }
.footer-contact a { color: var(--muted); font-size: 12px; text-decoration: none; }
.footer-contact a:hover { color: var(--lime); }
.back-top { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); color: var(--text); font: 14px var(--mono); text-decoration: none; }
.back-top:hover { border-color: var(--lime); color: var(--lime); }
.ai-chat-launcher { right: 22px; bottom: 22px; min-height: 48px; box-shadow: 0 9px 24px #0006; transition: transform 150ms var(--ease-sh), background 160ms ease; }
.ai-chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 11px 27px #0008; }
.ai-chat-panel { border-radius: 2px; }
.ai-chat-input:focus-visible, .ai-chat-send:focus-visible, .ai-chat-icon-button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* Keep content visible by default; JavaScript adds reveal states after setup. */
.hero-plate img, .case-card .case-preview { transform-origin: center; }
@media (hover:hover) and (pointer:fine) {
  .hero-plate:hover img { filter: saturate(1); }
  .case-card:hover .case-preview { filter: saturate(1); transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .case-card .case-preview { transform: none !important; }
}

@media (max-width: 900px) {
  :root { --page-gutter: 28px; }
  .top { min-height: 72px; }
  .nav.service-nav { gap: 12px; }
  .nav.service-nav a { font-size: 11px; }
  .hero { min-height: 0; padding-top: 64px; }
  .hero-grid { grid-template-columns: minmax(0,1.1fr) minmax(260px,.9fr); gap: 34px; }
  .hero h1 { font-size: clamp(46px,7vw,72px); }
  .hero-plate img { aspect-ratio: .95; }
  .detail-hero-grid { grid-template-columns: minmax(250px,.75fr) minmax(0,1.25fr); gap: 34px; }
  .case-card, .case-card:nth-of-type(n) { grid-column: span 6; }
  .sale-grid { gap: 0 24px; }
}
@media (max-width: 760px) {
  :root { --page-gutter: 22px; }
  .top { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; min-height: 0; padding: 8px var(--page-gutter); }
  .brand { grid-column: 1; grid-row: 1; }
  .brand-art { width: 48px; height: 38px; }
  .menu-toggle {
    display: inline-grid; grid-column: 2; grid-row: 1; place-items: center;
    width: 48px; height: 48px; margin: 0; border: 1px solid var(--line);
    position: relative; background: transparent; color: transparent; font-size: 0; cursor: pointer;
  }
  .menu-toggle::before, .menu-toggle::after {
    position: absolute; width: 18px; height: 1.5px; background: var(--text);
    transition: transform 160ms var(--ease-sh), opacity 160ms ease;
  }
  .menu-toggle::before { transform: translateY(-4px); }
  .menu-toggle::after { transform: translateY(4px); }
  .menu-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"]::after { transform: rotate(-45deg); }
  .menu-toggle[aria-expanded="true"] { border-color: var(--lime);
  }
  .nav.service-nav {
    display: none; grid-column: 1/-1; grid-row: 2; justify-self: stretch;
    flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin: 8px 0 0;
    padding: 7px 0 12px; border-top: 1px solid var(--line); white-space: normal;
  }
  .nav.service-nav.open { display: flex; }
  .nav.service-nav > a, .nav-dropdown-main > a { min-height: 44px; padding: 12px 0; font-size: 14px; }
  .nav.service-nav a.active::after { display: none; }
  .nav-dropdown { display: block; width: 100%; }
  .nav-dropdown-main { display: grid; grid-template-columns: 1fr 44px; align-items: center; }
  .submenu-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
  .nav-submenu { position: static; min-width: 0; margin: 0 0 7px 9px; padding: 4px 0 4px 14px; border: 0; border-left: 1px solid var(--line); background: transparent; box-shadow: none; }
  .nav-submenu a { min-height: 40px; padding: 9px 7px !important; font-size: 12px !important; }
  .nav-dropdown:hover .nav-submenu, .nav-dropdown:focus-within .nav-submenu { display: none; }
  .nav-dropdown.open .nav-submenu { display: flex; }
  .mobile-menu-contacts { display: block; padding-top: 16px; border-top: 1px solid var(--line); }
  .mobile-menu-contacts-label { color: var(--muted); font: 11px var(--mono); }
  .mobile-menu-contact-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
  .mobile-menu-contact-links a { min-height: 40px; color: var(--text); font-size: 12px; }
  .hero { min-height: 0; padding: 48px var(--page-gutter) 23px; }
  .hero-grid { grid-template-columns: 1fr; gap: 37px; }
  .hero h1 { max-width: 12ch; font-size: clamp(47px,10vw,76px); }
  .hero .lead { max-width: 52ch; margin-top: 20px; font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 23px; }
  .hero-note { max-width: none; }
  .hero-plate { width: min(100%,550px); margin-inline: auto; }
  .hero-plate::before { top: -12px; right: -9px; bottom: 30px; left: 14px; }
  .hero-plate img { aspect-ratio: 1.15; }
  .hero-plate figcaption { font-size: 11px; }
  .hero-meta { display: grid; grid-template-columns: 1fr 1fr; margin-top: 37px; font-size: 11px; }
  .hero-meta span:nth-child(2) { display: none; }
  .sales-pitch { padding-top: 62px; padding-bottom: 54px; }
  .sales-pitch .sales-section-head { grid-template-columns: 1fr; gap: 13px; margin-bottom: 28px; }
  .sales-section-head h2 { font-size: clamp(33px,7.4vw,52px); }
  .sales-pitch-grid { grid-template-columns: 1fr; }
  .sales-pitch-grid article, .sales-pitch-grid article + article { min-height: 0; padding: 20px 0; border-left: 0; }
  .sales-pitch-grid h3 { margin-top: 8px; font-size: 24px; }
  .sales-pitch-grid p { max-width: 55ch; }
  .sales-pitch-bottom { align-items: flex-start; flex-direction: column; gap: 12px; }
  .section { padding-block: 64px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 17px; margin-bottom: 29px; }
  .section-head h2 { font-size: clamp(32px,7.5vw,52px); }
  .project-row { grid-template-columns: 30px minmax(0,1fr) 22px; gap: 9px; min-height: 80px; }
  .project-status { display: none; }
  .project-name { font-size: 21px; }
  .home-service-grid { grid-template-columns: 1fr; }
  .home-service-grid article, .home-service-grid article + article { padding: 18px 0 20px; border-left: 0; }
  .home-service-grid h3 { margin-top: 13px; }
  .home-service-grid p { min-height: 0; }
  .trust-grid { grid-template-columns: 1fr; }
  .process-strip { grid-template-columns: 1fr; }
  .process-strip > .eyebrow { grid-column: auto; }
  .statement { padding-block: 68px; }
  .statement > p:not(.eyebrow) { font-size: clamp(38px,9vw,58px); }
  .sales-offer-strip { align-items: flex-start; flex-direction: column; padding-block: 22px; }
  .sales-offer-strip .button { width: 100%; }
  .page-intro, .sales-hero, .brief-hero { padding-top: 49px; padding-bottom: 38px; }
  .page-intro h1, .detail-hero h1, .sales-hero h1, .brief-hero h1 { font-size: clamp(43px,10vw,66px); }
  .page-intro .lead { font-size: 15px; }
  .project-cards { gap: 15px; }
  .case-card, .case-card:nth-of-type(n), .case-card[data-case] { grid-column: 1/-1; }
  .case-card h2 { font-size: 28px; }
  .case-card .case-preview { aspect-ratio: 1.55; }
  .detail-hero { padding-top: 27px; padding-bottom: 53px; }
  .detail-hero-grid { grid-template-columns: 1fr; gap: 27px; }
  .detail-hero-grid .detail-copy { order: 0; }
  .detail-visual { order: 1; }
  .detail-meta { gap: 13px; }
  .detail-meta div { min-width: calc(50% - 10px); }
  .detail-content, .service-details, .visual-example, .about-layout { grid-template-columns: 1fr; gap: 28px; }
  .service-photo-restoration .visual-example, .service-business-automation .visual-example { grid-template-columns: 1fr; }
  .service-photo-restoration .visual-example-copy { position: static; }
  .detail-content h2, .service-intro h2 { font-size: clamp(32px,8vw,48px); }
  .case-proof-head { grid-template-columns: 1fr; gap: 15px; }
  .case-proof-grid, .story-grid { grid-template-columns: 1fr; }
  .story-grid { gap: 0; }
  .service-catalog .case-card { grid-column: 1/-1; min-height: 0; }
  .service-catalog .case-card h2 { margin-left: 0; }
  .service-catalog .case-card p { margin-left: 0; }
  .service-items article { grid-template-columns: 1fr; gap: 8px; }
  .sales-content { padding-top: 43px; padding-bottom: 56px; }
  .sale-grid { grid-template-columns: 1fr; }
  .sale-category { margin-top: 38px; }
  .sale-benefits { grid-template-columns: 1fr; }
  .sale-end { padding-block: 58px; }
  .brief-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  .brief-aside { position: static; }
  .about-stamp { position: static; min-height: 240px; }
  .about-stamp img { width: 190px; }
  .values { grid-template-columns: 1fr; gap: 0; }
  .footer { padding-block: 19px; }
}
@media (max-width: 390px) {
  :root { --page-gutter: 18px; }
  body { font-size: 15px; }
  .hero { padding-top: 39px; }
  .hero h1 { font-size: clamp(42px,11vw,50px); }
  .hero .button { width: 100%; }
  .hero-plate figcaption { gap: 8px; }
  .hero-plate figcaption span:last-child { text-align: right; }
  .project-row { grid-template-columns: 24px minmax(0,1fr) 20px; }
  .project-name { font-size: 19px; }
  .detail-meta div { min-width: 100%; }
  .case-bottom { align-items: flex-start; }
  .brief-choice label { width: 100%; }
  .footer-contact { flex-wrap: wrap; gap: 10px 16px; }
  .ai-chat-launcher { right: 12px; bottom: 12px; min-height: 46px; }
}

/* Cinnabar direction: carbon surfaces, ember-red accents, and a passing light trail. */
:root {
  --bg: #0b0b0d;
  --surface: #141315;
  --surface-raised: #1c191b;
  --text: #f5f1f0;
  --muted: #b9afb0;
  --line: #3d3033;
  --lime: #d13b50;
  --ink: #fffafa;
  --paper: #21191b;
  --ease-sh: cubic-bezier(.16, 1, .3, 1);
  --motion-ui: 220ms;
  color-scheme: dark;
}

html, body { background: var(--bg); color: var(--text); }
::selection { background: #d13b50; color: #fffafa; }
:focus-visible { outline-color: #ff7180 !important; }
.top {
  border-color: var(--line);
  background: rgba(11, 11, 13, .94);
}
.top::after { background: var(--lime); box-shadow: 0 0 14px #d13b5066; }
.nav.service-nav a { color: #d3cbcb; }
.nav.service-nav a:hover, .nav.service-nav a.active { color: var(--text); }
.nav.service-nav a.active::after { background: var(--lime); }
.nav-submenu { border-color: var(--line); background: var(--surface-raised); box-shadow: 0 18px 36px #0009; }
.nav-submenu a:hover, .nav-submenu a.active { background: #292023; color: var(--text); }
.nav.service-nav.open { border-color: var(--line); background: var(--surface-raised); }
.accent, .hero h1 em, .sales-hero h1 em, .brief-hero h1 em,
.sale-end h2 em { color: #ff6578; }
.hero, .page-intro, .sales-hero, .brief-hero, .detail-hero {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 76% 34%, #d13b5025, transparent 46%);
}
.hero { border-color: var(--line); }
.hero-plate::before { border-color: #d13b5066; }
.hero-plate img { border-color: #67404a; filter: saturate(.92) contrast(1.02); }
.hero-plate-media { position: relative; overflow: hidden; }
.hero-plate-media > a { display: block; }
.hero-plate-media::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: -42%;
  width: 30%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 8%, #d13b5010 35%, #ff435b70 48%, #fff9 51%, #d13b5038 58%, transparent 92%);
  opacity: 0;
  transform: skewX(-18deg);
  animation: cinnabar-light-trail 8.5s cubic-bezier(.45, 0, .2, 1) 1.2s infinite;
  content: "";
}
.hero-meta { border-color: var(--line); color: var(--muted); }
.hero-meta span:last-child, .hero-note a { color: #ff7180 !important; }
.lead, .sales-lead, .detail-text, .about-copy p { color: #c8bfc0; }
.button, a.button, button.button {
  border-color: var(--lime);
  border-radius: 999px;
  background: var(--lime);
  color: #fffafa;
}
.button:hover { border-color: #a52236; background: #a52236; color: #fff; box-shadow: 0 10px 30px #d13b5030; }
.button-outline, a.button-outline { border-color: #78686b; background: transparent; color: var(--text); }
.button-outline:hover { border-color: #ff7180; color: #ff7180; }
.statement a.button-outline { border-color: #8f7e81; color: var(--text); }
.statement a.button-outline:hover { border-color: #ff7180; color: #ff7180; }
.text-link:hover, .hero-plate figcaption a:hover, .crumb:hover,
.project-row:hover, .sales-pitch-grid a:hover { color: #ff7180; }
.work, .trust-section, .process-strip, .case-proof, .story-note,
.home-services, .about-layout, .detail-content, .service-details, .next-project {
  background: var(--surface);
}
.case-proof, .story-note { background: #151214; }
.case-card, .case-card[data-case], .case-card[data-case="atlas-os"],
.case-card[data-case="iburo"], .case-card[data-case="kadam"],
.case-card[data-case="azivolt"], .case-card[data-case="nutriciology"],
.case-card[data-case="paving-stones"], .case-card[data-case="online-store"],
.case-card[data-case="stomatologika"], .case-card[data-case="lounge-cafe"] {
  background: var(--surface-raised);
}
.case-card:hover { background: #251a1d; }
.case-card::before {
  background: radial-gradient(340px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #d13b502b, transparent 62%);
}
.project-list, .project-row, .sales-pitch-grid, .sales-pitch-grid article,
.home-service-grid, .home-service-grid article, .trust-grid article,
.process-strip > div, .statement { border-color: var(--line); }
.sales-pitch-grid span, .home-service-grid article > span,
.trust-grid article > span, .process-strip > div > span,
.project-arrow, .case-arrow, .case-proof-grid article > span,
.story-grid .value-num, .service-items article .value-num,
.examples-carousel-kind, .sale-index, .sale-card-link,
.sale-faq summary::after, .brief-success, .ai-chat-kicker { color: #ff7180; }
.project-num, .project-status { color: var(--muted); }
.statement { background: #110e10; color: var(--text); }
.statement > p:not(.eyebrow) span { color: #ff6578; }
.statement::before, .statement::after { border-color: #d13b5030; }
.sales-offer-strip, .case-service-cta, .sale-end {
  background: #2a1117;
  color: #fffafa;
}
.sales-offer-strip p, .case-service-cta > p:not(.eyebrow),
.sale-end > p:not(.eyebrow) { color: #e5d7da; }
.case-service-cta h2, .sale-end h2 { color: #fffafa; }
.case-service-cta h2 em, .sale-end h2 em { color: #ff7180; }
.sales-offer-strip .button, .case-service-cta .button,
.sale-end .button-bright {
  border-color: #fffafa;
  background: #fffafa;
  color: #691b28;
}
.sales-offer-strip .button:hover, .case-service-cta .button:hover,
.sale-end .button-bright:hover { border-color: #f1dadd; background: #f1dadd; color: #691b28; }
.case-service-cta .button-outline, .sale-end .button-outline { border-color: #a98d92; color: #fffafa; }
.case-service-cta .button-outline:hover, .sale-end .button-outline:hover {
  border-color: #fffafa;
  background: #fffafa;
  color: #691b28;
}
.sales-page .sale-filter { color: var(--text); }
.sales-page .sale-filter.is-selected { border-color: var(--lime); background: var(--lime); color: #fffafa; }
.sales-page .sale-card-link, .sale-catalog-quote:hover { color: #ff7180; }
.sale-comparison > div, .sale-tiers .sale-benefits article { border-color: var(--line); background: var(--surface-raised); }
.sale-featured-tag { border-color: #9e5963; color: #ff7180; }
.brief-field label, .brief-field legend { color: var(--text); }
.brief-field input, .brief-field select, .brief-field textarea,
.brief-choice label, .brief-text-preview, .ai-chat-panel,
.ai-chat-suggestion, .ai-chat-contact, .ai-chat-input { border-color: #635155; }
.brief-field input, .brief-field select, .brief-field textarea,
.brief-text-preview, .ai-chat-panel, .ai-chat-input { background: #111012; color: var(--text); }
.brief-field select { color-scheme: dark; }
.brief-choice label { color: var(--text); }
.brief-choice label:has(input:checked) { border-color: var(--lime); color: #ff7180; }
.brief-estimate { border-color: #7f414c; background: #211417; }
.brief-estimate span, .brief-estimate p { color: #c8bfc0; }
.brief-estimate strong { color: #ff7180; }
.ai-chat-header, .ai-chat-composer, .ai-chat-privacy, .ai-chat-bubble { background: var(--surface); }
.ai-chat-bubble, .ai-chat-privacy, .footer-contact a { color: var(--muted); }
.ai-chat-suggestions { border-color: var(--line); }
.ai-chat-suggestion { background: var(--surface-raised); color: var(--text); }
.ai-chat-suggestion:hover, .ai-chat-contact:hover, .footer-contact a:hover { color: #ff7180; }
.ai-chat-row-user .ai-chat-bubble { border-color: var(--lime); background: var(--lime); color: #fffafa; }
.ai-chat-send { border-color: var(--lime); background: var(--lime); color: #fffafa; }
.ai-chat-launcher {
  border-color: #713540;
  border-radius: 16px;
  background: #211518;
  color: var(--text);
  box-shadow: 0 14px 32px #0009;
}
.ai-chat-send:hover { background: #a52236; color: #fff; }
.ai-chat-launcher:hover { border-color: #d13b50; background: #2b191e; }
.back-top { border-color: var(--lime); background: var(--lime); color: #fffafa; box-shadow: 0 6px 20px #0007; }
.back-top:hover, .back-top:focus-visible { border-color: #a52236; background: #a52236; color: #fff; }
.hero-art { filter: hue-rotate(250deg) saturate(.72); }

@keyframes cinnabar-light-trail {
  0%, 18% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  24% { opacity: .82; }
  44% { transform: translateX(520%) skewX(-18deg); opacity: .45; }
  52%, 100% { transform: translateX(520%) skewX(-18deg); opacity: 0; }
}
@keyframes orb-glow {
  0%, 100% { box-shadow: 0 0 70px #d13b5028, inset -18px -18px 40px #08090a; }
  50% { box-shadow: 0 0 110px #d13b5060, inset -18px -18px 40px #08090a; }
}
@media (max-width: 800px) { .hero-plate-media::after { animation-duration: 10s; } }
@media (prefers-reduced-motion: reduce) { .hero-plate-media::after { animation: none; } }

/* A single motion language: staggered entrances, one hero trail, and direct feedback. */
.hero-copy > * { animation: rise-in .72s var(--ease-sh) both; }
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .68s var(--ease-sh), transform .68s var(--ease-sh);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-motion [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.top::after {
  position: absolute;
  right: auto;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: "";
  width: 100%;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  transition: transform 80ms linear;
}
.button::after {
  left: 0;
  transform: translateX(-140%) rotate(20deg);
  transition: none;
}
.case-card { will-change: auto; }
.case-card::before {
  background: radial-gradient(340px circle at 50% 0%, #d13b502b, transparent 65%);
  opacity: 0;
  transition: opacity .28s ease;
}
.case-card:hover::before { opacity: 1; }
.home-service-grid article { transition: transform .22s var(--ease-sh); }

@media (hover: hover) and (pointer: fine) {
  .button:hover::after { left: 0; transform: translateX(560%) rotate(20deg); transition: transform .55s var(--ease-sh); }
  .home-service-grid article:hover { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-copy > * { animation: none; }
  .hero-plate-media::after { animation: none; }
  .top::after { transform: none; }
  .button::after { display: none; }
  .home-service-grid article { transition: none; }
}

/* Scrolltide-inspired motion components: project rail, package cards, photo ring, globe, glass controls. */
.button, a.button, button.button, .examples-carousel-arrow, .sale-filter {
  border-radius: 999px;
  border-color: #88616a;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.035) 42%, rgba(91,20,34,.38));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.button::before, a.button::before, button.button::before {
  position: absolute; inset: 1px; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 100% at 18% 0%, rgba(255,255,255,.22), transparent 48%);
  content: ""; pointer-events: none;
}
.button:hover, a.button:hover, button.button:hover:not(:disabled) {
  border-color: #ff9aa6;
  background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(209,59,80,.2) 60%, rgba(91,20,34,.52));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 10px 28px rgba(209,59,80,.25);
}
.button:active, a.button:active, button.button:active:not(:disabled) { transform: scale(.975); }
.button:focus-visible, a.button:focus-visible, button.button:focus-visible, .examples-carousel-track:focus-visible { outline: 2px solid #ff9aa6; outline-offset: 4px; }
.button:disabled, button:disabled { opacity: .5; }
.button-outline, a.button-outline { border-color: rgba(255,226,230,.42); background: rgba(18,12,14,.4); color: var(--text); }
.sales-page .sale-filter.is-selected { border-color: #ff7180; background: rgba(209,59,80,.34); color: #fff; }

.expanded-card-rail { display: flex; align-items: stretch; flex-wrap: wrap; gap: 12px; overflow: hidden; }
.expanded-card-rail > .project-group-heading { flex: 0 0 100%; }
.expanded-card-rail > .case-card {
  flex: .55 0 78px; width: auto; min-width: 74px; height: clamp(430px, 48vw, 580px); min-height: 0;
  padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
  overflow: hidden; position: relative; isolation: isolate;
  transition: flex-grow .55s cubic-bezier(.77,0,.175,1), border-color .25s ease, background .25s ease;
  background: #171214;
}
.expanded-card-rail > .case-card:first-of-type,
.expanded-card-rail > .case-card:hover,
.expanded-card-rail > .case-card:focus-visible {
  flex-grow: 4.1; flex-basis: min(34vw, 340px); border-color: rgba(255,113,128,.58);
}
.expanded-card-rail .case-top { position: relative; z-index: 2; padding: 14px; font-size: 10px; }
.expanded-card-rail > .case-card > :not(.case-top) { opacity: 0; transition: opacity .2s ease; }
.expanded-card-rail > .case-card > .case-top > span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); }
.expanded-card-rail > .case-card > .case-top > .case-arrow { writing-mode: horizontal-tb; }
.expanded-card-rail > .case-card:first-of-type > :not(.case-top),
.expanded-card-rail > .case-card:hover > :not(.case-top),
.expanded-card-rail > .case-card:focus-visible > :not(.case-top) { opacity: 1; }
.expanded-card-rail > .case-card:first-of-type > .case-top > span:first-child,
.expanded-card-rail > .case-card:hover > .case-top > span:first-child,
.expanded-card-rail > .case-card:focus-visible > .case-top > span:first-child { writing-mode: horizontal-tb; transform: none; }
.expanded-card-rail .case-preview { width: 100%; object-fit: cover; }
.expanded-card-rail > .case-card:first-of-type .case-preview,
.expanded-card-rail > .case-card:hover .case-preview,
.expanded-card-rail > .case-card:focus-visible .case-preview { flex: 1; min-height: 0; }
.expanded-card-rail > .case-card:focus-visible { outline: 2px solid #ff9aa6; outline-offset: 3px; }

.sale-tiers .sale-benefits article {
  position: relative; min-height: 260px; padding: 24px 22px 34px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.13); border-radius: 18px 18px 18px 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(37,19,23,.84) 54%, rgba(15,12,14,.92));
  clip-path: polygon(0 0,100% 0,100% 100%,56% 100%,52% 95%,48% 100%,0 100%);
  transition: transform .24s var(--ease-sh), border-color .24s ease, background .24s ease;
}
.sale-tiers .sale-benefits article::before {
  position: absolute; inset: -25% -20%; z-index: -1; content: ""; opacity: 0;
  background: radial-gradient(ellipse at 75% 25%, rgba(255,73,99,.35), transparent 54%);
  transition: opacity .25s ease;
}
.sale-tiers .sale-benefits article:hover, .sale-tiers .sale-benefits article:focus-within { transform: translateY(-5px); border-color: rgba(255,113,128,.64); background-color: #211518; }
.sale-tiers .sale-benefits article:hover::before, .sale-tiers .sale-benefits article:focus-within::before { opacity: 1; }
.sale-tiers .sale-benefits article > * { position: relative; }
.sale-tiers .sale-benefits article > span:first-child { display: inline-flex; min-height: 28px; align-items: center; padding: 0 12px; border: 1px solid rgba(255,113,128,.5); border-radius: 999px; background: rgba(209,59,80,.16); }
.sale-tiers .sale-benefits h3 { max-width: 20ch; font-size: clamp(20px,2vw,25px); }

.service-photo-restoration [data-ring-carousel] { perspective: 1100px; }
.service-photo-restoration [data-ring-carousel] .examples-carousel-track {
  position: relative; display: block; height: clamp(340px, 42vw, 520px); overflow: visible;
  perspective: inherit; transform-style: preserve-3d; touch-action: pan-y; cursor: grab;
}
.service-photo-restoration [data-ring-carousel] .examples-carousel-track:active { cursor: grabbing; }
.service-photo-restoration [data-ring-carousel] .examples-carousel-slide {
  position: absolute; inset: 0; width: min(78%, 720px); height: 100%; margin: auto;
  opacity: .42; backface-visibility: hidden; pointer-events: none;
  transform: rotateY(calc(var(--slide-index) * 180deg)) translateZ(clamp(118px, 19vw, 205px)) rotateY(calc(var(--slide-index) * -180deg)) rotateY(calc(var(--carousel-current, 0) * 180deg));
  transition: transform .72s cubic-bezier(.77,0,.175,1), opacity .5s ease;
}
.service-photo-restoration [data-ring-carousel] .examples-carousel-slide[aria-current="true"] { opacity: 1; pointer-events: auto; }
.service-photo-restoration [data-ring-carousel] .examples-carousel-track { transform: rotateY(calc(var(--carousel-current, 0) * -180deg)); transition: transform .72s cubic-bezier(.77,0,.175,1); }
.service-photo-restoration [data-ring-carousel] .examples-carousel-slide figure,
.service-photo-restoration [data-ring-carousel] .examples-carousel-screen { height: 100%; }
.service-photo-restoration [data-ring-carousel] .examples-carousel-screen { padding: clamp(12px,2vw,24px); border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: linear-gradient(145deg,#26181c,#110e10 68%); box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.service-photo-restoration [data-ring-carousel] .restoration-pair { height: 100%; align-content: center; gap: clamp(8px,1.2vw,16px); }
.service-photo-restoration [data-ring-carousel] .restoration-frame img { aspect-ratio: 1.34; border-radius: 5px; }
.service-photo-restoration [data-ring-carousel] .restoration-frame > span { background: rgba(255,255,255,.08); border-radius: 999px; color: #fff; }
.service-photo-restoration [data-ring-carousel] figcaption { display: flex; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.service-photo-restoration [data-ring-carousel] .examples-carousel-slide[aria-current="true"] figure { filter: drop-shadow(0 20px 36px rgba(209,59,80,.12)); }
.service-photo-restoration [data-ring-carousel] .examples-carousel-slide figcaption { opacity: 0; transition: opacity .3s ease; }
.service-photo-restoration [data-ring-carousel] .examples-carousel-slide[aria-current="true"] figcaption { opacity: 1; }

.hero-globe-wrap { display: grid; place-items: center; min-height: 320px; overflow: hidden; border: 1px solid rgba(255,113,128,.17); border-radius: 48% 52% 46% 54% / 49% 45% 55% 51%; background: radial-gradient(ellipse at 50% 52%, rgba(120,28,46,.2), rgba(11,9,11,.75) 70%); box-shadow: inset 0 0 70px rgba(209,59,80,.08), 0 28px 70px rgba(0,0,0,.24); }
.particle-globe { display: block; width: 100%; height: 100%; min-height: 320px; cursor: grab; touch-action: pan-y; }
.particle-globe:active { cursor: grabbing; }

@media (max-width: 800px) {
  .expanded-card-rail { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
  .expanded-card-rail > .case-card, .expanded-card-rail > .case-card:first-of-type,
  .expanded-card-rail > .case-card:hover, .expanded-card-rail > .case-card:focus-visible {
    flex: 0 0 min(84vw, 450px); height: 480px; scroll-snap-align: start;
  }
  .expanded-card-rail > .case-card > :not(.case-top) { opacity: 1; }
  .expanded-card-rail > .case-card > .case-top > span:first-child { writing-mode: horizontal-tb; transform: none; }
  .service-photo-restoration [data-ring-carousel] .examples-carousel-track { height: 360px; }
  .service-photo-restoration [data-ring-carousel] .examples-carousel-slide { width: 82%; }
  .hero-globe-wrap { min-height: 290px; }
  .particle-globe { min-height: 290px; }
}
@media (max-width: 540px) {
  .sale-tiers .sale-benefits article { min-height: 0; padding: 21px 18px 32px; }
  .service-photo-restoration [data-ring-carousel] .examples-carousel-track { height: 300px; }
  .service-photo-restoration [data-ring-carousel] .examples-carousel-slide { width: 86%; }
  .service-photo-restoration [data-ring-carousel] .examples-carousel-screen { padding: 10px; }
  .service-photo-restoration [data-ring-carousel] .restoration-pair { grid-template-columns: 1fr 1fr; gap: 6px; }
  .service-photo-restoration [data-ring-carousel] .restoration-frame img { aspect-ratio: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .expanded-card-rail > .case-card, .sale-tiers .sale-benefits article,
  .service-photo-restoration [data-ring-carousel] .examples-carousel-track,
  .service-photo-restoration [data-ring-carousel] .examples-carousel-slide,
  .service-photo-restoration [data-ring-carousel] .examples-carousel-slide figcaption,
  .button, a.button, button.button { transition: none !important; }
  .expanded-card-rail > .case-card > :not(.case-top) { opacity: 1; }
  .expanded-card-rail > .case-card > .case-top > span:first-child { writing-mode: horizontal-tb; transform: none; }
  .service-photo-restoration [data-ring-carousel] .examples-carousel-track { transform: none; }
  .service-photo-restoration [data-ring-carousel] .examples-carousel-slide { display: none; position: static; width: 100%; opacity: 1; transform: none; }
  .service-photo-restoration [data-ring-carousel] .examples-carousel-slide[aria-current="true"] { display: block; }
  .service-photo-restoration [data-ring-carousel] .examples-carousel-track { display: grid; height: auto; }
  .service-photo-restoration [data-ring-carousel] .examples-carousel-slide figcaption { opacity: 1; }
}

/* Keep the interactive rail readable even when a card was first rendered below the fold. */
.expanded-card-rail .case-card[data-reveal], .expanded-card-rail .project-group-heading[data-reveal] { opacity: 1 !important; transform: none !important; }
.service-photo-restoration [data-ring-carousel] .examples-carousel-slide { opacity: 0; }
.service-photo-restoration [data-ring-carousel] .examples-carousel-slide[aria-current="true"] { opacity: 1; }.expanded-card-rail > .project-group-heading + .case-card { flex-grow: 4.1; flex-basis: min(34vw, 340px); border-color: rgba(255,113,128,.58); }
.expanded-card-rail > .project-group-heading + .case-card > :not(.case-top) { opacity: 1; }
.expanded-card-rail > .project-group-heading + .case-card > .case-top > span:first-child { writing-mode: horizontal-tb; transform: none; }@media (min-width: 801px) {
  .expanded-card-rail > .case-card:first-of-type:not([data-case="iburo"]),
  .expanded-card-rail > .project-group-heading + .case-card[data-case="atlas-os"] {
    flex-grow: .55; flex-basis: 78px; border-color: rgba(255,255,255,.1);
  }
  .expanded-card-rail > .case-card:first-of-type:not([data-case="iburo"]) > :not(.case-top),
  .expanded-card-rail > .project-group-heading + .case-card[data-case="atlas-os"] > :not(.case-top) { opacity: 0; }
  .expanded-card-rail > .case-card:first-of-type:not([data-case="iburo"]) > .case-top > span:first-child,
  .expanded-card-rail > .project-group-heading + .case-card[data-case="atlas-os"] > .case-top > span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); }
  .expanded-card-rail > .case-card[data-case="iburo"] { flex-grow: 4.1; flex-basis: min(34vw,340px); border-color: rgba(255,113,128,.58); }
  .expanded-card-rail > .case-card[data-case="iburo"] > :not(.case-top) { opacity: 1; }
  .expanded-card-rail > .case-card[data-case="iburo"] > .case-top > span:first-child { writing-mode: horizontal-tb; transform: none; }
}@media (min-width: 801px) {
  .expanded-card-rail > .case-card:first-of-type:not([data-case="iburo"]):hover,
  .expanded-card-rail > .case-card:first-of-type:not([data-case="iburo"]):focus-visible,
  .expanded-card-rail > .project-group-heading + .case-card[data-case="atlas-os"]:hover,
  .expanded-card-rail > .project-group-heading + .case-card[data-case="atlas-os"]:focus-visible {
    flex-grow: 4.1; flex-basis: min(34vw,340px); border-color: rgba(255,113,128,.58);
  }
  .expanded-card-rail > .case-card:first-of-type:not([data-case="iburo"]):hover > :not(.case-top),
  .expanded-card-rail > .case-card:first-of-type:not([data-case="iburo"]):focus-visible > :not(.case-top),
  .expanded-card-rail > .project-group-heading + .case-card[data-case="atlas-os"]:hover > :not(.case-top),
  .expanded-card-rail > .project-group-heading + .case-card[data-case="atlas-os"]:focus-visible > :not(.case-top) { opacity: 1; }
  .expanded-card-rail > .case-card:first-of-type:not([data-case="iburo"]):hover > .case-top > span:first-child,
  .expanded-card-rail > .case-card:first-of-type:not([data-case="iburo"]):focus-visible > .case-top > span:first-child,
  .expanded-card-rail > .project-group-heading + .case-card[data-case="atlas-os"]:hover > .case-top > span:first-child,
  .expanded-card-rail > .project-group-heading + .case-card[data-case="atlas-os"]:focus-visible > .case-top > span:first-child { writing-mode: horizontal-tb; transform: none; }
}@media (prefers-reduced-motion: reduce) and (min-width: 801px) {
  .expanded-card-rail { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .expanded-card-rail > .project-group-heading { grid-column: 1 / -1; }
  .expanded-card-rail > .case-card, .expanded-card-rail > .case-card[data-case="iburo"],
  .expanded-card-rail > .project-group-heading + .case-card { width: auto; height: 500px; min-width: 0; min-height: 0; flex: none; }
  .expanded-card-rail > .case-card > :not(.case-top) { opacity: 1 !important; }
  .expanded-card-rail > .case-card > .case-top > span:first-child { writing-mode: horizontal-tb !important; transform: none !important; }
  .sale-tiers .sale-benefits article:hover, .sale-tiers .sale-benefits article:focus-within { transform: none; }
  .button:active, a.button:active, button.button:active { transform: none; }
}

/* Keep each project rail to one expanded card while a project is hovered or focused. */
@media (min-width: 801px) {
  .expanded-card-rail:has(> .case-card[data-case="atlas-os"]:hover, > .case-card[data-case="atlas-os"]:focus-visible, > .case-card[data-case="kadam"]:hover, > .case-card[data-case="kadam"]:focus-visible, > .case-card[data-case="azivolt"]:hover, > .case-card[data-case="azivolt"]:focus-visible) > .case-card[data-case="iburo"],
  .expanded-card-rail:has(> .case-card[data-case="atlas-os"]:hover, > .case-card[data-case="atlas-os"]:focus-visible, > .case-card[data-case="kadam"]:hover, > .case-card[data-case="kadam"]:focus-visible, > .case-card[data-case="azivolt"]:hover, > .case-card[data-case="azivolt"]:focus-visible) > .case-card[data-case="iburo"] > :not(.case-top) {
    opacity: 0;
  }
  .expanded-card-rail:has(> .case-card[data-case="atlas-os"]:hover, > .case-card[data-case="atlas-os"]:focus-visible, > .case-card[data-case="kadam"]:hover, > .case-card[data-case="kadam"]:focus-visible, > .case-card[data-case="azivolt"]:hover, > .case-card[data-case="azivolt"]:focus-visible) > .case-card[data-case="iburo"] {
    flex-grow: .55; flex-basis: 78px; border-color: rgba(255,255,255,.1);
  }
  .expanded-card-rail:has(> .case-card[data-case="atlas-os"]:hover, > .case-card[data-case="atlas-os"]:focus-visible, > .case-card[data-case="kadam"]:hover, > .case-card[data-case="kadam"]:focus-visible, > .case-card[data-case="azivolt"]:hover, > .case-card[data-case="azivolt"]:focus-visible) > .case-card[data-case="iburo"] > .case-top > span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); }

  .expanded-card-rail:has(> .case-card[data-case="paving-stones"]:hover, > .case-card[data-case="paving-stones"]:focus-visible, > .case-card[data-case="online-store"]:hover, > .case-card[data-case="online-store"]:focus-visible, > .case-card[data-case="stomatologika"]:hover, > .case-card[data-case="stomatologika"]:focus-visible, > .case-card[data-case="lounge-cafe"]:hover, > .case-card[data-case="lounge-cafe"]:focus-visible) > .project-group-heading + .case-card[data-case="nutriciology"] {
    flex-grow: .55; flex-basis: 78px; border-color: rgba(255,255,255,.1);
  }
  .expanded-card-rail:has(> .case-card[data-case="paving-stones"]:hover, > .case-card[data-case="paving-stones"]:focus-visible, > .case-card[data-case="online-store"]:hover, > .case-card[data-case="online-store"]:focus-visible, > .case-card[data-case="stomatologika"]:hover, > .case-card[data-case="stomatologika"]:focus-visible, > .case-card[data-case="lounge-cafe"]:hover, > .case-card[data-case="lounge-cafe"]:focus-visible) > .project-group-heading + .case-card[data-case="nutriciology"] > :not(.case-top) { opacity: 0; }
  .expanded-card-rail:has(> .case-card[data-case="paving-stones"]:hover, > .case-card[data-case="paving-stones"]:focus-visible, > .case-card[data-case="online-store"]:hover, > .case-card[data-case="online-store"]:focus-visible, > .case-card[data-case="stomatologika"]:hover, > .case-card[data-case="stomatologika"]:focus-visible, > .case-card[data-case="lounge-cafe"]:hover, > .case-card[data-case="lounge-cafe"]:focus-visible) > .project-group-heading + .case-card[data-case="nutriciology"] > .case-top > span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); }

  .expanded-card-rail > .case-card { height: clamp(620px,48vw,760px); }
  .expanded-card-rail > .case-card:first-of-type:not([data-case="iburo"]):hover,
  .expanded-card-rail > .case-card:first-of-type:not([data-case="iburo"]):focus-visible,
  .expanded-card-rail > .project-group-heading + .case-card[data-case="atlas-os"]:hover,
  .expanded-card-rail > .project-group-heading + .case-card[data-case="atlas-os"]:focus-visible { flex-grow: 4.1; }
  .expanded-card-rail > .case-card[data-case="iburo"]:hover,
  .expanded-card-rail > .case-card[data-case="iburo"]:focus-visible,
  .expanded-card-rail > .project-group-heading + .case-card[data-case="nutriciology"]:hover,
  .expanded-card-rail > .project-group-heading + .case-card[data-case="nutriciology"]:focus-visible { flex-grow: 4.1; }
}

/* The globe stays round as the hero column gets wider. */
.hero-globe-wrap { width: min(100%, 520px); height: auto; min-height: 0; aspect-ratio: 1; margin-left: auto; border-radius: 50%; }
.particle-globe { width: 100%; height: 100%; min-height: 0; aspect-ratio: 1; }
@media (max-width: 800px) {
  .hero-globe-wrap { width: 100%; min-height: 0; }
  .particle-globe { min-height: 0; }
}

/* The project rails start fully closed; pointer and keyboard focus open one card. */
@media (min-width: 801px) {
  .expanded-card-rail > .case-card[data-case="iburo"],
  .expanded-card-rail > .project-group-heading + .case-card[data-case="nutriciology"] {
    flex-grow: .55; flex-basis: 78px; border-color: rgba(255,255,255,.1);
  }
  .expanded-card-rail > .case-card[data-case="iburo"] > :not(.case-top),
  .expanded-card-rail > .project-group-heading + .case-card[data-case="nutriciology"] > :not(.case-top) { opacity: 0; }
  .expanded-card-rail > .case-card[data-case="iburo"] > .case-top > span:first-child,
  .expanded-card-rail > .project-group-heading + .case-card[data-case="nutriciology"] > .case-top > span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); }
  .expanded-card-rail > .case-card[data-case="iburo"]:hover,
  .expanded-card-rail > .case-card[data-case="iburo"]:focus-visible,
  .expanded-card-rail > .project-group-heading + .case-card[data-case="nutriciology"]:hover,
  .expanded-card-rail > .project-group-heading + .case-card[data-case="nutriciology"]:focus-visible {
    flex-grow: 4.1; flex-basis: min(34vw,340px); border-color: rgba(255,113,128,.58);
  }
  .expanded-card-rail > .case-card[data-case="iburo"]:hover > :not(.case-top),
  .expanded-card-rail > .case-card[data-case="iburo"]:focus-visible > :not(.case-top),
  .expanded-card-rail > .project-group-heading + .case-card[data-case="nutriciology"]:hover > :not(.case-top),
  .expanded-card-rail > .project-group-heading + .case-card[data-case="nutriciology"]:focus-visible > :not(.case-top) { opacity: 1; }
  .expanded-card-rail > .case-card[data-case="iburo"]:hover > .case-top > span:first-child,
  .expanded-card-rail > .case-card[data-case="iburo"]:focus-visible > .case-top > span:first-child,
  .expanded-card-rail > .project-group-heading + .case-card[data-case="nutriciology"]:hover > .case-top > span:first-child,
  .expanded-card-rail > .project-group-heading + .case-card[data-case="nutriciology"]:focus-visible > .case-top > span:first-child { writing-mode: horizontal-tb; transform: none; }
}

/* Expanded project cards reuse the existing Atlas concept visual and real Stomatologika capture. */
.case-card[data-case="atlas-os"] .atlas-card-preview {
  display: flex; flex: 1 1 auto; min-height: 0; width: 100%; align-items: center; justify-content: center;
  aspect-ratio: auto; padding: clamp(16px,3.4vw,46px);
  background: radial-gradient(ellipse at 70% 30%, rgba(209,59,80,.16), transparent 62%), #171315;
}
.atlas-device { width: min(100%,820px); padding: 10px; border: 1px solid #48464a; border-radius: 13px 13px 5px 5px; background: linear-gradient(145deg,#29272b,#09090b); box-shadow: inset 0 1px 0 #ffffff20,0 22px 44px #0008; }
.atlas-device-screen { overflow: hidden; border: 1px solid #d8d9d5; border-radius: 6px 6px 2px 2px; background: #f5f5f2; color: #252421; }
.atlas-windowbar { display:flex; height:24px; align-items:center; justify-content:space-between; padding:0 10px; background:#e8e9e5; color:#686962; font:clamp(7px,.55vw,9px) var(--mono); letter-spacing:.08em; }
.atlas-workspace { display:flex; min-height:190px; aspect-ratio:1.85; flex-direction:column; justify-content:space-between; padding:clamp(12px,2vw,26px); background:radial-gradient(ellipse at 88% 20%,#f2f3ed 0,#fff 48%,#f3f4f1 100%); }
.atlas-workspace-nav { display:flex; align-items:center; gap:clamp(8px,1.6vw,24px); padding-bottom:10px; border-bottom:1px solid #dedfd9; color:#74756e; font-size:clamp(7px,.62vw,10px); }
.atlas-workspace-nav b { margin-right:auto; color:#292824; font-size:1.2em; }
.atlas-workspace-body { width:100%; max-width:760px; margin:auto 0; }
.atlas-workspace-body > p { margin:0 0 6px; color:#9d3848; font:clamp(7px,.58vw,9px) var(--mono); letter-spacing:.12em; }
.atlas-workspace-body h3 { margin:0 0 14px; color:#242320; font-size:clamp(15px,1.5vw,23px); line-height:1.1; }
.atlas-workspace-modules { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.atlas-workspace-modules > div { display:flex; min-height:56px; flex-direction:column; justify-content:space-between; padding:10px; border:1px solid #e3e2de; border-radius:5px; background:#fff; }
.atlas-workspace-modules span { color:#92928a; font:clamp(6px,.48vw,8px) var(--mono); letter-spacing:.06em; }
.atlas-workspace-modules strong { color:#373631; font-size:clamp(8px,.68vw,11px); font-weight:600; }
.atlas-workspace-foot { display:flex; justify-content:space-between; padding-top:9px; border-top:1px solid #dedfd9; color:#999991; font:clamp(6px,.46vw,8px) var(--mono); letter-spacing:.08em; }
.case-card[data-case="stomatologika"] .case-preview { aspect-ratio:1100/619; object-position:center top; }
@media (max-width: 800px) {
  .case-card[data-case="atlas-os"] .atlas-card-preview { flex: none; aspect-ratio:1.5; }
  .atlas-workspace { min-height:0; padding:12px; }
  .atlas-workspace-nav { gap:7px; }
  .atlas-workspace-modules { gap:5px; }
  .atlas-workspace-modules > div { min-height:42px; padding:6px; }
}


/* The globe artwork replaces the framed project image; keep its circular silhouette free of the old square frame. */
.hero-plate-globe::before { display: none; }

/* Touch targets (44px) and minimum legible type on small screens. */
@media (max-width: 800px) {
  .hero-note a,
  .section-head .text-link,
  .service-card-link,
  .secondary-service a,
  .sales-pitch-grid article a,
  .footer-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-contact { gap: 4px 20px; }
  .footer-contact a { font-size: 13px; }
  .top > .nav.service-nav a,
  .nav.service-nav a { font-size: 12px; }
  .hero-meta, .hero-meta span, .art-label, .eyebrow { font-size: 11px; }
  .ai-chat-launcher-tooltip { font-size: 11px; }
}
/* Chat quick replies must wrap inside the panel instead of overflowing it. */
.ai-chat-suggestion { max-width: 100%; white-space: normal; text-align: left; }
@media (max-width: 800px) { .top .brand { min-height: 44px; } }

/* Mobile: old styles.css hid the submenu accordion with !important; restore it. */
@media (max-width: 800px) {
  .top > .nav.service-nav .nav-dropdown .submenu-toggle { display: inline-grid !important; }
  .top > .nav.service-nav .nav-dropdown.open .nav-submenu { display: flex !important; flex-direction: column; }
  .top > .nav.service-nav .nav-dropdown:not(.open) .nav-submenu { display: none !important; }
  .submenu-toggle { transition: transform .2s var(--ease-sh); }
  .nav-dropdown.open .submenu-toggle { transform: rotate(180deg); }
  /* Keep the hero meta strip on one column so "·" separators never wrap to a line start. */
  .hero-meta { grid-template-columns: 1fr; gap: 10px; }
}

/* Mobile: smaller chat launcher so it covers less of the text underneath. */
@media (max-width: 800px) {
  .ai-chat-launcher { transform: scale(.78); transform-origin: bottom right; right: 8px; bottom: 8px; }
}
/* Mobile: project rail cards must all have the same width; desktop accordion rules must not shrink the first one. */
@media (max-width: 800px) {
  .expanded-card-rail > .case-card,
  .expanded-card-rail > .project-group-heading + .case-card,
  .expanded-card-rail > .case-card[data-case] {
    flex: 0 0 min(84vw, 450px) !important;
    width: min(84vw, 450px);
    min-width: 0;
  }
  .expanded-card-rail > .case-card > :not(.case-top) { opacity: 1 !important; }
  .expanded-card-rail > .case-card > .case-top > span:first-child { writing-mode: horizontal-tb !important; transform: none !important; }
}
/* Mobile submenu toggle: draw the chevron in CSS so a font fallback cannot show a letter "v". */
@media (max-width: 800px) {
  .top > .nav.service-nav .nav-dropdown .submenu-toggle { font-size: 0 !important; position: relative; }
  .top > .nav.service-nav .nav-dropdown .submenu-toggle::after {
    content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  .nav-dropdown.open .submenu-toggle { transform: none; }
  .top > .nav.service-nav .nav-dropdown.open .submenu-toggle::after { transform: translateY(2px) rotate(-135deg); }
}
/* Mobile: the open menu overlays the page instead of pushing it down; the second group heading becomes one slide of the rail. */
@media (max-width: 800px) {
  .top .nav.service-nav.open {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 7px var(--page-gutter) 16px;
    background: #121214; border-bottom: 1px solid var(--line);
    max-height: calc(100dvh - 72px); overflow-y: auto; z-index: 60;
  }
  .expanded-card-rail > .project-group-heading { flex: 0 0 min(70vw, 320px) !important; align-self: center; scroll-snap-align: start; margin: 0; }
}