:root{
  --black:#10100f;
  --milk:#f4f1e8;
  --coral:#ff6c4d;
  --lav:#cbbcff;
  --acid:#d8ff70;
  --ink:#171715;
}

body.immersive{
  font-family:ui-sans-serif,system-ui,sans-serif;
  background:var(--black);
  color:var(--milk);
  overflow-x:hidden;
}

.immersive .demo-ribbon{background:var(--acid);color:var(--black)}

.immersive-head{
  position:absolute;
  top:29px;
  left:0;
  right:0;
  z-index:50;
}

.head-inner{
  width:min(1460px,calc(100% - 48px));
  margin:auto;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.immersive-brand{
  text-decoration:none;
  font-weight:900;
  font-size:1.05rem;
  letter-spacing:-.04em;
}

.menu-toggle{
  border:1px solid rgba(255,255,255,.55);
  background:rgba(16,16,15,.42);
  backdrop-filter:blur(10px);
  color:white;
  border-radius:999px;
  padding:.72rem 1rem;
  font-weight:800;
}

.overlay-menu{
  position:fixed;
  inset:0;
  background:var(--lav);
  color:var(--black);
  z-index:100;
  display:grid;
  grid-template-columns:1fr 1fr;
  transform:translateY(-102%);
  transition:transform .45s cubic-bezier(.7,0,.2,1);
}
.overlay-menu.is-open{transform:translateY(0)}
.menu-panel{padding:clamp(36px,6vw,90px);display:flex;flex-direction:column}
.menu-close{align-self:flex-start;background:none;border:1px solid currentColor;border-radius:999px;padding:.7rem 1rem;font-weight:800}
.overlay-links{display:grid;gap:.2rem;margin:auto 0}
.overlay-links a{font-size:clamp(3.5rem,8vw,8rem);font-weight:900;letter-spacing:-.075em;line-height:.9;text-decoration:none}
.overlay-links a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.08em}
.menu-panel>p{font-size:.8rem;font-weight:700}
.menu-art{background:var(--coral);position:relative;overflow:hidden}
.menu-art:before{content:"";position:absolute;width:82%;aspect-ratio:1;border-radius:50%;border:3px solid var(--black);left:8%;top:9%}
.menu-art:after{content:"";position:absolute;width:40%;height:65%;background:var(--acid);right:8%;bottom:8%;border-radius:150px 150px 20px 20px}
body.menu-open{overflow:hidden}

/* HOME — ONE COMPOSED CANVAS, NOT STACKED SECTIONS */
.home-canvas{
  position:relative;
  width:min(1460px,calc(100% - 48px));
  min-height:calc(100svh - 29px);
  margin:auto;
  padding:118px 0 28px;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:repeat(10,minmax(48px,1fr));
  gap:12px;
}

.canvas-hero{
  grid-column:1 / 7;
  grid-row:1 / 7;
  align-self:end;
  position:relative;
  z-index:3;
  padding:24px 8px 18px 0;
}

.canvas-hero h1,
.about-manifesto h1,
.contact-pitch h1{
  font-size:clamp(4.4rem,8.8vw,9.5rem);
  line-height:.79;
  letter-spacing:-.087em;
  margin:.25rem 0 1.5rem;
}

.canvas-hero h1{max-width:7ch}
.canvas-hero .lede{max-width:560px;font-size:1.02rem;line-height:1.65}
.hero-button{background:var(--milk);color:var(--black);border-color:var(--milk);margin-top:15px}

.canvas-shape{position:absolute;pointer-events:none}
.canvas-shape-ring{
  width:34vw;
  max-width:500px;
  aspect-ratio:1;
  border:3px solid var(--lav);
  border-radius:50%;
  left:37%;
  top:10%;
  opacity:.7;
}
.canvas-shape-arch{
  width:18vw;
  max-width:260px;
  height:44%;
  background:var(--coral);
  border-radius:180px 180px 18px 18px;
  left:44%;
  bottom:7%;
  transform:rotate(8deg);
  opacity:.94;
}

.service-orbit{
  grid-column:7 / 13;
  grid-row:1 / 9;
  position:relative;
  z-index:4;
  min-height:620px;
}

.orbit-label{position:absolute;left:7%;top:6%;z-index:3}
.orbit-label h2{font-size:clamp(2.7rem,4.2vw,5rem);line-height:.9;letter-spacing:-.065em;margin:.3rem 0}

.orbit-card{
  position:absolute;
  color:var(--black);
  border:2px solid var(--black);
  padding:20px;
  display:flex;
  flex-direction:column;
  box-shadow:0 14px 0 rgba(0,0,0,.16);
}
.orbit-card span{font-size:.72rem;font-weight:900}
.orbit-card h3{font-size:clamp(1.4rem,2vw,2.1rem);line-height:.95;letter-spacing:-.045em;margin:auto 0 .65rem}
.orbit-card p{font-size:.8rem;line-height:1.45;margin:0;max-width:28ch}
.orbit-card-one{width:42%;height:35%;right:2%;top:4%;background:var(--lav);border-radius:48% 48% 20px 20px}
.orbit-card-two{width:38%;height:31%;right:6%;bottom:5%;background:var(--acid);border-radius:20px 20px 48% 48%}
.orbit-card-three{width:41%;height:34%;left:5%;bottom:12%;background:var(--milk);border-radius:20px}
.orbit-card-four{width:31%;height:27%;left:22%;top:27%;background:var(--coral);border-radius:50%}
.orbit-card-four p{font-size:.73rem}

