/* ===================================================================
   KINSHIRO — shared stylesheet
   Light-first. The crest is present everywhere except the client's work.
   =================================================================== */

:root{
  --washi:      #F6F4EE;  /* page background — never pure white */
  --washi-lift: #FBFAF6;  /* raised paper: the report mockup only */
  --kin:        #B08D57;  /* gold — linework, rules, crest, CTA fill ONLY (2.8:1 on washi — never text) */
  --kin-hover:  #C7A16B;  /* CTA hover fill — lighter, keeps ink text >4.5:1 */
  --kin-text:   #7A5D2E;  /* gold wherever it's actually TEXT — 5.6:1 on washi, verified */
  --ishi:       #4A4645;  /* warm stone — secondary text, ~7.9:1 on washi */
  --kon:        #1B2A41;  /* navy-black — headlines, crest detail, never a bg */
  --ink:        #24231F;  /* body text */
  --moss:       #7C8A68;  /* sparse accent only — decorative (zen garden), NOT text */
  --moss-text:  #5C6650;  /* moss wherever it's actually TEXT — 5.5:1 on washi, verified */
  --line:       rgba(27,42,65,.12);

  --display:"Shippori Mincho",Georgia,serif;
  --text:"Zen Kaku Gothic New",system-ui,-apple-system,sans-serif;

  --gutter:clamp(24px,7vw,140px);
  --measure:62ch;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--washi);
  color:var(--ink);
  font-family:var(--text);
  font-weight:400;
  font-size:16.5px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* paper grain — multiply, not overlay: overlay was tuned for dark and washes out on paper */
.grain{
  position:fixed; inset:0; z-index:100; pointer-events:none;
  opacity:.03; mix-blend-mode:multiply;
}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;letter-spacing:.005em;color:var(--kon)}
h1{font-size:clamp(36px,6vw,68px);line-height:1.18;font-weight:700}
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.32;font-weight:600}
h3{font-size:18.5px;line-height:1.5;font-weight:600;color:var(--kon)}
p{margin:0 0 1.25em;max-width:var(--measure);color:var(--ink)}
a{color:inherit}

.lede{font-size:clamp(16.5px,1.55vw,19px);line-height:1.8;color:var(--ishi)}
.hl{color:var(--kin-text);font-weight:500}
.quiet{color:var(--ishi)}

/* marginal vertical japanese type */
.vmark{
  position:absolute; left:calc(var(--gutter) * -.62); top:6px;
  writing-mode:vertical-rl;
  font-family:var(--display);
  font-size:13px; letter-spacing:.5em;
  color:var(--kin-text); opacity:.85;
}

/* ---------- header ---------- */
.topline{height:4px;background:linear-gradient(90deg,var(--kon) 0%,var(--kin) 28%,var(--kin-hover) 50%,var(--kin) 72%,var(--kon) 100%)}

header{position:relative;z-index:20;background:var(--washi)}
.home header{position:absolute;top:4px;left:0;right:0;background:none}
.nav{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:26px 0}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:20px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--kin-text);font-weight:700}
.crest-mark{object-fit:contain}
.brand .crest-mark{width:30px;height:30px;flex:none}
.nav-links{display:flex;gap:32px}
.nav-links a{text-decoration:none;font-size:14.5px;color:var(--ishi);padding-bottom:3px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a.active{color:var(--kon);border-color:var(--kin)}

.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--kon);font-family:var(--text);font-size:13.5px;letter-spacing:.03em;cursor:pointer;padding:9px 18px;border-radius:2px;transition:border-color .3s}
.nav-toggle:hover,.nav-toggle:focus-visible{border-color:var(--kin)}
.mobile-menu{display:none;flex-direction:column;padding:6px var(--gutter) 26px}
.mobile-menu a{padding:13px 0;font-size:15px;color:var(--ishi);text-decoration:none;border-top:1px solid var(--line)}
.mobile-menu a:first-child{border-top:none}
.mobile-menu a:hover,.mobile-menu a:focus-visible{color:var(--kon)}
.mobile-menu.open{display:flex}
@media (min-width:881px){.mobile-menu{display:none!important}}

