/* ==========================================================================
   kennycall.com — site styles
   Built from the pen.dev mockups (Portfolio Updates.pen)
   ========================================================================== */

:root{
  --black:#000;
  --white:#fff;
  --pad:48px;
  --inner:24px;
  --maxw:1440px;

  /* spring(200,60) — hero appear */
  --spring: linear(0, 0.1078, 0.2472, 0.3674, 0.4685, 0.5535, 0.6249, 0.6849,
    0.7353, 0.7776, 0.8132, 0.843, 0.8681, 0.8892, 0.9069, 0.9218, 0.9343,
    0.9448, 0.9536, 0.961, 0.9673, 0.9725, 0.9769, 0.9806, 0.9837, 0.9863,
    0.9885, 0.9903, 0.9919, 0.9932, 0.9943, 0.9952, 0.996, 0.9966, 0.9971,
    0.9976, 0.998, 0.9983, 0.9986, 0.9988, 0.999, 0.9992, 0.9993, 0.9994, 1);
  --spring-dur:2164ms;

  /* spring(400,30) — scroll-in + hero exit */
  --spring-j: linear(0, 0.0145, 0.0529, 0.1086, 0.1759, 0.2504, 0.3282, 0.4063,
    0.4827, 0.5555, 0.6235, 0.6861, 0.7427, 0.7932, 0.8375, 0.876, 0.9089,
    0.9367, 0.9596, 0.9784, 0.9933, 1.0049, 1.0137, 1.02, 1.0243, 1.0269,
    1.0282, 1.0283, 1.0277, 1.0264, 1.0247, 1.0227, 1.0206, 1.0184, 1.0162,
    1.014, 1.012, 1.0101, 1.0084, 1.0068, 1.0055, 1.0042, 1.0032, 1.0023,
    1.0016, 1.001, 1.0005, 1.0001, 0.9998, 0.9995, 0.9994, 0.9993, 0.9992,
    0.9992, 0.9992, 0.9992, 0.9993, 0.9993, 0.9994, 0.9994, 1);
  --spring-j-dur:534ms;

  /* spring(500,60) — card hover */
  --spring-card: linear(0, 0.066, 0.1899, 0.318, 0.4331, 0.5316, 0.6139, 0.6822,
    0.7385, 0.7849, 0.8231, 0.8545, 0.8803, 0.9016, 0.919, 0.9334, 0.9452,
    0.955, 0.963, 0.9695, 0.9749, 0.9794, 0.9831, 0.9861, 0.9885, 0.9906,
    0.9922, 0.9936, 0.9948, 0.9957, 0.9965, 0.9971, 0.9976, 0.998, 0.9984,
    0.9987, 0.9989, 0.9991, 0.9993, 0.9994, 1);
  --spring-card-dur:782ms;
  --hover-dur:620ms;

  /* grey mesh band used behind story rows + quote cards */
  --band:
    radial-gradient(120% 140% at 72% 18%, #2a2a2a 0%, #141414 42%, #090909 100%),
    #0a0a0a;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--white);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid #ffd60a;outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ---------- shared type ---------- */
.t-title{font-family:"Inter Tight",Inter,sans-serif;font-weight:700;line-height:1.1}
.h-section{font-family:"Inter Tight",Inter,sans-serif;font-weight:700;font-size:clamp(40px,6vw,72px);line-height:1.1}
.h-block{font-family:"Inter Tight",Inter,sans-serif;font-weight:700;font-size:clamp(28px,3.6vw,56px);line-height:1.1}
.body-lg{font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(20px,2.4vw,36px);line-height:1.4}
.body{font-family:"Inter Tight",Inter,sans-serif;font-size:20px;line-height:1.4}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.12em;color:#8c8c8c;text-transform:uppercase}

/* ---------- badge with rotating ring ---------- */
.badge{position:absolute;width:384px;height:384px;border-radius:50%;background:#fff;
  overflow:hidden;z-index:3;border:2px solid #000}
.badge__ring{position:absolute;top:50%;left:50%;width:83.3%;height:83.3%;
  transform:translate(-50%,-50%);animation:spin 20s linear infinite}
.badge__ring svg{width:100%;height:100%;overflow:visible}
/* per-character placement handles spacing now; letter-spacing would offset
   each glyph away from its own centre point */
.badge__ring text{font-family:Inter,sans-serif;font-weight:900;font-size:7.6px;
  letter-spacing:0;fill:#000}
@keyframes spin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.badge__photo{position:absolute;top:50%;left:50%;width:57.3%;height:57.3%;
  transform:translate(-50%,-50%);border-radius:50%;overflow:hidden}
/* max-width:none is required: the global img{max-width:100%} reset clamps this
   to the circle's width, so only the height scales and the portrait stops
   covering the frame. */
.badge__photo img{position:absolute;left:-6.36%;bottom:-6.36%;
  width:112.27%;height:112.27%;max-width:none;object-fit:cover}

/* ---------- nav links ---------- */
.navlink{position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding-bottom:8px;font-size:18px;font-weight:500;line-height:1.2;overflow:hidden}
.navlink i{position:absolute;bottom:-1px;left:calc(50% - .5px);width:1px;height:1px;background:currentColor;
  transition:left var(--hover-dur) var(--spring),width var(--hover-dur) var(--spring),
             height var(--hover-dur) var(--spring),bottom var(--hover-dur) var(--spring)}
.navlink:hover i,.navlink:focus-visible i{left:0;width:100%;height:2px;bottom:0}

/* ---------- chips / pills ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  font-size:14px;font-weight:600;color:#000;line-height:1.2}
.chip--lg{padding:8px 16px;font-size:16px}
.tool{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;
  border:1px solid #fff;font-size:16px;font-weight:500;line-height:1.2;color:#fff}
.pill{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;
  border:1px solid #fff;font-size:16px;font-weight:500;line-height:1.2}
.chips{display:flex;flex-wrap:wrap;gap:10px}

/* skill colours (consistent site-wide) */
.c-user-research{background:#7AA2FF}
.c-usability-testing{background:#6FD39B}
.c-uiux-design{background:#F5C26B}
.c-prototyping{background:#F28DB2}
.c-design-system-development{background:#B69CFF}
.c-process-development{background:#6CCFE0}
.c-sales-inventory-system-design{background:#FF9F6B}
.c-project-management{background:#C3E06C}
.c-business-development{background:#FF7A85}
.c-vibe-development{background:#8FD3FF}
.c-product-strategy{background:#E0A3FF}
.c-interaction-design{background:#7FE0C4}
.c-default{background:#D6D6D6}

/* ---------- buttons ---------- */
/* Board spec: fixed 218x68 pill. align-self stops the flex-column parent
   stretching it to the full column width. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;
  align-self:flex-start;gap:15px;width:218px;max-width:100%;height:68px;
  background:#fff;color:#000;padding:0 18px 0 16px;font-size:24px;font-weight:500;
  transition:background-color var(--hover-dur) var(--spring),color var(--hover-dur) var(--spring)}
.btn svg{width:35px;height:35px;flex:none;fill:currentColor;transition:transform var(--hover-dur) var(--spring)}
.btn:hover{background:#000;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.btn:hover svg{transform:translateX(6px)}
.btn-pill{display:inline-flex;align-self:flex-start;width:fit-content;
  align-items:center;gap:10px;border-radius:999px;background:#fff;color:#000;
  padding:14px 24px;font-size:17px;font-weight:700;transition:transform var(--hover-dur) var(--spring)}
.btn-pill svg{width:20px;height:20px;fill:currentColor}
.btn-pill:hover{transform:translateY(-2px)}
.btn-spotify{background:#1DB954;color:#000}
.btn-instagram{background:linear-gradient(90deg,#FEDA75,#FA7E1E 25%,#D62976 50%,#962FBF 75%,#4F5BD5);color:#fff}

/* ---------- reveal on scroll ---------- */
.reveal{scale:.8;transition:scale var(--spring-j-dur) var(--spring-j)}
.reveal.is-in{scale:1}

/* ==========================================================================
   HOME
   ========================================================================== */
.page{position:relative;z-index:1}
.hero{position:sticky;top:0;z-index:1;height:100vh;min-height:640px;padding:var(--pad);
  background:#000;display:flex;transition:translate var(--spring-j-dur) var(--spring-j)}
.hero.is-gone{translate:0 -1200px}
.hero__panel{position:relative;flex:1;background:#fff;border-radius:196px 0 0 0;overflow:hidden}
.hero__menu{position:absolute;top:var(--pad);right:var(--pad);z-index:2;
  display:flex;flex-direction:column;align-items:flex-end;gap:20px;color:#000}
.wordmark{position:absolute;left:-14px;right:-14px;display:block;height:auto;overflow:visible}
.wordmark h1,.wordmark h2,.wordmark span{font-family:"Inter Tight",Inter,sans-serif;font-weight:900;
  font-size:160px;line-height:.8em;color:#000;white-space:nowrap;margin:0}
.hero .wordmark{bottom:-14px}
.hero__badge{top:var(--pad);left:var(--pad);animation:badge-in var(--spring-dur) var(--spring) both}
@keyframes badge-in{from{transform:translate(-120px,-120px) rotate(-180deg)}to{transform:none}}
.wordmark-wrap{position:absolute;inset:0;pointer-events:none;animation:rise var(--spring-dur) var(--spring) both}
@keyframes rise{from{transform:translateY(120px)}to{transform:none}}

.section{position:relative;z-index:1;padding:96px var(--pad);background:#000}
.section > *{position:relative;z-index:1}
.section > .section__bg{position:absolute;inset:0;z-index:0}
/* Live site pins the Specialties and Work headings under the nav; the content
   that follows shares z-index 1 and is later in the DOM, so it scrolls over
   them. Must outrank `.section > *{position:relative}` above. */
.section > .h-section--sticky{position:sticky;top:96px;z-index:1}
/* Hidden by scrollEffects() once the block below has slid over it, so it can't
   reappear through the gutters between card rows. */
.h-section--sticky.is-behind{opacity:0}
.section__bg img{width:100%;height:100%;object-fit:cover}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);
  border-bottom:2px solid #fff}
.about__intro{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:var(--pad)}
.about__lead{display:flex;flex-direction:column;gap:24px}
.about__cards{display:flex;flex-direction:column;justify-content:center}
.about__card{position:relative;background:#000;border:2px solid #fff}
.about__card + .about__card{margin-top:-2px}
.about__card h3{padding:var(--pad);background:#fff;color:#000;
  font-family:"Inter Tight",Inter,sans-serif;font-size:32px;font-weight:700;line-height:1.1}
.about__card p{padding:var(--pad);font-family:"Inter Tight",Inter,sans-serif;font-size:18px;line-height:1.4}
@supports (position:sticky){.about__card{position:sticky;top:96px}}

/* specialties */
.spec{display:flex;flex-direction:column}
.spec__row{position:sticky;top:224px;display:flex;justify-content:space-between;align-items:center;
  gap:24px;padding:var(--pad);background:#000}
/* Border as an inset overlay so it doesn't add to the row's height: the live
   site's rows are exactly 161px (72px number at 0.9 line-height + 2x48 pad). */
.spec__row::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:2px solid #fff;border-bottom-width:0}
.spec__row:last-child::after{border-bottom-width:2px}
.spec__row h3{font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(20px,2.4vw,32px);font-weight:700;line-height:1.1}
.spec__num{font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(36px,5vw,72px);font-weight:700;line-height:.9;color:#000}

/* work grid + cards */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pad)}
.card{position:relative;display:block;height:680px;overflow:hidden;background:#0a0a0a}
.card__media{position:absolute;top:-100px;left:0;right:0;z-index:1;height:651px;
  transition:top var(--spring-card-dur) var(--spring-card)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card:hover .card__media,.card:focus-visible .card__media{top:0}
/* Media sits above the title so the image slides over the heading on hover,
   matching the live site; the ticker (z-index 2) stays on top of both. */
.card__title{position:absolute;left:0;right:0;bottom:0;z-index:0;display:flex;flex-direction:column;gap:12px}
.card__title h3{font-family:"Inter Tight",Inter,sans-serif;font-size:32px;font-weight:700;line-height:1.1}
.card__ticker{position:absolute;left:0;right:0;bottom:-98px;height:98px;z-index:2;background:#000;
  display:flex;align-items:center;overflow:hidden;transition:bottom var(--spring-card-dur) var(--spring-card)}
.card:hover .card__ticker,.card:focus-visible .card__ticker{bottom:0}
.ticker__track{display:flex;align-items:center;width:max-content;animation:ticker var(--ticker-dur,14s) linear infinite}
@keyframes ticker{to{transform:translateX(-50%)}}
.ticker__item{display:flex;align-items:center;gap:24px;padding:0 12px;white-space:nowrap}
.ticker__item span{font-family:"Inter Tight",Inter,sans-serif;font-size:32px;font-weight:700}
.ticker__item svg{width:36px;height:36px;fill:#fff;flex:none}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pad)}
.quote{display:flex;flex-direction:column;gap:28px;padding:44px 48px 40px;background:var(--band);
  border:2px solid #fff}
.quote__mark{font-family:"Inter Tight",Inter,sans-serif;font-size:96px;font-weight:900;line-height:.6;color:#c9c9c9}
.quote__text{font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(20px,2vw,26px);line-height:1.45}
.quote__by{display:flex;align-items:center;gap:16px;margin-top:auto}
.quote__by img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.quote__by b{font-size:20px;font-weight:700}
.quote__by span{display:block;font-size:16px;color:#bbb}

/* footer (fixed reveal on home/links/licensing) */
.footer-spacer{height:100vh}
.site-footer{position:fixed;inset:0;z-index:0;padding:var(--pad);display:flex;flex-direction:column;background:#000}
.site-footer__panel{position:relative;flex:1;background:#fff;border-radius:0 0 192px 0;overflow:hidden}
.site-footer .wordmark{top:-14px}
.site-footer__links{position:absolute;left:96px;bottom:80px;z-index:2;display:flex;gap:var(--pad);color:#000}
.site-footer__badge{right:var(--pad);bottom:var(--pad)}
/* inline footer (case studies) */
.site-footer--inline{position:relative;inset:auto;height:auto;min-height:698px}
.site-footer--inline .site-footer__links{bottom:120px}

/* ==========================================================================
   CASE STUDY
   ========================================================================== */
.cs-hero{padding:var(--pad) var(--pad) 0;background:#000}
.cs-hero__top{display:flex;align-items:flex-start;gap:24px}
.cs-back{display:inline-flex;align-items:center;justify-content:center;width:48px;height:40px;flex:none}
.cs-back svg{width:32px;height:32px;fill:#fff}
.cs-hero h1{font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(40px,6.4vw,80px);font-weight:700;line-height:1.2}
.cs-hero__img{margin-top:48px;border-radius:0 300px 0 0;overflow:hidden}
.cs-hero__img img{width:100%;height:auto}
.cs-details{margin-top:28px;padding-top:28px;border-top:1px solid #2a2a2a;
  display:flex;flex-direction:column;gap:28px}
.cs-detail{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center}
.cs-detail__value{font-size:18px;line-height:1.5}

.snapshots{padding:48px var(--pad) 72px;background:#000}
.snapshots h2{font-family:"Inter Tight",Inter,sans-serif;font-size:24px;font-weight:700;line-height:1.2}
.snapshots__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
/* Board frames each snapshot at a fixed 658x370 box with the photo as a fill,
   so both crop to one frame instead of sizing to their own dimensions. */
.snapshots figure img{display:block;width:100%;aspect-ratio:658/370;object-fit:cover}
.snapshots figcaption{margin-top:16px;font-family:"Inter Tight",Inter,sans-serif;font-size:18px}
.snapshots__cta{margin-top:32px}

.story{display:flex;flex-direction:column}
.story__row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:72px var(--pad)}
.story__row--band{background:var(--band);border:2px solid #fff}
/* --wide switches the row to a column; .story__row's align-items:center would
   then centre children horizontally, so reset it to match the board. */
.story__row--wide{display:flex;flex-direction:column;align-items:stretch;gap:48px}
.story__row--wide .story__head{display:grid;grid-template-columns:520px 1fr;gap:64px;align-items:start}
/* Board frames every story image at a fixed box with the photo as a fill
   (638x440 in the zig-zag rows, 660x440 in the paired row), which crops any
   rounding baked into a source screenshot and keeps the pair identical. */
.story__media img{display:block;width:100%;height:auto;aspect-ratio:638/440;object-fit:cover}
.story__pair .story__media img{aspect-ratio:660/440}
/* A paired image may carry a caption, so .story__media is a <figure>; kill the
   UA margin and keep the label the same grey as .story__sub, so it reads as
   supporting text rather than body copy. */
.story__media{margin:0}
.story__media figcaption{margin-top:16px;font-family:"Inter Tight",Inter,sans-serif;
  font-size:18px;font-weight:500;line-height:1.3;color:#cfcfcf}
/* element rules above must never resurrect a [hidden] element */
[hidden]{display:none !important}
.story__text{display:flex;flex-direction:column;gap:28px}
.story__title{display:flex;align-items:center;gap:16px}
.story__title h2{font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(28px,3.6vw,56px);font-weight:700;line-height:1.1}
.story__icon{width:52px;height:52px;flex:none;fill:#fff}
.story__body{display:flex;flex-direction:column;gap:18px;font-family:"Inter Tight",Inter,sans-serif;font-size:20px;line-height:1.4}
.story__sub{font-size:24px;font-weight:600;color:#cfcfcf;line-height:1.3}
.story__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
/* A pair whose sources are too small to fill a full column (the 600px Monovo
   gifs). Capped so they are not upscaled ~1.8x on a 2x screen as they were at
   full column width. 396px is a 1.32x upscale -- a deliberate middle between
   sharpness and presence. Both caps matter: the first sizes the columns on
   desktop, the second catches the single-column layout below 820px, where a
   full-width image was the softest of the lot. */
.story__pair--compact{width:100%;max-width:974px;margin-inline:auto}
/* aspect-ratio must match the source (600/479). The pair's default 660/440
   frame is wider than these gifs, so object-fit:cover was slicing 16.5% of
   each one away -- 8.2% off the top and bottom, taking the device bezels
   with it. Matching the source crops nothing. */
.story__pair--compact .story__media img{max-width:475px;margin-inline:auto;
  aspect-ratio:600/479}
.bullets{display:flex;flex-direction:column;gap:10px}
.bullets li{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:start}
.lessons{display:flex;flex-direction:column;gap:12px;max-width:1000px;
  font-family:"Inter Tight",Inter,sans-serif;font-size:20px;line-height:1.4}
.lesson{border-bottom:1px solid #2f2f2f}
.lesson:last-child{border-bottom:0}
.lesson summary{display:flex;align-items:center;gap:12px;padding:12px 0;cursor:pointer;
  list-style:none}
.lesson summary::-webkit-details-marker{display:none}
.lesson summary b{flex:1;font-weight:700}
.lesson summary:hover b{text-decoration:underline;text-underline-offset:4px}
.lesson .chev{width:24px;height:24px;flex:none;color:#fff;
  transform:rotate(180deg);transition:transform var(--hover-dur) var(--spring)}
.lesson[open] .chev{transform:none}
.lesson p{margin:0;padding:0 36px 14px 26px;color:#d5d5d5}
/* the height slide is driven by slideDisclosures() in site.js */

.testimonials{padding:36px var(--pad) 96px;background:#000}
.testimonials h2{font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(28px,4vw,48px);font-weight:700;
  line-height:1.1;padding:80px 0 0}
.testimonials__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pad);margin-top:36px;align-items:stretch}
.quote--light{background:#fff;border:0;color:#000}
.quote--light .quote__text{color:#000}
.quote--light .quote__by span{color:#5a5a5a}
.testimonials--single .testimonials__grid{grid-template-columns:minmax(0,900px);justify-content:center}
.testimonials--single h2{text-align:center}
.testimonials--single .quote{align-items:center;text-align:center;padding:56px 64px 52px}
.testimonials--single .quote__by{flex-direction:column;gap:12px;text-align:center}
.testimonials--single .quote__by img{width:64px;height:64px}

.see-more{padding:96px var(--pad);background:#000}

/* ==========================================================================
   ABOUT
   ========================================================================== */
/* Sits in the photo's rounded-away top-left corner, so it reads white-on-black
   like the back button on every other page. */
.ab-hero__back{position:absolute;top:var(--pad);left:var(--pad);z-index:5}
.ab-hero{position:relative;display:grid;grid-template-columns:1fr 528px;gap:32px;padding:var(--pad);
  height:100vh;min-height:720px;background:#000}
.ab-hero__photo{position:relative}
.ab-hero__badge{width:240px;height:240px;right:-8px;bottom:-16px;z-index:4}
/* direct child only: the badge is nested inside this box, and an unscoped
   `img` here outranks .badge__photo img and breaks the portrait's framing. */
.ab-hero__photo > img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);
  border-radius:196px 0 0 0}
.ab-hero__panel{position:relative;background:#fff;color:#000;border-radius:0 0 192px 0;padding:48px;overflow:hidden}
.ab-hero__panel nav{display:flex;flex-wrap:wrap;gap:22px}
.ab-hero__panel h1{font-size:clamp(48px,7vw,120px);font-weight:900;line-height:.88;letter-spacing:-.02em;margin:48px 0 24px}
.ab-hero__panel p{font-size:22px;line-height:1.45;max-width:432px}

.cards-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pad)}
.panel{position:relative;padding:48px;background:var(--band);border:2px solid #fff}
.mbti__type{font-size:clamp(72px,10vw,140px);font-weight:900;line-height:.9;letter-spacing:-.02em}
.mbti__name{font-family:"Inter Tight",Inter,sans-serif;font-size:36px;font-weight:700;margin-top:6px}
.mbti__letters{display:flex;flex-direction:column;gap:14px;margin-top:28px;max-width:340px}
.mbti__letter{display:flex;align-items:center;gap:16px}
.mbti__tile{width:60px;height:60px;border-radius:12px;display:grid;place-items:center;
  font-size:30px;font-weight:900;color:#000;flex:none}
.mbti__word{font-family:"Inter Tight",Inter,sans-serif;font-size:24px;font-weight:700;line-height:1.2}
.mbti__meaning{font-size:15px;color:#a8a8a8}
.mbti__art{position:absolute;right:32px;bottom:0;width:212px;border-radius:106px 106px 0 0;overflow:hidden}
.strengths li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:10px 20px;
  padding:18px 0;border-bottom:1px solid #2e2e2e}
.strengths .rank{font-size:40px;font-weight:900;color:#4a4a4a;margin-right:20px}
.strengths .name{font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(22px,2.4vw,34px);font-weight:700}
.key-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px}

.bento{display:grid;gap:24px}
.bento__row{display:grid;gap:24px}
.bento__row--1{grid-template-columns:440px 1fr}
.bento__row--2{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{position:relative;overflow:hidden;min-height:460px;display:flex;align-items:flex-end;background:#161616}
.tile--tall{min-height:640px}
.tile__img{position:absolute;inset:0}
.tile__img img{width:100%;height:100%;object-fit:cover}
.tile__scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.63) 28%,transparent 60%)}
.tile__body{position:relative;padding:32px;display:flex;flex-direction:column;gap:12px;
  --scrim-fade:32px}
.tile__body h3{font-family:"Inter Tight",Inter,sans-serif;font-size:32px;font-weight:700;line-height:1.1}
.tile__body p{font-size:17px;font-weight:500}
.travel{display:grid;grid-template-columns:560px 1fr;background:#0c0c0c;border:2px solid #fff;overflow:hidden}
.travel__photo{position:relative;overflow:hidden}
.travel__photo img{position:absolute;left:-2.14%;top:-13.27%;
  width:126.61%;height:126.61%;max-width:none;object-fit:cover;filter:grayscale(1)}
.travel__body{padding:56px;display:flex;flex-direction:column;gap:28px}
.travel__body h3{display:flex;align-items:center;gap:16px;font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(32px,4vw,48px);font-weight:700;line-height:1.05}
.travel__globe{width:44px;height:44px;flex:none;color:#fff}
.stamps{display:flex;flex-wrap:wrap;gap:14px}
.stamp svg{width:22px;height:22px;flex:none;color:currentColor}
/* board tilts each stamp: -8, +6, -4, +9, -6 degrees counter-clockwise */
.stamp:nth-child(1){transform:rotate(8deg)}
.stamp:nth-child(2){transform:rotate(-6deg)}
.stamp:nth-child(3){transform:rotate(4deg)}
.stamp:nth-child(4){transform:rotate(-9deg)}
.stamp:nth-child(5){transform:rotate(6deg)}
.stamp:nth-child(6){transform:rotate(7deg)}
.stamp{width:118px;height:118px;border-radius:50%;border:3px solid;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:0 10px;font-size:12px;font-weight:800;letter-spacing:.08em;
  line-height:1.1;text-align:center}
.stamp--long{font-size:10px;letter-spacing:.04em}

.posters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pad)}
.poster{display:flex;flex-direction:column}
.poster__art{position:relative;aspect-ratio:416/600;overflow:hidden;border:2px solid #fff}
.poster__art img{width:100%;height:100%;object-fit:cover}
.poster__fade{position:absolute;left:0;right:0;bottom:0;height:38%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent)}
.poster__year{position:absolute;left:14px;bottom:14px;padding:5px 12px;border-radius:999px;
  background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.55);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.02em;backdrop-filter:blur(4px)}
.poster__stub{display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 24px;
  font-size:14px;font-weight:900;letter-spacing:.18em;color:#000}

.library{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.lib{position:relative;display:flex;flex-direction:column;gap:14px;padding:16px;
  border-radius:8px;background:#141414;
  transition:transform var(--spring-card-dur) var(--spring-card),
             background-color var(--hover-dur) var(--spring)}
.lib:hover,.lib:focus-visible{transform:scale(1.04);background:#1c1c1c;z-index:1}
.lib__cover{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:#2a2a2a}
/* Board places tall covers at natural aspect inside a square clip, anchored at
   y=0 — so the square shows the top of the artwork, not a centre crop. */
.lib__cover img{width:100%;height:100%;object-fit:cover;object-position:top;
  transition:transform var(--spring-card-dur) var(--spring-card)}
.lib:hover .lib__cover img,.lib:focus-visible .lib__cover img{transform:scale(1.06)}
.lib h3{font-family:"Inter Tight",Inter,sans-serif;font-size:17px;font-weight:700;line-height:1.2}
.lib__meta{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:#b3b3b3;line-height:1.35}
.lib__dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none}

.accordion{border:2px solid #fff}
.accordion + .accordion{margin-top:24px}
.accordion summary{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:28px 48px;cursor:pointer;list-style:none}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary h3{font-family:"Inter Tight",Inter,sans-serif;font-size:32px;font-weight:700}
.accordion .count{border:1px solid #fff;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:700}
.accordion .chev{width:32px;height:32px;color:#fff;flex:none;
  transform:rotate(180deg);transition:transform var(--hover-dur) var(--spring)}
.accordion[open] .chev{transform:none}
.accordion__body{padding:0 48px 24px}
.accordion__body li{display:flex;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid #2a2a2a}
.accordion__body li:last-child{border-bottom:0}
.accordion__icon{width:52px;height:52px;border-radius:12px;background:#1c1c1c;display:grid;place-items:center;flex:none}
.accordion__icon svg{width:28px;height:28px;fill:#fff}
.accordion__body b{display:block;font-size:20px;font-weight:600}
.accordion__body span{display:block;font-size:15px;color:#9a9a9a}
/* the icon is a <span> too, so it needs to outrank the rule above */
.accordion__body .accordion__icon{display:grid;place-items:center;font-size:0}

.stack{padding:96px 0;background:#000;text-align:center;overflow:hidden}
.stack h2{font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(36px,5vw,72px);font-weight:700}
.stack__track{display:flex;gap:54px;align-items:center;width:max-content;margin-top:40px;
  animation:ticker var(--ticker-dur,32s) linear infinite}
.stack__track img{height:80px;width:auto;object-fit:contain;filter:grayscale(1)}

/* ==========================================================================
   LINKS / LICENSING
   ========================================================================== */
.simple{display:grid;grid-template-columns:646px 1fr;gap:var(--pad);padding:var(--pad);
  min-height:100vh;background:#000}
.simple__left{display:flex;flex-direction:column;gap:38px}
.simple__left h1{font-size:clamp(48px,9vw,96px);font-weight:900;letter-spacing:-.01em;line-height:.95;margin-top:auto}
.simple__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:48px;padding-top:225px}
.simple__group h2{font-family:"Inter Tight",Inter,sans-serif;font-size:18px;font-weight:400;margin-bottom:14px}
.simple__group li{margin-bottom:10px}
.simple__group a,.simple__group span{font-size:18px;font-weight:500}
.credit{font-size:15px;line-height:1.45;color:#c8c8c8;max-width:340px}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Between the stacked phone footer and full desktop width the 384px badge
   reaches far enough left to sit on top of the bottom-left link row, so step it
   down to roughly the size the live site uses at tablet widths. */
@media (min-width:811px) and (max-width:1000px){
  .site-footer__badge{width:200px;height:200px}
}
@media (max-width:1200px){
  .about,.cards-2,.reviews,.testimonials__grid,.grid-2,.story__row{grid-template-columns:minmax(0,1fr)}
  .story__row--wide .story__head{grid-template-columns:minmax(0,1fr)}
  .about__intro{position:static}
  .about__card{position:static}
  .bento__row--1,.bento__row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Two columns squeeze the copy taller while .tile__scrim's stops stay tied to
     the TILE's height, so a heading can climb out of the gradient entirely — at
     620px "Music curation" sat on alpha 0. Fit the scrim to the body instead:
     solid behind every child, fading only across the body's top padding. */
  .tile__scrim{display:none}
  /* flex:1 is load-bearing. .tile is a row flex container, so the body would
     otherwise size to its content and the gradient would stop short of the
     tile's right edge on any tile whose copy is narrow (Uncle duty, Family
     story vlogging). The old inset:0 scrim never had that problem. */
  .tile__body{flex:1;background:linear-gradient(to top,rgba(0,0,0,.92) 0,
    rgba(0,0,0,.92) calc(100% - var(--scrim-fade)),rgba(0,0,0,0) 100%)}
  .mbti__art{position:static;width:190px;margin:24px auto 0}
  .travel{grid-template-columns:minmax(0,1fr)}
  .posters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .library{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab-hero{grid-template-columns:minmax(0,1fr);height:auto}
  .ab-hero__photo{min-height:380px}
  .simple{grid-template-columns:minmax(0,1fr)}
  .simple__cols{padding-top:32px}
  .story__row{gap:40px}
  .story__row--flip .story__media{order:-1}
}
@media (max-width:820px){
  :root{--pad:24px;--inner:16px}
  .hero{height:88vh;min-height:520px}
  /* The panel's corner arc has to trace the badge, not bulge past it. Both are
     anchored at var(--pad), so the radius must track the badge's outer radius
     (220/2 + 2px border = 111) plus the ~3px the desktop pairing uses. At 96px
     the arc cut 34px inside the circle and the white corner pushed out past it. */
  .hero__panel{border-radius:113px 0 0 0}
  .hero__menu{gap:12px}
  .badge{width:220px;height:220px}
  /* The sticky heading pins at 96px and is 44-54px tall across this band, so
     the rows have to pin clear of it — at 120px the first box came to rest
     across the heading's lower half. */
  .spec__row{top:168px;padding:24px;gap:12px}
  .about__card h3,.about__card p{padding:24px}
  .library{grid-template-columns:repeat(2,minmax(0,1fr))}
  .posters{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Live site stacks work cards: full-bleed image, title + chips beneath it
     rather than overlaid, and no hover ticker on touch. */
  .card{height:auto;background:transparent}
  .card__media{position:static;height:auto;top:auto}
  .card__media img{aspect-ratio:16/11;height:auto}
  .card__title{position:static;padding-top:16px;gap:10px}
  .card__ticker{display:none}
  .site-footer__links{left:24px;bottom:40px;gap:24px;flex-wrap:wrap}
  .site-footer__panel{border-radius:0 0 96px 0}
  .cs-hero__img{border-radius:0 120px 0 0}
  .cs-detail{grid-template-columns:minmax(0,1fr);gap:10px}
  .snapshots__pair,.story__pair{grid-template-columns:minmax(0,1fr)}
  .travel__body{padding:28px}
  .accordion summary,.accordion__body{padding-left:24px;padding-right:24px}
  .panel{padding:28px}
  .quote{padding:28px}
  .testimonials--single .quote{padding:32px 24px}
}
/* phones: shrink the badge and menu so they stop crowding each other */
@media (max-width:560px){
  /* Hero follows the live site on phones: a black band at the top, the badge
     centred on the panel's top edge, and the menu centred beneath it. */
  :root{--hero-top:192px}
  .badge{width:192px;height:192px}
  /* Full viewport height like the live site, and full bleed: no side padding,
     so the panel runs edge to edge and the wordmark can crop against the
     screen. svh keeps it stable while mobile browser chrome collapses. */
  .hero{height:100vh;height:100svh;min-height:600px;padding:var(--hero-top) 0 0}
  .hero__panel{border-radius:0}
  .hero__badge{left:calc(50% - 96px);top:calc(var(--hero-top) - 96px)}
  /* Bleeds 8px off the left, right and bottom, so KENNY CALL is clipped by the
     screen the way it is live rather than sitting inside a 24px margin. */
  .hero .wordmark{left:-8px;right:-8px;bottom:-8px}
  /* .hero__menu is positioned against .hero__panel, so this offset is from the
     panel's top edge (which already sits at --hero-top). */
  .hero__menu{left:0;right:0;top:144px;align-items:center;gap:24px}
  .navlink{font-size:16px}
  /* Both gifs sit on black, so 24px of black between them read as no gap. */
  .story__pair{gap:48px}
  /* Breathing room either side of the Contact Me button. */
  .about{gap:44px}
  .about__intro{gap:44px}
  .site-footer__panel{border-radius:0}
  .library{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .site-footer__links{gap:16px}
}
/* Short phones (SE, mini, landscape-ish): the full-size badge + 24px menu
   leaves the last link crowding the wordmark, so scale the hero down to fit. */
/* Phone: pastimes tiles were ~0.3 ratio (very tall). Shrink the body type so
   the tiles can sit close to square, and let the tile buttons be full-width
   blocks instead of squished two-line pills. */
@media (max-width:560px){
  /* Flatten both rows into a single 2-col grid so "Literally anything outside"
     can span full width and the remaining four form a 2x2. */
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bento__row{display:contents}
  .bento__row--1 > :nth-child(2){grid-column:1 / -1;order:-1}
  .travel{grid-column:1 / -1}
  .travel__photo{aspect-ratio:560/520}
  /* ~30% taller than the content-driven heights (213 -> 277, 188 -> 244) */
  .tile{min-height:277px}
  .tile--tall{min-height:277px}
  .bento__row--1 > :nth-child(2){min-height:244px}
  /* Scrim mechanics are inherited from the 1200px block; this width just has a
     deeper top padding for the fade to live in. */
  .tile__body{padding:38px 14px 14px;gap:6px;--scrim-fade:38px}
  .tile__body h3{font-size:17px;line-height:1.15}
  .tile__body p{font-size:12px;line-height:1.3}
  .tile__body .chips{gap:5px}
  .tile__body .chip{padding:3px 7px;font-size:10px;letter-spacing:0}
  .tile__body .btn-pill{width:100%;justify-content:center;text-align:center;
    font-size:13px;padding:10px 12px;gap:8px;line-height:1.25;border-radius:999px}
  .btn-pill__rest{display:none}
  .tile__body .btn-pill svg{width:20px;height:20px}
  /* the domain chip is the least load-bearing part of a strength row */
  .strengths .chip{display:none}
}
@media (max-width:560px) and (max-height:740px){
  :root{--hero-top:150px}
  .badge{width:150px;height:150px}
  .hero__badge{left:calc(50% - 75px);top:calc(var(--hero-top) - 75px)}
  .hero__menu{top:100px;gap:18px}
}
/* ==========================================================================
   FOOTER on phones and small tablets
   The live site drops the black frame at this width: the white panel fills the
   screen, the wordmark bleeds off the top edge, and the badge and menu run down
   the centre instead of crowding the two bottom corners. Offsets below are the
   live site's measured values (badge 192px at y=99, menu 140px off the bottom).
   ========================================================================== */
@media (max-width:810px){
  .site-footer{padding:0}
  .site-footer__panel{border-radius:0}
  .site-footer .wordmark{top:-8px;left:-8px;right:-8px}
  .site-footer__badge{top:99px;left:50%;right:auto;bottom:auto;
    width:192px;height:192px;margin-left:-96px}
  .site-footer__links,.site-footer--inline .site-footer__links{
    left:0;right:0;bottom:140px;flex-direction:column;flex-wrap:nowrap;
    align-items:center;gap:24px}
  .site-footer__links .navlink{font-size:16px}
}
/* Landscape phones / short tablets: the viewport-height footer has no room for
   the full badge plus 140px of breathing space, so pull both in. The inline
   case-study footer keeps its own fixed height and is left alone. */
@media (max-width:810px) and (max-height:620px){
  .site-footer:not(.site-footer--inline) .site-footer__badge{
    top:56px;width:150px;height:150px;margin-left:-75px}
  .site-footer:not(.site-footer--inline) .site-footer__links{bottom:56px;gap:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{scale:1}
}