/* ===========================================================
   3D Montaj — design tokens (locked brief)
   Ground: limestone paper #EFEDE8 · Ink: #1A1D21 · Muted: #5C6167
   Accent: ultramarine #2740C9 (single accent, blueprint-blue)
   Display: Outfit · Mono: IBM Plex Mono
   =========================================================== */

:root{
  --ground: #EFEDE8;
  --ground-2: #E4E1D9;
  --ink: #1A1D21;
  --ink-muted: #5C6167;
  --accent: #2740C9;
  --accent-dim: #1c2f99;
  --white: #ffffff;

  --font-display: 'Outfit', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --container: 1600px;
  --edge: clamp(20px, 5vw, 64px);
}

*{ box-sizing: border-box; margin:0; padding:0; }

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

html{ scroll-behavior: smooth; }

body{
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

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

/* ---------- header ---------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(239,237,232,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(26,29,33,0.1);
}
.site-header__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.wordmark{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark__accent{ color: var(--accent); }
.site-nav{
  display: flex;
  gap: 32px;
  flex: 1;
  justify-content: center;
}
.site-nav a{
  font-size: 15px;
  color: var(--ink);
  transition: color 0.2s ease;
}
.site-nav a:hover{ color: var(--accent); }
.site-nav a.is-current{ color: var(--accent); font-weight: 600; }
.header-phone{
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  border: 1px solid rgba(26,29,33,0.25);
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.header-phone:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

/* ---------- journey (scroll-scrub hero) ---------- */
.journey{
  position: relative;
  height: 400vh; /* scroll distance drives the scrub */
}
.journey__sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--ground);
}
.journey__frame{
  position: absolute;
  inset: clamp(24px, 5vh, 48px) clamp(24px, 6vw, 96px);
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink);
}
.journey__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.journey__scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 65%);
  pointer-events: none;
}
.journey__copy{
  position: absolute;
  inset: clamp(24px, 5vh, 48px) clamp(24px, 6vw, 96px);
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 3vw, 40px);
}
.chapter{
  position: absolute;
  max-width: 560px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.28s ease, transform 0.32s ease;
  pointer-events: none;
}
.chapter.is-active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.chapter__eyebrow{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #B9C3F5;
  margin-bottom: 18px;
}
.chapter__title{
  font-size: clamp(34px, 5.2vw, 58px);
  font-weight: 700;
  line-height: 1.08;
  color: var(--white);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.chapter__desc{
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  max-width: 460px;
  margin-bottom: 28px;
}
.chapter__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  padding: 12px 22px;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
}
.chapter__cta:hover{
  background: var(--accent);
  color: var(--white);
  transform: translateY(-2px);
}
.chapter__cta--phone{
  background: var(--accent);
  color: var(--white);
  font-size: 20px;
  letter-spacing: 0.02em;
  padding: 14px 26px;
}
.chapter__cta--phone:hover{ background: var(--accent-dim); }

.journey__progress{
  position: absolute;
  right: var(--edge);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 5;
}
.journey__progress span{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: background 0.3s ease, transform 0.3s ease;
}
.journey__progress span.is-active{
  background: var(--white);
  transform: scale(1.6);
}

.journey__scrollcue{
  position: absolute;
  left: var(--edge);
  bottom: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity 0.4s ease;
}
.scrollcue__line{
  width: 1px;
  height: 34px;
  background: rgba(255,255,255,0.35);
  overflow: hidden;
  position: relative;
}
.scrollcue__line::after{
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--white);
  animation: scrollcue 1.6s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ top: -100%; }
  60%{ top: 100%; }
  100%{ top: 100%; }
}
.journey__scrollcue.is-hidden{ opacity: 0; }

