/* Theme: black text, white / soft-white-grey background */
:root{
  --bg:#fafafb;            /* page background (soft white grey) */
  --panel:#ffffff;         /* cards/inner panels */
  --fg:#0b0c0f;            /* primary text (near-black) */
  --muted:#4b5563;         /* secondary text */
  --line:#e5e7eb;          /* hairline borders */
  --silver:#d1d5db;        /* light grey accent */
  --accent:#111111;        /* solid black for buttons/strong accents */

  --radius:16px;
  --gap:1.25rem;
  --speed:250ms;
  --fw:600;
  --shadow:0 10px 20px rgba(0,0,0,.08);
}

*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}
img{ max-width:100%; height:auto; border-radius:12px }
a{ color:inherit; }

/* Wrappers: 80% outer, then 80% inner as requested */
.wrap{ width:80%; margin:0 auto }
.content{ width:80%; margin:0 auto }

.sr{ position:absolute; left:-9999px }

/* Header and nav */
.site-header{
  position:sticky; top:0; z-index:20;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
/* nav layout */
.topnav{ display:flex; align-items:center; gap:1rem; padding:.85rem 0 }
.brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:inherit; flex:0 0 auto;
  min-width:0;
}
.menu{
  display:flex; align-items:center; gap:1rem;
  list-style:none; margin:0 0 0 auto; padding:0;
  overflow-x:auto; white-space:nowrap;
}

/* logo sizing */
.brand-logo{
  display:block;
  height:clamp(28px, 6vw, 48px);  /* sensible scale */
  width:auto;
  object-fit:contain;
}

/* clickable area and focus */
.menu a{ padding:.45rem .65rem; border-radius:10px; text-decoration:none; color:inherit }
.menu a.active{ background:#f3f4f6; border:1px solid var(--line) }
.brand:focus-visible,
.menu a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* small screens: keep logo and let menu scroll */
@media (max-width: 900px){
  .wrap{ width:90% }
  .content{ width:90% }
  .menu{ gap:.6rem }
  .brand-logo{ height:clamp(28px, 7vw, 44px) }
}

/* Sections and containers */
.site-main{ padding:2rem 0 }
.inner{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1rem, 2vw, 2rem);
  box-shadow:var(--shadow);
}
.lead{ color:var(--muted); font-size:1.5rem }
.cta-row{ margin-top:1rem }

/* Buttons */
.btn{
  display:inline-block;
  padding:.8rem 1.1rem;
  border-radius:12px;
  background:var(--accent);
  color:#ffffff;
  font-weight:var(--fw);
  text-decoration:none;
  border:1px solid var(--accent);
  cursor:pointer;
}
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.btn:hover{ filter:brightness(0.92) }

/* Grid helpers */
.grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1rem;
}
.gallery .ph{
  display:grid; place-items:center;
  aspect-ratio:16/9;
  background:#f3f4f6;
  border:1px dashed var(--silver);
  border-radius:12px;
  color:#6b7280;
}

/* Form */
.form{ display:grid; gap:.75rem; max-width:720px }
label{ display:grid; gap:.35rem; font-weight:var(--fw) }
input, textarea{
  width:100%;
  padding:.75rem;
  border-radius:10px;
  border:1px solid var(--line);
  background:#ffffff;
  color:var(--fg);
}
.hp{ position:absolute; left:-9999px }
.flash{
  margin-bottom:.5rem; padding:.6rem .8rem;
  border-radius:8px; background:#fff;
  border:1px solid var(--line);
  color:var(--fg);
}
.muted{ color:var(--muted) }
.small{ font-size:.9rem }

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  padding:1rem 0;
  color:#6b7280;
  background:transparent;
}

/* Responsive tweaks */
@media (max-width: 900px){
  .wrap{ width:90% }
  .content{ width:90% }
}

/* inner split layout: text left, image right; flip with .is-reversed */
.inner.split{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:var(--gap);
  align-items:center;
}
.split__body{ min-width:0; }
.split__media{
  min-width:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#f3f4f6; /* light theme */
}
.split__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:4/3; /* adjust if needed */
}

/* flip without changing markup */
.inner.split.is-reversed .split__body{ order:2; }
.inner.split.is-reversed .split__media{ order:1; }

/* text wrapping hardening */
.split__body :is(p,li){ overflow-wrap:anywhere; hyphens:auto; }

/* responsive stack: text then image by default */
@media (max-width:900px){
  .inner.split{ grid-template-columns:1fr; }
  .inner.split.is-reversed .split__body,
  .inner.split.is-reversed .split__media{ order:initial; }
  /* use this optional helper to put image first on mobile for a specific split */
  .inner.split.stack-media-first-mobile .split__media{ order:-1; }
}

/* optional aspect helpers */
/* aspect ratio overrides for a specific media block */
.split__media.ar-16x9 img { aspect-ratio: 16 / 9; }
.split__media.ar-3x2  img { aspect-ratio: 3 / 2; }
.split__media.ar-4x3  img { aspect-ratio: 4 / 3; }   /* default you had */
.split__media.ar-1x1  img { aspect-ratio: 1 / 1; }
.split__media.ar-3x4  img { aspect-ratio: 3 / 4; }   /* portrait */
.split__media.ar-auto img { aspect-ratio: auto; }    /* let intrinsic ratio win */

/* fit behavior helpers */
.split__media.fit-cover   img { object-fit: cover; }   /* tasteful crop */
.split__media.fit-contain img { object-fit: contain; background:#fff; }

/* crop focus helpers */
.split__media.pos-top    img { object-position: center top; }
.split__media.pos-bottom img { object-position: center bottom; }
.split__media.pos-left   img { object-position: left center; }
.split__media.pos-right  img { object-position: right center; }

/* contact rows — tighten vertical alignment */
.contact-rows { display: grid; gap: .75rem; }
.contact-row {
  display: grid;
  grid-template-columns: 1.25rem 1fr; /* icon | content */
  column-gap: .6rem;
  align-items: start;                  /* good for multi-line blocks */
}

/* icon sizing and default nudge */
.contact-row .icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  margin-top: .2em;                    /* align to first text line */
}

/* remove default top margins inside the content cell */
.contact-row > :nth-child(2) { margin-top: 0; }
.contact-row > :nth-child(2) > :first-child { margin-top: 0; }

/* common elements inside contact rows */
.contact-row address,
.contact-row p,
.contact-row ul { margin: 0; }         /* kill top margin that caused the offset */
.contact-row ul { padding-left: 1.1rem; } /* keep bullets if you want them */

/* single-line rows (eg, phone): center vertically and remove the nudge */
.contact-row--center { align-items: center; }
.contact-row--center .icon { margin-top: 0; }



/* Visibility — keep these at the very end */
.view { display: block; }                 /* default if JS fails */
html.js .view { display: none; }          /* JS mode hides all */
html.js .view.active { display: block; }  /* show exactly one */