/* Include CSS Reset */
/* Eric Meyer's Reset CSS v2.0 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}

/* Screen-reader-only: visually gone, still read aloud. Used for the
   headings sections need semantically but not visually. */
.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}
/* CSS RESET */

/* =========== DESIGN TOKENS =========== */
:root{
    --c-light-teal: #5E9C96;
    --c-dark-teal: #1C544D;
    --c-deep-teal: #143F3A;
    --c-white: #FFFFFF;
    --hairline-light: rgba(255, 255, 255, 0.18);
    --hairline-dark: rgba(20, 63, 58, 0.25);
    --font-display: "Syne", sans-serif;
    --font-logo: "Anton", sans-serif;
    --font-body: "Barlow", sans-serif;
}

html, body{
    overflow-x: clip;    /* intentional edge-bleeds must not grow a gutter */
}

body{
    font-family: var(--font-body);
    background-color: var(--c-deep-teal);
    color: var(--c-white);
}

/* =========== BUTTONS =========== */
.btn{
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 3px;
    text-decoration: none;
    color: var(--c-white);
    display: inline-block;
    transition: background-color 0.35s ease;
}

/* Hover: the fill transitions while the conveyor roll delivers the
   matching text color - outlined buttons fill white with teal letters
   rolling in; the primary inverts to teal with white letters */
.btn-secondary:hover{
    background-color: var(--c-white);
}

.btn-secondary .char-bottom{
    color: var(--c-deep-teal);
    -webkit-text-stroke-width: 0;
}

.btn-primary:hover{
    background-color: var(--c-deep-teal);
}

.btn-primary{
    background-color: var(--c-white);
    color: var(--c-deep-teal);
    padding: 18px 36px;
}

/* the primary's rolling copy lands white on the teal hover fill */
.btn-primary .char-bottom{
    color: var(--c-white);
    -webkit-text-stroke-width: 0;
}

.btn-secondary{
    border: 1px solid var(--c-white);
    padding: 17px 36px;
}

/* =========== LANDING PAGE (HERO) =========== */
#landing{
    position: relative;      /* anchors the crest emblem */
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 44px 72px 56px;
    box-sizing: border-box;
    /* Unsplash filler — swap the URL for the final barbell shot */
    background-image: linear-gradient(115deg,
        rgba(88, 148, 142, 0.85),
        rgba(56, 114, 108, 0.86) 50%,
        rgba(30, 80, 74, 0.90)),
        url("assets/hero-bg.jpg");
    background-size: cover;
    background-position: center;
    background-color: var(--c-light-teal);   /* placeholder until the photo lands */
}

.hero-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--hairline-light);
}

.logo{
    font-family: var(--font-logo);
    font-size: 26px;
    letter-spacing: 1px;
}

/* service-area line under the wordmark: left hairline + tracked
   regions, the local-business signal right at the top of the page */
.logo-area{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 2.5px;
    opacity: 0.85;
}

.logo-area::before{
    content: "";
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.hero-nav{
    display: flex;
    gap: 44px;
}

.hero-nav a{
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 3.5px;
    color: var(--c-white);
    text-decoration: none;
}

/* the header's right counterweight: Junard's socials. currentColor
   paints both marks white (fill for IG, stroke for TikTok). */
.hero-socials{
    display: flex;
    align-items: center;
    gap: 14px;
}

.hero-socials a{
    display: block;
    color: var(--c-white);
    transition: opacity 0.3s ease;
}

.hero-socials a:hover{
    opacity: 0.6;
}

.hero-socials svg{
    display: block;
    width: 21px;
    height: 21px;
}

/* Sized so the whole cluster ~= the wordmark's width: with the header's
   1fr/auto/1fr grid, voidRight - voidLeft == logoW - clusterW at EVERY
   viewport, so matching widths balances the whitespace everywhere. */
.social-handle{
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--c-white);
    text-decoration: none;
}

/* below ~1100px the header gets tight: drop the handle text, keep icons */
@media (max-width: 1099px){
    .social-handle{ display: none; }
}

.hamburger{
    display: none;             /* mobile only */
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
}

.hamburger span{
    display: block;
    height: 2px;
    background-color: var(--c-white);
}
.hamburger span:nth-child(1){ width: 26px; }
.hamburger span:nth-child(2){ width: 26px; }
.hamburger span:nth-child(3){ width: 18px; }

.eyebrow{
    margin-top: 64px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 4px;
}

.hero-headline{
    margin-top: 40px;
    font-family: var(--font-display);
    font-weight: 700;
    /* decremented from the 92px comp size so the second line clears
       the hero crest at every width */
    font-size: clamp(34px, 6vw, 86px);
    line-height: 1.02;
}

.hero-headline .outline{
    color: transparent;
    -webkit-text-stroke: 2px var(--c-white);   /* fill -> outline: no fill, stroked */
}

.hero-copy{
    margin-top: 28px;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.65;
    opacity: 0.95;
    max-width: 780px;
}

.hero-bottom{
    margin-top: auto;          /* pins this row to the hero's bottom */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;     /* services line baselines with the buttons */
    gap: 24px;
}

.services-line{
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 2.5px;
    opacity: 0.9;
}

.hero-ctas{
    display: flex;
    gap: 20px;
}

/* Mobile hero (comp right side) */
@media (max-width: 1024px){
    #landing{ padding: 24px 24px 32px; }
    .logo{ font-size: 19px; }
    .hero-nav, .hero-socials{ display: none; }
    .hamburger{ display: flex; }
    .eyebrow{ margin-top: 56px; font-size: 10px; letter-spacing: 3px; }
    .hero-headline{ margin-top: 28px; font-size: 30px; line-height: 1.08; }
    .hero-headline .outline{ -webkit-text-stroke-width: 1.2px; }
    .hero-copy{ margin-top: 18px; font-size: 14px; line-height: 1.6; }
    .hero-bottom{ flex-direction: column; align-items: stretch; gap: 20px; }
    .services-line{ font-size: 11px; letter-spacing: 1.5px; }
    .hero-ctas{ flex-direction: column; gap: 12px; width: 100%; }
    .hero-ctas .btn{ text-align: center; padding: 17px 0; width: 100%; }
}


/* =========== CREDENTIAL TICKER =========== */
.cred-ticker{
    background-color: var(--c-dark-teal);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
    padding: 22px 0;
    /* center-lit: items dissolve into darkness entering and exiting */
    -webkit-mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
            mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
}

.ticker-track{
    display: flex;
    width: max-content;
    animation: tickerScroll 55s linear infinite;   /* translate-only: compositor-cheap */
}

.ticker-seq{
    display: flex;
    align-items: center;
    gap: 64px;
    padding-right: 64px;   /* matches the gap so the -50% loop is seamless */
}

.ticker-item{
    display: flex;
    align-items: center;
    gap: 18px;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: 4px;
    white-space: nowrap;
}

.ticker-sep{
    color: var(--c-light-teal);
    font-size: 12px;
}

.issa-mark{
    height: 64px;
    width: 58px;   /* 200:220 viewBox ratio */
    flex-shrink: 0;
}

