/* ============================================================
   maru-M  home.css — トップページ固有（設計値は1920px幅のデザイン、--u = 1px）
   ============================================================ */

/* ---------- hero ---------- */
.hero{min-height:100svh;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,var(--red-top) 0%,#9e0a21 50%,var(--red-deep) 100%);padding:calc(94 * var(--u) + 40px) 24px 60px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20%;background:radial-gradient(42% 38% at 50% 45%,rgba(255,120,130,.16),transparent 70%);animation:breathe 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes breathe{from{transform:translate(-3%,-2%) scale(.95)}to{transform:translate(3%,3%) scale(1.08)}}
.hero .tag{font-family:var(--futura);font-style:italic;font-weight:500;color:var(--red-dark);font-size:clamp(14px,1.615vw,31px);letter-spacing:.12em;margin-bottom:clamp(28px,5vw,96px);opacity:0;animation:tagIn 1.3s var(--ease) .5s forwards}
@keyframes tagIn{from{opacity:0;letter-spacing:.5em;transform:translateY(8px)}to{opacity:1;letter-spacing:.12em;transform:none}}
.hero .logo-wrap{will-change:transform;position:relative}
.hero .logo{width:clamp(210px,23.75vw,456px);opacity:0;animation:logoIn 1.4s var(--ease) .25s forwards,floaty 7s ease-in-out 1.7s infinite}
@keyframes logoIn{from{opacity:0;transform:scale(.9) translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero .just{font-family:var(--futura);font-style:italic;font-weight:500;color:var(--red-dark);font-size:clamp(18px,2.63vw,50px);letter-spacing:.32em;margin-top:clamp(22px,2.3vw,44px);padding-left:.32em;opacity:0;animation:tagIn2 1.3s var(--ease) .8s forwards}
@keyframes tagIn2{from{opacity:0;letter-spacing:.7em;transform:translateY(8px)}to{opacity:1;letter-spacing:.32em;transform:none}}
.hero .cue{position:absolute;left:50%;bottom:max(22px,calc(48 * var(--u)));width:1px;height:max(44px,calc(80 * var(--u)));background:rgba(255,255,255,.22);overflow:hidden;opacity:0;animation:fadeIn 1s 1.6s forwards}
.hero .cue::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:#fff;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{top:-100%}60%{top:100%}100%{top:100%}}
@keyframes fadeIn{to{opacity:1}}

/* ---------- 事業概要：吹き出しボックス ---------- */
.about{padding:calc(72 * var(--u)) 0 0;background:linear-gradient(180deg,var(--red-deep) 0%,#9a0a20 45%,#af0b21 100%);position:relative;overflow:hidden}
.about-box{margin:calc(96 * var(--u)) auto 0;background:var(--gray);border-radius:clamp(36px,3.95vw,76px);color:var(--ink);padding:0 clamp(16px,2.65vw,51px);position:relative;cursor:default;transition:border-radius .6s var(--ease),box-shadow .6s;box-shadow:0 20px 60px rgba(60,0,8,0)}
.about-box.open{border-radius:clamp(26px,2.3vw,44px);box-shadow:0 26px 70px rgba(60,0,8,.28)}
.about-box .row{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease)}
.about-box.open .row{grid-template-rows:1fr}
.about-box .row>div{overflow:hidden;min-height:0}
.about-box .main{text-align:center;font-weight:900;font-size:clamp(16px,1.82vw,35px);letter-spacing:.05em;line-height:1.5;padding:clamp(20px,2.55vw,49px) 0;transition:padding .65s var(--ease)}
.about-box.open .main{padding:clamp(10px,.95vw,18px) 0 clamp(10px,1vw,20px)}
.about-box .main .w{display:inline-block;white-space:nowrap}
.bub{background:var(--red-dark);color:#fff;border-radius:999px;text-align:center;font-weight:900;letter-spacing:.06em;line-height:1.45;position:relative;padding:clamp(9px,.75vw,14px) clamp(16px,1.6vw,30px);opacity:0;transform:translateY(14px) scale(.96);transition:opacity .5s,transform .55s var(--ease)}
.about-box.open .bub{opacity:1;transform:none}
.bub::before,.bub::after{content:"";position:absolute;width:0;height:0;border-left:clamp(6px,.55vw,10px) solid transparent;border-right:clamp(6px,.55vw,10px) solid transparent;transform:translateX(-50%);left:var(--t1,20%)}
.bub::before{display:none}
.bub.up::after{bottom:calc(-1 * clamp(8px,.8vw,15px));border-top:clamp(8px,.8vw,15px) solid var(--red-dark)}
.bub.down::before,.bub.down::after{top:calc(-1 * clamp(8px,.8vw,15px));border-bottom:clamp(8px,.8vw,15px) solid var(--red-dark)}
.bub.down.two::before{display:block;left:var(--t1,25%)}
.bub.down.two::after{left:var(--t2,75%)}
.bub .t{font-size:clamp(13px,1.2vw,23px)}
.bub .s{font-size:clamp(12px,.95vw,18px)}
.bub .w{display:inline-block}
.bub .n{display:block;font-size:clamp(9px,.63vw,12px);font-weight:500;letter-spacing:.03em;margin-top:.15em;opacity:.95}
.top-bubs{display:flex;gap:clamp(10px,.75vw,14px);padding:clamp(20px,2.6vw,50px) 0 clamp(14px,1.3vw,25px);align-items:flex-end}
.top-bubs .bub{flex:1}
.top-bubs .bub:nth-child(2){transition-delay:.08s}
.bot-bub{padding:clamp(14px,1.3vw,25px) 0 clamp(24px,3.2vw,62px)}
.bot-bub .bub{transition-delay:.16s;font-size:clamp(12px,1.2vw,23px);line-height:1.5;letter-spacing:.02em}

.reach{text-align:center;margin-top:calc(232 * var(--u));font-weight:900;color:var(--w2);letter-spacing:.12em;font-size:clamp(20px,2.08vw,40px);line-height:1.5}
.reach .l2{margin-top:clamp(10px,.7vw,14px);display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.3vw,25px);flex-wrap:wrap}
.ip-pill{display:inline-flex;align-items:baseline;justify-content:center;border:1px solid rgba(255,70,80,.7);border-radius:999px;font-size:clamp(26px,2.86vw,55px);line-height:1;padding:.34em .75em;background:rgba(255,255,255,.015);position:relative;cursor:help;transition:background .3s,border-color .3s}
.ip-pill:hover,.ip-pill:focus-visible,.ip-pill.show{background:rgba(255,255,255,.07);border-color:rgba(255,160,160,.9);outline:none}
.ip-pill .shine{position:absolute;inset:0;border-radius:999px;overflow:hidden;pointer-events:none}
.ip-pill .shine::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);transform:translateX(-120%);animation:pillShine 4.5s var(--ease) 2s infinite}
@keyframes pillShine{0%{transform:translateX(-120%)}30%,100%{transform:translateX(120%)}}
.ip-pill .g{display:inline-flex;align-items:baseline;line-height:1;will-change:transform}
.ip-pill .bl{display:inline-block;width:0;height:0;vertical-align:baseline}
.ip-pill .ip{font-size:1em;letter-spacing:.1em;line-height:1}
.ip-pill .ka{font-size:.73em;line-height:1}

/* ---------- IPをツクル／ミガク タブパネル ---------- */
.about{position:relative}
.about .in{position:relative;z-index:1}
.about .mark{position:absolute;left:50%;top:0;width:clamp(200px,19.8vw,380px);aspect-ratio:207/196;transform:translate(-50%,-50%);background:rgba(0,0,0,.11);-webkit-mask:url(../logo/symbol-white.svg) center/contain no-repeat;mask:url(../logo/symbol-white.svg) center/contain no-repeat;pointer-events:none;will-change:transform,top;z-index:0}
.ipwrap{position:relative;margin-top:calc(262 * var(--u));padding-bottom:calc(210 * var(--u));--th:max(50px,calc(94 * var(--u)))}
.ip-tabs{position:relative;z-index:2;display:grid;grid-template-columns:433fr 433fr;gap:clamp(14px,4.5vw,87px);padding:0 calc(41 * var(--u))}
.tab{height:var(--th);border:1px solid rgba(255,70,80,.75);border-radius:999px;background:none;cursor:pointer;color:#f2f2f2;font-weight:900;letter-spacing:.14em;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:background .45s var(--ease),color .45s,border-color .45s,box-shadow .45s,transform .45s var(--ease);will-change:transform}
.tab .tx{display:inline-flex;align-items:baseline;gap:.04em;line-height:1;padding-left:.14em;transition:transform .45s var(--ease)}
.tab .ip{font-size:clamp(20px,2.34vw,45px);line-height:1}.tab .wo{font-size:clamp(15px,1.77vw,34px);line-height:1}
.tab small{position:absolute;bottom:10%;font-size:clamp(8px,.58vw,11px);letter-spacing:.14em;font-weight:500;color:var(--red-dark);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s var(--ease)}
.tab:hover,.tab:focus-visible{background:var(--panel);color:var(--red-dark);border-color:#ffb3b3;transform:scale(1.07);box-shadow:0 0 0 clamp(3px,.35vw,6px) rgba(255,120,120,.35),0 18px 44px rgba(60,0,8,.38)}
.tab:hover .tx,.tab:focus-visible .tx{transform:translateY(-.4em)}
.tab:hover small,.tab:focus-visible small{opacity:1;transform:none}
.tab:active{transform:scale(1.02)}

/* ---------- ポップアップ ---------- */
.pop{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vh,40px) clamp(12px,3vw,40px)}
.pop[hidden]{display:none}
.pop-bg{position:absolute;inset:0;background:rgba(90,0,8,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s}
.pop.in .pop-bg{opacity:1}
.pop-win{position:relative;width:min(1180px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--panel) url(../img/bg-sketch.jpg) center/cover;border-radius:clamp(16px,1.6vw,28px);box-shadow:0 0 0 clamp(3px,.4vw,7px) rgba(255,120,120,.35),0 40px 90px rgba(40,0,6,.5);color:var(--ink-2);opacity:0;transform:translateY(28px) scale(.97);transition:opacity .45s var(--ease),transform .55s var(--ease);overflow:hidden}
.pop-win::before{content:"";position:absolute;inset:0;background:rgba(241,242,241,.86);pointer-events:none;z-index:0}
.pop.in .pop-win{opacity:1;transform:none}
.pop-hd{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(18px,2.2vw,34px) clamp(22px,3vw,52px) 0}
.pop-hd.rev{flex-direction:row-reverse}
.pop-hd h3{font-weight:900;color:var(--red-dark);letter-spacing:.16em;line-height:1}
.pop-hd h3 .ip{font-size:clamp(22px,2.2vw,40px)}.pop-hd h3 .wo{font-size:clamp(16px,1.6vw,30px)}
.pop-x{background:none;border:0;cursor:pointer;color:var(--ink-2);font-weight:700;letter-spacing:.16em;font-size:clamp(12px,.9vw,16px);display:inline-flex;align-items:center;gap:8px;padding:8px}
.pop-x span{font-size:1.4em;line-height:1}
.pop-x:hover{color:var(--red-dark)}
.pop-sc{position:relative;z-index:1;overflow:auto;padding:clamp(16px,2vw,30px) clamp(22px,3vw,52px) clamp(24px,3vw,50px);display:flex;flex-direction:column;gap:clamp(12px,1.4vw,22px);scrollbar-width:thin;scrollbar-color:rgba(158,27,34,.7) rgba(0,0,0,.06);overscroll-behavior:contain}
.pop-sc::-webkit-scrollbar{width:8px}.pop-sc::-webkit-scrollbar-thumb{background:rgba(158,27,34,.7);border-radius:8px}.pop-sc::-webkit-scrollbar-track{background:rgba(0,0,0,.06)}         
.pop .migaku-cta{flex:none;margin-top:clamp(6px,1vw,14px);display:flex;justify-content:center;align-items:center;position:relative;gap:clamp(10px,2vw,30px);padding-right:clamp(90px,9vw,150px)}
.pop .migaku-cta .btn-red{height:max(50px,calc(75 * var(--u)));font-size:clamp(15px,1.6vw,30px);padding:0 clamp(28px,3.4vw,66px)}
.badge{position:relative;width:clamp(110px,11vw,190px);aspect-ratio:248/159;transform:rotate(-7deg);border-radius:50%;background:radial-gradient(ellipse at 40% 35%,#b5101f,#8d0a19 85%);box-shadow:0 10px 24px rgba(60,0,8,.35);color:#fff;font-weight:900;font-size:clamp(9px,.78vw,14px);line-height:1.35;letter-spacing:.06em;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:none}
.badge::before{content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.9);border-radius:50%}
.badge b{font-size:1.32em;display:block;margin-top:.1em}
body.popopen{overflow:hidden}
@keyframes wob{0%,100%{transform:translateY(-54%) rotate(-7deg)}50%{transform:translateY(-58%) rotate(-5deg)}}

/* ---------- 企業理念 ---------- */
.phil{position:relative;overflow:clip;padding:calc(165 * var(--u)) 0 calc(300 * var(--u));text-align:center}
.phil{view-timeline-name:--phil;view-timeline-axis:block}
.phil .bg{position:absolute;inset:0;pointer-events:none;overflow:clip}
.phil .stage{position:sticky;top:0;height:100vh;height:100svh;perspective:1400px;perspective-origin:50% 45%;overflow:hidden}
.phil .notes{position:absolute;left:-12%;top:-14%;width:124%;height:128%;background:url(../img/bg-notes.jpg) center/cover;mix-blend-mode:multiply;opacity:.2;transform-origin:50% 45%;will-change:transform,opacity,filter;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 55%,transparent 100%);translate:calc(var(--px,0px) * -.6) calc(var(--py,0px) * -.6);transition:translate 1.2s var(--ease)}
.phil .notes.far{left:-30%;top:-30%;width:160%;height:160%;opacity:.07;filter:blur(5px);transform-origin:50% 50%;translate:calc(var(--px,0px) * .25) calc(var(--py,0px) * .25);-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 40%,transparent 100%)}
.phil .vig{position:absolute;inset:0;background:linear-gradient(var(--gray),transparent 18%,transparent 82%,var(--gray))}
.phil .mission,.phil .vision,.phil .value{position:relative;z-index:0}
.phil .mission::before,.phil .vision::before,.phil .value::before{content:"";position:absolute;inset:-16% -10%;z-index:-1;background:radial-gradient(ellipse 50% 60% at 50% 50%,var(--gray) 25%,rgba(230,230,230,0) 75%);pointer-events:none}
.phil .in{position:relative}
.phil .h2{color:var(--ink-2)}
.phil .body{letter-spacing:.1em}
.phil .body .w{display:inline-block;white-space:nowrap}
.phil .body b{white-space:nowrap}
.mission{margin-top:calc(120 * var(--u))}.vision{margin-top:calc(140 * var(--u))}.value{margin-top:calc(165 * var(--u))}

/* ---------- お知らせ・会社概要 ---------- */
.news{padding:calc(120 * var(--u)) 0 calc(120 * var(--u));border-bottom:1px solid rgba(255,255,255,.35)}
.news .h2,.company .h2{color:#fff}
.nlist{margin:calc(60 * var(--u)) auto 0;max-width:726px;border-top:1px solid var(--w3)}
.nlist li{display:grid;grid-template-columns:max(84px,calc(130 * var(--u))) 1fr;gap:12px;padding:clamp(12px,1vw,20px) 4px;border-bottom:1px solid var(--w3);font-weight:300;color:var(--w3);font-size:clamp(13px,1.04vw,20px);letter-spacing:.06em}
.nlist time{font-family:var(--futura);font-weight:400;letter-spacing:.1em}
.company{padding:calc(190 * var(--u)) 0 calc(190 * var(--u));overflow:hidden}
.company .grid{display:grid;grid-template-columns:449fr 350fr;gap:calc(60 * var(--u));align-items:start;max-width:820px;margin:0 auto}
.company .h2{text-align:center}
.ctable{margin-top:calc(80 * var(--u))}
.ctable .rw{display:grid;grid-template-columns:max(84px,calc(130 * var(--u))) 1fr;padding:clamp(12px,1.5vw,29px) 0;font-weight:300;color:var(--w3);font-size:clamp(14px,1.3vw,25px);letter-spacing:.1em;line-height:1.4;position:relative}
.ctable .rw span,.ctable .rw b{white-space:nowrap;font-weight:300}
.ctable .ln{height:1px;background:var(--w3)}
.company .store{width:100%;max-width:350px;margin-top:calc(-30 * var(--u));will-change:transform;display:block}

/* ---------- お問合せ ---------- */
.contact{padding:calc(175 * var(--u)) 0 calc(165 * var(--u));text-align:center}
.contact .h2{color:var(--ink-2)}
.contact .form{margin-top:calc(95 * var(--u));max-width:726px}
.contact .fld{margin-bottom:clamp(10px,1.1vw,21px);border-left-width:max(7px,calc(10 * var(--u)));border-right-width:max(7px,calc(10 * var(--u)))}
.contact .fld input{height:max(46px,calc(48 * var(--u)));font-size:clamp(14px,.8vw,15px);padding:0 clamp(12px,1.2vw,22px)}
.contact .fld textarea{height:max(200px,calc(353 * var(--u)));font-size:clamp(14px,.8vw,15px);padding:clamp(10px,.9vw,16px) clamp(12px,1.2vw,22px)}
.contact .submit{margin-top:clamp(22px,3.2vw,62px)}
.contact .btn-red{height:max(50px,calc(62 * var(--u)));font-size:clamp(15px,1.4vw,27px);padding:0 clamp(26px,3.5vw,66px)}
.contact .more{margin-top:clamp(40px,4.5vw,86px);padding-top:clamp(28px,3vw,58px);border-top:1px solid rgba(0,0,0,.12)}
.contact .more p{font-size:clamp(13px,1vw,19px);letter-spacing:.1em;color:var(--ink-2);margin-bottom:clamp(14px,1.4vw,26px)}
.btn-white{display:inline-flex;align-items:center;justify-content:center;height:max(50px,calc(62 * var(--u)));padding:0 clamp(26px,3.5vw,66px);border-radius:999px;border:1px solid var(--red-dark);background:#fff;color:var(--red-dark);font-weight:900;letter-spacing:.14em;font-size:clamp(15px,1.4vw,27px);box-shadow:0 10px 24px rgba(60,0,8,.14);transition:background .3s,color .3s,transform .25s var(--ease),box-shadow .3s;white-space:nowrap}
.btn-white:hover{background:var(--red-dark);color:#fff;box-shadow:0 18px 36px rgba(60,0,8,.25)}

/* ---------- スクロール連動パララックス（対応ブラウザのみ） ---------- */
@supports (animation-timeline: view()){
  .hero .logo-wrap{animation:heroPar linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes heroPar{to{transform:translateY(22vh);opacity:.2}}
  .phil .notes{animation:notesPar linear both;animation-timeline:--phil;animation-range:entry 0% exit 100%}
  @keyframes notesPar{0%{transform:translate3d(0,6%,-140px) rotateX(9deg) scale(1.22);opacity:.06;filter:blur(3px)}30%{opacity:.16;filter:blur(0)}70%{opacity:.16;filter:blur(0)}100%{transform:translate3d(0,-7%,60px) rotateX(-5deg) scale(1.04);opacity:.06;filter:blur(2px)}}
  .phil .notes.far{animation:farPar linear both;animation-timeline:--phil;animation-range:entry 0% exit 100%}
  @keyframes farPar{from{transform:translate3d(0,14%,-500px) scale(1.5)}to{transform:translate3d(0,-14%,-300px) scale(1.25)}}
  .phil .big,.phil .fut{animation:wordPar linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes wordPar{from{transform:translateY(28px)}to{transform:translateY(-28px)}}
  .about-box,.reach{animation:softPar linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  @keyframes softPar{from{transform:translateY(40px)}to{transform:none}}
}

/* ---------- レスポンシブ ---------- */
@media (max-width:1100px){
  .phil .notes.far{display:none}
  .phil .notes{left:-8%;top:-8%;width:116%;height:116%}
  .company .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  /* 狭い画面：見出しを先頭に、吹き出し3つはその下に縦並び（口は上向きで見出しを指す） */
  .about-box{padding:0 16px;display:flex;flex-direction:column}
  .about-box .main{order:0;padding:26px 0 8px}
  .about-box.open .main{padding:26px 0 8px}
  .about-box .row{order:1}
  .about-box .row:last-of-type{order:2}
  .top-bubs{flex-direction:column;align-items:stretch;gap:14px;padding:16px 0 0}
  .bot-bub{padding:14px 0 24px}
  .bub{border-radius:22px;padding:12px 16px;letter-spacing:.03em}
  .bub.up::after{bottom:auto;top:-13px;border-top:0;border-bottom:13px solid var(--red-dark)}
  .bub .n{letter-spacing:0}
  .bub br{display:none}
  .bub .w{margin:0 .1em}
  .ip-tabs{gap:12px;padding:0}
  .ipwrap{--fr:16px;--th:50px;margin-top:80px;padding-bottom:60px}
  .about .mark{width:240px}
  .tab small{display:none}
  .pop{padding:0;align-items:flex-end}
  .pop-win{width:100%;max-height:92vh;max-height:92svh;border-radius:16px 16px 0 0;transform:translateY(40px)}
  .pop-hd{padding:16px 16px 0}
  .pop-sc{padding:12px 14px 24px;gap:10px}
  .pop-sc{gap:12px}
  .pop .migaku-cta{flex-direction:column;padding:0;gap:14px;margin-top:16px}
  .badge{width:150px;transform:rotate(-5deg)}
  .reach{margin-top:64px}
  .phil{padding:70px 0 100px}

  .mission{margin-top:50px}.vision{margin-top:80px}.value{margin-top:80px}
  .news{padding:64px 0}
  .nlist{margin-top:30px}
  .company{padding:70px 0 80px}
  .company .grid{grid-template-columns:1fr;gap:30px}
  .ctable{margin:36px auto 0}
  .ctable .rw{grid-template-columns:88px 1fr;font-size:15px;padding:14px 0}
  .company .store{max-width:280px;margin:0 auto}
  .contact{padding:70px 0 90px}
  .contact .form{margin-top:36px}
}
@media (max-width:480px){
  .hero{padding-top:110px}
  .hero .logo{width:62vw}
  .about-box .main{font-size:17px;letter-spacing:.05em}
  .about-box .main .w{white-space:normal}
  .bub .t{font-size:14px}.bub .s{font-size:13px}.bot-bub .bub{font-size:12.5px}
  .tab .ip{font-size:20px}.tab .wo{font-size:15px}.tab{letter-spacing:.06em}
  .ip-pill{font-size:26px}
  .reach{font-size:18px;letter-spacing:.06em}
  .reach .l2{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero .tag,.hero .logo,.hero .just,.hero .cue,.ip-pill .shine::before,.badge,.hero .logo-wrap,.about .mark,.phil .notes,.phil .big,.phil .fut,.company .store,.about-box,.reach{animation:none!important;opacity:1;transform:none!important}
  .bub,.tab,.prow,.pop-win,.pop-bg{transition:none!important}
}

/* IP tooltip */
.ip-pill .tip{pointer-events:none;position:absolute;left:50%;bottom:calc(100% + 14px);transform:translate(-50%,6px);width:max-content;max-width:min(360px,80vw);background:#fff;color:var(--ink);border-radius:12px;padding:12px 16px;font-size:clamp(11px,.8vw,13px);font-weight:500;letter-spacing:.04em;line-height:1.7;text-align:left;box-shadow:0 14px 34px rgba(60,0,8,.3);opacity:0;visibility:hidden;transition:opacity .3s,transform .35s var(--ease),visibility 0s .3s;z-index:5;white-space:normal;word-break:normal;line-break:strict;overflow-wrap:break-word;hanging-punctuation:allow-end}
.ip-pill .tip b{display:block;font-family:var(--futura);font-weight:500;letter-spacing:.2em;font-size:.85em;color:var(--red-dark);margin-bottom:4px}
.ip-pill .tip .w{display:inline-block}
.ip-pill .tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:8px solid transparent;border-top-color:#fff}
.ip-pill:hover .tip,.ip-pill:focus-visible .tip,.ip-pill.show .tip{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .3s,transform .35s var(--ease),visibility 0s}
@media (max-width:860px){.reach{position:relative;z-index:6}.ip-pill .tip{left:0;bottom:auto;top:calc(100% + 12px);transform:translate(0,-6px);width:min(340px,calc(100vw - 48px));max-width:none;font-size:12px}.ip-pill .tip::after{left:36px;transform:none;top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#fff}.ip-pill:hover .tip,.ip-pill.show .tip{transform:translate(0,0)}}
.nlist li a{color:inherit;text-decoration:none;transition:color .3s}
.nlist li a:hover{color:#fff}