/* =========================================================
   Jake Rainford — Brand Filmmaker
   Design system / global stylesheet
   Typeface: General Sans (Fontshare)
   ========================================================= */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root{
  /* Brand palette */
  --bg:        #f6f3ef;   /* Background        */
  --bg-alt:    #efebe4;   /* Alt background (lightened) */
  --sand:      #e4ddce;   /* accent / button outline */
  --amber:     #f0b034;   /* pulsing indicator */
  --dark:      #1f2021;   /* Dark background   */
  --dark-alt:  #000000;   /* Alt dark          */

  --ink:       #1f2021;   /* primary text on light */
  --ink-soft:  #55524d;   /* secondary text on light */
  --ink-faint: #8a857d;   /* tertiary / meta */
  --line:      #dcd6cc;   /* hairline on light */
  --line-dark: #34363a;   /* hairline on dark */
  --paper-on-dark: #f6f3ef;
  --muted-on-dark: #a9a49b;

  --surface:   #ffffff;   /* raised card fill */
  --nav-bg:    color-mix(in srgb, #ffffff 62%, transparent);
  --nav-bg-stuck: color-mix(in srgb, #ffffff 80%, transparent);
  --nav-border: rgba(255,255,255,.7);
  --nav-inset: inset 0 1px 0 rgba(255,255,255,.75);
  --hero-bg:  #f6f3ef;    /* hero stays light in both themes (photo backdrop) */
  --hero-ink: #1f2021;
  --hero-faint: #8a857d;

  /* Type */
  --font: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Metrics */
  --container: 1500px;
  --nav-width: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 12px;
  --radius-lg: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------- Reset ----------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }

/* ----------------------------- Type ------------------------------ */
h1,h2,h3,h4{ font-weight:600; line-height:1.03; letter-spacing:-.02em; }
h1{ font-size:clamp(2.1rem, 5.2vw, 4.4rem); font-weight:600; }
h2{ font-size:clamp(1.6rem, 3.2vw, 2.6rem); }
h3{ font-size:clamp(1.2rem, 1.9vw, 1.6rem); letter-spacing:-.015em; }
h4{ font-size:1.06rem; letter-spacing:-.01em; }
p{ color:var(--ink-soft); }
.lead{ font-size:clamp(1.12rem, 1.7vw, 1.45rem); color:var(--ink); line-height:1.5; font-weight:400; }

.eyebrow{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.22em;
  font-weight:500; color:var(--ink-faint);
}
.display{ letter-spacing:-.035em; }

/* ---------------------------- Layout ----------------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--wide{ max-width:none; }
.section{ padding-block:clamp(44px, 10vw, 140px); }
.section--tight{ padding-block:clamp(48px, 7vw, 90px); }
.bg-alt{ background:var(--bg-alt); }
.bg-dark{ background:var(--dark); color:var(--paper-on-dark); }
.bg-dark p{ color:var(--muted-on-dark); }
.bg-dark .eyebrow{ color:var(--muted-on-dark); }
.bg-black{ background:var(--dark-alt); color:var(--paper-on-dark); }

.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.stack-lg{ display:flex; flex-direction:column; gap:clamp(28px,4vw,56px); }

/* --------------------------- Buttons ----------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.82em 1.5em; border-radius:24px;
  font-weight:500; font-size:.95rem; letter-spacing:.01em;
  background:rgba(255,255,255,.72); color:#1f2021;
  border:1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(10px) saturate(185%) brightness(1.06);
  backdrop-filter:blur(10px) saturate(185%) brightness(1.06);
  box-shadow:
    0 6px 18px -8px rgba(31,32,33,.3),
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -6px 12px -10px rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.22);
  transition:transform .4s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,.86); }
/* every button shares one glassy style, on light or dark sections */
.btn--primary,.btn--ghost,.btn--light,.btn--soft{ background:rgba(255,255,255,.72); color:#1f2021; border:1px solid rgba(255,255,255,.6); }
.btn--primary:hover,.btn--ghost:hover,.btn--light:hover,.btn--soft:hover{ background:rgba(255,255,255,.86); color:#1f2021; }
@supports (backdrop-filter: url("#q")) or (-webkit-backdrop-filter: url("#q")){
  .btn{
    backdrop-filter:blur(8px) url(#liquid-glass-sm) saturate(150%);
    -webkit-backdrop-filter:blur(8px) saturate(150%);
  }
}

/* pulsating amber indicator — replaces arrows on buttons */
.pdot,.btn::before{
  content:""; display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--amber); flex:none;
  box-shadow:0 0 0 0 rgba(240,176,52,.55);
  animation:pulse 2.1s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(240,176,52,.55); }
  70%{ box-shadow:0 0 0 9px rgba(240,176,52,0); }
  100%{ box-shadow:0 0 0 0 rgba(240,176,52,0); }
}
@media (prefers-reduced-motion:reduce){ .pdot,.btn::before{ animation:none; } }

.link-underline{
  display:inline-flex; align-items:center; gap:.5em; font-weight:500;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .4s var(--ease);
  padding-bottom:2px;
}
.link-underline:hover{ background-size:100% 1.5px; }
.link-underline .arrow{ width:1.05em; height:1.05em; flex:none; transition:transform .4s var(--ease); }
.link-underline:hover .arrow{ transform:translate(3px,-3px); }

/* ------------------------- Navigation (pill) --------------------- */
.nav{ position:sticky; top:0; z-index:100; padding-top:16px; background:transparent; }
.nav .container{ position:relative; max-width:var(--nav-width); }
.nav__inner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:60px; padding:0 10px 0 24px;
  background:linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,255,255,.20));
  backdrop-filter:blur(16px) saturate(190%) brightness(1.07);
  -webkit-backdrop-filter:blur(16px) saturate(190%) brightness(1.07);
  border:1px solid rgba(255,255,255,.55); border-radius:100px;
  box-shadow:
    0 10px 30px -14px rgba(31,32,33,.26),
    0 2px 8px -3px rgba(31,32,33,.12),
    inset 0 1px 1.5px rgba(255,255,255,.95),
    inset 0 -12px 22px -16px rgba(255,255,255,.6),
    inset 0 0 0 1px rgba(255,255,255,.22);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.nav__inner::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(130% 150% at 14% -50%, rgba(255,255,255,.45), transparent 55%);
  opacity:.7;
}
@supports (backdrop-filter: url("#q")) or (-webkit-backdrop-filter: url("#q")){
  .nav__inner{
    backdrop-filter:blur(13px) url(#liquid-glass) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(185%) brightness(1.06);
  }
}
.nav.is-stuck .nav__inner{
  background:linear-gradient(145deg, rgba(255,255,255,.66), rgba(255,255,255,.34));
  box-shadow:
    0 16px 42px -18px rgba(31,32,33,.4),
    0 3px 10px -3px rgba(31,32,33,.16),
    inset 0 1px 1.5px rgba(255,255,255,.95),
    inset 0 -12px 22px -16px rgba(255,255,255,.6),
    inset 0 0 0 1px rgba(255,255,255,.24);
}
.brand{ display:inline-flex; align-items:center; }
.brand .mark{ display:block; height:26px; color:var(--ink); }
.mark > svg{ display:block; height:100%; width:auto; overflow:visible; }
/* logo animation: J & R start crossed (compact mark), slide apart into "JR" on hover */
.jr{ transition:transform .55s var(--ease); }
.jr-j{ transform:translateX(116px); }
.jr-r{ transform:translateX(-116px); }
.brand:hover .jr-j{ transform:translateX(0); }
.brand:hover .jr-r{ transform:translateX(0); }
@media (prefers-reduced-motion:reduce){ .jr{ transition:none; } }

.nav__menu{ display:flex; align-items:center; gap:1.7rem; }
.nav__link{ font-size:.92rem; font-weight:500; color:var(--ink); position:relative; padding:.3rem 0; transition:color .3s var(--ease); background:none; cursor:pointer; }
.nav__link:hover{ color:var(--ink-faint); }

/* Services mega-menu */
.has-drop{ position:relative; }
.has-drop__btn{ display:inline-flex; align-items:center; gap:.35rem; }
.has-drop__btn svg{ width:11px; height:11px; transition:transform .3s var(--ease); }
.has-drop:hover .has-drop__btn svg{ transform:rotate(180deg); }
.mega{
  position:fixed; top:78px; left:50%; transform:translateX(-50%) translateY(8px);
  width:min(860px,92vw); z-index:120;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.mega::before{ content:""; position:absolute; top:-42px; left:0; right:0; height:42px; }
.has-drop:hover .mega, .has-drop:focus-within .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega__inner{
  background:#fff;
  -webkit-backdrop-filter:blur(18px) saturate(185%);
  backdrop-filter:blur(18px) saturate(185%);
  border:1px solid rgba(255,255,255,.6); border-radius:16px; padding:14px;
  box-shadow:
    0 34px 70px -34px rgba(31,32,33,.45),
    inset 0 1px 1.5px rgba(255,255,255,.95),
    inset 0 -14px 26px -20px rgba(255,255,255,.6),
    inset 0 0 0 1px rgba(255,255,255,.22);
}
@supports (backdrop-filter: url("#q")) or (-webkit-backdrop-filter: url("#q")){
  .mega__inner{
    backdrop-filter:blur(14px) url(#liquid-glass) saturate(165%);
    -webkit-backdrop-filter:blur(16px) saturate(185%);
  }
}
.mega__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mega__card{ display:block; padding:22px 20px; border-radius:12px; border:1px solid transparent;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.mega__card:hover{
  background:var(--bg-alt);
  border-color:var(--sand);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -14px rgba(31,32,33,.3);
}
.mega__card h4{ display:flex; align-items:center; justify-content:space-between; font-size:1.05rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.4rem; }
.mega__arw{ width:16px; height:16px; color:var(--amber); transform:translateX(-6px); opacity:0; transition:.35s var(--ease); }
.mega__arw svg{ width:100%; height:100%; }
.mega__card:hover .mega__arw{ transform:none; opacity:1; }
.mega__card p{ font-size:.85rem; color:var(--ink-faint); line-height:1.45; }
.mega__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:14px 20px 6px; margin-top:6px; border-top:1px solid var(--line); }
.mega__note{ font-size:.85rem; color:var(--ink-faint); }
.mega__foot .link-underline{ font-size:.9rem; white-space:nowrap; }

.nav__cta{ display:inline-flex; padding:.64em 1.2em; font-size:.88rem; }
.nav__burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.nav__burger span{ position:relative; width:22px; height:1.6px; background:var(--ink); transition:.3s var(--ease); }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:22px; height:1.6px; background:var(--ink); transition:.3s var(--ease); }
.nav__burger span::before{ top:-7px; } .nav__burger span::after{ top:7px; }
body.menu-open .nav__burger span{ background:transparent; }
body.menu-open .nav__burger span::before{ top:0; transform:rotate(45deg); }
body.menu-open .nav__burger span::after{ top:0; transform:rotate(-45deg); }

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--bg);
  transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  padding:104px var(--gutter) 48px; overflow-y:auto;
  display:flex; flex-direction:column;
}
body.menu-open .mobile-menu{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.mobile-menu a{ font-size:1.6rem; font-weight:600; letter-spacing:-.02em; padding:14px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.mobile-menu a svg{ width:20px; height:20px; flex:none; color:var(--ink-faint); }
.mobile-menu .sub{ font-size:1.05rem; font-weight:500; color:var(--ink-soft); padding-left:16px; border-bottom:1px solid var(--line); }
.mobile-menu .m-cta{ margin-top:auto; padding-top:28px; }
.mobile-menu .m-cta a.btn{ justify-content:center; border:1.5px solid var(--sand); padding:.95em 1.5em; font-size:1.05rem; font-weight:500; }

/* ---------------------------- Hero ------------------------------- */
.hero{ position:relative; padding-block:clamp(48px,9vw,120px) clamp(48px,7vw,96px); }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,60px); align-items:end; }
.hero h1{ margin-bottom:1.2rem; }
.hero__media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; background:var(--bg-alt); }

