/* AGANO Legacy Resources — native CSS. Edit this file directly. */

/* VARIABLES */
:root {
  --agano-ivory: #FAF7F0;
  --agano-charcoal: #33383B;
  --agano-gold: #D1B485;
  --agano-steel-blue: #809AA8;
  --navy: var(--agano-charcoal);
  --navy-deep: #272C2F;
  --navy-light: #425664;
  --gold: var(--agano-gold);
  --gold-light: #E9CEA1;
  --gold-dark: #7A5C2F;
  --steel-blue: var(--agano-steel-blue);
  --steel-blue-dark: #425F6F;
  --ink: var(--agano-charcoal);
  --muted: #535E65;
  --paper: var(--agano-ivory);
  --surface-soft: #F2EEE5;
  --line: #D9D4CB;
  --control-line: #7B858B;
  --white: #FFFFFF;
  --green: #246C3C;
  --danger: #A62828;
  --font: "Segoe UI", Arial, sans-serif;
  --wrap: 1280px;
  --space: clamp(24px,5vw,80px);
  --section: clamp(64px,8vw,112px);
  --radius: 4px;
  --header-size: 112px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --shadow: 0 18px 60px #33383b10
}


/* RESET */
*,*::before,*::after {
  box-sizing: border-box
}
body,h1,h2,h3,p,figure,dl,dd {
  margin: 0
}
body {
  min-width: 0
}
img,svg {
  display: block;
  max-width: 100%
}
img {
  height: auto
}
button,input,textarea,select {
  font: inherit
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color: transparent
}
button {
  cursor: pointer
}
a {
  color: inherit
}
ul,ol {
  padding-left: 1.25rem
}
button[disabled] {
  cursor: not-allowed
}
button[hidden],[hidden] {
  display: none!important
}
summary {
  cursor: pointer
}
dialog {
  border: 0
}
/* Also hides the fallback element when native dialog support is absent. */
dialog:not([open]) { display: none; }
::selection {
  background: var(--gold-light);
  color: var(--navy)
}


/* TYPOGRAPHY */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%
}
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased
}
h1,h2,h3 {
  line-height: 1.12;
  overflow-wrap: anywhere;
  letter-spacing: -.045em;
  font-weight: 600;
  text-wrap: balance
}
h1 {
  font-size: clamp(2.5rem,5.3vw,4.8rem)
}
h2 {
  font-size: clamp(2rem,3.5vw,3.4rem)
}
h3 {
  font-size: clamp(1.2rem,1.6vw,1.55rem);
  letter-spacing: -.025em
}
p {
  max-width: 72ch
}
p+p {
  margin-top: 1rem
}
a {
  text-underline-offset: 4px
}
a:hover {
  color: var(--gold-dark)
}
small,.small {
  font-size: .84rem
}
.eyebrow {
  font-size: .71rem;
  letter-spacing: .2em;
  line-height: 1.6;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: none
}
.lead {
  font-size: clamp(1.04rem,1.5vw,1.2rem);
  color: var(--muted);
  line-height: 1.75
}
.text-link {
  font-size: .85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  border-bottom: 1px solid #b5bec5;
  padding-bottom: 8px
}
.text-link svg {
  transition: transform .2s
}
.text-link:hover svg {
  transform: translateX(5px)
}
:focus-visible {
  outline: 3px solid var(--steel-blue-dark);
  outline-offset: 5px
}
.dark :focus-visible,.hero :focus-visible {
  outline-color: var(--gold-light)
}
.muted {
  color: var(--muted)
}


