:root{
  --paper:#f2ede1;
  --white:#ffffff;
  --ink:#1d1a1b;
  --stone:#6e7883;
  --crimson:#c22936;
  --blossom:#e56a8c;
  --blush:#f3ccd6;
  --torii:linear-gradient(105deg, var(--crimson), var(--blossom));
  --display:'Inria Sans',sans-serif;
  --body:'Inria Sans',sans-serif;
  --mono:'DM Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);background:var(--paper);color:var(--ink);
  line-height:1.65;-webkit-font-smoothing:antialiased;position:relative
}
/* paper grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit}
::selection{background:var(--blossom);color:var(--white)}

/* watercolor washes */
.wash{position:absolute;border-radius:50%;filter:url(#wc);pointer-events:none;z-index:0}
.wash-blossom-a{width:52vmin;height:44vmin;top:-8vmin;right:-10vmin;
  background:radial-gradient(circle at 40% 45%, rgba(229,106,140,.5), rgba(229,106,140,.24) 55%, transparent 74%)}
.wash-blossom-b{width:34vmin;height:30vmin;top:16vmin;right:18vmin;
  background:radial-gradient(circle at 55% 50%, rgba(194,41,54,.34), rgba(229,106,140,.18) 60%, transparent 78%)}
.wash-stone{width:46vmin;height:34vmin;bottom:-6vmin;left:-12vmin;
  background:radial-gradient(circle at 55% 40%, rgba(110,120,131,.3), rgba(110,120,131,.14) 58%, transparent 78%)}
.petal{position:absolute;border-radius:50% 46% 52% 48%;filter:url(#wc);pointer-events:none;
  background:radial-gradient(circle at 45% 45%, rgba(229,106,140,.55), rgba(229,106,140,.2) 70%, transparent 85%)}

/* ---------- hero ---------- */
.hero{min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:56px 24px 96px;overflow:hidden}
.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.hero-logo{width:min(58vw,360px);color:var(--ink)}
.hero-logo svg{width:100%;height:auto;display:block}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,5.6vw,58px);line-height:1.12;margin:36px 0 16px;letter-spacing:-.01em}
.hero h1 em{font-style:normal;background:var(--torii);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:560px;font-size:clamp(15.5px,1.8vw,18px);color:var(--stone);font-weight:400}
.hero-cta{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:15px;text-decoration:none;padding:13px 28px;border-radius:999px;transition:transform .18s ease, box-shadow .18s ease}
.btn:focus-visible{outline:3px solid var(--blossom);outline-offset:3px}
.btn-torii{background:var(--torii);color:var(--white);box-shadow:0 8px 26px rgba(194,41,54,.3)}
.btn-torii:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(194,41,54,.4)}
.btn-ink{border:1.5px solid rgba(29,26,27,.35);color:var(--ink)}
.btn-ink:hover{border-color:var(--ink)}
.kanji-rail{position:absolute;top:50%;right:clamp(10px,4vw,64px);transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--display);font-weight:700;font-size:clamp(20px,3vw,30px);letter-spacing:.55em;color:rgba(29,26,27,.22);user-select:none;pointer-events:none;z-index:1}
.kanji-rail em{font-style:normal;color:rgba(194,41,54,.45)}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(110,120,131,.65);z-index:1}

/* ---------- services ---------- */
.services{padding:110px 24px 116px;position:relative;overflow:hidden}
.services .wash-head{width:38vmin;height:20vmin;top:6vmin;left:8vmin;
  background:radial-gradient(circle at 50% 50%, rgba(243,204,214,.7), rgba(243,204,214,.3) 60%, transparent 80%)}
.wrap{max-width:1060px;margin:0 auto;position:relative;z-index:1}
.sec-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--crimson);margin-bottom:14px}
.services h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.6vw,42px);margin-bottom:10px;letter-spacing:-.01em}
.services .lede{max-width:620px;color:var(--stone);font-size:17px;margin-bottom:56px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.svc{background:var(--white);border-radius:18px;padding:32px 28px 26px;text-decoration:none;color:var(--ink);position:relative;overflow:hidden;border:1px solid rgba(110,120,131,.18);box-shadow:0 2px 10px rgba(29,26,27,.05);transition:transform .18s ease, box-shadow .18s ease;display:flex;flex-direction:column}
.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--torii);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;z-index:2}
.svc:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(29,26,27,.12)}
.svc:hover::before{transform:scaleX(1)}
.svc:focus-visible{outline:3px solid var(--crimson);outline-offset:3px}
.svc-thumb{display:block;width:calc(100% + 56px);margin:-32px -28px 20px;height:150px;object-fit:cover;border-radius:18px 18px 0 0}
.svc-tag{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);margin-bottom:16px}
.svc h3{font-family:var(--display);font-weight:700;font-size:23px;margin-bottom:8px}
.svc p{color:var(--stone);font-size:15px;flex:1}
.svc-go{margin-top:24px;font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--crimson);display:inline-flex;align-items:center;gap:7px}
.svc-go::after{content:"→";transition:transform .18s ease}
.svc:hover .svc-go::after{transform:translateX(4px)}

/* ---------- ethos ---------- */
.ethos{padding:110px 24px 120px;text-align:center;position:relative;overflow:hidden}
.ethos .wash-quote{width:64vmin;height:30vmin;top:50%;left:50%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at 50% 50%, rgba(243,204,214,.55), rgba(229,106,140,.16) 60%, transparent 80%)}
.ethos blockquote{max-width:660px;margin:0 auto;font-family:var(--display);font-weight:700;font-size:clamp(21px,3vw,30px);line-height:1.5;position:relative;z-index:1;letter-spacing:-.005em}
.ethos blockquote span{background:var(--torii);-webkit-background-clip:text;background-clip:text;color:transparent}
.ethos cite{display:block;margin-top:24px;font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--stone)}

/* ---------- ink band: footer ---------- */
.ink-band{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.ink-band .wash-ink{width:50vmin;height:26vmin;top:-8vmin;right:-6vmin;
  background:radial-gradient(circle at 50% 50%, rgba(229,106,140,.22), rgba(194,41,54,.1) 60%, transparent 80%)}
footer{border-top:1px solid rgba(242,237,225,.15);padding:32px 24px 40px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center}
footer p{font-size:13.5px;color:rgba(242,237,225,.55)}
footer a{color:var(--paper);text-decoration:none}
footer a:hover{color:var(--blossom)}

@media (max-width:640px){
  .kanji-rail{display:none}
  .wash-blossom-a{right:-22vmin}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}