@media (max-width: 767px) {

    .work-card {
        display: flex;
        flex-direction: column;
    }

    .work-card__text--top,
    .work-card__gif--top {
        align-self: flex-start;
        text-align: left;
    }

    .work-card__gif--bottom,
    .work-card__text--bottom {
        align-self: flex-end;
        text-align: right;
    }

}/* ============================================================
FONTS
Custom typefaces loaded from local /fonts/ folder.
- Galano: main body font (weight 400)
- Royal Mission: decorative display font for headings
============================================================ */
@font-face {
font-family: "Galano";
src: url("/-global-assets/fonts/GalanoGrotesque-Medium.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Royal Mission";
src: url("/-global-assets/fonts/RoyalMision-2OnDw.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}

/* ============================================================
DESIGN TOKENS (CSS Variables)
Reusable values used throughout the stylesheet.
Change a value here and it updates everywhere.
============================================================ */
:root {
--ink: #02253d;              /* Primary dark-blue text color */
--deep: #081c2e;             /* Darkest background (deep ocean) */
--white: #ffffff;            /* Pure white */
--hover-gradient: linear-gradient(90deg, #02bcdd 0%, #06d1e5 22%, #64eda8 58%, #d0f88d 100%); /* Teal-to-lime gradient for hover effects */
--card-shadow: inset -2px -2px 4px 2px rgba(0, 0, 0, 0.22), 0 8px 16px rgba(0, 0, 0, 0.2);  /* Depth shadow for cards */
}

/* ============================================================
GLOBAL RESET
Ensures consistent box model and removes default spacing.
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}

html,
body {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden; 
}

body {
color: var(--ink);
font-family: Galano, Arial, sans-serif;
background: var(--deep); 
}

/* Remove underline from all links; inherit text color */
a {
color: inherit;
text-decoration: none;
}

/* Buttons inherit body font so they don't fall back to system font */
button {
font: inherit;
}

/* Images are block-level so they don't leave inline whitespace gaps */
img {
display: block;
max-width: 100%;
}

/* ============================================================
PAGE WRAPPER (.team-main)
The outermost container for the entire Team page.
Has a tall ocean gradient background that fades from bright
surface blue down to deep dark ocean at the bottom.
============================================================ */
.team-main {
position: relative;
z-index: 1;
overflow: hidden;

background: linear-gradient(180deg, #4794E0 0%, #50ACE1 14.2%, #8AEAAD 23.76%, #53B4E1 33.99%, #326CAE 47.84%, #0A243B 64.58%, #0A243B 91.93%);

/*background: linear-gradient(*/
/*180deg,*/
/*#4794e0 0%,   */
/*#50ace1 14%,*/
/*#8aeaad 24%,  */
/*#53b4e1 34%,*/
/*#326cae 48%,  */
/*#0a243b 65%,  */
/*#081c2e 92%,  */
/*#081c2e 100%*/
/*);*/
}

/* ============================================================
SECTION BASE STYLES (.team-section)
Applied to every major section on the page.
Provides consistent vertical padding and a stacking context.
============================================================ */
.team-section {
position: relative;
width: 100%;
min-height: 620px;
padding: 82px 24px;
isolation: isolate; /* Creates a new stacking context so z-index works predictably inside */
}

/* ============================================================
SECTION TYPOGRAPHY
Shared heading and subtitle styles used across sections.
============================================================ */

/* Main section heading — centered, white, decorative font */
.section-title {
position: relative;
z-index: 4;
max-width: 720px;
margin: 0 auto 40px;
color: var(--white);
font-family: "Royal Mission", Galano, sans-serif;
font-size: 52px;
font-weight: 400;
line-height: 1.1;
letter-spacing: 0;
text-align: center;
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.12); /* Subtle drop shadow for legibility */
}

/* Uppercase variant of section title (wider max-width to fit longer text) */
.section-title--caps {
max-width: 850px;
font-size: 52px;
}

/* Supporting subtitle text that appears below section titles */
.section-subtitle {
position: relative;
z-index: 4;
max-width: 680px;
margin: -14px auto 140px; /* Negative top margin pulls it closer to the title */
color: var(--white);
font-size: 26px;
line-height: 1.2;
text-align: center;
}

/* ============================================================
CARD BASE STYLES
Shared white-card look used for copy blocks, character
cards, and work cards.
============================================================ */
.copy-card,
.character-card,
.work-card {
position: relative;
z-index: 4;
background: var(--white);
/*box-shadow: var(--card-shadow);*/
box-shadow: inset 1px 5px 5px 1px rgba(0, 0, 0, 0.22);
}

/* Copy card: a centered text block with rounded corners */
.copy-card {
width: min(850px, calc(100vw - 48px)); /* Responsive: never wider than viewport minus gutters */
margin: 0 auto;
padding: 30px 60px;
border-radius: 32px;
color: var(--ink);
font-size: 28px;
line-height: 1.5;
text-align: center;
}

/* ============================================================
HERO SECTION
Full-width ocean illustration at the top of the page.
The title is absolutely positioned over the image.
============================================================ */
.team-hero {
position: relative;
width: 100%;
min-height: 1400px;
background-image: url("/about/team/images/i-smokestack-team-page-header-ocean-wide-desktop.webp");
/*background-position: top center;*/
background-position: center -30px;
background-repeat: no-repeat;
background-size: cover;
}

/* Page title image centered horizontally, positioned 490px from top */
.team-hero__title {
position: absolute;
left: 50%;
top: 65vh;
width: min(850px, 46vw);
transform: translateX(-50%); /* True horizontal centering via translate */
}

/* ============================================================
PLACES SECTION
"Where we work from" section that overlaps the hero bottom.
Negative margin-top pulls it up over the hero image.
============================================================ */
.team-section--places {
min-height: 500px;
margin-top: -390px; /* Overlaps hero section for seamless bleed effect */
padding-top: 0;
}

/* Wider intro copy card variant */
.copy-card--intro {
max-width: 850px;
font-size: 28px;
}

/* ============================================================
DECORATIVE OCEAN ELEMENTS
Seaweed, coral, whale, starfish, submarine spotlight, fish
are all absolutely positioned and non-interactive.
JS moves fish-run elements; CSS handles shape and position.
============================================================ */
.seaweed,
.coral,
.whale,
.starfish,
.submarine-spotlight,
.fish-run {
position: absolute;
z-index: 3;
pointer-events: none; 
user-select: none;
}

/* --- Seaweed placement variants --- */

/* Seaweed in the Places section, bottom-right corner */
.seaweed--places {
right: -35px;
bottom: 210px;
width: 120px;
transform: rotate(-35deg);
}

/* Seaweed in the Show Up section */
.seaweed--showup {
right: -1%;
bottom: -70%;
width: 120px;
transform: rotate(-35deg);
}

/* Seaweed left side of the Work section */
.seaweed--work-left {
left: 16%;
top: 20%;
width: 130px;
transform: rotate(-50deg);
}

/* Seaweed right side of the Work section */
.seaweed--work-right {
right: 18%;
top: 70%;
width: 140px;
transform: rotate(38deg);
}

/* Seaweed on the right of the Background section */
.seaweed--background-right {
right: -20px;
top: 100%;
width: 130px;
transform: rotate(-45deg);
}

/* Seaweed on the left of the Background section */
.seaweed--background {
left: -45px;
top: 77%;
width: 130px;
transform: rotate(38deg);
}

/* Coral in the Strengths section (left-center area) */
.coral--strengths {
left: 19%;
top: 35%;
width: 210px;
height: auto;
transform: rotate(-32deg);
}

/* Extra bottom padding inside the Strengths heading */
.team-section--strengths .section-title {
padding-bottom: 40px;
}

/* Coral used next to the Octopus (mirrored horizontally) */
.coral--octopus {
left: -8%;
top: 2%;
width: 280px;
height: auto;
transform: scaleX(-1); /* Flip horizontally */
}

/* ============================================================
FISH SCHOOLS (.fish-run)
Groups of fish images arranged into a loose school shape.
JavaScript animates their horizontal/vertical movement.
Each nth-child rule offsets individual fish to create depth.
============================================================ */
.fish-run {
display: flex;
align-items: flex-start;
gap: 22px;
will-change: transform; /* Hint to browser: this element will animate */
}

/* Individual fish within a school */
.fish-run img {
width: 32px;
transform-origin: center;
position: relative;
}

/* Fish 1 — largest, offset low */
.fish-run img:nth-child(1) {
width: 50px;
margin-top: 65px;
}

/* Fish 2 — medium, mid-height */
.fish-run img:nth-child(2) {
width: 50px;
margin-top: 40px;
}

/* Fish 3 — medium, lowest in the school */
.fish-run img:nth-child(3) {
width: 50px;
margin-top: 90px;
margin-left: -10px; /* Slight overlap for natural clustering */
}

/* Fish 4 — top of the school */
.fish-run img:nth-child(4) {
width: 50px;
margin-top: 0;
margin-left: -50px;
}

/* Fish 5 — largest "lead" fish in the school */
.fish-run img:nth-child(5) {
width: 110px;
margin-top: 42px;
margin-left: -35px;
}

/* --- Fish school position variants --- */
/* Each .fish-run--N places a school at a different spot on the page */

.fish-run--one {
left: 8%;
top: -30%;
}

.fish-run--two {
left: 8%;
top: 10%;
}

/* School three: right side, higher z-index so it appears in front */
.fish-run--three {
right: -6%;
top: 56%;
z-index: 10;
}

/* Fish in school three face left (mirrored) */
.fish-run--three img {
transform: scaleX(-1);
}

/* Custom sizes/offsets for school three's individual fish */
.fish-run--three img:nth-child(1) {
width: 70px;
margin-top: 50px;
margin-right: 20px;
}

.fish-run--three img:nth-child(2) {
width: 70px;
margin-top: 76px;
margin-right: -10px;
}

.fish-run--three img:nth-child(3) {
width: 50px;
margin-top: 150px;
margin-left: -145px;
}

.fish-run--three img:nth-child(4) {
width: 70px;
margin-top: 20px;
margin-left: 50px;
}

/* School three-2: companion school on the left side */
.fish-run--three-2 {
left: -4%;
top: 60%;
z-index: 10;
}

.fish-run--three-2 img:nth-child(1) {
width: 60px;
margin-top: 100px;
}

.fish-run--three-2 img:nth-child(2) {
width: 80px;
margin-top: 40px;
}

.fish-run--four {
right: 20%;
top: 39%;
z-index: 0;
}

/* School five: right side, fish face left */
.fish-run--five {
right: 14%;
top: 25%;
}

.fish-run--five img {
transform: scaleX(-1);
}

.fish-run--five img:nth-child(1) {
width: 70px;
margin-top: 50px;
margin-right: 40px;
}

.fish-run--five img:nth-child(2) {
width: 70px;
margin-top: 76px;
margin-right: -10px;
}

.fish-run--five img:nth-child(3) {
width: 50px;
margin-top: 125px;
margin-left: -140px;
}

.fish-run--six {
right: 16%;
top: 50%;
}

.fish-run--six img:nth-child(1) {
width: 60px;
margin-top: 50px;
}

.fish-run--six img:nth-child(2) {
width: 50px;
margin-top: 100px;
margin-right: -10px;
}

.fish-run--seven {
left: 4%;
top: 6%;
}

.fish-run--seven img:nth-child(1) {
width: 80px;
}

.fish-run--eight {
left: 6%;
top: 45%;
}

.fish-run--eight img:nth-child(1) {
width: 50px;
margin-top: 130px;
}

.fish-run--eight img:nth-child(2) {
width: 60px;
margin-top: 76px;
}

/* ============================================================
STARFISH
Small decorative starfish scattered across sections.
Animated with floatSoft keyframe (defined below).
============================================================ */
.starfish {
width: 60px;
will-change: transform;
}

.starfish--left {
left: 25%;
top: -12%;
}

.starfish--right {
right: 22%;
top: -28%;
}

.starfish--work {
right: 10%;
top: 12%;
}

/* ============================================================
CHARACTER CARDS (.character-card)
Pill/capsule-shaped cards displaying team character images
with a label. Arranged in a 3-column grid.
============================================================ */
.character-grid {
position: relative;
z-index: 4;
display: grid;
width: fit-content;
margin: 0 auto;
grid-template-columns: repeat(3, 240px);
justify-content: center;
justify-items: center;
align-items: end; /* Cards align to their bottom edge for a rising effect */
gap: 55px;
}

/* Individual character card — tall rounded-top shape */
.character-card {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
width: 250px;
min-height: 280px;
padding: 30px 20px 28px;
border-radius: 150px 150px 10px 10px; /* Fully rounded top, sharp bottom */
overflow: visible;
margin: 0 auto;
}

/* Character illustration — overflows the top of the card */
.character-card__image {
height: 175px;
object-fit: contain;
margin-top: -75px; 
}

/* Card label text */
.character-card p {
margin: 10px 0 0;
color: var(--ink);
font-size: 28px;
line-height: 1.3;
text-align: center;
}

/* ============================================================
SHOW UP SECTION
"We show up" — team values section.
============================================================ */
.team-section--showup {
min-height: 670px;
padding-top: 0;
margin-top: 40px;
}

.team-section--showup .section-title {
padding-bottom: 30px;
}

/* ============================================================
SERIOUS WORK SECTION
Copy block introducing what the team works on.
============================================================ */
.team-section--serious {
min-height: 80vh;
padding-top: 0px;
}

.copy-card--serious {
max-width: 850px;
font-size: 28px;
margin-bottom: 40px;
}

/* Submarine with spotlight beam — decorative illustration */
.submarine-spotlight {
top: 180px;
right: -5%;
width: 1200px;
}

/* Submarine image layered above its container */
.submarine-spotlight img {
position: relative;
z-index: 2;
}

/* ============================================================
WORK CARDS SECTION
Two large cards showing specific types of work.
Uses a 2-column grid within each card.
============================================================ */
.team-section--workcards {
display: grid;
min-height: 950px;
padding-top: 56px;
gap: 150px;         
justify-items: center;
}

/* Individual work card — 2-column, 2-row grid layout */
.work-card {
  display: grid;
  width: min(800px, calc(100vw - 48px));
  min-height: 500px;
  padding: 40px 50px;
  border-radius: 32px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  row-gap: 0;
  column-gap: 0;
  overflow: hidden;
}


/* Body text inside a work card */
.work-card__text {
position: relative;
z-index: 2;
margin: 0;
color: var(--ink);
font-size: 26px;
line-height: 1.3;
}

/* Bold phrases (e.g. tool names) stay on one line by default */
.work-card__text strong {
font-weight: 600;
white-space: normal;
}

/* Top-left text cell */
.work-card__text--top {
grid-row: 1;
grid-column: 1;
width: 380px;
max-width: none;
text-align: left;
}

/* Bottom-right text cell */
.work-card__text--bottom {
grid-row: 2;
grid-column: 2;
align-self: end;
justify-self: end;
max-width: 380px;
text-align: right;
}

/* Animated GIF/image inside a work card */
.work-card__gif {
width: 260px;
object-fit: contain;
}

/* Top-right image cell */
.work-card__gif--top {
grid-row: 1;
grid-column: 2;
justify-self: end;
}

/* Bottom-left image cell */
.work-card__gif--bottom {
grid-row: 2;
grid-column: 1;
}

/* Negative top margin makes bottom row overlap the top row slightly */
.work-card__gif--bottom,
.work-card__text--bottom {
margin-top: -80px;
}

/* ============================================================
STRENGTHS SECTION
Highlights the team's core strengths with a copy card.
============================================================ */
.team-section--strengths {
min-height: 660px;
padding-top: 116px;
}

/* Wider, taller copy card with extra padding */
.copy-card--strengths {
max-width: 800px;
font-size: 28px;
padding: 50px 60px;
}

/* Decorative whale floating in the upper-right */
.whale {
right: 6%;
top: -10%;
width: 255px;
}

/* ============================================================
OCTOPUS TRAITS SECTION
An octopus illustration surrounded by 5 trait labels.
Labels are absolutely positioned around the octopus.
============================================================ */
.team-section--octopus {
min-height: 835px;
padding-top: 100px;
}

/* Wrapper that sets the coordinate space for trait positioning */
.octopus-scene {
position: relative;
z-index: 4;
width: min(760px, calc(100vw - 32px));
min-height: 585px;
margin: 0 auto;
}

/* Octopus GIF centered horizontally within the scene */
.octopus-gif {
position: absolute;
left: 50%;
top: 50px;
transform: translateX(-50%);
}

/* Trait label base style — gradient text effect */
.trait {
position: absolute;
z-index: 5;
margin: 0;
background: var(--hover-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; /* Makes gradient show through text */
color: transparent;
font-size: 36px;
font-weight: 600;
text-align: center;
}

/* Sub-label inside each trait (e.g. a description line) — solid white */
.trait span {
display: block;
color: var(--white);
-webkit-text-fill-color: var(--white); /* Override gradient fill for span */
font-size: 32px;
font-weight: 700;
line-height: 1.2;
}

/* --- Individual trait positions around the octopus --- */
.trait--bold {
left: -6%;
top: 430px;
}

.trait--steady {
right: -12%;
top: 300px;
}

.trait--rooted {
right: -8%;
top: 490px;
}

.trait--curious {
left: 16%;
bottom: -30%;
}

.trait--intentional {
right: 24%;
bottom: -34%;
}

/* ============================================================
BACKGROUND / ORIGIN SECTION
"Where we come from" — another character card grid.
============================================================ */
.team-section--background {
min-height: 650px;
padding-top: 330px;
}

.character-grid--background {
margin-top: 6px;
}

/* ============================================================
FOOTER SUBMARINE SCENE
Full-width underwater scene at the bottom of the page.
Contains logo, tagline, porthole navigation, and a turtle.
============================================================ */
.team-footer-scene {
position: relative;
min-height: 740px;
margin-top: 160px;
background-image: url("/about/team/images/i-smokestack-team-page-submarine-underwater-sandy-floor-scene.webp");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}

/* Inner content wrapper, centered and constrained in width */
.team-footer-scene__content {
position: relative;
width: min(1180px, 100%);
min-height: 740px;
margin: 0 auto;
}

/* Logo centered at the top of the footer scene */
.footer-logo {
position: absolute;
left: 50%;
top: 10px;
width: 340px;
transform: translateX(-50%);
}

/* Tagline text beneath the logo */
.footer-line {
position: absolute;
left: 50%;
top: 120px;
width: min(650px, 90vw);
margin: 0;
color: var(--white);
font-family: "Royal Mission", Galano, sans-serif;
font-size: 32px;
line-height: 1.2;
text-align: center;
transform: translateX(-50%);
}

/* 3-column navigation grid of porthole (circular) links */
.porthole-nav {
position: absolute;
left: 60%;
bottom: 224px;
z-index: 3;
display: grid;
width: min(610px, 56vw);
grid-template-columns: repeat(3, 1fr);
gap: 50px;
transform: translateX(-50%);
}

/* Individual porthole link — image as background, text centered */
.porthole-link {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1; /* Perfect circle */
color: var(--white);
font-size: 24px;
line-height: 1;
text-align: center;
}

/* Porthole ring image fills the entire link area */
.porthole-link img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}

/* Label text sits above the porthole image */
.porthole-link span {
position: relative;
z-index: 2;
transition: color 0.25s ease;
line-height: 4rem;
}

/* On hover/focus, link label gets the gradient text treatment */
.porthole-link:hover span,
.porthole-link:focus-visible span {
background: var(--hover-gradient);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}

/* Animated turtle that swims back and forth across the scene floor */
.footer-turtle {
position: absolute;
left: -12%;
bottom: 82px;
z-index: 4;
width: 220px;
animation: turtleTravel 10s ease-in-out infinite;
transform-origin: center;
}

/* ============================================================
BUBBLE OVERLAY
Full-screen floating bubbles that appear on a trigger.
Controlled via JS adding/removing .is-active.
Bubbles are clickable and "pop" when clicked.
============================================================ */

/* Fixed overlay layer — hidden by default */
.bubble-layer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--bubble-top, 0px);
    z-index: 60;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease;
    }

/* Show the layer when JS adds this class */
.bubble-layer.is-active {
opacity: 1;
visibility: visible;
}

/* Individual bubble — glassy sphere with CSS gradient + box-shadow */
.bubble {
position: absolute;
left: var(--x);          
bottom: -140px;        
width: var(--size);
height: var(--size);
padding: 0;
border: 0;
border-radius: 50%;
outline: 0;
appearance: none;
background:
radial-gradient(
circle at 48% 46%,
rgba(174, 237, 255, 0.72) 0%,
rgba(101, 190, 229, 0.62) 42%,
rgba(225, 250, 255, 0.76) 72%,
rgba(255, 255, 255, 0.18) 100%
);
box-shadow:
inset 8px 8px 18px rgba(255, 255, 255, 0.8),       
inset -10px -14px 24px rgba(28, 103, 151, 0.36),   
0 10px 18px rgba(3, 48, 78, 0.28);                
cursor: pointer;
opacity: 0;
pointer-events: auto; /* Bubbles are clickable even though the layer isn't */
animation: bubbleRise var(--duration) linear var(--delay) infinite;
will-change: transform, opacity;
}

/* Shiny highlight spot on the bubble surface */
.bubble::after {
position: absolute;
left: 17%;
top: 13%;
width: 30%;
height: 24%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.45);
content: "";
filter: blur(3px);
}

/* Remove default focus outline (bubble is purely visual) */
.bubble:focus,
.bubble:focus-visible {
outline: 0;
}

/* Pop animation plays when JS adds this class on click */
.bubble.is-burst {
animation: bubblePop 0.32s ease forwards;
pointer-events: none; 
}

/* Tiny spark particles that fly out when a bubble pops */
.bubble-spark {
position: fixed;
z-index: 61;
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.78);
pointer-events: none;
animation: sparkPop 0.42s ease forwards;
}

