:root {
  color-scheme: light dark;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --text: #111827;
  --muted: #465466;
  --accent: #0757a0;
  --accent-strong: #043b70;
  --focus: #a63d00;
  --border: #cbd5e1;
  --space: clamp(1rem, 2vw, 2rem);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; --bg:#0c1420; --surface:#152235; --text:#f4f7fb; --muted:#c4cfdd; --accent:#72b7ff; --accent-strong:#b7d9ff; --focus:#ffc078; --border:#52657c; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 18rem; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: var(--accent-strong); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: absolute; left: .75rem; top: .75rem; transform: translateY(-200%); background: var(--surface); color: var(--text); padding: .6rem 1rem; z-index: 2; }
.skip-link:focus { transform: translateY(0); }
.site-header, .site-footer, main { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.brand { color: var(--text); font-weight: 750; text-decoration: none; letter-spacing: -.02em; }
.brand span { display:block; color: var(--accent); font-size:.78em; letter-spacing:.04em; }
.header-actions, .site-header nav, .site-footer nav, .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap: .75rem; }
.menu-disclosure { position: relative; }
.menu-disclosure summary, .menu-disclosure nav a, .menu-disclosure details summary { cursor:pointer; padding:.55rem .7rem; color:var(--text); font-weight:650; }
.menu-disclosure nav { position:absolute; right:0; top:calc(100% + .5rem); z-index:3; min-width:14rem; padding:.75rem; background:var(--surface); border:1px solid var(--border); box-shadow:0 .5rem 1.5rem #0003; }
.menu-disclosure nav a, .menu-disclosure nav details { display:block; }
.menu-disclosure nav a { text-decoration:none; }
.menu-disclosure .submenu { padding-left:.75rem; border-left:2px solid var(--border); }
.theme-toggle, .button { border: 2px solid var(--accent); border-radius: .35rem; background: var(--accent); color: #fff; cursor: pointer; font: inherit; font-weight: 700; padding: .65rem .9rem; text-decoration: none; }
.theme-toggle { background: transparent; color: var(--accent-strong); }
.hero { padding: clamp(4rem, 12vw, 9rem) 0 clamp(3rem, 8vw, 6rem); max-width: 52rem; }
.eyebrow { color: var(--accent-strong); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
h1 { max-width: 12ch; font-size: clamp(2.7rem, 7vw, 6rem); line-height: .98; letter-spacing: -.055em; margin: .4rem 0 1.5rem; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.1; }
.lede { color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.35rem); max-width: 42rem; margin-bottom: 2rem; }
.details { background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; padding: clamp(1.5rem, 4vw, 3rem); margin-bottom: 1rem; }
.content-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1rem; margin-bottom:4rem; }
.page-media { margin: 1.5rem 0 0; }
.page-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: .45rem; border: 1px solid var(--border); }
.page-media figcaption { margin-top: .45rem; color: var(--muted); font-size: .9rem; }
.page-media-card { margin-top: 0; margin-bottom: 1.25rem; }
.service-list { margin: 1rem 0; padding-left: 1.2rem; color: var(--muted); }
.service-list li { margin-bottom: .35rem; }
.text-link { font-weight:700; }
.site-footer { color: var(--muted); padding: 2rem 0; border-top: 1px solid var(--border); }
.site-footer nav a { color:var(--muted); }
@media (min-width: 52rem) { .menu-disclosure > summary { display:none; } .menu-disclosure > nav { position:static; display:flex; min-width:0; padding:0; border:0; box-shadow:none; background:transparent; } .menu-disclosure > nav > details { position:relative; } .menu-disclosure > nav > details > .submenu { position:absolute; top:100%; left:0; min-width:15rem; padding:.75rem; background:var(--surface); border:1px solid var(--border); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }

/* Public home overhaul: calm, spacious marketing composition. */
.home-hero { position: relative; isolation: isolate; min-height: min(52rem, calc(100vh - 4rem)); display: grid; align-items: end; overflow: clip; margin-inline: calc((100vw - min(100vw - 2rem, 72rem)) / -2); color: #fff; }
.home-hero-media, .home-hero-scrim { position: absolute; inset: 0; margin: 0; }
.home-hero-media { z-index: -2; will-change: transform; transition: transform .3s ease-out; }
.home-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-hero-scrim { z-index: -1; background: linear-gradient(90deg, rgb(8 21 35 / .88), rgb(8 21 35 / .48) 55%, rgb(8 21 35 / .12)); }
.home-hero-content { width: min(100% - 2rem, 72rem); margin: 0 auto; padding: clamp(5rem, 13vw, 10rem) 0 clamp(3rem, 8vw, 6rem); }
.home-kicker, .section-kicker { margin: 0 0 1rem; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.home-kicker { color: #dcecff; }.section-kicker { color: var(--accent-strong); }
.home-hero h1 { max-width: 10ch; margin: 0; color: #fff; font-size: clamp(3.25rem, 7vw, 6.8rem); line-height: 1.02; letter-spacing: 0; }
.home-hero-lede { max-width: 42rem; margin: 1.5rem 0 2rem; font-size: clamp(1.1rem, 2vw, 1.35rem); color: #f2f7fd; }
.home-hero-actions, .home-contact-actions, .home-image-band-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.button { border-radius: .45rem; padding: .85rem 1.1rem; box-shadow: 0 1px 2px rgb(0 0 0 / .1); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 .7rem 1.5rem rgb(3 33 61 / .2); }.button-light { background: #fff; border-color: #fff; color: #063f77; }
.home-phone { color: inherit; font-weight: 750; text-underline-offset: .22em; }.home-trust-list { display: flex; gap: 1rem 1.5rem; flex-wrap: wrap; padding: 0; margin: 2.25rem 0 0; list-style: none; font-size: .92rem; }.home-trust-list li::before { content: '✓'; margin-right: .45rem; color: #9bd1ff; }.home-media-caption { position: absolute; z-index: 1; right: 1rem; bottom: .6rem; margin: 0; color: #fff; font-size: .73rem; text-shadow: 0 1px 3px #000; }
.section-wrap { width: min(100% - 2rem, 72rem); margin-inline: auto; }.home-intro { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-block: clamp(4rem, 9vw, 8rem); }.home-intro h2, .section-heading h2, .home-process h2, .home-image-band h2, .home-contact h2 { max-width: 14ch; margin: 0; letter-spacing: 0; }.home-intro-copy { max-width: 38rem; color: var(--muted); }.home-intro-copy p:first-child { margin-top: 0; font-size: 1.2rem; color: var(--text); }
.home-services { padding-bottom: clamp(4rem, 9vw, 8rem); }.section-heading { max-width: 48rem; margin-bottom: 2rem; }.section-heading h2 { margin-bottom: 1rem; }.section-heading > p:last-child { color: var(--muted); }.home-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }.home-service-card { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; transition: transform .25s ease, box-shadow .25s ease; }.home-service-card:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgb(10 28 47 / .12); }.home-service-card figure { margin: 0; overflow: hidden; }.home-service-card img { display: block; width: 100%; height: clamp(9rem, 15vw, 11rem); object-fit: cover; }.home-service-card:nth-child(2) img { transform: scale(1.45); transform-origin: 36% 62%; }.home-service-card figcaption { padding: .45rem .9rem 0; color: var(--muted); font-size: .73rem; }.home-service-card-content { padding: 1.15rem; }.home-service-card-content h3 { margin: .35rem 0 .75rem; font-size: 1.35rem; }.home-service-card-content p:not(.home-card-number) { color: var(--muted); }.home-card-number { color: var(--accent); font-size: .8rem; font-weight: 800; letter-spacing: .1em; }
.home-process { background: #eaf3fb; padding-block: clamp(4rem, 9vw, 8rem); }.home-process-layout { display: grid; gap: 3rem; }.home-process-layout > div > p:not(.section-kicker) { max-width: 34rem; color: #38516a; }.home-process-list { display: grid; gap: 1.25rem; padding: 0; margin: 0; list-style: none; }.home-process-list li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; border-top: 1px solid #b8cde0; padding-top: 1.25rem; }.home-process-list span { color: #0757a0; font-weight: 800; }.home-process-list h3 { margin: 0; font-size: 1.15rem; }.home-process-list p { margin: .35rem 0 0; color: #38516a; }
.home-image-band { position: relative; min-height: 38rem; display: grid; align-items: center; overflow: clip; color: #fff; isolation: isolate; }.home-image-band figure { position: absolute; z-index: -2; inset: -4rem 0; margin: 0; will-change: transform; transition: transform .25s ease-out; }.home-image-band figure::after { content: ''; position: absolute; inset: 0; background: rgb(7 25 43 / .65); }.home-image-band img { width: 100%; height: 100%; object-fit: cover; }.home-image-band figcaption { position: absolute; right: 1rem; bottom: 4.5rem; z-index: 1; font-size: .73rem; text-shadow: 0 1px 3px #000; }.home-image-band-copy { width: min(100% - 2rem, 72rem); margin: 0 auto; padding-block: 5rem; }.home-image-band .section-kicker { color: #b7dbff; }.home-image-band h2 { color: #fff; }.home-image-band-copy > p:not(.section-kicker) { max-width: 37rem; color: #eaf4ff; font-size: 1.1rem; }.home-image-band .home-phone { color: #fff; }
.home-contact { display: grid; gap: 2rem; padding-block: clamp(4rem, 9vw, 8rem); }.home-contact > div:last-child { max-width: 35rem; color: var(--muted); }.home-contact .text-link { color: var(--accent-strong); }
@media (min-width: 48rem) { .home-intro { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 5rem; }.home-process-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }.home-contact { grid-template-columns: 1fr 1fr; gap: 5rem; } }
@media (max-width: 38rem) { .home-hero { min-height: 42rem; }.home-hero-scrim { background: linear-gradient(0deg, rgb(8 21 35 / .9), rgb(8 21 35 / .32)); }.home-hero h1 { font-size: clamp(2.7rem, 14vw, 4rem); }.home-trust-list { display: grid; gap: .5rem; }.home-image-band { min-height: 34rem; } }

/* Contact Form & Input Styles (TASK-0008) */
.contact-hero { padding: clamp(2.5rem, 8vw, 5rem) 0 clamp(1.5rem, 4vw, 2.5rem); max-width: 52rem; }
.contact-container { max-width: 48rem; margin: 0 auto 4rem; }
.contact-form { background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; padding: clamp(1.5rem, 4vw, 2.75rem); }
.form-group { margin-bottom: 1.5rem; }
.form-honeypot { position:fixed; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; pointer-events:none; }
.form-group:last-child { margin-bottom: 0; }
.form-label, fieldset.form-group legend.form-label { display: block; font-weight: 700; color: var(--text); margin-bottom: .35rem; font-size: 1.05rem; }
.form-hint, .field-hint { display: block; color: var(--muted); font-size: .9rem; margin-bottom: .45rem; line-height: 1.4; }
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .75rem .85rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: .35rem;
  line-height: 1.5;
}
.form-group select { cursor: pointer; }
.form-group textarea { resize: vertical; min-height: 7rem; }
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
  border-color: #c5221f;
  border-width: 2px;
}
.field-error {
  color: #c5221f;
  font-weight: 700;
  font-size: .92rem;
  margin: .35rem 0 0;
}
:root[data-theme="dark"] .field-error { color: #f28b82; }
:root[data-theme="dark"] .form-group input[aria-invalid="true"],
:root[data-theme="dark"] .form-group select[aria-invalid="true"],
:root[data-theme="dark"] .form-group textarea[aria-invalid="true"] {
  border-color: #f28b82;
}
.required { color: #c5221f; font-weight: 700; margin-left: .2rem; }
:root[data-theme="dark"] .required { color: #f28b82; }

/* Radio and Checkbox Controls with 44px min touch targets */
.radio-group { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: .35rem; }
.radio-label, .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  cursor: pointer;
  font-weight: 500;
}
.radio-label input[type="radio"],
.checkbox-label input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.radio-label input[type="radio"]:focus-visible,
.checkbox-label input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.form-checkbox { margin-top: 1.75rem; margin-bottom: 2rem; }

/* Accessible Error Summary (WCAG 2.2 AA) */
.error-summary {
  border: 3px solid #c5221f;
  background: #fdf2f2;
  border-radius: .5rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
:root[data-theme="dark"] .error-summary {
  border-color: #f28b82;
  background: #2b1415;
}
.error-summary:focus-visible,
.error-summary:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.error-summary-title {
  color: #c5221f;
  font-size: 1.25rem;
  margin: 0 0 .75rem;
  line-height: 1.2;
}
:root[data-theme="dark"] .error-summary-title { color: #f28b82; }
.error-summary-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text);
}
.error-summary-list li { margin-bottom: .35rem; }
.error-summary-list a {
  color: #c5221f;
  font-weight: 700;
  text-decoration: underline;
}
:root[data-theme="dark"] .error-summary-list a { color: #f28b82; }
.error-summary-list a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Service-Specific Dynamic Panels */
.dynamic-service-container { margin-bottom: 1.5rem; }
.dynamic-service-container[hidden] { display: none !important; }
.service-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: .4rem;
  padding: 1.25rem;
  margin-top: .75rem;
  margin-bottom: 1rem;
}
.service-panel[hidden] { display: none !important; }
.service-panel-heading { font-size: 1.1rem; margin: 0 0 .35rem; color: var(--text); }
.service-panel-guidance { font-size: .92rem; color: var(--muted); margin: 0 0 1rem; line-height: 1.45; }

/* Confirmation Card */
.confirmation-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 5px solid #1e7e34;
  border-radius: .5rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  margin: 2rem auto 4rem;
  max-width: 48rem;
}
.confirmation-badge {
  display: inline-block;
  background: #e6f4ea;
  color: #137333;
  font-weight: 700;
  font-size: .85rem;
  padding: .3rem .75rem;
  border-radius: 2rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 1rem;
}
:root[data-theme="dark"] .confirmation-badge {
  background: #0d381e;
  color: #81c995;
}

/* Screen Reader Accessible Utility (WCAG 2.2 AA) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Admin Console Components & Management (TASK-0014) */
.admin-container {
  width: 100%;
  max-width: 72rem;
  margin: 2rem auto 4rem;
  padding: 0 1rem;
}
.admin-header {
  margin-bottom: 2rem;
}
.admin-breadcrumb {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.admin-breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}
.admin-breadcrumb a:hover {
  text-decoration: underline;
}
.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 2rem;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.card-header h2 {
  margin: 0;
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 1rem;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.95rem;
}
.admin-table th,
.admin-table td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table th {
  background: var(--bg);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.admin-table tr:hover td {
  background: rgba(7, 87, 160, 0.04);
}
.admin-table tr.row-self td {
  background: rgba(7, 87, 160, 0.08);
}
.text-nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }

/* Badges */
.badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 2rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}
.badge-active {
  background: #e6f4ea;
  color: #137333;
}
:root[data-theme="dark"] .badge-active {
  background: #0d381e;
  color: #81c995;
}
.badge-inactive {
  background: #fce8e6;
  color: #c5221f;
}
:root[data-theme="dark"] .badge-inactive {
  background: #3c1416;
  color: #f28b82;
}
.badge-self {
  background: #e8f0fe;
  color: #1a73e8;
  margin-left: 0.35rem;
}
:root[data-theme="dark"] .badge-self {
  background: #173154;
  color: #8ab4f8;
}
.count-badge, .target-badge {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 0.35rem;
}
.action-code, .details-code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  padding: 0.15rem 0.4rem;
}
.details-code {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 25rem;
  margin: 0;
}

/* Button Variants */
.button-small {
  padding: 0.35rem 0.65rem;
  font-size: 0.85rem;
}
.button-danger {
  background: #c5221f;
  border-color: #c5221f;
  color: #ffffff;
}
.button-danger:hover, .button-danger:focus {
  background: #9d1a18;
  border-color: #9d1a18;
}
.button-secondary {
  background: transparent;
  color: var(--accent-strong);
  border-color: var(--border);
}
.button-secondary:hover, .button-secondary:focus {
  background: var(--bg);
  border-color: var(--accent);
}
.inline-form {
  display: inline-block;
  margin: 0;
}

/* Form Grid */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

/* Alerts */
.alert {
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.alert p { margin: 0; }
.alert-success {
  background: #e6f4ea;
  border: 2px solid #137333;
  color: #137333;
}
:root[data-theme="dark"] .alert-success {
  background: #0d381e;
  border-color: #81c995;
  color: #81c995;
}
.alert-danger {
  background: #fdf2f2;
  border: 2px solid #c5221f;
  color: #c5221f;
}
:root[data-theme="dark"] .alert-danger {
  background: #2b1415;
  border-color: #f28b82;
  color: #f28b82;
}
.alert-info {
  background: #e8f0fe;
  border: 2px solid #1a73e8;
  color: #1a73e8;
}
:root[data-theme="dark"] .alert-info {
  background: #173154;
  border-color: #8ab4f8;
  color: #8ab4f8;
}

/* Profile Details List */
.profile-details-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.25rem;
  margin: 0;
}
.profile-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 0.85rem 1rem;
}
.profile-item dt {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.profile-item dd {
  font-size: 1.05rem;
  margin: 0;
  color: var(--text);
}

/* Portfolio Timeline & Detail Styles (TASK-0019) */
.portfolio-hero {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  max-width: 54rem;
}

.portfolio-section {
  margin-bottom: 4rem;
}

/* Filter Form */
.portfolio-filter-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.filter-controls-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.25rem;
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 9.5rem;
  flex: 1 1 auto;
}
.filter-field label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
.filter-field select {
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  cursor: pointer;
}
.filter-checkbox-field {
  min-width: auto;
  justify-content: center;
  padding-bottom: 0.4rem;
}
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.checkbox-label input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.filter-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.button-filter {
  padding: 0.6rem 1.1rem;
}
.button-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 0.58rem 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
.button-outline:hover {
  background: var(--bg);
  border-color: var(--text);
}

/* Status Bar & Active Filter Chips */
.portfolio-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  padding: 0.25rem 0.1rem;
}
.portfolio-results-count {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
}
.filter-indicator-text {
  color: var(--muted);
  font-weight: 500;
}
.active-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.chip-reset {
  color: var(--accent-strong);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  margin-left: 0.35rem;
}

/* Timeline Cards List */
.portfolio-timeline {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1.75rem;
}
.portfolio-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.portfolio-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);
}
:root[data-theme="dark"] .portfolio-card:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.35);
}
.portfolio-card.card-featured {
  border-color: var(--accent);
  border-width: 2px;
}

