:root{
  --blue:#314e78;
  --blue-dark:#213956;
  --ink:#0a0a0a;
  --paper:#f1efe8;
  --white:#f8f8f6;
  --gray:#929292;
  --line:rgba(10,10,10,.18);
  --pad:clamp(24px,5vw,78px);
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,"Noto Sans JP",sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--blue)}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
.skip-link{position:fixed;left:12px;top:-80px;z-index:9999;background:#fff;padding:12px 18px}.skip-link:focus{top:12px}
.jp{font-size:.78em;line-height:1.8;opacity:.55;letter-spacing:.03em}
.eyebrow,.section-index{font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase}
.section-pad{padding:clamp(90px,12vw,180px) var(--pad)}
.section-head{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(280px,.78fr);gap:clamp(40px,8vw,120px);align-items:end}
.section-head h2{margin:18px 0 0;font-size:clamp(54px,8.1vw,132px);font-weight:600;line-height:.84;letter-spacing:-.075em}
.section-intro{max-width:520px;padding-bottom:8px}
.section-intro>p:first-child{font-size:clamp(22px,2.1vw,35px);line-height:1.18;letter-spacing:-.035em;margin:0 0 20px}
.section-intro p{margin:0}
.site-header{position:fixed;z-index:1000;top:0;left:0;width:100%;height:86px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;color:var(--ink);mix-blend-mode:difference;filter:invert(1);transition:background .3s,color .3s,filter .3s,mix-blend-mode .3s}
.site-header.scrolled,.site-header.menu-open{mix-blend-mode:normal;filter:none;background:rgba(241,239,232,.94);backdrop-filter:blur(14px);color:var(--ink);border-bottom:1px solid rgba(10,10,10,.1)}

.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.brand{display:inline-flex;align-items:center;width:clamp(142px,12.2vw,176px);height:31px}
.brand-mark,.footer-brand-mark{display:block;width:100%;aspect-ratio:20/3;background:currentColor;-webkit-mask:url(../img/vessel-wordmark-mask.png) center/contain no-repeat;mask:url(../img/vessel-wordmark-mask.png) center/contain no-repeat}

.desktop-nav{display:flex;gap:32px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.desktop-nav a{position:relative;padding:8px 0}.desktop-nav a:after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .25s}.desktop-nav a:hover:after{transform:scaleX(1);transform-origin:left}
.menu-button{display:none;width:42px;height:42px;border:0;background:transparent;position:relative;cursor:pointer}.menu-button span{position:absolute;left:6px;width:30px;height:1px;background:currentColor;transition:.3s}.menu-button span:first-child{top:16px}.menu-button span:last-child{top:25px}.menu-button[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}.menu-button[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}
.menu-panel{position:fixed;z-index:900;inset:0;background:var(--blue);color:#fff;transform:translateY(-105%);transition:transform .55s cubic-bezier(.77,0,.18,1);visibility:hidden}.menu-panel.open{transform:none;visibility:visible}.menu-panel-inner{min-height:100%;padding:130px var(--pad) 50px;display:flex;flex-direction:column}.menu-panel nav{margin:auto 0;display:flex;flex-direction:column}.menu-panel nav a{font-size:clamp(52px,12vw,120px);font-weight:600;line-height:.92;letter-spacing:-.07em;border-bottom:1px solid rgba(255,255,255,.2);display:flex;align-items:baseline;gap:20px;padding:8px 0}.menu-panel nav span{font-size:11px;letter-spacing:.18em}.menu-note{font-size:12px;letter-spacing:.15em}
.hero{min-height:100svh;position:relative;overflow:hidden;background:var(--paper);display:flex;align-items:flex-end;padding:130px var(--pad) 72px}
.hero-inner{position:relative;z-index:3;width:100%}.hero-kicker{margin:0 0 30px;font-size:12px;letter-spacing:.19em;text-transform:uppercase;font-weight:700}.hero-title{margin:0;display:flex;flex-direction:column;font-size:clamp(76px,14.4vw,230px);line-height:.71;letter-spacing:-.095em;font-weight:600}.hero-title span{display:block}.hero-title .accent{color:var(--blue)}
.hero-bottom{margin-top:55px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding-top:20px}.hero-jp{margin:0;font-size:14px;letter-spacing:.06em}.hero-fields{margin:0;font-size:13px;letter-spacing:.21em;font-weight:700}.hero-fields i{font-style:normal;color:var(--blue);padding:0 8px}
.hero-orbit{position:absolute;width:min(56vw,850px);aspect-ratio:1;border:1px solid rgba(49,78,120,.28);border-radius:50%;right:-18vw;top:-25vw;animation:orbit 18s linear infinite}.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;border:1px solid rgba(49,78,120,.18);border-radius:50%;inset:14%}.hero-orbit:after{inset:33%}
.hero-photo{position:absolute;overflow:hidden;z-index:1;border:1px solid rgba(255,255,255,.3);box-shadow:0 20px 70px rgba(0,0,0,.15)}.hero-photo img{width:100%;height:100%;object-fit:cover}.hero-photo-a{width:clamp(230px,28vw,500px);height:clamp(94px,11vw,190px);right:6vw;top:25%;transform:rotate(-6deg)}.hero-photo-b{width:clamp(150px,19vw,340px);height:clamp(88px,10vw,170px);right:29vw;top:42%;transform:rotate(8deg);mix-blend-mode:multiply;opacity:.78}.scroll-note{position:absolute;right:22px;bottom:32px;writing-mode:vertical-rl;font-size:9px;letter-spacing:.18em;z-index:5}.scroll-note span{margin-top:12px}
.reveal{opacity:0;transform:translateY(35px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}.reveal.in{opacity:1;transform:none}.hero-title .reveal:nth-child(2){transition-delay:.12s}.hero-title .reveal:nth-child(3){transition-delay:.24s}.hero-bottom.reveal{transition-delay:.36s}
.manifesto{background:var(--paper);border-top:1px solid var(--line)}.manifesto-grid{margin-top:80px;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}.manifesto h2,.manifesto h3{margin:24px 0 0;font-size:clamp(58px,8.6vw,145px);line-height:.87;letter-spacing:-.08em;font-weight:600}.manifesto h3{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--blue)}.manifesto-copy>p:not(.jp){font-size:clamp(20px,1.9vw,30px);line-height:1.25;max-width:590px;margin:40px 0 10px}.manifesto-copy .jp{max-width:570px}
.section-dark{background:var(--ink);color:var(--white)}.section-dark .section-index{color:#8da7cf}.section-dark .jp{color:#fff}.film-visual{height:min(55vw,720px);min-height:420px;margin:90px 0 0;position:relative;overflow:hidden}.film-visual img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05)}.film-stamp{position:absolute;right:25px;bottom:25px;background:var(--blue);padding:12px 18px;font-size:10px;letter-spacing:.18em}.reveal-media{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.22,1,.36,1)}.reveal-media.in{clip-path:inset(0)}
.capability-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.25);margin-top:0}.capability-grid article{padding:40px 34px 10px 0;min-height:400px;border-right:1px solid rgba(255,255,255,.2)}.capability-grid article+article{padding-left:34px}.capability-grid article:last-child{border-right:0}.capability-grid span{font-size:10px;letter-spacing:.17em;color:#8da7cf}.capability-grid h3{font-size:clamp(34px,4vw,62px);line-height:.92;letter-spacing:-.06em;margin:42px 0 70px}.capability-grid p{font-size:18px;line-height:1.4;margin:0 0 12px}.capability-grid .jp{font-size:13px}
.event{background:#f4f1e8}.event-head h2{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--blue);letter-spacing:-.065em}.manboze-card{display:grid;grid-template-columns:1.1fr .9fr;margin-top:90px;min-height:560px;border:1px solid var(--line);transition:transform .35s}.manboze-card:hover{transform:translateY(-8px)}.manboze-dark{background:#050505;color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:space-between}.manboze-dark img{width:min(330px,75%);filter:brightness(3)}.manboze-dark p{font-size:11px;letter-spacing:.18em}.manboze-copy{padding:clamp(40px,7vw,100px);background:var(--blue);color:#fff;display:flex;flex-direction:column}.manboze-copy h3{font-size:clamp(58px,7vw,115px);line-height:.9;letter-spacing:-.075em;margin:45px 0 35px}.manboze-copy>p:not(.eyebrow):not(.jp){font-size:clamp(20px,2.2vw,32px);line-height:1.2;margin:0 0 12px}.manboze-copy .arrow-link{margin-top:auto;padding-top:60px;font-size:11px;letter-spacing:.18em}
.products{background:var(--blue);color:#fff}.products .section-index{color:#c2d2e8}.products .jp{color:#fff}.circle-feature{display:grid;grid-template-columns:.82fr 1.18fr;min-height:900px;background:#0b0b0b;color:#fff}.circle-title{padding:clamp(60px,9vw,140px) var(--pad);display:flex;flex-direction:column;justify-content:center}.circle-title h3{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(70px,10vw,165px);line-height:.74;letter-spacing:-.08em;margin:35px 0 70px;color:#f5f1e6}.circle-title>p:not(.eyebrow):not(.jp){font-size:clamp(19px,1.8vw,28px);line-height:1.25;max-width:490px;margin:0 0 12px}.text-link{margin-top:55px;font-size:11px;letter-spacing:.18em;border-bottom:1px solid currentColor;padding-bottom:9px;width:max-content}.circle-collage{position:relative;min-height:900px;overflow:hidden;background:#e9e6df}.circle-img{position:absolute;margin:0;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.25)}.circle-img img{width:100%;height:100%;object-fit:cover}.circle-img.c1{width:53%;height:52%;left:5%;top:8%;transform:rotate(-4deg)}.circle-img.c2{width:48%;height:44%;right:4%;top:27%;transform:rotate(5deg)}.circle-img.c3{width:45%;height:38%;left:18%;bottom:4%;transform:rotate(2deg)}.circle-caption{position:absolute;right:24px;bottom:20px;color:#111;font-size:10px;letter-spacing:.16em;writing-mode:vertical-rl}
.app-lab{background:var(--blue)}.app-lab-head{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:45px}.app-lab-head h3{font-size:clamp(58px,9vw,145px);line-height:.8;letter-spacing:-.08em;margin:18px 0 0}.app-lab-head .jp{justify-self:end;max-width:400px}.app-grid{display:grid;grid-template-columns:1fr 1fr}.app-card{display:flex;align-items:center;gap:38px;padding:70px 0;border-bottom:1px solid rgba(255,255,255,.25)}.app-card:first-child{border-right:1px solid rgba(255,255,255,.25);padding-right:50px}.app-card:last-child{padding-left:50px}.app-card img{width:clamp(100px,13vw,210px);aspect-ratio:1;object-fit:cover;border-radius:22%;box-shadow:0 22px 50px rgba(0,0,0,.22)}.app-status{font-size:10px;letter-spacing:.18em;margin:0 0 20px}.app-card h4{font-size:clamp(48px,6vw,95px);line-height:.9;letter-spacing:-.06em;margin:0 0 12px}.app-card div>p:last-child{font-family:var(--serif);font-size:21px;margin:0;opacity:.72}
.image-break{height:min(66vw,900px);min-height:520px;position:relative;overflow:hidden;background:#000}.image-break img{width:100%;height:115%;object-fit:cover;position:absolute;top:-7%;filter:contrast(1.05)}.image-break-text{position:absolute;left:var(--pad);bottom:38px;color:#fff;font-size:11px;letter-spacing:.22em}
.about{background:var(--paper)}.about-head{align-items:start}.about-copy{padding-top:10px}.about-copy>p:first-child{font-size:clamp(23px,2.5vw,39px);line-height:1.18;letter-spacing:-.035em;margin:0 0 25px}.company-table{margin:100px 0 0;border-top:1px solid var(--line)}.company-table div{display:grid;grid-template-columns:30% 70%;padding:24px 0;border-bottom:1px solid var(--line)}.company-table dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase}.company-table dd{margin:0;font-size:clamp(20px,2.1vw,32px);letter-spacing:-.025em}.company-table small{display:block;font-size:12px;letter-spacing:.05em;opacity:.48;margin-top:5px}
.contact{background:var(--blue);color:#fff;position:relative;overflow:hidden}.contact-inner{position:relative;z-index:2}.contact h2{font-size:clamp(72px,12.4vw,205px);line-height:.75;letter-spacing:-.09em;margin:50px 0 70px}.contact-lead{font-size:clamp(21px,2.2vw,36px);line-height:1.2;max-width:700px;margin:0 0 14px}.contact .jp{max-width:650px}.mail-link{display:flex;justify-content:space-between;align-items:center;margin-top:100px;padding:28px 0;border-top:1px solid rgba(255,255,255,.4);border-bottom:1px solid rgba(255,255,255,.4);font-size:clamp(28px,5vw,78px);letter-spacing:-.05em}.mail-link span{font-size:.6em}.contact-details{margin-top:75px;display:flex;justify-content:space-between;font-size:14px;line-height:1.7}.contact-details address{font-style:normal}.contact-details p{margin:0}.contact-orbit{position:absolute;right:-17vw;top:15%;width:60vw;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.22)}.contact-orbit:before,.contact-orbit:after{content:"";position:absolute;inset:18%;border:1px solid rgba(255,255,255,.15);border-radius:50%}.contact-orbit:after{inset:37%}
.site-footer{min-height:330px;background:#080808;color:#fff;padding:60px var(--pad);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end}.footer-brand{width:clamp(210px,25vw,390px);color:#fff}.footer-brand-mark{width:100%}.site-footer p{margin:0;font-size:10px;letter-spacing:.18em}.site-footer p:nth-child(2){text-align:center}.site-footer p:last-child{text-align:right}
@keyframes orbit{to{transform:rotate(360deg)}}
@media(max-width:900px){
  .site-header{height:72px}.desktop-nav{display:none}.menu-button{display:block}
  .section-pad{padding:88px 22px}.section-head{grid-template-columns:1fr;gap:40px}.section-head h2{font-size:clamp(50px,16vw,90px)}.section-intro{max-width:680px}.section-intro>p:first-child{font-size:23px}
  .hero{padding:110px 22px 54px;min-height:100svh}.hero-title{font-size:clamp(67px,20.7vw,116px);line-height:.78}.hero-kicker{margin-bottom:34px}.hero-bottom{align-items:flex-start;flex-direction:column;margin-top:42px;gap:18px}.hero-fields{font-size:11px;line-height:1.7}.hero-photo-a{width:48vw;height:17vw;right:-5vw;top:24%;transform:rotate(-5deg)}.hero-photo-b{width:36vw;height:19vw;right:33vw;top:36%;opacity:.62}.hero-orbit{width:100vw;right:-55vw;top:-28vw}.scroll-note{display:none}
  .manifesto-grid{grid-template-columns:1fr;gap:70px;margin-top:55px}.manifesto h2,.manifesto h3{font-size:clamp(55px,17vw,95px)}.manifesto-copy>p:not(.jp){font-size:21px}
  .film-visual{height:62vw;min-height:340px;margin-top:60px}.capability-grid{grid-template-columns:1fr}.capability-grid article,.capability-grid article+article{padding:36px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.2);min-height:0}.capability-grid h3{font-size:48px;margin:28px 0 40px}.capability-grid p{font-size:17px}
  .manboze-card{grid-template-columns:1fr;min-height:0;margin-top:60px}.manboze-dark{min-height:420px;padding:40px}.manboze-copy{min-height:510px}.manboze-copy h3{font-size:72px}.manboze-copy .arrow-link{padding-top:50px}
  .circle-feature{grid-template-columns:1fr;min-height:0}.circle-title{min-height:650px;padding:80px 22px}.circle-title h3{font-size:95px}.circle-collage{min-height:720px}.circle-img.c1{width:65%;height:44%;left:3%;top:7%}.circle-img.c2{width:57%;height:39%;right:3%;top:31%}.circle-img.c3{width:56%;height:34%;left:13%;bottom:3%}
  .app-lab-head{grid-template-columns:1fr}.app-lab-head h3{font-size:70px}.app-lab-head .jp{justify-self:start}.app-grid{grid-template-columns:1fr}.app-card,.app-card:first-child,.app-card:last-child{padding:42px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.25)}.app-card img{width:118px}.app-card h4{font-size:58px}
  .image-break{height:78svh;min-height:520px}.image-break img{height:100%;top:0}
  .company-table{margin-top:70px}.company-table div{grid-template-columns:1fr;gap:12px}.company-table dd{font-size:23px}
  .contact h2{font-size:clamp(62px,19vw,105px);line-height:.78}.contact .mail-link{font-size:clamp(24px,7vw,42px);margin-top:70px}.contact-details{flex-direction:column;gap:24px}.contact-orbit{width:125vw;right:-74vw}
  .site-footer{grid-template-columns:1fr;gap:60px;min-height:420px}.site-footer p:nth-child(2),.site-footer p:last-child{text-align:left}
}
@media(max-width:430px){
  .brand{width:140px;height:25px}.hero-title{font-size:19.5vw}.hero-photo-a{top:27%}.hero-photo-b{top:38%}.hero-fields{letter-spacing:.14em}.hero-fields i{padding:0 4px}
  .circle-collage{min-height:630px}.app-card{gap:23px}.app-card img{width:104px}.app-card h4{font-size:52px}.app-card div>p:last-child{font-size:17px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-orbit{animation:none}.reveal,.reveal-media{opacity:1;transform:none;clip-path:none;transition:none}}


/* v3 — photographic motion system + Vessel browser chrome */
.hero{isolation:isolate}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(241,239,232,.97) 0%,rgba(241,239,232,.88) 38%,rgba(241,239,232,.26) 72%,rgba(241,239,232,.58) 100%),
    linear-gradient(0deg,rgba(241,239,232,.82) 0%,transparent 34%);
}
.hero-photo-stage{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-photo-wash{
  position:absolute;
  width:126vw;
  height:105vh;
  right:-29vw;
  top:-9vh;
  transform:rotate(-8deg);
  overflow:hidden;
  opacity:.92;
  clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
}
.hero-wash-layer,
.hero-frame-layer,
.xfade-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.55s ease,transform 6.8s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.hero-wash-layer{
  filter:grayscale(1) blur(34px) contrast(1.12);
  transform:scale(1.1) translate3d(-1.5%,0,0);
  mix-blend-mode:multiply;
}
.hero-wash-layer.is-active{opacity:.47;transform:scale(1.17) translate3d(1.5%,1%,0)}
.hero-photo-frame{
  position:absolute;
  width:clamp(390px,55vw,930px);
  height:clamp(145px,19vw,330px);
  right:-5vw;
  top:23%;
  transform:rotate(-6deg);
  overflow:hidden;
  clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 30px 90px rgba(0,0,0,.25);
}
.hero-frame-layer{
  filter:grayscale(1) contrast(1.09);
  transform:scale(1.03) translate3d(-1%,0,0);
}
.hero-frame-layer.is-active{opacity:.82;transform:scale(1.09) translate3d(1%,0,0)}
.hero-inner{z-index:4}.scroll-note{z-index:4}
.hero-orbit{z-index:3}

.media-xfade{position:absolute;inset:0;overflow:hidden}
.media-xfade .xfade-layer{z-index:0}
.media-xfade .xfade-layer.is-active{opacity:1;transform:scale(1.045)}
.film-xfade .xfade-layer,
.break-xfade .xfade-layer{filter:grayscale(1) contrast(1.08)}
.film-xfade .xfade-layer{object-position:center}
.break-xfade .xfade-layer{object-position:center}
.film-stamp,.image-break-text{z-index:3}
.circle-xfade .xfade-layer{filter:none}
.circle-img{background:#d8d5ce}
.circle-img .media-xfade{position:absolute;inset:0}
.circle-img .xfade-layer{object-position:center}
.circle-img.c1 .xfade-layer{object-position:center 42%}
.circle-img.c2 .xfade-layer{object-position:center}
.circle-img.c3 .xfade-layer{object-position:center 54%}
.circle-collage:before{
  content:"";
  position:absolute;
  inset:-16%;
  background:radial-gradient(circle at 72% 30%,rgba(49,78,120,.22),transparent 44%);
  filter:blur(35px);
  pointer-events:none;
}

@media(max-width:900px){
  .hero:after{
    background:
      linear-gradient(90deg,rgba(241,239,232,.96) 0%,rgba(241,239,232,.84) 55%,rgba(241,239,232,.32) 100%),
      linear-gradient(0deg,rgba(241,239,232,.86) 0%,transparent 38%);
  }
  .hero-photo-wash{width:145vw;height:105svh;right:-72vw;top:-7svh;transform:rotate(-9deg)}
  .hero-wash-layer{filter:grayscale(1) blur(28px) contrast(1.1)}
  .hero-wash-layer.is-active{opacity:.42}
  .hero-photo-frame{
    width:76vw;
    height:30vw;
    min-height:118px;
    right:-18vw;
    top:28%;
    transform:rotate(-7deg);
  }
  .hero-frame-layer.is-active{opacity:.7}
}
@media(max-width:430px){
  .hero-photo-frame{top:30%;width:82vw;height:34vw;right:-23vw}
  .hero-photo-wash{right:-78vw}
}

@media(prefers-reduced-motion:reduce){
  .hero-wash-layer,.hero-frame-layer,.xfade-layer{transition:none;transform:none!important}
  .hero-wash-layer.is-active,.hero-frame-layer.is-active,.xfade-layer.is-active{transform:none!important}
}


/* v4 — stronger photographic field, coordinated gallery, versioned browser chrome */
:root{color-scheme:light}
html{background:#314e78}
body{background:var(--paper);min-height:100%;overscroll-behavior-x:none}

.hero-ribbons{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:multiply}
.photo-ribbon{position:absolute;overflow:hidden;clip-path:polygon(2% 0,100% 0,98% 100%,0 100%);border-top:1px solid rgba(49,78,120,.32);border-bottom:1px solid rgba(49,78,120,.24)}
.photo-ribbon .xfade-layer{filter:grayscale(1) contrast(1.22);opacity:0;transform:scale(1.04)}
.photo-ribbon .xfade-layer.is-active{opacity:.38;transform:scale(1.12) translateX(1.2%)}
.photo-ribbon.ribbon-a{width:78vw;height:26px;right:-12vw;top:15%;transform:rotate(-5deg)}
.photo-ribbon.ribbon-b{width:58vw;height:11px;right:4vw;top:58%;transform:rotate(4deg)}
.photo-ribbon.ribbon-c{width:92vw;height:7px;left:-22vw;bottom:13%;transform:rotate(-2deg)}

.film>.section-pad{position:relative;z-index:2}
.film-backdrop{position:absolute;z-index:0;right:-18vw;top:5%;width:90vw;height:84%;transform:rotate(-7deg);clip-path:polygon(8% 0,100% 0,91% 100%,0 100%);opacity:.22;pointer-events:none;overflow:hidden}
.film-backdrop .xfade-layer{filter:grayscale(1) blur(30px) contrast(1.3);mix-blend-mode:screen;transform:scale(1.18)}
.film-backdrop .xfade-layer.is-active{opacity:.48;transform:scale(1.26) translateX(1.5%)}

.circle-collage{isolation:isolate;background:#e9e6df}
.circle-bg-stage{position:absolute;inset:-18%;z-index:0;transform:rotate(-8deg);clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);opacity:.48;filter:blur(30px) saturate(.9);overflow:hidden}
.circle-slot{position:absolute;inset:0;overflow:hidden}
.circle-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.35s ease,transform 6.4s cubic-bezier(.2,.7,.2,1);transform:scale(1.03);will-change:opacity,transform}
.circle-layer.is-active{opacity:1;transform:scale(1.095)}
.circle-img{z-index:2}
.circle-caption{z-index:3}
.circle-collage:after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(110deg,rgba(233,230,223,.42),transparent 40%,rgba(49,78,120,.1));pointer-events:none}
.circle-img.c1{width:54%;height:50%;left:4%;top:7%;transform:rotate(-5deg)}
.circle-img.c2{width:46%;height:43%;right:3%;top:30%;transform:rotate(5.5deg)}
.circle-img.c3{width:48%;height:35%;left:18%;bottom:3%;transform:rotate(1.5deg)}

@media(max-width:900px){
  .photo-ribbon.ribbon-a{width:112vw;right:-42vw;top:17%;height:19px}
  .photo-ribbon.ribbon-b{width:84vw;right:-22vw;top:57%;height:9px}
  .photo-ribbon.ribbon-c{width:118vw;left:-44vw;bottom:14%;height:6px}
  .film-backdrop{right:-58vw;width:145vw;top:7%;height:90%;opacity:.18}
  .circle-bg-stage{inset:-12%;filter:blur(25px)}
}
@media(max-width:430px){
  .photo-ribbon.ribbon-a{top:19%}.photo-ribbon.ribbon-b{top:54%}
  .circle-img.c1{width:64%;height:43%;left:1%;top:5%}
  .circle-img.c2{width:56%;height:38%;right:-2%;top:31%}
  .circle-img.c3{width:58%;height:31%;left:14%;bottom:4%}
}
@media(prefers-reduced-motion:reduce){
  .circle-layer{transition:none!important;transform:none!important}
}


/* v5 — air route, open typography, V-shaped photography, calmer crossfades */
html,body{background:#314e78}
body{background:#314e78;position:relative}
main{position:relative;z-index:1;background:var(--paper)}
.site-footer{position:relative;z-index:2}

/* Give the display typography more air. */
.hero-title{line-height:.79;letter-spacing:-.055em}
.section-head h2{line-height:.94;letter-spacing:-.035em}
.manifesto h2,.manifesto h3{line-height:.95;letter-spacing:-.04em}
.capability-grid h3{line-height:1.02;letter-spacing:-.025em}
.event-head h2{letter-spacing:-.025em}
.manboze-copy h3{line-height:.98;letter-spacing:-.035em}
.circle-title h3{line-height:.87;letter-spacing:-.035em}
.app-lab-head h3{line-height:.9;letter-spacing:-.035em}
.app-card h4{line-height:.98;letter-spacing:-.025em}
.about h2{line-height:.96;letter-spacing:-.035em}
.contact h2{line-height:.84;letter-spacing:-.045em}
.menu-panel nav a{line-height:1.02;letter-spacing:-.035em}
.circle-title .jp{max-width:420px;line-height:1.95}

/* Original manBoze red is retained — no brightness washout. */
.manboze-dark img{filter:none}

/* The PON strips now form a photographic V. */
.hero-ribbons{z-index:3;mix-blend-mode:multiply}
.photo-ribbon{border-color:rgba(49,78,120,.3);box-shadow:0 16px 42px rgba(10,10,10,.08)}
.photo-ribbon .xfade-layer.is-active{opacity:.5}
.photo-ribbon.ribbon-a,
.photo-ribbon.ribbon-b{width:68vw;height:clamp(58px,7.7vw,124px);top:14%;clip-path:polygon(0 0,100% 0,96% 100%,4% 100%)}
.photo-ribbon.ribbon-a{left:-21vw;right:auto;transform:rotate(27deg);transform-origin:left center}
.photo-ribbon.ribbon-b{right:-21vw;left:auto;transform:rotate(-27deg);transform-origin:right center}
.photo-ribbon.ribbon-c{width:52vw;height:8px;left:24vw;right:auto;top:55%;bottom:auto;transform:rotate(-.5deg);opacity:.9}
.hero-photo-frame{opacity:.76;filter:saturate(.8)}
.hero-photo-wash{opacity:.98}
.hero-wash-layer{filter:grayscale(1) blur(17px) contrast(1.12)}
.hero-wash-layer.is-active{opacity:.5}

/* Background imagery is still atmospheric, but visibly photographic. */
.film-backdrop{opacity:.34}
.film-backdrop .xfade-layer{filter:grayscale(1) blur(13px) contrast(1.22);transform:scale(1.08)}
.film-backdrop .xfade-layer.is-active{opacity:.58;transform:scale(1.14) translateX(1.2%)}
.circle-bg-stage{inset:-12%;opacity:.6;filter:blur(13px) saturate(.95) contrast(1.02)}
.circle-collage:before{filter:blur(18px)}
.circle-layer{transition:opacity 2.15s ease,transform 8.4s cubic-bezier(.2,.7,.2,1)}
.circle-layer.is-active{transform:scale(1.075)}

/* A deliberately unnecessary Vessel-blue route crosses the whole site. */








@media(max-width:900px){
  .hero-title{line-height:.84;letter-spacing:-.042em}
  .section-head h2{line-height:.98;letter-spacing:-.025em}
  .manifesto h2,.manifesto h3{line-height:1;letter-spacing:-.03em}
  .contact h2{line-height:.9;letter-spacing:-.03em}
  .photo-ribbon.ribbon-a,.photo-ribbon.ribbon-b{width:94vw;height:clamp(43px,12vw,78px);top:18%}
  .photo-ribbon.ribbon-a{left:-45vw;transform:rotate(31deg)}
  .photo-ribbon.ribbon-b{right:-45vw;transform:rotate(-31deg)}
  .photo-ribbon.ribbon-c{width:70vw;left:15vw;top:52%;height:6px}
  .hero-wash-layer{filter:grayscale(1) blur(14px) contrast(1.1)}
  .film-backdrop{opacity:.28}
  .film-backdrop .xfade-layer{filter:grayscale(1) blur(11px) contrast(1.18)}
  .circle-bg-stage{filter:blur(11px) saturate(.95)}
  
}
@media(max-width:430px){
  .hero-title{line-height:.88;letter-spacing:-.035em}
  .photo-ribbon.ribbon-a,.photo-ribbon.ribbon-b{top:20%}
  .photo-ribbon.ribbon-c{top:54%}
}
@media(prefers-reduced-motion:reduce){
  
  
}



/* Hero: open the V, reduce layer congestion, and let the photographs read as photographs. */
.hero-ribbons{mix-blend-mode:normal;isolation:isolate}
.photo-ribbon{
  background:#111;
  border-color:rgba(49,78,120,.45);
  box-shadow:0 22px 64px rgba(10,10,10,.16);
}
.photo-ribbon .xfade-layer{
  filter:grayscale(1) contrast(1.18) brightness(.92);
  transform:scale(1.025);
}
.photo-ribbon .xfade-layer.is-active{
  opacity:.82;
  transform:scale(1.07) translateX(.6%);
}
.photo-ribbon.ribbon-a,
.photo-ribbon.ribbon-b{
  width:54vw;
  height:clamp(78px,8.8vw,142px);
  top:15%;
  clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);
}
.photo-ribbon.ribbon-a{
  left:-9vw;
  right:auto;
  transform:rotate(21deg);
  transform-origin:left center;
}
.photo-ribbon.ribbon-b{
  right:-9vw;
  left:auto;
  transform:rotate(-21deg);
  transform-origin:right center;
}
.photo-ribbon.ribbon-c{
  width:38vw;
  height:12px;
  left:31vw;
  right:auto;
  top:54%;
  bottom:auto;
  transform:rotate(-1deg);
  opacity:.82;
}
.hero-photo-frame{display:none}
.hero-photo-wash{opacity:.86}
.hero-wash-layer{filter:grayscale(1) blur(11px) contrast(1.12);mix-blend-mode:multiply}
.hero-wash-layer.is-active{opacity:.38}

/* IDEA / 00: a large diagonal photographic field behind the manifesto. */
.manifesto{position:relative;overflow:hidden;isolation:isolate}
.manifesto-photo-field{
  position:absolute;
  z-index:0;
  inset:-7% -4% -7% 31%;
  overflow:hidden;
  clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);
  opacity:.34;
}
.manifesto-photo-field .xfade-layer{
  filter:grayscale(1) contrast(1.14) brightness(1.04);
  object-position:center;
  transform:scale(1.035);
  transition-duration:2.2s,9s;
}
.manifesto-photo-field .xfade-layer.is-active{opacity:1;transform:scale(1.1) translateX(1%)}
.manifesto:after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0%,rgba(241,239,232,.97) 31%,rgba(241,239,232,.68) 55%,rgba(241,239,232,.14) 100%);
}
.manifesto>.section-index,.manifesto-grid{position:relative;z-index:2}









@media(max-width:900px){
  .photo-ribbon.ribbon-a,.photo-ribbon.ribbon-b{
    width:82vw;
    height:clamp(52px,13vw,82px);
    top:19%;
  }
  .photo-ribbon.ribbon-a{left:-34vw;transform:rotate(28deg)}
  .photo-ribbon.ribbon-b{right:-34vw;transform:rotate(-28deg)}
  .photo-ribbon.ribbon-c{width:62vw;left:19vw;top:51%;height:8px}
  .hero-wash-layer{filter:grayscale(1) blur(9px) contrast(1.08)}
  .hero-wash-layer.is-active{opacity:.31}

  .manifesto-photo-field{
    inset:0 -24% 0 17%;
    clip-path:polygon(26% 0,100% 0,100% 100%,0 100%);
    opacity:.23;
  }
  .manifesto:after{
    background:linear-gradient(90deg,var(--paper) 0%,rgba(241,239,232,.94) 56%,rgba(241,239,232,.42) 100%);
  }
  
  
}

@media(max-width:430px){
  .photo-ribbon.ribbon-a,.photo-ribbon.ribbon-b{top:20%}
  .photo-ribbon.ribbon-c{top:52%}
  .manifesto-photo-field{inset:0 -45% 0 14%;opacity:.19}
  
}

@media(prefers-reduced-motion:reduce){
  
}

/* v6.1 QA — make the IDEA photograph unmistakably present. */
.manifesto-photo-field{inset:-8% -4% -8% 24%;opacity:.56}
.manifesto:after{
  background:linear-gradient(90deg,var(--paper) 0%,rgba(241,239,232,.96) 28%,rgba(241,239,232,.52) 54%,rgba(241,239,232,.03) 100%);
}
@media(max-width:900px){
  .manifesto-photo-field{inset:0 -18% 0 8%;opacity:.34}
  .manifesto:after{background:linear-gradient(90deg,var(--paper) 0%,rgba(241,239,232,.92) 50%,rgba(241,239,232,.18) 100%)}
}
@media(max-width:430px){
  .manifesto-photo-field{inset:0 -42% 0 2%;opacity:.28}
}

/* v6.2 mobile QA — keep the full hero word inside the viewport. */
@media(max-width:430px){
  .hero-title{font-size:17.8vw;letter-spacing:-.035em}
  .photo-ribbon .xfade-layer.is-active{opacity:.88}
}

/* v6.3 mobile width guard — no sideways page stretch. */
html,body{max-width:100%;overflow-x:hidden}
@media(max-width:900px){
  .manboze-card{grid-template-columns:minmax(0,1fr);width:100%;max-width:100%;overflow:hidden}
  .manboze-dark,.manboze-copy{min-width:0;width:100%;max-width:100%}
  .manboze-copy h3{font-size:clamp(56px,18vw,72px);overflow-wrap:anywhere}
}


.hero-ribbons{display:none!important}
.hero-photo-frame{
  display:block!important;
  width:clamp(430px,50vw,860px);
  height:clamp(190px,23vw,370px);
  right:clamp(24px,5vw,82px);
  top:16%;
  transform:none;
  clip-path:none;
  opacity:.96;
  border:1px solid rgba(255,255,255,.68);
  box-shadow:0 34px 96px rgba(0,0,0,.22);
}
.hero-frame-layer{
  filter:grayscale(1) contrast(1.12) brightness(.9);
  transform:scale(1.015);
}
.hero-frame-layer.is-active{opacity:.94;transform:scale(1.065)}
.hero-photo-wash{
  width:72vw;
  height:76svh;
  right:-20vw;
  top:5svh;
  transform:rotate(-4deg);
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  opacity:.58;
}
.hero-wash-layer{filter:grayscale(1) blur(13px) contrast(1.08);mix-blend-mode:multiply}
.hero-wash-layer.is-active{opacity:.28}
.hero:after{
  background:
    linear-gradient(90deg,rgba(241,239,232,.98) 0%,rgba(241,239,232,.94) 37%,rgba(241,239,232,.38) 69%,rgba(241,239,232,.66) 100%),
    linear-gradient(0deg,rgba(241,239,232,.88) 0%,transparent 31%);
}


@media(max-width:900px){
  .hero-photo-frame{
    width:calc(100vw - 44px);
    height:clamp(150px,37vw,240px);
    right:22px;
    top:15%;
  }
  .hero-photo-wash{width:118vw;height:64svh;right:-48vw;top:7svh;opacity:.44}
  .hero-wash-layer{filter:grayscale(1) blur(10px) contrast(1.07)}
  .hero-wash-layer.is-active{opacity:.22}
  
}
@media(max-width:430px){
  .hero-photo-frame{top:17%;height:39vw}
  
}


.title-line{display:block;white-space:nowrap}
.section-intro>p:first-child,.about-copy>p:first-child,.contact-lead{text-wrap:balance}
p{text-wrap:pretty}

/* Four connected stages of moving-image production. */
.capability-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.capability-grid article{padding:40px 26px 20px 0;min-width:0;min-height:390px}
.capability-grid article+article{padding-left:26px}
.capability-grid h3{font-size:clamp(27px,3.05vw,49px);line-height:1.04;letter-spacing:-.018em;margin:38px 0 58px}
.capability-grid p{font-size:clamp(15px,1.25vw,18px)}
.design-note{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:25px 0 6px;border-top:1px solid rgba(255,255,255,.25)}
.design-note>span{font-size:10px;letter-spacing:.18em;color:#8da7cf}
.design-note>p{margin:0;font-size:12px;letter-spacing:.14em}
.design-note .jp{font-size:11px;letter-spacing:.03em;text-align:right}

/* Route is subtle, continuous and always inside the page width. */






/* Main headings: breathe, while each chosen line stays intact. */
.section-head h2,.manifesto h2,.manifesto h3,.contact h2{overflow:visible}
.event-head h2{letter-spacing:-.025em}
.manboze-copy h3,.circle-title h3,.app-lab-head h3,.app-card h4{letter-spacing:-.035em}

@media(max-width:1080px) and (min-width:901px){
  .capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .capability-grid article:nth-child(2){border-right:0}
  .capability-grid article:nth-child(-n/**/+2){border-bottom:1px solid rgba(255,255,255,.2)}
  .capability-grid h3{font-size:clamp(34px,4.4vw,52px)}
}

@media(max-width:900px){
  /* Overall mobile rhythm: less dead space, same visual hierarchy. */
  .section-pad{padding:72px 22px}
  .section-head{gap:30px}
  .section-head h2{font-size:clamp(46px,14.8vw,78px);line-height:1.01}
  .section-intro>p:first-child{font-size:21px;line-height:1.3}

  /* The photo now sits after the title instead of occupying an empty top zone. */
  .hero{display:block;min-height:auto;padding:98px 22px 42px;overflow:hidden}
  .hero-inner{width:100%}
  .hero-kicker{margin:0 0 18px}
  .hero-title{font-size:clamp(62px,18.2vw,92px);line-height:.88;letter-spacing:-.035em}
  .hero-photo-stage{position:relative;inset:auto;width:auto;height:clamp(158px,43vw,240px);margin:26px -22px 25px;z-index:1;overflow:hidden}
  .hero-photo-wash{display:none}
  .hero-photo-frame{position:absolute!important;inset:0 22px!important;width:auto!important;height:auto!important;right:22px!important;top:0!important;opacity:1;box-shadow:0 20px 54px rgba(0,0,0,.2)}
  .hero-frame-layer.is-active{opacity:.96}
  .hero-bottom{margin-top:0;padding-top:17px;gap:12px}
  .hero-fields{line-height:1.55}
  .hero-orbit{width:82vw;right:-55vw;top:-24vw;opacity:.7}

  .manifesto-grid{gap:45px;margin-top:44px}
  .manifesto h2,.manifesto h3{font-size:clamp(49px,15.3vw,82px);line-height:1.02}
  .manifesto-copy>p:not(.jp){margin-top:28px}
  .film-visual{height:58vw;min-height:250px;margin-top:44px}
  .capability-grid{grid-template-columns:1fr}
  .capability-grid article,.capability-grid article+article{padding:30px 0;min-height:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}
  .capability-grid h3{font-size:clamp(38px,12vw,52px);margin:24px 0 28px}
  .design-note{grid-template-columns:55px 1fr;gap:10px 15px;padding:23px 0 0}
  .design-note .jp{grid-column:2;text-align:left}

  .manboze-card{margin-top:46px}
  .manboze-dark{min-height:310px;padding:32px}
  .manboze-copy{min-height:0;padding:52px 30px}
  .manboze-copy h3{margin:32px 0 25px}
  .manboze-copy .arrow-link{padding-top:42px}

  .circle-title{min-height:0;padding:68px 22px}
  .circle-title h3{margin:28px 0 42px;line-height:.82}
  .circle-collage{min-height:580px}
  .app-lab-head{gap:28px;padding-bottom:34px}
  .app-card,.app-card:first-child,.app-card:last-child{padding:34px 0}
  .image-break{height:62svh;min-height:420px}
  .company-table{margin-top:55px}
  .contact h2{font-size:clamp(57px,17vw,88px);line-height:.91;margin:38px 0 48px}
  .contact .mail-link{margin-top:54px}
  .contact-details{margin-top:52px}
  .site-footer{min-height:330px;gap:42px;padding-top:52px;padding-bottom:52px}

  
  
}

@media(max-width:430px){
  .hero{padding-top:92px}
  .hero-title{font-size:17.4vw}
  .hero-photo-stage{height:42vw;margin-top:22px}
  .hero-fields{font-size:10px;letter-spacing:.115em}
  .section-pad{padding:64px 20px}
  .section-head h2{font-size:14.2vw}
  .manifesto h2,.manifesto h3{font-size:14.6vw}
  .circle-collage{min-height:520px}
  
}

/* v8.1 — preserve the desktop hero composition; use a separate in-flow mobile image. */
.hero-mobile-photo{display:none}
@media(max-width:900px){
  .hero-photo-stage{display:none!important}
  .hero-mobile-photo{display:block;position:relative;height:clamp(158px,43vw,240px);margin:26px -22px 25px;overflow:hidden;box-shadow:0 20px 54px rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.68)}
  .hero-mobile-photo .xfade-layer{filter:grayscale(1) contrast(1.12) brightness(.91);transform:scale(1.01)}
  .hero-mobile-photo .xfade-layer.is-active{opacity:.96;transform:scale(1.06)}
  #event .section-head h2{font-size:clamp(48px,14vw,74px)}
}
@media(max-width:430px){
  .hero-mobile-photo{height:42vw;margin-top:22px}
  #event .section-head h2{font-size:13.6vw}
}










/* Four main production stages stay prominent in a spacious 2 × 2 system. */
.capability-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-bottom:1px solid rgba(255,255,255,.2);
}
.capability-grid article,
.capability-grid article+article{
  min-height:360px;
  padding:42px 42px 34px 0;
  border-right:1px solid rgba(255,255,255,.2);
  border-bottom:1px solid rgba(255,255,255,.2);
}
.capability-grid article:nth-child(even){padding-left:42px;padding-right:0;border-right:0}
.capability-grid article:nth-last-child(-n/**/+2){border-bottom:0}
.capability-grid h3{
  font-size:clamp(44px,5.15vw,78px);
  line-height:.96;
  letter-spacing:-.025em;
  margin:34px 0 54px;
}
.capability-grid p{font-size:clamp(16px,1.35vw,19px)}
.design-note{
  grid-template-columns:64px minmax(0,1fr) auto;
  padding-top:20px;
  opacity:.82;
}

