/* ===== Tokens ===== */
:root {
  --ink: #262E38;
  --ink-soft: #3A4552;
  --accent: #F2A72C;
  --accent-dark: #D98E17;
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --border: #E4E7EC;
  --muted: #6B7280;
  --success: #1B8A5A;
  --error: #C0392B;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 2px 16px rgba(38, 46, 56, .07);
  --shadow-lg: 0 8px 32px rgba(38, 46, 56, .12);

  --space-xs: .5rem;
  --space-s: 1rem;
  --space-m: 2rem;
  --space-l: 4rem;
  --space-xl: 6rem;

  --maxw: 1180px;
  --header-h: 76px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
          Helvetica, Arial, sans-serif;
}

/* ===== Base ===== */
body {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--ink-soft);
  background: var(--bg);
  overflow-x: hidden;
}

h1, h2, h3 {
  color: var(--ink);
  text-transform: uppercase;
  line-height: 1.1;
  font-weight: 800;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.02em; line-height: 1.05; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: -.01em; }
h3 { font-size: 1.15rem; letter-spacing: .02em; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== Utilities ===== */
.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-s);
}

.section { padding-block: var(--space-xl); }

.section__head {
  text-align: center;
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--space-l);
}

.section__head p {
  margin-top: var(--space-s);
  color: var(--muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(242, 167, 44, .35);
}

.btn--primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
}

.btn--ghost {
  border: 2px solid var(--border);
  color: var(--ink);
  background: var(--surface);
}

.btn--ghost:hover { border-color: var(--ink); }

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -100px;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-sm);
  transition: top .18s ease;
}

.skip-link:focus { top: var(--space-s); }

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

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.header.is-scrolled {
  box-shadow: var(--shadow);
  border-bottom-color: var(--border);
}

.header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

/* The logo asset is a square lockup — its stacked wordmark turns to mush below about
   90px tall. The header shows the circular mark only, with the name set as real text
   beside it: legible at any size, and the company name lands in the DOM as text. */
.header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.header__logo img { width: 44px; height: 44px; }
.header__logo:hover { text-decoration: none; }

.header__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: -.01em;
  font-size: 1.05rem;
}

.header__wordmark span {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--muted);
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
}

.nav__link {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.nav__link:hover { color: var(--ink); text-decoration: none; }

.nav__link.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.header__phone {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.header__burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.header__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}

.header__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===== Header: mobile ===== */
@media (max-width: 900px) {
  .header__burger { display: flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-s);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: none;
  }

  .nav.is-open { display: flex; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    display: block;
    padding: .9rem .5rem;
    border-bottom: 1px solid var(--border);
  }

  .nav__link.is-active {
    border-bottom-color: var(--border);
    color: var(--accent-dark);
  }

  .nav__cta {
    margin-top: var(--space-s);
    width: 100%;
  }

  .header__phone { margin-left: auto; margin-right: var(--space-s); }
}

/* At 320px the mark, the wordmark, the phone number and the burger together overflow the
   viewport. The phone number is the primary mobile call to action and the burger is the only
   way to navigate, so the wordmark is what gives way — the mark still carries the brand. */
@media (max-width: 380px) {
  .header__wordmark { display: none; }
  .header__inner { gap: var(--space-s); }
  .header__phone { font-size: .9rem; margin-right: var(--space-xs); }
}

/* ===== Hero ===== */
.hero { padding-block: var(--space-m) var(--space-l); }

.hero__card {
  display: grid;
  grid-template-columns: 48fr 52fr;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero__copy {
  padding: clamp(var(--space-m), 4vw, var(--space-l));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The global h1 clamp tops out at 3.4rem, which is sized for full-width headings.
   In the hero's half-width column that wraps to four lines; the mockup shows two. */
.hero__copy h1 { font-size: clamp(1.8rem, 2.9vw, 2.25rem); }

.hero__lead {
  margin-top: var(--space-s);
  max-width: 46ch;
  color: var(--muted);
}

.hero__actions {
  margin-top: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.hero__media { position: relative; min-height: 380px; }

.hero__img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  background:
    linear-gradient(135deg, #C9CFD6 0%, #E7EAEE 45%, #F3D9A8 100%);
}

.hero__badge {
  position: absolute;
  left: var(--space-s);
  bottom: var(--space-s);
  padding: .4rem .9rem;
  border-radius: 999px;
  background: rgba(38, 46, 56, .72);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

@media (max-width: 900px) {
  .hero__card { grid-template-columns: 1fr; }
  .hero__media { order: -1; min-height: 0; }
  .hero__img { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ===== Cards (services) ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-m);
  margin: 0;
}

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-m);
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-s);
  color: var(--accent);
}

.card h3 { margin-bottom: .6rem; }

.card p {
  font-size: .95rem;
  color: var(--muted);
}

/* ===== Why us ===== */
.section--tint { background: var(--surface); }

.why {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m);
  margin: 0;
}

.why__item { text-align: center; }

.why__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-xs);
  color: var(--accent);
}

.why__item h3 { font-size: 1rem; margin-bottom: .4rem; }

.why__item p { font-size: .9rem; color: var(--muted); }

@media (max-width: 900px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why { grid-template-columns: 1fr; } }