@keyframes tickerScroll{
    to{ transform: translateX(-50%); }
}

/* =========== SERVICES =========== */
/* Each scene is one 100vh screen with an identical 12x5 grid — the two
   halves mirror each other, so one set of rules drives both */
#scenesVideo{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* fill the frame like a background image */
}

.scenes-veil{
    position: absolute;
    inset: 0;
    /* the hero's exact photo-overlay treatment, applied to the footage */
    background: linear-gradient(115deg,
        rgba(88, 148, 142, 0.85),
        rgba(56, 114, 108, 0.86) 50%,
        rgba(30, 80, 74, 0.90));
}

.services-scene{
    height: 100vh;
    width: 100%;
    background: var(--c-white);
    border-top: 1px solid var(--hairline-dark);   /* teal hairline on white */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(5, 1fr);
    position: relative;                          /* anchors label + index */
}

/* Consistency sits on white; the hero's teal gradient lives INSIDE the
   letters via background-clip: text */
#services .wordtransform{
    /* solid teal: background-clip gradients don't survive projection
       through the roll's overflow-hidden char windows */
    color: var(--c-dark-teal);
}

#services .char-bottom{
    -webkit-text-stroke-color: #38726C;   /* outline copy in teal */
}

#services .scene-label{
    color: var(--c-dark-teal);
}

/* =========== PERSEVERANCE (video moment) =========== */
#servicesBot{
    /* 150vh of video scrub + 100vh of copy traversal over the held frame
       + 100vh still-stuck runway shared with the NO EXCUSES wipe */
    height: 350vh;
    position: relative;
}

.copy-viewport{
    position: sticky;
    top: 0;
    height: 100vh;
    margin-top: -100vh;      /* overlap the stage exactly */
    z-index: 2;
    pointer-events: none;
    /* the ticker's edge fade, vertical: fully dissolved AT the 64px top
       rule, fading over the approach; soft materialize at the bottom */
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 64px, black 260px,
        black calc(100% - 70px), transparent 100%);
            mask-image: linear-gradient(to bottom,
        transparent 64px, black 260px,
        black calc(100% - 70px), transparent 100%);
}

.copy-track{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 250vh;           /* scrubbed upward past the masked window */
}

.video-copy{
    position: absolute;
    top: 0;
    height: 250vh;
    width: min(22vw, 340px); /* the image width bounds the text too */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 25vh 0;
    box-sizing: border-box;
}

.video-copy p{
    max-width: 100%;         /* clamp to the column = the image width */
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--c-white);
    opacity: 0.95;
    text-align: center;      /* steps read centered in both columns */
}

/* roadmap step titles: their own line replaces the draft's em-dash.
   Explicit weight - the reset strips strong's default bolding. */
.video-copy p strong{
    display: block;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/* Grouping by proximity: a step's photo hangs 14px under its text,
   and 12vh separates each text+photo pair from the next - the eye
   pairs them without labels. Uniform photo height for symmetry
   (no more flex squish). */
.video-copy img{
    display: block;
    flex: none;
    /* uniform upright rectangles: locked 3:4 portrait so they stay
       tall on every screen (vh sizing went squat on tall windows) */
    width: 85%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    margin: 14px auto 0;     /* centered under the centered text */
}

.video-copy p + img + p,
.video-copy img + p{
    margin-top: 12vh;
}

.video-copy-right img{
    margin-left: auto;       /* right column hugs its edge */
}

.video-copy-left{ left: 6vw; }

.video-copy-right{
    right: 6vw;
    text-align: right;
    padding-top: 60vh;       /* offset so left/right alternate */
}

.video-stage{
    position: sticky;        /* native stick, no pin - "regular scroll" feel */
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.video-stage .scene-label{
    position: absolute;
    top: 28px;
    left: 32px;
    z-index: 2;
}

#perseverance{
    position: sticky;        /* its own layer: sticks with the stage... */
    top: 0;
    height: 100vh;
    margin-top: -100vh;      /* ...overlapping it exactly */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;              /* above the traversal columns (z 2) */
    pointer-events: none;
}

/* =========== TOPO BACKGROUND LINES =========== */
/* All motion is translate/rotate only — scale animations force the browser
   to re-rasterize the layer, which is what caused the lag. Layers are
   oversized so drifting never reveals their edges. */
.topo-bg{
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    z-index: -1;               /* above the section background, below everything else */
    pointer-events: none;
    opacity: 0.18;
}

.topo-a{ animation: topoDriftA 26s ease-in-out infinite; }
.topo-b{ animation: topoDriftB 34s ease-in-out infinite; }

@keyframes topoDriftA{
    0%   { transform: translate(0, 0) rotate(0deg); }
    50%  { transform: translate(-2.5%, 1.5%) rotate(0.6deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes topoDriftB{
    0%   { transform: translate(0, 0) rotate(0deg); }
    50%  { transform: translate(2%, -1.2%) rotate(-0.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

#focusSection .topo-bg{
    color: var(--c-deep-teal);
    opacity: 0.12;
}


.scene-label{
    position: absolute;
    top: 28px;
    left: 32px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 4px;
    opacity: 0.7;
    z-index: 1;
}


/* =========== WORD TRANSFORM =========== */
.wordtransform{
    font-family: var(--font-display);
    font-weight: 700;
    /* 64px at the 1440 comp width, fluid below it, and never wrapping */
    font-size: clamp(30px, 4.4vw, 64px);
    white-space: nowrap;
    color: var(--c-white);
}

.pin-wrapper{
    grid-area: 1 / 4 / 2 / 10;   /* word starts two rows above the handlebar */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========== HANDLEBAR =========== */
.handlebar{
    grid-area: 3 / 4 / 4 / 10;   /* columns 4-9: exactly the gap between the large plates */
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 5;   /* paint above the plates so the blackout covers them */
}

/* =========== PLATES (shared shape) =========== */
.plateLarge, .plateMedium, .plateSmall{
    border-radius: 1.2vmin;    /* softened slab edges, like bumper plates */
    background-size: cover;
    background-position: center;
}

/* Plate photos — server-cropped by Unsplash to each plate's exact tall
   aspect at 2x retina res, so cover barely crops. One unique shot per
   plate. Large 1:6.7 - medium 1:4 - small 1:1.35 */
#topPlateLargeLeft{
    background-image: url("assets/plate-01.jpg");
}
#topPlateLargeRight{
    background-image: url("assets/plate-02.jpg");
}
#topPlateMediumLeft{
    background-image: url("assets/plate-03.jpg");
}
#topPlateMediumRight{
    background-image: url("assets/plate-04.jpg");
}
#topPlateSmallLeft{
    background-image: url("assets/plate-05.jpg");
}
#topPlateSmallRight{
    background-image: url("assets/plate-06.jpg");
}
#botPlateLargeLeft{
    background-image: url("assets/plate-07.jpg");
}
#botPlateLargeRight{
    background-image: url("assets/plate-08.jpg");
}
#botPlateMediumLeft{
    background-image: url("assets/plate-09.jpg");
}
#botPlateMediumRight{
    background-image: url("assets/plate-10.jpg");
}
#botPlateSmallLeft{
    background-image: url("assets/plate-11.jpg");
}
#botPlateSmallRight{
    background-image: url("assets/plate-12.jpg");
}