/* ============================================================
UTILITY ANIMATION CLASSES
Applied directly to elements in HTML to add motion.
============================================================ */

/* Gentle up-down float (e.g. starfish, decorative elements) */
.float-soft {
animation: floatSoft 4.4s ease-in-out infinite;
}

/* Offset version so two float-soft elements don't move in sync */
.float-soft--delay {
animation-delay: -1.6s;
}

/* Slightly longer, different float for the submarine */
.float-sub {
animation: floatSub 5.6s ease-in-out infinite;
}

/* ============================================================
KEYFRAME ANIMATIONS
============================================================ */

/* Simple vertical bob — used by starfish and decorative items */
@keyframes floatSoft {
0%,
100% {
transform: translateY(0);
}

50% {
transform: translateY(-12px);
}
}

/* Submarine float — adds a subtle rotate so it feels weightless */
@keyframes floatSub {
0%,
100% {
transform: translateY(0) rotate(0deg);
}

50% {
transform: translateY(-10px) rotate(0deg);
}
}

/* Turtle swims right, turns around, and swims back — loops forever */
@keyframes turtleTravel {
0%,
100% {
transform: translateX(0) rotate(0deg);
}

35% {
transform: translateX(260px) rotate(2deg);
}

55% {
/* scaleX(-1) flips the turtle to face left for the return trip */
transform: translateX(430px) rotate(-4deg) scaleX(-1);
}

82% {
transform: translateX(180px) rotate(3deg) scaleX(-1);
}
}

