:root { --header-h: 76px; }

html { scroll-snap-type: y proximity; scroll-padding-top: 0; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--header-h);
  color: var(--cream);
  background: transparent;
  border-color: rgba(255,255,255,.14);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.site-header .brand img { filter: invert(1); transition: filter .35s ease; }
.site-header .button-dark { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.site-header.is-scrolled {
  color: var(--ink);
  background: rgba(245,242,233,.96);
  border-color: var(--line);
  box-shadow: 0 8px 30px rgba(14,14,13,.06);
  backdrop-filter: blur(12px);
}

.site-header.is-scrolled .brand img { filter: none; }
.site-header.is-scrolled .button-dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.hero,
.section,
.cta {
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.hero { min-height: 100svh; padding-top: calc(var(--header-h) + 34px); padding-bottom: 24px; }
.hero h1 { font-size: clamp(64px, 8.3vw, 126px); margin: 20px 0 14px; }
.hero > p { margin: 0; }
.hero-actions { margin-top: 16px; }
.sun { width: 72px; height: 72px; margin: 35px 0 22px; }
.sun::before { width: 106px; height: 106px; }

.section { padding: calc(var(--header-h) + 28px) 5vw 28px; display: flex; flex-direction: column; justify-content: center; }
.section-index { margin-bottom: 16px; }
.section h2 { font-size: clamp(48px, 5.4vw, 82px); margin: 14px 0 18px; }
.lead { margin-bottom: 24px; }

.services article { min-height: 0; height: 23vh; padding: 18px 24px; }
.services h3 { margin: 3.5vh 0 8px; font-size: 27px; }
.services p { margin: 0; line-height: 1.45; }

.quote-grid { margin-top: 22px; }
.quote-grid blockquote { min-height: 0; height: 48vh; padding: 30px 38px; }
.quote-grid blockquote > p { margin: 20px 0; font-size: clamp(16px,1.35vw,20px); }

.section-heading-row { margin-bottom: 24px; }
.projects .section-index { margin-bottom: 10px; }
.projects .section-heading-row h2 { font-size: clamp(48px,5vw,72px); }
.project-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; border: 0; }
.project { display: flex; flex-direction: column-reverse; gap: 0; padding: 0; border: 1px solid var(--line); min-width: 0; }
.project-copy { min-height: 0; height: 28vh; padding: 18px; }
.project .number { margin: 10px 0 3px; }
.project h3 { font-size: clamp(30px,3vw,45px); margin: 0 0 7px; }
.project-copy > p:not(.number) { font-size: 12px; line-height: 1.4; margin: 0; }
.project-copy > a { margin-top: auto; }
.project-image { width: 100%; height: 29vh; padding: 10px; }
.project-image img { object-fit: cover; object-position: center top; }

.client-strip { position: relative; width: 100%; height: 88px; padding: 0; gap: 0; overflow: hidden; }
.client-track { display: flex; width: max-content; animation: brand-marquee 24s linear infinite; will-change: transform; }
.client-set { height: 88px; display: flex; align-items: center; gap: 34px; padding-right: 34px; }
.client-strip:hover .client-track { animation-play-state: paused; }
@keyframes brand-marquee { to { transform: translateX(-50%); } }

.steps { margin-top: 22px; }
.steps article { min-height: 0; height: 39vh; padding: 24px; }
.steps h3 { margin-top: 12vh; }

.manifesto-card { min-height: 63vh; padding: 50px; }
.manifesto h2 { font-size: clamp(62px,7vw,105px); }

.accordion { margin-top: 20px; }
summary { padding: 15px 0; }
details p { padding-bottom: 15px; }

.cta { padding: calc(var(--header-h) + 32px) 5vw 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cta h2 { font-size: clamp(62px,8vw,118px); margin: 22px auto 34px; }

@media (max-height: 760px) and (min-width: 851px) {
  .hero h1 { font-size: clamp(58px,7.4vw,102px); }
  .sun { margin: 20px 0 14px; }
  .section h2 { font-size: clamp(42px,4.7vw,68px); }
  .services article { height: 22vh; }
  .quote-grid blockquote { height: 45vh; }
  .project-copy { height: 27vh; }
  .project-image { height: 27vh; }
}

@media (max-width: 850px) {
  html { scroll-snap-type: none; }
  .site-header { height: 68px; }
  .site-header .brand img { filter: invert(1); }
  .site-header.is-scrolled .brand img { filter: none; }
  .hero,.section,.cta { min-height: 100svh; height: auto; scroll-snap-align: none; }
  .hero { padding-top: 94px; }
  .section { padding-top: 92px; padding-bottom: 54px; }
  .services article,.quote-grid blockquote,.steps article { height: auto; }
  .project-list { grid-template-columns: 1fr; }
  .project { flex-direction: column-reverse; }
  .project-copy { height: auto; min-height: 310px; }
  .project-image { height: 260px; grid-row: auto; }
  .manifesto-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .client-track,.sun::before { animation: none; }
}

/* Final composition refinements */
.site-header {
  color: var(--ink);
  border-color: rgba(14,14,13,.12);
}
.site-header .brand img { filter: none; }
.site-header .button-dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.site-header.is-scrolled { background: var(--cream); }

.hero {
  isolation: isolate;
  color: var(--ink);
  background: var(--cream);
}
.hero::before {
  z-index: -2;
  background: url("assets/sg-web-studio-hero-workspace.png") center 56% / cover no-repeat;
  mask-image: none;
  opacity: .16;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(245,242,233,.55);
}
.hero > p { color: #3d3b36; }
.hero .button-light { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.hero .text-link { border-color: rgba(14,14,13,.45); }
.hero .sun { margin: 68px 0 25px; flex: 0 0 auto; }
.hero .sun::before { border-color: var(--ink); opacity: .5; }
.hero .hero-meta { border-color: rgba(14,14,13,.18); }

.faq {
  display: grid;
  grid-template-columns: minmax(280px,.72fr) minmax(520px,1.28fr);
  align-items: center;
  gap: clamp(55px,8vw,130px);
  text-align: left;
  padding-left: 7vw;
  padding-right: 7vw;
}
.faq-heading h2 { margin: 24px 0; font-size: clamp(58px,6vw,90px); }
.faq-heading > p { max-width: 320px; color: var(--muted); font-size: 16px; }
.faq .accordion { width: 100%; max-width: none; margin: 0; border-top: 1px solid var(--ink); }
.faq details { border-color: rgba(14,14,13,.25); }
.faq summary { min-height: 82px; padding: 24px 4px; align-items: center; font-size: 17px; }
.faq summary span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; flex: 0 0 auto; margin-left: 20px; }
.faq details p { max-width: 620px; padding: 0 50px 26px 4px; font-size: 15px; line-height: 1.7; }

.cta {
  min-height: 58svh;
  padding-top: 105px;
  padding-bottom: 55px;
  scroll-snap-align: start;
}
.cta h2 { font-size: clamp(56px,6.5vw,96px); margin: 18px auto 28px; }

@media (max-height: 760px) and (min-width: 851px) {
  .hero .sun { margin: 44px 0 16px; }
  .faq summary { min-height: 64px; padding: 15px 4px; }
}

@media (max-width: 850px) {
  .faq { display: flex; gap: 38px; text-align: center; }
  .faq-heading > p { margin-left: auto; margin-right: auto; }
  .faq summary { min-height: 72px; text-align: left; font-size: 15px; }
  .hero::before { background-position: center; opacity: .13; }
  .hero .sun { margin: 38px 0 30px; }
  .cta { min-height: 62svh; }
}

/* Hero adapted to the supplied office image */
.site-header {
  color: var(--cream);
  border-color: rgba(255,255,255,.2);
}
.site-header .brand img { filter: invert(1); }
.site-header .button-dark { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.site-header.is-scrolled { color: var(--ink); border-color: var(--line); }
.site-header.is-scrolled .brand img { filter: none; }
.site-header.is-scrolled .button-dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.hero {
  color: var(--cream);
  background: #11100f;
  justify-content: flex-start;
  padding-top: clamp(125px,17vh,170px);
}
.hero::before {
  background-image: url("assets/imagen-hero.png");
  background-position: center center;
  background-size: cover;
  opacity: .7;
}
.hero::after { background: rgba(8,7,6,.34); }
.hero .eyebrow { color: var(--cream); }
.hero h1 { max-width: 1120px; margin-top: 16px; text-shadow: 0 2px 20px rgba(0,0,0,.18); }
.hero > p { max-width: 610px; color: rgba(255,255,255,.88); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hero .button-light { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.hero .text-link { color: var(--cream); border-color: rgba(255,255,255,.65); }
.hero .sun {
  position: absolute;
  left: 50%;
  bottom: 46px;
  margin: 0;
  transform: translateX(-50%);
  box-shadow: 0 0 0 10px rgba(247,189,45,.12), 0 0 40px rgba(247,189,45,.22);
}
.hero .sun::before { border-color: var(--yellow); opacity: .8; }
.hero .hero-meta { color: var(--cream); border-color: rgba(255,255,255,.24); }

@media (max-height: 760px) and (min-width: 851px) {
  .hero { padding-top: 105px; }
  .hero h1 { font-size: clamp(56px,7vw,94px); }
  .hero .sun { width: 58px; height: 58px; bottom: 40px; }
  .hero .sun::before { width: 88px; height: 88px; }
}

@media (max-width: 850px) {
  .hero { padding-top: 118px; justify-content: flex-start; }
  .hero::before { background-position: 55% center; opacity: .7; }
  .hero::after { background: rgba(8,7,6,.42); }
  .hero .sun { width: 62px; height: 62px; bottom: 48px; }
  .hero .sun::before { width: 92px; height: 92px; }
}