/* ============================================
   RISE — Global Styles & Design Tokens
   ============================================ */

:root {
  --color-navy:       #0d3349;
  --color-navy-dark:  #091f2c;
  --color-navy-light: #164060;
  --color-gold:       #e8a838;
  --color-gold-hover: #d4952e;
  --color-white:      #ffffff;
  --color-off-white:  #f5f3ef;
  --color-gray-100:   #f8f8f8;
  --color-gray-200:   #e8e8e8;
  --color-gray-300:   #cccccc;
  --color-gray-500:   #888888;
  --color-gray-700:   #444444;
  --color-text:       #333333;
  --color-text-light: #ffffffcc;

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem;
  --text-4xl: 2.5rem; --text-5xl: 3.25rem; --text-6xl: 4rem;

  --sp-xs: .25rem; --sp-sm: .5rem; --sp-md: 1rem; --sp-lg: 1.5rem;
  --sp-xl: 2rem; --sp-2xl: 3rem; --sp-3xl: 4rem; --sp-4xl: 6rem; --sp-5xl: 8rem;

  --max-w: 1280px;
  --max-w-wide: 1440px;
  --header-h: 70px;
  --radius: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.12);

  --ease-fast: 150ms ease;
  --ease: 250ms ease;
  --ease-slow: 400ms ease;
}

/* Reset */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); font-size:var(--text-base); line-height:1.6; color:var(--color-text); background:var(--color-white); overflow-x:hidden; }
img, video, svg { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; transition:color var(--ease-fast); }
ul, ol { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input, textarea, select { font-family:inherit; font-size:inherit; }

h1, h2, h3, h4, h5, h6 { font-family:var(--font-heading); font-weight:700; line-height:1.2; color:var(--color-navy); }
h1 { font-size:var(--text-6xl); }
h2 { font-size:var(--text-4xl); }
h3 { font-size:var(--text-3xl); }
h4 { font-size:var(--text-2xl); }
p  { margin-bottom:var(--sp-md); line-height:1.7; }

/* Layout */
.container      { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--sp-xl); }
.container-wide { max-width:var(--max-w-wide); }
.section        { padding:var(--sp-5xl) 0; }
.section--navy  { background:var(--color-navy); color:var(--color-white); }
.section--navy h2, .section--navy h3 { color:var(--color-white); }
.section--gray  { background:var(--color-off-white); }

/* Flex / Grid helpers */
.flex { display:flex; } .flex-col { flex-direction:column; } .flex-wrap { flex-wrap:wrap; }
.items-center { align-items:center; } .justify-center { justify-content:center; } .justify-between { justify-content:space-between; }
.gap-sm { gap:var(--sp-sm); } .gap-md { gap:var(--sp-md); } .gap-lg { gap:var(--sp-lg); } .gap-xl { gap:var(--sp-xl); }
.grid { display:grid; gap:var(--sp-xl); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

/* Text */
.text-center { text-align:center; }
.text-sm { font-size:var(--text-sm); }

.section-label { color:var(--color-gold); text-transform:uppercase; letter-spacing:.2em; font-size:var(--text-sm); font-weight:700; font-family:var(--font-body); margin-bottom:var(--sp-md); }
.accent-line { width:2px; height:60px; background:var(--color-gold); margin:0 auto var(--sp-xl); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:.75rem 2rem; font-family:var(--font-body); font-size:var(--text-sm); font-weight:600; letter-spacing:.05em; text-transform:uppercase; border-radius:var(--radius); transition:all var(--ease); border:2px solid transparent; }
.btn--gold { background:var(--color-gold); color:var(--color-navy); }
.btn--gold:hover { background:var(--color-gold-hover); }
.btn--outline { background:transparent; border-color:var(--color-gold); color:var(--color-gold); }
.btn--outline:hover { background:var(--color-gold); color:var(--color-navy); }
.btn--outline-white { background:transparent; border-color:var(--color-white); color:var(--color-white); }
.btn--outline-white:hover { background:var(--color-white); color:var(--color-navy); }
.btn--navy { background:var(--color-navy); color:var(--color-white); }
.btn--navy:hover { background:var(--color-navy-light); }

/* Hero */
.hero { position:relative; height:500px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.hero--full { height:90vh; min-height:600px; }
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__bg img { width:100%; height:100%; object-fit:cover; }
.hero__bg::after { content:''; position:absolute; inset:0; background:rgba(13,51,73,.4); }
.hero__content { position:relative; z-index:1; color:var(--color-white); max-width:800px; padding:0 var(--sp-xl); }
.hero__title { font-size:var(--text-6xl); color:var(--color-white); margin-bottom:var(--sp-lg); text-shadow:0 2px 8px rgba(0,0,0,.3); }

/* Portfolio card */
.portfolio-card { position:relative; border-radius:var(--radius-lg); overflow:hidden; display:block; }
.portfolio-card__image { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform var(--ease-slow); }
.portfolio-card:hover .portfolio-card__image { transform:scale(1.05); }
.portfolio-card__overlay { position:absolute; bottom:0; left:0; right:0; padding:var(--sp-lg); background:linear-gradient(transparent,rgba(0,0,0,.7)); color:var(--color-white); }
.portfolio-card__location { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.15em; opacity:.8; margin-bottom:var(--sp-xs); }
.portfolio-card__name { font-family:var(--font-heading); font-size:var(--text-xl); font-weight:700; }

/* Filter tabs */
.filter-tabs { display:flex; gap:var(--sp-sm); flex-wrap:wrap; justify-content:center; padding:var(--sp-lg) 0; }
.filter-tab { padding:.6rem 1.5rem; border-radius:50px; font-size:var(--text-sm); font-weight:600; border:2px solid var(--color-gray-200); background:transparent; color:var(--color-text); transition:all var(--ease-fast); cursor:pointer; }
.filter-tab:hover { border-color:var(--color-gold); color:var(--color-gold); }
.filter-tab.active { background:var(--color-gold); border-color:var(--color-gold); color:var(--color-navy); }

/* Forms */
.form-group { margin-bottom:var(--sp-lg); }
.form-label { display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--sp-sm); color:var(--color-navy); }
.form-input, .form-textarea, .form-select { width:100%; padding:.75rem 1rem; border:1px solid var(--color-gray-200); border-radius:var(--radius); font-size:var(--text-base); transition:border-color var(--ease-fast); background:var(--color-white); }
.form-input:focus, .form-textarea:focus, .form-select:focus { outline:none; border-color:var(--color-gold); box-shadow:0 0 0 3px rgba(232,168,56,.15); }
.form-textarea { min-height:120px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-md); }

/* Utility */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.loading { text-align:center; padding:var(--sp-3xl); color:var(--color-gray-500); }

/* Responsive */
@media (max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  h1, .hero__title { font-size:var(--text-5xl); }
  h2 { font-size:var(--text-3xl); }
}
@media (max-width:768px) {
  :root { --sp-5xl:4rem; }
  .container { padding:0 var(--sp-md); }
  .grid-4, .grid-3, .grid-2 { grid-template-columns:1fr; }
  h1, .hero__title { font-size:var(--text-4xl); }
  h2 { font-size:var(--text-2xl); }
  .hero { height:400px; }
  .hero--full { height:70vh; min-height:400px; }
  .form-row { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  h1, .hero__title { font-size:var(--text-3xl); }
  .btn { padding:.6rem 1.5rem; font-size:var(--text-xs); }
}