/* ==========================================================================
   Components: buttons, links, header & navigation, footer, accordion,
   forms, section headers, chips, review flags, transitions, cursor
   ========================================================================== */

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-ink);
  --btn-fg: #fff;
  --btn-line: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 52px;
  padding: 0 1.5rem 0 1.65rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  font-size: 0.975rem;
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-accent);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--c-ink); }
.btn:hover .btn__icon, .btn:focus-visible .btn__icon { background: rgba(11, 25, 27, 0.12); }

.btn__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: -0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  flex: none;
}
.btn__icon svg { width: 14px; height: 14px; transition: transform var(--dur-slow) var(--ease-out); }
.btn:hover .btn__icon svg { transform: translateX(2px) rotate(-45deg); }

/* Brand gold button (primary CTA on dark) */
.btn--accent { --btn-bg: var(--c-accent); --btn-fg: var(--c-ink); }
.btn--accent .btn__icon { background: rgba(11, 25, 27, 0.12); }
.btn--accent::before { background: #fff; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--c-ink); }
.btn--light .btn__icon { background: var(--c-paper-2); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: var(--line-strong); }
.btn--ghost .btn__icon { background: var(--c-accent-wash); }
.btn--sm { min-height: 44px; padding: 0 1.15rem 0 1.25rem; font-size: 0.9rem; }
.btn--lg { min-height: 60px; padding: 0 1.75rem 0 2rem; font-size: 1.05rem; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); }

/* Text link with arrow + animated underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-weight: var(--fw-medium);
  color: var(--fg);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-slow) var(--ease-out), color var(--dur-base);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--dur-slow) var(--ease-out); }
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow:hover svg { transform: translateX(4px); }

.u-link {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out);
}
.u-link:hover, .u-link:focus-visible { background-size: 100% 1px; }

/* ---- Header & navigation --------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  color: var(--c-charcoal);
  transition: background-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard), color var(--dur-base),
    transform var(--dur-slow) var(--ease-out);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: rgba(27, 42, 44, 0.1);
  opacity: 0;
  transition: opacity var(--dur-base);
}
.site-header.is-scrolled {
  background: rgba(245, 241, 232, 0.88);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}
.site-header.is-scrolled::after { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }

/* Pages whose hero is dark start with a light-on-dark header */
.site-header[data-tone="dark"]:not(.is-scrolled) { color: #fff; }
.site-header[data-tone="dark"]:not(.is-scrolled) .nav-cta { --btn-bg: var(--c-accent); --btn-fg: var(--c-ink); }
.site-header[data-tone="dark"]:not(.is-scrolled) .nav-cta .btn__icon { background: rgba(11, 25, 27, 0.12); }
.site-header[data-tone="dark"]:not(.is-scrolled) .nav-cta::before { background: #fff; }

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  color: inherit;
}
.brand img { display: block; width: auto; height: 34px; }
.brand picture { display: block; }
.brand .brand__light { display: none; }
/* Light logo on dark surfaces */
.site-header[data-tone="dark"]:not(.is-scrolled) .brand .brand__dark,
.menu-open .site-header .brand .brand__dark,
.site-footer .brand .brand__dark { display: none; }
.site-header[data-tone="dark"]:not(.is-scrolled) .brand .brand__light,
.menu-open .site-header .brand .brand__light,
.site-footer .brand .brand__light { display: block; }
.site-footer .brand img { height: 46px; }

.primary-nav { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 44px;
  padding: 0 0.85rem;
  font-size: 0.95rem;
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  color: inherit;
  border-radius: var(--r-pill);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 8px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-slow) var(--ease-out);
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after,
.nav-item.is-open > .nav-link::after { transform: scaleX(1); transform-origin: left; }
.nav-link__chev { width: 12px; height: 12px; transition: transform var(--dur-base) var(--ease-out); }
.nav-item.is-open .nav-link__chev { transform: rotate(180deg); }

/* Services dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: min(560px, 92vw);
  padding: 12px;
  background: var(--c-white);
  color: var(--c-charcoal);
  border: 1px solid rgba(27, 42, 44, 0.08);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px) scale(0.98);
  transform-origin: top center;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}
.dropdown::before { /* hover bridge */
  content: "";
  position: absolute;
  inset: -16px 0 auto 0;
  height: 16px;
}
.nav-item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}
.dropdown__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; list-style: none; margin: 0; padding: 0; }
.dropdown__link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  transition: background-color var(--dur-fast);
}
.dropdown__link:hover, .dropdown__link:focus-visible { background: var(--c-paper); }
.dropdown__num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--c-accent-strong); padding-top: 3px; }
.dropdown__title { font-weight: var(--fw-semibold); font-size: 0.95rem; letter-spacing: -0.01em; }