/* Original corporate mark: a quiet historical signature in About. */
.about-original-mark{
  display:flex;
  justify-content:flex-end;
  margin:70px 0 -46px;
  position:relative;
  z-index:2;
}
.about-original-mark img{width:clamp(132px,14vw,205px);height:auto}

/* Prevent accidental single-glyph lines, clipped quotes and right overflow. */
main,section,.section-head,.section-intro,.about-copy,.manboze-copy,.circle-title,
.app-card,.company-table,.contact-inner{min-width:0;max-width:100%}
p,h1,h2,h3,h4,dd,address,a{min-width:0}
.manboze-copy h3{
  white-space:nowrap;
  overflow-wrap:normal!important;
  word-break:normal;
}
.mail-link{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.app-status{line-height:1.45}

@media(max-width:900px){
  

  /* Mobile rhythm: less vacant space without making the page cramped. */
  .section-pad{padding:58px 20px}
  .section-head{gap:25px}
  .section-head h2{font-size:clamp(44px,13.5vw,70px);line-height:1.01}
  .section-intro>p:first-child{font-size:20px;line-height:1.3}

  .hero{padding:84px 20px 34px}
  .hero-kicker{margin-bottom:15px}
  .hero-title{font-size:clamp(59px,17.1vw,86px);line-height:.9}
  .hero-mobile-photo{height:38vw;min-height:142px;margin:20px -20px 19px}
  .hero-bottom{padding-top:14px;gap:9px}
  .hero-fields{line-height:1.45}

  .manifesto-grid{margin-top:36px;gap:33px}
  .manifesto h2,.manifesto h3{font-size:clamp(47px,14vw,72px)}
  .manifesto-copy>p:not(.jp){margin-top:22px}
  .film-visual{height:55vw;min-height:225px;margin-top:36px}

  .capability-grid{grid-template-columns:1fr}
  .capability-grid article,
  .capability-grid article+article,
  .capability-grid article:nth-child(even){
    min-height:0;
    padding:27px 0 25px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.2);
  }
  .capability-grid article:last-child{border-bottom:0}
  .capability-grid h3{font-size:clamp(42px,12.5vw,56px);line-height:.98;margin:20px 0 23px}
  .capability-grid p{font-size:16px}
  .design-note{grid-template-columns:48px minmax(0,1fr);gap:8px 12px;padding-top:18px}
  .design-note>p{font-size:10px;line-height:1.55;letter-spacing:.1em;overflow-wrap:anywhere}
  .design-note .jp{grid-column:2}

  .manboze-card{margin-top:38px}
  .manboze-dark{min-height:270px;padding:28px}
  .manboze-copy{padding:44px 26px}
  .manboze-copy h3{font-size:clamp(48px,15vw,66px);line-height:1;margin:27px 0 22px}
  .manboze-copy .arrow-link{padding-top:34px}

  .circle-title{padding:58px 20px}
  .circle-title h3{font-size:clamp(76px,23vw,94px);margin:24px 0 34px}
  .circle-collage{min-height:500px}
  .app-lab-head{gap:21px;padding-bottom:28px}
  .app-lab-head h3{font-size:clamp(54px,16vw,68px)}
  .app-card,.app-card:first-child,.app-card:last-child{padding:29px 0;gap:20px}
  .app-card img{width:96px}
  .app-card h4{font-size:48px}
  .app-status{font-size:9px;letter-spacing:.13em;overflow-wrap:normal}

  .image-break{height:55svh;min-height:360px}
  .company-table{margin-top:46px}
  .company-table div{padding:19px 0}
  .about-original-mark{justify-content:flex-start;margin:42px 0 -18px}
  .about-original-mark img{width:138px}

  .contact h2{font-size:clamp(54px,16vw,78px);margin:30px 0 38px}
  .contact .mail-link{font-size:clamp(21px,6.2vw,34px);margin-top:42px;padding:22px 0;gap:12px}
  .contact-details{margin-top:38px}
  .site-footer{min-height:280px;gap:34px;padding:42px 20px}
  .footer-brand{width:min(230px,72vw)}

  /* Keep authored title lines intact; all sizes above are chosen to fit. */
  .title-line{white-space:nowrap}
}