/* LAYOUT */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space)
}
.container {
  padding-left: max(var(--space), var(--safe-left));
  padding-right: max(var(--space), var(--safe-right))
}
.section {
  padding-block: var(--section)
}
.section-soft {
  background: var(--surface-soft)
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 42px
}
.section-head h2 {
  max-width: 19ch
}
.section-head p {
  max-width: 45ch
}
.split {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(36px,6vw,92px);
  align-items: center
}
.split-top {
  align-items: start
}
.stack {
  display: grid;
  gap: 24px
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 28px
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 20px
}
.dark {
  background: var(--navy);
  color: var(--white)
}
.dark .eyebrow {
  color: var(--gold-light)
}
.dark .lead,.dark .muted {
  color: #c6d0d8
}
.dark a:hover {
  color: var(--gold-light)
}
.section-intro {
  max-width: 720px;
  margin-bottom: 44px
}
.section-intro p {
  margin-top: 22px
}
.content-copy h2 {
  font-size: 2rem;
  margin-bottom: 22px
}
.content-copy h3 {
  margin-top: 32px;
  margin-bottom: 14px
}
.content-copy p,.content-copy li {
  color: var(--muted)
}
.content-copy ul {
  margin-block: 22px
}
.content-copy li+li {
  margin-top: 12px
}
.reading {
  max-width: 850px;
  margin-inline: auto
}
.reading>section+section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line)
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 34px
}
.breadcrumbs a {
  text-decoration: none
}
.breadcrumbs span {
  color: #9da7b0
}
.page-hero {
  padding-block: 40px 72px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden
}
.page-hero .lead {
  max-width: 650px;
  margin-top: 24px
}
.page-hero h1 {
  max-width: 19ch;
  font-size: clamp(2.5rem,4.8vw,4.15rem)
}
.page-hero::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid #d1b48524;
  right: -100px;
  top: 20px;
  transform: rotate(40deg);
  pointer-events: none
}
.page-hero .container {
  position: relative;
  z-index: 1
}
.full-media {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  min-height: 340px
}
.full-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.media-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 20px;
  color: white;
  background: linear-gradient(transparent,#272c2fd9);
  font-size: .66rem;
  letter-spacing: .08em
}
.sticky-aside {
  position: sticky;
  top: 120px
}
.side-links {
  border-top: 2px solid var(--gold);
  background: var(--paper);
  padding: 28px
}
.side-links h3 {
  margin-bottom: 20px
}
.side-links a {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  text-decoration: none;
  font-size: .85rem;
  border-top: 1px solid var(--line);
  padding: 16px 0
}
.side-links a:last-child {
  padding-bottom: 0
}
.aside-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap: 64px
}
.back-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .76rem;
  text-decoration: none
}
.cta-section {
  background: var(--navy-light);
  color: white;
  padding-block: 64px;
  position: relative;
  overflow: hidden
}
.cta-section h2 {
  max-width: 23ch
}
.cta-section .container {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: center
}
.cta-section .eyebrow {
  color: var(--gold-light)
}
.legal-note {
  font-size: .8rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 32px
}
.spacer-top {
  margin-top: 40px
}


