:root {
  --navy:#000000;
  --blue:#1b1d21;
  --yellow:#efb84b;
  --brand-gray:#737980;
  --paper:#f4f1e8;
  --ink:#202124;
  --muted:#54585f;
  --line:#d8d4ca;
  --white:#ffffff;
  --max:1140px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:1rem/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
a:focus-visible {
  outline:3px solid var(--yellow);
  outline-offset:4px
}
.section:not(.about) a:focus-visible,.contact a:focus-visible {
  outline-color:var(--ink)
}
.wrap {
  width:min(100% - 2rem,var(--max));
  margin:auto
}
.site-header {
  position:absolute;
  inset:0 0 auto;
  z-index:2;
  color:var(--white)
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.65rem 0;
  min-height:5.5rem
}
.header-brand {
  min-width:0
}
.header-slogan {
  margin:.6rem 0 0
}
.logo {
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  max-width:100%;
  line-height:1
}
.logo img {
  display:block;
  width:clamp(9rem,15vw,10rem);
  max-width:100%;
  height:auto
}
nav {
  display:flex;
  align-items:center;
  gap:1.3rem;
  font-size:.88rem;
  font-weight:650
}
nav a {
  opacity:.8
}
nav a:hover {
  opacity:1
}
.nav-button {
  padding:.5rem .8rem;
  color:var(--navy);
  background:var(--yellow);
  opacity:1
}
.hero {
  display:flex;
  align-items:center;
  min-height:43rem;
  padding:7rem 0 5rem;
  color:var(--white);
  background:var(--navy);
  position:relative;
  isolation:isolate;
  overflow:hidden
}
.hero:after {
  content:"";
  position:absolute;
  width:38rem;
  height:38rem;
  right:-12rem;
  bottom:-19rem;
  border:1px solid rgba(239,184,75,.35);
  border-radius:50%;
  box-shadow:0 0 0 5rem rgba(239,184,75,.04),0 0 0 11rem rgba(239,184,75,.03);
  z-index:-1
}
.hero-inner {
  display:grid;
  gap:3rem;
  align-items:center
}
.hero-copy {
  max-width:42rem
}
.kicker {
  margin:0 0 1.2rem;
  color:var(--yellow);
  font:700 .73rem/1.2 ui-monospace,Consolas,monospace;
  letter-spacing:.12em;
  text-transform:uppercase
}
h1,h2,h3 {
  margin-top:0;
  line-height:1.03;
  letter-spacing:-.055em
}
h1 {
  margin-bottom:1.4rem;
  font-size:clamp(3.5rem,11vw,7.2rem);
  font-weight:700
}
h2 {
  margin-bottom:1.3rem;
  font-size:clamp(2.8rem,7vw,5.2rem);
  font-weight:700
}
em {
  color:var(--yellow);
  font-family:Georgia,serif;
  font-weight:400
}
.intro {
  max-width:35rem;
  margin-bottom:2rem;
  color:rgba(255,255,255,.72);
  font-size:1.12rem;
  line-height:1.55
}
.button {
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  padding:.8rem 1.1rem;
  font-weight:750;
  transition:transform .2s ease
}
.button:hover {
  transform:translateY(-2px)
}
.button-yellow {
  color:var(--navy);
  background:var(--yellow)
}
.hero-card {
  width:min(100%,22rem);
  padding:1.5rem;
  background:rgba(27,29,33,.72);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:1rem 1rem 0 var(--yellow);
  justify-self:end
}
.card-label {
  margin:0 0 3.5rem;
  color:var(--yellow);
  font:700 .7rem ui-monospace,monospace;
  letter-spacing:.1em;
  text-transform:uppercase
}
.card-intro {
  max-width:16rem;
  margin:0 0 1.5rem;
  color:var(--white);
  font-size:1.3rem;
  line-height:1.25;
  letter-spacing:-.03em
}
.hero-card ul {
  display:grid;
  gap:.55rem;
  margin:0;
  padding:1rem 0 0;
  border-top:1px solid rgba(255,255,255,.2);
  list-style:none;
  color:rgba(255,255,255,.68);
  font-size:.86rem
}
.hero-card li:before {
  content:"/";
  display:inline-block;
  margin-right:.55rem;
  color:var(--yellow);
  font-weight:700
}
.section {
  padding:clamp(5rem,10vw,8rem) 0
}
.section-heading {
  display:grid;
  grid-template-columns:.8fr 1.2fr 1fr;
  gap:2rem;
  align-items:end;
  margin-bottom:4rem
}
.section-heading h2 {
  margin:0
}
.section-heading>p:last-child {
  max-width:22rem;
  margin:0;
  color:var(--muted)
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem
}
.service-card {
  min-height:16rem;
  padding:1.5rem;
  border:1px solid var(--line);
  background:rgba(255,255,255,.45)
}
.service-card:hover {
  border-color:var(--yellow)
}
.service-card h3 {
  margin-bottom:.7rem;
  font-size:1.5rem;
  line-height:1.25;
  letter-spacing:-.025em
}
.service-card p {
  max-width:29rem;
  margin:0;
  color:var(--muted)
}
.service-feature {
  grid-column:1/-1;
  min-height:auto;
  color:var(--white);
  background:var(--navy);
  border-color:var(--yellow)
}
.service-feature p {
  max-width:46rem;
  color:rgba(255,255,255,.78)
}
.service-feature small {
  display:block;
  max-width:46rem;
  margin-top:1rem;
  color:rgba(255,255,255,.58);
  font-size:.8rem
}
.feature-label {
  display:block;
  margin-bottom:1.5rem;
  color:var(--yellow);
  font:700 .73rem ui-monospace,monospace;
  letter-spacing:.12em;
  text-transform:uppercase
}
.about {
  color:var(--white);
  background:var(--blue)
}
.about-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start
}
.about-copy {
  max-width:34rem;
  color:rgba(255,255,255,.72);
  font-size:1.1rem
}
.about-copy p+p {
  margin-top:1.2rem
}
.contact {
  background:var(--yellow)
}
.contact-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:end;
  padding:clamp(5rem,10vw,8rem) 0
}
.contact-copy>p:not(.kicker) {
  max-width:32rem;
  margin:0;
  color:rgba(32,33,36,.72)
}
.contact-copy>p.contact-region {
  margin-top:1.5rem;
  color:var(--ink);
  font-size:.9rem
}
.contact-details {
  border-top:1px solid rgba(32,33,36,.34)
}
.contact-item {
  display:grid;
  grid-template-columns:6rem 1fr;
  gap:1rem;
  align-items:start;
  padding:1rem 0;
  border-bottom:1px solid rgba(32,33,36,.34)
}
.contact-label {
  padding-top:.15rem;
  color:var(--ink);
  font:700 .72rem ui-monospace,monospace;
  letter-spacing:.1em;
  text-transform:uppercase
}
.contact-value {
  margin:0;
  color:var(--navy);
  font-size:clamp(1rem,2vw,1.2rem);
  font-weight:700;
  overflow-wrap:anywhere
}
.footer {
  color:rgba(255,255,255,.7);
  background:var(--navy)
}
.footer-inner {
  display:grid;
  grid-template-columns:minmax(12rem,1fr) minmax(15rem,1fr) auto;
  align-items:start;
  gap:2rem;
  padding:2rem 0
}
.footer p {
  margin:.6rem 0 0;
  font-size:.82rem
}
.header-slogan,.footer .footer-slogan {
  color:var(--white);
  font-size:1rem;
  font-weight:600
}
.header-slogan span,.footer-slogan span {
  color:var(--yellow)
}
.footer-link {
  align-self:center;
  font-size:.82rem;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.25em
}
.legal-hero {
  min-height:32rem
}
.legal-section h2 {
  margin-top:2rem
}
.legal-content {
  max-width:760px;
  overflow-wrap:anywhere;
  display:grid;
  gap:clamp(4rem,8vw,7rem)
}
.legal-content p {
  max-width:760px
}
.section:not(.about) .kicker,.section:not(.about) em {
  color:#795300
}
.contact .kicker {
  color:var(--ink)
}
.contact em {
  color:#704b00
}
@media (min-width:760px) {
  .wrap {
    width:min(100% - 4rem,var(--max))
  }
  .hero-inner {
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    min-height:31rem
  }
}
@media (max-width:620px) {
  .header-inner {
    display:grid;
    grid-template-columns:1fr auto;
    gap:.35rem 1rem
  }
  .header-brand {
    display:contents
  }
  .header-brand .logo {
    grid-column:1;
    grid-row:1
  }
  .header-slogan {
    grid-column:1/-1;
    grid-row:2;
    margin:0
  }
  .site-header nav {
    grid-column:2;
    grid-row:1
  }
  nav a:not(.nav-button) {
    display:none
  }
  .hero {
    min-height:45rem
  }
  .hero-card {
    justify-self:start
  }
  .section-heading,.about-inner,.contact-inner {
    grid-template-columns:1fr;
    gap:1rem
  }
  .section-heading {
    margin-bottom:2.5rem
  }
  .service-grid {
    grid-template-columns:1fr
  }
  .service-card {
    min-height:auto
  }
  .service-feature {
    grid-column:auto
  }
  .contact-inner {
    gap:2.5rem
  }
  .contact-item {
    grid-template-columns:5rem 1fr;
    gap:.8rem
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition-duration:.01ms!important
  }
}
.legal-hero .hero-inner {
  grid-template-columns:minmax(0,1fr)
}
.legal-block {
  scroll-margin-top:2rem
}
.legal-block h3 {
  margin:2.5rem 0 .7rem;
  font-size:clamp(1.2rem,2.5vw,1.55rem);
  line-height:1.25;
  letter-spacing:-.025em
}
.legal-block p,.legal-block address {
  max-width:47rem
}
.legal-block address {
  font-style:normal
}
.legal-block a {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.2em
}
.legal-block a:hover {
  text-decoration-thickness:2px
}
.legal-updated {
  color:var(--muted);
  font-size:.92rem
}
.legal-block h2 {
  margin-bottom:1.5rem;
  font-size:clamp(1.75rem,5vw,2.25rem);
  line-height:1.15;
  letter-spacing:-.035em;
  hyphens:auto
}
/* Local display font: short headings only, never body copy or controls. */
@font-face {
  font-family:"RZ Rounded";
  src:url("marke/RZ-Rounded-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap
}
.hero h1,.section-heading h2,.about h2,.contact h2,.service-feature h3 {
  font-family:"RZ Rounded",system-ui,sans-serif;
  font-weight:700;
  font-synthesis:none;
  font-variant-ligatures:common-ligatures;
  letter-spacing:0;
  line-height:1.16;
  overflow-wrap:anywhere;
  hyphens:auto
}
.hero h1 {
  font-size:clamp(2.35rem,5.4vw,4rem)
}
.section-heading h2,.about h2,.contact h2 {
  font-size:clamp(1.9rem,3.5vw,2.8rem)
}
.service-feature h3 {
  font-size:clamp(1.6rem,3vw,2.25rem)
}
.hero h1 em,.section-heading h2 em,.about h2 em,.contact h2 em {
  font:inherit
}
.hero-copy,.section-heading>*,.about-inner>*,.contact-inner>* {
  min-width:0
}
.hero-card-brand {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:2rem
}
.hero-card-brand img {
  display:block;
  width:4rem;
  height:auto;
  flex:none
}
.hero-card-brand .card-label {
  margin:0;
  color:var(--white)
}
.service-feature h3 {
  letter-spacing:0
}
@media (min-width:621px) and (max-width:1000px) {
  .section-heading {
    grid-template-columns:1fr 1fr
  }
  .section-heading>.kicker {
    grid-column:1/-1
  }
  .about-inner,.contact-inner {
    gap:2rem
  }
}
@media (max-width:380px) {
  .hero h1 {
    font-size:2.1rem
  }
  .hero-card {
    width:calc(100% - 1rem)
  }
  .contact h2 {
    font-size:1.75rem
  }
}
/* Personal portrait and expandable footer resources. */
.about-profile {
  min-width:0
}
.portrait {
  position:relative;
  isolation:isolate;
  width:min(100%,25rem);
  margin:2.5rem 0 0;
  padding:.75rem 0 0;
  line-height:1
}
.portrait:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:20% 0 4.2rem 12%;
  background:var(--yellow)
}
.portrait img {
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 1rem 1.5rem rgba(0,0,0,.22))
}
.portrait figcaption {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:baseline;
  padding:1rem 0 0;
  border-top:1px solid rgba(255,255,255,.28);
  font-size:.78rem;
  line-height:1.35
}
.portrait figcaption strong {
  color:var(--white);
  font-size:.95rem
}
.portrait figcaption span {
  color:rgba(255,255,255,.62);
  text-align:right
}
.personal-note {
  margin-top:2rem!important;
  padding:1.25rem;
  border-left:4px solid var(--yellow);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.82)
}
.personal-note span {
  display:block;
  margin-bottom:.55rem;
  color:var(--yellow);
  font:700 .7rem/1.2 ui-monospace,Consolas,monospace;
  letter-spacing:.12em;
  text-transform:uppercase
}
.legal-footer .footer-inner {
  display:block
}
.footer-heading {
  margin:0 0 .8rem!important;
  color:var(--yellow);
  font:700 .7rem/1.2 ui-monospace,Consolas,monospace!important;
  letter-spacing:.12em;
  text-transform:uppercase
}
.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:.45rem 1.1rem;
  margin:0;
  padding:0;
  list-style:none;
  font-size:.82rem
}
.footer-links a,.footer-link {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.25em
}
.footer-links a:hover,.footer-link:hover {
  color:var(--white);
  text-decoration-thickness:2px
}
@media (max-width:760px) {
  .about-inner {
    grid-template-columns:1fr
  }
  .portrait {
    margin-bottom:2.5rem
  }
  .footer-inner {
    grid-template-columns:1fr;
    gap:2rem
  }
  .footer-links {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.7rem 1rem
  }
}
@media (max-width:380px) {
  .footer-links {
    grid-template-columns:1fr
  }
}
/* Contact details: keep WhatsApp tied to the phone number and the explanation easy to scan. */
.contact-whatsapp {
  display:inline-block;
  margin:.65rem 0 0;
  padding:.2rem .6rem;
  border:1px solid rgba(32,33,36,.45);
  color:var(--ink);
  font-size:.8rem;
  font-weight:650;
  line-height:1.4
}
.contact-save {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.5rem;
  margin-top:1.5rem;
  padding-top:1.5rem;
}
.contact-copy {
  align-self:start
}
.contact-save img {
  display:block;
  width:12.25rem;
  max-width:100%;
  height:auto;
  flex:none
}
.contact-save-copy {
  flex:1 1 12rem;
  min-width:0
}
.contact-save-copy p {
  margin:0 0 .6rem;
  font-size:.9rem;
  line-height:1.55
}
.contact-download {
  display:inline-block;
  padding:.4rem 0;
  color:#704b00;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:.2em
}
.contact-download:hover {
  color:var(--ink)
}
.no-wrap {
  white-space:nowrap;
  hyphens:none
}
.process {
  background:var(--white);
  border-top:1px solid var(--line)
}
.process-step {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:1rem 3rem;
  padding:1.75rem 0;
  border-top:1px solid var(--line)
}
.process-step h3 {
  margin:0;
  font-size:1.35rem;
  line-height:1.35;
  letter-spacing:0
}
.process-step p {
  margin:0;
  color:var(--muted)
}
.process-step .process-price {
  margin-top:.6rem;
  color:#795300;
  font-weight:600
}
.process-note {
  margin:1rem 0 0;
  padding:1.25rem 0 0;
  border-top:1px solid var(--line);
  color:var(--muted)
}
.process-note a {
  text-decoration:underline;
  text-underline-offset:.2em
}
@media (max-width:620px) {
  .process-step {
    grid-template-columns:1fr
  }
}