@media(max-width:430px){
  .section-pad{padding:52px 18px}
  .hero{padding:80px 18px 30px}
  .hero-title{font-size:16.6vw}
  .hero-mobile-photo{margin-left:-18px;margin-right:-18px;height:37vw;min-height:134px}
  .section-head h2{font-size:13vw}
  .manifesto h2,.manifesto h3{font-size:13.6vw}
  .capability-grid h3{font-size:11.8vw}
  .manboze-copy{padding-left:23px;padding-right:23px}
  .manboze-copy h3{font-size:14.2vw}
  .circle-collage{min-height:470px}
  .app-card img{width:86px}
  .app-card h4{font-size:43px}
  .mail-link span{flex:0 0 auto}
}



:root{--header-bg:rgba(244,241,232,.92)}
html{scroll-padding-top:96px}
.site-header,
.site-header.scrolled,
.site-header.menu-open{
  background:var(--header-bg)!important;
  color:var(--ink)!important;
  mix-blend-mode:normal!important;
  border-bottom:1px solid rgba(10,10,10,.10)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.site-header{transition:background .25s ease,color .25s ease,border-color .25s ease!important}

.manifesto-mini-mark{
  width:56px;
  margin:0 0 34px;
}
.manifesto-mini-mark img{
  display:block;
  width:100%;
  height:auto;
  opacity:.92;
}

.manifesto h2,
.manifesto-copy h3,
.event-head h2,
.manboze-copy h3{
  overflow:visible;
}

.manifesto h2{
  font-size:clamp(74px,8.6vw,154px);
  line-height:.88;
  letter-spacing:-.055em;
}
.manifesto-copy h3{
  font-size:clamp(64px,7vw,122px);
  line-height:.9;
  letter-spacing:-.045em;
  margin:0 0 30px;
}
.manifesto-copy > p:not(.jp){
  max-width:18ch;
}

.capability-grid article{
  min-width:0;
}
.capability-grid h3{
  font-size:clamp(31px,3.35vw,56px);
  line-height:1.03;
  letter-spacing:-.022em;
  margin:38px 0 54px;
}
.capability-grid p{
  font-size:clamp(15px,1.3vw,19px);
}

.event-head h2{
  font-size:clamp(68px,8.7vw,150px);
  line-height:.84;
  letter-spacing:-.03em;
}
.manboze-card{
  grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr);
}
.manboze-dark img{
  max-width:min(78%,430px);
}
.manboze-copy{
  padding:clamp(40px,4.5vw,64px);
  align-content:center;
}
.manboze-copy h3{
  font-size:clamp(60px,6.4vw,102px);
  line-height:.92;
  letter-spacing:-.05em;
  margin:34px 0 26px;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
}
.manboze-copy > p:not(.jp){
  max-width:15ch;
}
.manboze-copy .jp{
  max-width:28ch;
}