/* Bubble rises from bottom, drifts sideways, fades out at top */
@keyframes bubbleRise {
0% {
transform: translate3d(0, 0, 0) scale(0.9);
opacity: 0;
}

10%,
78% {
opacity: var(--opacity); 
}

100% {
transform: translate3d(var(--drift), calc(-1 * var(--bubble-travel, 100vh)), 0) scale(1);
opacity: 0;
}
}

/* Bubble pop: scale up and fade out quickly */
@keyframes bubblePop {
to {
transform: scale(1.55);
opacity: 0;
}
}

/* Spark flies outward and shrinks to nothing */
@keyframes sparkPop {
to {
transform: translate(var(--sx), var(--sy)) scale(0); /* JS sets --sx/--sy direction */
opacity: 0;
}
}

/* ============================================================
RESPONSIVE: TABLET  (641px – 1024px)
Layout adjustments for medium-sized screens.
============================================================ */
@media (min-width: 641px) and (max-width: 1024px) {

/* Swap to tablet-specific hero image */
.team-hero {
background-image: url("/about/team/images/i-smokestack-team-page-header-ocean-whale-float.webp");
background-position: top center;
background-size: 100%;
}

.team-hero__title {
top: 52vh;
width: min(620px, 72vw);
}

.team-section {
min-height: 560px;
padding: 74px 18px;
}

/* Section titles scale fluidly between 44px and 58px */
.section-title {
max-width: 560px;
margin-bottom: 30px;
font-size: clamp(44px, 6vw, 58px);
}

.section-title--caps {
max-width: 760px;
font-size: clamp(40px, 5.5vw, 54px);
}

.section-subtitle {
max-width: 720px;
margin: -8px auto 72px;
font-size: 26px;
}

.copy-card {
width: min(900px, calc(100vw - 36px));
padding: 26px 40px;
border-radius: 28px;
font-size: 26px;
}

.team-section--places {
min-height: 560px;
margin-top: -330px;
padding-top: 230px;
}

.team-section--places .section-title {
margin-bottom: 22px;
}

.fish-run--one {
left: -2%;
top: 10%;
z-index: 5;
}

/* Smaller font for all copy card types on tablet */
.copy-card--intro,
.copy-card--serious,
.copy-card--strengths {
font-size: 24px;
}

.seaweed--places {
right: -38px;
bottom: 32px;
width: 128px;
}

.team-section--showup {
min-height: 625px;
margin-top: 0;
padding-top: 72px;
}

.team-section--showup .section-title {
padding-bottom: 12px;
}

/* Character grid stretches to fill tablet width */
.character-grid {
width: min(930px, calc(100vw - 24px));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 4vw, 48px);
}

