/* =========================================================================
   FCR Engenharia Solutions — Production stylesheet
   Design tokens sourced 1:1 from the approved Claude Design export
   (fcr-engenharia-website-design/project/_ds/*/tokens/*.css). Do not
   introduce new colors/type sizes — this file only re-implements the
   approved visual system as static, production-ready CSS.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts — self-hosted WOFF2, no external font CDN.
   ------------------------------------------------------------------------- */

/* Archivo Expanded — H1 / hero titles (700). Reusing the Transfonter-generated
   @font-face as-is so the family name matches exactly. */
@font-face {
  font-family: "Archivo Expanded";
  src: url("../assets/fonts/ArchivoExpanded-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Archivo — H2 subtitles (600) and secondary titles (700). Distinct family
   from "Archivo Expanded" — never treat them as the same font. */
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-v25-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-v25-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Inter — body copy / captions (400) and uppercase section labels (500) */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-v20-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-v20-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Mono — numbers, norms, codes */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-v20-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-v20-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------------- */
:root{
  /* Brand anchors */
  --navy-900:#050d1f;
  --navy-800:#07132c;
  --white:#ffffff;

  /* Orange ramp */
  --orange-700:#a4641f;
  --orange-600:#bf7628;
  --orange-500:#d58835;
  --orange-400:#e29f5b;
  --orange-300:#eec08e;
  --orange-200:#f7dfc4;

  --accent:var(--orange-500);
  --accent-hover:var(--orange-600);
  --accent-press:var(--orange-700);
  --focus-ring:color-mix(in srgb, var(--orange-500) 55%, transparent);

  --success:#2f8f5b;
  --danger:#c0392b;

  --border-default:#c3c9d2;

  /* Fonts */
  --font-display:"Archivo Expanded",system-ui,sans-serif;
  --font-heading:"Archivo",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  /* Radius */
  --radius-md:8px;
  --radius-lg:12px;

  /* Shadow */
  --shadow-sm:0 1px 3px rgba(7,19,44,.08),0 1px 2px rgba(7,19,44,.04);
  --shadow-md:0 4px 12px rgba(7,19,44,.10);
  --shadow-accent:0 6px 20px rgba(213,136,53,.28);

  /* Motion */
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:360ms;

  --header-h:92px;

  /* Vertical rhythm — shared by all full-width content sections
     (Sobre/Serviços/Diferenciais/Contato) so the page keeps one
     consistent beat instead of per-section magic numbers. Hero is
     exempt: it has its own min-height/centering logic. */
  --section-padding-y:110px;
}

@media (max-width:760px){
  :root{--section-padding-y:80px}
}

/* -------------------------------------------------------------------------
   Reset / base
   ------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--navy-800);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--orange-400);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--orange-300)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
::selection{background:var(--orange-200);color:var(--navy-800)}

.container{width:min(1240px,100% - 64px);margin:0 auto}
@media (max-width:520px){
  .container{width:min(1240px,100% - 40px)}
}

.mono{font-family:var(--font-mono)}

/* Numeric "figure" runs (stats, counters) — family + weight + tabular
   figures declared together in ONE rule, on purpose: splitting these
   across two cascading rules (a shared .mono base + a more specific
   weight override) is what caused the "+20" glyph mismatch, since the
   family and weight could in principle resolve from two different
   rule origins. Every mono numeral in the UI should use this class
   instead of composing .mono with something else. */
.figure{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums}

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

.skip-link{
  position:absolute;top:-48px;left:16px;z-index:100;
  background:var(--accent);color:#fff;font-weight:600;font-size:14px;
  padding:12px 18px;border-radius:var(--radius-md);
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{top:16px;color:#fff}

/* -------------------------------------------------------------------------
   Section labels / eyebrows
   ------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-body);font-weight:500;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--orange-400);
  display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:36px;height:2px;background:var(--accent);display:inline-block}

.section-head{
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;
}
.section-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(36px,4.6vw,62px);line-height:1.02;letter-spacing:-0.03em;color:#fff;
}
.section-title .accent{color:var(--accent)}
.section-subtitle{
  margin-top:6px;
  font-size:18px;line-height:1.75;color:rgba(255,255,255,.74);
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:56px;padding:0 30px;border-radius:var(--radius-md);
  font-weight:600;font-size:16px;font-family:var(--font-body);
  cursor:pointer;border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             opacity var(--dur-fast) var(--ease-out);
}
.btn--primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-accent)}
.btn--primary:hover{background:var(--accent-hover);color:#fff;transform:translateY(-2px)}
.btn--outline{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.btn--outline:hover{border-color:var(--accent);background:rgba(255,255,255,.04);color:#fff}
.btn--sm{height:46px;padding:0 22px;font-size:15px}
.btn--full{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.65;cursor:not-allowed;transform:none}

/* -------------------------------------------------------------------------
   Header / Nav
   ------------------------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(7,19,44,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header__bar{
  width:min(1240px,100% - 64px);margin:0 auto;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center}
.brand img{height:63px;width:137px;display:block}

.nav-desk{display:flex;align-items:center;gap:36px}
.nav-desk a{color:rgba(255,255,255,.78);font-size:14px;font-weight:500;letter-spacing:.01em}
.nav-desk a:hover{color:#fff}
.nav-desk .btn{height:46px;padding:0 22px;font-size:15px}

.nav-burger{
  display:none;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:var(--radius-md);background:transparent;border:1px solid rgba(255,255,255,.22);
  color:#fff;cursor:pointer;
}
.nav-burger svg{width:22px;height:22px}
.nav-burger .icon-close{display:none}
.nav-burger[aria-expanded="true"] .icon-menu{display:none}
.nav-burger[aria-expanded="true"] .icon-close{display:block}

.nav-mobile{
  display:none;flex-direction:column;gap:2px;padding:8px 32px 28px;
  border-top:1px solid rgba(255,255,255,.08);
}
.nav-mobile.is-open{display:flex}
.nav-mobile a{
  color:#fff;font-size:17px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);
}
.nav-mobile .btn{margin-top:18px;height:50px;font-size:16px}

@media (max-width:960px){
  .nav-desk{display:none}
  .nav-burger{display:inline-flex}
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero{
  position:relative;min-height:clamp(600px,85vh,820px);display:flex;align-items:center;
  padding:120px 0 60px;scroll-margin-top:var(--header-h);overflow:hidden;
}
.hero__bg{
  position:absolute;inset:-12% 0;background-image:url("../assets/img/hero.jpg");
  background-size:cover;background-position:center right;will-change:transform;
}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,19,44,.97) 0%,rgba(7,19,44,.93) 34%,rgba(7,19,44,.66) 64%,rgba(7,19,44,.3) 100%);
}
.hero__inner{position:relative;width:min(1240px,100% - 64px);margin:0 auto}
.hero__content{max-width:min(100%,780px);display:flex;flex-direction:column;align-items:flex-start;gap:34px}

.hero__title{
  font-family:var(--font-display);font-weight:700;font-size:clamp(36px,5.55vw,73px);
  line-height:.98;letter-spacing:-0.03em;color:#fff;
}
.hero__title .accent{color:var(--accent)}
.hero__tagline{
  /* Weight stays 600 (SemiBold) — the self-hosted Archivo family only
     ships 600/700 as real WOFF2 files (no 400/500), so 600 is already
     the correct "medium-ish" fallback; using 500 would make the
     browser fake-synthesize a weight we don't have, which looks
     inconsistent with the rest of the type system. Font-size trimmed
     ~10% and margin-bottom added so this reads as its own tier
     between the H1 and the lead paragraph, not fused to either. */
  font-family:var(--font-heading);font-weight:600;font-size:clamp(16px,1.8vw,21px);
  line-height:1.3;color:#fff;margin-bottom:12px;
}
.hero__lead{
  font-size:clamp(16px,1.4vw,18px);line-height:1.7;color:rgba(255,255,255,.72);max-width:600px;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;padding-top:6px}

.hero__norms{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;width:100%;padding-top:34px;margin-top:10px;
  border-top:1px solid rgba(255,255,255,.14);
}
.hero__norms-item{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.64);white-space:nowrap;
}
.hero__norms-dot{width:4px;height:4px;border-radius:50%;background:var(--accent);flex:none}

/* -------------------------------------------------------------------------
   Sobre
   ------------------------------------------------------------------------- */
.about{
  background:var(--navy-800);padding-top:70px;padding-bottom:var(--section-padding-y);
  scroll-margin-top:var(--header-h);overflow:hidden;
}
.about__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap:80px;align-items:stretch;
}
.about__text{display:flex;flex-direction:column;align-items:flex-start;gap:30px;max-width:560px}
.about__text .section-title{margin:0}
.about__text p{font-size:18px;line-height:1.8;color:rgba(255,255,255,.74)}

/* .about__media has no in-flow children (the frame is absolutely
   positioned) — on purpose, so it contributes ~0 to the grid row's
   auto height. The row height ends up dictated entirely by
   .about__text; align-items:stretch then stretches .about__media to
   that resolved height. The frame/img fill and slightly overscan it
   (inset:-12% 0, same margin hero__bg/contact__bg use) so the
   data-parallax vertical shift never exposes a gap at the edge;
   .about__media's own overflow:hidden clips it back to the exact
   stretched height. This is what makes the photo match the text
   column instead of the other way around. */
.about__media{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.1);
}
.about__media-frame{position:absolute;inset:-12% 0}
.about__media img{width:100%;height:100%;object-fit:cover}

