/* ============================================
   Kashan Abedin — site styles
   Font: Kanit (Google Fonts) — weights 400,500,600,700

   Layout of this file (top to bottom):
     1. Design tokens (CSS variables)
     2. Reset & base
     3. Components, in the order they appear on the page:
        Header, Section rhythm & dividers, Logo/wordmark,
        Section labels, Hero slider, Featured work, Key visuals
        grid, Client logos carousel, Agency collaborations, CTA,
        Footer, Info/resume page, Video lightbox, Cookie consent
     4. Responsive — every @media block, widest breakpoint first
   ============================================ */

/* ---------- Design tokens ---------- */

:root{
  --bg: #f5f5f7;
  --text: #1a1a1a;
  --gray: #979797;
  --pill-bg: #1a1a1a;
  --pill-text: #f5f5f5;
  --border: rgba(26,26,26,0.12);
  --gap-desktop: 60px;
}

/* ---------- Reset & base ---------- */

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

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

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Kanit', -apple-system, "system-ui", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

ul{ margin: 0; padding: 0; list-style: none; }

/* ---------- Header ---------- */

.site-header{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 80px var(--gap-desktop) 0;
}

.site-header .tagline{
  width: 23.5vw;
  min-width: 280px;
  max-width: 460px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  line-height: 22px;
  text-transform: uppercase;
}

/* Positioned so .main-nav lines up with the left edge of the "D" in
   the wordmark below (the logo's "D" sits at 80% of the content width,
   same as the live site) rather than just being flush with the tagline. */
.header-right{
  position: absolute;
  top: 80px;
  left: calc(80% - 0.6 * var(--gap-desktop));
  right: var(--gap-desktop);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.main-nav{
  min-width: 0;
}

.main-nav ul{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.main-nav a{
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: opacity .2s;
}

.main-nav a:hover{ opacity: 0.55; }

.since{
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--gray);
  white-space: nowrap;
  text-align: right;
}

/* ---------- Section rhythm & dividers ---------- */
/* Every section (a title + its content) lives in one of these, so the
   gap between any two sections is the same, equal top and bottom
   margin, and adjacent sections collapse together into one clean gap. */

.section{
  display: flow-root;
  margin: 120px 0;
  padding: 0 var(--gap-desktop);
}

/* Full-bleed 1px divider line, sitting halfway through this section's
   gap (the site's own light-grey page background shows either side).
   Only margin-top is set -- the gap above a divider section is that
   250px. Below it, the next element's own spacing (another section's
   250px margin-top, or the footer's own padding) takes over instead
   of stacking a second margin on top of it. */
.section-divider{
  position: relative;
  margin-top: 250px;
  /* margin-bottom: 250px; */
}

.section-divider::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -125px;
  height: 1px;
  background: var(--text);
}

.section-divider-top::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -125px;
  height: 1px;
  background: var(--text);
}

/* ---------- Logo / wordmark ---------- */

.site-logo{
  display: block;
}

.site-logo img{
  width: 100%;
  height: auto;
}

/* Text wordmark shown only if logo.svg fails to load (see the <img>'s
   onerror in the HTML) */
.site-logo .wordmark-fallback{
  font-size: clamp(48px, 9vw, 140px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -1px;
  margin: 0;
  text-transform: uppercase;
}

/* ---------- Section labels ---------- */

.section-label{
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0 0 24px;
}

.section-label.muted{ color: var(--gray); }

/* ---------- Hero slider ---------- */
/* Full-bleed edge to edge, fixed 780px tall on desktop (matches the
   live site's Slider Revolution "fullwidth" module at gw:1240/gh:780) */

.hero-slider{
  position: relative;
  margin: 0 calc(-1 * var(--gap-desktop));
  overflow: hidden;
  background: #111;
  height: 780px;
}

.hero-slider .slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero-slider .slide.is-active{ opacity: 1; z-index: 1; }

/* Dark overlay so the slide photos aren't blown out under the white text/nav */
.hero-slider::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: 1;
  pointer-events: none;
}

.hero-slider .slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slider .slider-nav{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15%;
  z-index: 2;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
  color: #fff;
  font-size: 22px;
}

.hero-slider:hover .slider-nav{ opacity: 0.8; }

.hero-slider .slider-nav.prev{ left: 0; text-align: left; padding-left: 60px; }
.hero-slider .slider-nav.next{ right: 0; text-align: right; padding-right: 40px; }

