/* Shared styles for every page. Page-specific styles live in each page's <style> block. */
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url(../fonts/figtree-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url(../fonts/figtree-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url(../fonts/figtree-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-display: swap; src: url(../fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  /* Day theme (default): white and green, like the ayaz template */
  color-scheme: light;
  --forest: #f5f3ee;   /* page background */
  --spruce: #ffffff;   /* raised surface */
  --moss: #e1ddd3;     /* lines */
  --leaf: #23a05a;
  --mist: #18252c;     /* text */
  --fern: #55656c;     /* muted text */
  --gold: #157a42;     /* accent */
  --on-gold: #ffffff;
  --ghost: rgba(255,255,255,.6);
  --ghost-line: rgba(24,37,44,.22);
  --bar: rgba(245,243,238,.9);
  --tabs-bg: rgba(255,255,255,.96);
  --paper: #f4f0e6;
  --ink: #17201a;
  --wa: #25d366;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --tabs-h: 0px;
}
/* Night theme, and every section that sits on a photo or film */
:root[data-theme="dark"], .media, .flow-slot {
  color-scheme: dark;
  --forest: #0e1511;
  --spruce: #18231c;
  --moss: #2b3a2f;
  --leaf: #4f7a4a;
  --mist: #ece6d6;
  --fern: #a9b8a0;
  --gold: #e3b468;
  --on-gold: #0e1511;
  --ghost: rgba(14,21,17,.3);
  --ghost-line: rgba(236,230,214,.4);
  --bar: rgba(14,21,17,.9);
  --tabs-bg: rgba(14,21,17,.95);
}
.media, .flow-slot { color: var(--mist); }
html { font-size: 90%; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--forest); color: var(--mist); font-family: var(--body); font-size: 1rem; line-height: 1.6; overflow-x: hidden; }
img, video, svg { max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: 72.5rem; margin: 0 auto; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.04; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.8rem, 7.2vw, 6.4rem); }
h2 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); }
h3 { font-size: 1.7rem; }
h1 em, h2 em, h3 em { color: var(--gold); }
.eyebrow { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0; }
.muted { color: var(--fern); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 1rem var(--body); text-decoration: none; padding: 0.8125rem 1.375rem; border-radius: 62.4375rem; border: 1px solid transparent; cursor: pointer; line-height: 1.2; }
.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover, .btn-gold:focus-visible { background: var(--mist); color: var(--forest); }
.btn-ghost { background: var(--ghost); color: var(--mist); border-color: var(--ghost-line); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--gold); color: var(--gold); }
.btn-wa { background: var(--wa); color: #06210f; }
.btn-wa:hover, .btn-wa:focus-visible { background: #4be283; }
.ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* top bar */
.bar { position: fixed; inset: 0 0 auto; z-index: 40; padding-top: env(safe-area-inset-top, 0px); background: var(--bar); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); box-shadow: 0 1px 0 var(--moss); transition: background .3s; }

.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-block: 1rem; }
.logo { font-family: var(--display); font-size: 1.5rem; text-decoration: none; white-space: nowrap; }
.logo span { font-style: italic; color: var(--gold); }
.menu { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; text-decoration: none; font-size: .95rem; padding: 0.5rem 0.75rem; border-radius: 62.4375rem; color: var(--fern); }
.menu a:hover, .menu a:focus-visible { color: var(--mist); }
.menu a[aria-current="page"] { color: var(--forest); background: var(--mist); }
.menu a.hl { color: #fff; background: var(--leaf); font-weight: 600; }
.menu a.hl:hover, .menu a.hl:focus-visible { color: #fff; background: var(--gold); }
.menu a.hl[aria-current="page"] { box-shadow: 0 0 0 2px var(--bar), 0 0 0 4px var(--leaf); }
.theme-btn { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; border: 1px solid var(--ghost-line); background: var(--ghost); color: var(--mist); cursor: pointer; flex: none; }
.theme-btn:hover, .theme-btn:focus-visible { color: var(--gold); border-color: var(--gold); }
.theme-btn svg { width: 1.125rem; height: 1.125rem; }
.theme-btn .sun { display: none; }
[data-theme="dark"] .theme-btn .sun { display: block; }
[data-theme="dark"] .theme-btn .moon { display: none; }
.bar-cta { display: flex; gap: 0.5rem; align-items: center; }
.call-sm { font-family: var(--mono); font-size: .85rem; text-decoration: none; border: 1px solid var(--ghost-line); padding: 0.5rem 0.875rem; border-radius: 62.4375rem; background: var(--ghost); white-space: nowrap; }
.call-sm:hover, .call-sm:focus-visible { border-color: var(--gold); color: var(--gold); }

/* bottom tab bar (mobile) */
.tabs { display: none; }
@media (max-width: 900px) {
  :root { --tabs-h: calc(4rem + env(safe-area-inset-bottom, 0px)); }
  .menu { display: none; }
  body { padding-bottom: var(--tabs-h); }
  .tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; inset: auto 0 0; z-index: 45; height: var(--tabs-h); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--tabs-bg); backdrop-filter: blur(0.75rem); border-top: 1px solid var(--moss); }
  .tabs a { display: grid; justify-items: center; align-content: center; gap: 3px; text-decoration: none; font-size: .68rem; color: var(--fern); }
  .tabs svg { width: 1.375rem; height: 1.375rem; }
  .tabs a[aria-current="page"] { color: var(--gold); }
  .tabs a.hl { color: var(--leaf); font-weight: 600; }
  .tabs a.hl svg { width: 2.25rem; height: 1.5rem; padding: 0.125rem 0.5rem; border-radius: 62rem; background: var(--leaf); color: #fff; }
}

/* floating WhatsApp */
.wa-float { position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(var(--tabs-h) + 1.125rem); z-index: 44; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem 0.75rem 0.75rem; border-radius: 62.4375rem; background: var(--wa); color: #06210f; text-decoration: none; font-weight: 600; box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,.35); transition: transform .2s; }
.wa-float:hover, .wa-float:focus-visible { transform: translateY(-2px); }
.wa-float svg { width: 1.625rem; height: 1.625rem; }
@media (max-width: 900px) { .wa-float { padding: 12px; } .wa-float span { display: none; } }

/* page header for inner pages */
.page-head { padding: 9.375rem 0 3.5rem; }
.page-head .wrap { display: grid; gap: 1.125rem; }
.page-head p.lede { max-width: 56ch; font-size: 1.15rem; color: var(--fern); }

/* Google Flow cinematic slot: shows the clip when data-src is set, otherwise a labelled placeholder */
.flow-slot { position: relative; overflow: hidden; border-radius: 1.125rem; background: radial-gradient(120% 90% at 30% 20%, #2b3a2f, #0e1511); border: 1px dashed rgba(227,180,104,.45); aspect-ratio: 16 / 9; }
.flow-slot video, .flow-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flow-slot.filled { border: 0; }
.flow-slot .flow-tag { position: absolute; left: 0.875rem; bottom: 0.75rem; right: 0.875rem; display: grid; gap: 0.25rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.flow-slot .flow-tag small { text-transform: none; letter-spacing: 0; color: var(--fern); font-size: .72rem; line-height: 1.4; }
.flow-slot.filled .flow-tag { display: none; }

/* footer */
.site-foot { border-top: 1px solid var(--moss); }
.site-foot .wrap { padding-block: 2.25rem; display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
.site-foot h4 { margin: 0 0 0.625rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; color: var(--fern); }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--mist); }
.site-foot .fine { grid-column: 1 / -1; font-family: var(--mono); font-size: .72rem; color: var(--fern); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; border-top: 1px solid var(--moss); padding-top: 1.125rem; }
@media (max-width: 700px) { .site-foot .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .site-foot .wrap > div:first-child { grid-column: 1 / -1; } }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(1.75rem); }
.no-motion .rv, .rv.in { opacity: 1; transform: none; }
.rv.in { transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }