/* Brand palette and persistent light/dark appearance settings. */
:root {
  color-scheme: dark;
  --paper: #191a17;
  --paper-alt: #23241f;
  --paper-rgb: 25, 26, 23;
  --ink: #f3eee1;
  --ink-muted: #f5f3ef;
  --rust: #c9a227;
  --rust-light: #d97a4a;
  --rust-wash: rgba(184, 71, 31, 0.1);
  --line: rgba(243, 238, 225, 0.15);
  --line-strong: rgba(243, 238, 225, 0.37);
  --sans: "Oswald", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --container: 1180px;

  --orange: var(--rust);
  --green: #111914;
  --sage: #a2a98e;
  --muted: var(--ink-muted);
  --display: var(--sans);
  --body: "DM Sans", Arial, sans-serif;
  --surface: #20211d;
  --surface-raised: #292a24;
  --hero-gold: #e2bb54;
}

:root[data-theme="light"] {
  color-scheme: light;
  --paper: #f3eee1;
  --paper-alt: #e9e0cb;
  --paper-rgb: 243, 238, 225;
  --ink: #1c1a16;
  --ink-muted: #6b6355;
  --rust: #c9ad65;
  --rust-light: #c9ad65;
  --rust-wash: rgba(184, 71, 31, 0.1);
  --line: rgba(28, 26, 22, 0.18);
  --line-strong: rgba(28, 26, 22, 0.4);

  --orange: var(--rust);
  --green: #273a31;
  --sage: #78826a;
  --muted: var(--ink-muted);
  --surface: #faf7ef;
  --surface-raised: #eee7d7;
  --hero-gold: #c9a227;
}

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body { background-color: var(--paper) !important; color: var(--ink) !important; transition: background-color .24s ease, color .24s ease; }
.skip-link { background: var(--surface); color: var(--ink); }
.profile-reader { width:min(1080px,calc(100% - 28px)); max-width:none; max-height:92svh; padding:0; overflow:hidden; border:1px solid rgba(243,238,225,.2); background:#191a17; color:#f3eee1; box-shadow:0 30px 100px rgba(0,0,0,.55); }
.profile-reader::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(6px); }
.profile-reader-shell { display:flex; max-height:92svh; flex-direction:column; }
.profile-reader-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 24px; border-bottom:1px solid rgba(243,238,225,.15); }
.profile-reader-header>div>span { color:#d1ad36; font-family:var(--mono); font-size:8px; letter-spacing:.15em; }
.profile-reader-header h2 { margin:5px 0 0; font-family:var(--display); font-size:23px; font-weight:500; }
.profile-reader-close { display:grid; width:38px; height:38px; flex:none; place-items:center; border:1px solid rgba(243,238,225,.28); background:transparent; color:#f3eee1; font-size:25px; line-height:1; cursor:pointer; }
.profile-reader-stage { display:grid; min-height:0; grid-template-columns:52px minmax(0,1fr) 52px; align-items:center; gap:18px; padding:20px; background:#11120f; }
.profile-reader-page { display:grid; min-width:0; min-height:220px; place-items:center; margin:0; }
.profile-reader-page img { display:block; width:auto; max-width:100%; height:auto; max-height:min(66svh,690px); object-fit:contain; box-shadow:0 14px 40px rgba(0,0,0,.38); }
.profile-reader-page img.is-turning-forward { animation:profile-page-forward .32s ease both; }
.profile-reader-page img.is-turning-back { animation:profile-page-back .32s ease both; }
@keyframes profile-page-forward { from { opacity:.55; transform:perspective(1000px) rotateY(-9deg); } to { opacity:1; transform:perspective(1000px) rotateY(0); } }
@keyframes profile-page-back { from { opacity:.55; transform:perspective(1000px) rotateY(9deg); } to { opacity:1; transform:perspective(1000px) rotateY(0); } }
.profile-reader-arrow { display:grid; width:42px; height:42px; place-items:center; border:1px solid rgba(243,238,225,.28); border-radius:50%; background:transparent; color:#f3eee1; font-size:18px; cursor:pointer; }
.profile-reader-arrow:hover:not(:disabled),.profile-reader-close:hover { border-color:#d1ad36; color:#d1ad36; }
.profile-reader-arrow:disabled { opacity:.28; cursor:default; }
.profile-reader-controls { display:grid; grid-template-columns:minmax(180px,1fr) auto; align-items:center; gap:28px; padding:17px 24px 20px; border-top:1px solid rgba(243,238,225,.15); }
.profile-reader-pagination { display:flex; align-items:center; gap:16px; color:#d1ad36; font-family:var(--mono); font-size:9px; letter-spacing:.1em; }
.profile-reader-pagination input { width:100%; accent-color:#d1ad36; cursor:pointer; }
.profile-reader-downloads { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.profile-reader-downloads a { padding:10px 12px; border:1px solid rgba(243,238,225,.25); color:#f3eee1; font-family:var(--mono); font-size:8px; letter-spacing:.08em; text-decoration:none; white-space:nowrap; }
.profile-reader-downloads a:hover { border-color:#d1ad36; color:#d1ad36; }
.container-shell { width: min(var(--container), calc(100% - 112px)); }

.site-header { background: rgba(var(--paper-rgb), .96); border-color: var(--line); }
.wordmark { width:174px; flex:none; color:var(--ink); }
.wordmark-logo { display:block; width:100%; height:auto; }
.footer-wordmark { min-width:174px; }
.nav-link { color: var(--ink-muted); }
.nav-link:hover,.nav-link.active { color: var(--rust); }
.nav-cta { background: var(--ink); color: var(--paper); }
.nav-cta:hover { background: var(--rust); color: #fff; }
.drop-menu,.mobile-panel { background: var(--paper); border-color: var(--line); }
.drop-menu>a,.mobile-panel>a { color: var(--ink); border-color: var(--line); }
.announcement { background: var(--green); }

.theme-toggle { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-family: var(--body); font-size: 10px; font-weight: 550; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.theme-toggle:hover { border-color: var(--rust); background: var(--rust-wash); }
.theme-toggle-icon { flex: none; }
.theme-toggle:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

.ticker,.site-footer { background: var(--paper-alt); border-color: var(--line); }
.intro-section,.work-section,.clients-section { background: var(--paper); }
.intro-section { background:#263a32; color:#f3eee1; }
.intro-growth-kicker { margin:0 0 8px; color:var(--rust); font-family:var(--mono); font-size:9px; letter-spacing:.15em; }
.owner-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.75fr); align-items:center; gap:clamp(36px,7vw,90px); }
.owner-copy h2 { max-width:680px; margin:0; color:#f3eee1; font-size:clamp(42px,5.2vw,64px); line-height:1.08; }
.owner-role { margin:12px 0 22px; color:var(--rust); font-family:var(--mono); font-size:10px; letter-spacing:.08em; }
.owner-bio { max-width:650px; margin:0 0 14px; color:#c8d2c8; font-size:14px; line-height:1.8; }
.owner-photo-wrap { justify-self:end; width:100%; max-width:440px; overflow:hidden; border:1px solid rgba(243,238,225,.2); border-radius:18px; background:var(--surface); box-shadow:0 20px 48px rgba(0,0,0,.22); }
.owner-photo { display:block; width:100%; aspect-ratio:1; object-fit:cover; object-position:center 35%; }
.handwritten-note,.intro-details>p,.heading-aside,.service-card>p,.clients-copy>p { color: var(--ink-muted); }
.intro-playbook-button { display:flex; width:92px; height:92px; align-items:center; justify-content:center; flex-direction:column; gap:5px; margin-top:28px; padding:10px; border:1px solid var(--line-strong); border-radius:20px; background:var(--surface); color:var(--ink); cursor:pointer; transition:border-color .2s, background .2s, transform .2s; }
.intro-playbook-button svg { width:43px; height:43px; }
.intro-playbook-button span { color:var(--ink-muted); font-family:var(--mono); font-size:6px; letter-spacing:.09em; white-space:nowrap; }
.intro-playbook-button:hover { transform:translateY(-3px); border-color:var(--rust); background:var(--surface-raised); }
.intro-playbook-button:hover span { color:var(--rust); }
.intro-playbook-button:focus-visible { outline:2px solid var(--rust); outline-offset:4px; }
.whatsapp-float { position:fixed; z-index:80; right:24px; bottom:24px; display:inline-flex; min-height:54px; align-items:center; justify-content:center; gap:10px; padding:0 19px 0 15px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:#20b85a; box-shadow:0 8px 28px rgba(0,0,0,.3); color:#fff; font-family:var(--body); font-size:13px; font-weight:650; text-decoration:none; transition:background .2s,transform .2s,box-shadow .2s; }
.whatsapp-float:hover { transform:translateY(-3px); background:#169c49; box-shadow:0 12px 32px rgba(0,0,0,.36); }
.whatsapp-float svg { width:25px; height:25px; flex:none; }
.whatsapp-float:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
.service-grid { background: var(--line); }
.service-card { background: var(--surface); color: var(--ink); }
.service-card-catalog { min-height:330px; padding:0 0 20px; overflow:hidden; background:var(--surface); color:var(--ink); }
.service-card-catalog>img { display:block; box-sizing:border-box; width:100%; height:325px; margin-bottom:18px; object-fit:cover; background:var(--paper-alt); }
.service-card-catalog .service-num { margin:0 20px 8px; color:var(--rust); font-family:var(--mono); font-size:8px; letter-spacing:.12em; }
.service-card-catalog h3 { max-width:calc(100% - 56px); margin:0 20px; color:var(--ink); font-family:var(--body); font-size:18px; font-weight:650; letter-spacing:-.02em; line-height:1.3; }
.service-card-catalog .service-arrow { right:18px; bottom:18px; color:var(--rust); }
.service-card-has-description>p { max-width:none; margin:10px 20px 22px; padding-right:8px; color:var(--ink-muted); font-size:11px; line-height:1.65; }
.service-card-sage { background: var(--paper-alt); }
.service-card-dark { background: #273a31; color: #fff; }
.service-card-dark>p { color: #d5d9d0; }
.service-card-orange { background: var(--rust); color: #fff; }
.filter-button { background: var(--surface); border-color: var(--line); color: var(--ink-muted); }
.filter-button:hover,.filter-button.is-selected { background: var(--rust); border-color: var(--rust); color: #fff; }
.work-image-badge { background: rgba(var(--paper-rgb), .95); color: var(--ink); }
.work-disclosure,.work-note,.value-label,.clients-credit,.footer-top-link,.copyright { color: var(--ink-muted); }
.values-strip { background: var(--paper-alt); border-color: var(--line); }
.value-block { border-color: var(--line); }
.client-band { border-color: var(--line); }
.client-band>span:nth-child(4) { color: var(--ink-muted); }
.client-divider { background: var(--line); }
.contact-section,.promise-section { background: #273a31; }
.contact-form { background: var(--surface); color: var(--ink); }
.contact-form>input,.contact-form>select,.contact-form>textarea { color: var(--ink); border-color: var(--line); }
.contact-form>input::placeholder,.contact-form>textarea::placeholder,.contact-form>select { color: var(--ink-muted); }
.site-footer { background: var(--paper-alt); }
.footer-top { border-color: var(--line); }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; padding:13px 0; border-bottom:1px solid var(--line); }
.footer-links a { color:var(--ink-muted); font-size:9px; text-decoration:none; }
.footer-links a:hover { color:var(--rust); }
.footer-social { display:flex; justify-content:flex-end; gap:15px; padding:12px 0; border-bottom:1px solid var(--line); }
.footer-social a { display:inline-flex; align-items:center; gap:6px; color:var(--ink-muted); font-size:9px; text-decoration:none; }
.footer-social a:hover { color:var(--rust); }
.footer-social svg { display:block; width:17px; height:17px; flex:none; }
.footer-bottom>div>span:first-child { color: var(--ink-muted); }
.footer-bottom>div>span:nth-child(2),.footer-bottom>div>a { color: var(--ink); }
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: var(--paper-alt); }

:root .hero-caption { border: 1px solid var(--line); background: rgba(25, 26, 23, .94); color: var(--ink); }
:root .hero-caption .caption-kicker,
:root .hero-caption>p { color: var(--ink-muted); }
:root .hero-caption h2 { color: var(--ink); }

@media (max-width: 760px) {
  .whatsapp-float { right:14px; bottom:14px; min-height:50px; gap:8px; padding-inline:14px; font-size:12px; }
  .whatsapp-float svg { width:23px; height:23px; }
  .owner-grid { grid-template-columns:1fr; gap:28px; }
  .owner-photo-wrap { justify-self:start; max-width:420px; }
  .owner-copy h2 { font-size:clamp(38px,9vw,54px); }
  .owner-bio { font-size:13px; }
  .service-card-catalog { min-height:278px; padding:0 0 18px; }
  .service-card-catalog>img { height:148px; margin-bottom:14px; padding:10px; }
  .service-card-catalog .service-num { margin-inline:14px; }
  .service-card-catalog h3 { max-width:calc(100% - 42px); margin-inline:14px; font-size:15px; }
  .service-card-catalog .service-arrow { right:12px; bottom:13px; }
  .profile-reader-header { padding:13px 15px; }
  .profile-reader-stage { grid-template-columns:34px minmax(0,1fr) 34px; gap:5px; padding:10px 6px; }
  .profile-reader-page { min-height:180px; }
  .profile-reader-page img { max-height:58svh; }
  .profile-reader-arrow { width:32px; height:32px; font-size:15px; }
  .profile-reader-controls { grid-template-columns:1fr; gap:14px; padding:12px 15px 15px; }
  .profile-reader-downloads { justify-content:center; }
  .wordmark { width:136px; }
  .footer-wordmark { width:136px; min-width:136px; }
  .footer-social { justify-content:flex-start; }
  .theme-toggle { width: 36px; min-height: 36px; padding: 0; }
  .theme-toggle-label { display: none; }
}

@media (max-width: 600px) {
  #what-we-do .service-grid { grid-template-columns:1fr; gap:10px; padding:0; background:transparent; }
  #what-we-do .service-card-catalog { display:grid; min-height:0; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto; align-items:start; padding:16px 0 0; }
  #what-we-do .service-card-catalog .service-num { grid-column:1; grid-row:1; margin:0 18px 8px; }
  #what-we-do .service-card-catalog h3 { grid-column:1; grid-row:2; max-width:none; margin:0 44px 0 18px; font-size:17px; }
  #what-we-do .service-card-has-description>p { grid-column:1; grid-row:3; max-width:none; margin:8px 18px 0; padding:0; font-size:11px; line-height:1.6; }
  #what-we-do .service-card-catalog>img { grid-column:1; grid-row:4; width:100%; height:auto; min-height:0; aspect-ratio:16 / 9; margin:16px 0 0; padding:0; object-fit:cover; background:var(--paper-alt); }
  #what-we-do .service-card-catalog .service-arrow { top:14px; right:16px; bottom:auto; }
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  .theme-toggle { transition: none; }
  .profile-reader-page img { animation:none !important; }
}