/* ===========================================================
   alikilic.de — Stylesheet
   Ali Kilic · Übersetzer & Dolmetscher Türkisch/Deutsch
   Aufbau: 1 Schriften · 2 Tokens · 3 Basis · 4 Layout
           5 Kopf/Navigation · 6 Hero & Siegel · 7 Inhalte
           8 Kontakt/Fuß · 9 Rechtstexte · 10 Responsive
   =========================================================== */

/* ---------- 1 Schriften (selbst gehostet, DSGVO-konform) ---------- */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/newsreader-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/newsreader-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(fonts/ibm-plex-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(fonts/ibm-plex-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 2 Tokens ---------- */
:root{
  --ink:          #101B31;   /* Aktendeckel-Marine */
  --ink-deep:     #0A1120;   /* Siegelgrund */
  --ink-soft:     #32405E;
  --seal:         #2F6F62;   /* Stempelgrün, Markenfarbe */
  --seal-deep:    #1D5347;
  --seal-tint:    #E6EEEB;
  --emboss:       #B79A63;   /* Prägegold, nur Haarlinien */
  --paper:        #EDEFF2;   /* kühles Aktenpapier */
  --paper-warm:   #F5F6F8;
  --surface:      #FFFFFF;
  --line:         #DCE0E7;
  --line-soft:    #E8EBF0;
  --text:         #1B2338;
  --text-mute:    #59617A;
  --on-dark:      #E9ECF3;
  --on-dark-mute: #9AA4BD;

  --wrap: 1120px;
  --gutter: 28px;
  --r: 4px;                  /* zurückhaltender Radius, Urkunden-Anmutung */
  --r-lg: 8px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- 3 Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4{
  font-family: var(--serif);
  text-wrap: balance;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.005em;
}
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
img, svg { max-width: 100%; }
ul { margin: 0; }

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

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

/* ---------- 4 Layout ---------- */
.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: 92px 0; }
.section--tight { padding: 68px 0; }
.section--surface{
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--ink{
  background: var(--ink);
  color: var(--on-dark);
}

.section-head { max-width: 60ch; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.section-head p{
  margin: 14px 0 0;
  color: var(--text-mute);
  font-size: 1.02rem;
  max-width: 58ch;
}
.section--ink .section-head h2 { color: #fff; }
.section--ink .section-head p { color: var(--on-dark-mute); }

/* Haarlinien-Marke vor Überschriften: Siegelband */
.section-head h2::before{
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background: var(--seal);
  margin-bottom: 18px;
}
.section--ink .section-head h2::before { background: var(--emboss); }

/* ---------- 5 Sprachleiste, Kopf, Navigation ---------- */
.lang-bar{
  background: var(--ink-deep);
  padding: 7px 0;
}
.lang-bar .wrap { display: flex; justify-content: flex-end; }
.lang-switch{
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.lang-switch a{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--on-dark-mute);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.lang-switch a:hover { color: #fff; background: rgba(255,255,255,.07); }
.lang-switch a[aria-current="page"]{
  color: #fff;
  background: rgba(255,255,255,.1);
}
.lang-switch .flag{
  display: block;
  width: 21px; height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.28);
  flex: none;
}
.lang-switch .sep { color: rgba(255,255,255,.22); }

header.site{
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 24px -22px rgba(16,27,49,.9);
}
.site-header-inner{
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 16px;
}
.brand{
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink);
  line-height: 1.1;
  text-decoration: none;
  margin-right: auto;
}
.brand span{
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  margin-top: 3px;
}
nav.primary{
  display: flex;
  gap: 26px;
  font-size: 0.95rem;
}
nav.primary a{
  text-decoration: none;
  color: var(--ink-soft);
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
nav.primary a:hover { color: var(--ink); border-color: var(--seal); }

.header-cta{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: var(--r);
  background: var(--seal-deep);
  color: #fff;
  text-decoration: none;
  font-size: 0.93rem;
  white-space: nowrap;
  transition: background-color .15s var(--ease);
}
.header-cta:hover { background: var(--seal); }
.header-cta svg { flex: none; }

.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
}

/* ---------- 6 Hero & Siegel ---------- */
.hero{
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  padding: 96px 0 104px;
  overflow: hidden;
}
/* Guillochen-Anmutung: feine, gedrehte Linienraster wie auf Urkunden */
.hero::before{
  content: "";
  position: absolute;
  inset: -40% -10%;
  background:
    repeating-linear-gradient(58deg, rgba(255,255,255,.055) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-58deg, rgba(255,255,255,.04) 0 1px, transparent 1px 19px);
  pointer-events: none;
}
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 420px at 76% 22%, rgba(47,111,98,.42), transparent 62%),
    radial-gradient(620px 380px at 4% 96%, rgba(183,154,99,.13), transparent 60%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid{
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 64px;
  align-items: center;
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  color: #BFD8D0;
  font-size: 0.93rem;
}
.eyebrow .rule { width: 32px; height: 1px; background: var(--emboss); }
.hero h1{
  color: #fff;
  font-size: clamp(1.9rem, 4.2vw, 3.15rem);
  max-width: 19ch;
  letter-spacing: -0.015em;
}
.hero .lede{
  margin-top: 24px;
  font-size: 1.09rem;
  color: #C4CCDE;
  max-width: 50ch;
}
.hero-actions{
  margin-top: 34px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r);
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn-primary { background: var(--seal); color: #fff; }
.btn-primary:hover { background: #38826f; }
.btn-ghost { border-color: rgba(255,255,255,.34); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-soft); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: rgba(16,27,49,.05); }

/* Siegel */
.seal-panel { display: flex; justify-content: center; }
.seal-card{
  width: 100%;
  max-width: 330px;
  text-align: center;
  padding: 34px 28px 30px;
  border: 1px solid rgba(183,154,99,.38);
  border-radius: var(--r-lg);
  background: rgba(10,17,32,.42);
}
.seal-svg { width: 190px; height: 190px; margin: 0 auto 20px; display: block; }
.seal-ring { fill: none; stroke: var(--emboss); }
.seal-ring-thin { fill: none; stroke: rgba(183,154,99,.5); stroke-width: 1; }
.seal-core { fill: none; stroke: rgba(183,154,99,.65); stroke-width: 1; }
.seal-circle-text{
  fill: #D9C9A4;
  font-family: var(--sans);
  font-size: 9.6px;
}
.seal-name{
  fill: #FFFFFF;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
}
.seal-rule{
  stroke: rgba(183,154,99,.75);
  stroke-width: 1;
}
.seal-sub{
  fill: #C9B98F;
  font-family: var(--sans);
  font-size: 7.6px;
  letter-spacing: 0.9px;
}
.seal-rotor{
  transform-origin: 100px 100px;
  animation: seal-turn 90s linear infinite;
}
@keyframes seal-turn { to { transform: rotate(360deg); } }

.seal-card .seal-label{
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--on-dark-mute);
}
.seal-card .seal-court{
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 1.14rem;
  color: #fff;
}
.seal-card .seal-note{
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.13);
  font-size: 0.82rem;
  color: var(--on-dark-mute);
  line-height: 1.5;
}

/* ---------- 7 Inhalte ---------- */
/* Vertrauensleiste */
.facts { background: var(--ink-deep); color: var(--on-dark); }
.facts-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.1);
  border-block: 1px solid rgba(255,255,255,.1);
}
.fact{
  background: var(--ink-deep);
  padding: 26px 22px;
}
.fact .k{
  font-family: var(--serif);
  font-size: 1.05rem;
  color: #fff;
  display: block;
}
.fact .v{
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--on-dark-mute);
  line-height: 1.45;
}

/* Leistungen */
.services-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.service{
  background: var(--surface);
  padding: 34px 32px;
  transition: background-color .18s var(--ease);
}
.service:hover { background: var(--paper-warm); }
.service .icon{
  width: 34px; height: 34px;
  color: var(--seal);
  margin-bottom: 16px;
}
.service h3 { font-size: 1.16rem; margin-bottom: 10px; }
.service p { color: var(--text-mute); font-size: 0.96rem; margin: 0; }

/* Dokumentenliste als Registerkarten */
.doc-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  list-style: none;
}
.doc-list li{
  padding: 8px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--seal);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.doc-note { margin-top: 26px; font-size: 0.92rem; color: var(--text-mute); max-width: 62ch; }