/* =========== BLACKOUT SERVICES SHOWCASE =========== */
.bar-services{
    position: absolute;
    inset: 0;
    z-index: 6;              /* above the expanded handlebar (z 5) */
    pointer-events: none;
}

.svc-pair{
    position: absolute;
    inset: 0;
}

.svc-pair::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 16%;
    bottom: 16%;
    width: 1px;
    background: rgba(255, 255, 255, 0.28);   /* white divider on the black fill */
}

.svc-pair{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw;
    align-content: center;
    padding: 8vh 10vw;
    visibility: hidden;      /* timeline fades each pair in and out */
    opacity: 0;
}

.svc-card{
    color: var(--c-white);
    max-width: 34vw;
}

.svc-card img{
    width: 100%;
    height: 34vh;
    object-fit: cover;
    display: block;
}

.svc-card h3{
    margin-top: 22px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(18px, 1.8vw, 26px);
}

.svc-card em{
    display: block;
    margin-top: 6px;
    font-style: italic;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--c-light-teal);
}

.svc-card p{
    margin-top: 14px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.65;
    opacity: 0.9;
}

/* =========== CHAR ROLL STRUCTURE =========== */

.char-window {
  display: inline-block;
  overflow: hidden;        /* THE CLIP */
  height: 1em;             /* window is one letter tall */
  vertical-align: top;
  width: fit-content;
}
.char-track {
  display: flex;
  flex-direction: column;  /* stack the two copies */
}
.char-top, .char-bottom {
  height: 1em;             /* each copy one letter tall */
  display: block;
  font-size: inherit;    /* or 64px */
  color: inherit;        /* or white */
}
.char-bottom {
  /* the outline version the roll reveals: no fill, stroked */
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-white);
}


/* =========== TOP LEFT SIDE PLATES =========== */ 
#topPlateLargeLeft{
    background-color: var(--c-dark-teal);
    grid-area: 1 / 3 / 6 / 4;
    /* grid-area: row-start / column-start / row-end / column-end; */
    width: 100%;
    height: 100%;
}

#topPlateMediumLeft{
    background-color: var(--c-light-teal);
    grid-area: 2 / 2 / 5 / 3;
    /* grid-area: row-start / column-start / row-end / column-end; */
    width: 100%;
    height: 100%;
}

#topPlateSmallLeft{
    background-color: var(--c-white);
    grid-area: 3 / 1 / 4 / 2;
    /* grid-area: row-start / column-start / row-end / column-end; */
    width: 100%;
    height: 100%;
}
/* =========== TOP RIGHT SIDE PLATES =========== */ 
#topPlateLargeRight{
    background-color: var(--c-dark-teal);
    grid-area: 1 / 10 / 6 / 11;
    /* grid-area: row-start / column-start / row-end / column-end; */
    width: 100%;
    height: 100%;
}

#topPlateMediumRight{
    background-color: var(--c-light-teal);
    grid-area: 2 / 11 / 5 / 12;
    /* grid-area: row-start / column-start / row-end / column-end; */
    width: 100%;
    height: 100%;
}

#topPlateSmallRight{
    background-color: var(--c-white);
    grid-area: 3 / 12 / 4 / 13;
    /* grid-area: row-start / column-start / row-end / column-end; */
    width: 100%;
    height: 100%;
}
/* =========== BOTTOM SIDE PLATES =========== */
/* Same grid positions as the top scene — the sections mirror each other */
/* =========== BOTTOM LEFT SIDE PLATES =========== */
#botPlateLargeLeft{
    background-color: var(--c-dark-teal);
    grid-area: 1 / 3 / 6 / 4;
    width: 100%;
    height: 100%;
}

#botPlateMediumLeft{
    background-color: var(--c-light-teal);
    grid-area: 2 / 2 / 5 / 3;
    width: 100%;
    height: 100%;
}

#botPlateSmallLeft{
    background-color: var(--c-white);
    grid-area: 3 / 1 / 4 / 2;
    width: 100%;
    height: 100%;
}

/* =========== BOTTOM RIGHT SIDE PLATES =========== */
#botPlateLargeRight{
    background-color: var(--c-dark-teal);
    grid-area: 1 / 10 / 6 / 11;
    width: 100%;
    height: 100%;
}

#botPlateMediumRight{
    background-color: var(--c-light-teal);
    grid-area: 2 / 11 / 5 / 12;
    width: 100%;
    height: 100%;
}

#botPlateSmallRight{
    background-color: var(--c-white);
    grid-area: 3 / 12 / 4 / 13;
    width: 100%;
    height: 100%;
}
/* =========== PLATE COLLAGE (overlap + cut borders) =========== */
/* Plates run 150% of their cells and shingle with PARTIAL overlaps, so
   each stays a full column-plus visible (the outer smalls bleed off
   screen like the reference). justify-self pins the gap-side edges to
   the gap lines, so the handlebar's touch points are layout-guaranteed.
   Each behind plate's mask stops 12px short of the plate in front - the
   background cuts a border around the overlap. */
#topPlateSmallLeft, #topPlateMediumLeft, #topPlateLargeLeft{
    width: 150%;
    justify-self: end;       /* right edges pinned to their grid lines */
}

#topPlateSmallRight, #topPlateMediumRight, #topPlateLargeRight{
    width: 150%;
    justify-self: start;     /* left edges pinned to their grid lines */
}

#topPlateLargeLeft, #topPlateLargeRight{ z-index: 3; }
#topPlateMediumLeft, #topPlateMediumRight{ z-index: 2; }
#topPlateSmallLeft, #topPlateSmallRight{ z-index: 1; }

#topPlateSmallLeft, #topPlateMediumLeft{
    -webkit-mask-image: linear-gradient(to right, #000 calc(66.7% - 12px), transparent calc(66.7% - 12px));
            mask-image: linear-gradient(to right, #000 calc(66.7% - 12px), transparent calc(66.7% - 12px));
}

#topPlateSmallRight, #topPlateMediumRight{
    -webkit-mask-image: linear-gradient(to left, #000 calc(66.7% - 12px), transparent calc(66.7% - 12px));
            mask-image: linear-gradient(to left, #000 calc(66.7% - 12px), transparent calc(66.7% - 12px));
}

/* =========== END OF SERVICES SECTION =========== */

/* =========== NO EXCUSES (horizontal scroll) =========== */
#noExcuses{
    height: 100vh;
    width: 100%;
    /* Pull this section up so its pin starts right as the video scrub
       and copy traversal finish - the stage still has 100vh of sticky
       runway left, so it holds perfectly still under the wipe */
    margin-top: -200vh;
    position: relative;
    z-index: 5;            /* the wipe must cover the traversal columns (z 2) */
    overflow: hidden;      /* the wide track must never widen the page */
}

#noExcusesPanel{
    width: 100%;
    height: 100%;
    background: linear-gradient(115deg, #0F2D29, #06110F);   /* near-black teal fade */
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;    /* anchors the strike line */
}

#strikeLine{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3vh;
    margin-top: -1.5vh;    /* center the stroke on the word's midline */
    background-color: white;
    mix-blend-mode: difference;   /* inverts whatever it crosses: black over the
                                     white letters, white over the black panel */
    transform: scaleX(0);
    transform-origin: left center;
}