@media (max-width:760px){
  /* Stacked layout: text and photo are no longer row-siblings, so
     there's no shared row height to stretch into — give the photo
     its own aspect-ratio instead. order: flips the visual stack to
     photo-above-text (matching the Serviços rows) without touching
     the HTML — DOM/reading order stays text-then-photo for screen
     readers. */
  .about__media{aspect-ratio:3/2;order:1}
  .about__text{order:2}
}

.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--orange-400)}
.link-arrow:hover{color:var(--orange-300)}
.link-arrow svg{width:17px;height:17px}

/* -------------------------------------------------------------------------
   Serviços
   ------------------------------------------------------------------------- */
.services{background:var(--navy-900);padding:var(--section-padding-y) 0;scroll-margin-top:var(--header-h)}
.services__head{margin-bottom:80px;max-width:700px}

.service-rows{display:flex;flex-direction:column;gap:clamp(84px,9vw,136px)}
.service-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap:clamp(40px,5vw,72px);align-items:center;
}
.service-row--rev .service-row__media{order:2}
.service-row--rev .service-row__body{order:1}
.service-row__media{
  order:1;border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,.1);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.service-row__media:hover{transform:translateY(-6px);border-color:rgba(213,136,53,.5);box-shadow:0 30px 60px -34px rgba(213,136,53,.7)}
