/* ==========================================================================
   Omoikane landing page — new hero design (self-contained, home page only)
   Palette: navy #1A2530 · off-white #F7F9F9 · azure #3A7CA5 · coral #D96C5B
            · gold #ECC15A · sage #819E8E
   Type: Instrument Serif (headings) · Plus Jakarta Sans (body)
   Fonts are self-hosted (no third-party requests).
   ========================================================================== */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans.woff2') format('woff2');
}

/* ---- keyframes (carried over from the design) ---- */
@keyframes omk-spin{to{transform:rotate(360deg)}}
@keyframes omk-twinkle{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes omk-hintbob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}
@keyframes omk-cloudsway{0%,100%{transform:translateX(0)}50%{transform:translateX(20px)}}
@keyframes omk-flick{0%,100%{opacity:1}48%{opacity:1}52%{opacity:.25}}
@keyframes omk-burstpulse{0%,100%{opacity:.9}50%{opacity:.62}}
@keyframes omk-winpulse{0%{opacity:.85;transform:scale(.5)}70%{opacity:0;transform:scale(2.5)}100%{opacity:0;transform:scale(2.5)}}
@keyframes omk-bubblePop{0%{opacity:0;transform:translate(-50%,-100%) scale(.3)}10%{opacity:1;transform:translate(-50%,-100%) scale(1.08)}17%{transform:translate(-50%,-100%) scale(1)}84%{opacity:1;transform:translate(-50%,-100%) scale(1)}100%{opacity:0;transform:translate(-50%,-100%) scale(.85)}}
@keyframes omk-transferFly{0%{offset-distance:0%;opacity:0;transform:scale(.7)}12%{opacity:1;transform:scale(1.12)}22%{transform:scale(1)}86%{offset-distance:100%;opacity:1;transform:scale(1)}100%{offset-distance:100%;opacity:0;transform:scale(.7)}}
@keyframes omk-rowin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ---- page base (home only) ---- */
body.omk-home{margin:0;padding:0;background:#0b1622;font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.omk-home main{max-width:none!important;margin:0!important;padding:0!important}
.omk *{box-sizing:border-box}
.omk-serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400}