/* Ablauf: echte Reihenfolge, daher nummeriert */
.steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  counter-reset: step;
  list-style: none;
  padding: 0;
}
.steps li{
  counter-increment: step;
  padding-top: 22px;
  border-top: 2px solid var(--line);
  position: relative;
}
.steps li::before{
  content: counter(step);
  position: absolute;
  top: -15px;
  left: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--seal);
  color: #fff;
  border-radius: 50%;
  font-size: 0.85rem;
  font-family: var(--sans);
}
.steps h3 { font-size: 1.08rem; margin: 12px 0 8px; }
.steps p { color: var(--text-mute); font-size: 0.95rem; margin: 0; }

/* Honorar */
.pricing-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.pricing-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 30px;
}
.pricing-card.accent{
  background: var(--seal-tint);
  border-color: #C9DBD5;
}
.pricing-card h3 { font-size: 1.08rem; margin-bottom: 14px; }
.pricing-list{
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--text-mute);
}
.pricing-list li{
  padding: 9px 0 9px 24px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.pricing-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.pricing-list li::before{
  content: "";
  position: absolute;
  left: 4px; top: 17px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--seal);
  opacity: .55;
}
.pricing-card p { color: var(--text-mute); font-size: 0.95rem; }
.pricing-card p:last-child { margin-bottom: 0; }
.pricing-note{
  margin-top: 26px;
  font-size: 0.93rem;
  color: var(--text-mute);
  max-width: 68ch;
}