/* ---------- section head (shared) ---------- */
.section-head{
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(64px, 10vw, 120px) var(--edge) 48px;
}
.section-head__eyebrow{
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 14px;
}
.section-head__eyebrow--light{ color: #AEBBF7; }
.section-head__title{
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.section-head__desc{
  margin-top: 18px;
  max-width: 62ch;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- portfolio ---------- */
.portfolio{ background: var(--ground); }
.portfolio-grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--edge) 20px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: auto;
  gap: 20px;
}
.portfolio-grid .portfolio-card:first-child{
  grid-row: span 2;
}
.portfolio-card{
  display: block;
  color: var(--ink);
}
.portfolio-card__thumb{
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink);
}
.portfolio-grid .portfolio-card:first-child .portfolio-card__thumb{
  aspect-ratio: 16/13.6;
}
.portfolio-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.portfolio-card:hover .portfolio-card__thumb img{
  transform: scale(1.04);
}
.portfolio-card__play{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--white);
  background: rgba(26,29,33,0.15);
}
.portfolio-card__play::before{
  content: '';
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(26,29,33,0.55);
}
.portfolio-card__play{ z-index: 1; }
.portfolio-card__play::after{ content: none; }
.portfolio-card__label{
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.portfolio-note{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--edge) clamp(64px, 10vw, 120px);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}

