:root{
      --paper:#f4f4ef;
      --paper-2:#eceee8;
      --white:#fbfcf8;
      --ink:#0a1712;
      --muted:#66736d;
      --green:#163e31;
      --green-2:#244f40;
      --sage:#b9c8b7;
      --sage-2:#dfe8d9;
      --line:rgba(10,23,18,.12);
      --shadow:0 34px 100px rgba(20,45,36,.12);
      --ease:cubic-bezier(.22,.7,.2,1);
    }

    *{box-sizing:border-box}
    html{background:var(--paper)}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;overflow-x:hidden}
    body.loading{overflow:hidden}
    a{color:inherit;text-decoration:none}
    button,a{-webkit-tap-highlight-color:transparent}
    img{display:block;max-width:100%}
    ::selection{background:var(--green);color:#fff}

    .page-progress{
      position:fixed;left:0;top:0;width:100%;height:3px;z-index:100;
      transform-origin:left;transform:scaleX(0);
      background:linear-gradient(90deg,var(--green),#8fa88c);
      will-change:transform;
    }

    .nav-wrap{
      position:fixed;left:50%;top:18px;z-index:90;
      width:min(calc(100% - 32px),1280px);
      transform:translateX(-50%);
    }
    .nav{
      height:60px;padding:0 12px 0 20px;border:1px solid rgba(255,255,255,.65);
      border-radius:999px;background:rgba(248,249,245,.94);
      display:flex;align-items:center;justify-content:space-between;gap:20px;
      box-shadow:0 16px 55px rgba(18,45,35,.09);
    }
    .brand{font:800 15px/1 "Manrope",sans-serif;letter-spacing:-.055em;white-space:nowrap}
    .brand sup{font-size:7px;opacity:.45;margin-left:2px}
    .nav-links{display:flex;align-items:center;gap:28px;font-size:12px;color:#5f6c65}
    .nav-links a{transition:color .3s ease}
    .nav-links a:hover{color:var(--ink)}
    .nav-cta{padding:12px 17px;border-radius:999px;background:var(--green);color:white;font-size:12px;font-weight:700;white-space:nowrap}

    .section-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#6b7771}
    .section-kicker.light{color:rgba(255,255,255,.6)}
    .dot{display:inline-block;width:7px;height:7px;margin-right:10px;border-radius:50%;background:#8dab86;box-shadow:0 0 0 6px rgba(141,171,134,.16)}

    .btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
    .btn{
      min-height:48px;padding:0 19px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
      border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:700;
      transition:transform .3s var(--ease),background .3s ease,border-color .3s ease;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn.primary{background:var(--green);border-color:var(--green);color:#fff}
    .btn.ghost{background:rgba(255,255,255,.88)}
    .btn.light{background:#eef5e6;color:var(--green);border-color:#eef5e6}
    .btn.outline-light{color:#fff;border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.06)}

    /* -------------------------------------------------------------
       RWA CINEMATIC SEQUENCE
    ------------------------------------------------------------- */
    .rwa-sequence{height:520vh;position:relative;background:var(--paper)}
    .rwa-stage{height:100vh;position:relative;overflow:hidden;background:var(--paper)}
    .property-layer{position:absolute;inset:0;overflow:hidden;will-change:transform,opacity}
    .property-layer img{width:100%;height:100%;object-fit:cover;object-position:center 46%;transform:scale(1.05);filter:saturate(.82) contrast(.97)}
    .property-soften{position:absolute;z-index:1;inset:0;background:rgba(244,244,239,.58);opacity:0;pointer-events:none;will-change:opacity}
    .property-layer::after{
      content:"";position:absolute;inset:0;
      background:
        linear-gradient(90deg,rgba(244,244,239,.97) 0%,rgba(244,244,239,.84) 30%,rgba(244,244,239,.22) 62%,rgba(244,244,239,.3) 100%),
        linear-gradient(0deg,rgba(5,18,12,.15),transparent 48%);
      pointer-events:none;
    }
    .property-layer::before{
      content:"";position:absolute;z-index:1;inset:auto -10% -30% 35%;height:70%;
      background:radial-gradient(circle at center,rgba(225,235,218,.62),transparent 65%);pointer-events:none;
    }

    .hero-copy{
      position:absolute;z-index:5;left:max(24px,calc((100vw - 1380px)/2));bottom:10vh;
      width:min(780px,calc(100vw - 48px));will-change:transform,opacity;
    }
    .hero-copy h1{
      margin:24px 0 22px;font:700 clamp(68px,9.8vw,154px)/.82 "Manrope",sans-serif;
      letter-spacing:-.087em;max-width:980px;
    }
    .hero-copy h1 em{font-style:normal;color:var(--green)}
    .hero-copy p{max-width:670px;margin:0;color:#46544d;font-size:18px;line-height:1.65}

    .hero-index{
      position:absolute;z-index:5;right:max(24px,calc((100vw - 1380px)/2));bottom:10vh;
      width:min(340px,32vw);padding:21px;border:1px solid rgba(255,255,255,.7);border-radius:26px;
      background:rgba(255,255,255,.88);box-shadow:var(--shadow);
      will-change:transform,opacity;
    }
    .hero-index-top,.hero-index-bottom{display:flex;justify-content:space-between;gap:20px;text-transform:uppercase;letter-spacing:.13em;font-size:9px;color:#68746e}
    .hero-index h3{margin:38px 0 12px;font:700 30px/1.02 "Manrope",sans-serif;letter-spacing:-.055em}
    .hero-index p{font-size:12px;line-height:1.55;color:#627069;margin:0 0 18px}
    .hero-index-bottom{padding-top:17px;border-top:1px solid var(--line)}
    .hero-index-bottom strong{color:var(--ink);font-size:12px;letter-spacing:-.01em}

    .scroll-cue{
      position:absolute;z-index:6;left:24px;bottom:25px;display:flex;align-items:center;gap:12px;
      font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:#75817b;
    }
    .scroll-cue i{display:block;width:45px;height:1px;background:#9da7a1}

    .nft-field{position:absolute;inset:0;z-index:8;pointer-events:none;perspective:1200px}
    .nft-card{
      position:absolute;left:50%;top:50%;width:clamp(125px,13vw,205px);
      transform:translate(-50%,-50%) scale(.2);opacity:0;border-radius:18px;
      box-shadow:0 28px 80px rgba(10,23,18,.18);overflow:hidden;background:#fff;
      will-change:transform,opacity;
    }
    .nft-card img{width:100%;height:auto}
    .nft-card.n2{width:clamp(120px,12vw,190px)}
    .nft-card.n3{width:clamp(122px,12.5vw,195px)}
    .nft-card.n4{width:clamp(108px,10.8vw,170px)}

    .rwa-phase-copy{
      position:absolute;z-index:7;left:50%;top:50%;width:min(1100px,calc(100% - 48px));
      transform:translate(-50%,-50%);text-align:center;opacity:0;pointer-events:none;
      will-change:transform,opacity;
    }
    .rwa-phase-copy h2{margin:0;font:700 clamp(60px,9vw,138px)/.84 "Manrope",sans-serif;letter-spacing:-.085em}
    .rwa-phase-copy h2 span{display:block;color:var(--green)}
    .rwa-phase-copy p{margin:25px auto 0;max-width:620px;color:#5e6b64;font-size:16px;line-height:1.65}

    .token-words{
      position:absolute;z-index:9;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;
      background:rgba(244,244,239,.91);will-change:opacity;
    }
    .token-word-stack{width:min(1380px,calc(100% - 48px));text-align:center}
    .token-word{
      font:700 clamp(62px,11vw,170px)/.76 "Manrope",sans-serif;letter-spacing:-.09em;
      white-space:nowrap;transform:translateY(70px);opacity:0;
    }
    .token-word.muted{color:#a3aea8}
    .token-word.green{color:var(--green)}

    /* -------------------------------------------------------------
       TOKENIZATION SERVICE
    ------------------------------------------------------------- */
    .service-intro{min-height:105vh;padding:15vh 24px;display:grid;place-items:center;background:var(--paper)}
    .service-intro-inner{width:min(1160px,100%)}
    .service-intro h2{margin:18px 0 24px;font:700 clamp(52px,8.2vw,112px)/.9 "Manrope",sans-serif;letter-spacing:-.075em}
    .service-intro h2 span{color:#a0aaa5}
    .service-intro p{max-width:720px;color:#64716a;font-size:17px;line-height:1.7}

    .token-service{height:230vh;position:relative;background:#e9eee8}
    .token-stage{height:100vh;position:relative;overflow:hidden;background:#e9eee8}
    .token-grid{position:absolute;inset:0;opacity:.55;background-image:linear-gradient(rgba(18,62,49,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(18,62,49,.055) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,transparent 5%,#000 30%,#000 80%,transparent)}
    .token-content{position:relative;z-index:3;width:min(1380px,calc(100% - 48px));height:100%;margin:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
    .token-copy h2{margin:18px 0;font:700 clamp(64px,8.7vw,132px)/.83 "Manrope",sans-serif;letter-spacing:-.083em}
    .token-copy h2 em{font-style:normal;color:var(--green)}
    .token-copy p{max-width:630px;font-size:17px;line-height:1.7;color:#5c6962}
    .token-rail{position:relative;height:min(620px,72vh);border-left:1px solid rgba(22,62,49,.18);padding-left:34px;display:flex;flex-direction:column;justify-content:center;gap:12px}
    .token-node{position:relative;padding:22px 24px;border:1px solid rgba(22,62,49,.12);border-radius:22px;background:rgba(255,255,255,.9);opacity:.32;transform:translateX(24px)}
    .token-node::before{content:"";position:absolute;left:-40px;top:50%;width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 0 8px rgba(22,62,49,.09)}
    .token-node small{display:block;margin-bottom:8px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#718078}
    .token-node strong{font:700 25px "Manrope",sans-serif;letter-spacing:-.045em}
    .token-node p{margin:7px 0 0;font-size:12px;line-height:1.55;color:#66746d}

    /* -------------------------------------------------------------
       BRICKSCHOOL — TYPOGRAPHIC ZOOM
    ------------------------------------------------------------- */
    .school-sequence{height:330vh;position:relative;background:#153e31;color:#f5f7f1}
    .school-stage{height:100vh;position:relative;overflow:hidden;background:#153e31}
    .school-noise{position:absolute;inset:0;opacity:.17;background:radial-gradient(circle at 72% 26%,rgba(220,238,206,.35),transparent 34%),radial-gradient(circle at 22% 80%,rgba(255,255,255,.13),transparent 30%)}
    .school-title-wrap{position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none}
    .school-title{font:800 clamp(86px,18vw,280px)/.68 "Manrope",sans-serif;letter-spacing:-.105em;text-transform:uppercase;text-align:center;transform-origin:center center;will-change:transform,opacity}
    .school-title span{display:block}
    .school-title .outline{-webkit-text-stroke:1px rgba(239,246,233,.55);color:transparent}
    .school-cert-panel{position:absolute;z-index:4;right:max(24px,calc((100vw - 1380px)/2));bottom:8vh;width:min(440px,calc(100% - 48px));padding:24px;border-radius:28px;border:1px solid rgba(255,255,255,.18);background:rgba(247,250,242,.14);opacity:0;transform:translateY(45px)}
    .school-cert-panel h3{margin:10px 0 12px;font:700 34px/1 "Manrope",sans-serif;letter-spacing:-.06em}
    .school-cert-panel p{margin:0;color:rgba(255,255,255,.68);font-size:13px;line-height:1.6}
    .cert-list{display:grid;grid-template-columns:1fr;gap:8px;margin-top:20px}
    .cert-chip{padding:12px 14px;border:1px solid rgba(255,255,255,.15);border-radius:999px;font-size:9px;line-height:1.25;letter-spacing:.065em;text-transform:uppercase;color:rgba(255,255,255,.84)}
    .cert-chip-link{display:flex;align-items:center;justify-content:space-between;gap:16px;text-decoration:none;transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
    .cert-chip-link strong{flex:0 0 auto;font:700 8px/1.2 "Manrope",sans-serif;letter-spacing:.08em;color:#f5f7f1;white-space:nowrap}
    .cert-chip-link:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.34);transform:translateX(3px)}
    .school-copy{position:absolute;z-index:4;left:max(24px,calc((100vw - 1380px)/2));bottom:8vh;width:min(520px,calc(100% - 48px));opacity:0;transform:translateY(35px)}
    .school-copy h2{margin:16px 0 14px;font:700 clamp(44px,5.5vw,78px)/.92 "Manrope",sans-serif;letter-spacing:-.065em}
    .school-copy p{color:rgba(255,255,255,.68);line-height:1.65}

    /* -------------------------------------------------------------
       FINAL
    ------------------------------------------------------------- */
    .final{min-height:105vh;background:var(--green);color:#f5f7f2;padding:14vh 24px 34px;display:flex;flex-direction:column;justify-content:space-between}
    .final-inner{width:min(1380px,100%);margin:auto;display:grid;grid-template-columns:1fr .82fr;gap:90px;align-items:end}
    .final h2{margin:18px 0;font:700 clamp(60px,9vw,132px)/.82 "Manrope",sans-serif;letter-spacing:-.087em}
    .final p{max-width:590px;color:rgba(255,255,255,.66);font-size:17px;line-height:1.7}
    .final-list{border-top:1px solid rgba(255,255,255,.2)}
    .final-row{display:flex;justify-content:space-between;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:12px}
    .final-row span{color:rgba(255,255,255,.5)}
    footer{width:min(1380px,100%);margin:90px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;gap:20px;color:rgba(255,255,255,.48);font-size:10px;letter-spacing:.08em;text-transform:uppercase}

    /* Reveal fallback / normal content */
    .reveal{opacity:0;transform:translateY(30px)}
    .js-ready .reveal{will-change:transform,opacity}
    .no-gsap .reveal{opacity:1;transform:none}
    .no-gsap .rwa-sequence,.no-gsap .school-sequence,.no-gsap .token-service{height:auto}
    .no-gsap .rwa-stage,.no-gsap .school-stage,.no-gsap .token-stage{min-height:100vh;height:auto;padding:120px 0;overflow:hidden}

    @media (max-width: 1000px){
      .nav-links{display:none}
      .hero-index{width:300px;right:20px}
      .hero-copy{left:24px}
      .token-content,.final-inner{grid-template-columns:1fr;gap:38px}
      .token-content{align-content:center}
      .token-rail{height:auto;max-width:650px;padding-left:28px}
      .school-cert-panel{right:24px}
      .school-copy{left:24px}
    }

    @media (max-width: 700px){
      .nav-wrap{top:10px;width:calc(100% - 20px)}
      .nav{height:54px;padding-left:15px}.nav-cta{padding:10px 13px;font-size:10px}
      .hero-copy{left:18px;bottom:13vh;width:calc(100% - 36px)}
      .hero-copy h1{font-size:clamp(58px,18vw,94px)}
      .hero-copy p{font-size:15px;max-width:92%}
      .hero-index{display:none}
      .property-layer::after{background:linear-gradient(0deg,rgba(244,244,239,.98) 0%,rgba(244,244,239,.82) 38%,rgba(244,244,239,.18) 70%)}
      .scroll-cue{left:18px}
      .nft-card{width:130px}.nft-card.n2{width:120px}.nft-card.n3{width:126px}.nft-card.n4{width:108px}
      .rwa-phase-copy h2{font-size:clamp(54px,15vw,88px)}
      .token-word{font-size:clamp(54px,16vw,92px);white-space:normal}
      .service-intro{padding:110px 18px}.service-intro h2{font-size:clamp(48px,13vw,76px)}
      .token-content{width:calc(100% - 36px)}
      .token-copy h2{font-size:clamp(55px,16vw,88px)}
      .school-title{font-size:clamp(78px,25vw,145px)}
      .school-copy{left:18px;bottom:10vh;width:calc(100% - 36px)}
      .school-cert-panel{left:18px;right:auto;bottom:7vh;width:calc(100% - 36px);padding:18px}
      .school-cert-panel h3{font-size:28px}.cert-list{grid-template-columns:1fr}
      .final{padding:110px 18px 28px}.final h2{font-size:clamp(58px,17vw,90px)}
      footer{flex-direction:column;margin-top:70px}
    }

    /* Performance profile for mobile / low-power devices. */
    .performance-lite .nav{box-shadow:0 10px 30px rgba(18,45,35,.07)}
    .performance-lite .hero-index,.performance-lite .nft-card{box-shadow:none}
    .performance-lite .school-noise{opacity:.1}
    .performance-lite .token-grid{opacity:.35}
    .performance-lite .rwa-sequence{height:430vh}
    .performance-lite .school-sequence{height:270vh}

    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
    }

/* ============================================================================
   PHASE 6 — RESPONSIVE FINE TUNING
   Breakpoints are intentionally behavior-oriented rather than device-branded.
   ========================================================================== */

/* Safer viewport units on mobile browser chrome + notches. */
.rwa-stage,.token-stage,.school-stage{height:100svh;min-height:100svh}
@supports (height:100dvh){
  .rwa-stage,.token-stage,.school-stage{height:100dvh;min-height:100dvh}
}

.nav-wrap{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.final{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));padding-bottom:max(34px,env(safe-area-inset-bottom))}

/* Large desktop / wide monitors: keep content readable instead of stretching. */
@media (min-width: 1441px){
  .hero-copy{bottom:11vh}
  .hero-index{bottom:11vh}
  .token-content{max-width:1380px}
}

/* Laptop / small desktop. */
@media (min-width: 1001px) and (max-width: 1280px){
  .nav-wrap{width:calc(100% - 28px)}
  .nav-links{gap:20px}
  .hero-copy{left:28px;bottom:9vh;width:min(690px,60vw)}
  .hero-copy h1{font-size:clamp(68px,9.2vw,118px)}
  .hero-copy p{max-width:590px;font-size:16px}
  .hero-index{right:28px;bottom:9vh;width:300px}
  .hero-index h3{font-size:26px}
  .token-content{width:calc(100% - 56px);gap:44px}
  .token-copy h2{font-size:clamp(62px,8.2vw,104px)}
  .school-copy{left:28px}
  .school-cert-panel{right:28px;width:390px}
  .final-inner{gap:56px}
}

/* Tablet / portrait laptops. Keep the cinematic pinning, but use compact layouts. */
@media (min-width: 701px) and (max-width: 1000px){
  .nav-wrap{width:calc(100% - 28px)}
  .nav{height:56px;padding:0 10px 0 18px}
  .nav-cta{padding:11px 15px}

  .rwa-sequence{height:470vh}
  .hero-copy{left:28px;bottom:10vh;width:min(620px,72vw)}
  .hero-copy h1{font-size:clamp(70px,11.5vw,112px)}
  .hero-copy p{font-size:16px;max-width:560px}
  .hero-index{right:24px;bottom:9vh;width:270px;padding:18px}
  .hero-index h3{margin-top:28px;font-size:24px}
  .nft-card{width:clamp(125px,17vw,170px)}
  .nft-card.n2{width:clamp(118px,16vw,160px)}
  .nft-card.n3{width:clamp(120px,16.5vw,165px)}
  .nft-card.n4{width:clamp(105px,14.5vw,145px)}

  .service-intro{min-height:90svh;padding:12vh 28px}
  .service-intro h2{font-size:clamp(54px,10.2vw,88px)}

  .token-service{height:250vh}
  .token-content{
    width:calc(100% - 56px);grid-template-columns:1fr;grid-template-rows:auto auto;
    gap:24px;align-content:center;padding:92px 0 34px;
  }
  .token-copy{max-width:760px}
  .token-copy h2{font-size:clamp(58px,10vw,88px)}
  .token-copy p{font-size:15px;max-width:660px}
  .token-copy .btn-row{margin-top:20px}
  .token-rail{
    width:100%;max-width:none;height:auto;border-left:0;padding-left:0;
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  }
  .token-node{padding:18px 16px;min-height:145px;transform:translateY(18px)}
  .token-node::before{display:none}
  .token-node strong{font-size:21px}

  .school-sequence{height:310vh}
  .school-title{font-size:clamp(104px,21vw,190px)}
  .school-copy{left:28px;bottom:9vh;width:min(430px,48vw)}
  .school-copy h2{font-size:clamp(42px,6vw,62px)}
  .school-cert-panel{right:28px;bottom:9vh;width:min(360px,42vw);padding:20px}
  .school-cert-panel h3{font-size:29px}


  .final{min-height:100svh;padding-top:12vh}
  .final-inner{grid-template-columns:1fr;gap:48px;align-items:start}
  .final h2{font-size:clamp(64px,11vw,98px)}
  .final-list{max-width:700px;width:100%}
}

/* Phone landscape / compact height. Prioritize vertical fit. */
@media (max-height: 690px) and (min-width: 701px){
  .hero-copy{bottom:6vh}
  .hero-index{bottom:6vh}
  .hero-copy h1{font-size:clamp(58px,8.5vw,96px)}
  .hero-copy p{font-size:14px;line-height:1.5}
  .btn{min-height:44px}
  .school-copy,.school-cert-panel{bottom:5vh}
  .school-copy p,.school-cert-panel p{font-size:12px}
  .token-content{padding-top:72px;padding-bottom:18px}
}

/* Mobile. Designed as its own composition rather than a squeezed desktop layout. */
@media (max-width: 700px){
  body{font-size:15px}
  .page-progress{height:2px}

  .nav-wrap{
    top:max(9px,env(safe-area-inset-top));
    width:calc(100% - 18px);
    padding:0;
  }
  .nav{height:52px;padding:0 8px 0 14px;gap:8px}
  .brand{font-size:14px}
  .nav-cta{padding:10px 12px;font-size:10px}

  .btn-row{gap:8px;margin-top:20px}
  .btn{min-height:44px;padding:0 15px;font-size:11px}

  /* RWA hero */
  .rwa-sequence{height:440vh}
  .property-layer img{object-position:58% 50%;transform:scale(1.08)}
  .property-layer::after{
    background:linear-gradient(0deg,rgba(244,244,239,.99) 0%,rgba(244,244,239,.91) 32%,rgba(244,244,239,.40) 57%,rgba(244,244,239,.08) 84%);
  }
  .property-layer::before{inset:auto -25% -25% 5%;height:62%}
  .hero-copy{
    left:18px;right:18px;bottom:max(11vh,84px);width:auto;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .hero-copy h1{margin:18px 0 16px;font-size:clamp(56px,17.2vw,88px);line-height:.84}
  .hero-copy p{font-size:14px;line-height:1.55;max-width:96%}
  .hero-index{display:none}
  .scroll-cue{left:18px;bottom:max(17px,env(safe-area-inset-bottom));font-size:8px}
  .scroll-cue i{width:32px}
  .nft-card{width:clamp(108px,29vw,138px);border-radius:14px}
  .nft-card.n2{width:clamp(102px,27vw,128px)}
  .nft-card.n3{width:clamp(105px,28vw,133px)}
  .nft-card.n4{width:clamp(94px,24vw,116px)}
  .rwa-phase-copy{width:calc(100% - 36px);top:49%}
  .rwa-phase-copy h2{font-size:clamp(50px,14.8vw,78px);line-height:.87}
  .rwa-phase-copy p{font-size:14px;line-height:1.55;margin-top:18px;max-width:480px}
  .token-word-stack{width:calc(100% - 30px)}
  .token-word{font-size:clamp(45px,14.8vw,76px);line-height:.82;white-space:normal;margin:7px 0}

  /* Intro */
  .service-intro{min-height:86svh;padding:105px 18px 76px}
  .service-intro h2{font-size:clamp(46px,12.8vw,70px);line-height:.93;margin-top:15px}
  .service-intro p{font-size:14px;line-height:1.6}

  /* Tokenization: copy + compact three-step rail fit inside the pinned screen. */
  .token-service{height:255vh}
  .token-content{
    width:calc(100% - 36px);grid-template-columns:1fr;grid-template-rows:auto auto;
    align-content:center;gap:18px;padding:76px 0 22px;
  }
  .token-copy h2{font-size:clamp(48px,13.8vw,72px);line-height:.86;margin:12px 0}
  .token-copy p{font-size:13px;line-height:1.52;margin:0;max-width:95%}
  .token-copy .btn-row{margin-top:14px}
  .token-rail{
    height:auto;width:100%;border-left:0;padding-left:0;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;
  }
  .token-node{min-height:112px;padding:13px 10px;border-radius:16px;transform:translateY(16px)}
  .token-node::before{display:none}
  .token-node small{font-size:7px;letter-spacing:.10em;margin-bottom:6px}
  .token-node strong{display:block;font-size:15px;line-height:1.05}
  .token-node p{display:none}

  /* BrickSchool: copy and certification are sequenced in JS to avoid overlap. */
  .school-sequence{height:335vh}
  .school-title{font-size:clamp(72px,24vw,124px);line-height:.7}
  .school-copy{
    left:18px;right:18px;bottom:auto;top:18svh;width:auto;
    transform:translateY(30px);
  }
  .school-copy h2{font-size:clamp(43px,12.5vw,64px);line-height:.92;margin:12px 0}
  .school-copy p{font-size:13px;line-height:1.55;max-width:94%;margin:0}
  .school-cert-panel{
    left:18px;right:18px;bottom:max(6svh,42px);width:auto;padding:18px;border-radius:22px;
  }
  .school-cert-panel h3{font-size:27px;margin:8px 0 10px}
  .school-cert-panel p{font-size:12px;line-height:1.5}
  .cert-list{grid-template-columns:1fr;gap:6px;margin-top:14px}
  .cert-chip{padding:10px 11px;font-size:9px}
  .cert-chip-link{gap:10px}
  .cert-chip-link strong{font-size:7.5px}

  /* Final CTA */
  .final{min-height:100svh;padding:100px 18px max(26px,env(safe-area-inset-bottom))}
  .final-inner{grid-template-columns:1fr;gap:42px;align-items:start}
  .final h2{font-size:clamp(52px,15vw,78px);line-height:.84;margin:14px 0}
  .final p{font-size:14px;line-height:1.58}
  .final-row{padding:16px 0}
  footer{margin-top:58px;flex-direction:column;gap:7px}
}

/* Very narrow phones. */
@media (max-width: 390px){
  .nav-cta{padding:9px 10px;font-size:9px}
  .hero-copy h1{font-size:clamp(52px,16.6vw,66px)}
  .hero-copy p{font-size:13px}
  .btn{padding:0 13px}
  .token-node{padding:12px 8px}
  .token-node strong{font-size:14px}
  .school-copy h2{font-size:clamp(40px,12vw,53px)}
  .school-cert-panel h3{font-size:24px}
}

/* Short phones: trim secondary copy, preserve the visual sequence and CTAs. */
@media (max-width:700px) and (max-height:720px){
  .hero-copy{bottom:70px}
  .hero-copy h1{font-size:clamp(50px,15.5vw,70px);margin-bottom:12px}
  .hero-copy p{font-size:12.5px;line-height:1.45}
  .service-intro{padding-top:92px;padding-bottom:62px}
  .token-content{padding-top:64px;padding-bottom:12px}
  .token-copy p{font-size:12px}
  .school-copy{top:15svh}
  .school-copy p{font-size:12px}
  .school-cert-panel{bottom:28px;padding:15px}
  .school-cert-panel p{display:none}
  .cert-list{margin-top:10px}
}

/* Touch targets should not depend on hover to feel interactive. */
@media (hover:none){
  .btn:hover{transform:none}
  .nav-links a:hover{color:inherit}
}

/* ============================================================================
   v3.3 — CONTENT & SERVICES INTEGRATION
   ========================================================================== */

/* Pending destination: visually behaves like the other CTA, JS only prevents
   navigation until the Hostinger route is supplied. */
.pending-link{cursor:pointer}

/* ---------------------------------------------------------------------------
   TOKENIZACIÓN & RWA — VALUE LAYER
   ------------------------------------------------------------------------- */
.rwa-value{
  position:relative;
  padding:clamp(110px,14vw,190px) 24px;
  background:var(--paper);
  overflow:hidden;
}
.rwa-value::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.46;
  background-image:
    linear-gradient(rgba(22,62,49,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,62,49,.045) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
}
.rwa-value-inner{position:relative;z-index:1;width:min(1380px,100%);margin:auto}
.rwa-value-head{max-width:1050px}
.rwa-value-head h2{
  margin:20px 0 24px;
  font:700 clamp(58px,8.2vw,126px)/.87 "Manrope",sans-serif;
  letter-spacing:-.082em;
}
.rwa-value-head h2 em{font-style:normal;color:var(--green)}
.rwa-value-head>p{max-width:760px;margin:0;color:#5d6a63;font-size:17px;line-height:1.7}
.rwa-value-grid{
  margin-top:clamp(58px,7vw,96px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.rwa-value-card{
  min-height:330px;
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.38);
}
.rwa-value-card>span{
  margin-bottom:auto;
  color:#748079;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.rwa-value-card h3{
  margin:0 0 12px;
  font:700 clamp(25px,2.3vw,38px)/1 "Manrope",sans-serif;
  letter-spacing:-.055em;
}
.rwa-value-card p{margin:0;color:#65726b;font-size:13px;line-height:1.62}
.rwa-project-cta{
  margin-top:clamp(42px,6vw,78px);
  padding:clamp(28px,4vw,50px);
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:42px;
  border:1px solid rgba(22,62,49,.12);
  border-radius:34px;
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(223,232,217,.62));
}
.rwa-project-cta h3{
  margin:13px 0 9px;
  font:700 clamp(34px,4.2vw,62px)/.95 "Manrope",sans-serif;
  letter-spacing:-.068em;
}
.rwa-project-cta p{max-width:650px;margin:0;color:#617069;font-size:14px;line-height:1.65}
.rwa-project-cta .btn-row{margin-top:0;flex-shrink:0}
.rwa-note{margin:14px 4px 0;color:#87918b;font-size:10px;line-height:1.5}

/* ---------------------------------------------------------------------------
   BRICKSCHOOL — PROGRAMS, SPECIALIZATIONS, SERVICES
   ------------------------------------------------------------------------- */
.school-programs{
  position:relative;
  padding:clamp(110px,14vw,190px) 24px;
  background:#eef0e9;
  overflow:hidden;
}
.school-programs::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 82% 12%,rgba(185,200,183,.32),transparent 26%),
    linear-gradient(rgba(22,62,49,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,62,49,.035) 1px,transparent 1px);
  background-size:auto,58px 58px,58px 58px;
  pointer-events:none;
}
.school-programs-inner{position:relative;z-index:1;width:min(1380px,100%);margin:auto}
.program-head{max-width:1040px;scroll-margin-top:96px}
.program-head h2{
  margin:18px 0 22px;
  font:700 clamp(58px,8.2vw,126px)/.87 "Manrope",sans-serif;
  letter-spacing:-.082em;
}
.program-head h2 em{font-style:normal;color:var(--green)}
.program-head p{max-width:720px;margin:0;color:#617069;font-size:17px;line-height:1.7}
.training-path{
  margin-top:clamp(56px,7vw,92px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.path-card{
  min-height:430px;
  padding:26px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(22,62,49,.12);
  border-radius:28px;
  background:rgba(250,251,247,.84);
}
.path-phase{
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#748079;
}
.path-index{
  margin:42px 0 58px;
  font:600 clamp(68px,7vw,106px)/.7 "Manrope",sans-serif;
  letter-spacing:-.09em;
  color:#ccd5c9;
}
.path-card h3{
  margin:0 0 12px;
  font:700 clamp(27px,2.45vw,39px)/.98 "Manrope",sans-serif;
  letter-spacing:-.055em;
}
.path-card p{margin:0;color:#66736c;font-size:13px;line-height:1.62}
.path-card small{
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid var(--line);
  color:#536158;
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.program-block{margin-top:clamp(100px,12vw,160px)}
.program-subhead{max-width:820px}
.program-subhead h3{
  margin:13px 0 12px;
  font:700 clamp(42px,6vw,82px)/.9 "Manrope",sans-serif;
  letter-spacing:-.075em;
}
.program-subhead>p{max-width:650px;margin:0;color:#67746d;font-size:14px;line-height:1.65}
.specialization-grid,
.school-services-grid{
  margin-top:38px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.specialization-card,
.school-service-card{
  min-height:285px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(22,62,49,.12);
  border-radius:24px;
  background:rgba(255,255,255,.68);
}
.specialization-card>span,
.school-service-card>span{
  margin-bottom:auto;
  color:#718078;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.specialization-card h4,
.school-service-card h4{
  margin:0 0 11px;
  font:700 25px/1.02 "Manrope",sans-serif;
  letter-spacing:-.05em;
}
.specialization-card p,
.school-service-card p{margin:0;color:#66736c;font-size:12px;line-height:1.58}
.services-block{padding-top:clamp(44px,5vw,70px);border-top:1px solid rgba(22,62,49,.12)}
.services-block>.btn-row{margin-top:34px}

/* ---------------------------------------------------------------------------
   DESARROLLO WEB — PINNED INTERFACE SCENE
   ------------------------------------------------------------------------- */
.web-sequence{height:245vh;position:relative;background:#f2f3ed}
.web-stage{height:100vh;position:relative;overflow:hidden;background:#f2f3ed}
.web-grid{
  position:absolute;
  inset:0;
  opacity:.62;
  background-image:
    linear-gradient(rgba(10,23,18,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,23,18,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent);
}
.web-content{
  position:relative;
  z-index:2;
  width:min(1380px,calc(100% - 48px));
  height:100%;
  margin:auto;
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  align-items:center;
  gap:70px;
}
.web-copy{will-change:transform,opacity}
.web-copy h2{
  margin:18px 0;
  font:700 clamp(60px,8.2vw,124px)/.84 "Manrope",sans-serif;
  letter-spacing:-.083em;
}
.web-copy h2 em{font-style:normal;color:var(--green)}
.web-copy p{max-width:590px;margin:0;color:#606d66;font-size:16px;line-height:1.68}
.web-visual{position:relative;height:min(650px,68vh);min-height:480px;perspective:1200px}
.web-browser{
  position:absolute;
  inset:5% 2% 8% 8%;
  overflow:hidden;
  border:1px solid rgba(22,62,49,.14);
  border-radius:30px;
  background:#fbfcf8;
  box-shadow:0 38px 100px rgba(20,45,36,.15);
  transform:translate3d(0,34px,0) rotateY(-5deg) scale(.94);
  opacity:.45;
  will-change:transform,opacity;
}
.browser-bar{
  height:52px;
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:7px;
  border-bottom:1px solid var(--line);
  color:#7b8780;
  font-size:8px;
  letter-spacing:.14em;
}
.browser-bar i{width:7px;height:7px;border-radius:50%;background:#b9c4bc}
.browser-bar span{margin-left:auto}
.browser-canvas{position:relative;height:calc(100% - 52px);padding:42px;background:linear-gradient(145deg,#eef3ea,#fbfcf8 56%)}
.browser-kicker{font-size:8px;letter-spacing:.16em;color:#748079}
.browser-word{
  margin-top:12%;
  font:800 clamp(78px,9vw,150px)/.72 "Manrope",sans-serif;
  letter-spacing:-.105em;
  color:var(--green);
}
.browser-line{height:1px;width:52%;margin-top:28px;background:rgba(22,62,49,.23)}
.browser-line.wide{width:76%}
.browser-pill{
  position:absolute;
  right:34px;
  bottom:32px;
  padding:12px 15px;
  border-radius:999px;
  background:var(--green);
  color:white;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
}
.code-panel{
  position:absolute;
  left:0;
  bottom:1%;
  width:min(330px,43%);
  padding:20px;
  display:grid;
  grid-template-columns:26px 1fr;
  gap:10px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:#163e31;
  color:#e8f0e3;
  box-shadow:0 28px 70px rgba(17,47,36,.2);
  transform:translate3d(-28px,48px,0) rotate(-3deg) scale(.9);
  opacity:0;
  will-change:transform,opacity;
}
.code-panel span{color:#92aa99;font:500 9px/1.5 "DM Sans",sans-serif}
.code-panel code{font:500 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#edf4e8}
.web-status{
  position:absolute;
  right:0;
  top:3%;
  padding:11px 14px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  transform:translateY(-18px);
  opacity:0;
  will-change:transform,opacity;
}
.status-dot{width:7px;height:7px;border-radius:50%;background:#7ea27c;box-shadow:0 0 0 5px rgba(126,162,124,.15)}

/* Make no-GSAP fallback include the new pinned section. */
.no-gsap .web-sequence{height:auto}
.no-gsap .web-stage{min-height:100vh;height:auto;padding:120px 0;overflow:hidden}
.no-gsap .web-copy,.no-gsap .web-browser,.no-gsap .code-panel,.no-gsap .web-status{opacity:1;transform:none}



/* ---------------------------------------------------------------------------
   v3.4 WEB EXPERIENCES — OWNERSHIP + COMMERCIAL MODELS
   ------------------------------------------------------------------------- */
.web-flow-copy{margin-top:24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#647169;font-size:9px;font-weight:700;letter-spacing:.14em}
.web-flow-copy i{display:block;width:30px;height:1px;background:rgba(22,62,49,.22)}
.browser-steps{position:absolute;left:42px;bottom:34px;display:flex;gap:7px;max-width:62%}
.browser-steps span{padding:7px 9px;border:1px solid rgba(22,62,49,.13);border-radius:999px;background:rgba(255,255,255,.62);color:#69766f;font-size:7px;font-weight:700;letter-spacing:.09em;opacity:.38;transform:translateY(8px)}
.browser-pill{bottom:76px}

.web-ownership{height:280vh;position:relative;background:#163e31;color:#f5f6ef}
.web-ownership-stage{height:100vh;position:relative;overflow:hidden}
.ownership-grid{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);background-size:76px 76px;will-change:transform}
.ownership-words{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.ownership-word{position:absolute;white-space:nowrap;font:800 clamp(76px,13.5vw,210px)/.78 "Manrope",sans-serif;letter-spacing:-.09em;color:#f4f6ef;opacity:0;transform:translate3d(0,34px,0) scale(.9);will-change:transform,opacity}
.ownership-final{position:absolute;z-index:2;left:50%;top:50%;width:min(1180px,calc(100% - 48px));transform:translate(-50%,-44%);opacity:0;will-change:transform,opacity}
.ownership-final .section-kicker{color:rgba(255,255,255,.58)}
.ownership-final h2{margin:18px 0 20px;max-width:1050px;font:700 clamp(56px,8.8vw,128px)/.84 "Manrope",sans-serif;letter-spacing:-.082em}
.ownership-final h2 em{font-style:normal;color:#dceacb}
.ownership-final>p{max-width:720px;margin:0;color:rgba(255,255,255,.7);font-size:16px;line-height:1.7}
.ownership-choices{margin-top:52px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.ownership-choices article{min-height:190px;padding:28px 28px 30px 0}
.ownership-choices article+article{padding-left:28px;border-left:1px solid rgba(255,255,255,.16)}
.ownership-choices span{display:block;margin-bottom:30px;color:rgba(255,255,255,.48);font-size:9px;font-weight:700;letter-spacing:.14em}
.ownership-choices strong{display:block;font:700 29px/1 "Manrope",sans-serif;letter-spacing:-.045em}
.ownership-choices p{max-width:480px;margin:14px 0 0;color:rgba(255,255,255,.62);font-size:12px;line-height:1.6}
.no-lockin{margin-top:24px;font:700 12px/1.4 "Manrope",sans-serif;letter-spacing:.11em}
.no-lockin span{margin-left:8px;color:rgba(255,255,255,.52);font:500 11px/1.5 "DM Sans",sans-serif;letter-spacing:0}

.web-offers{padding:clamp(110px,12vw,180px) 24px;background:#f5f6f1;scroll-margin-top:96px}
.web-offers-inner{width:min(1380px,100%);margin:auto}
.web-offers-head{max-width:980px}
.web-offers-head h2{margin:18px 0 22px;font:700 clamp(58px,8.7vw,128px)/.84 "Manrope",sans-serif;letter-spacing:-.083em}
.web-offers-head h2 em{font-style:normal;color:var(--green)}
.web-offers-head>p{max-width:700px;margin:0;color:#647169;font-size:16px;line-height:1.7}
.web-model-grid{margin-top:76px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.web-model-card{min-height:650px;padding:28px;display:flex;flex-direction:column;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fafbf7}
.web-model-card.featured{background:#edf2e7}
.web-model-card.dark{background:#163e31;color:#f5f6ef}
.model-top{display:flex;justify-content:space-between;align-items:center;color:#78847d;font-size:9px;font-weight:700;letter-spacing:.14em}
.web-model-card.dark .model-top{color:rgba(255,255,255,.5)}
.model-top span{font:700 22px/1 "Manrope",sans-serif;letter-spacing:-.04em}
.web-model-card h3{margin:52px 0 16px;font:700 clamp(34px,3vw,48px)/.94 "Manrope",sans-serif;letter-spacing:-.058em}
.model-lead{min-height:84px;margin:0;color:#68756e;font-size:13px;line-height:1.62}
.web-model-card.dark .model-lead{color:rgba(255,255,255,.64)}
.web-model-card ul{list-style:none;padding:0;margin:38px 0 52px;border-top:1px solid var(--line)}
.web-model-card.dark ul{border-color:rgba(255,255,255,.14)}
.web-model-card li{padding:14px 0;border-bottom:1px solid var(--line);color:#47564f;font-size:12px}
.web-model-card.dark li{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.75)}
.web-model-card li:before{content:'↗';display:inline-block;width:25px;color:var(--green);font-weight:700}
.web-model-card.dark li:before{color:#dceacb}
.model-bottom{margin-top:auto;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line)}
.web-model-card.dark .model-bottom{border-color:rgba(255,255,255,.14)}
.model-bottom span{color:#7a867f;font-size:8px;font-weight:700;letter-spacing:.13em}
.web-model-card.dark .model-bottom span{color:rgba(255,255,255,.45)}
.model-bottom a{font-size:11px;font-weight:700;color:var(--green)}
.web-model-card.dark .model-bottom a{color:#e6efd9}
.web-migration{margin-top:48px;padding:30px;display:grid;grid-template-columns:.85fr 1.2fr auto;gap:34px;align-items:center;border:1px solid var(--line);border-radius:28px;background:#fff}
.web-migration h3{margin:9px 0 0;font:700 clamp(30px,3.2vw,44px)/1 "Manrope",sans-serif;letter-spacing:-.05em}
.web-migration>p{margin:0;color:#637068;font-size:13px;line-height:1.65}

.no-gsap .web-ownership{height:auto}
.no-gsap .web-ownership-stage{height:auto;min-height:100vh;padding:110px 0}
.no-gsap .ownership-words{display:none}
.no-gsap .ownership-final{position:relative;left:auto;top:auto;transform:none;opacity:1;margin:auto}


/* ---------------------------------------------------------------------------
   v3.3 RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width:1180px){
  .web-model-grid{grid-template-columns:1fr 1fr}
  .web-model-card.dark{grid-column:1/-1;min-height:520px}
  .rwa-value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .specialization-grid,.school-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .web-content{grid-template-columns:1fr 1fr;gap:42px}
}

@media (min-width:701px) and (max-width:1000px){
  .ownership-final{width:calc(100% - 56px)}
  .ownership-final h2{font-size:clamp(54px,9vw,88px)}
  .web-migration{grid-template-columns:1fr;align-items:start}
  .rwa-project-cta{align-items:start;flex-direction:column}
  .training-path{grid-template-columns:1fr}
  .path-card{min-height:330px}
  .path-index{margin:32px 0 40px}
  .web-content{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:16px;padding:84px 0 24px}
  .web-copy h2{font-size:clamp(52px,8vw,82px);margin:12px 0}
  .web-copy p{font-size:14px;line-height:1.55}
  .web-visual{height:43vh;min-height:390px}
  .web-browser{inset:0 6% 4% 9%}
  .code-panel{width:300px;left:2%;bottom:0}
}

@media (max-width:700px){
  .web-flow-copy{margin-top:14px;gap:7px;font-size:7px}
  .web-flow-copy i{width:18px}
  .browser-steps{left:22px;bottom:18px;gap:4px;max-width:72%}
  .browser-steps span{padding:5px 6px;font-size:5px}
  .browser-pill{bottom:50px}
  .web-ownership{height:300vh}
  .ownership-grid{background-size:48px 48px}
  .ownership-word{font-size:clamp(62px,19vw,98px)}
  .ownership-final{width:calc(100% - 36px);transform:translate(-50%,-47%)}
  .ownership-final h2{font-size:clamp(48px,13vw,72px);line-height:.86;margin:12px 0 16px}
  .ownership-final>p{font-size:13px;line-height:1.58}
  .ownership-choices{margin-top:30px;grid-template-columns:1fr}
  .ownership-choices article{min-height:0;padding:18px 0 20px}
  .ownership-choices article+article{padding:20px 0;border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .ownership-choices span{margin-bottom:13px;font-size:7px}
  .ownership-choices strong{font-size:24px}
  .ownership-choices p{font-size:10px;margin-top:8px}
  .no-lockin{margin-top:16px;font-size:9px}
  .no-lockin span{display:block;margin:5px 0 0;font-size:9px}
  .web-offers{padding:96px 18px}
  .web-offers-head h2{font-size:clamp(48px,13.5vw,72px);line-height:.87}
  .web-offers-head>p{font-size:14px;line-height:1.6}
  .web-model-grid{margin-top:44px;grid-template-columns:1fr;border-left:0}
  .web-model-card,.web-model-card.dark{grid-column:auto;min-height:570px;padding:22px;border-left:1px solid var(--line)}
  .web-model-card.dark{border-color:rgba(255,255,255,.14)}
  .web-model-card h3{margin-top:38px;font-size:36px}
  .model-lead{min-height:0}
  .web-model-card ul{margin:30px 0 38px}
  .web-migration{margin-top:32px;padding:22px;grid-template-columns:1fr;gap:20px;border-radius:22px}
  .rwa-value,.school-programs{padding:96px 18px}
  .rwa-value-head h2,.program-head h2{font-size:clamp(48px,13.6vw,72px);line-height:.88}
  .rwa-value-head>p,.program-head p{font-size:14px;line-height:1.6}
  .rwa-value-grid{margin-top:44px;grid-template-columns:1fr;border-left:0}
  .rwa-value-card{min-height:230px;padding:22px;border-left:1px solid var(--line)}
  .rwa-project-cta{margin-top:34px;padding:24px 20px;display:block;border-radius:24px}
  .rwa-project-cta h3{font-size:clamp(35px,10vw,48px)}
  .rwa-project-cta .btn-row{margin-top:22px}
  .rwa-note{font-size:9px}

  .training-path{margin-top:42px;grid-template-columns:1fr}
  .path-card{min-height:310px;padding:22px;border-radius:22px}
  .path-index{margin:28px 0 38px;font-size:74px}
  .path-card h3{font-size:30px}
  .program-block{margin-top:86px}
  .program-subhead h3{font-size:clamp(42px,12vw,60px)}
  .specialization-grid,.school-services-grid{grid-template-columns:1fr}
  .specialization-card,.school-service-card{min-height:230px;padding:21px}
  .specialization-card h4,.school-service-card h4{font-size:25px}

  .web-sequence{height:265vh}
  .web-content{
    width:calc(100% - 36px);
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    align-content:center;
    gap:14px;
    padding:72px 0 20px;
  }
  .web-copy h2{font-size:clamp(48px,13.6vw,72px);line-height:.86;margin:12px 0}
  .web-copy p{font-size:13px;line-height:1.52;margin:0}
  .web-copy .btn-row{margin-top:14px}
  .web-visual{height:38svh;min-height:255px;max-height:350px}
  .web-browser{inset:0 2% 5% 5%;border-radius:21px}
  .browser-bar{height:38px;padding:0 12px}
  .browser-canvas{height:calc(100% - 38px);padding:22px}
  .browser-word{font-size:clamp(58px,18vw,92px)}
  .browser-pill{right:18px;bottom:17px;padding:9px 11px;font-size:7px}
  .code-panel{width:58%;left:0;bottom:-3%;padding:13px;gap:6px 8px;border-radius:16px}
  .code-panel code{font-size:8px}.code-panel span{font-size:7px}
  .web-status{right:0;top:-3%;padding:8px 10px;font-size:7px}
}

@media (max-width:390px){
  .rwa-value-card{min-height:215px}
  .specialization-card,.school-service-card{min-height:215px}
  .web-copy h2{font-size:clamp(45px,13vw,61px)}
  .code-panel{width:62%}
}

@media (max-width:700px) and (max-height:720px){
  .web-content{padding-top:62px;padding-bottom:10px}
  .web-copy p{font-size:12px}
  .web-visual{height:34svh;min-height:220px}
}


/* =============================================================
   v3.6 — BRAND + NFT SAFE FRAME
   Exact Brick400 mark and uncropped NFT/card presentation.
============================================================= */
.brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:800 15px/1 "Manrope",sans-serif;
  letter-spacing:-.055em;
  white-space:nowrap;
}
.brand img{
  width:31px;
  height:35px;
  object-fit:contain;
  flex:0 0 auto;
}
.brand span{display:inline-block}
.brand sup{margin-left:-4px}

.nft-card,
.nft-card.n2,
.nft-card.n3,
.nft-card.n4{
  width:clamp(108px,10.4vw,168px);
  aspect-ratio:848 / 1200;
  overflow:visible;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.nft-card.n2{width:clamp(104px,9.7vw,156px)}
.nft-card.n3{width:clamp(108px,10.2vw,164px)}
.nft-card.n4{width:clamp(104px,9.8vw,158px)}
.nft-card img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:16px;
  box-shadow:0 22px 56px rgba(10,23,18,.16);
}

.contact-email{
  display:inline-block;
  margin-top:18px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  letter-spacing:.05em;
  border-bottom:1px solid rgba(255,255,255,.24);
  padding-bottom:3px;
}

@media (max-width:1000px){
  .nft-card,
  .nft-card.n2,
  .nft-card.n3,
  .nft-card.n4{width:clamp(102px,14vw,142px)}
}
@media (max-width:700px){
  .brand{gap:6px}
  .brand img{width:27px;height:31px}
  .brand span{font-size:13px}
  .nft-card,
  .nft-card.n2,
  .nft-card.n3,
  .nft-card.n4{width:clamp(82px,23vw,108px)}
  .nft-card img{border-radius:12px;box-shadow:0 16px 38px rgba(10,23,18,.15)}
}
@media (max-width:390px){
  .brand{gap:5px}
  .brand span{display:inline-block;font-size:11px;letter-spacing:-.06em}
  .brand sup{display:none}
  .brand img{width:25px;height:29px}
}

/* =============================================================
   v3.7 — BRICKSCHOOL LIVE PROGRAM + CONTACT ENTRY POINTS
============================================================= */
.path-card-live{background:#f8faf4;border-color:rgba(22,62,49,.28);box-shadow:0 20px 58px rgba(20,45,36,.08)}
.path-meta{margin-top:auto;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;align-items:end}
.path-meta strong{font:700 18px "Manrope",sans-serif;letter-spacing:-.035em;color:var(--green)}
.path-meta span{max-width:120px;text-align:right;color:#6d7972;font-size:9px;line-height:1.4;text-transform:uppercase;letter-spacing:.08em}
.path-link{margin-top:14px;min-height:42px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;background:var(--green);color:#fff;font-size:10px;font-weight:700}
.program-note{max-width:760px;margin:18px 0 0;color:#7c8881;font-size:10px;line-height:1.6}
@media(max-width:700px){.path-meta{align-items:start;flex-direction:column}.path-meta span{text-align:left;max-width:none}}

/* v3.8 — BrickSchool conversion-focused home */
.path-card-live .path-phase{color:var(--green);font-weight:700}
.path-link{display:inline-flex;align-items:center;justify-content:center;margin-top:16px;min-height:42px;padding:0 16px;border-radius:999px;font-size:11px;font-weight:700;background:var(--green);color:#fff;text-decoration:none}
.path-link:hover{opacity:.68}
.school-programs-cta{margin-top:34px;padding:28px;border:1px solid rgba(22,62,49,.12);border-radius:28px;background:rgba(250,251,247,.78);display:flex;align-items:center;justify-content:space-between;gap:28px}
.school-programs-cta h3{max-width:760px;margin:10px 0 0;font:700 clamp(30px,4vw,54px)/.95 "Manrope",sans-serif;letter-spacing:-.06em}
.school-programs-cta .btn-row{margin-top:0;flex-shrink:0}
@media(max-width:760px){.school-programs-cta{display:block;padding:22px}.school-programs-cta .btn-row{margin-top:22px}}

/* ==========================================================
   v3.9 / CLIENT SHOWCASE
========================================================== */
.client-showcase{
  position:relative;
  overflow:hidden;
  padding:clamp(110px,12vw,180px) 24px;
  background:#eef1eb;
  border-top:1px solid var(--line);
}
.client-showcase:before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.48;
  background-image:
    linear-gradient(rgba(22,62,49,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,62,49,.045) 1px,transparent 1px);
  background-size:54px 54px;
}
.client-showcase-inner{position:relative;z-index:1;width:min(1380px,100%);margin:auto}
.client-showcase-head{max-width:980px}
.client-showcase-head h2{
  margin:18px 0 22px;
  font:700 clamp(58px,8.2vw,118px)/.86 "Manrope",sans-serif;
  letter-spacing:-.078em;
}
.client-showcase-head h2 em{font-style:normal;color:var(--green)}
.client-showcase-head>p{max-width:690px;margin:0;color:#647169;font-size:16px;line-height:1.7}
.client-logo-grid{
  margin-top:76px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid rgba(12,23,19,.11);
  border-left:1px solid rgba(12,23,19,.11);
  background:rgba(255,255,255,.26);
}
.client-logo-card{
  min-width:0;
  min-height:260px;
  padding:20px 18px 18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  border-right:1px solid rgba(12,23,19,.11);
  border-bottom:1px solid rgba(12,23,19,.11);
  background:rgba(250,251,247,.74);
  transition:transform .55s var(--ease),background .55s var(--ease),box-shadow .55s var(--ease);
}
.client-logo-card:hover{
  transform:translateY(-7px);
  background:#fff;
  box-shadow:0 28px 70px rgba(22,62,49,.08);
}
.client-logo-frame{
  min-height:185px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(12,23,19,.06);
}
.client-logo-frame-dark{background:#111}
.client-logo{
  display:block;
  width:100%;
  height:130px;
  object-fit:contain;
  object-position:center;
}
.client-logo-dico{height:122px}
.client-logo-lomas{height:128px}
.client-logo-xpecta{height:100px;max-width:100%;object-fit:contain}
.client-logo-reyes{height:150px}
.client-logo-ttm{height:140px}
.client-logo-card>span{
  color:#5d6963;
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.client-showcase-foot{
  margin-top:34px;
  min-height:70px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#647169;
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
}
.client-showcase-foot i{display:block;width:38px;height:1px;background:rgba(22,62,49,.18)}
.client-showcase-foot .btn{margin-left:auto;letter-spacing:0}

@media(max-width:1100px){
  .client-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .client-logo-card{min-height:235px}
  .client-logo-grid .client-logo-card:nth-child(4),
  .client-logo-grid .client-logo-card:nth-child(5){min-height:220px}
}
@media(max-width:900px){
  .client-showcase{padding:92px 0 96px}
  .client-showcase-inner{width:100%}
  .client-showcase-head{padding:0 18px}
  .client-showcase-head h2{font-size:clamp(48px,13.2vw,72px);line-height:.88}
  .client-showcase-head>p{font-size:14px;line-height:1.6}

  /* Mobile becomes a native horizontal rail instead of a vertical logo list. */
  .client-logo-grid{
    margin-top:40px;
    display:flex;
    gap:12px;
    grid-template-columns:none;
    width:100%;
    padding:0 18px 10px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    scrollbar-width:none;
    border:0;
    background:transparent;
  }
  .client-logo-grid::-webkit-scrollbar{display:none}
  .client-logo-card{
    flex:0 0 min(78vw,310px);
    min-height:196px;
    padding:14px;
    border:1px solid rgba(12,23,19,.10);
    border-radius:22px;
    background:rgba(250,251,247,.92);
    box-shadow:0 16px 48px rgba(22,62,49,.055);
    transform:none!important;
  }
  .client-logo-card:hover{transform:none;background:rgba(250,251,247,.92);box-shadow:0 16px 48px rgba(22,62,49,.055)}
  .client-logo-frame{min-height:132px;padding:14px;border-radius:17px}
  .client-logo{height:96px}
  .client-logo-dico{height:92px}
  .client-logo-lomas{height:96px}
  .client-logo-xpecta{height:82px}
  .client-logo-reyes{height:105px}
  .client-logo-ttm{height:100px}
  .client-logo-card>span{font-size:9px}
  .client-logo-card[data-client-clone="true"]{display:flex}
  .client-showcase-foot{padding:0 18px;align-items:flex-start;flex-wrap:wrap;gap:8px;margin-top:22px}
  .client-showcase-foot i{width:20px}
  .client-showcase-foot .btn{width:100%;margin:14px 0 0}
}
@media(min-width:901px){
  .client-logo-card[data-client-clone="true"]{display:none!important}
}
@media(max-width:430px){
  .client-logo-card{flex-basis:82vw;min-height:188px}
  .client-logo-frame{min-height:126px}
}

/* ==========================================================
   v4.1 / TOUCH PERFORMANCE
   Shorter pinned journeys + compositor-friendly interaction on phones.
========================================================== */
.rwa-stage,.token-stage,.school-stage,.web-stage,.web-ownership-stage{touch-action:pan-y}

@media(max-width:700px){
  /* The original desktop journeys were intentionally long. On touch they felt
     like the page was resisting the finger, so mobile progresses faster. */
  .performance-lite .rwa-sequence{height:315vh}
  .performance-lite .token-service{height:180vh}
  .performance-lite .web-sequence{height:188vh}
  .performance-lite .web-ownership{height:205vh}
  .performance-lite .school-sequence{height:218vh}

  .performance-lite .web-browser,
  .performance-lite .code-panel{box-shadow:none}
  .performance-lite .web-grid,
  .performance-lite .ownership-grid{opacity:.35}
  .performance-lite .browser-word{transform:none}
}

/* v4.0 — token label spacing */
.real-asset-word span{display:inline-block;margin-left:.12em}


/* ==========================================================
   v4.2 / MOBILE NAVIGATION + BRAND VISIBILITY
========================================================== */
.nav-actions{display:flex;align-items:center;gap:8px}
.menu-toggle{
  display:none;width:42px;height:42px;padding:0;border:1px solid rgba(10,23,18,.10);
  border-radius:50%;background:rgba(255,255,255,.78);align-items:center;justify-content:center;
  flex-direction:column;gap:4px;cursor:pointer;color:var(--ink);
}
.menu-toggle span{display:block;width:16px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .28s var(--ease),opacity .2s ease}
.mobile-menu-backdrop{position:fixed;inset:0;z-index:94;background:rgba(5,15,11,.24);opacity:0;transition:opacity .3s ease}
.mobile-menu-backdrop[hidden]{display:none}
.mobile-menu-backdrop.is-open{opacity:1}
.mobile-menu{
  position:fixed;z-index:95;top:max(10px,env(safe-area-inset-top));right:10px;
  width:min(420px,calc(100vw - 20px));max-height:calc(100dvh - 20px);overflow:auto;
  padding:15px;border:1px solid rgba(255,255,255,.7);border-radius:30px;
  background:rgba(248,249,245,.98);box-shadow:0 30px 90px rgba(8,24,17,.18);
  transform:translateY(-10px) scale(.98);opacity:0;pointer-events:none;
  transition:transform .32s var(--ease),opacity .25s ease;
}
.mobile-menu.is-open{transform:none;opacity:1;pointer-events:auto}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 10px 5px}
.mobile-menu-brand{display:inline-flex;align-items:center;gap:8px;font:800 13px/1 Manrope,sans-serif;letter-spacing:-.055em}
.mobile-menu-brand img{width:27px;height:31px;object-fit:contain}
.menu-close{width:42px;height:42px;border:0;border-radius:50%;background:#eef1eb;color:var(--ink);font:400 28px/1 sans-serif;cursor:pointer}
.mobile-menu-links{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.mobile-menu-links a{
  min-height:62px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);
  font:700 clamp(22px,6.2vw,30px)/1 Manrope,sans-serif;letter-spacing:-.055em;
}
.mobile-menu-links a span{width:26px;color:#829087;font:700 8px/1 DM Sans,sans-serif;letter-spacing:.12em}
.mobile-menu-contact{
  width:100%;min-height:52px;margin-top:14px;border:0;border-radius:999px;background:var(--green);
  color:#fff;font:700 12px DM Sans,sans-serif;cursor:pointer
}
html.menu-open,body.menu-open{overflow:hidden}

@media(max-width:1000px){
  .menu-toggle{display:flex}
}

@media(max-width:700px){
  .nav{padding:0 7px 0 12px;gap:6px}
  .nav-actions{gap:6px}
  .brand{min-width:0;gap:6px}
  .brand span{display:inline-block!important;font-size:12px!important;letter-spacing:-.06em}
  .brand sup{display:none}
  .brand img{width:26px;height:30px}
  .nav-cta{padding:9px 11px;font-size:9px}
  .menu-toggle{width:38px;height:38px}
  .mobile-menu-links a{font-size:clamp(21px,6.5vw,28px)}
}

@media(max-width:370px){
  .nav{padding-left:10px}
  .brand span{font-size:10.5px!important}
  .brand img{width:24px;height:28px}
  .nav-cta{padding:8px 9px;font-size:8.5px}
  .menu-toggle{width:36px;height:36px}
}

/* Force the client rail on phone/tablet-sized touch layouts. */
@media(max-width:900px){
  .client-logo-grid{display:flex!important}
}

/* ===========================================================================
   v4.5 — MOBILE CARD RAILS (<=700px)
   Modalidades web (Code / Launch / Managed) y ruta BrickSchool pasan de una
   pila vertical a un carrusel horizontal nativo con scroll-snap. La tarjeta
   siguiente asoma para invitar al gesto; js/main.js agrega contador + puntos y
   el efecto de foco (--p) que escala la tarjeta activa mientras se desliza.
   En pantallas mayores a 700px nada de esto aplica.
   ========================================================================= */
.rail-nav{display:none}

@media (max-width:700px){
  .web-model-grid,
  .training-path{
    position:relative;
    display:flex;
    gap:12px;
    grid-template-columns:none;
    margin-inline:-18px;
    padding:4px 18px 26px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:18px;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    border:0;
  }
  .web-model-grid::-webkit-scrollbar,
  .training-path::-webkit-scrollbar{display:none}
  .web-model-grid:focus-visible,
  .training-path:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:22px}

  .web-model-card,
  .web-model-card.dark,
  .path-card{
    flex:0 0 min(84vw,340px);
    min-height:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    scale:calc(1 - var(--p,0) * .05);
    transform-origin:50% 40%;
    will-change:scale;
  }
  .web-model-card,
  .web-model-card.dark{
    grid-column:auto;
    border:1px solid var(--line);
    border-radius:22px;
  }
  .web-model-card.dark{border-color:rgba(255,255,255,.14)}
  .path-card-live{box-shadow:0 10px 26px rgba(20,45,36,.08)}

  .rail-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:2px;
    padding:0 2px;
  }
  .rail-count{font:700 10px/1 "DM Sans",sans-serif;letter-spacing:.16em;color:#7a867f}
  .rail-count b{color:var(--green);font-weight:700}
  .rail-dots{display:flex;align-items:center}
  .rail-dot{
    position:relative;
    width:20px;height:24px;padding:0;
    border:0;background:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .rail-dot::before{
    content:"";
    position:absolute;left:50%;top:50%;
    width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
    border-radius:999px;
    background:rgba(22,62,49,.22);
    transition:width .3s ease,margin-left .3s ease,background-color .3s ease;
  }
  .rail-dot[aria-current="true"]::before{width:24px;margin-left:-12px;background:var(--green)}
}

@media (max-width:700px) and (prefers-reduced-motion:reduce){
  .web-model-card,
  .web-model-card.dark,
  .path-card{scale:none;will-change:auto}
  .rail-dot::before{transition:none}
}