@layer reset, tokens, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { min-height: 100vh; display: flex; flex-direction: column; }
  main { flex: 1; }
  img { max-width: 100%; height: auto; display: block; }
  button { cursor: pointer; border: none; background: none; font: inherit; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  table { border-collapse: collapse; width: 100%; }
  input, textarea, select { font: inherit; }
}

@layer tokens {
  :root {
    --colorPrimary: #c8410a;
    --colorPrimaryDark: #9e3208;
    --colorPrimaryLight: #f0601e;
    --colorSecondary: #1a1a18;
    --colorSecondaryMid: #2e2e2b;
    --colorAccent: #e8c547;
    --colorAccentDark: #c9a824;
    --colorBg: #faf8f4;
    --colorBgAlt: #f2ede4;
    --colorBgDark: #1a1a18;
    --colorText: #1c1c1a;
    --colorTextMid: #4a4a45;
    --colorTextLight: #7a7a72;
    --colorBorder: #1c1c1a;
    --colorBorderLight: #d8d0c4;
    --colorWhite: #fefefe;

    --shadowHard: 4px 4px 0 var(--colorBorder);
    --shadowHardMd: 6px 6px 0 var(--colorBorder);
    --shadowHardLg: 8px 8px 0 var(--colorBorder);
    --shadowHardAccent: 4px 4px 0 var(--colorAccent);
    --shadowHardPrimary: 4px 4px 0 var(--colorPrimary);
    --shadowLayered: 2px 2px 0 var(--colorBorder), 5px 5px 0 rgba(28,28,26,0.15);

    --fontHead: 'Fraunces', Georgia, serif;
    --fontBody: 'Inter', system-ui, sans-serif;

    --sizeXs: 0.75rem;
    --sizeSm: 0.875rem;
    --sizeMd: 1rem;
    --sizeLg: 1.125rem;
    --sizeXl: 1.25rem;
    --size2xl: 1.5rem;
    --size3xl: 2rem;
    --size4xl: 2.5rem;
    --size5xl: 3.5rem;

    --radiusSm: 2px;
    --radiusMd: 4px;
    --radiusLg: 8px;
    --radiusXl: 16px;
    --radiusFull: 9999px;

    --spaceXs: 0.5rem;
    --spaceSm: 1rem;
    --spaceMd: 1.5rem;
    --spaceLg: 2.5rem;
    --spaceXl: 4rem;
    --space2xl: 6rem;
    --space3xl: 8rem;

    --transBase: 0.18s ease;
    --transMed: 0.28s ease;
    --transSlow: 0.42s ease;

    --headerH: 70px;
  }
}

