/* ============================================================
   jtcreative.net
   Poppins 700 for headers, 400/500 for body.
   ============================================================ */

:root{
  --tan:        #d2b48c;
  --tan-hover:  #e2c9a9;
  --bg-top:     #131313;
  --bg-bottom:  #000000;
  --text:       #ececec;   /* primary — off-white, softer than #fff */
  --text-dim:   #a2a2a2;   /* secondary */
  --hairline:   rgba(255,255,255,.09);
  --surface:    rgba(255,255,255,.04);

  /* Narrow enough that a comfortable text measure fills the column, so the
     page reads as a centred block rather than content pinned to the left. */
  --wrap:       980px;
  /* Second, wider track used only by the Selected Work grid, so it breaks
     out past the label without ever reaching the viewport edge. */
  --wrap-wide:  1100px;
  --gutter:     clamp(20px, 5vw, 48px);

  /* Three spacing tiers. The ratio between them is what lets a reader feel
     which blocks are one idea and which are separate, with no rules or
     dividers doing the work. */
  --space-tight:    clamp(20px, 2.6vw, 32px);
  --space-standard: clamp(56px, 7vw, 88px);
  --space-wide:     clamp(96px, 11vw, 150px);

  /* Reading measure for running body copy. Sits on the text elements
     themselves, never their containers, so sections keep their full-width
     left edge and alignment. Measured, not guessed: 64ch renders ~80
     characters per line here. 1ch is the width of "0" (10.68px), well above
     the ~8.5px average character in this copy, so the ch figure sits
     deliberately below the character count it produces — a literal 80ch
     would run to ~104 characters. */
  --measure:        64ch;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:400;
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  color:var(--text);
  background-color:var(--bg-bottom);
  background-image:linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  background-repeat:no-repeat;
  background-size:100% 1500px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3{ font-weight:700; letter-spacing:-.02em; line-height:1.1; margin:0; }
p,figure,blockquote{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; }

:focus-visible{ outline:2px solid var(--tan); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--tan); color:#000; padding:.65rem 1rem;
  font-weight:500; text-decoration:none;
}
.skip-link:focus{ left:var(--gutter); top:.75rem; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
/* Below ~1100px this resolves to the same width as .wrap, so narrow screens
   and mobile are untouched by the widening. */
.wrap--wide{ max-width:var(--wrap-wide); }

/* ---------- Masthead ---------- */
.masthead{ padding-block:clamp(20px,3.5vw,32px); }
.masthead__inner{ display:flex; align-items:center; gap:1rem; }

.wordmark{
  font-weight:700; font-size:1.0625rem; letter-spacing:-.01em;
  text-decoration:none; color:var(--text);
}
.wordmark span{ color:var(--tan); margin-left:.35em; }

/* ---------- Shared type ---------- */
.eyebrow{
  font-size:.75rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tan); margin-bottom:clamp(22px,3vw,34px);
}

/* A real heading rather than a micro-label — same size and weight as the
   case study names, white, sentence case. Sized alongside .case__name below. */
.section__heading{ margin-bottom:clamp(22px,3vw,34px); }

.btn{
  display:inline-block; text-decoration:none;
  font-weight:500; font-size:.9375rem; line-height:1;
  color:#000; background:var(--tan);
  padding:1.05em 2.1em; border-radius:2px;
  transition:background-color .15s ease;
}
.btn:hover{ background:var(--tan-hover); }
.btn--lg{
  font-weight:700;
  font-size:clamp(1rem, .9rem + .75vw, 1.375rem);
  padding:1em 1.6em;
  word-break:break-word;
}

/* ---------- Section rhythm ----------
   Each section owns only the gap above it — bottom padding stays zero — so
   every gap on the page is a single value from one of the three tiers rather
   than the sum of two paddings. Separation comes from these alone: no rules,
   borders or ornament anywhere. */
.section{ padding-block:0; }
.section--work{    padding-top:var(--space-wide); }      /* hero -> work */
.section--clients{ padding-top:var(--space-standard); }  /* work -> logos */
.section--cases{   padding-top:var(--space-standard); }  /* logos -> cases */
.section--process{ padding-top:var(--space-standard); }  /* cases -> process */
.section--contact{ padding-top:var(--space-wide); }      /* process -> contact */

