/* thai */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/prompt-0-3ed6cc86f385.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/prompt-1-9527fd3fefa1.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/prompt-2-814bb268fba7.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/prompt-3-b09858415497.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/prompt-4-6709b0361745.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/prompt-5-15369711ec4f.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/prompt-6-8bdbf24ddf3a.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/prompt-7-54eb2e1925b4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/prompt-8-54e3037520be.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/prompt-9-ef9380f9b0d0.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/prompt-10-da54e3f120d4.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/prompt-11-7f8674567323.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

    :root { color-scheme:dark; --accent:#1456e8; --accent-ink:#fff; --sans:'Prompt',sans-serif; --mono:'Prompt',sans-serif; --frame:1360px; --fw:min(1vw,calc(var(--frame)/100)); --pad:max(28px,calc((100vw - var(--frame))/2)); --gutter:20px; --nav-h:96px; --ease:cubic-bezier(.76,0,.24,1); --ease-out:cubic-bezier(.16,1,.3,1); --skew:-14deg; font-synthesis:none; }
    * { box-sizing:border-box; }
    html { background:#061f4a; }
    body { margin:0; font-family:var(--sans); font-weight:500; color:#fff; -webkit-font-smoothing:antialiased; }
    a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
    button { color:inherit; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
    button:focus-visible,a:focus-visible { outline:3px solid #71d8ff; outline-offset:5px; }
    img,svg { display:block; }
    [hidden] { display:none !important; }
    ::selection { background:#71d8ff; color:#061f4a; }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .skip-link { position:fixed; z-index:50; top:-100px; left:20px; background:white; color:#0b3f8f; padding:12px 18px; }
    .skip-link:focus { top:12px; }
    .bereach-nav { position:absolute; z-index:10; inset:0 var(--pad) auto; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px; }
    .brand { display:flex; align-items:center; gap:10px; }
    .brand-symbol { position:relative; width:45px; height:37px; overflow:hidden; }
    .brand-symbol img { position:absolute; width:80px; height:80px; top:-18px; left:-17px; filter:brightness(0) invert(1); }
    .brand-name { font-size:29px; line-height:1.2; font-weight:500; letter-spacing:-1.5px; }
    .brand-name strong { font-weight:900; }
    .brand-name i { color:#71d8ff; font-style:normal; font-weight:900; }
    .brand-detail { border-left:1px solid #ffffff50; padding-left:14px; margin-left:8px; font-size:7px; font-weight:700; line-height:1.6; letter-spacing:1px; }
    .header-links { display:flex; align-items:center; gap:27px; font-size:11px; font-weight:700; color:#d0e3ff; }
    .header-links a { min-height:44px; display:flex; align-items:center; }
    .header-links a:hover { color:white; }
    .header-action { display:inline-flex; align-items:center; gap:20px; min-height:44px; padding:10px 18px; border:1px solid #a9d8ff87; border-radius:7px; font-size:11px; font-weight:700; background:#1456e82e; }
    .header-action:hover { background:#1456e866; }
    .header-action svg { width:18px; height:18px; }
    .caps { font-size:11px; line-height:1.4; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
    .data { font:700 11px/1.4 var(--mono); font-variant-numeric:tabular-nums; }
    .ico { width:1em; height:1em; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
    .badge { position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:48px; padding:13px 23px; font-size:12px; font-weight:700; line-height:1.4; white-space:nowrap; }
    .badge::before { content:''; position:absolute; z-index:-1; inset:0; border:1px solid #c9e5ff80; border-radius:6px; transform:skewX(-14deg); transition:background .25s,transform .25s; }
    .badge:hover::before { background:#ffffff12; }
    .badge--fill { color:#1456e8; }
    .badge--fill::before { background:white; border-color:white; }
    .badge--fill:hover::before { background:#e2f3ff; transform:skewX(-14deg) scaleX(1.025); }
    .badge .arw { width:20px; height:13px; }
    .spot {
  --fg: #fff; --bg: var(--accent); --mute: rgba(255, 255, 255, .72); --line: rgba(255, 255, 255, .22);
  /* the art's palette: cobalt tints for depth, lime for signals (ticks, LEDs, data in flight) and the changing word */
  --sa-m: #dce7f8; --sa-s: #a3c0ea; --sa-d: #0a3f8c; --sa-l: #c8f25a;
  position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); column-gap: var(--gutter);
  padding: calc(var(--nav-h) + 1rem) var(--pad) 8.5rem;
  background: #0b3f8f; color: #fff;
}
.spot :focus-visible { outline-color: #fff; }
.spot__copy { grid-column: 1 / 7; grid-row: 1; align-self: center; position: relative; z-index: 3; display: grid; justify-items: start; gap: clamp(1.4rem, 2.4vw, 2.4rem); }
.spot__h1 { margin: 0; font-size: clamp(2.3rem, calc(5.1 * var(--fw)), 5.6rem); line-height: 1.24; font-weight: 500; letter-spacing: -.012em; }
/* each line rises slanted out of its own mask (room kept for Thai marks above and below) */
.spot__ln { display: block; overflow: hidden; white-space: nowrap; padding: .16em 0 .2em; margin: -.16em 0 -.2em; }
.spot__li { display: inline-block; transform-origin: 0% 100%; }
/* the changing words: a masked slot whose width eases to each new word, so the line never jumps */
.spot__slot { position: relative; display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; padding: .16em 0 .22em; margin: -.16em 0 -.22em; }
.spot__slot > span { display: inline-block; transform-origin: 0% 100%; }
.spot__slot > .is-next { position: absolute; left: 0; top: .16em; }
.spot__noun { color: var(--sa-l); }
/* every line sits in one cell, so the block keeps the tallest line's height and the buttons never move */
.spot__subs { display: grid; max-width: 34rem; }
.spot__sub { grid-area: 1 / 1; display: grid; gap: .75rem; align-content: start; }
.spot__sub:not(.is-on) { visibility: hidden; }
.spot__lead { margin: 0; font-size: clamp(1.0625rem, calc(1.3 * var(--fw)), 1.375rem); line-height: 1.62; color: rgba(255, 255, 255, .92); text-wrap: pretty; }
.spot__en { margin: 0; color: rgba(255, 255, 255, .66); }
/* on the blue the one filled action turns paper white with cobalt ink */
.spot__ctas { --accent: #fff; --accent-ink: #0e5ac8; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.spot__note { margin: 0 0 0 .3rem; font-size: .875rem; color: rgba(255, 255, 255, .72); }

/* the whole hero is the stage: the photograph, the map on it, and the shade that keeps the copy legible */
.spot__stage { position: absolute; inset: 0; z-index: 0; container-type: size; }
.spot__plate { position: absolute; inset: 0; overflow: hidden; background: #0b3f8f; }
/* Bangkok at blue hour (Magnific), a portrait frame on phones, anchored on the skyline */
.spot__photo, .spot__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.spot__photo img { object-fit: cover; object-position: center bottom; }
.spot__inner { position: absolute; inset: 0; }
/* the copy side deepens so the chapters beyond read as the world going on; the top settles under the nav; the foot falls to black */
.spot__plate::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 52, 120, .72) 0, rgba(8, 52, 120, 0) calc(var(--nav-h) + 3rem)),
              linear-gradient(90deg, rgba(8, 52, 120, .84) 0%, rgba(8, 52, 120, .5) 32%, rgba(8, 52, 120, 0) 56%),
              linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .5) 90%, #000 100%); }
/* the story on the right half, as large as the height allows */
.spot__art {
  --s: min(calc((50cqw - 5rem) / 600), calc((100cqh - var(--nav-h) - 11rem) / 520));
  position: absolute; left: calc(50cqw + 1rem); top: calc(var(--nav-h) + (100cqh - var(--nav-h) - 8.5rem - var(--s) * 520) / 2);
  width: calc(var(--s) * 600); height: calc(var(--s) * 520); overflow: visible; color: #fff;
}
.spot__gl { fill: none; stroke: rgba(255, 255, 255, .075); stroke-width: 1; }
.spot__gl--major { stroke: rgba(255, 255, 255, .13); stroke-width: 1.6; }
.spot__grid { opacity: .45; }
/* the rest of the map stays in view but dim; the closing pull-back lights every chapter again */
.spot.is-live .spot__sc { transition: opacity .9s var(--ease-out); }
.spot.is-live .spot__sc:not(.is-cur) { opacity: .26; }
.spot.is-live.on-hub .spot__sc { opacity: 1; }
/* the cut between chapters: a cobalt curtain on the slant whose edges are a white blade over a sky band */
.spot__curtain { position: absolute; inset: 0 -4px; z-index: 2; background: var(--accent); visibility: hidden; pointer-events: none; } /* main.js parks it off the stage */
.spot__curtain::before, .spot__curtain::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1.5rem; }
.spot__curtain::before { right: 0; background: linear-gradient(90deg, transparent, var(--sa-s) 72%, #fff 72%); }
.spot__curtain::after { left: 0; background: linear-gradient(270deg, transparent, var(--sa-s) 72%, #fff 72%); }
/* art palette */
.sa-w { fill: #fff; } .sa-m { fill: var(--sa-m); } .sa-s { fill: var(--sa-s); } .sa-c { fill: var(--accent); }
.sa-d { fill: var(--sa-d); } .sa-k { fill: #000; } .sa-l { fill: var(--sa-l); } .sa-none { fill: none; }
.sa-ln { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sa-ic { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-w { stroke: #fff; } .sl-s { stroke: var(--sa-s); } .sl-d { stroke: var(--sa-d); } .sl-c { stroke: var(--accent); } .sl-l { stroke: var(--sa-l); }
.sa-tx { font-family: var(--sans); font-weight: 500; }
.sa-mono { font-family: var(--mono); font-weight: 400; }

/* the chapters on a slanted glass bar: where you are on the map, every chapter by name, the pause */
.spot__rail { position: absolute; z-index: 3; left: 0; right: 0; bottom: 1.8rem; margin-inline: auto; isolation: isolate;
  width: min(calc(100% - 2 * var(--pad)), 76rem); display: flex; align-items: center; gap: 1.4rem; padding: .7rem 1.6rem .7rem 1.9rem; }
.spot__rail::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--skew)); border-radius: .7rem;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.spot__meta { display: flex; flex: none; align-items: center; gap: .8rem; padding-right: 1.4rem; border-right: 1px solid rgba(255, 255, 255, .2); }
.spot__mm { width: 2.5rem; height: 2.5rem; overflow: visible; }
.spot__mm path { fill: none; stroke: rgba(255, 255, 255, .38); stroke-width: 1.1; stroke-linejoin: round; }
.spot__mm rect { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .42); stroke-width: .8; transition: fill .45s var(--ease-out), stroke .45s var(--ease-out); }
.spot__mm rect.is-done { fill: rgba(255, 255, 255, .78); stroke: transparent; }
.spot__mm rect.is-on { fill: var(--sa-l); stroke: transparent; }
.spot__mmt { display: grid; gap: .1rem; white-space: nowrap; }
.spot__tbk { font-size: .625rem; line-height: 1.2; font-weight: 500; letter-spacing: .08em; color: rgba(255, 255, 255, .66); }
.spot__tbv { font-size: .8125rem; line-height: 1.3; white-space: nowrap; }
.spot__cells { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--gutter); margin: 0; padding: 0; list-style: none; }
.spot__cell { display: grid; gap: .55rem; width: 100%; padding: .35rem 0 .25rem; border: 0; background: none; color: rgba(255, 255, 255, .62); font: inherit; font-size: .8125rem; line-height: 1.35; white-space: nowrap; text-align: left; cursor: pointer; transition: color .4s var(--ease-out); }
.spot__cell:hover, .spot__cell[aria-current="true"] { color: #fff; }
.spot__bar { position: relative; display: block; height: 2px; overflow: hidden; background: rgba(255, 255, 255, .2); }
.spot__bar i { position: absolute; inset: 0; background: var(--sa-l); transform: scaleX(0); transform-origin: 0 50%; }
.spot__pause { flex: none; position: relative; isolation: isolate; display: none; place-items: center; width: 2.7rem; height: 2.4rem; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.spot__pause::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(255, 255, 255, .38); border-radius: .5em; transform: skewX(var(--skew)); transition: border-color .4s var(--ease-out); }
.spot__pause:hover::before { border-color: #fff; }
.spot__pause .ico { width: 1.05rem; height: 1.05rem; }
.spot.is-live .spot__pause { display: grid; } /* only when something moves */
.spot__ico-play { display: none; fill: currentColor; }
.spot.is-paused .spot__ico-pause { display: none; }
.spot.is-paused .spot__ico-play { display: block; }
.anim .spot__li, .anim .spot__subs, .anim .spot__ctas, .anim .spot__stage, .anim .spot__rail { visibility: hidden; }
.nw { white-space: nowrap; }

    .spot { --sa-l:#71d8ff; --sa-s:#a3c0ea; --sa-m:#dce7f8; --sa-d:#0a3f8c; min-height:max(100svh,760px); padding-bottom:138px; }
    .spot__copy { gap:25px; }
    .spot__eyebrow { margin:0; display:flex; align-items:center; gap:10px; font-size:8px; line-height:1.5; letter-spacing:1.5px; font-weight:700; color:#d0e8ff; }
    .spot__eyebrow::before { content:''; width:22px; height:2px; background:#71d8ff; }
    .spot__h1 { font-family:'Prompt',sans-serif; font-size:clamp(42px,calc(5.05 * var(--fw)),76px); font-weight:900; line-height:1.35; letter-spacing:-.035em; }
    .spot__ln:first-child { font-size:.76em; line-height:1.5; }
    .spot__q { color:white; }
    .spot__noun { color:#71d8ff; }
    .spot__subs { width:100%; max-width:520px; }
    .spot__lead { font-size:15px; line-height:1.95; color:#f1f6ff; }
    .spot__en { font-size:9px; font-weight:700; color:#c0d7f7; }
    .spot__ctas { gap:13px 24px; }
    .spot__note { font-size:10px; margin:0; color:#cfdef5; width:100%; }
    .spot__mobile-space { display:none; }
    .spot__art { --s:min(calc((50cqw - 4rem)/600),calc((100cqh - var(--nav-h) - 10rem)/520)); }
    .sa-tx { font-family:'Prompt',sans-serif; font-weight:700; }
    .sa-mono { font-family:'Prompt',sans-serif; font-weight:500; }
    .spot__rail { width:calc(100% - 2 * var(--pad)); max-width:1360px; bottom:25px; gap:18px; padding:12px 22px; }
    .spot__rail::before { background:#ffffff13; border-color:#d8eaff4d; }
    .spot__meta { padding-right:18px; gap:9px; }
    .spot__mm { width:34px; height:34px; }
    .spot__tbk { font-size:8px; font-weight:700; color:#c3d9f7; }
    .spot__tbv { font-size:11px; }
    .spot__cells { column-gap:17px; }
    .spot__cell { min-height:44px; font-size:11px; font-weight:700; color:#c5d9f6; gap:9px; align-content:center; }
    .spot__bar { background:#aecfff55; }
    .spot__pause { display:grid; min-width:44px; width:44px; height:44px; }
    .spot__pause:disabled { opacity:.55; cursor:default; }
    .spot__announcement { position:absolute; }
    /* Rolling chapter counter, kept in the same frame as the mini-map. */
    .odo { display:inline-flex; height:1em; overflow:hidden; vertical-align:-.03em; }
    .odo__strip { will-change:transform; }
    @media(min-width:1700px) { .spot__lead { font-size:17px; } .spot__copy { gap:29px; } }
    @media(max-width:1200px) { .brand-detail { display:none; } .spot__cell { font-size:10px; } .spot__cells { column-gap:10px; } .spot__meta { padding-right:12px; } .spot__rail { gap:13px; padding-inline:18px; } .spot__note { font-size:9px; } }
    @media(max-width:991px) {
      :root { --nav-h:84px; --pad:26px; }
      .bereach-nav { gap:18px; }
      .brand-detail { display:block; }
      .header-links { display:none; }
      .spot { display:block; min-height:100svh; padding:calc(var(--nav-h) + 26px) var(--pad) 26px; }
      .spot__copy { display:grid; justify-items:start; gap:22px; position:relative; }
      .spot__h1 { font-size:clamp(32px,7.1vw,58px); }
      .spot__eyebrow { font-size:8px; }
      .spot__mobile-space { display:block; width:100%; aspect-ratio:600/520; }
      .spot__subs { max-width:560px; }
      .spot__lead { font-size:15px; line-height:1.9; }
      .spot__sub { gap:10px; }
      .spot__en { font-size:9px; }
      .spot__art { --s:calc((100cqw - 2 * var(--pad))/600); left:var(--pad); top:280px; }
      .spot__plate::after { background:linear-gradient(180deg,#083478bb 0%,#08347800 27%,#08347800 54%,#083478d9 73%,#061f4a 100%); }
      .spot__rail { position:relative; width:100%; margin-top:30px; left:auto; right:auto; bottom:auto; padding:10px 14px; gap:12px; }
      .spot__meta { border:0; padding:0; }
      .spot__mmt { display:none; }
      .spot__cells { display:flex; gap:15px; overflow-x:auto; padding:1px 3px 6px; scrollbar-width:thin; scrollbar-color:#82c7ff66 transparent; overscroll-behavior:contain; scroll-behavior:smooth; }
      .spot__cells li { flex:0 0 104px; }
      .spot__cell { font-size:11px; padding:6px 0; min-height:48px; }
      .spot__name { position:static; width:auto; height:auto; clip:auto; overflow:visible; white-space:nowrap; }
      .spot__note { width:auto; }
    }
    @media(max-width:600px) {
      :root { --pad:23px; --nav-h:78px; }
      .brand { gap:7px; }
      .brand-symbol { width:37px; height:31px; }
      .brand-symbol img { width:67px; height:67px; top:-15px; left:-14px; }
      .brand-name { font-size:24px; letter-spacing:-1.2px; }
      .brand-detail { display:none; }
      .header-action { font-size:9px; gap:11px; min-height:44px; padding:10px 12px; }
      .header-action svg { width:14px; height:14px; }
      .spot { padding-top:calc(var(--nav-h) + 25px); padding-bottom:20px; }
      .spot__copy { gap:18px; }
      .spot__eyebrow { font-size:6px; letter-spacing:.9px; }
      .spot__h1 { font-size:8.4vw; line-height:1.4; letter-spacing:-.04em; }
      .spot__ln:first-child { font-size:.75em; }
      .spot__lead { font-size:12px; line-height:1.95; }
      .spot__en { font-size:7px; letter-spacing:.03em; }
      .spot__ctas { gap:12px 21px; }
      .badge { font-size:10px; padding:12px 17px; gap:15px; min-height:44px; }
      .badge .arw { width:16px; height:11px; }
      .spot__note { font-size:8px; width:100%; }
      .spot__rail { padding:8px 12px; gap:9px; margin-top:26px; }
      .spot__mm { width:27px; height:27px; }
      .spot__cells { gap:12px; }
      .spot__cells li { flex-basis:91px; }
      .spot__cell { font-size:10px; }
      .spot__pause { width:44px; min-width:44px; }
    }
    @media(max-width:370px) { :root { --pad:20px; --nav-h:74px; } .brand-name { font-size:21px; } .brand-symbol { width:32px; height:28px; } .brand-symbol img { width:60px; height:60px; top:-14px; left:-13px; } .header-action { font-size:8px; padding-inline:10px; gap:8px; } .spot__h1 { font-size:8.2vw; } .spot__lead { font-size:11px; } .spot__cells li { flex-basis:84px; } }
    @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
    /* Original BeReach interpretation of the reference's statement and expanding scroll scene. */
.reach { --reach-bg:#050b15; --reach-ice:#71d8ff; --reach-rule:#90baff30; position:relative; isolation:isolate; padding-top:clamp(95px,11vw,174px); background:var(--reach-bg); color:#f6f8ff; overflow-x:clip; }
.reach-head { padding:0 var(--pad); max-width:1600px; margin:auto; }
.reach-intro { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:42px; }
.reach-eyebrow { margin:0; color:#afc6e7; font-size:8px; line-height:1.6; font-weight:700; letter-spacing:1.6px; }
.reach-eyebrow > span { color:#71d8ff; margin-right:17px; }
.reach-skip { display:inline-flex; align-items:center; gap:14px; min-height:44px; color:#afc6e7; font-size:10px; font-weight:500; }
.reach-skip:hover { color:#71d8ff; }
.reach-skip > span { color:#71d8ff; font-size:18px; }
.reach-heading { margin:0; font-family:'Prompt',sans-serif; font-size:clamp(42px,5.35vw,80px); font-weight:900; line-height:1.5; letter-spacing:-.045em; }
.reach-heading-line { display:block; transform-origin:0 100%; }
.reach-wordmark { font-weight:500; letter-spacing:-.06em; }
.reach-wordmark strong { font-weight:900; }
.reach-wordmark i { font-style:normal; color:#71d8ff; }
.reach-word { display:inline-block; position:relative; white-space:nowrap; vertical-align:bottom; color:#71d8ff; overflow:hidden; padding:.15em 0 .2em; margin:-.15em 0 -.2em; text-align:left; }
.reach-word > span { display:inline-block; transform-origin:0 100%; }
.reach-heading-accent { color:#71d8ff; }
.reach-head-foot { margin-top:30px; display:flex; justify-content:space-between; align-items:flex-end; gap:35px; }
.reach-head-foot > p { margin:0; color:#a6bbd7; font-size:13px; font-weight:500; line-height:1.95; }
.reach-scroll-note { display:flex; align-items:center; gap:13px; color:#718caa; font-size:7px; font-weight:700; letter-spacing:1.1px; }
.reach-scroll-note > span { color:#71d8ff; font-size:23px; font-weight:500; }
.reach-track { margin-top:clamp(48px,6vw,96px); height:auto; position:relative; }
.reach-sticky { position:relative; isolation:isolate; min-height:0; background:#050b15; overflow:hidden; }
.reach-visual { position:relative; width:100%; height:82svh; min-height:550px; overflow:hidden; background:#061633; transform-origin:0 100%; }
.reach-art { position:absolute; inset:0; display:block; transform-origin:50% 50%; }
.reach-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.reach-film-canvas,.reach-film-video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; background:#050b15; }
.reach-art:has(.reach-film-canvas) { transform:none !important; }
.reach-film-poster { object-fit:contain !important; background:#050b15; }
.reach-visual-shade { pointer-events:none; }
.reach-visual-shade { pointer-events:none; position:absolute; inset:0; background:linear-gradient(180deg,#0616332e 0%,transparent 30%,transparent 58%,#020c269c 100%); }
.reach-topline { position:absolute; z-index:4; top:29px; left:var(--pad); right:var(--pad); display:flex; align-items:center; justify-content:space-between; gap:20px; color:#a4c8f6; font-size:7px; font-weight:700; letter-spacing:1.4px; }
.reach-topline > span:last-child { font-size:9px; font-weight:500; letter-spacing:0; }
.reach-wire { position:absolute; z-index:2; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; }
.reach-wire path { stroke:#75d9ff; stroke-width:1.1; stroke-linecap:round; stroke-dasharray:5 7; }
.reach-card { display:none; position:absolute; z-index:3; width:clamp(142px,14vw,198px); padding:16px; color:#dcecff; border:1px solid #98c9ff68; border-radius:10px; background:linear-gradient(135deg,#154b95ed,#0a2452e8); box-shadow:0 16px 35px #0004,inset 0 1px 0 #d9f1ff12; backdrop-filter:blur(14px); }
.reach-card--idea { left:10%; top:16%; }
.reach-card--web { left:36%; top:10%; }
.reach-card--store { left:22%; top:62%; }
.reach-card--system { left:67%; top:54%; }
.reach-card-top { display:flex; justify-content:space-between; align-items:center; gap:9px; margin-bottom:13px; }
.reach-card-index { color:#8fb7e9; font-size:6px; font-weight:700; line-height:1.5; letter-spacing:1px; }
.reach-card-top svg { width:20px; height:20px; stroke:#86dcff; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.reach-card > strong { display:block; font-size:12px; font-weight:700; line-height:1.65; letter-spacing:-.02em; }
.reach-card-line { display:block; width:88%; height:3px; margin-top:14px; border-radius:2px; background:#8fb7e950; }
.reach-card-line.short { width:60%; margin-top:6px; }
.reach-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid #badbff29; padding-top:11px; margin-top:17px; color:#a7c4e7; font-size:6px; line-height:1.5; }
.reach-card-bottom b { font-size:14px; font-weight:500; color:#71d8ff; }
.reach-mini-web { margin-top:10px; padding:5px; border:1px solid #95caff3b; border-radius:4px; }
.reach-mini-web > i { display:block; height:23px; border-radius:2px; background:linear-gradient(120deg,#8bdfff,#246dec); }
.reach-mini-web > span { display:flex; gap:4px; margin-top:5px; }
.reach-mini-web b { flex:1; height:12px; background:#81b9ff44; border-radius:2px; }
.reach-mini-products { display:flex; gap:6px; margin-top:13px; }
.reach-mini-products i { flex:1; height:33px; border-radius:3px; border:1px solid #9ed2ff62; background:linear-gradient(145deg,#83d8ff80,#1d68d84d); }
.reach-mini-products i:nth-child(2) { background:linear-gradient(145deg,#b7e9ffae,#317ee76b); }
.reach-mini-status { display:flex; align-items:center; gap:7px; margin-top:14px; padding:9px 7px; border:1px solid #9ed2ff39; border-radius:4px; color:#b9d4f4; font-size:7px; }
.reach-mini-status i { width:5px; height:5px; border-radius:50%; background:#71d8ff; box-shadow:0 0 10px #71d8ff88; }
.reach-stamp-tool { display:none; position:absolute; z-index:6; left:calc(50% - 62px); top:20%; width:124px; height:72px; border:1px solid #aedbffb3; border-radius:9px; background:linear-gradient(#4b97e5,#1456e8); box-shadow:0 24px 35px #00123680; text-align:center; color:#e9f6ff; }
.reach-stamp-tool > span { position:absolute; width:37px; height:44px; bottom:100%; left:calc(50% - 18.5px); border:1px solid #a8d6ff9c; border-radius:15px 15px 0 0; background:linear-gradient(90deg,#226ce5,#71c7ff,#226ce5); }
.reach-stamp-tool > b { display:block; padding-top:21px; font-size:19px; font-weight:900; letter-spacing:-1px; }
.reach-stamp { display:none; position:absolute; z-index:5; left:calc(50% - 140px); top:29%; width:280px; padding:24px 22px; border:2px solid #c7ebffcc; border-radius:12px; background:#1456e83d; backdrop-filter:blur(12px); text-align:center; box-shadow:0 0 35px #1c85ff33,inset 0 0 25px #9ed8ff15; }
.reach-stamp-overline { display:block; color:#a9e4ff; font-size:7px; font-weight:700; letter-spacing:1.8px; }
.reach-stamp-brand { display:block; margin:8px 0 6px; color:white; font-size:44px; line-height:1.4; font-weight:500; letter-spacing:-2px; }
.reach-stamp-brand strong { font-weight:900; }
.reach-stamp-brand i { font-style:normal; color:#71d8ff; }
.reach-stamp-tag { display:block; color:#d8f1ff; font-size:9px; font-weight:700; }
.reach-caption { position:relative; z-index:5; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end; padding:32px var(--pad); background:#061633; }
.reach-caption-kicker { margin:0 0 10px; color:#8bb9ed; font-size:6px; font-weight:700; line-height:1.5; letter-spacing:1px; }
.reach-stage-name { margin:0 0 11px; color:white; font-size:30px; font-weight:900; line-height:1.45; letter-spacing:-.03em; }
.reach-stage-description { margin:0; max-width:360px; color:#c4d6ec; font-size:12px; font-weight:500; line-height:1.9; }
.reach-meter { min-width:125px; align-self:end; border-top:1px solid #b0d6ff4d; padding-top:12px; }
.reach-meter-label { display:block; color:#9fc4ed; font-size:8px; line-height:1.5; }
.reach-meter-number { display:flex; align-items:baseline; gap:6px; font-size:58px; line-height:1.3; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-3px; }
.reach-meter-number small { color:#71d8ff; font-size:16px; font-weight:700; letter-spacing:0; }
.reach-progress { display:block; height:2px; background:#b7d7ff3b; margin-top:5px; overflow:hidden; }
.reach-progress > i { display:block; width:100%; height:100%; background:#71d8ff; transform-origin:left; transform:scaleX(1); }
.reach-controls { position:relative; z-index:7; display:flex; justify-content:space-between; align-items:center; gap:25px; padding:20px var(--pad); border-top:1px solid #90baff29; background:#061633; }
.reach-phases { list-style:none; display:flex; align-items:center; gap:35px; padding:0; margin:0; }
.reach-phase { display:flex; align-items:center; gap:10px; color:#a4bbd6; font-size:10px; font-weight:700; white-space:nowrap; }
.reach-phase > span { color:#7f9cbe; font-size:8px; font-weight:500; }
.reach-phase.is-active { color:white; }
.reach-phase.is-active > span, .reach-phase.is-complete > span { color:#71d8ff; }
.reach-toggle { display:none; align-items:center; justify-content:center; gap:11px; min-height:44px; padding:10px 15px; border:1px solid #8fc2ff66; border-radius:999px; background:#1456e81f; color:#d6e9ff; font-size:9px; font-weight:700; }
.reach-toggle:hover { background:#1456e84d; }
.reach-toggle svg { width:12px; height:12px; }
.reach-play-icon { display:none; }
.reach-toggle[aria-pressed='true'] .reach-pause-icon { display:none; }
.reach-toggle[aria-pressed='true'] .reach-play-icon { display:block; }
.reach-end { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:70px var(--pad) 100px; border-top:1px solid #90baff20; background:#050b15; }
.reach-end .reach-eyebrow { font-size:7px; }
.reach-end-title { margin:14px 0 0; color:#edf5ff; font-size:clamp(24px,2.6vw,39px); line-height:1.5; font-weight:900; letter-spacing:-.03em; }
.reach-end-title span { color:#71d8ff; }
.reach-contact { display:flex; align-items:center; justify-content:center; gap:30px; min-height:52px; padding:15px 24px; border:1px solid #8fcbff80; border-radius:999px; background:linear-gradient(110deg,#1687f8,#1456e8); color:white; white-space:nowrap; font-size:12px; font-weight:700; }
.reach-contact > span { font-size:20px; font-weight:500; }
.reach-contact:hover { background:#1c72f5; }
/* JavaScript enhancement keeps the static reading order as the default. */
.reach.is-enhanced:not(.is-static) .reach-track { height:360svh; }
.reach.is-enhanced:not(.is-static) .reach-sticky { position:sticky; top:0; height:100svh; min-height:0; }
.reach.is-enhanced:not(.is-static) .reach-visual { position:absolute; inset:0; width:auto; height:auto; min-height:0; }
.reach.is-enhanced:not(.is-static) .reach-card, .reach.is-enhanced:not(.is-static) .reach-stamp-tool, .reach.is-enhanced:not(.is-static) .reach-stamp { display:block; }
.reach.is-enhanced:not(.is-static) .reach-wire { opacity:1; }
.reach.is-enhanced:not(.is-static) .reach-caption { position:absolute; right:var(--pad); bottom:115px; width:265px; display:block; padding:0; background:none; }
.reach.is-enhanced:not(.is-static) .reach-caption::before { content:''; position:absolute; inset:-28px; z-index:-1; border-radius:16px; background:radial-gradient(ellipse,#020b26d9,#020b2680 65%,transparent); filter:blur(10px); }
.reach.is-enhanced:not(.is-static) .reach-stage-name { font-size:27px; }
.reach.is-enhanced:not(.is-static) .reach-stage-description { font-size:11px; }
.reach.is-enhanced:not(.is-static) .reach-meter { margin-top:23px; width:100%; }
.reach.is-enhanced:not(.is-static) .reach-controls { position:absolute; left:var(--pad); right:var(--pad); bottom:24px; padding:18px 0 0; background:none; }
.reach.is-enhanced:not(.is-static) .reach-toggle { display:inline-flex; }
.reach[data-paused='true'] *, .reach[data-paused='true'] *::before, .reach[data-paused='true'] *::after { animation-play-state:paused; }
.reach.is-static .reach-topline { position:relative; top:auto; left:auto; right:auto; padding:20px var(--pad); background:#061633; }
.reach.is-static .reach-visual { height:auto; min-height:0; aspect-ratio:16/9; }
.reach.is-static .reach-art { opacity:1; transform:none; }
.reach.is-static .reach-caption { background:#061633; }
.reach.is-static .reach-controls { padding-bottom:28px; }
@media(min-width:1700px) { .reach-heading { font-size:84px; } .reach.is-enhanced:not(.is-static) .reach-caption { width:300px; } .reach.is-enhanced:not(.is-static) .reach-stage-name { font-size:32px; } }
@media(max-width:1150px) { .reach-heading { font-size:5.45vw; } .reach-card { padding:13px; } .reach-card > strong { font-size:10px; } .reach-card-index { font-size:5px; letter-spacing:.5px; } .reach-card-bottom { font-size:5px; } .reach.is-enhanced:not(.is-static) .reach-caption { width:220px; } .reach.is-enhanced:not(.is-static) .reach-stage-name { font-size:24px; } .reach-phases { gap:24px; } }
@media(max-width:991px) {
  .reach { padding-top:100px; }
  .reach-heading { font-size:clamp(35px,5.75vw,57px); }
  .reach-intro { margin-bottom:30px; }
  .reach-head-foot { margin-top:26px; }
  .reach-head-foot > p { font-size:12px; }
  .reach-scroll-note { font-size:6px; letter-spacing:.7px; }
  .reach.is-enhanced:not(.is-static) .reach-track { height:300svh; }
  .reach-card { width:clamp(115px,20vw,170px); }
  .reach.is-enhanced:not(.is-static) .reach-caption { left:var(--pad); right:var(--pad); bottom:100px; width:auto; display:grid; grid-template-columns:minmax(0,1fr) 130px; gap:30px; }
  .reach.is-enhanced:not(.is-static) .reach-caption::before { inset:-30px -10px; background:linear-gradient(transparent,#020b26c9 30%,#020b26b3); border-radius:0; }
  .reach.is-enhanced:not(.is-static) .reach-stage-name { font-size:27px; }
  .reach.is-enhanced:not(.is-static) .reach-stage-description { max-width:400px; font-size:12px; }
  .reach.is-enhanced:not(.is-static) .reach-meter { margin-top:0; }
  .reach-phases { gap:25px; }
  .reach-phase { font-size:9px; gap:8px; }
  .reach-toggle-text { display:none; }
  .reach-toggle { width:44px; min-width:44px; height:44px; padding:12px; }
  .reach-end { padding-top:55px; padding-bottom:75px; }
}
@media(max-width:700px) {
  .reach { padding-top:80px; }
  .reach-intro { margin-bottom:25px; gap:15px; }
  .reach-eyebrow { font-size:6px; letter-spacing:1px; }
  .reach-eyebrow > span { margin-right:9px; }
  .reach-skip { font-size:8px; gap:8px; }
  .reach-skip > span { font-size:15px; }
  .reach-heading { font-size:clamp(28px,7.4vw,42px); line-height:1.6; letter-spacing:-.04em; }
  .reach-head-foot { display:block; margin-top:25px; }
  .reach-head-foot > p { font-size:11px; line-height:1.95; }
  .reach-scroll-note { margin-top:24px; font-size:6px; }
  .reach-track { margin-top:32px; }
  .reach-topline { top:24px; font-size:5px; letter-spacing:.6px; gap:12px; }
  .reach-topline > span:last-child { font-size:7px; }
  .reach-art img { object-position:center; }
  .reach-visual-shade { background:linear-gradient(180deg,#06163333,transparent 35%,transparent 57%,#020c26d9 100%); }
  .reach-card { width:110px; padding:9px; border-radius:7px; }
  .reach-card-top { margin-bottom:8px; gap:5px; }
  .reach-card-index { font-size:4px; letter-spacing:.35px; }
  .reach-card-top svg { width:15px; height:15px; }
  .reach-card > strong { font-size:8px; }
  .reach-card-line { margin-top:9px; height:2px; }
  .reach-card-line.short { margin-top:4px; }
  .reach-card-bottom { padding-top:7px; margin-top:10px; font-size:4px; gap:3px; }
  .reach-card-bottom b { font-size:10px; }
  .reach-mini-web { margin-top:7px; padding:3px; }
  .reach-mini-web > i { height:15px; }
  .reach-mini-web > span { margin-top:3px; gap:3px; }
  .reach-mini-web b { height:8px; }
  .reach-mini-products { margin-top:8px; gap:4px; }
  .reach-mini-products i { height:22px; }
  .reach-mini-status { margin-top:9px; padding:6px 4px; gap:5px; font-size:4.5px; }
  .reach-mini-status i { width:4px; height:4px; }
  .reach-wire path { stroke-width:1.8; }
  .reach-stamp-tool { width:92px; height:54px; left:calc(50% - 46px); top:25%; }
  .reach-stamp-tool > span { height:34px; width:28px; left:calc(50% - 14px); }
  .reach-stamp-tool > b { padding-top:15px; font-size:16px; }
  .reach-stamp { width:210px; left:calc(50% - 105px); top:34%; padding:17px 14px; }
  .reach-stamp-overline { font-size:5px; letter-spacing:1.1px; }
  .reach-stamp-brand { font-size:33px; margin:7px 0 4px; letter-spacing:-1.7px; }
  .reach-stamp-tag { font-size:7px; }
  .reach.is-enhanced:not(.is-static) .reach-caption { bottom:94px; grid-template-columns:minmax(0,1fr) 89px; gap:16px; }
  .reach-caption-kicker { font-size:4.5px; letter-spacing:.6px; margin-bottom:7px; }
  .reach.is-enhanced:not(.is-static) .reach-stage-name { font-size:22px; margin-bottom:8px; }
  .reach.is-enhanced:not(.is-static) .reach-stage-description { font-size:10px; line-height:1.85; }
  .reach-meter { min-width:0; padding-top:9px; }
  .reach-meter-label { font-size:5px; line-height:1.6; }
  .reach-meter-number { font-size:40px; letter-spacing:-2px; gap:3px; }
  .reach-meter-number small { font-size:10px; }
  .reach.is-enhanced:not(.is-static) .reach-controls { bottom:20px; padding-top:12px; gap:12px; }
  .reach-phases { flex:1; gap:0; justify-content:space-between; }
  .reach-phase { display:block; font-size:8px; line-height:1.6; }
  .reach-phase > span { display:block; font-size:6px; margin-bottom:4px; }
  .reach-toggle { min-width:44px; }
  .reach-end { display:block; padding-top:42px; padding-bottom:60px; }
  .reach-end .reach-eyebrow { font-size:5px; letter-spacing:.8px; }
  .reach-end-title { font-size:25px; margin-top:13px; }
  .reach-contact { margin-top:27px; width:max-content; font-size:11px; gap:25px; min-height:48px; padding:12px 20px; }
  .reach.is-static .reach-visual { aspect-ratio:9/16; }
  .reach.is-static .reach-caption { grid-template-columns:minmax(0,1fr) 89px; gap:15px; padding-top:28px; }
  .reach.is-static .reach-stage-name { font-size:22px; }
  .reach.is-static .reach-stage-description { font-size:11px; }
  .reach.is-static .reach-controls { gap:0; }
  .reach.is-static .reach-phase { font-size:9px; }
}
@media(max-width:370px) { .reach-heading { font-size:27px; } .reach-card { width:100px; padding:8px; } .reach-card > strong { font-size:7px; } .reach.is-enhanced:not(.is-static) .reach-caption { grid-template-columns:minmax(0,1fr) 77px; gap:13px; } .reach.is-enhanced:not(.is-static) .reach-stage-name { font-size:20px; } .reach-meter-number { font-size:35px; } .reach-phase { font-size:7px; } .reach-end-title { font-size:23px; } }
@media(prefers-reduced-motion:reduce) { .reach-heading-line,.reach-word { transform:none !important; opacity:1 !important; } .reach-track { height:auto !important; } .reach-sticky { position:relative !important; } .reach-toggle { display:none !important; } }

    /* PMN reference header geometry, rebranded for BeReach. */
.br-nav { --br-pad:max(20px,calc((100vw - 1280px)/2)); position:fixed; inset:0 0 auto; z-index:120; height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 var(--br-pad); color:white; pointer-events:none; }
.br-nav > * { pointer-events:auto; }
.br-nav__mark { display:flex; align-items:flex-end; height:37px; gap:8px; flex:none; }
.br-nav__symbol { position:relative; display:block; width:40px; height:35px; overflow:hidden; }
.br-nav__symbol img { position:absolute; width:74px; height:74px; max-width:none; top:-17px; left:-16px; filter:brightness(0) invert(1); }
.br-nav__wordmark { display:block; font-size:28px; line-height:37px; font-weight:500; letter-spacing:-1.6px; }
.br-nav__wordmark strong { font-weight:900; }
.br-nav__wordmark i { font-style:normal; font-weight:900; color:#71d8ff; }
.br-nav__subwrap { display:block; width:0; height:14px; margin-bottom:4px; overflow:hidden; }
.br-nav__subwrap > span { display:block; padding-left:3px; font-size:11px; font-weight:700; line-height:14px; letter-spacing:.05em; white-space:nowrap; }
.br-nav__right { display:flex; align-items:center; gap:24px; }
.br-nav__cta { position:relative; isolation:isolate; display:none; align-items:center; justify-content:center; gap:18px; min-height:38.4px; padding:.6em 1.25em; font-size:13px; font-weight:700; line-height:1.4; white-space:nowrap; }
.br-nav__cta::before { content:''; position:absolute; inset:0; z-index:-1; border:1px solid currentColor; border-radius:4px; transform:skewX(-14deg); transition:background .25s; }
.br-nav__cta:hover::before { background:#ffffff18; }
.br-nav__cta svg { width:20px; height:14px; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.br-nav__cta svg line { transform-box:fill-box; transform-origin:100% 50%; transition:transform .8s var(--ease-out); }
.br-nav__cta:hover svg line,.br-nav__cta:focus-visible svg line { transform:scaleX(1.45); transition-duration:.4s; transition-timing-function:var(--ease); }
.br-menu { position:relative; }
.br-menu__button,.br-nav__burger { display:inline-flex; align-items:center; justify-content:center; gap:11px; min-width:82px; height:44px; padding:0; border:0; background:none; color:inherit; font-size:13px; font-weight:700; line-height:1; letter-spacing:.1em; text-transform:uppercase; }
.br-menu__icon { position:relative; display:block; width:15px; height:14px; flex:none; }
.br-menu__icon i { position:absolute; top:0; bottom:0; width:2px; background:currentColor; transform:skewX(-14deg); transition:transform .5s var(--ease-out),opacity .3s; }
.br-menu__icon i:nth-child(1) { left:12%; }
.br-menu__icon i:nth-child(2) { left:46%; }
.br-menu__icon i:nth-child(3) { left:80%; }
.br-menu.is-open .br-menu__icon i:nth-child(1),.br-nav.is-mobile-open .br-nav__burger .br-menu__icon i:nth-child(1) { transform:translateX(4.8px) rotate(40deg); }
.br-menu.is-open .br-menu__icon i:nth-child(2),.br-nav.is-mobile-open .br-nav__burger .br-menu__icon i:nth-child(2) { opacity:0; }
.br-menu.is-open .br-menu__icon i:nth-child(3),.br-nav.is-mobile-open .br-nav__burger .br-menu__icon i:nth-child(3) { transform:translateX(-5.3px) rotate(-40deg); }
.br-menu__list { position:absolute; right:0; top:100%; display:grid; justify-items:end; gap:2px; min-width:208px; margin:11px 0 0; padding:16px 21px 18px; border-radius:5px; background:#1456e8; color:white; list-style:none; visibility:hidden; }
.br-menu.is-open .br-menu__list { visibility:visible; }
.br-menu__list li { overflow:hidden; padding:2px 0; }
.br-menu__list a { display:inline-flex; align-items:baseline; justify-content:flex-end; gap:10px; font-size:16.8px; font-weight:700; line-height:1.35; letter-spacing:.06em; text-transform:uppercase; }
.br-menu__list a small { color:#d6e5ff; font-size:11px; font-weight:500; }
.br-menu__list a[aria-current='page'] { color:#d6e5ff; }
.br-menu__list a:hover { color:#bfeaff; }
.br-menu__list a:focus-visible { outline-offset:0; outline-width:2px; outline-color:white; }
.br-nav__burger { display:none; }
.br-mobile-menu { position:fixed; inset:0; z-index:115; display:none; flex-direction:column; justify-content:space-between; gap:32px; padding:96px 24px 28px; background:#050b15; color:white; visibility:hidden; opacity:0; overflow-y:auto; overscroll-behavior:contain; }
.br-mobile-menu.is-open { visibility:visible; }
.br-mobile-menu__list { display:grid; gap:3px; margin:0; padding:0; list-style:none; }
.br-mobile-menu__list li { overflow:hidden; }
.br-mobile-menu__list a { display:flex; align-items:baseline; justify-content:space-between; gap:16px; min-height:44px; font-size:clamp(36px,8vw,58px); font-weight:700; line-height:1.22; letter-spacing:-.025em; }
.br-mobile-menu__list a small { flex:none; color:#9aaec8; font-size:13px; font-weight:500; letter-spacing:0; }
.br-mobile-menu__list a[aria-current='page'] > span { color:#71d8ff; }
.br-mobile-menu__list a:hover { color:#71d8ff; }
.br-mobile-menu__list a:focus-visible { outline-offset:-2px; outline-width:2px; }
.br-mobile-menu__foot { display:grid; justify-items:start; gap:15px; color:#a8bbd5; font-size:13px; font-weight:500; }
.br-mobile-menu__foot > a { min-height:32px; display:flex; align-items:center; }
.br-mobile-menu__foot .br-mobile-menu__cta { gap:26px; min-height:44px; margin:0 4px 3px; padding:10px 18px; position:relative; isolation:isolate; color:white; font-size:13px; font-weight:700; }
.br-mobile-menu__cta::before { content:''; position:absolute; inset:0; z-index:-1; border:1px solid #aecbff; border-radius:4px; transform:skewX(-14deg); }
.br-mobile-menu__cta > span { color:#71d8ff; font-size:19px; }
.br-mobile-menu__foot p { margin:0; color:#8297b5; font-size:9px; letter-spacing:.1em; }
.skip-link { z-index:140; }
#services,#reach-end { scroll-margin-top:64px; }
.reach-topline { top:82px; }
@media(min-width:768px) { .br-nav__cta { display:inline-flex; } }
@media(max-width:991px) { .br-nav { --br-pad:16px; height:60px; } .br-menu { display:none; } .br-nav__burger { display:inline-flex; } .br-mobile-menu { display:flex; padding:92px 16px 24px; } }
@media(max-width:600px) { .br-nav__mark { gap:6px; height:34px; } .br-nav__wordmark { font-size:25px; line-height:34px; letter-spacing:-1.4px; } .br-nav__symbol { width:35px; height:32px; } .br-nav__symbol img { width:67px; height:67px; top:-15px; left:-14px; } .br-nav__right { gap:16px; } .br-mobile-menu__list a { line-height:1.3; } }
@media(max-width:370px) { .br-mobile-menu__list a { font-size:34px; } .br-mobile-menu__list a small { font-size:11px; } }
@media(max-height:600px) and (max-width:991px) { .br-mobile-menu { padding-top:78px; padding-bottom:24px; gap:28px; } .br-mobile-menu__list a { font-size:30px; } }

    /* BeReach's connected studio: original artwork and the existing business story. */
:root { --connected-bg:#080b10; --connected-panel:#111720; --connected-rule:#ffffff16; --connected-muted:#a3adbe; --connected-blue:#416fff; --connected-cyan:#71d8ff; }
html { background:var(--connected-bg); scroll-padding-top:96px; }
body { background:var(--connected-bg); }
a,button { -webkit-tap-highlight-color:transparent; }
.connected-hero { position:relative; isolation:isolate; background:#080b10; padding:131px 0 0; overflow:clip; color:#f7f8fd; }
.connected-hero__glow { pointer-events:none; position:absolute; z-index:-1; top:-440px; left:25%; width:72%; height:1100px; opacity:.72; background:radial-gradient(ellipse at 49% 24%,#5a7bc136,transparent 61%); transform:rotate(-24deg); }
.connected-hero::before { content:''; pointer-events:none; position:absolute; z-index:-1; width:130px; height:850px; top:-450px; left:48%; background:linear-gradient(180deg,#c6eaff00,#c6eaff14,#c6eaff00); filter:blur(24px); transform:rotate(29deg); }
.connected-hero__intro { position:relative; z-index:3; padding:0 24px; text-align:center; margin:auto; max-width:1120px; }
.studio-tag { display:inline-flex; align-items:center; gap:10px; padding:9px 15px; margin:0 0 22px; border:1px solid #ffffff18; border-radius:50px; background:linear-gradient(120deg,#ffffff0c,#ffffff02); color:#cad5e6; font-size:9px; line-height:1.4; letter-spacing:1.2px; }
.studio-tag > span:first-child,.signal-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#71d8ff; box-shadow:0 0 12px #71d8ff55; flex:none; }
.connected-hero h1 { margin:0; font-size:clamp(40px,4.75vw,68px); font-weight:500; line-height:1.35; letter-spacing:-.045em; }
.connected-hero__accent { color:#71d8ff; }
.connected-hero__description { margin:19px auto 0; max-width:680px; color:#a9b4c7; font-size:13px; line-height:1.9; font-weight:400; }
.connected-actions { display:flex; align-items:center; justify-content:center; gap:11px 20px; margin-top:21px; flex-wrap:wrap; }
.connected-button { display:inline-flex; align-items:center; justify-content:center; gap:26px; min-height:48px; padding:12px 22px; border-radius:9px; font-size:12px; line-height:1.6; transition:background .25s,transform .25s; }
.connected-button--primary { background:#3262ed; color:white; box-shadow:inset 0 1px #ffffff26,0 4px 24px #1a3db329; }
.connected-button--primary:hover { background:#4776ff; transform:translateY(-2px); }
.connected-button--text { color:#c1cbdd; padding-inline:10px; }
.connected-button--text:hover { color:white; }
.connected-button > span { font-size:20px; font-weight:400; }
.connected-stage { position:relative; max-width:1500px; margin:49px auto 0; padding:0 36px 35px; }
.preview-shell { --showcase-progress:0; position:relative; z-index:2; width:min(820px,66%); margin:auto; transform-origin:50% 30%; transform:perspective(1800px) rotateX(3deg) rotateZ(-2.8deg); border:1px solid #ffffff35; border-radius:17px; background:#141b25; padding:7px 7px 0; box-shadow:0 35px 110px #000b,0 0 80px #2a58b512; will-change:transform; }
.preview-chrome { height:39px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 11px 5px; color:#8995a9; }
.preview-dots { display:flex; gap:5px; }
.preview-dots i { width:5px; height:5px; background:#69778d; border-radius:50%; }
.preview-dots i:first-child { background:#639cc4; }
.preview-address { padding:4px 16px; border-radius:5px; background:#080e19; color:#91a2bc; text-align:center; font-size:8px; letter-spacing:.3px; }
.preview-address > span { margin-right:8px; color:#71d8ff; }
.preview-chrome__end { font-size:13px; }
.preview-screen { position:relative; overflow:hidden; aspect-ratio:720/450; border-radius:7px 7px 0 0; background:#0c111a; }
.preview-placeholder { width:100%; height:100%; position:relative; }
.preview-placeholder > .motion-art { position:absolute; inset:0; width:100%; height:100%; }
.preview-copy { position:absolute; z-index:2; top:12%; left:8%; pointer-events:none; }
.preview-copy > p { font-size:7px; letter-spacing:1.4px; color:#9aaecb; margin:0 0 13px; }
.preview-copy h2 { margin:0; font-weight:500; font-size:clamp(22px,2.65vw,40px); line-height:1.4; letter-spacing:-.035em; }
.preview-copy h2 > span { color:#71d8ff; }
.preview-copy__link { display:inline-flex; gap:15px; align-items:center; margin-top:17px; color:#bbcae1; font-size:8px; }
.preview-copy__link > span { color:#71d8ff; font-size:15px; }
.preview-caption { position:absolute; z-index:2; bottom:6%; left:8%; font-size:6px; letter-spacing:1.8px; color:#6d829f; }
.preview-base { height:12px; position:relative; border-top:1px solid #243247; }
.preview-base > span { display:block; width:17%; height:5px; border-radius:0 0 5px 5px; background:#050a13; margin:-1px auto 0; }
.preview-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.preview-video-toggle { position:absolute; bottom:15px; right:15px; border:1px solid #ffffff5c; border-radius:30px; background:#070b14cc; padding:9px 13px; color:white; font-size:10px; }
.preview-video-toggle > span { margin-left:10px; }
.floating-widget { position:absolute; z-index:4; overflow:hidden; width:204px; border:1px solid #ffffff20; border-radius:16px; padding:15px 13px 9px; background:linear-gradient(145deg,#1b2330,#10151f); box-shadow:0 24px 55px #0006; transform:translate3d(0,var(--parallax-y,0px),0); }
.floating-widget__title { display:flex; justify-content:space-between; align-items:center; gap:9px; font-size:10px; color:#cdd6e6; }
.floating-widget__title > .signal-dot { width:4px; height:4px; margin-right:0; }
.floating-widget__foot { display:block; color:#9aabc3; font-size:5px; letter-spacing:.7px; margin:0 1px 5px; }
.floating-widget > .motion-art { width:100%; }
.floating-widget--growth { left:6%; top:2%; width:202px; transform:translate3d(0,var(--parallax-y,0px),0) rotate(-8deg); }
.floating-widget--growth .motion-art { margin:6px 0 -4px; aspect-ratio:360/250; }
.floating-widget--growth .floating-widget__title { justify-content:flex-start; }
.floating-widget--connect { right:4%; top:-99px; width:208px; transform:translate3d(0,var(--parallax-y,0px),0) rotate(7deg); }
.floating-widget--connect .motion-art { aspect-ratio:320/260; }
.floating-launch { position:absolute; z-index:3; left:13%; top:-134px; width:101px; height:101px; transform:translate3d(0,var(--parallax-y,0px),0) rotate(-9deg); }
.floating-label { position:absolute; z-index:4; display:flex; align-items:center; gap:11px; min-height:46px; border:1px solid #ffffff24; border-radius:50px; background:#111720; box-shadow:0 8px 30px #0006; padding:6px 15px 6px 7px; font-size:11px; transform:translate3d(0,var(--parallax-y,0px),0); }
.floating-label--web { right:9%; top:40%; transform:translate3d(0,var(--parallax-y,0px),0) rotate(6deg); }
.floating-label--app { left:9%; top:72%; transform:translate3d(0,var(--parallax-y,0px),0) rotate(-5deg); }
.label-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#3262ed; color:white; font-size:18px; }
.floating-label--app .label-icon { background:#71d8ff; color:#0b213d; }
.floating-label i { margin-left:19px; font-style:normal; color:#71d8ff; }
.connected-spark { position:absolute; color:#71d8ff; font-weight:400; }
.connected-spark--one { right:7%; top:71%; font-size:45px; transform:rotate(-14deg); }
.connected-spark--two { left:7%; top:48%; font-size:24px; color:#6c91cc; }
.connected-stage__foot { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; max-width:1280px; margin:44px auto 0; gap:20px; padding:0 8px; }
.connected-scroll { display:flex; align-items:center; gap:13px; color:#a4b2c8; font-size:10px; min-height:44px; }
.connected-scroll > span { font-size:18px; color:#71d8ff; }
.motion-toggle { display:flex; align-items:center; gap:9px; min-height:44px; font-size:9px; color:#b2bfd2; background:none; border:1px solid #ffffff1c; border-radius:40px; padding:8px 13px; }
.motion-toggle:hover { color:white; border-color:#ffffff55; }
.motion-toggle__icon { color:#71d8ff; font-size:14px; width:14px; }
.motion-toggle:disabled { opacity:.65; cursor:default; }
.motion-art { display:block; position:relative; pointer-events:none; }
.motion-art > img { display:block; width:100%; height:100%; object-fit:contain; }
.motion-art__canvas { position:absolute; inset:0; }
.motion-art__canvas > svg { width:100% !important; height:100% !important; display:block; }
.motion-art[data-state='ready'] > img { opacity:0; }
.connected-intro,.connected-services { padding:120px max(40px,calc((100vw - 1160px)/2)); background:#080b10; }
.connected-intro { background:linear-gradient(180deg,#080b10,#0b1019); }
.connected-section-label { display:flex; justify-content:space-between; align-items:center; gap:22px; margin-bottom:53px; color:#9bacc5; font-size:8px; letter-spacing:1.5px; }
.connected-section-label > a { min-height:44px; display:flex; align-items:center; gap:16px; color:#c1cde0; font-size:11px; letter-spacing:0; }
.connected-section-label > a:hover { color:#71d8ff; }
.connected-intro h2 { margin:0; max-width:970px; color:#8996ab; font-size:clamp(34px,4.6vw,66px); line-height:1.5; letter-spacing:-.035em; font-weight:500; }
.connected-intro h2 span { color:#f6f8fd; }
.connected-intro__bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:35px; margin-top:36px; }
.connected-intro__bottom > p { color:#a4b2c7; font-size:13px; line-height:1.9; margin:0; font-weight:400; }
.connected-inline-link { display:flex; align-items:center; gap:23px; min-height:44px; color:#d6e3f8; font-size:11px; }
.connected-inline-link > span { color:#71d8ff; font-size:21px; }
.connected-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:42px; margin-top:66px; }
.connected-principles > div { border-top:1px solid #ffffff24; padding-top:21px; }
.connected-principles > div > span { display:block; color:#71d8ff; font-size:9px; margin-bottom:18px; }
.connected-principles strong { font-size:19px; font-weight:500; }
.connected-principles p { color:#9baac0; font-size:11px; line-height:1.8; margin:8px 0 0; font-weight:400; }
.connected-services { padding-top:118px; padding-bottom:100px; }
.connected-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:58px; }
.connected-section-heading h2 { margin:0; font-weight:500; font-size:clamp(36px,4.5vw,64px); line-height:1.43; letter-spacing:-.035em; }
.connected-section-heading h2 > span { color:#71d8ff; }
.connected-section-heading > p { color:#a4b2c7; font-size:12px; font-weight:400; line-height:1.9; margin:0 0 8px; }
.connected-service-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
.service-visual-card { position:relative; display:flex; flex-direction:column; min-width:0; min-height:565px; overflow:hidden; border:1px solid #ffffff12; border-radius:25px; background:radial-gradient(ellipse at 80% 95%,#16325b33,transparent 65%),#10151d; padding:28px 32px 24px; transition:border-color .25s,background .25s; }
.service-visual-card:hover { border-color:#71d8ff66; background-color:#141c28; }
.service-visual-card:focus-visible { outline-offset:5px; }
.service-visual-card--app { margin-top:80px; }
.service-visual-card--code { margin-top:68px; }
.service-visual-card--data { margin-top:-34px; }
.service-visual-card__top { display:flex; justify-content:space-between; align-items:center; gap:15px; color:#96aac7; font-size:7px; line-height:1.5; letter-spacing:1px; }
.service-arrow { display:grid; place-items:center; width:35px; height:35px; border:1px solid #ffffff20; border-radius:50%; color:#c1d5f4; font-size:18px; flex:none; transition:transform .25s,background .25s; }
.service-visual-card:hover .service-arrow { transform:rotate(45deg); background:#3262ed; color:white; }
.service-visual-card__copy { position:relative; z-index:2; margin-top:25px; }
.service-visual-card h3 { font-size:clamp(24px,2.45vw,35px); line-height:1.45; font-weight:500; letter-spacing:-.03em; margin:0 0 13px; }
.service-visual-card__copy > p { color:#a4b2c7; font-size:12px; line-height:1.9; margin:0; font-weight:400; }
.service-visual-card > .motion-art { width:calc(100% + 16px); margin:21px -8px 0; aspect-ratio:520/360; }
.service-visual-card--app > .motion-art { width:75%; margin:8px auto -13px; aspect-ratio:400/440; max-height:335px; }
.service-visual-card--code > .motion-art { margin-top:5px; }
.service-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:16px; position:relative; z-index:2; }
.service-tags > span { padding:6px 10px; border:1px solid #ffffff17; border-radius:30px; color:#b7c7df; font-size:8px; font-weight:400; }
.story-transition { text-align:center; padding:22px 24px 74px; background:linear-gradient(#080b10,#061d43); }
.story-transition > p { color:#96b2d8; font-size:7px; letter-spacing:1.8px; margin:0 0 10px; }
.story-transition > a { display:inline-flex; gap:27px; align-items:center; color:#d4e7ff; font-size:13px; min-height:44px; }
.story-transition > a > span { color:#71d8ff; font-size:22px; }
#services,#film,#story { scroll-margin-top:0; }
.spot { border-top:1px solid #ffffff15; }
.reach-intro .reach-eyebrow > span { margin-right:13px; }
.connected-footer { display:flex; align-items:center; flex-wrap:wrap; gap:25px 35px; background:#050b15; padding:36px max(40px,calc((100vw - 1280px)/2)); border-top:1px solid #ffffff15; }
.connected-footer__brand { font-size:26px; letter-spacing:-1.5px; }
.connected-footer__brand > strong { font-weight:900; }
.connected-footer__brand > span { color:#71d8ff; }
.connected-footer > p { color:#9eafc6; font-size:10px; margin:0; font-weight:400; }
.connected-footer > nav { display:flex; gap:23px; margin-left:auto; }
.connected-footer > nav > a { color:#b8c6d9; font-size:10px; min-height:44px; display:flex; align-items:center; }
.connected-footer > nav > a:hover { color:white; }
.connected-footer__top { display:grid; place-items:center; width:44px; height:44px; border:1px solid #ffffff24; border-radius:50%; color:#71d8ff; font-size:20px; }
/* Preserve the proven menu and focus handling inside a floating studio header. */
.br-nav { top:15px; left:50%; right:auto; width:min(1060px,calc(100% - 56px)); transform:translateX(-50%); height:65px; border:1px solid #ffffff15; border-radius:14px; padding:0 22px; background:#111720e6; backdrop-filter:blur(18px); box-shadow:0 8px 30px #0002; }
.br-nav.is-scrolled { background:#10151ff5; border-color:#ffffff20; }
.br-nav__wordmark { font-size:24px; }
.br-nav__mark { height:34px; align-items:center; }
.br-nav__wordmark { line-height:34px; }
.br-nav__symbol { width:32px; height:30px; }
.br-nav__symbol img { width:65px; height:65px; top:-15px; left:-14px; }
.br-nav__right { gap:28px; }
.br-nav__cta { display:inline-flex; background:#3262ed; min-height:39px; padding:10px 15px; border-radius:8px; gap:16px; font-size:11px; }
.br-nav__cta::before { display:none; }
.br-nav__cta:hover { background:#4776ff; }
.br-menu__button { font-size:10px; letter-spacing:1px; }
.br-menu__list { margin-top:21px; min-width:220px; padding:20px 22px; border:1px solid #ffffff24; border-radius:12px; background:#131d2d; }
.br-menu__list a { font-size:15px; }
.br-mobile-menu { background:#080e18; }
@media(min-width:1700px) { .connected-hero { padding-top:170px; } .connected-stage { margin-top:75px; } .preview-shell { width:900px; } }
@media(max-width:1100px) { .floating-widget--growth { left:3%; width:170px; } .floating-widget--connect { right:3%; width:175px; top:-80px; } .floating-launch { left:8%; top:-115px; width:88px; height:88px; } .floating-label--web { right:4%; } .floating-label--app { left:4%; } .connected-section-label { margin-bottom:38px; } .service-visual-card { padding:25px; min-height:510px; } .service-visual-card h3 { font-size:27px; } .service-visual-card--app .motion-art { max-height:300px; } }
@media(max-width:991px) { .connected-hero { padding-top:143px; } .connected-hero h1 { font-size:clamp(34px,5.9vw,57px); } .connected-hero__description { font-size:13px; } .connected-stage { margin-top:95px; padding-inline:26px; } .preview-shell { width:77%; } .floating-widget--growth { top:2%; width:153px; } .floating-widget--connect { top:-72px; width:155px; } .floating-launch { left:5%; top:-80px; width:72px; height:72px; } .floating-widget__title { font-size:8px; } .floating-widget__foot { font-size:4px; } .floating-label { font-size:9px; min-height:40px; } .label-icon { width:27px; height:27px; font-size:15px; } .connected-spark--one { font-size:34px; } .preview-copy > p { font-size:5px; margin-bottom:9px; } .preview-copy h2 { font-size:29px; } .preview-copy__link { font-size:7px; margin-top:10px; } .connected-intro,.connected-services { padding-inline:40px; padding-block:85px; } .connected-principles { gap:25px; } .connected-section-heading { gap:25px; } .connected-service-grid { gap:20px; } .service-visual-card { padding:22px; min-height:480px; } .service-visual-card h3 { font-size:25px; } .service-visual-card__top { font-size:6px; } .service-visual-card__copy > p { font-size:11px; } .service-visual-card--app { margin-top:50px; } .service-visual-card--data { margin-top:-30px; } .service-visual-card--code { margin-top:45px; } .connected-footer { padding:30px; } .connected-footer > p { display:none; } .br-nav { width:calc(100% - 32px); height:60px; top:12px; padding:0 17px; } .br-nav__right { gap:20px; } .br-nav__burger { font-size:11px; } .br-mobile-menu { padding-top:112px; } }
@media(max-width:700px) { .connected-hero { padding-top:133px; } .studio-tag { font-size:7px; letter-spacing:.9px; padding:8px 12px; margin-bottom:24px; } .connected-hero h1 { font-size:7.1vw; line-height:1.55; } .connected-hero__description { margin-top:19px; font-size:12px; max-width:460px; } .connected-actions { margin-top:22px; gap:5px 14px; } .connected-button { font-size:10px; padding:10px 15px; gap:17px; min-height:44px; } .connected-button > span { font-size:18px; } .connected-button--text { padding-inline:2px; } .connected-stage { margin-top:110px; padding:0 18px 22px; } .preview-shell { width:90%; padding:5px 5px 0; border-radius:12px; transform:rotate(-2deg); } .preview-chrome { height:27px; padding:0 7px 4px; gap:6px; } .preview-address { font-size:5px; padding:3px 8px; } .preview-dots { gap:3px; } .preview-dots i { width:4px; height:4px; } .preview-chrome__end { font-size:11px; } .preview-copy { top:13%; left:7%; } .preview-copy > p { font-size:4px; letter-spacing:.7px; margin-bottom:8px; } .preview-copy h2 { font-size:clamp(17px,4.7vw,28px); } .preview-copy__link { font-size:5px; margin-top:6px; gap:8px; } .preview-copy__link > span { font-size:10px; } .preview-caption { font-size:4px; letter-spacing:1px; } .preview-base { height:9px; } .floating-widget--growth { width:120px; left:1%; top:-37px; border-radius:12px; padding:10px 8px 5px; } .floating-widget__title { font-size:6px; gap:5px; } .floating-widget__foot { display:none; } .floating-widget--connect { width:121px; right:2%; top:-73px; border-radius:12px; padding:10px 8px 4px; } .floating-launch { left:12%; top:-103px; width:57px; height:57px; } .floating-label { min-height:31px; padding:4px 10px 4px 4px; gap:6px; font-size:7px; } .floating-label--web { top:65%; right:0; } .floating-label--app { top:89%; left:1%; } .label-icon { width:22px; height:22px; font-size:13px; } .floating-label i { margin-left:10px; } .connected-spark--one { display:none; } .connected-spark--two { left:0; top:48%; font-size:18px; } .connected-stage__foot { margin-top:56px; gap:8px; padding:0 2px; } .connected-scroll { font-size:8px; gap:9px; } .motion-toggle { font-size:7px; gap:6px; padding:8px 10px; } .motion-toggle__icon { font-size:12px; width:11px; } .connected-intro,.connected-services { padding:65px 24px; } .connected-section-label { font-size:6px; letter-spacing:1px; gap:13px; margin-bottom:30px; } .connected-section-label > a { font-size:9px; gap:8px; } .connected-intro h2 { font-size:7.2vw; line-height:1.6; } .connected-intro__bottom { display:block; margin-top:24px; } .connected-intro__bottom > p { font-size:11px; } .connected-inline-link { margin-top:14px; font-size:10px; gap:15px; } .connected-principles { margin-top:35px; grid-template-columns:1fr; gap:0; } .connected-principles > div { display:grid; grid-template-columns:25px 100px 1fr; gap:12px; align-items:baseline; padding:20px 0; } .connected-principles > div > span { margin:0; font-size:8px; } .connected-principles strong { font-size:14px; } .connected-principles p { font-size:10px; margin:0; } .connected-section-heading { display:block; margin-bottom:32px; } .connected-section-heading h2 { font-size:9vw; line-height:1.5; } .connected-section-heading > p { margin-top:22px; font-size:11px; } .connected-service-grid { grid-template-columns:1fr; gap:18px; } .service-visual-card { min-height:0; padding:24px 24px 21px; border-radius:21px; margin:0; } .service-visual-card h3 { font-size:27px; } .service-visual-card__top { font-size:6px; } .service-visual-card__copy { margin-top:18px; } .service-visual-card__copy > p { font-size:11px; } .service-visual-card > .motion-art { max-height:270px; margin-top:12px; } .service-visual-card--app > .motion-art { max-height:270px; width:70%; margin:2px auto -12px; } .service-tags { padding-top:10px; } .service-tags > span { font-size:7px; } .story-transition { padding:16px 24px 45px; } .story-transition > p { font-size:5px; letter-spacing:1.1px; } .story-transition > a { font-size:11px; } .connected-footer { padding:26px 24px; gap:20px; } .connected-footer__brand { font-size:24px; } .connected-footer > nav { order:3; flex-basis:100%; justify-content:space-between; gap:10px; margin:0; } .connected-footer__top { margin-left:auto; } .br-nav { width:calc(100% - 24px); height:58px; top:10px; padding:0 12px; border-radius:12px; } .br-nav__wordmark { font-size:21px; } .br-nav__mark { gap:4px; } .br-nav__symbol { width:29px; height:29px; } .br-nav__symbol img { width:60px; height:60px; top:-14px; left:-13px; } .br-nav__cta { display:none; } .br-nav__burger { font-size:10px; min-width:69px; gap:8px; } }
@media(max-width:370px) { .connected-hero__intro { padding-inline:19px; } .connected-hero h1 { font-size:7vw; } .connected-hero__description { font-size:11px; } .connected-button { font-size:9px; gap:12px; padding-inline:13px; } .connected-button--text { padding-inline:2px; } .connected-stage { margin-top:105px; padding-inline:12px; } .preview-shell { width:94%; } .floating-widget--growth { width:104px; } .floating-widget--connect { width:107px; } .floating-launch { width:49px; height:49px; top:-95px; } .connected-intro,.connected-services { padding-inline:20px; } .connected-principles > div { grid-template-columns:20px 88px 1fr; gap:8px; } .connected-principles strong { font-size:13px; } .connected-principles p { font-size:9px; } .service-visual-card h3 { font-size:25px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .preview-shell { transform:none !important; will-change:auto; } [data-parallax] { --parallax-y:0px !important; } }

    /* Reference composition and original Outcrowd media, requested 3 November 2026. */
@font-face { font-family:'BeReach Regular'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/prompt-thai-400.woff2') format('woff2'); unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family:'BeReach Regular'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/prompt-latin-400.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
html,body { background:#080808; }
.reference-hero { height:280svh; padding:0; overflow:visible; background:#080808; isolation:isolate; }
.reference-hero::before { display:none; }
.reference-hero__pin { position:sticky; top:0; height:100svh; min-height:620px; overflow:hidden; isolation:isolate; }
.reference-light { position:absolute; z-index:12; inset:0 auto auto 2.5%; display:block; width:95%; height:auto; pointer-events:none; max-width:none; opacity:1; }
.reference-hero .connected-hero__intro { position:absolute; z-index:5; top:11.25vw; left:0; right:0; width:100%; max-width:none; padding:0; will-change:transform,opacity; }
.reference-hero .studio-tag { position:relative; display:table; margin:0 auto; padding:6px 18px 5px; border:1px solid #ffffff08; border-radius:50px; background:radial-gradient(ellipse at 65% 65%,#131111,#262222); color:white; font-family:'BeReach Regular','Prompt',sans-serif; font-weight:400; font-size:clamp(12px,1.25vw,24px); line-height:1.4; letter-spacing:-.025em; }
.reference-hero h1 { font-family:'BeReach Regular','Prompt',sans-serif; font-weight:400; font-size:4.2vw; line-height:1.23; letter-spacing:-.045em; text-align:center; margin:2.22vw auto 0; max-width:60vw; color:white; }
.reference-hero h1 > span { display:block; }
.reference-hero .connected-stage { position:absolute; z-index:6; inset:0; margin:0; padding:0; width:100%; height:100%; max-width:none; pointer-events:none; }
.reference-hero .preview-shell { position:absolute; z-index:4; top:calc(34.5vw - var(--hero-lift,0px)); left:50%; transform:translateX(-50%); margin:0; padding:0; width:48%; height:auto; aspect-ratio:3.8/2; background:linear-gradient(155deg,#242424,#0e0e0e 65%); border:2px solid #2d2d2d; border-radius:1.7vw 1.7vw 0 0; box-shadow:none; transform-origin:center; will-change:width,top,height; pointer-events:auto; overflow:hidden; }
.reference-hero .preview-screen { position:absolute; inset:1.1% 1.1% 0; width:auto; height:auto; aspect-ratio:auto; border-radius:1.2vw 1.2vw 0 0; background:#080808; }
.reference-hero .preview-placeholder { width:100%; height:100%; }
.reference-showcase-poster { width:100%; height:100%; object-fit:cover; object-position:center; animation:reference-preview-drift 9s ease-in-out infinite alternate; transform-origin:center; }
.reference-hero .preview-placeholder::after { content:''; position:absolute; pointer-events:none; inset:-70%; background:linear-gradient(115deg,transparent 41%,#ffffff06 47%,#ffffff12 50%,#ffffff02 54%,transparent 60%); animation:reference-preview-sheen 8s ease-in-out infinite; }
@keyframes reference-preview-drift { from { transform:scale(1.06) translateX(-2%); } to { transform:scale(1.19) translateX(2%); } }
@keyframes reference-preview-sheen { 0%,15% { transform:translateX(-30%); opacity:0; } 40% { opacity:.65; } 75%,100% { transform:translateX(30%); opacity:0; } }
body[data-motion-paused='true'] .reference-showcase-poster,body[data-motion-paused='true'] .reference-hero .preview-placeholder::after { animation-play-state:paused; }
.reference-hero .preview-video { object-fit:cover; }
.reference-widget { position:absolute; transform:none; will-change:transform; pointer-events:none; }
.reference-widget .motion-art { width:100%; height:100%; }
.reference-widget--rocket { z-index:7; width:9.375vw; height:9.375vw; left:5vw; top:24.15vw; }
.reference-widget--status { z-index:5; width:7.43056vw; height:7.43056vw; left:11vw; top:19.45vw; }
.reference-widget--installs { z-index:5; width:16vw; height:auto; aspect-ratio:471/355; right:3.2vw; top:15.3vw; }
.reference-widget--chart { z-index:8; width:17.6vw; height:auto; aspect-ratio:554/301; left:15vw; top:38.55vw; }
.reference-widget--growth { z-index:3; width:10.4861vw; right:17.2vw; top:35.15vw; }
.reference-widget--features { z-index:5; width:11.9444vw; right:11.8vw; top:49.95vw; }
.reference-widget--arrow { z-index:5; width:4.6116vw; left:15vw; top:34.15vw; }
.reference-hero .connected-stage__foot { position:absolute; z-index:14; left:3vw; right:auto; bottom:16px; margin:0; padding:0; max-width:none; gap:22px; justify-content:flex-start; }
.reference-hero .connected-scroll { color:#b6b6b6; }
.reference-hero .connected-scroll > span,.reference-hero .motion-toggle__icon { color:#ddd; }
.reference-hero .motion-toggle { color:#d4d4d4; background:#131313a6; border-color:#ffffff2b; }
.hero-progress { position:absolute; z-index:15; bottom:0; left:0; right:0; height:2px; background:#ffffff0a; }
.hero-progress > i { display:block; width:100%; height:100%; background:#ff4b25; transform-origin:left; transform:scaleX(0); }
.reference-floating-cta { position:fixed; z-index:110; right:24px; bottom:24px; display:flex; align-items:center; gap:30px; min-height:60px; padding:15px 25px; background:#7846ff; color:white; border-radius:50px; font-family:'BeReach Regular','Prompt',sans-serif; font-size:17px; font-weight:400; box-shadow:0 8px 25px #0003; }
.reference-floating-cta > span { font-size:23px; }
.reference-floating-cta:hover { background:#895dff; }
.connected-intro { position:relative; z-index:6; background:#080808; padding-top:130px; }
.connected-intro h2,.connected-section-heading h2 { font-family:'BeReach Regular','Prompt',sans-serif; font-weight:400; letter-spacing:-.035em; }
.connected-services { background:#080808; }
.service-visual-card { background:#101010; border-color:#ffffff0d; box-shadow:inset 0 0 0 1px #ffffff03; min-height:610px; }
.service-visual-card:hover { background:#131313; border-color:#ffffff20; }
.service-visual-card h3 { font-family:'BeReach Regular','Prompt',sans-serif; font-weight:400; }
.service-visual-card > .motion-art { aspect-ratio:498/390; max-height:380px; margin-top:26px; }
.service-visual-card--app > .motion-art { width:100%; margin:0 0 -12px; aspect-ratio:498/520; max-height:390px; }
.service-visual-card--data > .motion-art { width:92%; margin:0 auto -8px; aspect-ratio:498/601; max-height:340px; }
.service-visual-card--code > .motion-art { width:100%; margin:4px 0 -13px; aspect-ratio:632/833; max-height:390px; }
.service-visual-card__top { color:#b4b4b4; }
.service-visual-card__copy > p { color:#aaa; }
.service-tags > span { color:#b6b6b6; }
.story-transition { background:linear-gradient(#080808,#061d43); }
.br-nav { top:1vw; width:42vw; min-width:650px; max-width:840px; height:3.56vw; min-height:52px; max-height:68px; border:0; border-radius:17px; padding:0 7px 0 22px; background:#1b1b1bf2; box-shadow:none; backdrop-filter:blur(12px); gap:17px; }
.br-nav.is-scrolled { background:#1b1b1bf2; border:0; }
.br-nav__wordmark { font-size:22px; }
.br-nav__right { gap:0; }
.br-nav__cta { font-family:'BeReach Regular','Prompt',sans-serif; font-size:13px; font-weight:400; min-height:41px; padding:10px 17px; background:#dc3919; border-radius:9px; gap:14px; }
.br-nav__cta:hover { background:#d13a1b; }
.br-nav__cta svg { width:15px; }
.reference-desktop-links { display:flex; align-items:center; justify-content:center; gap:26px; margin-left:auto; }
.reference-desktop-links > a { display:flex; align-items:center; min-height:44px; color:#b9b9b9; font-family:'BeReach Regular','Prompt',sans-serif; font-size:13px; font-weight:400; }
.reference-desktop-links > a:hover { color:white; }
.br-menu { display:none; }
@media(min-width:992px) { .br-nav { transition:width .4s ease,min-width .4s ease; } .br-nav.is-reel-scrolled { min-width:0; width:330px; } .br-nav.is-reel-scrolled .reference-desktop-links,.br-nav.is-reel-scrolled .br-nav__wordmark { display:none; } .br-nav.is-reel-scrolled .br-menu { display:block; } .br-nav.is-reel-scrolled .br-nav__right { gap:24px; } .br-nav.is-reel-scrolled .br-menu__button { font-family:'BeReach Regular','Prompt',sans-serif; font-size:10px; min-width:65px; } }
@media(min-width:1921px) { .reference-hero .preview-shell { width:60%; } }
@media(max-width:1100px) and (min-width:768px) { .reference-hero h1 { font-size:4.6vw; max-width:67vw; } .reference-hero .preview-shell { top:calc(37vw - var(--hero-lift,0px)); } .reference-widget--chart { top:42vw; } .reference-widget--features { top:52vw; } }
@media(max-width:991px) { .reference-desktop-links { display:none; } .br-nav { min-width:0; width:calc(100% - 32px); max-width:none; height:60px; top:12px; border-radius:13px; padding:0 17px; background:#1b1b1bf2; } .br-nav__right { gap:18px; } .br-nav__burger { font-size:11px; } .br-nav__cta { min-height:38px; } .br-nav__burger-label { font-weight:500; } .reference-floating-cta { font-size:13px; min-height:50px; padding:12px 20px; gap:25px; right:18px; bottom:18px; } .service-visual-card { min-height:530px; } }
@media(max-width:767px) {
  .reference-hero { height:200svh; }
  .reference-hero__pin { min-height:760px; }
  .reference-light { width:180%; left:-24%; max-width:none; }
  .reference-hero .connected-hero__intro { top:130px; padding:0 15px; }
  .reference-hero .studio-tag { font-size:12px; padding:6px 12px; white-space:nowrap; max-width:100%; }
  .reference-hero h1 { font-size:7.2vw; max-width:100%; line-height:1.4; letter-spacing:-.055em; margin-top:29px; }
  .reference-hero .preview-shell { width:90%; top:calc(535px - var(--hero-lift,0px)); height:auto; aspect-ratio:3.8/2; border-radius:16px 16px 0 0; border-width:1px; }
  .reference-hero .preview-screen { border-radius:12px 12px 0 0; }
  .reference-widget--rocket { width:86px; height:86px; left:6%; top:400px; }
  .reference-widget--status { width:65px; height:65px; left:19%; top:364px; }
  .reference-widget--installs { width:130px; right:5%; top:357px; }
  .reference-widget--chart { width:148px; left:0; top:509px; }
  .reference-widget--growth { width:84px; right:3%; top:475px; }
  .reference-widget--features { width:110px; right:1%; top:651px; }
  .reference-widget--arrow { width:44px; left:15%; top:487px; }
  .reference-hero .connected-stage__foot { left:18px; right:auto; bottom:13px; margin:0; }
  .reference-hero .connected-scroll { display:none; }
  .reference-hero .motion-toggle { font-size:9px; min-height:40px; padding:8px 13px; }
  .reference-floating-cta { font-size:11px; min-height:44px; padding:10px 15px; gap:15px; right:14px; bottom:14px; }
  .reference-floating-cta > span { font-size:19px; }
  .connected-intro { padding-top:75px; }
  .service-visual-card { min-height:0; }
  .service-visual-card > .motion-art { max-height:340px; margin-top:20px; }
  .service-visual-card--app > .motion-art { width:100%; margin:0 0 -12px; max-height:330px; }
  .service-visual-card--data > .motion-art { width:100%; margin:0 0 -12px; max-height:300px; }
  .service-visual-card--code > .motion-art { max-height:350px; margin-top:0; }
  .br-nav { background:#181818e6; }
  .br-nav__cta { display:none; }
}
@media(max-width:370px) { .reference-hero h1 { font-size:7vw; } .reference-hero .studio-tag { font-size:10px; } .reference-widget--installs { width:114px; right:3%; } .reference-widget--rocket { width:77px; height:77px; } .reference-widget--status { width:58px; height:58px; } .reference-widget--chart { width:134px; } }
@media(prefers-reduced-motion:reduce) { .reference-hero { height:auto; } .reference-hero__pin { position:relative; height:100svh; min-height:760px; } .reference-hero .preview-shell { transform:translateX(-50%) !important; } .reference-widget { will-change:auto; } .reference-showcase-poster,.reference-hero .preview-placeholder::after { animation:none; } body.reference-motion-enabled .reference-hero { height:280svh; } body.reference-motion-enabled .reference-hero__pin { position:sticky; } }

    /* BeReach: a continuous film, work and service experience. */
html { scrollbar-width:thin; scrollbar-color:#597a9e #0b0e13; scroll-padding-top:108px; }
body { --premium-gutter:clamp(28px,8.5vw,164px); }
.reference-hero { --hero-lift:48px; }
.reference-hero .connected-hero__intro,.reference-hero .reference-widget { margin-top:calc(0px - var(--hero-lift)); }
.reference-light { z-index:2; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible { outline:2px solid #94d9ff; outline-offset:6px; }
.reference-hero .preview-video,.reference-showcase-poster { object-fit:contain; object-position:center; background:#080808; }
.reference-showcase-poster { animation:none; }
.reference-hero .preview-placeholder::after { display:none; }
.reference-hero .preview-screen { inset:1%; border-radius:inherit; overflow:hidden; }
.preview-video-toggle { z-index:20; background:#0b0d13e8; border:1px solid #ffffff40; color:#fff; backdrop-filter:blur(15px); }
.preview-fullscreen { position:absolute; right:18px; top:18px; z-index:20; width:42px; height:42px; display:grid; place-items:center; border:1px solid #ffffff40; border-radius:50%; color:white; background:#0b0d13d9; cursor:pointer; }
.preview-fullscreen svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.preview-shell:fullscreen { width:100vw!important; height:100vh!important; top:0!important; transform:none!important; border:0; border-radius:0!important; }
.reference-floating-cta { z-index:50; }
.reference-floating-cta { transition:opacity .25s,transform .25s; }
body[data-film-visible=true] .reference-floating-cta { opacity:0; pointer-events:none; transform:translateY(140%); }
.connected-intro { padding-bottom:130px; }
.selected-work { background:#080808; color:white; position:relative; overflow:clip; font-family:'BeReach Regular','Prompt',sans-serif; font-weight:400; }
.work-heading { padding:70px var(--premium-gutter) 90px; }
.work-heading .connected-section-label { margin-bottom:55px; }
.work-heading h2 { margin:0; font-family:'BeReach Regular','Prompt',sans-serif; font-weight:400; font-size:clamp(62px,8.2vw,154px); line-height:1.04; letter-spacing:-.065em; }
.work-heading h2>span { color:#86868b; }
.work-heading__foot { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-top:45px; }
.work-heading__foot p { color:#b3b3b8; font-size:clamp(14px,1.1vw,20px); line-height:1.85; margin:0; }
.work-scroll { position:relative; }
.selected-work:not(.is-scroll) .work-scroll { display:none; }
.work-mobile { padding:0 var(--premium-gutter); display:grid; gap:60px; }
.selected-work.is-scroll .work-mobile { display:none; }
.work-mobile-case { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:6%; }
.work-mobile-case__image { display:block; padding:18px; background:#19191c; border:1px solid #ffffff18; border-radius:18px; }
.work-mobile-case__image img { display:block; width:100%; height:auto; border-radius:6px; }
.work-mobile-case h3 { font-family:'BeReach Regular','Prompt',sans-serif; font-weight:400; font-size:clamp(32px,4vw,60px); line-height:1.15; letter-spacing:-.045em; margin:0; }
.work-mobile-case .work-visit { margin-top:24px; }
.work-pin { display:grid; grid-template-columns:43% 57%; min-height:750px; }
.work-copy-stage { padding:100px 10% 100px 20%; position:relative; align-self:center; }
.work-copy { padding:45px 0; }
.work-category { display:flex; align-items:center; flex-wrap:wrap; gap:20px; color:#ababaf; font-size:11px; line-height:1.5; letter-spacing:1px; text-transform:uppercase; margin:0 0 28px; }
.work-category>span:first-child { color:#83c6fa; font-variant-numeric:tabular-nums; }
.work-copy h3 { margin:0; font-family:'BeReach Regular','Prompt',sans-serif; font-weight:400; font-size:clamp(40px,4.3vw,78px); line-height:1.08; letter-spacing:-.05em; overflow-wrap:anywhere; }
.work-description { max-width:360px; margin:30px 0 0; color:#aaaab1; font-size:clamp(14px,1.15vw,20px); line-height:1.9; }
.work-tags { display:flex; gap:8px; flex-wrap:wrap; margin:30px 0 36px; }
.work-tags span { border:1px solid #ffffff24; border-radius:40px; color:#bdbdc2; padding:6px 12px; font-size:10px; }
.work-visit { display:inline-flex; gap:45px; min-height:44px; align-items:center; color:white; font-size:14px; border-bottom:1px solid #ffffff60; text-decoration:none; padding-bottom:8px; }
.work-visit>span[aria-hidden] { font-size:22px; transition:transform .25s; }
.work-visit:hover>span[aria-hidden] { transform:translate(3px,-3px); }
.work-pagination { display:none; gap:16px; margin-top:25px; }
.work-pagination button { border:0; background:none; cursor:pointer; color:#a0a0a8; display:flex; align-items:center; gap:10px; padding:8px 0; font-size:11px; min-width:52px; min-height:40px; }
.work-pagination i { width:24px; height:2px; background:#424249; display:block; }
.work-pagination [aria-current=true] { color:#fff; }
.work-pagination [aria-current=true] i { background:#93cbff; }
.work-screen-stage { background:#151515; position:relative; padding:90px 45px; perspective:1400px; overflow:hidden; display:grid; align-content:center; gap:35px; }
.work-screen-light { position:absolute; inset:-15%; pointer-events:none; background:radial-gradient(ellipse at 65% 30%,#ffffff0c,transparent 56%); }
.work-screen { display:block; position:relative; text-decoration:none; border:1px solid #ffffff29; padding:7px; background:#080808; border-radius:20px; box-shadow:0 0 0 3px #ffffff06,0 30px 60px #0005; overflow:hidden; transform-origin:center; }
.work-screen img { display:block; width:100%; height:auto; aspect-ratio:1440/1000; object-fit:contain; background:#111; border-radius:3px; }
.work-browser { display:flex; justify-content:space-between; align-items:center; padding:8px 10px 13px; color:#aaaab1; font-size:8px; gap:10px; }
.work-browser>span:first-child { display:flex; gap:4px; }
.work-browser i { display:block; width:5px; height:5px; border-radius:50%; background:#4b4b50; }
.work-screen__caption { display:flex; justify-content:space-between; align-items:center; font-size:8px; letter-spacing:.7px; color:#b7b7bc; padding:13px 10px 7px; text-transform:uppercase; }
.work-screen-counter { display:none; position:absolute; right:7%; bottom:38px; font-size:11px; letter-spacing:2px; color:#8b8b94; font-variant-numeric:tabular-nums; }
.work-screen-counter b { color:#fff; font-weight:400; }
.selected-work.is-scroll .work-scroll { height:340svh; }
.selected-work.is-scroll .work-pin { position:sticky; top:0; height:100svh; min-height:640px; overflow:hidden; }
.selected-work.is-scroll .work-copy-stage { height:100%; width:100%; align-self:stretch; padding:0; }
.selected-work.is-scroll .work-copy { position:absolute; left:20%; right:12%; top:50%; padding:0; transform:translateY(-50%); will-change:transform,opacity; }
.selected-work.is-scroll .work-copy[aria-hidden=true] { visibility:hidden; }
.selected-work.is-scroll .work-screen-stage { padding:0; display:block; }
.selected-work.is-scroll .work-screen { position:absolute; left:9%; width:84%; top:50%; will-change:transform,opacity; }
.selected-work.is-scroll .work-screen img { max-height:64svh; object-fit:contain; }
.selected-work.is-scroll .work-pagination { display:flex; position:absolute; left:20%; bottom:50px; }
.selected-work.is-scroll .work-screen-counter { display:block; }
.work-more { padding:100px var(--premium-gutter) 150px; }
.work-more__heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:35px; }
.work-more__heading h3 { font-family:'BeReach Regular','Prompt',sans-serif; font-weight:400; font-size:clamp(30px,3vw,52px); letter-spacing:-.045em; margin:0; }
.work-more__heading p { margin:0; font-size:12px; color:#a5a5ad; }
.work-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.work-tile__link { position:relative; display:block; color:#fff; text-decoration:none; }
.work-tile__image { display:block; padding:15px; background:#1a1a1c; border:1px solid #ffffff12; border-radius:16px; overflow:hidden; transition:background .3s; }
.work-tile img { width:100%; height:auto; display:block; aspect-ratio:1440/1000; object-fit:contain; border-radius:6px; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.work-tile__link:hover img { transform:scale(1.035); }
.work-tile__link:hover .work-tile__image { background:#29292e; }
.work-tile__name { display:block; padding:20px 35px 0 0; font-size:22px; font-weight:400; letter-spacing:-.04em; line-height:1.25; }
.work-tile__link>span[aria-hidden] { position:absolute; right:0; bottom:0; font-size:24px; }
.work-tile>p { color:#a0a0a9; font-size:10px; margin-top:9px; text-transform:uppercase; letter-spacing:1px; }
.connected-services { border-top:1px solid #ffffff12; padding-top:110px; }
.service-visual-card { min-height:570px; background:#111; }
.service-visual-card__copy h3 { font-family:'BeReach Regular','Prompt',sans-serif; font-weight:400; }
.service-visual-card .motion-art { height:310px; margin-top:25px; }
.story-transition { border-top:1px solid #ffffff12; }
/* Native scrolling remains available alongside the draggable chapter rail. */
.page-rail { position:fixed; z-index:65; right:13px; top:50%; transform:translateY(-50%); display:grid; justify-items:center; gap:13px; width:32px; color:#a9d4ff; transition:opacity .25s; }
.page-rail__label,.page-rail__value { font-size:8px; line-height:1; letter-spacing:1px; font-variant-numeric:tabular-nums; pointer-events:none; }
.page-rail__track { position:relative; width:24px; height:min(41svh,380px); min-height:170px; border:1px solid #94c6ff42; border-radius:18px; background:linear-gradient(90deg,#071b3277,#102d4cbb,#05152877); box-shadow:inset 0 0 8px #0008,0 0 20px #188bff10; cursor:grab; touch-action:none; outline-offset:5px; }
.page-rail__track:active { cursor:grabbing; }
.page-rail__segments { position:absolute; inset:12px 6px; display:flex; flex-direction:column; gap:4px; pointer-events:none; }
.page-rail__segments i { flex:1; min-height:2px; border-radius:1px; background:#86beed35; transition:background .2s; }
.page-rail__segments i.is-past { background:#b7e1ff9c; }
.page-rail__thumb { position:absolute; inset:var(--rail-position,0px) 4px auto; height:12px; border:1px solid #c2e6ff; border-radius:3px; background:#2689d9; box-shadow:0 0 10px #67c2ff80; pointer-events:none; }
.page-rail__sections { display:flex; flex-direction:column; gap:3px; }
.page-rail__sections a { display:grid; place-items:center; width:28px; height:24px; text-decoration:none; color:#92adc9; font-size:8px; border-radius:6px; background:#0b1a2b80; border:1px solid #81beff15; }
.page-rail__sections a[aria-current=location] { background:#2b679a; color:#fff; border-color:#96d6ff80; }
/* The supplied film always fits inside its own image area. Text never covers it. */
.reach { background:#080b10; }
.reach-head { padding-top:120px; padding-bottom:30px; }
.reach-heading { font-family:'BeReach Regular','Prompt',sans-serif; font-weight:400; font-size:clamp(34px,4.2vw,70px); line-height:1.5; }
.reach-track { margin-top:40px; }
.reach-sticky { background:#080b10; }
.reach.is-enhanced:not(.is-static) .reach-track { height:300svh; }
.reach.is-enhanced:not(.is-static) .reach-sticky { height:100svh; min-height:640px; }
.reach.is-enhanced:not(.is-static) .reach-visual { position:absolute; top:106px; bottom:210px; left:clamp(30px,6vw,115px); right:clamp(30px,6vw,115px); width:auto; height:auto; min-height:0; overflow:hidden; background:#080b10; clip-path:none!important; }
.reach-art { inset:0; transform:none!important; }
.reach-film-canvas,.reach-film-video,.reach-film-poster { object-fit:contain!important; background:#080b10; }
.reach-visual-shade { display:none; }
.reach.is-enhanced:not(.is-static) .reach-topline { top:88px; left:6vw; right:6vw; font-size:8px; }
.reach.is-enhanced:not(.is-static) .reach-caption { left:6vw; right:6vw; bottom:80px; width:auto; display:grid; grid-template-columns:1fr 180px; align-items:end; gap:50px; }
.reach.is-enhanced:not(.is-static) .reach-caption::before { display:none; }
.reach.is-enhanced:not(.is-static) .reach-caption .reach-stage-name { font-family:'BeReach Regular','Prompt',sans-serif; font-weight:400; font-size:30px; margin:0 0 7px; }
.reach-caption-kicker { font-size:8px; letter-spacing:1.5px; color:#a8bfd5; }
.reach.is-enhanced:not(.is-static) .reach-stage-description { max-width:550px; color:#b8c3d0; font-size:12px; }
.reach.is-enhanced:not(.is-static) .reach-meter { margin-top:0; }
.reach-meter-label { font-size:9px; }
.reach-meter-number { font-family:'BeReach Regular','Prompt',sans-serif; font-weight:400; font-size:44px; line-height:1.3; letter-spacing:-2px; }
.reach.is-enhanced:not(.is-static) .reach-controls { bottom:20px; left:6vw; right:6vw; padding-top:12px; border-top:1px solid #b7dcff25; }
.reach-phase { font-size:9px; }
.reach-controls { gap:25px; }
.reach-phases { flex-shrink:0; gap:20px; }
.reach-meter { border-top:0; padding-top:0; }
.reach-scrub { display:flex; align-items:center; gap:14px; flex:1; max-width:520px; }
.reach-scrub label { white-space:nowrap; color:#b8d0e8; font-size:9px; }
.reach-scrub input { width:100%; accent-color:#91d2ff; cursor:ew-resize; height:24px; }
.reach-toggle { font-size:9px; background:#142638; }
.reach.is-static .reach-visual { width:100%; height:auto; min-height:0; aspect-ratio:16/9; background:#080b10; }
.reach.is-static .reach-caption,.reach.is-static .reach-controls { background:#080b10; }
.reach.is-static .reach-scrub { display:none; }
.reach-end { background:radial-gradient(ellipse at 85% 100%,#1456e81a,transparent 65%); border-top:1px solid #b2d3ff18; padding-block:95px; }
@media(min-width:1800px) { .work-copy-stage{padding-left:22%} .selected-work.is-scroll .work-copy,.selected-work.is-scroll .work-pagination {left:22%} }
@media(max-width:1100px) { .page-rail{right:8px;width:24px} .work-pin{grid-template-columns:42% 58%} .selected-work.is-scroll .work-copy{left:15%;right:10%} .selected-work.is-scroll .work-pagination{left:15%} .work-copy h3{font-size:46px} .work-screen-stage{padding-inline:25px} .service-visual-card{min-height:510px} }
@media(min-width:768px) and (max-width:1100px) { .reference-hero { --hero-lift:clamp(0px,calc(8vw - 61.44px),24px); } }
@media(max-width:767px) {
  body { --premium-gutter:25px; }
  .reference-hero { --hero-lift:20px; }
  html { scroll-padding-top:90px; }
  .reference-hero .preview-fullscreen { width:34px; height:34px; top:10px; right:10px; }
  .connected-intro { padding-bottom:65px; }
  .work-heading { padding:55px 32px 60px 25px; }
  .work-heading .connected-section-label { margin-bottom:35px; }
  .work-heading .connected-section-label>span:last-child { display:none; }
  .work-heading h2 { font-size:clamp(56px,13vw,98px); }
  .work-heading__foot { margin-top:30px; align-items:start; flex-direction:column; }
  .work-heading__foot p { font-size:13px; }
  .work-pin { display:block; min-height:0; }
  .work-mobile { padding:0 38px 0 25px; gap:55px; }
  .work-mobile-case { display:flex; flex-direction:column; align-items:stretch; gap:25px; }
  .work-mobile-case__image { padding:12px; border-radius:14px; }
  .work-mobile-case h3 { font-size:36px; }
  .work-mobile-case .work-description { font-size:13px; margin-top:15px; }
  .work-mobile-case .work-visit { margin-top:20px; }
  .work-copy-stage { padding:40px 40px 30px 25px; }
  .work-copy { padding:25px 0; }
  .work-copy h3 { font-size:42px; max-width:100%; }
  .work-category { font-size:9px; gap:15px; margin-bottom:15px; }
  .work-description { font-size:12px; line-height:1.85; margin-top:18px; max-width:95%; }
  .work-tags { margin:18px 0; }
  .work-tags span { font-size:8px; }
  .work-visit { font-size:12px; min-height:36px; }
  .selected-work.is-scroll .work-scroll { height:320svh; }
  .selected-work.is-scroll .work-pin { height:100svh; min-height:650px; display:grid; grid-template-columns:1fr; grid-template-rows:49% 51%; }
  .selected-work.is-scroll .work-copy-stage { padding:0; }
  .selected-work.is-scroll .work-copy { left:25px; right:38px; top:58%; }
  .selected-work.is-scroll .work-copy h3 { font-size:clamp(34px,8.6vw,52px); }
  .selected-work.is-scroll .work-tags { display:none; }
  .selected-work.is-scroll .work-visit { margin-top:14px; }
  .selected-work.is-scroll .work-pagination { bottom:8px; left:auto; right:38px; gap:8px; }
  .work-pagination button { min-width:38px; font-size:9px; gap:5px; padding:4px 0; min-height:28px; }
  .work-pagination i { width:15px; }
  .selected-work.is-scroll .work-screen { left:5%; width:87%; border-radius:14px; padding:5px; }
  .selected-work.is-scroll .work-screen img { max-height:36svh; }
  .work-browser { padding:5px 7px 8px; font-size:6px; }
  .work-screen__caption { font-size:6px; padding:8px 5px 5px; }
  .work-screen-counter { bottom:14px; right:10%; font-size:9px; }
  .work-more { padding:65px 38px 75px 25px; }
  .work-more__heading { align-items:start; flex-direction:column; gap:10px; margin-bottom:28px; }
  .work-more__heading h3 { font-size:32px; }
  .work-more__heading p { font-size:11px; }
  .work-grid { grid-template-columns:1fr; gap:35px; }
  .work-tile__name { font-size:23px; padding-top:16px; }
  .work-tile__image { padding:12px; }
  .connected-services { padding-top:70px; }
  .service-visual-card { min-height:490px; }
  .service-visual-card .motion-art { height:275px; margin-top:15px; }
  .page-rail { right:4px; width:18px; gap:9px; }
  .page-rail__label { display:none; }
  .page-rail__track { width:14px; min-height:150px; height:27svh; border-radius:12px; }
  .page-rail__segments { inset:10px 4px; gap:3px; }
  .page-rail__thumb { left:2px; right:2px; height:10px; }
  .page-rail__sections { gap:2px; }
  .page-rail__sections a { width:18px; height:20px; font-size:6px; border-radius:3px; }
  .page-rail__value { font-size:6px; letter-spacing:0; }
  .reach-head { padding-top:75px; }
  .reach-heading { font-size:clamp(28px,6.5vw,44px); }
  .reach.is-enhanced:not(.is-static) .reach-sticky { min-height:650px; }
  .reach.is-enhanced:not(.is-static) .reach-visual { top:135px; bottom:auto; left:0; right:23px; height:calc((100vw - 23px)*9/16); }
  .reach.is-enhanced:not(.is-static) .reach-topline { top:100px; left:25px; right:35px; font-size:6px; }
  .reach.is-enhanced:not(.is-static) .reach-topline>span:last-child { display:none; }
  .reach.is-enhanced:not(.is-static) .reach-caption { left:25px; right:38px; top:calc(165px + (100vw - 23px)*9/16); bottom:auto; grid-template-columns:1fr 65px; gap:15px; }
  .reach.is-enhanced:not(.is-static) .reach-caption .reach-stage-name { font-size:24px; }
  .reach-caption-kicker { font-size:8px; margin-bottom:10px; }
  .reach.is-enhanced:not(.is-static) .reach-stage-description { font-size:12px; line-height:1.85; max-width:250px; }
  .reach-meter-number { font-size:30px; letter-spacing:-1px; }
  .reach-meter-label { font-size:6px; }
  .reach.is-enhanced:not(.is-static) .reach-controls { left:25px; right:38px; top:calc(310px + (100vw - 23px)*9/16); bottom:auto; padding-top:12px; flex-wrap:nowrap; gap:12px; }
  .reach-phases { display:none; }
  .reach-scrub { max-width:none; gap:9px; }
  .reach-scrub label { font-size:8px; }
  .reach-toggle { width:36px; min-width:36px; height:36px; min-height:36px; padding:9px; }
  .reach.is-static .reach-visual { aspect-ratio:16/9; }
  .reach.is-static .reach-caption { grid-template-columns:1fr 65px; gap:15px; padding:25px 38px 25px 25px; }
  .reach-end { padding-block:65px; }
  .connected-footer { padding-right:38px; }
}
@media(prefers-reduced-motion:reduce) {
  .work-copy[aria-hidden=true] { visibility:visible; }
  .work-copy { opacity:1!important; transform:none!important; }
  .work-screen { transform:none!important; opacity:1!important; }
  .work-screen[aria-hidden=true] { visibility:visible; }
  .work-tile img { transition:none; }
}

/* The remaining studio story: editorial space, a delivery rail and a useful close. */
.completion-studio,.completion-process,.completion-faq,.completion-contact { position:relative; background:#080808; color:#f5f5f7; font-family:'BeReach Regular','Prompt',sans-serif; font-weight:400; padding:110px var(--premium-gutter,8.5vw); }
.completion-studio,.completion-process,.completion-faq { border-top:1px solid #ffffff1a; }
.completion-section-label { display:flex; justify-content:space-between; align-items:center; gap:20px; color:#a5a5af; font-size:10px; line-height:1.7; letter-spacing:1.1px; margin-bottom:66px; }
.completion-section-label>span:last-child { letter-spacing:0; }
.completion-text-link { display:inline-flex; align-items:center; justify-content:space-between; gap:35px; color:#f5f5f7; font-size:14px; line-height:1.8; text-decoration:none; min-height:44px; border-bottom:1px solid #ffffff4d; padding-bottom:5px; }
.completion-text-link>span { font-size:24px; color:#a8d8ff; transition:transform .25s; }
.completion-text-link:hover>span { transform:translate(3px,-3px); }
.completion-studio__heading { display:flex; align-items:center; justify-content:space-between; gap:5%; }
.completion-studio h2,.completion-faq h2,.completion-contact h2 { font-size:clamp(66px,8.8vw,164px); font-weight:400; line-height:1.07; letter-spacing:-.065em; margin:0; }
.completion-studio h2>span,.completion-faq h2>span { color:#85858c; }
.completion-signal { width:clamp(120px,17vw,280px); flex:none; aspect-ratio:1; color:#a0caff; opacity:.85; }
.completion-signal svg { display:block; width:100%; height:100%; stroke:currentColor; stroke-width:.65; }
.completion-signal__core { fill:#ff5438; stroke:none; }
.completion-studio__body { display:grid; grid-template-columns:1.06fr 1fr; gap:9%; margin-top:65px; }
.completion-studio__lead { font-size:clamp(20px,1.8vw,31px); line-height:1.85; letter-spacing:-.025em; margin:0; }
.completion-studio__detail>p { font-size:clamp(14px,1.1vw,19px); line-height:1.95; color:#aaaab3; margin:0 0 24px; }
.completion-scope { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; margin-top:80px; }
.completion-scope>div { border-top:1px solid #ffffff38; padding-top:23px; }
.completion-scope>div>span { color:#91c7ff; font-size:9px; letter-spacing:1.4px; }
.completion-scope h3 { margin:20px 0 12px; font-size:clamp(21px,2vw,32px); font-weight:400; letter-spacing:-.025em; line-height:1.5; }
.completion-scope p { font-size:14px; color:#aaaab3; line-height:1.9; margin:0; max-width:330px; }
.completion-process { padding-top:110px; padding-bottom:90px; background:linear-gradient(160deg,#111214 0%,#0b0b0c 48%,#080808 100%); overflow:clip; }
.completion-process::before { content:''; position:absolute; top:-190px; right:-250px; width:650px; height:450px; pointer-events:none; border-radius:50%; background:#376ca90f; filter:blur(70px); }
.completion-process__intro { display:flex; justify-content:space-between; align-items:flex-end; gap:45px; }
.completion-process h2 { margin:0; font-weight:400; font-size:clamp(36px,4.6vw,76px); line-height:1.4; letter-spacing:-.04em; }
.completion-process h2>span { color:#9b9ba5; }
.completion-process__intro>p { font-size:clamp(13px,1.05vw,18px); line-height:1.95; color:#b3b3bc; margin:0 0 9px; }
.completion-process__rail { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; position:relative; padding:0; margin:75px 0 0; list-style:none; }
.completion-process__rail::before { content:''; position:absolute; top:29px; left:0; right:0; height:1px; background:linear-gradient(90deg,#75beff,#ffffff24 70%); }
.completion-process__rail>li { min-width:0; position:relative; }
.completion-process__node { position:relative; display:flex; align-items:center; justify-content:space-between; padding-right:12px; height:60px; margin-bottom:30px; }
.completion-process__node>span { position:relative; z-index:1; display:grid; place-items:center; width:60px; height:60px; border:1px solid #91c7ff61; border-radius:50%; background:#11161d; color:#b3daff; font-size:15px; font-variant-numeric:tabular-nums; box-shadow:0 0 0 9px #101113; }
.completion-process__node>i { position:relative; width:6px; height:6px; border-radius:50%; background:#58738d; box-shadow:0 0 0 7px #101113; }
.completion-process__en { margin:0 0 14px; color:#9a9aa4; letter-spacing:1px; font-size:9px; line-height:1.5; }
.completion-process h3 { font-size:clamp(19px,1.7vw,28px); font-weight:400; line-height:1.5; margin:0 0 16px; letter-spacing:-.025em; }
.completion-process__rail>li>p:not(.completion-process__en) { font-size:13px; line-height:1.95; color:#a5a5af; margin:0; }
.completion-process__output { display:block; color:#c2c2ca; font-size:10px; line-height:1.8; border-top:1px solid #ffffff1a; padding-top:16px; margin-top:28px; }
.completion-process__foot { display:flex; justify-content:space-between; align-items:center; gap:25px; border-top:1px solid #ffffff24; padding-top:32px; margin-top:60px; }
.completion-process__foot>span { font-size:11px; color:#9e9ea9; line-height:1.8; }
.completion-faq { padding-top:120px; padding-bottom:125px; }
.completion-faq__layout { display:grid; grid-template-columns:.82fr 1.18fr; gap:8%; align-items:start; }
.completion-faq__intro { position:sticky; top:125px; padding-top:12px; }
.completion-faq h2 { font-size:clamp(60px,6.6vw,116px); line-height:1.07; }
.completion-faq__intro>p { color:#aaaab3; font-size:14px; line-height:1.9; margin:32px 0 20px; }
.completion-faq__intro>.completion-text-link { font-size:17px; font-variant-numeric:tabular-nums; }
.completion-faq__list { border-top:1px solid #ffffff3b; }
.completion-faq__item { border-bottom:1px solid #ffffff29; }
.completion-faq__item summary { display:grid; grid-template-columns:24px 1fr 22px; align-items:start; gap:16px; min-height:86px; padding:25px 0; cursor:pointer; list-style:none; }
.completion-faq__item summary::-webkit-details-marker { display:none; }
.completion-faq__number { font-size:9px; line-height:2.5; color:#90909d; font-variant-numeric:tabular-nums; }
.completion-faq__item h3 { font-weight:400; font-size:clamp(16px,1.3vw,22px); line-height:1.75; letter-spacing:-.015em; margin:0; }
.completion-faq__plus { position:relative; width:20px; height:26px; margin-top:2px; }
.completion-faq__plus::before,.completion-faq__plus::after { content:''; position:absolute; width:13px; height:1px; background:#e4e4eb; top:12px; right:0; }
.completion-faq__plus::after { transform:rotate(90deg); transition:transform .25s; }
.completion-faq__item[open] .completion-faq__plus::after { transform:rotate(0deg); }
.completion-faq__item[open] h3 { color:#b1d5ff; }
.completion-faq__answer { padding:0 35px 28px 40px; }
.completion-faq__answer p { font-size:13px; line-height:2; color:#b0b0bb; margin:0; }
.completion-faq__item[open] .completion-faq__answer { animation:completion-answer-in .23s ease-out; }
@keyframes completion-answer-in { from { opacity:.3; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
.completion-contact { isolation:isolate; overflow:clip; background:#0d1019; border-top:1px solid #ffffff24; padding-top:88px; padding-bottom:35px; }
.completion-contact__glow { position:absolute; z-index:-1; inset:-25% -30% -50%; pointer-events:none; background:radial-gradient(ellipse at 70% 70%,#285ab642,transparent 48%),radial-gradient(ellipse at 25% 10%,#203c5a38,transparent 48%); }
.completion-contact__top { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.completion-contact h2 { font-size:clamp(80px,12.5vw,232px); line-height:1; letter-spacing:-.075em; }
.completion-contact h2>span { color:#b4ceff; }
.completion-contact__disc { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; width:clamp(140px,16vw,250px); height:clamp(140px,16vw,250px); flex:none; border:1px solid #ff785b; border-radius:50%; background:#d63822; color:white; padding:38px; text-decoration:none; transform:rotate(-10deg); transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s; box-shadow:inset 0 1px #ffffff2e; }
.completion-contact__disc>span { font-size:clamp(13px,1.2vw,20px); line-height:1.65; }
.completion-contact__disc svg { align-self:flex-end; width:35px; height:35px; stroke:currentColor; stroke-width:1.5; }
.completion-contact__disc:hover { transform:rotate(0deg) scale(1.035); background:#ca321c; }
.completion-contact__bottom { display:grid; grid-template-columns:1fr .85fr; gap:11%; border-top:1px solid #ffffff29; margin-top:70px; padding-top:60px; }
.completion-contact__thai { margin:0 0 24px; font-size:clamp(30px,3vw,50px); letter-spacing:-.04em; line-height:1.5; }
.completion-contact__copy>p:not(.completion-contact__thai) { font-size:14px; line-height:1.95; color:#b4b7c4; max-width:380px; margin:0 0 30px; }
.completion-contact__phone { display:flex; align-items:center; gap:30px; font-size:clamp(23px,2.5vw,40px); line-height:1.4; color:#f2f5ff; text-decoration:none; letter-spacing:-.03em; margin-bottom:20px; min-height:44px; font-variant-numeric:tabular-nums; }
.completion-contact__phone>span { color:#9ec5ff; font-size:24px; }
.completion-contact__copy>.completion-text-link { color:#c5d3ed; font-size:12px; border-color:#ffffff38; }
.completion-brief { min-width:0; }
.completion-brief h3 { margin:0 0 8px; font-size:24px; font-weight:400; letter-spacing:-.02em; }
.completion-brief__note { margin:0 0 25px; color:#adb2c3; font-size:12px; line-height:1.85; }
.completion-brief fieldset { border:0; padding:0; margin:0 0 23px; min-width:0; }
.completion-brief legend,.completion-brief__label { display:block; color:#dce0ed; font-size:11px; line-height:1.8; margin-bottom:11px; }
.completion-brief__choices { display:flex; flex-wrap:wrap; gap:8px; }
.completion-brief__choices label { position:relative; display:block; cursor:pointer; }
.completion-brief__choices input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; margin:0; }
.completion-brief__choices span { display:flex; align-items:center; min-height:42px; color:#b4bbce; border:1px solid #ffffff35; border-radius:40px; font-size:11px; line-height:1.4; padding:10px 16px; transition:color .2s,background .2s,border-color .2s; }
.completion-brief__choices input:checked+span { background:#d1e3ff; color:#11223c; border-color:#d1e3ff; }
.completion-brief__choices input:focus-visible+span { outline:2px solid #94d9ff; outline-offset:4px; }
.completion-brief__label>span { color:#9ba3b8; font-size:10px; }
.completion-brief textarea { display:block; width:100%; resize:vertical; min-height:115px; max-height:350px; border:1px solid #ffffff35; border-radius:10px; padding:13px 15px; background:#090f1a99; color:#edf2ff; font:400 12px/1.95 'BeReach Regular','Prompt',sans-serif; }
.completion-brief textarea::placeholder { color:#929cb3; opacity:1; }
.completion-brief__copy { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:13px; border:1px solid #d1e3ff; border-radius:8px; width:100%; min-height:48px; padding:10px 17px; background:#d1e3ff; color:#11223c; font:400 13px/1.5 'BeReach Regular','Prompt',sans-serif; cursor:pointer; transition:background .25s; }
.completion-brief__copy:hover { background:white; }
.completion-brief__copy>span:last-child { font-size:22px; }
.completion-brief__status { color:#b2bbcf; font-size:10px; line-height:1.8; margin:12px 0 0; min-height:36px; }
.completion-brief__fallback { font-size:11px; color:#d3dff5; line-height:1.8; }
.completion-brief__fallback[hidden] { display:none; }
.completion-brief__fallback textarea { margin-top:10px; min-height:180px; }
.completion-brief__noscript { color:#c8d6ee; font-size:12px; line-height:1.8; }
.completion-contact__signoff { display:flex; justify-content:space-between; gap:20px; color:#9da9bf; font-size:8px; letter-spacing:1.2px; line-height:1.8; padding-top:65px; margin:0; }
@media(min-width:1800px) { .completion-studio,.completion-process,.completion-faq { padding-block:140px; } .completion-studio__body { margin-top:85px; } .completion-process__rail { margin-top:95px; gap:45px; } .completion-faq__answer p { font-size:15px; } .completion-contact__copy>p:not(.completion-contact__thai),.completion-scope p { font-size:16px; } }
@media(max-width:1100px) { .completion-studio,.completion-process,.completion-faq,.completion-contact { padding-inline:60px; } .completion-section-label { margin-bottom:48px; } .completion-studio__body { gap:7%; margin-top:45px; } .completion-scope { gap:25px; margin-top:55px; } .completion-process__intro { gap:30px; } .completion-process__rail { gap:22px; margin-top:55px; } .completion-process__rail>li>p:not(.completion-process__en) { font-size:12px; } .completion-process__output { font-size:9px; } .completion-process__foot { margin-top:45px; } .completion-faq__layout { grid-template-columns:.7fr 1.3fr; gap:6%; } .completion-faq h2 { font-size:7vw; } .completion-contact__bottom { gap:7%; } .completion-contact__disc { padding:27px; } }
@media(max-width:800px) { .completion-studio,.completion-process,.completion-faq,.completion-contact { padding:85px 40px; } .completion-section-label { font-size:8px; margin-bottom:40px; } .completion-studio h2 { font-size:8.6vw; } .completion-signal { width:16vw; } .completion-studio__body { gap:6%; } .completion-studio__lead { font-size:20px; } .completion-studio__detail>p { font-size:13px; } .completion-scope { gap:20px; } .completion-scope p { font-size:12px; } .completion-scope h3 { font-size:21px; } .completion-process__intro { display:block; } .completion-process h2 { font-size:5.7vw; } .completion-process__intro>p { margin-top:25px; font-size:13px; } .completion-process__rail { grid-template-columns:1fr 1fr; gap:42px 35px; } .completion-process__rail::before { display:none; } .completion-process__node { margin-bottom:20px; } .completion-process__rail>li::before { content:''; position:absolute; top:29px; left:0; right:0; height:1px; background:linear-gradient(90deg,#75beff88,#ffffff24); } .completion-process h3 { font-size:24px; } .completion-faq__layout { display:block; } .completion-faq__intro { position:relative; top:auto; padding:0; margin-bottom:42px; } .completion-faq h2 { font-size:75px; } .completion-faq__intro>p { margin-top:25px; } .completion-faq__item h3 { font-size:18px; } .completion-faq__answer p { font-size:13px; } .completion-contact { padding-bottom:30px; } .completion-contact h2 { font-size:12.5vw; } .completion-contact__disc { width:140px; height:140px; padding:24px; } .completion-contact__disc>span { font-size:12px; } .completion-contact__disc svg { width:27px; height:27px; } .completion-contact__bottom { margin-top:45px; padding-top:40px; grid-template-columns:.9fr 1fr; gap:7%; } .completion-contact__thai { font-size:30px; } .completion-contact__copy>p:not(.completion-contact__thai) { font-size:13px; } .completion-contact__phone { font-size:25px; gap:18px; } .completion-contact__phone>span { font-size:21px; } .completion-brief h3 { font-size:21px; } .completion-contact__signoff { font-size:7px; padding-top:55px; } }
@media(max-width:600px) { .completion-studio,.completion-process,.completion-faq,.completion-contact { padding:65px 25px; } .completion-section-label { align-items:flex-start; font-size:7px; gap:12px; margin-bottom:34px; } .completion-section-label>span:last-child { max-width:135px; text-align:right; } .completion-studio__heading { display:block; position:relative; } .completion-studio h2 { font-size:11vw; line-height:1.13; position:relative; z-index:1; } .completion-signal { position:absolute; top:-8px; right:-7px; width:28vw; opacity:.24; } .completion-studio__body { grid-template-columns:1fr; gap:24px; margin-top:34px; } .completion-studio__lead { font-size:19px; line-height:1.9; } .completion-studio__detail>p { font-size:12px; margin-bottom:14px; } .completion-text-link { font-size:12px; gap:24px; } .completion-scope { grid-template-columns:1fr; gap:0; margin-top:40px; } .completion-scope>div { display:grid; grid-template-columns:95px 1fr; column-gap:20px; padding:24px 0; } .completion-scope>div>span { font-size:7px; line-height:2.5; } .completion-scope h3 { font-size:21px; margin:0 0 8px; } .completion-scope p { grid-column:2; font-size:12px; max-width:none; } .completion-process { padding-top:60px; } .completion-process h2 { font-size:8.4vw; line-height:1.5; } .completion-process__intro>p { font-size:12px; margin-top:20px; } .completion-process__rail { grid-template-columns:1fr; margin-top:40px; gap:0; } .completion-process__rail>li { padding:0 0 35px 63px; border-left:1px solid #83bbf148; margin-left:22px; } .completion-process__rail>li:last-child { border-color:transparent; padding-bottom:0; } .completion-process__rail>li::before { display:none; } .completion-process__node { position:absolute; left:-23px; top:0; width:44px; height:44px; padding:0; margin:0; } .completion-process__node>span { width:44px; height:44px; font-size:12px; box-shadow:0 0 0 7px #101113; } .completion-process__node>i { display:none; } .completion-process__en { font-size:8px; margin-bottom:9px; padding-top:2px; } .completion-process h3 { font-size:23px; margin-bottom:12px; } .completion-process__rail>li>p:not(.completion-process__en) { font-size:12px; } .completion-process__output { margin-top:17px; padding-top:12px; font-size:9px; } .completion-process__foot { display:block; margin-top:40px; padding-top:22px; } .completion-process__foot>span { font-size:10px; } .completion-process__foot>.completion-text-link { display:flex; width:fit-content; margin-top:14px; } .completion-faq h2 { font-size:19vw; } .completion-faq__intro { margin-bottom:35px; } .completion-faq__intro>p { font-size:12px; margin:22px 0 12px; } .completion-faq__intro>.completion-text-link { font-size:15px; } .completion-faq__item summary { grid-template-columns:18px 1fr 17px; gap:11px; padding:21px 0; min-height:76px; } .completion-faq__item h3 { font-size:15px; line-height:1.85; } .completion-faq__number { font-size:8px; line-height:2.8; } .completion-faq__plus { width:17px; height:22px; } .completion-faq__answer { padding:0 17px 23px 29px; } .completion-faq__answer p { font-size:12px; line-height:2; } .completion-contact { padding-bottom:28px; } .completion-contact__top { position:relative; display:block; } .completion-contact h2 { font-size:18.2vw; line-height:1.1; } .completion-contact__disc { position:absolute; right:0; bottom:-88px; width:111px; height:111px; padding:21px; } .completion-contact__disc>span { font-size:10px; } .completion-contact__disc svg { width:23px; height:23px; } .completion-contact__bottom { display:block; margin-top:110px; padding-top:30px; } .completion-contact__thai { font-size:30px; } .completion-contact__copy>p:not(.completion-contact__thai) { font-size:12px; max-width:320px; margin-bottom:23px; } .completion-contact__phone { font-size:29px; margin-bottom:14px; } .completion-contact__copy>.completion-text-link { font-size:11px; } .completion-brief { margin-top:40px; padding-top:32px; border-top:1px solid #ffffff2c; } .completion-brief h3 { font-size:24px; } .completion-brief__note { font-size:11px; margin-bottom:22px; } .completion-brief__choices span { font-size:10px; padding:10px 14px; min-height:42px; } .completion-brief textarea { font-size:12px; } .completion-brief__copy { min-height:48px; } .completion-contact__signoff { display:block; font-size:7px; line-height:1.9; padding-top:40px; } .completion-contact__signoff>span { display:block; margin-top:7px; color:#c1d7ff; } }
@media(max-width:360px) { .completion-studio,.completion-process,.completion-faq,.completion-contact { padding-inline:21px; } .completion-studio__lead { font-size:17px; } .completion-scope>div { grid-template-columns:80px 1fr; gap:12px; } .completion-scope h3 { font-size:19px; } .completion-process__rail>li { padding-left:48px; } .completion-process h3 { font-size:21px; } .completion-faq__item h3 { font-size:14px; } .completion-brief__choices { gap:7px; } .completion-brief__choices span { padding-inline:12px; } }
@media(prefers-reduced-motion:reduce) { .completion-text-link>span,.completion-contact__disc,.completion-faq__plus::after { transition:none; } .completion-faq__item[open] .completion-faq__answer { animation:none; } }

/* One native scroll, several depths. Static content is the baseline. */
.work-title-track { position:relative; }
.work-heading { position:relative; overflow:hidden; isolation:isolate; }
.work-heading h2>.kinetic-line { display:block; position:relative; color:#fff; }
.work-heading h2>.kinetic-line--second { color:#a9a9b1; }
.kinetic-char { display:inline-block; white-space:pre; transform-origin:50% 100%; }
.work-title-halo { position:absolute; z-index:-1; width:105vw; height:95vw; top:-33vw; right:-36vw; pointer-events:none; background:radial-gradient(ellipse,#6d86a51a,transparent 60%); }
.work-title-orbit { position:absolute; z-index:-1; width:65vw; height:65vw; border:1px solid #ffffff0b; border-radius:50%; right:-28vw; top:-13vw; transform:rotate(-25deg) scaleX(.56); }
.work-title-orbit::after { content:''; position:absolute; top:25%; left:6%; width:11px; height:11px; background:#85cfff; border-radius:50%; box-shadow:0 0 30px #5db9ff99; }
.work-title-rule { display:flex; align-items:center; gap:18px; width:100%; margin-top:35px; color:#a8c6df; font-size:9px; letter-spacing:1.8px; }
.work-title-rule>i { width:clamp(45px,9vw,170px); height:1px; display:block; background:linear-gradient(90deg,#a7d9ff,#6b4dff); transform-origin:left; }
.work-title-stamp { display:none; }
.is-cinematic .work-title-track { height:165svh; }
.is-cinematic .work-title-track .work-heading { position:sticky; top:0; min-height:640px; height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:110px; padding-bottom:95px; }
.is-cinematic .work-title-track .connected-section-label { margin-bottom:50px; }
.is-cinematic .work-title-track h2 { font-size:clamp(72px,9.3vw,174px); line-height:1.05; perspective:1000px; }
.is-cinematic .kinetic-line { overflow:visible; white-space:nowrap; }
.is-cinematic .kinetic-char { will-change:transform; }
.is-cinematic .work-title-stamp { display:flex; position:absolute; right:8.5vw; bottom:94px; width:74px; height:74px; flex-direction:column; justify-content:center; align-items:center; border:1px solid #b2cfff40; color:#b9d3e6; border-radius:50%; font-size:9px; letter-spacing:1px; line-height:1.7; transform:rotate(-12deg); }
.is-cinematic .work-heading__foot { margin-top:32px; padding-right:120px; }
.connected-intro,.connected-services,.work-more,.completion-studio,.completion-process,.completion-faq { overflow:clip; }
.completion-faq { overflow:visible; }
.page-depth { translate:0 var(--depth-y,0px); rotate:var(--depth-rotate,0deg); }
.motion-reveal { translate:0 var(--reveal-y,0px); opacity:var(--reveal-opacity,1); }
.work-tile.page-depth:nth-child(2) { --depth-rotate:0deg; }
.service-visual-card { transform:translate3d(0,var(--service-y,0px),0) rotate(var(--service-rotate,0deg)); transform-origin:center; }
.service-visual-card:hover { border-color:#94caff55; }
.service-visual-card > .motion-art { translate:0 var(--art-y,0px); }
.connected-intro::before { content:''; position:absolute; pointer-events:none; width:70vw; height:70vw; right:-50vw; top:-20vw; border:1px solid #a4caff16; border-radius:50%; translate:0 var(--intro-orbit-y,0px); }
.completion-process__rail::after { content:''; position:absolute; top:29px; left:0; right:0; height:1px; pointer-events:none; transform:scaleX(var(--process-progress,0)); transform-origin:left; background:linear-gradient(90deg,#77bdff,#cab0ff); box-shadow:0 0 14px #73c5ff60; }
.completion-process__rail>li { z-index:1; }
.completion-process__rail>li.is-reached .completion-process__node>span { background:#153d60; border-color:#a7d7ff; color:#fff; }
.completion-contact__signoff { position:relative; }
.completion-contact__signoff::before { content:''; position:absolute; top:30px; left:0; width:100%; height:1px; background:#ffffff12; transform-origin:left; transform:scaleX(var(--signoff-progress,1)); }
.reference-floating-cta { transition:opacity .25s,transform .25s; }
body[data-contact-visible=true] .reference-floating-cta { opacity:0; pointer-events:none; transform:translateY(140%); }
.project-status { display:inline-block; color:#aac5db; margin:12px 0 0; font-size:9px; line-height:1.6; letter-spacing:.5px; }
.work-tile .project-status { color:#a9bdd1; font-size:9px; }
.reach-head { border-top:1px solid #b9d7ff14; }
.reach-caption-kicker { letter-spacing:1.5px; }
.completion-contact .completion-brief__status { min-height:3.4em; }
.completion-contact { scroll-margin-top:0; }
.completion-footer { display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:40px; align-items:start; padding:65px var(--premium-gutter) 28px; background:#08090d; border-top:1px solid #ffffff1c; }
.completion-footer__brand>p { color:#9fa8ba; font-size:12px; line-height:1.9; margin:18px 0 0; }
.completion-footer>nav { display:grid; grid-template-columns:1fr 1fr; gap:14px 25px; margin:0; font-size:12px; color:#b7c0d2; }
.completion-footer__contact>a { font-size:19px; color:#eef3ff; }
.completion-footer__contact>p { font-size:8px; line-height:1.8; letter-spacing:1px; color:#9fa8ba; margin:18px 0 0; }
.completion-footer .connected-footer__top { margin:0; }
.completion-footer__bottom { display:flex; grid-column:1/-1; justify-content:space-between; gap:20px; padding-top:26px; border-top:1px solid #ffffff1a; color:#a1aaba; font-size:9px; }
@media(max-width:991px) { .completion-footer { grid-template-columns:1fr 1fr auto; gap:35px; } .completion-footer>nav { order:0; } .completion-footer__contact { grid-column:2; grid-row:1; } .completion-footer .connected-footer__top { grid-column:3;grid-row:1; } }
@media(min-width:1101px) { .reference-hero { --hero-lift:clamp(24px,calc(15vw - 141px),72px); } }
@media(max-width:1100px) { .is-cinematic .work-title-track h2 { font-size:9.3vw; } .is-cinematic .work-title-stamp { right:6vw; } }
@media(max-width:767px) {
 .reference-hero { --hero-lift:28px; }
 .is-cinematic .work-title-track { height:135svh; }
 .is-cinematic .work-title-track .work-heading { min-height:580px; height:100svh; padding:105px 35px 90px 25px; }
 .is-cinematic .work-title-track h2 { font-size:11.3vw; line-height:1.2; letter-spacing:-.055em; }
 .is-cinematic .work-title-track .connected-section-label { margin-bottom:50px; }
 .is-cinematic .work-title-stamp { right:40px; bottom:90px; width:54px; height:54px; font-size:7px; }
 .is-cinematic .work-heading__foot { margin-top:32px; padding-right:45px; }
 .work-title-rule { font-size:7px; gap:12px; margin-top:28px; }
 .work-title-orbit { width:130vw; height:130vw; right:-70vw; top:12%; }
 .work-title-halo { width:200vw; height:240vw; right:-100vw; top:-50vw; }
 .completion-studio,.completion-process,.completion-faq,.completion-contact { padding-right:38px; }
 .completion-process__rail::after { top:0; bottom:0; left:25px; width:1px; height:auto; right:auto; transform:scaleY(var(--process-progress,0)); transform-origin:top; }
 .completion-contact__signoff::before { top:15px; }
 .completion-footer { padding:45px 38px 25px 25px; grid-template-columns:1fr auto; gap:30px; }
 .completion-footer>nav { grid-column:1/-1; gap:15px; font-size:12px; }
 .completion-footer__contact { grid-column:1; grid-row:3; }
 .completion-footer .connected-footer__top { grid-column:2; }
 .completion-footer__bottom { flex-wrap:wrap; line-height:1.8; gap:12px; font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
 .work-title-track,.is-cinematic .work-title-track { height:auto; }
 .work-title-track .work-heading,.is-cinematic .work-title-track .work-heading { height:auto; min-height:0; position:relative; display:block; padding:65px var(--premium-gutter) 70px; }
 .kinetic-char,.kinetic-line { transform:none!important; opacity:1!important; }
 .page-depth,.motion-reveal { translate:none!important; rotate:none!important; opacity:1!important; }
 .service-visual-card { transform:none!important; }
 .service-visual-card > .motion-art { translate:none!important; }
 .work-title-stamp { display:none!important; }
}

/* A live design study, with an immediately readable static composition. */
.design-playground{--playground-scroll:.5;--playground-x:0;--playground-y:0;--pg-accent:#e8421c;--pg-paper:#f2eee5;--pg-ink:#25241f;--pg-stage:#d7d3ca;--pg-phone:#272721;position:relative;padding:120px var(--premium-gutter) 100px;color:#f5f4ef;font-family:'BeReach Regular','Prompt',sans-serif;scroll-margin-top:100px;}
.playground-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#9a9a9d;font-size:9px;letter-spacing:1.6px;line-height:1.6;}
.playground-topline>span:first-child{display:flex;align-items:center;gap:12px;color:#c2c2c3;}
.playground-topline i{width:6px;height:6px;background:#ff4b23;border-radius:50%;box-shadow:0 0 18px #ff4b2380;}
.playground-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin:35px 0 48px;}
.playground-heading h3{font:400 clamp(44px,6.6vw,118px)/1.03 'BeReach Regular','Prompt',sans-serif;letter-spacing:-.065em;margin:0;}
.playground-heading h3>span{color:#939390;}
.playground-heading>div{max-width:325px;margin-bottom:8px;}
.playground-heading p{font-size:clamp(12px,1vw,16px);line-height:1.9;color:#c2c2c5;margin:0 0 15px;}
.playground-note{font-size:9px;color:#97979c;}
.playground-scene{position:relative;height:clamp(460px,44vw,740px);background:var(--pg-stage);color:var(--pg-ink);overflow:hidden;isolation:isolate;perspective:1500px;transition:background .65s,color .65s;}
.playground-grid{position:absolute;inset:0;opacity:.3;background-image:linear-gradient(#65655822 1px,transparent 1px),linear-gradient(90deg,#65655822 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(135deg,#000,transparent 80%);}
.playground-scene__top,.playground-scene__bottom{position:absolute;left:25px;right:25px;display:flex;justify-content:space-between;gap:15px;font-size:8px;letter-spacing:1px;z-index:5;line-height:1.4;}
.playground-scene__top{top:22px;}.playground-scene__bottom{bottom:20px;}
.playground-orbit{position:absolute;top:6%;left:19%;width:70%;height:90%;border:1px solid currentColor;border-radius:50%;opacity:.14;transform:rotate(-24deg);}
.playground-desktop{position:absolute;left:7%;top:15%;width:70%;height:70%;background:var(--pg-paper);border:1px solid #ffffff60;box-shadow:0 30px 55px #24242025;transform:rotate(-4deg);transition:background .65s,color .65s,box-shadow .65s;transform-origin:55% 55%;}
.design-playground[data-ready=true]:not([data-static=true]) .playground-desktop{transform:translate3d(calc(var(--playground-x)*-8px),calc((var(--playground-scroll) - .5)*-35px),0) rotate(calc(-4deg + var(--playground-scroll)*4deg)) rotateY(calc(var(--playground-x)*2deg));}
.playground-demo-nav{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:4% 5%;font-size:7px;letter-spacing:.8px;}
.playground-wordmark{font-size:20px;line-height:1;font-weight:700;letter-spacing:-1px;}.playground-wordmark>span{font-weight:400;}
.playground-demo-nav i{font-size:16px;font-style:normal;margin-left:18px;}
.playground-demo-copy{position:absolute;left:6%;top:25%;z-index:2;}
.playground-demo-copy>span:first-child{font-size:7px;letter-spacing:1.3px;display:block;margin-bottom:15px;}
.playground-demo-copy strong{display:block;font-weight:400;font-size:clamp(54px,7.2vw,132px);line-height:.93;letter-spacing:-.075em;}
.playground-demo-copy em{font-style:normal;color:var(--pg-accent);transition:color .6s;}
.playground-demo-copy p{font-size:9px;margin:19px 0 0;}
.playground-demo-arrow{display:grid;place-items:center;width:30px;height:30px;border:1px solid currentColor;border-radius:50%;font-size:19px;margin-top:16px;}
.playground-demo-bottom{position:absolute;left:6%;right:6%;bottom:5%;display:flex;justify-content:space-between;gap:12px;font-size:6px;letter-spacing:.8px;}
.playground-shape{position:absolute;top:22%;right:8%;width:35%;aspect-ratio:1;transform:rotate(-20deg);transition:transform .8s;}
.design-playground[data-ready=true]:not([data-static=true]) .playground-shape{transform:rotate(calc(-35deg + var(--playground-scroll)*65deg)) translateY(calc(var(--playground-y)*-9px));}
.playground-shape>i{display:block;position:absolute;inset:40% 0;width:100%;height:20%;border-radius:20%;background:linear-gradient(180deg,#ffb791,var(--pg-accent) 48%,#d63a16);transform:rotate(calc(var(--ray)*30deg));box-shadow:0 2px 2px #b3371315;transition:opacity .5s,background .6s;}
.playground-shape__sphere{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fbffff 0,#d0e6f7 24%,#639bc5 58%,#284b76 80%,#b9d5e4 100%);box-shadow:inset -9px -16px 26px #193c4f50,0 30px 35px #304e6025;opacity:0;transform:scale(.75);transition:opacity .6s,transform .8s;}
.playground-shape__wire{position:absolute;inset:5%;border:2px solid var(--pg-accent);transform:rotate(45deg) scale(.75);opacity:0;transition:opacity .6s,transform .8s;box-shadow:inset 0 0 25px #daff5b15,0 0 30px #daff5b10;}
.playground-shape__wire::before,.playground-shape__wire::after{content:'';position:absolute;inset:14%;border:1px solid var(--pg-accent);transform:rotate(22.5deg);}.playground-shape__wire::after{inset:28%;transform:rotate(45deg);}
.playground-mobile{position:absolute;right:8%;bottom:12%;width:18.5%;height:70%;min-width:155px;background:var(--pg-phone);color:var(--pg-paper);border:6px solid #393934;border-radius:27px;box-shadow:0 30px 45px #17191440;overflow:hidden;transform:rotate(7deg);transition:color .65s,background .65s,border-color .65s;}
.design-playground[data-ready=true]:not([data-static=true]) .playground-mobile{transform:translate3d(calc(var(--playground-x)*12px),calc((var(--playground-scroll) - .5)*45px),0) rotate(calc(10deg - var(--playground-scroll)*7deg));}
.playground-mobile__nav{display:flex;justify-content:space-between;align-items:center;padding:17px 13px;font-size:12px;letter-spacing:-.4px;}.playground-mobile__nav>span{font-weight:700;}.playground-mobile__nav>span>span{font-weight:400;}.playground-mobile__nav>i{display:block;width:14px;height:5px;border-top:1px solid;border-bottom:1px solid;}
.playground-mobile__symbol{position:absolute;top:23%;left:25%;width:50%;aspect-ratio:1;transform:rotate(-15deg);transition:transform .8s;}.playground-mobile__symbol>i{position:absolute;inset:35% 0;background:var(--pg-accent);border-radius:10%;transform:rotate(0);transition:background .6s,transform .6s,border-radius .6s;}.playground-mobile__symbol>i:nth-child(2){transform:rotate(60deg);}.playground-mobile__symbol>i:nth-child(3){transform:rotate(120deg);}
.playground-mobile>strong{position:absolute;left:12%;top:54%;font-size:clamp(24px,3.2vw,53px);font-weight:400;line-height:.96;letter-spacing:-.06em;}
.playground-mobile__bottom{position:absolute;left:12%;right:12%;bottom:6%;display:flex;align-items:end;justify-content:space-between;gap:8px;font-size:6px;letter-spacing:.7px;}.playground-mobile__bottom b{font-size:26px;font-weight:400;line-height:1;}
.playground-specimen{position:absolute;left:3%;bottom:10%;width:115px;background:var(--pg-paper);border:1px solid #7e7b6925;box-shadow:0 15px 30px #2223;padding:15px;transform:rotate(-10deg);transition:background .65s;}.playground-specimen>span{font-size:41px;letter-spacing:-3px;line-height:1;}.playground-specimen>div{display:flex;margin-top:17px;}.playground-specimen i{display:block;width:28px;height:21px;background:var(--pg-accent);}.playground-specimen i:nth-child(2){background:var(--pg-ink);}.playground-specimen i:nth-child(3){background:var(--pg-stage);}
.playground-bottom{display:grid;grid-template-columns:1.15fr 1fr auto;align-items:end;gap:25px;padding-top:30px;}
.playground-control-label{font-size:10px;color:#b0b0b3;display:block;margin-bottom:14px;}.playground-control-label>span{margin-left:15px;color:#fff;font-size:17px;}
.playground-modes{display:flex;flex-wrap:wrap;gap:8px;}.playground-modes button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;border:1px solid #ffffff30;background:transparent;color:#a7a7ac;padding:10px 17px;border-radius:30px;font:400 12px 'BeReach Regular','Prompt',sans-serif;cursor:pointer;transition:color .2s,border-color .2s,background .2s;}.playground-modes button>i{width:7px;height:7px;display:block;background:#ff4b23;border-radius:50%;}.playground-modes button[data-playground-mode=calm]>i{background:#b3cfe7;}.playground-modes button[data-playground-mode=precise]>i{background:#d7fa5d;}.playground-modes button:hover{border-color:#ffffffa0;color:#fff;}.playground-modes button[aria-pressed=true]{background:#f3f1eb;color:#171715;border-color:#f3f1eb;}.design-playground button:focus-visible,.playground-contact:focus-visible{outline:2px solid #94d8ff;outline-offset:5px;}
.playground-direction{padding-bottom:2px;}.playground-direction>span{font-size:21px;letter-spacing:-.5px;}.playground-direction p{font-size:11px;color:#aaaab0;line-height:1.7;margin:7px 0 0;}.playground-contact{display:flex;justify-content:space-between;align-items:center;gap:30px;border-bottom:1px solid #ffffff60;padding:12px 0;color:#f5f4ef;font-size:12px;text-decoration:none;min-height:44px;}.playground-contact>span{font-size:24px;}
.design-playground[data-mode=calm]{--pg-accent:#537e9c;--pg-paper:#f7f5ef;--pg-ink:#344952;--pg-stage:#bbcbd2;--pg-phone:#365463;}.design-playground[data-mode=calm] .playground-demo-copy strong{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.07em;}.design-playground[data-mode=calm] .playground-demo-copy em{font-style:italic;}.design-playground[data-mode=calm] .playground-shape>i{opacity:0;}.design-playground[data-mode=calm] .playground-shape__sphere{opacity:1;transform:scale(1);}.design-playground[data-mode=calm] .playground-mobile{border-color:#536e79;}.design-playground[data-mode=calm] .playground-mobile>strong,.design-playground[data-mode=calm] .playground-specimen>span{font-family:Georgia,'Times New Roman',serif;font-style:italic;}.design-playground[data-mode=calm] .playground-mobile__symbol>i{inset:0;border-radius:50%;background:radial-gradient(circle at 30% 20%,#edfaff,#9fc1d4 40%,#638eac);transform:none;}
.design-playground[data-mode=precise]{--pg-accent:#d7fa5d;--pg-paper:#22281f;--pg-ink:#eff3e7;--pg-stage:#464c3e;--pg-phone:#151a12;}.design-playground[data-mode=precise] .playground-grid{opacity:.5;background-image:linear-gradient(#bdc6a516 1px,transparent 1px),linear-gradient(90deg,#bdc6a516 1px,transparent 1px);background-size:40px 40px;}.design-playground[data-mode=precise] .playground-desktop{border-color:#d7fa5b50;}.design-playground[data-mode=precise] .playground-mobile{color:#eff3e7;border-color:#667052;}.design-playground[data-mode=precise] .playground-demo-copy strong{font-family:Arial,sans-serif;font-weight:700;letter-spacing:-.07em;}.design-playground[data-mode=precise] .playground-shape>i{opacity:0;}.design-playground[data-mode=precise] .playground-shape__wire{opacity:1;transform:rotate(45deg) scale(1);}.design-playground[data-mode=precise] .playground-mobile__symbol>i{inset:10%;border:1px solid var(--pg-accent);background:none;border-radius:0;}.design-playground[data-mode=precise] .playground-mobile__symbol>i:nth-child(2){inset:20%;}.design-playground[data-mode=precise] .playground-mobile__symbol>i:nth-child(3){inset:30%;}.design-playground[data-mode=precise] .playground-specimen i:nth-child(2){background:#eff3e7;}
body[data-playground-visible=true] .reference-floating-cta{opacity:0;pointer-events:none;transform:translateY(140%);}
.design-playground[data-static=true] .playground-desktop,.design-playground[data-static=true] .playground-mobile,.design-playground[data-static=true] .playground-shape{transform:none;}.design-playground[data-static=true] *{transition:none!important;}
@media(min-width:1750px){.playground-demo-copy strong{font-size:140px;}.playground-demo-copy p{font-size:12px;}.playground-mobile>strong{font-size:62px;}}
@media(max-width:1100px){.playground-heading{align-items:start;}.playground-heading>div{max-width:235px;padding-top:8px;}.playground-demo-copy>span:first-child{margin-bottom:10px;}.playground-demo-copy p{margin-top:13px;}.playground-demo-arrow{margin-top:9px;width:25px;height:25px;}.playground-bottom{grid-template-columns:1.2fr 1fr;}.playground-contact{grid-column:2;grid-row:2;justify-self:start;}.playground-direction{align-self:center;}.playground-specimen{width:85px;padding:10px;}.playground-specimen i{width:20px;height:15px;}.playground-specimen>span{font-size:33px;}}
@media(max-width:767px){.design-playground{padding:85px 25px 70px;}.playground-topline{font-size:8px;letter-spacing:1px;}.playground-topline>span:last-child{display:none;}.playground-heading{display:block;margin:28px 0 30px;}.playground-heading h3{font-size:clamp(39px,9.7vw,73px);}.playground-heading>div{max-width:none;margin:23px 0 0;padding:0;}.playground-heading p{font-size:12px;margin-bottom:10px;}.playground-scene{height:480px;margin:0 -7px;perspective:1000px;}.playground-scene__top,.playground-scene__bottom{left:15px;right:15px;font-size:6px;letter-spacing:.7px;}.playground-scene__top{top:16px;}.playground-scene__top>span:last-child{display:none;}.playground-scene__bottom{bottom:14px;}.playground-scene__bottom>span:last-child{display:none;}.playground-desktop{top:12%;left:6%;width:86%;height:57%;}.playground-demo-nav{padding:6%;font-size:5px;}.playground-wordmark{font-size:17px;}.playground-demo-nav>span:last-child{font-size:0;}.playground-demo-nav i{font-size:15px;}.playground-demo-copy{top:27%;left:7%;}.playground-demo-copy>span:first-child{font-size:5px;margin-bottom:14px;}.playground-demo-copy strong{font-size:clamp(43px,13vw,78px);}.playground-demo-copy p{font-size:7px;margin-top:13px;}.playground-demo-arrow{margin-top:12px;width:25px;height:25px;font-size:16px;}.playground-demo-bottom{font-size:4px;bottom:5%;}.playground-shape{top:27%;right:6%;width:32%;}.playground-mobile{right:8%;bottom:9%;width:38%;height:47%;min-width:0;border-width:4px;border-radius:19px;}.playground-mobile__nav{padding:12px 10px;font-size:9px;}.playground-mobile__nav>i{width:10px;height:4px;}.playground-mobile>strong{font-size:clamp(26px,8vw,44px);top:56%;}.playground-mobile__symbol{top:24%;left:29%;width:42%;}.playground-mobile__bottom{font-size:4px;}.playground-mobile__bottom b{font-size:20px;}.playground-specimen{left:8%;bottom:13%;width:80px;padding:12px;}.playground-specimen>span{font-size:34px;}.playground-specimen>div{margin-top:12px;}.playground-specimen i{width:18px;height:17px;}.playground-orbit{top:19%;left:12%;width:85%;height:73%;}.playground-bottom{grid-template-columns:1fr;gap:23px;padding-top:24px;}.playground-direction{padding:0;}.playground-direction>span{font-size:22px;}.playground-contact{grid-column:auto;grid-row:auto;justify-self:stretch;padding-bottom:14px;}.playground-modes button{padding:10px 16px;}.design-playground[data-mode=precise] .playground-demo-copy strong{font-size:clamp(40px,12vw,73px);}}
@media(max-width:359px){.design-playground{padding-left:22px;padding-right:22px;}.playground-heading h3{font-size:37px;}.playground-scene{height:440px;}.playground-demo-copy strong{font-size:42px;}.playground-modes{gap:6px;}.playground-modes button{gap:8px;padding:10px 13px;}}
@media(prefers-reduced-motion:reduce){.design-playground *{transition:none!important;}.design-playground .playground-desktop,.design-playground .playground-mobile,.design-playground .playground-shape{transform:none!important;}}

/* Network stays visible as a destination, including the compact scrolling header. */
.br-nav{left:50%;right:auto;transform:translateX(-50%);top:14px;width:min(880px,calc(100% - 40px));min-width:0;max-width:880px;height:64px;max-height:none;min-height:0;padding:0 9px 0 20px;gap:20px;border:1px solid #ffffff0d;border-radius:17px;background:#1b1b1bf2;backdrop-filter:blur(16px);}
.br-nav__network{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 14px;color:#eee8ff!important;text-decoration:none;white-space:nowrap;font:500 13px 'BeReach Regular','Prompt',sans-serif;border:1px solid #aa8cff2b;border-radius:24px;background:radial-gradient(ellipse at 50% 90%,#8455ff21,transparent 75%);transition:background .2s,border-color .2s;}
.br-nav__network>i{width:5px;height:5px;border-radius:50%;background:#a387ff;box-shadow:0 0 10px #9361ff;}
.br-nav__network:hover,.br-nav__network[aria-current=page]{border-color:#b9a3ff80;background:#8a5bff24;color:#fff!important;}
.reference-desktop-links{gap:23px;}.br-nav__right{gap:0;}.br-nav__cta{display:inline-flex;border-radius:10px;background:#dc3515;color:white;min-height:44px;font-size:12px;font-weight:500;padding:10px 16px;gap:13px;}.br-nav__cta::before{display:none;}.br-nav__cta:hover{background:#c93113;}.br-nav__cta svg{width:17px;}.br-nav__mark{text-decoration:none;align-items:center;}.br-nav__wordmark{font-size:23px;line-height:34px;}
.br-menu__list a[data-network-menu],.br-mobile-menu__list a[data-network-menu]{color:#c6b6ff;}
.br-nav__network:focus-visible{outline:2px solid #c5e9ff;outline-offset:4px;}
@media(min-width:992px){.br-nav.is-reel-scrolled{width:470px;min-width:0;}.br-nav.is-reel-scrolled .br-nav__network{margin-left:auto;}.br-nav.is-reel-scrolled .br-nav__right{gap:18px;}}
@media(max-width:991px){.br-nav{width:calc(100% - 28px);height:60px;top:12px;padding:0 13px;gap:12px;}.br-nav__network{margin-left:auto;font-size:12px;padding:0 13px;}.br-nav__right{gap:10px;}.br-nav__cta{display:none;}.br-nav__burger{display:flex;min-width:61px;gap:8px;font-size:9px;}.br-nav__wordmark{font-size:21px;}.reference-desktop-links{display:none;}.br-menu{display:none;}.br-mobile-menu{padding-top:110px;}}
@media(max-width:380px){.br-nav{gap:8px;padding:0 11px;}.br-nav__wordmark{display:none;}.br-nav__network{padding:0 15px;font-size:12px;}.br-nav__burger{min-width:58px;}.br-nav__mark{gap:0;}}
@media(prefers-reduced-motion:reduce){.br-nav__network{transition:none;}}
/* Shared compact chrome: the Network destination uses the same landing header. */
@font-face{font-family:'BeReach Regular';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/prompt-thai-400.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'BeReach Regular';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/prompt-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF}
.br-nav{font-family:'BeReach Regular','Prompt',sans-serif;view-transition-name:bereach-header;}
.br-nav .br-nav__symbol img{max-width:none;}
.br-nav .br-nav__mark{height:34px;align-items:center;}
.br-nav .br-nav__symbol{width:32px;height:30px;}
.br-nav .br-nav__symbol img{width:65px;height:65px;top:-15px;left:-14px;}
.br-nav .br-menu__list{background:#1b1b1b;border:1px solid #ffffff20;border-radius:15px;box-shadow:0 18px 50px #0005;}
.br-nav .br-menu__list a{font-family:'BeReach Regular','Prompt',sans-serif;}
@media(min-width:992px){
 .br-nav.br-nav--compact{width:470px;min-width:0;}
 .br-nav--compact .br-nav__network{margin-left:auto;}
 .br-nav--compact .br-nav__wordmark,.br-nav--compact .reference-desktop-links{display:none;}
 .br-nav--compact .br-menu{display:block;}
 .br-nav--compact .br-nav__right{gap:18px;}
 .br-nav.br-nav--compact .br-menu__button,.br-nav.is-reel-scrolled .br-menu__button{font-family:'BeReach Regular','Prompt',sans-serif;font-size:10px;font-weight:700;line-height:1;letter-spacing:.1em;min-width:65px;}
}
.br-nav .br-nav__burger{font-family:'BeReach Regular','Prompt',sans-serif;font-weight:700;line-height:1;letter-spacing:.1em;}
@media(max-width:991px){.br-nav .br-nav__burger{font-size:9px;min-width:61px;gap:8px;}}
@media(max-width:650px){.br-nav .br-nav__symbol{width:29px;height:29px;}.br-nav .br-nav__symbol img{width:60px;height:60px;top:-14px;left:-13px;}.br-nav .br-nav__mark{gap:4px;}}

/* Native same-origin document transitions retain the named BeReach header. */
@view-transition{navigation:auto;}
::view-transition-group(root){animation-duration:480ms;animation-timing-function:cubic-bezier(.22,1,.36,1);}
::view-transition-old(root){animation:bereach-page-out 250ms ease both;mix-blend-mode:normal;}
::view-transition-new(root){animation:bereach-page-in 480ms cubic-bezier(.22,1,.36,1) both;mix-blend-mode:normal;}
::view-transition-group(bereach-header){z-index:2;animation-duration:480ms;animation-timing-function:cubic-bezier(.22,1,.36,1);}
::view-transition-old(bereach-header),::view-transition-new(bereach-header){mix-blend-mode:normal;}
@keyframes bereach-page-out{to{opacity:0;transform:translateY(-8px);}}
@keyframes bereach-page-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
/* Other browsers retain normal links and get a brief content fade. */
html[data-bereach-route] body>:not(.br-nav):not(.br-mobile-menu):not(script):not(style):not(link):not(.skip-link){transition:opacity 180ms ease,translate 380ms cubic-bezier(.22,1,.36,1);}
html[data-bereach-route=leaving] body>:not(.br-nav):not(.br-mobile-menu):not(script):not(style):not(link):not(.skip-link){opacity:0;translate:0 -5px;}
html[data-bereach-route=entering] body>:not(.br-nav):not(.br-mobile-menu):not(script):not(style):not(link):not(.skip-link){opacity:0;translate:0 8px;}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none;}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}
 html[data-bereach-route] body>*{transition:none!important;opacity:1!important;translate:none!important;}
}