.character-card {
width: min(100%, 220px);
min-height: 265px;
padding: 26px 16px 22px;
border-radius: 130px 130px 10px 10px;
}

.character-card__image {
height: 165px;
margin-top: -36px;
}

.character-card p {
font-size: 24px;
}

.starfish--left {
left: 17%;
top: 8%;
}

.starfish--right {
right: 9%;
top: 45%;
}

.seaweed--showup {
right: -30px;
bottom: -20%;
width: 100px;
}

.team-section--serious {
min-height: 470px;
padding-top: 122px;
}

/* Submarine is much smaller on tablet */
.submarine-spotlight {
top: -60px;
right: -110px;
width: 750px;
}

.fish-run--two {
left: 8%;
top: 8%;
}

.team-section--workcards {
min-height: 1120px;
padding-top: 80px;
gap: 105px;
}

.work-card {
width: min(900px, calc(100vw - 36px));
min-height: 420px;
padding: 48px 58px;
border-radius: 32px;
}

/* Work card text scales fluidly */
.work-card__text {
font-size: clamp(22px, 3vw, 28px);
}

.work-card__text--top {
width: min(370px, 42vw);
}

.work-card__gif {
width: clamp(210px, 32vw, 310px);
}

.work-card__gif--bottom,
.work-card__text--bottom {
margin-top: -58px;
}