/* Page's closing gap, before the footer rule. */
.section--contact{ padding-bottom:clamp(64px,8vw,104px); }

/* ---------- Hero ---------- */
.hero{
  padding-top:clamp(40px,6vw,72px);
  padding-bottom:0;
}
.hero__title{
  font-size:clamp(2.25rem, 1.15rem + 5.4vw, 4.5rem);
  letter-spacing:-.03em;
  line-height:1.04;
}
.hero__sub{
  margin-top:clamp(20px,2.8vw,30px);
  font-size:clamp(1.0625rem, .95rem + .75vw, 1.4375rem);
  font-weight:400;
  color:var(--text-dim);
  max-width:34ch;
}
.hero .btn{ margin-top:clamp(32px,4.5vw,48px); }

/* ---------- Media (video frames) ---------- */
.media{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:3px;
}
.media--9x16{ aspect-ratio:9/16; }
.media--16x9{ aspect-ratio:16/9; }

.media__poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  background:#000;
}
.media iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* Play button */
.playbtn{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  padding:0; margin:0; border:0;
  background:rgba(0,0,0,.28);
  color:var(--text);
  cursor:pointer;
  transition:background-color .18s ease;
}
.playbtn:hover{ background:rgba(0,0,0,.42); }
.playbtn::after{
  content:"";
  position:absolute;
  width:clamp(54px,13%,72px);
  aspect-ratio:1;
  border:2px solid rgba(255,255,255,.85);
  border-radius:50%;
}
.playbtn svg{
  position:relative;
  width:clamp(20px,5%,26px);
  height:auto;
  fill:#fff;
  margin-left:.18em; /* optical centring of the triangle */
}
.media--16x9 .playbtn::after{ width:clamp(54px,16%,74px); }
.media--16x9 .playbtn svg{ width:clamp(20px,6%,26px); }
.playbtn[hidden]{ display:none; }

/* Placeholder shown when a YouTube ID has not been filled in yet */
.media--pending{
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.media--pending span{
  font-size:.8125rem; letter-spacing:.06em;
  color:var(--text-dim);
  padding:1rem;
}

/* ---------- Work grid ----------
   All four pieces share one set of column tracks, so the 9:16 row and the
   16:9 row line up on both edges. Row gap is wider than the column gap to
   keep the two rows reading as separate groups. */
.work-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:clamp(20px,3vw,36px);
  row-gap:clamp(36px,5vw,60px);
}

/* At a full 424px track a 9:16 frame stands 754px tall against the 16:9
   row's 239px, which throws the two rows badly out of balance. Capping the
   frame brings it to ~533px. This sits on .media, not on .piece--vertical:
   narrowing the figure itself would drag the caption in with the video,
   and the caption belongs on the page margin with everything else. */
@media (min-width:701px){
  .piece--vertical .media{
    max-width:300px;
    /* Left-aligned, not centred: the frame's left edge has to line up with
       its own caption's left edge. All the leftover width in the cell falls
       to the right of the tile, which is intended and stays empty. */
    margin-inline:0 auto;
  }
}

@media (max-width:700px){
  .work-grid{ grid-template-columns:1fr; row-gap:clamp(32px,6vw,44px); }
  /* One column means a 9:16 tile takes the container's full width, which is
     very tall on a large phone — cap it. */
  .piece--vertical{ max-width:380px; }
}

/* No padding needed: the grid sits inside .wrap, so the captions already
   start at the page's content edge like every other section. */
.piece__cap{ margin-top:clamp(14px,1.8vw,18px); }
.piece__title{ font-size:clamp(1rem, .95rem + .35vw, 1.1875rem); }
.piece__meta{
  margin-top:.3rem;
  font-size:.875rem;
  color:var(--text-dim);
}

/* ---------- Logos ---------- */
/* Uniform circular avatars, full colour. Every item is the same fixed square
   and the image covers it, so each logo is cropped to an identical circle
   whatever its source dimensions — which also clips away the background
   around the logo on the sources that are screenshots. */
