/* ==========================================================================
   Artistic Dimension — Components
   Buttons, logo, media shapes, cards, chips, forms, process rail
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.ad-btn {
  --btn-bg: var(--ad-brown);
  --btn-fg: #fff;
  --btn-bd: var(--ad-brown);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75em;
  padding: .82em 1.55em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--ad-r-sm);
  font-family: var(--ad-font-sans);
  font-size: var(--ad-fs-small);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.2;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color var(--ad-t) var(--ad-ease),
    color var(--ad-t) var(--ad-ease),
    border-color var(--ad-t) var(--ad-ease),
    box-shadow var(--ad-t) var(--ad-ease),
    transform var(--ad-t) var(--ad-ease);
}

.ad-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ad-brown-hover);
  transform: translateY(101%);
  transition: transform var(--ad-t) var(--ad-ease-out);
}

.ad-btn:hover { transform: translateY(-2px); box-shadow: var(--ad-shadow-md); }
.ad-btn:hover::before { transform: translateY(0); }
.ad-btn:active { transform: translateY(0); }

.ad-btn .ad-btn__icon {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  transition: transform var(--ad-t) var(--ad-ease-out);
}
.ad-btn:hover .ad-btn__icon { transform: translateX(4px); }

/* Ghost / outline */
.ad-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ad-ink);
  --btn-bd: var(--ad-line);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(4px);
}
.ad-btn--ghost::before { background: var(--ad-ink); }
.ad-btn--ghost:hover { color: #fff; border-color: var(--ad-ink); }

/* Light on dark */
.ad-btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ad-ink);
  --btn-bd: #fff;
}
.ad-btn--light::before { background: var(--ad-gold-tint); }

.ad-btn--pill { border-radius: var(--ad-r-pill); }
.ad-btn--sm { padding: .68em 1.2em; font-size: var(--ad-fs-label); }
.ad-btn--lg { padding: .95em 1.85em; }

/* Text link with arrow */
.ad-link {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: var(--ad-fs-small);
  font-weight: 400;
  color: var(--ad-ink);
  letter-spacing: .015em;
  position: relative;
  padding-bottom: 3px;
}

.ad-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: .28;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform var(--ad-t) var(--ad-ease-out);
}

.ad-link:hover { color: var(--ad-gold); }
.ad-link:hover::after { transform: scaleX(1); transform-origin: left; }

.ad-link svg {
  width: 1em;
  height: 1em;
  flex: none;
  transition: transform var(--ad-t) var(--ad-ease-out);
}
.ad-link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.ad-logo {
  display: inline-flex;
  align-items: center;
  gap: clamp(.55rem, .9vw, .85rem);
  flex: none;
}

.ad-logo__mark {
  width: clamp(38px, 3.4vw, 52px);
  height: auto;
  flex: none;
  transition: transform var(--ad-t) var(--ad-ease-out);
}

.ad-logo:hover .ad-logo__mark { transform: scale(1.05) rotate(-1deg); }

.ad-logo__text { display: flex; flex-direction: column; line-height: 1; }

.ad-logo__name {
  font-family: var(--ad-font-display);
  font-size: clamp(1.02rem, .82rem + .5vw, 1.4rem);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--ad-ink);
  text-transform: uppercase;
}

.ad-logo__name span { display: block; }

.ad-logo__tag {
  margin-top: .38em;
  font-family: var(--ad-font-sans);
  font-size: clamp(.44rem, .33rem + .2vw, .56rem);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ad-muted);
}

.ad-logo--light .ad-logo__name { color: #fff; }
.ad-logo--light .ad-logo__tag { color: rgba(255, 255, 255, .62); }

/* --------------------------------------------------------------------------
   Curved media — the signature shape language
   -------------------------------------------------------------------------- */

.ad-shape {
  position: relative;
  overflow: hidden;
  background: var(--ad-surface-2);
}

.ad-shape > img,
.ad-shape > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Rounded frames used across cards */
.ad-shape--r { border-radius: var(--ad-r); }
.ad-shape--r-lg { border-radius: var(--ad-r-lg); }
.ad-shape--r-xl { border-radius: var(--ad-r-xl); }

/* Arch top used on category / project tiles */
.ad-shape--arch {
  border-radius: 200px 200px var(--ad-r) var(--ad-r);
}

/* Zoom-on-hover behaviour */
.ad-zoom { overflow: hidden; }
.ad-zoom img {
  transition: transform 1.05s var(--ad-ease-out), filter .6s var(--ad-ease);
  will-change: transform;
}
.ad-zoom:hover img,
a:hover .ad-zoom img { transform: scale(1.06); }

/* Overlay gradient for captioned images */
.ad-overlay { position: relative; }
.ad-overlay::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(to top, rgba(24, 18, 14, .72), rgba(24, 18, 14, .18) 48%, transparent);
  pointer-events: none;
  transition: opacity var(--ad-t) var(--ad-ease);
}