.h-track{
    display: flex;
    align-items: center;
    width: max-content;    /* size to the text so scrollWidth measures the real span */
    padding-left: 60vw;    /* text starts partly off to the right */
}

#noExcusesWord{
    font-size: 40vh;
    color: white;
    white-space: nowrap;
    padding-right: 10vw;
}


/* =========== FOCUS (sticky square + paragraphs) =========== */
#focusSection{
    height: 300vh;               /* ~200vh of reading once the square sticks */
    background-color: white;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 5vw;
    padding: 0 6vw;
    position: relative;
    isolation: isolate;          /* topo layer under content, over the white */
}

.focus-square{
    width: 30vmin;
    height: 60vmin;              /* doubled: a tall portrait card */
    background-color: var(--c-deep-teal);
    position: relative;
    /* helmet-card silhouette: stepped notch carved into the bottom-right.
       Y-points compressed for the doubled height so the notch keeps its
       original visual size. The scripted pre-expansion tween morphs this
       back to a full rectangle (same seven points) before the fill. */
    clip-path: polygon(0 0, 100% 0, 100% 84%, 90% 88%, 90% 96%, 82% 100%, 0 100%);
    align-self: start;
    margin-top: 60vh;                /* rides up with the scroll first... */
    position: sticky;
    top: calc(50vh - 30vmin);        /* ...then sticks the moment it's centered */
    z-index: 2;                      /* covers the paragraphs when it expands */
}

.focus-copy{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    color: var(--c-deep-teal);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
}

/* numbered titles sit on their own line (explicit weight: the reset
   strips strong's default bolding) */
.focus-copy p strong{
    display: block;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.focus-copy{
    padding-bottom: 100vh;   /* content lives in the top 200vh - the last
                                stretch belongs to the square's expansion */
    box-sizing: border-box;
}

.focus-copy p{
    max-width: 30ch;
}

.focus-right{
    padding-top: 60vh;               /* offset so left/right paragraphs alternate */
}

/* =========== WHAT THE FUTURE YOU WILL SAY =========== */
/* Deep teal on purpose: the focus square expands into exactly this color,
   so the finale dissolves straight into this section */
#futureSay{
    background-color: var(--c-deep-teal);
    border-top: 1px solid var(--hairline-light);
    border-bottom: 1px solid var(--hairline-light);
    padding: 110px 6vw 90px;
    text-align: center;
    position: relative;
}

#futureSay .scene-label{
    position: absolute;
    top: 28px;
    left: 32px;
}

.future-heading{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 3.6vw, 52px);
    line-height: 1.1;
}

.future-heading .outline{
    color: transparent;
    -webkit-text-stroke: 1.5px var(--c-white);
}

.carousel{
    display: flex;
    align-items: center;
    gap: 3vw;
    max-width: 980px;
    margin: 70px auto 0;
}

.car-viewport{
    overflow: hidden;
    flex: 1;
}

.car-track{
    display: flex;
}

.car-slide{
    flex: 0 0 100%;
    padding: 0 8px;
    box-sizing: border-box;
}

.car-slide blockquote{
    font-weight: 500;
    font-size: clamp(16px, 1.5vw, 21px);
    line-height: 1.7;
    max-width: 46ch;
    margin: 0 auto;
    opacity: 0.95;
}

.car-slide figcaption{
    margin-top: 38px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.car-slide figcaption strong{
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--c-light-teal);
}

.car-slide figcaption span{
    font-size: 13px;
    opacity: 0.7;
}

.car-arrow{
    background: none;
    border: none;
    color: var(--c-white);
    font-size: 52px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    transition: color 0.2s;
}

.car-arrow:hover{
    color: var(--c-light-teal);
}

.car-dots{
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 54px;
}

.car-dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0;
}

.car-dot.active{
    background-color: transparent;
    border: 1.5px solid var(--c-light-teal);
    transform: scale(1.3);
}

/* =========== INSET HAIRLINE FRAMES =========== */
/* Horizontal rule under the top edge (labels sit above it), verticals
   down the side margins - white on teal/imagery, teal on white */
/* NOTE: no position here - the hosts are already positioned, and
   forcing relative would override .video-stage's sticky */
.frame-light::after, .frame-dark::after{
    content: "";
    position: absolute;
    inset: 64px 28px 28px;
    border: 1px solid var(--hairline-light);
    border-bottom: none;
    pointer-events: none;
    z-index: 3;
}

.frame-dark::after{
    border-color: var(--hairline-dark);
}

/* =========== SCROLL RAIL =========== */
/* Fixed home control, bottom-left. Hidden over the hero (.visible
   toggled by the rail's scroll updater); color mirrors the rail's
   background probe: teal over light sections, white over dark. */
.home-btn{
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 55;                 /* under the mobile menu (60) */
    width: 44px;                 /* full-size tap target */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-white);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s, color 0.4s;
}

.home-btn.visible{
    opacity: 1;
    visibility: visible;
}

.home-btn.on-light{
    color: var(--c-dark-teal);
}

.home-btn svg{
    display: block;
    width: 24px;
    height: 24px;
}

/* hover: the house interior fills with whatever the probe's outline
   color currently is (currentColor keeps the chameleon behavior) */
.home-btn .home-fill{
    opacity: 0;
    transition: opacity 0.3s ease;
}

.home-btn:hover .home-fill{
    opacity: 1;
}

.scroll-rail{
    position: fixed;
    /* 28 = 44 - 32/2: keeps the treadmill's CENTER at 44/44 from its
       corner, exactly mirroring the home glyph's center on the left */
    right: 28px;
    bottom: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 60;
    pointer-events: none;
    color: var(--c-white);           /* dark backgrounds: white */
    transition: color 0.4s;
}

.scroll-rail.on-light{
    color: var(--c-dark-teal);       /* light backgrounds: our teal */
}

/* SCROLL is a hero-only hint: it breathes while the user sits on the
   landing screen, then fades out for good once they scroll on (the
   .past-hero class rides the same signal as the home button). */
.scroll-rail-label{
    writing-mode: vertical-rl;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    transition: opacity 0.5s ease;
    animation: scrollPulse 2.4s ease-in-out infinite;
}

.scroll-rail.past-hero .scroll-rail-label{
    animation: none;
    opacity: 0;
}

@keyframes scrollPulse{
    0%, 100%{ opacity: 0.25; }
    50%{ opacity: 1; }
}

/* the progress treadmill, running DOWN the page: rotate(90deg) after
   the mirror puts the deck vertical on the LEFT (facing the content),
   the runner horizontal with his head at the right edge, and his
   stride pointing down. The machine ghost fills top-to-bottom with
   scroll (clip axis matches in JS). Inherits the rail's probed color. */
