:root{
  --ink:#0a1220; --ink2:#0d1728; --navy:#13233f; --navy2:#1a2e4f;
  --paper:#ffffff; --paper2:#f5f6f8; --card:#ffffff;
  --red:#e22a24; --red2:#bf1d18;
  --ai:#3b82f6; --ai2:#2563eb;
  --text:#111c2b; --muted:#5c6a7e; --hair:#e4ddcb;
  --dm:#a9bad6;
  --ground:var(--paper); --surface:var(--paper2);
}
:root[data-theme="dark"]{ --ground:#080f1c; --surface:#0d1728; --card:#111f38; --text:#e9f0fa; --muted:#8fa1bb; --hair:#20304c; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ground:#080f1c; --surface:#0d1728; --card:#111f38; --text:#e9f0fa; --muted:#8fa1bb; --hair:#20304c; } }

*{box-sizing:border-box}
.ohm{--bp:url("/assets/img/73d1078f27853ee2.svg");background:var(--ground);color:var(--text);font-family:"Helvetica Neue",Arial,system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;--logo:url("/assets/img/3abed748b7cfa651.png")}
.ohm .mark{background:var(--logo) center/contain no-repeat;display:inline-block}
.ohm .w{max-width:1200px;margin:0 auto;padding:0 30px}
.ohm h1,.ohm h2,.ohm h3{margin:0;font-weight:900;letter-spacing:-.035em;line-height:.96;text-wrap:balance}
.ohm p{margin:0}
.ohm a{color:inherit}
.ohm .eyebrow{font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--red)}
.ohm .eyebrow.ai{color:var(--ai)}

/* ---------- NAV ---------- */
.ohm-nav{position:sticky;top:0;z-index:900;background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.ohm-nav .in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:24px}
.ohm-nav .brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:900;letter-spacing:-.02em;font-size:17px;text-decoration:none;white-space:nowrap}
.ohm-nav .brand svg{width:26px;height:26px}
.ohm-nav .links{display:flex;gap:26px;align-items:center}
.ohm-nav .links a{color:#cdd7e6;text-decoration:none;font-size:14.5px;font-weight:600;position:relative;white-space:nowrap}
.ohm-nav .links a:hover{color:#fff}
.ohm-nav .links a .nw{position:absolute;top:-9px;right:-20px;font-size:8px;font-weight:800;letter-spacing:.1em;background:var(--ai);color:#fff;padding:2px 5px;border-radius:6px}
.ohm-nav .navcta{background:var(--red);color:#fff;padding:11px 20px;border-radius:10px;font-weight:800;font-size:14px;text-decoration:none;transition:.15s;white-space:nowrap}
.ohm-nav .navcta:hover{background:var(--red2);transform:translateY(-1px)}
.ohm-nav .burger{display:none;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
@media(max-width:940px){.ohm-nav .links{display:none}.ohm-nav .burger{display:block}}

/* ---------- HERO ---------- */
.ohm-hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:96px 0 90px}
.ohm-hero .ohm-hero .ohm-hero .grid{position:relative;display:grid;grid-template-columns:1.35fr .65fr;gap:50px;align-items:center}
.ohm-hero h1{font-size:clamp(46px,8vw,104px);text-transform:uppercase;letter-spacing:-.05em}
.ohm-hero h1 .rd{color:var(--red)}
.ohm-hero .sub{margin-top:28px;max-width:54ch;font-size:clamp(17px,1.7vw,20px);color:#c8d2e2;line-height:1.55}
.ohm-hero .ctas{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
.ohm .btn{display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:15.5px;padding:17px 32px;border-radius:12px;text-decoration:none;transition:.16s;border:0;cursor:pointer;font-family:inherit}
.ohm .btn:hover{background:var(--red2);transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(226,42,36,.7)}
.ohm .btn.line{background:transparent;border:1.5px solid rgba(255,255,255,.26);color:#fff}
.ohm .btn.line:hover{border-color:#fff;background:rgba(255,255,255,.05);box-shadow:none}
.ohm .btn.ai{background:var(--ai)}.ohm .btn.ai:hover{background:var(--ai2)}
.ohm-hero .stats{display:flex;flex-direction:column;gap:22px;border-left:2px solid rgba(255,255,255,.12);padding-left:28px}
.ohm-hero .stat .n{font-size:clamp(30px,3.4vw,46px);font-weight:900;letter-spacing:-.04em;line-height:1}
.ohm-hero .stat .n.rd{color:var(--red)}
.ohm-hero .stat .l{font-size:13px;color:var(--dm);margin-top:6px}
@media(max-width:860px){.ohm-hero .grid{grid-template-columns:1fr}.ohm-hero .stats{flex-direction:row;flex-wrap:wrap;border-left:0;border-top:1px solid rgba(255,255,255,.12);padding-left:0;padding-top:24px;gap:26px}.ohm-hero .stat{flex:1;min-width:120px}}

/* ---------- BANNER LINE ---------- */
.ohm-line{background:var(--red);color:#fff;padding:38px 0}
.ohm-line .t{font-size:clamp(22px,3.4vw,40px);font-weight:900;letter-spacing:-.03em;text-transform:uppercase;text-align:center;text-wrap:balance}

/* ---------- SECTION SHELL ---------- */
.ohm section{padding:96px 0}
.ohm .shead{max-width:52ch;margin-bottom:48px;display:flex;flex-direction:column;gap:16px}
.ohm .shead h2{font-size:clamp(32px,5.2vw,60px);text-transform:uppercase}
.ohm .shead p{color:var(--muted);font-size:clamp(16px,1.6vw,19px)}
.ohm .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.ohm .reveal.in{opacity:1;transform:none}















/* ---------- SERVICES: elastic accordion ---------- */
/* Six panels sharing one row. The hovered panel takes four parts of the space and
   the rest fall back to one, so the row stretches rather than swapping. Artwork is
   inline SVG in the brand palette: no external host can be fetched here, and drawn
   panels read as ours rather than as stock photography. */
.svc-el{display:flex;gap:12px;height:min(600px,72vh);width:100%}
.el{position:relative;flex:1;min-width:0;border-radius:18px;overflow:hidden;cursor:pointer;
  background:#0d1728;border:1px solid rgba(255,255,255,.10);
  transition:flex 760ms cubic-bezier(.25,1,.5,1),filter 500ms ease,border-color .4s;
  filter:brightness(.46)}
.el:hover{filter:brightness(.72)}
.el.on{flex:4;filter:brightness(1);border-color:rgba(226,42,36,.55)}
.el .art{position:absolute;inset:0}
.el .art svg{width:100%;height:100%;display:block}
.el .art .bg{transition:transform 1100ms cubic-bezier(.25,1,.5,1);transform-origin:center}
.el:not(.on) .art .bg{transform:scale(1.12)}
.el .veil{position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:linear-gradient(to top,rgba(4,8,15,.88),rgba(4,8,15,.24) 46%,transparent)}
.el.on .veil{opacity:1}
.el .body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(16px,2vw,32px)}
.el .live{display:flex;flex-direction:column;gap:9px;opacity:0;transform:translateY(46px);
  transition:opacity .5s,transform .5s}
.el.on .live{opacity:1;transform:none;transition-delay:.2s}
.el .tag{align-self:flex-start;border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.10);
  backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;white-space:nowrap}
.el .live h3{color:#fff;font-size:clamp(24px,3.4vw,52px);font-weight:900;text-transform:uppercase;
  line-height:.94;letter-spacing:-.035em}
/* "Website Design & Dev" is twice the length of the label it replaced, so the open card headline
   drops its top end and balances rather than orphaning "Dev" on its own line. */
.el .live h3{text-wrap:balance;max-width:14ch}
.el[data-i="0"] .live h3,.el[data-i="4"] .live h3{font-size:clamp(22px,2.8vw,42px)}
.el .live p{color:#c7d4e8;font-size:14.5px;line-height:1.5;max-width:46ch;margin-top:2px}
.el .go{margin-top:8px;display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:12.5px;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.el .go svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.el .go:hover svg{transform:translate(3px,-3px)}
/* the vertical spine shown while the panel is closed */
.el .spine{position:absolute;left:50%;bottom:clamp(16px,2vw,30px);transform:translateX(-50%);
  writing-mode:vertical-rl;white-space:nowrap;color:#fff;font-size:clamp(14px,1.25vw,19px);
  font-weight:800;letter-spacing:.2em;text-transform:uppercase;transition:opacity .45s,transform .45s}
.el.on .spine{opacity:0;transform:translateX(-50%) scale(.6)}
.el .idx{position:absolute;top:clamp(14px,1.6vw,24px);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.55);font-size:11px;font-weight:800;letter-spacing:.2em}
.el.on .idx{left:clamp(16px,2vw,32px);transform:none;color:var(--red)}
@media(max-width:900px){
  .svc-el{flex-direction:column;height:auto;gap:10px}
  .el{flex:0 0 76px;transition:flex 620ms cubic-bezier(.25,1,.5,1),filter .5s}
  .el.on{flex:0 0 380px}
  .el .spine{writing-mode:horizontal-tb;left:20px;bottom:auto;top:26px;transform:none;letter-spacing:.16em}
  .el .idx{left:auto;right:20px;transform:none}
  .el .live h3{font-size:30px}
}
@media(prefers-reduced-motion:reduce){.el,.el .live,.el .art .bg{transition:none}}


.el .art img.bg{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1100ms cubic-bezier(.25,1,.5,1);transform-origin:center}
.el:not(.on) .art img.bg{transform:scale(1.12)}
/* a navy wash keeps six different renders reading as one family */
.el .art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(165deg,rgba(14,26,50,.34),rgba(6,12,24,.16));mix-blend-mode:multiply}
.el .art img.bg{filter:saturate(.88) contrast(1.06)}

/* ---------- HERO FILM PANEL ---------- */
/* The film sits in a frame rather than stretched behind the type. At 960x540 a
   contained panel is the native size, so it stays sharp, and the headline is not
   fighting moving pictures for attention. */
.ohm-hero .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,58px);align-items:center}
.hero-film{position:relative;border-radius:20px;overflow:hidden;background:#0c1424;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px -40px rgba(0,0,0,.9);aspect-ratio:16/10}
.hero-film video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92)}
/* The loop was an 18 second MP4 inlined as a base64 data URI. A data URI cannot stream or seek,
   so the browser had to decode the whole blob before painting a frame. A still plus a real link
   is instant, and on the production domain this becomes a normal streaming video file. */
a.hero-film{display:block;text-decoration:none;cursor:pointer}
.hero-film img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92)}
.hf-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:54px;height:54px;border-radius:50%;background:var(--red);display:grid;place-items:center;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.7);transition:transform .2s ease,background .2s ease}
.hf-play svg{width:22px;height:22px;fill:#fff;margin-left:2px}
a.hero-film:hover .hf-play{transform:translate(-50%,-50%) scale(1.08);background:var(--red2)}
.hf-run{position:absolute;right:12px;bottom:11px;z-index:2;font-size:11px;font-weight:800;
  letter-spacing:.08em;color:#fff;background:rgba(6,11,20,.72);padding:5px 9px;border-radius:6px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-film::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(6,11,20,.86))}
.hero-film .watch{position:absolute;left:18px;bottom:16px;z-index:2;display:inline-flex;align-items:center;
  gap:11px;color:#fff;text-decoration:none;font-size:14px;font-weight:800;letter-spacing:-.01em}
.hero-film .watch .pl{width:38px;height:38px;border-radius:50%;background:var(--red);display:flex;
  align-items:center;justify-content:center;transition:transform .2s;box-shadow:0 10px 26px -8px rgba(226,42,36,.9)}
.hero-film .watch:hover .pl{transform:scale(1.1)}
.hero-film .watch svg{width:15px;height:15px;fill:#fff;margin-left:2px}
/* tagline: left rail, tighter measure, vertically centered against the film */
.ohm-hero h1{font-size:clamp(40px,5.6vw,82px);letter-spacing:-.05em;line-height:.94}
.ohm-hero .sub{max-width:46ch;margin-top:24px}
@media(max-width:900px){
  .ohm-hero .grid{grid-template-columns:1fr}
  .hero-film{order:2;margin-top:30px}
}
@media(prefers-reduced-motion:reduce){.hero-film video{display:none}}


.hero-filmwrap{display:flex;flex-direction:column;gap:12px}
.hero-cap{display:flex;align-items:baseline;gap:10px;padding-left:2px}
.hero-cap b{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.hero-cap span{font-size:13px;color:#93a6c4;letter-spacing:-.01em}
@media(max-width:900px){.hero-filmwrap{order:2;margin-top:30px}.hero-film{margin-top:0}}

/* ---------- PROCESS: horizontal timeline ---------- */
/* The page reads top to bottom everywhere else, so this one travels sideways.
   The change of axis is doing real work: a process is a line, and breaking the
   vertical rhythm is what stops seven cards feeling like more of the same. */
.ohm-proc{background:var(--surface);overflow:hidden}
.proc-rail{display:flex;gap:20px;overflow-x:auto;padding:10px 0 30px;position:relative;z-index:1;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.proc-rail::-webkit-scrollbar{display:none}
.proc-rail::after{content:"";flex:0 0 30px}
.pc{flex:0 0 clamp(258px,26vw,320px);scroll-snap-align:start;background:var(--card);
  border:1px solid var(--hair);border-radius:18px;padding:26px 24px 24px;position:relative;
  display:flex;flex-direction:column;transition:.22s}
.pc:hover{transform:translateY(-5px);border-color:#b9c4d6;box-shadow:0 28px 58px -32px rgba(0,0,0,.42)}
.pc .n{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--red)}
.pc h3{margin-top:12px;font-size:21px;letter-spacing:-.025em;line-height:1.05}
.pc p{margin-top:11px;color:var(--muted);font-size:14.5px;line-height:1.52;flex:1}
.pc .when{margin-top:18px;padding-top:14px;border-top:1px solid var(--hair);
  font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--text)}
.proc-wrap{position:relative}
.proc-wrap::before{content:"";position:absolute;left:30px;right:30px;top:64px;height:2px;z-index:0;
  background:linear-gradient(90deg,var(--red),rgba(226,42,36,.12))}
.proc-hint{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12.5px;
  font-weight:700;letter-spacing:.04em;margin-top:6px}
.proc-hint i{display:block;width:26px;height:1.5px;background:var(--red)}
.proc-note{margin-top:26px;padding:24px 26px;border-left:3px solid var(--red);background:var(--card);
  border-radius:0 14px 14px 0;font-size:15.5px;color:var(--muted);line-height:1.6}
.proc-note b{color:var(--text)}
@media(max-width:700px){.proc-wrap::before{display:none}}

/* ---------- TEAM PAGE ---------- */
@media(max-width:980px){}
@media(max-width:620px){}


/* ---------- REAL FILM CARD ---------- */
/* YouTube thumbnails are an external host, which this page cannot fetch, so the
   card is drawn rather than loaded: brand panel, mark, play control. It also means
   nothing on the page waits on youtube.com before it can render. */
.pf.play{position:relative;text-decoration:none;color:inherit;display:block}
.pf.play .shot{background:linear-gradient(150deg,#16233c,#0a1220 70%);position:relative}
.pf.play .shot::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 42%,rgba(226,42,36,.24),transparent 66%)}
.pf.play .mk{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  width:52%;aspect-ratio:2.795;background:var(--logo) center/contain no-repeat;opacity:.5}
.pf.play .go{position:absolute;left:50%;top:64%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;background:var(--red);display:flex;align-items:center;
  justify-content:center;box-shadow:0 14px 34px -10px rgba(226,42,36,.8);transition:transform .22s}
.pf.play:hover .go{transform:translate(-50%,-50%) scale(1.09)}
.pf.play .go svg{width:20px;height:20px;fill:#fff;margin-left:3px}
.pf.play .dur{position:absolute;right:11px;bottom:11px;background:rgba(5,9,15,.82);color:#fff;
  font-size:11.5px;font-weight:800;padding:4px 8px;border-radius:6px;letter-spacing:.02em}

/* ---------- PORTFOLIO PAGE ---------- */
.pf-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.pf-tabs button{font:inherit;font-size:13.5px;font-weight:700;color:var(--muted);background:var(--card);
  border:1px solid var(--hair);border-radius:20px;padding:9px 17px;cursor:pointer;transition:.18s}
.pf-tabs button:hover{color:var(--text);border-color:#b9c4d6}
.pf-tabs button.on{background:var(--red);border-color:var(--red);color:#fff}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pf{border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--hair);transition:.22s}
.pf:hover{transform:translateY(-5px);box-shadow:0 28px 58px -30px rgba(0,0,0,.45);border-color:#b9c4d6}
.pf .shot{background:var(--surface);position:relative;overflow:hidden}
.pf .shot img,.pf .shot video{width:100%;height:100%;object-fit:cover;display:block}
.pf.reel .shot{aspect-ratio:9/16}
.pf.ad .shot{aspect-ratio:4/5}
.pf.film .shot,.pf.design .shot{aspect-ratio:4/5}
.pf.news .shot{aspect-ratio:4/5}
.pf .slot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:16px;
  background:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(127,127,127,.08) 9px,rgba(127,127,127,.08) 18px)}
.pf .meta{padding:15px 16px}
.pf .meta b{display:block;font-size:15px;letter-spacing:-.01em}
.pf .meta span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.pf .shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.pf{display:flex;flex-direction:column}
.pf .meta{padding:15px 16px;display:flex;flex-direction:column;gap:3px;flex:1}
.ohm .pf .meta .cl{display:block;font-size:9.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin:0 0 2px}
.pf:hover{transform:translateY(-3px);box-shadow:0 26px 46px -34px rgba(10,18,32,.5);
  border-color:rgba(19,35,63,.2)}
.pf .slot{aspect-ratio:auto}
/* 3D coverflow, ported from the React component to vanilla and recolored to the OHM palette.
   Gold becomes brand red, the warm near-black becomes --ink, and the cards are 4:5 because that
   is the ratio every asset was actually delivered in. */
.cf{position:relative;width:100%;overflow:hidden;background:var(--ink);color:#fff;
  padding:232px 0 clamp(38px,4vw,60px);user-select:none;z-index:1}
.cf{clip-path:polygon(0% 0px,0.0% 16.5px,0.531% 16.7px,1.062% 16.6px,1.594% 19.0px,2.125% 18.1px,2.656% 22.4px,3.188% 25.1px,3.719% 26.5px,4.25% 26.5px,4.781% 28.8px,5.313% 31.7px,5.844% 36.1px,6.375% 38.1px,6.906% 41.7px,7.438% 48.2px,7.969% 49.2px,8.5% 53.8px,9.031% 54.5px,9.563% 57.2px,10.094% 61.4px,10.625% 64.5px,11.156% 66.5px,11.688% 64.8px,12.219% 68.9px,12.75% 70.3px,13.281% 72.7px,13.812% 71.9px,14.344% 75.0px,14.875% 76.9px,15.406% 76.7px,15.937% 79.8px,16.469% 76.1px,17.0% 79.0px,17.531% 78.9px,18.063% 80.0px,18.594% 76.2px,19.125% 74.6px,19.656% 73.3px,20.188% 70.6px,20.719% 72.8px,21.25% 72.3px,21.781% 72.2px,22.312% 73.8px,22.844% 71.0px,23.375% 69.5px,23.906% 69.0px,24.438% 69.0px,24.969% 69.1px,25.5% 67.9px,26.031% 67.0px,26.562% 66.7px,27.094% 64.9px,27.625% 63.4px,28.156% 65.6px,28.688% 65.6px,29.219% 65.3px,29.75% 64.2px,30.281% 64.8px,30.812% 63.3px,31.344% 65.3px,31.875% 69.0px,32.406% 69.5px,32.938% 72.6px,33.469% 78.5px,34.0% 81.0px,34.531% 85.0px,35.063% 86.9px,35.594% 87.6px,36.125% 89.4px,36.656% 90.9px,37.188% 93.3px,37.719% 94.1px,38.25% 95.0px,38.781% 98.7px,39.313% 99.5px,39.844% 98.5px,40.375% 100.7px,40.906% 104.4px,41.438% 106.1px,41.969% 110.9px,42.5% 115.5px,43.031% 117.8px,43.563% 117.6px,44.094% 117.4px,44.625% 120.8px,45.156% 123.2px,45.688% 126.5px,46.219% 131.2px,46.75% 132.6px,47.281% 133.3px,47.812% 134.5px,48.344% 132.1px,48.875% 130.8px,49.406% 131.2px,49.938% 130.8px,50.469% 131.4px,51.0% 135.1px,51.531% 132.8px,52.062% 133.7px,52.594% 133.7px,53.125% 136.0px,53.656% 137.0px,54.188% 136.0px,54.719% 136.6px,55.25% 135.7px,55.781% 133.8px,56.312% 129.6px,56.844% 126.3px,57.375% 126.4px,57.906% 127.3px,58.438% 127.5px,58.969% 125.8px,59.5% 127.1px,60.031% 124.1px,60.562% 123.4px,61.094% 120.8px,61.625% 123.0px,62.156% 125.5px,62.687% 125.5px,63.219% 128.4px,63.75% 129.6px,64.281% 130.8px,64.812% 134.1px,65.344% 139.3px,65.875% 143.7px,66.406% 145.5px,66.938% 146.8px,67.469% 146.4px,68.0% 145.6px,68.5% 147.6px,69.0% 146.7px,69.5% 146.5px,70.0% 143.5px,70.5% 140.9px,71.0% 138.5px,71.5% 142.5px,72.0% 142.7px,72.5% 140.8px,73.0% 139.1px,73.5% 140.2px,74.0% 139.3px,74.5% 136.5px,75.0% 136.3px,75.5% 139.2px,76.0% 142.7px,76.5% 142.0px,77.0% 139.8px,77.5% 139.8px,78.0% 137.6px,78.5% 137.6px,79.0% 137.4px,79.5% 134.9px,80.0% 134.6px,80.5% 136.8px,81.0% 137.8px,81.5% 135.5px,82.0% 134.6px,82.5% 138.5px,83.0% 142.5px,83.5% 144.1px,84.0% 145.9px,84.5% 150.8px,85.0% 153.8px,85.5% 159.4px,86.0% 158.6px,86.5% 160.4px,87.0% 162.8px,87.5% 164.1px,88.0% 168.1px,88.5% 170.0px,89.0% 169.0px,89.5% 168.3px,90.0% 167.1px,90.5% 169.3px,91.0% 169.5px,91.5% 172.6px,92.0% 172.8px,92.5% 174.7px,93.0% 173.9px,93.5% 176.8px,94.0% 176.5px,94.5% 179.9px,95.0% 181.5px,95.5% 180.5px,96.0% 183.3px,96.5% 185.9px,97.0% 190.9px,97.5% 191.0px,98.0% 194.5px,98.5% 195.8px,99.0% 199.2px,99.5% 201.4px,100.0% 200px,100% 100%,0% 100%)}
@media(max-width:860px){ .cf{clip-path:none;padding-top:clamp(64px,10vw,96px)} }
.cf-amb{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cf-amb img{width:100%;height:100%;object-fit:cover;filter:brightness(.20) blur(34px);
  transform:scale(1.18);transition:opacity .9s ease}
.cf-amb::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at center,rgba(10,18,32,.28) 0%,rgba(10,18,32,.94) 100%)}
.cf-in{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 20px;
  display:flex;flex-direction:column;align-items:center}
.cf-eye{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3vw,34px)}
.cf-eye i{width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--red))}
.cf-eye i+i{background:linear-gradient(90deg,var(--red),transparent)}
.ohm .cf-eye p{margin:0;font-size:10px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--red)}
.cf-stage{position:relative;width:100%;height:clamp(400px,52vw,530px);
  display:flex;justify-content:center;align-items:center;perspective:1400px;margin-bottom:clamp(24px,3vw,34px)}
.cf-card{position:absolute;width:clamp(240px,26vw,340px);aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:var(--ink2);border:1px solid rgba(255,255,255,.12);transform-origin:center center;
  transition:transform .8s cubic-bezier(.25,1,.5,1),opacity .8s cubic-bezier(.25,1,.5,1),filter .8s ease;
  will-change:transform,opacity}
.cf-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cf-card .veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,11,20,.42) 0%,rgba(6,11,20,0) 30%,rgba(6,11,20,0) 100%)}
.cf-body{position:relative;z-index:2;width:100%;height:100%;padding:16px;
  display:flex;flex-direction:column;justify-content:flex-start;text-align:center;
  opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.cf-card.is-on .cf-body{opacity:1;transform:none;pointer-events:auto}
.ohm .cf-tag{position:absolute;top:14px;left:50%;transform:translateX(-50%);margin:0;font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 2px 8px rgba(0,0,0,.8)}
.cf-open{position:absolute;bottom:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:10px;
  border:1px solid rgba(255,255,255,.28);background:rgba(6,11,20,.62);color:#fff;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(6px);opacity:0;transition:opacity .35s ease,background .2s ease}
.cf-card.is-on .cf-open{opacity:1}
.cf-open:hover{background:var(--red);border-color:var(--red)}
.cf-open svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none}
.cf-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(6,11,20,.6);border:1px solid rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;
  cursor:pointer;z-index:40;backdrop-filter:blur(8px);transition:background .2s ease,border-color .2s ease}