.canvas-quote{
  grid-column:5 / 8;
  grid-row:7 / 10;
  align-self:end;
  position:relative;
  z-index:6;
  color:var(--black);
  background:var(--acid);
  margin:0;
  padding:20px;
  font-size:clamp(1.6rem,2.7vw,3rem);
  line-height:.95;
  letter-spacing:-.05em;
  font-weight:900;
  transform:rotate(-3deg);
}

.about-peek{
  grid-column:1 / 5;
  grid-row:8 / 11;
  align-self:stretch;
  position:relative;
  z-index:5;
  background:var(--lav);
  color:var(--black);
  text-decoration:none;
  padding:20px;
  border-radius:18px;
  display:grid;
  align-content:space-between;
  gap:12px;
}
.about-peek strong{font-size:clamp(1.7rem,2.6vw,3rem);line-height:.95;letter-spacing:-.05em;max-width:11ch}
.peek-link{font-size:.8rem;font-weight:900}

.contact-orb{
  grid-column:11 / 13;
  grid-row:9 / 11;
  place-self:end;
  width:min(150px,100%);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--milk);
  color:var(--black);
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-weight:900;
  line-height:.9;
  letter-spacing:-.04em;
  position:relative;
  z-index:7;
  transform:rotate(6deg);
}
.contact-orb b{font-size:1.5rem}

.canvas-footer{
  width:min(1460px,calc(100% - 48px));
  margin:0 auto;
  padding:14px 0 18px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:.72rem;
  opacity:.72;
}

/* ABOUT — EDITORIAL BOARD */
.about-canvas{
  width:min(1460px,calc(100% - 48px));
  min-height:calc(100svh - 29px);
  margin:auto;
  padding:126px 0 34px;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto auto auto;
  gap:16px;
  position:relative;
}

.about-manifesto{
  grid-column:1 / 8;
  grid-row:1 / 2;
  padding:18px 0 36px;
}
.about-manifesto h1{font-size:clamp(4rem,7.7vw,8.2rem);max-width:8ch}
.about-lede{max-width:620px;font-size:1.08rem;line-height:1.65}

.story-card{
  grid-column:9 / 13;
  grid-row:1 / 2;
  align-self:end;
  background:var(--lav);
  color:var(--black);
  padding:28px;
  border-radius:24px 24px 48% 24px;
  transform:rotate(1.5deg);
}
.story-card p{line-height:1.65}

.approach-track{
  grid-column:1 / 11;
  grid-row:2 / 3;
  display:grid;
  grid-template-columns:1.25fr repeat(3,1fr);
  background:var(--milk);
  color:var(--black);
  border-radius:20px;
  overflow:hidden;
}
.approach-track>*{padding:22px;border-right:1px solid rgba(0,0,0,.22);min-height:210px}
.approach-track>*:last-child{border-right:0}
.approach-intro{background:var(--acid)}
.approach-intro h2{font-size:clamp(2rem,3vw,3.4rem);line-height:.93;letter-spacing:-.055em;margin:.4rem 0}
.approach-track article{display:flex;flex-direction:column}
.approach-track article span{font-size:.7rem;font-weight:900}
.approach-track article h3{font-size:1.35rem;line-height:1;margin:auto 0 .55rem;letter-spacing:-.035em}
.approach-track article p{font-size:.86rem;line-height:1.5;margin:0}

.about-next{
  grid-column:10 / 13;
  grid-row:2 / 4;
  align-self:end;
  background:var(--coral);
  color:var(--black);
  text-decoration:none;
  border-radius:50% 50% 18px 18px;
  min-height:340px;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:30px;
  font-weight:900;
  transform:translateY(46px);
}
.about-next span{font-size:clamp(2rem,3vw,3.4rem);line-height:.9;letter-spacing:-.06em}
.about-next b{font-size:.85rem}

/* CONTACT — SPLIT SCREEN / FORM OBJECT */
.contact-canvas{
  width:min(1460px,calc(100% - 48px));
  min-height:calc(100svh - 29px);
  margin:auto;
  padding:126px 0 34px;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:1fr auto;
  gap:18px;
  position:relative;
}

.contact-pitch{
  grid-column:1 / 7;
  grid-row:1 / 2;
  align-self:center;
  z-index:3;
}
.contact-pitch h1{font-size:clamp(4rem,7.3vw,8rem);max-width:8ch}
.contact-pitch>p:last-child{max-width:520px;font-size:1.05rem;line-height:1.65}