.dropdown__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--c-ink);
  color: #fff;
  font-size: 0.9rem;
}
.dropdown__foot .link-arrow { color: var(--c-accent); }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Burger */
.menu-toggle {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid currentColor;
  border-color: rgba(127, 127, 127, 0.35);
  color: inherit;
}
.menu-toggle span {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-slow) var(--ease-out), top var(--dur-slow) var(--ease-out);
}
.menu-toggle span:nth-child(1) { top: 19px; }
.menu-toggle span:nth-child(2) { top: 27px; }
.menu-open .menu-toggle span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { top: 23px; transform: rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 24px) var(--gutter) 32px;
  background: var(--c-ink);
  color: #fff;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path var(--dur-xslow) var(--ease-out), visibility 0s linear var(--dur-xslow);
}
.menu-open .mobile-menu {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition-delay: 0s;
}
.menu-open .site-header { color: #fff; background: transparent; z-index: calc(var(--z-menu) + 1); backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-open .site-header::after { opacity: 0; }
.menu-open .site-header .nav-cta { display: none; }

.mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.mobile-menu__list > li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; }
.mobile-menu__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  font-size: clamp(1.75rem, 1.2rem + 3vw, 2.6rem);
  font-weight: var(--fw-medium);
  letter-spacing: -0.035em;
  line-height: 1.1;
  width: 100%;
  text-align: left;
}
.mobile-menu__link small { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--c-slate-light); }
.mobile-menu__link[aria-current="page"] { color: var(--c-accent-soft); }
.mobile-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.mobile-sub > ul { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0; visibility: hidden; transition: visibility 0s linear var(--dur-slow); }
.mobile-sub.is-open > ul { visibility: visible; transition-delay: 0s; }
.mobile-sub.is-open { grid-template-rows: 1fr; }
.mobile-sub a { display: block; padding: 0.55rem 0 0.55rem 1rem; color: var(--c-slate-light); font-size: 1.05rem; }
.mobile-sub a:hover { color: #fff; }
.mobile-sub li:last-child a { padding-bottom: 1.1rem; }
.mobile-menu__foot { margin-top: auto; padding-top: 2.5rem; display: grid; gap: 1.25rem; color: var(--c-slate-light); font-size: 0.95rem; }
.mobile-menu__foot a { color: #fff; }
.js .mobile-menu [data-menu-item] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.menu-open .mobile-menu [data-menu-item] { opacity: 1; transform: none; }

.no-scroll, html.menu-open { overflow: hidden; }

/* ---- Breadcrumbs ------------------------------------------------------ */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.breadcrumbs a:hover { color: var(--fg); }

/* ---- Section header --------------------------------------------------- */
.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-5) var(--grid-gap);
  align-items: end;
  margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
}
.section-head__index { grid-column: 1 / span 3; align-self: start; display: flex; flex-direction: column; gap: 0.75rem; }
.section-head__title { grid-column: 4 / span 9; }
.section-head__aside { grid-column: 4 / span 6; color: var(--fg-muted); font-size: var(--fs-lead); line-height: 1.5; }

