/* ════════════════════════════════════════════════════════════════
   Omerica Studios — Tabbed navigation + mobile-overflow fixes (v2).
   Layers on top of omerica.css. Progressive enhancement: without JS,
   every .tab-page stays visible (a normal scroll page, good for SEO);
   tabs.js adds body.js-tabs and shows one page at a time.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. MOBILE OVERFLOW FIX ──────────────────────────────────────
   Root cause of the "weird alignment": the oversized hero title was
   wider than the phone, pushing the whole document past the viewport
   and clipping every section on the right. Clamp the page width and
   bring the big type into a size that fits. */
html{overflow-x:clip;}
body{overflow-x:clip;max-width:100%;}
.hero-name,.hero-tagline,.sec-head h2,.scope-guard h2,.svc h3,
.launch-card h3,.svc-detail h3{overflow-wrap:break-word;}

@media (max-width:600px){
  .hero{padding-left:20px;padding-right:20px;}
  .hero .hero-name{font-size:clamp(2.3rem,11vw,3.3rem);line-height:.96;}
  .hero .hero-tagline{font-size:clamp(1.12rem,5vw,1.55rem);max-width:92vw;}
  .hero .hero-lede{max-width:92vw;}
  .hero-feature.video-frame{width:100%;}
  .sec-head{padding-left:4px;padding-right:4px;}
}
@media (max-width:420px){
  .hero .hero-name{font-size:clamp(2.05rem,12vw,2.9rem);}
}

/* ── 2. TAB PAGES (show one at a time when JS is on) ─────────────── */
body.js-tabs .tab-page{display:none;}
body.js-tabs .tab-page.is-active{display:block;animation:tabIn .26s cubic-bezier(.4,0,.2,1);}
@keyframes tabIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  body.js-tabs .tab-page.is-active{animation:none;}
}

/* ── 3. BACK BAR (appears on every tab except home) ─────────────── */
.tab-backbar{
  background:linear-gradient(135deg,rgba(14,46,29,.97),rgba(14,46,29,.9));
  border-bottom:1px solid rgba(201,160,73,.4);
}
.tab-backbar[hidden]{display:none;}
.tab-backbar__inner{
  max-width:1180px;margin:0 auto;padding:11px 28px;
  display:flex;align-items:center;gap:16px;
}
.tab-back{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(201,160,73,.12);
  border:1px solid rgba(201,160,73,.5);
  color:var(--paper);
  font-family:var(--display);font-size:11px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.tab-back span{font-size:15px;line-height:1;transform:translateY(-.5px);}
.tab-back:hover{background:rgba(201,160,73,.22);border-color:var(--gold);transform:translateX(-2px);}
.tab-backbar__title{
  font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
@media (max-width:560px){
  .tab-backbar__inner{padding:10px 18px;gap:12px;}
  .tab-backbar__title{display:none;}
}

/* ── 4. TAB LAUNCHER GRID (home) ────────────────────────────────── */
.launch{padding:clamp(54px,7vw,92px) 28px;background:var(--cream-2);border-top:1px solid var(--rule-cobalt);}
.launch .wrap{padding:0;}
.launch-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:1100px;margin:0 auto;
}
.launch-card{
  position:relative;display:flex;flex-direction:column;gap:8px;
  padding:26px 24px 22px;text-decoration:none;
  background:var(--paper);border:1px solid var(--rule-cobalt);
  box-shadow:0 14px 36px rgba(14,46,29,.07);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  overflow:hidden;
}
.launch-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--gold);transform:scaleY(0);transform-origin:top;
  transition:transform .25s ease;
}
.launch-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 22px 50px rgba(14,46,29,.14);}
.launch-card:hover::before{transform:scaleY(1);}
.launch-card__num{
  font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.28em;color:var(--ottoman);font-variant-numeric:lining-nums tabular-nums;
}
.launch-card h3{font-family:var(--serif);font-size:1.5rem;margin:2px 0 2px;color:var(--ink);}
.launch-card p{font-size:.92rem;color:var(--ink-2);line-height:1.55;margin:0;flex:1;}
.launch-card__go{
  margin-top:8px;font-family:var(--display);font-size:10px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ottoman);
}
.launch-card--cta{background:var(--cobalt-deep);border-color:var(--gold);}
.launch-card--cta h3{color:var(--paper);}
.launch-card--cta p{color:rgba(251,246,233,.8);}
.launch-card--cta .launch-card__num,
.launch-card--cta .launch-card__go{color:var(--gold);}
@media (max-width:860px){.launch-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:540px){.launch-grid{grid-template-columns:1fr;}.launch{padding-left:20px;padding-right:20px;}}