.ad-overlay__caption {
  position: absolute;
  left: clamp(.85rem, 1.4vw, 1.35rem);
  bottom: clamp(.7rem, 1.2vw, 1.05rem);
  z-index: 2;
  color: #fff;
  font-family: var(--ad-font-sans);
  font-size: var(--ad-fs-small);
  font-weight: 400;
  letter-spacing: .03em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
  transform: translateY(0);
  transition: transform var(--ad-t) var(--ad-ease-out);
}

.ad-overlay:hover .ad-overlay__caption { transform: translateY(-4px); }

/* --------------------------------------------------------------------------
   Icon medallions
   -------------------------------------------------------------------------- */

.ad-icon {
  display: grid;
  place-items: center;
  width: clamp(48px, 4.2vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ad-gold-tint);
  color: var(--ad-brown);
  flex: none;
  transition:
    background-color var(--ad-t) var(--ad-ease),
    color var(--ad-t) var(--ad-ease),
    transform var(--ad-t) var(--ad-ease-out);
}

.ad-icon svg {
  width: 46%;
  height: 46%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ad-icon--sm { width: clamp(38px, 3vw, 46px); }
.ad-icon--lg { width: clamp(56px, 5vw, 74px); }

.ad-icon--outline {
  background: transparent;
  border: 1px solid var(--ad-line);
}

:is(.ad-card, .ad-feature, .ad-step):hover .ad-icon {
  background: var(--ad-brown);
  color: #fff;
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.ad-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ad-surface);
  border: 1px solid var(--ad-line-soft);
  border-radius: var(--ad-r);
  overflow: hidden;
  transition:
    transform var(--ad-t) var(--ad-ease-out),
    box-shadow var(--ad-t) var(--ad-ease),
    border-color var(--ad-t) var(--ad-ease);
}

.ad-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ad-shadow-md);
  border-color: var(--ad-line);
}

.ad-card__media { position: relative; overflow: hidden; }
.ad-card__media img { width: 100%; height: 100%; object-fit: cover; }

.ad-card__body {
  padding: clamp(1rem, .7rem + .8vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}

.ad-card__meta {
  font-family: var(--ad-font-sans);
  font-size: var(--ad-fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ad-gold);
  font-weight: 500;
}

.ad-card__title {
  font-family: var(--ad-font-display);
  font-size: var(--ad-fs-h4);
  font-weight: 500;
  color: var(--ad-ink);
  line-height: 1.28;
}

.ad-card__text {
  font-size: var(--ad-fs-small);
  color: var(--ad-body);
  line-height: 1.75;
}

.ad-card__footer {
  margin-top: auto;
  padding-top: .55rem;
}

/* Feature block (icon + copy) */
.ad-feature {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: transform var(--ad-t) var(--ad-ease-out);
}

.ad-feature--center { align-items: center; text-align: center; }

.ad-feature__title {
  font-family: var(--ad-font-display);
  font-size: var(--ad-fs-h3);
  font-weight: 500;
  color: var(--ad-ink);
  line-height: 1.2;
}

.ad-feature__title--sm {
  font-family: var(--ad-font-sans);
  font-size: var(--ad-fs-body);
  font-weight: 500;
  letter-spacing: .01em;
}

.ad-feature__text {
  font-size: var(--ad-fs-small);
  color: var(--ad-body);
  line-height: 1.8;
  max-width: 30ch;
}

.ad-feature--center .ad-feature__text { margin-inline: auto; }

/* Divider columns (vertical hairlines between features) */
.ad-divided {
  display: grid;
  gap: 0;
}

.ad-divided > * {
  padding-inline: clamp(.9rem, 1.6vw, 1.9rem);
  border-left: 1px solid var(--ad-line);
}

.ad-divided > *:first-child { border-left: 0; padding-left: 0; }

/* --------------------------------------------------------------------------
   Filter chips
   -------------------------------------------------------------------------- */

.ad-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.4rem, .7vw, .7rem);
}

.ad-chip {
  padding: .62em 1.35em;
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-r-sm);
  background: var(--ad-surface);
  color: var(--ad-ink-soft);
  font-family: var(--ad-font-sans);
  font-size: var(--ad-fs-small);
  font-weight: 400;
  letter-spacing: .015em;
  white-space: nowrap;
  transition:
    background-color var(--ad-t-fast) var(--ad-ease),
    color var(--ad-t-fast) var(--ad-ease),
    border-color var(--ad-t-fast) var(--ad-ease),
    transform var(--ad-t-fast) var(--ad-ease);
}