/* Allow strong text to wrap on tablet */
.work-card__text strong {
white-space: normal;
}

.seaweed--work-left {
left: -34px;
top: 24%;
width: 120px;
}

.seaweed--work-right {
right: -26px;
top: 60%;
width: 132px;
}

.starfish--work {
right: 8%;
top: 11%;
}

.team-section--strengths {
min-height: 610px;
padding-top: 104px;
}

.whale {
right: 6%;
top: -2%;
width: 250px;
}

.coral--strengths {
left: 7%;
top: 34%;
width: 190px;
}

.fish-run--four {
right: 8%;
top: 50%;
}

.copy-card--strengths {
width: min(880px, calc(100vw - 36px));
padding: 34px 44px;
}

.team-section--octopus {
min-height: 760px;
padding-top: 84px;
}

.octopus-scene {
width: min(720px, calc(100vw - 32px));
min-height: 535px;
}

/* Octopus GIF scales with viewport on tablet */
.octopus-gif {
top: 55px;
width: min(430px, 55vw);
}

.trait {
font-size: clamp(25px, 3.6vw, 34px);
}

.trait span {
font-size: clamp(22px, 3.2vw, 30px);
}

/* Trait labels repositioned for tablet octopus layout */
.trait--bold {
left: 1%;
top: 355px;
}