.service-row__media img{width:100%;height:clamp(300px,32vw,430px);object-fit:cover}
.service-row__body{order:2;display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:520px}

.service-icon{width:38px;height:38px;color:var(--accent);flex:none;display:block}

.service-titlegroup{display:flex;flex-direction:column;gap:8px}
.service-title{font-family:var(--font-heading);font-weight:600;font-size:clamp(26px,2.6vw,34px);line-height:1.1;color:#fff}
.service-tag{font-size:14px;letter-spacing:.01em;color:var(--orange-400)}
.service-desc{font-size:17px;line-height:1.75;color:rgba(255,255,255,.68)}

@media (max-width:760px){
  .service-row,
  .service-row--rev{grid-template-columns:1fr}
  .service-row__media,
  .service-row--rev .service-row__media{order:1}
  .service-row__body,
  .service-row--rev .service-row__body{order:2}
}

/* -------------------------------------------------------------------------
   Diferenciais
   ------------------------------------------------------------------------- */
.diff{background:var(--navy-800);padding:var(--section-padding-y) 0;scroll-margin-top:var(--header-h)}
.diff__head{max-width:700px;margin-bottom:76px}
.diff__head .section-subtitle{max-width:560px}
.diff__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.diff-card{
  display:flex;flex-direction:column;gap:18px;padding:42px 36px;
  border-radius:var(--radius-lg);background:var(--navy-900);border:1px solid rgba(255,255,255,.1);
}
.diff-card--accent{background:var(--accent);border-color:var(--accent)}
.diff-card svg{width:30px;height:30px;color:var(--accent)}
.diff-card--accent svg{color:var(--navy-800)}
.diff-card__value{font-family:var(--font-heading);font-weight:600;font-size:27px;line-height:1;color:#fff}
.diff-card--accent .diff-card__value{color:var(--navy-800)}
.diff-card__label{font-size:15px;line-height:1.6;color:rgba(255,255,255,.68)}
.diff-card--accent .diff-card__label{color:rgba(7,19,44,.8)}

.diff__grid .diff-card:nth-child(1){transition-delay:0ms}
.diff__grid .diff-card:nth-child(2){transition-delay:60ms}
.diff__grid .diff-card:nth-child(3){transition-delay:120ms}
.diff__grid .diff-card:nth-child(4){transition-delay:180ms}
.diff__grid .diff-card:nth-child(5){transition-delay:240ms}
.diff__grid .diff-card:nth-child(6){transition-delay:240ms}

/* -------------------------------------------------------------------------
   Contato
   ------------------------------------------------------------------------- */
.contact{position:relative;padding:var(--section-padding-y) 0;scroll-margin-top:var(--header-h);overflow:hidden}
.contact__bg{
  position:absolute;inset:-10% 0;background-image:url("../assets/img/contato.jpg");
  background-size:cover;background-position:center;will-change:transform;
}
.contact__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,19,44,.78) 0%,rgba(7,19,44,.6) 55%,rgba(7,19,44,.8) 100%);
}
.contact__grid{
  position:relative;width:min(1240px,100% - 64px);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:72px;
}
.contact__info{display:flex;flex-direction:column;gap:32px}
.contact__info .section-title{margin:0}
.contact__info > p{font-size:18px;line-height:1.75;color:rgba(255,255,255,.78);max-width:480px}