.cf-nav:hover{background:rgba(6,11,20,.85);border-color:rgba(255,255,255,.4)}
.cf-nav svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.5;fill:none}
.cf-prev{left:clamp(4px,2vw,24px)} .cf-next{right:clamp(4px,2vw,24px)}
.cf-dots{display:flex;align-items:center;justify-content:center;gap:8px;z-index:30}
.cf-dots button{height:8px;width:8px;border-radius:999px;background:rgba(255,255,255,.25);border:0;
  cursor:pointer;padding:0;transition:width .3s ease,background .3s ease}
.cf-dots button.on{width:28px;background:var(--red);box-shadow:0 0 12px rgba(226,42,36,.7)}
@media(prefers-reduced-motion:reduce){ .cf-card,.cf-body{transition:none} }
@media(max-width:640px){ .cf-nav{width:40px;height:40px}  }
/* Newsletters are 3,000px tall emails. The card can only ever show the top, so clicking one opens
   the whole thing in a scrollable viewer rather than a cropped tease. */
.pf[data-full]{cursor:zoom-in}
.pf-badge{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  background:rgba(10,18,32,.82);color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:7px 11px;border-radius:999px;backdrop-filter:blur(6px)}
.pf-badge svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.4;fill:none}
.lb{position:fixed;inset:0;z-index:120;background:rgba(6,11,20,.9);backdrop-filter:blur(8px);
  display:none;overflow-y:auto;overscroll-behavior:contain;padding:0 16px 64px}
.lb.on{display:block}
.lb-bar{position:sticky;top:0;display:flex;align-items:center;gap:14px;
  padding:16px 4px;background:linear-gradient(180deg,rgba(6,11,20,.96),rgba(6,11,20,0));z-index:2}
.ohm .lb-cl{margin:0;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#ff9691}
.ohm .lb-ti{margin:2px 0 0;font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em}
.lb-x{margin-left:auto;flex:none;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);color:#fff;font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center}
.lb-x:hover{background:rgba(255,255,255,.14)}
/* Source is 560px wide. Displaying it larger only upscales it, which is what looked pixelated. */
.lb-img{display:block;margin:0 auto;max-width:560px;width:100%;border-radius:12px;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.lb-foot{max-width:560px;margin:18px auto 0;text-align:center}
.ohm .lb-foot p{margin:0;font-size:12.5px;color:#8fa1bb}
.lb-close2{margin-top:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);
  color:#fff;font-size:13px;font-weight:800;letter-spacing:.06em;padding:12px 26px;border-radius:999px;
  cursor:pointer;transition:background .18s ease}
.lb-close2:hover{background:rgba(255,255,255,.18)}
body.lb-open{overflow:hidden}
@media(max-width:640px){ .lb{padding:0 10px 48px} .ohm .lb-ti{font-size:13.5px} }
@media(max-width:940px){.pf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pf-grid{grid-template-columns:1fr}}

/* ---------- STICKY CALL + SUBSCRIBE ---------- */
.ohm-dock{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:940;
  display:flex;flex-direction:column;gap:11px;align-items:flex-end}
.ohm-dock a,.ohm-dock button{font:inherit;border:0;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;border-radius:999px;font-weight:800;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.6);transition:transform .18s,box-shadow .18s}
.ohm-dock a:hover,.ohm-dock button:hover{transform:translateY(-3px);box-shadow:0 22px 50px -18px rgba(0,0,0,.7)}
.ohm-dock .call{background:var(--red);color:#fff;padding:15px 22px;font-size:15px}
.ohm-dock .call svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ohm-dock .sub{background:var(--card);color:var(--text);border:1px solid var(--hair);padding:13px 20px;font-size:14px}
.ohm-dock .lbl{white-space:nowrap}
@media(max-width:560px){.ohm-dock .call .lbl{display:none}.ohm-dock .call{padding:16px}}

/* subscribe / lead magnet modal */
.ohm-modal{position:fixed;inset:0;z-index:960;display:none;align-items:center;justify-content:center;
  padding:26px;background:rgba(6,10,18,.72);backdrop-filter:blur(6px)}
.ohm-modal.on{display:flex}
.ohm-modal .box{width:min(520px,100%);background:var(--card);border:1px solid var(--hair);
  border-radius:20px;padding:34px 32px;position:relative;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.ohm-modal .x{position:absolute;top:14px;right:16px;background:none;border:0;font-size:26px;
  color:var(--muted);cursor:pointer;line-height:1}
.ohm-modal h3{font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;margin-bottom:10px}
.ohm-modal p{color:var(--muted);font-size:15.5px}
.ohm-modal form{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.ohm-modal input{width:100%;padding:14px 15px;border:1px solid var(--hair);border-radius:11px;
  background:var(--surface);color:var(--text);font:inherit}
.ohm-modal input:focus{outline:none;border-color:var(--red)}
.ohm-modal .fine{margin-top:12px;font-size:12.5px;color:var(--muted)}
.ohm-modal .cover{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.ohm-modal .cover .bk{flex:0 0 auto;width:62px;height:82px;border-radius:5px;
  background:linear-gradient(150deg,var(--navy),var(--ink));border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.7);position:relative;overflow:hidden}
.ohm-modal .cover .bk::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--red)}

/* ---------- STATEMENT BAND ---------- */
/* Huge type with imagery dropped behind it. The image is deliberately pushed to
   the back: heavy dim, slight blur and a vignette, so it reads as texture and the
   words stay the loudest thing on screen. Set --img on the section to change the
   backdrop; with no image it still works on the gradient alone. */
.ohm-say{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:clamp(90px,14vh,170px) 0;isolation:isolate}
.ohm-say .bg{position:absolute;inset:-6%;z-index:0;background-image:var(--img);
  background-size:cover;background-position:var(--pos,center);
  opacity:var(--op,.16);filter:blur(1.5px) saturate(.75);transform:scale(1.06)}
.ohm-say .veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 12%,rgba(10,18,32,.62) 62%,var(--ink) 100%)}
.ohm-say .glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(640px 380px at 78% 12%,rgba(226,42,36,.20),transparent 62%)}
.ohm-say .w{position:relative;z-index:2;text-align:center}
.ohm-say .kick{font-size:12px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--red)}
.ohm-say h2{margin-top:20px;font-size:clamp(34px,6.4vw,104px);line-height:.9;
  text-transform:uppercase;letter-spacing:-.055em;text-wrap:balance;
  text-shadow:0 22px 70px rgba(0,0,0,.6)}
.ohm-say h2 .rd{color:var(--red)}
/* Statement type only works on statement-length copy. Anything past a handful of
   words gets the smaller ramp so it cannot run off the viewport. */