/* COMPONENTS */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  min-height: 50px;
  padding: 15px 24px;
  background: var(--gold);
  border: 1px solid var(--gold-dark);
  color: var(--ink);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .01em;
  transition: background .2s,transform .2s;
  line-height: 1.3;
  border-radius: 2px
}
.btn:hover {
  background: var(--gold-light);
  border-color: var(--gold-dark);
  color: var(--navy)
}
.btn-outline {
  background: transparent;
  border-color: #ffffff70;
  color: white
}
.btn-outline:hover {
  background: white;
  color: var(--navy);
  border-color: white
}
.btn-secondary {
  background: transparent;
  border-color: var(--control-line);
  color: var(--navy)
}
.btn-secondary:hover {
  border-color: var(--navy);
  background: var(--paper)
}
.btn:disabled {
  background: #e7e9eb;
  border-color: #e7e9eb;
  color: #626d77
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px
}
.hero {
  min-height: 650px;
  position: relative;
  display: flex;
  align-items: center;
  color: white;
  background: var(--navy-deep);
  overflow: hidden
}
.hero-picture,.hero-shade {
  position: absolute;
  inset: 0
}
.hero-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}
.hero-shade {
  background: linear-gradient(90deg,#272c2fed 0%,#272c2fb8 44%,#272c2f29 100%),linear-gradient(0deg,#272c2fa0,transparent 50%)
}
.hero-body {
  position: relative;
  padding-block: 90px 110px
}
.hero .eyebrow {
  color: var(--gold-light)
}
.hero h1 {
  max-width: 15ch
}
.hero h1 em {
  font-style: normal;
  color: var(--gold-light)
}
.hero .lead {
  max-width: 45ch;
  margin-top: 28px;
  color: #dae0e5;
  font-size: 1.06rem
}
.hero-footnote {
  position: absolute;
  right: var(--space);
  right: max(var(--space), var(--safe-right));
  bottom: 22px;
  font-size: .61rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #e4e5e5
}
.hero-lanes {
  background: var(--navy);
  color: white
}
.hero-lanes .container {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr))
}
.hero-lanes a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 24px;
  border-right: 1px solid #ffffff20;
  gap: 18px;
  text-decoration: none
}
.hero-lanes a:first-child {
  padding-left: 0
}
.hero-lanes a:last-child {
  border: 0
}
.hero-lanes a:hover {
  background: #ffffff05;
  color: var(--gold-light)
}
.lane-no {
  color: var(--gold-light);
  font-size: .68rem;
  letter-spacing: .1em
}
.hero-lanes strong {
  font-weight: 500;
  font-size: .9rem;
  flex: 1
}
.intro-mark {
  font-size: clamp(5rem,10vw,9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.07em;
  color: #33383b10
}
.intro-figure {
  position: relative
}
.intro-figure img {
  width: 100%;
  height: 430px;
  object-fit: cover
}
.intro-figure::before {
  content: "";
  position: absolute;
  width: 60%;
  height: 70%;
  border: 1px solid var(--gold);
  left: -18px;
  bottom: -18px;
  z-index: -1
}
.intro-label {
  background: var(--navy);
  color: white;
  padding: 22px 24px;
  position: absolute;
  bottom: 20px;
  right: -18px;
  max-width: 230px;
  font-size: .94rem;
  line-height: 1.5;
  border-left: 3px solid var(--gold)
}
.intro-copy .lead {
  margin-top: 24px
}
.intro-copy .text-link {
  margin-top: 28px
}
.card {
  padding: 30px;
  border: 1px solid var(--line);
  background: white;
  position: relative;
  min-width: 0
}
.card-number {
  font-size: .67rem;
  letter-spacing: .13em;
  color: var(--gold-dark);
  display: block;
  margin-bottom: 38px
}
.card h3 {
  margin-bottom: 16px
}
.card p {
  color: var(--muted);
  font-size: .9rem
}
.card .text-link {
  margin-top: 26px
}
.card-dark {
  background: var(--navy-light);
  border-color: #ffffff20
}
.card-dark p {
  color: #c6d0d8
}
.card-dark .card-number {
  color: var(--gold-light)
}
.card-dark .text-link {
  border-color: #ffffff30
}
.feature-card {
  padding: 0;
  display: flex;
  flex-direction: column
}
.feature-card img {
  aspect-ratio: 1.5;
  object-fit: cover;
  width: 100%
}
.feature-card .card-body {
  padding: 28px;
  flex: 1
}
.card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #d1b48517;
  color: var(--gold-dark);
  margin-bottom: 24px
}
.portfolio-banner {
  background: var(--navy);
  color: white;
  padding: 52px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center
}
.portfolio-banner h3 {
  font-size: 2.1rem;
  max-width: 22ch
}
.portfolio-banner p {
  color: #c6d0d8;
  margin-top: 20px;
  font-size: .95rem
}
.portfolio-banner .btn {
  margin-top: 28px
}
.contour-art {
  width: 100%;
  height: 260px;
  color: #d1b48550
}
.notice {
  display: flex;
  gap: 14px;
  padding: 20px 24px;
  background: #f5f0e5;
  border-left: 3px solid var(--gold);
  font-size: .84rem;
  color: #564722;
  margin-bottom: 36px
}
.notice svg {
  flex: none;
  margin-top: 2px
}
.notice p {
  max-width: none
}
.notice-blue {
  background: #eff3f6;
  border-color: #31546f;
  color: #2b455a
}
.empty-state {
  border: 1px solid var(--line);
  padding: clamp(28px,5vw,64px);
  text-align: center;
  background: var(--paper)
}
.empty-state .empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid #d1b48566;
  border-radius: 50%;
  color: var(--gold-dark);
  margin: 0 auto 24px
}
.empty-state h2 {
  font-size: 1.75rem;
  letter-spacing: -.03em
}
.empty-state p {
  color: var(--muted);
  font-size: .94rem;
  margin: 18px auto 0;
  max-width: 52ch
}
.empty-state .actions {
  justify-content: center
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid #d3dbe0;
  font-size: .65rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.5;
  max-width: 100%
}
.status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none
}
.status-draft {
  color: #785711;
  background: #f6f0e2;
  border-color: #e6d5ac
}
.status-open {
  color: #246c3c;
  background: #edf5ee
}
.status-closed {
  color: #52616d;
  background: #eff1f2
}
.fact-list {
  border-top: 1px solid var(--line)
}
.fact-list>div {
  display: grid;
  grid-template-columns: minmax(140px,.8fr) 1.2fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line)
}
.fact-list dt {
  font-size: .82rem;
  color: var(--muted)
}
.fact-list dd {
  font-size: .9rem;
  font-weight: 500;
  overflow-wrap: anywhere
}
.discipline {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line)
}
.discipline>span {
  font-size: .73rem;
  color: var(--gold-dark);
  padding-top: 3px
}
.discipline h3 {
  font-size: 1.2rem;
  margin-bottom: 12px
}
.discipline p {
  font-size: .92rem;
  color: var(--muted)
}
.filter-bar {
  display: flex;
  align-items: end;
  gap: 18px;
  flex-wrap: wrap;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  margin-bottom: 30px
}
.filter-bar label {
  font-size: .72rem;
  font-weight: 600;
  display: grid;
  gap: 8px;
  min-width: 180px
}
.filter-bar select {
  min-height: 46px;
  padding: 10px 35px 10px 12px;
  border: 1px solid #b5c1ca;
  background: white;
  max-width: 100%;
  border-radius: 2px
}
.filter-count {
  font-size: .8rem;
  color: var(--muted);
  margin-left: auto;
  padding: 12px 0
}
.filter-reset {
  background: none;
  border: 0;
  text-decoration: underline;
  min-height: 46px;
  padding: 12px;
  font-size: .79rem;
  color: var(--navy)
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px
}
.gallery-item {
  margin: 0
}
.gallery-item a {
  display: block;
  position: relative;
  background: var(--navy)
}
.gallery-item img {
  aspect-ratio: 1.2;
  object-fit: cover;
  width: 100%;
  transition: opacity .25s
}
.gallery-item a:hover img {
  opacity: .8
}
.gallery-item .zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--white);
  color: var(--navy)
}
.gallery-item figcaption {
  padding-top: 16px;
  font-size: .83rem
}
.gallery-item figcaption small {
  display: block;
  font-size: .7rem;
  color: var(--muted);
  margin-top: 5px
}
.lightbox {
  background: #272c2f;
  color: white;
  width: min(1100px,96vw);
  padding: 24px;
  max-height: 94vh;
  overflow: auto
}
.lightbox::backdrop {
  background: #1d2225ea
}
.lightbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px
}
.lightbox button {
  background: transparent;
  color: white;
  border: 1px solid #ffffff60;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: none
}
.lightbox img {
  max-height: 65vh;
  width: 100%;
  object-fit: contain
}
.lightbox-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding-top: 18px
}
.lightbox-footer p {
  font-size: .85rem
}
.lightbox-controls {
  display: flex;
  gap: 10px;
  flex: none
}
.faq {
  border-top: 1px solid var(--line)
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 22px 0
}
.faq summary {
  font-size: .98rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  min-height: 30px;
  align-items: center
}
.faq summary::-webkit-details-marker {
  display: none
}
.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--gold-dark)
}
.faq details[open] summary::after {
  content: "−"
}
.faq details p {
  margin-top: 18px;
  font-size: .92rem;
  color: var(--muted)
}
.document-row {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: center
}
.document-row h3 {
  font-size: 1.1rem
}
.document-row p {
  font-size: .76rem;
  color: var(--muted);
  margin-top: 8px
}
.topic-pill {
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--gold-dark);
  margin-bottom: 16px;
  display: block
}
.not-found {
  text-align: center;
  padding-block: 80px
}
.not-found .code {
  font-size: 8rem;
  color: var(--gold);
  line-height: 1.2
}
.not-found p {
  margin: 24px auto
}
.not-found .actions {
  justify-content: center
}
.page-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--muted);
  margin-top: 24px
}
.article-image {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  margin-bottom: 44px
}


