/* Island Networking v3 — "Tidewater" (2026-10-08)
   Deep-ocean hero and journey, sand-light sections. Brand palette only. */
:root{
  --navy:#403F4C; --ocean-deep:#04314A; --ocean:#045073; --ocean-2:#055173;
  --teal:#04ACBC; --teal-ink:#026F8E; --orange:#FF9734; --orange-deep:#FF5C00;
  --gold:#F6D177; --sun:#FFD28A; --sand:#FFE3B8; --cream:#FFF8EC; --white:#fff;
  --ink:#06253A; --ink-2:#2B4A60; --muted:#5E7A90; --line:rgba(4,49,74,.14);
  --bg:var(--cream); --max:1180px; --gutter:clamp(16px,4vw,40px);
  --disp:'Syne',system-ui,sans-serif; --body:'Manrope',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --r:14px; --shadow:0 20px 60px rgba(4,49,74,.18);
  color-scheme:light;
}
*{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:clip}
img,video{max-width:100%;display:block} [hidden]{display:none!important}
h1,h2,h3{font-family:var(--disp);line-height:1.08;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-weight:800;font-size:clamp(2.1rem,4.6vw,3.7rem)} h2{font-weight:800;font-size:clamp(1.8rem,3.6vw,2.9rem)} h3{font-weight:700;font-size:1.2rem}
p{margin:0 0 1em} a{color:var(--ocean)} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-ink);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.eyebrow::before{content:'';width:18px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--teal),var(--orange))}
.dark .eyebrow{color:var(--teal)}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);max-width:60ch}
.dark{background:var(--ocean-deep);color:#E8F4FB} .dark h1,.dark h2,.dark h3{color:#fff} .dark .lead{color:#BFD9E8} .dark a{color:#9FE4F0}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:.95rem;padding:14px 22px;border-radius:999px;text-decoration:none;border:2px solid transparent;transition:transform .15s,box-shadow .15s,background .15s;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#fff;box-shadow:0 10px 30px rgba(255,92,0,.3)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}
.btn-light{background:#fff;color:var(--ocean-deep)} .dark .btn-light{color:var(--ocean-deep)} .dark .btn-primary{color:#fff}
.btn svg{width:18px;height:18px}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(4,49,74,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-family:var(--disp);font-weight:800;letter-spacing:.01em;white-space:nowrap}
.brand img{width:40px;height:40px;border-radius:10px}
.nav-links{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav-links a{color:#DCEEF7;text-decoration:none;font-weight:600;font-size:.9rem;white-space:nowrap} .nav-links a:hover{color:#fff}
.nav-cta{font-size:.85rem;padding:10px 16px;white-space:nowrap}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;padding:8px 10px;font-family:var(--mono);font-size:.8rem}
@media (max-width:860px){
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--ocean-deep);padding:8px 0 12px;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-links.open{display:flex} .nav-links a{display:block;padding:12px var(--gutter)} .nav-toggle{display:inline-block} .nav-cta{display:none}
}

/* hero */
.hero{position:relative;overflow:clip;padding-block:clamp(56px,9vw,110px) clamp(40px,6vw,80px)}
.hero::before{content:'';position:absolute;inset:0;background:
  radial-gradient(60% 80% at 80% 20%,rgba(255,151,52,.22),transparent 60%),
  radial-gradient(50% 60% at 15% 85%,rgba(4,172,188,.22),transparent 60%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,64px);align-items:center}
.hero h1 .accent{color:var(--sun)}
.hero .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 30px}
.hero-visual{position:relative;max-width:420px;margin-inline:auto;width:100%}
.hero-visual .glow{position:absolute;inset:-6% -10%;border-radius:50%;background:radial-gradient(circle,rgba(255,151,52,.4),rgba(4,172,188,.22) 55%,transparent 72%);filter:blur(14px)}
.hero-card{position:relative;display:block;aspect-ratio:4/5;border-radius:26px;overflow:hidden;background:#021B2B;box-shadow:0 40px 90px rgba(0,0,0,.5);outline-offset:4px}
.hero-card img,.hero-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-tag{position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#DCEEF7;background:rgba(2,27,43,.68);padding:6px 10px;border-radius:6px;pointer-events:none}
.cred{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);margin-top:clamp(28px,5vw,56px)}
.cred div{padding:18px 16px;border-right:1px solid rgba(255,255,255,.12)} .cred div:last-child{border-right:0}
.cred b{display:block;font-family:var(--disp);font-size:1.05rem;color:#fff} .cred span{font-size:.85rem;color:#9FBFD2}
.cred-run{grid-template-columns:1fr 1fr;margin:4px 0 22px;max-width:520px} .cred-run div{padding:14px 16px 14px 0} .cred-run div:nth-child(2){border-right:0;padding-left:16px}
.step .live a{color:#DCEEF7;text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-visual{max-width:300px}.cred{grid-template-columns:1fr 1fr}.cred div:nth-child(2){border-right:0}}
@media (max-width:480px){.cred{grid-template-columns:1fr}.cred div{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}.cred-run div:nth-child(2){padding-left:0}}

/* journey (scroll-scrub) */
.journey{position:relative;background:linear-gradient(180deg,var(--ocean-deep) 0%,#021B2B 100%)}
.journey-track{position:relative;height:420vh}
/* The whole stage (heading + film + steps) sticks as one block and fits the viewport, like the How we run section. */
.journey-stage{--navh:72px;--mh:min(calc(100svh - var(--navh) - 250px),520px,calc((100vw - 2*var(--gutter) - 60px)/2));position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.6vh,30px);padding-top:calc(var(--navh) + 10px);padding-bottom:18px;overflow:hidden}
.j-head{flex:0 0 auto}
.j-head h2{font-size:clamp(1.45rem,2.4vw,2.15rem);line-height:1.12;max-width:32ch;margin:0 0 8px}
.j-head .lead{font-size:.95rem;max-width:64ch;margin:0}
.j-grid{flex:0 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,60px)}
.j-pin{min-width:0}
.journey-media{position:relative;aspect-ratio:1;height:var(--mh);width:auto;max-width:100%;border-radius:24px;overflow:hidden;background:#021B2B;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.journey-media video,.journey-media img{width:100%;height:100%;object-fit:cover}
.journey-media .scrubbar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.12)} .journey-media .scrubbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--orange))}
.journey-media .strata{position:absolute;inset:6% 8%;display:grid;grid-template-rows:repeat(5,1fr);gap:6px;perspective:1200px}
.journey-media .strata i{display:flex;align-items:center;padding-left:18px;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:rgba(255,255,255,.85);font-style:normal;transform-origin:top;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:.9}
.journey-media .strata i::after{content:attr(data-l)}
.journey-media .strata i:nth-child(1){background:linear-gradient(180deg,#9FE4F0,#04ACBC)} .journey-media .strata i:nth-child(2){background:linear-gradient(180deg,#04ACBC,#055173)}
.journey-media .strata i:nth-child(3){background:linear-gradient(180deg,#FF9734,#FF5C00)} .journey-media .strata i:nth-child(4){background:linear-gradient(180deg,#F6D177,#FFD28A)} .journey-media .strata i:nth-child(5){background:linear-gradient(180deg,#403F4C,#06253A)}
.journey-media .badge{position:absolute;left:18px;top:16px;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:#CFEFF5;background:rgba(2,27,43,.6);padding:6px 10px;border-radius:6px}
.steps{position:relative;min-height:var(--mh)}
.step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(16px);transition:opacity .25s,transform .35s;pointer-events:none}
.step.on{opacity:1;transform:none;pointer-events:auto}
.step .num{font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;color:var(--teal);margin-bottom:10px}
.step h3{font-size:clamp(1.5rem,2.6vw,2.2rem);color:#fff}
.step p{color:#BFD9E8;max-width:46ch}
.step .live{margin-top:14px;font-size:.88rem;color:#9FD3E6;border-left:2px solid var(--orange);padding-left:12px;max-width:52ch} .step .live b{color:#fff;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .chips span{font-size:.8rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:5px 11px;color:#DCEEF7}
.journey-dots{display:flex;gap:8px;margin-top:22px} .journey-dots i{width:28px;height:4px;border-radius:2px;background:rgba(255,255,255,.18)} .journey-dots i.on{background:var(--orange)}
/* Phones and small tablets: the film pins under the header and the five layers scroll beneath it, so the scrub stays in view. */
@media (max-width:860px){.journey-track{height:auto}.journey-stage{position:relative;height:auto;display:block;padding-block:48px 24px;overflow:visible}.j-head{margin-bottom:22px}.j-head h2{font-size:clamp(1.6rem,6vw,2.2rem);max-width:none}.j-grid{display:block}.j-pin{position:sticky;top:var(--navh);z-index:2;margin:0 calc(-1*var(--gutter)) 24px;padding:10px var(--gutter) 12px;background:rgba(3,36,56,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.journey-media{position:relative;height:auto;width:min(100%,42svh);aspect-ratio:1;margin:0 auto;box-shadow:0 20px 50px rgba(0,0,0,.55)}.steps{min-height:0;position:relative;z-index:1}.step{position:relative;opacity:1;transform:none;margin-bottom:28px}.step:last-of-type{margin-bottom:0}.journey-dots{display:none}}
@media (prefers-reduced-motion:reduce){.journey-track{height:auto}.journey-stage{position:relative;height:auto;display:block;padding-block:48px 24px}.j-grid{display:block}.j-pin{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;margin:0;padding:0}.journey-media{height:auto;width:100%;max-width:520px;margin:0 auto 24px}.steps{min-height:0}.step{position:relative;opacity:1;transform:none;margin-bottom:28px}.journey-dots{display:none}}

/* sections */
section.block{padding-block:clamp(56px,8vw,110px)}
.section-head{max-width:68ch;margin-bottom:clamp(28px,4vw,48px)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.pillar{padding:28px 26px 30px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);position:relative}
.pillar:last-child{border-right:0}
.pillar .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(4,172,188,.14),rgba(255,151,52,.14));margin-bottom:16px}
.pillar .ic svg{width:22px;height:22px;stroke:var(--teal-ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pillar p{color:var(--ink-2);margin:0}
.caps{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;font-size:.92rem;color:var(--ink-2)} .caps span::before{content:'';display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--orange);margin-right:10px;vertical-align:1px}
@media (max-width:860px){.pillars{grid-template-columns:1fr}.pillar{border-right:0}}

.run-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.ccie{font-family:var(--disp);font-weight:800;font-size:clamp(3.2rem,8vw,6rem);line-height:.9;letter-spacing:-.02em;background:linear-gradient(180deg,var(--sun),var(--orange) 55%,var(--orange-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.ccie-sub{font-family:var(--mono);letter-spacing:.3em;text-transform:uppercase;font-size:.8rem;color:var(--teal);margin:6px 0 18px}
.org{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:20px}
.org .top{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.org .top b{display:block;color:#fff} .org .top span{font-size:.85rem;color:#BFD9E8}
.org ul{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid rgba(4,172,188,.5)}
.org li{display:flex;justify-content:space-between;gap:10px;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 14px;margin:8px 0;position:relative}
.org li::before{content:'';position:absolute;left:-20px;top:50%;width:14px;height:2px;background:rgba(4,172,188,.5)}
.org li b{display:block;color:#fff;font-size:.95rem} .org li span{font-size:.8rem;color:#BFD9E8} .org li em{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--teal);font-style:normal;white-space:nowrap}
@media (max-width:860px){.run-grid{grid-template-columns:1fr}}

.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proof{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:0 10px 30px rgba(4,49,74,.06)}
.proof .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:8px}
.proof p{color:var(--ink-2);margin:0;font-size:.95rem}
.slot{border:1.5px dashed rgba(4,49,74,.3);background:repeating-linear-gradient(135deg,rgba(4,49,74,.03) 0 10px,transparent 10px 20px)}
.slot .k{color:var(--muted)} .slot p{color:var(--muted)}
@media (max-width:860px){.proof-grid{grid-template-columns:1fr}}

.islandia-band{background:linear-gradient(135deg,#fff 0%,var(--sand) 100%)}
.isl-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,64px);align-items:center}
.isl-photo{position:relative;max-width:420px}
.isl-photo::before{content:'';position:absolute;inset:-14px -14px auto auto;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--sun),var(--orange) 60%,transparent 72%);z-index:0;opacity:.9}
.isl-photo img{position:relative;z-index:1;width:100%;height:auto;border-radius:22px;aspect-ratio:1;object-fit:cover;box-shadow:var(--shadow)}
.isl-photo .cap{position:relative;z-index:1;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--muted);margin-top:10px}
@media (max-width:860px){.isl-grid{grid-template-columns:1fr}}

.jarvis-card{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,48px);align-items:center;background:#021B2B;border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.jarvis-card .txt{padding:clamp(24px,4vw,44px)} .jarvis-card img{width:100%;height:100%;min-height:340px;object-fit:cover}
.jarvis-card .price{font-family:var(--mono);color:var(--gold);letter-spacing:.1em;font-size:.85rem}
@media (max-width:860px){.jarvis-card{grid-template-columns:1fr}.jarvis-card img{max-height:260px;width:100%}}

.book-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,56px);align-items:start}
.book-frame{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;min-height:560px}
.book-frame iframe{width:100%;height:760px;border:0}
.book-pending{padding:28px;color:var(--ink-2)} .book-pending .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:10px}
.contact-form{display:grid;gap:12px;margin-top:8px}
.contact-form label{font-size:.85rem;font-weight:600;color:var(--ink-2)}
.contact-form input,.contact-form textarea{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-status{min-height:1.2em;font-size:.9rem;color:var(--ink-2)} .form-status.success{color:#0A7A4A} .form-status.error{color:#B42318}
.email-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px} .email-row code{font-family:var(--mono);background:#fff;border:1px solid var(--line);padding:9px 12px;border-radius:8px;font-size:.9rem}
.copy-btn{font:inherit;font-size:.85rem;font-weight:600;background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 12px;cursor:pointer;color:var(--ocean)}
@media (max-width:860px){.book-grid{grid-template-columns:1fr}}

footer{background:#021B2B;color:#9FBFD2;padding-block:40px;font-size:.9rem}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px} .foot h4{font-family:var(--disp);color:#fff;margin:0 0 10px;font-size:.95rem}
.foot a{color:#CFEFF5;text-decoration:none;display:block;margin:6px 0} .foot a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:26px;padding-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.8rem}
@media (max-width:860px){.foot{grid-template-columns:1fr}}

/* islandia page */
.page-hero{padding-block:clamp(48px,8vw,100px) clamp(32px,5vw,64px)}
.page-hero .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.portrait-frame{position:relative;aspect-ratio:4/5;border-radius:26px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5);background:#021B2B}
.portrait-frame img,.portrait-frame video{width:100%;height:100%;object-fit:cover}
.portrait-frame .tag{position:absolute;left:16px;bottom:16px;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;background:rgba(2,27,43,.7);color:#CFEFF5;padding:6px 10px;border-radius:6px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.facts div{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:14px} .facts b{display:block;color:#fff;font-family:var(--disp)} .facts span{font-size:.85rem;color:#BFD9E8}
.does{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.does .item{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.does .item h3{font-size:1.05rem} .does .item p{color:var(--ink-2);margin:0;font-size:.95rem}
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.video-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.video-frame{aspect-ratio:16/9;background:#021B2B} .video-frame iframe{width:100%;height:100%;border:0} .video-frame video{display:block;width:100%;height:100%;object-fit:cover;background:#021B2B}
.video-card .meta{padding:14px 16px} .video-card .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--orange-deep);text-transform:uppercase} .video-card h3{font-size:1rem;margin:6px 0 0}
.disclosure{font-size:.85rem;color:var(--muted);border-left:3px solid var(--teal);padding-left:12px}
@media (max-width:860px){.page-hero .grid,.does,.video-grid{grid-template-columns:1fr}.facts{grid-template-columns:1fr}}