/*!
 * Torres — shared design system
 * edilandertorres.com · loaded once in <head> by TMCE_Public::enqueue_shared_assets()
 *
 * One token vocabulary, one scale, one set of primitives. Everything here was
 * previously duplicated inside all 14 Elementor HTML widgets, three times per
 * rendered page, under three different names for identical values.
 *
 * Scales are golden-ratio derived (phi = 1.618) from a 16px base so the vertical
 * rhythm and the type ramp share one proportion.
 */

/* ============================================================ TOKENS */

:root {
  /* Surface */
  --bg: #0c0e12;
  --srf: #15171c;
  --srf2: #1a1d23;
  --srf3: #202329;

  /* Ink — every value below is used for text and clears 4.5:1 on --bg.
     The old --p40 (3.4:1) is gone; --line is the only sub-contrast value
     and it is never used for type. */
  --p: #f2efe9;
  --p72: rgba(242, 239, 233, 0.72);
  --p58: rgba(242, 239, 233, 0.58);
  --line: rgba(242, 239, 233, 0.13);
  --line2: rgba(242, 239, 233, 0.07);

  /* Accent */
  --cop: #d97e4e;
  --copl: #e69060;
  --copd: #c05b2c;
  --cops: rgba(217, 126, 78, 0.12);
  --copm: rgba(217, 126, 78, 0.3);
  --ok: #5dbe85;

  /* Type */
  --fd: "Sora", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fb: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fm: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — capped deliberately. Large display type wastes the fold on
     mobile and forces the line breaks we are trying to avoid. */
  --fs-mi: 0.6875rem; /* 11px — mono labels only, wide tracking */
  --fs-xs: 0.75rem; /* 12px — smallest real text */
  --fs-sm: 0.875rem; /* 14px */
  --fs-bd: 1rem; /* 16px */
  --fs-md: clamp(1.0625rem, 0.99rem + 0.36vw, 1.1875rem); /* 17 → 19 */
  --fs-lg: clamp(1.25rem, 1.09rem + 0.75vw, 1.5rem); /* 20 → 24  h3 */
  --fs-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); /* 24 → 32  h2 */
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.75vw, 2.625rem); /* 28 → 42  h1 */

  /* Space — 6 · 10 · 16 · 26 · 42 · 68 · 110 */
  --s1: 0.375rem;
  --s2: 0.625rem;
  --s3: 1rem;
  --s4: 1.625rem;
  --s5: 2.625rem;
  --s6: 4.25rem;
  --s7: 6.875rem;

  /* Section rhythm */
  --sec: clamp(3.25rem, 2.2rem + 4.6vw, 6.875rem);
  --wrap: 1200px;
  --gut: clamp(1.25rem, 3.4vw, 2.75rem);

  /* Golden split */
  --gr-a: 61.8fr;
  --gr-b: 38.2fr;

  /* Chrome — the single source of truth for the fixed header offset.
     Previously the height lived in three places that had to be kept in sync
     by hand, and the admin-bar case moved the header without moving the
     content, hiding 32px of every page from logged-in users. */
  --et-h: 60px;
  --et-top: 0px;
  --r1: 8px;
  --r2: 14px;
  --r3: 20px;
  --ez: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t1: 0.18s;
  --t2: 0.34s;
  --t3: 0.6s;
}

@media (min-width: 760px) {
  :root {
    --et-h: 72px;
  }
}

/* No body padding to clear the fixed header.
   Elementor writes a per-page rule — body.elementor-page-11 { padding: 0 } —
   which outranks a bare `body` selector, so any page with a page-level padding
   setting had its hero sliding under the header. The header template renders a
   .et-hd__spacer in normal flow instead; nothing page-level can override a
   height on an element of ours. */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--et-h) + var(--et-top) + 20px);
}

