@font-face {font-family:Montserrat;src:url('fonts/montserrat-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face {font-family:Montserrat;src:url('fonts/montserrat-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face {font-family:Montserrat;src:url('fonts/montserrat-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face {font-family:Montserrat;src:url('fonts/montserrat-700.ttf') format('truetype');font-weight:700;font-display:swap}
:root {
  --navy:#061930;
  --red:#e8223a;
  --action:#d91a32;
  --white:#fff;
  --soft:#f0f4f7;
  --muted:#42556b;
  --line:#d6e0e9;
  --success:#17634d;
  --on-navy:#ccdae7;
  --gutter:clamp(18px,4.3vw,80px);
  --title:clamp(34px,4vw,60px);
  --ease:cubic-bezier(.16,1,.3,1);
  color:var(--navy);
  font:400 16px/1.55 Montserrat,sans-serif;
  scroll-behavior:smooth;
  scroll-padding-top:28px;
}
* {box-sizing:border-box}
body {margin:0;background:var(--white)}
button,input {font:inherit}
button,a,summary {-webkit-tap-highlight-color:transparent}
a {color:inherit;text-underline-offset:5px}
a:hover {text-decoration-thickness:2px}
img,video {display:block;max-width:100%}
figure,p,h1,h2,h3,dl,dd {margin:0}
h1,h2,h3 {line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
h2 {font-size:var(--title);font-weight:700}
h3 {font-size:22px;line-height:1.2}
p {max-width:67ch;text-wrap:pretty}
button,summary {cursor:pointer}
button {color:var(--navy)}
[hidden] {display:none!important}
:focus-visible {outline:3px solid var(--red);outline-offset:5px}
::selection {background:var(--navy);color:var(--white)}
.wrap {padding-inline:var(--gutter);max-width:1600px;margin-inline:auto}
.section-space {margin-top:clamp(80px,9vw,140px)}
.wordmark {width:194px;height:auto}
.skip-link {position:absolute;top:-80px;left:20px;background:var(--white);padding:12px;z-index:5}
.skip-link:focus {top:12px}
.site-header {display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:24px}
nav {display:flex;gap:32px}
nav a,.header-action {font-size:14px;font-weight:500;text-decoration:none;padding-block:12px}
.header-action {text-decoration:underline}
.button {display:inline-flex;gap:22px;justify-content:center;align-items:center;min-height:50px;padding:14px 22px;background:var(--action);color:var(--white);text-decoration:none;font-weight:600;font-size:14px;border-radius:6px;transition:background .18s,transform .18s var(--ease)}
@media(hover:hover) {.button:hover {background:#ca1630;transform:translateY(-2px)}}
.button:active {transform:scale(.98)}
.button svg {flex:none}
.hero {text-align:center;padding-block:clamp(40px,6vw,86px) 38px}
.hero h1 {font-size:clamp(40px,5.2vw,72px);letter-spacing:-.035em;line-height:1.08;max-width:1120px;margin-inline:auto;overflow-wrap:anywhere}
.hero h1 span {display:block;font-size:clamp(26px,3.2vw,44px);font-weight:500;letter-spacing:-.025em;line-height:1.18;max-width:32ch;margin:16px auto 0}
.hero>p {font-size:clamp(17px,1.6vw,22px);max-width:720px;margin:28px auto;line-height:1.5}
.hero small,.contact small {display:block;font-size:13px;margin-top:12px}

/* One focal sequence: request → routine action → the work behind a call. */
.attention-story {--task-title:1.125rem;--task-copy:1rem;--task-status:.875rem;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.attention-visual {position:static;padding-block:30px}
.attention-story.is-enhanced .attention-visual {position:sticky;top:max(28px,calc(50svh - 260px))}
.attention-stage {background:var(--soft);padding:clamp(22px,3vw,42px);border-radius:16px}
.attention-scene {margin-bottom:32px}
.attention-scene h3 {font-size:clamp(24px,2vw,30px);margin-bottom:24px}
.attention-scenes {display:grid;gap:20px}
.attention-story.is-enhanced .attention-scenes {gap:0}
.attention-story.is-enhanced .attention-scene {grid-area:1/1;margin:0;visibility:hidden;opacity:0;transform:translateY(18px);transition:opacity .35s ease,transform .55s var(--ease)}
.attention-story.is-enhanced .attention-scene.is-current {visibility:visible;opacity:1;transform:none}
.attention-scene :is(.request-list,.work-list,.workflow-steps) {list-style:none;padding:0;margin:0;display:grid;gap:12px}
.attention-scene :is(.request-list,.work-list,.workflow-steps)>li {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:start;background:var(--white);border-radius:12px;padding:16px}
.request-list li>span,.work-list li>span:first-child {display:contents}
.attention-scene :is(.request-list,.work-list,.workflow-steps) strong {display:block;grid-column:1;grid-row:1;font-size:var(--task-title);line-height:1.35;font-weight:600}
.attention-scene :is(.request-list small,.work-list small,.workflow-steps p) {display:block;grid-column:1/-1;grid-row:2;font-size:var(--task-copy);line-height:1.5;color:var(--muted);margin:0}
.work-status {display:inline-flex;grid-column:2;grid-row:1;align-items:center;gap:4px;font-size:var(--task-status);line-height:1.7;font-weight:600;color:var(--success)}
.work-status svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.workflow-done {grid-column:2;grid-row:1;width:22px;height:22px;fill:none;stroke:var(--success);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.story-position {font-size:var(--task-status);color:var(--muted);margin-top:28px}
.attention-chapter {padding-block:60px}
.attention-chapter h2 {font-size:clamp(34px,3.4vw,52px);max-width:17ch}
.attention-chapter>p {font-size:18px;margin-top:24px;max-width:39ch}
.attention-story.is-enhanced .attention-chapter {min-height:64svh;display:flex;flex-direction:column;justify-content:center}
.attention-story.is-enhanced .attention-chapter:last-child {padding-bottom:80px}
.attention-story:not(.is-enhanced) {row-gap:40px}
.attention-story:not(.is-enhanced) .attention-visual,
.attention-story:not(.is-enhanced) .attention-stage,
.attention-story:not(.is-enhanced) .attention-scenes,
.attention-story:not(.is-enhanced) .attention-chapters {display:contents}
.attention-story:not(.is-enhanced) .attention-scene {grid-column:1;background:var(--soft);border-radius:16px;padding:28px;margin:0}
.attention-story:not(.is-enhanced) .attention-chapter {grid-column:2;padding-block:28px;align-self:center}
.attention-story:not(.is-enhanced) [data-scene="0"],.attention-story:not(.is-enhanced) [data-chapter="0"] {grid-row:1}
.attention-story:not(.is-enhanced) [data-scene="1"],.attention-story:not(.is-enhanced) [data-chapter="1"] {grid-row:2}
.attention-story:not(.is-enhanced) [data-scene="2"],.attention-story:not(.is-enhanced) [data-chapter="2"] {grid-row:3}
.attention-story:not(.is-enhanced) .story-position {grid-column:1/-1;grid-row:4;margin:0}

.section-intro {display:grid;grid-template-columns:1.1fr 1fr;align-items:start;gap:clamp(30px,7vw,100px);margin-bottom:44px}
.section-intro>p {max-width:45ch;font-size:18px;line-height:1.55;padding-top:5px}
.film-screen {position:relative;overflow:clip;height:540px;border-radius:16px;background:var(--soft)}
.film-screen video {width:100%;height:100%;object-fit:contain}
.film--clean .film-screen {
  width:100%;
  height:auto;
  aspect-ratio:9/16;
  margin-inline:auto;
  border-radius:16px;
  background:transparent;
}
.film--clean .film-screen video {height:auto;aspect-ratio:9/16}
.chapter-films {width:100%;max-width:420px;margin:28px 0 0}
.film figcaption {margin-top:20px}
.film figcaption h3 {font-size:18px;line-height:1.3}
.film .film-action {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}
.film-action .button {min-height:48px;padding:12px 16px;white-space:nowrap}
.video-error {position:absolute;inset:20px;display:grid;align-content:center;background:var(--white);color:var(--navy);padding:20px;font-size:16px;border-radius:12px;z-index:1}
dt {font-weight:600;font-size:22px;letter-spacing:-.025em;line-height:1.3}
dd {font-size:16px;line-height:1.55;max-width:54ch}
.vision-layout {display:grid;grid-template-columns:1fr 1.1fr;gap:8vw;background:var(--soft);padding:clamp(24px,4vw,60px);border-radius:16px;align-items:start}
.vision-choices {display:grid;gap:16px}
.vision-choices button {border:0;background:var(--white);padding:22px 24px;display:flex;justify-content:space-between;gap:16px;align-items:center;text-align:left;border-radius:8px;font-size:clamp(20px,2vw,28px);font-weight:600;transition:background .2s,color .2s}
.vision-choices button[aria-pressed=true] {background:var(--navy);color:var(--white)}
.vision-choices svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;opacity:0;flex:none}
.vision-choices button[aria-pressed=true] svg {opacity:1}
.vision-choices button:hover {text-decoration:underline;text-underline-offset:5px}
.vision-panels h3 {font-size:clamp(26px,3vw,42px);max-width:18ch}
.vision-panels p {margin-top:20px;font-size:18px;max-width:38ch}
.vision-panels .vision-outcome {font-size:15px;font-weight:600;margin-top:28px}
.vision-panels>div+div {margin-top:30px}
.vision-panels.is-enhanced>div+div {margin-top:0}
.vision-boundary {font-size:14px;color:var(--muted);margin-top:24px;max-width:80ch}
.services>h2 {margin-bottom:20px}
.service-list {display:grid;gap:0}
.service-list>div {display:grid;grid-template-columns:1fr 1fr;gap:7vw;padding-block:24px}
.service-list dt {font-size:26px}
.service-accent {color:var(--action)}
.process-list {padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;counter-reset:process}
.process-list li {counter-increment:process}
.process-list li::before {content:counter(process) '.';display:block;font-weight:600;font-size:16px;margin-bottom:14px}
.process-list h3 {font-size:23px}
.process-list p {font-size:16px;margin-top:14px}
.faq>h2 {margin-bottom:36px}
.faq-list {display:grid;grid-template-columns:1fr 1fr;column-gap:60px;align-items:start}
.faq-list details {padding:18px 0}
.faq-list summary {font-size:16px;font-weight:600;padding-right:20px;line-height:1.5}
.faq-list details p {font-size:16px;line-height:1.6;margin-top:14px;color:var(--muted)}
.contact {padding-block:80px;background:var(--navy);color:var(--white)}
.contact-inner {display:grid;grid-template-columns:1.2fr 1fr;gap:8vw;align-items:center}
.contact p {font-size:18px;margin-bottom:22px}
.email-alternative {display:block;font-size:14px;margin-top:24px;width:fit-content}
footer {display:flex;justify-content:space-between;gap:30px;align-items:center;padding-block:36px}
footer p,footer>div {font-size:13px}
footer>div {display:flex;gap:20px}
body::-webkit-scrollbar {width:10px}
body::-webkit-scrollbar-thumb {background:#b8c6d3;border:2px solid white;border-radius:10px}

/* Shared desktop height balances the panels without cropping portrait content. */
@media(min-width:1001px) {
  .attention-story {--story-panel-height:clamp(660px,48vw,760px)}
  .attention-story.is-enhanced .attention-visual {top:max(20px,calc((100svh - var(--story-panel-height) - 60px)/2))}
  .attention-story.is-enhanced .attention-stage {min-height:var(--story-panel-height);display:flex;flex-direction:column}
  .attention-story.is-enhanced .story-position {margin-top:auto;padding-top:28px}
  .chapter-films {max-width:calc(var(--story-panel-height)*9/16)}
}

@media(max-width:1000px) {
  .wordmark {width:160px}
  .site-header {gap:20px}
  nav {gap:20px}
  .attention-story {gap:30px;grid-template-columns:1fr 1fr}
  .attention-stage {padding:22px}
  .attention-chapter h2 {font-size:34px}
  .attention-chapter>p {font-size:16px}
  .film-screen {height:460px}
  .process-list {grid-template-columns:1fr;gap:28px}
  .process-list li {display:grid;grid-template-columns:24px 1fr;column-gap:16px}
  .process-list li::before {grid-row:span 2;margin:0;font-size:20px}
  .process-list p {grid-column:2;margin-top:8px}
  footer {flex-wrap:wrap}
}
@media(max-width:650px) {
  .site-header {padding-block:18px;flex-wrap:wrap;gap:10px}
  .wordmark {width:150px}
  .header-action {font-size:13px;margin-left:auto}
  .site-header nav {order:3;justify-content:center;flex-basis:100%;gap:30px}
  nav a {font-size:13px;padding-block:8px}
  .hero {padding-block:32px 26px}
  .hero h1 {font-size:clamp(34px,8.8vw,40px);max-width:18ch}
  .hero h1 span {font-size:clamp(25px,6.2vw,26px);margin-top:14px;max-width:25ch}
  .hero>p {font-size:16px;margin-block:22px;max-width:35ch}
  .button {gap:14px}
  .attention-story,.attention-story:not(.is-enhanced) {display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
  .attention-story:not(.is-enhanced) .attention-scene,.attention-story:not(.is-enhanced) .attention-chapter {grid-column:1;padding:0}
  .attention-story:not(.is-enhanced) .attention-scene {padding:20px}
  .attention-story:not(.is-enhanced) [data-scene="0"] {grid-row:1;margin-top:24px}
  .attention-story:not(.is-enhanced) [data-chapter="0"] {grid-row:2}
  .attention-story:not(.is-enhanced) [data-scene="1"] {grid-row:3;margin-top:36px}
  .attention-story:not(.is-enhanced) [data-chapter="1"] {grid-row:4}
  .attention-story:not(.is-enhanced) [data-scene="2"] {grid-row:5;margin-top:36px}
  .attention-story:not(.is-enhanced) [data-chapter="2"] {grid-row:6}
  .attention-story:not(.is-enhanced) .story-position {grid-column:1;grid-row:7}
  .attention-visual {position:static;padding-block:18px}
  .attention-story.is-enhanced .attention-visual {position:sticky;top:0;z-index:2;background:var(--white)}
  .attention-stage {padding:20px}
  .attention-scene h3 {margin-bottom:18px}
  .story-position {margin-top:16px}
  .attention-chapter {padding-block:34px}
  .attention-chapter h2 {font-size:clamp(30px,7.8vw,42px);max-width:20ch}
  .attention-chapter>p {font-size:16px;margin-top:20px;max-width:none}
  .attention-story.is-enhanced .attention-chapter {min-height:52svh;justify-content:center;padding-block:40px}
  .attention-story.is-enhanced .attention-chapter:last-child {padding-bottom:40px}
  .section-space {margin-top:76px}
  .section-intro {grid-template-columns:1fr;gap:18px;margin-bottom:28px}
  .section-intro>p {font-size:16px;padding:0}
  .film-screen {height:300px;border-radius:12px}
  .film--clean .film-screen {width:100%;height:auto;border-radius:16px}
  .film figcaption {margin-top:14px}
  .vision-layout {grid-template-columns:1fr;gap:28px}
  .vision-choices {grid-template-columns:1fr 1fr;gap:10px}
  .vision-choices button {font-size:16px;line-height:1.3;padding:14px;min-height:76px;gap:8px}
  .vision-choices svg {width:18px;height:18px}
  .vision-panels h3 {font-size:30px}
  .vision-panels p {font-size:16px}
  .vision-panels .vision-outcome {font-size:14px}
  .service-list>div {grid-template-columns:1fr;gap:12px;padding-block:22px}
  .service-list dt {font-size:23px}
  dd {font-size:16px}
  .faq-list {grid-template-columns:1fr;gap:0}
  .faq-list summary {font-size:15px;min-height:44px}
  .faq-list details p {font-size:15px}
  .contact {padding-block:48px}
  .contact-inner {grid-template-columns:1fr;gap:28px}
  .contact p {font-size:16px}
  footer {gap:20px;padding-block:30px}
  footer p {width:100%;order:3}
}
@media(max-height:740px), (prefers-reduced-motion:reduce) {
  .attention-story.is-enhanced .attention-visual {position:static}
  .attention-story.is-enhanced .attention-chapter {min-height:0;padding-block:34px}
}
@media(prefers-reduced-motion:reduce) {
  :root {scroll-behavior:auto}
  *,*::before,*::after {animation:none!important;transition:none!important}
}