.ohm-say h2.long{font-size:clamp(30px,4.6vw,68px);line-height:.98;letter-spacing:-.04em}
.ohm-say p{margin:26px auto 0;max-width:54ch;color:#c6d2e4;font-size:clamp(16px,1.7vw,20px)}
.ohm-say .acts{margin-top:34px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){.ohm-say{padding:76px 0}}

/* ---------- ENGINE, FULL BLEED ---------- */
/* The first version sat small and centered with its caption stranded underneath, so
   two thirds of the viewport was empty navy. The diagram now fills the stage and the
   caption moves alongside it, which buys the nodes roughly double the radius. */
.mach-sticky{padding:0}
.mach-sticky .stage{max-width:none;width:100%;height:100%;display:grid;
  grid-template-columns:1fr clamp(360px,34vw,520px);align-items:center;gap:0}
.mach-svgwrap{position:relative;height:100%;display:flex;align-items:center;justify-content:center;padding:2vh 0}
.ohm-mach svg{height:100%;width:auto;max-width:100%}
.mach-ring{fill:none;stroke:rgba(255,255,255,.10);stroke-width:1.5}
.mach-ring.spin{transform-origin:center;animation:machSpin 60s linear infinite}
@keyframes machSpin{to{transform:rotate(360deg)}}
.mach-node .disc{fill:#16233c;stroke:rgba(255,255,255,.16);stroke-width:1.5;
  transition:fill .4s,stroke .4s,stroke-width .4s}
.mach-node .halo{fill:none;stroke:var(--red);stroke-width:2;opacity:0;transition:opacity .4s}
.mach-node.on .disc{fill:#22355a;stroke:var(--red);stroke-width:3}
.mach-node.on .halo{opacity:.5;animation:machHalo 1.9s ease-out infinite}
@keyframes machHalo{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.42);opacity:0}}
.mach-node text{fill:#c3d0e4;text-anchor:middle;font-weight:800;letter-spacing:-.01em;transition:fill .4s}
.mach-node .num{fill:#7d8ea9;font-size:15px;font-weight:800;letter-spacing:.18em}
.mach-node.on text{fill:#fff}
.mach-node.core .disc{fill:#1c2b49;stroke:rgba(226,42,36,.6);stroke-width:3}
.mach-node.core.on .disc{fill:#293a5e;stroke:var(--red);stroke-width:5}
.mach-flow{fill:none;stroke:rgba(226,42,36,.22);stroke-width:2.5;stroke-linecap:round}
.mach-pulse{fill:none;stroke:var(--red);stroke-width:4.5;stroke-linecap:round;opacity:0;
  filter:drop-shadow(0 0 8px rgba(226,42,36,.85))}
/* caption panel, beside the diagram */
.mach-side{position:relative;z-index:3;padding:0 clamp(24px,3.4vw,54px) 0 0}
.ohm-mach .mach-side .cap{text-align:left;min-height:auto;margin:0}
.mach-head{margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.14)}
.mach-head .eyebrow{color:var(--red)}
.mach-head h2{font-size:clamp(23px,2.3vw,34px);font-weight:900;letter-spacing:-.035em;line-height:1.06;margin:12px 0 0;color:#fff}
.mach-head p{font-size:14.5px;line-height:1.55;color:#9fb0c9;margin:12px 0 0;max-width:36ch}
@media(max-width:980px){.mach-head{margin-bottom:22px;padding-bottom:20px}.mach-head p{margin-left:auto;margin-right:auto}}
.mach-side .cap .kicker{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.mach-side .cap h3{font-size:clamp(24px,2.9vw,40px);letter-spacing:-.03em;line-height:1.03}
.ohm-mach .mach-side .cap p{color:#b9c6da;margin-top:14px;font-size:clamp(15px,1.15vw,17.5px);max-width:34ch;margin-left:0;margin-right:0}
.mach-side .stepsdots{display:flex;gap:7px;margin-top:30px}
.mach-side .stepsdots i{height:4px;flex:1;border-radius:4px;background:rgba(255,255,255,.20);overflow:hidden}
.mach-side .stepsdots i span{display:block;height:100%;width:0;background:var(--red);transition:width .3s linear}
.mach-cta{margin-top:40px;padding-top:0}
/* .ohm p{margin:0} is (0,1,1) and beat the bare class, so qualify it */
.ohm .mach-cta-l{font-size:14.5px;line-height:1.6;color:#9fb0c9;margin:0 0 34px;max-width:none}
.mach-cta-b{display:inline-block;background:var(--red);color:#fff;font-size:14px;font-weight:800;
  line-height:1.2;padding:17px 30px;border-radius:12px;text-decoration:none;
  transition:background .2s,transform .2s}
.mach-cta-b:hover{background:var(--red2);transform:translateY(-2px)}
.mach-cta-t{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.mach-cta-t span{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8ea0ba;
  border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:5px 10px}
@media(max-width:980px){
  .mach-side{padding:0 26px}
  .ohm-mach .mach-side .cap{text-align:center}
  .ohm-mach .mach-side .cap p{margin-top:16px;margin-left:auto;margin-right:auto}
  .mach-side .stepsdots{margin-top:30px;max-width:420px;margin-left:auto;margin-right:auto}
  .mach-cta{margin-top:40px;padding-top:0;max-width:460px;margin-left:auto;margin-right:auto;
    text-align:center}
  /* inline-block centers off the parent's text-align, immune to margin overrides */
  .ohm-mach .mach-cta-l{display:inline-block;margin:0 0 30px;max-width:46ch;text-align:center}
  .mach-cta-t{justify-content:center;margin-top:22px}
}
@media(max-width:1024px){
  .mach-sticky .stage{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:0}
  .mach-side{padding:0 26px 30px;text-align:center}
  .mach-side .cap{text-align:center}
  .mach-side .cap p{margin-left:auto;margin-right:auto}
  .ohm-mach svg{height:auto;width:100%}
}

/* ================= SCROLL STAGE ================= */
/* The machine used to autoplay on a timer while you scrolled past it. Pinning it
   makes the scroll wheel the controller: the section holds, the engine assembles
   under your thumb, and you cannot leave until it has finished explaining itself. */
.ohm-mach{clip-path:none;overflow:visible}
.mach-pin{position:relative;height:300vh}
.mach-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:60px 0 40px}
.mach-sticky .stage{width:100%;max-width:1460px;padding:0 clamp(20px,4vw,64px)}
.mach-prog{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  display:flex;gap:9px;z-index:5}
.mach-prog span{width:30px;height:3px;border-radius:3px;background:rgba(255,255,255,.18);
  transition:background .35s,transform .35s}
.mach-prog span.on{background:var(--red);transform:scaleY(1.9)}
.ohm-mach .cap{transition:opacity .3s}
.ohm-mach .legend{display:none}
@media(max-width:980px){
  .mach-pin{height:auto}
  .mach-sticky{position:static;height:auto;padding:64px 0 72px}
  .mach-prog{display:none}
  .ohm-mach .legend{display:flex}
}

/* ================= KINETIC TYPE ================= */
/* Headlines arrive a word at a time instead of the whole block fading, and the
   hero breaks its container so the type reads as design rather than as a label. */
.kin{display:inline-block;overflow:hidden;vertical-align:top}
.kin > i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .82s cubic-bezier(.16,.84,.28,1) var(--kd,0ms)}
.kin.in > i{transform:none}
.ohm-hero h1{letter-spacing:-.055em}
@media(min-width:1100px){.ohm-hero h1{margin-left:-6px}}

/* ================= MAGNETIC CTA ================= */
.ohm .btn{will-change:transform}
.ohm .btn.mag{transition:background .16s,box-shadow .16s,transform .18s cubic-bezier(.2,.8,.3,1)}
@media(prefers-reduced-motion:reduce){
  .kin > i{transform:none;transition:none}
  .mach-pin{height:auto}.mach-sticky{position:static;height:auto}
}

/* ================= DESIGN LAYER ================= */
/* The page was a stack of full-bleed rectangles: every section met the next at a
   hard horizontal seam, nothing overlapped, and nothing moved on the way in. These
   add depth (glow, texture, angle) and staggered motion without touching structure. */

/* -- atmospheric glow behind dark sections -- */
.ohm-hero::before,.ohm-svc::before,.ohm-mach::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 78% 8%, rgba(226,42,36,.20), transparent 62%),
    radial-gradient(620px 460px at 12% 92%, rgba(59,130,246,.16), transparent 66%);
}
.ohm-svc{position:relative;overflow:hidden}
/* No overflow on .ohm-mach: it contains the sticky scroll track, and any overflow
   value other than visible makes it a scroll container, which silently disables
   position:sticky and leaves 420vh of blank page where the engine should pin. */
.ohm-mach{position:relative}

/* -- fine grid texture, dark sections only -- */
.ohm-hero::after,.ohm-mach::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
          mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
}

/* -- angled seams so sections interlock instead of stacking -- */
.ohm-svc{margin-top:-1px;clip-path:polygon(0% 0px,0.0% 16.5px,0.531% 16.7px,1.062% 16.6px,1.594% 19.0px,2.125% 18.1px,2.656% 22.4px,3.188% 25.1px,3.719% 26.5px,4.25% 26.5px,4.781% 28.8px,5.313% 31.7px,5.844% 36.1px,6.375% 38.1px,6.906% 41.7px,7.438% 48.2px,7.969% 49.2px,8.5% 53.8px,9.031% 54.5px,9.563% 57.2px,10.094% 61.4px,10.625% 64.5px,11.156% 66.5px,11.688% 64.8px,12.219% 68.9px,12.75% 70.3px,13.281% 72.7px,13.812% 71.9px,14.344% 75.0px,14.875% 76.9px,15.406% 76.7px,15.937% 79.8px,16.469% 76.1px,17.0% 79.0px,17.531% 78.9px,18.063% 80.0px,18.594% 76.2px,19.125% 74.6px,19.656% 73.3px,20.188% 70.6px,20.719% 72.8px,21.25% 72.3px,21.781% 72.2px,22.312% 73.8px,22.844% 71.0px,23.375% 69.5px,23.906% 69.0px,24.438% 69.0px,24.969% 69.1px,25.5% 67.9px,26.031% 67.0px,26.562% 66.7px,27.094% 64.9px,27.625% 63.4px,28.156% 65.6px,28.688% 65.6px,29.219% 65.3px,29.75% 64.2px,30.281% 64.8px,30.812% 63.3px,31.344% 65.3px,31.875% 69.0px,32.406% 69.5px,32.938% 72.6px,33.469% 78.5px,34.0% 81.0px,34.531% 85.0px,35.063% 86.9px,35.594% 87.6px,36.125% 89.4px,36.656% 90.9px,37.188% 93.3px,37.719% 94.1px,38.25% 95.0px,38.781% 98.7px,39.313% 99.5px,39.844% 98.5px,40.375% 100.7px,40.906% 104.4px,41.438% 106.1px,41.969% 110.9px,42.5% 115.5px,43.031% 117.8px,43.563% 117.6px,44.094% 117.4px,44.625% 120.8px,45.156% 123.2px,45.688% 126.5px,46.219% 131.2px,46.75% 132.6px,47.281% 133.3px,47.812% 134.5px,48.344% 132.1px,48.875% 130.8px,49.406% 131.2px,49.938% 130.8px,50.469% 131.4px,51.0% 135.1px,51.531% 132.8px,52.062% 133.7px,52.594% 133.7px,53.125% 136.0px,53.656% 137.0px,54.188% 136.0px,54.719% 136.6px,55.25% 135.7px,55.781% 133.8px,56.312% 129.6px,56.844% 126.3px,57.375% 126.4px,57.906% 127.3px,58.438% 127.5px,58.969% 125.8px,59.5% 127.1px,60.031% 124.1px,60.562% 123.4px,61.094% 120.8px,61.625% 123.0px,62.156% 125.5px,62.687% 125.5px,63.219% 128.4px,63.75% 129.6px,64.281% 130.8px,64.812% 134.1px,65.344% 139.3px,65.875% 143.7px,66.406% 145.5px,66.938% 146.8px,67.469% 146.4px,68.0% 145.6px,68.5% 147.6px,69.0% 146.7px,69.5% 146.5px,70.0% 143.5px,70.5% 140.9px,71.0% 138.5px,71.5% 142.5px,72.0% 142.7px,72.5% 140.8px,73.0% 139.1px,73.5% 140.2px,74.0% 139.3px,74.5% 136.5px,75.0% 136.3px,75.5% 139.2px,76.0% 142.7px,76.5% 142.0px,77.0% 139.8px,77.5% 139.8px,78.0% 137.6px,78.5% 137.6px,79.0% 137.4px,79.5% 134.9px,80.0% 134.6px,80.5% 136.8px,81.0% 137.8px,81.5% 135.5px,82.0% 134.6px,82.5% 138.5px,83.0% 142.5px,83.5% 144.1px,84.0% 145.9px,84.5% 150.8px,85.0% 153.8px,85.5% 159.4px,86.0% 158.6px,86.5% 160.4px,87.0% 162.8px,87.5% 164.1px,88.0% 168.1px,88.5% 170.0px,89.0% 169.0px,89.5% 168.3px,90.0% 167.1px,90.5% 169.3px,91.0% 169.5px,91.5% 172.6px,92.0% 172.8px,92.5% 174.7px,93.0% 173.9px,93.5% 176.8px,94.0% 176.5px,94.5% 179.9px,95.0% 181.5px,95.5% 180.5px,96.0% 183.3px,96.5% 185.9px,97.0% 190.9px,97.5% 191.0px,98.0% 194.5px,98.5% 195.8px,99.0% 199.2px,99.5% 201.4px,100.0% 200px,100% 100%,0% 100%)}
.ohm-svc>.w{padding-top:232px}
.ohm-mach{clip-path:polygon(0% 0px,0.0% 186.0px,0.5% 182.7px,1.0% 181.1px,1.5% 177.5px,2.0% 176.2px,2.5% 172.6px,3.0% 169.8px,3.5% 170.8px,4.0% 167.2px,4.5% 166.7px,5.0% 164.5px,5.5% 166.7px,6.0% 167.0px,6.5% 166.5px,7.0% 164.3px,7.5% 165.7px,8.0% 167.4px,8.5% 162.4px,9.0% 158.9px,9.5% 160.2px,10.0% 160.6px,10.5% 157.3px,11.0% 156.0px,11.5% 156.7px,12.0% 156.8px,12.5% 155.6px,13.0% 154.9px,13.5% 152.9px,14.0% 154.2px,14.5% 152.7px,15.0% 154.4px,15.5% 154.0px,16.0% 154.9px,16.5% 154.0px,17.0% 150.5px,17.5% 150.7px,18.0% 148.4px,18.5% 150.3px,19.0% 149.6px,19.5% 150.3px,20.0% 149.8px,20.5% 145.1px,21.0% 139.6px,21.5% 136.5px,22.0% 133.3px,22.5% 129.0px,23.0% 127.6px,23.5% 126.6px,24.0% 125.8px,24.5% 128.7px,25.0% 133.3px,25.5% 136.2px,26.0% 135.7px,26.5% 136.0px,27.0% 136.2px,27.5% 132.6px,28.0% 136.1px,28.5% 135.3px,29.0% 133.5px,29.5% 129.2px,30.0% 130.2px,30.5% 129.9px,31.0% 131.4px,31.5% 130.9px,32.0% 131.6px,32.531% 127.5px,33.063% 122.1px,33.594% 120.8px,34.125% 117.6px,34.656% 117.5px,35.188% 117.4px,35.719% 113.9px,36.25% 112.9px,36.781% 114.3px,37.313% 114.5px,37.844% 115.2px,38.375% 115.8px,38.906% 114.4px,39.438% 112.6px,39.969% 111.6px,40.5% 112.7px,41.031% 113.1px,41.562% 112.8px,42.094% 114.5px,42.625% 113.0px,43.156% 111.2px,43.688% 108.1px,44.219% 108.9px,44.75% 107.4px,45.281% 106.9px,45.812% 104.7px,46.344% 108.6px,46.875% 109.9px,47.406% 111.9px,47.938% 115.9px,48.469% 115.2px,49.0% 116.7px,49.531% 114.6px,50.062% 112.1px,50.594% 112.9px,51.125% 116.0px,51.656% 113.2px,52.188% 112.3px,52.719% 108.4px,53.25% 104.7px,53.781% 99.5px,54.312% 97.2px,54.844% 94.9px,55.375% 95.2px,55.906% 91.2px,56.437% 89.3px,56.969% 80.1px,57.5% 77.3px,58.031% 77.8px,58.562% 78.0px,59.094% 72.9px,59.625% 66.0px,60.156% 65.6px,60.687% 66.9px,61.219% 67.5px,61.75% 65.4px,62.281% 67.5px,62.812% 66.4px,63.344% 68.5px,63.875% 72.1px,64.406% 73.7px,64.938% 72.6px,65.469% 72.6px,66.0% 70.8px,66.531% 68.8px,67.062% 64.8px,67.594% 61.7px,68.125% 61.2px,68.656% 58.2px,69.188% 54.3px,69.719% 54.7px,70.25% 52.3px,70.781% 52.5px,71.313% 51.0px,71.844% 54.4px,72.375% 55.2px,72.906% 55.2px,73.438% 55.0px,73.969% 57.1px,74.5% 52.6px,75.031% 56.0px,75.563% 55.9px,76.094% 55.6px,76.625% 48.2px,77.156% 46.5px,77.688% 43.8px,78.219% 37.4px,78.75% 36.1px,79.281% 32.1px,79.813% 30.2px,80.344% 27.5px,80.875% 27.2px,81.406% 25.8px,81.938% 25.7px,82.469% 22.1px,83.0% 18.6px,83.531% 17.5px,84.062% 17.9px,84.594% 13.9px,85.125% 12.6px,85.656% 10px,86.188% 10px,86.719% 10px,87.25% 10px,87.781% 10px,88.312% 10px,88.844% 10px,89.375% 10px,89.906% 10px,90.438% 10px,90.969% 10px,91.5% 10px,92.031% 10px,92.562% 10px,93.094% 10px,93.625% 10px,94.156% 10px,94.688% 10px,95.219% 10px,95.75% 10px,96.281% 10.1px,96.812% 10px,97.344% 10.9px,97.875% 12.3px,98.406% 11.2px,98.938% 12.7px,99.469% 13.3px,100.0% 15.6px,100% calc(100% - 34px),0% 100%)}
.ohm-trust{padding-top:110px}

/* -- the section is torn open onto an architectural drawing underneath -- */
.seam{position:relative;height:0;z-index:0}
.seam .bp{position:absolute;left:0;right:0;top:-1px;height:248px;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(8,16,32,.40),rgba(8,16,32,.58)),
    var(--bp),
    linear-gradient(180deg,#08152c 0%,#0a1c3a 58%,#071026 100%);
  background-size:auto,100% auto,auto;
  background-position:0 0,center 0,0 0;
  background-repeat:no-repeat,no-repeat,no-repeat}
.seam2 .bp,.svc-proof-seam .bp{background-position:0 0,center 1px,0 0}
.seam .bp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
  background:linear-gradient(180deg,transparent,rgba(4,10,20,.92))}
.seam .rip{position:absolute;left:0;right:0;top:-1px;height:248px;width:100%;display:block;pointer-events:none;z-index:3}
.ohm-svc,.ohm-mach{z-index:1}
@media(max-width:700px){.seam{display:none}}
.ohm-svc::before{
  background:
    linear-gradient(180deg,rgba(19,35,63,.80) 0,rgba(19,35,63,.90) 420px,rgba(19,35,63,.99) 880px,rgba(19,35,63,1) 1100px),
    var(--bp),
    radial-gradient(760px 420px at 78% 8%, rgba(226,42,36,.20), transparent 62%),
    radial-gradient(620px 460px at 12% 92%, rgba(59,130,246,.16), transparent 66%);
  background-size:auto,100% auto,auto,auto;
  background-position:0 0,center 0,0 0,0 0;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat}

/* -- service pages tear open onto the same blueprint as the homepage -- */
.ohm .svc-proof{z-index:1}
.ohm section.svc-proof{clip-path:polygon(0% 0px,0.0% 16.5px,0.531% 16.7px,1.062% 16.6px,1.594% 19.0px,2.125% 18.1px,2.656% 22.4px,3.188% 25.1px,3.719% 26.5px,4.25% 26.5px,4.781% 28.8px,5.313% 31.7px,5.844% 36.1px,6.375% 38.1px,6.906% 41.7px,7.438% 48.2px,7.969% 49.2px,8.5% 53.8px,9.031% 54.5px,9.563% 57.2px,10.094% 61.4px,10.625% 64.5px,11.156% 66.5px,11.688% 64.8px,12.219% 68.9px,12.75% 70.3px,13.281% 72.7px,13.812% 71.9px,14.344% 75.0px,14.875% 76.9px,15.406% 76.7px,15.937% 79.8px,16.469% 76.1px,17.0% 79.0px,17.531% 78.9px,18.063% 80.0px,18.594% 76.2px,19.125% 74.6px,19.656% 73.3px,20.188% 70.6px,20.719% 72.8px,21.25% 72.3px,21.781% 72.2px,22.312% 73.8px,22.844% 71.0px,23.375% 69.5px,23.906% 69.0px,24.438% 69.0px,24.969% 69.1px,25.5% 67.9px,26.031% 67.0px,26.562% 66.7px,27.094% 64.9px,27.625% 63.4px,28.156% 65.6px,28.688% 65.6px,29.219% 65.3px,29.75% 64.2px,30.281% 64.8px,30.812% 63.3px,31.344% 65.3px,31.875% 69.0px,32.406% 69.5px,32.938% 72.6px,33.469% 78.5px,34.0% 81.0px,34.531% 85.0px,35.063% 86.9px,35.594% 87.6px,36.125% 89.4px,36.656% 90.9px,37.188% 93.3px,37.719% 94.1px,38.25% 95.0px,38.781% 98.7px,39.313% 99.5px,39.844% 98.5px,40.375% 100.7px,40.906% 104.4px,41.438% 106.1px,41.969% 110.9px,42.5% 115.5px,43.031% 117.8px,43.563% 117.6px,44.094% 117.4px,44.625% 120.8px,45.156% 123.2px,45.688% 126.5px,46.219% 131.2px,46.75% 132.6px,47.281% 133.3px,47.812% 134.5px,48.344% 132.1px,48.875% 130.8px,49.406% 131.2px,49.938% 130.8px,50.469% 131.4px,51.0% 135.1px,51.531% 132.8px,52.062% 133.7px,52.594% 133.7px,53.125% 136.0px,53.656% 137.0px,54.188% 136.0px,54.719% 136.6px,55.25% 135.7px,55.781% 133.8px,56.312% 129.6px,56.844% 126.3px,57.375% 126.4px,57.906% 127.3px,58.438% 127.5px,58.969% 125.8px,59.5% 127.1px,60.031% 124.1px,60.562% 123.4px,61.094% 120.8px,61.625% 123.0px,62.156% 125.5px,62.687% 125.5px,63.219% 128.4px,63.75% 129.6px,64.281% 130.8px,64.812% 134.1px,65.344% 139.3px,65.875% 143.7px,66.406% 145.5px,66.938% 146.8px,67.469% 146.4px,68.0% 145.6px,68.5% 147.6px,69.0% 146.7px,69.5% 146.5px,70.0% 143.5px,70.5% 140.9px,71.0% 138.5px,71.5% 142.5px,72.0% 142.7px,72.5% 140.8px,73.0% 139.1px,73.5% 140.2px,74.0% 139.3px,74.5% 136.5px,75.0% 136.3px,75.5% 139.2px,76.0% 142.7px,76.5% 142.0px,77.0% 139.8px,77.5% 139.8px,78.0% 137.6px,78.5% 137.6px,79.0% 137.4px,79.5% 134.9px,80.0% 134.6px,80.5% 136.8px,81.0% 137.8px,81.5% 135.5px,82.0% 134.6px,82.5% 138.5px,83.0% 142.5px,83.5% 144.1px,84.0% 145.9px,84.5% 150.8px,85.0% 153.8px,85.5% 159.4px,86.0% 158.6px,86.5% 160.4px,87.0% 162.8px,87.5% 164.1px,88.0% 168.1px,88.5% 170.0px,89.0% 169.0px,89.5% 168.3px,90.0% 167.1px,90.5% 169.3px,91.0% 169.5px,91.5% 172.6px,92.0% 172.8px,92.5% 174.7px,93.0% 173.9px,93.5% 176.8px,94.0% 176.5px,94.5% 179.9px,95.0% 181.5px,95.5% 180.5px,96.0% 183.3px,96.5% 185.9px,97.0% 190.9px,97.5% 191.0px,98.0% 194.5px,98.5% 195.8px,99.0% 199.2px,99.5% 201.4px,100.0% 200px,100% 100%,0% 100%);padding-top:232px}
.ohm .svc-proof::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(19,35,63,.82) 0,rgba(19,35,63,.90) 420px,rgba(19,35,63,.99) 880px,rgba(19,35,63,1) 1100px),
    var(--bp);
  background-size:auto,100% auto;
  background-position:0 0,center 0;
  background-repeat:no-repeat,no-repeat}
.ohm .svc-proof>*{position:relative;z-index:1}
@media(max-width:700px){.ohm section.svc-proof{clip-path:none;padding-top:96px}}

/* -- oversized ghosted section numerals -- */
.ohm section{position:relative}
.ohm .shead{position:relative}
.ohm .shead::before{
  content:attr(data-n);position:absolute;right:-4px;top:-64px;
  font-size:clamp(90px,15vw,190px);font-weight:900;line-height:1;
  letter-spacing:-.06em;color:currentColor;opacity:.05;pointer-events:none;z-index:0;
}
.ohm .shead>*{position:relative;z-index:1}

/* -- staggered entrance, driven by --d set in JS -- */
.ohm .reveal{transition-delay:var(--d,0ms)}
.ohm .rise{opacity:0;transform:translateY(30px) scale(.985);
  transition:opacity .72s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .72s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.ohm .rise.in{opacity:1;transform:none}

/* -- cards gain depth and a light sweep on hover -- */
.ohm-card{position:relative;isolation:isolate}
.ohm-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 46%);
  opacity:0;transition:opacity .3s}
.ohm-card:hover::after{opacity:1}
.ohm-card:hover{box-shadow:0 26px 60px -30px rgba(0,0,0,.75)}

/* -- accent rule under section headings -- */

/* -- banner sub-line -- */
.ohm-line .t .sm{display:block;font-size:clamp(14px,1.5vw,18px);font-weight:600;
  text-transform:none;letter-spacing:-.01em;opacity:.9;margin-top:12px;line-height:1.5}

@media(prefers-reduced-motion:reduce){
  .ohm .rise{transition:none;opacity:1;transform:none}
  .ohm .reveal{transition:none}
}
@media(max-width:700px){
  .ohm-svc,.ohm-mach{clip-path:none}
  .ohm-trust{margin-top:0;padding-top:96px}
  .ohm .shead::before{display:none}
}

/* ---------- FIVE LAYERS (SEO / AEO / GEO / AIO / SXO) ---------- */
.ohm-five{background:var(--surface)}
.ohm-five .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.ohm-five .tabs button{flex:1 1 165px;text-align:left;background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:15px 17px;cursor:pointer;font:inherit;color:var(--text);transition:.18s;position:relative}
.ohm-five .tabs button:hover{border-color:#b9c4d6;transform:translateY(-2px)}
.ohm-five .tabs button.on{border-color:var(--lyr);background:color-mix(in srgb,var(--lyr) 9%,var(--card));box-shadow:0 10px 26px -16px var(--lyr)}
.ohm-five .tabs .ab{font-size:20px;font-weight:900;letter-spacing:-.03em;color:var(--lyr);line-height:1}
.ohm-five .tabs .fl{display:block;font-size:11.5px;color:var(--muted);margin-top:5px;font-weight:600;line-height:1.35}
.ohm-five .panel{background:var(--card);border:1px solid var(--hair);border-left:4px solid var(--lyr);border-radius:0 16px 16px 0;padding:30px 32px}
.ohm-five .panel .lbl{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--lyr)}
.ohm-five .panel h3{font-size:clamp(21px,2.4vw,27px);margin:10px 0 12px;letter-spacing:-.025em}
.ohm-five .panel .def{font-size:17px;color:var(--text);line-height:1.55;max-width:62ch}
.ohm-five .panel .ex{margin-top:20px;padding:16px 18px;background:var(--surface);border-radius:12px;font-size:15.5px;color:var(--muted);line-height:1.5}
.ohm-five .panel .ex b{color:var(--text)}
.ohm-five .panel ul{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ohm-five .panel li{display:flex;gap:10px;font-size:15px;line-height:1.45;color:var(--text)}
.ohm-five .panel li i{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--lyr);margin-top:7px}
@media(max-width:760px){.ohm-five .panel ul{grid-template-columns:1fr}.ohm-five .tabs button{flex:1 1 46%}}

/* ---------- THE MACHINE (animated engine diagram) ---------- */
.ohm-mach{background:var(--ink);color:#fff;isolation:isolate}
.ohm section.ohm-mach{padding-top:214px}
.ohm-mach::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,18,32,.80) 0,rgba(10,18,32,.88) 420px,rgba(10,18,32,.97) 880px,rgba(10,18,32,1) 1100px),
    var(--bp);
  background-size:auto,100% auto;
  background-position:0 0,center 0;
  background-repeat:no-repeat,no-repeat}
