/* Fonts are loaded via <link> in index.html, not @import.
   An @import is only discovered AFTER style.css downloads and parses, so it
   serialises two round-trips before any text can render — worst on mobile. */

:root {
  /* Color Palette */
  --color-bg-primary: #163529; /* Dark Forest Green */
  --color-bg-secondary: #E4DAC0; /* Sand (alternate sections) — darker than the
                                    old #EFE7D3, which read as washed-out.
                                    This is the darkest step that keeps body
                                    text at AA (5.38:1). */
  --color-bg-header: rgba(22, 53, 41, 0.86); /* Semi-transparent header */
  
  --color-text-primary: #EFE7D3; /* Cream */
  --color-text-muted: rgba(239, 231, 211, 0.74); /* Faded Cream */
  --color-text-dark: #21332F; /* Dark Green for light backgrounds */
  
  --color-accent-gold: #C99B47;
  --color-accent-gold-hover: #F5E7BE;
  --color-action: #0FA45D; /* Vibrant Green */
  --color-action-hover: #EFE7D3;
  --color-action-text: #08251A;

  /* Typography */
  --font-sans: "Instrument Sans", "Helvetica Neue", Helvetica, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --font-mono: "IBM Plex Mono", monospace;
}

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-accent-gold);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-accent-gold-hover);
}

:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 3px;
}

::selection {
  background: var(--color-action);
  color: var(--color-bg-primary);
}

/* Utilities */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: none;
}

.btn-primary {
  background-color: var(--color-action);
  color: var(--color-action-text);
}

.btn-primary:hover {
  background-color: var(--color-action-hover);
  color: var(--color-bg-primary);
}

/* Layout - Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-bg-header);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(239, 231, 211, 0.10);
  padding: 14px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  /* Guard, not a layout choice. .btn is white-space:nowrap and flex children
     don't shrink below min-content, so on a phone this row was overflowing by
     53-163px and clipping "Request a demo" off the right edge. Wrapping is a
     no-op whenever the row fits and drops to two lines when it can't — the
     header can never silently clip the primary CTA again. */
  flex-wrap: wrap;
  row-gap: 10px;
}

.brand-link,
.header-actions {
  min-width: 0;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-primary);
}

.brand-link:hover {
  color: var(--color-text-primary);
}

.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: block;
}

.brand-name {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.16em;
  font-size: 13px;
  text-transform: uppercase;
}

.desktop-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}

.desktop-nav a {
  color: var(--color-text-muted);
}

