/* Shared visual language adapted from the HOPLUS landing page. */
:root {
  --ink:#252b26; --muted:#5e675f; --green:#27894c; --deep:#176938;
  --orange:#ed901b; --yellow:#f3cc43; --cream:#fffef9;
  --soft-yellow:#fff9e7; --soft-green:#f1f8ed; --line:#e5e8d8;
  --teal:#138e96; --coral:#df7367; --radius:26px;
}
body {font-family:"Hiragino Kaku Gothic ProN","Meiryo","Yu Gothic",sans-serif;background:#fff;color:var(--ink);font-weight:500;line-height:1.95}
h1,h2,h3,h4 {font-weight:800}
h2 {font-size:clamp(28px,3vw,39px);line-height:1.6;letter-spacing:.025em}
h3 {letter-spacing:.02em}
.section {position:relative;isolation:isolate;padding:85px 0}
.section>.container {position:relative;z-index:1}
.soft-yellow {background:var(--soft-yellow)}
.soft-green {background:var(--soft-green)}
.eyebrow {font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--deep);margin-bottom:15px}
.eyebrow::before,.eyebrow::after {content:"";display:inline-block;width:17px;height:1px;background:var(--orange);vertical-align:middle;margin:0 10px;transform:rotate(-55deg)}
.eyebrow::after {transform:rotate(55deg)}
.section-title h2,.contact h2 {position:relative;isolation:isolate;display:inline-block;padding:8px 10px 15px;font-size:clamp(28px,3vw,39px)}
.section-title h2::before,.contact h2::before {content:"";position:absolute;z-index:-1;inset:0 -12px -5px;background:url("assets/lp-title-wash.webp") center/100% 100% no-repeat;opacity:.62;pointer-events:none}
.heading-accent,.hero-accent {color:#d97906}
.heading-green {color:var(--green)}
.contact h2 .heading-accent {white-space:nowrap}
.marker:after {height:13%;bottom:3%;background:#f9d653;opacity:.8;border-radius:60% 35% 60% 40%;transform:rotate(-1deg)}
.text-link {color:var(--deep);font-size:14px;border-bottom:2px dotted #8fba87;padding-bottom:7px}
.button {background:#f4ab22;color:#252b26;border:1px solid #e99a14;border-radius:999px;font-weight:800;min-height:60px;padding:14px 29px;box-shadow:0 4px 0 #d68b14;gap:14px}
.button:hover {background:#ffc146;box-shadow:0 6px 0 #ce8410}
.button:focus-visible {outline-color:var(--deep)}
.button-small {min-height:44px;padding:10px 22px;font-size:13px;box-shadow:0 3px 0 #d68b14}
.line-button {background:#208e48;color:#fff;border-color:#157a3c;box-shadow:0 4px 0 #116432}
.line-button:hover {background:#187a3b;box-shadow:0 6px 0 #105c2d}
.line-button .line-icon {background:#fff;color:#168341}
.line-icon {background:#168341;border-radius:8px}
/* A brief shimmer, with a quiet pause between each pass. */
:is(.button,.mobile-contact>a:nth-child(2),.mobile-contact>a:last-child) {position:relative;isolation:isolate;overflow:hidden;}
:is(.button,.mobile-contact>a:nth-child(2),.mobile-contact>a:last-child)::before {content:"";position:absolute;z-index:-1;pointer-events:none;top:-80%;bottom:-80%;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 20%,rgba(255,255,255,.58) 50%,rgba(255,255,255,.12) 80%,transparent);opacity:0;transform:translateX(-160%) skewX(-24deg);animation:cta-shimmer 5.8s ease-in-out var(--cta-delay,0s) infinite}
:is(.button,.mobile-contact>a:nth-child(2),.mobile-contact>a:last-child)::after {content:"";position:absolute;z-index:-1;pointer-events:none;top:8%;right:7%;width:12px;height:12px;background:#fffce9;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);opacity:0;transform:scale(.35);animation:cta-sparkle 5.8s ease-in-out var(--cta-delay,0s) infinite}
.header-cta {--cta-delay:-1.8s}
.line-button,.mobile-contact>a:last-child {--cta-delay:-2.9s}
.mobile-contact>a:nth-child(2) {--cta-delay:-.9s}
@keyframes cta-shimmer {0%{opacity:0;transform:translateX(-160%) skewX(-24deg)} 5%{opacity:.9} 24%{opacity:.9} 32%,100%{opacity:0;transform:translateX(400%) skewX(-24deg)}}
@keyframes cta-sparkle {0%,15%,43%,100%{opacity:0;transform:scale(.35) rotate(-12deg)} 27%{opacity:.95;transform:scale(1) rotate(10deg)} 34%{opacity:.6;transform:scale(.7) rotate(20deg)}}
@media(prefers-reduced-motion:reduce) {
  :is(.button,.mobile-contact>a:nth-child(2),.mobile-contact>a:last-child)::before,
  :is(.button,.mobile-contact>a:nth-child(2),.mobile-contact>a:last-child)::after {animation:none;opacity:0}
}
.site-header {height:90px;background:rgba(255,255,255,.98);border-bottom:1px solid #f1e4af;gap:24px}
.brand span {color:#424b40;letter-spacing:.05em}
.desktop-nav {font-size:12px;gap:23px}
.desktop-nav a:after {height:3px;background:#f2bc32;border-radius:50%}
.mobile-menu {background:#fffef6;border-bottom:2px solid #efd16b;box-shadow:0 12px 20px #6f6a2912}
.mobile-menu a {border-bottom:1px dashed #dce6d3}
.hero {background:#fffef9;isolation:isolate}
.hero::before {content:"";position:absolute;z-index:0;left:-35px;top:-42px;width:185px;height:185px;transform:scaleX(-1) rotate(-10deg);background:url("assets/lp-leaf-corner.webp") center/contain no-repeat;opacity:.8;pointer-events:none}
.hero-inner {grid-template-columns:1fr 1.05fr;min-height:655px;width:min(1440px,100%)}
.hero-copy {padding:70px 0 65px clamp(32px,6vw,96px);width:max-content;max-width:100%;position:relative}
.hero-kicker {font-size:13px;color:#303b2f;letter-spacing:.035em;margin-bottom:24px;gap:9px}
.hero-kicker>span {width:9px;height:9px;background:#efb82e}
.hero h1 {font-family:inherit;font-size:clamp(34px,3.5vw,50px);line-height:1.6;letter-spacing:.01em;font-weight:800;margin-bottom:20px;position:relative;isolation:isolate}
.hero h1::before {content:"";position:absolute;z-index:-1;left:-24px;right:-20px;top:-8px;bottom:-5px;background:url("assets/lp-title-wash.webp") center/100% 100% no-repeat;opacity:.55;pointer-events:none}
.hero-fields {font-size:21px;gap:6px;letter-spacing:.02em;border-bottom:2px dashed #edb844;width:fit-content;padding-bottom:12px}
.hero-fields .green {color:#229d45}
.hero-fields .coral {color:#d96665}
.hero-fields .teal {color:#138e96}
.hero-lead {font-size:15px;line-height:2.15;margin-top:19px}
.hero-actions {margin-top:25px;gap:17px}
.hero .button {min-width:280px}
.hero-note {font-size:11px;color:#555e51}
.hero-art {z-index:0}
.hero-art>img {width:125%;margin-left:2%;margin-top:0;mix-blend-mode:multiply}
/* Preserve the original desktop artwork scale when srcset changes intrinsic sizing. */
@media(min-width:681px) {.hero-art>img {flex-shrink:0}}
.art-caption {font-size:13px;background:#fffefa;padding:9px 16px;border:1px solid #efcd62;border-bottom:2px dashed #e5b444;border-radius:8px;bottom:9%;right:9%;transform:rotate(-3deg);color:#303b2b}
.illustration-note {font-size:10px;bottom:12px;right:20px}
.pr-points {position:relative;background:#fff9e7;border-top:1px solid #f3df9c;border-bottom:1px solid #f3df9c;padding:28px 0 24px}
.pr-grid {max-width:720px;margin-inline:auto}
.pr-card {border-color:#dce2cf;border-radius:18px;background:#fffdf7}
.pr-notes {font-size:11px;color:#626952}
.about::after,.flow::before,.contact::before {content:"";position:absolute;z-index:0;width:175px;height:175px;right:-15px;bottom:0;background:url("assets/lp-leaf-corner.webp") center/contain no-repeat;transform:rotate(160deg);opacity:.7;pointer-events:none}
.about,.flow,.contact {overflow:clip}
.flow::before {top:15px;bottom:auto;right:auto;left:-20px;transform:scaleX(-1);opacity:.55}
.contact::before {top:0;bottom:auto;right:0;transform:none;opacity:.75}
.inline-visit {margin-top:27px;text-align:center}
.inline-visit .button {font-size:14px;min-height:53px}
.inline-visit p {font-size:12px;color:var(--muted);margin-bottom:12px}
.mobile-contact {border-top:1px solid #e6ce78;background:#fffef8;box-shadow:0 -4px 16px #7863210c}
.mobile-contact>a {color:#3b492e}
.mobile-contact>a:nth-child(2) {background:#f2a622;color:#292d21}
.mobile-contact>a:last-child {background:#258c49;color:#fff}
.mobile-contact>a:last-child .line-icon {background:#fff;color:#258c49}
.step-icon svg {width:41px;height:41px;display:block}
@media(min-width:1441px) {.hero-copy{padding-left:145px}.hero-art>img{width:120%;margin-left:-4%}.hero-inner{min-height:665px}}
@media(max-width:1150px) {.site-header{padding-inline:3%;gap:18px}.desktop-nav{gap:16px;font-size:11px}.hero-copy{padding-left:4.5vw}.hero h1{font-size:38px}.hero-fields{font-size:18px}.hero-inner{min-height:610px}.hero-art>img{width:137%;margin-left:8%}}
@media(max-width:960px) {.section{padding:72px 0}.site-header{height:82px}.hero-inner{min-height:565px}.hero-copy{padding-left:30px;padding-top:48px;padding-bottom:48px}.hero h1{font-size:32px}.hero-fields{font-size:16px}.hero-kicker{font-size:11px}.hero-lead{font-size:13px}.hero .button{min-width:0;font-size:13px;padding:13px 21px;min-height:53px}.hero-art>img{width:145%;margin-left:14%}.art-caption{font-size:10px;right:5%;bottom:12%}.hero-note{font-size:9px}.about::after,.flow::before,.contact::before{width:120px;height:120px;opacity:.5}}
@media(max-width:680px) {
  html{scroll-padding-top:86px}
  .section{padding:57px 0}
  h2{font-size:clamp(24px,6.6vw,29px);line-height:1.7;letter-spacing:.01em}
  .section-title h2,.contact h2{padding:4px 3px 11px;font-size:clamp(24px,6.6vw,29px)}
  .section-title h2::before,.contact h2::before{inset:0 -6px -3px;opacity:.58}
  .eyebrow{font-size:11px;margin-bottom:13px;letter-spacing:.05em}
  .site-header{height:75px;padding:0 16px;gap:10px}
  .brand img{width:124px;height:50px}
  .brand span{font-size:7px}
  .header-cta{font-size:10px;padding:8px 12px;min-height:36px;box-shadow:0 2px 0 #d68b14;gap:4px;white-space:nowrap}
  .header-cta>span{display:none}
  .menu-toggle{padding:6px;min-width:40px}
  .hero::before{width:125px;height:125px;left:-32px;top:-24px;opacity:.55}
  .hero-inner{display:flex;flex-direction:column;min-height:0}
  .hero-copy{display:contents}
  .hero-heading{order:0;position:relative;z-index:1;width:100%;max-width:440px;padding:26px 21px 0;text-align:center}
  .hero-details{order:2;width:100%;max-width:440px;padding:14px 21px 28px;text-align:center}
  .hero-kicker{font-size:10px;justify-content:center;margin-bottom:14px;letter-spacing:.02em}
  .hero h1{font-size:clamp(26px,7.3vw,33px);line-height:1.65;margin-bottom:0}
  .hero h1::before{left:-3px;right:-3px;top:-8px;bottom:-3px}
  .hero-fields{font-size:16px;margin-inline:auto;gap:4px;padding-bottom:10px}
  .hero-lead{font-size:13px;line-height:1.95;margin-top:16px}
  .hero-actions{align-items:center;gap:14px;margin-top:23px}
  .hero .button{font-size:14px;min-height:53px;min-width:255px}
  .hero-actions .text-link{font-size:11px}
  .hero-note{font-size:9px;margin-top:13px}
  .hero-note span{padding:0 4px}
  .hero-art{order:1;width:100%;max-width:440px;align-self:center;min-height:0;margin-top:-8px;padding-bottom:13px}
  .hero-art>img{width:100%;height:auto;margin:0;max-width:100%}
  .art-caption{bottom:20px;right:6%;font-size:10px;padding:6px 10px;max-width:85%}
  .illustration-note{right:15px;bottom:0;font-size:8px}
  .pr-points{padding:18px 0}
  .pr-points>.container{width:calc(100% - 24px)}
  .pr-grid{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:none;gap:6px;margin-inline:auto}
  .pr-card{border-radius:8px}
  .pr-notes{font-size:10px;line-height:1.9}
  .about::after,.flow::before,.contact::before{width:86px;height:86px;opacity:.42}
  .button{font-size:14px;min-height:55px;padding:13px 24px}
  .inline-visit{margin-top:24px}
  .inline-visit .button{font-size:13px;padding:12px 20px;min-height:51px}
  .inline-visit p{font-size:11px}
}
@media(max-width:360px) {.site-header{padding-inline:12px;gap:7px}.brand img{width:112px;height:45px}.brand span{font-size:6.5px}.header-cta{font-size:9px;padding-inline:10px}.hero-heading,.hero-details{padding-inline:18px}.hero h1{font-size:25px}.hero-fields{font-size:14px}.hero-note{font-size:8px}.hero .button{min-width:240px}}
@media(prefers-reduced-motion:reduce) {*{transition:none!important;animation:none!important}}

@media(min-width:681px) and (max-width:960px){.pr-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:720px}}