/* ---- Chips / tags ----------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 30px;
  padding: 0 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}

.chip--accent { background: var(--c-accent-wash); color: var(--c-accent-strong); border-color: transparent; }
.theme-dark .chip--accent { color: var(--c-accent-soft); background: rgba(138, 160, 255, 0.12); }

/* Concept label on visuals that are not real screenshots */
.concept-tag {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(11, 25, 27, 0.72);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---- Review / approval flags ----------------------------------------- */

/* ---- Accordion -------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item h3 { font-size: inherit; letter-spacing: inherit; line-height: inherit; font-weight: inherit; }
.acc-trigger {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 1.6rem 0;
  text-align: left;
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--fg);
  transition: color var(--dur-base);
}
.acc-trigger:hover { color: var(--link); }
.acc-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  flex: none;
  transition: background-color var(--dur-base), border-color var(--dur-base), transform var(--dur-slow) var(--ease-out);
}
.acc-icon::before, .acc-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc-trigger[aria-expanded="true"] .acc-icon { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); transform: rotate(180deg); }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.acc-panel > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--dur-slow); }
.acc-panel[data-open="true"] > div { visibility: visible; transition-delay: 0s; }
.acc-panel[data-open="true"] { grid-template-rows: 1fr; }
.acc-panel p {
  max-width: 70ch;
  padding: 0 4rem 1.75rem 0;
  color: var(--fg-muted);
}
.no-js .acc-panel { grid-template-rows: 1fr; }
.no-js .acc-panel > div { visibility: visible; }

/* ---- Forms ------------------------------------------------------------ */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 1.5rem; }
.field { display: grid; gap: 0.5rem; grid-column: span 1; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend {
  font-size: 0.9rem;
  font-weight: var(--fw-medium);
  color: var(--fg);
}
.field .req { color: var(--c-error); margin-left: 2px; }
.field .opt { color: var(--fg-muted); font-weight: var(--fw-regular); font-size: 0.82rem; }
.input, .select, .textarea {
  width: 100%;
  min-height: 54px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--c-white);
  color: var(--c-charcoal);
  font-size: 1rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
/* */
.select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%231b2a2c' stroke-width='1.6' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.input:hover, .select:hover, .textarea:hover { border-color: rgba(27, 42, 44, 0.42); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-accent-strong);
  box-shadow: 0 0 0 4px var(--c-accent-wash);
}
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--c-error); }
.field-hint { font-size: 0.82rem; color: var(--fg-muted); }
.field-error { display: none; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--c-error); }
.field.has-error .field-error { display: flex; }
.form-status {
  grid-column: 1 / -1;
  display: none;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-md);
  font-size: var(--fs-small);
}
.form-status.is-visible { display: block; }
.form-status--error { background: #fdecea; color: #8a2119; }
.form-status--info { background: var(--c-warning-bg); color: var(--c-warning-ink); border: 1.5px dashed var(--c-warning-line); }
.form-status--info strong { display: block; margin-bottom: 0.25rem; }

/* ---- Footer ----------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--c-ink);
  color: #eef2ef;
  padding-top: clamp(4rem, 3rem + 5vw, 7.5rem);
  overflow: hidden;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2.3fr));
  gap: 3rem var(--grid-gap);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.footer-brand p { margin-top: 1.5rem; max-width: 42ch; color: var(--c-slate-light); font-size: 0.95rem; }
.footer-col h2 {
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-slate-light);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer-col a, .footer-col address { color: #eef2ef; font-size: 0.95rem; font-style: normal; line-height: 1.5; }
.footer-col a:hover { color: var(--c-accent-soft); }
.footer-contact li { display: grid; gap: 2px; }
.footer-contact span { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-slate-light); }
.footer-wordmark {
  display: block;
  font-size: clamp(3.5rem, 1rem + 15.5vw, 17rem);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.065em;
  line-height: 0.78;
  color: transparent;
  -webkit-text-stroke: 1px rgba(238, 242, 239, 0.18);
  white-space: nowrap;
  user-select: none;
  transform: translateY(0.1em);
  margin-left: -0.04em;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.75rem;
  border-top: 1px solid rgba(238, 242, 239, 0.12);
  font-size: 0.85rem;
  color: var(--c-slate-light);
}

/* ---- Page transition overlay ----------------------------------------- */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  background: var(--c-ink);
  pointer-events: none;
  transform: translateY(100%);
  visibility: hidden;
}
.page-veil.is-leaving {
  visibility: visible;
  transform: translateY(0);
  transition: transform 520ms var(--ease-in-out);
}

/* ---- Custom cursor (fine pointers only, toggled by JS) --------------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--c-accent);
  pointer-events: none;
  opacity: 0;
  transition: width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out),
    margin var(--dur-base) var(--ease-out), opacity var(--dur-base), background-color var(--dur-base);
  mix-blend-mode: normal;
}
.cursor.is-visible { opacity: 1; }
.cursor.is-hover {
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  background: rgba(205, 177, 117, 0.16);
  border: 1px solid rgba(205, 177, 117, 0.6);
}
.cursor__label {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-accent-strong);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.cursor.is-hover .cursor__label { opacity: 1; }

/* ---- Icon base -------------------------------------------------------- */
.icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Mobile menu CTA: dark text on the light button (was white on white) */
.mobile-menu .btn--light { color: var(--c-ink, #0b191b); }