.logos{
  --logo-size:clamp(72px,7.5vw,96px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  column-gap:clamp(18px,2.6vw,30px);
  row-gap:clamp(22px,4vw,32px);
}
/* The circular clip lives on the container, not the image: overflow:hidden
   here means a scale() on the img inside zooms the photo within a fixed
   circle instead of growing the circle itself (border included). */
.logos__item{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--logo-size);
  height:var(--logo-size);
  overflow:hidden;
  border-radius:50%;
  /* Hairline, not a glow: gives the circle an edge where the logo's own
     background is already near-black and would otherwise melt into the page. */
  border:1px solid var(--hairline);
}
.logos__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Hill Hoops (3rd) and NBA Europe (5th) have a sliver of the source
   background at the circle's edge; scale the image content up within the
   fixed circle to crop past it — the circle itself does not change size. */
.logos__item:nth-child(3) img,
.logos__item:nth-child(5) img{
  transform:scale(1.09);
}

/* Fallback if a logo file is ever missing — sized to the name rather than
   squeezed into the circle. */
.logos__item--text{
  width:auto;
  overflow:visible;
  border-radius:0;
  border:none;
}
.logos__item .logos__text{
  white-space:nowrap;
  font-weight:700;
  font-size:clamp(.8125rem,1.4vw,1rem);
  letter-spacing:.02em;
  line-height:1;
  color:var(--text);
  opacity:.72;
}

/* Once the row wraps, space-between strands the last row — centre instead. */
@media (max-width:620px){
  .logos{ justify-content:center; column-gap:clamp(20px,5vw,40px); }
}

/* Tight tier: the credential line belongs to the logo row above it. */
.rank{
  margin-top:var(--space-tight);
  font-size:.875rem;
  color:var(--text-dim);
}

/* ---------- Case studies ---------- */
/* Tight tier: the two case studies read as one grouped block. */
.case + .case{ margin-top:var(--space-tight); }

.case__name,
.section__heading{ font-size:clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem); }
.case__since{
  margin-top:.4rem;
  font-size:.875rem; letter-spacing:.04em;
  color:var(--tan);
}

/* SROS only: two columns, because the testimonial video fills the right one
   for the full height of the bullets. */
.case__body{
  margin-top:clamp(28px,3.6vw,40px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,64px);
  align-items:start;
}

@media (max-width:820px){
  .case__body{ grid-template-columns:1fr; gap:clamp(28px,6vw,40px); }
}

/* PGC only: stacked. Quote sits under the heading, bullets run the full text
   width beneath it — nothing is asked to fill a right column that has no
   content for it. */
.case--stacked .quote{ margin-top:clamp(20px,2.6vw,30px); }
.case--stacked .points--full{ margin-top:clamp(28px,3.6vw,40px); }
/* Measure on the list items, not the list, so the bullets keep their left
   alignment and marker position. */
.points--full li{ max-width:var(--measure); }

.points li{
  position:relative;
  padding-left:1.35em;
}
.points li + li{ margin-top:.85em; }
.points li::before{
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:.45em; height:1px;
  background:var(--tan);
}

.case__media .piece__meta{ margin-top:.6rem; }

.quote{ margin:0; }
.quote__text{
  font-size:clamp(1.375rem, 1.1rem + 1.3vw, 1.875rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.2;
  color:var(--tan);
}
.quote__by{
  margin-top:.7rem;
  font-size:.875rem;
  color:var(--text-dim);
}

/* ---------- Process ----------
   The container runs the full text width; only the paragraphs inside carry
   a reading measure, so the section keeps its full-width left edge. */
.prose{ max-width:none; }
.prose p{ margin:0 0 1.25em; max-width:var(--measure); }
.prose p:last-child{ margin-bottom:0; }

/* ---------- Contact ---------- */
.section--contact .btn--lg{ margin-top:0; }

/* ---------- Footer ---------- */
.footer{
  padding-block:clamp(28px,4vw,40px);
  border-top:1px solid var(--hairline);
}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-size:.8125rem;
  color:var(--text-dim);
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ---------- Small screens: shorten the background fade ---------- */
@media (max-width:700px){
  body{ background-size:100% 900px; }
}