.hero-slider .slider-dots{
  position: absolute;
  left: 0; right: 0; bottom: 40px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.hero-slider .slider-dots button{
  width: 10px; height: 10px;
  border-radius: 99%;
  border: 0;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  padding: 0;
}

.hero-slider .slider-dots button.is-active{ background: #fff; }

/* ---------- Featured work (pill links) ---------- */

.featured-work{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-btn{
  display: inline-flex;
  align-items: center;
  background: var(--pill-bg);
  color: var(--pill-text);
  border: 0;
  border-radius: 0;
  font-family: inherit;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

.pill-btn:hover{ background: var(--pill-text); color: var(--pill-bg); }

.pill-btn:disabled{ opacity: 0.4; cursor: not-allowed; }
.pill-btn:disabled:hover{ background: var(--pill-bg); color: var(--pill-text); }

.featured-work .pill-btn{
  padding: 20px 51px;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.4px;
}

.featured-work .pill-btn:not(:disabled):hover{ background: #ffffff; }

/* ---------- Key visuals (5-column grid, full-bleed, no gaps) ---------- */

.visuals-carousel{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 0 calc(-1 * var(--gap-desktop));
}

.visuals-carousel .visual-item{
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e4e4e6;
}

.visuals-carousel .visual-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}

.visuals-carousel .visual-item:hover img{ transform: scale(1.04); }

/* ---------- Client logos (auto-playing, full-bleed, 5-up, draggable) ---------- */

.clients-carousel{
  display: flex;
  overflow-x: auto;
  margin: 0 calc(-1 * var(--gap-desktop));
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.clients-carousel::-webkit-scrollbar{ display: none; }

.clients-carousel.is-dragging{ cursor: grabbing; }

.clients-carousel .client-item{
  flex: 0 0 20%;
  box-sizing: border-box;
  height: 178px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

.clients-carousel img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ---------- Agency collaborations ---------- */

.agency-list{
  margin: 0;
  font-size: 40px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: -0.4px;
  max-width: none;
}

.agency-list span:not(:last-child)::after{
  content: " / ";
  color: #d3d3d3;
}

/* ---------- CTA ---------- */

.cta p{
  font-size: 40px;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: -0.4px;
  max-width: 74%;
  /* small optical correction: the font's built-in top leading makes the
     gap above this large text read bigger than the gap below the
     buttons, even though both boxes measure 80px */
  margin: -14px 0 30px;
}

.cta .pill-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cta .pill-btn{
  padding: 18px 25px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
  border: 1.2px solid var(--text);
}

/* ---------- Footer ---------- */

.site-footer{
  padding: 80px var(--gap-desktop);
}

/* Info page's footer gets a thin top rule instead of a background change */
.page-info .site-footer{
  border-top: 1px solid var(--border);
}

.footer-grid{
  display: grid;
  grid-template-columns: 4fr 6fr 3fr 3fr;
  column-gap: 70px;
}

.footer-grid h3,
.footer-grid p,
.footer-grid a{
  margin: 0 0 4px;
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.3px;
  color: var(--text);
  text-transform: uppercase;
}

.footer-grid h3{ margin-bottom: 12px; }

.footer-grid a:hover{ opacity: 0.6; }

.footer-col-about p,
.footer-col-about a{
  text-transform: none;
}

.footer-col-about .powered{
  margin-top: 51px;
  white-space: nowrap;
}

.footer-grid .muted{ color: var(--gray); }

.footer-grid .pluto-link{ display: inline; color: var(--gray); }
.footer-grid .pluto-link:hover{ color: var(--text); opacity: 1; }

.footer-grid .pluto-link .bolt-icon{
  vertical-align: -1px;
  margin: 0 1px;
}

/* ---------- Info / resume page ---------- */
/* Matches the live /info/ page: a big display-size intro line, a
   full-width portrait, the role line at the same big size, then four
   body paragraphs, each gap taken from the live page (170 / 90 / 90 /
   40px), full-bleed with no max-width cap anywhere. */

.bio-intro{
  margin: 170px var(--gap-desktop) 0;
  font-size: 44px;
  font-weight: 400;
  line-height: 56px;
  letter-spacing: -0.4px;
}

.bio-portrait{
  margin: 90px var(--gap-desktop) 0;
  overflow: hidden;
}

.bio-portrait img{
  width: 100%;
  height: auto;
  display: block;
}

.bio-role{
  margin: 90px var(--gap-desktop) 0;
  font-size: 44px;
  font-weight: 400;
  line-height: 56px;
  letter-spacing: -0.4px;
}

.bio-copy{
  margin: 40px var(--gap-desktop) 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -0.4px;
  color: var(--text);
}

/* Wordmark logo, same as the homepage's, sitting between the bio copy
   and the footer (matches the live page's own layout). */
.info-logo{
  display: block;
  margin: 170px var(--gap-desktop);
}

.info-logo .site-logo{
  display: block;
}

.info-logo .site-logo img{
  width: 100%;
  height: auto;
}

/* ---------- Video lightbox ---------- */

.video-modal{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,10,0.9);
  padding: 40px;
}

.video-modal.is-open{ display: flex; }

.video-modal .modal-inner{
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16/9;
  background: #000;
}

.video-modal iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal .modal-close{
  position: absolute;
  top: -38px;
  right: 0;
  background: none;
  border: 0;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Cookie consent ---------- */

.cookie-consent{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 998;
  background: var(--pill-bg);
  color: var(--pill-text);
  padding: 20px var(--gap-desktop);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transform: translateY(110%);
  transition: transform .4s ease;
}

.cookie-consent.is-visible{ transform: translateY(0); }

.cookie-consent p{
  margin: 0;
  font-size: 13px;
  max-width: 640px;
  line-height: 1.5;
}

.cookie-consent a{ text-decoration: underline; }

.cookie-consent .cookie-actions{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-consent .cookie-actions button{
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 11px 22px;
  border-radius: 0;
  border: 1px solid rgba(245,245,245,0.5);
  background: transparent;
  color: var(--pill-text);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

.cookie-consent .cookie-actions button.accept{
  background: var(--pill-text);
  color: var(--pill-bg);
  border-color: var(--pill-text);
}

.cookie-consent .cookie-actions button:hover{
  background: var(--pill-text);
  color: var(--pill-bg);
}

.cookie-consent .cookie-actions button.accept:hover{
  background: transparent;
  color: var(--pill-text);
}

/* ============================================
   Responsive
   Every @media block lives here, widest breakpoint first (1240 ->
   900 -> 600), so a narrow screen's rules always come after -- and
   correctly override -- a wider screen's. Grouped by component in
   the same order as the styles above.
   ============================================ */

@media (max-width: 1240px){
  .hero-slider{
    height: auto;
    aspect-ratio: 1240 / 780;
  }
}

@media (max-width: 900px){
  .section{ margin: 90px 0; }
  .section-divider{ margin-top: 180px; }
  .section-divider::after{ bottom: -90px; }
  .section-divider-top::before{ top: -90px; }

  .site-header{ flex-direction: column; gap: 18px; }
  .site-header .tagline{ width: auto; max-width: 420px; }
  .header-right{
    position: static;
    top: auto; left: auto; right: auto;
    align-self: flex-start;
    width: 100%;
  }
  .featured-work .pill-btn{
    padding: 16px 32px;
    font-size: 28px;
  }
  .visuals-carousel{ grid-template-columns: repeat(3, 1fr); }
  .clients-carousel .client-item{ flex-basis: 33.333%; height: 130px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; row-gap: 28px; }
}

@media (max-width: 600px){
  :root{ --gap-desktop: 20px; }

  /* Section rhythm -- desktop's 120px / 250px gaps are too heavy on a
     phone; keep the same divider-vs-regular relationship at a smaller
     scale so the page still breathes without needing so much scrolling. */
  .section{ margin: 64px 0; }
  .section-divider{ margin-top: 120px; }
  .section-divider::after{ bottom: -60px; }
  .section-divider-top::before{ top: -60px; }
  .section-label{ margin-bottom: 16px; }

  .site-header{ padding-top: 20px; }
  .header-right{ gap: 20px; }
  .main-nav ul{ align-items: flex-start; }
  .since{ display: none; }

  .hero-slider{ aspect-ratio: 4/5; }

  .featured-work{ gap: 10px; }
  .featured-work .pill-btn{
    padding: 14px 22px;
    font-size: 20px;
    letter-spacing: -0.2px;
  }

  .visuals-carousel{ grid-template-columns: repeat(2, 1fr); }

  .clients-carousel .client-item{ flex-basis: 50%; height: 110px; }

  .agency-list{ font-size: 18px; line-height: 36px; }

  .cta p{ font-size: 18px; line-height: 26px; letter-spacing: -0.3px; max-width: 100%; }

  .site-footer{ padding: 56px var(--gap-desktop); }
  .footer-grid{ grid-template-columns: 1fr; }

  .bio-intro{ margin-top: 64px; font-size: 18px; line-height: 22px; }
  .bio-portrait{ margin-top: 40px; margin-left: 0; margin-right: 0; }
  .bio-role{ margin-top: 40px; font-size: 18px; line-height: 22px; }
  .bio-copy{ margin-top: 24px; font-size: 16px; line-height: 20px; }
  .info-logo{ margin: 64px var(--gap-desktop); }

  .cookie-consent{ flex-direction: column; align-items: stretch; }
  .cookie-consent .cookie-actions{ justify-content: flex-end; }
}