:root{--navy:#001321;--cyan:#00bde9;--yellow:#ffe000}*{box-sizing:border-box}body{margin:0;background:var(--navy);color:#fff;font-family:Montserrat,Arial,sans-serif;font-size:14px;line-height:1.85}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}.shell{width:min(1486px,88%);margin-inline:auto}h1,h2{font-family:'Barlow Semi Condensed',Impact,sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;line-height:1.02;letter-spacing:-.6px;margin:0 0 25px}h1{font-size:clamp(56px,6.2vw,96px)}h2{font-size:clamp(38px,4vw,58px)}h3{font-size:23px;line-height:1.25;margin:0 0 18px}p{margin:0 0 18px}h1 span,h2 span{color:var(--cyan)}.eyebrow{color:var(--cyan);text-transform:uppercase;font-size:11px;letter-spacing:2.5px;font-weight:700;margin-bottom:20px}.section-pad{padding-block:80px}.light{background:#f2f6f7;color:#09283b}.light p{color:#456172}.light .eyebrow{color:#007f9f}.light h2 span{color:#008eb5}.about-hero{position:relative;isolation:isolate;overflow:hidden;min-height:650px;display:flex;align-items:center}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;z-index:-2}.about-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#001321f5 0%,#001321df 24%,#0013218c 47%,#00132100 74%),linear-gradient(0deg,#00132177,transparent 40%)}.hero-copy{padding-block:65px}.hero-copy>p{max-width:460px;color:#deebf0}.hero-copy .eyebrow{color:var(--cyan)}.hero-copy .hero-intro{font-size:19px;line-height:1.6;font-weight:600;margin-top:26px}.mantra{font-size:12px;font-weight:700;letter-spacing:2px;padding-block:12px;border-top:1px solid #5c8992;border-bottom:1px solid #5c8992;max-width:510px!important}.mantra span{color:var(--cyan)}.mantra b{color:var(--yellow)}.est{display:flex;align-items:center;gap:16px;text-transform:uppercase;letter-spacing:2px;font-size:10px;font-weight:600;margin-top:30px}.est-line{width:50px;height:2px;background:var(--cyan)}.section-intro{display:grid;grid-template-columns:1fr 1fr;column-gap:70px;align-items:center}.section-intro .eyebrow{grid-column:1/-1}.section-intro>p:last-child{max-width:540px;font-size:17px}.trip-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:32px}.trip-grid article{border-top:1px solid #b6ced7;padding-top:24px}.trip-date{color:#0086a8!important;font-weight:700;font-size:11px;letter-spacing:2px}.trip-grid h3{font-family:'Barlow Semi Condensed',Impact,sans-serif;font-style:italic;text-transform:uppercase;font-size:36px}.trip-grid article>p{max-width:570px}.trip-end{font-weight:700;font-size:12px;color:#09283b}blockquote{margin:50px 0 0;padding:32px 0 0;border-top:1px solid #b6ced7;text-align:center;font-size:clamp(22px,2.5vw,34px);font-weight:600;line-height:1.5}blockquote em{font-style:normal;color:#008eb5}.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.discovery{background:#062839}.discovery p{color:#c5d6e0}.discovery .eyebrow{color:var(--cyan)}.milestone{border-left:2px solid var(--yellow);padding-left:20px;margin-top:30px}.milestone strong{color:var(--yellow)}figure{margin:0}figure img{display:block;width:100%;height:auto}.barrel-photo img{aspect-ratio:1.25;object-fit:cover;object-position:58% center}.barrel-photo figcaption{font-size:11px;letter-spacing:.7px;color:#bed4df;padding-top:14px}.understanding-top{display:grid;grid-template-columns:1fr 1fr;gap:70px}.learning-loop{display:grid;grid-template-columns:repeat(5,1fr);gap:25px;list-style:none;margin:35px 0 0;padding:28px 0 0;border-top:1px solid #b6ced7}.learning-loop li>span{font-size:12px;color:#008eb5;font-weight:700}.learning-loop h3{font-family:'Barlow Semi Condensed',Impact,sans-serif;font-style:italic;text-transform:uppercase;font-size:28px;margin:12px 0 8px}.learning-loop p{font-size:12px;margin:0}.people{background:#001b2a}.people>div>h2 span{color:var(--yellow)}.founder-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:38px;align-items:center}.founder-grid figure img{aspect-ratio:1.4;object-fit:cover}.founder-grid figcaption{padding:16px 0;font-weight:700;font-size:13px}.founder-grid figcaption span{display:block;font-size:10px;color:#a6c3d2;font-weight:400;text-transform:uppercase;letter-spacing:1.6px;margin-top:5px}.founder-copy p,.dave-row p{color:#c5d6e0}.founder-copy article{border-top:1px solid #2c4858;padding-top:20px;margin-top:25px}.founder-copy .eyebrow,.dave-row .eyebrow{color:var(--cyan);margin-bottom:7px}.founder-copy h3{margin-bottom:10px}.dave-row{display:grid;grid-template-columns:1fr 330px;gap:90px;align-items:center;margin-top:45px;padding-top:45px;border-top:1px solid #2c4858}.dave-row>div{max-width:700px}.dave-row img{aspect-ratio:4/3;object-fit:cover}.dave-row figcaption{font-size:10px;color:#a6c3d2;padding-top:10px}.dave-row .dave-signoff{color:var(--yellow);font-weight:600;margin-bottom:0}.together .split{align-items:center}.text-link{display:inline-flex;gap:30px;border-bottom:2px solid #008eb5;padding-bottom:7px;font-weight:700;color:#09283b;font-size:12px;margin-top:12px}.text-link:hover{color:#008eb5}.about-closing{text-align:center;padding:75px 0;background:linear-gradient(#001321b8,#001321e8),url('../images/about-closing-turquoise-wave.jpg') center 52%/cover}.about-closing h2 span{color:var(--yellow)}.about-closing p:last-child{color:#c5d6e0;margin:0}.button{border:0;border-radius:5px;padding:14px 22px;background:var(--yellow);color:var(--navy);font-weight:700}dialog{background:#072536;color:white;border:1px solid var(--cyan);border-radius:12px;padding:35px;max-width:450px;width:90%}dialog h2{font-size:34px}dialog::backdrop{background:#000a}.close{position:absolute;right:12px;top:8px;border:0;background:none;color:#fff;font-size:28px}
@media(max-width:1000px){.split,.trip-grid,.section-intro,.understanding-top,.founder-grid{gap:36px}.dave-row{gap:45px}.about-hero{min-height:600px}.hero-copy>p{max-width:410px}}
@media(max-width:700px){.section-pad{padding-block:48px}.about-hero{min-height:660px;align-items:flex-end}.hero-image{object-position:62% center}.about-hero:after{background:linear-gradient(0deg,#001321 0%,#001321e8 28%,#00132177 68%,#00132122)}.hero-copy{padding-block:40px}.hero-copy h1{font-size:58px}.hero-copy .hero-intro{font-size:17px}.mantra{font-size:10px;letter-spacing:1px}.section-intro,.trip-grid,.split,.understanding-top,.founder-grid,.dave-row{grid-template-columns:1fr;gap:25px}.section-intro .eyebrow{margin:0}.section-intro h2{margin:0}.trip-grid{gap:35px}.trip-grid h3{font-size:32px}blockquote{margin-top:35px;padding-top:25px}.barrel-photo img{aspect-ratio:1.65}.learning-loop{grid-template-columns:repeat(3,1fr);gap:24px 15px}.learning-loop h3{font-size:24px}.founder-grid{margin-top:25px}.dave-row{margin-top:35px;padding-top:35px}.dave-row figure{max-width:400px}.about-closing{padding:50px 0}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* Shift the About hero photograph while keeping the copy fixed. */
.about-hero .hero-image{transform:translateX(200px)}

/* Feather the photograph into the navy along its top and left edges. */
.about-hero{background:var(--navy)}
.about-hero .hero-image{
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.15) 3%,rgba(0,0,0,.65) 9%,#000 18%),linear-gradient(to bottom,transparent 0px,rgba(0,0,0,.18) 20px,rgba(0,0,0,.7) 65px,#000 125px);
  mask-composite:intersect;
}

/* Stack the story introduction on the left, reserving the right for imagery. */
.story .section-intro{align-items:start;row-gap:0}
.story .section-intro>.eyebrow,.story .section-intro>h2,.story .section-intro>p:last-child{grid-column:1}
.story .section-intro>p:last-child{margin:0;max-width:630px}
@media(max-width:700px){.story .section-intro>.eyebrow{margin-bottom:20px}.story .section-intro>h2{margin-bottom:25px}}

/* Original trip photograph alongside the story introduction. */
.story .section-intro>p:not(.eyebrow){grid-column:1;margin:0;max-width:630px;font-size:17px}
.trip-photo{grid-column:2;grid-row:1 / span 3;align-self:center;min-width:0}
.trip-photo img{width:100%;height:240px;object-fit:cover;object-position:center 68%;border-radius:6px;filter:brightness(.82) saturate(1.3) contrast(1.1)}
.trip-photo figcaption{font-size:10px;color:#456172;margin-top:8px;letter-spacing:.4px}
@media(max-width:700px){.trip-photo{grid-column:1;grid-row:auto;margin-top:25px}.trip-photo img{height:auto;aspect-ratio:2/1}}

/* Top-aligned founder introduction with softly blended action photographs. */
.founder-grid{align-items:start}
.founder-bio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:20px;align-items:center}
.founder-bio>div{min-width:0}
.founder-bio>div>p:last-child{margin-bottom:0}
.founder-action{display:block;width:100%;height:190px;object-fit:cover;object-position:57% center;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
@media(min-width:701px) and (max-width:1100px){.founder-bio{grid-template-columns:1fr}.founder-action{height:auto;aspect-ratio:1.8}}
@media(max-width:480px){.founder-bio{grid-template-columns:1fr;gap:14px}.founder-action{height:auto;aspect-ratio:1.8}}
.caide-action{filter:saturate(1.18) brightness(1.07)}
.about-closing h2 .cyan-text{color:var(--cyan)}

/* Blend the replacement wave into the missing-piece section. */
.discovery .barrel-photo img{aspect-ratio:3/2;object-position:center 65%;mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}

/* SUSS slogan colours in the learning sequence. */
.learning-loop li:nth-child(2) h3,.learning-loop li:nth-child(5) h3{color:var(--cyan)}
.learning-loop li:nth-child(3) h3{color:var(--yellow)}

/* Align Dave's copy with the top of his photograph. */
.dave-row{align-items:start}

.hero-questions{max-width:510px;color:#deebf0;margin-top:48px}
.hero-questions p{margin-bottom:10px}
.hero-questions ol{margin:0;padding-left:22px}
.hero-questions li{padding-left:4px;margin-bottom:8px}
.hero-questions li::marker{color:var(--cyan);font-weight:700}

/* Keep the Supers question on one line at desktop widths. */
.story>.shell{container-type:inline-size}
.story blockquote{font-size:min(24px,1.65cqw);white-space:nowrap}
@media(max-width:700px){.story blockquote{font-size:22px;white-space:normal}}

/* Wide wave photograph softly blended into the learning section. */
.learning-photo{margin:28px 0 0}
.learning-photo img{display:block;width:100%;height:clamp(190px,24vw,350px);object-fit:cover;object-position:center 52%;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);mask-composite:intersect}
.learning-photo+.learning-loop{margin-top:22px}
@media(max-width:700px){.learning-photo img{height:220px}}

/* Soft brushed edges for Dave's photograph. */
.dave-row figure img{mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}

/* Frame the founders' portrait in the SUSS ocean palette. */
.founder-grid>figure>img{
  padding:7px;
  background:#062839;
  border:1px solid #00bde980;
  border-radius:12px;
  box-shadow:0 12px 30px #0003;
}

/* Keep the Momentum and Fade heading aligned with its longer story. */
.together .split{align-items:start}
.momentum-lead{container-type:inline-size}
.momentum-lead h2{font-size:min(clamp(38px,4vw,58px),8cqi);white-space:nowrap}

/* Align the whole story block with the bottom of the photo. */
@media(min-width:701px){
    .momentum-copy{align-self:end;padding-top:40px}
    .momentum-copy>p:last-child{margin-bottom:0}
}

/* Photo beneath the Momentum and Fade heading. */
.momentum-photo{margin-top:30px}
.momentum-photo img{display:block;width:100%;aspect-ratio:1.2;object-fit:cover;object-position:center;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}
@media(max-width:700px){.momentum-photo img{aspect-ratio:3/2}}

/* The 2026 continuation spans beneath both history columns. */
.return-story{grid-column:1/-1}
.return-story>p:last-child{margin-bottom:0}

.about-closing .community-join{display:inline-flex;align-items:center;justify-content:center;gap:24px;margin-top:10px;min-height:48px;padding:16px 28px;text-transform:uppercase;letter-spacing:1.4px;font-size:12px}
.about-closing .community-join:hover{background:#fff075}

.about-closing .community-join{min-width:165px;min-height:49px;padding:17px 27px;border:0;border-radius:5px;letter-spacing:2.2px;font-size:12px;line-height:normal;font-weight:700;box-shadow:0 4px 22px #0002}

/* Panoramic wave beside the Rebirth introduction. */
.rebirth-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;align-items:center;margin-bottom:28px}
.rebirth-intro>div>p{margin-bottom:0}
.rebirth-intro>img{display:block;width:100%;aspect-ratio:3.2;object-fit:cover;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 13%,#000 87%,transparent);mask-composite:intersect}
@media(max-width:700px){.rebirth-intro{grid-template-columns:1fr;gap:20px}.rebirth-intro>img{aspect-ratio:2.5}}

/* Text flows beside the Rebirth image, then fills the width beneath it. */
.return-story{display:flow-root}
.return-story>p{text-align:justify}
.rebirth-float{float:right;display:block;width:64%;margin:0 0 24px 40px;aspect-ratio:3.2;object-fit:cover;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 13%,#000 87%,transparent);mask-composite:intersect}
@media(max-width:700px){.rebirth-float{float:none;width:100%;margin:0 0 24px;aspect-ratio:2.5}}
.rebirth-float{object-position:center 65%}

.hero-copy .est+.mantra{margin-top:24px;margin-bottom:0}

/* Extend the opening story to approximately the width of the hero heading. */
.about-hero .hero-copy .hero-intro{max-width:800px}
.about-hero .hero-copy .hero-intro{text-align:justify;text-align-last:left}
.trip-grid article>p:not(.trip-date){text-align:justify;text-align-last:left}

.light h2 .about-yellow{color:var(--yellow)}
.people>div>h2 .cyan-text{color:var(--cyan)}