/* ---------- hero (centered, crest watermark) ---------- */
.hero{position:relative;padding:clamp(128px,18vh,180px) 0 clamp(90px,15vh,170px);overflow:hidden;text-align:center}
.hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.zen-garden{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.zen-garden::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(246,244,238,.87) 0%,rgba(246,244,238,.64) 16%,rgba(246,244,238,.38) 36%,rgba(246,244,238,.22) 58%,rgba(246,244,238,.3) 100%)}
.zen-garden svg{width:100%;height:100%;display:block}
.zen-photo{width:100%;height:100%;display:block;object-fit:cover;object-position:center 32%}
.rock{fill:var(--ishi);opacity:.09}
.rock-line{fill:none;stroke:var(--ishi);stroke-width:1;opacity:.16}
.moss{fill:var(--moss);opacity:.32}
.plant{fill:none;stroke:var(--moss);stroke-width:1.3;stroke-linecap:round;opacity:.38}
.rake{fill:none;stroke:var(--kin);stroke-width:1;opacity:.22}
.zen-garden.crest-draw{opacity:0;transform:translateY(16px);animation:zen-settle 1.6s cubic-bezier(.16,.7,.24,1) .1s forwards}
@keyframes zen-settle{to{opacity:1;transform:none}}
.hero h1{max-width:16ch}
.hero .lede{margin-top:26px;max-width:52ch}
.tagline{font-family:var(--display);font-style:italic;font-weight:600;font-size:clamp(15px,1.6vw,18px);color:var(--kin-text);margin-bottom:18px;letter-spacing:.01em}
.hero .tagline{color:var(--kon)}

.hero-in{opacity:0;transform:translateY(14px);animation:settle 1.2s cubic-bezier(.16,.7,.24,1) .15s forwards}
.hero-in.d2{animation-delay:.4s}
.hero-in.d3{animation-delay:.62s}
@keyframes settle{to{opacity:1;transform:none}}

.cta-line{margin-top:40px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:center}
.cta{
  font-family:var(--text); font-weight:500; font-size:15.5px; letter-spacing:.03em;
  text-decoration:none; color:var(--ink); background:var(--kin);
  padding:15px 34px; border-radius:2px; transition:background .3s;
  display:inline-block;
}
.cta:hover,.cta:focus-visible{background:var(--kin-hover)}
.cta-note{font-size:14px;color:var(--ishi)}

/* ---------- inner-page hero (asymmetric, not the homepage treatment) ---------- */
.page-hero{padding:clamp(56px,9vh,100px) 0 clamp(60px,8vh,90px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16'%3E%3Cpath d='M0 8.0 Q0 8.0 8 9.2 Q17 10.5 25 11.4 Q33 12.3 42 12.7 Q50 13.0 58 12.7 Q67 12.3 75 11.4 Q83 10.5 92 9.2 Q100 8.0 108 6.8 Q117 5.5 125 4.6 Q133 3.7 142 3.3 Q150 3.0 158 3.3 Q167 3.7 175 4.6 Q183 5.5 192 6.8' stroke='%23B08D57' stroke-width='1' fill='none' opacity='0.4'/%3E%3C/svg%3E");background-repeat:repeat-x;background-position:bottom;background-size:200px 16px}
.page-hero .eyebrow{font-family:var(--text);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--kin-text);margin-bottom:16px;font-weight:500}
.page-hero h1{max-width:20ch;font-size:clamp(32px,4.4vw,52px)}
.page-hero .lede{margin-top:20px;max-width:56ch}

/* ---------- generic section ---------- */
.band{padding:clamp(72px,11vh,130px) 0;position:relative}

/* crenellation divider — the one recurring device between bands */
.crenel{height:14px;width:100%;overflow:hidden}
.crenel svg{width:100%;height:100%;display:block}
.crenel path{stroke:var(--kin);stroke-width:1.4;fill:none;opacity:.4}

.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,7vw,110px);align-items:start}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);margin-top:44px;position:relative}
.duo::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1px;background:linear-gradient(180deg,transparent,var(--kin) 15%,var(--kin) 85%,transparent);opacity:.5}
.duo h3{font-size:17px;margin-bottom:10px;letter-spacing:.02em}
.duo h3 span{color:var(--kin-text);font-family:var(--text);font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:8px;font-weight:500}
@media (max-width:880px){.duo{grid-template-columns:1fr;gap:36px}.duo::before{display:none}}