.ohm-mach>*{position:relative;z-index:1}
.ohm-mach .shead h2{color:#fff}.ohm-mach .shead p{color:#bcc9dd}
.ohm-mach .stage{position:relative;max-width:1460px;margin:0 auto}
.ohm-mach svg{width:100%;height:auto;display:block;overflow:visible}
.mach-ring{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.5}
.mach-node .disc{fill:#16233c;stroke:rgba(255,255,255,.16);stroke-width:1.5;transition:stroke .35s,fill .35s}
.mach-node.on .disc{fill:#1d2f4f;stroke:var(--red);stroke-width:2.5}
.mach-node.core .disc{fill:#1a2743;stroke:rgba(226,42,36,.55);stroke-width:2.5}
.mach-node.core.on .disc{fill:#26304a;stroke:var(--red);stroke-width:3.5}
.mach-node text{fill:#dbe4f2;font-size:13px;font-weight:700;text-anchor:middle;letter-spacing:-.01em}
.mach-node .num{fill:#8b9bb8;font-size:10.5px;font-weight:800;letter-spacing:.14em}
.mach-node.on text{fill:#fff}
.mach-node.core text{fill:#fff;font-size:15px}
.mach-flow{fill:none;stroke:rgba(226,42,36,.30);stroke-width:2;stroke-linecap:round}
.mach-pulse{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:14 300;opacity:0}
.ohm-mach .cap{margin-top:38px;text-align:center;min-height:62px}
.ohm-mach .cap h3{font-size:clamp(20px,2.4vw,27px);letter-spacing:-.02em}
.ohm-mach .cap p{color:#b9c6da;margin-top:9px;font-size:16px;max-width:56ch;margin-left:auto;margin-right:auto}
.ohm-mach .legend{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.ohm-mach .legend button{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#c6d2e4;font:inherit;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:20px;cursor:pointer;transition:.2s}
.ohm-mach .legend button:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.ohm-mach .legend button.on{background:var(--red);border-color:var(--red);color:#fff}
@media(prefers-reduced-motion:reduce){.mach-pulse{display:none}}
@media(max-width:640px){.mach-node text{font-size:11px}.mach-node.core text{font-size:13px}}

/* ---------- TRUST / QUALIFY ---------- */
.ohm-trust{background:var(--surface)}
.ohm-trust .cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.ohm-trust ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ohm-trust li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.5}
.ohm-trust li .tick{flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--red);color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;margin-top:2px}
.ohm-trust li.no .tick{background:#8a93a3}
.ohm-trust h3{font-size:22px;margin-bottom:20px;letter-spacing:-.02em}
.ohm-trust .note{margin-top:34px;padding:22px 24px;border-left:3px solid var(--red);background:var(--card);border-radius:0 12px 12px 0;font-size:16px;color:var(--muted)}
.ohm-trust .note b{color:var(--text)}
@media(max-width:820px){.ohm-trust .cols{grid-template-columns:1fr;gap:36px}}

/* ---------- ENGINE / SERVICES ---------- */
.ohm-svc{background:var(--navy);color:#fff}
.ohm-svc .shead h2{color:#fff}.ohm-svc .shead p{color:#bcc9dd}
.ohm-svc .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ohm-card{display:block;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:28px;text-decoration:none;color:#fff;transition:.2s;position:relative;overflow:hidden}
.ohm-card:hover{background:rgba(255,255,255,.07);transform:translateY(-4px);border-color:rgba(226,42,36,.5)}
.ohm-card .role{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--red)}
.ohm-card.ai .role{color:var(--ai)}
.ohm-card h3{font-size:26px;margin-top:12px;letter-spacing:-.03em}
.ohm-card p{color:#c1cddf;font-size:14.5px;margin-top:10px;line-height:1.5}
.ohm-card .cico{width:30px;height:30px;stroke:var(--red);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:15px}
.ohm-card.ai .cico{stroke:var(--ai)}
.ohm-card .go{margin-top:18px;font-size:13.5px;font-weight:800;color:#fff;display:inline-flex;gap:7px;transition:gap .2s}
.ohm-card:hover .go{gap:13px}
.ohm-card .nw{position:absolute;top:20px;right:20px;font-size:9px;font-weight:800;letter-spacing:.12em;background:var(--ai);color:#fff;padding:4px 8px;border-radius:20px}
@media(max-width:900px){.ohm-svc .cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ohm-svc .cards{grid-template-columns:1fr}}

/* ---------- AI SEARCH FAQ ---------- */
.ohm-faq{background:var(--surface)}
.ohm-faq .fwrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,74px);align-items:start}
.ohm-faq .fside{position:sticky;top:110px}
.ohm-faq .fside h2{font-size:clamp(30px,3.5vw,46px);font-weight:900;letter-spacing:-.035em;line-height:1.05;margin:14px 0 0}
.ohm-faq .fside p{color:var(--muted);font-size:16px;line-height:1.6;margin-top:16px;max-width:38ch}
.ohm-faq .fside .btn{display:inline-block;margin-top:24px;background:var(--ai);color:#fff;font-size:14.5px;font-weight:800;
  padding:14px 24px;border-radius:12px;text-decoration:none;transition:background .2s,transform .2s}
.ohm-faq .fside .btn:hover{background:var(--ai2);transform:translateY(-2px)}
.ohm-faq .flist{border-top:1px solid var(--hair)}
.ohm-faq details{border-bottom:1px solid var(--hair)}
.ohm-faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:clamp(16.5px,1.5vw,19.5px);font-weight:800;letter-spacing:-.01em;color:var(--text);line-height:1.35;
  transition:color .2s}
.ohm-faq summary::-webkit-details-marker{display:none}
.ohm-faq summary:hover{color:var(--ai)}
.ohm-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;margin-top:-7px;
  border-right:2.2px solid var(--muted);border-bottom:2.2px solid var(--muted);
  transform:rotate(45deg);transform-origin:center;transition:transform .3s,border-color .2s}
.ohm-faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--ai)}
.ohm-faq details[open] summary{color:var(--ai)}
.ohm-faq .ans{padding:0 44px 26px 0;margin:0;color:var(--muted);font-size:16px;line-height:1.68;max-width:62ch}
.ohm-faq.agency{background:var(--ground);border-top:1px solid var(--hair)}
.ohm-faq.agency summary:hover,.ohm-faq.agency details[open] summary{color:var(--red)}
.ohm-faq.agency details[open] summary::after{border-color:var(--red)}
.ohm-faq.agency .fside .btn{background:var(--red)}
.ohm-faq.agency .fside .btn:hover{background:var(--red2)}
@media(max-width:900px){
  .ohm-faq .fwrap{grid-template-columns:1fr;gap:30px}
  .ohm-faq .fside{position:static}
}

/* ---------- FEATURE CAROUSEL (replaces the flat includes grid) ---------- */
.fcar{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:0;
  border:1px solid var(--hair);border-radius:28px;overflow:hidden;min-height:520px;background:var(--card)}
.frail{position:relative;background:var(--navy);padding:34px 0;overflow:hidden;
  display:flex;align-items:center}
.frail::before,.frail::after{content:"";position:absolute;left:0;right:0;height:72px;z-index:2;pointer-events:none}
.frail::before{top:0;background:linear-gradient(180deg,var(--navy),transparent)}
.frail::after{bottom:0;background:linear-gradient(0deg,var(--navy),transparent)}
.frail-in{width:100%;display:flex;flex-direction:column;gap:10px;padding:0 26px;
  transition:transform .62s cubic-bezier(.25,1,.5,1)}
.fchip{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;letter-spacing:.01em;line-height:1.25;
  padding:14px 18px;border-radius:100px;border:1px solid rgba(255,255,255,.18);
  background:transparent;color:rgba(255,255,255,.56);
  transition:background .45s,color .45s,border-color .45s,opacity .45s}
.fchip:hover{color:#fff;border-color:rgba(255,255,255,.42)}
.fchip .fdot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;opacity:.6}
.fchip.is-on{background:#fff;color:var(--navy);border-color:#fff}
.fcar.ai .fchip.is-on{color:var(--ai2)}
.fchip.is-on .fdot{background:var(--red);opacity:1}
.fcar.ai .fchip.is-on .fdot{background:var(--ai)}

.fstage{position:relative;background:var(--surface);display:flex;align-items:center;justify-content:center;
  padding:44px 32px;overflow:hidden;border-left:1px solid var(--hair)}
.fcard{position:absolute;width:min(360px,80%);aspect-ratio:4/5;border-radius:26px;overflow:hidden;
  background:linear-gradient(165deg,#1a2e4f,#0f1c33);border:6px solid var(--card);
  box-shadow:0 34px 70px -38px rgba(10,18,32,.6);
  display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;transform:scale(.7);pointer-events:none;
  transition:transform .62s cubic-bezier(.25,1,.5,1),opacity .5s,filter .5s}
.fcard::before{content:"";position:absolute;inset:0;opacity:.5;
  background:var(--bp);background-size:170% auto;background-position:center 12%}
.fcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 32%,rgba(8,14,26,.88))}
.fcard.is-prev{opacity:.42;transform:translateX(-88px) scale(.85) rotate(-3deg);filter:grayscale(1) blur(2px)}
.fcard.is-next{opacity:.42;transform:translateX(88px) scale(.85) rotate(3deg);filter:grayscale(1) blur(2px)}
.fcard.is-active{opacity:1;transform:none;filter:none;pointer-events:auto;z-index:3}
.fnum{position:absolute;top:14px;right:20px;font-size:86px;font-weight:900;line-height:1;
  letter-spacing:-.06em;color:rgba(255,255,255,.09);z-index:1}
.fbody{position:relative;z-index:2;padding:28px}
.ftag{display:inline-block;background:var(--card);color:var(--text);border:1px solid var(--hair);
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 13px;border-radius:100px;margin-bottom:14px}
.fbody p{margin:0;color:#fff;font-size:19px;line-height:1.32;font-weight:800;letter-spacing:-.02em}
@media(max-width:900px){
  .fcar{grid-template-columns:1fr;min-height:0}
  .frail{padding:26px 0;max-height:300px}
  .fstage{border-left:0;border-top:1px solid var(--hair);padding:34px 20px;min-height:430px}
  .fcard{width:min(300px,84%)}
}
@media(prefers-reduced-motion:reduce){.frail-in,.fcard{transition:none}}

/* ---------- ENGINE STACK (order diagram beside the services heading) ---------- */
.svc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(30px,5vw,72px);
  align-items:center;margin-bottom:52px}
.svc-head .shead{margin-bottom:0}
.estack{position:relative;padding-left:46px}
.estack-axis{position:absolute;left:14px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,
  rgba(255,255,255,.30),rgba(226,42,36,.85))}
.estack-axis::before{content:"";position:absolute;left:-4px;top:-2px;border-left:5px solid transparent;
  border-right:5px solid transparent;border-bottom:8px solid rgba(255,255,255,.55)}
.estack-cap{position:absolute;left:-6px;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.42);white-space:nowrap}
.etier{position:relative;display:flex;align-items:center;gap:14px;padding:15px 20px;border-radius:13px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);margin-bottom:9px;
  transition:border-color .3s,background .3s,transform .3s}
.etier:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.09);transform:translateX(3px)}
.etier:last-child{margin-bottom:0;border-color:rgba(226,42,36,.55);background:rgba(226,42,36,.13)}
.etier .en{font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.45);
  font-variant-numeric:tabular-nums;flex:none;min-width:34px}
.etier:last-child .en{color:var(--red)}
.etier .et{font-size:15px;font-weight:800;letter-spacing:-.01em;color:#fff;flex:1;line-height:1.25}
.etier .eb{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);flex:none}
.etier:last-child .eb{color:var(--red)}
/* the base tier reads as the widest, so the stack sits on it */
.etier.base{margin-left:-14px;margin-right:-14px}
.etier.t4{margin-left:16px}
.etier.t5{margin-left:26px}
@media(max-width:980px){
  .svc-head{grid-template-columns:1fr;gap:34px}
  .estack{padding-left:38px}
  .etier.base,.etier.t4,.etier.t5{margin-left:0;margin-right:0}
}

/* ---------- CONTACT ---------- */
.ohm-book{background:var(--surface)}
.book-wrap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,4vw,58px);align-items:start}
.book-side h2{font-size:clamp(28px,3.2vw,42px);font-weight:900;letter-spacing:-.035em;line-height:1.06;margin:14px 0 0}
.book-side p{color:var(--muted);font-size:16px;line-height:1.62;margin-top:16px;max-width:40ch}
.book-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.book-list li{padding-left:32px;position:relative;font-size:15.5px;font-weight:700;line-height:1.4}
.book-list li::before{content:"\2713";position:absolute;left:0;top:0;color:#fff;background:var(--red);
  width:21px;height:21px;border-radius:6px;font-size:12px;font-weight:900;
  display:flex;align-items:center;justify-content:center}
.book-embed{background:var(--card);border:1px solid var(--hair);border-radius:22px;overflow:hidden;
  min-height:680px;position:relative;display:flex;flex-direction:column}
.book-embed iframe{width:100%;flex:1;min-height:660px;border:0;display:block}
/* The embed is a third-party frame, so a strict CSP or a tracker blocker can stop it painting.
   The panel is therefore the default state and the frame only replaces it once it proves it loaded.
   That way nobody ever looks at an empty 660px box. */
.book-embed{min-height:0}
.book-embed iframe{display:none}
.book-embed.live{min-height:680px}
.book-embed.live iframe{display:block}
.book-embed.live .book-panel{display:none}
.book-panel{padding:clamp(26px,3.2vw,40px)}
.bp-top{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.bp-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;flex:none;
  box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.ohm .bp-top p{margin:0;font-size:13.5px;font-weight:800;color:var(--ink)}
.ohm .bp-tag{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.ohm .book-panel h4{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:900;letter-spacing:-.035em;
  line-height:1.1;color:var(--ink);text-wrap:balance}
.ohm .bp-sub{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:40ch}
.bp-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.bp-list li{background:var(--card);padding:13px 16px;display:flex;align-items:baseline;gap:12px}
.ohm .bp-list b{font-size:13.5px;font-weight:900;color:var(--ink);min-width:78px;letter-spacing:-.01em}
.ohm .bp-list span{font-size:13px;color:var(--muted)}
.bp-go{display:block;margin-top:24px;background:var(--red);color:#fff;text-align:center;
  font-size:15px;font-weight:800;padding:16px 20px;border-radius:12px;text-decoration:none;
  transition:background .16s,transform .16s}
.bp-go:hover{background:var(--red2);transform:translateY(-1px)}
.bp-alt{display:block;margin-top:12px;text-align:center;font-size:13.5px;font-weight:700;
  color:var(--muted);text-decoration:none}
.bp-alt:hover{color:var(--ink)}
@media(max-width:640px){ .book-panel{padding:22px 18px} .ohm .bp-list b{min-width:70px} }
@media(max-width:940px){.book-wrap{grid-template-columns:1fr}}

.ohm-sauce{background:var(--ink);color:#fff;overflow:hidden}
.sauce-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4.4vw,64px);align-items:center}
.sauce-pic{border-radius:24px;overflow:hidden;border:1px solid rgba(146,183,231,.20);
  box-shadow:0 40px 80px -44px rgba(0,0,0,.7)}
.sauce-pic img{width:100%;display:block}
.ohm-sauce .eyebrow{color:var(--red)}
.sauce-copy h2{font-size:clamp(30px,3.8vw,52px);font-weight:900;letter-spacing:-.04em;line-height:1.03;margin:14px 0 0;color:#fff}
.sauce-copy .strike{text-decoration:line-through;text-decoration-thickness:3px;
  text-decoration-color:var(--red);opacity:.55}
.sauce-copy p{color:#a9c0dd;font-size:16.5px;line-height:1.65;margin-top:20px;max-width:48ch}
.sauce-copy p b{color:#fff;font-weight:700}
.sauce-price{display:flex;align-items:baseline;gap:12px;margin-top:26px;flex-wrap:wrap}
.sauce-price .amt{font-size:38px;font-weight:900;letter-spacing:-.04em;color:#fff}
.sauce-price .note{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.sauce-copy .btn{margin-top:26px}
@media(max-width:940px){.sauce-wrap{grid-template-columns:1fr}}

/* ---------- TEAM WALL ---------- */
.ohm-tw{background:var(--ground);color:var(--text);overflow:hidden;padding-bottom:clamp(56px,7vw,92px)}
.ohm-tw .shead h2{color:var(--text)}
.ohm-tw .shead p{color:var(--muted)}
.tw-rows{margin-top:44px;position:relative}
.tw-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tw-track{display:flex;gap:22px;width:max-content;animation:twScroll 68s linear infinite}
.tw-row:hover .tw-track{animation-play-state:paused}
@keyframes twScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tw-card{position:relative;flex:0 0 auto;width:268px;height:376px;margin:0;border-radius:18px;
  overflow:hidden;background:var(--navy);border:1px solid var(--hair);
  box-shadow:0 22px 46px -32px rgba(10,18,32,.45)}
.tw-card img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.04);transition:filter .45s cubic-bezier(.25,1,.5,1),transform .6s cubic-bezier(.25,1,.5,1)}
.tw-card:hover img{filter:grayscale(0);transform:scale(1.04)}
.tw-ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:64px;font-weight:900;letter-spacing:-.04em;color:rgba(169,192,221,.45);
  background:linear-gradient(160deg,#1a2e4f,#13233f)}
.tw-card figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:13px 15px;border-radius:12px;
  background:rgba(10,18,32,.74);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid rgba(146,183,231,.18)}
.tw-card figcaption h4{margin:0;font-size:15.5px;font-weight:900;letter-spacing:-.02em;color:#fff}
.tw-card figcaption p{margin:4px 0 0;font-size:11.5px;line-height:1.35;color:#a9c0dd;font-weight:700}
.tw-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(8,14,26,.55));opacity:.9}
@media(prefers-reduced-motion:reduce){.tw-track{animation:none}
  .tw-row{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}
@media(max-width:620px){.tw-card{width:216px;height:308px}}

/* ---------- REVIEW WALL ---------- */

.ohm-revs{background:var(--navy);color:#eaf1fb;overflow:hidden;position:relative;isolation:isolate}
.ohm-revs::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(820px 520px at 84% 6%,rgba(59,130,246,.30),transparent 64%),
             radial-gradient(680px 480px at 8% 96%,rgba(26,46,79,.85),transparent 66%)}
.ohm-revs .rv-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.rv-copy h2{font-size:clamp(30px,3.6vw,50px);font-weight:900;letter-spacing:-.035em;line-height:1.04;margin:14px 0 0;color:#fff}
.rv-copy p{color:#a9c0dd;font-size:16.5px;line-height:1.62;margin-top:18px;max-width:48ch}
.rv-checks{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.rv-checks li{padding-left:34px;position:relative;font-size:16px;font-weight:700;color:#fff;line-height:1.4}
.rv-checks li::before{content:"\2713";position:absolute;left:0;top:0;color:#fff;background:var(--red);
  width:22px;height:22px;border-radius:6px;font-size:13px;font-weight:900;
  display:flex;align-items:center;justify-content:center}

.rv-proof{background:rgba(255,255,255,.06);border:1px solid rgba(146,183,231,.26);border-radius:22px;padding:34px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rv-score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rv-score .rv-num{font-size:56px;font-weight:900;letter-spacing:-.05em;line-height:1;color:#fff}
.rv-score .rv-stars{color:#f5b301;letter-spacing:3px;font-size:19px}
.rv-score .rv-count{flex-basis:100%;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#a9c0dd;margin-top:10px}
.rv-proof blockquote{margin:24px 0 0;font-size:clamp(18px,1.9vw,23px);font-weight:800;letter-spacing:-.02em;
  line-height:1.28;color:#fff}
.rv-by{margin-top:18px;color:#a9c0dd;font-size:13.5px;font-weight:700}
.rv-proof .rv-link{display:inline-block;margin-top:24px;background:var(--red);color:#fff;font-size:14px;font-weight:800;
  padding:14px 24px;border-radius:12px;text-decoration:none;transition:background .2s,transform .2s}
.rv-proof .rv-link:hover{background:var(--red2);transform:translateY(-2px)}

.rv-rows{margin-top:52px;display:flex;flex-direction:column;gap:18px}
.rv-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rv-track{display:flex;gap:18px;width:max-content;animation:rvScroll 78s linear infinite}
.rv-row.alt .rv-track{animation-duration:96s;animation-direction:reverse}
.rv-row:hover .rv-track{animation-play-state:paused}
@keyframes rvScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rv-card{width:352px;flex-shrink:0;background:rgba(255,255,255,.06);border:1px solid rgba(146,183,231,.22);
  border-radius:18px;padding:24px;display:flex;flex-direction:column;
  box-shadow:0 18px 40px -28px rgba(4,10,22,.7)}
.rv-card .s{color:#f5b301;letter-spacing:2px;font-size:13px}
.rv-card p{margin:13px 0 0;font-size:14.5px;line-height:1.6;color:#c7d8ee;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.rv-card .who{margin-top:16px;padding-top:14px;border-top:1px solid rgba(146,183,231,.22);
  font-size:12.5px;font-weight:800;color:#fff}
.rv-card .who em{display:block;font-style:normal;font-weight:700;color:#a9c0dd;font-size:11.5px;margin-top:3px}
@media(max-width:900px){
  .ohm-revs .rv-head{grid-template-columns:1fr}
  .rv-proof{padding:28px}
}
@media(max-width:820px){.rv-card{width:290px}}
@media(prefers-reduced-motion:reduce){.rv-track{animation:none}
  .rv-row{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}

/* ---------- CASE STUDIES (BENTO) ---------- */
.ohm-cases .bn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px}
.bn{background:var(--card);border:1px solid var(--hair);border-radius:22px;padding:30px;position:relative;overflow:hidden;
    transition:transform .38s cubic-bezier(.25,1,.5,1),box-shadow .38s cubic-bezier(.25,1,.5,1),border-color .3s;display:flex;flex-direction:column}
.bn:hover{transform:translateY(-5px);box-shadow:0 34px 64px -38px rgba(10,18,32,.46);border-color:rgba(226,42,36,.34)}
.bn .tag{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.bn .num{font-weight:900;letter-spacing:-.045em;color:var(--red);line-height:.92}
.bn .cap{font-size:13.5px;font-weight:700;color:var(--text);margin-top:9px;line-height:1.4}
.bn .body{font-size:15px;color:var(--muted);line-height:1.6;margin-top:16px}
.bn .go{margin-top:auto;padding-top:20px;font-size:13px;font-weight:800;color:var(--red);display:inline-flex;align-items:center;gap:7px;
        background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;transition:gap .22s}
.bn .go:hover{gap:13px}

/* feature */
.bn-feat{grid-column:span 2;grid-row:span 2;padding:38px}
.bn-feat .num{font-size:clamp(52px,6.6vw,88px);margin-top:16px}
.bn-feat .cap{font-size:16px}
.bn-feat .body{font-size:15.5px;max-width:52ch}
.bn-mile{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:12px;overflow:hidden;margin-top:24px}
.bn-mile div{background:var(--card);padding:13px 14px}
.bn-mile b{display:block;font-size:17px;font-weight:900;color:var(--text);letter-spacing:-.02em}
.bn-mile span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* stat tiles */
.bn-stat{align-items:flex-start;justify-content:center}
.bn-stat .num{font-size:clamp(38px,4.4vw,54px);margin-top:14px}
.bn-stat .body{margin-top:12px;font-size:13.5px}

/* wide case cards */
.bn-case{grid-column:span 2}
.bn-case .num{font-size:clamp(38px,4.4vw,56px);margin-top:14px}
.bn-inline{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.bn-inline i{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.03em;color:var(--text);
             background:var(--surface);border:1px solid var(--hair);border-radius:20px;padding:6px 12px}

/* dark report card */
.bn-dark{grid-column:span 2;background:var(--ink2);border-color:transparent;color:#fff}
.bn-dark .tag{color:var(--dm)}
.bn-dark h3{font-size:clamp(24px,2.5vw,32px);font-weight:900;letter-spacing:-.03em;margin:14px 0 0;color:#fff;line-height:1.1}
.bn-dark .body{color:var(--dm)}
.bn-dark .bn-inline i{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff}
.bn-dark .go{color:#fff}
.bn-dark .rays{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(226,42,36,.3),transparent 66%);right:-150px;bottom:-190px;pointer-events:none}

/* cta */
.bn-cta{grid-column:span 4;flex-direction:row;align-items:center;justify-content:space-between;gap:28px;background:var(--surface);flex-wrap:wrap}
.bn-cta h3{font-size:clamp(22px,2.3vw,30px);font-weight:900;letter-spacing:-.03em;margin:0;color:var(--text);line-height:1.15}
.bn-cta p{margin:9px 0 0;font-size:14.5px;color:var(--muted);max-width:56ch;line-height:1.55}
.bn-cta .acts{display:flex;gap:11px;flex-wrap:wrap;flex-shrink:0}
.bn-cta .b1,.bn-cta .b2{font-size:14px;font-weight:800;border-radius:12px;padding:14px 22px;text-decoration:none;white-space:nowrap;transition:.2s;display:inline-block}
.bn-cta .b1{background:var(--red);color:#fff}
.bn-cta .b1:hover{background:var(--red2)}
.bn-cta .b2{background:transparent;color:var(--text);border:1.5px solid var(--hair)}
.bn-cta .b2:hover{border-color:var(--red);color:var(--red)}

@media(max-width:1000px){
  .ohm-cases .bn-grid{grid-template-columns:repeat(2,1fr)}
  .bn-feat{grid-column:span 2;grid-row:auto}
  .bn-case,.bn-dark{grid-column:span 2}
  .bn-cta{grid-column:span 2}
}
@media(max-width:640px){
  .ohm-cases .bn-grid{grid-template-columns:1fr}
  .bn,.bn-feat{grid-column:span 1;padding:26px}
  .bn-case,.bn-dark,.bn-cta{grid-column:span 1}
  .bn-mile{grid-template-columns:1fr}
  .bn-cta{flex-direction:column;align-items:flex-start}
}

/* lightbox */
.cs-lb{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:26px;
       background:rgba(8,14,26,.86);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.cs-lb.on{display:flex}
.cs-lb .box{background:var(--card);border-radius:18px;max-width:1040px;width:100%;max-height:92vh;overflow:auto;position:relative;
            box-shadow:0 50px 100px -30px rgba(0,0,0,.6)}
.cs-lb img{width:100%;display:block;border-radius:18px 18px 0 0}
.cs-lb .foot{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid var(--hair)}
.cs-lb .foot p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5;max-width:52ch}
.cs-lb .dl{background:var(--red);color:#fff;font-size:14px;font-weight:800;padding:13px 22px;border-radius:11px;text-decoration:none;white-space:nowrap}
.cs-lb .dl:hover{background:var(--red2)}
.cs-lb .x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
          background:rgba(8,14,26,.6);color:#fff;font-size:20px;line-height:1;font-family:inherit}
.cs-lb .x:hover{background:var(--red)}

/* ---------- AIO ---------- */
.ohm-aio{background:var(--ink2);color:#fff;position:relative;overflow:hidden}
.ohm-aio .glow{position:absolute;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.28),transparent 65%);top:-200px;right:-140px}
.ohm-aio .grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ohm-aio h2{font-size:clamp(32px,5vw,58px);text-transform:uppercase;color:#fff}
.ohm-aio h2 .ai{color:var(--ai)}
.ohm-aio .lead{margin-top:20px;color:#c6d4ea;font-size:18px;line-height:1.55;max-width:46ch}
.ohm-aio .do{margin-top:26px;list-style:none;padding:0;display:flex;flex-direction:column;gap:13px}
.ohm-aio .do li{padding-left:28px;position:relative;color:#dbe6f6;font-size:15px}
.ohm-aio .do li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:13px;border-radius:4px;background:var(--ai)}
.ohm-aio .demo{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.34);border-radius:22px;padding:34px}
.ohm-aio .demo .q{font-size:clamp(19px,2.4vw,26px);font-weight:900;letter-spacing:-.02em;color:#fff;line-height:1.1}
.ohm-aio .demo .a{margin-top:16px;color:#c6d4ea;font-size:14.5px;line-height:1.6}
.ohm-aio .demo .btn{margin-top:22px}
@media(max-width:860px){.ohm-aio .grid{grid-template-columns:1fr}}

/* ---------- URGENCY ---------- */
.ohm-urg{background:var(--surface)}
.ohm-urg .box{text-align:center;max-width:60ch;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:22px}
.ohm-urg h2{font-size:clamp(28px,4.4vw,50px);text-transform:uppercase}
.ohm-urg p{color:var(--muted);font-size:18px}

/* ---------- FINAL CTA ---------- */
.ohm-final{background:var(--red);color:#fff;text-align:center}
.ohm-final h2{font-size:clamp(34px,6vw,72px);text-transform:uppercase;letter-spacing:-.04em}
.ohm-final p{margin:20px auto 0;max-width:50ch;font-size:19px;color:#ffe0de}
.ohm-final .btn{background:#fff;color:var(--red);margin-top:34px;font-size:17px;padding:19px 40px}
.ohm-final .btn:hover{background:var(--ink);color:#fff;box-shadow:none}
.ohm-final .fine{margin-top:18px;font-size:13px;color:#ffc9c6}

/* ---------- FOOTER ---------- */
.ohm-foot{background:var(--ink);color:#93a3bd;padding:66px 0 40px}
.ohm-foot .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:44px}
.ohm-foot .brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:900;font-size:18px}
.ohm-foot .brand svg{width:28px;height:28px}
.ohm-foot p.d{margin-top:14px;font-size:14px;max-width:34ch;line-height:1.55}
.ohm-foot h4{color:#fff;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
.ohm-foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ohm-foot ul a{color:#93a3bd;text-decoration:none;font-size:14.5px}
.ohm-foot ul a:hover{color:#fff}
.ohm-foot .bar{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:860px){.ohm-foot .top{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){
  .ohm-intro{display:none!important}
  .ohm .reveal{opacity:1!important;transform:none!important}
  .ohm *{animation:none!important}
}

/* ---- multipage + service pages ---- */
.ohm .page{display:none}
.ohm .page.active{display:block;animation:pageIn .45s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ohm .svc-hero{background:var(--ink);color:#fff;padding:104px 0 84px;position:relative;overflow:hidden}
.ohm .svc-hero h1{font-size:clamp(38px,6.2vw,78px);text-transform:uppercase;letter-spacing:-.045em;max-width:15ch}
.ohm .svc-hero h1 .rd{color:var(--red)} .ohm .svc-hero h1 .ai{color:var(--ai)}
.ohm .svc-hero .sub{margin-top:26px;max-width:54ch;color:#c8d2e2;font-size:clamp(17px,1.7vw,20px);line-height:1.5}
.ohm .svc-hero .row{margin-top:36px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.ohm .svc-hero .chip{border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px 18px}
.ohm .svc-hero .chip b{font-size:22px;font-weight:900;color:var(--red);letter-spacing:-.03em}
.ohm .svc-hero .chip.ai b{color:var(--ai)}
.ohm .svc-hero .chip span{display:block;font-size:12px;color:var(--dm);margin-top:2px}
/* The header now carries the same service names as the footer. They are longer, so the row needs
   tighter tracking and an earlier wrap point than the one-word labels it replaced. */
.ohm-nav .links{gap:clamp(12px,1.5vw,22px)}
.ohm-nav .links a{font-size:13.5px;letter-spacing:-.005em;white-space:nowrap}
@media(max-width:1180px){ .ohm-nav .links a{font-size:12.5px} .ohm-nav .links{gap:12px} }
/* The contact headline is a sentence rather than a phrase, so it needs a wider measure than the
   15ch the service heroes use, and a lower ceiling so it does not tower over the form below it. */
.ohm .page[data-page="contact"] .svc-hero h1{max-width:22ch;font-size:clamp(30px,4.6vw,58px);
  line-height:1.04;text-wrap:balance}
.ohm .page[data-page="contact"] .svc-hero .sub{max-width:56ch}
/* Qualifying form. The length is the filter: somebody comparing five agencies for fun does not
   finish this, and somebody with a real problem and a real budget answers it in ninety seconds. */
.qform{border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:clamp(20px,2.4vw,28px);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))}
.ohm .qform-h{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0}
.ohm .qform-s{font-size:13px;line-height:1.5;color:var(--dm);margin:8px 0 20px}
.qf{margin-bottom:16px}
.ohm .qf > label{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;color:#e7eefa;margin:0 0 8px}
.ohm .qf .hint{display:block;font-size:11px;font-weight:600;color:var(--dm);letter-spacing:0;margin-top:3px}
.qform input[type=text],.qform input[type=email],.qform input[type=tel],.qform input[type=url],.qform textarea{
  width:100%;background:rgba(8,15,27,.55);border:1px solid rgba(255,255,255,.16);border-radius:10px;
  padding:11px 13px;color:#fff;font:inherit;font-size:14px;outline:none}
.qform textarea{resize:vertical;min-height:74px;line-height:1.5}
.qform input::placeholder,.qform textarea::placeholder{color:#6f819b}
.qform input:focus,.qform textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,42,36,.18)}
.qduo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qopts{display:flex;flex-wrap:wrap;gap:7px}
.qopts input{position:absolute;opacity:0;pointer-events:none}
.ohm .qopts label{display:inline-block;font-size:12.5px;font-weight:700;color:#c8d4e6;margin:0;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 14px;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s}
.qopts label:hover{border-color:rgba(255,255,255,.34)}
.ohm .qopts input:checked + label{background:var(--red);border-color:var(--red);color:#fff}
.qopts input:focus-visible + label{box-shadow:0 0 0 3px rgba(226,42,36,.3)}
.qnote{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:13px 15px;
  background:rgba(226,42,36,.07);margin-bottom:16px}
.ohm .qnote p{margin:0;font-size:12.5px;line-height:1.55;color:#dbe4f2}
.ohm .qnote p b{color:#fff;font-weight:800}
.qform .btn{width:100%;justify-content:center;margin-top:4px}
.ohm .qfine{margin:12px 0 0;font-size:11.5px;line-height:1.5;color:var(--dm);text-align:center}
.qerr{display:none;margin:0 0 14px;font-size:12.5px;font-weight:700;color:#ff9691}
.qform.err .qerr{display:block}
.ohm .qf.bad > label{color:#ff9691}
.qform.sent .qbody{display:none}
.qdone{display:none;text-align:center;padding:22px 6px}
.qform.sent .qdone{display:block}
.ohm .qdone h3{font-size:22px;font-weight:900;letter-spacing:-.03em;color:#fff;margin:0 0 10px}
.ohm .qdone p{font-size:13.5px;line-height:1.6;color:var(--dm);margin:0;max-width:34ch;margin-inline:auto}
@media(max-width:980px){
    .qform{max-width:560px}
}
@media(max-width:520px){ .qduo{grid-template-columns:1fr} }
.ohm-apply{background:var(--ink);color:#fff}
.apply-wrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,4.4vw,64px);align-items:start}
.ohm .apply-side h2{font-size:clamp(26px,3vw,40px);font-weight:900;letter-spacing:-.035em;
  line-height:1.06;margin:14px 0 0;color:#fff;text-wrap:balance}
.ohm .apply-side p{margin:18px 0 0;color:#a9c0dd;font-size:16px;line-height:1.65;max-width:40ch}
.ohm .apply-side .eyebrow{color:var(--red)}
.ohm .apply-side .book-list{margin:26px 0 0;padding:0;list-style:none}
.ohm .apply-side .book-list li{position:relative;padding-left:26px;margin-bottom:12px;
  font-size:14.5px;line-height:1.5;color:#c8d4e6}
.ohm .apply-side .book-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:2px;background:var(--red)}
.apply-form .qform{border-color:rgba(255,255,255,.16)}
@media(max-width:980px){
  .apply-wrap{grid-template-columns:1fr;gap:34px}
  .apply-form .qform{max-width:none}
}
/* ---- mobile pass on the form itself ---- */
@media(max-width:640px){
  .qform{padding:20px 16px;border-radius:14px}
  .qduo{grid-template-columns:1fr;gap:9px}
  .qform input[type=text],.qform input[type=email],.qform input[type=tel],.qform textarea{
    font-size:16px;padding:12px 13px}
  .ohm .qopts label{font-size:13px;padding:9px 13px}
  .qopts{gap:6px}
  .ohm .qf > label{font-size:12px}
  .ohm .apply-side p{font-size:15px}
}

.svc-hero .w.sgrid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.84fr);gap:clamp(26px,4.4vw,66px);align-items:center}
.ohm .sgrid .svc-copy h1{max-width:14ch}
.ohm .sgrid .svc-copy .sub{max-width:50ch}
.bstack{position:relative;padding-left:38px}
.ohm .bstack-h{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dm);margin:0 0 14px}
.bstack-axis{position:absolute;left:11px;top:34px;bottom:74px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.26) 42%,rgba(226,42,36,.9))}
.bstack-axis::after{content:"";position:absolute;left:-3px;top:-6px;width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid rgba(255,255,255,.30)}
.ohm .bstack-foot{margin:16px 0 0 -11px;font-size:12.5px;line-height:1.45;color:var(--dm);max-width:36ch}
.brung{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);margin-bottom:7px}
.ohm .brung .bs-n{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--dm);min-width:19px;margin:0}
.ohm .brung .bs-t{font-size:14px;font-weight:700;color:#e7eefa;margin:0;letter-spacing:-.01em}
.ohm .brung .bs-r{margin:0 0 0 auto;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dm)}
.brung.above{border-style:dashed;border-color:rgba(255,255,255,.12);background:transparent}
.ohm .brung.above .bs-t{color:rgba(231,238,250,.48)}
.ohm .brung.above .bs-n,.ohm .brung.above .bs-r{color:rgba(169,186,214,.48)}
.brung.on{border-color:rgba(226,42,36,.62);background:rgba(226,42,36,.15)}
.ohm .brung.on .bs-t{color:#fff}
.ohm .brung.on .bs-n,.ohm .brung.on .bs-r{color:#ff9691}
.brung.on::before{content:"";position:absolute;left:-27px;top:50%;width:16px;height:2px;background:var(--red);transform:translateY(-50%)}
.brung.on::after{content:"";position:absolute;left:-16px;top:50%;width:0;height:0;border-top:4px solid transparent;
  border-bottom:4px solid transparent;border-left:6px solid var(--red);transform:translateY(-50%)}
.brung.ai.on{border-color:rgba(59,130,246,.62);background:rgba(59,130,246,.16)}
.ohm .brung.ai.on .bs-n,.ohm .brung.ai.on .bs-r{color:#9dc2ff}
.brung.ai.on::before{background:var(--ai)}
.brung.ai.on::after{border-left-color:var(--ai)}
.brung.base{margin-left:-11px;margin-right:-11px}
.brung.r2{margin-left:0}
.brung.r3{margin-left:9px}
.brung.r4{margin-left:18px}
.brung.r5{margin-left:26px}
.brung.r6{margin-left:34px}
.page.active .brung{animation:brise .58s cubic-bezier(.2,.75,.3,1) backwards}
.page.active .brung.k6{animation-delay:.50s}
.page.active .brung.k5{animation-delay:.40s}
.page.active .brung.k4{animation-delay:.30s}
.page.active .brung.k3{animation-delay:.20s}
.page.active .brung.k2{animation-delay:.10s}
.page.active .brung.k1{animation-delay:0s}
@keyframes brise{from{opacity:0;transform:translateY(14px) scaleX(.965)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.page.active .brung{animation:none}}
@media(max-width:980px){
  .svc-hero .w.sgrid{grid-template-columns:1fr;gap:38px}
  .bstack{max-width:520px}
}
.ohm .svc-prob{background:var(--surface)}
.ohm .pc .gets{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(146,183,231,.22);
  display:flex;gap:9px;align-items:flex-start}
.ohm .pc .gets i{flex:none;margin-top:1px;font-style:normal;font-size:8px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--red);white-space:nowrap;padding-top:3px}
.ohm .pc .gets span{font-size:13px;line-height:1.45;color:var(--ink);font-weight:700}
/* The home page argued method three times over before it ever named a symptom. This is the
   recognition beat: the reader should see their own Tuesday on the page before we explain anything. */
.ohm-sympt{background:var(--surface)}
.sy-head{max-width:34ch}
.ohm .sy-head h2{font-size:clamp(28px,4.2vw,52px);font-weight:900;letter-spacing:-.035em;
  line-height:1.03;margin:14px 0 0;color:var(--ink);text-wrap:balance}
.ohm .sy-head p{margin:20px 0 0;font-size:17px;line-height:1.65;color:var(--muted);max-width:44ch}
.sy-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,60px);margin-top:clamp(34px,4vw,52px)}
.sy{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;
  padding:19px 0;border-top:1px solid var(--hair)}
.sy i{margin-top:2px;width:26px;height:26px;border-radius:8px;background:rgba(226,42,36,.10);
  display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:900;color:var(--red)}
.ohm .sy p{margin:0;font-size:15.5px;line-height:1.55;color:var(--text);text-wrap:pretty}
.ohm .sy p b{font-weight:800;color:var(--ink)}
.sy-foot{margin-top:clamp(30px,3.6vw,44px);padding:clamp(24px,3vw,34px);border-radius:16px;
  background:var(--ink);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,40px);align-items:center}
.ohm .sy-foot h3{margin:0;font-size:clamp(20px,2.4vw,30px);font-weight:900;letter-spacing:-.03em;
  line-height:1.14;color:#fff;text-wrap:balance}
.ohm .sy-foot h3 em{font-style:normal;color:var(--red)}
.ohm .sy-foot p{margin:12px 0 0;font-size:15px;line-height:1.6;color:#a9c0dd;max-width:52ch}
.sy-foot .btn{white-space:nowrap}
.page.active .sy{animation:pfade .5s ease both}
.sy-grid .sy:nth-child(1){animation-delay:.05s} .sy-grid .sy:nth-child(2){animation-delay:.11s}
.sy-grid .sy:nth-child(3){animation-delay:.17s} .sy-grid .sy:nth-child(4){animation-delay:.23s}
.sy-grid .sy:nth-child(5){animation-delay:.29s} .sy-grid .sy:nth-child(6){animation-delay:.35s}
@media(prefers-reduced-motion:reduce){ .page.active .sy{animation:none} }
@media(max-width:860px){
  .sy-grid{grid-template-columns:1fr}
  .sy-foot{grid-template-columns:1fr}
  .sy-foot .btn{width:100%;justify-content:center}
}
.ohm .svc-prob .big{font-size:clamp(26px,3.8vw,46px);font-weight:900;letter-spacing:-.03em;line-height:1.04;max-width:18ch}
.ohm .svc-prob p{margin-top:22px;color:var(--muted);font-size:18px;max-width:62ch;line-height:1.62}
/* ---------- Figures in the statement bands ----------
   These are read as evidence, not decoration, so they are built like a page out of a well made
   report: hairline rules, tabular numerals, one accent, and a lot of restraint. */
.ohm .svc-prob .w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4.6vw,66px);align-items:start}
.ohm .svc-prob .pcopy .big{max-width:15ch;font-size:clamp(28px,3.9vw,48px);text-wrap:balance}
.ohm .svc-prob .pcopy p{max-width:44ch;font-size:17px;line-height:1.68;margin-top:24px}

.pviz{position:relative;border:1px solid var(--hair);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 60px -46px rgba(10,18,32,.5)}
.ohm .pviz-f b{color:var(--ink);font-weight:800}
/* The figures read as charts, which is not what an owner feels. Each card now runs
   cost -> evidence -> symptoms, so the number arrives attached to a Tuesday afternoon. */
.pviz{padding:0;overflow:hidden;background:#fff}
.pv-head{padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px) clamp(18px,2vw,24px);
  background:linear-gradient(160deg,var(--ink),var(--navy) 130%);position:relative}
.pv-head::after{content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
  background-image:linear-gradient(rgba(146,183,231,.9) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(146,183,231,.9) 1px,transparent 1px);
  background-size:26px 26px}
.ohm .svc-prob .pv-kick{position:relative;z-index:1;font-size:9px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:#ff9691;margin:0}
.ohm .svc-prob .pv-stat{position:relative;z-index:1;font-size:clamp(25px,2.35vw,31px);font-weight:900;
  letter-spacing:-.035em;line-height:1.14;color:#fff;margin:12px 0 0;
  text-wrap:balance;max-width:19ch}
.ohm .pv-stat em{font-style:normal;color:var(--red)}
.ohm .svc-prob .pv-said{position:relative;z-index:1;font-size:14px;line-height:1.68;color:#c3d1e4;margin:15px 0 0;max-width:none;letter-spacing:.005em;text-wrap:pretty}
.pv-body{padding:clamp(18px,2vw,22px) clamp(20px,2.2vw,28px) clamp(18px,2vw,22px)}
.ohm .svc-prob .pviz-h{font-size:9px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0}
.ohm .svc-prob .pviz-s{font-size:12px;color:var(--muted);margin:5px 0 0}
.pviz-rule{height:1px;background:var(--hair);margin:12px 0 14px}
.ohm .pviz-f{display:none}
.pv-feel{margin-top:32px;padding-top:24px;border-top:1px solid var(--hair)}
.ohm .svc-prob .pv-feel > p{font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin:0 0 16px}
.pv-f{display:grid;grid-template-columns:16px 1fr;gap:12px;align-items:start;margin-bottom:13px}
.pv-f:last-child{margin-bottom:0}
.pv-f i{margin-top:7px;width:7px;height:7px;border-radius:50%;background:var(--red);opacity:.6}
.ohm .svc-prob .pv-f p{margin:0;font-size:14.5px;line-height:1.58;color:var(--text);text-wrap:pretty}
.ohm .pv-f p b{font-weight:800;color:var(--ink)}
.pv-cost{border-top:1px solid var(--hair);padding:16px clamp(20px,2.2vw,28px) clamp(18px,2vw,22px);
  background:linear-gradient(180deg,rgba(19,35,63,.03),transparent)}
.ohm .svc-prob .pv-cost p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.ohm .pv-cost p b{color:var(--ink);font-weight:800}
.page.active .pv-f{animation:pfade .5s ease both}
.pv-feel .pv-f:nth-of-type(1){animation-delay:.10s}
.pv-feel .pv-f:nth-of-type(2){animation-delay:.20s}
.pv-feel .pv-f:nth-of-type(3){animation-delay:.30s}
@media(prefers-reduced-motion:reduce){.page.active .pv-f{animation:none}}

/* --- horizontal bar figure --- */
.prow{display:grid;grid-template-columns:28px 1fr 44px;align-items:center;gap:11px;margin-bottom:7px}
.ohm .prow .pn{font-size:10px;font-weight:800;color:var(--muted);margin:0;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.ptrack{position:relative;height:8px;border-radius:4px;background:rgba(19,35,63,.06)}
.pbar{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:4px;
  background:var(--navy);transform:scaleX(0);transform-origin:left center}
.prow.hot .pbar{background:var(--red)}
.prow.dim .pbar{background:rgba(19,35,63,.34)}
.ohm .prow .pv{font-size:11px;font-weight:800;color:var(--ink);margin:0;text-align:right;
  font-variant-numeric:tabular-nums;opacity:0;letter-spacing:-.01em}
.ohm .prow.dim .pv{color:var(--muted);font-weight:700}
.page.active .pviz .pbar{animation:pgrow .7s cubic-bezier(.22,.72,.24,1) both}
.page.active .pviz .pv{animation:pfade .4s ease both}
.pviz .prow:nth-of-type(1) .pbar,.pviz .prow:nth-of-type(1) .pv{animation-delay:.06s}
.pviz .prow:nth-of-type(2) .pbar,.pviz .prow:nth-of-type(2) .pv{animation-delay:.12s}
.pviz .prow:nth-of-type(3) .pbar,.pviz .prow:nth-of-type(3) .pv{animation-delay:.18s}
.pviz .prow:nth-of-type(4) .pbar,.pviz .prow:nth-of-type(4) .pv{animation-delay:.24s}
.pviz .prow:nth-of-type(5) .pbar,.pviz .prow:nth-of-type(5) .pv{animation-delay:.30s}
.pviz .prow:nth-of-type(6) .pbar,.pviz .prow:nth-of-type(6) .pv{animation-delay:.36s}
.pviz .prow:nth-of-type(7) .pbar,.pviz .prow:nth-of-type(7) .pv{animation-delay:.42s}
.pviz .prow:nth-of-type(8) .pbar,.pviz .prow:nth-of-type(8) .pv{animation-delay:.48s}
.pviz .prow:nth-of-type(9) .pbar,.pviz .prow:nth-of-type(9) .pv{animation-delay:.54s}
.pviz .prow:nth-of-type(10) .pbar,.pviz .prow:nth-of-type(10) .pv{animation-delay:.60s}
@keyframes pgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pfade{from{opacity:0}to{opacity:1}}
.pfold{display:grid;grid-template-columns:30px 1fr 46px;align-items:center;gap:12px;margin:14px 0 12px}
.pfold i{grid-column:2;height:1px;background:repeating-linear-gradient(90deg,var(--red) 0 4px,transparent 4px 9px)}
.ohm .pfold span{grid-column:2;grid-row:1;justify-self:start;font-size:9px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);background:var(--surface);padding:0 8px 0 0;margin:0}

/* --- twelve week cadence ribbon --- */
.pweeks{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;align-items:end;height:76px}
.pwk{position:relative;height:100%;display:flex;align-items:flex-end}
.pwk i{display:block;width:100%;border-radius:3px 3px 0 0;height:var(--h);
  background:var(--navy);transform:scaleY(0);transform-origin:bottom}
.pwk.miss i{height:6px;background:transparent;border:1px dashed rgba(226,42,36,.5);
  border-bottom:none;border-radius:3px 3px 0 0}
.page.active .pwk i{animation:pup .5s cubic-bezier(.22,.72,.24,1) both}
@keyframes pup{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.pwaxis{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin-top:7px;
  padding-top:7px;border-top:1px solid var(--hair)}
.ohm .pwaxis span{font-size:8.5px;font-weight:700;color:var(--muted);text-align:center;margin:0;
  font-variant-numeric:tabular-nums}
.ohm .pwaxis span.miss{color:var(--red)}
.pwlegend{display:flex;gap:16px;margin-top:14px}
.ohm .pwlegend span{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  color:var(--muted);margin:0}
.pwlegend b{width:9px;height:9px;border-radius:2px;background:var(--navy);display:block}
.pwlegend b.miss{background:transparent;border:1px dashed rgba(226,42,36,.6)}

/* --- brand drift: the swatch is the argument --- */
.pswatch{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.psw{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--hair)}
.psw i{flex:none;width:24px;height:24px;border-radius:6px;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(10,18,32,.10)}
.ohm .psw p{margin:0;font-size:12px;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.ohm .psw span{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-variant-numeric:tabular-nums}
.psw.off span{color:var(--red)}
.page.active .psw{animation:pfade .45s ease both}
.pswatch .psw:nth-child(1){animation-delay:.05s} .pswatch .psw:nth-child(2){animation-delay:.10s}
.pswatch .psw:nth-child(3){animation-delay:.15s} .pswatch .psw:nth-child(4){animation-delay:.20s}
.pswatch .psw:nth-child(5){animation-delay:.25s} .pswatch .psw:nth-child(6){animation-delay:.30s}
.pswatch .psw:nth-child(7){animation-delay:.35s} .pswatch .psw:nth-child(8){animation-delay:.40s}

.pba{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pbc{position:relative}
.ohm .pbc > span.lb{display:block;font-size:8.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 9px;color:var(--muted)}
.ohm .pbc.good > span.lb{color:var(--red)}
.pmock{border-radius:10px;overflow:hidden;border:1px solid var(--hair);background:#fff;
  aspect-ratio:3/4;display:flex;flex-direction:column}
/* the off-brand version: wrong navy, a stray accent, centered where it should be ranged left,
   type that does not sit on any scale */
.pmock.bad{border-color:rgba(19,35,63,.14)}
.pm-top{padding:13px 13px 10px}
.pmock.bad .pm-top{background:#2b4a7a;text-align:center}
.pmock.good .pm-top{background:var(--ink)}
.pm-mk{display:inline-flex;align-items:center;gap:5px}
.pm-mk b{display:block;width:16px;height:11px;border-radius:2px;background:#fff}
.pm-mk i{display:block;height:5px;width:38px;border-radius:2px;background:rgba(255,255,255,.85)}
.pmock.bad .pm-mk{flex-direction:column;gap:4px}
.pmock.bad .pm-mk i{width:52px;height:7px;background:rgba(255,255,255,.6)}
.pm-body{flex:1;padding:12px 13px;display:flex;flex-direction:column;gap:7px}
.pmock.bad .pm-body{align-items:center;text-align:center;gap:9px}
.pm-h{height:9px;border-radius:2px;background:var(--ink);width:82%}
.pmock.bad .pm-h{height:13px;width:88%;background:#2b4a7a;border-radius:5px}
.pm-l{height:4px;border-radius:2px;background:rgba(19,35,63,.20);width:100%}
.pm-l.s{width:64%}
.pmock.bad .pm-l{background:rgba(19,35,63,.16);height:5px}
.pm-btn{margin-top:auto;height:20px;border-radius:5px;background:var(--red);width:62%}
.pmock.bad .pm-btn{background:#f0a03c;border-radius:12px;width:78%;align-self:center}
.pm-rule{height:2px;width:26px;border-radius:2px;background:var(--red);margin-bottom:2px}
.pmock.bad .pm-rule{display:none}
.pba-note{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:11px}
.ohm .pba-note p{margin:0;font-size:11px;line-height:1.45;color:var(--muted)}
.ohm .pba-note p b{color:var(--ink);font-weight:800;display:block;margin-bottom:2px}
.page.active .pbc{animation:pfade .5s ease both}
.pba .pbc:nth-child(1){animation-delay:.06s}
.pba .pbc:nth-child(2){animation-delay:.26s}
@media(prefers-reduced-motion:reduce){.page.active .pbc{animation:none}}

/* --- return on spend, as a dot matrix --- */
.pdots{display:grid;grid-template-columns:repeat(13,1fr);gap:7px;max-width:340px}
.pdots i{aspect-ratio:1;border-radius:50%;background:var(--navy);opacity:.9;
  transform:scale(0)}
.pdots i.spend{background:var(--red);opacity:1;box-shadow:0 0 0 3px rgba(226,42,36,.16)}
.page.active .pdots i{animation:pdot .34s cubic-bezier(.3,1.3,.5,1) both}
@keyframes pdot{from{transform:scale(0)}to{transform:scale(1)}}
.pdlegend{display:flex;gap:20px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
.pdl{display:flex;align-items:center;gap:9px}
.pdl i{width:10px;height:10px;border-radius:50%;background:var(--navy);flex:none}
.pdl i.spend{background:var(--red)}
.ohm .pdl p{margin:0;font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.3}
.ohm .pdl p b{display:block;font-size:15px;font-weight:900;color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}

/* --- the answer nobody reads past --- */
.ohm .pchat .pq{margin:0 0 4px;font-size:14px;line-height:1.45;color:var(--ink);font-weight:700;
  padding-left:14px;border-left:2px solid var(--ai)}
.pans{margin-top:16px}
.pline{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:baseline;padding:9px 0;
  border-bottom:1px solid var(--hair)}
.ohm .pline i{font-style:normal;font-size:9.5px;font-weight:800;color:var(--ai);
  font-variant-numeric:tabular-nums;letter-spacing:.06em}
.ohm .pline p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.ohm .pline p b{color:var(--ink);font-weight:800}
.pline.you{border-bottom:none;padding:13px 0 0}
.ohm .pline.you i{color:var(--red)}
.ohm .pline.you p{color:var(--ink);font-weight:800;font-size:13px;display:flex;align-items:center;gap:10px}
.ohm .pline.you p em{font-style:normal;margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);border:1px dashed rgba(226,42,36,.5);border-radius:999px;
  padding:4px 10px;white-space:nowrap}
.page.active .pline{animation:pfade .45s ease both}
.pans .pline:nth-child(1){animation-delay:.14s} .pans .pline:nth-child(2){animation-delay:.30s}
.pans .pline:nth-child(3){animation-delay:.46s} .pans .pline:nth-child(4){animation-delay:.72s}

@media(prefers-reduced-motion:reduce){
  .page.active .pviz .pbar,.page.active .pviz .pv,.page.active .pwk i,
  .page.active .psw,.page.active .pdots i,.page.active .pline{animation:none}
  .pviz .pbar{transform:scaleX(1)} .pviz .pv{opacity:1} .pwk i{transform:scaleY(1)} .pdots i{transform:scale(1)}
}
@media(max-width:980px){
  .ohm .svc-prob .w{grid-template-columns:1fr;gap:34px}
  .pviz{max-width:540px}
}

.ohm .svc-del{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ohm .svc-del .d{display:flex;gap:15px;padding:24px;border:1px solid var(--hair);border-radius:16px;background:var(--card);align-items:flex-start;transition:.2s}
.ohm .svc-del .d:hover{box-shadow:0 22px 46px -30px rgba(10,18,32,.4);transform:translateY(-3px)}
.ohm .svc-del .d svg{width:24px;height:24px;stroke:var(--red);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}
.ohm .svc-del.ai .d svg{stroke:var(--ai)}
.ohm .svc-del .d h4{margin:0;font-size:17.5px;letter-spacing:-.01em}
.ohm .svc-del .d p{margin:7px 0 0;color:var(--muted);font-size:14.5px;line-height:1.5}
.ohm .svc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ohm .svc-step .k{font-size:46px;font-weight:900;color:var(--red);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.ohm .svc-del.ai ~ * .k,.ohm .svc-step.ai .k{color:var(--ai)}
.ohm .svc-step h4{margin:12px 0 0;font-size:21px;letter-spacing:-.02em}
.ohm .svc-step p{margin:9px 0 0;color:var(--muted);font-size:15px;line-height:1.55}
.ohm .svc-proof{background:var(--navy);color:#fff}
.ohm .svc-proof .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
.ohm .svc-proof .big{font-size:clamp(50px,7.5vw,96px);font-weight:900;color:var(--red);letter-spacing:-.05em;line-height:.88}
.ohm .svc-proof .big.ai{color:var(--ai)}
.ohm .svc-proof .big span{display:block;font-size:14px;color:var(--dm);font-weight:700;margin-top:12px;letter-spacing:.02em}
.ohm .svc-proof p{color:#c6d2e4;font-size:18px;line-height:1.62;max-width:52ch}
.ohm .btn.ai{background:var(--ai)} .ohm .btn.ai:hover{background:var(--ai2)}
@media(max-width:860px){.ohm .svc-del,.ohm .svc-proof .grid,.ohm .svc-steps{grid-template-columns:1fr}}

/* a film card reads as a film before you click it, and the badge IS the button */
.ohm .cf-card.is-film .cf-play{position:absolute;left:50%;top:50%;width:56px;height:56px;
  transform:translate(-50%,-50%);border-radius:50%;background:rgba(226,42,36,.94);border:0;
  display:grid;place-items:center;cursor:pointer;padding:0;z-index:4;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.6);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background .2s}
.ohm .cf-card.is-film .cf-play:hover{background:var(--red);transform:translate(-50%,-50%) scale(1.08)}
.ohm .cf-card.is-film .cf-play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ohm .cf-card.is-film .cf-play svg{width:23px;height:23px;fill:#fff;margin-left:2px}
.ohm .lb-video{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:16/9;
  background:#000;border-radius:12px;overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
/* a Short is vertical; a 16:9 frame would pillarbox it into a stripe */
.ohm .lb-video.is-vert{aspect-ratio:9/16;max-width:min(420px,calc(100vh - 190px) * 0.5625)}
.ohm .lb-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.ohm .ohm-proc .w:first-of-type{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(24px,4vw,56px);align-items:center}
.ohm .proc-track{position:relative;width:100%;max-width:460px;justify-self:center;
  padding-left:34px}
.ohm .pt-list{list-style:none;margin:0;padding:0;position:relative}
/* the spine the stages hang off */
.ohm .pt-list:before{content:"";position:absolute;left:-19px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--hair),var(--hair) 62%,var(--red) 62%,var(--red))}
.ohm .pt-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:11px 0;position:relative}
.ohm .pt-row:before{content:"";position:absolute;left:-24px;top:50%;width:12px;height:12px;
  border-radius:50%;transform:translateY(-50%);background:var(--ground);
  border:2px solid var(--hair)}
.ohm .pt-n{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted);
  font-variant-numeric:tabular-nums}
.ohm .pt-name{font-size:16.5px;font-weight:750;letter-spacing:-.01em;color:var(--text)}
.ohm .pt-when{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.ohm .pt-row.is-launch:before{background:var(--red);border-color:var(--red);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--red) 18%,transparent)}
.ohm .pt-row.is-launch .pt-name,.ohm .pt-row.is-launch .pt-n{color:var(--red)}
.ohm .pt-row.is-loop:before{background:var(--ground);border-color:var(--red)}
/* the bracket over the five stages nobody bills for */
.ohm .pt-skip{position:absolute;left:0;top:10px;height:calc((100% - 62px) * 0.66);
  border-left:2px solid var(--red);border-top:2px solid var(--red);border-bottom:2px solid var(--red);
  width:14px;border-radius:4px 0 0 4px;opacity:.55}
.ohm .pt-skip span{position:absolute;left:-8px;top:50%;transform:translate(-100%,-50%) rotate(180deg);
  writing-mode:vertical-rl;font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);white-space:nowrap;opacity:.95}
.ohm .pt-key{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 0;
  font-size:11.5px;font-weight:700;color:var(--muted)}
.ohm .pt-key span{width:10px;height:10px;border-radius:50%;flex:none}
.ohm .pt-key .k1{background:var(--red)}
.ohm .pt-key .k2{background:var(--ground);border:2px solid var(--red);margin-left:10px}
.ohm .pt-row.on .pt-name{color:var(--red)}
@media (max-width:900px){
  .ohm .ohm-proc .w:first-of-type{grid-template-columns:1fr}
  .ohm .proc-track{max-width:none;margin-top:8px}
  .ohm .pt-skip span{font-size:9px}
}

.ohm .sy-top{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(24px,4vw,56px);align-items:start}
.ohm .sy-tally{align-self:start;background:var(--card);border:1px solid var(--hair);
  border-radius:18px;padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:10px}
.ohm .sy-tally .st-lab{margin:0;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red)}
.ohm .sy-tally .st-num{margin:0;font-size:clamp(46px,6vw,68px);font-weight:800;letter-spacing:-.04em;
  line-height:.9;color:var(--text);font-variant-numeric:tabular-nums}
.ohm .sy-tally .st-num small{font-size:16px;font-weight:700;color:var(--muted);
  letter-spacing:0;margin-left:10px}
.ohm .sy-tally .st-say{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted);min-height:3em}
.ohm .sy-tally.hit .st-num{color:var(--red)}
/* display, not opacity. A reveal that depends on a transition completing is a
   reveal that silently fails when the transition does not run. */
.ohm .sy-tally .st-cta{display:none;margin-top:6px;text-align:center}
.ohm .sy-tally.hit .st-cta{display:block}
/* the symptoms themselves become answerable */
.ohm .sy{cursor:pointer;position:relative;transition:border-color .25s,background .25s,transform .25s}
.ohm .sy:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.ohm .sy[aria-pressed="true"]{border-color:var(--red);background:color-mix(in srgb,var(--red) 7%,var(--card))}
.ohm .sy[aria-pressed="true"] i{background:var(--red);color:#fff}
@media (max-width:900px){
  .ohm .sy-top{grid-template-columns:1fr}
}

/* The caption these labels were always meant to have. */
.ohm .pb-lb{display:block;margin:0 0 10px;font-size:10.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ohm .pbc.good .pb-lb{color:var(--red)}

@media (prefers-reduced-motion:reduce){
  /* .kin is a transition, so `animation:none` above never reached it. */
  .ohm .kin > i{transform:none!important;transition:none!important}
  .ohm .kin{overflow:visible}
}
/* Failsafe. If the reveal script has not run within a moment of load, show
   everything rather than leave the page looking empty. */
.ohm.reveal-failsafe .reveal{opacity:1!important;transform:none!important}
.ohm.reveal-failsafe .kin > i{transform:none!important}

/* --- mobile navigation --- */
.ohm .navburger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;margin-left:auto}
.ohm .navburger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .2s}
.ohm .navburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ohm .navburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.ohm .navburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none}
@media (max-width:900px){
  .ohm .navburger{display:flex}
  .mnav{display:block;position:fixed;inset:var(--navh,62px) 0 0;
    font-family:"Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    background:var(--ink);color:#fff;overflow-y:auto;z-index:899;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.3,1),visibility .28s}
  .mnav.on{opacity:1;visibility:visible;transform:none}
  .mnav-in{display:flex;flex-direction:column;padding:18px 22px 40px}
  .mnav-in a{color:#fff;text-decoration:none;font-size:19px;font-weight:650;letter-spacing:-.01em;
    padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.10)}
  .mnav-in a:active{color:var(--red)}
  .mnav-cta{margin-top:22px;background:var(--red);color:#fff!important;text-align:center;
    border-radius:999px;padding:15px 20px!important;border:0!important;font-size:16px!important}
  .mnav-call{text-align:center;border:0!important;color:#a9bad6!important;font-size:15px!important;font-weight:600!important}
  body.mnav-open{overflow:hidden}
}

/* --- mobile layout fixes ---
   Measured on a real 375px viewport against the live build. Each of these was
   clipping content, not merely looking tight. */
@media (max-width:900px){
  /* A long uppercase headline word was wider than the column and got cut off
     mid-letter. Break it instead of clipping it. */
  .ohm h1,.ohm h2,.ohm h3,.ohm-say h2,.ohm .sy-foot h3{overflow-wrap:anywhere}

  /* The sticky dock is position:fixed bottom right. On desktop it sits in the
     margin; on mobile the text column is full width, so the wide "Free guide"
     pill sat directly on top of body copy. Keep the call button, drop the pill,
     and shrink the whole thing. */
  .ohm-dock{gap:9px}
  .ohm-dock .sub{display:none}
  .ohm-dock .call{padding:15px}

  /* Nothing should end up underneath the call button. */
  .ohm-foot{padding-bottom:86px}

  /* The tally footer button carried white-space:nowrap, so its label was 348px
     inside a 299px box and pushed the whole section 19px past the viewport. */
  .sy-foot .btn{white-space:normal;text-align:center;padding-left:18px;padding-right:18px}

  /* The expanded process panel was pinned to a fixed 380px inside a column that
     is about 300px on a phone. */
  .el.on{flex:0 0 auto;width:100%}
  .el{max-width:100%}

  /* Section rhythm. `.ohm section{padding:96px 0}` put 192px between every pair
     of sections, `.ohm section.ohm-mach` added 214px on top, and `.ohm-svc>.w`
     carried another 232px inside. Generous at 1440px, empty screens at 375px.
     Specificity matters here: the originals are `.ohm section` (0,1,1) and
     `.ohm section.ohm-mach` (0,2,1), so these overrides have to match them
     rather than rely on being later in the file. Measured, not guessed. */
  .ohm section{padding:54px 0}
  .ohm section.ohm-mach{padding-top:60px}
  .ohm section.svc-proof{padding-top:54px}
  .ohm .ohm-svc>.w{padding-top:0}

  /* Footer. The top block is a grid that collapsed to 184px + 85px columns, so
     "Website Design & Dev" was wrapping to three lines inside a 58px box, and
     the equal-height rows left a dead gap under the brand paragraph. Give the
     brand the full width, split the link groups evenly, and stop the stretch. */
  .ohm-foot{padding:54px 0 66px}
  .ohm-foot .top{grid-template-columns:1fr 1fr;gap:30px 18px;align-items:start}
  .ohm-foot .top > *:first-child{grid-column:1 / -1}
  .ohm-foot .top a{display:inline-block;padding:3px 0}
  .ohm-foot .bar{flex-direction:column;align-items:flex-start;gap:6px}
}

/* Article + legal typography. Kept in the site's own tokens so a blog post and
   a service page read as one website. */
.ohm .prose-wrap{max-width:1180px;margin:0 auto;padding:clamp(90px,10vw,140px) clamp(20px,5vw,40px) clamp(60px,8vw,110px)}
.ohm .prose-head{max-width:820px;margin:0 0 clamp(28px,4vw,48px)}
.ohm .prose-kicker{color:var(--red);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:12px;margin:0 0 14px}
.ohm .prose-head h1{font-size:clamp(32px,5vw,58px);line-height:1.04;letter-spacing:-.02em;margin:0 0 16px;text-wrap:balance}
.ohm .prose-meta{color:var(--muted);font-size:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ohm .prose-meta span:not(:last-child):after{content:"·";margin-left:10px;opacity:.6}
.ohm .prose-hero{border-radius:18px;overflow:hidden;margin:0 0 clamp(28px,4vw,44px);border:1px solid var(--hair);background:var(--surface)}
.ohm .prose-hero img{display:block;width:100%;height:auto}
.ohm .prose{max-width:760px;font-size:clamp(16.5px,1.15vw,18px);line-height:1.75;color:var(--text)}
.ohm .prose p{margin:0 0 1.15em}
.ohm .prose h2{font-size:clamp(24px,2.6vw,34px);line-height:1.15;letter-spacing:-.015em;margin:2em 0 .6em}
.ohm .prose h3{font-size:clamp(19px,2vw,24px);line-height:1.25;margin:1.7em 0 .5em}
.ohm .prose ul,.ohm .prose ol{margin:0 0 1.2em;padding-left:1.35em}
.ohm .prose li{margin:0 0 .5em}
.ohm .prose a{color:var(--red);text-underline-offset:3px}
.ohm .prose strong{font-weight:750}
.ohm .prose img{max-width:100%;height:auto;border-radius:14px;margin:1.4em 0}
.ohm .prose blockquote{margin:1.6em 0;padding:2px 0 2px 20px;border-left:3px solid var(--red);color:var(--muted);font-style:italic}
.ohm .prose-cta{margin:clamp(44px,6vw,72px) 0 0;padding:clamp(26px,3.4vw,40px);border-radius:18px;
  background:linear-gradient(135deg,var(--navy),var(--ink));color:#fff;max-width:760px}
.ohm .prose-cta h3{margin:0 0 10px;font-size:clamp(21px,2.2vw,28px);line-height:1.2;color:#fff}
.ohm .prose-cta p{margin:0 0 18px;color:#c8d5ea;font-size:16px;line-height:1.6}
.ohm .prose-cta .btn{display:inline-block}
/* blog index */
.ohm .bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(18px,2.4vw,30px);max-width:1180px}
.ohm .bl-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--hair);border-radius:16px;overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.ohm .bl-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(10,18,32,.5)}
.ohm .bl-card .ph{aspect-ratio:16/9;background:var(--surface);overflow:hidden}
.ohm .bl-card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.ohm .bl-card .bd{padding:20px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.ohm .bl-card h2{font-size:19px;line-height:1.3;margin:0;letter-spacing:-.01em}
.ohm .bl-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.ohm .bl-card .dt{margin-top:auto;color:var(--muted);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
@media (max-width:640px){ .ohm .prose-wrap{padding-top:80px} }

/* seo_fix: image aspect. These rules set width and no height, and every
   image now carries width/height attributes, so without this the browser
   stretches them to the attribute height. */
.lb-img,.sauce-pic img,.cs-lb img{height:auto}