.ad-chip:hover {
  border-color: var(--ad-brown);
  transform: translateY(-1px);
}

.ad-chip.is-active,
.ad-chip[aria-pressed="true"] {
  background: var(--ad-brown);
  border-color: var(--ad-brown);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Process rail
   -------------------------------------------------------------------------- */

.ad-process {
  position: relative;
  display: grid;
  gap: clamp(1.4rem, 2vw, 2rem) clamp(.4rem, 1vw, 1rem);
}

.ad-process::before {
  content: "";
  position: absolute;
  top: clamp(24px, 2.1vw, 31px);
  left: 8%;
  right: 8%;
  height: 1px;
  background-image: linear-gradient(to right, var(--ad-line) 55%, transparent 0);
  background-size: 9px 1px;
  background-repeat: repeat-x;
}

.ad-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .55rem;
}

.ad-step__dot {
  display: grid;
  place-items: center;
  width: clamp(46px, 4.1vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--ad-line);
  background: var(--ad-surface);
  color: var(--ad-brown);
  transition:
    background-color var(--ad-t) var(--ad-ease),
    color var(--ad-t) var(--ad-ease),
    border-color var(--ad-t) var(--ad-ease),
    transform var(--ad-t) var(--ad-ease-out);
}

.ad-step__dot svg {
  width: 44%;
  height: 44%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ad-step:hover .ad-step__dot {
  background: var(--ad-brown);
  border-color: var(--ad-brown);
  color: #fff;
  transform: translateY(-4px);
}

.ad-step__num {
  font-family: var(--ad-font-sans);
  font-size: var(--ad-fs-label);
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ad-muted);
  margin-top: .35rem;
}

.ad-step__name {
  font-family: var(--ad-font-sans);
  font-size: var(--ad-fs-small);
  font-weight: 500;
  color: var(--ad-ink);
  letter-spacing: .01em;
}

.ad-step__text {
  font-size: var(--ad-fs-label);
  line-height: 1.85;
  color: var(--ad-body);
  max-width: 22ch;
}

/* --------------------------------------------------------------------------
   Location cards
   -------------------------------------------------------------------------- */

.ad-locations {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ad-gap);
}

.ad-location {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--ad-surface);
  border: 1px solid var(--ad-line-soft);
  border-radius: var(--ad-r);
  overflow: hidden;
  min-height: clamp(180px, 15vw, 215px);
  transition:
    transform var(--ad-t) var(--ad-ease-out),
    box-shadow var(--ad-t) var(--ad-ease);
}

.ad-location:hover { transform: translateY(-5px); box-shadow: var(--ad-shadow-md); }

.ad-location__media {
  flex: 0 0 34%;
  overflow: hidden;
}