@media (max-width:900px){
  html{scroll-padding-top:78px}
  .section-head h2{font-size:clamp(58px,15vw,106px)}
  .manifesto-grid{gap:42px}
  .manifesto h2{
    font-size:clamp(60px,17vw,100px);
    line-height:.9;
  }
  .manifesto-copy h3{
    font-size:clamp(46px,14vw,72px);
    line-height:.93;
    margin:0 0 22px;
  }
  .manifesto-copy > p:not(.jp){max-width:14ch}
  .manifesto-mini-mark{width:42px;margin:0 0 24px}
  .capability-grid h3{font-size:clamp(34px,10vw,52px);margin:26px 0 30px}
  .capability-grid p{font-size:17px}
  .manboze-card{grid-template-columns:1fr;min-height:0;margin-top:56px}
  .manboze-copy{
    padding:34px 24px 40px;
  }
  .manboze-copy h3{
    font-size:clamp(52px,16vw,68px);
    margin:22px 0 20px;
    white-space:nowrap;
  }
  
}

@media (max-width:430px){
  .manifesto h2{font-size:17vw}
  .manifesto-copy h3{font-size:13vw}
  .manboze-copy h3{font-size:15vw}
}


/* v11 exact-S final corrections */




/* 01 / 02 / 03 / 04 and their blue production labels must be clearly readable. */
.capability-grid > article > span{
  display:block;
  font-size:clamp(14px,1.15vw,18px)!important;
  line-height:1;
  font-weight:700;
  letter-spacing:.15em!important;
  color:#9bb8df!important;
}
.capability-grid h3{
  color:#9bb8df!important;
  font-size:clamp(38px,4.15vw,66px)!important;
  line-height:.98!important;
  letter-spacing:-.018em!important;
  margin:30px 0 46px!important;
}

