/* =========================================================================
   Takli Studio
   Desktop values below are taken directly from the 1440 px Figma frame
   (source/Frame 28.pdf, source/Frame 29.pdf): every size, offset and
   column width is the measured value from the artboard.
   ========================================================================= */

:root {
  --cream: #f4f0e7;
  --ink: #3e2f26;
  --olive-1: #86956c;
  --olive-2: #5b644b;
  --olive-3: #35431b;
  --brown: #3e2f26;

  /* page gutter — 20 px in the artboard */
  --pad: clamp(16px, 1.4vw, 20px);
  /* label column of the two column section grid — 325 px in the artboard */
  --label-col: 325px;
  /* distance from the content rail back to the page gutter */
  --rail-offset: calc(var(--label-col) + var(--pad));
  /* vertical distance between sections — 97 px in the artboard */
  --section-gap: clamp(56px, 6.8vw, 97px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Work Sans", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
/* <picture> only exists to pick a source — let the <img> be the layout box so
   the grid and positioning rules below keep applying to it directly. The
   <source> elements have to be taken out of flow explicitly: `display: contents`
   would otherwise promote them to grid items of their own. Hiding them does not
   affect source selection, which happens before layout. */
picture { display: contents; }
picture source { display: none; }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px var(--pad);
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1;
  letter-spacing: .014em;
}
.brand small {
  margin-top: 4px;
  font-size: clamp(11px, 1.1vw, 16px);
  line-height: 1;
  letter-spacing: -.035em;
}

.site-nav {
  display: flex;
  gap: clamp(22px, 3.5vw, 50px);
  /* the artboard stops the menu 20 px short of the right page rail */
  margin-right: clamp(0px, 1.4vw, 20px);
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 1.15;
  letter-spacing: .018em;
}

.site-nav a,
.text-link,
.footer-columns a {
  position: relative;
}
.site-nav a::after,
.text-link::after,
.footer-columns a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transition: right .25s ease;
}
.site-nav a:hover::after,
.text-link:hover::after,
.footer-columns a:hover::after { right: 0; }

.menu-toggle {
  display: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}

/* The arrow beside the call to action is the artboard's own vector, not the
   U+2197 character. As a character it is emoji-capable: Work Sans has no glyph
   for it, so the browser falls back per character and iOS renders it as the
   blue Apple Color Emoji tile. Drawing it removes the font dependency. */
.text-arrow {
  display: inline-block;
  width: .775em;
  height: .775em;
  margin-left: .34em;
  vertical-align: -.04em;
  fill: currentColor;
}

/* -------------------------------------------------------------------- hero */

.section-pad {
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.hero { padding-top: clamp(40px, 5.4vw, 77px); }

.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding-bottom: clamp(28px, 3.4vw, 48px);
}

h1 {
  margin: 0;
  /* The artboard breaks after "Thoughtfully" with a real line break (the PDF
     carries a \n there); the rest is one paragraph wrapping on this measure.
     870 px at the 70 px artboard size, in em so the measure keeps the same
     character count once the headline scales down. */
  max-width: min(12.43em, 100%);
  font-size: clamp(40px, 4.9vw, 70px);
  line-height: 1.257;
  font-weight: 400;
  letter-spacing: 0;
}

.hero-link {
  font-size: clamp(18px, 2.2vw, 32px);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  margin-bottom: 8px;
  margin-right: clamp(0px, 9.3vw, 134px);
}

.hero-media {
  margin: 0 calc(-1 * var(--pad));
  overflow: hidden;
}
.hero-media img {
  height: clamp(280px, 33vw, 476px);
  object-fit: cover;
}

/* ---------------------------------------------------------------- sections */

.section-grid {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  column-gap: var(--pad);
  padding-top: var(--section-gap);
}

.section-label {
  margin: 0;
  font-size: clamp(12px, 1.4vw, 20px);
  line-height: 1.2;
  letter-spacing: -.01em;
}