.rail-tread{
    display: block;
    /* 32px: legible as a gauge; strokes render at 2px, a touch
       heavier than the home glyph's 1.5 - centers stay mirrored */
    width: 32px;
    height: 32px;
}

/* =========== TRANSFORMATIONS (mask grid) =========== */
/* Deep teal on purpose: the filled focus square rides up into this
   section invisibly - the fill becomes the content. */
#transformSection{
    background-color: var(--c-deep-teal);
    border-bottom: 1px solid var(--hairline-light);
    /* no top padding: beat 1 carries its own 10vh and must start the
       instant the curtain fill hands off */
    padding: 0 0 40px;
    position: relative;
}

/* Desktop: the old dead hand-off viewport IS beat 1. The section
   overlaps the focus section's final 100vh (z above the square's z2)
   with a TRANSPARENT background - body is the same deep teal, so the
   square exits invisibly behind it - and rides up hidden while the
   expansion plays beneath. At fill completion the section top is
   already at the viewport top: beat 1 and the inset frame just fade
   in, settled in place (JS scrubs the fade + --workFrameFade).
   Total: fill -> beat 1 (1 viewport) -> beat 2 (1 viewport). */
@media (min-width: 1025px){
    #transformSection{
        margin-top: -100vh;
        z-index: 3;
        background-color: transparent;
    }
}

#transformSection .scene-label{
    position: absolute;
    top: 28px;
    left: 32px;
}

/* THE WORK stats row: ghost outlined numerals (house signature) over
   tracked labels. Grid centers the trio; mobile stacks them. */
.work-stats{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4vw;
    max-width: 1000px;
    margin: 60px auto 0;
    padding: 0 8vw;
    text-align: center;
}

.work-num{
    display: block;
    font-family: var(--font-display);   /* Syne, like the landing display */
    font-weight: 800;
    font-size: clamp(54px, 7vw, 110px);
    color: var(--c-white);              /* solid - no outline */
    line-height: 1;
}

.work-lbl{
    display: block;
    margin-top: 16px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 3.5px;
    color: var(--c-white);
}

@media (max-width: 1024px){
    .work-stats{ grid-template-columns: 1fr; gap: 40px; margin: 50px auto 40px; }
}

.transform-head{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 3.6vw, 52px);
    line-height: 1.1;
    text-align: center;
    margin-bottom: 48px;
}

/* Two-beat chapter: each panel is a full viewport with its content
   centered - the curtain hands into a section with real presence
   instead of a short drive-by. */
/* One-viewport composition: FULL-HEIGHT visual filling the left half
   (reference build - white upper field, city band below, the cutout
   standing across the seam), copy column right. */
.work-panel{
    /* no position here: the visual anchors to the SECTION so it spans
       the full viewport height including the section's own padding */
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10vh 8vw 10vh 57%;
}

.work-visual{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 52%;
    overflow: hidden;
    /* dissolve rightward into the section teal before the copy - the
       mask trilogy's edge-fade, horizontal */
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 97%);
            mask-image: linear-gradient(to right, #000 55%, transparent 97%);
}

.work-photo{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* the hero's teal-gradient image treatment (user-approved color
   range), ending near deep teal so the right-edge dissolve stays
   seamless */
.work-visual::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        rgba(88, 148, 142, 0.82),
        rgba(56, 114, 108, 0.86) 50%,
        rgba(20, 63, 58, 0.92));
}

/* topo contour accent riding above the tint (same rings as the focus
   section), quiet white strokes */
.work-topo{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--c-white);
    opacity: 0.16;
    z-index: 2;
}

.work-copy .transform-head{
    text-align: left;
    margin-bottom: 0;
    font-size: clamp(28px, 3.6vw, 54px);
}

/* stats as a vertical run down the column, numeral + label per row */
.work-copy .work-stats{
    margin: 30px 0 0;
    padding: 0;
    max-width: none;
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: start;
    text-align: left;
}

.work-copy .work-stat{
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.work-copy .work-num{
    font-size: clamp(32px, 3.2vw, 56px);
}

.work-copy .work-lbl{
    margin-top: 0;
}

.work-copy .transform-copy{
    text-align: left;
    margin: 26px 0 0;
    padding: 0;
}

@media (max-width: 1024px){
    /* mobile keeps it simple: no visual, no fill choreography - the
       section is just the text, flowing in normally */
    /* top padding clears the absolute scene-label - the heading was
       overlapping [ 04 - THE WORK ] */
    .work-panel{ min-height: 0; padding: 96px 8vw 6vh; }
    .work-visual{ display: none; }
}

.transform-copy{
    max-width: 58ch;
    margin: 48px auto 0;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    opacity: 0.9;
    padding: 0 6vw;
}

.transform-copy + .transform-copy{
    margin-top: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* The wrapper's ::before/::after are giant bg-colored ellipses hanging
   over the strip's edges - their curves carve concave arcs across the
   whole image row (technique: dillionmegida's nice-mask-image-grid) */
.mask-grid-wrapper{
    position: relative;
    overflow: hidden;
    --x-offset: -60px;
    --y-offset: -70px;
}

.mask-grid-wrapper::before,
.mask-grid-wrapper::after{
    content: "";
    position: absolute;
    height: 130px;
    background-color: var(--c-deep-teal);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.mask-grid-wrapper::before{
    inset: var(--y-offset) var(--x-offset) 0;
    bottom: unset;
}

.mask-grid-wrapper::after{
    inset: 0 var(--x-offset) var(--y-offset);
    top: unset;
}

.mask-grid{
    display: flex;
    justify-content: safe center;   /* centered when it fits, scrollable when not */
    gap: 20px;
    overflow-x: auto;
    padding: 0 40px;
    scrollbar-width: none;
}

.mask-grid::-webkit-scrollbar{ display: none; }

.mask-grid img{
    height: min(560px, 28vw);       /* sized so five always fit - center never clips */
    display: block;
    flex-shrink: 0;
}

/* =========== ABOUT JUNARD =========== */
#aboutSection{
    background: var(--c-white);
    border-top: 1px solid var(--hairline-dark);
    color: var(--c-deep-teal);
    position: relative;
    padding: 140px 8vw;
}

#aboutSection .scene-label{
    position: absolute;
    top: 28px;
    left: 32px;
    color: var(--c-dark-teal);
}

.about-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.about-collage{
    position: relative;
    height: 640px;
}

.collage-img{
    position: absolute;
}

/* height:auto everywhere the HTML width/height attrs exist: the attrs
   feed the browser the aspect ratio (CLS reservation), but without CSS
   height:auto the raw height ATTRIBUTE would apply as literal pixels
   wherever CSS only sets width - the collage grew to 920px tall the
   first time. */
.collage-img img,
.about-inline-img,
.hero-crest,
.footer-crest{
    height: auto;
}

.collage-img img{
    display: block;
    width: 100%;
}

.collage-a{ top: 0;    left: 0;   width: 55%; z-index: 1; }
.collage-b{ top: 26%;  right: 4%; width: 46%; z-index: 2; }
.collage-c{ bottom: 0; left: 10%; width: 52%; z-index: 3; }

/* Breathing room between overlaps: each image that sits ON TOP carries a
   solid white outline built from stacked drop-shadows (they chain, so the
   four cardinals dilate into full corner coverage). The outline follows
   the clipped silhouette, is invisible over the white page, and is a
   CONSTANT 12px at every resolution — unlike the old mask-stop cutouts,
   which were viewport-tuned percentages and collided at other widths.
   12px matches the plate-collage overlap borders. Static images: the
   filter paints once, no per-frame cost. */
.collage-b,
.collage-c{
    filter: drop-shadow(12px 0 0 var(--c-white))
            drop-shadow(-12px 0 0 var(--c-white))
            drop-shadow(0 12px 0 var(--c-white))
            drop-shadow(0 -12px 0 var(--c-white));
}

/* Helmet-card notches (echoes the focus-square silhouette). A and C carry
   the notch bottom-LEFT — the focus polygon mirrored (every x -> 100-x),
   B keeps it bottom-RIGHT like the original card. The clip lives on the
   inner img so the wrapper's drop-shadow outline can trace it. */
.collage-a img{
    /* y-deltas 1.5x the card's (84/88/96 -> 76/82/94): these are landscape
       boxes, so the deeper cut keeps the notch taller-than-wide like the
       original portrait card instead of squashing it. */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%, 10% 94%, 10% 82%, 0 76%);
}

.collage-c img{
    /* the bottom card clicks into the middle one: its own bottom-left
       cut plus the interlock cut at the TOP-RIGHT (the bottom cut
       rotated 180deg), mating with B's bottom-left */
    clip-path: polygon(0 0, 82% 0, 90% 6%, 90% 18%, 100% 24%, 100% 100%, 18% 100%, 10% 94%, 10% 82%, 0 76%);
}

.collage-b img{
    /* interlock: the approved top-left stepped cut, mirrored onto the
       bottom-left (where C clicks in). The outer right edge stays
       clean - no clip. */
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 18% 100%, 10% 96%, 10% 88%, 0 84%, 0 16%, 10% 12%, 10% 4%);
}

