.subpage-hero{min-height:530px;position:relative;overflow:hidden;padding:95px clamp(30px,14vw,210px) 75px;display:flex;align-items:center;background:#1c1c18;color:#f1ead9}
.subpage-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#171714e8 0%,#171714b8 43%,#1717144a 100%),linear-gradient(0deg,#171714d9,transparent 55%),url("assets/okinawa-dojo.png") center 45%/cover no-repeat;opacity:.92}
.subpage-hero-copy{position:relative;z-index:1;max-width:620px}
.subpage-hero h1{font-size:clamp(60px,8vw,100px);line-height:.9;margin:0 0 22px}
.subpage-hero h1 em{font-size:.82em;color:#c2a66a}
.subpage-hero-copy>p:last-child{max-width:500px;color:#d4cbb8;font-family:var(--serif);font-size:22px;line-height:1.45}
.subpage-seal{position:absolute;z-index:1;right:clamp(8%,14vw,220px);top:50%;transform:translateY(-50%);width:clamp(155px,19vw,240px);height:clamp(155px,19vw,240px);border:1px solid #c3a96b;border-radius:50%;background:#fff;overflow:hidden;display:grid;place-items:center;box-shadow:0 12px 38px #0005}
.subpage-seal img{width:100%;height:100%;object-fit:contain;border-radius:50%;mix-blend-mode:multiply}
.subpage-seal.calligraphy-mark{background:transparent;border:0;border-radius:0;box-shadow:none;width:clamp(180px,21vw,270px);height:clamp(200px,23vw,300px)}
.subpage-seal.calligraphy-mark img{border-radius:0;mix-blend-mode:normal;-webkit-mask-image:radial-gradient(ellipse 88% 91% at 50% 50%,#000 67%,transparent 100%);mask-image:radial-gradient(ellipse 88% 91% at 50% 50%,#000 67%,transparent 100%)}
.subpage-baseline{position:absolute;z-index:1;bottom:23px;left:clamp(30px,7vw,110px);right:clamp(30px,7vw,110px);display:flex;justify-content:space-between;color:#c6b47f;font-size:8px;letter-spacing:.2em}
.contact-content{padding:95px clamp(30px,14vw,210px);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(45px,8vw,120px);align-items:center}
.contact-copy h2,.directory-heading h2{font:500 clamp(45px,6vw,72px)/1 var(--serif);margin:0 0 20px;color:#27271f}
.contact-copy>p:not(.eyebrow){max-width:570px;color:#554f42;font-size:13px;line-height:1.9}
.facebook-button{gap:10px;margin-top:20px}.facebook-button .social-icon{fill:#f1dfbb}.facebook-button span{margin-left:auto;color:#e1c57f}
.contact-card{position:relative;min-height:270px;background:#24241f;color:#e8dfca;padding:35px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border:1px solid #615641}
.contact-card:before{content:"";position:absolute;width:190px;height:190px;border:1px solid #b39a6266;border-radius:50%;top:-72px;right:-40px}
.contact-card small,.directory-note small{font-size:8px;letter-spacing:.22em;color:#c3a66a}
.contact-card h3{font:500 35px/1 var(--serif);margin:9px 0}
.contact-card p{font-size:11px;color:#bbb19d;line-height:1.8;margin:0 0 17px}
.contact-card>a{width:max-content;color:#cfb77b;font-size:10px;letter-spacing:.12em;border-bottom:1px solid #8e3028;padding-bottom:5px}
.dojo-directory{padding:96px clamp(30px,14vw,210px) 112px}
.directory-heading{max-width:680px;margin:0 auto 45px;text-align:center}
.directory-heading .eyebrow{justify-content:center}
.directory-heading>p:last-child{color:#655d4d;font-size:12px}
.directory-note{max-width:980px;margin:auto;display:grid;grid-template-columns:70px 1fr 145px;gap:25px;align-items:center;padding:32px;background:#24241f;color:#e8dfca;border:1px solid #665b43;position:relative;overflow:hidden}
.directory-index{font:500 52px var(--serif);color:#bd9f62;align-self:start}
.directory-note h3{font:500 34px/1.1 var(--serif);margin:7px 0 10px}
.directory-note p{max-width:630px;font-size:11px;color:#c2b9a7;line-height:1.8;margin-bottom:13px}
.directory-emblem{width:130px;height:130px;object-fit:contain;border-radius:50%;background:#fff;justify-self:center}
.dark-link{color:#e6ddc9;border-bottom-color:#a83d31}
.dark-link span{color:#c3a66a}
@media(max-width:850px){.subpage-hero{padding-left:8vw;padding-right:8vw}.subpage-seal{right:7%}.contact-content,.dojo-directory{padding-left:8vw;padding-right:8vw}.contact-content{gap:5vw}.directory-note{grid-template-columns:52px 1fr 110px;padding:25px}.directory-emblem{width:105px;height:105px}}
@media(max-width:620px){.subpage-hero{min-height:640px;align-items:flex-start;padding:82px 27px 95px}.subpage-hero:before{background:linear-gradient(90deg,#171714d9,#17171491),linear-gradient(0deg,#171714e8,transparent 75%),url("assets/okinawa-dojo.png") 35% center/cover no-repeat}.subpage-hero-copy{max-width:100%}.subpage-hero h1{font-size:61px}.subpage-hero-copy>p:last-child{font-size:19px;max-width:330px}.subpage-seal{width:122px;height:122px;right:28px;top:auto;bottom:75px;transform:none}.subpage-seal.calligraphy-mark{width:145px;height:160px;right:15px;bottom:61px}.subpage-baseline{left:25px;right:25px;bottom:20px;font-size:7px;letter-spacing:.13em}.subpage-baseline span:first-child{display:none}.contact-content{padding:68px 27px;display:flex;flex-direction:column;align-items:stretch;gap:35px}.contact-copy h2,.directory-heading h2{font-size:51px}.contact-card{min-height:230px;padding:27px}.dojo-directory{padding:70px 24px 80px}.directory-heading{margin-bottom:30px}.directory-heading .eyebrow{justify-content:center}.directory-note{grid-template-columns:40px 1fr;gap:14px;padding:23px 18px}.directory-index{font-size:36px}.directory-emblem{grid-column:2;justify-self:start;width:92px;height:92px;margin-top:7px}.directory-note h3{font-size:30px}.directory-note p{font-size:10px}}