/* ---- HERO section ---- */
.omk-hero{position:relative;width:100%;height:100vh;min-height:680px;overflow:hidden;background:#F7F9F9}
.omk-hero__bg{position:absolute;inset:0;overflow:hidden;background:#F7F9F9}
#omk-scene{position:absolute;inset:0}
.omk-hero__dots{position:absolute;inset:0;background-image:radial-gradient(circle, rgba(26,37,48,.45) 1.4px, transparent 1.6px);background-size:11px 11px;opacity:.12;-webkit-mask-image:radial-gradient(125% 95% at 50% 80%, transparent 36%, #000 94%);mask-image:radial-gradient(125% 95% at 50% 80%, transparent 36%, #000 94%);pointer-events:none}
/* legibility scrims so the headline reads over the scene */
.omk-hero__scrim{position:absolute;inset:0;background:linear-gradient(96deg,rgba(247,249,249,.92) 0%,rgba(247,249,249,.6) 32%,rgba(247,249,249,.12) 60%,rgba(247,249,249,0) 76%);pointer-events:none}
.omk-hero__scrim-top{position:absolute;top:0;left:0;right:0;height:150px;background:linear-gradient(180deg,rgba(247,249,249,.85),rgba(247,249,249,0));pointer-events:none}

/* bubbles layer */
#omk-bubbles{position:absolute;inset:0;z-index:2;pointer-events:none}
.omk-bubble{position:relative;background:#FFFFFF;border:2.5px solid #1A2530;border-radius:16px;padding:8px 15px;font-weight:700;font-size:14px;color:#1A2530;white-space:nowrap;box-shadow:3px 3px 0 rgba(26,37,48,.2)}
.omk-bubble::after{content:"";position:absolute;left:22px;bottom:-9px;width:14px;height:14px;background:#FFFFFF;border-right:2.5px solid #1A2530;border-bottom:2.5px solid #1A2530;transform:rotate(45deg)}

/* top nav overlaid on the hero */
.omk-nav{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:34px 56px;z-index:3}
.omk-nav__brand{font-family:'Instrument Serif',serif;font-size:27px;color:#1A2530;text-decoration:none}
.omk-nav__links{display:flex;align-items:center;gap:30px;margin-right:130px}
.omk-nav__links a{font-size:14px;font-weight:600;letter-spacing:.02em;color:#1A2530;text-decoration:none;white-space:nowrap;padding:6px 0}
.omk-nav__links a:hover{color:#3A7CA5}

/* hero copy */
.omk-hero__copy-wrap{position:absolute;inset:0;display:flex;align-items:center;z-index:2}
.omk-hero__copy{padding:0 56px;max-width:920px}
.omk-eyebrow{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#33708F;margin-bottom:22px}
.omk-hero__h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:62px;line-height:1.08;letter-spacing:-.015em;color:#1A2530;margin:0}
.omk-hero__h1 em{font-style:italic}
.omk-hero__sub{font-size:21px;line-height:1.55;color:rgba(26,37,48,.82);margin:30px 0 0 0;max-width:560px;text-wrap:pretty}

/* scroll hint */
.omk-scroll{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;z-index:3;color:#1A2530}
.omk-scroll span{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.omk-scroll svg{animation:omk-hintbob 2s ease-in-out infinite}

/* ---- sign-in corner (expands from the top-right) ---- */
.omk-auth{position:absolute;top:0;right:0;width:170px;height:170px;background:#B0492F;border-radius:0 0 0 100%;overflow:hidden;z-index:30;cursor:pointer;box-shadow:0 0 0 rgba(0,0,0,0);transition:width .62s cubic-bezier(.66,0,.18,1),height .62s cubic-bezier(.66,0,.18,1),border-radius .62s cubic-bezier(.66,0,.18,1),box-shadow .62s ease}
.omk-auth.is-open{width:470px;height:648px;max-width:94vw;border-radius:0 0 0 46px;cursor:default;box-shadow:0 34px 90px -22px rgba(26,37,48,.6)}
.omk-auth__label{position:absolute;top:0;right:0;width:170px;height:170px;display:flex;align-items:center;justify-content:center;text-decoration:none;opacity:1;transition:opacity .28s ease}
.omk-auth.is-open .omk-auth__label{opacity:0;pointer-events:none}
.omk-auth__label span{transform:translate(16px,-16px);color:#F7F9F9;font-size:16px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.omk-auth__panel{position:absolute;inset:0;padding:34px 34px 30px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;transition:opacity .42s ease .16s,transform .52s ease .16s,visibility .42s ease .16s}
.omk-auth.is-open .omk-auth__panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.omk-auth__scrim{position:absolute;inset:0;z-index:29;background:rgba(26,37,48,0);opacity:0;pointer-events:none;transition:opacity .5s ease}
.omk-auth__scrim.is-open{background:rgba(26,37,48,.34);opacity:1;pointer-events:auto}
.omk-auth__eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,249,249,.82);margin-bottom:7px}
.omk-auth__title{font-family:'Instrument Serif',serif;font-weight:400;font-size:33px;line-height:1;color:#F7F9F9;margin:0}
.omk-auth__close{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:rgba(247,249,249,.16);color:#F7F9F9;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.omk-auth__close:hover{background:rgba(247,249,249,.3)}
.omk-auth__lead{font-size:13.5px;line-height:1.5;color:rgba(247,249,249,.86);margin:13px 0 22px}
.omk-auth__email{width:100%;background:#FFFFFF;border:0;border-radius:12px;padding:13px 15px;font-size:14px;font-family:inherit;color:#1A2530;outline:none}
.omk-auth__submit{width:100%;border:0;border-radius:12px;padding:13px 15px;background:#1A2530;color:#F7F9F9;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.omk-auth__submit:hover{background:#0f1922}
.omk-auth__div{display:flex;align-items:center;gap:12px;margin:18px 0}
.omk-auth__div::before,.omk-auth__div::after{content:"";flex:1;height:1px;background:rgba(247,249,249,.32)}
.omk-auth__div span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,249,249,.82)}
.omk-auth__oauth{display:flex;flex-direction:column;gap:10px}
.omk-auth__oauth a{display:flex;align-items:center;gap:13px;background:#FFFFFF;border-radius:12px;padding:12px 16px;text-decoration:none;color:#1A2530;font-weight:600;font-size:14px;box-shadow:0 2px 10px rgba(26,37,48,.12);transition:transform .15s ease}
.omk-auth__oauth a:hover{transform:translateY(-1px)}

/* ---- "By design" section ---- */
.omk-design{position:relative;overflow:hidden;background:#1A2530;color:#F7F9F9;padding:94px 56px 130px}
.omk-design__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.omk-design__inner{position:relative;z-index:1;max-width:1120px;margin:0 auto}
.omk-design__glow{position:absolute;top:-78px;left:-90px;width:680px;height:430px;background:radial-gradient(50% 50% at 50% 50%, rgba(58,124,165,.5) 0%, rgba(58,124,165,.18) 46%, rgba(58,124,165,0) 72%);filter:blur(28px);border-radius:50%;pointer-events:none}
.omk-design__eyebrow{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#9DB3A6;margin-bottom:18px;text-shadow:0 1px 10px #1A2530,0 0 3px #1A2530}
.omk-design__h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:52px;line-height:1.04;letter-spacing:-.01em;margin:0 0 54px;max-width:760px;text-shadow:0 1px 12px #1A2530,0 0 4px #1A2530}
.omk-promises{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.omk-promise{display:flex;flex-direction:column;gap:10px}
.omk-promise__rule{width:30px;height:3px;background:#D96C5B;border-radius:2px}
.omk-promise__h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:25px;margin:6px 0 0;color:#F7F9F9;text-shadow:0 1px 10px #1A2530,0 0 3px #1A2530}
.omk-promise__body{position:relative}
.omk-promise__body::before{content:"";position:absolute;inset:-10px -16px;background:rgba(78,97,116,.85);border:1px solid rgba(255,255,255,.08);border-radius:12px;pointer-events:none}
.omk-promise__body p{position:relative;font-size:15px;line-height:1.62;color:#CBD6D0;margin:0;text-wrap:pretty}

/* skill-chip columns (animated background of the By-design section) */
.omk-skillcol{position:absolute;top:0;bottom:0;width:136px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent)}
.omk-skillcol__stack{display:flex;flex-direction:column;padding-top:10px}
.omk-chipwrap{overflow:hidden;transition:max-height .45s cubic-bezier(.3,.8,.3,1),opacity .4s ease,margin-bottom .45s ease,transform .4s ease;max-height:40px;opacity:1;margin-bottom:9px}
.omk-chipwrap.is-collapsed{max-height:0;opacity:0;margin-bottom:0;transform:scale(.85)}
.omk-chip{font-size:12px;font-weight:700;border-radius:8px;padding:8px 10px;white-space:nowrap;text-align:center;color:#86AEC9;background:rgba(127,167,194,.06);border:1px solid rgba(127,167,194,.2);transition:background .5s ease,border-color .5s ease,color .5s ease,box-shadow .5s ease}
.omk-chip.is-hot{color:#F7F9F9;background:#172230;border:2px solid #D96C5B;box-shadow:0 0 14px rgba(217,108,91,.55)}
.omk-flyer{position:absolute;left:0;top:0;z-index:5;color:#F7F9F9;background:#172230;border:2px solid #D96C5B;border-radius:9px;padding:7px 12px;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 0 16px rgba(217,108,91,.6);opacity:0;animation:omk-transferFly .82s cubic-bezier(.4,0,.5,1) forwards}

/* ---- pop-up panels (About / How / Contact / Privacy / Terms / Imprint) ---- */
.omk-modal-backdrop{position:fixed;inset:0;z-index:60;background:rgba(12,18,26,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);opacity:0;pointer-events:none;transition:opacity .4s ease,background .4s ease}
.omk-modal-backdrop.is-open{background:rgba(12,18,26,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:1;pointer-events:auto}
.omk-modal{position:fixed;inset:0;z-index:61;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .38s ease,visibility .38s ease}
.omk-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.omk-modal__panel{position:relative;display:flex;flex-direction:column;width:min(960px,94vw);max-height:88vh;background:#F7F9F9;border-radius:18px;overflow:hidden;box-shadow:0 44px 120px -30px rgba(12,18,26,.7);transform:scale(.94) translateY(10px);transition:transform .5s cubic-bezier(.5,0,.14,1)}
.omk-modal.is-open .omk-modal__panel{transform:scale(1) translateY(0)}
.omk-modal--dark .omk-modal__panel{background:#1A2530;border:1px solid rgba(217,108,91,.28)}
.omk-modal--wide .omk-modal__panel{width:min(1120px,94vw)}
.omk-modal__x{position:absolute;top:22px;right:22px;z-index:6;flex:none;width:38px;height:38px;border:0;border-radius:50%;background:rgba(26,37,48,.08);color:#1A2530;font-size:21px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.omk-modal__x:hover{background:rgba(217,108,91,.24)}
.omk-modal--dark .omk-modal__x{background:rgba(247,249,249,.14);color:#F7F9F9}
.omk-modal--dark .omk-modal__x:hover{background:rgba(217,108,91,.5)}
.omk-modal__head{flex:none;padding:30px 42px 20px}
.omk-modal__body{flex:1;overflow-y:auto;padding:24px 42px 42px}
.omk-modal__eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:9px}
.omk-modal__title{font-family:'Instrument Serif',serif;font-weight:400;font-size:38px;line-height:1;margin:0}
.omk-modal--dark .omk-modal__title{color:#F7F9F9}
.omk-modal__rule{height:1px;background:rgba(26,37,48,.1);margin:0}
.omk-modal--dark .omk-modal__rule{background:rgba(247,249,249,.1)}
@media (max-width:820px){
  .omk-modal__head{padding:24px 22px 16px}
  .omk-modal__body{padding:18px 22px 30px}
  .omk-modal__title{font-size:30px}
}

/* ---- homepage footer (design version) ---- */
.omk-foot{background:#1A2530;color:#F7F9F9;padding:46px 56px 42px;border-top:1px solid rgba(247,249,249,.12)}
.omk-foot__inner{max-width:1320px;margin:0 auto}
.omk-foot__top{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start;padding-bottom:30px;border-bottom:1px solid rgba(247,249,249,.16)}
.omk-foot__brand{font-family:'Instrument Serif',serif;font-size:26px;color:#F7F9F9}
.omk-foot__tag{font-size:13px;color:#9DB3A6}
.omk-foot__links{display:flex;flex-wrap:wrap;gap:32px}
.omk-foot__links a{font-size:14px;font-weight:600;color:#F7F9F9;text-decoration:none;cursor:pointer}
.omk-foot__links a:hover{color:#ECC15A}
.omk-foot__bottom{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;padding-top:26px}
.omk-foot__social{display:flex;align-items:center;gap:18px}
.omk-foot__social a{display:inline-flex;opacity:.85}
.omk-foot__social a:hover{opacity:1}
.omk-foot__lang{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.04em}
.omk-foot__lang a{color:#819E8E;text-decoration:none}
.omk-foot__lang a:hover{color:#ECC15A}
.omk-foot__lang .sep{color:rgba(247,249,249,.28)}
@media (max-width:820px){.omk-foot{padding:34px 22px}}

/* ---- responsive ---- */
@media (max-width:820px){
  .omk-nav{padding:20px 22px}
  .omk-nav__links{gap:16px;margin-right:0}
  .omk-nav__links a{font-size:13px}
  .omk-hero__copy{padding:0 22px}
  .omk-hero__h1{font-size:40px}
  .omk-hero__sub{font-size:17px}
  .omk-design{padding:64px 22px 90px}
  .omk-design__h2{font-size:34px;margin-bottom:36px}
  .omk-promises{grid-template-columns:1fr;gap:34px}
  .omk-auth{width:132px;height:132px}
  .omk-auth__label{width:132px;height:132px}
  .omk-auth__label span{font-size:14px}
  .omk-foot{padding:30px 22px}
}
/* OMOIKANE-1507 — reduced-motion coverage was incomplete.
   The previous rule set `animation:none` on four selectors and stopped there.
   Two gaps, both measured against this file:

     1. This stylesheet has 10 `transition:` declarations and NONE of them were
        disabled. `animation:none` does not touch transitions, so a
        reduced-motion user still got every panel slide, chip collapse, modal
        translate and scrim fade. That is the majority of the motion on the
        landing page.
     2. `.omk-flyer` (line ~130) carries `animation:omk-transferFly` and is
        created in JS via `document.createElement`, so whether the old
        `#omk-scene *` selector reached it depended on where the script chose to
        append it. Named explicitly rather than left to inference.

   `transition:none` rather than `transition-duration:0s` so a hover state that
   only animates a transform is not left half-applied. */
@media (prefers-reduced-motion:reduce){
  .omk-scroll svg,.omk-chip,.omk-chipwrap,.omk-flyer,#omk-scene *{
    animation:none!important
  }
  .omk-auth,.omk-auth__label,.omk-auth__panel,.omk-auth__scrim,
  .omk-auth__oauth a,.omk-chipwrap,.omk-chip,
  .omk-modal-backdrop,.omk-modal,.omk-modal__panel,
  #omk-scene *{
    transition:none!important
  }
}

/* ==========================================================================
   Responsive hardening (2026-07-15) — cross-device compatibility pass.
   The modal bodies below use inline grid-template-columns; external media
   queries can't reach inline styles without attribute selectors + !important.
   These rules collapse multi-column layouts on small screens so no content
   is clipped by the panel's overflow:hidden. Desktop layout is untouched.
   ========================================================================== */

/* --- Landing modals: collapse inline grids so nothing overflows/clips --- */
@media (max-width:640px){
  .omk-modal__body [style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }
  /* fixed-width definition-row labels (retention / registration tables) */
  .omk-modal__body [style*="width:200px"],
  .omk-modal__body [style*="width:230px"]{
    width:auto !important;
  }
  /* flex/grid items default to min-width:auto and won't shrink below their
     content — that floor is what pushes a collapsed column past the panel.
     Zero it so columns + email rows can shrink to fit. */
  .omk-modal__body *{min-width:0 !important}
  /* long emails / codes must break so inline badges (e.g. "Soon") don't
     get pushed past the panel edge (contact modal) */
  .omk-modal__body{overflow-wrap:break-word}
  .omk-modal__body a,
  .omk-modal__body code{overflow-wrap:anywhere;word-break:break-word}
  /* tighten oversized modal head/body gutters on the smallest screens */
  .omk-modal{padding:14px}
}
/* How-it-works: 4 steps -> 2x2 on tablets (4-across needs ~768px of body) */
@media (min-width:641px) and (max-width:960px){
  #omk-modal-how .omk-modal__body [style*="grid-template-columns"]{
    grid-template-columns:1fr 1fr !important;
  }
}

/* --- Landing hero top nav: stop brand/links colliding on phones + tablets ---

   OMOIKANE-1323 (2026-07-28): this breakpoint was 600px and left a live dead
   link across the whole tablet class.

   The nav clears the auth quarter-disc with `.omk-nav__links{margin-right:130px}`
   at desktop width. The `@media (max-width:820px)` block above resets that to
   `margin-right:0` while `.omk-auth` is still 132px wide — so from 601px to
   820px the right-aligned links run under the disc. `.omk-auth` sits at
   `z-index:30` against the nav's `z-index:3`, so the disc wins every hit-test:
   "Contact" was not merely hard to read, it was unclickable.

   Measured on live https://omoikane.coach/ before this fix, via multi-point
   elementFromPoint hit-testing (6 points per link, border-radius aware):
     601px  Contact 6/6 points covered by SPAN "My Office"
     700px  Contact 6/6 covered
     768px  Contact 6/6 covered, "How it works" 2-3/6 covered   (iPad portrait)
     820px  Contact 6/6 covered                                  (iPad Air)
   Clear again only at >=900px. Screenshots at 768/820 render the bar as
   "About  How it w" with Contact entirely invisible.

   Why it escaped the original responsive pass: that pass's acceptance metric
   was "0 horizontal overflow across 337 records". Occlusion produces ZERO
   overflow — the links are laid out correctly and simply have an opaque
   element painted over them. The metric could only ever have caught clipping,
   never covering, so 768px being in the audit matrix did not help.

   The fix reuses the phone treatment rather than inventing a tablet one:
   wrap the links onto their own row. On row 2 they start at y~60px, where a
   132px disc reaches only ~117px inward, and the three links occupy ~260px
   from the left edge — clear at every width in the band. Reserving
   `margin-right` instead was rejected: at 601px it leaves ~297px for three
   links plus the brand, which is too tight to survive a copy change. */
@media (max-width:820px){
  .omk-nav{flex-wrap:wrap;align-items:flex-start;padding:16px 20px}
  .omk-nav__brand{flex:0 0 auto;font-size:24px;line-height:1.1}
  .omk-nav__links{
    flex:1 0 100%;order:2;margin:9px 0 0;gap:16px;
    font-size:13px;flex-wrap:wrap
  }
  .omk-nav__links a{padding:5px 0}          /* >=24px tap target */
  /* shrink the auth corner so the wrapped links clear the quarter-circle */
  .omk-auth{width:108px;height:108px}
  .omk-auth__label{width:108px;height:108px}
  .omk-auth__label span{transform:translate(8px,-8px);font-size:12.5px}
  .omk-auth.is-open{width:470px;height:648px;max-width:94vw}
}

/* The animated job-title bubbles are anchored to the right 54-96% of the
   hero — clear of the left-aligned copy on desktop, but they land on the
   near-full-width headline on phones. Drop the bubble layer below the copy
   (still above the scene) so the headline stays readable; bubbles pass
   behind the text. Nav stays z-index:3 so its links remain clickable. */
@media (max-width:820px){
  #omk-bubbles{z-index:1}
  .omk-hero__copy-wrap{z-index:2}
}


/* OMOIKANE www-audit 2026-07-31 — small-screen legibility of the landing:
   the animated skill-chip columns garble the 'Three promises' headings at
   phone/tablet width, and the floating job-title bubbles overlap the hero
   copy and clip off-screen. Both are decoration; drop them on small screens
   so the headline + promises stay clean. Desktop is untouched. */
@media (max-width:820px){ .omk-skillcol{ display:none } }
@media (max-width:600px){ #omk-bubbles{ display:none } }


/* OMOIKANE WCAG 2.2.2 — pause control for the landing's decorative motion.
   Unobtrusive fixed pill; keyboard-focusable; boundary #33708F = 5.16:1. When
   paused, freeze any in-flight animation in the decorative regions (the JS
   flag stops new bubbles/chip transfers). */
.omk-motion-toggle{position:fixed;bottom:14px;right:14px;z-index:40;font-size:12px;font-weight:600;letter-spacing:.02em;color:#1A2530;background:rgba(247,249,249,.94);border:1.5px solid #33708F;border-radius:20px;padding:7px 14px;cursor:pointer;box-shadow:0 2px 8px rgba(26,37,48,.18)}
.omk-motion-toggle:hover{background:#FFFFFF}
.omk-motion-toggle:focus-visible{outline:2px solid #33708F;outline-offset:2px}
#omk-bubbles.is-motion-paused *,.omk-design__bg.is-motion-paused *{animation-play-state:paused!important}