/* Video-forward service hero: centred heading + large 16:9 video below */
.svc-hero{ max-width:860px; margin:0 auto; text-align:center; }
.svc-hero .eyebrow{ display:inline-block; margin-bottom:1.1rem; }
.svc-hero h1{ margin-bottom:1.2rem; }
.svc-hero .lead{ max-width:62ch; margin:0 auto; }
.svc-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:1.8rem; }
.svc-video{
  margin:clamp(34px,5vw,64px) auto 0; max-width:1180px;
  border-radius:var(--radius-lg); overflow:hidden; background:var(--dark);
  box-shadow:0 55px 100px -44px rgba(31,32,33,.5), 0 16px 40px -22px rgba(31,32,33,.3);
}
.svc-video mux-player{ width:100%; display:block; border-radius:inherit; overflow:hidden; --media-object-fit:cover; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.tag-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.6rem; }
.tag{ font-size:.8rem; font-weight:500; color:var(--ink-soft); border:1px solid var(--line); border-radius:100px; padding:.5em 1em; }

/* --------------------------- Media / cards ----------------------- */
.media{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--bg-alt); }
.media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.media--tall{ aspect-ratio:3/4; }
.media--wide{ aspect-ratio:16/10; }
.media--sq{ aspect-ratio:1/1; }