.contact-stamp{
  position:absolute;
  left:42%;
  top:16%;
  width:210px;
  aspect-ratio:1;
  border:3px solid var(--lav);
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  font-size:1.4rem;
  font-weight:900;
  letter-spacing:.08em;
  transform:rotate(12deg);
  opacity:.75;
}

.contact-details{
  grid-column:1 / 6;
  grid-row:2 / 3;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-self:end;
}
.contact-details a,.contact-details span{
  color:var(--black);
  background:var(--acid);
  border-radius:999px;
  padding:.72rem 1rem;
  text-decoration:none;
  font-size:.8rem;
  font-weight:800;
}
.contact-details :nth-child(2){background:var(--lav)}
.contact-details :nth-child(3){background:var(--coral)}
.contact-details :nth-child(4){background:var(--milk)}

.form-panel{
  grid-column:8 / 13;
  grid-row:1 / 3;
  align-self:center;
  background:var(--milk);
  color:var(--black);
  border-radius:42% 42% 22px 22px;
  padding:clamp(40px,5vw,72px) clamp(26px,4vw,56px) 40px;
  box-shadow:24px 24px 0 var(--lav);
  position:relative;
  z-index:4;
}
.form-panel:before{
  content:"TELL US WHERE THE FRICTION IS";
  position:absolute;
  top:22px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:.62rem;
  letter-spacing:.16em;
  font-weight:900;
}
.immersive .field input,.immersive .field textarea{border:0;border-bottom:2px solid var(--black);border-radius:0;background:transparent;padding:.8rem 0}
.immersive .field textarea{min-height:110px}
.immersive .contact-form .button{background:var(--black);color:var(--milk);border-color:var(--black);justify-self:start}

@media(max-width:1100px){
  .home-canvas{grid-template-rows:repeat(12,minmax(46px,1fr))}
  .canvas-hero{grid-column:1 / 7;grid-row:1 / 7}
  .service-orbit{grid-column:6 / 13;grid-row:1 / 10}
  .about-peek{grid-column:1 / 5;grid-row:9 / 13}
  .canvas-quote{grid-column:5 / 8;grid-row:9 / 12}
  .contact-orb{grid-column:11 / 13;grid-row:11 / 13}
  .orbit-card p{font-size:.72rem}
  .story-card{grid-column:8 / 13}
  .approach-track{grid-column:1 / 13;grid-template-columns:1.2fr repeat(3,1fr)}
  .about-next{grid-column:9 / 13;grid-row:3 / 4;transform:none;min-height:220px;border-radius:20px;margin-top:0}
  .contact-stamp{display:none}
}

@media(max-width:850px){
  .head-inner,.home-canvas,.about-canvas,.contact-canvas,.canvas-footer{width:min(100% - 32px,760px)}
  .overlay-menu{grid-template-columns:1fr}.menu-art{display:none}
  .home-canvas,.about-canvas,.contact-canvas{display:block;min-height:0;padding-top:112px}
  .canvas-shape-ring{width:78vw;left:35%;top:8%}.canvas-shape-arch{width:34vw;height:260px;left:auto;right:-10%;top:250px;bottom:auto}
  .canvas-hero{min-height:560px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:48px}
  .canvas-hero h1,.about-manifesto h1,.contact-pitch h1{font-size:clamp(4rem,18vw,7rem)}
  .service-orbit{min-height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:28px 0}
  .orbit-label{position:static;grid-column:1 / -1;margin-bottom:8px}
  .orbit-card{position:static;width:auto!important;height:auto!important;min-height:230px;transform:none!important;border-radius:18px!important}
  .orbit-card-four{border-radius:50% 50% 18px 18px!important}
  .orbit-card p{font-size:.8rem}
  .canvas-quote{margin:18px 0 10px;transform:none}
  .about-peek{min-height:240px;margin:10px 0}
  .contact-orb{width:150px;margin:18px 0 10px auto}
  .canvas-footer{display:grid}

  .about-manifesto{padding-bottom:20px}
  .story-card{margin:18px 0 12px;transform:none;border-radius:20px}
  .approach-track{display:grid;grid-template-columns:1fr 1fr;margin-top:12px}
  .approach-track>*{min-height:180px;border-right:1px solid rgba(0,0,0,.22);border-bottom:1px solid rgba(0,0,0,.22)}
  .approach-intro{grid-column:1 / -1}
  .about-next{display:flex;margin:12px 0;min-height:260px;border-radius:20px}

  .contact-pitch{padding-bottom:24px}
  .contact-details{margin:16px 0 28px}
  .form-panel{margin:10px 0 20px;border-radius:26px;box-shadow:10px 10px 0 var(--lav);padding-top:52px}
}

@media(max-width:560px){
  .service-orbit{grid-template-columns:1fr}
  .orbit-label{grid-column:auto}
  .orbit-card{min-height:210px}
  .approach-track{grid-template-columns:1fr}
  .approach-intro{grid-column:auto}
  .canvas-footer{font-size:.66rem}
}

@media(prefers-reduced-motion:reduce){.overlay-menu{transition:none}}