.timeline-entry {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-media-wrapper {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg);
  overflow: hidden;
}
.card-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  z-index: 2;
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.badge-featured {
  background: #0757a0;
  color: #ffffff;
}
:root[data-theme="dark"] .badge-featured {
  background: #2563eb;
  color: #ffffff;
}
.badge-before-after {
  background: #0f766e;
  color: #ffffff;
}
:root[data-theme="dark"] .badge-before-after {
  background: #14b8a6;
  color: #0c1420;
}
.badge-service {
  background: var(--bg);
  color: var(--accent-strong);
  border: 1px solid var(--border);
}
.badge-surface, .badge-property {
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
}

.project-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
}
.project-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.portfolio-card:hover .project-img {
  transform: scale(1.025);
}
.project-thumbnail-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--bg);
  font-size: 2.5rem;
  color: var(--muted);
}

.card-content {
  padding: 1.25rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.project-title {
  margin: 0 0 0.5rem;
  font-size: 1.28rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.project-title a {
  color: var(--text);
  text-decoration: none;
}
.project-title a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.project-summary {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1.25rem;
  flex: 1;
}
.card-footer {
  margin-top: auto;
}
.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
  text-decoration: none;
}
.project-link:hover {
  text-decoration: underline;
}

.portfolio-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 0.5rem;
}
.portfolio-empty h3 {
  margin-top: 0;
  font-size: 1.35rem;
}