.trait--steady {
right: 1%;
top: 250px;
}

.trait--rooted {
right: 3%;
top: 410px;
}

.trait--curious {
left: 16%;
bottom: -10%;
}

.trait--intentional {
right: 24%;
bottom: -15%
}

.coral--octopus {
left: -7%;
top: 8%;
width: 245px;
}

.fish-run--five {
right: 2%;
top: 22%;
}

.seaweed--background-right {
right: -34px;
top: 82%;
width: 128px;
}

.team-section--background {
min-height: 645px;
padding-top: 180px;
}

.team-section--background .section-title {
margin-bottom: 14px;
}

.character-grid--background {
margin-top: 18px;
}

/* Tablet footer uses same background image, slightly shorter */
.team-footer-scene {
min-height: 50vh;
/*margin-top: 70px;*/
background-image: url("/about/team/images/i-smokestack-team-page-submarine-underwater-sandy-floor-scene.webp");
background-position: center bottom;
background-size: 120%;
}

/*.team-footer-scene__content {*/
/*min-height: 660px;*/
/*}*/

.footer-logo {
top: 4px;
width: 250px;
}

.footer-line {
top: 96px;
width: min(650px, 82vw);
font-size: 34px;
}

/* Porthole nav hidden on tablet (not enough room) */
.porthole-nav {
display: none;
}

.footer-turtle {
left: 8%;
bottom: 68px;
width: 170px;
}
}