body.admin-bar {
  --et-top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --et-top: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================ ROOT */

.et,
.et *,
.et *::before,
.et *::after {
  box-sizing: border-box;
}

.et {
  position: relative;
  background: var(--bg);
  color: var(--p);
  font-family: var(--fb);
  font-size: var(--fs-bd);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The hidden attribute must beat any component that sets display on a class —
   otherwise a collapsed panel keeps its box, stays in the tab order and stays
   readable to a screen reader while looking closed. */
.et [hidden],
.et[hidden] {
  display: none !important;
}

.et :focus-visible {
  outline: 2px solid var(--cop);
  outline-offset: 3px;
  border-radius: 4px;
}

.et img,
.et svg,
.et canvas {
  max-width: 100%;
}

.et img {
  height: auto;
}

.et-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.et-sec {
  padding-block: var(--sec);
  position: relative;
}

.et-sec--tight {
  padding-block: calc(var(--sec) * 0.62);
}

/* Alternating golden split. The direction flips per section so no side of the
   page accumulates weight. */
.et-gr {
  display: grid;
  gap: var(--s5);
  align-items: start;
}

.et-gr > * {
  min-width: 0;
}

@media (min-width: 1000px) {
  .et-gr {
    grid-template-columns: var(--gr-a) var(--gr-b);
    gap: var(--s6);
  }
  .et-gr--flip {
    grid-template-columns: var(--gr-b) var(--gr-a);
  }
  .et-gr--mid {
    align-items: center;
  }
}

/* ============================================================ TYPE */

/* Element reset at ZERO specificity.
   A plain `.et ol` selector is (0,1,1) and was quietly beating component
   classes like .et-crumb (0,1,0), so the breadcrumb lost its bottom margin and
   sat flush against the content below it. :where() contributes no specificity,
   so any component class wins without needing to escalate. */
:where(.et h1, .et h2, .et h3, .et h4, .et p, .et figure, .et blockquote) {
  margin: 0;
}

:where(.et ul, .et ol) {
  margin: 0;
  padding: 0;
}

.et-h1,
.et-h2,
.et-h3 {
  font-family: var(--fd);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
}

.et-h1 {
  font-size: var(--fs-2xl);
  max-width: 17ch;
}

.et-h2 {
  font-size: var(--fs-xl);
  line-height: 1.14;
  max-width: 20ch;
}

.et-h3 {
  font-size: var(--fs-lg);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -0.014em;
}

.et-h1 em,
.et-h2 em {
  font-style: normal;
  color: var(--cop);
}

.et-lead {
  font-size: var(--fs-md);
  color: var(--p72);
  line-height: 1.62;
  max-width: 58ch;
  text-wrap: pretty;
}

.et-p {
  color: var(--p72);
  max-width: 66ch;
  text-wrap: pretty;
}

.et-p + .et-p {
  margin-top: var(--s3);
}

/* Mono overline. Tracking is the whole point of the style, so the text must be
   allowed to wrap — the old markup welded these with &nbsp; and they overflowed
   at 340px, silently clipped by overflow-x. */
.et-ov {
  font-family: var(--fm);
  font-size: var(--fs-mi);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cop);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.et-ov--mute {
  color: var(--p58);
}

.et-lab {
  font-family: var(--fm);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p58);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.et-num {
  font-family: var(--fd);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.et-hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin-block: var(--s5);
}

/* Breadcrumb. Shared by every page that has one; the type stays small but the
   tap target does not. */
.et-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
  font-family: var(--fm);
  font-size: var(--fs-mi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p58);
}

.et-crumb a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  color: inherit;
  text-decoration: none;
  transition: color var(--t1) var(--ez);
}

.et-crumb a:hover {
  color: var(--cop);
}

.et-crumb [aria-current] {
  color: var(--p72);
}

/* ============================================================ LINKS + BUTTONS */

.et a {
  color: inherit;
}

.et-link {
  color: var(--cop);
  text-decoration: none;
  border-bottom: 1px solid var(--copm);
  padding-bottom: 1px;
  transition: border-color var(--t1) var(--ez), color var(--t1) var(--ez);
}

.et-link:hover {
  color: var(--copl);
  border-bottom-color: var(--copl);
}

.et-btn {
  --btn-bg: transparent;
  --btn-fg: var(--p);
  --btn-bd: var(--line);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 46px;
  padding: 0 var(--s4);
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--fm);
  font-size: var(--fs-xs);
  font-weight: 500;
  /* line-height 1 so the line box hugs the glyphs. Inheriting 1.6 leaves
     descender space inside the box, which centres the box but not the text. */
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t1) var(--ez), background var(--t1) var(--ez),
    border-color var(--t1) var(--ez), color var(--t1) var(--ez);
}

.et-btn:hover {
  --btn-bd: var(--copm);
  color: var(--copl);
}