.work-card{ display:block; }
.work-card .media{ margin-bottom:1rem; }
.work-card:hover .media img{ transform:scale(1.045); }
.work-card__meta{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.work-card__meta h3{ font-size:1.25rem; }
.work-card__meta span{ font-size:.85rem; color:var(--ink-faint); white-space:nowrap; }
.work-card p{ font-size:.95rem; margin-top:.35rem; }

/* Portfolio carousel — native sideways scroll (trackpad + touch) with a JS auto-loop */
.pf-carousel{
  position:relative; padding-block:6px;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;          /* momentum scroll on iOS */
  overscroll-behavior-x:contain;             /* don't trigger browser back-swipe */
  scrollbar-width:none;                       /* Firefox */
}
.pf-carousel::-webkit-scrollbar{ display:none; } /* Safari/Chrome */
.pf-track{ display:flex; gap:clamp(16px,2.2vw,26px); width:max-content; padding-inline:var(--gutter); }
.pf-track .work-video{ flex:0 0 auto; width:clamp(300px,82vw,520px); margin:0; }
.pf-hint{ text-align:center; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-top:1.4rem; }

/* Portfolio video cards — poster + play button, swap to inline player on click */
.work-video{ cursor:pointer; }
.work-video .media{ background:var(--dark); }
.work-video__media{ position:relative; }
.work-video__poster{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease); }
.work-video:hover .work-video__poster{ transform:scale(1.045); }
.work-video__play{
  position:absolute; inset:0; margin:auto; width:66px; height:66px; border-radius:100px;
  display:grid; place-items:center; pointer-events:none;
  background:rgba(255,255,255,.92); color:var(--ink);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.6);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.work-video__play svg{ width:26px; height:26px; margin-left:3px; }
.work-video:hover .work-video__play{ transform:scale(1.09); background:#fff; }
.work-video.is-playing .work-video__play{ display:none; }
.work-video__media mux-player{ width:100%; height:100%; display:block; border-radius:inherit; overflow:hidden; }

/* Service list rows */
.svc-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,3vw,48px); align-items:center;
  padding:clamp(28px,4vw,48px) 0; border-top:1px solid var(--line);
  transition:padding-left .4s var(--ease);
}
.svc-row:last-child{ border-bottom:1px solid var(--line); }
.svc-row:hover{ padding-left:12px; }
.svc-row__num{ font-size:.9rem; color:var(--ink-faint); font-weight:500; }
.svc-row__title{ display:block; font-size:clamp(1.6rem,3.2vw,2.6rem); font-weight:600; letter-spacing:-.02em; }
.svc-row__desc{ display:block; color:var(--ink-soft); max-width:52ch; margin-top:.5rem; font-size:1rem; }
.svc-row__arrow{ width:52px; height:52px; border-radius:100px; border:1.5px solid var(--ink); display:grid; place-items:center; transition:.4s var(--ease); }
.svc-row:hover .svc-row__arrow{ background:var(--ink); color:var(--bg); }
.svc-row__arrow svg{ width:18px; height:18px; transition:transform .4s var(--ease); }
.svc-row:hover .svc-row__arrow svg{ transform:translate(2px,-2px); }

/* Feature / split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:center; }
.split--media-first .split__media{ order:-1; }

/* Stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); }
.stat__num{ font-size:clamp(2.4rem,5vw,3.6rem); font-weight:600; letter-spacing:-.03em; line-height:1; }
.stat__label{ font-size:.9rem; color:var(--ink-faint); margin-top:.5rem; }

/* Marquee */
.marquee{ overflow:hidden; border-block:1px solid var(--line-dark); padding-block:26px; }
.marquee__track{ display:flex; gap:3.5rem; width:max-content; animation:scroll 32s linear infinite; }
.marquee span{ font-size:clamp(1.6rem,3.4vw,2.6rem); font-weight:600; letter-spacing:-.02em; color:var(--muted-on-dark); display:inline-flex; align-items:center; gap:3.5rem; }
.marquee span::after{ content:"—"; color:var(--line-dark); }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* Quote / testimonial */
.quote{ max-width:26ch; }
.quote blockquote{ font-size:clamp(1.5rem,3.4vw,2.6rem); font-weight:500; letter-spacing:-.02em; line-height:1.18; }
.quote-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px); }
.tcard{ border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,38px); background:var(--bg); }
.bg-dark .tcard{ background:transparent; border-color:var(--line-dark); }
.tcard p{ font-size:1.1rem; color:var(--ink); line-height:1.45; }
.bg-dark .tcard p{ color:var(--paper-on-dark); }
.tcard__by{ display:flex; align-items:center; gap:.8rem; margin-top:1.4rem; }
.tcard__by img{ width:44px; height:44px; border-radius:100px; object-fit:cover; }
.tcard__by b{ font-weight:600; font-size:.95rem; display:block; }
.tcard__by span{ font-size:.82rem; color:var(--ink-faint); }

/* Article / knowledge cards */
.article-card{ display:flex; flex-direction:column; height:100%; }
.article-card .media{ aspect-ratio:16/10; margin-bottom:1.1rem; }
.article-card:hover .media img{ transform:scale(1.045); }
.article-card .cat{ font-size:.75rem; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-faint); font-weight:500; }
.article-card h3{ font-size:1.3rem; margin:.55rem 0 .5rem; }
.article-card .meta{ font-size:.82rem; color:var(--ink-faint); margin-top:auto; padding-top:1rem; }