/* Über mich */
.about-grid{
  display: grid;
  grid-template-columns: .85fr 1.35fr;
  gap: 56px;
  align-items: start;
}
.about-figure{
  border-left: 2px solid var(--seal);
  padding-left: 24px;
}
.about-figure .name { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); }
.about-figure .role { margin-top: 6px; font-size: 0.9rem; color: var(--text-mute); }
.lang-pair{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
}
.lang-pair .arrow { color: var(--seal); font-family: var(--sans); }
.about-body p { color: var(--ink-soft); font-size: 1.04rem; }
.about-body p:last-child { margin-bottom: 0; }

/* Einsatzgebiet */
.area-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}
.area-list{
  columns: 2;
  column-gap: 28px;
  list-style: none;
  padding: 0;
  font-size: 0.95rem;
  color: var(--text-mute);
}
.area-list li{
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
  break-inside: avoid;
}

/* Fragen */
.faq { max-width: 78ch; }
.faq details{
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
}
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary{
  list-style: none;
  cursor: pointer;
  padding: 18px 44px 18px 0;
  position: relative;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after{
  content: "";
  position: absolute;
  right: 10px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -7px;
  border-right: 1.5px solid var(--seal);
  border-bottom: 1.5px solid var(--seal);
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .answer{
  padding: 0 44px 20px 0;
  color: var(--text-mute);
  font-size: 0.98rem;
}
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- 8 Kontakt & Fuß ---------- */
.contact-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
.contact-card{
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.contact-card:hover { border-color: rgba(183,154,99,.6); background: rgba(255,255,255,.03); }
.contact-card .label{
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--on-dark-mute);
  margin-bottom: 10px;
}
.contact-card a{
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.4;
  text-decoration: none;
  color: #fff;
  display: inline-block;
}
.contact-card a:hover { color: #9DC9BC; }
.contact-note{
  margin-top: 34px;
  font-size: 0.93rem;
  color: var(--on-dark-mute);
  max-width: 64ch;
}

footer.site{
  background: var(--ink-deep);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 30px 0;
  color: var(--on-dark-mute);
  font-size: 0.86rem;
}
footer.site .wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--on-dark-mute); text-decoration: none; }
.footer-links a:hover { color: #fff; }

/* ---------- 9 Rechtstexte ---------- */
.legal-hero{
  background: var(--ink);
  color: var(--on-dark);
  padding: 60px 0 52px;
}
.legal-hero h1 { color: #fff; font-size: clamp(1.85rem, 3vw, 2.5rem); }
.legal-hero p { margin: 12px 0 0; color: var(--on-dark-mute); }
.legal-body{
  padding-block: 62px 96px;
  max-width: calc(74ch + 2 * var(--gutter));
}
.legal-body h2{
  font-size: 1.25rem;
  margin-top: 44px;
  margin-bottom: 12px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li{
  color: var(--ink-soft);
  font-size: 0.99rem;
  margin: 0 0 12px;
}
.legal-body ul { padding-left: 22px; }
.legal-body a { color: var(--seal-deep); }

/* ---------- 10 Responsive ---------- */
@media (max-width: 940px){
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero h1 { max-width: 20ch; }
  .about-grid, .area-grid { grid-template-columns: 1fr; gap: 34px; }
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 860px){
  .nav-toggle { display: inline-flex; }
  nav.primary{
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 30px -20px rgba(16,27,49,.5);
    padding: 8px 0;
  }
  nav.primary.open { display: flex; }
  nav.primary a{
    padding: 13px var(--gutter);
    border-bottom: 0;
  }
  nav.primary a:hover { background: var(--paper-warm); border-color: transparent; }
  header.site .wrap { position: relative; }
  .header-cta span { display: none; }
  .header-cta { padding: 11px 13px; }
}

@media (max-width: 680px){
  :root { --gutter: 26px; }
  body { font-size: 16.5px; line-height: 1.62; }
  .section { padding: 62px 0; }
  .section--tight { padding: 50px 0; }
  .section-head { margin-bottom: 34px; }
  .hero { padding: 56px 0 66px; }
  .hero .lede { font-size: 1.02rem; }
  .hero-actions { margin-top: 30px; gap: 12px; }
  .seal-svg { width: 168px; height: 168px; }
  .seal-card { padding: 30px 24px 26px; }
  .services-grid, .pricing-grid { grid-template-columns: 1fr; }
  .service { padding: 30px 26px; }
  .pricing-card { padding: 28px 24px; }
  .facts-grid { grid-template-columns: 1fr; }
  .fact { padding: 22px 24px; }
  .contact-card { padding: 24px 22px; }
  .area-list { columns: 1; }
  .btn { width: 100%; justify-content: center; }
  .faq summary { font-size: 1.04rem; padding-right: 38px; }
  .faq .answer { padding-right: 8px; }
  .legal-body { padding-block: 46px 74px; }
  footer.site .wrap { justify-content: flex-start; }
}

@media (max-width: 380px){
  :root { --gutter: 22px; }
  .service, .pricing-card { padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .seal-rotor { animation: none; }
  * { transition-duration: .01ms !important; }
}