/* ---------- the one elevated surface: report mockup ---------- */
.doc{
  background:var(--washi-lift);padding:34px 34px 30px;border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(27,42,65,.05),0 26px 54px -36px rgba(27,42,65,.28);
}
.doc-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:14px}
.doc-firm{font-family:var(--display);font-size:17px;color:var(--kon);font-weight:600}
.doc-meta{font-size:12.5px;color:var(--ishi)}
.doc-rows{margin-top:22px}
.doc-row{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ishi)}
.doc-row b{font-weight:600;color:var(--kon)}
.doc-foot{margin-top:24px;display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--ishi)}
.dot{width:6px;height:6px;background:var(--kin);border-radius:50%;flex:none}
.doc-sig{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ishi)}
.doc-absence{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--moss);font-style:italic}

/* ---------- lists held by space, not boxes ---------- */
.roster{margin-top:52px}
.item{
  display:grid;grid-template-columns:minmax(0,26ch) minmax(0,1fr);
  gap:clamp(20px,5vw,72px);
  padding:32px 0;border-top:1px solid var(--line);
}
.item:last-child{border-bottom:1px solid var(--line)}
.item h3{color:var(--kon)}
.item p{margin:0;font-size:15.5px;color:var(--ishi)}

/* ---------- sequence (numbered — exactly one on the site) ---------- */
.steps{margin-top:54px;display:grid;gap:0}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,4vw,56px);padding:30px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step-n{font-family:var(--display);font-weight:700;font-size:36px;color:var(--kin-text);line-height:1;padding-top:2px;min-width:1.4ch}
.step h3{margin-bottom:7px}
.step p{margin:0;font-size:15.5px;color:var(--ishi)}

/* ---------- controls grid ---------- */
.controls{margin-top:50px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(30px,4vw,58px)}
.control h3{font-size:16.5px;margin-bottom:8px;font-weight:600}
.control p{font-size:14.5px;color:var(--ishi);margin:0}
.control{border-top:1px solid var(--kin);padding-top:18px}

/* ---------- certification badges — space, not a box ---------- */
.badge-row{margin-top:26px;display:flex;align-items:center;gap:clamp(30px,4vw,54px);flex-wrap:wrap}
.badge-row img{height:82px;width:auto}
@media (max-width:880px){.badge-row img{height:62px}}

/* ---------- pricing tiers ---------- */
.stage-list{margin-top:54px}
.stage-block{padding:34px 0 34px 22px;border-top:1px solid var(--line);border-left:3px solid var(--line)}
.stage-block:last-child{border-bottom:1px solid var(--line)}
.stage-block.cleanup{border-left-color:var(--kin)}
.stage-block.monthly{border-left-color:var(--kon)}
.stage-block.dedicated{border-left-color:var(--moss)}
.stage-label{font-family:var(--text);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin-bottom:10px}
.stage-block.cleanup .stage-label{color:var(--kin-text)}
.stage-block.monthly .stage-label{color:var(--kon)}
.stage-block.dedicated .stage-label{color:var(--moss-text)}
.stage-block h3{font-size:20px;margin-bottom:9px}
.stage-block > p{margin:0;font-size:15.5px;color:var(--ishi);max-width:var(--measure)}
.tier-list{margin-top:24px}
.tier{padding:18px 0;border-top:1px solid var(--line)}
.tier:first-child{border-top:none}
.tier-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px 28px;flex-wrap:wrap}
.tier-name{font-size:15.5px;font-weight:600;color:var(--kon)}
.tier-price{font-family:var(--display);font-weight:600;font-size:16px;color:var(--kin-text);white-space:nowrap}
.tier-desc{margin:6px 0 0;font-size:14px;color:var(--ishi);max-width:60ch}
.tier-bill{display:block;margin-top:5px;font-size:12.5px;color:var(--kin-text);font-style:italic;font-weight:500}

/* ---------- pricing — bento cards ---------- */
.price-grid{margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.price-card{background:var(--washi-lift);border:1px solid var(--line);border-radius:3px;padding:28px 24px 26px;display:flex;flex-direction:column;transition:border-color .3s,transform .3s ease,box-shadow .3s ease}
.price-card:hover{border-color:var(--kin);transform:translateY(-7px);box-shadow:0 1px 0 rgba(27,42,65,.05),0 30px 46px -28px rgba(27,42,65,.32)}
.price-name{font-family:var(--display);font-size:16.5px;font-weight:600;color:var(--kon)}
.price-range{margin-top:14px;font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,25px);line-height:1.2;color:var(--kin-text)}
.price-unit{display:block;margin-top:3px;font-family:var(--text);font-weight:400;font-size:12px;letter-spacing:.03em;color:var(--ishi)}
.price-desc{margin:16px 0 0;font-size:14px;line-height:1.7;color:var(--ishi);flex:1}
.price-bill{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--kin-text);font-style:italic;font-weight:500}

