:root { --ink:#0F2A2E; --body:#35504F; --teal:#0E5A5E; --teal-deep:#0A4245; --mist:#E6F0EF; --mist-2:#F4F8F7; --line:#DCE6E5; --coral:#C2472D; --coral-deep:#A93A22; --white:#fff; --soft:#CFE3E1; --aqua:#9FD3CF; --display:'Plus Jakarta Sans','Segoe UI',sans-serif; --text:'Atkinson Hyperlegible','Segoe UI',sans-serif; --g:clamp(20px,5.5vw,80px); }
* { box-sizing:border-box; } body { margin:0; background:var(--white); color:var(--ink); font-family:var(--text); font-size:19px; line-height:1.6; }
img { max-width:100%; height:auto; display:block; } a { color:var(--teal); } a:hover { color:var(--teal-deep); } :focus-visible { outline:3px solid var(--coral); outline-offset:3px; }
h1,h2,h3 { font-family:var(--display); margin:0; color:var(--ink); text-wrap:balance; } p { margin:0; }
.wrap { padding-inline:var(--g); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 26px; border-radius:999px; font-weight:700; font-size:18px; border:0; cursor:pointer; font-family:var(--text); white-space:nowrap; text-decoration:none; }
.btn-coral { background:var(--coral); color:var(--white); } .btn-coral:hover { background:var(--coral-deep); color:var(--white); }
.btn-white { background:var(--white); color:var(--ink); border:2px solid var(--line); } .btn-white:hover { color:var(--teal); }
header.site { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px; padding-inline:var(--g); border-bottom:1px solid var(--line); background:var(--white); }
.brand { display:flex; align-items:center; color:var(--ink); text-decoration:none; flex-shrink:0; }
.brand-img { height:44px; width:auto; display:block; } .brand-img.foot { height:40px; }
.brand-col { display:flex; flex-direction:column; gap:4px; } .brand-mark { width:40px; height:40px; flex-shrink:0; border-radius:11px; box-shadow:0 6px 14px -8px rgba(14,90,94,.6); }
.brand-word { font-family:var(--display); font-weight:600; font-size:27px; letter-spacing:-.02em; line-height:1; color:var(--body); } .brand-word span { color:var(--teal); font-weight:800; }
.brand-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--coral); margin-left:3px; }
.brand-tag { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--body); }
nav.main { display:flex; gap:28px; font-size:18px; white-space:nowrap; } nav.main a { color:var(--ink); text-decoration:none; } nav.main a:hover { color:var(--teal); }
.head-right { display:flex; align-items:center; gap:20px; } .head-phone { font-weight:700; font-size:19px; color:var(--ink); white-space:nowrap; text-decoration:none; }
.call-icon { display:none; width:48px; height:48px; border-radius:50%; background:var(--coral); color:var(--white); align-items:center; justify-content:center; }
main { padding-block:clamp(40px,4.5vw,60px) clamp(56px,7vw,96px); }
.ahero { background:var(--mist); padding-block:clamp(28px,4vw,56px) clamp(24px,3vw,40px); } .ahero-in { max-width:760px; } .ahero-in.list { max-width:none; }
.ahero .crumb { margin-bottom:22px; } .ahero .meta { margin:18px 0 0; } .ahero .intro { margin-bottom:0; }
.label { display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin-bottom:12px; } .label::before { content:""; width:26px; height:3px; border-radius:2px; background:var(--coral); }
.has-wave { position:relative; } .wave { position:absolute; top:-1px; left:0; right:0; height:clamp(28px,4.2vw,64px); display:block; width:100%; pointer-events:none; } .wave path { fill:var(--mist); }
.crumb { font-size:16px; color:var(--body); margin-bottom:18px; } .crumb a { text-decoration:none; font-weight:700; }
article { max-width:760px; } article h1 { font-size:clamp(32px,4vw,50px); line-height:1.08; font-weight:800; letter-spacing:-.02em; }
.meta { display:flex; gap:14px; align-items:center; margin:18px 0 28px; font-size:16px; color:var(--body); } .meta img { width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--teal); }
article > p:first-of-type { font-size:clamp(20px,1.8vw,23px); line-height:1.55; color:var(--ink); background:var(--mist); border-left:5px solid var(--teal); padding:18px 22px; border-radius:0 16px 16px 0; }
article h2 { font-size:clamp(23px,2.2vw,29px); font-weight:800; margin:34px 0 10px; } article p + p { margin-top:14px; } article p { color:var(--body); }
.ask { margin-top:40px; background:var(--mist); border-radius:24px; padding:clamp(20px,3vw,32px); display:flex; gap:20px; align-items:flex-start; }
.ask img { width:88px; height:88px; border-radius:50%; object-fit:cover; border:3px solid var(--teal); flex-shrink:0; }
.ask b { display:block; font-family:var(--display); font-size:24px; line-height:1.2; margin-bottom:8px; } .ask p { font-size:17px; color:var(--body); }
.ask-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.more { margin-top:40px; border-top:1px solid var(--line); padding-top:24px; } .more h2 { font-size:22px; margin-bottom:12px; }
.more a { display:block; padding:12px 0; border-bottom:1px solid var(--line); font-weight:700; text-decoration:none; font-size:18px; }
.list h1 { font-size:clamp(34px,4.2vw,54px); line-height:1.06; font-weight:800; letter-spacing:-.02em; } .list .intro { font-size:clamp(19px,1.7vw,22px); color:var(--body); max-width:60ch; margin:14px 0 32px; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.grid a { display:flex; flex-direction:column; gap:8px; background:var(--mist-2); border:1px solid var(--line); border-radius:20px; padding:22px 24px; color:var(--ink); text-decoration:none; transition:border-color .15s; }
.grid a:hover { border-color:var(--teal); } .grid a b { font-family:var(--display); font-size:20px; line-height:1.2; } .grid a span { font-size:16px; color:var(--body); }
.grid a em { font-style:normal; font-weight:700; color:var(--teal); font-size:15px; margin-top:auto; padding-top:8px; }
footer { background:var(--mist-2); border-top:1px solid var(--line); padding-block:48px 56px; display:flex; flex-direction:column; gap:20px; color:var(--body); }
.foot-top { display:flex; flex-wrap:wrap; gap:16px 32px; justify-content:space-between; align-items:center; } .disclaimer { font-size:14px; line-height:1.7; max-width:110ch; }
.callbar { display:none; }
@media (max-width:1180px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:1100px) { nav.main { display:none; } }
@media (max-width:720px) { body { font-size:18px; } .head-phone,.head-right .btn { display:none; } .call-icon { display:inline-flex; } header.site { min-height:72px; } .brand-word { font-size:23px; } .brand-tag { font-size:10px; letter-spacing:.1em; } .brand-img, .brand-img.foot { height:34px; } header.site { gap:12px; } .head-right { gap:10px; }
  .grid { grid-template-columns:minmax(0,1fr); } .ask { flex-direction:column; } .ask-actions .btn { width:100%; } footer { padding-bottom:120px; }
  .callbar { display:flex; gap:10px; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); padding:8px; border-radius:999px; background:var(--ink); box-shadow:0 12px 28px -12px rgba(15,42,46,.5); z-index:20; }
  .callbar a { flex:1; min-height:50px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; color:var(--white); text-decoration:none; } .callbar a:first-child { background:var(--coral); } }