/* Adventures gallery */
.gallery{ columns:4; column-gap:clamp(14px,2vw,24px); }
.gallery .g-item{ break-inside:avoid; margin-bottom:clamp(14px,2vw,24px); border-radius:var(--radius); overflow:hidden; position:relative; }
.gallery img{ width:100%; transition:transform .9s var(--ease); }
.gallery .g-item:hover img{ transform:scale(1.05); }
.gallery .g-cap{ position:absolute; left:16px; bottom:14px; color:#fff; font-weight:500; font-size:.9rem; text-shadow:0 2px 10px rgba(0,0,0,.4); }

/* Adventures — full-bleed gallery (edge to edge, no hero) */
.adv-full{ padding:14px clamp(10px,1.1vw,16px) 0; }
.gallery--full{ columns:4; column-gap:clamp(10px,1vw,16px); }
.gallery--full .g-item{ margin-bottom:clamp(10px,1vw,16px); border-radius:20px; }
.gallery--full .g-cap{ font-size:.95rem; }
@media (max-width:1024px){ .gallery--full{ columns:3; } }
@media (max-width:680px){ .gallery--full{ columns:2; } }

/* Process steps */
.steps{ counter-reset:step; display:grid; gap:0; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,44px); padding:clamp(26px,3.5vw,44px) 0; border-top:1px solid var(--line); }
.bg-dark .step{ border-color:var(--line-dark); }
.step__n{ counter-increment:step; font-size:.9rem; color:var(--ink-faint); font-weight:500; }
.step__n::before{ content:"0" counter(step); }
.step h3{ margin-bottom:.5rem; }

/* Contact */
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-size:.85rem; font-weight:500; color:var(--ink-soft); }
.field input,.field textarea,.field select{
  font-family:inherit; font-size:1rem; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:16px; padding:.9em 1.1em; transition:border-color .3s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--ink); }
.field textarea{ min-height:150px; resize:vertical; }

/* CTA band */
.cta-band{ text-align:center; }
.cta-band h2{ max-width:16ch; margin-inline:auto; margin-bottom:1.4rem; }

