:root{
  --grid-edge:clamp(28px,5.3vw,80px);
  --section-top:clamp(118px,14vh,148px);
  --section-bottom:clamp(72px,9vh,100px);
  --column-gap:clamp(28px,4vw,64px);
  --display-size:clamp(58px,6.4vw,92px);
  --body-size:clamp(14px,1.05vw,16px);
}

/* One shared frame across the entire site. */
.site-header,.site-header[data-theme="dark"],.site-header[data-theme="light"]{height:78px;padding-inline:var(--grid-edge);color:#fff;background:linear-gradient(180deg,rgba(7,26,56,.94),rgba(7,26,56,.82));backdrop-filter:blur(14px);text-shadow:none}
.site-header:after{left:var(--grid-edge);right:var(--grid-edge)}
.screen{scroll-margin-top:78px}
.screen:not(.screen-hero){padding:var(--section-top) var(--grid-edge) var(--section-bottom)}
.screen:not(.screen-hero):after{content:"";position:absolute;z-index:3;top:0;left:var(--grid-edge);right:var(--grid-edge);height:1px;background:currentColor;opacity:.13}
.micro{font-size:10px;line-height:1.4}
.micro span{width:42px;margin-inline:12px}

/* Hero uses the same left and right anchors as every following chapter. */
.screen-hero .hero-main{left:var(--grid-edge);width:min(850px,72vw)}
.screen-hero .floating-card{right:var(--grid-edge)}
.screen-hero .scroll-cue{left:var(--grid-edge)}
.screen-hero .hero-main h1{max-width:850px;text-wrap:balance}
.screen-hero .lede{font-size:var(--body-size);line-height:1.55}

/* Shared editorial grid: 12 columns, same anchors, same reading width. */
.about-top,.projects-head,.summary-head{width:100%}
.about-layout{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--column-gap);margin:auto 0}
.about-title{grid-column:1 / span 7}
.about-copy{grid-column:9 / span 4;align-self:center;max-width:none}
.about-title h2,.projects-head h2,.summary-copy h2{font-size:var(--display-size);line-height:.95;letter-spacing:-.065em}
.about-copy h3{font-size:clamp(24px,2vw,30px);line-height:1.15}
.about-copy p{font-size:var(--body-size);line-height:1.62}
.about-title>p,.about-top>p:last-child{display:none}
.process-line{margin-top:48px}
.process-line article{padding:22px 0}
.process-line h4{font-size:13px}

.projects-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--column-gap);align-items:end}
.projects-head>div:first-child{grid-column:1 / span 8}
.projects-head .filters{grid-column:9 / span 4;justify-content:flex-end}
.project-stage-real{margin-top:52px}
.project-stage-real .case-art{border-radius:10px}
.project-stage-real .case footer{padding-top:11px}
.project-stage-real .case footer p{font-size:9px}
.project-stage-real .case footer h3{font-size:13px}

.summary-layout{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--column-gap);margin:auto 0}
.summary-copy{grid-column:1 / span 6}
.service-stack{grid-column:7 / span 6}
.summary-copy h2{max-width:700px}
.summary-copy>p{font-size:var(--body-size);line-height:1.6;max-width:500px}
.service-stack article{grid-template-columns:36px 1fr 28px;gap:18px;padding:22px 4px}
.service-stack h3{font-size:19px}
.service-stack p{max-width:560px;font-size:13px;line-height:1.55}
.trusted{margin-top:56px}
.trusted span{height:68px}

.contact-main{margin-top:clamp(72px,10vh,110px)}
.screen-contact .contact-main h2{max-width:900px;font-size:clamp(76px,8.5vw,122px);line-height:.9;letter-spacing:-.067em}
.contact-main>p{font-size:var(--body-size);line-height:1.6}
.contact-people a{min-height:70px;align-items:center}
.site-footer{left:var(--grid-edge);right:var(--grid-edge)}

/* Consistent interaction geometry. */
.pill{min-height:48px;padding:14px 20px}
.filters button{min-height:44px;padding:10px 16px}
.menu{width:44px;height:44px;padding:10px;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid #e070ff;outline-offset:4px}
.floating-card,.contact-people a{border-radius:12px}
.case footer b,.floating-card a,.pill span{transition:transform .2s ease}
.case:hover footer b,.floating-card a:hover,.pill:hover span{transform:translate(3px,-3px)}

@media(max-width:900px) and (min-width:721px){
  .site-header nav{display:flex;gap:20px}
  .site-header nav a{font-size:10px}
  .site-header .talk{display:flex;font-size:9px}
  .site-header .menu{display:none}
  .about-layout{grid-template-columns:repeat(12,minmax(0,1fr));gap:28px}
  .about-title{grid-column:1 / span 7}
  .about-copy{grid-column:8 / span 5}
  .about-title h2{font-size:clamp(54px,7vw,66px)}
  .project-stage-real{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .project-stage-real .case-featured{grid-column:1 / 3;grid-row:auto}
  .project-stage-real .case:nth-child(n+4){display:flex}
  .summary-layout{grid-template-columns:1fr 1fr;gap:36px}
  .summary-copy,.service-stack{grid-column:auto}
}

@media(max-width:960px){
  .projects-head{display:block}
  .projects-head>div:first-child,.projects-head .filters{display:block}
  .projects-head .filters{display:flex;justify-content:flex-start;flex-wrap:wrap;margin-top:24px}
}

@media(max-width:720px){
  :root{--grid-edge:24px;--section-top:96px;--section-bottom:72px;--display-size:50px}
  .site-header nav{display:none}
  .site-header nav.open{display:flex}
  .site-header .talk{display:none}
  .site-header .menu{display:block}
  .screen-hero .hero-main{left:var(--grid-edge);width:calc(100% - 48px)}
  .screen-hero .floating-card{right:var(--grid-edge)}
  .about-layout{display:block;margin:56px 0 70px}
  .about-title,.about-copy{display:block}
  .about-copy{margin-top:48px}
  .about-copy p{font-size:15px}
  .projects-head{display:block}
  .projects-head .filters{justify-content:flex-start}
  .project-stage-real{margin-top:42px}
  .summary-layout{display:block;margin:56px 0 48px}
  .service-stack{margin-top:52px}
  .summary-copy>p{font-size:15px}
  .trusted{margin-top:40px}
  .screen-contact .contact-main h2{font-size:62px}
  .contact-main>p{font-size:15px}
}