@layer layout {
  body {
    font-family: var(--fontBody);
    font-size: var(--sizeMd);
    color: var(--colorText);
    background-color: var(--colorBg);
    line-height: 1.65;
  }

  .container {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
}

@layer components {

  
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spaceXs);
    padding: 0.75rem 1.5rem;
    font-family: var(--fontBody);
    font-size: var(--sizeSm);
    font-weight: 500;
    border: 2px solid var(--colorBorder);
    border-radius: var(--radiusSm);
    transition: transform var(--transBase), box-shadow var(--transBase), background var(--transBase), color var(--transBase);
    cursor: pointer;
    min-height: 44px;
    white-space: nowrap;
  }
  .btn--primary {
    background: var(--colorPrimary);
    color: var(--colorWhite);
    box-shadow: var(--shadowHard);
  }
  .btn--primary:hover {
    background: var(--colorPrimaryDark);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadowHardLg);
  }
  .btn--ghost {
    background: transparent;
    color: var(--colorText);
    border-color: var(--colorBorder);
    box-shadow: var(--shadowHard);
  }
  .btn--ghost:hover {
    background: var(--colorSecondary);
    color: var(--colorWhite);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadowHardLg);
  }
  .btn--outline {
    background: transparent;
    color: var(--colorPrimary);
    border-color: var(--colorPrimary);
    box-shadow: var(--shadowHardPrimary);
  }
  .btn--outline:hover {
    background: var(--colorPrimary);
    color: var(--colorWhite);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--colorPrimaryDark);
  }

  
  .sectionLabel {
    display: inline-block;
    font-size: var(--sizeXs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--colorPrimary);
    border: 2px solid var(--colorPrimary);
    padding: 0.2rem 0.7rem;
    border-radius: var(--radiusSm);
    margin-bottom: var(--spaceSm);
  }
  .sectionLabel--light {
    color: var(--colorAccent);
    border-color: var(--colorAccent);
  }

  .sectionTitle {
    font-family: var(--fontHead);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--colorSecondary);
    margin-bottom: var(--spaceMd);
  }

  
  .siteHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--headerH);
    background: transparent;
    transition: background var(--transMed), box-shadow var(--transMed);
  }
  .siteHeader--scrolled {
    background: var(--colorBg);
    box-shadow: 0 2px 0 var(--colorBorder);
  }
  .siteHeader_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
  .siteHeader_logo img {
    height: 36px;
    width: auto;
    transition: opacity var(--transBase);
  }
  .siteHeader_logo:hover img { opacity: 0.8; }
  .siteHeader_nav {
    display: none;
    align-items: center;
    gap: var(--spaceSm);
  }
  @media (min-width: 768px) {
    .siteHeader_nav { display: flex; }
  }
  .siteHeader_navLink {
    font-size: var(--sizeSm);
    font-weight: 500;
    color: var(--colorText);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radiusSm);
    transition: color var(--transBase), background var(--transBase);
    position: relative;
  }
  .siteHeader_navLink:hover,
  .siteHeader_navLink--active {
    color: var(--colorPrimary);
  }
  .siteHeader_navCta {
    background: var(--colorPrimary);
    color: var(--colorWhite) !important;
    padding: 0.5rem 1rem;
    border: 2px solid var(--colorBorder);
    box-shadow: var(--shadowHard);
    border-radius: var(--radiusSm);
    position: relative;
    transition: transform var(--transBase), box-shadow var(--transBase), background var(--transBase);
  }
  .siteHeader_navCta:hover {
    background: var(--colorPrimaryDark) !important;
    transform: translate(-2px, -2px);
    box-shadow: var(--shadowHardMd);
  }
  .siteHeader_ctaDot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: var(--colorAccent);
    border: 2px solid var(--colorBorder);
    border-radius: var(--radiusFull);
    animation: ctaPulse 2s ease-in-out infinite;
  }
  @keyframes ctaPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
  }
  .siteHeader_menuToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--colorBorder);
    border-radius: var(--radiusSm);
    background: var(--colorWhite);
    box-shadow: var(--shadowHard);
    font-size: 1.1rem;
    transition: transform var(--transBase), box-shadow var(--transBase);
  }
  .siteHeader_menuToggle:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadowHardMd);
  }
  @media (min-width: 768px) {
    .siteHeader_menuToggle { display: none; }
  }

  
  .mobileSheet {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
  }
  .mobileSheet.is-open {
    pointer-events: all;
  }
  .mobileSheet_backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28,28,26,0.5);
    opacity: 0;
    transition: opacity var(--transMed);
  }
  .mobileSheet.is-open .mobileSheet_backdrop {
    opacity: 1;
  }
  .mobileSheet_panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--colorBg);
    border-top: 3px solid var(--colorBorder);
    border-radius: var(--radiusXl) var(--radiusXl) 0 0;
    padding: var(--spaceSm) var(--spaceMd) calc(var(--spaceLg) + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform var(--transMed) cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 -4px 0 var(--colorBorder);
  }
  .mobileSheet.is-open .mobileSheet_panel {
    transform: translateY(0);
  }
  .mobileSheet_handle {
    width: 48px;
    height: 5px;
    background: var(--colorBorderLight);
    border-radius: var(--radiusFull);
    margin: 0 auto var(--spaceMd);
  }
  .mobileSheet_nav {
    display: flex;
    flex-direction: column;
    gap: var(--spaceXs);
  }
  .mobileSheet_link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem var(--spaceSm);
    font-size: var(--sizeLg);
    font-weight: 500;
    border: 2px solid var(--colorBorderLight);
    border-radius: var(--radiusMd);
    transition: background var(--transBase), border-color var(--transBase), transform var(--transBase);
    min-height: 56px;
  }
  .mobileSheet_link:hover {
    background: var(--colorBgAlt);
    border-color: var(--colorBorder);
    transform: translateX(4px);
  }
  .mobileSheet_link--cta {
    background: var(--colorPrimary);
    color: var(--colorWhite);
    border-color: var(--colorBorder);
    box-shadow: var(--shadowHard);
  }
  .mobileSheet_link--cta:hover {
    background: var(--colorPrimaryDark);
  }
  .mobileSheet_link i {
    width: 20px;
    text-align: center;
    color: var(--colorPrimary);
  }
  .mobileSheet_link--cta i { color: var(--colorWhite); }

  
  .mainHero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mainHero_halfLeft {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: var(--colorSecondary);
    transform: translateY(-100%);
    transition: transform 0.9s cubic-bezier(0.77, 0, 0.18, 1);
    z-index: 1;
  }
  .mainHero_halfRight {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.9s cubic-bezier(0.77, 0, 0.18, 1);
    z-index: 1;
  }
  .mainHero_halfLeft.hero-revealed,
  .mainHero_halfRight.hero-revealed {
    transform: translateY(0);
  }
  .mainHero_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .mainHero_content {
    position: relative;
    z-index: 10;
    max-width: 640px;
    padding: var(--spaceLg) var(--spaceMd);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease 0.85s, transform 0.7s ease 0.85s;
  }
  .mainHero_content.hero-revealed {
    opacity: 1;
    transform: translateY(0);
  }
  .mainHero_content .sectionLabel {
    color: var(--colorAccent);
    border-color: var(--colorAccent);
  }
  .mainHero_title {
    font-family: var(--fontHead);
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--colorWhite);
    margin-bottom: var(--spaceSm);
    text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  }
  .mainHero_sub {
    font-size: var(--sizeLg);
    color: rgba(255,255,255,0.88);
    margin-bottom: var(--spaceLg);
    max-width: 480px;
    line-height: 1.6;
  }
  .mainHero_actions {
    display: flex;
    gap: var(--spaceSm);
    flex-wrap: wrap;
  }

  
  .introStrip {
    background: var(--colorAccent);
    border-top: 3px solid var(--colorBorder);
    border-bottom: 3px solid var(--colorBorder);
    padding: var(--spaceSm) 0;
    overflow: hidden;
  }
  .introStrip_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spaceSm);
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
  .introStrip_item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--sizeSm);
    font-weight: 500;
    color: var(--colorSecondary);
  }
  .introStrip_item i { color: var(--colorPrimary); }
  .introStrip_divider {
    width: 3px;
    height: 3px;
    background: var(--colorSecondary);
    border-radius: var(--radiusFull);
    display: none;
  }
  @media (min-width: 600px) {
    .introStrip_divider { display: block; }
  }

  
  .aboutSection {
    padding: var(--space2xl) 0;
    background: var(--colorBg);
  }
  .aboutSection_inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spaceLg);
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
  @media (min-width: 860px) {
    .aboutSection_inner {
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }
  }
  .aboutSection_imageCol { position: relative; }
  .aboutSection_imgWrap {
    border: 3px solid var(--colorBorder);
    box-shadow: var(--shadowHardLg);
    border-radius: var(--radiusMd);
    overflow: hidden;
    aspect-ratio: 4/3;
  }
  .aboutSection_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transSlow);
  }
  .aboutSection_imgWrap:hover .aboutSection_img { transform: scale(1.04); }
  .aboutSection_badge {
    position: absolute;
    bottom: -16px;
    right: -8px;
    background: var(--colorAccent);
    border: 3px solid var(--colorBorder);
    box-shadow: var(--shadowHard);
    border-radius: var(--radiusMd);
    padding: 0.5rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--sizeSm);
    font-weight: 500;
    color: var(--colorSecondary);
  }
  .aboutSection_textCol { padding-block: var(--spaceSm); }
  .aboutSection_lead {
    font-size: var(--sizeLg);
    font-weight: 500;
    color: var(--colorSecondaryMid);
    margin-bottom: var(--spaceSm);
  }
  .aboutSection_textCol p {
    color: var(--colorTextMid);
    margin-bottom: var(--spaceSm);
  }
  .aboutSection_textCol .btn { margin-top: var(--spaceXs); }

  
  .valuesSection {
    padding: var(--space2xl) 0;
    background: var(--colorBgAlt);
    border-top: 3px solid var(--colorBorder);
    border-bottom: 3px solid var(--colorBorder);
  }
  .valuesSection_inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
  .valuesSection_header {
    max-width: 560px;
    margin-bottom: var(--spaceLg);
  }
  .valuesSection_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spaceSm);
  }
  @media (min-width: 600px) {
    .valuesSection_grid { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 960px) {
    .valuesSection_grid { grid-template-columns: repeat(4, 1fr); }
  }
  .valueCard {
    background: var(--colorWhite);
    border: 3px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    padding: var(--spaceMd);
    box-shadow: var(--shadowHardMd);
    transition: transform var(--transBase), box-shadow var(--transBase);
  }
  .valueCard:hover {
    transform: translate(-3px, -3px);
    box-shadow: var(--shadowHardLg);
  }
  .valueCard_icon {
    width: 48px;
    height: 48px;
    background: var(--colorPrimary);
    border: 2px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorWhite);
    font-size: 1.2rem;
    margin-bottom: var(--spaceSm);
    box-shadow: 3px 3px 0 var(--colorBorder);
  }
  .valueCard_title {
    font-family: var(--fontHead);
    font-size: var(--sizeXl);
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--colorSecondary);
  }
  .valueCard_text {
    font-size: var(--sizeSm);
    color: var(--colorTextMid);
    line-height: 1.6;
  }

  
  .gradientFade {
    height: 80px;
    background: linear-gradient(to bottom, var(--colorBgAlt), var(--colorBg));
    margin-top: -3px;
  }

  
  .coursesSection {
    padding: var(--space2xl) 0;
    background: var(--colorBg);
  }
  .coursesSection_inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
  .coursesSection_header {
    max-width: 640px;
    margin-bottom: var(--spaceLg);
  }
  .coursesSection_intro {
    color: var(--colorTextMid);
    font-size: var(--sizeLg);
    margin-top: 0.5rem;
  }
  .coursesSection_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spaceMd);
  }
  @media (min-width: 600px) {
    .coursesSection_grid { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 960px) {
    .coursesSection_grid { grid-template-columns: repeat(4, 1fr); }
  }
  .courseCard {
    border: 3px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    overflow: hidden;
    background: var(--colorWhite);
    box-shadow: var(--shadowLayered);
    transition: transform var(--transBase), box-shadow var(--transBase);
  }
  .courseCard:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--colorBorder);
  }
  .courseCard_imgWrap {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-bottom: 3px solid var(--colorBorder);
  }
  .courseCard_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transSlow);
  }
  .courseCard:hover .courseCard_img { transform: scale(1.06); }
  .courseCard_body { padding: var(--spaceSm); }
  .courseCard_tag {
    display: inline-block;
    font-size: var(--sizeXs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colorPrimary);
    background: rgba(200, 65, 10, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radiusSm);
    margin-bottom: 0.5rem;
    border: 1px solid var(--colorPrimary);
  }
  .courseCard_title {
    font-family: var(--fontHead);
    font-size: var(--sizeXl);
    font-weight: 600;
    color: var(--colorSecondary);
    margin-bottom: 0.4rem;
  }
  .courseCard_text {
    font-size: var(--sizeSm);
    color: var(--colorTextMid);
    line-height: 1.6;
  }

  
  .glassSection {
    position: relative;
    padding: var(--space3xl) 0;
    overflow: hidden;
    border-top: 3px solid var(--colorBorder);
    border-bottom: 3px solid var(--colorBorder);
  }
  .glassSection_bg {
    position: absolute;
    inset: 0;
  }
  .glassSection_bgImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .glassSection_bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,26,24,0.75) 0%, rgba(200,65,10,0.45) 100%);
  }
  .glassSection_inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
    display: flex;
    justify-content: flex-end;
  }
  .glassCard {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border: 2px solid rgba(255,255,255,0.28);
    border-radius: var(--radiusLg);
    padding: var(--spaceLg);
    max-width: 520px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 4px 4px 0 rgba(255,255,255,0.1);
  }
  .glassCard_title {
    font-family: var(--fontHead);
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 700;
    color: var(--colorWhite);
    margin-bottom: var(--spaceSm);
    line-height: 1.15;
  }
  .glassCard_text {
    color: rgba(255,255,255,0.88);
    margin-bottom: var(--spaceSm);
    font-size: var(--sizeMd);
    line-height: 1.65;
  }
  .glassCard .btn--primary {
    margin-top: var(--spaceXs);
  }

  
  .regionalSection {
    padding: var(--space2xl) 0;
    background: var(--colorBg);
  }
  .regionalSection_inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spaceLg);
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
    align-items: center;
  }
  @media (min-width: 860px) {
    .regionalSection_inner { grid-template-columns: 1fr 1fr; }
  }
  .regionalSection_textCol p {
    color: var(--colorTextMid);
    margin-bottom: var(--spaceSm);
  }
  .regionalSection_tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spaceXs);
    margin-top: var(--spaceSm);
  }
  .regionTag {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border: 2px solid var(--colorBorder);
    border-radius: var(--radiusSm);
    font-size: var(--sizeSm);
    font-weight: 500;
    background: var(--colorWhite);
    box-shadow: 3px 3px 0 var(--colorBorder);
    transition: transform var(--transBase), box-shadow var(--transBase), background var(--transBase);
  }
  .regionTag:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--colorBorder);
    background: var(--colorAccent);
  }
  .regionalSection_imageCol {}
  .regionalSection_imgWrap {
    border: 3px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    overflow: hidden;
    box-shadow: var(--shadowHardLg);
    aspect-ratio: 4/3;
  }
  .regionalSection_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transSlow);
  }
  .regionalSection_imgWrap:hover .regionalSection_img { transform: scale(1.04); }

  
  .contactCards {
    padding: var(--space2xl) 0;
    background: var(--colorSecondary);
    border-top: 3px solid var(--colorBorder);
  }
  .contactCards_inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
  .contactCards_header {
    margin-bottom: var(--spaceLg);
  }
  .contactCards_header .sectionLabel {
    color: var(--colorAccent);
    border-color: var(--colorAccent);
  }
  .contactCards_header .sectionTitle {
    color: var(--colorWhite);
  }
  .contactCards_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spaceSm);
  }
  @media (min-width: 640px) {
    .contactCards_grid { grid-template-columns: repeat(3, 1fr); }
  }
  .contactCard {
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.18);
    border-radius: var(--radiusMd);
    padding: var(--spaceMd);
    transition: background var(--transBase), border-color var(--transBase), transform var(--transBase);
  }
  .contactCard:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--colorAccent);
    transform: translateY(-3px);
  }
  .contactCard_icon {
    width: 44px;
    height: 44px;
    background: var(--colorPrimary);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: var(--radiusMd);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorWhite);
    font-size: 1rem;
    margin-bottom: var(--spaceSm);
  }
  .contactCard_title {
    font-family: var(--fontHead);
    font-size: var(--sizeXl);
    font-weight: 600;
    color: var(--colorWhite);
    margin-bottom: 0.4rem;
  }
  .contactCard_detail {
    font-size: var(--sizeMd);
    color: var(--colorAccent);
    font-weight: 500;
  }
  .contactCard_detail a {
    color: var(--colorAccent);
    transition: opacity var(--transBase);
  }
  .contactCard_detail a:hover { opacity: 0.75; }
  .contactCard_note {
    font-size: var(--sizeSm);
    color: rgba(255,255,255,0.55);
    margin-top: 0.2rem;
  }

  
  .pageHero {
    padding-top: calc(var(--headerH) + var(--spaceXl));
    padding-bottom: var(--spaceXl);
    background: var(--colorSecondary);
    border-bottom: 3px solid var(--colorBorder);
    position: relative;
    overflow: hidden;
  }
  .pageHero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(200,65,10,0.2) 0%, transparent 70%);
    pointer-events: none;
  }
  .pageHero_inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
    max-width: 720px;
    margin-inline: 0;
    margin-left: max(var(--spaceSm), calc(50vw - 590px));
  }
  .pageHero .sectionLabel {
    color: var(--colorAccent);
    border-color: var(--colorAccent);
  }
  .pageHero_title {
    font-family: var(--fontHead);
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 700;
    color: var(--colorWhite);
    line-height: 1.1;
    margin-bottom: var(--spaceSm);
  }
  .pageHero_sub {
    font-size: var(--sizeLg);
    color: rgba(255,255,255,0.78);
    max-width: 560px;
    line-height: 1.6;
  }
  .pageHero--legal .pageHero_sub {
    font-size: var(--sizeMd);
    color: rgba(255,255,255,0.55);
  }

  
  .processSection {
    padding: var(--space2xl) 0;
    background: var(--colorBg);
  }
  .processSection_inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
  .processSection_header {
    max-width: 560px;
    margin-bottom: var(--spaceLg);
  }
  .processSection_steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spaceSm);
  }
  @media (min-width: 768px) {
    .processSection_steps { grid-template-columns: 1fr 1fr; }
  }
  .processStep {
    display: flex;
    gap: var(--spaceSm);
    background: var(--colorWhite);
    border: 3px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    padding: var(--spaceMd);
    box-shadow: var(--shadowHardMd);
    transition: transform var(--transBase), box-shadow var(--transBase);
  }
  .processStep:hover {
    transform: translate(-3px, -3px);
    box-shadow: var(--shadowHardLg);
  }
  .processStep_num {
    font-family: var(--fontHead);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--colorPrimary);
    opacity: 0.25;
    line-height: 1;
    flex-shrink: 0;
    width: 3rem;
  }
  .processStep_title {
    font-family: var(--fontHead);
    font-size: var(--sizeXl);
    font-weight: 600;
    color: var(--colorSecondary);
    margin-bottom: 0.4rem;
  }
  .processStep_content p {
    font-size: var(--sizeSm);
    color: var(--colorTextMid);
    line-height: 1.65;
  }

  
  .equipSection {
    padding: var(--space2xl) 0;
    background: var(--colorBgAlt);
    border-top: 3px solid var(--colorBorder);
    border-bottom: 3px solid var(--colorBorder);
  }
  .equipSection_inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spaceLg);
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
    align-items: center;
  }
  @media (min-width: 860px) {
    .equipSection_inner { grid-template-columns: 1fr 1fr; }
  }
  .equipSection_imgWrap {
    border: 3px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    overflow: hidden;
    box-shadow: var(--shadowHardLg);
    aspect-ratio: 4/3;
  }
  .equipSection_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transSlow);
  }
  .equipSection_imgWrap:hover .equipSection_img { transform: scale(1.04); }
  .equipSection_lead {
    font-size: var(--sizeLg);
    font-weight: 500;
    color: var(--colorSecondaryMid);
    margin-bottom: var(--spaceSm);
  }
  .equipSection_textCol p {
    color: var(--colorTextMid);
    margin-bottom: var(--spaceSm);
  }

  
  .faqSection {
    padding: var(--space2xl) 0;
    background: var(--colorBg);
  }
  .faqSection_inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
  .faqSection_header {
    max-width: 560px;
    margin-bottom: var(--spaceLg);
  }
  .faqSection_list {
    display: flex;
    flex-direction: column;
    gap: var(--spaceXs);
    max-width: 760px;
  }
  .faqItem {
    border: 3px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    background: var(--colorWhite);
    overflow: hidden;
    box-shadow: var(--shadowHard);
    transition: box-shadow var(--transBase);
  }
  .faqItem:hover { box-shadow: var(--shadowHardMd); }
  .faqItem_question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spaceSm) var(--spaceMd);
    font-size: var(--sizeMd);
    font-weight: 500;
    color: var(--colorSecondary);
    text-align: left;
    gap: var(--spaceSm);
    min-height: 56px;
    transition: background var(--transBase);
  }
  .faqItem_question:hover { background: var(--colorBgAlt); }
  .faqItem_question[aria-expanded="true"] { background: var(--colorPrimary); color: var(--colorWhite); }
  .faqItem_icon {
    flex-shrink: 0;
    transition: transform var(--transMed);
  }
  .faqItem_question[aria-expanded="true"] .faqItem_icon {
    transform: rotate(180deg);
  }
  .faqItem_answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transMed) ease, padding var(--transMed) ease;
    padding: 0 var(--spaceMd);
  }
  .faqItem_answer.is-open {
    max-height: 300px;
    padding: var(--spaceSm) var(--spaceMd);
  }
  .faqItem_answer p {
    font-size: var(--sizeSm);
    color: var(--colorTextMid);
    line-height: 1.65;
  }

  
  .scheduleSection {
    padding: var(--space2xl) 0;
    background: var(--colorBg);
  }
  .scheduleSection_inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
  .scheduleSection_header {
    max-width: 640px;
    margin-bottom: var(--spaceLg);
  }
  .scheduleSection_intro {
    color: var(--colorTextMid);
    font-size: var(--sizeLg);
    margin-top: 0.5rem;
  }
  .scheduleSection_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spaceSm);
  }
  @media (min-width: 640px) {
    .scheduleSection_grid { grid-template-columns: repeat(3, 1fr); }
  }
  .scheduleCard {
    background: var(--colorWhite);
    border: 3px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    padding: var(--spaceMd);
    box-shadow: var(--shadowHardMd);
    transition: transform var(--transBase), box-shadow var(--transBase);
    text-align: center;
  }
  .scheduleCard:hover {
    transform: translate(-3px, -3px);
    box-shadow: var(--shadowHardLg);
  }
  .scheduleCard--featured {
    background: var(--colorPrimary);
    color: var(--colorWhite);
    border-color: var(--colorPrimaryDark);
  }
  .scheduleCard--featured .scheduleCard_title,
  .scheduleCard--featured .scheduleCard_time,
  .scheduleCard--featured .scheduleCard_text { color: var(--colorWhite); }
  .scheduleCard_timeIcon {
    font-size: 2rem;
    margin-bottom: var(--spaceSm);
    color: var(--colorPrimary);
  }
  .scheduleCard--featured .scheduleCard_timeIcon { color: var(--colorAccent); }
  .scheduleCard_time {
    font-family: var(--fontHead);
    font-size: var(--size2xl);
    font-weight: 700;
    color: var(--colorSecondary);
    margin-bottom: var(--spaceXs);
  }
  .scheduleCard_title {
    font-family: var(--fontHead);
    font-size: var(--sizeXl);
    font-weight: 600;
    color: var(--colorSecondary);
    margin-bottom: var(--spaceXs);
  }
  .scheduleCard_text {
    font-size: var(--sizeSm);
    color: var(--colorTextMid);
    line-height: 1.6;
    margin-bottom: var(--spaceSm);
  }
  .scheduleCard_days {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .scheduleCard_days span {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border: 2px solid var(--colorBorder);
    border-radius: var(--radiusSm);
    font-size: var(--sizeSm);
    font-weight: 500;
    background: var(--colorBgAlt);
    color: var(--colorSecondary);
  }
  .scheduleCard--featured .scheduleCard_days span {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.4);
    color: var(--colorWhite);
  }

  
  .formatSection {
    padding: var(--space2xl) 0;
    background: var(--colorBgAlt);
    border-top: 3px solid var(--colorBorder);
    border-bottom: 3px solid var(--colorBorder);
  }
  .formatSection_inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spaceLg);
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
    align-items: start;
  }
  @media (min-width: 860px) {
    .formatSection_inner { grid-template-columns: 1fr 1fr; }
  }
  .formatSection_textCol p {
    color: var(--colorTextMid);
    margin-bottom: var(--spaceSm);
  }
  .formatSection_cards {
    display: flex;
    flex-direction: column;
    gap: var(--spaceSm);
  }
  .formatCard {
    background: var(--colorWhite);
    border: 3px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    padding: var(--spaceMd);
    box-shadow: var(--shadowHardMd);
    display: flex;
    gap: var(--spaceSm);
    align-items: flex-start;
    transition: transform var(--transBase), box-shadow var(--transBase);
  }
  .formatCard:hover {
    transform: translate(-3px, -3px);
    box-shadow: var(--shadowHardLg);
  }
  .formatCard i {
    font-size: 1.5rem;
    color: var(--colorPrimary);
    flex-shrink: 0;
    margin-top: 0.1rem;
  }
  .formatCard h3 {
    font-family: var(--fontHead);
    font-size: var(--sizeXl);
    font-weight: 600;
    color: var(--colorSecondary);
    margin-bottom: 0.4rem;
  }
  .formatCard p {
    font-size: var(--sizeSm);
    color: var(--colorTextMid);
    line-height: 1.6;
  }

  
  .selfPacedSection {
    padding: var(--space2xl) 0;
    background: var(--colorBg);
  }
  .selfPacedSection_inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spaceLg);
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
    align-items: center;
  }
  @media (min-width: 860px) {
    .selfPacedSection_inner { grid-template-columns: 1fr 1fr; }
  }
  .selfPacedSection_imgWrap {
    border: 3px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    overflow: hidden;
    box-shadow: var(--shadowHardLg);
    aspect-ratio: 4/3;
  }
  .selfPacedSection_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transSlow);
  }
  .selfPacedSection_imgWrap:hover .selfPacedSection_img { transform: scale(1.04); }
  .selfPacedSection_lead {
    font-size: var(--sizeLg);
    font-weight: 500;
    color: var(--colorSecondaryMid);
    margin-bottom: var(--spaceSm);
  }
  .selfPacedSection_textCol p {
    color: var(--colorTextMid);
    margin-bottom: var(--spaceSm);
  }

  
  .contactSection {
    padding: calc(var(--headerH) + var(--spaceXl)) 0 var(--space2xl);
    background: var(--colorBg);
  }
  .contactSection_inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spaceLg);
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
  @media (min-width: 860px) {
    .contactSection_inner { grid-template-columns: 3fr 2fr; }
  }
  .contactSection_title {
    font-family: var(--fontHead);
    font-size: var(--size2xl);
    font-weight: 600;
    color: var(--colorSecondary);
    margin-bottom: var(--spaceMd);
  }
  .contactForm_row {
    display: flex;
    flex-direction: column;
    gap: var(--spaceSm);
    margin-bottom: var(--spaceSm);
  }
  @media (min-width: 600px) {
    .contactForm_row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--spaceSm);
    }
    .contactForm_field--wide {
      grid-column: 1 / -1;
    }
  }
  .contactForm_label {
    display: block;
    font-size: var(--sizeSm);
    font-weight: 500;
    color: var(--colorText);
    margin-bottom: 0.3rem;
  }
  .contactForm_input,
  .contactForm_textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 2px solid var(--colorBorder);
    border-radius: var(--radiusSm);
    background: var(--colorWhite);
    color: var(--colorText);
    font-size: var(--sizeSm);
    transition: border-color var(--transBase), box-shadow var(--transBase);
    min-height: 44px;
  }
  .contactForm_input:focus,
  .contactForm_textarea:focus {
    outline: none;
    border-color: var(--colorPrimary);
    box-shadow: 3px 3px 0 var(--colorPrimary);
  }
  .contactForm_textarea { resize: vertical; }
  .contactForm_bottom {
    display: flex;
    align-items: center;
    gap: var(--spaceSm);
    flex-wrap: wrap;
  }
  .contactForm_privacy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--sizeSm);
    color: var(--colorTextMid);
    cursor: pointer;
    flex: 1;
    min-width: 200px;
  }
  .contactForm_privacy input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--colorBorder);
    border-radius: var(--radiusSm);
    accent-color: var(--colorPrimary);
    flex-shrink: 0;
    cursor: pointer;
  }
  .contactForm_privacy a {
    color: var(--colorPrimary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .contactInfoList {
    display: flex;
    flex-direction: column;
    gap: var(--spaceMd);
  }
  .contactInfoItem {
    display: flex;
    gap: var(--spaceSm);
    align-items: flex-start;
  }
  .contactInfoItem_icon {
    width: 40px;
    height: 40px;
    background: var(--colorPrimary);
    border: 2px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorWhite);
    flex-shrink: 0;
    box-shadow: 3px 3px 0 var(--colorBorder);
  }
  .contactInfoItem_label {
    font-size: var(--sizeXs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--colorTextLight);
    font-weight: 500;
    margin-bottom: 0.2rem;
  }
  .contactInfoItem_value {
    font-size: var(--sizeMd);
    font-weight: 500;
    color: var(--colorSecondary);
    transition: color var(--transBase);
  }
  a.contactInfoItem_value:hover { color: var(--colorPrimary); }
  .contactInfoItem_note {
    font-size: var(--sizeSm);
    color: var(--colorTextLight);
    margin-top: 0.1rem;
  }

  
  .urgentSection {
    padding: var(--spaceLg) 0;
    background: var(--colorAccent);
    border-top: 3px solid var(--colorBorder);
    border-bottom: 3px solid var(--colorBorder);
  }
  .urgentSection_inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
  .urgentSection_content {
    display: flex;
    gap: var(--spaceMd);
    align-items: flex-start;
  }
  .urgentSection_icon {
    width: 52px;
    height: 52px;
    background: var(--colorPrimary);
    border: 3px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorWhite);
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: var(--shadowHard);
  }
  .urgentSection_title {
    font-family: var(--fontHead);
    font-size: var(--size2xl);
    font-weight: 700;
    color: var(--colorSecondary);
    margin-bottom: 0.4rem;
  }
  .urgentSection_text p {
    color: var(--colorSecondaryMid);
    margin-bottom: var(--spaceSm);
    font-size: var(--sizeSm);
  }

  
  .mapSection {
    padding: var(--space2xl) 0;
    background: var(--colorBg);
  }
  .mapSection_inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
  .mapSection_title {
    font-family: var(--fontHead);
    font-size: var(--size2xl);
    font-weight: 600;
    color: var(--colorSecondary);
    margin-bottom: var(--spaceMd);
  }
  .mapSection_mapWrap {
    border: 3px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    overflow: hidden;
    box-shadow: var(--shadowHardLg);
  }

  
  .thanksMain {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--headerH) - 60px);
    padding: var(--spaceXl) var(--spaceSm);
  }
  .thanksPage {
    text-align: center;
    max-width: 480px;
    width: 100%;
  }
  .thanksPage_checkWrap {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spaceLg);
  }
  .thanksPage_svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .thanksPage_circle {
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: drawCircle 0.8s ease forwards;
  }
  .thanksPage_check {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: drawCheck 0.5s ease 0.7s forwards;
  }
  @keyframes drawCircle {
    to { stroke-dashoffset: 0; }
  }
  @keyframes drawCheck {
    to { stroke-dashoffset: 0; }
  }
  .thanksPage_text {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUpIn 0.5s ease 1.2s forwards;
  }
  @keyframes fadeUpIn {
    to { opacity: 1; transform: translateY(0); }
  }
  .thanksPage_title {
    font-family: var(--fontHead);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--colorSecondary);
    margin-bottom: var(--spaceSm);
  }
  .thanksPage_sub {
    color: var(--colorTextMid);
    margin-bottom: var(--spaceLg);
    font-size: var(--sizeLg);
  }

  
  .legalSection {
    padding: var(--space2xl) 0;
    background: var(--colorBg);
  }
  .legalSection_inner {
    max-width: 820px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
  .legalSection_intro {
    font-size: var(--sizeLg);
    color: var(--colorTextMid);
    line-height: 1.7;
    margin-bottom: var(--spaceLg);
    padding-bottom: var(--spaceLg);
    border-bottom: 2px solid var(--colorBorderLight);
  }
  .legalBlock {
    margin-bottom: var(--spaceLg);
    padding-bottom: var(--spaceLg);
    border-bottom: 1px solid var(--colorBorderLight);
  }
  .legalBlock:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
  .legalBlock h2,
  .legalSection_inner h2 {
    font-family: var(--fontHead);
    font-size: var(--size2xl);
    font-weight: 600;
    color: var(--colorSecondary);
    margin-bottom: var(--spaceSm);
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--colorPrimary);
    display: inline-block;
  }
  .legalBlock ul {
    list-style: disc;
    padding-left: var(--spaceMd);
    color: var(--colorTextMid);
    margin-bottom: var(--spaceSm);
  }
  .legalBlock ul li { margin-bottom: 0.4rem; }
  .legalBlock p { color: var(--colorTextMid); line-height: 1.7; margin-bottom: 0.5rem; }
  .legalBlock a { color: var(--colorPrimary); text-decoration: underline; text-underline-offset: 2px; }

  .legalTermsList {
    counter-reset: none;
    padding: 0;
  }
  .legalTermsList > li {
    margin-bottom: var(--spaceLg);
    padding-bottom: var(--spaceLg);
    border-bottom: 1px solid var(--colorBorderLight);
  }
  .legalTermsList > li:last-child { border-bottom: none; }
  .legalTermsList h2 {
    font-family: var(--fontHead);
    font-size: var(--sizeXl);
    font-weight: 600;
    color: var(--colorSecondary);
    margin-bottom: 0.5rem;
    display: block;
    border-bottom: none;
    padding-bottom: 0;
  }
  .legalTermsList p { color: var(--colorTextMid); line-height: 1.7; }
  .legalTermsList a { color: var(--colorPrimary); text-decoration: underline; }

  .legalSection_inner--cookies h2 {
    display: block;
    font-family: var(--fontHead);
    font-size: var(--size2xl);
    font-weight: 600;
    color: var(--colorSecondary);
    margin-top: var(--spaceLg);
    margin-bottom: var(--spaceSm);
    border-bottom: 2px solid var(--colorPrimary);
    display: inline-block;
    padding-bottom: 0.3rem;
  }
  .legalSection_inner--cookies p {
    color: var(--colorTextMid);
    line-height: 1.7;
    margin-bottom: var(--spaceSm);
  }
  .legalSection_inner--cookies a { color: var(--colorPrimary); text-decoration: underline; }

  .cookieTable_wrap {
    overflow-x: auto;
    margin-block: var(--spaceSm);
    border: 3px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    box-shadow: var(--shadowHardMd);
  }
  .cookieTable {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sizeSm);
  }
  .cookieTable thead {
    background: var(--colorSecondary);
    color: var(--colorWhite);
  }
  .cookieTable th, .cookieTable td {
    padding: 0.75rem var(--spaceSm);
    text-align: left;
    border-bottom: 1px solid var(--colorBorderLight);
  }
  .cookieTable tbody tr:last-child td { border-bottom: none; }
  .cookieTable tbody tr:nth-child(even) { background: var(--colorBgAlt); }
  .cookieTable code {
    font-family: monospace;
    background: rgba(200,65,10,0.1);
    padding: 0.1rem 0.3rem;
    border-radius: var(--radiusSm);
    color: var(--colorPrimary);
    font-size: 0.85em;
  }

  
  .pageFooter {
    border-top: 3px solid var(--colorBorder);
    background: var(--colorBg);
    padding: var(--spaceSm) 0;
    margin-top: auto;
  }
  .pageFooter_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spaceSm);
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spaceSm);
  }
  .pageFooter_logo img { height: 28px; width: auto; opacity: 0.75; transition: opacity var(--transBase); }
  .pageFooter_logo:hover img { opacity: 1; }
  .pageFooter_links {
    display: flex;
    gap: var(--spaceSm);
    flex-wrap: wrap;
  }
  .pageFooter_links a {
    font-size: var(--sizeSm);
    color: var(--colorTextMid);
    transition: color var(--transBase);
  }
  .pageFooter_links a:hover { color: var(--colorPrimary); }
  .pageFooter_copy {
    font-size: var(--sizeXs);
    color: var(--colorTextLight);
  }

  
  .cookieModal_overlay {
    position: fixed;
    inset: 0;
    background: rgba(26,26,24,0.65);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spaceSm);
    backdrop-filter: blur(4px);
  }
  .cookieModal {
    background: var(--colorWhite);
    border: 3px solid var(--colorBorder);
    border-radius: var(--radiusLg);
    box-shadow: var(--shadowHardLg);
    max-width: 520px;
    width: 100%;
    padding: var(--spaceLg);
    position: relative;
    animation: modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
  }
  @keyframes modalIn {
    from { transform: scale(0.9) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
  }
  .cookieModal_title {
    font-family: var(--fontHead);
    font-size: var(--size2xl);
    font-weight: 700;
    color: var(--colorSecondary);
    margin-bottom: var(--spaceXs);
  }
  .cookieModal_desc {
    font-size: var(--sizeSm);
    color: var(--colorTextMid);
    line-height: 1.6;
    margin-bottom: var(--spaceMd);
  }
  .cookieModal_categories {
    display: flex;
    flex-direction: column;
    gap: var(--spaceXs);
    margin-bottom: var(--spaceMd);
  }
  .cookieModal_category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem var(--spaceSm);
    background: var(--colorBgAlt);
    border: 2px solid var(--colorBorderLight);
    border-radius: var(--radiusMd);
    gap: var(--spaceSm);
  }
  .cookieModal_categoryLabel {
    font-size: var(--sizeSm);
    font-weight: 500;
    color: var(--colorSecondary);
  }
  .cookieModal_categoryNote {
    font-size: var(--sizeXs);
    color: var(--colorTextLight);
    margin-top: 0.1rem;
  }
  .cookieModal_toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
  }
  .cookieModal_toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }
  .cookieModal_toggleSlider {
    position: absolute;
    inset: 0;
    background: var(--colorBorderLight);
    border: 2px solid var(--colorBorder);
    border-radius: var(--radiusFull);
    cursor: pointer;
    transition: background var(--transBase);
  }
  .cookieModal_toggleSlider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--colorWhite);
    border-radius: var(--radiusFull);
    top: 2px;
    left: 2px;
    transition: transform var(--transBase);
    border: 1px solid var(--colorBorderLight);
  }
  .cookieModal_toggle input:checked + .cookieModal_toggleSlider {
    background: var(--colorPrimary);
    border-color: var(--colorPrimaryDark);
  }
  .cookieModal_toggle input:checked + .cookieModal_toggleSlider::before {
    transform: translateX(20px);
  }
  .cookieModal_toggle input:disabled + .cookieModal_toggleSlider {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .cookieModal_actions {
    display: flex;
    gap: var(--spaceXs);
    flex-wrap: wrap;
  }
  .cookieModal_actions .btn { flex: 1; justify-content: center; min-width: 120px; }

  
  .revealSection {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .revealSection.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@layer utilities {
  .srOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}