/* NAVIGATION */
.review-bar {
  background: var(--navy-deep);
  color: #cbd4db;
  padding-block: 8px;
  font-size: .62rem;
  letter-spacing: .075em
}
.review-bar .container {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap
}
.review-bar strong {
  color: var(--gold-light);
  font-weight: 600
}
.site-header {
  position: relative;
  top: 0;
  padding-top: var(--safe-top);
  background: var(--paper);
  z-index: 50;
  border-bottom: 1px solid var(--line)
}
.js .site-header { position: sticky; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: var(--header-size);
  padding-block: 8px
}
.wordmark { text-decoration: none; flex: none; color: var(--ink); }
.wordmark:hover { color: var(--ink); }
.site-nav { min-width: 0; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0
}
.nav-entry { min-width: 0; }
.nav-entry > a, .nav-item > summary {
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center
}
.nav-item { position: relative; }
.nav-item > summary {
  list-style: none;
  gap: 6px;
  cursor: pointer
}
.nav-item > summary::-webkit-details-marker { display: none; }
.nav-item > summary svg { width: 12px; transition: transform 160ms; }
.nav-item[open] > summary svg { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: -16px;
  min-width: 260px;
  max-width: min(340px,calc(100vw - 48px));
  max-height: calc(100vh - 144px);
  max-height: calc(100dvh - 144px);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-dark);
  box-shadow: 0 12px 32px #33383b20;
  z-index: 60
}
.nav-entry:nth-last-child(2) .nav-dropdown { left: auto; right: 0; }
.nav-dropdown a {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  padding: 11px 14px;
  font-size: .9rem;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere
}
.nav-dropdown a:hover, .nav-dropdown a[aria-current="page"] {
  background: var(--surface-soft);
  color: var(--gold-dark)
}
.nav-entry > .btn { font-size: .78rem; padding: 13px 18px; min-height: 46px; }
.nav-toggle {
  min-width: 94px;
  min-height: 48px;
  padding: 10px 13px;
  gap: 10px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--control-line);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: .9rem;
  font-weight: 600
}
.menu-icon { display: block; position: relative; width: 22px; height: 22px; flex: none; }
.menu-icon > span {
  display: block;
  position: absolute;
  left: 1px;
  right: 1px;
  height: 2px;
  background: currentColor;
  transition: transform 180ms cubic-bezier(.2,.65,.3,1)
}
.menu-icon > span:nth-child(1) { top: 4px; }
.menu-icon > span:nth-child(2) { top: 10px; }
.menu-icon > span:nth-child(3) { top: 16px; }
.nav-toggle[aria-expanded="true"] .menu-icon > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .menu-icon > span:nth-child(2) { visibility: hidden; }
.nav-toggle[aria-expanded="true"] .menu-icon > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  left: max(20px, var(--safe-left));
  z-index: 1000;
  padding: 14px 22px;
  background: var(--navy);
  color: white
}
.skip-link:focus {
  top: 10px;
  top: max(10px, var(--safe-top))
}
.site-footer {
  background: var(--navy-deep);
  color: #c2ced6;
  padding-top: 66px;
  padding-bottom: var(--safe-bottom)
}
.site-footer .wordmark {
  color: white
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 42px;
  padding-bottom: 52px
}
.footer-intro p {
  font-size: .84rem;
  line-height: 1.85;
  max-width: 30ch;
  margin-top: 25px;
  color: #aabac7
}
.footer-title {
  color: var(--gold-light);
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-weight: 600
}
.footer-links {
  display: grid;
  gap: 12px
}
.footer-links a {
  text-decoration: none;
  font-size: .8rem
}
.site-footer a:hover {
  color: var(--gold-light)
}
.footer-contact p {
  font-size: .8rem;
  line-height: 1.85
}
.footer-contact .text-link {
  font-size: .78rem;
  margin-top: 20px;
  border-color: #ffffff30
}
.footer-bottom {
  border-top: 1px solid #ffffff18;
  padding-block: 22px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: .66rem;
  flex-wrap: wrap;
  align-items: center
}
.footer-bottom>div {
  display: flex;
  flex-wrap: wrap;
  gap: 20px
}
.footer-bottom a {
  text-decoration: none
}
.whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 70;
  background: #246c3c;
  color: white;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 20px #272c2f30
}
.whatsapp:hover {
  color: white;
  background: #1b582e
}


