:root { --sg-paper: #e9eeeb; --sg-ink: #202728; --sg-orange: #ffa33d; --sg-line: rgb(32 39 40 / 18%); }
.sg-case { color: var(--sg-ink); background: #101213; }
.sg-case main { background: var(--sg-paper); }
.sg-case .button, .sg-case .menu-toggle { color: var(--sg-ink); background: var(--sg-orange); border-color: var(--sg-orange); }
.sg-case .menu-toggle span { background: var(--sg-ink); }
.sg-shell { width: min(1520px, calc(100% - 96px)); margin-inline: auto; }
.sg-wide { width: min(1760px, calc(100% - 48px)); margin-inline: auto; }
.sg-kicker { margin: 0; font-size: 12px; line-height: 1.5; text-transform: uppercase; letter-spacing: .08em; }
.sg-hero { color: #fff; background: var(--sg-ink); }
.sg-hero__heading { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 48px; padding-block: clamp(46px, 5vw, 80px); }
.sg-hero .sg-kicker { color: var(--sg-orange); }
.sg-hero h1 { margin: 26px 0 0; font: 400 clamp(92px, 13vw, 200px)/.9 var(--display); letter-spacing: -.035em; }
.sg-hero__lead { padding-bottom: 5px; }
.sg-hero__lead p { margin: 0 0 20px; font-size: clamp(26px, 2.7vw, 42px); line-height: 1.2; letter-spacing: -.02em; }
.sg-hero__lead > span { color: #cbd3d1; font-size: 17px; line-height: 1.5; }
.sg-photo, .sg-plan { margin: 0; min-width: 0; }
.sg-photo.sg-wide { margin-inline: auto; }
.sg-photo > a, .sg-plan > a { display: block; }
.sg-photo img, .sg-plan img { display: block; width: 100%; height: auto; object-fit: contain; }
.sg-photo figcaption, .sg-plan figcaption { padding-top: 14px; font-size: 14px; line-height: 1.5; }
.sg-hero__photo { width: min(1920px, 100%); margin-inline: auto; }
.sg-hero__photo figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 18px 24px; font-size: 12px; letter-spacing: .03em; }
.sg-index { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--sg-line); }
.sg-index a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 30px; border-right: 1px solid var(--sg-line); font-size: 14px; text-decoration: none; }
.sg-index a:last-child { border-right: 0; }
.sg-index a span { color: #80521f; font-size: 12px; }
.sg-index a:is(:hover, :focus-visible) { background: #dbe2de; }
.sg-case section[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.sg-section { padding-block: clamp(64px, 7vw, 112px); }
.sg-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 6vw, 96px); }
.sg-intro > *, .sg-hero__heading > *, .sg-detail > * { min-width: 0; }
.sg-section h2 { margin: 22px 0 0; font: 400 clamp(54px, 6vw, 98px)/1.02 var(--display); letter-spacing: -.03em; }
.sg-copy { padding-top: 38px; }
.sg-copy p, .sg-detail__copy > p:not(.sg-kicker) { max-width: 640px; margin: 0; font-size: clamp(18px, 1.4vw, 23px); line-height: 1.55; }
.sg-copy p + p, .sg-detail__copy > p + p { margin-top: 1em; }
.sg-feature { margin-top: clamp(44px, 5vw, 80px); }
.sg-interior { background: #dce3e0; }
.sg-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; align-items: start; }
.sg-pair.sg-feature { margin-top: clamp(44px, 5vw, 80px); }
.sg-detail { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(36px, 5vw, 80px); align-items: start; margin-top: 72px; }
.sg-detail__copy { padding-top: 24px; border-top: 1px solid var(--sg-line); }
.sg-detail h3 { margin: 22px 0 26px; font: 400 clamp(42px, 4vw, 64px)/1.04 var(--display); letter-spacing: -.025em; }
.sg-plans { background: #fff; }
.sg-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-tabs[hidden], .sg-plan[hidden] { display: none; }
.sg-tabs button { padding: 22px 26px; border: 1px solid var(--sg-line); border-bottom: 0; color: var(--sg-ink); background: #dce3e0; cursor: pointer; text-align: left; font-size: 16px; }
.sg-tabs button + button { border-left: 0; }
.sg-tabs button[aria-selected="true"] { color: #fff; background: var(--sg-ink); }
.sg-tabs button:hover { box-shadow: inset 0 -3px var(--sg-orange); }
.sg-plan figcaption { padding: 16px 24px; border-top: 1px solid var(--sg-line); }
.sg-plan:focus-visible { outline: 2px solid var(--sg-ink); outline-offset: 4px; }
.sg-end { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 28px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--sg-line); }
.sg-end p { margin: 0; font-size: 14px; letter-spacing: .03em; }
.sg-end p span { display: block; margin-top: 8px; font-size: 16px; letter-spacing: 0; }
.sg-end a { font-size: 16px; text-underline-offset: 5px; }
.sg-case > .site-footer { margin-top: 0; padding-block: 40px; color: #c8cdca; }
.sg-case main a:focus-visible, .sg-tabs button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 1050px) {
  .sg-shell { width: calc(100% - 48px); }
  .sg-hero__heading { gap: 32px; }
}
@media (max-width: 900px) { .sg-detail { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 760px) {
  .sg-hero__heading, .sg-intro { grid-template-columns: 1fr; gap: 28px; }
  .sg-hero h1 { font-size: clamp(88px, 18vw, 136px); }
  .sg-hero__lead p { font-size: 26px; }
  .sg-section { padding-block: 64px; }
  .sg-copy { padding-top: 0; }
  .sg-index a { padding: 18px; gap: 10px; flex-direction: column; align-items: start; }
  .sg-pair { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .sg-detail { margin-top: 48px; }
  .sg-tabs button { padding: 18px; font-size: 15px; }
  .sg-end { align-items: start; margin-top: 48px; }
}
@media (max-width: 450px) {
  .sg-shell, .sg-wide { width: calc(100% - 32px); }
  .sg-hero__heading { padding-block: 38px; }
  .sg-hero h1 { font-size: clamp(84px, 24vw, 106px); }
  .sg-hero__photo figcaption { padding: 14px 16px; }
  .sg-section h2 { font-size: 50px; }
  .sg-index a { padding-inline: 12px; font-size: 13px; }
  .sg-plan figcaption { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .sg-case * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media print { .site-header, .mobile-menu, .sg-index, .sg-tabs, .sg-end, .site-footer { display: none !important; } .sg-plan[hidden] { display: block; } .sg-case { padding-top: 0; } }