/* Pass 3: service, process, and FAQ pages only. */
:root {
  --pass3-surface: #071121;
  --pass3-surface-2: #09172d;
  --pass3-border: rgba(118, 151, 211, .22);
  --pass3-muted: #aebbd0;
  --pass3-blue: #4f7fff;
  --pass3-lime: #c8f12f;
}

.service-page main,
.process-page main,
.faq-page main { overflow: clip; }
.service-page :where(a, button, input):focus-visible,
.process-page :where(a, button):focus-visible,
.faq-page :where(a, button, input):focus-visible { outline: 2px solid var(--pass3-lime); outline-offset: 4px; }
.service-breadcrumb { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: clamp(2rem, 4vw, 3.75rem); color: #71809b; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.service-breadcrumb a:hover { color: var(--pass3-lime); }

/* Shared service framework */
.service-hero { position: relative; min-height: 650px; padding: clamp(5.5rem, 8vw, 8rem) 0 clamp(5rem, 7vw, 7rem); overflow: hidden; border-bottom: 1px solid var(--pass3-border); }
.service-hero::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 78% 46%, rgba(21,87,255,.15), transparent 35%), linear-gradient(90deg, rgba(5,13,28,.2), rgba(5,13,28,.82)); pointer-events: none; }
.service-hero-lines { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(var(--pass3-border) 1px, transparent 1px), linear-gradient(90deg, var(--pass3-border) 1px, transparent 1px); background-size: 88px 88px; mask-image: linear-gradient(90deg, transparent, #000 54%, #000); }
.service-hero-lines::after { position: absolute; right: -190px; bottom: 80px; width: 700px; height: 2px; content: ""; background: var(--cobalt); transform: rotate(-25deg); box-shadow: 0 36px rgba(21,87,255,.45); }
.service-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.88fr) minmax(470px,1.12fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; }
.service-hero-grid > *, .service-hero-copy { min-width: 0; }
.service-hero-copy h1 { max-width: 10ch; margin: 0; color: #f8f7f2; font-size: clamp(3.65rem, 6.2vw, 6.7rem); line-height: .88; letter-spacing: -.062em; text-wrap: balance; }
.service-hero-copy h1 span,
.service-hero-copy h1 em { display: block; }
.service-hero-copy h1 em { color: transparent; font-style: italic; -webkit-text-stroke: 1.8px var(--cobalt); }
.service-hero-description { max-width: 56ch; margin-top: 1.6rem; color: var(--pass3-muted); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.7; }
.service-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.service-hero-actions .btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .65rem; padding: .8rem 1.2rem; border: 1px solid #455675; border-radius: 2px; font-size: .82rem; font-weight: 800; }
.service-hero-actions .btn-primary { border-color: var(--cobalt); background: var(--cobalt); color: #fff; }
.service-hero-actions .btn-secondary { background: rgba(4,10,22,.55); color: #fff; }
.service-hero-actions .btn:hover { transform: translateY(-2px); }
.service-hero-visual { position: relative; min-width: 0; min-height: 450px; display: grid; place-items: center; }
.service-hero-visual:empty { min-height: 0; }

/* Service-specific hero visuals */
.service-page .project-device-showcase.is-service-hero { width: min(96%, 760px); }
.service-page .project-device-showcase.is-service-hero .project-device-line { opacity: .3; }
.service-visual-accent { position: absolute; z-index: 0; top: 2%; right: -1%; width: 30%; aspect-ratio: 1.3; margin: 0; overflow: hidden; border: 1px solid var(--pass3-border); background: #0b1730; box-shadow: 0 20px 55px rgba(0,0,0,.35); transform: rotate(3deg); opacity: .76; }
.service-visual-accent img { width: 100%; height: 100%; object-fit: contain; }
.service-artboard { position: relative; width: min(100%, 690px); aspect-ratio: 1.5; margin: 0; padding: 2.5rem; border: 1px solid #34486c; background: linear-gradient(145deg,#0c1a35,#071022); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.service-artboard img { width: 100%; height: 100%; object-fit: contain; }
.brand-board { position: relative; width: 660px; max-width: 92%; min-height: 450px; }
.brand-board-main { position: absolute; top: 7%; left: 8%; width: 88%; height: 84%; margin: 0; padding: 30px 9px 9px; overflow: hidden; border: 1px solid #405176; background: #0a1731; box-shadow: 0 35px 85px rgba(0,0,0,.5); transform: rotate(-1.2deg); }
.brand-board-main img { width: 100%; height: 100%; object-fit: contain; background: #101e42; }
.brand-board-toolbar { position: absolute; inset: 0 0 auto; height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid var(--pass3-border); }
.brand-board-toolbar i { width: 6px; height: 6px; border-radius: 50%; background: #4f7fff; }
.brand-board-toolbar i:first-child { background: var(--pass3-lime); }
.brand-board-toolbar span { margin-left: auto; color: #8695b0; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.brand-board-swatches { position: absolute; z-index: 2; left: 0; bottom: 2%; display: grid; grid-template-columns: repeat(4, 38px); padding: .65rem; border: 1px solid var(--pass3-border); background: #050b17; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.brand-board-swatches i { aspect-ratio: 1; background: #1557ff; }
.brand-board-swatches i:nth-child(2) { background: #c8f12f; }
.brand-board-swatches i:nth-child(3) { background: #f7f7f2; }
.brand-board-swatches i:nth-child(4) { background: #071121; }
.brand-board-type { position: absolute; z-index: 2; right: 0; top: 0; width: 135px; padding: 1rem; border: 1px solid var(--pass3-border); background: #071121; box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.brand-board-type strong,.brand-board-type span { display: block; }
.brand-board-type strong { color: #f7f7f2; font-size: 3rem; line-height: 1; }
.brand-board-type span { margin-top: .55rem; color: #8190aa; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.brand-board-extras { position: absolute; z-index: 3; right: 2%; bottom: 0; display: flex; gap: .5rem; }
.brand-board-extras img { width: 110px; aspect-ratio: 1.45; object-fit: cover; border: 1px solid var(--pass3-border); }
.site-care-panel { width: min(94%, 620px); border: 1px solid #3b4e72; background: linear-gradient(145deg,rgba(12,28,59,.96),rgba(5,12,27,.98)); box-shadow: 0 35px 90px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.06); }
.site-care-panel header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem; border-bottom: 1px solid var(--pass3-border); }
.site-care-panel header div { position: relative; padding-left: 1rem; }
.site-care-pulse { position: absolute; top: .3rem; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--pass3-lime); box-shadow: 0 0 12px rgba(200,241,47,.45); }
.site-care-panel header p { color: #8ba0c3; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.site-care-panel header h2 { margin-top: .4rem; font-size: clamp(1.8rem,3vw,2.7rem); }
.site-care-badge { padding: .45rem .65rem; border: 1px solid #3c5684; color: #8bacff; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.site-care-panel ul { list-style: none; margin: 0; padding: 0 1.5rem; }
.site-care-panel li { display: grid; grid-template-columns: 24px 1fr auto; gap: .75rem; align-items: center; min-height: 58px; border-bottom: 1px solid var(--pass3-border); }
.site-care-panel li > span { color: var(--pass3-lime); }
.site-care-panel li strong { font-size: .94rem; }
.site-care-panel li small { color: #8ca9f7; font-size: .7rem; font-weight: 750; text-transform: uppercase; }
.site-care-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.5rem; color: #93a2bb; font-size: .76rem; }
.site-care-panel footer i { width: 35%; height: 4px; background: linear-gradient(90deg,var(--pass3-lime),var(--cobalt)); }

/* Service content */
.service-section { padding: clamp(4.75rem, 7vw, 7.25rem) 0; border-bottom: 1px solid var(--pass3-border); }
.service-section-heading h2 { max-width: 15ch; color: #f7f7f2; font-size: clamp(2.85rem, 5vw, 5.2rem); line-height: .94; letter-spacing: -.052em; text-wrap: balance; }
.service-section-heading > p { max-width: 56ch; margin-top: 1.4rem; color: var(--pass3-muted); font-size: 1.06rem; line-height: 1.72; }
.service-section-heading--wide { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.service-section-heading--wide h2 { max-width: 18ch; }
.service-section-heading--split { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4.25rem); }
.service-section-heading--split h2 em { display: block; color: transparent; font-style: italic; -webkit-text-stroke: 1.5px var(--cobalt); }
.service-text-link { flex: 0 0 auto; color: #86a5ff; font-size: .86rem; font-weight: 750; text-decoration: underline; text-underline-offset: 6px; }
.service-text-link:hover { color: var(--pass3-lime); }
.service-intro-grid { display: grid; grid-template-columns: minmax(0,.88fr) minmax(400px,1.12fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.service-intro-support { min-width: 0; }
.service-intro-support > .service-hero-visual { min-height: 0; margin-top: 1.5rem; }
.service-intro-support .site-care-panel { width: 100%; }
.service-value-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pass3-border); }
.service-value-list li { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--pass3-border); }
.service-value-list li > span { color: var(--pass3-lime); font-size: .78rem; font-style: italic; }
.service-value-list h3 { margin: 0; font-size: 1.15rem; }
.service-value-list p { margin-top: .45rem; color: var(--pass3-muted); font-size: .96rem; line-height: 1.62; }
.service-deliverable-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pass3-border); border-left: 1px solid var(--pass3-border); }
.service-deliverable-list li { display: grid; grid-template-columns: 44px 1fr; align-content: start; min-height: 190px; padding: 1.7rem; border-right: 1px solid var(--pass3-border); border-bottom: 1px solid var(--pass3-border); }
.service-deliverable-list li > span { grid-row: 1/3; color: #5075cb; font-size: .82rem; font-style: italic; }
.service-deliverable-list h3 { font-size: clamp(1.4rem,2.2vw,2rem); line-height: 1.08; }
.service-deliverable-list p { margin-top: .65rem; color: var(--pass3-muted); font-size: .98rem; line-height: 1.65; }
.service-process-preview { background: linear-gradient(180deg,rgba(6,15,32,.4),rgba(3,7,18,.1)); }
.service-process-list { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; margin: 0; padding: 0; border: 1px solid var(--pass3-border); }
.service-process-list::before { position: absolute; top: 45px; left: 7%; right: 7%; height: 1px; content: ""; background: linear-gradient(90deg,var(--cobalt),rgba(79,127,255,.2)); }
.service-process-list li { position: relative; min-height: 220px; padding: 1.6rem; border-right: 1px solid var(--pass3-border); }
.service-process-list li:last-child { border-right: 0; }
.service-process-list li > span { position: relative; z-index: 1; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #3a5eaf; background: #061023; color: #7695e6; font-style: italic; }
.service-process-list h3 { margin-top: 1.6rem; font-size: 1.45rem; }
.service-process-list p { margin-top: .6rem; color: var(--pass3-muted); font-size: .94rem; line-height: 1.62; }

/* Relevant service work */
.service-work-grid { display: grid; gap: 1.25rem; }
.service-work-card { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(480px,1.25fr); min-height: 460px; border: 1px solid var(--pass3-border); background: #050b17; }
.service-work-card:nth-child(even) { grid-template-columns: minmax(480px,1.25fr) minmax(280px,.75fr); }
.service-work-card:nth-child(even) .service-work-copy { order: 2; }
.service-work-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.75rem,3.5vw,3.5rem); }
.service-work-index { color: transparent; font-size: 3.1rem; font-style: italic; -webkit-text-stroke: 1px #274689; }
.service-work-meta { margin-top: .8rem; color: var(--pass3-lime)!important; font-size: .7rem!important; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.service-work-copy h3 { max-width: 14ch; margin: .65rem 0 .8rem; font-size: clamp(2rem,3.4vw,3.4rem); line-height: .96; letter-spacing: -.04em; text-wrap: balance; }
.service-work-copy > p:not(.service-work-meta) { max-width: 52ch; color: var(--pass3-muted); font-size: .96rem; line-height: 1.66; }
.service-work-actions { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.5rem; }
.service-work-actions a { color: #86a5ff; font-size: .8rem; font-weight: 750; text-decoration: underline; text-underline-offset: 5px; }
.service-work-media { min-width: 0; min-height: 440px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 55% 45%,rgba(21,87,255,.22),transparent 58%),#071121; }
.service-page .project-device-showcase.is-service-card { width: min(94%,720px); }
.service-page .project-device-showcase.is-service-card .project-device-line { display: none; }
.service-page .project-device-showcase.is-service-card .browser-mockup { width: 91%; }
.service-page .project-device-showcase.is-service-card .phone-mockup { width: 21%; right: 1%; }

/* Process */
.process-layout { position: relative; padding: clamp(5.5rem,8vw,8rem) 0 clamp(5rem,8vw,8rem); border-bottom: 1px solid var(--pass3-border); }
.process-lines,.faq-hero-lines { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(var(--pass3-border) 1px,transparent 1px),linear-gradient(90deg,var(--pass3-border) 1px,transparent 1px); background-size: 90px 90px; mask-image: linear-gradient(90deg,#000,transparent 65%); }
.process-layout-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); column-gap: clamp(3rem,5vw,5rem); align-items: start; }
.process-overview { position: sticky; top: 110px; min-width: 0; }
.process-overview h1 { max-width: 9ch; color: #f8f7f2; font-size: clamp(3.5rem,5.6vw,6.4rem); line-height: .88; letter-spacing: -.062em; text-wrap: balance; }
.faq-hero h1 { max-width: 9ch; color: #f8f7f2; font-size: clamp(3.9rem,6.4vw,6.8rem); line-height: .88; letter-spacing: -.062em; }
.process-overview h1 span,.process-overview h1 em,.faq-hero h1 span,.faq-hero h1 em { display: block; }
.process-overview h1 em,.faq-hero h1 em { color: transparent; font-style: italic; -webkit-text-stroke: 1.8px var(--cobalt); }
.process-overview > p:not(.agency-kicker) { max-width: 48ch; margin: 1.5rem 0 1.75rem; color: var(--pass3-muted); font-size: 1.05rem; line-height: 1.72; }
.process-timeline { position: relative; list-style: none; margin: 2rem 0 0; padding: 0 0 0 2.8rem; }
.process-timeline::before { position: absolute; top: 44px; bottom: 44px; left: 8px; width: 1px; content: ""; background: linear-gradient(var(--pass3-blue),rgba(79,127,255,.18)); }
.process-timeline > li { position: relative; padding-bottom: 1.25rem; }
.process-node { position: absolute; top: 42px; left: -2.78rem; width: 17px; height: 17px; border: 3px solid #061023; border-radius: 50%; background: var(--pass3-blue); box-shadow: 0 0 0 1px #638cff; }
.process-timeline article { padding: clamp(1.5rem,3vw,2.5rem); border: 1px solid var(--pass3-border); background: linear-gradient(135deg,rgba(9,23,45,.92),rgba(5,12,26,.9)); box-shadow: inset 0 1px rgba(255,255,255,.03); }
.process-timeline article header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.process-number { color: transparent; font-size: 3rem; font-style: italic; line-height: 1; -webkit-text-stroke: 1px #34549a; }
.process-time { color: var(--pass3-lime); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.process-timeline h2 { margin-top: 1.1rem; font-size: clamp(2rem,3.4vw,3.25rem); letter-spacing: -.035em; }
.process-description { max-width: 52ch; margin-top: .8rem; color: var(--pass3-muted); font-size: 1.02rem; line-height: 1.7; overflow-wrap: anywhere; }
.process-tag-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.process-tag-list li { padding: .42rem .62rem; border: 1px solid #324668; color: #9baac2; font-size: .7rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }

/* FAQ */
.faq-hero { position: relative; min-height: 500px; display: flex; align-items: center; padding: clamp(5.5rem,8vw,8rem) 0 clamp(4.5rem,7vw,6.5rem); overflow: hidden; border-bottom: 1px solid var(--pass3-border); }
.faq-hero::after { position: absolute; right: -200px; bottom: 70px; width: 720px; height: 2px; content: ""; background: var(--cobalt); transform: rotate(-25deg); box-shadow: 0 34px rgba(21,87,255,.45); }
.faq-hero > .agency-shell { position: relative; z-index: 1; }
.faq-hero h1 { max-width: 10ch; }
.faq-hero > .agency-shell > p:not(.agency-kicker) { max-width: 55ch; margin-top: 1.4rem; color: var(--pass3-muted); font-size: 1.05rem; line-height: 1.7; }
.faq-content { padding: clamp(4.5rem,7vw,7rem) 0; border-bottom: 1px solid var(--pass3-border); }
.faq-content > .agency-shell { max-width: 1120px; }
.faq-search { max-width: 760px; margin: 0 0 clamp(3rem,6vw,5rem) auto; }
.faq-search > label { display: block; margin-bottom: .65rem; color: #9aabc6; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.faq-search > div { display: grid; grid-template-columns: 1fr auto; }
.faq-search input { width: 100%; min-height: 50px; padding: .8rem 1rem; border: 1px solid #405274; border-radius: 0; outline: 0; background: #071121; color: #fff; font: inherit; }
.faq-search input::placeholder { color: #73819a; }
.faq-search button { min-width: 80px; border: 1px solid var(--cobalt); background: var(--cobalt); color: #fff; font-weight: 800; }
.faq-search-status { min-height: 1.2rem; margin-top: .45rem; color: #8e9cb5; font-size: .8rem; }
.faq-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: clamp(3rem,6vw,6rem); align-items: start; }
.faq-category-nav { position: sticky; top: 110px; }
.faq-category-nav > p { margin-bottom: 1rem; color: #73829d; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.faq-category-nav > div { display: grid; border-top: 1px solid var(--pass3-border); }
.faq-category-nav a { padding: .9rem 0; border-bottom: 1px solid var(--pass3-border); color: #b7c2d3; font-size: .9rem; font-weight: 700; }
.faq-category-nav a:hover { color: var(--pass3-lime); padding-left: .35rem; }
.faq-groups { min-width: 0; }
.faq-category { display: block; grid-template-columns: none; gap: 0; scroll-margin-top: 100px; margin-bottom: 4rem; padding: 0; border-top: 0; }
.faq-category:last-of-type { margin-bottom: 0; }
.faq-category > h2 { margin-bottom: 1.2rem; color: #f7f7f2; font-size: clamp(1.9rem,3vw,2.7rem); letter-spacing: -.035em; }
.faq-accordion { border-top: 1px solid var(--pass3-border); }
.faq-item { overflow: visible; border: 0; border-bottom: 1px solid var(--pass3-border); border-radius: 0 !important; background: transparent; backdrop-filter: none; transition: none; }
.faq-item:hover { border-color: var(--pass3-border); }
.faq-item h3 { margin: 0; }
.faq-question { width: 100%; min-height: 72px; display: grid; grid-template-columns: 1fr 30px; gap: 1.5rem; align-items: center; padding: 1rem 0; border: 0; background: transparent; color: #f4f5f2; text-align: left; cursor: pointer; font: 700 clamp(1rem,1.6vw,1.2rem)/1.35 var(--font-display); }
.faq-question i { position: relative; width: 28px; height: 28px; border: 1px solid #40567e; }
.faq-question i::before,.faq-question i::after { position: absolute; top: 50%; left: 50%; width: 11px; height: 2px; content: ""; background: var(--pass3-lime); transform: translate(-50%,-50%); }
.faq-question i::after { transform: translate(-50%,-50%) rotate(90deg); transition: transform .2s ease; }
.faq-question[aria-expanded="true"] i::after { transform: translate(-50%,-50%) rotate(0deg); }
.faq-question:hover { color: #91adff; }
.faq-answer { padding: 0 3.8rem 1.5rem 0; }
.faq-answer p { max-width: 66ch; color: var(--pass3-muted); font-size: 1.03rem; line-height: 1.75; }
.faq-empty { padding: 2rem; border: 1px solid var(--pass3-border); background: var(--pass3-surface); }
.faq-empty strong { font-size: 1.25rem; }
.faq-empty p { margin-top: .4rem; color: var(--pass3-muted); }
.faq-page [hidden] { display: none !important; }

@media (max-width: 1050px) {
  .service-hero { min-height: 0; }
  .service-hero-grid { grid-template-columns: minmax(0,.9fr) minmax(400px,1.1fr); gap: 2.5rem; }
  .service-hero-copy h1 { font-size: clamp(3.4rem,6.5vw,5rem); }
  .service-hero-visual { min-height: 400px; }
  .service-work-card,.service-work-card:nth-child(even) { grid-template-columns: minmax(260px,.78fr) minmax(400px,1.22fr); }
  .service-process-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-process-list::before { display: none; }
  .service-process-list li:nth-child(2) { border-right: 0; }
  .service-process-list li:nth-child(-n+2) { border-bottom: 1px solid var(--pass3-border); }
  .process-layout-grid { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); column-gap: 3rem; }
  .faq-content > .agency-shell { max-width: none; }
}

@media (max-width: 800px) {
  .service-hero { padding: 4.5rem 0 4.75rem; }
  .service-hero-grid { grid-template-columns: 1fr; }
  .service-hero-copy { max-width: 700px; }
  .service-hero-copy h1 { max-width: 11ch; font-size: clamp(3.5rem,10vw,5.3rem); }
  .service-hero-visual { min-height: 430px; }
  .service-intro-grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .service-deliverable-list { grid-template-columns: 1fr; }
  .service-work-card,.service-work-card:nth-child(even) { display: flex; min-height: 0; flex-direction: column; }
  .service-work-card:nth-child(even) .service-work-copy { order: 1; }
  .service-work-copy { order: 1; }
  .service-work-media { order: 2; min-height: 390px; }
  .process-layout-grid { grid-template-columns: 1fr; }
  .process-overview { position: static; max-width: 700px; }
  .process-timeline { margin-top: 0; }
  .faq-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .faq-search { max-width: none; margin-left: 0; }
  .faq-category-nav { position: static; min-width: 0; }
  .faq-category-nav > div { display: flex; gap: .65rem; overflow-x: auto; border-top: 0; scroll-snap-type: x proximity; scrollbar-width: none; }
  .faq-category-nav > div::-webkit-scrollbar { display: none; }
  .faq-category-nav a { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; padding: .65rem .85rem; border: 1px solid var(--pass3-border); scroll-snap-align: start; }
}

@media (max-width: 540px) {
  .service-breadcrumb { margin-bottom: 2rem; }
  .service-hero { padding: 3.5rem 0 4rem; }
  .service-hero::before { background: radial-gradient(circle at 70% 75%,rgba(21,87,255,.14),transparent 38%); }
  .service-hero-lines { background-size: 64px 64px; }
  .service-hero-copy h1 { max-width: 100%; font-size: clamp(2.95rem,12.6vw,3.75rem); line-height: .91; overflow-wrap: break-word; }
  .service-hero-copy h1 em { -webkit-text-stroke: 1.3px #5f88ff; }
  .service-hero-description { margin-top: 1.25rem; font-size: 1rem; }
  .service-hero-actions { display: grid; grid-template-columns: 1fr; }
  .service-hero-actions .btn { width: 100%; min-height: 48px; }
  .service-hero-visual { max-width: 100%; min-height: 300px; margin-top: 1rem; overflow: clip; }
  .service-page .project-device-showcase.is-service-hero { width: 100%; }
  .service-page .project-device-showcase.is-service-hero .browser-mockup { width: 91%; }
  .service-page .project-device-showcase.is-service-hero .phone-mockup { width: 23%; right: 1%; }
  .service-visual-accent { display: none; }
  .brand-board { width: 100%; min-height: 310px; }
  .brand-board-main { top: 4%; left: 3%; width: 97%; height: 87%; }
  .brand-board-type { width: 100px; padding: .75rem; }
  .brand-board-type strong { font-size: 2.25rem; }
  .brand-board-swatches { grid-template-columns: repeat(4,30px); }
  .site-care-panel { width: 100%; }
  .site-care-panel header { padding: 1rem; }
  .site-care-panel ul { padding: 0 1rem; }
  .site-care-panel li { grid-template-columns: 22px 1fr auto; min-height: 52px; gap: .5rem; }
  .site-care-panel li strong { font-size: .84rem; }
  .site-care-panel footer { padding: 1rem; }
  .service-section { padding: 4rem 0; }
  .service-section-heading h2 { max-width: 100%; font-size: clamp(2.6rem,12vw,3.75rem); }
  .service-section-heading > p { font-size: 1rem; }
  .service-section-heading--split { display: block; }
  .service-section-heading--split .service-text-link { display: inline-block; margin-top: 1.25rem; }
  .service-deliverable-list li { min-height: 0; grid-template-columns: 38px 1fr; padding: 1.35rem 1rem; }
  .service-deliverable-list h3 { font-size: 1.4rem; }
  .service-deliverable-list p { font-size: .96rem; }
  .service-process-list { grid-template-columns: 1fr; border-left: 0; border-right: 0; }
  .service-process-list li,.service-process-list li:nth-child(2) { min-height: 0; display: grid; grid-template-columns: 42px 1fr; gap: 1rem; padding: 1.35rem 0; border-right: 0; border-bottom: 1px solid var(--pass3-border); }
  .service-process-list li > span { grid-row: 1/3; }
  .service-process-list h3 { margin-top: 0; }
  .service-process-list p { margin-top: .35rem; }
  .service-work-copy { padding: 1.4rem; }
  .service-work-copy h3 { max-width: 100%; font-size: clamp(2rem,10vw,2.75rem); }
  .service-work-media { min-height: 290px; }
  .service-page .project-device-showcase.is-service-card { width: 100%; }
  .service-page .project-device-showcase.is-service-card .phone-mockup { width: 23%; }
  .process-layout { padding: 3.5rem 0 4rem; }
  .process-overview h1,.faq-hero h1 { max-width: 100%; font-size: clamp(3.05rem,14vw,4.2rem); line-height: .9; }
  .process-overview h1 em,.faq-hero h1 em { -webkit-text-stroke: 1.3px #5f88ff; }
  .process-timeline { padding-left: 2.15rem; }
  .process-timeline::before { left: 6px; }
  .process-node { left: -2.15rem; }
  .process-timeline article { padding: 1.25rem; }
  .process-number { font-size: 2.45rem; }
  .process-timeline h2 { font-size: 2rem; }
  .process-description { font-size: 1rem; }
  .faq-hero { min-height: 0; padding: 3.5rem 0 4rem; }
  .faq-content { padding: 4rem 0; }
  .faq-search > div { grid-template-columns: 1fr; }
  .faq-search button { min-height: 44px; margin-top: .5rem; }
  .faq-category { margin-bottom: 3rem; }
  .faq-question { min-height: 64px; grid-template-columns: 1fr 28px; gap: .8rem; font-size: 1rem; }
  .faq-answer { padding-right: 0; }
  .faq-answer p { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .service-page *, .process-page *, .faq-page * { scroll-behavior: auto !important; transition: none !important; }
  .service-hero-actions .btn:hover { transform: none; }
}