/* NovaQuarks chassis, part 1 of 2.
   LOAD ORDER IS LOAD-BEARING: site.css -> the page's own <style> -> site.tail.css.
   The design exports were authored as a single stylesheet in exactly that order, and
   several page rules are deliberately overridden by the responsive block in part 2.
   Collapsing the two parts into one file put the page block last and silently flipped
   those winners, which is how /es/sistema lost its left padding on mobile. */

@font-face{
  font-family:'Nudica';
  src:url('/assets/fonts/nudica-medium-webfont.woff2') format('woff2'),
      url('/assets/fonts/nudica-medium-webfont.woff') format('woff');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{font-family:'Roboto';src:url('/assets/fonts/roboto-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('/assets/fonts/roboto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('/assets/fonts/roboto-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto Mono';src:url('/assets/fonts/roboto-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

  :root{
    --ground:#181818;--recess:#101010;--fg:#F4F4F5;--sand:#DABDA9;--lav:#8490FE;
    --rule:rgba(244,244,245,0.12);--rule-soft:rgba(244,244,245,0.06);--rule-strong:rgba(244,244,245,0.32);
        /* --fg-mute raised 0.42 -> 0.50 at port time: at 0.42 the 12px mono eyebrows sat at
       3.8:1 against --ground and failed WCAG AA. 0.50 gives 4.88:1. */
    --fg-body:rgba(244,244,245,0.87);--fg-dim:rgba(244,244,245,0.60);--fg-mute:rgba(244,244,245,0.50);
    --ease:cubic-bezier(0.2,0.8,0.2,1);--ease-press:cubic-bezier(0.65,0,0.35,1);
    --display:'Nudica',Helvetica,Arial,sans-serif;
    --body:'Roboto',Helvetica,Arial,sans-serif;--mono:'Roboto Mono',monospace;
    --maxw:1440px;--padx:64px;--indent:clamp(72px,19vw,274px);--indent2:clamp(140px,26vw,378px);
  }
  @media (max-width:1024px){:root{--padx:32px}}
  @media (max-width:768px){:root{--padx:24px;--indent:44px;--indent2:44px}}
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--ground);color:var(--fg-body);
    font-family:var(--body);font-weight:300;font-size:18px;line-height:1.55;
    font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--padx);padding-right:var(--padx)}
  a:focus-visible,button:focus-visible{outline:1px solid var(--lav);outline-offset:4px}
  ::selection{background:var(--lav);color:#101010}

  /* Loader: the monogram drain; brief, and never gates the hero paint */
  #loader{
    position:fixed;inset:0;background:var(--ground);z-index:100;
    display:grid;place-items:center;transition:opacity 600ms var(--ease);
  }
  #loader.done{opacity:0;pointer-events:none}
  #loader{transition:opacity 600ms var(--ease),background-color 600ms var(--ease)}
  #loader.fade{background-color:transparent}
  .pl-badge{
    position:relative;width:132px;height:132px;border-radius:50%;
    background:var(--ground);overflow:hidden;
    transition:transform 700ms var(--ease);will-change:transform;
  }
  .pl-badge.fly{background:transparent}
  .pl-badge.fly .pl-veil{display:none}
  .pl-mark{
    position:absolute;inset:0;margin:auto;width:54px;height:54px;
  }
  .pl-veil{
    position:absolute;inset:-1px;background:var(--fg);
    transform:translateY(0);
    transition:transform 1000ms var(--ease) 350ms;
  }
  #loader.drain .pl-veil{transform:translateY(-101%)}
  @media (prefers-reduced-motion: reduce){#loader{display:none}}

  /* Signatures */
  .punch{width:21px;height:21px;border-radius:50%;background:var(--fg);margin-bottom:44px}

  /* Grain: the one ambient texture */
  .grain{
    position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0.055;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:300px 300px;
  }
  .eyebrow{
    font-family:var(--mono);font-weight:500;font-size:12px;line-height:1;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-mute);
    display:flex;align-items:center;gap:12px;
  }
  .eyebrow .num{color:var(--fg-dim)}
  .eyebrow .dash{color:var(--sand)}

  /* Nav: mark, place and hour, links, actions */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    border-bottom:1px solid transparent;will-change:transform;
    transition:background-color 240ms var(--ease),border-color 240ms var(--ease),transform 360ms var(--ease);
  }
  .nav.hidden{transform:translateY(-110%)}
  .nav-left{display:flex;align-items:center;gap:28px}
  .stamp{
    font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.16em;
    text-transform:uppercase;color:var(--fg-mute);white-space:nowrap;
  }
  .nav.scrolled{
    background:rgba(24,24,24,0.85);
    backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);
    border-bottom-color:var(--rule);
  }
  .nav-inner{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:72px;
  }
  .logo{display:inline-flex;align-items:center;text-decoration:none;opacity:0}
  .logo.landed{opacity:1}
  .logo svg{height:20px;width:auto;display:block}
  .foot-brand svg path{stroke:#F4F4F5;stroke-width:1.2}
  @media (prefers-reduced-motion: reduce){.logo{opacity:1}}
  .nav-links{display:flex;gap:36px;justify-content:center}
  .nav-link{
    color:var(--fg);opacity:0.82;text-decoration:none;
    font-size:14px;font-weight:400;letter-spacing:0.01em;position:relative;padding:6px 0;
    transition:opacity 240ms var(--ease);
  }
  .nav-link::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
    transform:scaleX(0);transform-origin:right center;transition:transform 360ms var(--ease);
  }
  .nav-link:hover{opacity:1}
  .nav-link:hover::after{transform:scaleX(1);transform-origin:left center}
  .nav-right{display:flex;justify-content:flex-end;align-items:center;gap:20px}
  .pill{
    display:inline-flex;align-items:center;border-radius:999px;padding:13px 24px;
    font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:0.08em;
    text-transform:uppercase;text-decoration:none;line-height:1;white-space:nowrap;
    background:var(--fg);color:#101010;border:1px solid var(--fg);
    transition:background-color 240ms var(--ease-press),border-color 240ms var(--ease-press);
  }
  .pill:hover{background:var(--lav);border-color:var(--lav)}
  .pill-ghost{background:transparent;color:var(--fg-dim);border-color:rgba(244,244,245,0.32)}
  .pill-ghost:hover{background:transparent;color:var(--fg);border-color:var(--fg)}
  .menu-btn{
    display:none;background:none;border:none;cursor:pointer;
    font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--fg);padding:12px 0 12px 12px;min-height:44px;
  }
  @media (max-width:900px){
    .nav-links,.nav-right .pill{display:none}
    .menu-btn{display:block}
    .nav-inner{display:flex;justify-content:space-between}
    .nav-left{display:contents}
  }

  /* Mobile panel: the full-screen takeover, per the Bison reference.
     Opens as a fade: the sheet first, then the content, subtly. Never a slide. */
  .panel{
    position:fixed;inset:0;z-index:45;background:var(--recess);
    opacity:0;visibility:hidden;
    transition:opacity 380ms var(--ease),visibility 0s linear 380ms;
    overflow:hidden;
  }
  .panel.open{
    opacity:1;visibility:visible;
    transition:opacity 500ms var(--ease);
  }
  .panel-rail,.panel-right,.panel-giant{
    opacity:0;transform:translateY(26px);
    transition:opacity 220ms var(--ease),transform 220ms var(--ease);
  }
  .panel.open .panel-rail{
    opacity:1;transform:none;
    transition:opacity 700ms var(--ease) 280ms,transform 700ms var(--ease) 280ms;
  }
  .panel.open .panel-right{
    opacity:1;transform:none;
    transition:opacity 700ms var(--ease) 440ms,transform 700ms var(--ease) 440ms;
  }
  .panel.open .panel-giant{
    opacity:1;transform:none;
    transition:opacity 700ms var(--ease) 600ms,transform 700ms var(--ease) 600ms;
  }
  @media (prefers-reduced-motion: reduce){
    .panel,.panel.open,.panel-rail,.panel-right,.panel-giant,
    .panel.open .panel-rail,.panel.open .panel-right,.panel.open .panel-giant{
      transition:none;transform:none;
    }
    .panel.open .panel-rail,.panel.open .panel-right,.panel.open .panel-giant{opacity:1}
  }
  .panel-in{
    position:relative;height:100%;
    display:grid;grid-template-columns:1fr 1.7fr;gap:24px;
    padding-top:128px;align-content:start;
  }
  .panel-rail{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-top:0}
  .panel-rail .punch:first-child{margin-top:-2px}
  .panel-rail .punch{margin:0}
  .panel-rail .punch.p2{margin-top:56px}
  .panel-utility{display:flex;flex-direction:column;gap:2px}
  .panel-utility a{
    font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--fg-dim);text-decoration:none;
    padding:8px 0;min-height:44px;display:flex;align-items:center;
  }
  .panel-utility a:hover{color:var(--fg)}
  .panel-contact{
    font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--fg-mute);line-height:2;
  }
  .panel-rail .pill{margin-top:26px}
  .panel-right{display:flex;flex-direction:column}
  .panel-label{
    font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.16em;
    text-transform:uppercase;color:var(--fg-mute);margin-bottom:20px;
  }
  .panel-nav{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .panel-nav a{
    font-family:var(--display);font-weight:500;
    font-size:clamp(30px,9vw,64px);line-height:1.16;letter-spacing:-0.015em;
    color:var(--fg-dim);text-decoration:none;padding:2px 0;white-space:nowrap;
    transition:color 240ms var(--ease);
  }
  .panel-nav a:hover,.panel-nav a:focus-visible{color:var(--fg)}
  .panel-giant{
    position:absolute;left:0;right:0;bottom:0;overflow:hidden;
    padding:0 var(--padx) 30px;
  }
  .panel-giant svg{display:block;width:100%;height:auto}
  .panel-giant svg path{stroke:#F4F4F5;stroke-width:1.2}
  @media (max-height:720px){
    .panel-in{padding-top:100px}
    .panel-rail .punch.p2{margin-top:30px}
    .panel-rail .pill{margin-top:16px}
    .panel-nav a{font-size:clamp(26px,8vw,44px)}
    .panel-giant{padding-bottom:20px}
  }

  /* 01 Hero */
  .hero{
    position:relative;min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;
    padding-top:calc(96px + 8vh);padding-bottom:14vh;
  }
  .hero .eyebrow{margin-bottom:56px}
  .hero h1{
    font-family:var(--display);font-weight:500;color:var(--fg);
    font-size:clamp(52px,9.5vw,136px);line-height:0.95;letter-spacing:-0.025em;
    max-width:20ch;
  }
  .hero-sub{margin-top:40px;max-width:640px;font-size:19px;line-height:1.55;color:var(--fg-body);letter-spacing:-0.005em}
  .hero-ctas{margin-top:48px}
  .cta-line{
    display:inline-flex;align-items:center;gap:12px;
    font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;
    color:var(--fg);text-decoration:none;position:relative;padding:14px 0;
  }
  .cta-line::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
    transform:scaleX(0);transform-origin:right center;transition:transform 360ms var(--ease);
  }
  .cta-line:hover::after{transform:scaleX(1);transform-origin:left center}
  .cta-line .arr{transition:transform 360ms var(--ease)}
  .cta-line:hover .arr{transform:rotate(-30deg)}

  /* Circular arrow: the ring-fill cue */
  .scroll-cue{
    position:absolute;right:var(--padx);bottom:56px;
    width:92px;height:92px;border-radius:50%;
    display:grid;place-items:center;color:var(--fg);text-decoration:none;
  }
  .scroll-cue svg.ringbase,.scroll-cue svg.ringfill{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
  .scroll-cue .ringbase circle{stroke:var(--rule-strong);stroke-width:1;fill:none}
  .scroll-cue .ringfill circle{
    stroke:var(--fg);stroke-width:1;fill:none;stroke-linecap:round;
    transform:rotate(-90deg);transform-origin:50% 50%;
    stroke-dasharray:283;stroke-dashoffset:283;
    transition:stroke-dashoffset 520ms var(--ease);
  }
  .scroll-cue:hover .ringfill circle{stroke-dashoffset:0}
  .scroll-cue svg.icon{width:28px;height:28px}
  @keyframes spinIn{
    from{transform:rotate(-360deg);opacity:0.2}
    to{transform:rotate(0deg);opacity:1}
  }
  body.introduced .scroll-cue.hin{
    animation-name:spinIn;animation-duration:1400ms;
  }
  .scroll-cue.reveal{transition:none}
  .scroll-cue.reveal.in{animation:spinIn 1400ms var(--ease) 200ms both}
  @keyframes cueThroughDown{
    0%{transform:translateY(0);opacity:1}
    45%{transform:translateY(14px);opacity:0}
    55%{transform:translateY(-14px);opacity:0}
    100%{transform:translateY(0);opacity:1}
  }
  @keyframes cueThroughUp{
    0%{transform:translateY(0);opacity:1}
    45%{transform:translateY(-14px);opacity:0}
    55%{transform:translateY(14px);opacity:0}
    100%{transform:translateY(0);opacity:1}
  }
  .scroll-cue:hover svg.icon{animation:cueThroughDown 560ms var(--ease) 1}
  .scroll-cue.up:hover svg.icon{animation-name:cueThroughUp}
  @media (prefers-reduced-motion: reduce){
    body.introduced .scroll-cue.hin,.scroll-cue.reveal.in,
    .scroll-cue:hover svg.icon,.scroll-cue.up:hover svg.icon{animation:none}
    .scroll-cue.reveal{opacity:1;transform:none}
  }
  .scroll-label{
    position:absolute;right:calc(var(--padx) + 116px);bottom:88px;
    font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.16em;
    text-transform:uppercase;color:var(--fg-mute);white-space:nowrap;
  }
  @media (max-width:768px){
    .scroll-cue{width:64px;height:64px;bottom:40px}
    .scroll-label{display:none}
  }

  /* Short desktop viewports: the hero is a cover; the cue never leaves the first screen.
     Rhythm compresses before type does; ES (three-line lede) is the sizing case. */
  @media (min-width:901px) and (max-height:960px){
    .hero{padding-top:calc(72px + 4vh);padding-bottom:8vh}
    .hero .eyebrow{margin-bottom:40px}
    .hero-sub{margin-top:28px}
    .hero-ctas{margin-top:36px}
  }
  @media (min-width:901px) and (max-height:840px){
    .hero{padding-top:calc(64px + 2vh);padding-bottom:5vh}
    .hero h1{font-size:clamp(52px,9.5vw,118px)}
  }

  /* Section frame: content set toward center, the punch-hole at the corner */
  .section{border-top:1px solid var(--rule);padding-top:160px}
  .section .sec-head{margin-bottom:56px;position:relative}
  .section .sec-head .punch{position:absolute;left:calc(-1*var(--indent));top:-4px;margin:0}
  .close .wrap{padding-left:calc(var(--padx) + var(--indent2))}
  @media (max-width:768px){.section{padding-top:96px}}

  /* 02 Statement: the tower. Content set toward center; the punch-hole in the left corner,
     aligned with the first line, like a hole through the sheet. */
  .statement{min-height:100svh;display:flex;align-items:center;padding-top:0}
  .statement .inner{width:100%;position:relative;padding-left:var(--indent)}
  .statement .punch{position:absolute;left:var(--padx);top:12px;margin:0}
  .statement p{
    font-family:var(--display);font-weight:500;color:var(--fg);
    font-size:clamp(40px,7.6vw,110px);line-height:1.04;letter-spacing:-0.02em;max-width:12ch;
  }
  .statement .warm{color:var(--sand)}

  /* 03 Pillars: the list. Eyebrow lives in the rail beside the hole, as a two-line tower. */
  .pillars{padding-bottom:160px}
  .pillars .wrap{position:relative;padding-left:calc(var(--padx) + var(--indent2))}
  .rail{
    position:absolute;left:var(--padx);top:0;
    display:flex;align-items:flex-start;gap:24px;
    width:calc(var(--indent2) - 56px);
  }
  .rail .punch{margin:0;flex:none}
  .rail .eyebrow{display:block;line-height:1.8;margin-top:-3px;white-space:normal;max-width:150px}
  .rail .eyebrow .num,.rail .eyebrow .dash{margin-right:8px}
  .pillar-list{border-top:1px solid var(--rule)}
  .prow{
    display:grid;grid-template-columns:150px 1fr 1.1fr;gap:40px;align-items:baseline;
    padding:44px 0;border-bottom:1px solid var(--rule);position:relative;
  }
  .prow::before{
    content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:transparent;
    transition:background-color 240ms var(--ease);
  }
  .prow:hover::before{background:var(--sand)}
  .prow .idx{
    font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.12em;
    color:var(--fg-mute);text-transform:uppercase;transition:color 240ms var(--ease);
  }
  .prow:hover .idx{color:var(--sand)}
  .prow h3{
    font-family:var(--display);font-weight:500;font-size:clamp(24px,2.2vw,32px);
    line-height:1.15;letter-spacing:-0.01em;color:var(--fg);max-width:16ch;
  }
  .prow p:last-child{font-size:15.5px;color:var(--fg-body);max-width:40ch}
  @media (max-width:900px){
    .prow{grid-template-columns:1fr;gap:12px;padding:32px 0}
    .pillars{padding-bottom:96px}
  }