/* ============================================================
RESPONSIVE: MOBILE  (max 640px)
Single-column layout, smaller text, repositioned decorations.
============================================================ */
@media (max-width: 640px) {

.work-card__text--bottom {
align-self: center;

}

.team-main {
background: linear-gradient(
180deg,
#48c9e7 0%,
#57c7e7 13%,
#7fe8a8 28%,
#45a7d4 45%,
#245e98 60%,
#092b43 74%,
#081c2e 100%
);
}

/* Swap to mobile-specific hero image */
.team-hero {
min-height: 620px;
background-image: url("/about/team/images/i-smokestack-team-page-header-2-ocean-mobile.webp");
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}

.team-hero__title {
top: 35vh;
width: min(245px, 78vw);
max-width: 78vw;
}

/* Sections have no enforced min-height on mobile; content dictates height */
.team-section {
min-height: auto;
padding: 58px 12px;
margin-bottom: 0;
}

/* Much smaller headings on mobile */
.section-title {
max-width: 260px;
margin-bottom: 24px;
font-size: 32px;
line-height: 1.05;
}

.section-title--caps {
max-width: 300px;
font-size: 28px;
line-height: 1.05;
}

.section-subtitle {
max-width: 285px;
margin: -8px auto 38px;
font-size: 15px;
line-height: 1.25;
}

/* Compact copy cards on mobile */
.copy-card {
width: min(300px, 72vw);
padding: 20px 18px;
border-radius: 18px;
font-size: 15px;
line-height: 1.25;
}

.copy-card--intro,
.copy-card--serious,
.copy-card--strengths {
font-size: 15px;
}

.team-section--places {
min-height: 420px;
margin-top: -250px;
padding-top: 260px;
padding-bottom: 52px;
}

.team-section--places .section-title {
margin-bottom: 22px;
}

/* Smaller fish images on mobile */
.fish-run img {
width: 28px;
}

.fish-run img:nth-child(1) {
width: 34px;
margin-top: 46px;
}

.fish-run img:nth-child(2) {
width: 30px;
margin-top: 24px;
}

.fish-run img:nth-child(3) {
width: 28px;
margin-top: 58px;
margin-left: -6px;
}

.fish-run img:nth-child(4) {
width: 34px;
margin-top: 0;
margin-left: -28px;
}

.fish-run img:nth-child(5) {
width: 54px;
margin-top: 28px;
margin-left: -22px;
}

.fish-run--one {
left: -22px;
top: 25%;
z-index: 5;
}

.seaweed--places {
right: -34px;
bottom: 12px;
width: 82px;
}

.team-section--showup {
min-height: 580px;
padding-top: 50px;
padding-bottom: 34px;
margin-top: 0;
}

.team-section--showup .section-title {
max-width: 230px;
padding-bottom: 18px;
margin-bottom: 20px;
}

/* Single-column character grid on mobile */
.character-grid {
width: min(310px, 88vw);
grid-template-columns: 1fr;
gap: 42px;
}

/* Mobile character card becomes a horizontal row (image + text side by side) */
.character-card {
display: grid;
width: min(285px, 72vw);
min-height: 78px;
padding: 13px 18px;
border-radius: 10px; 
grid-template-columns: 92px 1fr;
align-items: center;
justify-content: center;
}

.character-card__image {
width: 104px;
height: 112px;
justify-self: center;
object-fit: contain;
margin-top: -22px;
margin-left: -10px;
}

/* Left-aligned text in the horizontal card layout */
.character-card p {
margin: 0;
font-size: 20px;
line-height: 1.15;
text-align: left;
}

.starfish {
width: 32px;
}

.starfish--left {
left: 78%;
top: 20%;
}

.starfish--right {
right: 10%;
top: 48%;
}

.seaweed--showup {
right: -32px;
bottom: -20%;
width: 65px;
}

/* Extra top padding to clear the submarine spotlight image */
.team-section--serious {
min-height: 430px;
padding-top: 220px;
padding-bottom: 38px;
}

.team-section--serious .section-title {
margin-bottom: 42px;
}

/* Submarine is small and tucked in the corner on mobile */
.submarine-spotlight {
top: 18px;
right: -54px;
width: 400px;
z-index: 5;
}

.fish-run--two {
left: -18px;
top: 72%;
}

.copy-card--serious {
width: min(300px, 72vw);
padding: 18px 18px;
margin-bottom: 0;
}

/* Work cards stack vertically on mobile */
.team-section--workcards {
display: grid;
min-height: auto;
padding-top: 24px;
padding-bottom: 52px;
gap: 40px;
justify-items: center;
}


.work-card {
display: flex;
width: min(340px, 82vw);
min-height: 450px;
padding: 25px 18px;
border-radius: 22px;
flex-direction: column;
align-items: center;
justify-content: space-between;
}

/* Smaller, centered text for mobile work cards */
.work-card__text {
max-width: 245px;
font-size: 18px;
line-height: 1.28;
text-align: center;
}

.work-card__text--top {
width: auto;
max-width: 245px;
text-align: center;
order: 2; 
}

.work-card__gif--top {
width: 150px;
order: 1; 
}

.work-card__gif--bottom {
width: 160px;
order: 3;
}

.work-card__text--bottom {
max-width: 250px;
text-align: center;
order: 4;
}

.work-card__text strong {
white-space: normal;
}

/* Remove the negative overlap margin used in desktop layout */
.work-card__gif--bottom,
.work-card__text--bottom {
margin-top: 0;
}

/* Repositioned fish schools for mobile viewport */
.fish-run--seven {
left: -26px;
top: 4%;
}

.fish-run--three {
right: -42px;
top: 50%;
}

.fish-run--three-2 {
left: -42px;
top: 40%;
}

.seaweed--work-left {
left: -50px;
top: 22%;
width: 95px;
}

.seaweed--work-right {
right: -48px;
top: 68%;
width: 96px;
}

.starfish--work {
right: 10%;
top: 8%;
}

.team-section--strengths {
min-height: 520px;
padding-top: 172px;
padding-bottom: 70px;
}

.team-section--strengths .section-title {
max-width: 220px;
padding-bottom: 0;
margin-bottom: 72px;
}

.whale {
right: -18px;
top: -44px;
width: 180px;
}

.coral--strengths {
left: 12%;
top: 34%;
width: 96px;
display: none;
}

.copy-card--strengths {
width: min(310px, 76vw);
padding: 26px 18px;
}

.fish-run--four {
right: -20px;
top: 62%;
}

.team-section--octopus {
min-height: 560px;
padding-top: 62px;
padding-bottom: 76px;
}

.team-section--octopus .section-title {
max-width: 245px;
margin-bottom: 20px;
}

.octopus-scene {
width: min(330px, 94vw);
min-height: 365px;
}

.octopus-gif {
top: 54px;
width: 210px;
}

/* Very small trait labels on mobile — fit tightly around octopus */
.trait {
font-size: 13px;
line-height: 1;
}

.trait span {
font-size: 12px;
line-height: 1.05;
}

.trait--bold {
left: 2%;
top: 176px;
}

.trait--steady {
right: 2%;
top: 124px;
}

.trait--rooted {
right: 3%;
top: 210px;
}

.trait--curious {
left: 16%;
bottom: 26%;
}

.trait--intentional {
right: 25%;
bottom: 18%;
}

.coral--octopus {
left: -58px;
top: 8%;
width: 145px;
}

.fish-run--five {
right: -36px;
top: 32%;
}

.seaweed--background-right {
right: -36px;
top: 80%;
width: 88px;
}

.team-section--background {
min-height: 650px;
padding-top: 54px;
padding-bottom: 30px;
}

.team-section--background .section-title {
max-width: 290px;
margin-bottom: 18px;
}

.team-section--background .section-subtitle {
max-width: 285px;
margin-bottom: 50px;
}

/* Background grid is also single-column on mobile */
.character-grid--background {
width: min(330px, 92vw);
gap: 44px;
margin-top: 0;
}

/* Slightly wider cards in the background section */
.character-grid--background .character-card {
width: min(330px, 86vw);
min-height: 86px;
grid-template-columns: 108px 1fr;
padding: 14px 18px;
}

/*.character-grid--background .character-card__image {*/
/*width: 112px;*/
/*height: 122px;*/
/*margin-top: -24px;*/
/*margin-left: -10px;*/
/*}*/

.character-grid--background .character-card p {
font-size: 20px;
line-height: 1.15;
}

.fish-run--eight {
left: -32px;
top: 54%;
}

.fish-run--six {
right: -30px;
top: 18%;
}

.seaweed--background {
left: -42px;
top: 45%;
width: 95px;
}

/* Mobile footer — shorter, logo hidden */
.team-footer-scene {
min-height: 560px;
margin-top: 0;
background-image: url("/about/team/images/i-smokestack-team-footer-underwater-boat-scene-flipped.webp");
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100%;
transform: scaleX(-1);
}

.team-footer-scene__content {
min-height: 560px;
transform: scaleX(-1);
}

/* Logo hidden on mobile — tagline alone is sufficient */
.footer-logo {
display: none;
}

.footer-line {
top: 16px;
width: min(260px, 86vw);
font-size: 18px;
line-height: 1.15;
}

/* Porthole nav also hidden on mobile */
.porthole-nav {
display: none;
}

.footer-turtle {
left: 12%;
bottom: 34px;
width: 96px;
}
}