/* FORMS */
.form-panel {
  border: 1px solid var(--line);
  padding: clamp(24px,4vw,48px);
  background: white
}
.form-panel h2 {
  font-size: 1.9rem
}
.form-panel>p {
  font-size: .87rem;
  color: var(--muted);
  margin-top: 14px
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 32px
}
.field {
  min-width: 0
}
.field label {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  margin-bottom: 9px
}
.field label span {
  font-size: .7rem;
  color: var(--muted);
  font-weight: 400
}
.field input,.field select,.field textarea {
  width: 100%;
  border: 1px solid var(--control-line);
  border-radius: 2px;
  min-height: 48px;
  padding: 12px 14px;
  background: white;
  color: var(--ink);
  font-size: 1rem
}
.field textarea {
  resize: vertical;
  min-height: 150px
}
.field input:focus,.field select:focus,.field textarea:focus {
  border-color: var(--gold-dark);
  outline: 2px solid var(--steel-blue-dark);
  outline-offset: 1px
}
.field [aria-invalid=true] {
  border-color: var(--danger)
}
.field-error {
  font-size: .74rem;
  color: var(--danger);
  margin-top: 7px
}
.field-full {
  grid-column: 1/-1
}
.check-field {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .78rem;
  color: var(--muted);
  margin-top: 24px
}
.check-field input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--navy);
  margin-top: 4px
}
.form-actions {
  margin-top: 26px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center
}
.form-actions p {
  font-size: .71rem;
  color: var(--muted);
  max-width: 34ch
}
.form-status {
  font-size: .83rem;
  margin-top: 24px;
  padding: 18px;
  border-left: 3px solid var(--gold);
  background: #f5f0e5;
  color: #564722
}
.form-status:empty {
  display: none
}
.form-status[data-state=success] {
  border-color: var(--green);
  color: #1c5530;
  background: #eef6ee
}
.form-status[data-state=error] {
  border-color: var(--danger);
  color: #7f2424;
  background: #fff0f0
}
.trap-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0
}
.contact-tile {
  padding-block: 24px;
  border-bottom: 1px solid var(--line)
}
.contact-tile h3 {
  font-size: 1rem;
  margin-bottom: 12px
}
.contact-tile p {
  font-size: .88rem;
  color: var(--muted);
  overflow-wrap: anywhere
}
.contact-tile svg {
  color: var(--gold-dark);
  margin-bottom: 16px
}
.map-panel {
  background: var(--navy);
  color: white;
  padding: 38px;
  min-height: 240px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  border-top: 3px solid var(--gold)
}
.map-panel h3 {
  margin-bottom: 18px
}
.map-panel p {
  font-size: .86rem;
  color: #c6d0d8
}
.form-config-note {
  font-size: .75rem;
  color: var(--muted);
  margin-top: 12px
}