/* --------------------------- Footer ------------------------------ */
.footer{ background:var(--dark-alt); color:var(--paper-on-dark); padding-block:clamp(56px,7vw,96px) 40px; }
.footer a{ color:var(--paper-on-dark); }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,4vw,60px); padding-bottom:clamp(40px,5vw,72px); border-bottom:1px solid var(--line-dark); }
.footer__brand .mark{ display:block; height:60px; color:#fff; margin-bottom:1.4rem; }
.footer__brand p{ color:var(--muted-on-dark); max-width:34ch; }
.footer h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted-on-dark); font-weight:500; margin-bottom:1.2rem; }
.footer ul li{ margin-bottom:.8rem; }
.footer ul a{ color:#d9d5cd; transition:color .3s var(--ease); }
.footer ul a:hover{ color:#fff; }
.footer__big{ font-size:clamp(1.5rem,3vw,2.4rem); font-weight:600; letter-spacing:-.025em; line-height:1.05; padding-block:clamp(28px,4vw,48px); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; color:var(--muted-on-dark); font-size:.85rem; }
.footer__bottom a{ color:var(--muted-on-dark); }
.footer__bottom a:hover{ color:#fff; }

/* --------------------------- Reveal ------------------------------ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee__track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* --------------------------- Utilities --------------------------- */
.measure{ max-width:60ch; }
.measure-sm{ max-width:44ch; }
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.mb-1{ margin-bottom:1rem; } .mb-2{ margin-bottom:2rem; }
.center{ text-align:center; }
.divider{ height:1px; background:var(--line); border:0; }
.bg-dark .divider{ background:var(--line-dark); }
.pill-list{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{ font-size:.85rem; font-weight:500; border:1px solid var(--line); border-radius:100px; padding:.55em 1.1em; }
.bg-dark .pill{ border-color:var(--line-dark); color:var(--paper-on-dark); }
.eyebrow-row{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.4rem; }
.eyebrow-row::before{ content:""; width:28px; height:1.5px; background:var(--ink-faint); }
.bg-dark .eyebrow-row::before{ background:var(--muted-on-dark); }

/* Minimal page slug */
.slug{ display:inline-flex; align-items:center; gap:.55rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; font-weight:500; color:var(--ink-soft); padding:.5rem .95rem; border:1px solid var(--sand); border-radius:100px; background:var(--surface); margin-bottom:1.6rem; }
.slug .pdot{ width:7px; height:7px; }
.bg-dark .slug{ background:transparent; border-color:var(--line-dark); color:var(--paper-on-dark); }
.svc-row__arrow .pdot{ width:10px; height:10px; }

/* Footer email pill */
.mail-pill{ display:inline-flex; align-items:center; gap:.6rem; padding:.62rem 1.15rem; border:1px solid var(--line-dark); border-radius:100px; font-weight:500; font-size:.95rem; transition:border-color .3s var(--ease), background .3s var(--ease); }
.mail-pill:hover{ background:rgba(255,255,255,.06); border-color:#4a4c50; }
.mail-pill .pdot{ width:8px; height:8px; }

/* Testimonials — two-row carousel with edge fade */
.tcarousel{ display:flex; flex-direction:column; gap:clamp(14px,2vw,20px); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.tcar-row{ display:flex; align-items:flex-start; gap:clamp(14px,2vw,20px); width:max-content; animation:scroll 64s linear infinite; }
.tcar-row--r{ animation-direction:reverse; animation-duration:78s; }
.tcarousel:hover .tcar-row{ animation-play-state:paused; }
.tcard-mini{ flex:0 0 auto; width:min(380px,82vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,2.4vw,30px); align-self:flex-start; }
.tcard-mini p{ color:var(--ink); font-size:1rem; line-height:1.5; }
.tcard-mini .by{ display:flex; align-items:center; gap:.7rem; margin-top:1.2rem; }
.tcard-mini .by img{ width:40px; height:40px; border-radius:100px; object-fit:cover; background:var(--bg-alt); }
.tcard-mini .by b{ font-weight:600; font-size:.9rem; display:block; }
.tcard-mini .by span{ font-size:.8rem; color:var(--ink-faint); }
.tcard-mini .by__who{ display:flex; flex-direction:column; gap:.1rem; }
.tcard-mini .by .tcard-ava{
  width:40px; height:40px; border-radius:100px; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(145deg, var(--sand), var(--bg-alt));
  border:1px solid var(--line);
  color:var(--ink); font-size:.82rem; font-weight:600; letter-spacing:.02em;
}
@media (prefers-reduced-motion:reduce){ .tcar-row{ animation:none; } }
/* On mobile, cap quote length so cards stay a similar height (no big gaps) */
@media (max-width:760px){
  .tcar-row{ align-items:stretch; }
  .tcard-mini{ align-self:stretch; display:flex; flex-direction:column; }
  .tcard-mini p{
    display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;
    overflow:hidden; flex:1 1 auto;
  }
}

/* ------------------------- Responsive ---------------------------- */
@media (max-width:1024px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ aspect-ratio:16/10; max-height:520px; }
  .cols-4{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .gallery{ columns:3; }
}
@media (max-width:768px){
  .nav__menu{ display:none; }
  .nav__burger{ display:flex; }
  .nav__cta{ display:none; }
  .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split--media-first .split__media{ order:0; }
  .stats{ grid-template-columns:1fr 1fr; }
  .quote-grid{ grid-template-columns:1fr; }
  .svc-row{ grid-template-columns:1fr auto; }
  .svc-row__num{ display:none; }
  .footer__top{ grid-template-columns:1fr; }
  .gallery{ columns:2; }
}

/* ---- Portrait band (full-bleed spotlit portrait) ---- */
.portrait-band{
  position:relative; background:#000; overflow:hidden;
  height:clamp(620px, 74vw, 980px);
}
.portrait-band .pb__subject{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
}
@media (max-width:768px){
  .portrait-band{ height:clamp(520px, 120vw, 760px); }
  .portrait-band .pb__subject{ object-position:center 36%; }
}

/* ---- Adventures journal cards + lightbox ---- */
.gallery .g-item{ display:block; width:100%; padding:0; border:0; background:var(--bg-alt); color:inherit; font:inherit; cursor:pointer; text-align:left; }
.gallery .g-item::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.18); opacity:0; transition:opacity .4s var(--ease); z-index:2; pointer-events:none; }
.gallery .g-item:hover::after,.gallery .g-item:focus-visible::after{ opacity:1; }
.gallery .g-item .g-cap{ z-index:3; }
.g-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.85);
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:rgba(0,0,0,.42); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  color:#fff; opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease); z-index:4; pointer-events:none;
}
.g-play svg{ width:22px; height:22px; margin-left:3px; }
.g-item:hover .g-play,.g-item:focus-visible .g-play{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.jm{ position:fixed; inset:0; z-index:200; display:none; }
.jm.is-open{ display:block; }
.jm__backdrop{ position:absolute; inset:0; background:rgba(15,15,16,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:jmFade .3s var(--ease); }
.jm__panel{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(940px,94vw); max-height:92vh; overflow-y:auto;
  background:var(--bg); border-radius:24px; box-shadow:0 40px 100px -30px rgba(0,0,0,.6);
  animation:jmPop .38s var(--ease);
}
@keyframes jmFade{ from{ opacity:0; } }
@keyframes jmPop{ from{ opacity:0; transform:translate(-50%,-48%) scale(.98); } }
.jm__close{
  position:absolute; top:14px; right:14px; z-index:6; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid var(--line); color:var(--ink); display:grid; place-items:center;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.jm__close:hover{ background:#fff; transform:scale(1.06); }
.jm__close svg{ width:18px; height:18px; }
.jm__media{ position:relative; background:#000; border-radius:24px 24px 0 0; overflow:hidden; }
.jm__media iframe{ display:block; width:100%; aspect-ratio:16/9; border:0; }
.jm__media--ig{ display:flex; justify-content:center; padding:20px 0; background:#000; }
.jm__media--ig .instagram-media{ margin:0 auto !important; }
.jm__body{ padding:clamp(24px,3.2vw,40px); }
.jm__title{ margin:.35rem 0 1rem; }
.jm__text p{ color:var(--ink-soft); font-size:1.05rem; line-height:1.6; margin-bottom:1rem; }
.jm__text p:last-child{ margin-bottom:0; }
@media (max-width:768px){
  .jm__panel{ width:100%; height:100%; max-height:100%; top:0; left:0; transform:none; border-radius:0; }
  @keyframes jmPop{ from{ opacity:0; transform:translateY(2%); } }
}

/* ---- Knowledge Base article (blog reading view) ---- */
.article-head{ max-width:820px; margin-inline:auto; text-align:center; }
.article-head .slug{ text-decoration:none; }
.article-head .lead{ margin-inline:auto; }
.article__meta{ margin-top:1.5rem; font-size:.85rem; letter-spacing:.02em; color:var(--ink-faint); text-transform:uppercase; }
.article__media{ max-width:1040px; margin:clamp(30px,4vw,56px) auto 0; border-radius:24px; overflow:hidden; aspect-ratio:16/9; background:var(--bg-alt); }
.article__media img{ width:100%; height:100%; object-fit:cover; }
.prose{ max-width:720px; margin:clamp(32px,4vw,56px) auto 0; }
.prose h2{ font-size:clamp(1.3rem,2.4vw,1.85rem); letter-spacing:-.015em; margin:2.2rem 0 .9rem; }
.prose p{ font-size:1.1rem; line-height:1.75; color:var(--ink-soft); margin-bottom:1.25rem; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose blockquote{ margin:2rem 0; padding:.2rem 0 .2rem 1.4rem; border-left:3px solid var(--amber); font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.35; letter-spacing:-.01em; color:var(--ink); font-weight:500; }
.prose ul{ margin:0 0 1.25rem 1.25rem; }
.prose li{ font-size:1.1rem; line-height:1.65; color:var(--ink-soft); margin-bottom:.5rem; list-style:disc; }
.article__foot{ max-width:720px; margin:clamp(36px,5vw,60px) auto 0; padding-top:clamp(28px,4vw,44px); border-top:1px solid var(--line); display:flex; justify-content:center; }

/* ---- Full-screen hero (image first fold) ---- */
.hero-full{
  position:relative; margin-top:-76px; width:100%;
  min-height:100vh; min-height:100svh;
  background:var(--hero-bg); overflow:hidden;
  display:flex; align-items:center;
}
.hero-full__img{ position:absolute; top:0; left:0; width:100%; height:122%; object-fit:cover; object-position:50% 46%; z-index:0; will-change:transform; }
.hero-full__inner{ position:relative; z-index:2; width:100%; }
.hero-full__content{ max-width:720px; }
.hero-full__content h1{ text-wrap:balance; font-size:clamp(2.4rem,4.7vw,4rem); color:var(--hero-ink); }
.hero-full__eyebrow{ display:inline-block; margin-bottom:1.4rem; font-size:.82rem; color:var(--hero-faint); }
@media (prefers-reduced-motion:reduce){ .hero-full__img{ transform:none !important; } }
@media (max-width:820px){
  /* stack on mobile: centred copy on top, full uncropped photo below */
  .hero-full{ min-height:0; display:flex; flex-direction:column; margin-top:0; overflow:visible; }
  .hero-full picture{ display:block; order:2; }
  .hero-full__img{ position:static; width:100%; height:auto; object-fit:contain; transform:none !important; margin-top:.25rem; }
  .hero-full__inner{ order:1; padding-top:84px; }
  .hero-full__content{ max-width:none; text-align:center; }
  .hero-full__content h1{ font-size:clamp(2rem,7.4vw,3rem); margin-bottom:0; }
  .hero-full__eyebrow{ margin-bottom:.9rem; }
  .hero-full__content > div{ justify-content:center; margin-top:1.4rem !important; }
}

/* ---- Showcase carousel (home) — arched, scroll-linked ---- */
.showcase{ overflow:hidden; }
.showcase__stage{ position:relative; margin-bottom:clamp(6px,2vw,30px); }
.showcase__track{
  display:flex; align-items:center; gap:clamp(12px,1.6vw,22px);
  overflow-x:auto; overflow-y:hidden;
  padding:clamp(46px,7vw,92px) clamp(14px,3vw,46px) clamp(56px,8vw,104px);
  -webkit-overflow-scrolling:touch; cursor:grab;
  scrollbar-width:none; overscroll-behavior-x:contain; touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.showcase__track::-webkit-scrollbar{ display:none; }
.showcase__track.is-drag{ cursor:grabbing; }
.showcase__track.is-drag *{ pointer-events:none; }
.showcase__card{
  flex:0 0 auto; transform-origin:center bottom;
  will-change:transform; backface-visibility:hidden;
}
.showcase__card .media{
  height:clamp(210px,30vw,330px); width:auto; margin:0;
  border-radius:var(--radius); background:#26261f;
  box-shadow:0 24px 50px -26px rgba(0,0,0,.7);
}
.showcase__card--tall .media{ aspect-ratio:3/4; }
.showcase__card--wide .media{ aspect-ratio:4/3; }
.showcase__card--sq   .media{ aspect-ratio:1/1; }
.showcase__card .media img{ transition:transform .9s var(--ease); }
.showcase__card:hover .media img{ transform:scale(1.04); }
.showcase__foot{ text-align:center; max-width:640px; margin-inline:auto; }
.showcase__title{ font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.05; letter-spacing:-.02em; }
.showcase__sub{ color:var(--muted-on-dark); margin-top:1.1rem; font-size:1.05rem; }
.showcase__cta{ margin-top:1.9rem; }
.showcase__hint{
  text-align:center; color:var(--muted-on-dark); opacity:.65;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; margin-top:2.4rem;
}
@media (max-width:820px){
  .showcase__card .media{ height:clamp(180px,44vw,300px); }
  .showcase__sub{ font-size:1rem; }
  .showcase__track{ padding:18px 14px 30px; }
  .showcase__stage{ margin-bottom:8px; }
}
@media (prefers-reduced-motion:reduce){
  .showcase__card{ transform:none !important; }
}

/* ---- Legal pages (cookie / privacy) ---- */
.legal{ padding-top:clamp(20px,4vw,48px); }
.legal h1{ font-size:clamp(2rem,5vw,3.2rem); }
.legal__meta{ color:var(--ink-faint); font-size:.9rem; margin-top:.5rem; }
.legal h2{ font-size:1.4rem; margin-top:2.4rem; }
.legal h3{ font-size:1.1rem; margin-top:1.4rem; color:var(--ink); }
.legal p{ margin-top:.9rem; color:var(--ink-soft); }
.legal a{ color:var(--ink); }
.legal__note{ margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line); font-size:.9rem; color:var(--ink-faint); }
.footer__legal{ display:inline-flex; gap:1.4rem; }

/* ---- Custom cursor (desktop, fine pointer only) ---- */
@media (hover:hover) and (pointer:fine){
  html.has-cursor, html.has-cursor *{ cursor:none; }
  html.has-cursor input, html.has-cursor textarea, html.has-cursor select,
  html.has-cursor [contenteditable]{ cursor:auto; }
  .cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; will-change:transform; }
  .cursor-ring{
    width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; z-index:9998;
    border:1.5px solid rgba(240,176,52,.55); background:rgba(240,176,52,0);
    transition:width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease),
               background .25s var(--ease), border-color .25s var(--ease), opacity .3s ease;
  }
  .cursor-dot{
    width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; z-index:9999;
    background:var(--amber);
  }
  html.has-cursor.cursor-hover .cursor-ring{
    width:54px; height:54px; margin:-27px 0 0 -27px;
    background:rgba(240,176,52,.10); border-color:rgba(240,176,52,.75);
  }
  html.has-cursor.cursor-down .cursor-ring{ width:28px; height:28px; margin:-14px 0 0 -14px; }
  html.has-cursor.cursor-hidden .cursor-dot,
  html.has-cursor.cursor-hidden .cursor-ring{ opacity:0 !important; }
}


/* ---- Knowledge Base (directory layout) ---- */
.kb{ padding-block:clamp(44px,5vw,72px) clamp(48px,6vw,88px); }
.kb-hero{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,48px); align-items:baseline;
  margin-bottom:clamp(20px,2.6vw,34px); padding-bottom:clamp(16px,1.8vw,26px); border-bottom:1px solid var(--line); }
.kb-hero__title{ font-size:clamp(2rem,4vw,3rem); line-height:1; letter-spacing:-.025em; margin:0; }
.kb-hero__lead{ color:var(--ink-soft); font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.5; max-width:42ch; justify-self:end; }

.kb-layout{ display:grid; grid-template-columns:220px 1fr; gap:clamp(28px,4vw,72px); align-items:start; }
.kb-layout > *{ min-width:0; }
.kb-side{ position:sticky; top:100px; align-self:start; min-width:0; }
.kb-side__label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-bottom:.7rem; }
.kb-side__label--mt{ margin-top:1.8rem; }
.kb-side__bar, .kb-side__close, .kb-filter-btn, .kb-backdrop{ display:none; }
.kb-filter-btn{ align-items:center; gap:.5rem; margin-left:auto; align-self:center; font-family:inherit;
  font-size:.82rem; letter-spacing:.02em; font-weight:600; color:var(--ink); background:var(--bg-alt);
  border:1px solid var(--line); border-radius:100px; padding:.5rem .95rem; cursor:pointer; }
.kb-filter-btn svg{ width:16px; height:16px; }
.kb-filters{ display:flex; flex-direction:column; gap:.1rem; }
.kb-filter{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; width:100%; text-align:left;
  padding:.5rem .15rem; font-size:1rem; font-family:inherit; color:var(--ink-soft); background:none; border:none; cursor:pointer; transition:color .2s var(--ease); }
.kb-filter:hover{ color:var(--ink); }
.kb-filter.is-active{ color:var(--ink); font-weight:600; }
.kb-filter__n{ font-size:.75rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.kb-filter.is-active .kb-filter__n{ color:var(--amber); }
.kb-side__back{ margin-top:1.7rem; display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--ink-faint); transition:color .2s; }
.kb-side__back:hover{ color:var(--ink); }
.kb-side__back svg{ width:16px; height:16px; transform:rotate(180deg); }

.kb-main__head{ display:flex; align-items:baseline; gap:.6rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.kb-main__title{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--ink); }
.kb-main__count{ font-size:.8rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.kb-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(360px,1fr)); gap:0 clamp(28px,3vw,56px); }
.kb-row{ display:flex; gap:15px; align-items:flex-start; padding:20px 4px; border-bottom:1px solid var(--line); min-width:0; }
.kb-row.is-hidden{ display:none; }
.kb-row__icon{ flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--bg-alt); color:var(--ink-soft); transition:color .25s, background .25s; }
.kb-row__icon svg{ width:22px; height:22px; }
.kb-row:hover .kb-row__icon{ color:var(--amber); }
.kb-row__body{ display:flex; flex-direction:column; gap:.28rem; min-width:0; flex:1; }
.kb-row__top{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; min-width:0; }
.kb-row__title{ font-weight:600; letter-spacing:-.01em; color:var(--ink); font-size:1.02rem; line-height:1.25; min-width:0; overflow-wrap:break-word; }
.kb-row:hover .kb-row__title{ text-decoration:underline; text-underline-offset:3px; }
.kb-row__tag{ font-size:.78rem; color:var(--ink-faint); }
.kb-row__desc{ font-size:.9rem; color:var(--ink-soft); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kb-row__meta{ font-size:.76rem; color:var(--ink-faint); display:flex; align-items:center; gap:.45rem; margin-top:.25rem; }
.kb-row__read{ color:var(--amber); font-weight:500; }
.kb-dot{ opacity:.55; }
.kb-row__pills{ margin-left:auto; display:inline-flex; gap:.4rem; }
.kb-type{ display:inline-flex; align-items:center; gap:.32em; font-size:.68rem; font-weight:500; letter-spacing:.02em;
  padding:.28em .6em .28em .5em; border-radius:100px; border:1px solid var(--line); color:var(--ink-soft); white-space:nowrap; }
.kb-type svg{ width:12px; height:12px; }
.kb-type--video{ color:#a8791a; border-color:color-mix(in srgb, var(--amber) 45%, var(--line)); background:color-mix(in srgb, var(--amber) 12%, transparent); }
.kb-empty{ color:var(--ink-faint); padding:24px 4px; }

@media (max-width:860px){
  .kb-hero{ grid-template-columns:1fr; align-items:start; gap:.6rem; }
  .kb-hero__lead{ justify-self:start; max-width:none; text-align:left; }
  .kb-layout{ grid-template-columns:1fr; gap:20px; }
  .kb-list{ grid-template-columns:1fr; }
  .kb-filter-btn{ display:inline-flex; }
  /* filters become a slide-in drawer */
  .kb-side{ position:fixed; top:0; right:0; z-index:200; height:100%; width:min(340px,88vw);
    background:var(--bg); border-left:1px solid var(--line); box-shadow:-22px 0 60px -30px rgba(0,0,0,.5);
    transform:translateX(100%); transition:transform .35s var(--ease); overflow-y:auto;
    padding:20px var(--gutter) 44px; }
  .kb-side.is-open{ transform:none; }
  .kb-side__bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; }
  .kb-side__bar span{ font-weight:600; font-size:1.15rem; letter-spacing:-.01em; }
  .kb-side__close{ display:grid; place-items:center; width:38px; height:38px; border-radius:100px; color:var(--ink); background:var(--bg-alt); }
  .kb-side__close svg{ width:18px; height:18px; }
  .kb-side__label{ margin-bottom:.4rem; }
  .kb-side__back{ display:inline-flex; margin-top:1.8rem; }
  .kb-backdrop{ display:block; position:fixed; inset:0; z-index:190; background:rgba(15,14,13,.45);
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease); }
  .kb-backdrop.is-open{ opacity:1; visibility:visible; }
  body.kb-drawer-open{ overflow:hidden; }
}

.svg-filters{ position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }

/* ---- Knowledge Base email gate (lead capture) ---- */
.kb-gate{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:24px;
  background:rgba(31,32,33,.5);
  -webkit-backdrop-filter:blur(12px) saturate(120%); backdrop-filter:blur(12px) saturate(120%);
  animation:kbGateIn .35s var(--ease);
}
.kb-gate[hidden]{ display:none; }
@keyframes kbGateIn{ from{ opacity:0 } to{ opacity:1 } }
.kb-gate__card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,46px); width:min(460px,100%); text-align:center;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.55);
}
.kb-gate__card h2{ font-size:clamp(1.6rem,3vw,2.1rem); letter-spacing:-.02em; line-height:1.1; }
.kb-gate__card > p{ color:var(--ink-soft); }
.kb-gate__form{ display:flex; flex-direction:column; gap:12px; margin-top:1.6rem; }
.kb-gate__form input[type=email]{
  width:100%; padding:.95em 1.1em; border:1px solid var(--line); border-radius:12px;
  background:var(--bg); font:inherit; color:var(--ink);
}
.kb-gate__form input[type=email]:focus{ outline:none; border-color:var(--ink); }
.kb-gate__form .btn{ justify-content:center; }
.kb-gate__err{ color:#b4472e; font-size:.85rem; margin-top:.8rem; }
.kb-gate__note{ font-size:.78rem; color:var(--ink-faint); margin-top:1.1rem; line-height:1.5; }
.kb-gate__note a{ text-decoration:underline; }
body.kb-locked{ overflow:hidden; }

/* ============================================================
   Work — cinematic expanding film reel (dark page)
   ============================================================ */
.work-hero{
  position:relative;
  margin-top:-76px;
  min-height:clamp(560px,92vh,920px);
  display:flex; align-items:center;
  padding:calc(76px + clamp(36px,7vh,80px)) 0 clamp(60px,10vh,120px);
  background:var(--dark-alt); color:var(--paper-on-dark);
  overflow:hidden;
}
.work-hero__media{ position:absolute; inset:0; z-index:0; display:block; }
.work-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:58% 36%; }
.work-hero__shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,8,9,.94) 0%, rgba(8,8,9,.74) 32%, rgba(8,8,9,.3) 60%, rgba(8,8,9,.12) 100%),
    linear-gradient(0deg, rgba(8,8,9,.7) 0%, rgba(8,8,9,0) 40%);
}
.work-hero .container{ position:relative; z-index:2; }
.work-hero__cue{ z-index:2; }
.work-hero__inner{ max-width:44ch; }
.work-hero h1{ color:#fff; }
.work-hero__lead{
  color:var(--muted-on-dark); max-width:52ch; line-height:1.55;
  font-size:clamp(1.02rem,1.5vw,1.28rem);
}
.work-hero__cue{
  position:absolute; right:var(--gutter); bottom:clamp(18px,4vw,38px);
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted-on-dark);
}
.work-hero__cue .arrow{ width:15px; transform:rotate(90deg); }

