:root{
    --cream:#f7f7f5;      /* soft warm white — editorial background */
    --cream-2:#eeeeeb;    /* slightly deeper warm surface */
    --ink:#2b2b2b;        /* deep charcoal — primary text & dark sections */
    --ink-2:#5a5a5a;      /* graphite — secondary text */
    --muted:#8c8c88;      /* muted / hints */
    --line:#e6e6e4;       /* light grey — borders, dividers */
    --green:#383838;      /* (legacy name) dark charcoal — dark bands & primary buttons */
    --green-2:#16a9ac;    /* (legacy name) Deepwork intelligence blue — accent, used sparingly */
    --green-soft:#eef1f8; /* (legacy name) faint cool tint — active surfaces */
    --gold:#9a9a95;       /* (legacy name) quiet grey — decorative lines & dots */
    --gold-soft:#ececea;  /* (legacy name) light grey — chip backgrounds */
    --serif:'Fraunces',Georgia,serif;
    --sans:'Inter',system-ui,sans-serif;
    --step-0:clamp(15px,1vw + 11px,17px);
    --step-1:clamp(18px,1.4vw + 12px,22px);
    --step-2:clamp(24px,2.4vw + 14px,34px);
    --step-3:clamp(32px,4vw + 14px,52px);
    --step-4:clamp(40px,6vw + 14px,76px);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
  body{font-family:var(--sans);font-size:var(--step-0);color:var(--ink);background:var(--cream);line-height:1.65}
  h1,h2,h3,.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.12;color:var(--ink)}
  h2{font-size:var(--step-3);max-width:18ch}
  p{max-width:62ch}
  img{max-width:100%;display:block}
  a{color:inherit}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
  section{padding:clamp(72px,10vw,120px) 0}
  .eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:20px}
  .eyebrow.gold{color:var(--ink-2)}
  .lede{font-size:var(--step-1);color:var(--ink-2);max-width:52ch}
  .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 18px;z-index:200}
  .skip:focus{left:12px;top:12px}
  :focus-visible{outline:3px solid var(--green-2);outline-offset:3px;border-radius:2px}
  .ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

  /* ---- photography crops (real photos; see header comment) ---- */
  .ph{background-repeat:no-repeat;border-radius:14px;overflow:hidden}
  .ph-hero{background-image:url('assets/deck/page1.jpg');background-size:278.3% auto;background-position:0% 0%;aspect-ratio:640/1000}
  .ph-origin{background-image:url('assets/deck/page6.jpg');background-size:196.9% auto;background-position:14.3% 99%;aspect-ratio:975/570}
  .ph-lifestyle{background-image:url('assets/deck/page2.jpg');background-size:234.1% auto;background-position:100% 0%;aspect-ratio:820/490}
  .ph-chiller{background-image:url('assets/deck/page4.jpg');background-size:505.3% auto;background-position:54.2% 41.2%;aspect-ratio:380/510}
  .ph-kiosk{background-image:url('assets/deck/page4.jpg');background-size:673.7% auto;background-position:93.3% 41.2%;aspect-ratio:285/510}
  .ph-shelf{background-image:url('assets/deck/page4.jpg');background-size:468.3% auto;background-position:6% 98.7%;aspect-ratio:410/315}
  .ph-booth{background-image:url('assets/deck/page7.jpg');background-size:480% auto;background-position:28.3% 86.4%;aspect-ratio:400/565}
  .figcap{font-size:12.5px;color:var(--muted);margin-top:10px}

  /* ---- reveal ---- */
  .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  .rv.in{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){ .rv{opacity:1;transform:none;transition:none} }

  /* ---- header ---- */
  header{position:sticky;top:0;z-index:100;background:rgba(247,247,245,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);text-decoration:none}
  .logo svg{width:34px;height:34px}
  .logo svg path{stroke:var(--ink);stroke-width:2.6;fill:none}
  .logo .stack{display:flex;flex-direction:column;font-weight:600;font-size:12.5px;letter-spacing:.34em;line-height:1.35;color:var(--ink)}
  .nav-links{display:flex;gap:26px;align-items:center}
  .nav-links a{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:8px 2px}
  .nav-links a:hover{color:var(--ink)}
  .btn{display:inline-block;padding:14px 26px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:var(--sans);transition:background .18s,color .18s}
  .btn-solid{background:var(--green);color:#fff}
  .btn-solid:hover{background:var(--ink)}
  .btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
  .btn-line:hover{background:var(--ink);color:var(--cream)}
  .nav .btn{padding:10px 20px;font-size:13.5px}
  .menu-btn{display:none;background:none;border:none;cursor:pointer;padding:10px;min-width:44px;min-height:44px}
  .menu-btn span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0}
  @media(max-width:880px){
    .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:18px 24px 24px;gap:4px}
    .nav-links a{font-size:17px;padding:12px 0;width:100%}
    .nav-links.open{display:flex}
    .menu-btn{display:block}
  }

  /* ---- hero ---- */
  .hero{padding:clamp(56px,8vw,104px) 0 clamp(44px,6vw,72px)}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
  @media(max-width:880px){.hero-grid{grid-template-columns:1fr}}
  .hero h1{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;line-height:1.04;font-size:var(--step-4);max-width:15ch;margin-bottom:22px}
  .hero h1 em{font-style:normal;color:#2ec4c6}
  .hero .lede{margin-bottom:32px}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
  .hero-desc{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .hero-fig .ph{box-shadow:0 24px 60px rgba(27,27,23,.18)}
  @media(max-width:880px){.hero-fig .ph{aspect-ratio:640/720;background-position:0% 20%}}
  /* living-flow hero scene */
  .heroflow{width:100%;height:auto;display:block}
  .hnode .fni{transition:transform .35s cubic-bezier(.34,1.56,.64,1);transform-box:fill-box;transform-origin:center}
  .hnode.active .fni{transform:scale(1.13)}
  .hcan{transition:opacity .35s}
  @media (prefers-reduced-motion: reduce){ .hnode .fni{transition:none} }

  /* ---- difficult middle ---- */
  .middle{background:var(--green);color:#e9efe8}
  .middle .eyebrow{color:var(--gold)}
  .middle h2{color:#fff}
  .beats{margin:52px 0 0;max-width:640px;list-style:none;position:relative;padding-left:34px}
  .beats::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1.5px;background:rgba(255,255,255,.22)}
  .beats li{position:relative;padding:0 0 30px}
  .beats li::before{content:"";position:absolute;left:-31px;top:8px;width:11px;height:11px;border-radius:50%;background:var(--gold)}
  .beats li p{font-size:var(--step-1);font-family:var(--serif);line-height:1.4;color:#f2f5f0;max-width:34ch}
  .beats li span{display:block;font-size:13.5px;color:#b0b0ac;margin-top:4px;max-width:52ch}
  .middle-final{font-family:var(--serif);font-size:var(--step-2);color:#fff;margin:34px auto 0;max-width:34ch;line-height:1.25;text-align:center}
  .middle-final em{font-style:italic;color:#5fe0e2}
  /* layman summary: product ready → (we handle this) → selling well */
  .msum{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:56px;padding:26px 30px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px}
  .msum-end{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;font-size:12.5px;font-weight:600;text-align:center}
  .msum-end .mico{width:52px;height:52px;border-radius:15px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#fff}
  .msum-arrow{color:var(--gold);font-size:20px}
  .msum-mid{flex:1;min-width:220px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px;border:1.5px dashed var(--gold);border-radius:12px;cursor:pointer;overflow:hidden}
  .msum-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
  .msum-chip{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#cfd2d9;transition:transform .65s cubic-bezier(.34,1.56,.64,1)}
  /* sugar cubes: tumbled apart until hovered (or auto-tidied on scroll-in) */
  .msum-chip:nth-child(1){transform:translate(30px,12px) rotate(-17deg)}
  .msum-chip:nth-child(2){transform:translate(12px,-6px) rotate(24deg);transition-delay:.05s}
  .msum-chip:nth-child(3){transform:translate(0,13px) rotate(-9deg);transition-delay:.1s}
  .msum-chip:nth-child(4){transform:translate(-13px,-4px) rotate(14deg);transition-delay:.15s}
  .msum-chip:nth-child(5){transform:translate(-32px,9px) rotate(-22deg);transition-delay:.2s}
  .msum-mid:hover .msum-chip,.msum-mid.tidy .msum-chip{transform:none}
  .msum-mid em{font-style:normal;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5fe0e2;opacity:.55;transition:opacity .5s}
  .msum-mid:hover em,.msum-mid.tidy em{opacity:1}
  @media (prefers-reduced-motion: reduce){ .msum-chip{transform:none!important;transition:none} .msum-mid em{opacity:1} }
  @media(max-width:640px){.msum{flex-direction:column}.msum-arrow{transform:rotate(90deg)}}
  /* story panel: animated scene per beat */
  .mid-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:52px}
  .mid-grid .beats{margin-top:0}
  .storypanel{position:sticky;top:96px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:26px;min-height:360px;display:grid;place-items:center}
  @media(max-width:880px){.mid-grid{grid-template-columns:1fr}.storypanel{position:static;min-height:300px;margin-top:6px}}
  .beats li{cursor:pointer;transition:opacity .3s}
  .beats li::before{transition:transform .3s,background .3s;transform-box:fill-box}
  .beats li.lit::before{transform:scale(1.5);background:#fff}
  .beats li:not(.lit){opacity:.75}
  .beats li.lit{opacity:1}
  .scene{display:none;width:100%;max-width:430px;height:auto}
  .scene.on{display:block}
  .scene [class^="an-"],.scene [class*=" an-"]{transform-box:fill-box}
  .scene.on .an-pop{animation:s-pop .65s cubic-bezier(.34,1.56,.64,1) both}
  .scene.on .an-rise{animation:s-rise .7s ease both}
  .scene.on .an-bob{animation:s-bob 2.4s ease-in-out infinite}
  .scene.on .an-late{animation:s-rise .6s ease .9s both}
  .scene.on .an-latebob{animation:s-latebob 3s ease-in-out .9s infinite both}
  .scene.on .an-spin{animation:s-spin 3.5s linear infinite;transform-origin:center}
  .scene.on .an-drive{animation:s-drive 1.4s cubic-bezier(.22,1,.36,1) both}
  .scene.on .an-blink{animation:s-blink 1.6s ease-in-out infinite}
  .scene.on .an-look{animation:s-look 4s ease-in-out infinite}
  .scene.on .an-grow{animation:s-grow .9s cubic-bezier(.22,1,.36,1) both;transform-origin:bottom}
  .scene.on .an-pulse{animation:s-pulse 1.6s ease-in-out infinite}
  .scene.on .an-out{animation:s-out .5s ease both}
  .scene.on .an-alert{animation:s-alert .5s ease both}
  @keyframes s-pop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.14);opacity:1}100%{transform:scale(1);opacity:1}}
  @keyframes s-rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
  @keyframes s-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @keyframes s-latebob{0%{transform:translateY(14px);opacity:0}14%{transform:translateY(0);opacity:1}55%{transform:translateY(-7px)}100%{transform:translateY(0);opacity:1}}
  @keyframes s-spin{to{transform:rotate(360deg)}}
  @keyframes s-drive{0%{transform:translateX(-150px);opacity:0}25%{opacity:1}100%{transform:translateX(0)}}
  @keyframes s-blink{0%,100%{opacity:.15}50%{opacity:.9}}
  @keyframes s-look{0%,18%{transform:translateX(0)}35%,65%{transform:translateX(-9px)}82%,100%{transform:translateX(0)}}
  @keyframes s-grow{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
  @keyframes s-pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.28);opacity:1}}
  @keyframes s-out{to{opacity:0}}
  @keyframes s-alert{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
  @media (prefers-reduced-motion: reduce){
    .scene.on [class^="an-"],.scene.on [class*=" an-"]{animation:none!important;opacity:1!important;transform:none!important}
  }

  /* ---- the flow ---- */
  .flow{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .flow-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
  .flow-quote{font-family:var(--serif);font-size:var(--step-1);color:var(--ink);border-left:3px solid var(--gold);padding-left:20px;max-width:26ch;line-height:1.4}
  .flowart{width:100%;height:auto;display:block}
  .fcaps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:8px}
  @media(max-width:880px){.fcaps{grid-template-columns:repeat(2,1fr)}.tap-hint{display:none}.fcap{border-left:3px solid var(--line);padding-left:14px}.flowart{margin-bottom:14px}}
  .fcap .fname{font-family:var(--serif);font-size:19px;color:var(--ink);margin-bottom:4px}
  .fcap p{font-size:13px;color:var(--ink-2)}
  .flow-foot{margin-top:40px;font-size:14.5px;color:var(--ink-2);max-width:60ch}
  .flow-foot b{color:var(--green)}
  /* interactive flow */
  .fnode{cursor:pointer}
  .fni{transition:transform .35s cubic-bezier(.34,1.56,.64,1);transform-box:fill-box;transform-origin:center}
  .fnode:hover .fni,.fnode:focus-visible .fni,.fnode.active .fni{transform:scale(1.15)}
  .fnode:focus-visible{outline:none}
  .flowdot{opacity:0;transition:opacity .3s}
  .flowdot.on{opacity:1}
  .fcap{border-left:3px solid transparent;padding-left:14px;transition:border-color .3s,transform .3s;transform-origin:left center}
  .fcap.active{border-left-color:var(--gold);transform:scale(1.04)}
  .fcap.active .fname{color:var(--green)}
  @media (prefers-reduced-motion: reduce){ .fcap{transition:none} .fcap.active{transform:none} }
  .tap-hint{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:14px}
  @media (prefers-reduced-motion: reduce){ .fni{transition:none} .tap-hint{display:none} }

  /* ---- field loop (merchandising) ---- */
  .fieldsec{background:var(--cream)}
  .field-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
  @media(max-width:880px){.field-grid{grid-template-columns:1fr}}
  .looper{width:100%;max-width:420px;height:auto;display:block;margin:0 auto}
  .field-caps{list-style:none;margin-top:34px}
  .field-caps li{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)}
  .field-caps li:last-child{border-bottom:none}
  .field-caps .fic{flex:0 0 40px;height:40px;border-radius:12px;background:var(--green-soft);color:var(--green);display:grid;place-items:center}
  .field-caps b{color:var(--ink);font-weight:600}
  .field-note{margin-top:24px;font-size:14.5px;color:var(--ink-2);max-width:44ch}
  .field-note b{color:var(--green)}
  /* interactive loop */
  .spinring{animation:loopspin 60s linear infinite;transform-origin:210px 210px}
  @keyframes loopspin{to{transform:rotate(360deg)}}
  .orbit{animation:loopspin 16s linear infinite;transform-origin:210px 210px}
  .orbit .counter{animation:loopspin 16s linear infinite reverse;transform-box:fill-box;transform-origin:center}
  @media (prefers-reduced-motion: reduce){ .orbit,.orbit .counter{animation:none} }
  .lnode{cursor:pointer}
  .lnode:focus-visible{outline:none}
  .lnode:hover .fni,.lnode:focus-visible .fni,.lnode.active .fni{transform:scale(1.15)}
  .loopcenter{cursor:pointer}
  .loopcenter .fni{transition:transform .4s cubic-bezier(.34,1.56,.64,1);transform-box:fill-box;transform-origin:center}
  .loopcenter.pulse .fni{transform:scale(1.08)}
  .field-caps li{border-left:3px solid transparent;padding-left:10px;transition:border-color .3s,background .3s,transform .3s;transform-origin:left center;cursor:pointer}
  .field-caps li.active{border-left-color:var(--gold);background:#fff;transform:scale(1.05)}
  @media (prefers-reduced-motion: reduce){ .field-caps li{transition:none} .field-caps li.active{transform:none} }
  @media (prefers-reduced-motion: reduce){ .spinring{animation:none} }

  /* ---- principal dashboard mock ---- */
  .dashmock{margin-top:48px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(27,27,23,.10);overflow:hidden}
  .dm-bar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--cream)}
  .dm-bar i{width:10px;height:10px;border-radius:50%;background:var(--line);display:inline-block}
  .dm-bar .dm-title{margin-left:8px;font-size:13px;font-weight:600;color:var(--ink-2)}
  .dm-bar .dm-live{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--green-2);border:1px solid var(--green-soft);background:var(--green-soft);padding:4px 12px;border-radius:999px}
  .dm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
  @media(max-width:720px){.dm-kpis{grid-template-columns:repeat(2,1fr)}}
  .dm-kpi{background:#fff;padding:18px 20px}
  .dm-kpi .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .dm-kpi .v{font-family:var(--serif);font-size:26px;color:var(--ink);margin-top:4px}
  .dm-kpi .s{font-size:12px;color:var(--green-2)}
  .dm-kpi .s.warn{color:var(--gold)}
  .dm-panels{display:grid;grid-template-columns:1.2fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
  @media(max-width:720px){.dm-panels{grid-template-columns:1fr}}
  .dm-panel{background:#fff;padding:20px}
  .dm-panel .pt{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:14px}
  .dm-bars{display:flex;align-items:flex-end;gap:10px;height:110px;border-bottom:1px solid var(--line)}
  .dm-bars i{flex:1;background:var(--green-soft);border-radius:4px 4px 0 0;display:block}
  .dm-bars i.hot{background:var(--green)}
  .dm-x{display:flex;gap:10px;margin-top:6px}
  .dm-x span{flex:1;text-align:center;font-size:10.5px;color:var(--muted)}
  .dm-row{display:grid;grid-template-columns:86px 1fr 40px;gap:10px;align-items:center;margin-bottom:11px}
  .dm-row .l{font-size:12px;color:var(--ink-2)}
  .dm-row .v{font-size:12px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
  .dm-track{height:7px;background:var(--cream-2);border-radius:99px;overflow:hidden}
  .dm-fill{height:100%;background:var(--green-2);border-radius:99px}
  .dm-list{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--cream-2);font-size:12.5px}
  .dm-list:last-child{border-bottom:none}
  .dm-list .k{color:var(--ink-2)}
  .dm-pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--green-soft);color:var(--green-2)}
  .dm-pill.warn{background:var(--gold-soft);color:var(--gold)}
  .dm-cap{padding:12px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);background:var(--cream)}
  /* dashboard data-arrival animation */
  .dm-live{cursor:pointer;border:none;font-family:var(--sans)}
  .dm-live:hover{background:var(--green);color:#fff}
  .dm-bars i{transition:height 1s cubic-bezier(.22,1,.36,1)}
  .dm-fill{transition:width 1.1s cubic-bezier(.22,1,.36,1)}
  @media (prefers-reduced-motion: reduce){ .dm-bars i,.dm-fill{transition:none} }
  .stile:active{transform:translateY(-1px) scale(.98)}

  /* ---- what you see ---- */
  .see-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
  @media(max-width:900px){.see-tiles{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.see-tiles{grid-template-columns:1fr}}
  .stile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;transition:transform .18s,box-shadow .18s,border-color .18s;font-family:var(--sans);text-align:left;cursor:pointer;width:100%;color:var(--ink)}
  .stile:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(27,27,23,.08)}
  .stile[aria-pressed="true"]{border:1.5px solid var(--green);background:var(--green-soft)}
  .stile[aria-pressed="true"] .sico{background:#fff}
  .stile .sico{width:48px;height:48px;border-radius:14px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;margin-bottom:16px}
  .stile h3{font-size:18px;font-family:var(--sans);font-weight:600;margin-bottom:4px}
  .stile p{font-size:13.5px;color:var(--ink-2)}
  .see-quote{margin-top:52px;background:var(--green-soft);border-left:4px solid var(--green);padding:28px 32px;border-radius:0 14px 14px 0;max-width:680px}
  .see-quote p{font-family:var(--serif);font-size:var(--step-1);line-height:1.45;color:var(--ink);max-width:40ch}
  .see-quote .who{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:12px}

  /* ---- brands ---- */
  .brandsec{background:var(--cream-2)}
  .filters{display:flex;gap:8px;flex-wrap:wrap;margin:36px 0 26px}
  .filters button{font-family:var(--sans);font-size:13.5px;font-weight:500;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;min-height:38px}
  .filters button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
  .bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  @media(max-width:1000px){.bgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.bgrid{grid-template-columns:1fr}}
  .bcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;transition:box-shadow .2s}
  .bcard:hover{box-shadow:0 14px 36px rgba(27,27,23,.08)}
  .bcard .rel{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--green-soft);color:var(--green);margin-bottom:14px}
  .bcard .rel.own{background:var(--gold-soft);color:var(--gold)}
  .bcard h3{font-size:18px;font-family:var(--sans);font-weight:600;margin-bottom:3px}
  .bcard .cat{font-size:12.5px;color:var(--muted);margin-bottom:8px}
  .bcard p{font-size:13px;color:var(--ink-2)}
  .bcard a{font-size:13px;font-weight:600;color:var(--green-2);display:inline-block;margin-top:8px}

  /* ---- cocopod ---- */
  .cocopod{background:var(--ink);color:#efece3}
  .cocopod h2{color:#fff}
  .cocopod .eyebrow{color:#9aa0ab}
  .coco-open{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;margin-bottom:clamp(36px,5vw,56px)}
  @media(max-width:880px){.coco-open{grid-template-columns:1fr}}
  .coco-open .serif-p{font-family:var(--serif);font-size:var(--step-1);color:#efece3;line-height:1.45;margin-top:16px;max-width:32ch}
  .coco-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
  .coco-facts span{font-size:12.5px;border:1px solid rgba(255,255,255,.2);color:#c2c2be;padding:6px 14px;border-radius:999px}
  .journey-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:26px}
  @media(max-width:880px){.journey-strip{grid-template-columns:repeat(2,1fr)}}
  .jcell .ph,.jcell .jart{aspect-ratio:3/4}
  .jcell .jart{border-radius:14px;background:#232320;display:grid;place-items:center;padding:18px}
  .jcell .jart svg{width:100%;height:auto;max-width:180px}
  .jcell figcaption{font-size:13px;color:#b2b2ae;margin-top:10px}
  .jcell figcaption b{display:block;color:#efece3;font-weight:600}
  .coco-close{margin-top:clamp(36px,5vw,52px);font-family:var(--serif);font-size:var(--step-2);color:#fff;max-width:28ch;line-height:1.3}
  .coco-close em{font-style:italic;color:#5fe0e2}
  .coco-presence{margin-top:14px;font-size:13px;color:#8c8c88}

  /* ---- people ---- */
  .people{background:#fff;border-bottom:1px solid var(--line)}
  .people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
  @media(max-width:900px){.people-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.people-grid{grid-template-columns:1fr}}
  .person{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:26px}
  .person .picon{width:46px;height:46px;border-radius:13px;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;margin-bottom:14px}
  .person .prole{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-2);font-weight:600;margin-bottom:8px}
  .person p{font-family:var(--serif);font-size:17px;line-height:1.45;color:var(--ink)}

  /* ---- proof ---- */
  .proof-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
  @media(max-width:880px){.proof-strip{grid-template-columns:repeat(2,1fr)}}
  .proof-strip .ph{aspect-ratio:3/4}
  .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
  @media(max-width:720px){.metrics{grid-template-columns:1fr}}
  .metric{border-top:2px solid var(--ink);padding-top:18px}
  .metric .mv{font-family:var(--serif);font-size:var(--step-3);color:var(--green)}
  .metric .ml{font-size:14px;color:var(--ink-2);max-width:24ch}

  /* ---- about ---- */
  .about{background:#fff;border-top:1px solid var(--line)}
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
  @media(max-width:880px){.about-grid{grid-template-columns:1fr}}
  .about p{color:var(--ink-2)}
  .about .closing{font-family:var(--serif);font-size:var(--step-2);color:var(--ink);line-height:1.3;max-width:24ch}
  .about .closing em{font-style:italic;color:var(--green)}

  /* ---- pathways + form ---- */
  .pathways{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:44px 0 60px}
  @media(max-width:880px){.pathways{grid-template-columns:1fr}}
  .path{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}
  .path.primary{border:1.5px solid var(--green);background:var(--green-soft)}
  .path .pico{width:48px;height:48px;border-radius:14px;background:var(--cream-2);color:var(--green);display:grid;place-items:center;margin-bottom:14px}
  .path.primary .pico{background:#fff}
  .path h3{font-size:18px;font-family:var(--sans);font-weight:600;margin-bottom:4px}
  .path p{font-size:13.5px;color:var(--ink-2)}
  form{max-width:680px}
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:640px){.frow{grid-template-columns:1fr}}
  .field{margin-bottom:18px}
  label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
  label .opt{font-weight:400;color:var(--muted)}
  input[type=text],input[type=email],input[type=tel],select,textarea{
    width:100%;padding:13px 15px;font-family:var(--sans);font-size:15px;color:var(--ink);
    background:#fff;border:1.5px solid var(--line);border-radius:10px;min-height:48px}
  textarea{min-height:130px;resize:vertical}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green-2)}
  .err{display:none;font-size:12.5px;color:#a03325;margin-top:5px}
  .field.invalid .err{display:block}
  .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#a03325}
  .consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);margin:6px 0 22px}
  .consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--green)}
  .form-note{display:none;margin-top:16px;font-size:14px;padding:14px 18px;border-radius:10px}
  .form-note.ok{display:block;background:var(--green-soft);color:var(--green)}
  .form-note.info{display:block;background:var(--gold-soft);color:#7a5a1d}

  /* ---- closing + footer ---- */
  .closing-band{background:var(--green);color:#fff}
  .closing-band .serif{font-size:var(--step-3);max-width:24ch;line-height:1.2;color:#fff}
  .closing-band em{font-style:italic;color:var(--gold)}
  footer{background:var(--ink);color:#9a978c;padding:40px 0;font-size:13px}
  .foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
  .foot .logo{color:#fff}
  .foot .logo svg path{stroke:#fff}
  .foot .tag{font-family:var(--serif);font-style:italic;color:#c2c2be}
/* ===== channels coverage panel ===== */
.channels{background:var(--cream-2)}
.chan-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:end;margin-bottom:44px}
@media(max-width:880px){.chan-top{grid-template-columns:1fr;gap:18px}}
.chan-quote{font-family:var(--serif);font-size:var(--step-1);color:var(--ink);border-left:3px solid var(--green-2);padding-left:20px;max-width:30ch;line-height:1.4}
.chan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.chan-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.chan-grid{grid-template-columns:1fr}}
.chan{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;gap:14px;align-items:flex-start;transition:transform .18s,box-shadow .18s}
.chan:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(27,27,23,.08)}
.chan .cico{flex:0 0 42px;height:42px;border-radius:12px;background:var(--green-soft);color:var(--ink);display:grid;place-items:center}
.chan h3{font-size:16px;font-family:var(--sans);font-weight:600;margin-bottom:2px}
.chan p{font-size:13px;color:var(--ink-2)}
.chan-story{margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(24px,4vw,40px)}
.chan-story .cs-head{font-family:var(--serif);font-size:var(--step-2);color:var(--ink);margin-bottom:26px;max-width:26ch}
.cs-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:820px){.cs-steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cs-steps{grid-template-columns:1fr}}
.cs-step{padding-top:16px;border-top:2px solid var(--ink)}
.cs-step .n{font-family:var(--serif);font-size:14px;color:var(--green-2);margin-bottom:8px}
.cs-step h4{font-size:15px;font-family:var(--sans);font-weight:600;margin-bottom:5px}
.cs-step p{font-size:13px;color:var(--ink-2)}

/* ===== believe page ===== */
.believe-hero{padding:clamp(60px,9vw,120px) 0 clamp(28px,4vw,46px)}
.believe-hero h1{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;line-height:1.05;font-size:var(--step-4);max-width:18ch;margin:18px 0 22px}
.credo{padding-top:0}
.credo-list{border-top:1px solid var(--line)}
.credo-item{padding:clamp(28px,5vw,50px) 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:60px 1fr;gap:24px;align-items:start}
@media(max-width:640px){.credo-item{grid-template-columns:1fr;gap:8px}}
.credo-item .cn{font-family:var(--serif);font-size:18px;color:var(--green-2)}
.credo-item p{font-family:var(--serif);font-size:var(--step-2);line-height:1.28;color:var(--ink);max-width:24ch}
.credo-item span{display:block;margin-top:12px;font-family:var(--sans);font-size:15px;color:var(--ink-2);max-width:58ch;line-height:1.6}

/* ===== work page ===== */
.workhero{padding:clamp(60px,9vw,120px) 0 clamp(18px,3vw,36px)}
.workhero h1{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;line-height:1.05;font-size:var(--step-4);max-width:16ch;margin:18px 0 20px}

/* ===== shared closing CTA band on sub-pages ===== */
.subcta{background:var(--green);color:#fff;text-align:center}
.subcta h2{color:#fff;margin:0 auto 10px}
.subcta p{color:#c2c2be;margin:0 auto 26px;max-width:44ch}
.subcta .btn-solid{background:#fff;color:var(--ink)}
.subcta .btn-solid:hover{background:var(--green-2);color:#fff}
/* ===== brand logo cards (work page) ===== */
.bcard .blogo{height:56px;display:flex;align-items:center;margin-bottom:14px}
.bcard .blogo img{max-height:56px;max-width:140px;width:auto;object-fit:contain}
.bcard .blogo-text{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:.02em;color:#2ec4c6}

/* ===== hover slideshow (cocopod journey) ===== */
.slideshow{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#232320}
.slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.slideshow img:first-child{opacity:1}
.slideshow-hint{position:absolute;top:9px;right:9px;z-index:2;background:rgba(20,20,20,.5);color:#fff;font-size:10px;letter-spacing:.05em;padding:3px 9px;border-radius:99px}

/* ===== cold-chain truck cell (hover reveals the commitment) ===== */
.truckcell{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;cursor:pointer;background:#232320}
.truckcell img{width:100%;height:100%;object-fit:cover;display:block}
.truckcell .tc-over{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,0) 34%,rgba(18,18,18,.88));display:flex;flex-direction:column;justify-content:flex-end;padding:18px;opacity:0;transition:opacity .4s ease}
.truckcell:hover .tc-over,.truckcell:focus-within .tc-over{opacity:1}
.truckcell .tc-badge{position:absolute;top:10px;left:10px;background:#2ec4c6;color:#08343a;font-size:10px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:99px}
.truckcell .tc-over p{color:#fff;font-family:var(--serif);font-size:14.5px;line-height:1.35;margin:0}
.truckcell .tc-over p b{color:#5fe0e2;font-weight:600}

/* ===== cocopod section — matched to Cocopod brand colour ===== */
.cocopod .eyebrow{color:#2ec4c6}
.cocopod .coco-facts span{border-color:rgba(46,196,198,.45);color:#bfeaeb}
.coco-close em{color:#2ec4c6}
.coco-wordmark{font-family:var(--sans);font-weight:700;letter-spacing:.03em;font-size:22px;color:#2ec4c6;margin-bottom:12px;display:inline-block}
/* ===== reach page (animated coverage map) ===== */
.reachhero{padding:clamp(60px,9vw,120px) 0 clamp(18px,3vw,36px)}
.reachhero h1{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;line-height:1.05;font-size:var(--step-4);max-width:17ch;margin:18px 0 20px}
.mapsec{padding-top:clamp(16px,2vw,32px)}
.mapframe{position:relative;background:#1f2024;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
#reachmap{display:block;width:100%;height:auto;background:#1f2024}
.rsea{fill:#1f2024}
.rland{fill:#2c2f36;stroke:#3b3f49;stroke-width:1.5}
.rroute{stroke:#2ec4c6;stroke-width:1.4;stroke-dasharray:2 8;opacity:.35;fill:none;stroke-linecap:round}
.rpin{cursor:pointer}
.rpin .pr{fill:rgba(46,196,198,.16);transform-box:fill-box;transform-origin:center}
.rpin .pd{fill:#2ec4c6;stroke:#fff;stroke-width:2}
.rpin .pl{fill:#b7bbc4;font-family:Inter,sans-serif;font-size:13px;text-anchor:middle;font-weight:600}
.rpin.active .pd{fill:#5fe0e2}
.rpin.active .pl{fill:#fff}
.rpin.active .pr{animation:rpulse 1.5s ease-out infinite}
@keyframes rpulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion: reduce){.rpin.active .pr{animation:none}}
.mapcard{position:absolute;left:20px;bottom:20px;width:300px;max-width:calc(100% - 40px);background:rgba(16,16,18,.82);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:18px 20px;color:#fff;transition:opacity .35s}
.mapcard .mc-region{font-family:var(--sans);font-weight:600;font-size:18px;margin-bottom:6px}
.mapcard .mc-demand{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#7fe0e2;background:rgba(46,196,198,.16);padding:3px 10px;border-radius:99px;margin-bottom:12px}
.mapcard .mc-row{font-size:13px;color:#c3c3be;margin-bottom:6px}
.mapcard .mc-row b{color:#fff;font-weight:600}
.mapcard .mc-signal{font-family:var(--serif);font-size:14.5px;color:#eaeaea;margin-top:10px;line-height:1.35}
.maptour{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.maptour button{font-family:var(--sans);font-size:12.5px;font-weight:500;color:#c3c3be;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:6px 14px;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.maptour button:hover,.maptour button[aria-pressed="true"]{background:#2ec4c6;border-color:#2ec4c6;color:#08343a}
.maphint{position:absolute;left:20px;top:18px;font-size:11px;letter-spacing:.06em;color:#7f8590;text-transform:uppercase}
.mapnote{font-size:12.5px;color:var(--muted);margin-top:14px;text-align:center}
@media(max-width:760px){
  .mapframe{border-radius:18px}
  .maptour{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px;padding:14px 14px 4px}
  .mapcard{position:static;width:auto;max-width:none;border:none;border-top:1px solid rgba(255,255,255,.12);border-radius:0;backdrop-filter:none;background:#161618}
  .maphint{display:none}
}
/* ===== cocopod showcase video ===== */
.coco-video{width:100%;height:auto;display:block;border-radius:14px;background:#232320;max-height:560px}
/* ===== reach map v2 (SEA, density, movement, intelligence) ===== */
.rglow{opacity:.13}
.rcountry{fill:#4a4e57;font-family:Inter,sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.rdot{fill:#5fe0e2}
.mapcard .mc-pop{font-size:12px;color:#9aa0a8;margin-top:8px}
.mapcard .mc-pop b{color:#c3c3be;font-weight:600}
.mapcard .mc-next{margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:#e8e8e8;line-height:1.4}
.mapcard .mc-next .lbl{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#5fe0e2;font-weight:600;margin-bottom:3px}
.maptour{max-height:none}
@media(min-width:761px){.mapframe{min-height:560px}}
/* ===== reach card v3 — compact, demand detail, mid-city labels ===== */
.mapcard{width:248px;padding:14px 16px;left:18px;bottom:18px}
.mapcard .mc-region{font-size:16px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mapcard .mc-region .mc-country{font-size:10.5px;color:#9aa0a8;font-weight:500;white-space:nowrap}
.mapcard .mc-demand{margin-bottom:7px;font-size:10px;padding:2px 9px}
.mapcard .mc-demandnote{font-size:11.5px;color:#c3c3be;line-height:1.4;margin-bottom:8px}
.mapcard .mc-row{font-size:11.5px;margin-bottom:0}
.mapcard .mc-next{margin-top:9px;padding-top:9px;font-size:11.5px;line-height:1.45}
.mapcard .mc-next .lbl{font-size:9.5px;margin-bottom:3px}
.mapcard .mc-next b{color:#5fe0e2;font-weight:600}
.rpin.mid .pl{opacity:0;transition:opacity .25s}
.rpin.mid.active .pl{opacity:1}
.mapnote{max-width:60ch;margin:16px auto 0;text-align:center}
@media(max-width:760px){.mapcard{width:auto;left:0;bottom:0}}