.about-copy h2{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(30px, 3.4vw, 52px);
    line-height: 1.08;
}

.about-copy p{
    margin-top: 26px;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.7;
    max-width: 54ch;
}

.about-copy .about-emphasis{
    font-style: italic;
    font-weight: 700;
}

.btn-solid{
    display: inline-block;
    margin-top: 40px;
    background: var(--c-deep-teal);
    color: var(--c-white);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 3px;
    text-decoration: none;
    padding: 18px 36px;
}

/* desktop: the inline story images stay out of the flow entirely */
.about-inline-img{ display: none; }

@media (max-width: 1024px){
    .about-grid{ grid-template-columns: 1fr; }
    /* the absolute collage reads as scattered thumbnails at phone
       width - swap it for full-width photos between the paragraphs */
    .about-collage{ display: none; }
    .about-inline-img{
        display: block;
        width: 100%;
        margin-top: 30px;
    }
}


/* =========== CONTACT FORM =========== */
/* =========== CONTACT =========== */
#contactSection{
    background: var(--c-white);
    color: var(--c-deep-teal);
    position: relative;
    padding: 140px 8vw 120px;
    border-top: 1px solid var(--hairline-dark);
}

#contactSection .scene-label{
    position: absolute;
    top: 28px;
    left: 32px;
    color: var(--c-dark-teal);
}

.contact-grid{
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 7vw;
    max-width: 1300px;
    margin: 0 auto;
    align-items: start;
}

.contact-index{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 4.5vw, 72px);
    display: block;
}

.contact-intro p{
    margin-top: 30px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.75;
    max-width: 48ch;
}

/* the intro column's closer: display type in the house dress.
   Two selectors, not one: .contact-intro p (0-1-1) outguns a lone class
   (0-1-0) on font-size, so the word must match its specificity class. */
.contact-intro .contact-cta-word{
    margin-top: 44px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(34px, 3.8vw, 58px);
    line-height: 1.05;
    color: var(--c-dark-teal);
}

.contact-form label{
    display: block;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 26px;
}

/* Netlify honeypot: present in the DOM so bots auto-fill it, invisible to
   people. A filled bot-field = submission silently discarded by Netlify. */
.contact-form .hidden-field{
    display: none;
}

.contact-form input,
.contact-form textarea{
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px 2px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    color: var(--c-deep-teal);
    background: none;
    border: none;
    border-bottom: 2px solid var(--c-deep-teal);   /* the reference's white rules, in teal */
    resize: vertical;
}

.contact-form ::placeholder{
    color: rgba(20, 63, 58, 0.6);   /* 0.45 sat below AA contrast */
}

/* Focus must be VISIBLE (WCAG 2.4.7): a 1px border color swap alone is
   too subtle, so keyboard focus gets a real outline. :focus-visible
   keeps mouse clicks outline-free. */
.contact-form input:focus,
.contact-form textarea:focus{
    outline: none;
    border-bottom-color: var(--c-light-teal);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible{
    outline: 2px solid var(--c-dark-teal);
    outline-offset: 3px;
}

/* SUBMIT wears the hero SERVICES treatment, palette inverted for the
   white section: outlined + transparent at rest, and on hover the
   body fills deep teal while WHITE letters roll in - the char-bottom
   is pre-colored for the fill, so the roll IS the transition. */
.contact-form .btn-solid{
    cursor: pointer;
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: 14px;          /* type matches the hero SERVICES button */
    letter-spacing: 3.5px;
    background: transparent;
    color: var(--c-deep-teal);
    border: 1px solid var(--c-dark-teal);
    transition: background-color 0.35s ease;
}

.contact-form .btn-solid:hover{
    background-color: var(--c-deep-teal);
}

.contact-form .btn-solid .char-bottom{
    color: var(--c-white);
    /* the generic roll dresses incoming letters in the outline-text
       stroke; at button size it swallows the glyphs and spills the
       char windows (the "clipping"). The hero buttons zero it - so
       do we. */
    -webkit-text-stroke-width: 0;
}

@media (max-width: 1024px){
    .contact-grid{ grid-template-columns: 1fr; }
}

/* =========== FOOTER =========== */
#siteFooter{
    background-color: var(--c-deep-teal);
    color: var(--c-white);
    border-top: 1px solid var(--hairline-light);
    padding: 90px 8vw 40px;
}

.footer-grid{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 5vw;
    align-items: start;
}

.footer-logo{
    font-family: var(--font-logo);
    font-size: 30px;
    letter-spacing: 1px;
    line-height: 1.25;
}

.footer-tag{
    margin-top: 20px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 2.5px;
    line-height: 1.8;
    opacity: 0.65;
    max-width: 44ch;
}

.footer-label{
    display: block;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--c-light-teal);
    margin-bottom: 20px;
}

.footer-col p{
    font-weight: 500;
    font-size: 14px;
    line-height: 1.9;
    opacity: 0.85;
}

