/* Mobile/tablet extension of the approved desktop design. Desktop remains in style.css. */
@media (max-width:900px) {
  :root { --gutter:20px; --mobile-section-space:64px; --muted:#626965; --mobile-header-top:max(12px,env(safe-area-inset-top,0px)); --mobile-header-height:68px; --mobile-edge:12px; --mobile-nav-top:calc(var(--mobile-header-top) + var(--mobile-header-height) + 8px); --mobile-bottom:max(var(--mobile-edge),env(safe-area-inset-bottom,0px)); scroll-padding-top:calc(var(--mobile-nav-top) + 12px); background:#f1f2f1; }
  body { background:#f1f2f1; }
  .section-pad { padding-inline:var(--gutter); }
  h2 { font-size:clamp(32px,8.6vw,44px); line-height:1.12; letter-spacing:-.04em; }
  .button { --cta-fill:var(--accent); --cta-text:var(--ink); --cta-hover:#7bffe7; --cta-icon-fill:var(--ink); --cta-icon-text:var(--accent); }
  .button-dark { --cta-fill:var(--ink); --cta-text:#fff; --cta-hover:#333; --cta-icon-fill:var(--accent); --cta-icon-text:var(--ink); }
  .button,.site-header .header-cta,.contact-form .form-bottom .button,.offering-detail-dialog .button {
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:fit-content; min-width:0; max-width:100%; min-height:48px; height:auto; gap:18px; padding:5px 5px 5px 18px;
    border:1px solid var(--cta-fill); border-radius:100px; background:var(--cta-fill); color:var(--cta-text); font-family:'Hellix',Arial,sans-serif; font-size:14px; font-weight:600; line-height:1.2; letter-spacing:normal; white-space:normal; text-decoration:none;
  }
  .button>span:not(.button-arrow) { min-width:0; font:inherit; overflow-wrap:break-word; text-align:left; }
  .offering-detail-dialog .button { height:auto; min-height:48px; white-space:normal; }
  .offering-detail-dialog .button>span:not(.button-arrow) { text-align:left; }
  .button .button-arrow,.site-header .header-cta .button-arrow,.contact-form .form-bottom .button-arrow,.offering-detail-dialog .button-arrow {
    display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:var(--cta-icon-fill); color:var(--cta-icon-text); font-size:22px; font-weight:600; line-height:1;
  }
  .button:hover { background:var(--cta-fill); color:var(--cta-text); }
  .button:hover .button-arrow { background:var(--cta-icon-fill); color:var(--cta-icon-text); transform:none; }
  .button:focus-visible { outline:2px solid #008d76; outline-offset:4px; }
  .round-button,.offering-detail-close { display:grid; place-items:center; width:48px; height:48px; padding:0; border:1px solid var(--ink); border-radius:50%; background:var(--ink); color:var(--accent); font-size:22px; font-weight:600; line-height:1; }

  /* The glass bar never changes height while scrolling. Its blur is not a containing block. */
  .site-header,.site-header.is-scrolled,.menu-open .site-header {
    position:fixed; top:var(--mobile-header-top); left:max(var(--mobile-edge),env(safe-area-inset-left,0px)); right:max(var(--mobile-edge),env(safe-area-inset-right,0px)); width:auto; height:var(--mobile-header-height); padding:0 14px; gap:16px; border:1px solid #ffffffd1; border-radius:16px; background:transparent; color:var(--ink); box-shadow:0 6px 24px #14231d0c; backdrop-filter:none; -webkit-backdrop-filter:none; animation:none; isolation:isolate;
  }
  .site-header::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:#f7f8f7; pointer-events:none; }
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .site-header::before { background:linear-gradient(120deg,#ffffffb8,#ffffff8a); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
  }
  .site-header .brand,.site-header .brand img { width:106px; height:54px; }
  .desktop-nav,.mega-menu,.mega-backdrop { display:none; }
  .header-actions { margin-left:auto; gap:12px; }
  .site-header .header-cta { display:none; }
  .menu-toggle { display:flex; flex:0 0 44px; flex-direction:column; justify-content:center; gap:6px; width:44px; height:44px; padding:12px 9px; border-radius:50%; background:var(--ink); color:var(--accent); }
  .menu-toggle span { display:block; width:26px; height:1.5px; margin:0; background:var(--accent); transform-origin:center; }
  .menu-open .menu-toggle span:first-child { transform:translateY(3.75px) rotate(45deg); }
  .menu-open .menu-toggle span:last-child { transform:translateY(-3.75px) rotate(-45deg); }
  #mobile-nav { position:fixed; inset:var(--mobile-nav-top) max(var(--mobile-edge),env(safe-area-inset-right,0px)) var(--mobile-bottom) max(var(--mobile-edge),env(safe-area-inset-left,0px)); display:flex; flex-direction:column; gap:20px; min-height:0; padding:20px; border:1px solid #fff; border-radius:20px; background:#edf0ed; color:var(--ink); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; animation:none; max-height:calc(100dvh - var(--mobile-nav-top) - var(--mobile-bottom)); scroll-padding-block:20px; box-shadow:0 18px 60px #14231d1a; }
  #mobile-nav>div { flex-shrink:0; }
  .mobile-menu-links { border-radius:14px; background:#ffffffa8; padding:8px 18px; }
  #mobile-nav .mobile-menu-links>a,#mobile-nav summary { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:12px 0; font-size:22px; font-weight:500; letter-spacing:-.025em; line-height:1.25; color:var(--ink); border-bottom:1px solid #dce2dc; cursor:pointer; list-style:none; }
  #mobile-nav summary::-webkit-details-marker { display:none; }
  #mobile-nav summary>span { font-size:26px; font-weight:400; transition:transform .3s var(--ease); }
  #mobile-nav details[open] summary>span { transform:rotate(45deg); }
  #mobile-nav .mobile-menu-links>a:last-child { border-bottom:0; }
  #mobile-nav .mobile-submenu { padding:8px 0 14px; }
  #mobile-nav .mobile-submenu a { display:flex; align-items:center; min-height:44px; padding:9px 0 9px 12px; font-size:15px; font-weight:400; line-height:1.4; letter-spacing:0; color:#505852; }
  #mobile-nav a:focus-visible,#mobile-nav summary:focus-visible { outline-offset:3px; }
  #mobile-nav .mobile-menu-consultation { margin-top:auto; border-radius:16px; background:var(--ink); color:white; padding:24px 20px; }
  #mobile-nav .mobile-menu-eyebrow { font-size:11px; line-height:1.4; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); padding:0; margin:0 0 12px; }
  #mobile-nav .mobile-menu-title { font-size:28px; line-height:1.1; letter-spacing:-.035em; color:white; padding:0; margin:0 0 24px; }
  #mobile-nav .mobile-menu-consultation .button { font-size:14px; color:var(--ink); background:var(--accent); letter-spacing:0; }

  .hero { display:flex; flex-direction:column; gap:32px; min-height:0; height:auto; padding:calc(var(--mobile-header-top) + var(--mobile-header-height) + 36px) var(--gutter) 0; overflow:clip; }
  .hero-content { order:1; width:100%; max-width:none; padding:0; }
  .hero-eyebrow { font-size:9px; letter-spacing:.025em; line-height:1.5; white-space:normal; flex-wrap:nowrap; align-items:flex-start; gap:8px; max-width:100%; margin:0 0 28px; }
  .hero-eyebrow .status-dot { width:6px; height:6px; flex:0 0 6px; margin:4px 0 0; }
  .hero-eyebrow .eyebrow-secondary { color:#656a67; }
  .hero-rating { display:flex; align-items:center; flex-wrap:wrap; column-gap:10px; row-gap:7px; min-height:44px; width:fit-content; max-width:100%; line-height:1.2; margin:0 0 24px; }
  .hero-rating-stars { position:relative; display:inline-block; color:#c6d1cc; font-size:17px; letter-spacing:1px; white-space:nowrap; line-height:1.1; }
  .hero-rating-stars>span { position:absolute; inset:0 auto 0 0; width:98%; overflow:hidden; color:#008f75; }
  .hero-rating-score { font-size:14px; font-weight:600; white-space:nowrap; }
  .hero-rating-score>span { font-size:12px; color:#656a67; font-weight:400; }
  .hero-rating-label { font-size:10px; letter-spacing:.035em; line-height:1.3; color:#656a67; border-left:1px solid #c7d0cb; padding-left:10px; }
  .hero h1 { font-size:clamp(34px,10.4vw,58px); font-weight:600; line-height:1.06; letter-spacing:-.05em; }
  .hero h1>span { display:block; position:relative; width:max-content; max-width:100%; }
  .hero-desktop-break { display:none; }
  .headline-underline { bottom:-.15em; height:.25em; width:43%; right:0; }
  .hero-description { margin-top:32px; max-width:560px; font-size:16px; line-height:1.55; text-wrap:pretty; }
  .hero-cta { margin-top:26px; }
  .hero-visual { order:2; position:relative; inset:auto; width:calc(100% + var(--gutter)*2); height:clamp(340px,100vw,520px); margin-inline:calc(var(--gutter)*-1); overflow:hidden; }
  .hero-portrait { left:50%; right:auto; bottom:-20px; width:87%; max-width:440px; height:auto; transform:translateX(-50%)!important; will-change:auto; }
  .hero-disc { left:50%; right:auto; bottom:-60px; width:min(110vw,560px); height:auto; aspect-ratio:1; transform:translateX(-50%); }
  .hero-arc { left:50%; right:auto; bottom:-90px; width:min(126vw,650px); height:auto; aspect-ratio:1; transform:translateX(-50%); }
  .service-marquee { padding:19px 0; }
  .service-marquee p { font-size:14px; }

  /* The approved editorial variant stays clean, rather than reverting to old animated pills. */
  .intro-clean { position:relative; isolation:isolate; background:#f1f2f1; padding:var(--mobile-section-space) var(--gutter); overflow:clip; }
  .intro-clean::before { content:''; position:absolute; z-index:0; bottom:8px; left:28%; width:108%; aspect-ratio:210/107.232; background:url('assets/signature.svg') center/contain no-repeat; opacity:.023; pointer-events:none; }
  .intro-clean::after { content:''; position:absolute; bottom:0; left:var(--gutter); right:var(--gutter); height:1px; background:#dce3de; }
  .intro-clean .intro-scroll-track { position:relative; z-index:1; height:auto; }
  .intro-clean .intro-sticky { position:relative; display:flex; flex-direction:column; min-height:0; padding:0; }
  .intro-clean .intro-clean-eyebrow { display:block; margin:0 0 22px; font-size:10px; letter-spacing:.025em; line-height:1; color:var(--accent); }
  .intro-clean .intro-clean-eyebrow>span { display:inline-block; padding:9px 12px; border-radius:100px; background:var(--ink); }
  .intro-clean .intro-editorial-copy { order:1; font-size:clamp(23px,5.9vw,32px); line-height:1.5; letter-spacing:-.03em; text-indent:0; color:#656a67; }
  .intro-clean .intro-editorial-copy [data-word] { opacity:1; background:none; color:inherit; transition:none; }
  .intro-clean .intro-token { display:inline; position:static; vertical-align:baseline; min-height:0; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; transform:none; filter:none; opacity:1; font:inherit; letter-spacing:inherit; white-space:normal; color:inherit; transition:none; cursor:inherit; overflow:visible; }
  .intro-clean .token-mint,.intro-clean .token-ai,.intro-clean .token-person,.intro-clean .token-space,.intro-clean .intro-underline { color:var(--ink); }
  .intro-clean .intro-word-group { white-space:nowrap; }
  .intro-clean .intro-underline { text-decoration:none; }
  .intro-clean .intro-underline,.intro-clean .token-space { position:relative; display:inline-block; white-space:nowrap; }
  .intro-clean .intro-copy .intro-drawn-underline { display:block; position:absolute; left:0; bottom:-.02em; width:100%; height:.28em; pointer-events:none; fill:none; stroke:var(--accent); stroke-width:7; stroke-dasharray:220; stroke-dashoffset:0; }
  .intro-clean .token-person-base,.intro-clean .ideas-rotator { display:inline; overflow:visible; }
  .intro-clean .token-person .token-person-base>span { opacity:1; transform:none; transition:none; }
  .intro-clean .token-person-experience,.intro-clean .token-person-base>img,.intro-clean .intro-token>svg,.intro-clean .inline-chart { display:none; }
  .intro-clean .ideas-phrase { display:none; animation:none; }
  .intro-clean .ideas-phrase:first-child { display:inline; opacity:1; transform:none; }
  .intro-clean .intro-metrics { order:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:28px 24px; margin:44px 0 0; }
  .intro-clean .intro-metric { display:flex; flex-direction:column; gap:8px; min-width:0; padding:18px 0 0; border-top:1px solid #dce3de; }
  .intro-clean .intro-metric dd { font-size:28px; line-height:1.1; letter-spacing:-.025em; color:var(--ink); }
  .intro-clean .intro-metric dt { font-size:13px; line-height:1.4; letter-spacing:0; color:#656a67; padding:0; }
  .intro-clean .intro-editorial-footer { display:none; }
}
@media (min-width:641px) and (max-width:900px) {
  :root { --gutter:32px; --mobile-section-space:80px; --mobile-header-top:max(16px,env(safe-area-inset-top,0px)); --mobile-header-height:72px; --mobile-edge:20px; }
  .site-header,.site-header.is-scrolled,.menu-open .site-header { padding-inline:20px; }
  .site-header .header-cta { display:inline-flex; }
  #mobile-nav { padding:24px; }
  .hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:12px; padding:calc(var(--mobile-header-top) + var(--mobile-header-height) + 52px) var(--gutter) 0; }
  .hero-content { padding-bottom:60px; }
  .hero h1 { font-size:clamp(38px,5.7vw,51px); }
  .hero-rating-label { flex-basis:100%; border:0; padding:0; }
  .hero-eyebrow { font-size:10px; }
  .hero-description { font-size:17px; }
  .hero-visual { align-self:end; width:calc(100% + 32px); height:490px; margin:0 -32px 0 0; }
  .hero-portrait { width:122%; max-width:410px; bottom:-8px; }
  .hero-disc { width:440px; bottom:-30px; }
  .hero-arc { width:510px; bottom:-55px; }
  .intro-clean .intro-editorial-copy { font-size:30px; }
  .intro-clean .intro-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:56px; }
}
@media (max-width:359px) {
  .hero-rating { gap:8px; }
  .hero-rating-stars { font-size:15px; }
  .hero-rating-label { flex-basis:100%; font-size:10px; border:0; padding:0; }
  .hero-eyebrow { max-width:260px; }
  #mobile-nav { padding:12px; }
  #mobile-nav .mobile-menu-consultation { padding:22px 16px; }
  #mobile-nav .mobile-menu-consultation .button { gap:12px; padding-left:14px; font-size:13px; }
}
@media (max-width:900px) and (prefers-reduced-motion:reduce) {
  .hero-portrait { transform:translateX(-50%)!important; }
  .headline-underline { stroke-dashoffset:0; }
}