/* ── 5. DASHBOARD "what it entails" panel ───────────────────────── */
.svc-detail{
  margin-top:26px;background:var(--paper);
  border:1px solid var(--rule-cobalt);
  box-shadow:0 16px 42px rgba(14,46,29,.07);
  padding:clamp(26px,4vw,44px);
}
.svc-detail__head{max-width:640px;margin:0 0 22px;}
.svc-detail__head h3{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);margin:8px 0 10px;}
.svc-detail__head h3 em{color:var(--ottoman);font-style:italic;}
.svc-detail__head p{color:var(--ink-2);line-height:1.6;margin:0;}
.svc-detail__steps{
  list-style:none;counter-reset:dash;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px;
}
.svc-detail__steps li{
  counter-increment:dash;position:relative;padding-left:42px;
  color:var(--ink-2);line-height:1.55;font-size:.97rem;
}
.svc-detail__steps li::before{
  content:counter(dash,decimal-leading-zero);
  position:absolute;left:0;top:-2px;
  font-family:var(--display);font-size:13px;font-weight:800;
  color:var(--gold);font-variant-numeric:lining-nums tabular-nums;
  border:1px solid rgba(201,160,73,.5);border-radius:8px;
  width:28px;height:28px;display:grid;place-items:center;
}
.svc-detail__steps li strong{color:var(--ink);font-weight:700;}
@media (max-width:680px){.svc-detail__steps{grid-template-columns:1fr;}}

/* ── 6. TAB FOOTER CTA (inside each tab) ────────────────────────── */
.tab-foot{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  max-width:1180px;margin:0 auto;padding:clamp(36px,5vw,56px) 28px 8px;
}
.tab-foot .btn-primary,.tab-foot .btn-ghost{text-decoration:none;}
/* the dark tabs (process/contact) get a light-friendly foot */
.tab-page#tab-process .tab-foot,.tab-page#tab-contact .tab-foot{padding-top:8px;}
@media (max-width:560px){
  .tab-foot{flex-direction:column;align-items:stretch;width:min(360px,100%);}
  .tab-foot .btn-primary,.tab-foot .btn-ghost{width:100%;text-align:center;}
}

/* ── 7. nav active state for the current tab ────────────────────── */
.nav-links a.tab-current{color:var(--ottoman);}
.nav-links a.tab-current::after{
  content:"";display:block;height:2px;margin-top:3px;
  background:var(--gold);border-radius:2px;
}

/* ── service-card sample-demo links + Work privacy note (v2) ─────── */
.svc .svc-demo{display:inline-block;margin-top:15px;font-family:var(--display);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ottoman);text-decoration:none;border-bottom:1px solid rgba(201,160,73,.55);padding-bottom:2px;transition:color .2s ease,border-color .2s ease;}
.svc .svc-demo:hover{color:var(--gold);border-color:var(--gold);}
.work-privacy{max-width:62ch;margin:14px auto 0;font-size:.9rem;line-height:1.5;color:var(--ink-3);font-style:italic;}

/* ── portfolio section dividers (Sample demos vs Live builds) ────── */
.pf-section{margin:6px 0 4px;text-align:center;}
.pf-section:not(:first-child){margin-top:30px;padding-top:26px;border-top:1px solid var(--rule-cobalt);}
.pf-section__eyebrow{display:inline-block;font-family:var(--display);font-size:10.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);background:rgba(201,160,73,.12);border:1px solid rgba(201,160,73,.4);border-radius:999px;padding:6px 14px;margin-bottom:10px;}
.pf-section__title{font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.4rem);font-weight:500;color:var(--ink-2);max-width:60ch;margin:0 auto;line-height:1.35;}
.portfolio-accordion .pf-section + .portfolio-group{margin-top:6px;}

/* ── persistent collapsible side tab-rail (v4) ──────────────────── */
.tabrail{position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:95;display:flex;flex-direction:column;gap:5px;
  background:rgba(14,46,29,.96);border:1px solid rgba(201,160,73,.42);border-radius:16px;padding:8px;
  box-shadow:0 18px 44px rgba(14,46,29,.30);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:box-shadow .2s ease;}