/* ===== About ===== */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-l);
  align-items: center;
}

.about__motto {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-block: var(--space-s);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}

.about__motto span { display: flex; align-items: center; gap: 1.25rem; }

.about__motto span:not(:last-child)::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.about__copy p + p { margin-top: var(--space-s); }
.about__copy .btn { margin-top: var(--space-m); }

.about__img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, #DDE2E8 0%, #C4CBD3 55%, #F0CE96 100%);
}

@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; gap: var(--space-m); }
  .about__img { order: -1; }
}

/* ===== Testimonials ===== */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-m);
  margin: 0;
}

.quote {
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: var(--space-m);
  position: relative;
}

.quote::before {
  content: "\201C";
  position: absolute;
  top: .25rem;
  left: 1rem;
  font-size: 4rem;
  line-height: 1;
  color: var(--accent);
  opacity: .5;
}

.quote__text {
  position: relative;
  font-size: .98rem;
  margin-bottom: var(--space-s);
}

.quote__by { font-weight: 700; color: var(--ink); font-size: .9rem; }
.quote__by span { font-weight: 500; color: var(--muted); }
.quote__by span::before { content: "· "; }

/* ===== Contact ===== */
.contact {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--space-l);
  align-items: start;
}

.contact__formwrap {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-m);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s);
}

.field { margin-bottom: var(--space-s); }

.field label {
  display: block;
  margin-bottom: .35rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}

.field label span { color: var(--accent-dark); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field textarea { resize: vertical; min-height: 120px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(242, 167, 44, .2);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--error); }

.field__error {
  display: block;
  margin-top: .3rem;
  font-size: .82rem;
  color: var(--error);
}

.form__submit { width: 100%; margin-top: var(--space-xs); }
.form__submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.form__note {
  margin-top: .6rem;
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
}

/* Honeypot: off-screen rather than display:none, which some bots skip */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.panel {
  display: flex;
  gap: var(--space-s);
  align-items: flex-start;
  padding: var(--space-m);
  border-radius: var(--radius-sm);
}

.panel svg { width: 28px; height: 28px; flex-shrink: 0; }
.panel h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.panel--success { background: #E9F5EF; color: var(--success); }
.panel--error { background: #FBECEA; color: var(--error); }
.panel p { color: var(--ink-soft); }
.panel--error a { font-weight: 700; text-decoration: underline; }

.contact__info h3 { margin-bottom: var(--space-s); }

.info li {
  display: flex;
  flex-direction: column;
  padding-block: .7rem;
  border-bottom: 1px solid var(--border);
}

.info li span {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .15rem;
}

.info li a { font-weight: 700; color: var(--ink); }

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; gap: var(--space-m); }
}

@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ===== Footer ===== */
.footer {
  background: var(--ink);
  color: #C7CDD4;
  padding-top: var(--space-l);
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-m);
  padding-bottom: var(--space-l);
}

.footer h3 {
  color: #fff;
  font-size: .85rem;
  letter-spacing: .1em;
  margin-bottom: var(--space-s);
}

/* Same reasoning as the header: the square lockup is unreadable at this size, so the
   mark carries the image and the name is real text. */
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: var(--space-s);
}

.footer__logo:hover { text-decoration: none; }
.footer__logo img { width: 52px; height: 52px; }

.footer__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  font-size: 1.15rem;
}

.footer__wordmark span {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .28em;
  color: #A8B0B9;
}

.footer__addr { font-size: .9rem; line-height: 1.9; }
.footer a:hover { color: var(--accent); }

/* Inline footer links are only as tall as their text — 17px, under the 24px WCAG 2.2
   minimum target size. Padding gives them a usable tap area without moving anything. */
.footer__addr a,
.footer__nav ul a {
  display: inline-block;
  padding-block: .3rem;
}

/* The reset only strips markers from `ul[class]`; these lists are unclassed. Note that
   `display: flex` does not hide them either — `list-item` survives blockification. */
.footer__nav ul,
.footer__social ul { list-style: none; padding: 0; margin: 0; }

.footer__nav ul { display: flex; flex-direction: column; gap: .45rem; font-size: .92rem; }

.footer__social ul { display: flex; gap: .75rem; }

.footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  transition: background-color .15s ease, color .15s ease;
}

.footer__social a:hover { background: var(--accent); color: var(--ink); }
.footer__social svg { width: 20px; height: 20px; }

.footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: var(--space-s);
  font-size: .85rem;
}

@media (max-width: 900px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer__inner { grid-template-columns: 1fr; }
}

/* ===== Reveal on scroll ===== */
/* Gated behind `.js` (set by the inline script in <head>). Without it, a crawler or a
   browser with JS disabled would see opacity:0 content that nothing ever reveals. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ===== FAQ ===== */
.faq {
  max-width: 780px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq__item summary {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  cursor: pointer;
  list-style: none;
}

/* Hide the native disclosure triangle in both engines */
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }

.faq__item summary h3 {
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  flex: 1;
}

.faq__item summary::after {
  content: "";
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}

.faq__item[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq__item summary:hover { background: var(--bg); }

.faq__answer {
  padding: 0 var(--space-m) var(--space-m);
  color: var(--muted);
}