.section-content > h2 {
  margin: 0 0 clamp(26px, 3vw, 43px);
  font-size: clamp(22px, 2.25vw, 32px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -.01em;
  /* Headings are single paragraphs — the artboard's two lines come from the
     measure, not from markup, so they reflow to one or three lines as the
     viewport allows. 842 px at the 32 px artboard size is the measure at which
     each section heading breaks where the artboard breaks it; expressed in em so
     it scales with the heading. */
  max-width: min(26.3em, 100%);
}

/* Rows that break out of the content rail and run across the full page —
   the portfolio tiles and the process columns do this in the artboard. */
.projects,
.process-grid {
  width: calc(100% + var(--rail-offset));
  margin-left: calc(-1 * var(--rail-offset));
}

/* ------------------------------------------------------------------- about */

/* The About headline is one paragraph with a first-line indent — in the artboard
   the break after "character," is an ordinary wrap, not an authored break. On
   its 1055 px measure the 219 px indent (20.76 %) reproduces the artboard's two
   lines; narrower viewports simply reflow to three. */
.section-content > .about-heading {
  max-width: min(33em, 100%);
  text-indent: min(20.76%, 6.84em);
}

.about-row {
  display: grid;
  grid-template-columns: minmax(200px, 345px) minmax(0, 1fr);
  gap: var(--pad);
  align-items: center;
}
.about-row img {
  aspect-ratio: 345 / 214;
  object-fit: cover;
}

.about-copy {
  font-size: clamp(15px, 1.7vw, 24px);
  line-height: 1.208;
  letter-spacing: -.038em;
}
.about-copy p { margin: 0 0 1.208em; }
.about-copy p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- portfolio */

.projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pad);
}
.project-card {
  position: relative;
  overflow: hidden;
}
.project-card-wide { grid-column: 1 / -1; }

.project-card img {
  aspect-ratio: 690 / 377;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .75, .2, 1), filter .35s ease;
}
.project-card-wide img { aspect-ratio: 1400 / 412; }
.project-card:hover img { transform: scale(1.018); filter: brightness(.96); }