/* ============================================================
RESPONSIVE: SMALL MOBILE  (max 480px)
Fine-tuning for very small screens.
============================================================ */
@media (max-width: 480px) {
.team-hero {
min-height: 610px;
}

.team-hero__title {
top: 35vh;
width: 280px;
}


.copy-card {
width: min(300px, 72vw);
}

.character-grid {
width: min(310px, 90vw);
}

.character-card {
width: min(285px, 72vw);
}

.work-card {
width: min(340px, 82vw);
min-height: 450px;
}

.work-card__gif--top {
width: 148px;
}

.work-card__gif--bottom {
width: 158px;
}

.octopus-gif {
width: 205px;
}

.team-footer-scene,
.team-footer-scene__content {
min-height: 85vh;
margin-top: 50px;
}
}


/* ============================================================
RESPONSIVE: EXTRA SMALL  (max 360px)
For very narrow devices (e.g. older Android phones).
============================================================ */
@media (max-width: 350px){
.team-hero__title {
top: 30vh;
width: 280px;
}
}

@media (max-width: 380px){
.team-hero__title {
top: 40vh;
width: 280px;
}
}

@media (max-width: 330px) {
.team-hero__title {
    top: 50vh;
    width: 280px;
}
}

@media (max-width: 380px) {
.team-hero {
min-height: 600px;
}

.section-title {
font-size: 29px;
}

.section-title--caps {
font-size: 25px;
}

.copy-card {
width: min(250px, 74vw);
font-size: 14px;
}

.copy-card--intro,
.copy-card--serious,
.copy-card--strengths {
font-size: 14px;
}

/* Tighter grid column for the narrowest cards */
.character-card {
width: min(250px, 74vw);
grid-template-columns: 86px 1fr;
padding: 12px 14px;
}

.character-card__image {
width: 98px;
height: 108px;
}

.character-card p {
font-size: 18px;
}

.work-card {
width: min(280px, 82vw);
padding: 24px 14px;
}

.work-card__text {
font-size: 16px;
}

.work-card__gif--top {
width: 140px;
}

.work-card__gif--bottom {
width: 150px;
}

.octopus-scene {
width: min(300px, 94vw);
}

.octopus-gif {
width: 190px;
}

.trait {
font-size: 12px;
}

.trait span {
font-size: 11px;
}

.character-grid--background .character-card {
width: min(292px, 88vw);
grid-template-columns: 96px 1fr;
}
}

/* ============================================================
ACCESSIBILITY: REDUCED MOTION
Disables all animations for users who prefer less motion.
Respects the OS-level "Reduce Motion" setting.
============================================================ */
@media (prefers-reduced-motion: reduce) {
.float-soft,
.float-sub,
.footer-turtle,
.bubble {
animation: none;
}
}

@media (max-width: 767px) {

    .work-card {
        display: flex;
        flex-direction: column;
    }

    .work-card__text--top,
    .work-card__gif--top {
        align-self: flex-start;
        text-align: left;
    }

    .work-card__gif--bottom,
    .work-card__text--bottom {
        align-self: flex-end;
        text-align: right;
    }

}