/* V15 — editorial spacing, interactive Rennweg, clearer brand principles, integrated territories */

/* ---------- Strengths: calm editorial composition, no underlines ---------- */
.word-rail{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  column-gap:clamp(18px,2.4vw,40px)!important;
  row-gap:clamp(26px,4.2vw,72px)!important;
  padding:clamp(42px,5.5vw,88px) var(--mx) clamp(58px,7vw,110px)!important;
  border:0!important;
  overflow:visible!important;
  white-space:normal!important;
  transform:none!important;
  align-items:end;
}
.word-rail span,.word-rail span:nth-child(2n){
  display:block!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  color:#1e1b17!important;
  font-size:clamp(38px,4.75vw,82px)!important;
  line-height:.92!important;
  letter-spacing:-.055em!important;
  font-weight:500!important;
  text-decoration:none!important;
  text-wrap:balance;
  transition:color .4s var(--ease-silk),opacity .4s var(--ease-silk),transform .4s var(--ease-silk)!important;
}
.word-rail span:nth-child(1){grid-column:1 / 5}
.word-rail span:nth-child(2){grid-column:7 / 13}
.word-rail span:nth-child(3){grid-column:2 / 5}
.word-rail span:nth-child(4){grid-column:6 / 11}
.word-rail span:nth-child(5){grid-column:1 / 4}
.word-rail span:nth-child(6){grid-column:8 / 13}
.word-rail span:hover{color:#75452f!important;transform:translateY(-3px)!important}
.word-rail:has(span:hover) span:not(:hover){opacity:.34!important}

/* ---------- Why now: interactive architectural illustration ---------- */
.why-tabs{margin-top:34px;display:flex;gap:9px;flex-wrap:wrap}
.why-tab{
  appearance:none;border:1px solid rgba(255,255,255,.25);background:transparent;color:inherit;
  border-radius:999px;padding:12px 18px;font:inherit;font-size:13px;line-height:1;cursor:pointer;
  transition:background .35s var(--ease-silk),color .35s var(--ease-silk),border-color .35s var(--ease-silk),transform .35s var(--ease-silk)
}
.why-tab:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.55)}
.why-tab.active{background:#f3ede5;color:#4c291a;border-color:#f3ede5}
.rennweg-stage{overflow:hidden;isolation:isolate}
.street{white-space:nowrap!important;min-width:max-content;z-index:8}
.why-illustrations{position:absolute;inset:0;z-index:5;pointer-events:none}
.why-visual{position:absolute;inset:0;opacity:0;transform:translateY(18px) scale(.975);transition:opacity .65s var(--ease-silk),transform .65s var(--ease-silk)}
.why-visual.active{opacity:1;transform:none}
.why-visual-label{position:absolute;z-index:8;top:clamp(100px,12vh,160px);right:clamp(24px,4vw,64px);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* Brand */
.brand-ring{position:absolute;border:1px solid rgba(246,222,191,.42);border-radius:50%}
.brand-ring.ring-a{width:36%;aspect-ratio:1;right:10%;top:17%}
.brand-ring.ring-b{width:20%;aspect-ratio:1;right:28%;top:35%}
.brand-chip{position:absolute;width:54px;height:10px;border-radius:999px;right:18%;background:#e8cfaa;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.brand-chip.chip-a{top:27%;background:#d8b286}
.brand-chip.chip-b{top:30%;right:24%;background:#8b5639}
.brand-chip.chip-c{top:33%;right:30%;background:#efe2cf}

/* Digital */
.digital-frame{position:absolute;right:8%;top:19%;width:45%;height:36%;border:1px solid rgba(255,255,255,.45);border-radius:8px;padding:22px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:22px 1fr 1fr;gap:10px;background:rgba(34,18,12,.18);backdrop-filter:blur(2px)}
.digital-frame>span{height:4px;border-radius:99px;background:rgba(255,255,255,.4);align-self:center}
.digital-frame>span:nth-child(2){width:55%}.digital-frame>span:nth-child(3){width:28%;justify-self:end}
.digital-frame>i{border:1px solid rgba(255,255,255,.2);background:rgba(246,216,155,.08);border-radius:4px}
.digital-frame>i:nth-of-type(1){grid-column:1 / 3}

/* Content */
.content-card{position:absolute;width:22%;aspect-ratio:4/5;border:1px solid rgba(255,255,255,.36);background:#382117;box-shadow:0 22px 45px rgba(0,0,0,.18)}
.content-card:before{content:"";position:absolute;left:12%;right:12%;bottom:13%;height:2px;background:rgba(255,255,255,.55);box-shadow:0 -10px 0 rgba(255,255,255,.24),0 -20px 0 rgba(255,255,255,.13)}
.content-card.c1{right:27%;top:17%;transform:rotate(-7deg)}
.content-card.c2{right:11%;top:26%;transform:rotate(6deg);background:#6f432e}
.content-card.c3{right:42%;top:33%;transform:rotate(2deg);background:#c09568}

/* Retail */
.retail-awning{position:absolute;right:8%;top:28%;width:49%;height:48px;background:repeating-linear-gradient(90deg,#efe0cb 0 36px,#7c4a31 36px 72px);clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.retail-display{position:absolute;top:38%;width:13%;height:22%;border:1px solid rgba(255,255,255,.32);background:linear-gradient(180deg,rgba(242,211,159,.22),rgba(242,211,159,.06));border-radius:2px}
.retail-display:after{content:"";position:absolute;left:20%;right:20%;bottom:13%;height:28%;border-radius:50% 50% 10% 10%;background:#efcf95;opacity:.75}
.retail-display.d1{right:41%}.retail-display.d2{right:25%}.retail-display.d3{right:9%}

/* ---------- Brand principles / moments ---------- */
.moments-head .lead{max-width:930px}
.moments-editorial{gap:clamp(62px,7vw,120px)!important}
.moments-editorial .moment-card{width:min(88vw,1380px)!important;margin-inline:auto!important}
.moments-editorial .moment-media{height:min(54vw,780px)!important;min-height:600px!important;border-radius:22px!important;overflow:hidden}
.moments-editorial .moment-card:nth-child(2){width:min(72vw,1080px)!important;margin-left:auto!important;margin-right:var(--mx)!important}
.moments-editorial .moment-card:nth-child(3){width:min(78vw,1180px)!important;margin-left:var(--mx)!important;margin-right:auto!important}
.moments-editorial .moment-media>img.parallax-media{inset:-5%!important;width:110%!important;height:110%!important;object-fit:cover!important;filter:none!important}
.moments-editorial .moment-card:nth-child(1) .moment-media>img{object-position:center center!important}
.moments-editorial .moment-card:nth-child(2) .moment-media>img{object-position:center center!important}
.moments-editorial .moment-card:nth-child(3) .moment-media>img{object-position:center center!important}
.moment-image-wash{background:linear-gradient(180deg,rgba(10,8,6,.02) 38%,rgba(10,8,6,.68) 100%)!important}
.moment-caption-overlay{left:clamp(28px,4.5vw,72px)!important;right:clamp(28px,4.5vw,72px)!important;bottom:clamp(30px,4vw,62px)!important;grid-template-columns:56px minmax(0,1fr) minmax(260px,.72fr)!important;gap:22px!important;color:#fff!important}
.moment-caption-overlay>span{color:#fff!important;opacity:.78!important}
.moment-caption-overlay h3{color:#fff!important;max-width:670px!important;text-shadow:0 1px 20px rgba(0,0,0,.16)}
.moment-caption-overlay p{color:#fff!important;opacity:.9!important;max-width:500px!important;text-shadow:0 1px 18px rgba(0,0,0,.18)}

/* ---------- Creative territories: integrated, left-aligned navigation ---------- */
.explorer{padding-bottom:clamp(100px,10vw,170px)!important;overflow:hidden}
.explorer-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(270px,.42fr)!important;
  gap:clamp(55px,8vw,130px)!important;
  align-items:end!important;
  padding-top:clamp(115px,10vw,165px)!important;
  padding-bottom:clamp(45px,5vw,80px)!important;
}
.explorer-intro-block{max-width:880px}
.explorer-title{max-width:850px!important}
.explorer-head-note{margin:0 0 4px;font-size:15px;line-height:1.55;color:#625d56;max-width:440px}
.concept-tabs{
  counter-reset:territory;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:7px!important;
  max-width:360px!important;
  margin-top:36px!important;
}
.concept-tab{
  counter-increment:territory;
  width:100%;
  border-radius:0!important;
  padding:14px 0!important;
  border:0!important;
  border-bottom:1px solid rgba(29,25,21,.16)!important;
  background:transparent!important;
  color:#28231e!important;
  font-size:15px!important;
  display:grid!important;
  grid-template-columns:40px 1fr auto;
  align-items:center;
  text-align:left;
  gap:8px;
}
.concept-tab:before{content:"0" counter(territory);font-size:10px;letter-spacing:.1em;color:#9b938a}
.concept-tab:after{content:"↗";font-size:13px;opacity:.28;transition:opacity .3s ease,transform .3s ease}
.concept-tab:hover{transform:none!important;color:#76503a!important}
.concept-tab.active{color:#76503a!important;background:transparent!important}
.concept-tab.active:after{opacity:.9;transform:translate(2px,-2px)}

.concept-canvas{
  width:calc(100% - (var(--mx) * 2));
  max-width:1600px;
  margin:0 auto!important;
  border-radius:30px;
  padding:clamp(46px,5vw,76px) clamp(28px,4vw,68px) clamp(42px,4.5vw,66px)!important;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(35,28,22,.09);
}
.concept-meta{max-width:none!important;align-items:end!important}
.concept-meta h3{font-size:clamp(52px,5.4vw,92px)!important;max-width:850px;text-wrap:balance}
.concept-meta p:not(.concept-count){max-width:610px!important}
.application-tabs{max-width:none!important;margin-top:48px!important;margin-bottom:22px!important}
.application-stage{max-width:none!important;min-height:0!important}

/* Keep all example typography safely inside image fields */
.brand-cues-board,.web-experience,.communication-thought{overflow:hidden}
.brand-cues-visual span{left:clamp(18px,3vw,48px)!important;right:clamp(18px,3vw,48px)!important;bottom:clamp(18px,3vw,44px)!important;font-size:clamp(44px,6.2vw,104px)!important;line-height:.86!important;white-space:normal!important;overflow-wrap:anywhere!important;max-width:calc(100% - 56px)!important}
.web-ghost-word{left:3%!important;right:3%!important;max-width:94%!important;font-size:clamp(68px,8.5vw,142px)!important;white-space:normal!important;overflow-wrap:anywhere!important}
.web-copy-panel h4,.communication-copy h4{overflow-wrap:anywhere;text-wrap:balance}
.communication-main{min-height:720px!important}
.communication-word{font-size:clamp(48px,6.1vw,98px)!important;line-height:.9!important;max-width:70%!important;margin-top:clamp(80px,9vw,145px)!important;overflow-wrap:anywhere!important;text-wrap:balance}
.communication-copy{max-width:min(560px,58%)!important;margin-top:30px!important}
.communication-copy p{max-width:520px!important}
.communication-foot{gap:24px}
.communication-foot span{white-space:normal}

/* ---------- Responsive ---------- */
@media(max-width:1050px){
  .word-rail{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:28px!important}
  .word-rail span:nth-child(n){grid-column:auto!important}
  .word-rail span{font-size:clamp(34px,6vw,56px)!important}
  .why-visual-label{top:70px}
  .explorer-head{grid-template-columns:1fr!important;gap:34px!important}
  .explorer-head-note{max-width:720px}
  .concept-tabs{max-width:480px!important}
  .concept-canvas{width:calc(100% - (var(--mx) * 2));border-radius:24px}
  .moments-editorial .moment-card:nth-child(n){width:auto!important;margin-inline:var(--mx)!important}
  .moment-caption-overlay{grid-template-columns:42px 1fr!important}
  .moment-caption-overlay p{grid-column:2!important}
}

@media(max-width:700px){
  .word-rail{grid-template-columns:1fr!important;padding-top:30px!important;padding-bottom:58px!important;row-gap:20px!important}
  .word-rail span{font-size:36px!important}
  .why-tabs{gap:7px}.why-tab{font-size:12px;padding:10px 13px}
  .why-visual-label{top:34px;right:18px;font-size:9px}
  .digital-frame{right:7%;top:18%;width:58%;height:32%;padding:12px}
  .content-card{width:26%}.content-card.c1{right:29%}.content-card.c2{right:7%}.content-card.c3{right:48%}
  .retail-awning{right:5%;width:63%;top:27%}.retail-display{width:16%}.retail-display.d1{right:47%}.retail-display.d2{right:27%}.retail-display.d3{right:7%}
  .moments-editorial .moment-media{height:68vh!important;min-height:540px!important;border-radius:16px!important}
  .moment-caption-overlay{grid-template-columns:1fr!important;left:22px!important;right:22px!important;bottom:24px!important}
  .moment-caption-overlay>span{display:none}.moment-caption-overlay p{grid-column:auto!important;font-size:15px!important}
  .concept-canvas{width:calc(100% - 24px);border-radius:20px;padding:34px 18px 28px!important}
  .concept-meta{display:block!important}.favorite-btn{margin-top:22px}
  .concept-tabs{max-width:100%!important}
  .concept-tab{font-size:14px!important}
  .application-tabs{overflow:auto;flex-wrap:nowrap!important;margin-top:34px!important}
  .application-tab{white-space:nowrap}
  .communication-main{min-height:590px!important;padding:28px 22px!important}
  .communication-word{font-size:45px!important;max-width:92%!important;margin-top:72px!important}
  .communication-copy{max-width:92%!important}
  .communication-copy h4{font-size:29px!important}
}