.project-number,
.project-more {
  position: absolute;
  z-index: 2;
  font-size: clamp(12px, 1.7vw, 24px);
  line-height: 1.208;
  letter-spacing: -.038em;
}
.project-number { top: clamp(14px, 2.2vw, 32px); left: clamp(16px, 2.4vw, 34px); }
.project-more {
  right: clamp(16px, 2.4vw, 35px);
  bottom: clamp(14px, 2.5vw, 36px);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- services */

.services-section { overflow: clip; }
.services-stack { width: min(710px, 100%); }

.service-card {
  position: sticky;
  top: 115px;
  min-height: clamp(300px, 28.6vw, 412px);
  padding: clamp(18px, 1.4vw, 20px);
  margin-bottom: var(--pad);
  color: var(--cream);
}
.service-card > span {
  font-size: clamp(12px, 1.4vw, 20px);
  line-height: 1.2;
  letter-spacing: -.018em;
}
.service-card h3 {
  margin: clamp(16px, 1.4vw, 20px) 0 clamp(24px, 2.9vw, 42px);
  font-size: clamp(20px, 2.25vw, 32px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -.01em;
}
.service-card p {
  margin: 0;
  font-size: clamp(14px, 1.7vw, 24px);
  line-height: 1.208;
  letter-spacing: -.038em;
}

.service-one { background: var(--olive-1); }
.service-two { background: var(--olive-2); top: 135px; }
.service-three { background: var(--olive-3); top: 155px; margin-bottom: 0; }

/* ----------------------------------------------------------------- process */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(18px, 2.3vw, 33px);
  row-gap: 30px;
}
.process-grid h3 {
  margin: 0 0 clamp(12px, 1.25vw, 18px);
  padding: clamp(8px, .85vw, 12px);
  color: var(--cream);
  font-size: clamp(13px, 1.4vw, 20px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -.01em;
}
.process-grid article:nth-child(1) h3 { background: var(--olive-1); }
.process-grid article:nth-child(2) h3 { background: var(--olive-2); }
.process-grid article:nth-child(3) h3 { background: var(--olive-3); }
.process-grid article:nth-child(4) h3 { background: var(--brown); }
.process-grid p {
  margin: 0;
  font-size: clamp(13px, 1.7vw, 24px);
  line-height: 1.208;
  letter-spacing: -.038em;
}

/* ------------------------------------------------------------------ footer */

.site-footer {
  /* In the artboard the whole contact block starts at x = 736, i.e. the label
     column takes 696 of the 1400 px rail. Sized in fr so it also holds up on
     narrower desktops instead of pushing the contact block off screen. */
  grid-template-columns: minmax(0, 696fr) minmax(min-content, 684fr);
  padding-top: clamp(72px, 8.2vw, 118px);
  padding-bottom: clamp(56px, 6.1vw, 88px);
}

/* The artboard draws the footer arrow slightly smaller relative to its type. */
.footer-cta .text-arrow {
  width: .707em;
  height: .707em;
  margin-left: .3em;
  vertical-align: 0;
}

.footer-cta {
  display: block;
  width: fit-content;
  margin: 0 0 clamp(32px, 3.6vw, 52px);
  font-size: clamp(40px, 4.9vw, 70px);
  line-height: 1;
  letter-spacing: -.017em;
  white-space: nowrap;
}

.footer-columns {
  display: grid;
  grid-template-columns:
    minmax(0, clamp(96px, 11.05vw, 159px))
    minmax(0, clamp(98px, 11.2vw, 161px))
    minmax(min-content, 1fr);
  font-size: clamp(12px, 1.4vw, 20px);
  letter-spacing: -.028em;
}
.footer-columns > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-columns p { margin: 0 0 clamp(14px, 1.8vw, 26px); line-height: 1.2; }
.footer-columns a { line-height: 1.7; }

/* ------------------------------------------------------------------ motion */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

.cursor-orbit {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  will-change: transform, translate;
  transition: opacity .25s ease;
}
.cursor-orbit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .72;
  filter: sepia(.16) saturate(.62) contrast(.92) drop-shadow(0 4px 7px rgba(62, 47, 38, .08));
  transform-origin: 50% 62%;
  will-change: transform;
}
body.has-pointer .cursor-orbit { opacity: .62; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  :root { --label-col: 0px; }

  .site-header { align-items: center; }
  .menu-toggle { display: block; }
  .site-nav {
    position: fixed;
    inset: 62px 0 auto;
    display: none;
    flex-direction: column;
    gap: 20px;
    margin-right: 0;
    padding: 24px var(--pad) 30px;
    background: var(--cream);
    font-size: 18px;
  }
  .site-nav.open { display: flex; }

  .hero-copy { grid-template-columns: 1fr; gap: 26px; }
  .hero-link { margin-right: 0; }

  .section-grid,
  .site-footer { grid-template-columns: 1fr; row-gap: 20px; }

  .projects,
  .process-grid { width: 100%; margin-left: 0; }

  /* A first-line indent stops reading as intentional on a narrow measure. */
  .section-content > .about-heading { text-indent: 0; }
  .about-row { grid-template-columns: .9fr 1.1fr; }

  .services-stack { width: 100%; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .footer-columns { grid-template-columns: repeat(3, auto); gap: 34px; }
}

@media (max-width: 600px) {
  .about-row,
  .projects,
  .process-grid { grid-template-columns: 1fr; }

  .project-card-wide { grid-column: auto; }
  .project-card-wide img { aspect-ratio: 690 / 377; }

  .service-card { position: relative; top: auto !important; }

  .footer-cta { white-space: normal; }
  .footer-columns { grid-template-columns: 1fr 1fr; gap: 34px; }

  .cursor-orbit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}