.et-btn:active {
  transform: translateY(1px);
}

.et-btn[disabled],
.et-btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.et-btn--p {
  --btn-bg: var(--cop);
  --btn-fg: #16100b;
  --btn-bd: var(--cop);
  font-weight: 600;
}

.et-btn--p:hover {
  --btn-bg: var(--copl);
  --btn-bd: var(--copl);
  color: #16100b;
}

.et-btn--s {
  --btn-bg: var(--srf2);
  --btn-bd: var(--line);
}

.et-btn--sm {
  min-height: 38px;
  padding: 0 var(--s3);
  font-size: var(--fs-mi);
}

.et-btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.et-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

@media (max-width: 419px) {
  .et-btns .et-btn {
    flex: 1 1 100%;
  }
}

/* ============================================================ SURFACES */

.et-card {
  position: relative;
  background: linear-gradient(180deg, var(--srf) 0%, var(--srf2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s4);
  transition: border-color var(--t2) var(--ez), transform var(--t2) var(--ez);
}

@media (min-width: 760px) {
  .et-card {
    padding: var(--s5);
  }
}

.et-card--hov:hover {
  border-color: var(--copm);
  transform: translateY(-3px);
}

.et-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  list-style: none;
  padding: 0;
}

.et-tag {
  font-family: var(--fm);
  font-size: var(--fs-mi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p72);
  background: var(--srf3);
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 5px 11px;
  line-height: 1.3;
}

.et-mets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: var(--s1);
  list-style: none;
  padding: 0;
}

.et-met {
  background: var(--srf3);
  border: 1px solid var(--line2);
  border-radius: var(--r1);
  padding: var(--s2) var(--s3);
  min-width: 0;
}

.et-met b {
  display: block;
  font-family: var(--fd);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.et-met span {
  display: block;
  margin-top: 3px;
  font-family: var(--fm);
  font-size: var(--fs-mi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p58);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Scroll-boxed wide content. Wide tables and rails never push the page. */
.et-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.et-scroll::-webkit-scrollbar {
  height: 6px;
}

.et-scroll::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}

/* Icon chip. Lives here, not in service.css, because the homepage uses it too —
   and an inline <svg> with no width in an unstyled chip renders at the SVG
   default of 300x150, which is what blew the homepage service grid apart. */
.et-ico {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--copm);
  border-radius: 10px;
  color: var(--cop);
  background: var(--cops);
  flex: none;
}

.et-ico svg {
  width: 17px;
  height: 17px;
}

/* Safety net: any inline SVG that forgot its dimensions inherits the text size
   instead of falling back to 300x150. */
.et svg:not([width]):not([height]) {
  width: 1em;
  height: 1em;
}

/* ============================================================ ANIMATED FIELD */

.et-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.et-field canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.et-field__glow {
  position: absolute;
  top: 0;
  left: 0;
  width: min(66vmin, 460px);
  aspect-ratio: 1;
  margin: -33vmin 0 0 -33vmin;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cops) 0%, transparent 68%);
  opacity: 0;
  transition: opacity var(--t3) var(--ez);
}

.et-field--on .et-field__glow {
  opacity: 1;
}

.et-field__grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: linear-gradient(var(--line2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line2) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
}

.et-rel {
  position: relative;
  z-index: 1;
}

/* ============================================================ REVEAL / MOTION */

/* Gated on a class the runtime adds, so nothing is hidden without JS. */
.et-js [data-rev] {
  opacity: 0;
  transform: translateY(16px);
}

.et-js [data-rev].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ez) var(--d, 0s), transform 0.7s var(--ez) var(--d, 0s);
}

.et-js [data-rev="fade"] {
  transform: none;
}

/* Parallax targets are driven by the runtime writing --py. */
.et-para {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0);
}

@media (prefers-reduced-motion: reduce) {
  .et *,
  .et *::before,
  .et *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .et-js [data-rev] {
    opacity: 1;
    transform: none;
  }
  .et-para {
    transform: none !important;
  }
  .et-field canvas {
    display: none;
  }
}

/* ============================================================ ACCORDION */

.et-acc {
  border-top: 1px solid var(--line);
}

.et-acc__item {
  border-bottom: 1px solid var(--line);
}