.footer-link{
    display: inline-block;
    margin-top: 22px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--c-white);
    text-decoration: none;
}

.footer-bottom{
    margin-top: 70px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.55;
}

.footer-social{
    display: flex;
    gap: 34px;
}

.footer-social a{
    color: var(--c-white);
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 1024px){
    .footer-grid{ grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom{ flex-direction: column; gap: 16px; }
}

/* =========== MOBILE RESPONSIVE PASS =========== */
@media (max-width: 1024px){
    /* ticker scales down */
    .ticker-item{ font-size: 15px; letter-spacing: 2.5px; gap: 12px; }
    .issa-mark{ height: 46px; width: 42px; }
    .ticker-seq{ gap: 36px; padding-right: 36px; }

    /* the rail crowds small screens */
    .scroll-rail{ display: none; }

    /* scene words fit their grid gap; labels and ghost numerals shrink */
    .wordtransform{ font-size: clamp(15px, 5vw, 64px); }
    #perseverance{ font-size: clamp(26px, 9vw, 64px); }   /* full-width stage */
    .scene-label{ left: 20px; font-size: 10px; letter-spacing: 2.5px; }

    /* blackout services stack singly, divider off */
    .svc-pair{ grid-template-columns: 1fr; gap: 3vh; padding: 6vh 8vw; }
    .svc-pair::after{ display: none; }
    .svc-card{ max-width: 100%; }
    .svc-card img{ height: 16vh; }
    .svc-card h3{ margin-top: 10px; }
    .svc-card p{ font-size: 12px; line-height: 1.5; margin-top: 8px; }
    .svc-card em{ margin-top: 4px; }

    /* carousel arrows tighten */
    .carousel{ gap: 4vw; margin-top: 50px; }
    .car-arrow{ font-size: 34px; }

    /* traversal columns get readable widths */
    .video-copy{ width: 40vw; }
    .video-copy p{ font-size: 1rem; line-height: 1.45; }
    .video-copy-left{ left: 5vw; }
    .video-copy-right{ right: 5vw; }

    /* focus section: one column; copy chips stay readable when they
       pass over the stuck teal square */
    #focusSection{ grid-template-columns: 1fr; padding: 0 8vw; }
    .focus-square{ justify-self: center; }
    .focus-copy p{
        background: var(--c-white);
        padding: 10px 14px;
        max-width: 100%;
        font-size: 1rem;
    }
    .focus-right{ padding-top: 0; }

    /* inset frames hug smaller margins */
    .frame-light::after, .frame-dark::after{ inset: 56px 14px 14px; }

    /* transformations strip scrolls at a usable size */
    .mask-grid img{ height: 60vw; }
    .transform-head{ margin-bottom: 36px; }

    /* contact breathes */
    #contactSection{ padding: 100px 8vw 80px; }
}

/* =========== MOBILE REDESIGNS (desktop untouched) =========== */
@media (max-width: 1024px){
    /* 1) The barbell simplifies to its icon: one bold plate per side.
       The shingled mediums/smalls can't read at sliver widths. */
    #topPlateMediumLeft, #topPlateSmallLeft,
    #topPlateMediumRight, #topPlateSmallRight{
        display: none;
    }
    #topPlateLargeLeft{
        grid-area: 1 / 1 / 6 / 4;
        width: 100%;
        justify-self: stretch;
    }
    #topPlateLargeRight{
        grid-area: 1 / 10 / 6 / 13;
        width: 100%;
        justify-self: stretch;
    }

    /* 2) NO EXCUSES stacks: NO on its own line, EXCUSES filling the
       viewport width, the strike re-aimed at the second line */
    #noExcusesWord{
        font-size: 19vw;
        line-height: 1.05;
        white-space: normal;   /* allow the wrap at the space */
        width: 84vw;           /* bounded so it actually wraps (the track
                                  is max-content and would never break it) */
        padding-right: 0;
    }
    .h-track{ padding-left: 8vw; padding-right: 8vw; }
    #strikeLine{ top: calc(50% + 10vw); }

    /* 3) Focus restructures to a simple column: copy reads first, the
       photo closes the section - nothing sticky, nothing overlaps.
       Height is content-driven: the old 240vh floor was for the sticky
       ride and just left a dead white void under the static photo. */
    #focusSection{
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        padding: 14vh 8vw 12vh;
    }
    .focus-copy{ padding: 0; gap: 22px; justify-content: flex-start; }
    .focus-copy p{ background: none; padding: 0; font-size: 1.05rem; max-width: 100%; }
    .focus-right{ padding-top: 0; }
    /* mobile: a regular image per the user's outline - no sticky, no
       clip, no expansion. Capped at 420px so tablet widths don't
       balloon it into a full-screen photo: full-width 4:5 at iPad
       sizes was ~840px tall. 420px keeps its rendered height in the
       same range as the About story photos at every mobile width
       (phones are unaffected - 84vw is already under the cap). */
    .focus-square{
        order: 3;
        /* relative, NOT static: .square-photo is absolute inset:0 and
           needs THIS box as its containing block. Static handed that
           role to #focusSection (position:relative), so the photo
           stretched over the whole section and buried the copy. */
        position: relative;
        /* neutralize the desktop sticky offset: top applies to relative
           elements too, and calc(50vh - 30vmin) was visually shoving
           the photo ~300px below its slot - a phantom gap after the
           copy that layout tools can't see */
        top: auto;
        width: 100%;
        max-width: 420px;
        height: auto;
        /* portrait like the About photos - 1:1 cropped the portrait
           headshot into a giant face */
        aspect-ratio: 4 / 5;
        margin: 30px auto 0;  /* same text-to-photo rhythm as the About
                                 inline images; auto centers under the cap */
        clip-path: none;
    }

    /* 4) Strip: row arcs off; each image gets its own curved top edge
       via mask, with snap scrolling */
    .mask-grid-wrapper::before, .mask-grid-wrapper::after{ display: none; }
    .mask-grid{
        justify-content: flex-start;
        scroll-snap-type: x mandatory;
        padding: 0 8vw;
    }
    .mask-grid img{
        height: 96vw;
        scroll-snap-align: center;
        -webkit-mask-image: radial-gradient(140% 90px at 50% -55px, transparent 98%, #000 100%);
                mask-image: radial-gradient(140% 90px at 50% -55px, transparent 98%, #000 100%);
    }
}

/* Strip tap-nav: desktop never sees it */
.strip-nav{ display: none; }

.strip-arrow{
    background: none;
    border: 1px solid var(--hairline-light);
    color: var(--c-white);
    font-size: 30px;
    line-height: 1;
    padding: 6px 24px;
    cursor: pointer;
}

/* =========== MOBILE FIX ROUND (overrides earlier mobile blocks) =========== */
@media (max-width: 1024px){
    /* 4 + 4.1) Consistency: static barbell banner, word vw-locked to its
       gap (word and gap both scale with viewport width - it can never
       wrap or clip at any resolution), services stack beneath */
    #services{
        height: auto;
        grid-template-rows: repeat(5, 13vw);
        padding-bottom: 10px;
    }
    #consistency{ font-size: 5.6vw; }   /* ~95% of its gap: safety margin for cross-device font metrics */
    .bar-services{
        position: static;
        pointer-events: auto;
        grid-column: 1 / -1;
    }
    .svc-pair{
        position: static;
        inset: auto;
        visibility: visible;
        opacity: 1;
        display: block;
        padding: 26px 8vw 0;
    }
    .svc-card{
        color: var(--c-deep-teal);
        max-width: 100%;
        margin-bottom: 38px;
    }
    .svc-card em{ color: var(--c-dark-teal); }
    .svc-card img{ height: 46vw; width: 100%; object-fit: cover; }
    .svc-card p{ font-size: 14px; }

    /* 1) Transformations: tap carousel, one centered card per tap */
    .strip-nav{
        display: flex;
        justify-content: center;
        gap: 44px;
        margin-top: 28px;
    }
    .mask-grid{ padding: 0 11vw; }
    .mask-grid img{
        width: 78vw;
        height: auto;
        aspect-ratio: 420 / 680;   /* box reserved before the lazy image
                                      loads - no layout shift, tap math
                                      correct from first paint */
    }

    /* 2) NO EXCUSES: single-line traverse like desktop, sized so the
       viewport frames EXCUSES; the wrap experiment is reverted */
    #noExcusesWord{
        font-size: 22vw;
        white-space: nowrap;
        width: auto;
        padding-right: 10vw;
    }
    .h-track{ padding-left: 60vw; padding-right: 10vw; }
    #strikeLine{ top: 50%; }

    /* 3) The stuck word crowded the traversal on phones */
    #perseverance{ display: none; }
}

