/* Leo Local SEO — design tokens
   Warm olive + yellow. Adapted from the Thrive direction, with the
   interactive shades darkened so they actually pass WCAG AA. */

:root{
  /* Ink — warm brown-grey, not cold black */
  --ink:#433F34;
  --ink-2:#5F5A4C;
  --ink-3:#8A8474;

  /* Olive — brand lime is display only, dark olive is interactive */
  --olive:#7A9A01;        /* logo, large type, decorative — 3.3:1 */
  --olive-700:#5C7301;    /* buttons, links — 5.4:1 with white */
  --olive-800:#455801;    /* hover */
  --olive-50:#F2F6E2;     /* tint fills */

  /* Yellow — background accent only, never text on white */
  --yellow:#F5D74F;
  --yellow-600:#E0BC22;
  --yellow-50:#FDF8E4;

  /* Surfaces — warm, not grey */
  --surface:#FFFFFF;
  --surface-2:#FAF9F5;
  --surface-3:#F2F0E8;
  --deep:#2E2B24;
  --deep-2:#3B3730;

  --line:#E4E1D6;
  --line-strong:#CFCBBB;

  --img-placeholder:#EFEDE4;

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

  --radius:6px;
  --radius-lg:10px;
  --container:1240px;
  --header-h:78px;

  --shadow-md:0 6px 24px rgba(67,63,52,.09);
  --shadow-lg:0 20px 52px rgba(67,63,52,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.7;
  color:var(--ink-2);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  color:var(--ink);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:800;
  letter-spacing:-.02em;
}

a{color:var(--olive-700)}
a:hover{text-decoration:underline}
img,svg{max-width:100%}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:22px;
}

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

.sr-only{
  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;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;
}
.skip-link:focus{left:0;text-decoration:none}

[hidden]{display:none !important}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border-radius:var(--radius);
  border:2px solid transparent;
  background:var(--olive-700);
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.2;
  cursor:pointer;
  text-decoration:none;
  transition:background .18s ease;
}
.btn:hover{background:var(--olive-800);color:#fff;text-decoration:none}

/* Yellow CTA — dark text on yellow is 7.4:1 */
.btn--accent{background:var(--yellow);color:var(--ink)}
.btn--accent:hover{background:var(--yellow-600);color:var(--ink)}

.btn--outline{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-strong);
}
.btn--outline:hover{background:var(--surface-2);color:var(--ink)}

.btn--onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--onDark:hover{background:rgba(255,255,255,.1);color:#fff}

.btn--block{width:100%}

/* ---------- Image frames ---------- */
.img-frame{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--img-placeholder);
  aspect-ratio:3/2;
}
.img-frame > img{width:100%;height:100%;object-fit:cover;display:block}

.img-frame--hero{aspect-ratio:3/2}
.img-frame--about{aspect-ratio:4/3}
.img-frame--card{aspect-ratio:16/9}
.img-frame--case{aspect-ratio:16/10}
.img-frame--square{aspect-ratio:1/1}
.img-frame--portrait{aspect-ratio:4/5}
.img-frame--avatar{aspect-ratio:1/1;border-radius:50%}

.img-frame:not(:has(img))::after{
  content:attr(data-label);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--ink-3);
}

.logo-frame{
  aspect-ratio:5/2;display:grid;place-items:center;
  padding:12px 20px;background:var(--surface-2);
  border-radius:var(--radius);
}
.logo-frame > img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
}

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