/* Pagination Controls */
.portfolio-pagination {
  margin: 2rem 0;
  display: flex;
  justify-content: center;
}
.pagination-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
}
.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 0.35rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}
.pagination-link:hover:not(.disabled):not(.active) {
  background: var(--bg);
  border-color: var(--accent);
}
.pagination-link.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
.pagination-link.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Progressive Load More */
.portfolio-load-more-wrapper {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 3rem;
}
.button-load-more {
  padding: 0.85rem 2rem;
  font-size: 1rem;
}

/* Detail View Styles */
.breadcrumb-nav {
  margin: 1.5rem 0 1rem;
}
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  gap: 0.4rem;
}
.breadcrumb-list li + li::before {
  content: "/";
  margin-right: 0.4rem;
  color: var(--border);
}
.breadcrumb-list a {
  color: var(--accent);
  text-decoration: none;
}
.breadcrumb-list a:hover {
  text-decoration: underline;
}

.portfolio-detail-article {
  margin-bottom: 4rem;
}
.project-header {
  margin-bottom: 2.5rem;
}
.project-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.75rem);
  line-height: 1.05;
  margin: 0.35rem 0 1.25rem;
}
.project-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.meta-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.meta-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.project-lead-summary {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  color: var(--muted);
  line-height: 1.6;
  max-width: 50rem;
}

