@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Caveat:wght@500;600&display=swap');

:root { --ink:#051342; --blue:#0055f3; --muted:#505e91; --line:#ced9ee; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#f3f8fd; font-family:'DM Sans',Arial,sans-serif; }
h1,h2,h3,p { margin:0; }
.scene { position:relative; isolation:isolate; min-height:900px; min-height:100svh; display:flex; flex-direction:column; padding:0 2.15% 22px; background:url('terrace-background.webp') center center / cover no-repeat; }
.scene::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse 33% 30% at 34% 23%,rgba(235,249,255,.83),rgba(236,249,255,.35) 65%,transparent 100%); }
.hero { position:relative; flex:1; min-height:710px; display:grid; grid-template-columns:1fr 450px; column-gap:70px; padding:42px 5% 60px 11.8%; align-items:start; }
h1 { font-size:clamp(58px,5.25vw,84px); font-weight:800; line-height:.98; letter-spacing:-.055em; }
h1 em { color:var(--blue); font-style:normal; }
.handwritten { position:relative; width:max-content; max-width:100%; font-family:'Caveat','Segoe Print',cursive; font-size:46px; line-height:1.05; transform:rotate(-3deg); margin:15px 0 25px; }
.scribble { position:absolute; left:3%; right:0; bottom:-11px; height:7px; border-radius:100% 20% 80% 20%; background:#00b8e7; transform:rotate(-2deg); }
.intro { max-width:445px; margin-left:90px; font-size:19px; line-height:1.23; letter-spacing:-.025em; }
.good-news { position:absolute; left:48%; top:125px; font-family:'Caveat','Segoe Print',cursive; font-size:34px; line-height:.9; text-align:center; transform:rotate(-10deg); }
.good-news svg { position:absolute; top:57px; left:15px; width:200px; stroke:var(--blue); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.contact-card { margin-top:84px; width:100%; padding:25px 27px 30px; background:rgba(250,252,255,.98); border:1px solid #fff; border-radius:21px; box-shadow:0 16px 45px #15314c20; }
.contact-card h2 { font-size:32px; line-height:1.15; font-weight:800; letter-spacing:-.055em; margin-bottom:10px; }
.card-intro { font-size:18px; line-height:1.35; color:var(--muted); margin-bottom:18px; }
#contact-form>label,.hp { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.field { position:relative; margin-bottom:12px; }
.field svg { position:absolute; left:19px; top:18px; width:21px; height:21px; fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
input,textarea,button { font:inherit; }
.field input,.field textarea { display:block; width:100%; border:1px solid var(--line); border-radius:13px; background:#f3f6fd; color:var(--ink); padding:17px 17px 17px 56px; font-size:15px; line-height:20px; }
.field textarea { min-height:84px; height:84px; resize:vertical; }
::placeholder { color:var(--muted); opacity:1; }
input:focus-visible,textarea:focus-visible,button:focus-visible { outline:3px solid #008fc4; outline-offset:3px; }
button { display:flex; align-items:center; justify-content:center; gap:24px; width:100%; margin-top:14px; border:0; border-radius:12px; padding:16px 12px; background:var(--blue); color:white; font-size:18px; font-weight:800; cursor:pointer; }
button span { font-size:28px; font-weight:400; line-height:20px; }
button:hover { background:#0046cc; }
button:disabled { opacity:.65; cursor:wait; }
.privacy { display:flex; align-items:center; gap:17px; font-size:13px; line-height:1.28; color:var(--muted); margin:19px 8px 0; }
.privacy svg { flex:none; width:23px; height:28px; fill:none; stroke:var(--ink); stroke-width:1.8; }
.status:empty { display:none; }
.status { margin-top:12px; font-size:14px; line-height:1.4; }
.status.error { color:#a51c25; }
.status.success { color:#116444; }
.info-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); min-height:164px; padding:24px; border-radius:21px; background:rgba(250,252,255,.98); box-shadow:0 6px 24px #15314c12; }
.info-strip article { display:flex; align-items:flex-start; gap:14px; padding:0 18px; border-right:1px solid var(--line); }
.info-strip article:first-child { padding-left:0; }
.info-strip article:last-child { border:0; padding-right:0; }
.bubble { flex:none; display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:#dcefff; color:#054ab5; }
.bubble svg { width:44px; height:44px; }
.info-strip article:first-child .bubble svg { fill:#ffda42; stroke:#09264e; }
.info-strip h3 { margin:3px 0 7px; font-size:20px; letter-spacing:-.045em; line-height:1.15; }
.info-strip p { color:var(--muted); font-size:15px; line-height:1.4; }
.info-strip p + p { margin-top:10px; }
.info-strip article > div:last-child { min-width:0; overflow-wrap:break-word; }
.guide { background:#f0f3f6; padding:72px 5%; }
.guide-inner { max-width:1360px; margin:0 auto; }
.guide-heading { margin-bottom:42px; }
.guide-label,.guide-number { color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.09em; }
.guide-label { text-transform:uppercase; margin-bottom:14px; }
.guide-heading h2 { font-size:clamp(29px,2.7vw,42px); line-height:1.15; letter-spacing:-.045em; margin-bottom:16px; }
.guide-subtitle { color:var(--muted); font-size:18px; line-height:1.5; }
.guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; }
.guide-grid h3 { font-size:24px; line-height:1.25; letter-spacing:-.035em; margin:14px 0; }
.guide-grid article > p:not(.guide-number) { color:var(--muted); font-size:16px; line-height:1.7; }
.guide-grid article > p + p { margin-top:14px; }
.guide a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.guide a:hover { color:#003dac; }
.guide a:focus-visible { outline:3px solid #008fc4; outline-offset:4px; border-radius:2px; }
.site-footer { padding:32px 5% 26px; color:var(--muted); background:#f8fafc; font-size:14px; line-height:1.65; text-align:center; }
.site-footer > p { max-width:1000px; margin:0 auto; }
.site-footer > p + p { margin-top:6px; }
.site-footer .copyright { margin-top:24px; font-size:13px; }
@media (max-width:760px) {
 .guide { padding:44px 24px; }
 .guide-heading { margin-bottom:32px; }
 .guide-subtitle { font-size:16px; }
 .guide-grid { grid-template-columns:1fr; gap:32px; }
 .guide-grid h3 { font-size:23px; margin:10px 0 12px; }
 .site-footer { padding:28px 24px 24px; }
}
@media (min-width:1800px) { .hero { max-width:1700px; width:100%; margin:auto; } }
@media (max-width:1250px) { .hero { padding-left:5%; padding-right:2%; grid-template-columns:1fr 400px; gap:35px; } .intro { margin-left:25px; max-width:390px; } .good-news { left:44%; top:380px; } .info-strip { grid-template-columns:repeat(2,minmax(0,1fr)); padding:24px; gap:24px 0; } .info-strip article { padding:0 20px; gap:16px; } .info-strip article:nth-child(odd) { padding-left:0; } .info-strip article:nth-child(even) { border-right:0; padding-right:0; } .bubble { width:65px; height:65px; } .bubble svg { width:42px; height:42px; } .info-strip h3 { font-size:18px; } .info-strip p { font-size:15px; } }
@media (max-width:900px) {
 .scene { padding:0 20px 24px; background-size:auto 820px; background-position:45% top; background-color:#e6f3fa; }
 .scene::before { background:linear-gradient(180deg,rgba(234,248,255,.7),rgba(234,248,255,.25) 340px,transparent 540px,#e6f3fa 820px); }
 .hero { display:flex; flex-direction:column; gap:0; padding:36px 0 28px; min-height:0; }
 .hero-copy { margin:auto; max-width:520px; width:100%; }
 h1 { font-size:clamp(46px,8.8vw,72px); }
 .handwritten { font-size:45px; margin-top:15px; margin-bottom:28px; }
 .intro { margin-left:0; max-width:440px; font-size:17px; line-height:1.4; }
 .good-news { position:relative; left:auto; top:auto; align-self:flex-end; margin:28px 40px 95px 0; font-size:30px; }
 .good-news svg { width:120px; top:42px; left:5px; transform:rotate(35deg); }
 .contact-card { max-width:520px; align-self:center; margin:0; }
 .info-strip { width:100%; align-self:center; }
}
@media (max-width:600px) {
 .info-strip { grid-template-columns:1fr; max-width:520px; width:100%; align-self:center; padding:8px 22px; gap:0; }
 .info-strip article,.info-strip article:nth-child(odd),.info-strip article:nth-child(even) { padding:22px 0; border-right:0; border-bottom:1px solid var(--line); gap:17px; }
 .info-strip article:last-child { border-bottom:0; }
 .info-strip h3 { font-size:20px; }
 .info-strip p { font-size:15px; line-height:1.4; }
}
@media (max-width:480px) {
 .scene { padding-left:16px; padding-right:16px; background-size:auto 640px; background-position:42% top; }
 .scene::before { background:linear-gradient(180deg,rgba(237,249,255,.82),rgba(237,249,255,.6) 310px,transparent 440px,#e6f3fa 640px); }
 .hero { padding-top:28px; }
 h1 { font-size:clamp(42px,13.33vw,52px); }
 .handwritten { font-size:clamp(27px,8.7vw,34px); white-space:nowrap; }
 .intro { font-size:16px; max-width:345px; }
 .good-news { margin-top:25px; margin-bottom:85px; margin-right:35px; padding:8px 15px; border-radius:14px; background:rgba(239,249,255,.9); }
 .contact-card { padding:24px 20px; border-radius:19px; }
 .contact-card h2 { font-size:28px; }
 .card-intro { font-size:16px; }
 button { font-size:16px; gap:12px; }
 .privacy { margin-left:0; margin-right:0; font-size:12px; gap:12px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }