/* ============================================================================
   ORCA DEVS — mobile.css
   Loaded last on every page, so it wins without !important.

   The desktop build grew a lot of furniture — a draggable object layer, a
   menu-bar tray, floating windows, a resizing preview. None of that belongs on
   a phone, where the job is simply: read the pitch, see the proof, tap the
   button. This file strips it back to that.
   ========================================================================== */

/* ============================================================ tablet, 1000 */
@media (max-width: 1000px){

  /* the whole desktop metaphor is desktop-only */
  /* the offline toast remains hidden unless actually offline, deskwin and stick-layer are now scaled */
  .offline-toast{ display:none !important }

  .hero-preview{ max-width:100% !important }
  .slides{ height:min(58vw, 460px) !important }
}

/* ============================================================= phone, 760 */
@media (max-width: 760px){

  /* ---------------------------------------------------------------- type */
  h1.hero-title{ font-size:clamp(2rem, 8.6vw, 2.9rem); max-width:14ch }
  h1.display{ font-size:clamp(1.9rem, 8vw, 2.6rem) }
  h2.display{ font-size:clamp(1.6rem, 6.6vw, 2.1rem) }
  h3.display{ font-size:1.3rem }
  .lede{ font-size:1rem; line-height:1.58 }
  .hero-sub{ font-size:1rem; line-height:1.6; max-width:38ch }

  /* --------------------------------------------------------------- chrome */
  .bar{ padding-inline:14px; gap:10px }
  .brand-mark{ width:28px; height:28px }
  .brand-name{ font-size:15.5px }
  .brand-sub{ display:none }              /* the tagline is noise at this size */
  .bar-cta{ display:none }                /* the burger carries the action */
  /* the burger was rendering as an empty bordered box — the bars had no
     size of their own, so nothing was drawn inside it */
  .burger{
    width:40px; height:40px; border-radius:9px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; border:1px solid var(--line-2); background:var(--paper-2);
  }
  .burger span{
    display:block; width:17px; height:1.8px;
    background:var(--ink); border-radius:2px;
  }

  .drawer{ padding:12px 18px 22px }
  .drawer a{ padding:13px 2px; font-size:17px }

  /* ----------------------------------------------------------------- hero */
  .hero{
    padding-top:calc(var(--bar) + 22px);
    padding-bottom:34px;
  }
  .hero-inner{ gap:18px }

  /* buttons go full width and stack — a 46px pill is a poor tap target when
     it shares a row with another one */
  .hero-cta{ width:100%; gap:12px; flex-direction:column; align-items:stretch }
  .btn-col{ width:100% }
  .btn-glass{ width:100%; height:52px; font-size:16px }
  .btn-note{ font-size:11.5px }

  .hero-trust{ gap:8px 20px; font-size:12px }
  .hero-trust .n{ font-size:1.2rem }
  .hero-trust .l{ font-size:11.5px }

  /* the preview window: a phone showing a phone */
  .slides{ height:min(120vw, 520px) !important }
  .hero-cap{ font-size:10.5px }
  .slide-nav{ gap:10px; margin-top:11px }
  .sn-arrow{ width:34px; height:34px }    /* tap targets, not mouse targets */

  /* ------------------------------------------------------------ sections */
  .sec{ padding-block:52px }
  .sec-tight{ padding-block:38px }
  .sec-head{ gap:10px }

  /* feature rows: image first, words under it */
  .frow{ grid-template-columns:1fr; gap:20px }
  .frow.flip .frow-media{ order:0 }
  .frow-copy h3{ font-size:1.35rem }
  .frow-copy > p{ font-size:15px }
  .frow-cap{ font-size:10px }

  /* the system builder */
  .sysb{ grid-template-columns:1fr; gap:22px }
  .sysb-picks{ grid-template-columns:1fr }
  .sysb-canvas{ padding:14px; min-height:0 }
  .sysb-map{ min-height:250px }
  .sysb-meta{ grid-template-columns:1fr; gap:8px }
  .presets{ gap:6px }
  .preset{ padding:8px 12px; font-size:13px }

  /* the tile list */
  .tile{ padding:13px 14px; gap:10px }
  .tile .ti{ width:32px; height:32px }
  .tile .tt{ font-size:14px }
  .tile .ts{ font-size:11px }

  /* work + project cards */
  .pgrid, .pgrid.two{ grid-template-columns:1fr; gap:18px }
  .pcard.lead .pcard-inner{ grid-template-columns:1fr }
  .pcard.lead .pcard-vis{ min-height:0; aspect-ratio:16/10 }
  .pcard-body{ padding:18px 18px 20px }
  .pcard h3{ font-size:1.3rem }

  /* project pages */
  .phero-grid, .surface, .split{ grid-template-columns:1fr; gap:22px }
  .surface.flip .surface-media{ order:0 }
  .prail{ grid-template-columns:1fr 1fr }
  .prail > div{ padding:15px 14px 16px }
  .prose p{ font-size:15.5px }
  .pull{ font-size:1.05rem }

  /* proof strip */
  .proof-inner{ gap:12px; padding-block:16px }
  .proof-lbl{ font-size:9.5px }
  .proof-links{ gap:7px }
  .proof-links a{ font-size:11px; padding:6px 11px }

  /* marquee reads as texture, so make it quieter and cheaper */
  .marquee{ padding-block:12px }
  .marquee-track span{ font-size:11.5px; padding-inline:16px }

  /* forms — 16px inputs, or iOS zooms the page on focus */
  .form-row{ grid-template-columns:1fr; gap:14px }
  .field input, .field textarea, .field select{ font-size:16px; padding:12px 13px }
  .field textarea{ min-height:130px }
  .checks{ gap:7px }
  .checks label{ font-size:13.5px; padding:8px 12px }

  /* faq */
  .faq .q > button{ padding:18px 2px; gap:12px; font-size:1rem }

  /* cta + footer */
  .cta-block{ padding:26px 20px 30px }
  .cta-actions{ flex-direction:column; align-items:stretch; gap:10px }
  .cta-actions .btn{ width:100% }
  .foot{ padding-top:44px }
  .foot-grid{ grid-template-columns:1fr; gap:26px; padding-bottom:34px }
  .foot-mark{ font-size:clamp(2.4rem,17vw,4rem) }
  .foot-bottom{ gap:8px; font-size:11px; padding:18px 0 26px }
  .foot-col a{ padding:7px 0 }        /* easier to hit */

  /* people + steps */
  .people{ grid-template-columns:1fr }
  .steps{ grid-template-columns:1fr; gap:16px }
  .mini-steps{ grid-template-columns:1fr }
  .why{ grid-template-columns:1fr; gap:14px }
  .stats{ grid-template-columns:1fr 1fr }

  /* the legal pages */
  .prose h3{ font-size:1.2rem; margin-top:22px }
  .ticks li{ font-size:14.5px }
}

