/* Brand Building detail page only. All page-specific rules are scoped. */
.page-brand-building{background:var(--paper) url("../images/brand-building/bb-paper-texture.png") center top/cover fixed;color:var(--ink)}
.page-brand-building .site-header nav .is-current:after{right:0}
.brand-page{overflow:hidden;background:transparent}
.brand-page h1,.brand-page h2,.brand-page h3,.brand-page p{overflow-wrap:anywhere}
.bb-mobile-only{display:none}
.bb-kicker{margin:0 0 12px;color:var(--red);font-size:10px;font-weight:900;letter-spacing:.24em}
.bb-section{padding:72px 3vw}
.bb-section-heading{max-width:1320px;margin:0 auto 34px;text-align:center}
.bb-section-heading h2{margin:0;font:800 clamp(35px,3.25vw,58px)/1.3 var(--jp-serif);letter-spacing:-.05em}
.bb-section-heading>p:last-child{max-width:730px;margin:20px auto 0;font-size:14px;font-weight:600;line-height:2}
.bb-button{width:max-content;min-width:205px;min-height:54px;padding:0 20px;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid currentColor;font-size:12px;font-weight:900;letter-spacing:.02em;transition:transform .2s,box-shadow .2s}
.bb-button:hover{transform:translateY(-3px);box-shadow:6px 7px 0 var(--ink)}
.bb-button-light{color:#fff;background:rgba(166,14,18,.3);border-color:rgba(255,255,255,.8)}
.bb-button-red{color:#fff;background:var(--red);border-color:var(--red)}
.bb-image-label{position:absolute;z-index:4;right:16px;bottom:14px;display:none;padding:6px 9px;color:#fff;background:rgba(7,26,43,.76);font-size:8px;font-weight:800;letter-spacing:.12em;text-align:right}
.images-pending .bb-image-label,.images-pending .bb-media small{display:block}

/* Hero */
.bb-hero{min-height:clamp(820px,55vw,1050px);padding:70px 4.8vw 80px;position:relative;display:flex;align-items:center;color:#fff;background-color:transparent;background-image:url("../images/brand-building/bb-hero-desktop.webp");background-size:cover;background-position:center;isolation:isolate}
.bb-hero:before{content:"";position:absolute;z-index:-1;inset:auto -4vw -85px 43%;height:170px;background:var(--paper);clip-path:polygon(0 47%,11% 24%,25% 35%,36% 8%,52% 30%,69% 4%,82% 31%,100% 18%,100% 100%,0 100%)}
.bb-hero-copy{width:min(760px,53%);position:relative;z-index:2}
.bb-number{margin:0 0 12px;font:800 clamp(66px,5.1vw,94px)/.82 var(--serif)}
.bb-service-title{margin:0;font:800 clamp(70px,7.2vw,132px)/.76 var(--serif);letter-spacing:-.065em}
.bb-service-title span{display:block}
.bb-eyebrow{margin:18px 0 28px;font:800 18px/1 var(--jp-serif);letter-spacing:.08em}
.bb-hero-message{margin:0;font:800 clamp(35px,3.25vw,58px)/1.35 var(--jp-serif);letter-spacing:-.055em}
.bb-english{margin:24px 0 17px;font:700 clamp(18px,1.55vw,27px)/1.1 var(--serif);letter-spacing:.12em}
.bb-lead{margin:0 0 30px;font-size:14px;font-weight:600;line-height:2}
.bb-handnote{position:absolute;z-index:2;right:38%;top:46%;margin:0;padding:22px 27px;color:var(--cobalt);background:rgba(255,250,240,.94);font:700 clamp(19px,1.8vw,30px)/1.05 "Segoe Print","Bradley Hand",cursive;font-style:italic;transform:rotate(-7deg);clip-path:polygon(4% 4%,97% 0,100% 91%,6% 100%,0 38%)}
.bb-origin-note{position:absolute;z-index:2;right:4.2%;bottom:10%;margin:0;color:var(--ink);font:700 clamp(16px,1.55vw,27px)/1.08 "Segoe Print","Bradley Hand",cursive;font-style:italic;transform:rotate(-6deg)}
.images-pending .bb-hero{background-image:linear-gradient(112deg,rgba(207,25,28,.98) 0 49%,rgba(207,25,28,.5) 64%,rgba(14,109,181,.62)),repeating-linear-gradient(125deg,#ef3f2f 0 20px,#d8292c 20px 40px)}

/* Challenge */
.bb-challenge{padding-top:112px;padding-bottom:62px;background:transparent;position:relative}
.bb-challenge:before,.bb-challenge:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;opacity:.1;background:repeating-conic-gradient(var(--ink) 0 4deg,transparent 4deg 12deg)}
.bb-challenge:before{left:-150px;top:65px}.bb-challenge:after{right:-150px;bottom:10px}
.bb-pain-grid{width:92vw;max-width:1680px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;z-index:1}
.bb-pain-grid article{min-height:250px;padding:30px 38px;background:rgba(255,253,248,.7);border:1px solid rgba(7,26,43,.13);box-shadow:0 16px 35px rgba(7,26,43,.06);text-align:center;backdrop-filter:blur(1px)}
.bb-pain-grid .bb-pain-icon{width:76px;height:76px;margin:0 auto 12px;display:block;border:0;border-radius:0;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain}
.bb-pain-message{background-image:url("../images/brand-building/bb-icon-message.png")}
.bb-pain-alignment{background-image:url("../images/brand-building/bb-icon-alignment.png")}
.bb-pain-consistency{background-image:url("../images/brand-building/bb-icon-consistency.png")}
.bb-pain-grid h3{margin:0 0 15px;font:800 19px/1.55 var(--jp-serif)}
.bb-pain-grid p{margin:0;font-size:12px;font-weight:600;line-height:1.9}

/* Value */
.bb-value{min-height:520px;padding:82px 9vw 92px;position:relative;color:#fff;background-color:transparent;background-image:url("../images/brand-building/bb-red-paper-texture.png");background-size:cover;background-position:center;clip-path:polygon(0 4%,13% 1%,26% 4%,42% 0,55% 3%,72% 1%,88% 4%,100% 1%,100% 97%,86% 100%,72% 97%,55% 100%,39% 97%,22% 100%,0 97%)}
.bb-value:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(180,9,20,.12),transparent 25% 75%,rgba(180,9,20,.1))}
.bb-value-head,.bb-value-grid{position:relative;z-index:2}
.bb-value-head{max-width:1100px;margin:0 auto 45px;text-align:center}
.bb-value .bb-kicker{color:#fff}
.bb-value h2{margin:0;font:800 clamp(34px,3.8vw,59px)/1.35 var(--jp-serif);letter-spacing:-.05em}
.bb-value-grid{max-width:1360px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr)}
.bb-value-grid article{padding:6px 40px 10px;border-right:1px solid rgba(255,255,255,.42)}
.bb-value-grid article:last-child{border-right:0}
.bb-value-grid b{font:800 54px/1 var(--serif)}
.bb-value-grid h3{margin:8px 0 17px;font:800 27px/1.2 var(--jp-serif)}
.bb-value-grid p{margin:0;font-size:12px;font-weight:600;line-height:1.9}
.bb-value-collage{position:absolute;z-index:1;display:block;background-repeat:no-repeat;background-size:contain;pointer-events:none}
.bb-value-collage-left{left:-35px;bottom:-20px;width:360px;height:470px;background-image:url("../images/brand-building/bb-value-flower-left.png");background-position:left bottom}
.bb-value-collage-right{right:-35px;bottom:-20px;width:330px;height:440px;background-image:url("../images/brand-building/bb-value-tropical-right.png");background-position:right bottom}
.bb-value-note{position:absolute;z-index:3;right:7.5%;top:34%;margin:0;color:#fff;font:700 clamp(18px,1.7vw,29px)/1.05 "Segoe Print","Bradley Hand",cursive;font-style:italic;transform:rotate(-8deg)}

/* Life philosophy */
.bb-philosophy{padding-top:78px;padding-bottom:72px}
.bb-life-grid{width:94vw;max-width:1740px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bb-life-grid article{min-height:430px;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;color:#fff;background-color:var(--cobalt);background-size:cover;background-position:center;isolation:isolate}
.bb-life-grid article:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,rgba(7,26,43,.82),rgba(7,26,43,.05) 68%)}
.bb-life-fashion{background-image:url("../images/brand-building/bb-life-fashion.webp")}
.bb-life-food{background-image:url("../images/brand-building/bb-life-food.webp")}
.bb-life-living{background-image:url("../images/brand-building/bb-life-living.webp")}
.bb-life-time{background-image:url("../images/brand-building/bb-life-time.webp")}
.images-pending .bb-life-fashion{background-image:linear-gradient(145deg,#db342e,#ff7655)}
.images-pending .bb-life-food{background-image:linear-gradient(145deg,#dc9b28,#77391e)}
.images-pending .bb-life-living{background-image:linear-gradient(145deg,#0697c5,#03487a)}
.images-pending .bb-life-time{background-image:linear-gradient(145deg,#ffc729,#ef5140)}
.bb-life-kanji{font:800 63px/.9 var(--jp-serif)}
.bb-life-grid h3{margin:8px 0 3px;font:700 19px var(--serif);letter-spacing:.08em}
.bb-life-grid p{margin:0;font-size:12px;font-weight:700}
.bb-media small{position:absolute;right:12px;top:12px;display:none;padding:5px 8px;background:rgba(7,26,43,.68);font-size:8px;letter-spacing:.12em}

/* Service contents */
.bb-services{padding-top:70px;padding-bottom:72px;background:rgba(246,238,220,.42)}
.bb-service-grid{width:94vw;max-width:1740px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(7,26,43,.15);border:1px solid rgba(7,26,43,.15)}
.bb-service-grid article{min-height:345px;padding:34px 34px;background:rgba(255,250,240,.62);position:relative;backdrop-filter:blur(1px)}
.bb-service-grid .bb-service-icon{width:70px;height:70px;display:block;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain;border:0;border-radius:0}
.bb-icon-bulb{background-image:url("../images/brand-building/bb-icon-concept.png")}
.bb-icon-strategy{background-image:url("../images/brand-building/bb-icon-strategy.png")}
.bb-icon-brush{background-image:url("../images/brand-building/bb-icon-visual.png")}
.bb-icon-book{background-image:url("../images/brand-building/bb-icon-guideline.png")}
.bb-service-grid h3{margin:25px 0 18px;font:800 19px/1.6 var(--jp-serif)}
.bb-service-grid p{margin:0;font-size:12px;font-weight:600;line-height:1.95}
.bb-service-grid article:after{content:"→";position:absolute;right:22px;bottom:17px;color:var(--red);font-size:20px;font-weight:900}

/* Process */
.bb-process{padding:72px 2vw 82px;background:transparent}
.bb-process-grid{width:96vw;display:grid;grid-template-columns:repeat(4,1fr);max-width:1800px;margin:auto}
.bb-step{min-width:0;color:var(--ink);background:#f2eadc}
.bb-step>div:first-child{min-height:155px;padding:26px 28px 20px}
.bb-step b{font:800 48px/.9 var(--serif)}
.bb-step h3{margin:7px 0 4px;font:800 clamp(22px,2.2vw,35px)/.95 var(--serif)}
.bb-step span{font-size:12px;font-weight:900}
.bb-process-image{height:230px;position:relative;background-size:cover;background-position:center;overflow:hidden}
.bb-step-1 .bb-process-image{background-image:url("../images/brand-building/bb-process-deep-dive.webp")}
.bb-step-2 .bb-process-image{background-image:url("../images/brand-building/bb-process-strategy.webp")}
.bb-step-3 .bb-process-image{background-image:url("../images/brand-building/bb-process-creative.webp")}
.bb-step-4 .bb-process-image{background-image:url("../images/brand-building/bb-process-launch.webp")}
.images-pending .bb-step-1 .bb-process-image{background-image:linear-gradient(135deg,#c9ad82,#fff8e9)}
.images-pending .bb-step-2 .bb-process-image{background-image:linear-gradient(135deg,#ff7b68,#ad1016)}
.images-pending .bb-step-3 .bb-process-image{background-image:linear-gradient(135deg,#12a7d4,#034fb4)}
.images-pending .bb-step-4 .bb-process-image{background-image:linear-gradient(135deg,#ffd52c,#f05d45)}
.bb-step>p{min-height:160px;margin:0;padding:24px 25px 30px;font-size:11px;font-weight:650;line-height:1.9}
.bb-step-2{color:#fff;background:var(--red)}
.bb-step-3{color:#fff;background:var(--blue)}
.bb-step-4{background:var(--yellow)}

/* CTA */
.bb-contact{min-height:430px;padding:62px 4vw;display:flex;align-items:center;position:relative;background-color:var(--paper);background-image:linear-gradient(90deg,rgba(255,250,240,.99) 0%,rgba(255,250,240,.94) 48%,rgba(255,250,240,.16) 70%),url("../images/brand-building/bb-cta-okinawa-coast.webp");background-size:cover;background-position:center;isolation:isolate}
.bb-contact:before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-22px;height:45px;background:var(--paper);clip-path:polygon(0 40%,12% 8%,28% 45%,41% 0,58% 37%,73% 7%,86% 42%,100% 3%,100% 100%,0 100%)}
.bb-contact-copy{width:min(720px,60%);position:relative;z-index:2}
.bb-contact h2{margin:0 0 20px;font:800 clamp(33px,3.8vw,58px)/1.4 var(--jp-serif);letter-spacing:-.05em}
.bb-contact-copy>p:not(.bb-kicker){margin:0 0 28px;font-size:13px;font-weight:600;line-height:2}
.bb-contact-note{position:absolute;left:48%;top:24%;margin:0;padding:14px 18px;color:var(--cobalt);background:rgba(255,250,240,.84);font:700 clamp(23px,2.25vw,38px)/1.08 "Segoe Print","Bradley Hand",cursive;font-style:italic;transform:rotate(-8deg)}
.page-brand-building footer{min-height:154px;padding:30px 3.5vw 16px}
.images-pending .bb-contact{background-image:linear-gradient(110deg,rgba(255,250,240,.98) 0 57%,rgba(8,126,216,.72)),linear-gradient(150deg,#fff8e9,#0e9fd1)}

@media(max-width:980px){
  .bb-hero{min-height:760px}.bb-hero-copy{width:62%}.bb-handnote{right:3%;top:48%}.bb-origin-note{display:none}
  .bb-life-grid,.bb-service-grid{grid-template-columns:repeat(2,1fr)}
  .bb-process-grid{grid-template-columns:repeat(2,1fr)}
  .bb-contact-copy{width:70%}.bb-contact-note{right:3%}
}

@media(max-width:700px){
  .bb-mobile-only{display:block}.bb-section{padding:65px 20px}.bb-kicker{font-size:9px}
  .bb-section-heading{margin-bottom:30px;text-align:left}.bb-section-heading h2{font-size:34px}.bb-section-heading>p:last-child{font-size:12px;line-height:1.9}
  .bb-hero{min-height:1020px;padding:36px 20px 390px;align-items:flex-start;background-color:transparent;background-image:url("../images/brand-building/bb-hero-mobile.webp");background-position:center;background-size:cover}
  .images-pending .bb-hero{background-image:linear-gradient(180deg,rgba(210,28,31,.98) 0 57%,rgba(8,126,216,.48)),repeating-linear-gradient(125deg,#ef3f2f 0 18px,#d8292c 18px 36px)}
  .bb-hero:before{left:-10%;right:-10%;bottom:-45px;height:110px}
  .bb-hero-copy{width:100%}.bb-number{font-size:48px}.bb-service-title{font-size:clamp(59px,18vw,82px)}.bb-eyebrow{margin:14px 0 22px;font-size:14px}.bb-hero-message{font-size:clamp(26px,7vw,31px)}.bb-english{font-size:15px}.bb-lead{font-size:12px}.bb-lead br{display:none}.bb-button{min-width:190px}
  .bb-handnote{right:14px;top:auto;bottom:206px;font-size:18px;padding:16px 18px}.bb-origin-note{display:none}
  .bb-challenge{padding-top:95px}.bb-pain-grid{grid-template-columns:1fr;gap:14px}.bb-pain-grid article{min-height:0;padding:26px 22px}.bb-pain-grid span{width:52px;height:52px}
  .bb-value{min-height:0;padding:68px 28px 76px;clip-path:polygon(0 1%,24% 0,48% 2%,73% 0,100% 2%,100% 99%,74% 98%,48% 100%,23% 98%,0 100%)}.bb-value-head{text-align:left}.bb-value h2{font-size:34px}.bb-value-grid{grid-template-columns:1fr}.bb-value-grid article{padding:24px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.4)}.bb-value-grid article:last-child{border-bottom:0}.bb-value-grid b{font-size:43px}.bb-value-collage,.bb-value-note{display:none}
  .bb-life-grid,.bb-service-grid,.bb-process-grid{grid-template-columns:1fr}.bb-life-grid article{min-height:430px}.bb-service-grid article{min-height:275px}
  .bb-process{padding:65px 12px 80px}.bb-process .bb-section-heading{padding-inline:8px}.bb-step>div:first-child{min-height:125px}.bb-process-image{height:225px}.bb-step>p{min-height:0}
  .bb-contact{min-height:660px;padding:58px 20px 290px;align-items:flex-start;background-image:linear-gradient(180deg,rgba(255,250,240,.99) 0%,rgba(255,250,240,.96) 57%,rgba(255,250,240,.08) 78%),url("../images/brand-building/bb-cta-okinawa-coast.webp");background-position:center bottom}
  .images-pending .bb-contact{background-image:linear-gradient(180deg,rgba(255,250,240,.99) 0 64%,rgba(8,126,216,.38)),linear-gradient(150deg,#fff8e9,#0e9fd1)}
  .bb-contact-copy{width:100%}.bb-contact h2{font-size:34px}.bb-contact-copy>p:not(.bb-kicker){font-size:12px}.bb-contact-note{left:auto;right:18px;top:auto;bottom:110px;padding:10px 12px;font-size:22px}
  .page-brand-building footer{min-height:190px;padding:36px 20px 18px}
}

@media(prefers-reduced-motion:reduce){.bb-button{transition:none}}