.tabrail__toggle{display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;width:38px;height:32px;margin:0 auto 3px;background:none;border:0;cursor:pointer;border-radius:9px;}
.tabrail__toggle span{display:block;width:18px;height:2px;background:var(--gold);border-radius:2px;}
.tabrail__toggle:hover{background:rgba(201,160,73,.16);}
.tabrail__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;}
.tabrail__list a{display:flex;align-items:center;gap:11px;padding:9px;border-radius:11px;text-decoration:none;color:rgba(251,246,233,.85);font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:background .18s,color .18s;}
.tabrail__ic{width:24px;min-width:24px;height:24px;text-align:center;color:var(--gold);font-size:15px;line-height:1;}
img.tabrail__ic{object-fit:contain;display:block;}
.tabrail__txt{max-width:0;opacity:0;overflow:hidden;transition:max-width .25s ease,opacity .2s ease;}
.tabrail__list a:hover{background:rgba(201,160,73,.16);color:#fff;}
.tabrail__list a.tab-current{background:rgba(201,160,73,.22);color:#fff;}
.tabrail__list a.tab-current .tabrail__ic{color:#e6c87a;}
.tabrail__cta{background:var(--gold);color:var(--cobalt-deep)!important;margin-top:3px;}
.tabrail__cta .tabrail__ic{color:var(--cobalt-deep);}
.tabrail__cta:hover{background:#e6c87a;color:var(--cobalt-deep)!important;}
.tabrail:hover .tabrail__txt,.tabrail.open .tabrail__txt{max-width:170px;opacity:1;}
.tabrail:hover,.tabrail.open{box-shadow:0 26px 60px rgba(14,46,29,.42);}
@media (max-width:1100px){.tabrail{display:none;}}
@media (prefers-reduced-motion:reduce){.tabrail__txt{transition:none;}}

/* ── global "Start a Project" block (bottom of every tab) ───────── */
.global-contact{border-top:1px solid rgba(201,160,73,.3);}

/* ── About credentials + honors (v5) ────────────────────────────── */
.creds{max-width:1040px;margin:40px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left;}
.creds__col{background:var(--paper);border:1px solid var(--rule-cobalt);border-radius:14px;padding:22px;box-shadow:0 12px 32px rgba(14,46,29,.06);}
.creds__h{font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ottoman);margin:0 0 13px;}
.creds__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.creds__list li{position:relative;padding-left:18px;font-size:.92rem;color:var(--ink-2);line-height:1.45;}
.creds__list li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--gold);}
.creds-links{max-width:1040px;margin:22px auto 0;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.creds-links a{font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ottoman);text-decoration:none;border:1px solid var(--rule-cobalt);border-radius:999px;padding:10px 17px;background:var(--paper);transition:border-color .2s,color .2s,background .2s;}
.creds-links a:hover{border-color:var(--gold);color:var(--gold);}
@media (max-width:820px){.creds{grid-template-columns:1fr;}}

/* ── v6: definitive mobile overflow fix (QA HIGH) ───────────────────
   Root cause: on phones the hero box was sizing to the unwrapped H1,
   pushing the whole content past the viewport (masked by overflow-x:clip).
   Constrain the inner containers to the viewport so everything wraps. */
.hero,.hero-inner{max-width:100%;}
.hero-inner{margin-left:auto;margin-right:auto;}
.hero .hero-name,.hero .hero-tagline,.hero .hero-lede{max-width:100%;overflow-wrap:break-word;}
.tab-page,.tab-page > section,.global-contact,.global-contact > section{max-width:100%;overflow-x:clip;}
@media (max-width:760px){
  .hero-inner{width:100%;}
}
@media (max-width:600px){
  .hero .hero-name{font-size:clamp(1.8rem,9.5vw,2.5rem);line-height:.98;}
  .hero .hero-tagline{font-size:clamp(1.05rem,4.6vw,1.45rem);}
}
@media (max-width:380px){
  .hero .hero-name{font-size:clamp(1.6rem,9vw,2.1rem);}
}

/* v6.1: contain the marquee + let long hero CTA text wrap on phones */
.marquee{overflow:hidden;max-width:100%;}
#marquee-root{overflow:hidden;max-width:100%;}
@media (max-width:560px){
  .hero-actions{max-width:100%;}
  .hero-actions .btn-primary,.hero-actions .btn-ghost{white-space:normal;box-sizing:border-box;max-width:100%;}
}

/* v6.2: tab-foot must include padding in width on phones (no 2px overflow) */
@media (max-width:560px){
  .tab-foot{width:100%;max-width:100%;box-sizing:border-box;padding-left:20px;padding-right:20px;}
}

/* v6.3: stretched CTA buttons must include their padding in the 100% width */
@media (max-width:560px){
  .tab-foot .btn-primary,.tab-foot .btn-ghost,
  .hero-actions .btn-primary,.hero-actions .btn-ghost{box-sizing:border-box;}
}

/* (v7 hidden Admin tab CSS removed — feature deleted, selectors were dead) */

/* v11 — locked portfolio card (Obscura: coming soon, no demo) */
.wk--locked{cursor:default;}
.wk--locked .wk-shot img{transform:none!important;}
.wk--locked:hover{transform:none;}
.wk-dom--soon{color:var(--gold);opacity:.95;}

/* v12 — flat gallery portfolio (replaces accordion groups) */
.pf-board{display:flex;flex-direction:column;gap:48px;}
.pf-sec__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(201,160,73,.42);}
.pf-sec__eyebrow{font-family:var(--display);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ottoman);font-weight:700;}
.pf-sec__note{font-size:.9rem;color:var(--ink-2);}
.pf-sec__count{margin-left:auto;font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);white-space:nowrap;}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;}
.pf-card{display:flex;flex-direction:column;text-decoration:none;background:var(--paper);border:1px solid rgba(14,46,29,.12);border-radius:5px;overflow:hidden;box-shadow:0 6px 18px rgba(14,46,29,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
a.pf-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(14,46,29,.18);border-color:var(--gold);}
.pf-thumb{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--cobalt-deep);}
.pf-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s ease;}
a.pf-card:hover .pf-thumb img{transform:scale(1.05);}
.pf-body{display:flex;flex-direction:column;gap:7px;padding:13px 14px 15px;}
.pf-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.pf-tag{font-family:var(--display);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ottoman);font-weight:700;}
.pf-go{font-family:var(--sans);font-size:10px;letter-spacing:.03em;color:var(--ink-3);white-space:nowrap;}
.pf-title{font-family:var(--serif);font-size:1.05rem;line-height:1.18;color:var(--ink);}
.pf-title em{color:var(--ottoman);font-style:italic;}
.pf-card--locked{cursor:default;box-shadow:0 6px 18px rgba(14,46,29,.06);}
.pf-card--locked .pf-go{color:var(--gold);}
.pf-desc{display:block;margin-top:4px;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--ink-3);}
@media (max-width:560px){.pf-grid{grid-template-columns:repeat(2,1fr);gap:12px;}.pf-title{font-size:.95rem;}.pf-body{padding:11px 11px 13px;}.pf-meta{flex-wrap:wrap;gap:2px 8px;}.pf-go{white-space:normal;}}