.desktop-nav a:hover {
  color: var(--color-text-primary);
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-selector {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(239, 231, 211, 0.16);
  border-radius: 999px;
}

.lang-btn {
  background: transparent;
  color: var(--color-text-muted);
  border: 0;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  transition: all 0.2s ease;
}

.lang-btn.active, .lang-btn:hover {
  background: var(--color-action);
  color: var(--color-action-text);
}

/* Components */
.btn-outline {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid rgba(239, 231, 211, 0.26);
}

.btn-outline:hover {
  border-color: var(--color-accent-gold);
  color: var(--color-accent-gold-hover);
}

/* Animations */
@keyframes lampBreathe {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Layout - Hero */
.hero-section {
  position: relative;
  /* Bottom padding is deliberately smaller than the top: it meets the next
     section's padding and a border-top rule, and all three were stacking into
     a ~176px band of empty colour below the CTAs. */
  padding: clamp(56px, 9vw, 96px) 0 clamp(40px, 6vw, 64px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-primary);
}

/* The hero photograph is OPT-IN, not opt-out.
   Background1.jpg is a wide crop anchored right-center under a left-to-right
   scrim: it only reads correctly when there is both width for the two-column
   layout AND height for the crop. Gating it on max-width alone was wrong —
   a phone in landscape is 844-932px wide and was getting the desktop
   treatment. Requiring both dimensions means new devices fall on the safe
   side by default instead of needing a new breakpoint each time. */
@media (min-width: 769px) and (min-height: 561px) {
  .hero-section {
    background-image:
      linear-gradient(to bottom, rgba(22, 53, 41, 0) 75%, rgba(22, 53, 41, 1) 100%),
      linear-gradient(to right, rgba(22, 53, 41, 1) 0%, rgba(22, 53, 41, 0.85) 45%, rgba(22, 53, 41, 0) 80%),
      url('Background1.jpg');
    background-size: cover;
    background-position: right center;
  }
}

.hero-glow-bg {
  position: absolute;
  top: -180px;
  left: 50%;
  width: 1100px;
  height: 900px;
  transform: translateX(-50%);
  pointer-events: none;
  /* 0.20, not 0.30. At 0.30 this glow washed the hero backdrop up to where
     the sub-headline measured 3.37:1 — under AA. The text sits on the left,
     under the near-opaque scrim, so flat forest is the honest worst case. */
  background: radial-gradient(46% 40% at 50% 30%, rgba(245, 231, 190, 0.20) 0%, rgba(15, 164, 93, 0.11) 34%, rgba(22, 53, 41, 0) 68%);
  animation: lampBreathe 9s ease-in-out infinite;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}

.hero-content {
  max-width: 660px;
}

.hero-eyebrow {
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Not --color-accent-gold (#C99B47). The eyebrow sits directly in the lamp
     glow's brightest zone, where that gold measures 2.27:1 on desktop and
     3.38:1 on mobile — both under AA for 11.5px text. This pale gold is the
     existing --color-accent-gold-hover token and clears AA everywhere. */
  color: var(--color-accent-gold-hover);
}

.hero-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(33px, 6.2vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  text-wrap: balance;
}

.hero-sub {
  margin: 26px 0 0;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.62;
  /* Not --color-text-muted (.74): that is calibrated for flat forest, and the
     hero is the one surface with a lightened backdrop under it. */
  color: rgba(239, 231, 211, 0.86);
  max-width: 52ch;
  text-wrap: pretty;
}

.hero-callout {
  margin: 34px 0 0;
  padding: 20px 24px;
  border-left: 2px solid var(--color-action);
  background: linear-gradient(90deg, rgba(15, 164, 93, 0.10), rgba(22, 53, 41, 0));
  max-width: 50ch;
}

.hero-callout-text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.4vw, 23px);
  line-height: 1.4;
  color: #F5E7BE;
  text-wrap: pretty;
}

.hero-actions {
  margin: 38px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-tagline {
  margin: 44px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.5;
  color: rgba(245, 231, 190, 0.86);
  max-width: 34ch;
}

.hero-visual {
  display: flex;
  justify-content: center;
  position: relative;
}

.hero-logo-wrapper {
  position: relative;
  width: min(420px, 82vw);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo-glow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, rgba(245, 231, 190, 0.34), rgba(15, 164, 93, 0.10) 52%, rgba(22, 53, 41, 0) 74%);
  filter: blur(6px);
}

.hero-logo-wrapper img {
  position: relative;
  width: 100%;
  border-radius: 50%;
  display: block;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7);
}

/* Layout - Sections */
.section-light {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-dark);
}

.section-padding {
  padding: clamp(56px, 9vw, 96px) 0;
}

/* A hairline rule belongs to the section it introduces, so the space below it
   should be comparable to the space above — roughly 1.2-1.6:1. It was running
   at 5.6:1 (192px above, 34px below at #why), which read as the rule drifting
   away from the content above and crowding the heading below. */
.section-border-top {
  border-top: 1px solid rgba(239, 231, 211, 0.12);
  padding-top: clamp(34px, 5vw, 52px);
}

/* The other half of that ratio. A section opening with a rule does not also
   need its own top padding: the rule and the space beneath it ARE the
   separation, and the previous section's bottom padding already supplies the
   space above. Left stacked, the two produced the 192px band.

   Written as :has() rather than a modifier class so any future section that
   opens with a rule inherits the correct rhythm automatically. Browsers
   without :has() simply keep the old, roomier spacing. */
section:has(> .container.section-border-top) {
  padding-top: 0;
}

.section-light .section-border-top {
  border-top-color: rgba(33, 51, 47, 0.16);
}

.split-grid {
  display: grid;
  gap: 34px;
}

@media (min-width: 769px) {
  .split-grid {
    grid-template-columns: 1fr 3fr;
  }
}

/* Eyebrow -> title spacing is set in ONE place. It used to come from this
   margin in three sections and from .split-grid's 34px gap in two others, so
   the identical relationship rendered at 16px or 34px depending purely on
   which layout the section happened to use. */
.section-eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201, 155, 71, 0.9);
}

.section-light .section-eyebrow {
  color: #665735; /* AA on --color-bg-secondary (5.06:1) */
}

.split-grid .section-eyebrow {
  margin: 0;
}

