/* LP-specific styles, layered on top of ../../colors_and_type.css */
*{box-sizing:border-box;margin:0;padding:0}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{max-width:1160px;margin:0 auto;padding:0 32px}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,241,231,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(227,218,199,.6)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-weight:700;font-size:18px;text-decoration:none}

/* Logo mark: chunky charcoal speech bubble with white 担 + orange chunky-shadow underneath */
.logo-mark{position:relative;width:40px;height:34px;background:var(--charcoal);border-radius:10px;display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:900;font-size:20px;box-shadow:0 3px 0 #1a1815;flex-shrink:0}
.logo-mark::after{content:"";position:absolute;bottom:-6px;left:10px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--charcoal)}
.logo-mark::before{content:"";position:absolute;bottom:-9px;left:10px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #1a1815;z-index:-1}

/* Logo wordmark: sticky-note style, gently tilted */
.logo-wordmark{position:relative;padding:7px 14px 6px;background:var(--orange);border-radius:4px;color:#fff;font-family:var(--font-display);font-weight:900;font-size:16px;line-height:1;letter-spacing:.02em;box-shadow:0 4px 10px rgba(46,42,38,.10);transform:rotate(-2deg);white-space:nowrap;display:inline-flex;align-items:center;gap:2px}
.logo-wordmark::before{content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%) rotate(2deg);width:34px;height:8px;background:rgba(255,255,255,.35);border-radius:2px}
.logo-wordmark .han{background:rgba(46,42,38,.85);color:#fff;padding:1px 6px;border-radius:4px;margin:0 2px}

.nav ul{display:flex;gap:32px;list-style:none;font-size:14px;color:var(--charcoal-2)}
.nav ul a:hover{color:var(--orange-deep)}
.nav-cta{background:var(--charcoal);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:500;transition:transform .15s;text-decoration:none}
.nav-cta:hover{transform:translateY(-1px)}

/* HERO */
.hero{position:relative;padding:80px 0 100px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .95fr;gap:60px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--charcoal-2);box-shadow:var(--shadow)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--moss)}
h1.hero-title{margin-top:24px;font-size:56px;line-height:1.28;letter-spacing:.005em;font-family:var(--font-display);font-weight:700}
h1.hero-title .accent{color:var(--orange-deep);position:relative;white-space:nowrap}
h1.hero-title .accent::after{content:"";position:absolute;left:-4px;right:-4px;bottom:6px;height:14px;background:var(--orange-soft);z-index:-1;border-radius:4px;transform:rotate(-.6deg)}
.hero-lead{margin-top:28px;font-size:17px;color:var(--charcoal-2);max-width:520px}
.hero-ctas{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:14px;font-weight:700;font-family:var(--font-display);font-size:15px;transition:transform .15s, box-shadow .15s;cursor:pointer;border:0}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 4px 0 var(--orange-deep), var(--shadow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--orange-deep), var(--shadow-lg)}
.btn-ghost{background:transparent;color:var(--charcoal);border:1.5px solid var(--charcoal)}
.btn-ghost:hover{background:var(--charcoal);color:#fff}
.hero-note{margin-top:20px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px}

.hero-visual{position:relative;height:520px}
.hero-photo{position:absolute;inset:0;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(227,218,199,.6)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(217,138,95,.06), rgba(46,42,38,.04));pointer-events:none}
.chat-card{position:absolute;background:#fff;border-radius:22px;padding:20px 22px;box-shadow:var(--shadow-lg);max-width:340px;border:1px solid rgba(227,218,199,.6)}
.chat-card .who{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin-bottom:8px}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:#fff;font-weight:700}
.chat-card .msg{font-size:15px;line-height:1.7;color:var(--charcoal)}
.chat-1{top:20px;left:0;transform:rotate(-2deg)}
.chat-1 .avatar{background:var(--charcoal-2)}
.chat-2{top:170px;right:0;transform:rotate(1.5deg);background:var(--paper)}
.chat-2 .avatar{background:var(--orange)}
.chat-2 .msg strong{color:var(--orange-deep)}
.chat-3{bottom:20px;left:30px;transform:rotate(-1deg);max-width:300px}
.chat-3 .avatar{background:var(--moss)}
.sticky-note{position:absolute;background:#F7E7B8;padding:14px 16px;border-radius:4px;box-shadow:0 6px 18px rgba(46,42,38,.12);font-family:var(--font-hand);font-weight:600;font-size:14px;color:var(--charcoal);line-height:1.5}
.note-1{top:230px;left:-30px;transform:rotate(-6deg);width:150px}
.note-2{bottom:80px;right:-20px;transform:rotate(4deg);width:140px;background:#DDE1D0}
.squiggle{position:absolute;stroke:var(--orange-soft);stroke-width:3;fill:none;stroke-linecap:round}
.squiggle-1{top:60px;right:40%;width:80px}
.squiggle-2{bottom:120px;left:35%;width:100px}

/* BAND */
.band{background:var(--charcoal);color:#fff;padding:22px 0;overflow:hidden}
.band-track{display:flex;gap:60px;white-space:nowrap;animation:scroll 40s linear infinite;font-family:var(--font-display);font-weight:700;font-size:20px}
.band-track span{display:inline-flex;align-items:center;gap:60px}
.band-track .dot{color:var(--orange)}
@keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* PHOTO STRIP — small-business testimonial-style row */
.photo-strip{padding:80px 0;background:var(--ivory)}
.photo-strip-grid{display:grid;grid-template-columns:1.2fr .9fr 1.1fr;gap:20px;align-items:stretch}
.ps-card{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:#fff;min-height:280px}
.ps-card img{width:100%;height:100%;object-fit:cover;display:block}
.ps-card.tall{grid-row:span 1;min-height:340px}
.ps-caption{position:absolute;left:16px;bottom:16px;right:16px;background:rgba(251,247,238,.92);backdrop-filter:blur(6px);padding:12px 14px;border-radius:12px;font-family:var(--font-hand);font-size:13px;color:var(--charcoal);line-height:1.5;border:1px solid rgba(227,218,199,.6)}

/* CTA background photo overlay */
.cta.with-photo{background:var(--orange)}
.cta-photo-bg{position:absolute;inset:0;overflow:hidden}
.cta-photo-bg img{width:100%;height:100%;object-fit:cover;opacity:.18;mix-blend-mode:multiply}

/* SECTIONS */
section{padding:110px 0}
.sec-label{font-family:var(--font-hand);color:var(--orange-deep);font-size:16px;margin-bottom:12px;display:inline-block}
.sec-label::before{content:"";display:inline-block;width:28px;height:2px;background:var(--orange-deep);vertical-align:middle;margin-right:10px;transform:translateY(-3px)}
h2.sec-title{font-size:40px;line-height:1.4;letter-spacing:.005em;font-family:var(--font-display);font-weight:700}
h2.sec-title .u{background:linear-gradient(transparent 65%, var(--orange-soft) 65%);padding:0 4px}
.sec-sub{margin-top:20px;font-size:16px;color:var(--charcoal-2);max-width:640px}

/* WORRIES */
.worries{background:var(--paper)}
.worries-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:56px;flex-wrap:wrap}
.worries-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.worry{background:#fff;border-radius:20px;padding:32px 28px;border:1px solid var(--line);position:relative;transition:transform .2s}
.worry:hover{transform:translateY(-4px)}
.worry-num{font-family:var(--font-hand);color:var(--orange);font-size:14px;margin-bottom:14px}
.worry-icon{width:52px;height:52px;border-radius:14px;background:var(--ivory-2);display:grid;place-items:center;margin-bottom:20px;color:var(--orange-deep)}
.worry-icon.moss{background:var(--moss-soft);color:var(--moss)}
.worry h3{font-size:19px;margin-bottom:12px;font-family:var(--font-display);font-weight:700}
.worry p{font-size:14.5px;color:var(--charcoal-2);line-height:1.85}
.worry-tag{margin-top:20px;display:inline-block;font-family:var(--font-hand);font-size:13px;color:var(--moss);padding-top:14px;border-top:1px dashed var(--line);width:100%}
.worry-tag::before{content:"→ "}

/* SERVICES — 4 columns × 2 rows for 8 cards */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:60px}
.svc{background:#fff;border-radius:20px;padding:26px 22px;border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .2s, box-shadow .2s;display:flex;flex-direction:column}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.svc-badge{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:var(--ivory-2);display:grid;place-items:center;font-family:var(--font-hand);color:var(--charcoal-2);font-size:13px;z-index:2}

/* Round photo thumbnail (top-left) */
.svc-thumb{width:72px;height:72px;border-radius:50%;overflow:hidden;margin-bottom:18px;box-shadow:0 4px 12px rgba(46,42,38,.10);border:3px solid #fff;position:relative;background:var(--ivory-2)}
.svc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Warm color ring behind photo — alternates orange/moss */
.svc-thumb::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:var(--orange-soft);z-index:-1}
.svc.moss .svc-thumb::before{background:var(--moss-soft)}

.svc-lead{font-size:13px;color:var(--muted);margin-bottom:4px;font-family:var(--font-hand)}
.svc h3{font-size:17px;margin-bottom:12px;font-family:var(--font-display);font-weight:700;line-height:1.4}
.svc ul{list-style:none;font-size:13px;color:var(--charcoal-2);line-height:1.9;margin-bottom:16px}
.svc li{padding-left:16px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:2px;background:var(--orange);border-radius:2px}

/* Time-estimate accordion */
.svc-hours{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line)}
.svc-hours-toggle{background:transparent;border:0;padding:0;color:var(--charcoal-2);font-family:var(--font-display);font-weight:500;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:6px;width:100%;justify-content:space-between;transition:color .15s}
.svc-hours-toggle:hover{color:var(--orange-deep)}
.svc-hours-toggle .clock{color:var(--orange-deep)}
.svc-hours-toggle .chevron{transition:transform .2s var(--ease-out);color:var(--muted)}
.svc-hours[open] .svc-hours-toggle .chevron{transform:rotate(180deg)}
.svc-hours-body{margin-top:12px;padding:12px 14px;background:var(--paper);border-radius:10px;font-size:12px;color:var(--charcoal-2);line-height:1.85}
.svc-hours-body dl{margin:0}
.svc-hours-body dt{font-family:var(--font-display);font-weight:500;color:var(--charcoal);margin-top:6px;font-size:12px}
.svc-hours-body dt:first-child{margin-top:0}
.svc-hours-body dd{margin:2px 0 0 0;color:var(--orange-deep);font-family:ui-monospace,monospace;font-size:11.5px}
.svc-hours-body .note{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);font-family:var(--font-hand);color:var(--muted);font-size:11.5px}

/* Design services note block */
.design-note{margin-top:60px;padding:28px 30px;background:var(--paper);border:1px dashed var(--line);border-radius:16px}
.design-note h4{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--charcoal);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.design-note h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)}
.design-note ul{list-style:none;padding:0;font-size:13.5px;color:var(--charcoal-2);line-height:1.9}
.design-note li{padding-left:20px;position:relative;margin-bottom:6px}
.design-note li::before{content:"✓";position:absolute;left:0;top:0;color:var(--moss);font-weight:700}
.design-note li strong{color:var(--charcoal)}

/* FLOW */
.flow{background:linear-gradient(180deg, var(--ivory) 0%, var(--paper) 100%)}
.flow-steps{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.flow-steps::before{content:"";position:absolute;top:44px;left:8%;right:8%;height:2px;background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);z-index:0}
.step{background:#fff;border-radius:20px;padding:28px 24px;border:1px solid var(--line);position:relative;z-index:1;text-align:center}
.step-num{width:56px;height:56px;border-radius:50%;background:var(--orange);color:#fff;font-family:var(--font-display);font-weight:900;font-size:22px;display:grid;place-items:center;margin:0 auto 20px;box-shadow:0 3px 0 var(--orange-deep)}
.step h4{font-size:17px;margin-bottom:10px;font-family:var(--font-display);font-weight:700}
.step p{font-size:13.5px;color:var(--charcoal-2);line-height:1.85}
.step-tip{margin-top:14px;font-family:var(--font-hand);font-size:12.5px;color:var(--moss)}

/* PRICING */
.pricing{background:var(--charcoal);color:#fff}
.pricing .sec-label{color:var(--orange-soft)}
.pricing .sec-label::before{background:var(--orange-soft)}
.pricing h2.sec-title{color:#fff}
.pricing h2.sec-title .u{background:linear-gradient(transparent 65%, rgba(217,138,95,.35) 65%)}
.pricing .sec-sub{color:rgba(255,255,255,.7)}
.price-tabs{margin-top:56px;display:flex;gap:8px;background:rgba(255,255,255,.06);padding:6px;border-radius:14px;width:fit-content}
.tab{padding:10px 20px;border-radius:10px;font-size:14px;cursor:pointer;color:rgba(255,255,255,.7);font-family:var(--font-display);font-weight:500;border:0;background:transparent;transition:all .2s}
.tab.active{background:var(--orange);color:#fff}
.tab:not(.active):hover{color:#fff}
.price-panel{display:none}
.price-panel.active{display:block}
.price-grid{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.price-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:34px 30px;position:relative;transition:transform .2s, background .2s}
.price-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.06)}
.price-card.featured{background:var(--paper);color:var(--charcoal);border-color:var(--orange)}
.price-card.featured .price-desc,.price-card.featured .price-hours{color:var(--charcoal-2)}
.price-card.featured .price-per{color:var(--muted)}
.featured-badge{position:absolute;top:-12px;left:30px;background:var(--orange);color:#fff;font-size:12px;font-family:var(--font-display);font-weight:700;padding:6px 14px;border-radius:999px}
.price-name{font-size:14px;font-family:var(--font-hand);color:var(--orange-soft);margin-bottom:8px}
.price-card.featured .price-name{color:var(--orange-deep)}
.price-title{font-size:24px;font-family:var(--font-display);font-weight:700;margin-bottom:12px}
.price-hours{font-size:14px;color:rgba(255,255,255,.7);margin-bottom:22px}
.price-num{display:flex;align-items:baseline;gap:4px;margin-bottom:8px}
.price-num .yen{font-size:18px;font-weight:700;font-family:var(--font-display)}
.price-num .amt{font-size:42px;font-weight:900;font-family:var(--font-display);letter-spacing:-.01em}
.price-per{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:24px}
.price-desc{font-size:13.5px;color:rgba(255,255,255,.75);line-height:1.85;padding-top:20px;border-top:1px solid rgba(255,255,255,.10)}
.price-card.featured .price-desc{border-top-color:var(--line)}
.price-note{margin-top:36px;padding:24px 28px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.15);border-radius:16px;display:flex;gap:16px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.75);line-height:1.85}
.price-note strong{color:#fff}
.price-note .n-icon{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:rgba(217,138,95,.15);color:var(--orange-soft);display:grid;place-items:center}

/* CTA */
.cta{background:var(--orange);color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 30%, rgba(255,255,255,.12), transparent 40%), radial-gradient(circle at 85% 70%, rgba(255,255,255,.08), transparent 40%)}
.cta-inner{position:relative;text-align:center;max-width:720px;margin:0 auto}
.cta .sec-label{color:#fff;opacity:.9}
.cta .sec-label::before{background:#fff}
.cta h2{font-size:44px;line-height:1.4;margin-bottom:20px;color:#fff;font-family:var(--font-display);font-weight:700}
.cta p{font-size:17px;line-height:1.9;opacity:.95;margin-bottom:20px}
.cta-price-box{display:inline-flex;align-items:baseline;gap:8px;background:rgba(255,255,255,.15);backdrop-filter:blur(6px);padding:16px 28px;border-radius:16px;margin:16px 0 32px;border:1px solid rgba(255,255,255,.2)}
.cta-price-box .lbl{font-size:14px;font-family:var(--font-hand);opacity:.9}
.cta-price-box .val{font-family:var(--font-display);font-weight:900;font-size:28px}
.cta-price-box .val small{font-size:14px;font-weight:500}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta .btn-primary{background:#fff;color:var(--orange-deep);box-shadow:0 4px 0 rgba(0,0,0,.15)}
.cta .btn-primary:hover{box-shadow:0 6px 0 rgba(0,0,0,.15)}
.cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.cta .btn-ghost:hover{background:#fff;color:var(--orange-deep)}
.cta-note{margin-top:28px;font-size:13.5px;opacity:.85;font-family:var(--font-hand)}

/* FOOTER */
footer{background:var(--paper);padding:60px 0 40px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot-brand p{font-size:13.5px;color:var(--muted);margin-top:14px;line-height:1.85;max-width:320px}
.foot h5{font-family:var(--font-display);font-size:14px;margin-bottom:16px;color:var(--charcoal)}
.foot ul{list-style:none;font-size:13.5px;color:var(--charcoal-2)}
.foot li{margin-bottom:10px}
.foot a:hover{color:var(--orange-deep)}
.foot-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);flex-wrap:wrap;gap:10px}

/* Mobile hamburger — hidden on desktop */
.mburger{display:none;width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--line);cursor:pointer;align-items:center;justify-content:center}
.mburger span{display:block;width:18px;height:2px;background:var(--charcoal);border-radius:2px;position:relative}
.mburger span::before,.mburger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--charcoal);border-radius:2px}
.mburger span::before{top:-6px}
.mburger span::after{top:6px}

.msheet{position:fixed;inset:0;background:rgba(46,42,38,.5);z-index:100;display:none;align-items:flex-end;justify-content:center}
.msheet.open{display:flex}
.msheet-inner{background:var(--paper);width:100%;max-width:430px;border-radius:24px 24px 0 0;padding:28px 24px 32px;box-shadow:0 -20px 60px rgba(46,42,38,.2);animation:slideup .3s cubic-bezier(.2,.8,.2,1)}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.msheet-inner ul{list-style:none;padding:0;margin:0 0 20px}
.msheet-inner li{padding:14px 4px;border-bottom:1px dashed var(--line);font-family:var(--font-display);font-weight:500;font-size:16px}
.msheet-inner li:last-child{border:0}
.msheet-inner li a{display:flex;justify-content:space-between;align-items:center;color:var(--charcoal)}
.msheet-inner li a::after{content:"→";color:var(--muted);font-family:var(--font-body)}
.msheet-close{width:100%;padding:14px;border:1.5px solid var(--charcoal);background:transparent;color:var(--charcoal);border-radius:14px;font-family:var(--font-display);font-weight:700;font-size:14px;cursor:pointer}

/* Tablet: 2 columns for services */
@media (max-width: 1160px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 960px){
  .container{padding:0 24px}
  .nav .nav-links,.nav .nav-cta{display:none}
  .mburger{display:inline-flex}
  .hero{padding:56px 0 72px}
  .hero-grid{grid-template-columns:1fr;gap:60px}
  h1.hero-title{font-size:38px;line-height:1.35}
  .hero-visual{height:440px;max-width:400px;margin:0 auto}
  section{padding:80px 0}
  h2.sec-title{font-size:28px}
  .worries-grid,.services-grid,.price-grid{grid-template-columns:1fr;gap:16px}
  .flow-steps{grid-template-columns:1fr 1fr;gap:16px}
  .flow-steps::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .cta h2{font-size:30px}
}

@media (max-width:960px){.price-grid .price-card{grid-column:auto!important;min-width:0}}