.ad-location__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad-location__body {
  flex: 1;
  padding: clamp(.85rem, .6rem + .6vw, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.ad-location__name {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-family: var(--ad-font-sans);
  font-size: var(--ad-fs-body);
  font-weight: 500;
  color: var(--ad-ink);
  line-height: 1.3;
}

.ad-location__name svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  margin-top: .18em;
  stroke: var(--ad-gold);
  fill: none;
  stroke-width: 1.4;
}

.ad-location__list {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  font-size: var(--ad-fs-label);
  color: var(--ad-body);
}

.ad-location__list li {
  display: flex;
  align-items: center;
  gap: .45em;
  line-height: 1.6;
}

.ad-location__list li::before {
  content: "";
  width: 9px;
  height: 5px;
  flex: none;
  border-left: 1.2px solid var(--ad-gold);
  border-bottom: 1.2px solid var(--ad-gold);
  transform: rotate(-45deg) translateY(-1px);
}

.ad-location__link { margin-top: auto; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.ad-field { position: relative; }

.ad-input,
.ad-select,
.ad-textarea {
  width: 100%;
  padding: .95em 1.05em;
  background: var(--ad-surface);
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-r-sm);
  font-family: var(--ad-font-sans);
  font-size: var(--ad-fs-small);
  font-weight: 300;
  color: var(--ad-ink);
  transition:
    border-color var(--ad-t-fast) var(--ad-ease),
    box-shadow var(--ad-t-fast) var(--ad-ease),
    background-color var(--ad-t-fast) var(--ad-ease);
  appearance: none;
}

.ad-input::placeholder,
.ad-textarea::placeholder { color: var(--ad-muted); opacity: 1; }

.ad-input:focus,
.ad-select:focus,
.ad-textarea:focus {
  outline: none;
  border-color: var(--ad-gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(165, 124, 78, .12);
}

.ad-textarea { min-height: 140px; resize: vertical; line-height: 1.7; }

.ad-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8175' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 15px;
  padding-right: 2.6rem;
  cursor: pointer;
}

.ad-check {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: var(--ad-fs-small);
  color: var(--ad-body);
  cursor: pointer;
  line-height: 1.6;
}

.ad-check input {
  appearance: none;
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: .18em;
  border: 1px solid var(--ad-line);
  border-radius: 3px;
  background: var(--ad-surface);
  cursor: pointer;
  transition: background-color var(--ad-t-fast) var(--ad-ease), border-color var(--ad-t-fast) var(--ad-ease);
}

.ad-check input:checked {
  background: var(--ad-brown) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-color: var(--ad-brown);
}

.ad-check.has-error { color: #a8412f; }
.ad-check.has-error input { border-color: #c2705f; }

.ad-field__error {
  display: none;
  margin-top: .3rem;
  font-size: var(--ad-fs-label);
  color: #a8412f;
  letter-spacing: .01em;
}

.ad-field.has-error .ad-input,
.ad-field.has-error .ad-select,
.ad-field.has-error .ad-textarea { border-color: #c2705f; }

.ad-field.has-error .ad-field__error { display: block; }

.ad-form__status {
  display: none;
  padding: .85rem 1.1rem;
  border-radius: var(--ad-r-sm);
  background: var(--ad-gold-tint);
  border: 1px solid var(--ad-gold-soft);
  color: var(--ad-ink);
  font-size: var(--ad-fs-small);
}

.ad-form__status.is-visible { display: block; }

/* --------------------------------------------------------------------------
   Editorial prose — WordPress / Elementor authored content
   -------------------------------------------------------------------------- */

.ad-page-head { margin-bottom: clamp(1.2rem, 2.2vw, 2rem); }

.ad-prose {
  font-size: var(--ad-fs-lead);
  line-height: 1.9;
  color: var(--ad-body);
}

.ad-prose > * + * { margin-top: 1.15em; }

.ad-prose h2 { font-size: var(--ad-fs-h2); margin-top: 1.8em; }
.ad-prose h3 { font-size: var(--ad-fs-h3); margin-top: 1.6em; }
.ad-prose h4 { font-size: var(--ad-fs-h4); margin-top: 1.4em; }

.ad-prose a {
  color: var(--ad-gold);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}

.ad-prose a:hover { color: var(--ad-brown); }

.ad-prose ul,
.ad-prose ol { padding-left: 1.3em; }
.ad-prose ul { list-style: disc; }
.ad-prose ol { list-style: decimal; }
.ad-prose li { margin-top: .45em; }
.ad-prose li::marker { color: var(--ad-gold); }

.ad-prose blockquote {
  margin: 1.6em 0;
  padding: .2em 0 .2em 1.4em;
  border-left: 2px solid var(--ad-gold);
  font-family: var(--ad-font-display);
  font-size: var(--ad-fs-h3);
  font-style: italic;
  line-height: 1.45;
  color: var(--ad-ink);
}

.ad-prose img,
.ad-prose figure img { border-radius: var(--ad-r); }

.ad-prose figcaption {
  margin-top: .6em;
  font-size: var(--ad-fs-label);
  color: var(--ad-muted);
  text-align: center;
}

.ad-prose code {
  padding: .12em .4em;
  background: var(--ad-surface-2);
  border-radius: 4px;
  font-size: .92em;
}

.ad-prose pre {
  padding: 1rem 1.15rem;
  background: var(--ad-surface-2);
  border-radius: var(--ad-r-sm);
  overflow-x: auto;
}

.ad-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ad-fs-small);
}

.ad-prose th,
.ad-prose td {
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--ad-line);
  text-align: left;
}

.ad-prose th { font-weight: 500; color: var(--ad-ink); }

.ad-table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.ad-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin-top: clamp(1.6rem, 2.6vw, 2.6rem);
}

.ad-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding-inline: .6rem;
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-r-sm);
  background: var(--ad-surface);
  font-size: var(--ad-fs-small);
  color: var(--ad-ink-soft);
  transition: background-color var(--ad-t-fast) var(--ad-ease), color var(--ad-t-fast) var(--ad-ease), border-color var(--ad-t-fast) var(--ad-ease);
}

.ad-pagination .page-numbers:hover,
.ad-pagination .page-numbers.current {
  background: var(--ad-brown);
  border-color: var(--ad-brown);
  color: #fff;
}

.ad-pagination .dots { border-color: transparent; background: none; }

/* --------------------------------------------------------------------------
   Decorative watermark
   -------------------------------------------------------------------------- */

.ad-watermark {
  position: absolute;
  pointer-events: none;
  opacity: .5;
  color: var(--ad-line);
}