/* RESPONSIVE */
@media(min-width:1600px) {
  :root {
    --wrap: 1480px
  }
  .hero {
    min-height: 730px
  }
  .hero h1 {
    font-size: 5.4rem
  }
  .nav-list { gap: 28px; }
}
@media(max-width:1150px) {
  .grid-4 {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
  .aside-layout {
    grid-template-columns: minmax(0,1fr) 260px;
    gap: 34px
  }
}
@media(max-width:980px) {
  .split {
    gap: 40px
  }
  .hero {
    min-height: 600px
  }
  .hero-body {
    padding-block: 72px 88px
  }
  .hero-lanes a {
    padding-inline: 18px
  }
  .hero-lanes strong {
    font-size: .8rem
  }
  .grid-3 {
    gap: 18px
  }
  .gallery-grid {
    gap: 18px
  }
  .aside-layout {
    grid-template-columns: 1fr
  }
  .sticky-aside {
    position: static
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px
  }
  .portfolio-banner {
    padding: 38px
  }
  .portfolio-banner h3 {
    font-size: 1.8rem
  }
}
@media(max-width:700px) {
  .review-bar {
    font-size: .56rem
  }
  .review-bar .container>span {
    display: none
  }
  .split {
    grid-template-columns: 1fr;
    gap: 42px
  }
  .grid-3,.grid-2,.grid-4 {
    grid-template-columns: 1fr
  }
  .section-head {
    align-items: start;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 32px
  }
  .hero {
    min-height: 610px;
    align-items: start
  }
  .hero-shade {
    background: linear-gradient(90deg,#272c2fea,#272c2f88),linear-gradient(0deg,#272c2fa6,transparent)
  }
  .hero-body {
    padding-top: 68px;
    padding-bottom: 92px
  }
  .hero h1 {
    max-width: 14ch;
    font-size: clamp(2.55rem,8vw,3.6rem)
  }
  .hero .lead {
    font-size: .96rem;
    max-width: 35ch
  }
  .hero .actions {
    gap: 12px
  }
  .hero .btn {
    padding: 14px 18px;
    font-size: .75rem
  }
  .hero-footnote {
    left: var(--space);
    left: max(var(--space), var(--safe-left));
    right: auto;
    bottom: 20px;
    font-size: .52rem
  }
  .hero-lanes .container {
    grid-template-columns: 1fr
  }
  .hero-lanes a,.hero-lanes a:first-child {
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid #ffffff20
  }
  .hero-lanes strong {
    font-size: .87rem
  }
  .intro-figure img {
    height: 340px
  }
  .intro-label {
    right: 0;
    bottom: 20px
  }
  .intro-figure::before {
    left: -9px;
    bottom: -9px
  }
  .portfolio-banner {
    grid-template-columns: 1fr;
    padding: 30px
  }
  .contour-art {
    height: 150px
  }
  .gallery-grid {
    grid-template-columns: 1fr
  }
  .gallery-item img {
    aspect-ratio: 1.5
  }
  .cta-section .container {
    display: block
  }
  .cta-section .actions {
    margin-top: 30px
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px
  }
  .footer-intro {
    grid-column: 1/-1
  }
  .footer-contact {
    grid-column: 1/-1
  }
  .footer-bottom {
    align-items: start;
    flex-direction: column
  }
  .page-hero {
    padding-bottom: 48px
  }
  .page-hero h1 {
    font-size: clamp(2.35rem,8vw,3.4rem)
  }
  .fact-list>div {
    grid-template-columns: 1fr;
    gap: 8px
  }
  .form-grid {
    grid-template-columns: 1fr
  }
  .field-full {
    grid-column: auto
  }
  .filter-bar {
    padding: 18px;
    gap: 12px
  }
  .filter-bar label {
    min-width: 0;
    width: 100%
  }
  .filter-count {
    margin-left: 0
  }
  .filter-reset {
    margin-left: auto
  }
  .lightbox {
    padding: 16px
  }
  .lightbox-footer {
    align-items: start;
    flex-direction: column
  }
  .notice {
    padding: 18px
  }
  .document-row {
    align-items: start;
    flex-direction: column
  }
  .page-hero::after {
    opacity: .4
  }
  .form-panel {
    padding: 24px
  }
  .card-number {
    margin-bottom: 26px
  }
  .grid-4:has(.card) {
    gap: 16px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
  *,*::before,*::after {
    animation: none!important;
    transition: none!important
  }
}


fieldset[data-form-fields] { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Clear spacing for authored content and WhatsApp review. */
p + .grid-2, p + .grid-3, p + .grid-4 { margin-top: 32px; }
p + .text-link { margin-top: 24px; }
.contact-options { display: grid; gap: 18px; margin-top: 32px; }
.field-help { font-size: .75rem; line-height: 1.65; color: var(--muted); margin-top: 10px; }
.message-review { margin-top: 28px; border: 1px solid var(--line); border-top: 3px solid var(--gold); background: var(--paper); padding: clamp(18px, 3vw, 30px); }
.message-review h3 { margin-bottom: 16px; }
.message-review .eyebrow { margin-bottom: 12px; }
.message-review .routing-note { font-size: .84rem; color: var(--muted); margin-bottom: 18px; }
.message-review textarea { display: block; width: 100%; min-height: 240px; resize: vertical; padding: 16px; border: 1px solid var(--control-line); border-radius: 2px; background: white; color: var(--ink); font: .83rem/1.65 var(--font); }
.message-review .form-actions { gap: 12px; }
.message-review [data-copy-status] { margin-top: 16px; color: var(--muted); }
.sr-label { display: block; font-size: .75rem; font-weight: 600; margin-bottom: 8px; }
.text-button { padding: 12px 0; min-height: 44px; border: 0; background: transparent; color: var(--navy); font-size: .8rem; text-decoration: underline; text-underline-offset: 4px; }
.portfolio-banner .discipline { border-color: #ffffff30; }
.portfolio-banner .discipline p { margin-top: 0; color: #c6d0d8; }
.portfolio-banner .discipline span { color: var(--gold-light); }
.portfolio-banner .discipline h3 { font-size: 1.05rem; }
.reading figure figcaption { margin-top: -24px; margin-bottom: 32px; }
.whatsapp { font-size: .83rem; font-weight: 700; text-decoration: none; }
@media (max-width: 700px) {
  .message-review .form-actions { align-items: stretch; }
  .message-review .btn { width: 100%; gap: 10px; }
  .contact-options { margin-top: 24px; }
}
.article-date { display: block; font-size: .7rem; color: var(--muted); margin: -6px 0 18px; }

/* Navigation responds to available content space; its hidden state is set by the controller. */
@media (min-width:1101px) and (max-width:1279px) {
  .nav-list { gap: 15px; }
  .nav-entry > a, .nav-item > summary { font-size: .8rem; }
  .nav-entry > .btn { padding-inline: 12px; }
  .header-inner { gap: 16px; }
}
@media (max-width:1100px) {
  :root { --header-size: 96px; }
  .header-inner { flex-wrap: wrap; gap: 0 16px; }
  .site-nav { width: 100%; border-top: 1px solid var(--line); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding-block: 8px; }
  .nav-entry > a, .nav-item > summary { width: 100%; white-space: normal; padding: 12px 2px; min-height: 48px; font-size: 1rem; }
  .nav-item > summary { justify-content: space-between; }
  .nav-dropdown, .nav-entry:nth-last-child(2) .nav-dropdown {
    position: static; min-width: 0; max-width: none; max-height: none;
    margin: 0 0 8px; padding: 4px 8px; border: 0; border-left: 2px solid var(--gold-dark);
    background: var(--surface-soft); box-shadow: none; overflow: visible
  }
  .nav-dropdown a { font-size: .95rem; }
  .nav-entry > .btn { width: auto; max-width: 100%; margin-block: 12px 0; padding-inline: 20px; }
  .js .header-inner { position: relative; }
  .js .site-nav {
    position: absolute; top: 100%; inset-inline: 0; width: 100%;
    max-height: calc(100vh - var(--header-size) - 1px);
    max-height: calc(100vh - 100% - 2px - var(--safe-top) - var(--safe-bottom));
    max-height: calc(100dvh - 100% - 2px - var(--safe-top) - var(--safe-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--space) 20px;
    padding-left: max(var(--space), var(--safe-left));
    padding-right: max(var(--space), var(--safe-right));
    padding-bottom: calc(20px + var(--safe-bottom));
    background: var(--paper); box-shadow: 0 14px 24px #33383b20
  }
  .field label { font-size: .875rem; }
  .field-help, .form-actions p, .check-field { font-size: .84rem; }
  .field input, .field select, .field textarea, .filter-bar select, .message-review textarea { font-size: 1rem; }
}
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
  .nav-toggle, .btn, .field input, .field textarea, .field select { border: 1px solid ButtonText; }
  .menu-icon > span { background: ButtonText; }
  .nav-dropdown a[aria-current="page"] { border-color: Highlight; }
}

/* Operations menu: section headings and their destinations. */
.operations-menu .operations-group + .operations-group{border-top:1px solid var(--line,#ddd5c7);margin-top:8px;padding-top:8px}
.operations-menu .operations-group h3{font:inherit;margin:0}
.operations-menu .operations-group h3 a,.operations-menu .operations-heading{font-weight:700;font-size:.82rem;letter-spacing:.03em}
.operations-menu .operations-heading{padding:12px 16px;color:var(--charcoal)}
.operations-menu .operations-children{list-style:none;padding:0 0 4px 12px;margin:0}
.operations-menu .operations-children a{font-size:.82rem}
.operations-menu{max-height:calc(100dvh - 130px);overflow-y:auto}

.operations-menu .operations-heading-static{display:flex;align-items:center;min-height:44px;padding:11px 14px;font-size:.82rem;font-weight:700;letter-spacing:.03em;line-height:1.5;white-space:normal;overflow-wrap:anywhere;color:inherit}

/* Heading labels without decorative leading dashes. */
.eyebrow::before { display: none; }