.section-title {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.section-title-large {
  font-size: clamp(28px, 4.2vw, 46px);
  max-width: 24ch;
  margin-bottom: 0;
}

.section-body {
  margin: 0;
  font-size: 17px;
  line-height: 1.68;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.section-light .section-body {
  color: rgba(33, 51, 47, 0.78);
}

.content-max-width {
  max-width: 62ch;
}

/* Hairline Grid Component */
.hairline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 1px;
  background: rgba(33, 51, 47, 0.14);
  margin-top: 54px;
}

.capability-card {
  background: var(--color-bg-secondary);
  padding: 30px 28px 34px;
}

.capability-accent {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-action);
  margin-bottom: 20px;
}

.capability-title {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.24;
}

.capability-body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(33, 51, 47, 0.78);
  text-wrap: pretty;
}

/* Section Utilities */
.section-padding-small {
  padding: clamp(26px, 4vw, 36px) 0;
}

.section-padding-bottom {
  padding-bottom: clamp(56px, 9vw, 96px);
}

/* Step Grid (How it works) */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 34px;
}

.step-card {
  padding-top: 10px;
}

.step-num {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-action);
}

.step-title {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.22;
  text-wrap: pretty;
}

.step-body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.64;
  color: rgba(33, 51, 47, 0.78);
  text-wrap: pretty;
}

/* Demo Section (Try it live) */
.demo-section {
  position: relative;
}

.demo-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(50% 46% at 62% 30%, rgba(15, 164, 93, 0.13), rgba(22, 53, 41, 0) 70%);
  z-index: 0;
}

.demo-grid {
  align-items: start;
}

.demo-sub {
  margin: 0 0 34px;
  max-width: 44ch;
}

.demo-callout {
  padding: 26px;
  border: 1px solid rgba(201, 155, 71, 0.34);
  border-radius: 4px;
  background: rgba(239, 231, 211, 0.04);
  max-width: 400px;
}

.demo-callout-title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  color: #F5E7BE;
}

.demo-callout-body {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(239, 231, 211, 0.7);
}

.demo-phone {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--color-accent-gold);
  border-bottom: 1px solid rgba(201, 155, 71, 0.4);
  padding-bottom: 2px;
}

.demo-phone:hover {
  color: #F5E7BE;
  border-color: #F5E7BE;
}

/* Chat widget styling lives in chat-core.js (injected, scoped), so the widget
   stays self-contained and portable. Its theme reads these :root tokens. */

/* Reason Grid (Why Boutique) */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px 34px;
}

.reason-title {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.26;
  color: #F5E7BE;
  text-wrap: pretty;
}

.reason-body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* Layout - Footer */
/* No top padding, for the same reason as the sections above: .footer-inner
   carries the rule, and #why's bottom padding already supplies the space
   above it. */