.contact__items{display:grid;gap:26px;padding-top:8px}
.contact-item{display:flex;gap:16px;align-items:flex-start}
.contact-item svg{width:20px;height:20px;color:var(--accent);margin-top:3px;flex:none}
.contact-item__label{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);display:block;margin-bottom:5px}
.contact-item a,.contact-item span.value{font-size:16px;color:#fff}
.contact-item a:hover{color:var(--orange-300)}

/* Form card */
.form-card{background:#fff;border:1px solid #e0e4ea;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:40px}
.form{display:grid;gap:20px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--navy-800)}
.field .req{color:var(--danger)}
.field-control{
  display:flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--border-default);border-radius:var(--radius-md);padding:0 12px;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.field-control:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.field.is-invalid .field-control{border-color:var(--danger)}
.field input,.field textarea{
  flex:1;border:0;outline:none;background:transparent;
  font-family:var(--font-body);font-size:15px;color:var(--navy-800);
  width:100%;
}
.field input{height:44px}
.field textarea{padding:12px 0;resize:vertical;min-height:104px}
.field-error{font-family:var(--font-body);font-size:13px;color:var(--danger);min-height:16px}
.field-hint{font-family:var(--font-body);font-size:13px;color:#6b7585}

.form__consent{font-size:13px;line-height:1.6;color:#3f4a5c}
.form__consent a{color:var(--accent-press)}

.form__status{font-size:14px;padding:12px 14px;border-radius:var(--radius-md);display:none}
.form__status.is-visible{display:block}
.form__status--success{background:#e6f4ec;color:var(--success)}
.form__status--error{background:#fbeae8;color:var(--danger)}

/* Honeypot field — hidden from sighted + AT users, present for bots */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer{background:var(--navy-900);border-top:1px solid rgba(255,255,255,.1);padding:80px 0 44px}
.footer__top{display:flex;flex-wrap:wrap;gap:48px;justify-content:space-between;align-items:flex-start}
.footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:360px}
.footer__brand img{height:48px;width:auto}
.footer__tagline{font-family:var(--font-heading);font-weight:600;font-size:17px;color:#fff}
.footer__cnpj{font-family:var(--font-mono);font-size:13px;color:rgba(255,255,255,.5)}
.footer__nav{display:flex;flex-wrap:wrap;gap:16px 36px}
.footer__nav a{font-size:14px;color:rgba(255,255,255,.7)}
.footer__nav a:hover{color:#fff}
.footer__bottom{
  width:min(1240px,100% - 64px);margin:56px auto 0;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;align-items:center;
}
.footer__bottom span{font-size:13px;color:rgba(255,255,255,.45)}
.footer__bottom .mono{font-family:var(--font-mono)}
.footer__legal{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
.footer__legal a{color:rgba(255,255,255,.6)}
.footer__legal a:hover{color:#fff}

/* -------------------------------------------------------------------------
   Reveal / stagger / parallax animation system
   ------------------------------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal].is-in{opacity:1;transform:none}

@media (max-width:760px){
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(24px)}
}

[data-parallax]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  [data-parallax]{transform:none!important}
}

/* -------------------------------------------------------------------------
   Privacy policy page
   ------------------------------------------------------------------------- */
.legal{padding:170px 0 140px;min-height:100vh}
.legal .section-title{margin-top:24px;margin-bottom:8px}
.icon-flip{transform:rotate(180deg)}
.legal__updated{font-family:var(--font-mono);font-size:13px;color:rgba(255,255,255,.5);margin-bottom:48px}
.legal__body{display:flex;flex-direction:column;gap:36px;max-width:760px}
.legal__body h2{font-family:var(--font-heading);font-weight:600;font-size:22px;color:#fff;margin-bottom:12px}
.legal__body p{font-size:16px;line-height:1.8;color:rgba(255,255,255,.72)}
.legal__body p + p{margin-top:16px}
.legal__body strong{color:#fff;font-weight:600}
.legal__lead{font-size:18px;line-height:1.8;color:rgba(255,255,255,.82)}
.legal__body ul{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-left:22px}
.legal__body li{font-size:16px;line-height:1.8;color:rgba(255,255,255,.72)}
.legal__body li::marker{color:var(--accent)}
.legal__contact{font-style:normal;font-size:16px;line-height:1.9;color:rgba(255,255,255,.72)}
.legal__back{margin-bottom:56px;display:inline-flex}

/* -------------------------------------------------------------------------
   Responsive tuning
   ------------------------------------------------------------------------- */
@media (max-width:760px){
  .hero{padding:110px 0 70px}
  .about__grid{gap:56px}
  .hero__norms{gap:6px 10px;padding-top:26px;margin-top:6px}
  .hero__norms-item{font-size:11.5px}
  .contact__grid{gap:56px}
  .form-card{padding:28px 24px}
}

@media (max-width:480px){
  .brand img{height:48px;width:auto}
  .site-header__bar{height:76px}
  .hero{padding-top:96px}
  .hero__norms-dot{display:none}
  .hero__norms-item{font-size:11px}
}