/* Keep the blue IDEA headline large, but entirely inside its own column. */
.manifesto-grid{
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;
  gap:clamp(42px,6vw,92px)!important;
}
.manifesto-copy{
  min-width:0;
  max-width:100%;
  overflow:visible;
}
.manifesto-copy h3{
  width:100%;
  max-width:100%;
  font-size:clamp(60px,5.75vw,104px)!important;
  line-height:.92!important;
  letter-spacing:-.035em!important;
}
.manifesto-copy h3 .title-line{
  display:block;
  max-width:100%;
  white-space:nowrap;
}
.manifesto-copy > p:not(.jp){
  max-width:20ch!important;
}

@media(max-width:1080px) and (min-width:901px){
  .capability-grid h3{font-size:clamp(42px,5.3vw,58px)!important}
  .manifesto-copy h3{font-size:clamp(56px,5.7vw,78px)!important}
}

@media(max-width:900px){
  
  .capability-grid > article > span{font-size:15px!important}
  .capability-grid h3{
    font-size:clamp(43px,12vw,60px)!important;
    margin:24px 0 30px!important;
  }
  .manifesto-grid{grid-template-columns:1fr!important;gap:38px!important}
  .manifesto-copy h3{
    font-size:clamp(48px,12.6vw,72px)!important;
    line-height:.95!important;
  }
}

@media(max-width:430px){
  
  .capability-grid > article > span{font-size:14px!important}
  .capability-grid h3{font-size:11.7vw!important}
  .manifesto-copy h3{font-size:12vw!important}
}


/* v12 — final visual corrections from live QA */
/* Header color is intentionally stable. It does not switch on scroll. */
.site-header,
.site-header.scrolled,
.site-header.menu-open{
  background:#f4f1e8!important;
  color:#0a0a0a!important;
  mix-blend-mode:normal!important;
  filter:none!important;
  border-bottom:1px solid rgba(10,10,10,.10)!important;
  transition:none!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* Keep the accepted exact S silhouette and only refine its outline. */


/* The old generic span rule made these labels tiny. Restore actual heading scale. */
.capability-grid > article > span{
  font-size:clamp(17px,1.35vw,21px)!important;
  line-height:1!important;
  color:#9bb8df!important;
  font-weight:700!important;
  letter-spacing:.14em!important;
}
.capability-grid h3{
  color:#9bb8df!important;
  font-size:clamp(34px,3.35vw,50px)!important;
  line-height:1!important;
  letter-spacing:-.015em!important;
  margin:32px 0 48px!important;
}
.capability-grid h3 .title-line{
  display:block!important;
  font-size:inherit!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  color:inherit!important;
  font-weight:inherit!important;
  white-space:nowrap!important;
}

/* Two equal columns keep both IDEA headlines large without either crossing the centre. */
.manifesto-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:clamp(72px,6vw,104px)!important;
}
.manifesto-copy{
  min-width:0!important;
  padding-left:clamp(18px,1.5vw,30px)!important;
}
.manifesto-copy h3{
  width:100%!important;
  max-width:100%!important;
  font-size:clamp(62px,6.05vw,98px)!important;
  line-height:.92!important;
  letter-spacing:-.035em!important;
  margin:0 0 34px!important;
}
.manifesto-copy h3 .title-line{
  display:block!important;
  white-space:nowrap!important;
  max-width:100%!important;
}
.manifesto-copy > p:not(.jp){
  max-width:20ch!important;
}

@media(max-width:1080px) and (min-width:901px){
  .capability-grid h3{font-size:clamp(36px,4.25vw,48px)!important}
  .manifesto-grid{gap:60px!important}
  .manifesto-copy h3{font-size:clamp(56px,5.7vw,76px)!important}
}

@media(max-width:900px){
  .capability-grid > article > span{font-size:17px!important}
  .capability-grid h3{font-size:clamp(36px,10vw,48px)!important;margin:24px 0 30px!important}
  .capability-grid h3 .title-line{white-space:normal!important}
  .manifesto-grid{grid-template-columns:1fr!important;gap:38px!important}
  .manifesto-copy{padding-left:0!important}
  .manifesto-copy h3{font-size:clamp(48px,12.5vw,70px)!important;line-height:.95!important}
}

@media(max-width:430px){
  .capability-grid > article > span{font-size:16px!important}
  .capability-grid h3{font-size:10.8vw!important}
  .manifesto-copy h3{font-size:11.8vw!important}
}




/* Clouds are tied to exact points on the existing route. The plane itself is unchanged. */








@media(max-width:900px){
  
  
}
@media(prefers-reduced-motion:reduce){
  
}

/* App Projects is a circle around sub-project, not a fourth giant company pillar. */
.app-lab{
  position:relative;
  background:var(--blue);
}
.app-lab-head{
  grid-template-columns:minmax(0,1fr) minmax(260px,.72fr)!important;
  gap:clamp(34px,6vw,86px)!important;
  align-items:center!important;
  padding-bottom:36px!important;
}
.app-lab-brand{
  display:flex;
  align-items:center;
  gap:24px;
  min-width:0;
}
.ca-logo-plate{
  width:clamp(62px,6vw,90px);
  aspect-ratio:1;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  padding:13px;
  background:#fff;
  border-radius:50%;
}
.ca-logo-plate img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.app-lab-brand .eyebrow{
  margin:0 0 12px;
  color:#d8e3f2;
}
.app-lab-head h3{
  margin:0!important;
  font-size:clamp(34px,4.8vw,70px)!important;
  line-height:.92!important;
  letter-spacing:-.045em!important;
}
.app-lab-head > .jp{
  justify-self:end;
  max-width:430px;
  line-height:1.85;
}
.app-grid{
  gap:0;
}
.app-card{
  gap:26px!important;
  padding:46px 0!important;
}
.app-card:first-child{padding-right:42px!important}
.app-card:last-child{padding-left:42px!important}
.app-card img{
  width:clamp(78px,8.2vw,126px)!important;
  box-shadow:0 14px 32px rgba(0,0,0,.18)!important;
}
.app-status{
  margin-bottom:12px!important;
  font-size:9px!important;
}
.app-card h4{
  font-size:clamp(42px,4.8vw,70px)!important;
  margin-bottom:8px!important;
}
.app-card div>p:last-child{
  font-size:clamp(17px,1.55vw,21px)!important;
}

/* The final Vessel wordmark is a signature, not another headline. */
.footer-brand{
  width:clamp(150px,17vw,270px)!important;
}

/* Contact details never split inside a phone or fax number. */
.contact-details{
  align-items:flex-start;
}
.contact-phone{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  white-space:nowrap;
  min-width:max-content;
  text-align:right;
}
.contact-phone span{
  display:block;
  white-space:nowrap;
}

@media(max-width:900px){
  .app-lab-head{
    grid-template-columns:1fr!important;
    gap:24px!important;
  }
  .app-lab-head > .jp{
    justify-self:start;
    max-width:34ch;
  }
  .app-lab-brand{gap:18px}
  .ca-logo-plate{
    width:64px;
    padding:10px;
  }
  .app-lab-head h3{font-size:clamp(34px,10vw,52px)!important}
  .app-grid{grid-template-columns:1fr}
  .app-card,
  .app-card:first-child,
  .app-card:last-child{
    padding:30px 0!important;
    border-right:0!important;
    gap:20px!important;
  }
  .app-card img{width:88px!important}
  .app-card h4{font-size:46px!important}
  .contact-phone{
    align-items:flex-start;
    text-align:left;
  }
  .footer-brand{width:min(205px,58vw)!important}
}

@media(max-width:430px){
  .ca-logo-plate{width:58px}
  .app-lab-brand{align-items:flex-start}
  .app-lab-head h3{font-size:10vw!important}
  .app-card img{width:78px!important}
  .app-card h4{font-size:42px!important}
}

/* Final mobile fit check: keep the contact headline fully inside the viewport. */
@media(max-width:900px){
  .contact h2{font-size:clamp(58px,16vw,82px)!important;line-height:.82!important;letter-spacing:-.06em!important}
}







.circle-title{position:relative}
.circle-brand-logo{
  display:block;
  width:clamp(50px,5vw,78px);
  height:auto;
  margin:28px 0 22px;
  filter:invert(1);
}
.circle-title h3{margin-top:16px}

