@font-face { font-family: "RT Display"; src: url("bahnschrift.ttf") format("truetype"); font-weight: 100 900; }
@font-face { font-family: "RT Sans"; src: url("segoeui.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "RT Sans"; src: url("segoeuib.ttf") format("truetype"); font-weight: 700; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #dfe7e2; color: #082744; font-family: "RT Sans", Arial, sans-serif; }
a { color: inherit; }
.site-header, .mini-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 16px clamp(20px,5vw,72px); background: #082744; color: white; border-bottom: 6px solid #ffd21a; }
.site-header > a, .mini-header > a:first-child { font: 800 19px "RT Display"; text-decoration: none; }
.site-header nav, .mini-header { gap: 28px; }
.site-header nav a, .mini-header a { font-weight: 700; }
.hero { min-height: 620px; display: grid; align-content: center; padding: 80px clamp(24px,7vw,110px); background: #155eef; color: white; }
.hero > p, .section-head p, .library article > p, .carousel-page > .service { margin: 0 0 14px; color: #ffd21a; font: 700 14px "RT Display"; }
h1, h2, h3 { font-family: "RT Display", sans-serif; letter-spacing: -.025em; line-height: 1.02; }
.hero h1 { max-width: 900px; margin: 0; font-size: clamp(54px,8vw,108px); }
.hero-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
.hero-links a, .tool-link { padding: 13px 18px; border: 3px solid #082744; background: #ffd21a; color: #082744; box-shadow: 6px 6px 0 #082744; font-weight: 700; text-decoration: none; }
.hero-links a:last-child { background: white; }
.library, .carousel-page { max-width: 1500px; margin: 0 auto; padding: 90px clamp(20px,5vw,72px); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 42px; }
.section-head h2, .carousel-page h1 { margin: 0; font-size: clamp(44px,6vw,76px); }
.section-head > a { font-weight: 700; }
.guide-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 44px 24px; }
.guide-grid article { min-width: 0; }
.cover { display: block; background: #082744; box-shadow: 10px 10px 0 #0b6e4f; }
.cover img { width: 100%; aspect-ratio: 2/3; display: block; object-fit: cover; }
.guide-grid article > p { margin-top: 24px; color: #0b6e4f; }
.guide-grid h3 { margin: 0; font-size: 30px; }
.guide-grid h3 a { text-decoration: none; }
.guide-grid article > div { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.guide-grid article > div a { color: #155eef; font-weight: 700; }
footer { display: flex; justify-content: space-between; padding: 38px clamp(20px,5vw,72px); background: #082744; color: white; border-top: 6px solid #ffd21a; }
.carousel-page { max-width: 1280px; }
.carousel-page .lede { max-width: 70ch; color: #496377; font-size: 20px; line-height: 1.55; }
.frame-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin: 54px 0; }
.frame-grid figure { margin: 0; }
.frame-grid img { width: 100%; display: block; box-shadow: 10px 10px 0 #0b6e4f; }
.frame-grid figcaption { margin-top: 14px; font-weight: 700; }
.tool-link { display: inline-block; margin-bottom: 40px; }
@media (max-width: 900px) { .guide-grid, .frame-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .site-header nav { gap: 12px; font-size: 13px; } .guide-grid, .frame-grid { grid-template-columns: 1fr; } .section-head, footer { align-items: flex-start; flex-direction: column; } }