/* ==========================================================
     JASPER LOGISTICS
     Palette taken directly from the logo. Two themes:
     light (cream base) and dark (near-black base). The theme
     follows the visitor's OS setting via prefers-color-scheme.
     To FORCE one, add data-theme="dark" or data-theme="light"
     to the <html> tag.
     ========================================================== */

  /* ---------- LIGHT THEME (default) ---------- */
  :root{
    color-scheme:light dark;

    /* brand constants */
    --rust-brand:#C1502E;      /* the logo's rust  */
    --charcoal-brand:#2B2B2E;  /* the logo's charcoal */

    /* surfaces */
    --bg:#F8F2E7;              /* cream */
    --surface:#FFFFFF;
    --surface-alt:#F1E7D6;
    --line:#DFD3BC;
    --line-strong:#EADFC9;
    --shadow:rgba(43,43,46,.10);

    /* type */
    --text:#2B2B2E;            /* 12.7:1 on cream */
    --text-soft:#5A5A60;       /*  6.2:1 on cream */

    /* accents */
    --rust:#C1502E;            /* display type + button fill */
    --rust-ink:#8B3A1E;        /* small accent text — 6.9:1 on cream */
    --rust-deep:#8B3A1E;       /* hover / drop shadow */
    --btn-fg:#FFFFFF;          /* text on a rust fill — 4.7:1 */
    --rust-wash:rgba(193,80,46,.08);
    --rust-wash-2:rgba(193,80,46,.16);
    --facet-op:.06;

    /* things sitting ON a rust fill */
    --on-rust-soft:rgba(255,255,255,.94);
    --on-rust-line:rgba(255,255,255,.55);
    --on-rust-fill:rgba(255,255,255,.16);
    --on-rust-facet:#FFFFFF;
    --on-rust-facet-op:.12;

    /* chrome */
    --header-bg:rgba(248,242,231,.94);
    --sticky-bg:rgba(255,255,255,.97);
    --footer-bg:#2B2B2E;
    --footer-text:#C9C9CF;
    --footer-head:#FFFFFF;
    --footer-accent:#E8825E;
    --footer-line:rgba(255,255,255,.14);

    --radius:12px;
    --maxw:1120px;
    --ease:cubic-bezier(.16,.84,.44,1);
    --header-h:74px;

    /* The logo's gem silhouette — reused as the page-wide motif */
    --gem:polygon(50% 0%, 93% 27%, 100% 72%, 50% 100%, 0% 72%, 7% 27%);
  }

  /* ---------- DARK THEME ---------- */
  /* Rust is lightened to #E2703F (5.9:1 on the dark base) and button
     text flips to near-black, because white on lightened rust is only
     3.2:1 and would fail. */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#121214;
      --surface:#1A1A1F;
      --surface-alt:#202027;
      --line:#34343C;
      --line-strong:#43434D;
      --shadow:rgba(0,0,0,.55);

      --text:#F4EEE3;          /* warm off-white — 16.2:1 */
      --text-soft:#ABA69C;     /*  7.7:1 */

      --rust:#E2703F;          /*  5.9:1 */
      --rust-ink:#F0906B;      /*  7.4:1 */
      --rust-deep:#C9622F;
      --btn-fg:#141410;        /*  5.9:1 on the lightened rust */
      --rust-wash:rgba(226,112,63,.13);
      --rust-wash-2:rgba(226,112,63,.28);
      --facet-op:.09;

      --on-rust-soft:rgba(20,20,16,.86);
      --on-rust-line:rgba(20,20,16,.45);
      --on-rust-fill:rgba(20,20,16,.14);
      --on-rust-facet:#141410;
      --on-rust-facet-op:.14;

      --header-bg:rgba(18,18,20,.94);
      --sticky-bg:rgba(26,26,31,.97);
      --footer-bg:#0C0C0E;
      --footer-text:#B5B0A6;
      --footer-head:#F4EEE3;
      --footer-accent:#F0906B;
      --footer-line:rgba(255,255,255,.12);
    }
  }
  /* Same values again so data-theme="dark" wins regardless of OS setting */
  :root[data-theme="dark"]{
    --bg:#121214;
    --surface:#1A1A1F;
    --surface-alt:#202027;
    --line:#34343C;
    --line-strong:#43434D;
    --shadow:rgba(0,0,0,.55);
    --text:#F4EEE3;
    --text-soft:#ABA69C;
    --rust:#E2703F;
    --rust-ink:#F0906B;
    --rust-deep:#C9622F;
    --btn-fg:#141410;
    --rust-wash:rgba(226,112,63,.13);
    --rust-wash-2:rgba(226,112,63,.28);
    --facet-op:.09;
    --on-rust-soft:rgba(20,20,16,.86);
    --on-rust-line:rgba(20,20,16,.45);
    --on-rust-fill:rgba(20,20,16,.14);
    --on-rust-facet:#141410;
    --on-rust-facet-op:.14;
    --header-bg:rgba(18,18,20,.94);
    --sticky-bg:rgba(26,26,31,.97);
    --footer-bg:#0C0C0E;
    --footer-text:#B5B0A6;
    --footer-head:#F4EEE3;
    --footer-accent:#F0906B;
    --footer-line:rgba(255,255,255,.12);
  }

  /* ============ RESET ============ */
  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    font-size:17px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;height:auto;display:block;}
  a{color:var(--rust-ink);}
  h1,h2,h3,h4{
    font-family:'Oswald','Barlow Condensed',sans-serif;font-weight:700;
    line-height:1.05;letter-spacing:.005em;margin:0 0 .5em;text-transform:uppercase;
    color:var(--text);
  }
  p{margin:0 0 1em;}
  ul,ol{margin:0;padding:0;list-style:none;}

  /* ============ ACCESSIBILITY ============ */
  :focus-visible{outline:3px solid var(--rust);outline-offset:3px;border-radius:4px;}
  .skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--rust);color:var(--btn-fg);padding:12px 20px;font-weight:700;}
  .skip-link:focus{left:8px;top:8px;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

  /* ============ LAYOUT ============ */
  .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px;position:relative;z-index:1;}
  section{padding:32px 0;position:relative;}
  @media(min-width:820px){ section{padding:46px 0;} }
  /* Land the section flush under the sticky header — the old +10px offset
     stacked on top of the section's own padding and read as dead space. */
  section[id]{scroll-margin-top:var(--header-h);}

  .band-base{background:var(--bg);}
  .band-surface{background:var(--surface);}
  .band-alt{background:var(--surface-alt);}

  .eyebrow{
    font-family:'Oswald',sans-serif;font-weight:600;font-size:.8rem;
    letter-spacing:.22em;text-transform:uppercase;color:var(--rust-ink);
    margin:0 0 14px;display:flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:"";width:16px;height:16px;background:var(--rust);flex:none;clip-path:var(--gem);}

  h1{font-size:clamp(2.15rem,7.1vw,4.15rem);}
  h2{font-size:clamp(1.8rem,5vw,2.9rem);}
  h3{font-size:clamp(1.12rem,3.1vw,1.35rem);}
  .lede{font-size:clamp(1.02rem,2.5vw,1.2rem);color:var(--text-soft);max-width:62ch;}
  .rust{color:var(--rust);}         /* display type */
  .rust-sm{color:var(--rust-ink);}  /* small text   */

  mark.mk{background:var(--rust);color:var(--btn-fg);padding:.04em .2em;border-radius:3px;font-weight:700;}

  /* ============ FACETED DIVIDERS ============ */
  .facet-divider{line-height:0;position:relative;z-index:1;}
  .facet-divider svg{display:block;width:100%;height:38px;}
  @media(min-width:820px){ .facet-divider svg{height:56px;} }
  .to-surface polygon{fill:var(--surface);}
  .to-base polygon{fill:var(--bg);}
  .to-alt polygon{fill:var(--surface-alt);}

  .facet-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
  .facet-art span{position:absolute;display:block;background:var(--rust);clip-path:var(--gem);opacity:var(--facet-op);}
  .facet-art .g1{width:300px;height:340px;top:-90px;right:-70px;}
  .facet-art .g2{width:170px;height:190px;bottom:-60px;left:-50px;}
  .facet-art .g3{width:110px;height:124px;top:38%;right:14%;}
  @media(min-width:900px){
    .facet-art .g1{width:460px;height:520px;top:-130px;right:-90px;}
    .facet-art .g2{width:280px;height:315px;bottom:-110px;left:-80px;}
  }

  /* ============ BUTTONS ============ */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    font-family:'Oswald',sans-serif;font-weight:600;font-size:1.04rem;
    letter-spacing:.05em;text-transform:uppercase;
    padding:17px 30px;border-radius:8px;border:2px solid transparent;cursor:pointer;
    text-decoration:none;text-align:center;
    transition:transform .16s var(--ease),box-shadow .16s var(--ease),background-color .16s,border-color .16s,color .16s;
  }
  .btn-primary{
    background:var(--rust);color:var(--btn-fg);border-color:var(--rust);
    box-shadow:0 5px 0 var(--rust-deep),0 12px 24px var(--shadow);
  }
  .btn-primary:hover{background:var(--rust-deep);border-color:var(--rust-deep);transform:translateY(-2px);}
  .btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--rust-deep);}
  .btn-ghost{background:transparent;color:var(--text);border-color:var(--text);}
  .btn-ghost:hover{background:var(--text);color:var(--bg);}
  .btn-sm{padding:11px 18px;font-size:.9rem;box-shadow:0 3px 0 var(--rust-deep);}
  .trustline{font-size:.92rem;color:var(--text-soft);font-weight:600;margin:14px 0 0;}

  /* ============ HEADER / NAV ============ */
  .site-header{
    position:sticky;top:0;z-index:70;height:var(--header-h);
    background:var(--header-bg);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    max-width:var(--maxw);margin:0 auto;padding:0 20px;height:100%;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  /* The real logo is a wide horizontal lockup (645x160), so it steps down on
     small screens to leave room for the header CTA. */
  .logo-link{display:flex;align-items:center;text-decoration:none;flex:none;min-width:0;}
  .logo-link img{height:30px;width:auto;max-width:100%;}
  @media(min-width:420px){ .logo-link img{height:34px;} }
  @media(min-width:820px){ .logo-link img{height:42px;} }
  .logo-fallback{display:none;align-items:center;gap:11px;}
  .logo-fallback.on{display:flex;}
  .logo-fallback .gem{width:34px;height:38px;flex:none;}
  .logo-fallback .wordmark{font-family:'Oswald',sans-serif;line-height:.92;text-transform:uppercase;}
  .logo-fallback .wordmark b{display:block;font-size:1.32rem;font-weight:700;color:var(--rust);letter-spacing:.01em;}
  .logo-fallback .wordmark span{display:block;font-size:.94rem;font-weight:600;color:var(--text);letter-spacing:.055em;}

  .nav{display:none;align-items:center;gap:28px;}
  @media(min-width:900px){ .nav{display:flex;} }
  .nav a{
    font-family:'Oswald',sans-serif;font-weight:500;font-size:.9rem;letter-spacing:.11em;
    text-transform:uppercase;color:var(--text);text-decoration:none;padding:6px 0;
    border-bottom:2px solid transparent;
  }
  .nav a:hover{color:var(--rust-ink);border-bottom-color:var(--rust);}
  .nav a[aria-current="page"]{color:var(--rust-ink);border-bottom-color:var(--rust);}
  /* Below 900px the main nav is hidden, so "Articles" gets its own compact
     link beside the language chip. Hidden again once the full nav shows. */
  .nav-articles-m{
    font-family:'Oswald',sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.09em;
    text-transform:uppercase;color:var(--text);text-decoration:none;padding:8px 2px;
    border-bottom:2px solid transparent;
  }
  .nav-articles-m:hover,.nav-articles-m[aria-current="page"]{color:var(--rust-ink);border-bottom-color:var(--rust);}
  @media(min-width:900px){ .nav-articles-m{display:none;} }
  @media(max-width:400px){ .nav-articles-m{font-size:.7rem;letter-spacing:.04em;} }
  /* Smallest phones, English pages only (they carry the extra Articles link): tighten the header row. */
  @media(max-width:359px){
    .header-inner:has(.nav-articles-m){padding:0 10px;gap:5px;}
    .header-inner:has(.nav-articles-m) .header-right{gap:4px;}
    .header-inner:has(.nav-articles-m) .nav-articles-m{font-size:.64rem;letter-spacing:.01em;padding:8px 0;}
    .header-inner:has(.nav-articles-m) .lang-switch{padding:6px 6px;font-size:.66rem;}
    .header-inner:has(.nav-articles-m) .header-cta{padding:9px 7px;font-size:.7rem;}
    .header-inner:has(.nav-articles-m) .logo-link img{height:22px;}
  }
  .header-cta{flex:none;}
  @media(max-width:479px){ .header-cta{padding:10px 13px;font-size:.82rem;} }

  /* Language switcher — shows only the OTHER language, so it stays one small
     chip and fits beside the logo and CTA even at 320px. */
  .header-right{display:flex;align-items:center;gap:10px;flex:none;}
  .lang-switch{
    flex:none;display:inline-flex;align-items:center;justify-content:center;
    font-family:'Oswald',sans-serif;font-weight:600;font-size:.8rem;
    letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
    color:var(--rust-ink);background:var(--rust-wash);
    border:1px solid var(--rust-wash-2);border-radius:999px;
    padding:8px 12px;line-height:1;transition:background-color .15s,color .15s;
  }
  .lang-switch:hover{background:var(--rust);color:var(--btn-fg);border-color:var(--rust);}
  @media(max-width:479px){ .lang-switch{padding:8px 10px;font-size:.75rem;} }
  /* Very narrow phones: the header carries logo + language chip + CTA, and the
     Portuguese CTA is wider than the English one. Compact all three so the row
     still fits at 320px. */
  @media(max-width:400px){
    .header-inner{gap:8px;}
    .header-right{gap:7px;}
    .logo-link img{height:26px;}
    .lang-switch{padding:6px 8px;font-size:.7rem;letter-spacing:.05em;}
    .header-cta{padding:9px 10px;font-size:.76rem;}
  }

  /* ============ HERO ============ */
  .hero{background:var(--bg);padding:24px 0 62px;overflow:hidden;position:relative;}
  @media(min-width:820px){ .hero{padding:38px 0 90px;} }
  .hero-badge{
    display:inline-flex;align-items:center;gap:9px;
    background:var(--rust-wash);border:1px solid var(--rust-wash-2);
    color:var(--rust-ink);border-radius:999px;padding:7px 16px;
    font-family:'Oswald',sans-serif;font-size:.78rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px;
  }
  .hero-badge .pip{width:9px;height:10px;background:var(--rust);flex:none;clip-path:var(--gem);}
  .hero h1 .line2{display:block;color:var(--rust);}
  .hero .lede{margin-top:18px;}
  .hero-cta{display:flex;flex-direction:column;gap:12px;margin-top:30px;max-width:430px;}
  @media(min-width:600px){ .hero-cta{flex-direction:row;max-width:none;} }

  .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:44px;}
  @media(min-width:760px){ .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;} }
  .stats li{display:flex;}
  .stats .cell{
    flex:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:20px 12px;text-align:center;display:flex;flex-direction:column;
    align-items:center;justify-content:flex-start;
  }
  .stats .plate{
    width:62px;height:70px;background:var(--rust-wash);clip-path:var(--gem);
    display:flex;align-items:center;justify-content:center;margin-bottom:8px;flex:none;
  }
  .stats b{
    font-family:'Oswald',sans-serif;font-size:clamp(1.15rem,4.4vw,1.6rem);
    font-weight:700;color:var(--rust);line-height:1.05;overflow-wrap:anywhere;
  }
  .stats small{
    display:block;color:var(--text-soft);font-size:.74rem;letter-spacing:.09em;
    text-transform:uppercase;font-weight:700;overflow-wrap:anywhere;
  }

  /* ============ OFFER CARDS ============ */
  .cards{display:grid;gap:18px;margin-top:38px;}
  @media(min-width:880px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;} }
  .card{
    position:relative;background:var(--bg);border:1px solid var(--line);
    border-radius:var(--radius);padding:30px 26px 28px;overflow:hidden;
    transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
  }
  .card:hover{transform:translateY(-3px);box-shadow:0 14px 30px var(--shadow);border-color:var(--line-strong);}
  .card.hot{background:var(--rust);border-color:var(--rust-deep);color:var(--btn-fg);box-shadow:0 10px 26px var(--shadow);}
  .card.hot h3,.card.hot .big{color:var(--btn-fg);}
  .card.hot p{color:var(--on-rust-soft);}
  .num{
    width:52px;height:58px;flex:none;display:flex;align-items:center;justify-content:center;
    background:var(--rust);color:var(--btn-fg);clip-path:var(--gem);
    font-family:'Oswald',sans-serif;font-weight:700;font-size:1.4rem;margin-bottom:16px;
  }
  .card.hot .num{background:var(--surface);color:var(--rust);}
  .card .big{
    display:block;font-family:'Oswald',sans-serif;font-weight:700;line-height:1;
    color:var(--rust);font-size:clamp(2.1rem,6.6vw,2.8rem);margin-bottom:6px;
  }
  .card.hot .big{font-size:clamp(2.3rem,7.2vw,3rem);}
  .card h3{margin-bottom:10px;font-size:1.28rem;}
  .card p{color:var(--text-soft);margin:0;font-size:.98rem;}
  .tag{
    display:inline-block;margin-top:16px;font-family:'Oswald',sans-serif;
    font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
    color:var(--rust-ink);border:1px solid var(--rust-wash-2);background:var(--rust-wash);
    border-radius:999px;padding:5px 12px;
  }
  .card.hot .tag{color:var(--btn-fg);border-color:var(--on-rust-line);background:var(--on-rust-fill);}
  .card::after{
    content:"";position:absolute;width:120px;height:135px;right:-42px;bottom:-52px;
    background:var(--rust);opacity:var(--facet-op);clip-path:var(--gem);
  }
  .card.hot::after{background:var(--on-rust-facet);opacity:var(--on-rust-facet-op);}

  .offer-note{
    margin-top:26px;padding:16px 20px;border-left:3px solid var(--rust);
    background:var(--rust-wash);border-radius:0 8px 8px 0;
    font-size:.96rem;color:var(--text-soft);
  }
  .offer-note strong{color:var(--text);}

  /* ============ HOW IT WORKS ============ */
  .steps{display:grid;gap:0;margin-top:38px;}
  .step{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid var(--line);}
  .step:last-child{border-bottom:0;}
  .step-badge{
    width:56px;height:62px;flex:none;display:flex;align-items:center;justify-content:center;
    background:var(--surface);border:2px solid var(--rust);border-radius:10px;
    font-family:'Oswald',sans-serif;font-weight:700;font-size:1.45rem;color:var(--rust);
  }
  .step:first-child .step-badge{background:var(--rust);color:var(--btn-fg);}
  .step h3{margin-bottom:6px;}
  .step p{margin:0;color:var(--text-soft);}
  .step .when{
    display:inline-block;margin-top:8px;font-family:'Oswald',sans-serif;font-size:.74rem;
    font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--rust-ink);
  }
  @media(min-width:880px){
    .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
    .step{
      grid-template-columns:1fr;border-bottom:0;padding:26px 22px;
      background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    }
  }

  /* ============ WHY JASPER ============ */
  .benefits{display:grid;gap:14px;margin-top:34px;}
  @media(min-width:760px){ .benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;} }
  .benefit{
    display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  }
  .benefit .ico{
    width:46px;height:52px;flex:none;background:var(--rust-wash);clip-path:var(--gem);
    display:flex;align-items:center;justify-content:center;color:var(--rust-ink);
  }
  .benefit .ico svg{width:23px;height:23px;}
  .benefit h3{font-size:1.04rem;margin:0 0 4px;letter-spacing:.02em;}
  .benefit p{margin:0;color:var(--text-soft);font-size:.95rem;}

  .ph{
    display:inline-block;background:var(--rust-wash);border:1px dashed var(--rust);
    color:var(--rust-ink);border-radius:5px;padding:1px 7px;font-size:.78rem;font-weight:700;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  }

  .quotes{display:grid;gap:16px;margin-top:20px;}
  @media(min-width:880px){ .quotes{grid-template-columns:repeat(3,minmax(0,1fr));} }
  .quote{
    background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--rust);
    border-radius:var(--radius);padding:24px;
  }
  .stars{color:var(--rust);letter-spacing:3px;font-size:1.05rem;margin:0 0 10px;}
  .quote p{font-size:1rem;color:var(--text);margin:0 0 14px;font-style:italic;}
  .quote footer{font-family:'Oswald',sans-serif;font-size:.8rem;color:var(--text-soft);font-weight:500;letter-spacing:.08em;text-transform:uppercase;}

  /* ============ FAQ ============ */
  .faq-list{margin-top:34px;border-top:1px solid var(--line);}
  details{border-bottom:1px solid var(--line);}
  summary{
    cursor:pointer;list-style:none;padding:22px 46px 22px 0;position:relative;
    font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(1rem,2.9vw,1.2rem);
    color:var(--text);text-transform:uppercase;letter-spacing:.02em;
  }
  summary::-webkit-details-marker{display:none;}
  summary::after{
    content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
    border-right:3px solid var(--rust);border-bottom:3px solid var(--rust);
    transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease);
  }
  details[open] summary::after{transform:translateY(-25%) rotate(-135deg);}
  details[open] summary,summary:hover{color:var(--rust-ink);}
  .answer{padding:0 0 24px;color:var(--text-soft);max-width:78ch;}
  .answer p:last-child{margin-bottom:0;}
  .answer strong{color:var(--text);}

  /* ============ BOOKING ============ */
  .booking-grid{display:grid;gap:28px;margin-top:34px;}
  /* No align-items:start — the two columns stretch to the same height, so the
     booking panel always ends level with the "Rather just call or email?" box
     no matter how the text above it wraps. */
  @media(min-width:980px){ .booking-grid{grid-template-columns:.85fr 1.15fr;gap:36px;} }
  .checklist li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);font-size:1rem;}
  .checklist li:last-child{border-bottom:0;}
  .checklist .tick{
    width:20px;height:22px;flex:none;margin-top:3px;background:var(--rust);clip-path:var(--gem);
    display:flex;align-items:center;justify-content:center;color:var(--btn-fg);
  }
  .checklist .tick svg{width:11px;height:11px;}
  /* Koalendar renders its booking widget in its own light UI, which we can't
     theme. So this container is a deliberate white panel in BOTH themes — on
     the dark page the widget then reads as an intentional card rather than a
     bright rectangle that looks broken. min-height holds the space while the
     widget script loads, so the page doesn't jump. */
  #booking-embed{
    background:#FFFFFF;border:1px solid var(--line);border-radius:var(--radius);
    padding:8px;overflow:hidden;
  }
  /* reserve the space while the widget script loads, so the page doesn't jump */
  @media(max-width:979px){ #booking-embed{min-height:calc(560px + 16px);} }
  /* Koalendar's widget script writes an INLINE min-height (668px) onto the
     iframe, which beats any normal stylesheet rule — hence !important here.
     This base rule carries only what BOTH breakpoints need; anything about
     size is scoped to one breakpoint or the other so the two never collide. */
  #booking-embed iframe{
    display:block;border:0;
    min-height:0 !important;
  }
  /* --- MOBILE / TABLET: single column, natural widget size (no scaling, so
     tap targets stay finger-sized). Fixed height, scrolls internally. --- */
  @media(max-width:979px){
    #booking-embed iframe{
      border-radius:8px;
      /* !important on all three: they have to beat both Koalendar's own rules
         and any inline values fitBookingWidget() left behind when the viewport
         crossed the breakpoint. CSS is the guarantee; the JS cleanup is just
         belt-and-braces. */
      width:100% !important;
      height:560px !important;
      max-height:560px !important;
      transform:none !important;
      position:static !important;
    }
  }
  /* --- DESKTOP: match the left column, and shrink the widget's own contents ---
     We can't restyle inside a cross-origin iframe, so to make Koalendar's
     profile + calendar fit without internal scrolling we render the frame at a
     taller "logical" size and scale it down with a transform. The scale factor
     is computed in JS from the actual column height (see fitBookingWidget). */
  @media(min-width:980px){
    #booking-embed{
      height:100%;min-height:0;padding:10px;
      display:flex;flex-direction:column;
    }
    #koalendar-inline{position:relative;flex:1;overflow:hidden;border-radius:8px;}
    #booking-embed iframe{
      position:absolute;top:0;left:0;
      transform-origin:top left;
      /* These two beat Koalendar's own inline min-height. Height and width are
         NOT set here on purpose — fitBookingWidget() writes them inline, and an
         !important rule here would override the inline value and break it. */
      max-height:none !important;min-height:0 !important;
      border-radius:0;
    }
  }
  .fallback{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;}
  .fallback h3{font-size:1rem;margin-bottom:12px;}
  .fallback a{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--text);
    text-decoration:none;font-weight:700;padding:9px 0;font-size:1.02rem;overflow-wrap:anywhere;
  }
  .fallback a:hover{color:var(--rust-ink);text-decoration:underline;}
  .fallback svg{width:20px;height:20px;flex:none;color:var(--rust);}
  /* "We speak Portuguese / We speak English" note, and its sibling on the
     pt-BR page. Sits on the rust wash so it reads as an offer, not fine print. */
  .lang-note{
    display:flex;align-items:flex-start;gap:10px;
    margin:16px 0 0;padding:12px 14px;
    background:var(--rust-wash);border-left:3px solid var(--rust);
    border-radius:0 8px 8px 0;font-size:.94rem;color:var(--text);
  }
  .lang-note svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--rust);}
  .lang-note a{color:var(--rust-ink);font-weight:700;}

  /* ============ FOOTER ============ */
  footer.site{
    background:var(--footer-bg);color:var(--footer-text);border-top:4px solid var(--rust);
    padding:52px 0 118px;font-size:.92rem;
  }
  @media(min-width:900px){ footer.site{padding:56px 0 44px;} }
  .foot-grid{display:grid;gap:30px;}
  @media(min-width:760px){ .foot-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:48px;} }
  .foot-brand{display:flex;align-items:center;margin-bottom:14px;}
  .foot-brand img{height:36px;width:auto;max-width:100%;}
  footer.site h4{font-family:'Oswald',sans-serif;font-size:.8rem;letter-spacing:.18em;color:var(--footer-head);margin-bottom:14px;}
  footer.site li{padding:5px 0;overflow-wrap:anywhere;}
  footer.site a{color:var(--footer-text);text-decoration:none;overflow-wrap:anywhere;}
  footer.site a:hover{color:var(--footer-accent);text-decoration:underline;}
  footer.site .ph{background:rgba(232,130,94,.14);border-color:var(--footer-accent);color:#F0A88B;}
  .legal{
    margin-top:34px;padding-top:22px;border-top:1px solid var(--footer-line);
    display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;font-size:.84rem;opacity:.85;
  }

  /* ============ STICKY MOBILE CTA ============ */
  .sticky-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--sticky-bg);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:2px solid var(--rust);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    display:flex;align-items:center;gap:12px;
    box-shadow:0 -6px 20px var(--shadow);
    transform:translateY(115%);transition:transform .28s var(--ease);
  }
  .sticky-cta.show{transform:translateY(0);}
  .sticky-cta .pitch{flex:1 1 auto;min-width:0;line-height:1.2;}
  .sticky-cta .pitch b{
    display:block;font-family:'Oswald',sans-serif;font-size:.95rem;color:var(--rust);
    text-transform:uppercase;letter-spacing:.03em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .sticky-cta .pitch small{
    display:block;color:var(--text-soft);font-size:.72rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .sticky-cta .btn{padding:13px 16px;font-size:.9rem;flex:0 0 auto;box-shadow:0 3px 0 var(--rust-deep);}
  @media(max-width:359px){
    .sticky-cta .pitch small{display:none;}
    .sticky-cta .btn{padding:13px 12px;font-size:.84rem;}
  }
  @media(min-width:900px){ .sticky-cta{display:none;} }

  /* ============ SCROLL FADE-IN ============ */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
  .reveal.visible{opacity:1;transform:none;}
  .reveal.d1{transition-delay:.08s;}
  .reveal.d2{transition-delay:.16s;}
  .reveal.d3{transition-delay:.24s;}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1;transform:none;transition:none;}
    *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  }

  /* ============ ARTICLES INDEX ============ */
  .article-list{list-style:none;margin:38px 0 0;padding:0;display:grid;gap:18px;}
  @media(min-width:880px){ .article-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;} }
  .article-card{
    position:relative;background:var(--bg);border:1px solid var(--line);
    border-radius:var(--radius);padding:30px 26px 28px;overflow:hidden;
    transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
  }
  .article-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px var(--shadow);border-color:var(--line-strong);}
  .article-card::after{
    content:"";position:absolute;width:120px;height:135px;right:-42px;bottom:-52px;
    background:var(--rust);opacity:var(--facet-op);clip-path:var(--gem);pointer-events:none;
  }
  .article-card h2,.article-card h3{font-size:1.4rem;margin:0 0 10px;}
  .article-card h2 a,.article-card h3 a{color:var(--text);text-decoration:none;}
  .article-card h2 a:hover,.article-card h3 a:hover{color:var(--rust-ink);}
  /* whole card is clickable through the title link; focus ring shows on the card */
  .article-card h2 a::before,.article-card h3 a::before{content:"";position:absolute;inset:0;z-index:1;}
  .article-card p{color:var(--text-soft);margin:0;font-size:.98rem;}
  .article-card .meta{font-family:'Oswald',sans-serif;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--rust-ink);margin:0 0 12px;}
  .article-card .read{display:inline-block;margin-top:16px;font-family:'Oswald',sans-serif;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--rust-ink);}
  .article-card:focus-within{border-color:var(--rust);}
  .article-empty{margin-top:26px;color:var(--text-soft);font-weight:600;}
  .crumbs{font-size:.9rem;color:var(--text-soft);margin:0 0 18px;}
  .crumbs a{color:var(--rust-ink);}
  .back-link{margin:0 0 14px;font-size:.92rem;font-weight:600;}
  .back-link a{color:var(--rust-ink);}

  /* ============ ARTICLE BODY (long-form guides) ============ */
  .art-wrap{max-width:860px;}
  .art-byline{margin:0 0 18px;}
  .art-hero{margin:26px 0 0;max-width:860px;}
  .art-hero img{width:100%;height:auto;aspect-ratio:1200/630;border-radius:14px;border:1px solid var(--line-strong);box-shadow:0 10px 26px var(--shadow);background:var(--surface);}
  @media(min-width:820px){ .art-hero{margin-top:32px;} }
  .art-block + .art-block{margin-top:46px;}
  .art-block h2{font-size:clamp(1.6rem,4.4vw,2.35rem);margin-bottom:.6em;}
  .art p,.hero .lede + .lede{max-width:68ch;}
  .art p{color:var(--text-soft);}
  .art p strong,.art li strong{color:var(--text);}
  .art .answer p{color:inherit;}
  .art-label{margin:1.4em 0 .4em;font-family:'Oswald',sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rust-ink) !important;}
  .art-label strong{color:var(--rust-ink) !important;}
  .art-list{margin:0 0 1.2em;max-width:68ch;}
  .art-list li{position:relative;padding:5px 0 5px 28px;color:var(--text-soft);}
  .art-list li::before{
    content:"";position:absolute;left:2px;top:.85em;width:12px;height:13px;background:var(--rust);clip-path:var(--gem);
  }
  .art-ol{counter-reset:artstep;}
  .art-ol li{counter-increment:artstep;padding-left:40px;}
  .art-ol li::before{
    content:counter(artstep);left:0;top:.35em;width:28px;height:31px;display:flex;align-items:center;justify-content:center;
    font-family:'Oswald',sans-serif;font-weight:700;font-size:.9rem;color:var(--btn-fg);
  }
  .formula{
    margin:1.2em 0 1.4em;padding:18px 22px;border-left:4px solid var(--rust);background:var(--rust-wash);
    border-radius:0 10px 10px 0;max-width:68ch;
  }
  .formula p{margin:0;color:var(--text);font-family:'Oswald',sans-serif;font-weight:500;font-size:clamp(1.02rem,3.3vw,1.3rem);line-height:1.4;overflow-wrap:anywhere;}
  .formula strong{font-weight:600;}
  .art-table-wrap{margin:1.2em 0 1.6em;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);-webkit-overflow-scrolling:touch;}
  .art-table{width:100%;border-collapse:collapse;font-size:.96rem;min-width:360px;}
  .art-table th,.art-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text);}
  .art-table thead th{font-family:'Oswald',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rust-ink);background:var(--rust-wash);}
  .art-table tbody th{font-weight:500;min-width:130px;}
  .art-table tbody tr:last-child th,.art-table tbody tr:last-child td{border-bottom:0;}
  .art-table .art-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
  .art-table-wrap:focus-visible{outline:3px solid var(--rust);outline-offset:2px;}
  .art .faq-list{margin-top:10px;}
  .art summary{text-transform:none;font-size:clamp(1.02rem,3vw,1.18rem);}