/* the one large tile — dedicated capacity, priced by conversation not by number */
.price-card.wide{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;gap:clamp(24px,5vw,56px);padding:30px clamp(26px,4vw,44px)}
.price-card.wide .price-body{flex:1;min-width:0}
.price-card.wide .price-range{margin-top:10px}
.price-cta{flex:none;font-family:var(--text);font-weight:500;font-size:14.5px;color:var(--kon);white-space:nowrap;text-decoration:none;border-bottom:1px solid var(--kin);padding-bottom:2px;transition:color .3s,border-color .3s}
.price-cta:hover,.price-cta:focus-visible{color:var(--kin-text);border-color:var(--kin-hover)}

@media (max-width:880px){
  .price-grid{grid-template-columns:1fr}
  .price-card.wide{flex-direction:column;align-items:flex-start}
  .price-card.wide .price-cta{margin-top:4px}
}

/* ---------- comparison table ---------- */
.cf-table{margin-top:50px}
.cf-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px 28px;padding:17px 0;border-top:1px solid var(--line);align-items:baseline}
.cf-row:last-child{border-bottom:1px solid var(--line)}
.cf-row.cf-head{border-top:none;padding:0 0 14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ishi)}
.cf-label{color:var(--ishi);font-size:14.5px}
.cf-them{font-size:14.5px;color:var(--ishi)}
.cf-us{color:var(--kin-text);font-weight:600;font-size:14.5px}
@media (max-width:880px){
  .cf-row{grid-template-columns:1fr;gap:3px;padding:15px 0}
  .cf-row.cf-head{display:none}
  .cf-label{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ishi);margin-bottom:3px}
}

/* ---------- closing ---------- */
.closing{text-align:center}
.closing h2{max-width:22ch;margin:0 auto}
.closing .lede{margin:20px auto 0}
.closing .cta-line{justify-content:center}

/* ---------- footer ---------- */
footer{background:var(--washi-lift);border-top:1px solid var(--line);padding:60px 0 36px;font-size:14px}
.foot{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:44px}
.foot a{color:var(--ishi);text-decoration:none;display:block;padding:4px 0;transition:color .25s}
.foot a:hover,.foot a:focus-visible{color:var(--kon)}
.foot h4{font-family:var(--display);font-size:14px;font-weight:600;margin:0 0 12px;color:var(--kon)}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:17px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;color:var(--kin-text);font-weight:700}
.foot-brand .crest-mark{width:22px;height:22px}
.foot p{font-size:14px;color:var(--ishi);max-width:34ch}
.foot-end{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--ishi);font-size:13px}
.foot-end a{display:inline;color:inherit;text-decoration:underline;padding:0}

/* ---------- platform marquee (homepage, under the hero) ---------- */
.marquee{padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--washi-lift);overflow:hidden;position:relative;z-index:2}
.marquee-eyebrow{text-align:center;font-family:var(--text);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--kin-text);margin-bottom:20px}
.marquee-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.marquee-track{display:flex;width:max-content;animation:marquee-scroll 34s linear infinite}
.marquee-set{display:flex;align-items:center;flex:none}
.marquee-set span{font-family:var(--text);font-size:15.25px;letter-spacing:.03em;color:var(--ishi);white-space:nowrap;position:relative;padding:0 28px}
.marquee-set span::after{content:"";position:absolute;right:0;top:50%;width:3px;height:3px;border-radius:50%;background:var(--kin);transform:translateY(-50%)}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- a11y + responsive ---------- */
a:focus-visible,.cta:focus-visible,button:focus-visible{outline:2px solid var(--kon);outline-offset:3px}

@media (max-width:880px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .split{grid-template-columns:1fr}
  .item{grid-template-columns:1fr;gap:10px}
  .foot{grid-template-columns:1fr 1fr}
  .vmark{display:none}
}
@media (prefers-reduced-motion:reduce){
  .zen-garden.crest-draw{animation:none;opacity:1;transform:none}
  .hero-in{animation:none;opacity:1;transform:none}
  .marquee-track{animation:none}
  html{scroll-behavior:auto}
}