.et-acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) 0;
  background: none;
  border: 0;
  color: var(--p);
  font-family: var(--fb);
  font-size: var(--fs-bd);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color var(--t1) var(--ez);
}

.et-acc__btn:hover {
  color: var(--cop);
}

.et-acc__ico {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform var(--t2) var(--ez), border-color var(--t2) var(--ez);
}

.et-acc__btn[aria-expanded="true"] .et-acc__ico {
  transform: rotate(45deg);
  border-color: var(--cop);
  color: var(--cop);
}

/* The panel is removed from the a11y tree and the tab order when closed —
   the previous 0fr/overflow:hidden collapse hid it visually only, so screen
   readers read every answer as continuous prose. */
.et-acc__panel[hidden] {
  display: none;
}

.et-acc__panel > div {
  padding-bottom: var(--s4);
  color: var(--p72);
  max-width: 68ch;
}

/* ============================================================ FORM */

.et-form {
  display: grid;
  gap: var(--s3);
  min-width: 0;
}

.et-form > * {
  min-width: 0;
}

@media (min-width: 640px) {
  .et-form--2 {
    grid-template-columns: 1fr 1fr;
  }
  .et-form--2 .et-f--wide {
    grid-column: 1 / -1;
  }
}

.et-f {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.et-f > label {
  font-family: var(--fm);
  font-size: var(--fs-mi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p58);
}

.et-f input,
.et-f select,
.et-f textarea {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 12px 14px;
  background: var(--srf);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  color: var(--p);
  font-family: var(--fb);
  font-size: var(--fs-bd);
  line-height: 1.45;
  transition: border-color var(--t1) var(--ez), background var(--t1) var(--ez);
}

.et-f textarea {
  min-height: 132px;
  resize: vertical;
}

.et-f select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--p58) 50%),
    linear-gradient(135deg, var(--p58) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.et-f input:focus,
.et-f select:focus,
.et-f textarea:focus {
  border-color: var(--cop);
  background: var(--srf2);
}

.et-f input::placeholder,
.et-f textarea::placeholder {
  color: rgba(242, 239, 233, 0.34);
}

.et-f__err {
  display: none;
  font-family: var(--fm);
  font-size: var(--fs-mi);
  letter-spacing: 0.06em;
  color: #f08a6a;
}

.et-f.is-bad input,
.et-f.is-bad select,
.et-f.is-bad textarea {
  border-color: #f08a6a;
}

.et-f.is-bad .et-f__err {
  display: block;
}

.et-fs {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.et-fs > legend {
  font-family: var(--fm);
  font-size: var(--fs-mi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p58);
  padding: 0;
  margin-bottom: var(--s2);
}

.et-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.et-chip {
  position: relative;
}

.et-chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.et-chip span {
  display: block;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--fm);
  font-size: var(--fs-mi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p72);
  transition: all var(--t1) var(--ez);
}

.et-chip input:checked + span {
  border-color: var(--cop);
  background: var(--cops);
  color: var(--copl);
}

.et-chip input:focus-visible + span {
  outline: 2px solid var(--cop);
  outline-offset: 3px;
}

.et-consent {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  min-height: 30px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--p72);
}

.et-consent input {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  accent-color: var(--cop);
}

/* The consent checkbox needs its own invalid state — it is not inside .et-f. */
.et-consent-wrap.is-bad .et-consent {
  color: #f08a6a;
}

.et-consent-wrap.is-bad input {
  outline: 2px solid #f08a6a;
  outline-offset: 2px;
}

.et-trap {
  position: absolute !important;
  left: -5000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================ TOAST */

.et-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 14px);
  z-index: 9999;
  max-width: min(92vw, 420px);
  padding: 12px 18px;
  background: var(--srf2);
  border: 1px solid var(--copm);
  border-radius: 999px;
  color: var(--p);
  font-family: var(--fm);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t2) var(--ez), transform var(--t2) var(--ez);
}

.et-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================ MISC */

.et-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.et-ruler {
  position: relative;
  display: flex;
  gap: 3px;
  height: 3px;
}

.et-ruler i {
  flex: 1;
  background: var(--line);
  border-radius: 2px;
  transition: background var(--t1) linear;
}

.et-ruler i.on {
  background: var(--cop);
}

.et-shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--srf3);
  border-radius: var(--r2);
}

.et-shot--tall {
  aspect-ratio: 4 / 5;
}