/* ---------- advantages: bento ---------- */
.advantages{ background: var(--ground); }
.bento{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--edge) clamp(64px, 10vw, 120px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.bento__cell{
  background: var(--ground);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 220px;
  border: 1px solid rgba(26,29,33,0.12);
  margin-top: -1px;
  margin-left: -1px;
}
.bento__icon{
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.bento__cell h3{
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.bento__cell p{
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 40ch;
}

/* ---------- testimonials: card grid ---------- */
.testimonials{ background: var(--ground-2); }
.testimonials-grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--edge) clamp(64px, 10vw, 120px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1100px){
  .testimonials-grid{ grid-template-columns: repeat(2, 1fr); }
}
.testimonial-card{
  background: var(--ground);
  border: 1px solid rgba(26,29,33,0.12);
  border-radius: 12px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.testimonial-card p{
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  flex: 1;
}
.testimonials__by{
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonials__by cite{
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.testimonial-card__sector{
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.testimonials__avatar{
  width: 34px;
  height: 34px;
  color: var(--ink-muted);
  opacity: 0.5;
  flex-shrink: 0;
}

/* ---------- contact banner + form ---------- */
.contact{ background: var(--ground); padding-top: clamp(48px, 8vw, 90px); }
.contact__banner{
  max-width: var(--container);
  margin: 0 auto;
  background: var(--accent);
  color: var(--white);
  padding: clamp(56px, 9vw, 100px) var(--edge);
  text-align: center;
  border-radius: 20px;
}
.contact__phone{
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(34px, 7vw, 72px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 22px auto 0;
  padding-bottom: 22px;
  border-bottom: 2px solid rgba(255,255,255,0.6);
  max-width: 680px;
}
.contact__meta{
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 15px;
}
.contact__email{
  text-decoration: underline;
  color: var(--white);
}
.contact__name{ font-weight: 600; }
.contact__sub{
  margin-top: 16px;
  color: rgba(255,255,255,0.75);
  font-size: 14px;
}

.contact__form-wrap{
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 72px) var(--edge);
}
.contact__form{
  background: var(--ground);
  border: 1px solid rgba(26,29,33,0.12);
  border-radius: 6px;
  padding: clamp(24px, 5vw, 40px);
}
.contact__form h3{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 22px;
}
.contact__row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact__field{ margin-bottom: 18px; }
.contact__field label{
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.contact__field input,
.contact__field textarea{
  width: 100%;
  border: 1px solid rgba(26,29,33,0.2);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--font-display);
  font-size: 14px;
  background: #FAF9F6;
  color: var(--ink);
  resize: vertical;
}
.contact__field input:focus,
.contact__field textarea:focus{
  outline: none;
  border-color: var(--accent);
}
.contact__submit{
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--accent);
  color: var(--white);
  border: none;
  padding: 13px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.contact__submit:hover{ background: var(--accent-dim); }

@media (max-width: 560px){
  .contact__row{ grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */
.site-footer{
  background: var(--ink);
  color: rgba(255,255,255,0.4);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  padding: 24px var(--edge) 32px;
}

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .bento{ grid-template-columns: 1fr; }
  .bento__cell--lg{ grid-column: span 1; }
  .testimonials-grid{ grid-template-columns: 1fr; }
  .journey__progress{ display: none; }
  .site-nav{ display: none; }
  .portfolio-grid{ grid-template-columns: 1fr; }
  .portfolio-grid .portfolio-card:first-child{ grid-row: auto; }
  .portfolio-grid .portfolio-card:first-child .portfolio-card__thumb{ aspect-ratio: 16/9; }

  /* mobile hero: stop overlaying text on the video. Show the video as
     a clean, uncropped 16:9 card, then the copy as its own readable
     block underneath — independent of whatever the footage looks like. */
  .journey__sticky{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 84px 20px 20px;
  }
  .journey__frame{
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 16px;
    flex-shrink: 0;
  }
  .journey__video{ object-fit: cover; object-position: center center; }
  .journey__scrim{ display: none; }
  .journey__copy{
    position: relative;
    inset: auto;
    display: block;
    padding: 0;
    height: 240px;
  }
  .chapter{
    position: absolute;
    inset: 0;
    max-width: none;
    width: 100%;
    background: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .chapter__eyebrow{ color: var(--accent); }
  .chapter__title{ color: var(--ink); }
  .chapter__desc{ color: var(--ink-muted); max-width: none; }
  .chapter__cta{ background: var(--accent); color: var(--white); }
  .journey__scrollcue{ display: none; }
}

/* ---------- blog ---------- */
.blog-hero{
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(120px, 14vw, 170px) var(--edge) clamp(40px, 6vw, 64px);
}
.blog-hero__eyebrow{
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 14px;
}
.blog-hero__title{
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 16ch;
}
.blog-hero__desc{
  margin-top: 18px;
  max-width: 60ch;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.6;
}
.blog-grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--edge) clamp(64px, 10vw, 120px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-card{
  display: flex;
  flex-direction: column;
  color: var(--ink);
  border: 1px solid rgba(26,29,33,0.12);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ground);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(26,29,33,0.1);
}
.blog-card__thumb{
  aspect-ratio: 16/10;
  background: var(--ink);
  overflow: hidden;
}
.blog-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__thumb img{ transform: scale(1.05); }
.blog-card__body{
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.blog-card__tag{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}
.blog-card__title{
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
}
.blog-card__excerpt{
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.55;
  flex: 1;
}
.blog-card__meta{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 6px;
}

/* ---------- article ---------- */
.article{
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(120px, 14vw, 170px) var(--edge) clamp(64px, 10vw, 120px);
}
.article__back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 28px;
  transition: color 0.2s ease;
}
.article__back:hover{ color: var(--accent); }
.article__eyebrow{
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 16px;
}
.article__title{
  font-size: clamp(28px, 4.4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.article__meta{
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-muted);
}
.article__body{
  margin-top: 40px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
}
.article__body p{ margin-bottom: 22px; }
.article__body h2{
  font-size: 24px;
  font-weight: 700;
  margin: 44px 0 16px;
  letter-spacing: -0.005em;
}
.article__body h3{
  font-size: 19px;
  font-weight: 600;
  margin: 32px 0 12px;
}
.article__body ul{
  margin: 0 0 22px 22px;
}
.article__body li{
  margin-bottom: 10px;
  line-height: 1.6;
}
.article__body strong{ font-weight: 600; }
.article__cta{
  margin-top: 48px;
  padding: 32px;
  background: var(--ink);
  color: var(--white);
  border-radius: 16px;
  text-align: center;
}
.article__cta p{
  margin-bottom: 18px;
  color: rgba(255,255,255,0.8);
}
.article__cta a{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--accent);
  color: var(--white);
  padding: 12px 26px;
  border-radius: 999px;
  transition: background 0.25s ease;
}
.article__cta a:hover{ background: var(--accent-dim); }

@media (max-width: 860px){
  .blog-grid{ grid-template-columns: 1fr; }
}