.app-lab{
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  padding-top:72px;
  padding-bottom:72px;
}
.app-lab-head{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  min-width:0;
  padding:34px 40px 34px 0;
  border-right:1px solid rgba(255,255,255,.28);
}
.app-lab-head h3{
  font-size:clamp(40px,4.5vw,72px);
  line-height:.86;
  letter-spacing:-.045em;
  margin:24px 0 30px;
}
.app-lab-head .jp{margin:0;max-width:24ch;line-height:1.8}
.app-grid{
  grid-column:2 / 4;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-width:0;
}
.app-card,
.app-card:first-child,
.app-card:last-child{
  padding:40px clamp(24px,3vw,48px);
  min-height:310px;
  border-bottom:0;
}
.app-card img{width:clamp(84px,8vw,122px)}
.app-card h4{font-size:clamp(44px,5vw,76px)}
.app-card .app-status{font-size:9px;letter-spacing:.15em}
.ca-logo-plate,.app-lab-brand{display:none!important}

.manboze-dark{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.manboze-dark > img,
.manboze-dark > p{position:relative;z-index:3}
.manboze-themes{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.theme-word{
  position:absolute;
  display:block;
  white-space:nowrap;
  color:#fff;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:.03em;
  opacity:.075;
  will-change:transform;
}
.theme-a{font-size:clamp(52px,6vw,96px);left:-4%;top:31%;transform:rotate(-8deg);animation:themeFloatA 30s ease-in-out infinite alternate}
.theme-b{font-size:clamp(42px,4.8vw,78px);right:-5%;top:55%;transform:rotate(7deg);animation:themeFloatB 35s ease-in-out -9s infinite alternate}
.theme-c{font-size:clamp(32px,3.7vw,62px);left:28%;bottom:8%;transform:rotate(-3deg);animation:themeFloatC 27s ease-in-out -16s infinite alternate}
@keyframes themeFloatA{0%{transform:translate3d(-7%,8%,0) rotate(-8deg)}50%{transform:translate3d(20%,-9%,0) rotate(-3deg)}100%{transform:translate3d(47%,9%,0) rotate(4deg)}}
@keyframes themeFloatB{0%{transform:translate3d(9%,-6%,0) rotate(7deg)}50%{transform:translate3d(-19%,11%,0) rotate(2deg)}100%{transform:translate3d(-42%,-8%,0) rotate(-5deg)}}
@keyframes themeFloatC{0%{transform:translate3d(-13%,3%,0) rotate(-3deg)}50%{transform:translate3d(17%,-20%,0) rotate(3deg)}100%{transform:translate3d(37%,2%,0) rotate(-1deg)}}

@media(max-width:900px){
  .circle-brand-logo{width:54px;margin:20px 0 16px}
  .app-lab{grid-template-columns:1fr;padding-top:56px;padding-bottom:56px}
  .app-lab-head{padding:0 0 34px;border-right:0;border-bottom:1px solid rgba(255,255,255,.28)}
  .app-lab-head h3{font-size:clamp(44px,13vw,64px);margin:20px 0 22px}
  .app-grid{grid-column:1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-card,.app-card:first-child,.app-card:last-child{padding:32px 18px;min-height:260px}
  .app-card img{width:88px}
  .app-card h4{font-size:48px}
  .theme-word{opacity:.065}
}
@media(max-width:620px){
  .app-grid{grid-template-columns:1fr}
  .app-card,.app-card:first-child,.app-card:last-child{display:grid;grid-template-columns:86px 1fr;gap:22px;align-items:center;min-height:0;padding:30px 0;border-bottom:1px solid rgba(255,255,255,.25)}
  .app-card img{width:86px}
  .app-card h4{font-size:46px}
}
@media(prefers-reduced-motion:reduce){.theme-word{animation:none!important}}


/* v16 REAL — CA placement, manBoze archive drift, PON spacing, true footer arrival */

/* CA logo: upper-right of the black circle around panel. */
.circle-title{
  position:relative;
  isolation:isolate;
}
.circle-brand-logo{
  position:absolute!important;
  top:clamp(42px,5vw,78px)!important;
  right:clamp(34px,4.6vw,78px)!important;
  width:clamp(66px,6.2vw,102px)!important;
  height:auto!important;
  margin:0!important;
  filter:invert(1)!important;
  opacity:.98;
  z-index:3;
}
.circle-title h3{
  margin-top:34px!important;
}

/* Three-column app section: keep PON comfortably away from the dividing line. */
.app-lab{
  grid-template-columns:minmax(230px,.72fr) minmax(0,1fr) minmax(0,1fr)!important;
}
.app-grid{
  grid-column:2 / 4!important;
  padding-left:clamp(22px,2.4vw,38px);
}
.app-card,
.app-card:first-child,
.app-card:last-child{
  min-width:0;
}
.app-card:first-child{
  padding-left:clamp(34px,3.4vw,54px)!important;
  padding-right:clamp(34px,3.4vw,54px)!important;
}
.app-card:last-child{
  padding-left:clamp(34px,3.4vw,54px)!important;
}
.app-card img{
  flex:0 0 auto;
}

/* manBoze: archive-like bold sans themes drifting like objects in a dark tank. */
.manboze-dark{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.manboze-dark > img,
.manboze-dark > p{
  position:relative;
  z-index:4;
}
.manboze-themes{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
.theme-word{
  position:absolute;
  display:block;
  white-space:nowrap;
  color:#fff;
  font-family:var(--sans);
  font-weight:700;
  font-style:normal;
  letter-spacing:-.045em;
  line-height:.9;
  opacity:0;
  will-change:transform,opacity;
  mix-blend-mode:screen;
}
.tw-1{font-size:clamp(54px,6.4vw,108px);left:-8%;top:13%;animation:themeDrift1 44s ease-in-out -2s infinite}
.tw-2{font-size:clamp(48px,5.8vw,96px);left:8%;top:43%;animation:themeDrift2 51s ease-in-out -13s infinite}
.tw-3{font-size:clamp(26px,3.2vw,54px);left:-6%;bottom:10%;animation:themeDrift3 58s ease-in-out -21s infinite}
.tw-4{font-size:clamp(30px,3.7vw,62px);right:-10%;top:27%;animation:themeDrift4 49s ease-in-out -29s infinite}
.tw-5{font-size:clamp(46px,5.2vw,86px);right:4%;bottom:7%;animation:themeDrift5 55s ease-in-out -37s infinite}
.tw-6{font-size:clamp(42px,4.8vw,78px);left:30%;top:8%;animation:themeDrift6 47s ease-in-out -17s infinite}
.tw-7{font-size:clamp(42px,4.7vw,76px);left:38%;bottom:26%;animation:themeDrift7 60s ease-in-out -43s infinite}
.tw-8{font-size:clamp(34px,4vw,68px);right:20%;top:58%;animation:themeDrift8 53s ease-in-out -9s infinite}
.tw-9{font-size:clamp(38px,4.4vw,72px);left:15%;top:66%;animation:themeDrift9 57s ease-in-out -33s infinite}

@keyframes themeDrift1{
  0%,100%{opacity:.02;transform:translate3d(-12%,12%,0) rotate(-7deg)}
  18%{opacity:.10}
  48%{opacity:.055;transform:translate3d(34%,-4%,0) rotate(-2deg)}
  72%{opacity:.11}
  88%{opacity:.02;transform:translate3d(74%,10%,0) rotate(5deg)}
}
@keyframes themeDrift2{
  0%,100%{opacity:.015;transform:translate3d(-18%,-6%,0) rotate(5deg)}
  14%{opacity:.08}
  44%{opacity:.11;transform:translate3d(24%,8%,0) rotate(1deg)}
  78%{opacity:.045}
  90%{opacity:.015;transform:translate3d(62%,-12%,0) rotate(-4deg)}
}
@keyframes themeDrift3{
  0%,100%{opacity:.015;transform:translate3d(-8%,8%,0) rotate(-3deg)}
  22%{opacity:.085}
  52%{opacity:.04;transform:translate3d(36%,-18%,0) rotate(3deg)}
  77%{opacity:.095}
  92%{opacity:.015;transform:translate3d(78%,2%,0) rotate(-1deg)}
}
@keyframes themeDrift4{
  0%,100%{opacity:.015;transform:translate3d(20%,-10%,0) rotate(7deg)}
  20%{opacity:.09}
  55%{opacity:.045;transform:translate3d(-28%,16%,0) rotate(2deg)}
  82%{opacity:.10}
  94%{opacity:.015;transform:translate3d(-62%,-6%,0) rotate(-5deg)}
}
@keyframes themeDrift5{
  0%,100%{opacity:.02;transform:translate3d(12%,16%,0) rotate(-5deg)}
  17%{opacity:.075}
  47%{opacity:.12;transform:translate3d(-22%,-18%,0) rotate(1deg)}
  76%{opacity:.05}
  91%{opacity:.02;transform:translate3d(-58%,4%,0) rotate(5deg)}
}
@keyframes themeDrift6{
  0%,100%{opacity:.015;transform:translate3d(-20%,-10%,0) rotate(2deg)}
  19%{opacity:.10}
  51%{opacity:.04;transform:translate3d(18%,22%,0) rotate(-4deg)}
  80%{opacity:.085}
  93%{opacity:.015;transform:translate3d(52%,4%,0) rotate(4deg)}
}
@keyframes themeDrift7{
  0%,100%{opacity:.015;transform:translate3d(20%,8%,0) rotate(-6deg)}
  16%{opacity:.075}
  45%{opacity:.11;transform:translate3d(-18%,-20%,0) rotate(-1deg)}
  76%{opacity:.045}
  92%{opacity:.015;transform:translate3d(-56%,6%,0) rotate(5deg)}
}
@keyframes themeDrift8{
  0%,100%{opacity:.015;transform:translate3d(16%,-4%,0) rotate(4deg)}
  21%{opacity:.085}
  54%{opacity:.045;transform:translate3d(-26%,16%,0) rotate(-3deg)}
  79%{opacity:.10}
  93%{opacity:.015;transform:translate3d(-64%,-8%,0) rotate(2deg)}
}
@keyframes themeDrift9{
  0%,100%{opacity:.015;transform:translate3d(-16%,10%,0) rotate(-2deg)}
  18%{opacity:.09}
  49%{opacity:.05;transform:translate3d(28%,-16%,0) rotate(4deg)}
  75%{opacity:.105}
  91%{opacity:.015;transform:translate3d(68%,0,0) rotate(-4deg)}
}





@media(max-width:900px){
  .circle-brand-logo{
    top:42px!important;
    right:22px!important;
    width:62px!important;
  }
  .app-grid{
    padding-left:0;
  }
  .app-card:first-child{
    padding-left:18px!important;
  }
  .theme-word{
    letter-spacing:-.035em;
  }
}

@media(max-width:620px){
  .circle-brand-logo{
    top:34px!important;
    right:18px!important;
    width:56px!important;
  }
  .app-card:first-child{
    padding-left:0!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .theme-word{animation:none!important;opacity:.04!important}
}




/* Header uses only the compact Vessel trapezoid symbol, avoiding a second Vessel Inc. wordmark. */
.brand{
  width:clamp(50px,4.2vw,62px)!important;
  height:auto!important;
  display:inline-flex!important;
  align-items:center;
  flex:0 0 auto;
}
.brand-symbol{
  display:block;
  width:100%;
  height:auto;
}

/* Remove the sub-pixel seam between APP PROJECTS and the following photograph. */
.products,
.app-lab{
  margin-bottom:0!important;
  border-bottom:0!important;
}
.products + .image-break{
  margin-top:-2px!important;
  border-top:0!important;
}
.image-break{
  display:block;
  background:#000;
}
.image-break .break-xfade,
.image-break .xfade-layer{
  top:-1px!important;
  bottom:-1px!important;
  height:calc(100% + 2px)!important;
}






@media(max-width:900px){
  .brand{width:50px!important}
}
@media(max-width:430px){
  .brand{width:46px!important}
}


/* v17.3 — use the exact original Vessel logo asset in the header. */
.brand{
  width:clamp(108px,9.2vw,140px)!important;
  height:auto!important;
  display:inline-flex!important;
  align-items:center;
  flex:0 0 auto;
}
.brand-original-logo{
  display:block;
  width:100%;
  height:auto;
}
.brand-symbol{display:none!important}
@media(max-width:900px){
  .brand{width:112px!important}
}
@media(max-width:430px){
  .brand{width:104px!important}
}


/* v17.5 — manifesto mini logo removed, with a defensive hide for stale markup */
.manifesto-mini-mark{display:none!important}


/* v17.6 — iPhone-only fit refinements for app cards and About headline */
@media(max-width:620px){
  .app-lab{
    grid-template-columns:1fr!important;
    padding-top:52px!important;
    padding-bottom:52px!important;
  }
  .app-lab-head{
    padding:0 0 30px!important;
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.28)!important;
  }
  .app-lab-head h3{
    font-size:clamp(40px,14vw,52px)!important;
    line-height:.92!important;
    margin:18px 0 18px!important;
  }
  .app-lab-head > .jp{
    max-width:18ch!important;
  }
  .app-grid{
    grid-column:1!important;
    grid-template-columns:1fr!important;
    padding-left:0!important;
  }
  .app-card,
  .app-card:first-child,
  .app-card:last-child{
    display:grid!important;
    grid-template-columns:78px minmax(0,1fr)!important;
    align-items:center!important;
    gap:18px!important;
    padding:26px 0!important;
    min-height:0!important;
    overflow:hidden;
  }
  .app-card > div{min-width:0}
  .app-card img{width:78px!important}
  .app-card .app-status{
    font-size:8px!important;
    letter-spacing:.13em!important;
    line-height:1.45!important;
    overflow-wrap:anywhere;
  }
  .app-card h4{
    font-size:clamp(42px,11vw,46px)!important;
    line-height:.96!important;
    margin:0 0 6px!important;
  }
  .app-card div > p:last-child{
    font-size:clamp(14px,4.8vw,17px)!important;
    line-height:1.08!important;
    overflow-wrap:anywhere;
  }

  .about-head h2{
    font-size:clamp(54px,14vw,76px)!important;
    line-height:.96!important;
    letter-spacing:-.05em!important;
  }
  .about-head h2 .title-line:nth-child(2),
  .about-head h2 .title-line:nth-child(3){
    white-space:nowrap;
  }
}

@media(max-width:430px){
  .app-card,
  .app-card:first-child,
  .app-card:last-child{
    grid-template-columns:74px minmax(0,1fr)!important;
    gap:16px!important;
    padding:24px 0!important;
  }
  .app-card img{width:74px!important}
  .app-card h4{font-size:40px!important}
  .about-head h2{font-size:13.7vw!important}
}


/* v17.7 — iPhone app-section polish */
@media(max-width:620px){
  .app-lab{
    padding-top:46px!important;
    padding-bottom:48px!important;
  }
  .app-lab-head{
    display:block!important;
    max-width:100%!important;
    padding:0 0 22px!important;
  }
  .app-lab-head .eyebrow{
    margin:0 0 18px!important;
  }
  .app-lab-head h3{
    font-size:clamp(39px,12.4vw,48px)!important;
    line-height:.94!important;
    margin:0 0 18px!important;
    letter-spacing:-.04em!important;
  }
  .app-lab-head > .jp{
    width:min(19ch,100%)!important;
    max-width:19ch!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.78!important;
  }
  .app-grid{
    margin-top:4px!important;
  }
  .app-card,
  .app-card:first-child,
  .app-card:last-child{
    grid-template-columns:82px minmax(0,1fr)!important;
    gap:18px!important;
    padding:24px 0!important;
    align-items:center!important;
  }
  .app-card img{
    width:82px!important;
    align-self:center!important;
  }
  .app-card > div{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
  }
  .app-card .app-status{
    margin:0 0 4px!important;
    font-size:8px!important;
    letter-spacing:.12em!important;
    line-height:1.38!important;
    white-space:normal!important;
  }
  .app-card h4{
    font-size:clamp(38px,9.8vw,44px)!important;
    line-height:.97!important;
    margin:0 0 4px!important;
    letter-spacing:-.03em!important;
  }
  .app-card div > p:last-child{
    font-size:clamp(13px,4.4vw,16px)!important;
    line-height:1.08!important;
    margin:0!important;
  }
}

@media(max-width:430px){
  .app-card,
  .app-card:first-child,
  .app-card:last-child{
    grid-template-columns:78px minmax(0,1fr)!important;
    gap:16px!important;
  }
  .app-card img{width:78px!important}
  .app-card h4{font-size:40px!important}
}


/* v17.8 — helper */
.nowrap{white-space:nowrap}


/* v17.9 — iPhone app intro exact lines + lighter route styling */
.app-intro-jp .line{display:block}

@media(max-width:620px){
  .app-intro-jp{
    font-size:15px!important;
    line-height:1.78!important;
    max-width:none!important;
    width:100%!important;
  }
  .app-intro-jp .line{
    white-space:nowrap;
  }

  
  
}


/* v17.10 — mobile flight line refinement */
@media(max-width:620px){
  
  
}


/* v17.14 FINAL — iPhone flight removed and fixed */
@media(max-width:620px){
  
}

/* v17.15 NO FLIGHT — aircraft, route line and all related behavior removed on every viewport. */

/* v17.24 — final responsive Hero geometry.
   Wide desktop keeps the established MBP composition. Near-square / tall
   desktop windows (the Mac Pro split-window case) use a dedicated layout:
   less empty space above, and the photograph starts at the CARRY headline
   line instead of floating above it. Mobile/iPhone remains unchanged. */
@media (min-width:901px){
  .hero{
    --hero-wide-top:clamp(170px,20vw,280px);
    align-items:flex-start!important;
    min-height:auto!important;
    height:auto!important;
    padding-top:var(--hero-wide-top)!important;
    padding-bottom:72px!important;
  }
  .hero-photo-frame{
    top:calc(var(--hero-wide-top) - 34px)!important;
    bottom:auto!important;
  }
  .hero-title{
    font-family:"Helvetica Neue",Arial,sans-serif;
    font-synthesis:none;
  }
}

/* Mac Pro / compact tall desktop.
   The aspect-ratio condition is intentional: display scaling can leave a
   split Mac Pro window wider than 1200 CSS pixels, so a width-only breakpoint
   does not reliably target the actual layout. */
@media (min-width:901px) and (max-aspect-ratio:13/10){
  .hero{
    --hero-compact-top:clamp(118px,9.5vh,150px);
    padding-top:var(--hero-compact-top)!important;
    padding-bottom:54px!important;
  }
  .hero-photo-frame{
    top:calc(var(--hero-compact-top) + 54px)!important;
    bottom:auto!important;
    width:clamp(420px,47vw,690px)!important;
    height:clamp(188px,21.5vw,305px)!important;
    right:clamp(24px,4.6vw,70px)!important;
  }
  .hero-bottom{
    margin-top:44px!important;
  }
}

/* Eliminate browser-specific sub-pixel gaps between the blue APP PROJECTS
   section and the following PON. photograph. The fallback is blue, never black. */
.products,
.app-lab{
  margin-bottom:0!important;
  border-bottom:0!important;
}
.products + .image-break{
  position:relative;
  z-index:2;
  margin-top:-4px!important;
  border-top:0!important;
  background:var(--blue)!important;
}
.image-break .break-xfade{
  inset:-4px 0 -2px!important;
  height:auto!important;
  background:var(--blue)!important;
}
.image-break .break-xfade .xfade-layer{
  inset:auto 0 auto 0!important;
  top:-7%!important;
  bottom:auto!important;
  width:100%!important;
  height:115%!important;
  object-fit:cover!important;
}


/* v17.25 — desktop hero split-window refinement.
   Goals:
   1) Mac Pro / taller split windows: drop the photo a little so it no longer
      starts exactly at the CARRY top line.
   2) MBP / wider split windows: reduce the reintroduced empty top space.
   3) Open the headline tracking slightly so the E and A in IDEAS do not kiss. */
@media (min-width:901px){
  .hero-title{
    letter-spacing:-.045em!important;
    line-height:.79!important;
    font-kerning:normal;
    font-feature-settings:"kern" 1;
    text-rendering:geometricPrecision;
  }
}

/* Wide desktop / MBP-like aspect: lift the photograph slightly and trim
   the top padding so the image does not drift too low. */
@media (min-width:901px) and (min-aspect-ratio:14/10){
  .hero{
    --hero-wide-top:clamp(150px,15vw,220px)!important;
    padding-top:var(--hero-wide-top)!important;
    padding-bottom:66px!important;
  }
  .hero-photo-frame{
    top:clamp(128px,11vw,170px)!important;
    width:clamp(430px,49vw,820px)!important;
    height:clamp(188px,21.8vw,345px)!important;
    right:clamp(24px,4.8vw,74px)!important;
  }
  .hero-bottom{margin-top:42px!important}
}

/* Mac Pro / compact-tall split-window: push the photograph slightly down so
   it sits below the CARRY start instead of exactly level with it. */
@media (min-width:901px) and (max-aspect-ratio:13/10){
  .hero{
    --hero-compact-top:clamp(112px,8.8vh,142px)!important;
    padding-top:var(--hero-compact-top)!important;
    padding-bottom:56px!important;
  }
  .hero-photo-frame{
    top:clamp(182px,18vw,232px)!important;
    width:clamp(420px,46.5vw,680px)!important;
    height:clamp(184px,21vw,298px)!important;
    right:clamp(24px,4.5vw,68px)!important;
  }
  .hero-bottom{margin-top:40px!important}
}


/* v17.26 — manBoze theme visibility boost + desktop hero tightening.
   - more legible drifting past themes
   - subtle archive label
   - slightly darker / denser theme field
   - desktop hero top space tightened on both Mac Pro and MBP cases */
.manboze-dark{
  background:#030303;
}
.manboze-themes{
  z-index:2;
}
.manboze-themes::after{
  content:"past themes of manBoze";
  position:absolute;
  left:26px;
  bottom:22px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.22);
  white-space:nowrap;
  mix-blend-mode:screen;
}
.theme-word{
  color:rgba(255,255,255,.9)!important;
  text-shadow:0 0 18px rgba(255,255,255,.08);
  mix-blend-mode:normal;
}
.tw-1,.tw-2,.tw-3,.tw-4,.tw-5,.tw-6,.tw-7,.tw-8,.tw-9{
  opacity:.05;
}
@keyframes themeDrift1{
  0%,100%{opacity:.06;transform:translate3d(-10%,10%,0) rotate(-7deg)}
  24%{opacity:.17}
  52%{opacity:.10;transform:translate3d(28%,-3%,0) rotate(-2deg)}
  76%{opacity:.20}
}
@keyframes themeDrift2{
  0%,100%{opacity:.05;transform:translate3d(-14%,-4%,0) rotate(5deg)}
  18%{opacity:.14}
  46%{opacity:.19;transform:translate3d(20%,8%,0) rotate(1deg)}
  78%{opacity:.09}
}
@keyframes themeDrift3{
  0%,100%{opacity:.05;transform:translate3d(-6%,8%,0) rotate(-3deg)}
  26%{opacity:.15}
  56%{opacity:.09;transform:translate3d(30%,-14%,0) rotate(3deg)}
  82%{opacity:.18}
}
@keyframes themeDrift4{
  0%,100%{opacity:.05;transform:translate3d(16%,-8%,0) rotate(7deg)}
  22%{opacity:.16}
  54%{opacity:.09;transform:translate3d(-24%,14%,0) rotate(2deg)}
  84%{opacity:.18}
}
@keyframes themeDrift5{
  0%,100%{opacity:.06;transform:translate3d(10%,14%,0) rotate(-5deg)}
  20%{opacity:.14}
  48%{opacity:.20;transform:translate3d(-18%,-16%,0) rotate(1deg)}
  78%{opacity:.10}
}
@keyframes themeDrift6{
  0%,100%{opacity:.05;transform:translate3d(-16%,-8%,0) rotate(2deg)}
  24%{opacity:.17}
  56%{opacity:.09;transform:translate3d(16%,18%,0) rotate(-4deg)}
  84%{opacity:.15}
}
@keyframes themeDrift7{
  0%,100%{opacity:.05;transform:translate3d(18%,8%,0) rotate(-6deg)}
  20%{opacity:.13}
  48%{opacity:.18;transform:translate3d(-16%,-18%,0) rotate(-1deg)}
  78%{opacity:.09}
}
@keyframes themeDrift8{
  0%,100%{opacity:.05;transform:translate3d(14%,-4%,0) rotate(4deg)}
  24%{opacity:.15}
  56%{opacity:.09;transform:translate3d(-22%,14%,0) rotate(-3deg)}
  84%{opacity:.18}
}
@keyframes themeDrift9{
  0%,100%{opacity:.05;transform:translate3d(-14%,10%,0) rotate(-2deg)}
  20%{opacity:.16}
  52%{opacity:.10;transform:translate3d(24%,-14%,0) rotate(4deg)}
  80%{opacity:.19}
}
@media(max-width:900px){
  .manboze-themes::after{
    left:20px;
    bottom:18px;
    font-size:9px;
    opacity:.78;
  }
}
@media(prefers-reduced-motion:reduce){
  .theme-word{opacity:.09!important}
}

@media (min-width:901px){
  .hero-title{
    letter-spacing:-.04em!important;
    line-height:.785!important;
  }
  .hero-bottom{
    margin-top:38px!important;
  }
}
@media (min-width:901px) and (min-aspect-ratio:14/10){
  .hero{
    --hero-wide-top:clamp(138px,13.4vw,200px)!important;
    padding-top:var(--hero-wide-top)!important;
    padding-bottom:62px!important;
  }
  .hero-photo-frame{
    top:clamp(144px,10.8vw,166px)!important;
    width:clamp(430px,49vw,820px)!important;
    height:clamp(188px,21.8vw,345px)!important;
    right:clamp(24px,4.8vw,74px)!important;
  }
  .hero-bottom{margin-top:36px!important}
}
@media (min-width:901px) and (max-aspect-ratio:13/10){
  .hero{
    --hero-compact-top:clamp(104px,8.2vh,132px)!important;
    padding-top:var(--hero-compact-top)!important;
    padding-bottom:52px!important;
  }
  .hero-photo-frame{
    top:clamp(176px,17.5vw,224px)!important;
    width:clamp(420px,46.5vw,680px)!important;
    height:clamp(184px,21vw,298px)!important;
    right:clamp(24px,4.5vw,68px)!important;
  }
  .hero-bottom{margin-top:36px!important}
}


/* v17.27 — separate the IDEAS letterforms without touching Hero geometry. */
@media (min-width:901px){
  .hero-title > span:nth-child(2){
    letter-spacing:0!important;
  }
}

/* v17.28 — iPhone-only full-bleed media.
   The top PON photograph and the manBoze card reach the viewport edges,
   while all text/content padding and every desktop/tablet layout stay intact. */
@media (max-width:620px){
  .hero-mobile-photo{
    position:relative!important;
    left:50%!important;
    width:100vw!important;
    max-width:none!important;
    margin-left:-50vw!important;
    margin-right:-50vw!important;
    border-left:0!important;
    border-right:0!important;
    box-sizing:border-box;
  }

  #event .manboze-card{
    position:relative;
    left:50%;
    width:100vw!important;
    max-width:none!important;
    margin-left:-50vw!important;
    margin-right:-50vw!important;
    border-left:0!important;
    border-right:0!important;
    box-sizing:border-box;
  }
}


/* v17.30 — refine only the desktop D–E–A spacing in IDEAS.
   Restore normal kerning for I/D/E/S and reduce the explicit E–A gap to
   roughly half of v17.29. Mobile/iPhone and all Hero geometry are unchanged. */
.hero-title > .ideas-line > .ideas-a{display:inline-block!important}
@media (min-width:901px){
  .hero-title > .ideas-line{
    letter-spacing:-.025em!important;
    font-kerning:normal!important;
    font-feature-settings:"kern" 1!important;
  }
  .hero-title > .ideas-line > .ideas-a{
    display:inline-block!important;
    margin-left:.035em!important;
    letter-spacing:-.025em!important;
  }
}

/* v17.31 — contact conversation modal */
.contact-conversation{margin-top:clamp(44px,6vw,82px);max-width:820px}
.contact-invite{margin:0 0 28px;font-size:clamp(17px,1.55vw,24px);line-height:1.55;letter-spacing:.01em}
.contact-invite span{display:inline-block;margin-top:8px;font-size:.72em;letter-spacing:.04em;opacity:.72}
.contact-open-button{width:min(760px,100%);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 0;border:0;border-top:1px solid rgba(255,255,255,.48);border-bottom:1px solid rgba(255,255,255,.48);background:transparent;color:#fff;font:700 clamp(17px,1.7vw,25px)/1 var(--sans);letter-spacing:.15em;text-align:left;cursor:pointer;transition:padding .3s ease,background .3s ease,color .3s ease}
.contact-open-button span:last-child{font-size:1.25em;letter-spacing:0}
.contact-open-button:hover,.contact-open-button:focus-visible{padding-left:20px;padding-right:20px;background:#fff;color:var(--blue)}
.contact-direct-label{margin:clamp(44px,6vw,76px) 0 -74px;font-size:9px;letter-spacing:.18em;opacity:.62}
body.contact-modal-open{overflow:hidden}
.contact-modal[hidden]{display:none!important}
.contact-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px}
.contact-modal-backdrop{position:absolute;inset:0;background:rgba(3,6,11,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:contactFade .28s ease both}
.contact-dialog{position:relative;z-index:1;width:min(1080px,calc(100vw - 48px));max-height:calc(100dvh - 48px);display:grid;grid-template-columns:minmax(280px,.8fr) minmax(400px,1.2fr);overflow:auto;background:var(--paper);color:#080808;box-shadow:0 32px 100px rgba(0,0,0,.35);animation:contactRise .38s cubic-bezier(.22,1,.36,1) both}
.contact-dialog-close{position:absolute;right:22px;top:22px;z-index:3;width:44px;height:44px;border:1px solid rgba(0,0,0,.22);background:rgba(244,241,232,.9);cursor:pointer}
.contact-dialog-close span{position:absolute;left:10px;right:10px;top:21px;height:1px;background:#080808;transform:rotate(45deg)}
.contact-dialog-close span:last-child{transform:rotate(-45deg)}
.contact-dialog-intro{min-height:100%;padding:clamp(42px,5vw,72px);background:var(--blue);color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.contact-dialog-intro h2{margin:30px 0 42px;font-size:clamp(52px,5.6vw,86px);line-height:.82;letter-spacing:-.06em}
.contact-dialog-intro>p:last-child{margin:0;font-size:18px;line-height:1.5}
.contact-dialog-intro>p:last-child span{font-size:13px;opacity:.72}
.contact-dialog-body{padding:clamp(48px,5vw,74px)}
.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 25px}
.contact-field{display:grid;gap:10px;min-width:0}
.contact-field>span{font-size:10px;font-weight:700;letter-spacing:.16em}
.contact-field>span b{color:var(--blue);font-weight:700}
.contact-field>span small{display:block;margin-top:5px;font-size:10px;font-weight:400;letter-spacing:.04em;opacity:.52}
.contact-field input,.contact-field textarea{width:100%;border:0;border-bottom:1px solid rgba(0,0,0,.3);border-radius:0;background:transparent;color:#080808;padding:10px 0 12px;font:16px/1.5 var(--sans);outline:none;transition:border-color .2s ease}
.contact-field textarea{resize:vertical;min-height:150px}
.contact-field input:focus,.contact-field textarea:focus{border-color:var(--blue);border-bottom-width:2px}
.contact-field-message{grid-column:1/-1}
.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact-form-status{min-height:23px;margin-top:22px;font-size:13px;line-height:1.5;color:#9b2433}
.contact-submit{width:100%;margin-top:6px;padding:21px 24px;display:flex;justify-content:space-between;align-items:center;border:1px solid #080808;background:#080808;color:#fff;font:700 13px/1 var(--sans);letter-spacing:.2em;cursor:pointer;transition:background .25s ease,color .25s ease}
.contact-submit:hover,.contact-submit:focus-visible{background:var(--blue);border-color:var(--blue)}
.contact-submit:disabled{opacity:.52;cursor:wait}
.contact-form-note{margin:17px 0 0;font-size:10px;line-height:1.7;letter-spacing:.05em;opacity:.5}
.contact-success{min-height:480px;display:flex;flex-direction:column;justify-content:center}
.contact-success h3{margin:26px 0 34px;font-size:clamp(56px,6vw,94px);line-height:.85;letter-spacing:-.06em}
.contact-success>p:not(.eyebrow){font-size:19px;line-height:1.5;margin:0 0 18px}
.contact-success .jp{font-size:14px!important;opacity:.68}
.contact-success-close{margin-top:42px;padding:18px 22px;border:1px solid #080808;background:transparent;font:700 11px/1 var(--sans);letter-spacing:.18em;cursor:pointer}
.contact-success-close:hover,.contact-success-close:focus-visible{background:#080808;color:#fff}
@keyframes contactFade{from{opacity:0}to{opacity:1}}
@keyframes contactRise{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:900px){
  .contact-conversation{margin-top:38px}
  .contact-invite{font-size:17px}
  .contact-open-button{font-size:13px;padding:21px 0;letter-spacing:.12em}
  .contact-direct-label{margin:38px 0 -32px}
  .contact-modal{place-items:end center;padding:0}
  .contact-dialog{width:100%;max-height:94dvh;grid-template-columns:1fr;animation-name:contactSheet;border-radius:0}
  .contact-dialog-intro{min-height:auto;padding:32px 24px 28px;justify-content:flex-start}
  .contact-dialog-intro h2{margin:22px 0 25px;font-size:clamp(50px,14vw,68px)}
  .contact-dialog-intro>p:last-child{font-size:15px}
  .contact-dialog-close{right:14px;top:14px;background:rgba(49,78,120,.9);border-color:rgba(255,255,255,.45)}
  .contact-dialog-close span{background:#fff}
  .contact-dialog-body{padding:32px 24px 40px}
  .contact-form-grid{grid-template-columns:1fr;gap:23px}
  .contact-field-message{grid-column:auto}
  .contact-field textarea{min-height:130px}
  .contact-success{min-height:420px}
  @keyframes contactSheet{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){.contact-modal-backdrop,.contact-dialog{animation:none}}

/* v17.31 modal typography fit refinement */
@media(min-width:901px){
  .contact-dialog{grid-template-columns:minmax(420px,.95fr) minmax(460px,1.05fr)}
  .contact-dialog-intro{padding:54px}
  .contact-dialog-intro h2{font-size:clamp(46px,3.8vw,56px);line-height:.86;letter-spacing:-.055em}
}
@media(max-width:900px){
  .contact-dialog-intro h2{font-size:clamp(39px,10.8vw,48px);line-height:.88;letter-spacing:-.055em;white-space:nowrap}
}
.contact-success[hidden],.contact-dialog-body form[hidden]{display:none!important}


/* v17.32 — tighten only I–D–E on desktop while preserving the E–A gap.
   Contact modal, favicon assets, Hero geometry and iPhone layout are untouched. */
@media (min-width:901px){
  .hero-title > .ideas-line{
    letter-spacing:0!important;
    font-kerning:none!important;
    font-feature-settings:"kern" 0!important;
  }
  .hero-title > .ideas-line > .ideas-ide{
    display:inline-block;
    letter-spacing:-.034em!important;
  }
  .hero-title > .ideas-line > .ideas-a{
    display:inline-block!important;
    margin-left:.044em!important;
    letter-spacing:0!important;
  }
  .hero-title > .ideas-line > .ideas-s{
    display:inline-block;
    margin-left:-.025em!important;
  }
}

/* v17.33 — iPhone/mobile IDEAS regression fix.
   The desktop-only IDE/A/S wrapper spans introduced for v17.32 spacing were
   inheriting the global Hero span { display:block } rule on small screens,
   which split IDEAS into IDE / A / S. Keep the established desktop spacing
   untouched and restore IDEAS as one unbroken line on mobile only. */
@media (max-width:620px){
  .hero-title > .ideas-line{
    white-space:nowrap!important;
  }
  .hero-title > .ideas-line > .ideas-ide,
  .hero-title > .ideas-line > .ideas-a,
  .hero-title > .ideas-line > .ideas-s{
    display:inline!important;
    margin-left:0!important;
    letter-spacing:inherit!important;
  }
}