@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');
  /* ============================================================
     MANGO MARINE SERVICES LLP — Corporate Site
     Design tokens
     ============================================================ */
  :root{
    /* Brand blues (from logo, fixed) */
    --navy:        #0B4171;
    --cerulean:    #2680C2;
    --white:       #FFFFFF;
    --platinum:    #E2E7EC;

    /* Derived tints/shades — kept strictly within the brand hue family */
    --navy-deep:   #061A2C;   /* darkest — hero overlays, footer */
    --navy-mid:    #0E355A;   /* card gradients */
    --cerulean-lt: #6FB2E6;   /* light tint — hover glows on dark */
    --cerulean-dk: #185E92;   /* pressed / dark-mode accent */
    --paper:       #F5F8FA;   /* section ground, warmer than pure white */
    --paper-dim:   #EBF0F4;
    --ink:         #0B1B2B;   /* body text — navy-black, not neutral grey */
    --ink-soft:    #45596B;   /* secondary text */
    --line:        #D8E1E9;   /* hairlines */

    --bg:          var(--white);
    --bg-alt:      var(--paper);
    --bg-deep:     var(--navy-deep);
    --text:        var(--ink);
    --text-soft:   var(--ink-soft);
    --text-on-dark: #EAF2F8;
    --text-on-dark-soft: #B7CBDD;
    --accent:      var(--cerulean);
    --accent-strong: var(--navy);
    --border:      var(--line);
    --card-bg:     var(--white);
    --shadow: 0 1px 2px rgba(11,27,43,.04), 0 12px 32px -12px rgba(11,65,113,.18);

    --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --sans:  "Archivo", "Segoe UI", Helvetica, Arial, sans-serif;
    --mono:  "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

    --maxw: 1240px;
    color-scheme: light;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:          #0A1826;
      --bg-alt:      #0E2136;
      --bg-deep:     #05121F;
      --text:        #E7EEF4;
      --text-soft:   #9FB3C4;
      --text-on-dark: #EAF2F8;
      --text-on-dark-soft: #A9C0D3;
      --accent:      #4FA0DA;
      --accent-strong: #6FB2E6;
      --border:      #1D3548;
      --card-bg:     #0F2438;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 20px 40px -18px rgba(0,0,0,.55);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:          #0A1826;
    --bg-alt:      #0E2136;
    --bg-deep:     #05121F;
    --text:        #E7EEF4;
    --text-soft:   #9FB3C4;
    --text-on-dark: #EAF2F8;
    --text-on-dark-soft: #A9C0D3;
    --accent:      #4FA0DA;
    --accent-strong: #6FB2E6;
    --border:      #1D3548;
    --card-bg:     #0F2438;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 20px 40px -18px rgba(0,0,0,.55);
    color-scheme: dark;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  #about, #services, #leadership, #journey, #why, #contact{ scroll-margin-top:84px; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } * { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--sans); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  section{ position:relative; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,48px); }
  .overflow-x{ overflow-x:auto; }

  h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; margin:0; text-wrap:balance; color:var(--text); }
  :is(h1,h2,h3,h4).on-dark{ color:var(--text-on-dark); }
  p{ margin:0; }
  .eyebrow{
    font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--accent-strong);
    display:inline-flex; align-items:center; gap:10px;
  }
  .eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent-strong); display:inline-block; }
  .on-dark .eyebrow{ color:var(--cerulean-lt); }
  .on-dark .eyebrow::before{ background:var(--cerulean-lt); }

  .lede{ font-size:1.08rem; color:var(--text-soft); max-width:60ch; line-height:1.7; }
  .on-dark .lede{ color:var(--text-on-dark-soft); }

  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:600;
    font-size:.92rem; letter-spacing:.01em; padding:14px 26px; border-radius:2px;
    border:1px solid transparent; cursor:pointer; transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    white-space:nowrap;
  }
  .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .btn-primary{ background:var(--accent); color:#fff; }
  .btn-primary:hover{ background:var(--cerulean-dk); transform:translateY(-1px); }
  .btn-ghost-dark{ border-color:rgba(255,255,255,.55); color:#fff; background:transparent; }
  .btn-ghost-dark:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
  .btn-outline{ border-color:var(--accent-strong); color:var(--accent-strong); background:transparent; }
  .btn-outline:hover{ background:var(--accent-strong); color:#fff; }
  .btn-sm{ padding:10px 18px; font-size:.82rem; }
  .btn svg{ width:14px; height:14px; }

  /* ---------------- Header ---------------- */
  #site-header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:18px 0; transition:background .3s ease, padding .3s ease, box-shadow .3s ease, border-color .3s ease;
    border-bottom:1px solid transparent;
  }
  #site-header.scrolled{
    background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px);
    padding:12px 0; border-color:var(--border); box-shadow:0 4px 24px -12px rgba(11,27,43,.15);
  }
  .header-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand img{ height:38px; width:auto; }
  .brand-name{ font-family:var(--serif); font-weight:600; font-size:1.05rem; letter-spacing:.01em; color:var(--text); }
  #site-header:not(.scrolled) .brand-name{ color:#fff; }
  .brand-name small{ display:block; font-family:var(--sans); font-weight:600; font-size:.58rem; letter-spacing:.14em; color:var(--accent); text-transform:uppercase; margin-top:2px; }

  nav.primary-nav{ display:flex; align-items:center; gap:2px; }
  nav.primary-nav a{
    padding:10px 16px; font-size:.86rem; font-weight:600; color:var(--text-soft); border-radius:2px;
    transition:color .2s ease;
  }
  #site-header:not(.scrolled) nav.primary-nav a{ color:rgba(255,255,255,.82); }
  nav.primary-nav a:hover{ color:var(--accent); }
  #site-header:not(.scrolled) nav.primary-nav a:hover{ color:#fff; }
  .header-actions{ display:flex; align-items:center; gap:14px; }
  #site-header:not(.scrolled) .btn-outline{ border-color:rgba(255,255,255,.6); color:#fff; }
  #site-header:not(.scrolled) .btn-outline:hover{ background:#fff; color:var(--navy); }

  .menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
  .menu-toggle span, .menu-toggle::before, .menu-toggle::after{ display:none; }
  .menu-toggle svg{ width:24px; height:24px; color:var(--text); }
  #site-header:not(.scrolled) .menu-toggle svg{ color:#fff; }

  @media (max-width:920px){
    nav.primary-nav{ display:none; }
    .header-actions .btn-outline{ display:none; }
    .menu-toggle{ display:block; }
  }

  #mobile-nav{
    position:fixed; inset:0; z-index:200; background:var(--navy-deep); color:#fff;
    display:flex; flex-direction:column; justify-content:center; gap:6px; padding:32px;
    transform:translateY(-100%); transition:transform .35s ease;
  }
  #mobile-nav.open{ transform:translateY(0); }
  #mobile-nav a{ font-family:var(--serif); font-size:1.7rem; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); color:#fff; }
  #mobile-nav .btn{ margin-top:20px; width:fit-content; }
  #mobile-close{ position:absolute; top:24px; right:24px; background:none; border:none; color:#fff; cursor:pointer; }
  #mobile-close svg{ width:28px; height:28px; }

  /* ---------------- Hero ---------------- */
  #home{
    min-height:100svh; display:flex; align-items:flex-end; position:relative; color:#fff; overflow:hidden;
    background:var(--navy-deep);
  }
  #home .hero-media{ position:absolute; inset:0; z-index:0; }
  #home .hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
  #home .hero-media::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(6,26,44,.55) 0%, rgba(6,26,44,.35) 35%, rgba(6,26,44,.88) 100%),
      linear-gradient(100deg, rgba(6,26,44,.92) 0%, rgba(6,26,44,.35) 55%, rgba(6,26,44,.15) 100%);
  }
  .hero-inner{ position:relative; z-index:2; padding:180px 0 96px; width:100%; }
  .hero-kicker{ font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cerulean-lt); font-weight:700; display:flex; align-items:center; gap:12px; margin-bottom:22px; }
  .hero-kicker .rule{ width:40px; height:1px; background:var(--cerulean-lt); }
  h1.hero-h{ font-size:clamp(2.4rem, 5.6vw, 5rem); line-height:1.03; letter-spacing:-.01em; max-width:16ch; color:#fff; }
  .hero-h em{ font-style:italic; color:var(--cerulean-lt); }
  .hero-sub{ margin-top:26px; max-width:52ch; font-size:1.15rem; color:rgba(234,242,248,.86); line-height:1.65; }
  .hero-cta{ margin-top:42px; display:flex; gap:16px; flex-wrap:wrap; }
  .hero-meta{ margin-top:72px; display:flex; gap:clamp(24px,5vw,64px); flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.18); padding-top:28px; }
  .hero-meta div b{ display:block; font-family:var(--serif); font-size:1.9rem; color:#fff; }
  .hero-meta div span{ font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-on-dark-soft); }
  .scroll-cue{ position:absolute; right:clamp(20px,5vw,48px); bottom:36px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; color:rgba(255,255,255,.7); }
  .scroll-cue .line{ width:1px; height:52px; background:linear-gradient(#fff,transparent); animation:scrollcue 2.2s ease-in-out infinite; }
  @keyframes scrollcue{ 0%{ transform:scaleY(.3); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{ transform-origin:bottom;} 100%{ transform:scaleY(.3); transform-origin:bottom;} }
  @media (max-width:720px){ .scroll-cue{ display:none; } }

  /* ---------------- Section shells ---------------- */
  .section{ padding:clamp(72px,10vw,132px) 0; }
  .section-alt{ background:var(--bg-alt); }
  .section-dark{ background:var(--bg-deep); color:var(--text-on-dark); }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:56px; flex-wrap:wrap; }
  .section-head h2{ font-size:clamp(1.9rem,3.6vw,3rem); margin-top:14px; max-width:18ch; }
  .section-tag{ display:block; }
  .divider-wave{ display:block; width:100%; height:auto; }

  /* ---------------- About ---------------- */
  .about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,6vw,88px); align-items:center; }
  @media (max-width:880px){ .about-grid{ grid-template-columns:1fr; } }

  /* ---- editorial image composition ---- */
  .about-media{ position:relative; max-width:440px; margin:0 auto; }
  @media (max-width:880px){ .about-media{ margin:0 auto 84px; } }
  .about-media .frame-outline{ position:absolute; top:-22px; right:-22px; width:92%; height:94%; border:1.5px solid var(--accent); opacity:.5; z-index:0; }
  .about-media .frame-main{ position:relative; aspect-ratio:4/5; border-radius:2px; overflow:hidden; box-shadow:var(--shadow); z-index:1; }
  .about-media .frame-main img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block; }
  .about-media .frame-sub{ position:absolute; z-index:2; width:44%; aspect-ratio:1/1; left:-10%; bottom:-12%; border:7px solid var(--bg); border-radius:2px; overflow:hidden; box-shadow:0 20px 44px -14px rgba(6,26,44,.4); }
  .about-media .frame-sub img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
  .about-media .about-badge{ position:absolute; z-index:3; top:-20px; left:-18px; background:var(--navy); color:#fff; padding:13px 18px; border-radius:2px; box-shadow:var(--shadow); line-height:1; }
  .about-media .about-badge b{ display:block; font-family:var(--serif); font-size:1.5rem; }
  .about-media .about-badge span{ display:block; margin-top:5px; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72); }
  @media (max-width:420px){
    .about-media{ max-width:320px; }
    .about-media .about-badge{ top:-16px; left:-12px; padding:10px 14px; }
    .about-media .about-badge b{ font-size:1.2rem; }
  }

  .about-copy p + p{ margin-top:18px; }

  /* ---- M.A.N.G.O. brand-concept treatment ---- */
  .mango-block{ position:relative; margin-top:76px; padding-top:52px; border-top:1px solid var(--border); overflow:hidden; }
  .mango-ghost{ position:absolute; top:-10px; left:-6px; font-family:var(--serif); font-weight:600; font-size:clamp(4.5rem,13vw,9rem); line-height:1; letter-spacing:.01em; color:var(--navy); opacity:.045; white-space:nowrap; z-index:0; pointer-events:none; user-select:none; }
  .mango-head{ position:relative; z-index:1; text-align:center; }
  .mango-word{ font-family:var(--serif); font-size:clamp(2.3rem,5.5vw,3.6rem); letter-spacing:.02em; color:var(--accent-strong); }
  .mango-sub{ margin-top:10px; color:var(--text-soft); font-size:.95rem; }

  .mango-route{ position:relative; z-index:1; margin:48px auto 0; max-width:760px; }
  .mango-route-letters, .mango-route-labels, .mango-route-line-row{ display:grid; grid-template-columns:repeat(5,1fr); }
  .mango-route-letters span{ display:block; text-align:center; font-family:var(--serif); font-size:2rem; color:var(--accent-strong); }
  .mango-route-line-row{ position:relative; height:24px; margin:16px 0; display:grid; align-items:center; }
  .mango-route-line-row::before{ content:""; position:absolute; top:50%; left:10%; right:10%; height:1.5px; background:var(--accent); opacity:.4; transform:translateY(-50%) scaleX(0); transform-origin:left; transition:transform 1.3s cubic-bezier(.4,0,.2,1); }
  .mango-block.in .mango-route-line-row::before{ transform:translateY(-50%) scaleX(1); }
  .mango-route-line-row .mango-dot{ justify-self:center; }
  .mango-dot{ position:relative; z-index:1; width:11px; height:11px; border-radius:50%; border:2px solid var(--accent); background:var(--bg); display:block; transition:background .25s ease, border-color .25s ease, transform .25s ease; }
  .mango-dot:hover{ background:var(--accent-strong); border-color:var(--accent-strong); transform:scale(1.3); }
  .mango-route-labels span{ display:block; text-align:center; font-size:.74rem; letter-spacing:.03em; color:var(--text-soft); padding:0 6px; line-height:1.35; }

  .mango-route-mobile{ display:none; }
  @media (max-width:640px){
    .mango-route-desktop{ display:none; }
    .mango-route-mobile{ display:flex; flex-direction:column; gap:24px; position:relative; z-index:1; margin-top:40px; }
    .mango-route-mobile::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1.5px; background:var(--accent); opacity:.4; transform:scaleY(0); transform-origin:top; transition:transform 1.3s cubic-bezier(.4,0,.2,1); }
    .mango-block.in .mango-route-mobile::before{ transform:scaleY(1); }
    .mrm-item{ display:flex; align-items:center; gap:16px; position:relative; z-index:1; }
    .mrm-item .mango-letter{ font-family:var(--serif); font-size:1.35rem; color:var(--accent-strong); width:24px; flex:none; text-align:center; }
    .mrm-item .mango-label{ font-size:.85rem; color:var(--text-soft); }
  }

  /* ---------------- Services ---------------- */
  .svc-shell{ display:grid; grid-template-columns:320px 1fr; gap:0; border:1px solid var(--border); border-radius:2px; overflow:hidden; background:var(--card-bg); }
  @media (max-width:900px){ .svc-shell{ grid-template-columns:1fr; } }
  .svc-list{ background:var(--bg-deep); }
  .svc-tab{
    width:100%; text-align:left; padding:22px 26px; background:none; border:none; cursor:pointer;
    display:flex; align-items:center; gap:16px; border-bottom:1px solid rgba(255,255,255,.08); color:var(--text-on-dark-soft);
    font-family:var(--sans); transition:background .2s ease;
  }
  .svc-tab:last-child{ border-bottom:none; }
  .svc-tab .num{ font-family:var(--mono); font-size:.78rem; color:var(--cerulean-lt); opacity:.8; }
  .svc-tab .lbl{ font-family:var(--serif); font-size:1.06rem; color:var(--text-on-dark); }
  .svc-tab .sub{ display:block; font-size:.76rem; color:var(--text-on-dark-soft); margin-top:3px; }
  .svc-tab.active{ background:linear-gradient(90deg, rgba(38,128,194,.28), rgba(38,128,194,.05)); box-shadow:inset 3px 0 0 var(--cerulean-lt); }
  .svc-tab:hover .lbl{ color:#fff; }
  .svc-panels{ position:relative; min-height:560px; }
  .svc-panel{ display:none; padding:clamp(28px,4vw,56px); }
  .svc-panel.active{ display:block; animation:fadein .35s ease; }
  @keyframes fadein{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
  .svc-head-row{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start; margin-bottom:8px;}
  .svc-panel .svc-eyebrow{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; }
  .svc-panel h3{ font-size:clamp(1.5rem,2.6vw,2.15rem); margin-top:10px; max-width:20ch; }
  .svc-panel .svc-desc{ margin-top:16px; color:var(--text-soft); max-width:62ch; }
  .svc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:32px; }
  @media (max-width:680px){ .svc-cols{ grid-template-columns:1fr; } }
  .svc-cols h4{ font-family:var(--sans); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-strong); margin-bottom:14px; }
  .svc-cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .svc-cols li{ padding-left:20px; position:relative; font-size:.94rem; color:var(--text); }
  .svc-cols li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:1px; background:var(--accent-strong); }
  .svc-process{ margin-top:36px; padding-top:28px; border-top:1px dashed var(--border); display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
  .svc-process .step{ font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:9px 14px; border:1px solid var(--border); border-radius:999px; color:var(--text-soft); }
  .svc-process .arrow{ color:var(--accent); font-family:var(--mono); }
  .svc-media{ margin-top:32px; border-radius:2px; overflow:hidden; }
  .svc-media img{ width:100%; height:230px; object-fit:cover; }
  .svc-media-dual{ display:grid; grid-template-columns:1fr 1fr; gap:14px; border-radius:0; overflow:visible; }
  .svc-media-dual img{ border-radius:2px; box-shadow:var(--shadow); }
  @media (max-width:640px){ .svc-media-dual{ grid-template-columns:1fr; } }

  /* ---------------- Leadership ---------------- */
  .lead-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  @media (max-width:980px){ .lead-cards{ grid-template-columns:1fr; } }
  .lead-card{ background:var(--card-bg); border:1px solid var(--border); border-radius:2px; padding:36px 32px; display:flex; flex-direction:column; gap:18px; transition:transform .25s ease, box-shadow .25s ease; }
  .lead-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
  .lead-avatar{ width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--navy),var(--cerulean)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.3rem; letter-spacing:.02em; flex-shrink:0; overflow:hidden; box-shadow:0 0 0 3px var(--bg), 0 0 0 4px var(--border); }
  .lead-avatar img{ width:100%; height:100%; object-fit:cover; }
  .lead-role{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-strong); font-weight:700; }
  .lead-name{ font-family:var(--serif); font-size:1.35rem; margin-top:6px; }
  .lead-tag{ font-style:italic; color:var(--text-soft); font-size:.94rem; margin-top:2px; }
  .lead-bio{ font-size:.92rem; color:var(--text-soft); line-height:1.68; }
  .lead-bio strong{ color:var(--text); font-weight:600; }
  blockquote.lead-quote{ margin:0; padding-top:16px; border-top:1px solid var(--border); font-family:var(--serif); font-style:italic; font-size:1.02rem; color:var(--text); }
  .lead-summary{ margin-top:64px; text-align:center; }
  .lead-summary .vision-band{ display:flex; justify-content:center; gap:clamp(18px,4vw,56px); flex-wrap:wrap; margin-top:28px; padding:30px 20px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .lead-summary .vision-band div{ font-size:.92rem; color:var(--text-soft); }
  .lead-summary .vision-band b{ display:block; font-family:var(--serif); color:var(--text); font-size:1.05rem; margin-bottom:4px; }
  .lead-summary .closer{ margin-top:34px; font-family:var(--serif); font-size:1.3rem; max-width:46ch; margin-inline:auto; }
  .brand-line{ margin-top:20px; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-strong); font-weight:700; }

  /* ---------------- Journey ---------------- */
  .timeline{ display:flex; flex-direction:column; gap:0; }
  .tl-item{ display:grid; grid-template-columns:120px 1fr; gap:clamp(16px,4vw,48px); padding:44px 0; border-top:1px solid var(--border); position:relative; }
  .tl-item:last-of-type{ border-bottom:1px solid var(--border); }
  @media (max-width:760px){ .tl-item{ grid-template-columns:1fr; gap:14px; } }
  .tl-year{ font-family:var(--serif); font-size:2.6rem; color:var(--accent-strong); line-height:1; }
  .tl-body{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; }
  @media (max-width:900px){ .tl-body{ grid-template-columns:1fr; } }
  .tl-tag{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:700; }
  .tl-title{ font-family:var(--serif); font-size:1.55rem; margin-top:8px; }
  .tl-desc{ margin-top:12px; color:var(--text-soft); max-width:52ch; }
  .tl-media{ border-radius:2px; overflow:hidden; box-shadow:var(--shadow); }
  .tl-media img{ width:100%; height:230px; object-fit:cover; }
  .journey-close{ margin-top:56px; text-align:center; padding-top:48px; }
  .journey-close h3{ font-family:var(--serif); font-size:clamp(1.4rem,3vw,2rem); max-width:24ch; margin-inline:auto; }
  .year-progress{ margin-top:26px; display:flex; justify-content:center; align-items:center; gap:14px; font-family:var(--mono); color:var(--text-soft); font-size:1rem; }
  .year-progress b{ color:var(--accent-strong); }
  .year-progress .arrow{ color:var(--accent); }

  /* ---------------- Why ---------------- */
  .pillars{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
  @media (max-width:980px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .pillars{ grid-template-columns:1fr; } }
  .pillar{ background:var(--card-bg); padding:36px 26px; display:flex; flex-direction:column; gap:14px; min-height:230px; }
  .pillar .mk{ font-family:var(--mono); font-size:.76rem; color:var(--accent); }
  .pillar h4{ font-family:var(--serif); font-size:1.15rem; margin-top:auto; }
  .pillar p{ font-size:.88rem; color:var(--text-soft); }

  /* ---------------- CTA band ---------------- */
  .cta-band{ background:linear-gradient(120deg,var(--navy-deep),var(--navy-mid)); color:#fff; padding:clamp(56px,8vw,88px) 0; }
  .cta-row{ display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
  .cta-row h3{ color:#fff; font-size:clamp(1.5rem,3vw,2.3rem); max-width:20ch; }
  .cta-row p{ color:var(--text-on-dark-soft); margin-top:10px; }

  /* ---------------- Contact ---------------- */
  .contact-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,6vw,72px); }
  @media (max-width:940px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-info dl{ margin:28px 0 0; display:flex; flex-direction:column; gap:22px; }
  .contact-info dt{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-strong); font-weight:700; }
  .contact-info dd{ margin:6px 0 0; font-size:1.02rem; }
  .contact-info dd a{ color:var(--accent-strong); border-bottom:1px solid transparent; transition:border-color .15s ease, color .15s ease; }
  .contact-info dd a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
  .contact-info .socials{ margin-top:34px; display:flex; gap:14px; }
  .contact-info .socials a{ border:1px solid var(--border); border-radius:999px; padding:9px 18px; font-size:.82rem; font-weight:600; }
  .contact-info .socials a:hover{ border-color:var(--accent-strong); color:var(--accent-strong); }
  form.enquiry{ background:var(--card-bg); border:1px solid var(--border); border-radius:2px; padding:clamp(24px,4vw,40px); box-shadow:var(--shadow); }
  .f-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:560px){ .f-row{ grid-template-columns:1fr; } }
  .f-group{ margin-bottom:18px; display:flex; flex-direction:column; gap:8px; }
  .f-group label{ font-size:.76rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-soft); }
  .f-group input, .f-group select, .f-group textarea{
    font-family:var(--sans); font-size:.96rem; padding:12px 14px; border:1px solid var(--border); border-radius:2px;
    background:var(--bg); color:var(--text); width:100%;
  }
  .f-group input:focus, .f-group select:focus, .f-group textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
  .f-group textarea{ resize:vertical; min-height:110px; }
  .f-note{ font-size:.8rem; color:var(--text-soft); margin-top:14px; }
  #form-status{ margin-top:14px; font-size:.88rem; font-weight:600; }
  #form-status.ok{ color:#1a7a4c; }
  #form-status.error{ color:#b3261e; }

  /* ---------------- Footer ---------------- */
  footer{ background:var(--navy-deep); color:var(--text-on-dark-soft); padding:64px 0 28px; }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12); }
  @media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
  .footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .footer-brand img{ height:34px; }
  .footer-brand span{ font-family:var(--serif); color:#fff; font-size:1.05rem; }
  footer p{ font-size:.88rem; line-height:1.7; max-width:34ch; }
  footer h5{ color:#fff; font-family:var(--sans); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }
  footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  footer ul a:hover{ color:#fff; }
  .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; font-size:.78rem; }

  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:none; }

  ::selection{ background:var(--cerulean); color:#fff; }