/* Homepage composition with compact, equal cards and responsive column counts. */
.brand-story {position:relative;isolation:isolate;background:var(--kk-color-night);color:var(--paper);--home-space:clamp(64px,8vw,112px);}
.brand-story :where(h2,h3,p,figure) {margin-top:0;}
.brand-story :where(h2,h3) {font-family:var(--kk-font-body);font-weight:700;color:#fff;letter-spacing:-.03em;text-transform:none;text-wrap:balance;}
.brand-story h2 {font-size:clamp(32px,4vw,56px);line-height:1.15;margin-bottom:24px;max-width:24ch;}
.brand-story h3 {font-size:clamp(24px,2.4vw,32px);line-height:1.22;margin-bottom:24px;}
.brand-story h2 span {color:inherit;-webkit-text-stroke:0;}
.brand-story :where(p,li) {font-size:16px;line-height:1.7;color:var(--paper);}
.brand-story :where(.lead,.section-intro) {font-size:18px;line-height:1.65;max-width:60ch;}
.brand-story .kicker {font:600 14px/1.5 var(--kk-font-body);letter-spacing:normal;text-transform:none;color:inherit;margin:0 0 20px;}
.brand-story .section {padding:var(--home-space) var(--pad);background:transparent;color:var(--paper);}
.brand-story .section :where(div,article,figure,a) {min-width:0;}
.brand-story [id] {scroll-margin-top:130px;}
.brand-link-icon {width:22px;height:22px;flex:0 0 22px;}
.brand-hero {position:relative;padding:174px var(--pad) 90px;overflow:hidden;}
.brand-hero__inner {max-width:var(--kk-container-wide);margin:auto;}
.brand-hero__eyebrow {font:600 14px/1.5 var(--kk-font-body);margin:0 0 40px;color:var(--paper);}
.brand-hero__composition {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center;}
.brand-hero__message {min-width:0;}
.brand-hero__title {margin:0;font:400 clamp(64px,7.3vw,112px)/1.12 var(--kk-font-display);letter-spacing:normal;text-transform:uppercase;color:#fff;}
.brand-hero__title>span {display:block;}
.brand-hero__copy {max-width:44ch;margin:32px 0;font-size:18px;line-height:1.65;}
.brand-hero__art {min-width:0;margin:0;}
.brand-hero__caption {margin:20px 0 0;text-align:right;font:600 14px/1.5 var(--kk-font-body);color:var(--paper);}
.ticker-clip {overflow:hidden;padding-block:12px;margin-block:-12px;}
.brand-story .ticker {overflow:hidden;white-space:nowrap;transform:rotate(-.6deg) scale(1.02);padding:15px 0;border:0;background:var(--acid);color:var(--ink);font:600 22px/1.2 var(--kk-font-body);letter-spacing:normal;}
.ticker>div {width:max-content;animation:studio-ticker 28s linear infinite;}
@keyframes studio-ticker {to{transform:translateX(-50%)}}
.brand-story :is(.references-head,.services-head,.journal-head) {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start;max-width:var(--kk-container-wide);margin:0 auto 48px;}
.brand-story :is(.references-head,.services-head,.journal-head) h2 {margin:0;}
.brand-story .section-intro {margin:0 0 16px;color:var(--paper);}
.brand-story :is(.reference-grid,.post-grid) {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:var(--kk-container-wide);margin:0 auto;}
.brand-story .service-grid {display:grid;gap:32px;max-width:var(--kk-container-wide);margin:auto;}
.brand-story .service-card {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:var(--kk-color-night);border:1px solid #ffffff30;border-radius:8px;overflow:hidden;}
.brand-story .service-card--reverse .service-visual {grid-column:2;grid-row:1;}
.brand-story .service-card--reverse .service-copy {grid-column:1;grid-row:1;}
.brand-story .service-visual.kk-media-frame {height:100%;min-height:420px;aspect-ratio:auto;display:block;}
.brand-story .service-visual::after {content:none;}
.brand-story .service-copy {padding:48px;display:flex;flex-direction:column;justify-content:center;}
.brand-story .service-label {font:600 14px/1.5 var(--kk-font-body);color:var(--paper);margin-bottom:24px;letter-spacing:normal;text-transform:none;}
.brand-story .service-copy h3 {font-size:32px;margin:0 0 24px;}
.brand-story .service-copy>p:not(.service-label) {margin:0;font-size:17px;}
.brand-story .service-copy ul {margin:24px 0 16px;padding:0;list-style:none;}
.brand-story .service-copy li {padding:10px 0;border-bottom:1px solid #ffffff30;}
.brand-story .service-copy li::before {content:none;}
.brand-story .brand-intro {display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center;margin:32px var(--pad);padding:48px 0;background:transparent;color:var(--paper);border-radius:0;}
.brand-intro .portrait {grid-column:1;grid-row:1;margin:0;padding:0;border:0;align-self:start;}
.brand-intro .portrait::before {content:none;}
.brand-intro .intro-copy {grid-column:2;grid-row:1;}
.brand-story .brand-intro :is(h2,p,li,figcaption,.kicker) {color:var(--paper);}
.brand-intro .image-wrap.kk-media-frame {aspect-ratio:1;background:var(--ink);}
.brand-intro .portrait img {object-fit:cover;object-position:50% 35%;mix-blend-mode:normal;}
.brand-intro figcaption {display:flex;flex-direction:column;gap:4px;padding-top:16px;font:400 14px/1.5 var(--kk-font-body);text-transform:none;letter-spacing:normal;}
.brand-intro figcaption span:first-child {font-weight:600;}
.brand-intro .intro-points {list-style:none;margin:32px 0 0;padding:0;}
.brand-intro .intro-points li {padding:12px 0;border-top:1px solid #ffffff30;font-weight:600;}
.brand-intro .intro-points li::before {content:none;}
.brand-story .value-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;max-width:var(--kk-container-wide);margin:auto;}
.brand-story .value-list {display:grid;gap:24px;}
.brand-story .value-list article {padding:24px 0 0;border-top:1px solid #ffffff40;background:none;box-shadow:none;transform:none;}
.brand-story .value-list h3 {font-size:24px;margin:0 0 12px;}
.brand-story .value-list p {margin:0;}
.brand-story .process {display:block;min-height:0;}
.brand-story .process-intro {margin:0 0 48px;}
.brand-story .steps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:0;padding:0;border:0;}
.brand-story .steps article {padding:24px 0 0;min-height:0;border:0;border-top:1px solid #ffffff30;}
.brand-story .steps strong {display:block;font:600 36px/1.1 var(--kk-font-body);font-variant-numeric:tabular-nums;color:#fff;-webkit-text-stroke:0;text-shadow:none;filter:none;margin:0 0 24px;}
.brand-story .steps h3 {font-size:22px;line-height:1.3;text-transform:none;margin:0 0 20px;}
.brand-story .steps p {margin:0;}
.brand-story .contact {padding:64px var(--pad) 112px;min-height:0;display:block;background:transparent;}
.brand-story .contact-inner {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:0 64px;padding:56px;border:1px solid #ffffff40;border-radius:8px;background:var(--kk-color-night);}
.brand-story .contact .kicker {grid-column:1/-1;}
.brand-story .contact h2 {grid-column:1;grid-row:2/4;margin:0;}
.brand-story .contact-copy,.brand-story .contact-cta {grid-column:2;justify-self:start;}
.brand-story .contact-copy {font-size:18px;margin:0 0 24px;}
@media(max-width:1100px) {
 .brand-story {--home-space:64px;}
 .brand-hero {padding:112px var(--pad) 56px;text-align:left;}
 .brand-hero__eyebrow {max-width:48ch;margin:0 auto 24px;font-size:13px;line-height:1.6;text-wrap:pretty;text-align:center;}
 .brand-hero__composition {grid-template-columns:minmax(0,1fr);gap:40px;}
 .brand-hero__title {font-size:clamp(42px,10.6vw,64px);line-height:1.12;}
 .brand-hero__copy {font-size:16px;max-width:52ch;margin:24px 0 28px;line-height:1.75;text-wrap:pretty;}
 .brand-story .ticker {font-size:16px;padding:10px 0;transform:none;}
 .brand-story :is(.references-head,.services-head,.journal-head,.value-layout,.brand-intro,.steps,.contact-inner,.reference-grid,.post-grid) {grid-template-columns:minmax(0,1fr);gap:32px;}
 .brand-story :is(.references-head,.services-head,.journal-head) {text-align:left;}
 .brand-story :is(.references-head,.services-head,.journal-head) :is(h2,.section-intro) {margin-inline:0;}
 .brand-story .reference-card:first-child,.brand-story .post-card:first-child {grid-column:auto;}
 .brand-story .service-card {grid-template-columns:minmax(0,1fr);}
 .brand-story .service-card--reverse .service-visual,.brand-story .service-card--reverse .service-copy {grid-column:1;grid-row:auto;}
 .brand-story .service-visual.kk-media-frame {height:auto;min-height:0;aspect-ratio:16/10;}
 .brand-story .service-copy {padding:28px 24px;}
 .brand-story .service-copy h3 {font-size:28px;}
 .brand-story .brand-intro {padding:24px 0;}
 .brand-intro .portrait {grid-column:1;grid-row:1;max-width:440px;width:100%;margin:auto;}
 .brand-intro .intro-copy {grid-column:1;grid-row:2;}
 .brand-story .steps article {display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 16px;}
 .brand-story .steps strong {grid-column:1;grid-row:1;}
 .brand-story .steps h3,.brand-story .steps p {grid-column:2;}
 .brand-story .contact-inner {padding:32px 24px;text-align:left;}
 .brand-story .contact :is(h2,.kicker,.contact-copy,.contact-cta) {grid-column:1;grid-row:auto;margin-inline:0;}
 .brand-story .contact h2,.brand-story .contact-copy {margin-bottom:24px;}
 .brand-story .contact-cta {justify-self:start;}
}
@media(prefers-reduced-motion:reduce) {
 .ticker>div {animation:none;}
}

/* Shared redesign component rules. */
@media(max-width:1100px) {
.brand-story .brand-hero__composition {display:grid;gap:32px;}
.brand-story .brand-hero__title {font-size:clamp(42px,10.6vw,64px);}
.brand-story .ticker {font-size:16px;}
}
.brand-story .brand-hero__caption {text-transform:none;letter-spacing:normal;}
.brand-hero__message {container-type:inline-size;}
.brand-story .brand-hero__title {font-size:clamp(44px,14cqw,88px);}
@media(max-width:1100px) {
.brand-story .brand-hero__title {font-size:clamp(40px,12.8cqw,60px);}
}

/* Portrait direction is a presentation choice; the source image stays unchanged. */
.brand-story .brand-intro .portrait .image-wrap>img,
.brand-story .brand-intro .portrait .image-wrap>.actl-image-frame>img {transform:scaleX(-1);}
/* Tablet uses available width; the navigation breakpoint remains 1100px. */
@media(min-width:768px) and (max-width:1100px) {
 .brand-story :is(.reference-grid,.post-grid,.steps) {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
  .brand-story :is(.reference-card,.post-card) h3 {font-size:24px;}
 .brand-story .brand-intro {grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;align-items:start;}
 .brand-intro .intro-copy {grid-column:2;grid-row:1;}
 .brand-intro .portrait {grid-column:1;grid-row:1;align-self:start;margin-block:0;}
 .brand-story .brand-intro h2 {font-size:32px;}
}
@media(min-width:960px) and (max-width:1100px) {
 .brand-story .service-card {grid-template-columns:repeat(2,minmax(0,1fr));}
 .brand-story .service-card--reverse .service-visual {grid-column:2;grid-row:1;}
 .brand-story .service-card--reverse .service-copy {grid-column:1;grid-row:1;}
 .brand-story .service-visual.kk-media-frame {height:100%;min-height:360px;aspect-ratio:auto;}
}

/* Homepage previews: desktop 3, tablet 2, phone 1; newest first. */
.brand-story :is(.reference-grid,.post-grid) {grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.brand-story :is(.reference-card,.post-card) {grid-column:auto;}
.brand-story :is(.reference-card,.post-card) :is(h2,h3) {font-size:clamp(22px,2vw,28px);text-wrap:pretty;}
.brand-story :is(.reference-card,.post-card) :is(.reference-meta,.entry-meta) {font:600 13px/1.5 var(--kk-font-body);letter-spacing:normal;text-transform:none;}
.brand-story :is(.reference-card,.post-card) :is(.reference-media,.post-card-image) {height:auto;min-height:0;aspect-ratio:16/10;}
@media(min-width:600px) and (max-width:1100px) {
 .brand-story :is(.reference-grid,.post-grid) {grid-template-columns:repeat(2,minmax(0,1fr));}
 .brand-story :is(.reference-grid,.post-grid)>:nth-child(n+3) {display:none;}
}
@media(max-width:599px) {
 .brand-story :is(.reference-grid,.post-grid) {grid-template-columns:minmax(0,1fr);}
 .brand-story :is(.reference-grid,.post-grid)>:nth-child(n+2) {display:none;}
}
/* Phone and tablet share a consistent reading edge and restrained line lengths. */
@media(max-width:1100px) {
 .brand-story :is(.references-head,.services-head,.journal-head) {gap:20px;}
 .brand-story :is(.value-layout,.process,.brand-intro) {text-align:left;}
 .brand-story :is(.section-intro,.value-layout>div>p,.process-intro>p,.intro-copy>p) {max-width:58ch;margin-inline:0;text-wrap:pretty;}
 .brand-story :is(.references-head,.services-head,.journal-head,.value-layout,.process-intro,.intro-copy) h2 {text-wrap:pretty;}
 .brand-hero__message {width:100%;max-width:44rem;margin-inline:auto;text-align:center;}
 .brand-hero__message .brand-hero__copy {margin-inline:auto;}
 .brand-story .brand-hero__title {text-wrap:nowrap;}
}