.site-footer {
  padding: 0 0 40px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px solid rgba(239, 231, 211, 0.12);
  /* Matches .section-border-top so the footer rule sits in the same rhythm
     as every other rule on the page. */
  padding-top: clamp(34px, 5vw, 52px);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-brand img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.footer-tagline {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(245, 231, 190, 0.8);
  max-width: 34ch;
  /* The break after "stays on" is authored into the string in i18n.js as a
     real newline, and pre-line is what honours it. A <br> cannot work here:
     i18n assigns textContent, which would render the tag as literal text. */
  white-space: pre-line;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.footer-contact .phone {
  font-family: var(--font-mono);
}

.footer-copyright {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(239, 231, 211, 0.45);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Hero: no photograph here (see the opt-in rule above). The lamp glow
     carries it instead — the light staying on is the brand's metaphor, and a
     flat colour field reads as unfinished on the device most visitors use.
     Retuned rather than scaled: the desktop glow is a fixed 1100x900 element
     sized for a wide viewport, which on a phone puts its brightest point in
     the wrong place entirely. */
  .hero-glow-bg {
    top: -12vh;
    width: 150vw;
    height: 64vh;
    /* Alpha is 0.16, not the desktop 0.30. On desktop the photo sits under
       the glow; here it is the only thing between text and flat forest, and
       0.30 dropped the sub-headline to 3.37:1 — under AA. Anchored at 26%
       so it falls off before it reaches the body copy. */
    background: radial-gradient(52% 42% at 50% 26%,
      rgba(245, 231, 190, 0.16) 0%,
      rgba(15, 164, 93, 0.09) 40%,
      rgba(22, 53, 41, 0) 74%);
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Stacked, .split-grid's gap IS the eyebrow -> title distance, so it has to
     match .section-eyebrow's margin or the same relationship reads at two
     different sizes down the page. */
  .split-grid {
    gap: 18px;
  }

  /* Except in #live, where the two children are the copy and the chat panel —
     not an eyebrow and a heading. That gap is doing a different job. */
  .demo-grid {
    gap: 38px;
  }

  /* The empty right-hand column has nothing to hold once the photo is gone. */
  .hero-visual-placeholder {
    display: none;
  }

  /* Scroll-only navigation below this width: a one-page site with four short
     sections, where scrolling IS the navigation. Deliberate, not an omission. */
  .desktop-nav {
    display: none;
  }

  .header-inner {
    justify-content: space-between;
  }

  .header-actions {
    margin-left: 0;
  }

  /* Touch targets apply from here, not just below 480px — small tablets and
     large phones in landscape are touch devices too. */
  .btn {
    min-height: 44px;
  }

  .lang-btn {
    min-height: 40px;
    padding: 0 12px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .footer-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-tagline {
    font-size: 16px;
  }

  /* Was centre-aligned inside a left-aligned stack — read as a misalignment. */
  .footer-contact {
    align-items: flex-start;
  }
}

/* Phones in landscape: wide but very short. Vertical rhythm tuned for a tall
   viewport wastes most of the screen on padding here. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero-section {
    padding: 40px 0 36px;
  }

  .hero-glow-bg {
    height: 90vh;
    top: -20vh;
  }

  .section-padding {
    padding: 44px 0;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 20px;
  }

  /* The selector used to be hidden here. Now that it actually switches copy,
     hiding it from phone visitors would be the wrong call — tighten instead.
     Buttons keep a 44px touch target; the header loses a little vertical
     padding to pay for it rather than growing the sticky bar. */
  .site-header {
    padding: 8px 0;
  }

  .header-actions {
    gap: 10px;
  }

  .lang-selector {
    gap: 0;
    padding: 2px;
  }

  /* The wordmark is the first thing to go: the bell-with-M logo sits right
     beside it and carries the brand on its own. Dropping ~130px of tracked
     uppercase is what lets the CTA keep its full label instead of being
     shortened to something vaguer. The <img alt> still names the brand. */
  .brand-name {
    display: none;
  }

  .header-inner {
    gap: 12px;
  }

  .header-actions {
    gap: 8px;
  }

  .lang-btn {
    padding: 0 9px;
    font-size: 11px;
  }

  .btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  /* Two full-width CTAs stacked beat two half-width ones side by side:
     bigger targets, and neither headline-wraps at 320px. */
  .hero-actions .btn {
    width: 100%;
  }

  .demo-callout,
  .hero-callout {
    padding: 18px 20px;
  }
}

/* Contact dialog */
.contact-dialog {
  width: min(760px, calc(100vw - 32px));
  padding: 34px;
  border: 1px solid rgba(201, 155, 71, 0.34);
  border-radius: 6px;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9);
}

.contact-dialog::backdrop {
  background: rgba(8, 37, 26, 0.72);
  backdrop-filter: blur(3px);
}

.contact-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: 0;
  color: var(--color-text-primary);
  opacity: 0.7;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.contact-close:hover {
  opacity: 1;
}

.contact-grid {
  display: grid;
  gap: 32px;
  margin-top: 26px;
}

@media (min-width: 769px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-done {
    grid-column: 1 / -1;
  }
}

.contact-lede {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.62;
  color: var(--color-text-muted);
  max-width: 34ch;
}

.contact-email {
  display: block;
  margin-top: 10px;
  font-size: 15px;
}

.contact-ask {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(239, 231, 211, 0.14);
}

.contact-ask-title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 19px;
  color: #F5E7BE;
}

.contact-ask-body {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 34ch;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-field > span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(239, 231, 211, 0.62);
}

.contact-field input,
.contact-field textarea {
  padding: 11px 13px;
  border-radius: 4px;
  border: 1px solid rgba(239, 231, 211, 0.20);
  background: rgba(239, 231, 211, 0.06);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  resize: vertical;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--color-action);
}

.contact-err,
.contact-formerr {
  font-style: normal;
  font-size: 13px;
  line-height: 1.5;
  color: #F0B4A0;
}

.contact-formerr {
  margin: 0;
}

.contact-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact-submit {
  align-self: flex-start;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .contact-dialog {
    padding: 26px 20px;
  }
}