/* =========== MOBILE POLISH (overrides earlier mobile blocks) =========== */
@media (max-width: 1024px){
    /* Consistency drops the barbell banner entirely on phones -
       the section is just its label and the lazy-fading segments */
    #services .pin-wrapper,
    #services .handlebar,
    #services .plateLarge,
    #services .plateMedium,
    #services .plateSmall{
        display: none;
    }
    #services{
        grid-template-rows: none;
        padding-top: 64px;
    }

    /* Match desktop's proportions: EXCUSES spans the frame edge to
       edge (22.2vw x its 4.44em width = ~98.6vw), and the strike keeps
       desktop's stroke-to-letter ratio (3vh/40vh = 7.5% of font size) */
    #noExcusesWord{
        font-size: 21vw;
        padding-right: 10vw;
    }
    #strikeLine{
        height: 1.6vw;
        margin-top: -0.8vw;
        top: 50%;
    }
}

/* =========== BRAND CREST =========== */
.hero-crest{
    width: min(20vw, 300px);
    opacity: 0.95;
    pointer-events: none;
}

/* Centered poster hero (desktop): crest anchors the middle, type wraps
   around it - headline above, copy below, actions in the corners */
@media (min-width: 1025px){
    /* true-centered nav: 3-column grid, links spread wide, CTA larger */
    .hero-header{
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    .hero-header .logo-lockup{ justify-self: start; }
    /* The poster's centering axis is the crest's vertical centerline (==
       the hero's midline). The nav block was already centered, but inside
       it SERVICES sat between unequal neighbors (ABOUT JUNARD is wider
       than CONTACT), pushing it off-axis by half the difference. A
       1fr/auto/1fr grid equalizes the flanks (fr tracks in a fit-content
       grid both resolve to the larger content), pinning SERVICES to the
       axis while both gaps stay 72px. */
    .hero-nav{
        justify-self: center;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 72px;
    }
    .hero-nav a{ font-size: 14px; }
    .hero-nav a:first-child{ justify-self: end; }
    .hero-nav a:last-child{ justify-self: start; }
    /* letter-spacing trails the last char too - a centered tracked text
       sits half a track left of true center; pad it back */
    .hero-nav a:nth-child(2){ padding-left: 3.5px; }
    .hero-socials{ justify-self: end; }

    .eyebrow{
        text-align: center;
        margin-top: 28px;
        padding-left: 4px;    /* balances the trailing 4px letter-spacing */
    }
    .hero-headline{
        text-align: center;
        margin-inline: auto;
        margin-top: 18px;
        font-size: clamp(30px, 4.6vw, 64px);   /* shorter headline lifts the crest */
    }
    .hero-crest{
        display: block;
        /* the flexible member of the hero column: grows to consume the
           leftover space above the services line - no gap, max logo */
        flex: 1 1 auto;
        min-height: 0;
        width: auto;
        max-width: min(34vw, 520px);
        object-fit: contain;
        margin: 30px auto 28px;   /* air between headline and services line */
    }
    .hero-copy{ display: none; }   /* poster drops the paragraph (mobile keeps it) */
    .hero-bottom{
        flex-direction: column;   /* poster stack: services line, then buttons */
        align-items: center;
        gap: 22px;
    }
    .services-line{
        text-align: center;       /* promoted: it carries the copy's job now */
        font-size: 16px;
        letter-spacing: 4px;
        padding-left: 4px;        /* balances the trailing letter-spacing */
    }
    /* Equal-width CTAs: two 1fr tracks both resolve to the wider button's
       content, so the pair is symmetric about the axis and the GAP midline
       lands exactly on it - with flex, the wider BOOK A SESSION shoved the
       gap off-center by half the width difference. */
    .hero-ctas{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .hero-ctas .btn{
        font-size: 14px;
        letter-spacing: 3.5px;
        padding: 16px 36px;       /* matches the nav CTA */
        text-align: center;
    }
}

.footer-crest{
    display: block;
    width: 210px;
}

@media (max-width: 1024px){
    .hero-crest{ display: none; }   /* the phone hero is already dense */
    .footer-crest{ width: 165px; }
}

/* Junard's photo inside the shaped card; the pre-expansion tween fades
   it out so the fullscreen fill and curtain stay clean teal */
.square-photo{
    position: absolute;
    inset: 0;
    background: url("assets/junard-headshot.jpg") center / cover no-repeat;
}


/* =========== MOBILE MENU (hamburger overlay) =========== */
.mobile-menu{
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--c-deep-teal);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 44px;
}

.mobile-menu[hidden]{ display: none; }   /* display:flex would beat the attr */

.mobile-menu nav{
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: center;
}

.mobile-menu nav a{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    color: var(--c-white);
    text-decoration: none;
}

.mobile-menu-socials{ display: flex; gap: 24px; }

.mobile-menu-socials a{
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--c-white);
    text-decoration: none;
    opacity: 0.85;
}

/* =========== REDUCED MOTION =========== */
/* Self-animating motion stops for prefers-reduced-motion users: the
   marquee and the ambient topo drift run unprompted and indefinitely
   (WCAG 2.2.2 / 2.3.3). Scroll-scrubbed scenes stay: they move only
   as far and as fast as the user scrolls. JS side: Lenis smoothing
   and the nav fade also check this preference. */
@media (prefers-reduced-motion: reduce){
    .ticker-track,
    .topo-a,
    .topo-b,
    .scroll-rail-label{
        animation: none;
    }
}