.control-hero { padding: clamp(120px,11vw,165px) 0 clamp(46px,6vw,88px); background: #edf4f7; }
.control-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px,5vw,72px); align-items: center; }
.control-hero h1 { font-size: clamp(2.25rem,4.5vw,4.4rem); line-height: 1.06; letter-spacing: -.04em; margin: 16px 0 24px; }
.control-hero p { max-width: 65ch; }
.control-photo { display: grid; place-items: center; background: #fff; border: 1px solid #d8e3e9; padding: 24px; margin: 0; }
.control-photo img { display: block; width: 100%; height: 280px; object-fit: contain; mix-blend-mode: normal; opacity: 1; filter: none; }
.control-photo figcaption { color: #536b7a; font-size: .75rem; margin-top: 12px; line-height: 1.5; }
.control-nav { display: flex; gap: 12px 24px; flex-wrap: wrap; padding-block: 22px; border-bottom: 1px solid #d8e3e9; }
.control-nav a { color: #0c3d58; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.control-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.control-card { border: 1px solid #d8e3e9; background: #fff; display: flex; flex-direction: column; }
.control-card .control-photo { border: 0; border-bottom: 1px solid #e2e9ed; }
.control-card .control-photo img { height: 215px; }
.control-card-body { padding: 26px; flex: 1; }
.control-card h3 { font-size: 1.35rem; margin: 8px 0 14px; }
.control-card p { font-size: .95rem; }
.control-badge { display: inline-block; color: #165e83; font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.control-card a,.control-source a { color: #125b81; text-decoration: underline; text-underline-offset: 4px; }
.control-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid #d8e3e9; margin: 22px 0; }
.control-table-wrap:focus-visible { outline: 3px solid #1d668f; outline-offset: 4px; }
.control-table { width: 100%; min-width: 720px; border-collapse: collapse; background: #fff; font-size: .9rem; }
.control-table caption { text-align: left; padding: 20px; font-weight: 800; color: #09283d; }
.control-table th,.control-table td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid #d8e3e9; line-height: 1.55; }
.control-table thead th { background: #09283d; color: #fff; }
.control-table tbody th { color: #09283d; }
.control-table tbody tr:nth-child(even) { background: #f2f7f9; }
.control-detail { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 40px; padding: 44px 0; border-top: 1px solid #d8e3e9; scroll-margin-top: 125px; }
.control-detail h3 { font-size: clamp(1.5rem,3vw,2.2rem); margin: 8px 0 16px; }
.control-detail li { margin-block: 10px; }
.control-note { padding: 20px 24px; border-left: 4px solid #1d668f; background: #edf4f7; font-size: .9rem; }
.control-source { color: #536b7a; font-size: .8rem; line-height: 1.7; }
.control-cta { padding: clamp(26px,4vw,52px); background: #09283d; color: #fff; }
.control-cta h2,.control-cta p { color: #fff; }
.control-cta a:not(.button) { color: #fff; text-decoration: underline; }
.control-guide section[id] { scroll-margin-top: 120px; }
.control-guide .button { color: #fff; background: #ed1c24; }
.control-guide .actions { flex-wrap: wrap; }
.esa-gallery { margin-top: 28px; }
.esa-gallery a { display: block; width: 100%; }
.control-guide .control-table a { color: #125b81; text-decoration: underline; }
.control-guide .control-card-body a:focus-visible,.esa-gallery a:focus-visible { outline: 3px solid #1d668f; outline-offset: 5px; }
@media (max-width: 1020px) { .control-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .control-hero-grid,.control-detail,.control-grid { grid-template-columns: minmax(0,1fr); } .control-detail { gap: 24px; } .control-photo img { height: 230px; } .control-card-body { padding: 22px; } .control-nav { gap: 16px 20px; } .control-guide .actions .button { width: 100%; } }