/*
Theme Name: Y Liner
Theme URI: https://github.com/marketingdubai/YL
Author: Marketing Dubai
Author URI: https://github.com/marketingdubai
Description: A WordPress landing page theme for Y Liner, converted from the marketingdubai/YL GitHub repository.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yliner
Tags: logistics, shipping, landing-page, responsive, custom-logo
*/

  :root{
    --ink:        #160a36;   /* deepest brand ink */
    --brand:      #2a1656;   /* logo purple */
    --brand-2:    #3b1f7a;   /* mid */
    --violet:     #6b3fb8;   /* bright violet */
    --lilac:      #b9a4e0;
    --mist:       #efeaf7;
    --cream:      #f4ede0;
    --paper:      #ffffff;
    --line:       rgba(255,255,255,.16);
    --line-ink:   rgba(22,10,54,.12);
    --maxw:       1480px;

    /* ---------- font system ---------- */
    --font-sans: 'Mulish', system-ui, sans-serif;
    --font-display: var(--font-sans);

    --weight-thin: 200;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --tracking-display: -.035em;
    --tracking-title: -.01em;
    --tracking-body: 0;
    --tracking-label: .2em;
    --tracking-ui: .04em;

    --leading-display: .95;
    --leading-title: 1.1;
    --leading-body: 1.7;
    --leading-ui: 1.45;

    --text-label: 11px;
    --text-caption: 12px;
    --text-ui: 13px;
    --text-body-sm: 14px;
    --text-body: 16px;
    --text-body-lg: 17px;
    --text-body-xl: 18px;
    --text-title-sm: 20px;
    --text-title-md: 22px;
    --text-title-lg: 28px;
    --text-display-sm: clamp(36px,4.6vw,68px);
    --text-display-md: clamp(38px,5.4vw,84px);
    --text-display-lg: clamp(56px,8.4vw,148px);
  }

  *{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--font-sans);
    background:var(--paper);
    color:var(--ink);
    font-weight:var(--weight-regular);
    line-height:1.5;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}

  /* ---------- typography utilities ---------- */
  .type-label,
  .eyebrow{
    font-family:var(--font-sans);
    font-size:var(--text-label);
    font-weight:var(--weight-semibold);
    letter-spacing:var(--tracking-label);
    line-height:1;
    text-transform:uppercase;
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
  }
  .type-display,
  .display{
    font-family:var(--font-display);
    font-weight:var(--weight-thin);
    letter-spacing:var(--tracking-display);
    line-height:var(--leading-display);
  }
  .display em{font-style:italic;font-weight:300}
  .display b{font-weight:600}
  .type-display-hero{font-size:var(--text-display-lg)}
  .type-display-section{font-size:var(--text-display-md)}
  .type-display-support{font-size:var(--text-display-sm);line-height:1.05}
  .type-title{
    font-size:var(--text-title-sm);
    font-weight:var(--weight-semibold);
    letter-spacing:var(--tracking-title);
    line-height:1.2;
  }
  .type-body-xl{
    font-size:var(--text-body-xl);
    line-height:var(--leading-body);
    font-weight:var(--weight-regular);
  }
  .type-body-lg{
    font-size:var(--text-body-lg);
    line-height:var(--leading-body);
    font-weight:var(--weight-regular);
  }
  .type-body{
    font-size:var(--text-body);
    line-height:var(--leading-body);
    font-weight:var(--weight-regular);
  }
  .type-body-sm{
    font-size:var(--text-body-sm);
    line-height:1.65;
    font-weight:var(--weight-regular);
  }
  .type-ui{
    font-size:var(--text-ui);
    font-weight:var(--weight-semibold);
    letter-spacing:var(--tracking-ui);
    line-height:var(--leading-ui);
  }
  .type-caption{
    font-size:var(--text-caption);
    font-weight:var(--weight-semibold);
    letter-spacing:.16em;
    line-height:var(--leading-ui);
    text-transform:uppercase;
  }
  .head-stack{
    display:block;
  }
  .head-stack .eyebrow{
    display:block;
    margin-bottom:32px;
  }
  .head-stack .type-display-section{
    margin-top:0;
  }

  /* ---------- nav ---------- */
  .nav{
    position:fixed;inset:0 0 auto 0;z-index:50;
    padding:22px clamp(20px,4vw,56px);
    display:flex;align-items:center;justify-content:space-between;
    color:#fff;
    transition:background .35s ease, backdrop-filter .35s ease, padding .35s ease, color .35s ease, border-color .35s ease;
    border-bottom:1px solid transparent;
  }
  .nav.scrolled{
    background:rgba(16,7,42,.78);
    backdrop-filter:blur(18px) saturate(1.2);
    -webkit-backdrop-filter:blur(18px) saturate(1.2);
    padding:14px clamp(20px,4vw,56px);
    border-color:rgba(255,255,255,.08);
  }
  .nav.light{ color:var(--ink); background:rgba(255,255,255,.84); border-color:var(--line-ink); }

  .brand{display:flex;align-items:center;gap:12px}
  .brand-logo{
    display:block;
    width:170px;
    height:34px;
    object-fit:contain;
    object-position:left center;
    flex:0 0 auto;
  }
  .brand-logo.dark{
    filter:brightness(0) invert(1);
  }
  .brand-logo.light{display:none}
  .nav.light .brand-logo.dark{display:none}
  .nav.light .brand-logo.light{display:block}

  .nav-links{display:flex;align-items:center;gap:36px;font-size:var(--text-ui);font-weight:var(--weight-medium);letter-spacing:var(--tracking-ui)}
  .nav-links a{opacity:.85;transition:opacity .2s}
  .nav-links a:hover{opacity:1}

  .nav-cta{display:flex;align-items:center;gap:14px}
  .pill{
    display:inline-flex;align-items:center;gap:10px;
    padding:11px 20px;border-radius:999px;
    border:1px solid currentColor;
    font-size:var(--text-ui);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-ui);
    transition:transform .25s ease, background .25s ease, color .25s ease;
  }
  .pill.solid{background:#fff;color:var(--brand);border-color:#fff}
  .pill.solid:hover{background:transparent;color:#fff}
  .pill.ghost:hover{background:#fff;color:var(--brand)}
  .nav.light .pill.solid{background:var(--brand);color:#fff;border-color:var(--brand)}
  .nav.light .pill.solid:hover{background:transparent;color:var(--brand)}
  .arrow{display:inline-block;transform:translateX(0);transition:transform .25s ease}
  .pill:hover .arrow{transform:translateX(3px)}

  .lang{display:flex;align-items:center;gap:6px;font-size:var(--text-caption);opacity:.7;letter-spacing:.08em}
  .lang::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;min-height:100vh;
    background:
      radial-gradient(80% 60% at 100% 0%, #4a2898 0%, transparent 55%),
      radial-gradient(60% 80% at -10% 100%, #6f3ad1 0%, transparent 55%),
      linear-gradient(180deg,#1a0c44 0%, #160a36 60%, #0e0626 100%);
    color:#fff;overflow:hidden;
    isolation:isolate;
  }
  .hero-grain{
    position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
    background-image:
      radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:3px 3px;
  }

  /* curve element */
  .hero-curve{position:absolute;inset:auto 0 -2px 0;height:42vh;pointer-events:none;z-index:1}
  .hero-curve svg{width:100%;height:100%;display:block}

  /* large bg word */
  .hero-bg-word{
    position:absolute;
    bottom:6vh;left:-2vw;right:-2vw;
    font-weight:200;
    font-size:clamp(180px,28vw,460px);
    letter-spacing:-.06em;line-height:.85;
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.08);
    pointer-events:none;
    white-space:nowrap;
    overflow:hidden;
    z-index:0;
  }

  .hero-inner{
    position:relative;z-index:2;
    max-width:var(--maxw);margin:0 auto;
    padding:152px clamp(20px,4vw,56px) 0;
  }
  .hero-copy{max-width:24ch}
  .hero[data-layout="centered"] .hero-inner{text-align:center;display:flex;justify-content:center}
  .hero[data-layout="centered"] .hero-copy{max-width:880px;display:flex;flex-direction:column;align-items:center}
  .hero[data-layout="centered"] h1{max-width:14ch}
  .hero[data-layout="split"] .hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end}

  .hero h1{
    font-size:var(--text-display-lg);
    font-weight:var(--weight-thin);letter-spacing:-.04em;line-height:1.02;
    max-width:14ch;
  }
  .hero h1 .it{font-style:italic;font-weight:300;color:#d8c6ff}
  .hero h1 .bold{font-weight:700}
  .hero h1 .line{display:block}

  .hero-sub{
    margin-top:28px;
    font-size:clamp(16px,1.4vw,19px);
    line-height:1.55;color:rgba(255,255,255,.78);font-weight:var(--weight-light);
    max-width:62ch;
  }
  .hero[data-layout="split"] .hero-sub{margin-top:24px;font-size:16px}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;justify-content:center}
  .hero[data-layout="split"] .hero-actions{justify-content:flex-start}
  .hero-actions .pill{padding:14px 22px;font-size:13px}

  /* Vessel imagery container */
  .hero-vessel{
    position:relative;z-index:2;
    max-width:var(--maxw);margin:80px auto 0;
    padding:0 clamp(20px,4vw,56px) 70px;
  }
  .hero-vessel-frame{
    position:relative;border-radius:24px;overflow:hidden;
    aspect-ratio:21/9;
    background:#0c0420;
    border:1px solid rgba(255,255,255,.08);
  }
  .hero-vessel-frame img{
    width:100%;height:100%;object-fit:cover;
    transform:scale(1.05);
    transition:transform 8s ease-out;
  }
  .hero-vessel-frame.in img{transform:scale(1)}
  .hero-vessel-frame::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, transparent 50%, rgba(14,6,38,.55) 100%);
    pointer-events:none;
  }
  .vessel-overlay{
    position:absolute;left:32px;bottom:28px;right:32px;
    display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
    z-index:2;color:#fff;
  }
  .vessel-overlay .label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.7;margin-bottom:6px;font-weight:600}
  .vessel-overlay .name{font-weight:200;font-size:clamp(20px,2.4vw,34px);letter-spacing:-.01em}
  .vessel-meta{display:flex;gap:30px;font-size:13px;font-weight:500;opacity:.85}
  .vessel-meta span{display:flex;flex-direction:column;gap:2px}
  .vessel-meta span small{opacity:.6;font-size:10px;letter-spacing:.16em;text-transform:uppercase}

  /* ---------- marquee ---------- */
  .marquee{
    background:var(--ink);color:#fff;
    padding:22px 0;overflow:hidden;position:relative;
    border-top:1px solid rgba(255,255,255,.06);
  }
  .marquee::before, .marquee::after{
    content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
  }
  .marquee::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
  .marquee::after{right:0;background:linear-gradient(-90deg,var(--ink),transparent)}
  .marquee-track{
    display:flex;gap:60px;width:max-content;
    animation:scrollx 60s linear infinite;
    font-weight:300;font-size:clamp(20px,2vw,28px);letter-spacing:-.01em;
    align-items:center;
  }
  .marquee-track .dot{width:6px;height:6px;border-radius:50%;background:var(--violet);flex:0 0 auto}
  .marquee-track .port{display:inline-flex;align-items:center;gap:14px;white-space:nowrap;opacity:.92}
  .marquee-track .port .code{font-size:12px;opacity:.55;letter-spacing:.18em;font-weight:600;margin-left:8px}
  @keyframes scrollx{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
  }

  /* ---------- generic section ---------- */
  section{padding:clamp(80px,10vw,160px) clamp(20px,4vw,56px);position:relative}
  .container{max-width:var(--maxw);margin:0 auto}
  .section-head{
    display:grid;grid-template-columns:1fr 1.4fr;gap:60px;
    align-items:end;margin-bottom:64px;
  }
  .section-head h2{
    font-size:var(--text-display-md);
    font-weight:var(--weight-thin);letter-spacing:var(--tracking-display);line-height:1;
  }
  .section-head h2 em{font-style:italic;color:var(--violet);font-weight:300}
  .section-head .lead{
    font-size:var(--text-body-lg);line-height:1.65;color:rgba(22,10,54,.7);font-weight:var(--weight-regular);
    max-width:520px;
  }

  /* ---------- intro / promise ---------- */
  .promise{
    background:var(--paper);
    color:var(--ink);
  }
  .promise-grid{
    display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start;
  }
  .promise-grid h2{
    font-size:var(--text-display-sm);
    font-weight:var(--weight-thin);letter-spacing:-.03em;line-height:1.05;
  }
  .promise-grid h2 em{font-style:italic;color:var(--violet);font-weight:300}
  .promise-body{display:flex;flex-direction:column;gap:28px}
  .promise-body p{font-size:var(--text-body-xl);line-height:var(--leading-body);color:rgba(22,10,54,.78);font-weight:var(--weight-regular)}
  .promise-body p:first-child{font-size:var(--text-title-md);color:var(--ink);font-weight:var(--weight-medium);line-height:1.5}
  .signature{
    display:flex;align-items:center;gap:18px;padding-top:24px;border-top:1px solid var(--line-ink);
    color:rgba(22,10,54,.55);font-size:13px;
  }

  /* ---------- vision / mission ---------- */
  .vm-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:var(--line-ink);
    border:1px solid var(--line-ink);
    border-radius:24px;
    overflow:hidden;
  }
  .vm-card{
    background:#fff;
    padding:48px clamp(28px,4vw,56px);
    min-height:280px;
    display:flex;
    flex-direction:column;
    gap:14px;
    overflow:hidden;
  }
  .vm-card p{
    position:relative;
    z-index:2;
    font-size:clamp(20px,1.8vw,26px);
    line-height:1.4;
    font-weight:300;
    letter-spacing:-.01em;
    color:var(--ink);
    max-width:30ch;
  }
  .vm-graphic{
    position:relative;
    width:107px;
    height:107px;
    pointer-events:none;
    opacity:.95;
    margin-bottom:10px;
  }
  .vm-graphic img{width:100%;height:100%;display:block}

  /* ---------- services ---------- */
  .services{background:var(--mist);color:var(--ink)}
  .services .section-head{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:80px;
  }
  .services .section-head .lead{
    max-width:none;
    width:100%;
    padding-left:28px;
  }
  .svc-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    background:rgba(22,10,54,.1);
    border:1px solid rgba(22,10,54,.1);
    border-radius:0;
  }
  .svc{
    background:var(--mist);
    padding:36px 28px 34px;
    min-height:380px;display:flex;flex-direction:column;gap:18px;
    transition:background .4s ease, color .4s ease;
    cursor:pointer;position:relative;overflow:hidden;
  }
  .svc:hover{background:var(--brand);color:#fff}
  .svc:hover .svc-list li{border-color:rgba(255,255,255,.18)}
  .svc h3{
    font-size:28px;font-weight:300;letter-spacing:-.02em;line-height:1.1;margin-top:8px;
  }
  .svc p{
    font-size:14px;line-height:1.65;opacity:.78;font-weight:400;flex:1;
  }
  .svc-list{list-style:none;display:flex;flex-direction:column;gap:0;font-size:13px;font-weight:500}
  .svc-list li{padding:10px 0;border-top:1px solid rgba(22,10,54,.12);display:flex;align-items:center;gap:10px}
  .svc-list li::before{content:"\2192";opacity:.5;transition:transform .25s}
  .svc:hover .svc-list li::before{transform:translateX(2px);opacity:1}
  /* ---------- network / stats ---------- */
  .network{
    background:linear-gradient(180deg,#0e0626 0%, #160a36 100%);
    color:#fff;
    position:relative;overflow:hidden;
  }
  .network .container{position:relative;z-index:2}
  .network .section-head{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:80px;
  }
  .network .section-head .lead{
    max-width:none;
    width:100%;
    padding-left:36px;
  }
  .stat-row{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:0;
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:48px;
  }
  .stat{
    padding:48px 28px;
    border-right:1px solid rgba(255,255,255,.12);
    display:flex;flex-direction:column;gap:10px;
  }
  .stat:last-child{border-right:none}
  .stat .v{font-size:clamp(48px,5.5vw,84px);font-weight:200;letter-spacing:-.035em;line-height:1}
  .stat .v sup{font-size:.45em;color:var(--lilac);font-weight:400;margin-left:4px;vertical-align:top;top:.3em;position:relative}
  .stat .l{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;margin-top:8px}

  /* world map / route */
  .route-stage{
    margin-top:80px;border:1px solid rgba(255,255,255,.12);
    border-radius:24px;padding:36px;
    background:rgba(255,255,255,.02);
    position:relative;overflow:hidden;
    min-height:460px;
  }
  .route-stage h3{font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:20px}
  .route-svg{width:100%;height:auto;display:block}
  .route-stage img{
    width:100%;
    height:auto;
    display:block;
    border-radius:14px;
  }
  .route-legend{
    position:absolute;left:36px;bottom:36px;display:flex;gap:24px;font-size:12px;color:rgba(255,255,255,.7);
  }
  .route-legend span{display:inline-flex;align-items:center;gap:8px}
  .route-legend i{display:inline-block;width:10px;height:10px;border-radius:50%}

  /* ---------- fleet showcase ---------- */
  .fleet{background:#fff;color:var(--ink)}
  .fleet .section-head{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:80px;
  }
  .fleet .section-head .lead{
    max-width:none;
    width:100%;
    padding-left:36px;
  }
  .fleet-grid{
    display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start;
  }
  .fleet-img{
    position:relative;border-radius:24px;overflow:hidden;
    aspect-ratio:5/5.1;
    margin-top:0;
  }
  .fleet-img img{width:100%;height:100%;object-fit:cover;object-position:center top}
  .fleet-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(22,10,54,.6))}
  .fleet-info{display:flex;flex-direction:column;gap:32px;padding:0}
  .fleet-info h2{font-size:clamp(38px,4.8vw,72px);font-weight:200;letter-spacing:-.03em;line-height:1.02}
  .fleet-info h2 em{font-style:italic;font-weight:300;color:var(--violet)}
  .fleet-info p{font-size:var(--text-body-lg);line-height:var(--leading-body);color:rgba(22,10,54,.72)}
  .vessel-list{
    border-top:1px solid var(--line-ink);
    margin-top:8px;
  }
  .vessel-list .row{
    display:grid;grid-template-columns:.7fr 2fr 1fr .8fr;gap:16px;
    padding:18px 0;border-bottom:1px solid var(--line-ink);
    font-size:14px;align-items:center;
    transition:background .25s;
  }
  .vessel-list .row:hover{background:rgba(107,63,184,.06)}
  .vessel-list .row .n{font-weight:600;letter-spacing:-.01em;font-size:15px}
  .vessel-list .row .meta{color:rgba(22,10,54,.6);font-size:13px}
  .vessel-list .row .status{
    display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
    color:var(--brand);justify-self:end;
  }
  .vessel-list .row .status::before{
    content:"";width:8px;height:8px;border-radius:50%;background:#3ec18a;box-shadow:0 0 0 4px rgba(62,193,138,.18);
    animation:pulse 2.2s ease-in-out infinite;
  }
  .vessel-list .row .status.port::before{background:#e8a73b;box-shadow:0 0 0 4px rgba(232,167,59,.18)}
  .vessel-list .row .status.dock::before{background:#9b8bb8;box-shadow:0 0 0 4px rgba(155,139,184,.18);animation:none}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

  /* why-list (replaces vessel roster) */
  .why-list{display:flex;flex-direction:column;gap:0;margin-top:8px;border-top:1px solid var(--line-ink)}
  .why{display:grid;grid-template-columns:1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line-ink);align-items:start;transition:background .25s, padding-left .25s}
  .why:hover{background:rgba(107,63,184,.04);padding-left:8px}
  .why h4{font-size:var(--text-title-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-title);margin-bottom:6px}
  .why p{font-size:var(--text-body-sm);line-height:1.65;color:rgba(22,10,54,.7)}

  /* features cards (replaces sustainability) */
  .sustain .section-head{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:80px;
  }
  .sustain .section-head .lead{
    max-width:50ch;
    width:100%;
    padding-left:72px;
  }
  .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .feature{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;padding:32px 28px;
    display:flex;flex-direction:column;gap:14px;min-height:240px;
    transition:background .3s, border-color .3s, transform .3s;
  }
  .feature:hover{background:rgba(255,255,255,.07);border-color:rgba(216,198,255,.35);transform:translateY(-2px)}
  .feature .ic{
    width:42px;height:42px;border-radius:11px;background:rgba(216,198,255,.14);
    display:grid;place-items:center;color:#d8c6ff;
  }
  .feature h4{font-size:var(--text-title-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-title);line-height:1.2;color:#fff}
  .feature p{font-size:var(--text-body-sm);line-height:1.6;color:rgba(255,255,255,.7)}

  /* ---------- sustainability strip ---------- */
  .sustain{
    background:#fff;color:var(--ink);
    padding-top:0;
  }
  .sustain-card{
    position:relative;border-radius:24px;overflow:hidden;
    background:linear-gradient(135deg,#2a1656 0%, #6b3fb8 100%);
    color:#fff;padding:80px clamp(28px,6vw,80px);
    display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;
    max-width:var(--maxw);margin:0 auto;
  }
  .sustain-card::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(60% 60% at 100% 100%, rgba(255,255,255,.12), transparent 60%),
      radial-gradient(40% 40% at 0% 0%, rgba(255,255,255,.08), transparent 60%);
    pointer-events:none;
  }
  .sustain-card > *{position:relative;z-index:1}
  .sustain-card h2{font-size:clamp(36px,4.4vw,64px);font-weight:200;letter-spacing:-.03em;line-height:1.05}
  .sustain-card h2 em{font-style:italic;font-weight:300}
  .sustain-card p{font-size:var(--text-body);line-height:var(--leading-body);color:rgba(255,255,255,.82);margin-top:20px;max-width:46ch}
  .sustain-pillars{display:grid;grid-template-columns:1fr;gap:18px}
  .pillar{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;padding:20px 22px;
    display:grid;grid-template-columns:48px 1fr auto;gap:18px;align-items:center;
  }
  .pillar .icon{
    width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.1);
    display:grid;place-items:center;
  }
  .pillar h4{font-size:15px;font-weight:600;letter-spacing:-.01em}
  .pillar p{font-size:13px;color:rgba(255,255,255,.7);margin:2px 0 0;line-height:1.5}
  .pillar .v{font-size:24px;font-weight:300;letter-spacing:-.02em}

  /* ---------- CTA ---------- */
  .cta{
    background:var(--paper);
    position:relative;
    overflow:hidden;
    padding:clamp(80px,10vw,140px) clamp(20px,4vw,56px);
  }
  .cta > .cta-video{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    pointer-events:none;
  }
  .cta::before{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(135deg, rgba(22,10,54,.84) 0%, rgba(42,22,86,.78) 46%, rgba(107,63,184,.68) 100%),
      radial-gradient(70% 80% at 18% 18%, rgba(216,198,255,.12), transparent 58%);
    pointer-events:none;
    z-index:1;
  }
  .cta-card{
    max-width:var(--maxw);margin:0 auto;
    background:transparent;color:#fff;
    border-radius:0;
    padding:0;
    display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;
    position:relative;
    z-index:2;
  }
  .cta-card > *{position:relative;z-index:1}
  .cta h2{font-size:clamp(40px,5.6vw,86px);font-weight:200;letter-spacing:-.035em;line-height:1}
  .cta h2 em{font-style:italic;font-weight:300;color:#d8c6ff}
  .cta-form{
    background:rgba(42,22,86,.34);border:1px solid rgba(255,255,255,.14);
    border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:14px;
    backdrop-filter:blur(10px) saturate(1.1);
    -webkit-backdrop-filter:blur(10px) saturate(1.1);
  }
  .cta-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .cta-form .field{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;padding:14px 16px;
    display:flex;flex-direction:column;gap:2px;
    transition:border-color .25s;cursor:text;
  }
  .cta-form .field:hover{border-color:rgba(255,255,255,.3)}
  .cta-form .field label{font-size:var(--text-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:var(--weight-semibold)}
  .cta-form .field .val{font-size:15px;color:#fff;font-weight:var(--weight-medium)}
  .cta-form .submit{
    margin-top:6px;
    background:#fff;color:var(--brand);
    padding:16px 22px;border-radius:12px;font-weight:700;letter-spacing:.04em;
    display:flex;align-items:center;justify-content:space-between;
    transition:transform .25s;
  }
  .cta-form .submit:hover{transform:translateY(-2px)}

  /* ---------- footer ---------- */
  footer{
    background:var(--ink);color:rgba(255,255,255,.7);
    padding:80px clamp(20px,4vw,56px) 30px;
    border-top:1px solid rgba(255,255,255,.06);
  }
  .foot{max-width:var(--maxw);margin:0 auto}
  .foot-top{
    display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px;
    padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.1);
  }
  .foot-brand{display:flex;flex-direction:column;gap:18px;max-width:340px}
  .foot-brand p{font-size:var(--text-body-sm);line-height:1.6;color:rgba(255,255,255,.6)}
  .foot-col h5{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700;margin-bottom:16px}
  .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}
  .foot-col a{opacity:.85;transition:opacity .2s,color .2s}
  .foot-col a:hover{opacity:1;color:var(--lilac)}
  .foot-bottom{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:24px;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.45);
    flex-wrap:wrap;gap:16px;
  }
  /* reveal */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease, transform .9s ease}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}
  .reveal.d2{transition-delay:.16s}
  .reveal.d3{transition-delay:.24s}
  .reveal.d4{transition-delay:.32s}

  /* responsive */
  @media (max-width:1100px){
    .hero-inner{grid-template-columns:1fr;gap:30px;padding-top:140px}
    .hero-right{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:30px;max-width:520px}
    .svc-grid{grid-template-columns:repeat(2,1fr)}
    .stat-row{grid-template-columns:repeat(2,1fr)}
    .stat:nth-child(2){border-right:none}
    .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid rgba(255,255,255,.12)}
    .promise-grid,.vm-grid,.fleet-grid,.sustain-card,.cta-card{grid-template-columns:1fr}
    .section-head{grid-template-columns:1fr;gap:24px}
    .services .section-head .lead{padding-left:0}
    .network .section-head .lead{padding-left:0}
    .fleet .section-head .lead{padding-left:0}
    .sustain .section-head .lead{padding-left:0;max-width:none}
    .fleet-img img{transform:translate3d(0,-20px,0) scale(1.05)}
    .foot-top{grid-template-columns:1fr 1fr;gap:48px}
    .nav-links{display:none}
  }
  @media (max-width:640px){
    .services .section-head{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:16px;
    }
    .services .section-head .lead{
      padding-left:0;
      max-width:none;
      width:100%;
      margin-top:0;
    }
    .network .section-head{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:16px;
    }
    .network .section-head .lead{
      padding-left:0;
      max-width:none;
      width:100%;
      margin-top:0;
    }
    .fleet .section-head{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:16px;
    }
    .fleet .section-head .lead{
      padding-left:0;
      max-width:none;
      width:100%;
      margin-top:0;
    }
    .sustain .section-head{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:16px;
    }
    .sustain .section-head .lead{
      padding-left:0;
      max-width:none;
      width:100%;
      margin-top:0;
    }
    .cta{
      padding:56px 20px;
    }
    .cta-card{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      gap:24px;
    }
    .cta-card .head-stack{
      gap:16px;
    }
    .cta-card .type-body-lg{
      max-width:none !important;
    }
    .cta-form{
      padding:20px;
      border-radius:18px;
    }
    .cta-form .row{
      grid-template-columns:1fr;
      gap:10px;
    }
    .route-stage{
      margin-top:40px;
      min-height:0;
      padding:20px;
    }
    .route-stage h3{margin-bottom:14px}
    .route-stage img{
      border-radius:10px;
    }
    .vessel-list .row{grid-template-columns:1fr 1fr;gap:8px}
    .vessel-list .row .meta:nth-child(3){display:none}
    .svc-grid{grid-template-columns:1fr}
    .features-grid{grid-template-columns:1fr}
    .stat-row{
      grid-template-columns:1fr !important;
      margin-top:20px;
      border-top:none;
    }
    .stat{
      border-right:none;
      border-bottom:1px solid rgba(255,255,255,.12);
      padding:18px 0;
      gap:0;
    }
    .stat .l{
      margin-top:0;
      font-size:14px;
      letter-spacing:.08em;
      color:rgba(255,255,255,.78);
    }
    .why::after{display:none}
    .foot-top{grid-template-columns:1fr}
    .hero-card{grid-template-columns:1fr}
    .vessel-overlay{flex-direction:column;align-items:flex-start}
  }

  /* ============ Theme options: mood / palette / hero stage ============ */

  /* --- Mood: editorial (default) is current. Below define industrial + hushed. --- */
  body[data-mood="industrial"] .display,
  body[data-mood="industrial"] h2{ font-weight:700; letter-spacing:-.025em }
  body[data-mood="industrial"] .display em,
  body[data-mood="industrial"] h2 em,
  body[data-mood="industrial"] .hero h1 .it{ font-style:normal; color:inherit; font-weight:700 }
  body[data-mood="industrial"] .hero h1 .bold{ font-weight:900 }
  body[data-mood="industrial"] .display, body[data-mood="industrial"] h2,
  body[data-mood="industrial"] .hero h1{ text-transform:uppercase }
  body[data-mood="industrial"] .eyebrow{ letter-spacing:.32em }
  body[data-mood="industrial"] .svc h3,
  body[data-mood="industrial"] .feature h4,
  body[data-mood="industrial"] .why h4{ font-weight:700; letter-spacing:-.01em }
  body[data-mood="industrial"] .pill{ border-radius:4px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px }
  body[data-mood="industrial"] .brand{ letter-spacing:.28em }

  body[data-mood="hushed"] .display,
  body[data-mood="hushed"] h2{ font-weight:200; letter-spacing:-.04em }
  body[data-mood="hushed"] .hero h1{ font-size:clamp(46px,6.6vw,118px) }
  body[data-mood="hushed"] h2{ font-size:clamp(32px,4.2vw,64px) }
  body[data-mood="hushed"] section{ padding:clamp(110px,13vw,200px) clamp(20px,4vw,56px) }
  body[data-mood="hushed"] .hero-sub{ font-size:clamp(15px,1.2vw,17px) }
  body[data-mood="hushed"] .display em,
  body[data-mood="hushed"] h2 em,
  body[data-mood="hushed"] .hero h1 .it{ font-style:normal }
  body[data-mood="hushed"] .hero h1 .bold{ font-weight:300 }
  body[data-mood="hushed"] .eyebrow{ letter-spacing:.4em; font-size:10px }

  /* --- Palette --- */
  body[data-palette="inkwell"]{
    --brand:#15102e; --brand-2:#27214a; --violet:#5a4585; --lilac:#9d8fc2; --ink:#0a0820;
  }
  body[data-palette="inkwell"] .hero{
    background:
      radial-gradient(50% 50% at 100% 0%, #2a2150 0%, transparent 60%),
      radial-gradient(40% 60% at 0% 100%, #423078 0%, transparent 55%),
      linear-gradient(180deg,#0a0820 0%, #0a0820 60%, #050310 100%);
  }
  body[data-palette="inkwell"] .marquee,
  body[data-palette="inkwell"] footer,
  body[data-palette="inkwell"] #features{ background:#0a0820 }
  body[data-palette="inkwell"] .network{ background:linear-gradient(180deg,#050310 0%, #0a0820 100%) }
  body[data-palette="inkwell"] .hero-curve path:first-child{ fill:#0a0820 !important }

  body[data-palette="dawn"]{
    --brand:#6b3fb8; --brand-2:#a05ca0; --violet:#d8709c; --lilac:#ffd0c2; --ink:#2a1656;
  }
  body[data-palette="dawn"] .hero{
    background:
      radial-gradient(60% 50% at 100% 0%, #ffb89e 0%, transparent 55%),
      radial-gradient(50% 60% at 0% 100%, #6b3fb8 0%, transparent 60%),
      linear-gradient(180deg,#2a1656 0%, #6b3fb8 38%, #d8709c 72%, #ffb89e 100%);
  }
  body[data-palette="dawn"] .hero h1 .it{ color:#ffe1d0 }
  body[data-palette="dawn"] .network{ background:linear-gradient(180deg,#2a1656 0%, #5c2b87 100%) }
  body[data-palette="dawn"] #features{ background:#2a1656 }
  body[data-palette="dawn"] footer{ background:#1a0c44 }
  body[data-palette="dawn"] .hero-curve path:first-child{ fill:#2a1656 !important }

  /* --- Hero stage: bold-word --- */
  body[data-stage="bold-word"] .hero{ min-height:96vh; padding-bottom:60px }
  body[data-stage="bold-word"] .hero-vessel{ display:none }
  body[data-stage="bold-word"] .hero-curve{ display:none }
  body[data-stage="bold-word"] .hero-bg-word{
    font-size:clamp(280px,40vw,640px);
    -webkit-text-stroke:2px rgba(216,198,255,.22);
    top:auto;bottom:-6vh;line-height:.82;
  }
  body[data-stage="bold-word"] .hero-inner{ padding-top:144px }
  body[data-stage="bold-word"] .hero h1{ font-size:clamp(48px,6.5vw,108px) }

  /* --- Hero stage: frame-first (vessel image as full-bleed bg) --- */
  body[data-stage="frame-first"] .hero{ min-height:100vh; padding-bottom:0; position:relative }
  body[data-stage="frame-first"] .hero-vessel{ position:absolute; inset:0; max-width:none; margin:0; padding:0; z-index:0 }
  body[data-stage="frame-first"] .hero-vessel-frame{ position:absolute; inset:0; aspect-ratio:auto; height:100%; border-radius:0; border:none }
  body[data-stage="frame-first"] .hero-vessel-frame::after{
    background:linear-gradient(180deg, rgba(14,6,38,.86) 0%, rgba(14,6,38,.35) 38%, rgba(14,6,38,.92) 100%);
  }
  body[data-stage="frame-first"] .vessel-overlay{ display:none }
  body[data-stage="frame-first"] .hero-bg-word{ display:none }
  body[data-stage="frame-first"] .hero-inner{ z-index:2; padding-top:26vh; padding-bottom:60px }
  body[data-stage="frame-first"] .hero-grain{ z-index:1 }

  /* ============ PARALLAX & MOTION ============ */

  /* Smoothed CSS variables drive scroll + mouse parallax */
  body{ --py:0; --mx:0; --my:0 }

  /* Slow hero gradient drift (radial blobs shift) */
  .hero{
    background-size: 220% 200%, 200% 220%, 100% 100%;
    animation: heroBgDrift 36s ease-in-out infinite alternate;
  }
  @keyframes heroBgDrift{
    0%   { background-position: 100% 0%,   0% 100%, center; }
    50%  { background-position: 90% 12%,  12% 88%, center; }
    100% { background-position: 110% -8%, -8% 108%, center; }
  }

  /* Big background word: scroll up, mouse drift, gentle base float */
  .hero-bg-word{
    transform:
      translate3d(
        calc(var(--mx, 0) * 18px),
        calc(var(--py, 0) * -.22px),
        0
      );
    transition: transform .9s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
  }

  /* Hero copy gets a tiny opposite drift for depth */
  .hero-copy{
    transform: translate3d(
      calc(var(--mx, 0) * -6px),
      calc(var(--my, 0) * -4px),
      0
    );
    transition: transform .9s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
  }

  /* Vessel hero image: drifts down on scroll for parallax inside its frame */
  .hero-vessel-frame img{
    transform: translate3d(0, calc(var(--py, 0) * .08px), 0) scale(1.12);
    transition: transform .4s linear;
    will-change: transform;
  }

  /* Container image (Why us): parallax inside its frame */
  .fleet-img{ overflow:hidden }
  .fleet-img img{
    transform: translate3d(0, -26px, 0) scale(1.08);
    transition: transform .3s linear;
    will-change: transform;
  }

  /* ============ HEADLINE LINE-WIPE ============ */
  .hero h1.reveal{ opacity:1; transform:none; transition:none }
  .hero h1 .line{ display:block; overflow:visible; padding:.08em 0 .12em; margin:-.08em 0 -.12em }
  .hero h1 .line .t{
    display:inline-block;
    transform:translate3d(0,110%,0);
    transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
    will-change:transform;
  }
  .hero h1.in .line .t{ transform:translate3d(0,0,0) }
  .hero h1 .line:nth-child(1) .t{ transition-delay:.05s }
  .hero h1 .line:nth-child(2) .t{ transition-delay:.20s }
  .hero h1 .line:nth-child(3) .t{ transition-delay:.35s }

  /* Hero sub fades + rises in */
  .hero-sub.reveal{ transition-duration:1.2s }

  /* ============ MICRO-MOTION ============ */

  /* Nav links: animated underline */
  .nav-links a{ position:relative }
  .nav-links a::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:right;
    transition:transform .45s cubic-bezier(.2,.7,.2,1);
  }
  .nav-links a:hover::after{ transform:scaleX(1); transform-origin:left }

  /* Service card lift on hover */
  .svc{ transform:translateY(0); transition:background .4s ease, color .4s ease, transform .35s cubic-bezier(.2,.7,.2,1) }
  .svc:hover{ transform:translateY(-6px) }

  /* Feature card lift */
  .feature{ transform:translateY(0) }
  .feature:hover{ transform:translateY(-3px) }

  /* Why-list arrow accent on hover */
  .why{ position:relative }
  .why::after{
    content:"\2192"; position:absolute; right:0; top:24px;
    font-size:18px; color:var(--violet); opacity:0;
    transform:translateX(-12px); transition:opacity .35s, transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .why:hover::after{ opacity:.85; transform:translateX(0) }

  /* Hero curve continually subtle breathe */
  .hero-curve path:last-child{
    animation: curveShift 8s ease-in-out infinite alternate;
  }
  @keyframes curveShift{
    0%   { transform: translateY(0) }
    100% { transform: translateY(-4px) }
  }

  /* Bold-word stage: add slow horizontal drift to the giant word */
  body[data-stage="bold-word"] .hero-bg-word{
    animation: bigWordDrift 30s ease-in-out infinite alternate;
  }
  @keyframes bigWordDrift{
    0%   { letter-spacing: -.06em }
    100% { letter-spacing: -.052em }
  }

  /* Marquee track speeds up on hover (engagement) */
  .marquee:hover .marquee-track{ animation-duration:30s }
  .marquee-track{ transition: filter .3s }
  .marquee:hover .marquee-track{ filter: brightness(1.15) }

  /* Logo gentle wobble on hover */
  .brand:hover .brand-logo{ animation: markWobble .8s cubic-bezier(.2,.7,.2,1) }
  @keyframes markWobble{
    0%   { transform: rotate(0deg) scale(1) }
    30%  { transform: rotate(-6deg) scale(1.06) }
    60%  { transform: rotate(4deg) scale(1.06) }
    100% { transform: rotate(0deg) scale(1) }
  }
  .brand-logo{ transition: transform .3s ease }

  /* Pill: magnetic glow on hover */
  .pill{ position:relative; overflow:hidden }
  .pill::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(120px 120px at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.18), transparent 55%);
    opacity:0;transition:opacity .3s;
    pointer-events:none;
  }
  .pill:hover::before{ opacity:1 }

  /* Disable heavy parallax on small screens (perf + layout safety) */
  @media (max-width:900px){
    .hero-bg-word, .hero-copy, .hero-vessel-frame img, .fleet-img img, .section-head h2{
      transform:none !important;
    }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation:none !important; transition:none !important }
    .hero h1 .line .t{ transform:none !important }
  }

.cta-form .field span{font-size:var(--text-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:var(--weight-semibold)}
.cta-form input::placeholder{color:rgba(255,255,255,.52)}
.form-status{min-height:1.5em;font-size:13px;color:rgba(255,255,255,.78);line-height:1.5}
.form-status.success{color:#8af0bd}
.form-status.error{color:#ffd0d0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}