:root {
  /* Overrides the legacy theme token while old page layouts are retained. */
  --cyan: #f6f2ea;
  --agency-bg: #08090b;
  --agency-surface: #111216;
  --agency-surface-raised: #18191f;
  --agency-ink: #f6f2ea;
  --agency-muted: #aaa9ad;
  --agency-line: rgba(246, 242, 234, .14);
  --agency-line-strong: rgba(246, 242, 234, .28);
  --agency-red: #e34343;
  --agency-red-deep: #9c1f2d;
  --agency-white: #f6f2ea;
  --agency-max: 1240px;
  --agency-radius: 12px;
  --agency-shadow: 0 24px 80px rgba(0, 0, 0, .34);
}

html { scroll-padding-top: 96px; }
body {
  background: var(--agency-bg) !important;
  color: var(--agency-ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .headline, .page-hero h1 { text-shadow: none !important; }
body::before {
  background-image:
    linear-gradient(rgba(255,255,255,.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.027) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
  mask-image: linear-gradient(180deg, black, transparent 75%) !important;
}
.boot, .scanlines, .progress { display: none !important; }
body.is-loading { overflow: auto !important; }
body:not(.page-home) main { padding-top: 78px; }

html { scrollbar-color: rgba(227,67,67,.9) #090a0d !important; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #090a0d; border-left: 1px solid rgba(246,242,234,.09); }
::-webkit-scrollbar-thumb { border: 3px solid #090a0d; border-radius: 999px; background: linear-gradient(180deg, #f05050, #a51f2e); box-shadow: 0 0 16px rgba(227,67,67,.28); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff6868, #c42a38); }

/* Custom cursor is desktop-only; touch and reduced-motion users keep native controls. */
@media (hover: hover) and (pointer: fine) {
  html:has(body.custom-cursor), body.custom-cursor, body.custom-cursor *, body.custom-cursor *::before, body.custom-cursor *::after { cursor: none !important; }
  .cursor { display: block !important; z-index: 1000; width: 30px; height: 30px; border: 1px solid rgba(246,242,234,.68); border-radius: 50%; background: radial-gradient(circle at center, var(--agency-red) 0 2px, transparent 3px), linear-gradient(var(--agency-red), var(--agency-red)) center / 1px 100% no-repeat, linear-gradient(90deg, var(--agency-red), var(--agency-red)) center / 100% 1px no-repeat; box-shadow: 0 0 0 4px rgba(227,67,67,.11), 0 0 18px rgba(227,67,67,.32); mix-blend-mode: normal; transform: translate3d(var(--cursor-x, -120px), var(--cursor-y, -120px), 0) translate(-50%, -50%); }
  .cursor::after { inset: auto; width: 7px; height: 7px; top: 50%; left: 50%; border: 1px solid var(--agency-white); border-radius: 2px; background: var(--agency-red); box-shadow: none; transform: translate(-50%, -50%) rotate(45deg); }
  .cursor.is-hot { width: 44px; height: 44px; border-color: var(--agency-red); background: radial-gradient(circle at center, var(--agency-white) 0 2px, transparent 3px), linear-gradient(var(--agency-red), var(--agency-red)) center / 1px 100% no-repeat, linear-gradient(90deg, var(--agency-red), var(--agency-red)) center / 100% 1px no-repeat; box-shadow: 0 0 0 5px rgba(227,67,67,.14), 0 0 26px rgba(227,67,67,.36); }
  .cursor.is-hot::after { inset: auto; background: var(--agency-white); box-shadow: none; }
  .cursor.is-down:not(.is-text) { width: 22px; height: 22px; border-color: var(--agency-white); background: radial-gradient(circle at center, var(--agency-white) 0 2px, transparent 3px), linear-gradient(var(--agency-red), var(--agency-red)) center / 1px 100% no-repeat, linear-gradient(90deg, var(--agency-red), var(--agency-red)) center / 100% 1px no-repeat; }
  .cursor.is-text { width: 3px; height: 34px; border: 0; border-radius: 0; background: var(--agency-white); box-shadow: 0 0 15px rgba(246,242,234,.55); transform: translate3d(var(--cursor-x, -120px), var(--cursor-y, -120px), 0) translate(-50%, -50%); }
  .cursor.is-text::after { display: none; }
}

/* One independent cursor layer. The legacy cursor element remains hidden. */
.cursor, .agency-cursor { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  html, body, body * { cursor: url("assets/cursor-default.svg") 16 16, crosshair !important; }
  a, button, summary, [role="button"], input, textarea, select, label { cursor: url("assets/cursor-hover.svg") 20 20, pointer !important; }
}
@media (hover: hover) and (pointer: fine) {
  body.agency-cursor-active, body.agency-cursor-active *, body.agency-cursor-active *::before, body.agency-cursor-active *::after { cursor: none !important; }
  .agency-cursor { position: fixed; top: 0; left: 0; z-index: 2147483647; width: 28px; height: 28px; border: 1px solid rgba(246,242,234,.78); border-radius: 50%; background: radial-gradient(circle at center, var(--agency-red) 0 2px, transparent 3px), linear-gradient(var(--agency-red), var(--agency-red)) center / 1px 100% no-repeat, linear-gradient(90deg, var(--agency-red), var(--agency-red)) center / 100% 1px no-repeat; box-shadow: 0 0 0 4px rgba(227,67,67,.10), 0 0 18px rgba(227,67,67,.27); opacity: 0; pointer-events: none; transform: translate3d(-120px, -120px, 0) translate(-50%, -50%); transition: width .14s ease, height .14s ease, opacity .12s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease; will-change: transform, width, height; }
  .agency-cursor::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border: 1px solid var(--agency-white); border-radius: 2px; background: var(--agency-red); transform: translate(-50%, -50%) rotate(45deg); }
  .agency-cursor.is-visible { opacity: 1; }
  .agency-cursor.is-hot { width: 42px; height: 42px; border-color: var(--agency-red); background: radial-gradient(circle at center, var(--agency-white) 0 2px, transparent 3px), linear-gradient(var(--agency-red), var(--agency-red)) center / 1px 100% no-repeat, linear-gradient(90deg, var(--agency-red), var(--agency-red)) center / 100% 1px no-repeat; box-shadow: 0 0 0 5px rgba(227,67,67,.14), 0 0 24px rgba(227,67,67,.34); }
  .agency-cursor.is-hot::after { background: var(--agency-white); }
  .agency-cursor.is-down { width: 20px; height: 20px; border-color: var(--agency-white); }
  .agency-cursor.is-text { width: 3px; height: 32px; border: 0; border-radius: 0; background: var(--agency-white); box-shadow: 0 0 15px rgba(246,242,234,.55); }
  .agency-cursor.is-text::after { display: none; }
}

.site-header {
  min-height: 76px;
  padding: 14px clamp(18px, 4vw, 56px) !important;
  background: rgba(8, 9, 11, .82) !important;
  border-bottom: 1px solid var(--agency-line) !important;
  backdrop-filter: blur(18px) saturate(1.1);
}
.brand { gap: 10px !important; }
.brand strong, footer strong { color: var(--agency-ink); font-family: inherit !important; font-size: .95rem !important; font-weight: 780; letter-spacing: .02em !important; }
.brand small { color: var(--agency-muted) !important; font-size: .68rem !important; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { width: 46px !important; height: 38px !important; clip-path: none !important; border: 0 !important; background: url("assets/techshinobi-logo-cropped.png") center / contain no-repeat !important; box-shadow: none !important; }
.brand-mark::before, .brand-mark::after { display: none !important; }
.brand-mark svg { display: none !important; }
.nav-links { display: flex; align-items: center; gap: clamp(13px, 2vw, 28px); }
.nav-links a { color: #d3d0cb !important; font-size: .84rem; font-weight: 650; letter-spacing: .02em; }
.nav-links a { position: relative; padding: 8px 0; }
.nav-links a::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--agency-red); transform: scaleX(0); transform-origin: right; transition: transform .22s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--agency-ink) !important; }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-header.is-scrolled { background: rgba(8, 9, 11, .95) !important; box-shadow: 0 10px 38px rgba(0,0,0,.22); }
.nav-cta, .button.primary {
  border: 1px solid var(--agency-red) !important;
  border-radius: 7px !important;
  color: #fff8f2 !important;
  background: var(--agency-red) !important;
  box-shadow: 0 10px 28px rgba(227,67,67,.18) !important;
}
.nav-cta:hover, .button.primary:hover { background: #f25555 !important; transform: translateY(-2px); }
.button.ghost { border: 1px solid var(--agency-line-strong) !important; border-radius: 7px !important; background: transparent !important; color: var(--agency-ink) !important; }
.button.ghost:hover { border-color: var(--agency-white) !important; background: rgba(246,242,234,.08) !important; transform: translateY(-2px); }

/* Shared action treatment: a crisp chamfered control with a visible direction cue. */
.button, .nav-cta { isolation: isolate; min-height: 52px; gap: 12px; padding: 0 18px 0 20px; border-radius: 0 !important; font-size: .86rem; font-weight: 820; letter-spacing: .01em; line-height: 1; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.button::before, .nav-cta::before { content: "→"; order: 2; color: currentColor; font-size: 1.05rem; font-weight: 500; line-height: 1; transform: translateX(0); transition: transform .18s ease; }
.button::after, .nav-cta::after { z-index: -1; pointer-events: none; }
.button:hover::before, .nav-cta:hover::before { transform: translateX(4px); }
.button:active, .nav-cta:active { transform: translateY(0) scale(.975); }
.button.primary, .nav-cta { border-color: rgba(255,109,109,.9) !important; background: linear-gradient(110deg, #c92d39, #ef4949 52%, #bd2433) !important; box-shadow: 0 10px 24px rgba(227,67,67,.18), inset 0 1px rgba(255,255,255,.2) !important; }
.button.primary:hover, .nav-cta:hover { border-color: #ff8585 !important; background: linear-gradient(110deg, #de3744, #fa5757 52%, #d22d3b) !important; box-shadow: 0 14px 30px rgba(227,67,67,.28), inset 0 1px rgba(255,255,255,.24) !important; }
.button.ghost { border-color: rgba(246,242,234,.3) !important; background: rgba(8,9,11,.36) !important; box-shadow: inset 0 1px rgba(255,255,255,.045) !important; }
.button.ghost:hover { border-color: rgba(227,67,67,.78) !important; background: rgba(227,67,67,.09) !important; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.16) !important; }
.button.is-disabled, .button[aria-disabled="true"], .button:disabled { transform: none !important; box-shadow: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--agency-white); outline-offset: 3px; }

.agency-menu-toggle { display: none; width: 43px; height: 43px; padding: 0; border: 1px solid var(--agency-line-strong); border-radius: 7px; background: transparent; color: var(--agency-ink); }
.agency-menu-toggle span { display: block; width: 17px; height: 1px; margin: 4px auto; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.agency-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.agency-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.agency-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.agency-shell { width: min(calc(100% - 40px), var(--agency-max)); margin-inline: auto; }
.agency-eyebrow, .kicker { color: var(--agency-red) !important; font-size: .72rem !important; font-weight: 800 !important; letter-spacing: .14em !important; text-transform: uppercase; }
.agency-title { max-width: 700px; margin: 0; color: var(--agency-ink); font-size: clamp(3.1rem, 4.55vw, 4.7rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.agency-title-line { display: block; }
.agency-title .accent { color: var(--agency-red); }
.agency-copy { max-width: 61ch; margin: 0; color: var(--agency-muted); font-size: clamp(1rem, 1.55vw, 1.2rem); line-height: 1.7; }
.agency-section { padding: clamp(76px, 11vw, 150px) 0; border-top: 1px solid var(--agency-line); }
.agency-section-header { display: grid; grid-template-columns: minmax(0, .95fr) minmax(260px, .65fr); gap: 28px; align-items: end; margin-bottom: 42px; }
.agency-section-header h2 { max-width: 15ch; margin: 10px 0 0; color: var(--agency-ink); font-size: clamp(2.2rem, 4.5vw, 4.6rem); line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
.agency-section-header p { margin: 0; color: var(--agency-muted); line-height: 1.7; }

.agency-home-hero { position: relative; min-height: min(850px, 100svh); display: grid; align-items: center; overflow: clip; background: #08090b url("assets/techshinobi-hero.png") center center / cover no-repeat; }
.agency-home-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8,9,11,.98) 0%, rgba(8,9,11,.93) 28%, rgba(8,9,11,.56) 48%, rgba(8,9,11,.16) 75%, rgba(8,9,11,.26) 100%), linear-gradient(180deg, rgba(8,9,11,.24), rgba(8,9,11,.52)); }
.agency-home-hero .agency-shell { position: relative; z-index: 1; display: block; padding: 146px 0 80px; }
.agency-home-hero .agency-shell > div:first-child { max-width: 610px; }
.agency-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.agency-trust-points { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.agency-trust-points span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--agency-line); color: #d8d4ce; font-size: .76rem; }
.agency-trust-points span::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--agency-red); box-shadow: 0 0 14px rgba(227,67,67,.7); }

.agency-capability-band { padding: 16px 0 26px; border-top: 1px solid var(--agency-line); border-bottom: 1px solid var(--agency-line); background: linear-gradient(115deg, rgba(255,255,255,.025), transparent 42%), #101115; }
.agency-capability-band h2 { margin: 0 0 14px; text-align: center; color: var(--agency-ink); font-size: clamp(1.05rem, 1.8vw, 1.35rem); letter-spacing: -.025em; }
.agency-capability-band h2 span { color: var(--agency-red); }
.agency-capability-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.agency-capability-grid article { position: relative; isolation: isolate; min-height: 132px; padding: 20px 17px 18px; overflow: hidden; border: 1px solid rgba(246,242,234,.12); border-radius: 7px; background: linear-gradient(145deg, rgba(27,28,34,.86), rgba(10,11,14,.9)); box-shadow: inset 0 1px rgba(255,255,255,.025); transition: transform .24s cubic-bezier(.2,.75,.2,1), border-color .24s ease, background .24s ease, box-shadow .24s ease; }
.agency-capability-grid article::before { content: ""; position: absolute; z-index: -1; top: 0; right: 18px; left: 18px; height: 2px; background: linear-gradient(90deg, transparent, var(--agency-red), transparent); opacity: .52; transform: scaleX(.35); transition: transform .28s ease, opacity .28s ease; }
.agency-capability-grid article::after { content: ""; position: absolute; z-index: -1; right: -38px; bottom: -42px; width: 116px; height: 116px; border: 1px solid rgba(227,67,67,.23); border-radius: 50%; box-shadow: 0 0 0 18px rgba(227,67,67,.025), 0 0 0 36px rgba(227,67,67,.018); transition: transform .35s ease, opacity .35s ease; }
.agency-capability-grid article:hover { border-color: rgba(227,67,67,.56); background: linear-gradient(145deg, rgba(36,27,30,.9), rgba(12,12,15,.96)); box-shadow: 0 16px 35px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.04); transform: translateY(-5px); }
.agency-capability-grid article:hover::before { opacity: 1; transform: scaleX(1); }
.agency-capability-grid article:hover::after { opacity: .82; transform: translate(-9px, -9px); }
.agency-capability-grid span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(227,67,67,.42); border-radius: 5px; color: #ff7373; font-size: .65rem; font-weight: 850; letter-spacing: .06em; background: rgba(227,67,67,.09); }
.agency-capability-grid h3 { margin: 17px 0 5px; color: var(--agency-ink); font-size: .93rem; letter-spacing: -.025em; }
.agency-capability-grid p { margin: 0; color: var(--agency-muted); font-size: .74rem; line-height: 1.5; }
.agency-browser { position: relative; isolation: isolate; min-height: 470px; padding: 12px; border: 1px solid rgba(246,242,234,.22); border-radius: 12px; background: #14161a; box-shadow: var(--agency-shadow), 0 0 0 1px rgba(227,67,67,.09) inset; transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); }
.agency-browser::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, rgba(227,67,67,.8), transparent 36%, rgba(246,242,234,.34)); filter: blur(20px); opacity: .3; }
.agency-browser-bar { display: flex; align-items: center; gap: 6px; padding: 0 4px 10px; color: #89878a; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.agency-browser-bar i { width: 7px; height: 7px; border-radius: 999px; background: #e34343; }
.agency-browser-bar i:nth-child(2) { background: #e2b85a; }
.agency-browser-bar i:nth-child(3) { background: #74b494; }
.agency-browser-bar span { margin-left: 8px; }
.agency-browser-screen { position: relative; height: 425px; overflow: hidden; background: linear-gradient(135deg, #17191d, #0c0d10); }
.agency-browser-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: .74; filter: saturate(.78) contrast(1.07); }
.agency-browser-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 32%, rgba(8,9,11,.88)), linear-gradient(90deg, rgba(227,67,67,.18), transparent 45%); }
.agency-browser-caption { position: absolute; z-index: 1; left: 24px; bottom: 22px; right: 24px; }
.agency-browser-caption small { display: block; color: var(--agency-red); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; }
.agency-browser-caption strong { display: block; margin-top: 7px; font-size: clamp(1.2rem, 2.4vw, 2rem); line-height: 1.04; }

.agency-work-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 20px; }
.agency-case { position: relative; min-height: 570px; overflow: hidden; border: 1px solid var(--agency-line); background: var(--agency-surface); }
.agency-case img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: .72; transition: transform .6s cubic-bezier(.2,.75,.2,1), opacity .4s ease; }
.agency-case:hover img { transform: scale(1.035); opacity: .9; }
.agency-case::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(8,9,11,.94)); }
.agency-case-copy { position: absolute; z-index: 1; inset: auto 28px 28px; }
.agency-case-copy span { color: var(--agency-red); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.agency-case-copy h3 { margin: 10px 0 8px; font-size: clamp(2rem, 3.7vw, 3.6rem); line-height: .95; letter-spacing: -.05em; }
.agency-case-copy p { max-width: 48ch; margin: 0; color: #d7d1cb; line-height: 1.6; }
.agency-case-meta { display: grid; gap: 14px; }
.agency-meta-card { padding: 25px; border: 1px solid var(--agency-line); background: linear-gradient(145deg, var(--agency-surface-raised), var(--agency-surface)); }
.agency-meta-card strong { display: block; color: var(--agency-red); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.agency-meta-card p { margin: 10px 0 0; color: var(--agency-muted); line-height: 1.55; }

.agency-portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.agency-portfolio-grid-single { grid-template-columns: minmax(0, 1fr); }
.agency-portfolio-grid-single .agency-project { min-height: min(600px, 47vw); }
.agency-project { position: relative; min-height: 370px; overflow: hidden; border: 1px solid var(--agency-line); border-radius: 8px; background: var(--agency-surface); box-shadow: 0 12px 30px rgba(0,0,0,.14); }
.agency-project::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,11,.06) 30%, rgba(8,9,11,.92)); pointer-events: none; }
.agency-project img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: .75; filter: saturate(.8) contrast(1.05); transition: transform .6s cubic-bezier(.2,.75,.2,1), opacity .35s ease, filter .35s ease; }
.agency-project:hover img { transform: scale(1.045); opacity: .96; filter: saturate(1) contrast(1); }
.agency-project div { position: absolute; z-index: 1; inset: auto 20px 20px; padding-left: 14px; border-left: 2px solid var(--agency-red); }
.agency-project span { color: var(--agency-red); font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.agency-project h3 { margin: 8px 0 5px; color: var(--agency-ink); font-size: clamp(1.4rem, 2.25vw, 2rem); line-height: 1; letter-spacing: -.045em; }
.agency-project p { margin: 0; color: #d7d1cb; font-size: .86rem; line-height: 1.5; }
.agency-project small { display: inline-flex; align-items: center; gap: 9px; margin-top: 17px; color: var(--agency-ink); font-size: .77rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.agency-project small b { color: var(--agency-red); font-size: 1.1rem; transition: transform .22s ease; }
.agency-project:hover small b { transform: translateX(5px); }
.agency-work-action { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 18px 0 0; border-top: 1px solid var(--agency-line); }
.agency-work-action p { margin: 0; color: var(--agency-muted); }

.agency-service-grid, .agency-benefit-grid, .agency-process-grid, .agency-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.agency-service, .agency-benefit, .agency-process, .agency-price { position: relative; padding: 26px; border: 1px solid var(--agency-line); border-radius: 7px; background: linear-gradient(145deg, rgba(24,25,31,.92), rgba(14,15,19,.92)); transition: border-color .25s ease, transform .25s ease, background .25s ease, box-shadow .25s ease; }
.agency-service::before, .agency-benefit::before { content: ""; position: absolute; top: 0; right: 24px; left: 24px; height: 2px; background: linear-gradient(90deg, transparent, var(--agency-red), transparent); opacity: .4; transition: opacity .25s ease, transform .25s ease; transform: scaleX(.45); }
.agency-service:hover, .agency-benefit:hover, .agency-process:hover, .agency-price:hover { border-color: rgba(227,67,67,.65); background: linear-gradient(145deg, #231719, #111217); box-shadow: 0 18px 34px rgba(0,0,0,.18); transform: translateY(-4px); }
.agency-service:hover::before, .agency-benefit:hover::before { opacity: 1; transform: scaleX(1); }
.agency-service .agency-number, .agency-benefit .agency-number, .agency-process .agency-number { color: var(--agency-red); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.agency-service h3, .agency-benefit h3, .agency-process h3 { margin: 44px 0 10px; color: var(--agency-ink); font-size: 1.35rem; letter-spacing: -.03em; }
.agency-service p, .agency-benefit p, .agency-process p { margin: 0; color: var(--agency-muted); line-height: 1.62; }
.agency-service svg { width: 26px; height: 26px; color: var(--agency-red); }
.agency-process-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.agency-process { min-height: 220px; padding-top: 30px; background: linear-gradient(180deg, rgba(30,20,23,.48), rgba(14,15,19,.94) 38%); }
.agency-process h3 { margin-top: 54px; font-size: 1.08rem; }
.agency-process::before { content: ""; position: absolute; left: 25px; top: 22px; width: calc(100% - 25px); height: 1px; background: linear-gradient(90deg, var(--agency-red), rgba(227,67,67,.12)); }
.agency-process::after { content: ""; position: absolute; top: 17px; left: 20px; width: 10px; height: 10px; border: 2px solid var(--agency-red); border-radius: 999px; background: var(--agency-bg); box-shadow: 0 0 0 4px rgba(227,67,67,.08); }

.agency-price { display: flex; flex-direction: column; min-height: 430px; overflow: hidden; }
.agency-price.is-featured { border-color: rgba(227,67,67,.72); box-shadow: 0 18px 56px rgba(227,67,67,.12), inset 0 1px rgba(255,255,255,.06); }
.agency-price.is-featured::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--agency-red-deep), #ff5a5a, var(--agency-red-deep)); }

/* Shared information-card language, based on the homepage capability tiles. */
.agency-service, .agency-benefit, .agency-process, .service, .proof-item, .expectation, .step, .support-card { overflow: hidden; isolation: isolate; min-height: 184px; background: linear-gradient(145deg, rgba(27,28,34,.88), rgba(10,11,14,.94)) !important; box-shadow: inset 0 1px rgba(255,255,255,.025); }
.agency-service::after, .agency-benefit::after, .service::after, .proof-item::after, .expectation::after, .support-card::after { content: ""; position: absolute; z-index: -1; right: -44px; bottom: -48px; width: 126px; height: 126px; border: 1px solid rgba(227,67,67,.22); border-radius: 50%; box-shadow: 0 0 0 18px rgba(227,67,67,.022), 0 0 0 36px rgba(227,67,67,.014); transition: transform .35s ease, opacity .35s ease; }
.agency-service:hover::after, .agency-benefit:hover::after, .service:hover::after, .proof-item:hover::after, .expectation:hover::after, .support-card:hover::after { opacity: .9; transform: translate(-9px, -9px); }
.agency-service .agency-number, .agency-benefit .agency-number, .agency-process .agency-number, .service > span, .proof-item > span, .expectation > span, .step > strong { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(227,67,67,.45); border-radius: 5px; color: #ff7373 !important; font-size: .65rem !important; font-weight: 850 !important; letter-spacing: .06em; background: rgba(227,67,67,.09); }
.detail-panel > span, .service-link > span { display: grid !important; width: 29px; height: 29px; place-items: center; margin: 0 !important; border: 1px solid rgba(227,67,67,.45); border-radius: 5px; color: #ff7373 !important; font-size: .65rem !important; font-weight: 850 !important; letter-spacing: .06em; background: rgba(227,67,67,.09); }
.agency-service h3, .agency-benefit h3, .agency-process h3, .service h3, .proof-item h3, .expectation h3, .step h3, .support-card h3 { margin-top: 18px; }
.detail-panel h3, .service-link h3 { margin-top: 18px !important; }
.agency-process { padding-top: 34px; }
.agency-process .agency-number { position: relative; z-index: 1; }
.agency-process::before { left: 38px; top: 48px; width: calc(100% - 38px); }
.agency-process::after { top: 43px; left: 33px; }
.agency-price > span { color: var(--agency-red); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.agency-price h3 { margin: 22px 0 9px; font-size: 1.65rem; letter-spacing: -.04em; }
.agency-price strong { margin-bottom: 18px; font-size: clamp(2.1rem, 4vw, 3.1rem); letter-spacing: -.06em; }
.agency-price p { color: var(--agency-muted); line-height: 1.55; }
.agency-price ul { display: grid; gap: 10px; padding: 0; margin: 22px 0 28px; list-style: none; color: #d8d3cd; font-size: .92rem; }
.agency-price li::before { content: "✓"; margin-right: 8px; color: var(--agency-red); }
.agency-price .button { margin-top: auto; }
.agency-pricing-note { margin: 20px 0 0; color: var(--agency-muted); font-size: .88rem; }

.agency-quote { padding: clamp(32px, 6vw, 68px); border: 1px solid rgba(227,67,67,.5); background: linear-gradient(125deg, rgba(227,67,67,.16), rgba(17,18,22,.9) 46%, rgba(246,242,234,.045)); }
.agency-quote h2 { max-width: 17ch; margin: 10px 0 16px; font-size: clamp(2.2rem, 4.8vw, 4.8rem); line-height: .97; letter-spacing: -.055em; }
.agency-quote p { max-width: 57ch; color: #d0cbc5; line-height: 1.65; }

.agency-contact { display: grid; grid-template-columns: minmax(0,.75fr) minmax(320px,1fr); gap: clamp(32px, 7vw, 96px); align-items: start; }
.agency-contact-copy h1, .agency-contact-copy h2 { margin: 10px 0 16px; font-size: clamp(2.5rem, 5vw, 5.3rem); line-height: .95; letter-spacing: -.06em; }
.agency-contact-copy p { max-width: 48ch; color: var(--agency-muted); line-height: 1.7; }
.agency-contact-email { color: var(--agency-white); font-weight: 700; }
.agency-form { display: grid; gap: 16px; padding: clamp(22px, 4vw, 38px); border: 1px solid var(--agency-line); background: var(--agency-surface); }
.agency-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.agency-form label { display: grid; gap: 8px; color: #d9d4ce; font-size: .8rem; font-weight: 700; }
.agency-form input, .agency-form select, .agency-form textarea { width: 100%; min-height: 46px; padding: 11px 12px; border: 1px solid rgba(246,242,234,.2); border-radius: 5px; color: var(--agency-ink); background: #0d0e11; }
.agency-form textarea { min-height: 132px; resize: vertical; }
.agency-form input::placeholder, .agency-form textarea::placeholder { color: #79777a; }
.agency-form .form-status { min-height: 1.3em; margin: 0; color: var(--agency-muted); }
.agency-form .form-status.is-success { color: #9ed7a9; }
.agency-form .form-status.is-error { color: #ff8989; }
.agency-form .honeypot { position: absolute; left: -10000px; }

.agency-testimonial { padding: 28px; border: 1px dashed var(--agency-line-strong); color: var(--agency-muted); }
.agency-testimonial strong { display: block; margin-bottom: 8px; color: var(--agency-ink); }
.agency-footer { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, .6fr)); gap: 28px; width: min(calc(100% - 96px), var(--agency-max)); margin: 0 auto; padding: 58px 48px 32px; box-sizing: border-box; border-top: 1px solid var(--agency-line); }
.agency-footer h3 { margin: 0 0 12px; color: var(--agency-ink); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.agency-footer p, .agency-footer a { color: var(--agency-muted); font-size: .88rem; line-height: 1.65; }
.agency-footer nav { display: grid; gap: 7px; }
.agency-footer a:hover { color: var(--agency-ink); }
.agency-copyright { width: min(calc(100% - 96px), var(--agency-max)); margin: 0 auto; padding: 18px 48px 30px; box-sizing: border-box; border-top: 1px solid var(--agency-line); color: #7f7d80; font-size: .78rem; }
body > footer { display: none !important; }
body > footer.agency-footer { display: grid !important; }

/* Existing page content inherits the new system while preserving page copy and links. */
.page-hero, .section, .case-study, .contact, .page-cta, .audit-band { width: min(calc(100% - 40px), var(--agency-max)) !important; margin-inline: auto !important; }
.page-hero { padding: clamp(112px, 16vw, 178px) 0 clamp(56px, 9vw, 104px) !important; border-bottom: 1px solid var(--agency-line); background: transparent !important; }
.page-hero h1 { max-width: 15ch; color: var(--agency-ink) !important; font-size: clamp(3rem, 7vw, 6.8rem) !important; line-height: .94 !important; letter-spacing: -.06em !important; }
.page-hero > p:not(.kicker), .section-head > p, .contact-copy > p, .page-cta > p, .audit-band p { color: var(--agency-muted) !important; line-height: 1.7; }
.section, .case-study, .contact, .page-cta, .audit-band { padding: clamp(68px, 10vw, 130px) 0 !important; border-top: 1px solid var(--agency-line); }
.section-head h2, .contact-copy h2, .page-cta h2, .audit-band h2 { color: var(--agency-ink) !important; font-size: clamp(2.15rem, 4.7vw, 4.5rem) !important; line-height: .98 !important; letter-spacing: -.05em !important; }
.service-grid, .proof-grid, .expectation-grid, .pricing-grid, .timeline, .faq-grid { gap: 14px !important; }
.service, .proof-item, .expectation, .price-card, .step, .faq-grid details, .contact-form, .deposit-table, .scanner-panel, .support-card { border: 1px solid var(--agency-line) !important; border-radius: 0 !important; background: var(--agency-surface) !important; box-shadow: none !important; }
.service, .proof-item, .expectation, .step, .support-card { border-radius: 7px !important; }
.service, .proof-item, .expectation, .step, .support-card { background: linear-gradient(145deg, rgba(27,28,34,.88), rgba(10,11,14,.94)) !important; box-shadow: inset 0 1px rgba(255,255,255,.025) !important; }
.service, .proof-item, .expectation, .price-card, .step { padding: 26px !important; }
.service:hover, .proof-item:hover, .expectation:hover, .price-card:hover, .step:hover { border-color: rgba(227,67,67,.62) !important; transform: translateY(-3px); }
.service h3, .proof-item h3, .expectation h3, .price-card h3, .step h3 { color: var(--agency-ink) !important; letter-spacing: -.035em; }
.service p, .proof-item p, .expectation p, .price-card span, .step p, .faq-grid p { color: var(--agency-muted) !important; line-height: 1.62; }
.service > span, .proof-item > span, .expectation > span, .step > strong, .price-card > p { color: var(--agency-red) !important; font-weight: 800 !important; }
.price-card.featured { border-color: rgba(227,67,67,.75) !important; background: linear-gradient(150deg, rgba(227,67,67,.13), var(--agency-surface)) !important; }
.price-card strong { color: var(--agency-ink) !important; font-size: clamp(2rem, 4vw, 3rem) !important; }
.feature-list li, .price-card li { color: #d8d3cd !important; }
.feature-list li::before, .price-card li::before { color: var(--agency-red) !important; }
.contact { grid-template-columns: minmax(0,.76fr) minmax(320px,1fr) !important; gap: clamp(32px, 7vw, 96px) !important; align-items: start !important; }
.contact-form { display: grid; gap: 16px; padding: clamp(22px, 4vw, 38px) !important; }
.contact-form label { color: #d8d3cd !important; font-size: .8rem; font-weight: 700; }
.contact-form input, .contact-form textarea, .contact-form select { border: 1px solid rgba(246,242,234,.2) !important; border-radius: 5px !important; color: var(--agency-ink) !important; background: #0d0e11 !important; }
.audit-band, .page-cta { border: 1px solid rgba(227,67,67,.5) !important; padding: clamp(30px, 6vw, 64px) !important; background: linear-gradient(125deg, rgba(227,67,67,.14), rgba(17,18,22,.92) 55%, rgba(246,242,234,.045)) !important; }
.case-study { display: grid !important; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr) !important; gap: clamp(32px, 6vw, 88px) !important; align-items: center !important; }
.case-media { border: 1px solid var(--agency-line) !important; background: var(--agency-surface) !important; }
.faq-grid details summary { color: var(--agency-ink) !important; }
.footer-links a { color: var(--agency-muted) !important; }

/* The remaining page panels use the same surface, trace and corner motif. */
.agency-price, .price-card, .service-link, .detail-panel, .faq-grid details, .contact-form, .project-brief-form, .agency-form, .checkout-panel, .deposit-table, .scanner-panel, .agency-meta-card, .audit-band, .page-cta, .policy-block, .policy-side { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--agency-line) !important; border-radius: 7px !important; background: linear-gradient(145deg, rgba(27,28,34,.9), rgba(10,11,14,.95)) !important; box-shadow: inset 0 1px rgba(255,255,255,.025) !important; }
.agency-price::after, .price-card::after, .service-link::after, .detail-panel::after, .faq-grid details::after, .contact-form::after, .project-brief-form::after, .agency-form::after, .checkout-panel::after, .deposit-table::after, .scanner-panel::after, .agency-meta-card::after, .audit-band::after, .page-cta::after, .policy-block::after, .policy-side::after { content: ""; position: absolute; z-index: -1; right: -48px; bottom: -52px; width: 132px; height: 132px; border: 1px solid rgba(227,67,67,.2); border-radius: 50%; box-shadow: 0 0 0 18px rgba(227,67,67,.02), 0 0 0 36px rgba(227,67,67,.012); }
.agency-price::before, .price-card::before, .service-link::before, .detail-panel::before, .faq-grid details::before, .contact-form::before, .project-brief-form::before, .agency-form::before, .checkout-panel::before, .deposit-table::before, .scanner-panel::before, .agency-meta-card::before, .policy-block::before, .policy-side::before { content: ""; position: absolute; z-index: 1; top: 0; right: 20px; left: 20px; height: 2px; background: linear-gradient(90deg, transparent, var(--agency-red), transparent); opacity: .48; }
.agency-price:hover, .price-card:hover, .service-link:hover, .detail-panel:hover, .faq-grid details:hover, .checkout-panel:hover, .scanner-panel:hover, .policy-block:hover, .policy-side:hover { border-color: rgba(227,67,67,.65) !important; box-shadow: 0 16px 34px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.045) !important; transform: translateY(-3px); }
.price-card.featured, .agency-price.is-featured { border-color: rgba(227,67,67,.76) !important; background: linear-gradient(145deg, rgba(57,23,28,.92), rgba(12,12,15,.96)) !important; }
.agency-price.is-featured::before { right: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--agency-red-deep), #ff5a5a, var(--agency-red-deep)); opacity: 1; }

.proof-grid-single { grid-template-columns: minmax(0, 1fr) !important; background: transparent !important; }
.business-proof-feature { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 6vw, 80px); min-height: 250px; padding: clamp(28px, 5vw, 54px) !important; }
.business-proof-feature span { display: grid; width: 29px; height: 29px; place-items: center; margin: 0; border: 1px solid rgba(227,67,67,.45); border-radius: 5px; color: #ff7373; font-size: .65rem; font-weight: 850; letter-spacing: .06em; background: rgba(227,67,67,.09); }
.business-proof-feature h3 { font-size: clamp(1.8rem, 3.2vw, 3rem) !important; }
.business-proof-feature p { max-width: 60ch; }
.business-proof-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 720px) {
  .business-proof-feature { grid-template-columns: 1fr; }
  .business-proof-actions { justify-content: flex-start; }
}

/* Payment choices retain their operational layout but use the same visual system. */
.payment-option { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--agency-line) !important; border-radius: 7px !important; background: linear-gradient(145deg, rgba(27,28,34,.9), rgba(10,11,14,.95)) !important; box-shadow: inset 0 1px rgba(255,255,255,.025) !important; }
.payment-option::before { content: ""; position: absolute; z-index: 1; top: 0; right: 18px; left: 18px; height: 2px; background: linear-gradient(90deg, transparent, var(--agency-red), transparent); opacity: .48; }
.payment-option::after { content: ""; position: absolute; z-index: -1; right: -44px; bottom: -48px; width: 122px; height: 122px; border: 1px solid rgba(227,67,67,.2); border-radius: 50%; box-shadow: 0 0 0 18px rgba(227,67,67,.02); }
.payment-option:hover, .payment-option.is-selected { border-color: rgba(227,67,67,.72) !important; background: linear-gradient(145deg, rgba(57,23,28,.9), rgba(12,12,15,.96)) !important; box-shadow: 0 14px 30px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.05) !important; }
.payment-options-label { margin: 12px 0 0; color: var(--agency-muted); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.payment-option--support strong { font-size: clamp(1.2rem, 2vw, 1.65rem); }
.payment-support-summary { margin: 14px 0 0; color: var(--agency-muted); font-size: .9rem; line-height: 1.5; }
.consent-check { border: 1px solid rgba(246,242,234,.12) !important; border-radius: 6px; background: rgba(246,242,234,.025) !important; }
.deposit-row { border: 1px solid rgba(246,242,234,.09) !important; border-radius: 5px; background: rgba(246,242,234,.018) !important; }
.checkout-panel { display: grid; gap: 14px; padding: clamp(22px, 4vw, 36px); }
.form-field { display: grid; gap: 7px; color: var(--agency-muted); font-size: .84rem; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 46px; padding: 11px 12px; border: 1px solid rgba(246,242,234,.2); border-radius: 5px; color: var(--agency-ink); background: #0d0e11; font: inherit; }
.form-field textarea { min-height: 132px; resize: vertical; }
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.payment-confirmation-section { max-width: 760px; margin: 0 auto; }
.payment-confirmation-form { max-width: 700px; }

/* CTA panels are composed as a single decision, not a stretched information card. */
.audit-band { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 5vw, 74px); padding: clamp(34px, 5vw, 58px) !important; }
.audit-band > div { max-width: 780px; }
.audit-band h2 { max-width: 15ch; margin: 9px 0 14px !important; font-size: clamp(2.35rem, 4.2vw, 4.35rem) !important; line-height: .98 !important; }
.audit-band p { max-width: 58ch; margin: 0 !important; }
.audit-band > .button { justify-self: end; min-width: 250px; }
.audit-band::after { display: none; }
@media (max-width: 720px) {
  .audit-band { grid-template-columns: 1fr; gap: 24px; }
  .audit-band > .button { justify-self: start; min-width: 0; }
}

/* One card system for every surfaced content block. */
:root { --ts-card-border: rgba(246,242,234,.16); --ts-card-hover: rgba(227,67,67,.68); --ts-card-surface: linear-gradient(145deg, rgba(28,29,35,.94), rgba(10,11,14,.97)); }
.agency-capability-grid article, .agency-project, .agency-service, .agency-benefit, .agency-process, .agency-price, .agency-meta-card, .service, .proof-item, .expectation, .step, .support-card, .price-card, .service-link, .detail-panel, .faq-grid details, .contact-form, .project-brief-form, .agency-form, .checkout-panel, .deposit-table, .deposit-row, .scanner-panel, .payment-option, .consent-check, .policy-block, .policy-side, .audit-band, .page-cta { border: 1px solid var(--ts-card-border) !important; border-radius: 7px !important; background: linear-gradient(90deg, transparent, rgba(227,67,67,.56), transparent) center top / calc(100% - 40px) 2px no-repeat, radial-gradient(circle at 101% 106%, transparent 0 48px, rgba(227,67,67,.28) 49px 50px, transparent 51px 68px, rgba(227,67,67,.14) 69px 70px, transparent 71px), var(--ts-card-surface) !important; box-shadow: inset 0 1px rgba(255,255,255,.035) !important; }
.agency-capability-grid article:hover, .agency-project:hover, .agency-service:hover, .agency-benefit:hover, .agency-process:hover, .agency-price:hover, .agency-meta-card:hover, .service:hover, .proof-item:hover, .expectation:hover, .step:hover, .support-card:hover, .price-card:hover, .service-link:hover, .detail-panel:hover, .faq-grid details:hover, .checkout-panel:hover, .deposit-row:hover, .scanner-panel:hover, .payment-option:hover, .policy-block:hover, .policy-side:hover { border-color: var(--ts-card-hover) !important; background: linear-gradient(90deg, transparent, rgba(227,67,67,.95), transparent) center top / calc(100% - 40px) 2px no-repeat, radial-gradient(circle at 101% 106%, transparent 0 48px, rgba(227,67,67,.38) 49px 50px, transparent 51px 68px, rgba(227,67,67,.21) 69px 70px, transparent 71px), linear-gradient(145deg, rgba(53,26,31,.96), rgba(12,12,15,.98)) !important; box-shadow: 0 16px 34px rgba(0,0,0,.19), inset 0 1px rgba(255,255,255,.055) !important; }
.agency-price.is-featured, .price-card.featured, .payment-option.is-selected { border-color: rgba(227,67,67,.78) !important; }
.detail-grid, .expectation-grid, .proof-grid, .service-link-grid, .service-grid, .pricing-grid, .timeline, .faq-grid { gap: 14px !important; border: 0 !important; background: transparent !important; }
.page-hero::before, .page-cta::before { inset: 0 !important; }

/* Remove legacy per-component circles; the shared card background supplies one ring only. */
.agency-capability-grid article::after, .agency-service::after, .agency-benefit::after, .agency-price::after, .agency-meta-card::after, .service::after, .proof-item::after, .expectation::after, .support-card::after, .price-card::after, .service-link::after, .detail-panel::after, .faq-grid details::after, .contact-form::after, .project-brief-form::after, .agency-form::after, .checkout-panel::after, .deposit-table::after, .deposit-row::after, .scanner-panel::after, .payment-option::after, .consent-check::after, .policy-block::after, .policy-side::after, .page-cta::after { display: none !important; }

/* Pricing remains deliberately cleaner so the package and price lead. */
.agency-price, .price-card { background: linear-gradient(90deg, transparent, rgba(227,67,67,.56), transparent) center top / calc(100% - 40px) 2px no-repeat, var(--ts-card-surface) !important; }
.agency-price:hover, .price-card:hover { background: linear-gradient(90deg, transparent, rgba(227,67,67,.95), transparent) center top / calc(100% - 40px) 2px no-repeat, linear-gradient(145deg, rgba(53,26,31,.96), rgba(12,12,15,.98)) !important; }

/* Process uses wider stages instead of six cramped panels. */
.agency-process-grid, .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.agency-process, .timeline .step { min-height: 248px; padding: 28px !important; }
.agency-process::before, .agency-process::after { display: none !important; }
.agency-process .agency-number, .timeline .step > strong { margin: 0; }
.agency-process h3, .timeline .step h3 { margin: 20px 0 11px !important; font-size: 1.35rem; line-height: 1.05; }
.agency-process p, .timeline .step p { max-width: 34ch; line-height: 1.65; }
@media (max-width: 960px) {
  .agency-process-grid, .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  .agency-process-grid, .timeline { grid-template-columns: 1fr !important; }
  .agency-process, .timeline .step { min-height: 0; }
}

/* Dedicated Process page composition. */
.process-stages .process-stage-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr); gap: clamp(28px, 7vw, 110px); align-items: end; margin-bottom: 46px; }
.process-stages .process-stage-intro h2 { max-width: 13ch; }
.process-stages .process-stage-intro > p { max-width: 43ch; margin: 0; color: var(--agency-muted); font-size: 1.04rem; line-height: 1.7; }
.process-stages .timeline { position: relative; gap: 16px !important; }
.process-stages .timeline::before, .process-stages .step::before { display: none !important; }
.process-stages .step { min-height: 278px; padding: 31px !important; }
.process-stages .step > strong { position: relative; }
.process-stages .step h3 { margin-top: 24px !important; font-size: clamp(1.4rem, 2vw, 1.8rem); }
.process-stages .step p { max-width: 31ch; font-size: .98rem; }
@media (max-width: 720px) {
  .process-stages .process-stage-intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 30px; }
  .process-stages .step { min-height: 0; }
}

.reveal, .agency-reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .agency-reveal { transition: transform .35s cubic-bezier(.2,.75,.2,1), border-color .25s ease, background .25s ease; }
  .agency-home-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 62% 38%, rgba(227,67,67,.09), transparent 20%); animation: agency-hero-breathe 8s ease-in-out infinite alternate; }
  .agency-process::before { transform-origin: left; animation: agency-line-pulse 2.8s ease-in-out infinite; }
}
@keyframes agency-hero-breathe { from { opacity: .22; transform: scale(.98); } to { opacity: .78; transform: scale(1.05); } }
@keyframes agency-line-pulse { 0%, 100% { opacity: .38; transform: scaleX(.68); } 50% { opacity: 1; transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

@media (max-width: 960px) {
  .agency-home-hero .agency-shell, .agency-work-grid, .agency-contact, .agency-section-header { grid-template-columns: 1fr; }
  .agency-capability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agency-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agency-browser { max-width: 720px; width: 100%; margin-inline: auto; transform: none; }
  .agency-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agency-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .site-header { min-height: 66px; padding: 12px 20px !important; }
  .brand small { display: none; }
  .agency-menu-toggle { display: block; }
  .nav-links { position: fixed; top: 66px; left: 0; right: 0; display: grid; gap: 0; padding: 12px 20px 22px; border-bottom: 1px solid var(--agency-line); background: rgba(8,9,11,.98); transform: translateY(-130%); transition: transform .25s ease; }
  .nav-links.is-open { transform: translateY(0); }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid rgba(246,242,234,.08); }
  .site-header .nav-cta { display: none; }
  .agency-home-hero { min-height: 760px; background-position: 63% center; }
  .agency-home-hero::before { background: linear-gradient(90deg, rgba(8,9,11,.97) 0%, rgba(8,9,11,.82) 66%, rgba(8,9,11,.35) 100%), linear-gradient(180deg, rgba(8,9,11,.2), rgba(8,9,11,.7)); }
  .agency-home-hero .agency-shell { padding: 118px 0 52px; }
  .agency-title { max-width: 10ch; font-size: clamp(3rem, 13vw, 4.3rem); }
  .agency-capability-band { padding: 28px 0; }
  .agency-capability-grid, .agency-portfolio-grid { grid-template-columns: 1fr; }
  .agency-portfolio-grid-single .agency-project { min-height: 430px; }
  .agency-capability-grid article { min-height: 0; }
  .agency-project { min-height: 390px; }
  .agency-work-action { align-items: flex-start; flex-direction: column; }
  .agency-browser { min-height: 0; padding: 8px; }
  .agency-browser-screen { height: 320px; }
  .agency-section { padding: 72px 0; }
  .agency-service-grid, .agency-benefit-grid, .agency-pricing-grid, .agency-process-grid, .agency-form-grid { grid-template-columns: 1fr; }
  .agency-process { min-height: 0; }
  .agency-case { min-height: 440px; }
  .agency-case-copy { inset: auto 20px 20px; }
  .agency-footer { grid-template-columns: 1fr 1fr; padding: 44px 20px 28px; }
  .agency-footer, .agency-copyright { width: min(calc(100% - 40px), var(--agency-max)); }
}

/* Visitor analytics choice. */
.analytics-consent {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2147483000;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  width: min(620px, calc(100% - 40px));
  padding: 22px;
  border: 1px solid rgba(246,242,234,.2);
  border-radius: 7px;
  color: var(--agency-ink);
  background: linear-gradient(90deg, transparent, rgba(227,57,69,.68), transparent) center top / calc(100% - 40px) 2px no-repeat, linear-gradient(145deg, rgba(25,26,32,.98), rgba(8,9,11,.99));
  box-shadow: 0 24px 64px rgba(0,0,0,.48);
}
.analytics-consent strong { display: block; font-size: 1rem; }
.analytics-consent p { max-width: 46ch; margin: 7px 0 0; color: var(--agency-muted); font-size: .88rem; line-height: 1.55; }
.analytics-consent-actions { display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-end; gap: 8px; }
.analytics-consent-actions .button { min-height: 40px; padding-inline: 14px; font-size: .78rem; }
.analytics-consent-actions a { width: 100%; color: var(--agency-muted); font-size: .78rem; text-align: right; }
.analytics-preferences-shortcut { position: fixed; z-index: 2147482990; bottom: 18px; left: 18px; min-height: 36px; padding: 8px 11px; border: 1px solid rgba(246,242,234,.2); border-radius: 5px; color: var(--agency-muted); background: rgba(8,9,11,.92); box-shadow: 0 10px 28px rgba(0,0,0,.28); font: 700 .72rem/1 var(--agency-font, inherit); letter-spacing: .04em; }
.analytics-preferences-shortcut:hover { border-color: rgba(227,57,69,.72); color: var(--agency-ink); }
@media (max-width: 720px) {
  .analytics-consent { right: 20px; bottom: 20px; grid-template-columns: 1fr; gap: 16px; }
  .analytics-consent-actions { justify-content: flex-start; }
  .analytics-consent-actions a { text-align: left; }
}

/* First-party project chat. The panel stays quiet until a visitor opens it. */
.project-chat { position: fixed; right: 24px; bottom: 24px; z-index: 950; width: min(390px, calc(100% - 40px)); }
.project-chat-trigger { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 52px; padding: 0 16px 0 18px; border: 1px solid rgba(227,67,67,.75); border-radius: 7px; color: #fff; background: linear-gradient(135deg, #c52631, #eb4650); box-shadow: 0 16px 34px rgba(0,0,0,.32); font: inherit; font-weight: 800; cursor: pointer; }
.project-chat-trigger b { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; font-size: 1.1rem; line-height: 1; }
.project-chat-panel { margin-bottom: 10px; padding: 18px; border: 1px solid rgba(246,242,234,.18); border-radius: 7px; color: var(--agency-ink); background: linear-gradient(90deg, transparent, rgba(227,57,69,.68), transparent) center top / calc(100% - 40px) 2px no-repeat, linear-gradient(145deg, rgba(25,26,32,.99), rgba(8,9,11,.99)); box-shadow: 0 24px 64px rgba(0,0,0,.48); }
.project-chat-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.project-chat-heading p { margin: 0 0 3px; color: var(--agency-red); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.project-chat-heading h2 { margin: 0; font-size: 1.25rem; }
.project-chat-close { width: 32px; height: 32px; border: 1px solid rgba(246,242,234,.18); border-radius: 50%; color: var(--agency-ink); background: transparent; font: inherit; cursor: pointer; }
.project-chat-presence { margin: 12px 0; color: var(--agency-muted); font-size: .88rem; line-height: 1.5; }
.project-chat-quick { margin: 14px 0; }
.project-chat-quick > p { margin: 0 0 8px; color: var(--agency-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.project-chat-quick > div { display: flex; flex-wrap: wrap; gap: 7px; }
.project-chat-quick button { padding: 7px 9px; border: 1px solid rgba(246,242,234,.16); border-radius: 5px; color: var(--agency-ink); background: rgba(246,242,234,.04); font: inherit; font-size: .76rem; cursor: pointer; }
.project-chat-quick button:hover { border-color: rgba(227,67,67,.62); background: rgba(227,67,67,.1); }
.project-chat-messages { display: grid; gap: 8px; max-height: 210px; overflow: auto; margin: 12px 0; padding-right: 2px; }
.project-chat-message { display: grid; gap: 3px; margin: 0; padding: 10px 11px; border: 1px solid rgba(246,242,234,.12); border-radius: 5px; color: var(--agency-muted); font-size: .84rem; line-height: 1.45; }
.project-chat-message b { color: var(--agency-ink); font-size: .73rem; }
.project-chat-message.is-admin { border-color: rgba(227,67,67,.35); color: var(--agency-ink); background: rgba(227,67,67,.08); }
.project-chat-message.is-quick { border-style: dashed; }
.project-chat-form { display: grid; gap: 9px; }
.project-chat-form label { display: grid; gap: 5px; color: var(--agency-muted); font-size: .76rem; font-weight: 700; }
.project-chat-form input, .project-chat-form textarea { width: 100%; padding: 9px 10px; border: 1px solid rgba(246,242,234,.18); border-radius: 5px; color: var(--agency-ink); background: rgba(3,4,6,.64); font: inherit; }
.project-chat-form textarea { min-height: 84px; resize: vertical; }
.project-chat-form input:focus, .project-chat-form textarea:focus { outline: 2px solid rgba(227,67,67,.42); outline-offset: 1px; border-color: rgba(227,67,67,.68); }
.project-chat-form .button { justify-content: center; min-height: 44px; }
.project-chat-status { min-height: 18px; margin: 0; color: var(--agency-muted); font-size: .78rem; line-height: 1.4; }
.project-chat-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
@media (max-width: 720px) { .project-chat { right: 20px; bottom: 20px; } }