/* v14 - flat illustration thumbnails: show full + centered on matching cream */
.pf-card--ill .pf-thumb{background:#f9eedc;}
.pf-card--ill .pf-thumb img{object-fit:contain;object-position:center;padding:4%;box-sizing:border-box;transform:none;}
a.pf-card--ill:hover .pf-thumb img{transform:scale(1.04);}

/* v15 — footer columns + unified theme + bigger readable type */
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr .9fr;gap:36px;align-items:start;}
.foot-col h4{font-family:var(--display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 16px;font-weight:700;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.foot-col a{font-size:15px;color:rgba(251,246,233,.84);text-decoration:none;}
.foot-col a:hover{color:var(--gold);}
.foot-col--brand{max-width:340px;}
.foot-brand-text{font-size:1.35rem;line-height:1.25;margin-bottom:14px;}
.foot-about{font-size:15px;line-height:1.7;}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr 1fr;}.foot-col--brand{grid-column:1/-1;max-width:560px;}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr 1fr;gap:26px;}.foot-col--brand{grid-column:1/-1;}}
/* bigger readable type in key areas */
.pf-title{font-size:1.14rem;}
.pf-tag{font-size:10.5px;}
.pf-go{font-size:11px;}
.hero-lede{font-size:1.18rem;line-height:1.55;}
.svc p,.wk p,.step p,.contact-lede,.pf-sec__note{font-size:.99rem;}

footer{background:#0e2e1d;}