/* ======================================================= small phone, 420 */
@media (max-width: 420px){
  h1.hero-title{ font-size:clamp(1.85rem, 9vw, 2.3rem) }
  .hero-trust{ flex-direction:column; align-items:flex-start; gap:6px }
  .prail{ grid-template-columns:1fr }
  .stats{ grid-template-columns:1fr }
  .slides{ height:min(135vw, 470px) !important }
  .chip{ font-size:10.5px; padding:4px 9px }
}

/* ================================================================ touch */
@media (hover: none){
  /* hover lifts stick on touch and leave things floating after a tap */
  .pcard:hover, a.card:hover, .tile:hover,
  .proof-links a:hover, .foot-social a:hover, .preset:hover{ transform:none }

  /* give every interactive thing a real tap target */
  .nav a, .foot-col a, .drawer a, .alink{ min-height:40px; display:flex; align-items:center }
  .fbtn{ min-height:30px }
}

/* =========================================================== safe areas */
@supports (padding: max(0px)){
  @media (max-width: 760px){
    .bar{ padding-left:max(14px, env(safe-area-inset-left));
          padding-right:max(14px, env(safe-area-inset-right)) }
    .wrap{ padding-left:max(var(--gutter), env(safe-area-inset-left));
           padding-right:max(var(--gutter), env(safe-area-inset-right)) }
    .foot-bottom{ padding-bottom:max(26px, env(safe-area-inset-bottom)) }
  }
}

/* ============================================================================
   OVERFLOW GUARDS
   Found by auditing for elements that cannot shrink. A 44-character URL in a
   nowrap pill is wider than a 390px phone on its own, and any one of these
   drags a horizontal scrollbar onto the whole page.
   ========================================================================== */
@media (max-width: 760px){

  /* the address pill: let it truncate instead of forcing the page wide */
  .frame-url{
    min-width:0; overflow:hidden; text-overflow:ellipsis;
    font-size:10px; padding-inline:8px;
  }
  .frame-bar{ gap:6px; padding-inline:8px }
  .frame-act{ flex-shrink:0 }

  /* pills and chips may wrap rather than run off the edge */
  .btn, .chip, .stick-chip{ white-space:normal }
  .chip-row{ gap:6px }

  /* the giant footer wordmark is the other classic culprit */
  .foot-mark{ white-space:nowrap; overflow:hidden; max-width:100% }

  /* any long token in prose or captions breaks rather than overflows */
  .prose, .dw-body, .lede, .hero-sub, .frow-copy, p, li, code, .u-mono{
    overflow-wrap:anywhere; word-break:break-word;
  }

  /* nothing may exceed the viewport, whatever it is */
  img, svg, iframe, video, table, pre{ max-width:100% }
}

/* Belt and braces: a horizontal scrollbar is never correct on this site. */
html, body{ max-width:100%; overflow-x:hidden }

/* ============================================================================
   `hidden` MUST WIN.
   The hidden attribute is a browser default (`[hidden]{display:none}`), and any
   class rule that sets `display` beats it on specificity. That is why the
   private-screen popup appeared on load with its placeholder text, and why the
   build-time panel showed before anything was picked. These guards go last so
   nothing can undo them.
   ========================================================================== */
[hidden]{ display:none !important }