.work-reel-sec{ background:var(--dark); }
.reel{ display:flex; flex-direction:column; }

.reel-row{
  position:relative; display:block; width:100%;
  min-height:clamp(120px,16vh,182px);
  overflow:hidden; cursor:pointer; background:#0c0c0d;
  border-top:1px solid rgba(255,255,255,.08);
  transition:min-height .6s var(--ease), opacity .8s var(--ease), transform .8s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.reel-row:last-child{ border-bottom:1px solid rgba(255,255,255,.08); }

.reel-row__bg{ position:absolute; inset:0; z-index:0; }
.reel-row__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
  opacity:.4; transform:scale(1.06);
  transition:opacity .7s var(--ease), transform 7s var(--ease);
}
.reel-row__bg mux-player{ width:100%; height:100%; display:block; --media-object-fit:cover; }
.reel-row__shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.62) 42%, rgba(10,10,11,.22) 78%, rgba(10,10,11,.4) 100%),
    linear-gradient(0deg, rgba(10,10,11,.5) 0%, rgba(10,10,11,0) 42%);
  transition:opacity .6s var(--ease);
}

.reel-row__inner{
  position:relative; z-index:2;
  max-width:var(--container); margin-inline:auto; width:100%;
  min-height:inherit;
  display:flex; flex-direction:column; justify-content:center; gap:.3rem;
  padding:clamp(20px,4vw,44px) var(--gutter);
  transition:opacity .4s var(--ease);
}
.reel-row__n{ font-size:.76rem; letter-spacing:.2em; font-weight:600; color:var(--amber); }
.reel-row__of{ color:var(--muted-on-dark); font-weight:500; }
.reel-row__title{
  color:#fff; font-weight:600; letter-spacing:-.025em; line-height:1.03;
  font-size:clamp(1.55rem,4.2vw,3.1rem); max-width:22ch;
}
.reel-row__reveal{
  overflow:hidden; max-height:0; opacity:0; transform:translateY(8px);
  transition:max-height .6s var(--ease), opacity .5s var(--ease), transform .6s var(--ease);
}
.reel-row__type{
  display:inline-block; margin-top:1rem;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.2em; font-weight:600;
  color:var(--muted-on-dark);
}
.reel-row__blurb{ color:#d9d5cd; max-width:46ch; margin-top:.5rem; font-size:1.02rem; }
.reel-row__watch{ margin-top:1.35rem; }
.reel-row__watch-ic{ display:inline-flex; align-items:center; width:14px; }
.reel-row__watch-ic svg{ width:100%; height:auto; }

/* expanded: hover (desktop), keyboard focus, or tapped-open (JS) */
.reel-row:hover,
.reel-row:focus-visible,
.reel-row.is-open{ min-height:clamp(330px,62vh,580px); }
.reel-row:hover .reel-row__bg img,
.reel-row.is-open .reel-row__bg img{ opacity:.6; transform:scale(1); }
.reel-row:hover .reel-row__reveal,
.reel-row:focus-visible .reel-row__reveal,
.reel-row.is-open .reel-row__reveal{ max-height:340px; opacity:1; transform:none; }
.reel-row:focus-visible{ outline:2px solid var(--amber); outline-offset:-3px; }

/* film playing: fill the band, hide the overlay text */
.reel-row.is-playing{ min-height:clamp(340px,64vh,600px); cursor:default; }
.reel-row.is-playing .reel-row__shade{ opacity:0; }
.reel-row.is-playing .reel-row__inner{ opacity:0; pointer-events:none; }
.reel-row.is-playing .reel-row__bg img{ display:none; }

@media (max-width:760px){
  /* keep Jake centred in the portrait banner on narrow screens */
  .work-hero__media img{ object-position:49% center; }
}
@media (hover:none){ .reel-row{ min-height:clamp(150px,30vw,210px); } }
@media (prefers-reduced-motion:reduce){
  .reel-row, .reel-row__bg img, .reel-row__reveal, .reel-row__inner{ transition:none; }
}