@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  /* Alumascape Brand Gold: #D89E1A */
  
  /* Material 3 Tonal Palette */
  --md-sys-color-primary: #D89E1A;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FCEFD5;
  --md-sys-color-on-primary-container: #453100;
  
  --md-sys-color-secondary: #6B5D46;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #F5E0C3;
  --md-sys-color-on-secondary-container: #241A09;

  --md-sys-color-tertiary: #4B6545;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #CDEBC3;
  --md-sys-color-on-tertiary-container: #092007;

  --md-sys-color-surface: #FEFBFF;
  --md-sys-color-on-surface: #1C1B1E;
  --md-sys-color-surface-variant: #EBE1D4;
  --md-sys-color-on-surface-variant: #4B463E;
  --md-sys-color-surface-container: #F3EFE9;
  
  --md-sys-color-outline: #7D766C;
  --md-sys-color-outline-variant: #CEC5B8;

  --md-sys-color-background: #FEFBFF;
  --md-sys-color-on-background: #1C1B1E;

  /* Typography */
  --md-sys-typescale-font-family: 'Roboto', sans-serif;
  
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-line-height: 64px;

  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-line-height: 40px;

  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-weight: 500;
  --md-sys-typescale-title-large-line-height: 28px;

  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-line-height: 24px;
  
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-line-height: 20px;

  /* Elevation (Shadows) */
  --md-sys-elevation-level1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
  --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
  
  /* Shapes */
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
}

body {
  font-family: var(--md-sys-typescale-font-family);
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  margin: 0;
  padding: 0;
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-size: var(--md-sys-typescale-body-large-size);
  -webkit-font-smoothing: antialiased;
}

h1, .md-typescale-display-large {
  font-size: var(--md-sys-typescale-display-large-size);
  font-weight: var(--md-sys-typescale-display-large-weight);
  line-height: var(--md-sys-typescale-display-large-line-height);
  margin: 0 0 16px 0;
}

h2, .md-typescale-headline-large {
  font-size: var(--md-sys-typescale-headline-large-size);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  margin: 0 0 16px 0;
}

h3, .md-typescale-title-large {
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: var(--md-sys-typescale-title-large-weight);
  line-height: var(--md-sys-typescale-title-large-line-height);
  margin: 0 0 12px 0;
}

p {
  margin: 0 0 16px 0;
}

a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Layout Grid System (similar to Elementor) */
.section-container {
  padding: 80px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-full-width {
  padding: 80px 0;
  width: 100%;
}

.grid {
  display: grid;
  gap: 24px;
}

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
  .section-container { padding: 48px 16px; }
  h1, .md-typescale-display-large { font-size: 40px; line-height: 48px; }
}