.om-site { --ink:#101214; --paper:#f1efe9; --cyan:#31d6e7; --line:rgba(16,18,20,.16); }
.om-site,.om-site * { box-sizing:border-box; }
html { scroll-behavior:smooth; }
.om-site { margin:0; background:var(--paper); color:var(--ink); font-family:"Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif; font-weight:400; }
.om-site a { color:inherit; text-decoration:none; }
.site-header { height:78px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; background:var(--paper); position:relative; z-index:20; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; font-family:"Avenir Next", Arial, sans-serif; font-weight:700; letter-spacing:.12em; font-size:13px; }
.brand-mark { width:34px; aspect-ratio:1; display:grid; place-items:center; background:var(--ink); color:var(--cyan); border-radius:50%; font-size:17px; font-family:Georgia,serif; }
.site-header nav { display:flex; align-items:center; gap:30px; font-family:"Avenir Next", Arial, sans-serif; font-size:11px; font-weight:700; letter-spacing:.12em; }
.nav-contact { display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--ink); padding:6px 0; }
.hero { min-height:calc(100vh - 78px); position:relative; overflow:hidden; color:white; background:#dfe5e4; }
.hero-slides,.hero-image { position:absolute; inset:0; }
.hero-image { background:center/cover no-repeat; opacity:0; transform:scale(1.025); transition:opacity 1s ease,transform 5s linear; z-index:0; }
.hero-image.is-active { opacity:1; transform:scale(1); z-index:1; }
.hero-video { width:100%; height:100%; object-fit:cover; border:0; }
.hero-image-aerial { background-image:url('hero-aerial-hakogi-poster.jpg'); }
.hero-image-shoot { background-image:url('hero-shoot-poster.jpg'); }
.hero-image-social { background-image:url('office-mine-instagram.png'); }
.hero-shade { display:none; }
.hero-copy { position:absolute; left:7vw; right:5vw; top:50%; transform:translateY(-53%); max-width:1200px; z-index:2; }
.eyebrow,.section-kicker { font-family:"Avenir Next", Arial, sans-serif; font-size:11px; letter-spacing:.2em; font-weight:700; display:flex; align-items:center; gap:9px; }
.eyebrow { color:var(--cyan); margin:0 0 24px; text-shadow:0 2px 7px rgba(0,0,0,.9); }
.hero h1 { font-size:clamp(48px,6.5vw,104px); line-height:1.05; letter-spacing:-.035em; margin:0; font-weight:500; text-shadow:0 2px 8px rgba(0,0,0,.72),0 12px 32px rgba(0,0,0,.28); }
.hero-title-line { display:block; white-space:nowrap; }
.hero h1 em { color:var(--cyan); font-style:normal; -webkit-text-stroke:1px rgba(255,255,255,.15); }
.hero-lead { font-size:clamp(14px,1.35vw,20px); line-height:1.9; margin:34px 0 0; color:white; text-shadow:0 2px 7px rgba(0,0,0,.9); }
.circle-link { position:absolute; left:calc(100% + 60px); bottom:8px; width:72px; aspect-ratio:1; border-radius:50%; background:var(--cyan); color:var(--ink); display:grid; place-items:center; transition:.25s; }
.circle-link:hover { transform:rotate(-8deg) scale(1.06); }
.hero-services { position:absolute; right:4vw; top:35px; z-index:3; width:250px; text-align:right; }
.hero-service { position:absolute; right:0; top:0; font-family:"Avenir Next", "Hiragino Sans", sans-serif; font-size:11px; letter-spacing:.16em; font-weight:600; opacity:0; animation:serviceLabel 15s infinite; white-space:nowrap; text-shadow:0 2px 6px rgba(0,0,0,.8); }
.hero-service b { color:var(--cyan); margin-right:10px; font-size:9px; }
.hero-service-2 { animation-delay:5s; }
.hero-service-3 { animation-delay:10s; }
@keyframes serviceLabel { 0% { opacity:0; transform:translateY(8px); } 5%,29% { opacity:1; transform:none; } 33.333%,100% { opacity:0; transform:translateY(-8px); } }
.slide-progress { position:absolute; right:4vw; top:72px; z-index:3; display:flex; gap:5px; }
.slide-progress i { display:block; width:54px; height:2px; background:rgba(255,255,255,.28); overflow:hidden; position:relative; }
.slide-progress i:after { content:""; position:absolute; inset:0; background:var(--cyan); transform:scaleX(0); transform-origin:left; animation:progressBar 15s infinite; }
.slide-progress i:nth-child(2):after { animation-delay:5s; }
.slide-progress i:nth-child(3):after { animation-delay:10s; }
@keyframes progressBar { 0%,33.333%,100% { transform:scaleX(0); } 2% { transform:scaleX(0); } 30% { transform:scaleX(1); } }
.hero-index { position:absolute; left:4vw; right:4vw; bottom:25px; display:flex; justify-content:space-between; z-index:2; font-size:9px; letter-spacing:.22em; color:white; text-shadow:0 2px 6px rgba(0,0,0,.85); }
.section-pad { padding:120px 7vw; }
.section-kicker { margin:0 0 35px; }
.intro { display:grid; grid-template-columns:1fr 2fr; border-bottom:1px solid var(--line); }
.intro>div { display:grid; grid-template-columns:minmax(390px,1.55fr) 1fr; gap:5vw; align-items:end; }
.intro h2,.section-head h2,.about h2,.contact h2 { margin:0; font-size:clamp(44px,6.2vw,92px); line-height:.95; letter-spacing:-.06em; }
.intro h2 span { color:#777; }
.intro-title span { display:block; white-space:nowrap; }
.intro-title span:first-child,.intro-title span:nth-child(2) { color:var(--ink); }
.intro p:not(.section-kicker),.about-copy>p:not(.section-kicker) { line-height:2; font-size:14px; max-width:520px; }
.works-section { background:#e7e5df; color:var(--ink); padding-bottom:95px; }
.works-section .section-head { display:grid; grid-template-columns:1fr 1.5fr 1fr; align-items:end; padding-bottom:60px; }
.section-head h2 { font-size:clamp(50px,6vw,82px); }
.sample-note { font-size:10px; color:#6d7274; line-height:1.7; justify-self:end; }
.works-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0 4vw; }
.work-card { position:relative; overflow:hidden; border:1px solid rgba(16,18,20,.13); border-radius:4px; background-image:url('office-mine-hero.png'); background-position:var(--image-pos); background-size:cover; padding:24px; min-height:410px; color:white; }
.work-2 { filter:saturate(.72) contrast(1.02) brightness(1.08); }
.work-3 { filter:hue-rotate(145deg) saturate(.65) brightness(1.12); }
.work-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,18,21,.7),rgba(8,18,21,0) 65%); transition:.35s; }
.work-card:hover .work-overlay { background:linear-gradient(0deg,rgba(8,18,21,.76),rgba(8,18,21,.03) 70%); }
.work-card:hover { background-size:106%; }
.work-top,.work-body { position:relative; z-index:2; }
.work-top { display:flex; justify-content:space-between; font-family:"Avenir Next", Arial, sans-serif; font-size:9px; letter-spacing:.18em; }
.work-body { position:absolute; left:24px; right:24px; bottom:27px; }
.work-body h3 { font-size:clamp(22px,2.15vw,33px); line-height:1.2; letter-spacing:-.025em; margin:14px 0 0; font-weight:400; }
.work-body h3 span { display:block; }
.work-arrow { position:absolute; right:0; bottom:3px; }
.services { background:var(--paper); }
.services>.section-head { display:grid; grid-template-columns:1fr 2fr; margin-bottom:70px; }
.services-intro { margin:28px 0 0; font-size:14px; line-height:1.9; color:#5d6264; }
.services-intro span { display:inline-block; margin-top:10px; color:#0a8f9d; font-size:11px; font-weight:600; }
.unity-visual { height:920px; max-width:1240px; margin:0 auto 25px; position:relative; overflow:hidden; border:1px solid var(--line); background:radial-gradient(circle at center,rgba(49,214,231,.15),transparent 34%),#ebe9e3; }
.unity-ring { position:absolute; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.unity-ring-outer { width:650px; height:650px; border:2px solid rgba(49,214,231,.38); }
.unity-ring-inner { width:470px; height:470px; border:1px dashed rgba(16,18,20,.28); }
.unity-core { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); width:350px; height:350px; border-radius:50%; background:var(--ink); color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:0 0 0 25px rgba(49,214,231,.3),0 20px 70px rgba(16,18,20,.2); }
.unity-core svg { color:var(--cyan); margin-bottom:13px; }
.unity-core span { font-size:13px; letter-spacing:.08em; }
.unity-core strong { font-size:36px; line-height:1.3; font-weight:500; margin:13px 0 17px; }
.unity-core small { font:8px "Avenir Next",Arial,sans-serif; letter-spacing:.18em; color:#aab4b6; }
.unity-ray { position:absolute; z-index:2; left:50%; top:50%; width:305px; height:3px; background:linear-gradient(90deg,var(--cyan),rgba(49,214,231,.4)); transform-origin:left center; }
.unity-ray:after { content:""; position:absolute; right:0; top:50%; width:13px; height:13px; border-radius:50%; background:var(--cyan); transform:translateY(-50%); box-shadow:0 0 0 6px rgba(49,214,231,.22); animation:powerIn 2.8s ease-in-out infinite; }
.ray-2:after { animation-delay:-.45s; }.ray-3:after { animation-delay:-.9s; }.ray-4:after { animation-delay:-1.35s; }.ray-5:after { animation-delay:-1.8s; }.ray-6:after { animation-delay:-2.25s; }
@keyframes powerIn { 0% { right:0; opacity:0; } 18% { opacity:1; } 82% { opacity:1; } 100% { right:100%; opacity:0; } }
.ray-1 { transform:rotate(-150deg); }.ray-2 { transform:rotate(-90deg); }.ray-3 { transform:rotate(-30deg); }.ray-4 { transform:rotate(30deg); }.ray-5 { transform:rotate(90deg); }.ray-6 { transform:rotate(150deg); }
.unity-skill { position:absolute; z-index:4; display:grid; grid-template-columns:48px 1fr; column-gap:14px; align-items:start; width:290px; min-height:190px; padding:20px 19px 50px; background:rgba(250,249,245,.97); border:1px solid rgba(16,18,20,.25); border-top:4px solid var(--card-accent,var(--cyan)); box-shadow:0 14px 34px rgba(16,18,20,.1); overflow:hidden; }
.unity-skill:after { content:""; position:absolute; right:-36px; bottom:-40px; width:110px; height:110px; border-radius:50%; background:var(--card-accent,var(--cyan)); opacity:.09; }
.unity-skill { transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; cursor:pointer; }
.unity-skill:hover,.unity-skill:focus-visible { transform:translateY(-8px); box-shadow:0 24px 48px rgba(16,18,20,.18); border-color:var(--card-accent,var(--cyan)); outline:none; }
.unity-skill-2:hover,.unity-skill-2:focus-visible,.unity-skill-5:hover,.unity-skill-5:focus-visible { transform:translateX(-50%) translateY(-8px); }
.unity-skill:hover .unity-icon,.unity-skill:focus-visible .unity-icon { background:var(--card-accent,var(--cyan)); color:white; transform:rotate(-6deg) scale(1.06); }
.unity-no { position:absolute; right:14px; top:11px; font:700 30px "Avenir Next",Arial,sans-serif; color:var(--card-accent,var(--cyan)); opacity:.17; }
.unity-icon { width:48px; height:48px; border-radius:50%; background:white; display:grid; place-items:center; color:var(--card-accent,#078e9e); flex:0 0 auto; box-shadow:0 0 0 1px rgba(16,18,20,.08); transition:.28s ease; }
.unity-copy { min-width:0; }
.unity-skill b,.unity-skill small { display:block; }
.unity-skill b { font:650 13px "Avenir Next",Arial,sans-serif; letter-spacing:.1em; }
.unity-skill small { font-size:10px; color:#666c6e; margin-top:4px; }
.unity-skill em { display:block; color:var(--card-accent,#087f8d); font-size:13px; font-style:normal; font-weight:600; margin-top:7px; }
.unity-skill p { margin:12px 0 0; grid-column:1/-1; font-size:9.5px; line-height:1.65; color:#5f6567; }
.unity-detail { position:absolute; left:19px; right:19px; bottom:0; height:40px; border-top:1px solid rgba(16,18,20,.14); display:flex; align-items:center; justify-content:space-between; color:var(--card-accent,#087f8d); font:700 9px "Avenir Next",Arial,sans-serif; letter-spacing:.08em; transition:.25s ease; }
.unity-detail svg { width:15px; height:15px; transition:transform .25s ease; }
.unity-skill:hover .unity-detail,.unity-skill:focus-visible .unity-detail { left:0; right:0; padding:0 19px; background:var(--card-accent,var(--cyan)); color:white; border-color:transparent; }
.unity-skill:hover .unity-detail svg,.unity-skill:focus-visible .unity-detail svg { transform:translate(3px,-3px); }
.unity-skill-1 { --card-accent:#0aa9b9; left:3.5%; top:17%; }.unity-skill-2 { --card-accent:#e8a13a; left:50%; top:2.5%; transform:translateX(-50%); }.unity-skill-3 { --card-accent:#df755f; right:3.5%; top:17%; }.unity-skill-4 { --card-accent:#7d62b5; right:3.5%; bottom:17%; }.unity-skill-5 { --card-accent:#4e8ac7; left:50%; bottom:2.5%; transform:translateX(-50%); }.unity-skill-6 { --card-accent:#3c9c77; left:3.5%; bottom:17%; }
.unity-outcomes { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.2); border:1px solid var(--ink); }
.unity-outcomes>div,.unity-outcomes>a { background:var(--ink); color:white; min-height:115px; padding:23px 25px; position:relative; }
.unity-outcomes>a { transition:background .25s,color .25s; }
.unity-outcomes>a:hover,.unity-outcomes>a:focus-visible { background:var(--cyan); color:var(--ink); outline:none; }
.unity-outcomes>a span { position:absolute; right:22px; bottom:18px; font:700 8px "Avenir Next",Arial,sans-serif; letter-spacing:.15em; opacity:0; transform:translateY(5px); transition:.25s; }
.unity-outcomes>a:hover span,.unity-outcomes>a:focus-visible span { opacity:1; transform:none; }
.unity-outcomes svg { position:absolute; right:20px; top:20px; color:var(--cyan); }
.unity-outcomes>a:hover svg,.unity-outcomes>a:focus-visible svg { color:var(--ink); }
.unity-outcomes small,.unity-outcomes strong { display:block; }.unity-outcomes small { color:#9ba6a8; font-size:10px; }.unity-outcomes strong { font-size:21px; font-weight:500; margin-top:10px; }
.unity-outcomes>a:hover small,.unity-outcomes>a:focus-visible small { color:rgba(16,18,20,.6); }
.about { display:grid; grid-template-columns:1fr 1fr; min-height:760px; background:#d8d5cc; padding-top:0; padding-bottom:0; }
.about-art { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-size:24vw; letter-spacing:-.18em; line-height:1; }
.about-art span:first-child { -webkit-text-stroke:1px var(--ink); color:transparent; }
.about-art span:nth-child(2) { color:var(--cyan); mix-blend-mode:multiply; }
.orbit { position:absolute; width:120px; aspect-ratio:1; border-radius:50%; background:var(--ink); color:white; display:grid; place-items:center; right:18%; top:28%; box-shadow:0 0 0 30px rgba(49,214,231,.3); }
.about-copy { padding:120px 5vw; display:flex; flex-direction:column; justify-content:center; border-left:1px solid var(--line); }
.about-copy h2 { font-size:clamp(38px,3.7vw,58px); margin-bottom:40px; line-height:1.2; letter-spacing:-.035em; }
.about-title span { display:block; white-space:nowrap; }
.about-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.about-tags span { border:1px solid var(--ink); border-radius:40px; padding:8px 15px; font-size:11px; }
.flow { background:#f1efe9; overflow:hidden; }
.flow-head { display:grid; grid-template-columns:1fr 2fr; align-items:start; margin-bottom:100px; }
.flow-head h2 { margin:0; font-size:clamp(48px,6vw,88px); line-height:1.08; letter-spacing:-.045em; font-weight:500; }
.flow-head>div>p { margin:30px 0 0; color:#62686a; font-size:13px; line-height:1.9; }
.flow-path { display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.flow-line { position:absolute; left:7%; right:7%; top:51px; height:1px; background:linear-gradient(90deg,#9ca4a5,var(--cyan)); }
.flow-step { position:relative; z-index:2; padding:0 22px; min-height:360px; border-right:1px solid var(--line); }
.flow-step:last-child { border-right:0; }
.flow-node { width:102px; height:102px; border-radius:50%; background:var(--paper); border:1px solid #8e9698; display:grid; place-items:center; margin-bottom:32px; transition:.25s; }
.flow-node svg { width:25px; color:#596163; stroke-width:1.4; }
.step-2 .flow-node { width:112px; height:112px; margin-top:-5px; }
.step-3 .flow-node { width:124px; height:124px; margin-top:-11px; background:#dcf5f5; border-color:#79cbd2; }
.step-4 .flow-node { width:136px; height:136px; margin-top:-17px; background:#92e4ea; border-color:#4dbcc6; }
.step-5 .flow-node { width:150px; height:150px; margin-top:-24px; background:var(--cyan); border-color:#08aabb; box-shadow:0 0 0 12px rgba(49,214,231,.17); }
.flow-step:hover .flow-node { transform:translateY(-6px); }
.flow-step small { font:9px "Avenir Next",Arial,sans-serif; letter-spacing:.17em; color:#7a8183; }
.flow-step h3 { font-size:22px; font-weight:500; margin:13px 0 18px; }
.flow-step p { font-size:11px; line-height:1.85; color:#646a6c; max-width:210px; }
.flow-note { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:35px; font-size:11px; letter-spacing:.1em; }
.flow-note i { width:90px; height:1px; background:#858d8f; position:relative; }
.flow-note i:after { content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid #858d8f; border-right:1px solid #858d8f; transform:rotate(45deg); }
.flow-note strong { color:#078e9e; font-weight:600; }
.contact { background:var(--cyan); position:relative; overflow:hidden; }
.contact:after { content:"M"; position:absolute; right:-3vw; bottom:-15vw; font:40vw/.8 Georgia,serif; color:rgba(255,255,255,.22); }
.contact h2 { font-size:clamp(64px,10vw,150px); position:relative; z-index:1; }
.contact>p:not(.section-kicker) { line-height:1.8; margin:35px 0; position:relative; z-index:1; }
.contact-link { display:flex; width:max-content; gap:15px; align-items:center; background:var(--ink); color:white; padding:22px 28px; font-size:12px; letter-spacing:.12em; position:relative; z-index:1; }
.contact-details { position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:25px; max-width:880px; margin:65px 0 0; padding-top:28px; border-top:1px solid rgba(16,18,20,.45); }
.contact-details div { margin:0; }
.contact-details dt { font:700 9px "Avenir Next",Arial,sans-serif; letter-spacing:.18em; margin-bottom:12px; }
.contact-details dd { margin:0; font-size:13px; line-height:1.8; }
.contact-details dd a { border-bottom:1px solid var(--ink); }
.om-site footer { background:var(--ink); color:white; padding:40px 4vw; display:flex; justify-content:space-between; align-items:center; font-size:9px; letter-spacing:.13em; }
.service-page { --service-accent:var(--cyan); background:var(--paper); }
.service-header { height:76px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font:700 10px "Avenir Next",Arial,sans-serif; letter-spacing:.14em; }
.service-header a { display:flex; align-items:center; gap:9px; }
.service-minihero { min-height:390px; padding:70px 7vw 58px; display:grid; grid-template-columns:1.6fr .4fr; align-items:end; border-bottom:1px solid var(--line); overflow:hidden; }
.service-minihero h1 { margin:0; font:600 clamp(74px,11vw,160px)/.78 "Avenir Next",Arial,sans-serif; letter-spacing:-.07em; color:var(--service-accent); }
.service-minihero h2 { margin:32px 0 0; font-size:clamp(28px,4vw,54px); font-weight:500; }
.service-symbol { position:relative; height:230px; color:var(--service-accent); display:grid; place-items:center; }
.service-symbol span { position:absolute; font:700 190px/.8 "Avenir Next",Arial,sans-serif; opacity:.08; }
.service-symbol svg { width:105px; height:105px; }
.service-image { height:340px; margin:0; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.service-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s ease; }
.service-image:hover img { transform:scale(1.025); }
.service-image figcaption { position:absolute; left:5vw; bottom:28px; display:flex; align-items:center; gap:12px; padding:11px 15px; background:rgba(16,18,20,.88); color:white; font-size:12px; }
.service-image figcaption span { color:var(--service-accent); font:700 10px "Avenir Next",Arial,sans-serif; }
.service-switcher { padding:46px 5vw; border-bottom:1px solid var(--line); }
.service-switcher>p { margin:0 0 20px; font:700 9px "Avenir Next",Arial,sans-serif; letter-spacing:.2em; }
.service-switcher>div { display:grid; grid-template-columns:repeat(6,1fr); }
.service-switcher a { position:relative; min-height:125px; padding:17px 14px; border:1px solid var(--line); border-right:0; display:grid; grid-template-columns:30px 1fr; align-content:start; gap:6px 8px; transition:.25s ease; }
.service-switcher a:last-child { border-right:1px solid var(--line); }
.service-switcher a:before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--item-accent); transform:scaleX(0); transform-origin:left; transition:.25s; }
.service-switcher a:hover,.service-switcher a.is-active { background:white; transform:translateY(-5px); box-shadow:0 12px 28px rgba(16,18,20,.1); }
.service-switcher a:hover:before,.service-switcher a.is-active:before { transform:scaleX(1); }
.service-switcher a.is-active { color:var(--item-accent); }
.service-switcher a>span { font:700 9px "Avenir Next",Arial,sans-serif; color:#82898b; }
.service-switcher a svg { color:var(--item-accent); }
.service-switcher a b { grid-column:1/-1; font:650 12px "Avenir Next",Arial,sans-serif; letter-spacing:.08em; margin-top:5px; }
.service-switcher a small { grid-column:1/-1; font-size:9px; color:#6d7375; }
.service-overview { padding:110px 7vw; display:grid; grid-template-columns:1fr 1fr; gap:8vw; }
.service-overview h2 { margin:0; max-width:650px; font-size:clamp(42px,6vw,82px); line-height:1.12; font-weight:500; letter-spacing:-.045em; }
.service-overview>div:last-child { padding-top:45px; }
.service-overview>div:last-child p { color:#646a6c; font-size:13px; line-height:2; max-width:600px; }
.service-overview .service-lead { color:var(--ink)!important; font-size:20px!important; line-height:1.8!important; }
.service-offerings { padding:100px 7vw; background:#e4e1da; }
.service-offerings-head { display:grid; grid-template-columns:1fr 2fr; margin-bottom:55px; }
.service-offerings h2 { margin:0; font-size:clamp(44px,6vw,76px); font-weight:500; }
.offering-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); }
.offering-grid article { min-height:230px; padding:25px 24px 30px 0; margin-right:24px; border-bottom:1px solid var(--line); }
.offering-grid span { font:700 10px "Avenir Next",Arial,sans-serif; color:var(--service-accent); }
.offering-grid h3 { margin:45px 0 18px; font-size:20px; font-weight:500; }
.offering-grid p { color:#686e70; font-size:10px; line-height:1.8; }
.works-placeholder { margin-top:65px; height:190px; border:1px dashed #8b9294; display:flex; align-items:center; justify-content:center; gap:12px; color:#6e7577; font:700 10px "Avenir Next",Arial,sans-serif; letter-spacing:.12em; }
.service-cta { padding:110px 7vw; background:var(--service-accent); }
.service-cta h2 { margin:0 0 42px; font-size:clamp(50px,7vw,100px); line-height:1.08; font-weight:500; letter-spacing:-.05em; }
.service-cta>a { width:max-content; display:flex; align-items:center; gap:14px; padding:18px 22px; background:var(--ink); color:white; }

/* Editorial thinking pages */
.idea-page { background:#f4f1e9; min-height:100vh; }
.idea-header { height:76px; padding:0 5vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--ink); font:700 9px "Avenir Next",Arial,sans-serif; letter-spacing:.17em; }
.idea-header a { display:flex; align-items:center; gap:8px; width:max-content; }
.idea-header a:last-child { justify-self:end; }
.idea-masthead { padding:76px 7vw 70px; display:grid; grid-template-columns:1fr 2.4fr; column-gap:5vw; }
.idea-kicker { margin:12px 0 0; font-size:18px; }
.idea-masthead h1 { margin:0; font-size:clamp(64px,8.4vw,124px); line-height:.88; letter-spacing:-.065em; font-weight:500; }
.idea-deck { grid-column:2; margin:50px 0 0; max-width:820px; font-size:clamp(17px,1.7vw,25px); line-height:1.85; }
.idea-rule { margin:0 7vw; padding:12px 0 0; border-top:1px solid rgba(16,18,20,.55); display:flex; justify-content:space-between; font:700 8px "Avenir Next",Arial,sans-serif; letter-spacing:.18em; }
.idea-lead-grid { padding:75px 7vw 95px; display:grid; grid-template-columns:1.2fr 1fr .75fr; gap:5vw; }
.idea-lead-grid p { margin:0; font-size:14px; line-height:2.05; }
.idea-dropcap { grid-column:1/3; columns:2; column-gap:4.5vw; column-rule:1px solid var(--line); }
.idea-dropcap:first-letter { float:left; font-size:92px; line-height:.72; padding:12px 12px 0 0; color:#08aabb; }
.idea-lead-grid aside { border-left:1px solid var(--ink); padding-left:30px; display:flex; flex-direction:column; align-items:flex-start; }
.idea-lead-grid aside svg { color:#08aabb; width:30px; height:30px; }
.idea-lead-grid aside span { margin:23px 0 28px; font:700 8px "Avenir Next",Arial,sans-serif; letter-spacing:.18em; }
.idea-lead-grid aside strong { font-size:23px; line-height:1.65; font-weight:500; }
.idea-record { margin:0; overflow:hidden; position:relative; background:#d8d5cc; }
.idea-record img { width:100%; height:100%; display:block; object-fit:cover; }
.idea-record figcaption { position:absolute; left:0; bottom:0; max-width:530px; padding:15px 20px; background:rgba(16,18,20,.9); color:white; font-size:10px; line-height:1.7; }
.idea-record figcaption span { display:block; margin-bottom:5px; color:#31d6e7; font:700 8px "Avenir Next",Arial,sans-serif; letter-spacing:.18em; }
.idea-record-wide { height:min(54vw,680px); margin:0 7vw; }
.idea-record-wide img { object-position:center 55%; }
.idea-record-pair { margin:0 7vw; display:grid; grid-template-columns:1.25fr .75fr; gap:16px; height:430px; }
.idea-columns { margin:0 7vw; padding:75px 0; display:grid; grid-template-columns:.35fr 1.05fr 1fr; gap:5vw; }
.idea-section-no { font:600 50px "Avenir Next",Arial,sans-serif; color:#08aabb; }
.idea-heading p,.idea-skills-intro>p { margin:0 0 24px; font:700 9px "Avenir Next",Arial,sans-serif; letter-spacing:.2em; color:#667073; }
.idea-heading h2,.idea-skills h2 { margin:0; font-size:clamp(31px,3.2vw,48px); line-height:1.4; font-weight:500; letter-spacing:-.035em; }
.idea-body { columns:2; column-gap:32px; column-rule:1px solid var(--line); }
.idea-body p { break-inside:avoid; margin:0 0 20px; font-size:12px; line-height:2; }
.idea-pullquote { margin:0; padding:95px 7vw; background:#101214; color:white; display:grid; grid-template-columns:1fr 2fr; }
.idea-pullquote small { font:700 9px "Avenir Next",Arial,sans-serif; letter-spacing:.18em; color:#31d6e7; }
.idea-pullquote blockquote { margin:0; font-size:clamp(42px,5.5vw,80px); line-height:1.35; letter-spacing:-.045em; }
.idea-skills { padding:95px 7vw; display:grid; grid-template-columns:1fr 1.5fr; gap:6vw; }
.idea-skills-intro>span { display:block; margin-top:35px; max-width:470px; color:#666d6f; font-size:12px; line-height:1.9; }
.idea-skill-list { border-top:1px solid var(--ink); }
.idea-skill-list a { min-height:96px; display:grid; grid-template-columns:35px 35px 1fr 1.3fr 25px; gap:15px; align-items:center; border-bottom:1px solid var(--ink); transition:.25s; }
.idea-skill-list a:hover { padding-left:14px; background:#31d6e7; }
.idea-skill-list a>span,.idea-skill-list a>b { font:700 10px "Avenir Next",Arial,sans-serif; letter-spacing:.12em; }
.idea-skill-list a>small { font-size:11px; }
.idea-skill-list a>svg { width:19px; }
.idea-footer-cta { min-height:430px; padding:100px 7vw; background:#31d6e7; display:grid; grid-template-columns:.25fr minmax(0,1.5fr) .8fr; align-items:center; gap:4vw; position:relative; overflow:hidden; }
.idea-footer-cta:after { content:"M"; position:absolute; right:-3vw; bottom:-14vw; font:40vw/.8 Georgia,serif; color:rgba(255,255,255,.2); pointer-events:none; }
.idea-footer-cta>svg { width:46px; height:46px; position:relative; z-index:1; }
.idea-footer-cta p { margin:0; max-width:820px; font-size:clamp(25px,3vw,44px); line-height:1.55; position:relative; z-index:1; text-wrap:balance; }
.idea-footer-cta a { justify-self:end; background:var(--ink); color:white; padding:20px 24px; display:flex; gap:15px; align-items:center; font-size:11px; letter-spacing:.1em; position:relative; z-index:1; white-space:nowrap; }

@media (max-width:900px) {
  .site-header nav a:not(.nav-contact) { display:none; }
  .hero-copy { left:7vw; right:7vw; }
  .hero-title-line { white-space:normal; }
  .circle-link { display:none; }
  .intro,.intro>div,.works-section .section-head,.services>.section-head,.about { grid-template-columns:1fr; }
  .intro>div { gap:35px; }
  .intro-title span,.about-title span { white-space:normal; }
  .section-pad { padding:85px 7vw; }
  .works-section .section-head { gap:22px; }
  .sample-note { justify-self:start; }
  .works-grid { grid-template-columns:1fr; }
  .work-card { min-height:360px; }
  .unity-visual { height:auto; padding:34px 25px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .unity-ring,.unity-ray,.unity-result { display:none; }
  .unity-core { position:relative; left:auto; top:auto; transform:none; width:220px; height:220px; grid-column:1/-1; justify-self:center; margin-bottom:25px; }
  .unity-skill,.unity-skill-2,.unity-skill-5 { position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none; width:auto; min-height:190px; }
  .unity-outcomes { grid-template-columns:1fr; }
  .about-art { min-height:480px; font-size:46vw; }
  .about-copy { border-left:0; border-top:1px solid var(--line); }
  .flow-head { grid-template-columns:1fr; gap:25px; margin-bottom:70px; }
  .flow-path { grid-template-columns:1fr; gap:0; }
  .flow-line { top:0; bottom:0; left:50px; right:auto; width:1px; height:auto; background:linear-gradient(#9ca4a5,var(--cyan)); }
  .flow-step { min-height:0; padding:0 0 50px 130px; border-right:0; }
  .flow-node,.step-2 .flow-node,.step-3 .flow-node,.step-4 .flow-node,.step-5 .flow-node { position:absolute; left:0; top:0; margin:0; width:100px; height:100px; }
  .flow-note { margin-top:0; }
  footer { gap:25px; flex-wrap:wrap; }
  .service-minihero { min-height:330px; grid-template-columns:1fr .3fr; }
  .service-symbol { height:160px; }
  .service-symbol span { font-size:130px; }
  .service-symbol svg { width:72px; height:72px; }
  .service-image { height:290px; }
  .service-switcher>div { grid-template-columns:repeat(3,1fr); }
  .service-switcher a:nth-child(3) { border-right:1px solid var(--line); }
  .service-overview { grid-template-columns:1fr; gap:35px; }
  .service-overview>div:last-child { padding-top:0; }
  .service-offerings-head { grid-template-columns:1fr; gap:20px; }
  .offering-grid { grid-template-columns:1fr 1fr; }
  .idea-masthead { grid-template-columns:1fr; }
  .idea-kicker,.idea-masthead h1,.idea-deck { grid-column:1; }
  .idea-kicker { margin-bottom:25px; }
  .idea-lead-grid { grid-template-columns:1fr 1fr; }
  .idea-dropcap { grid-column:1/-1; }
  .idea-lead-grid aside { grid-column:1/-1; border-left:0; border-top:1px solid var(--ink); padding:30px 0 0; }
  .idea-columns { grid-template-columns:.25fr 1fr; }
  .idea-body { grid-column:2; }
  .idea-skills { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .site-header { padding:0 6vw; }
  .brand { font-size:11px; }
  .hero { min-height:720px; }
  .hero h1 { font-size:10.5vw; }
  .hero-title-line { white-space:nowrap; }
  .hero-lead { margin-top:26px; }
  .hero-services { top:25px; right:6vw; }
  .slide-progress { top:60px; right:6vw; }
  .slide-progress i { width:38px; }
  .unity-visual { grid-template-columns:1fr; }
  .unity-core { grid-column:auto; width:200px; height:200px; }
  .unity-formula { align-items:flex-start; justify-content:flex-start; }
  .contact h2 { font-size:18vw; }
  .contact-details { grid-template-columns:1fr; gap:22px; }
  .flow-head h2 { font-size:13vw; }
  .flow-step { padding-left:95px; }
  .flow-node,.step-2 .flow-node,.step-3 .flow-node,.step-4 .flow-node,.step-5 .flow-node { width:72px; height:72px; }
  .flow-line { left:36px; }
  .flow-note { gap:9px; font-size:9px; }
  .flow-note i { width:35px; }
  footer>p { display:none; }
  .service-header { padding:0 6vw; }
  .service-minihero { min-height:310px; padding:55px 6vw 45px; grid-template-columns:1fr; }
  .service-minihero h1 { font-size:21vw; }
  .service-symbol { display:none; }
  .service-image { height:230px; }
  .service-switcher { padding:38px 6vw; }
  .service-switcher>div { grid-template-columns:1fr 1fr; }
  .service-switcher a:nth-child(2n) { border-right:1px solid var(--line); }
  .service-overview,.service-offerings,.service-cta { padding:78px 6vw; }
  .service-overview h2 { font-size:12vw; }
  .service-overview .service-lead { font-size:17px!important; }
  .offering-grid { grid-template-columns:1fr; }
  .offering-grid article { min-height:auto; }
  .service-cta h2 { font-size:14vw; }
  .idea-header { grid-template-columns:1fr 1fr; }
  .idea-header>span { display:none; }
  .idea-masthead { padding:52px 6vw; }
  .idea-meta span:nth-child(2) { display:none; }
  .idea-masthead h1 { font-size:20vw; }
  .idea-deck { margin-top:38px; font-size:16px; }
  .idea-rule { margin:0 6vw; }
  .idea-lead-grid { padding:55px 6vw 70px; grid-template-columns:1fr; }
  .idea-dropcap { columns:1; column-rule:0; }
  .idea-lead-grid aside { grid-column:auto; }
  .idea-record-wide { margin:0 6vw; height:62vw; min-height:280px; }
  .idea-record-pair { margin:0 6vw; height:auto; grid-template-columns:1fr; }
  .idea-record-pair .idea-record { height:270px; }
  .idea-columns { margin:0 6vw; padding:58px 0; grid-template-columns:1fr; gap:25px; }
  .idea-body { grid-column:auto; columns:1; }
  .idea-pullquote { padding:70px 6vw; grid-template-columns:1fr; gap:30px; }
  .idea-skills { padding:70px 6vw; }
  .idea-skill-list a { grid-template-columns:25px 30px 1fr 25px; }
  .idea-skill-list a>small { display:none; }
  .idea-footer-cta { padding:70px 6vw; grid-template-columns:1fr; }
  .idea-footer-cta a { justify-self:start; }
}

#body_wrap.office-mine-wp-page #header,
#body_wrap.office-mine-wp-page #footer,
#body_wrap.office-mine-wp-page .l-header,
#body_wrap.office-mine-wp-page .l-footer,
#body_wrap.office-mine-wp-page .c-pageTitle,
#body_wrap.office-mine-wp-page .p-breadcrumb,
#body_wrap.office-mine-wp-page .l-content__aside,
#body_wrap.office-mine-wp-page .l-sidebar { display:none !important; }
#body_wrap.office-mine-wp-page #content,
#body_wrap.office-mine-wp-page .l-content,
#body_wrap.office-mine-wp-page .l-mainContent,
#body_wrap.office-mine-wp-page .l-mainContent__inner,
#body_wrap.office-mine-wp-page .post_content { width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; }
#body_wrap.office-mine-wp-page { background:var(--paper); }
.om-site { width:100%; max-width:none; overflow:hidden; }

/* Accessible light email CTAs */
.contact-link,.service-cta>a{background:#fff!important;color:#101214!important;border:1px solid rgba(16,18,20,.22);box-shadow:0 10px 24px rgba(16,18,20,.12);}
.contact-link:hover,.service-cta>a:hover{background:#101214!important;color:#fff!important;}

/* Force readable email CTA */
#contact .contact-link, .contact-link[href^="mailto:"] { background-color:#fff !important; background-image:none !important; color:#101214 !important; border:1px solid rgba(16,18,20,.22) !important; }
#contact .contact-link:hover, .contact-link[href^="mailto:"]:hover { background-color:#101214 !important; color:#fff !important; }

/* THINKING editorial pages */
.thinking-page{background:#f2eee6;color:#101214;min-height:100vh;padding:32px 4vw 0;font-family:"Noto Serif JP",serif}.thinking-top{font-family:Arial,sans-serif;border-bottom:5px solid #101214;padding:0 0 18px}.thinking-top>div{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em}.thinking-top>a{display:inline-block;margin-top:18px;color:#101214;font-size:11px;letter-spacing:.15em}.thinking-hero{display:grid;grid-template-columns:30% 1fr;gap:5vw;align-items:center;padding:80px 0 90px}.thinking-hero>p{font-size:20px}.thinking-hero h1{font-size:clamp(58px,8.5vw,150px);font-weight:400;line-height:1;letter-spacing:-.06em;margin:0 0 42px}.thinking-hero div>p{font-size:clamp(18px,2vw,30px);line-height:1.9;max-width:1000px}.thinking-rule{display:flex;justify-content:space-between;border-top:1px solid;border-bottom:1px solid;padding:15px 0;font:700 10px Arial,sans-serif;letter-spacing:.18em}.thinking-chapter{display:grid;grid-template-columns:12% 42% 1fr;gap:3vw;padding:90px 0;border-bottom:1px solid rgba(16,18,20,.35);align-items:start}.thinking-num{color:var(--think-accent);font:700 64px Arial,sans-serif}.thinking-chapter small,.thinking-related small{font:700 11px Arial,sans-serif;letter-spacing:.2em;color:#667}.thinking-chapter h2{font-size:clamp(34px,4.2vw,72px);font-weight:400;line-height:1.4;margin:30px 0 0}.thinking-chapter>p{font-size:17px;line-height:2.2;columns:2;column-gap:35px}.thinking-related{display:grid;grid-template-columns:42% 1fr;gap:7vw;padding:100px 0}.thinking-related h2{font-size:clamp(38px,4.7vw,78px);font-weight:400;line-height:1.45}.thinking-related p{line-height:2;color:#596064}.thinking-related ol{list-style:none;margin:0;padding:0}.thinking-related li{display:grid;grid-template-columns:60px 1fr 30px;gap:20px;padding:28px 0;border-top:1px solid;align-items:center;font-family:Arial,sans-serif}.thinking-related li:last-child{border-bottom:1px solid}.thinking-related li span{font-size:12px}.thinking-related li strong{font-size:13px;letter-spacing:.1em}.thinking-related li em{text-align:right}.thinking-cta{margin:0 -4vw;background:var(--think-accent);padding:80px 4vw;color:#101214}.thinking-cta p{font:700 11px Arial,sans-serif;letter-spacing:.2em}.thinking-cta h2{font-size:clamp(36px,5vw,76px);font-weight:400}.thinking-cta a{display:inline-block;border:1px solid;padding:20px 28px;color:#101214;font:700 12px Arial,sans-serif;letter-spacing:.12em}@media(max-width:760px){.thinking-page{padding:22px 20px 0}.thinking-top>div{gap:8px;font-size:8px}.thinking-hero{display:block;padding:55px 0}.thinking-hero>p{font-size:15px;margin-bottom:30px}.thinking-hero h1{font-size:50px}.thinking-hero div>p{font-size:16px}.thinking-chapter{grid-template-columns:55px 1fr;padding:58px 0}.thinking-num{font-size:36px}.thinking-chapter h2{font-size:30px}.thinking-chapter>p{grid-column:1/-1;columns:1;font-size:15px}.thinking-related{display:block;padding:65px 0}.thinking-related h2{font-size:36px}.thinking-related ol{margin-top:50px}.thinking-cta{margin:0 -20px;padding:60px 20px}.thinking-cta h2{font-size:34px}}


/* Hide SWELL's duplicated sticky header on OFFICE MINE custom pages. */
.office-mine-wp-page #fix_header { display:none !important; }

/* Keep the hero eyebrow crisp and readable. */
.office-mine-wp-page .hero .eyebrow { text-shadow:none !important; }


/* Mobile usability refinements — 2026-07-25 */
@media (max-width:560px) {
  .services>.section-head { margin-bottom:48px; }
  .services .section-head h2 { font-size:clamp(34px,10.2vw,40px); line-height:1.2; letter-spacing:-.04em; white-space:nowrap; }
  .unity-visual { padding-top:28px; }
  .unity-core { width:min(74vw,240px); height:min(74vw,240px); margin:0 auto 18px; }
  .unity-core span { font-size:12px; }
  .unity-core strong { font-size:clamp(26px,7.2vw,30px); line-height:1.45; margin:10px 0 12px; }

  .about-art { min-height:300px; font-size:42vw; }
  .about-copy { padding:72px 6vw; }
  .about-copy h2 { font-size:clamp(30px,8.7vw,36px); line-height:1.35; letter-spacing:-.035em; margin-bottom:28px; }

  .contact h2 { font-size:clamp(42px,12vw,50px); line-height:1.28; letter-spacing:-.04em; }
  .contact>p:not(.section-kicker) { font-size:15px; line-height:1.9; }

  .service-minihero { min-height:0; padding:38px 6vw 36px; display:block; }
  .service-minihero h1 { font-size:clamp(64px,18vw,76px); line-height:.9; }
  .service-minihero h2 { margin-top:24px; font-size:clamp(28px,8.4vw,34px); line-height:1.35; }
  .service-offerings { padding-top:64px; padding-bottom:64px; }
  .offering-grid article { min-height:0 !important; margin:0; padding:24px 0 26px; }
  .offering-grid h3 { margin:18px 0 12px; font-size:22px; line-height:1.45; }
  .offering-grid p { font-size:13px; line-height:1.75; }
  .service-cta { padding-top:64px; padding-bottom:64px; }
  .service-cta h2 { font-size:clamp(30px,8.8vw,38px); line-height:1.45; letter-spacing:-.03em; margin-bottom:30px; }

  .idea-masthead h1 { font-size:clamp(40px,11.5vw,48px); line-height:1.15; letter-spacing:-.045em; }
  .idea-footer-cta { min-height:0; padding:64px 6vw; gap:26px; }
  .idea-footer-cta p { display:block !important; visibility:visible !important; opacity:1 !important; color:#101214 !important; max-width:none; font-size:clamp(24px,7.2vw,32px); line-height:1.55; letter-spacing:-.02em; }
  .idea-footer-cta a { width:100%; max-width:290px; justify-content:center; }
}

@media (max-width:560px) { .about-copy h2 { font-size:clamp(29px,7.8vw,32px); } }

/* Simplified ABOUT monogram on phones */
@media (max-width:560px) {
  .about { min-height:0; }
  .about-art { min-height:210px; height:210px; padding-right:4vw; font-size:clamp(94px,30vw,118px); letter-spacing:-.14em; }
  .about-art .orbit { display:none; }
  .about-art span:nth-child(2) { mix-blend-mode:normal; }
}


/* Mobile heading rhythm and natural wrapping */
@media (max-width:560px) {
  .flow-head h2,
  .service-overview h2,
  .service-offerings h2,
  .service-cta h2,
  .about-copy h2,
  .contact h2,
  .idea-footer-cta p,
  .idea-lead-grid aside strong {
    word-break:normal;
    word-break:auto-phrase;
    text-wrap:pretty;
  }

  .flow-head h2 {
    font-size:clamp(30px,8.5vw,36px);
    line-height:1.45;
    letter-spacing:-.03em;
  }

  .service-overview h2 {
    font-size:clamp(28px,8vw,34px);
    line-height:1.45;
    letter-spacing:-.03em;
  }

  .service-offerings h2 {
    font-size:clamp(30px,8.5vw,36px);
    line-height:1.4;
  }

  .service-cta h2 {
    font-size:clamp(26px,7.5vw,32px);
    line-height:1.55;
  }

  .contact h2 {
    font-size:clamp(36px,10.5vw,42px);
    line-height:1.35;
  }

  .idea-lead-grid aside strong {
    font-size:clamp(20px,5.8vw,24px);
    line-height:1.8;
  }
  .idea-lead-grid aside strong br { display:none; }

  .idea-footer-cta p {
    font-size:clamp(20px,5.7vw,23px);
    line-height:1.7;
  }
  .idea-cta-icon { display:none; }
}