.project-overview-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  margin-bottom: 3rem;
}
.project-overview-section h2 {
  margin-top: 0;
}
.project-description-content {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text);
  max-width: 48rem;
}

/* Before & After Transformations */
.project-before-after-section {
  margin-bottom: 3.5rem;
}
.section-subtext {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}
.before-after-pairs-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.before-after-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.pair-title {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
}
.pair-description {
  color: var(--muted);
  margin: 0 0 1.25rem;
  font-size: 0.98rem;
}
.before-after-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.45rem;
  border: 1px solid var(--border);
}
.before-after-fallback {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  padding: 0.75rem;
  background: var(--bg);
}
.comparison-figure {
  margin: 0;
}
.figure-image-wrapper {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.35rem;
  background: #000;
}
.figure-image-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comparison-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-radius: 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
}
.before-badge {
  background: rgba(0, 0, 0, 0.75);
}
.after-badge {
  background: #0f766e;
}
:root[data-theme="dark"] .after-badge {
  background: #14b8a6;
  color: #0c1420;
}
.comparison-figure figcaption {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 0.4rem;
}

/* Gallery Grid */
.project-gallery-section {
  margin-bottom: 3.5rem;
}
.project-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 1.25rem;
}
.gallery-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  overflow: hidden;
}
.gallery-card picture {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--bg);
}
.gallery-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-caption {
  padding: 0.65rem 0.85rem;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Call to Action Card */
.project-cta-section {
  margin: 3.5rem 0 2rem;
}
.project-cta-card {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 0.5rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cta-content {
  flex: 1 1 24rem;
}
.cta-content h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.cta-content p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.6;
}
.cta-action {
  flex-shrink: 0;
}
.button-cta {
  display: inline-block;
  padding: 0.9rem 1.75rem;
  font-size: 1.05rem;
}