@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;700;800&family=Manrope:wght@400;500;600;700;800&family=Source+Serif+4:wght@600&display=swap');

:root{
  --color-bg:#FAF8F5;
  --color-text:#04261E;
  --color-divider:color-mix(in srgb, #04261E 16%, transparent);
  --color-neutral-100:color-mix(in oklch, white 94%, #04261E 6%);
  --color-neutral-200:color-mix(in oklch, white 84%, #04261E 16%);
  --color-neutral-300:color-mix(in oklch, white 70%, #04261E 30%);
  --color-neutral-400:color-mix(in oklch, white 54%, #04261E 46%);
  --color-neutral-500:color-mix(in oklch, white 38%, #04261E 62%);
  --color-neutral-600:color-mix(in oklch, white 24%, #04261E 76%);
  --color-neutral-700:color-mix(in oklch, white 12%, #04261E 88%);
  --color-neutral-800:color-mix(in oklch, black 10%, #04261E 90%);
  --color-neutral-900:color-mix(in oklch, black 24%, #04261E 76%);
  --color-accent:#E7390D;
  --color-accent-100:color-mix(in oklch, white 92%, #E7390D 8%);
  --color-accent-200:color-mix(in oklch, white 80%, #E7390D 20%);
  --color-accent-300:color-mix(in oklch, white 58%, #E7390D 42%);
  --color-accent-400:color-mix(in oklch, white 32%, #E7390D 68%);
  --color-accent-500:color-mix(in oklch, white 12%, #E7390D 88%);
  --color-accent-600:#E7390D;
  --color-accent-700:color-mix(in oklch, black 22%, #E7390D 78%);
  --color-accent-800:color-mix(in oklch, black 42%, #E7390D 58%);
  --color-accent-900:color-mix(in oklch, black 62%, #E7390D 38%);
  --color-accent-2:#084A24;
  --color-accent-2-100:color-mix(in oklch, white 92%, #084A24 8%);
  --color-accent-2-200:color-mix(in oklch, white 80%, #084A24 20%);
  --color-accent-2-300:color-mix(in oklch, white 58%, #084A24 42%);
  --color-accent-2-400:color-mix(in oklch, white 32%, #084A24 68%);
  --color-accent-2-500:color-mix(in oklch, white 12%, #084A24 88%);
  --color-accent-2-600:#084A24;
  --color-accent-2-700:color-mix(in oklch, black 22%, #084A24 78%);
  --color-accent-2-800:color-mix(in oklch, black 42%, #084A24 58%);
  --color-accent-2-900:color-mix(in oklch, black 62%, #084A24 38%);
  --font-heading:"Source Serif 4", system-ui, sans-serif;
  --font-heading-weight:600;
  --radius-md:2px;
  --shadow-sm:0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md:0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:'Manrope',system-ui,sans-serif;font-size:15px;line-height:1.55}
img{display:block;max-width:100%}
a{color:var(--color-accent-700);text-decoration:none}
a:hover{color:var(--color-accent-900)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

.cc-nav{display:flex;align-items:center;justify-content:space-between;padding:26px 56px;max-width:1232px;margin:0 auto}
.cc-brand{font-family:'Zilla Slab',ui-serif,serif;font-weight:800;font-size:21px;letter-spacing:-0.01em;color:var(--color-text);text-decoration:none}
.cc-links{display:flex;gap:32px;align-items:center;font-size:14.5px;font-weight:600}
.cc-links a{color:var(--color-text);text-decoration:none}
.cc-links a:hover{color:var(--color-accent-700)}
.cc-links a[aria-current="page"]{color:var(--color-accent-700)}
.cc-wrap{padding:0 56px;max-width:1232px;margin:0 auto}
.cc-burger{display:none;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.cc-burger span{display:block;width:22px;height:2px;background:var(--color-text);transition:transform .18s,opacity .18s}
.cc-burger-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.cc-burger-open span:nth-child(2){opacity:0}
.cc-burger-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.tap-link{display:inline-flex;align-items:center;gap:8px;font-family:'Zilla Slab',ui-serif,serif;font-weight:700;font-size:17px;color:var(--color-accent-700);text-decoration:none}
.social-link{color:var(--color-neutral-700);display:flex}
.social-link:hover{color:var(--color-accent-700)}

.pf-tile,.rw-tile,.rp-tile{cursor:pointer;border:0;background:none;text-align:left;padding:0;font:inherit;display:block;width:100%}

.card{display:flex;flex-direction:column;gap:10px;padding:15px;border-radius:var(--radius-md);background:var(--color-neutral-100)}
.card-title{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:17px;line-height:1.2}
.card-body{margin:0;font-size:13px;opacity:.8;flex:1}
.elev-sm{box-shadow:var(--shadow-sm)}

.tag{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.02em;padding:3px 10px;border-radius:1.5px}
.tag-accent{background:var(--color-accent-100);color:var(--color-accent-800)}
.tag-accent-2{background:var(--color-accent-2-100);color:var(--color-accent-2-800)}
.tag-neutral{background:var(--color-neutral-100);color:var(--color-neutral-800)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-decoration:none;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:14px;line-height:1.2;color:var(--color-text);background:transparent;border:1px solid transparent;padding:10px 18px;border-radius:var(--radius-md)}
.btn-primary{background:var(--color-accent);color:var(--color-bg)}
.btn-primary:hover{background:var(--color-accent-600)}
.btn-primary:active{background:var(--color-accent-700)}
.btn-ghost{color:var(--color-text);padding-inline:5px}
.btn-ghost:hover{background:color-mix(in srgb, var(--color-text) 10%, transparent)}
.btn-ghost:active{background:color-mix(in srgb, var(--color-text) 18%, transparent)}

.halftone{position:relative;filter:grayscale(.35) contrast(1.15);overflow:hidden}
.halftone::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(0,0,0,.22) 30%,transparent 32%);background-size:3px 3px;mix-blend-mode:multiply}

.cs-back{display:inline-flex;align-items:center;gap:8px;font-family:'Zilla Slab',ui-serif,serif;font-weight:700;font-size:14px;color:var(--color-accent-700);text-decoration:none;margin-bottom:24px}
.cs-entry{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:center;padding:44px 0;border-top:1px solid var(--color-divider);text-decoration:none;color:inherit}
.cs-entry:first-child{border-top:0}
.cs-link{text-decoration:none;color:inherit;display:block}
.cs-link:hover .cs-title{color:var(--color-accent-700)}
.cs-subtitle{font-weight:700}

.modal-backdrop{position:fixed;inset:0;background:rgba(20,18,17,.72);display:flex;align-items:center;justify-content:center;padding:32px;z-index:100}
.modal-close{position:absolute;top:16px;right:16px;z-index:5;transform:translateZ(0);width:36px;height:36px;border:0;border-radius:50%;background:var(--color-bg);color:var(--color-text);display:flex;align-items:center;justify-content:center;padding:0;font-size:18px;line-height:1;cursor:pointer;font-family:'Zilla Slab',ui-serif,serif}
.modal-fullscreen{position:absolute;top:60px;right:16px;z-index:5;transform:translateZ(0);width:36px;height:36px;border:0;border-radius:50%;background:var(--color-text);color:var(--color-bg);display:none;align-items:center;justify-content:center;padding:0;cursor:pointer}
.modal-fullscreen-active{background:var(--color-bg);color:var(--color-text)}

/* display:block matters here, not just cosmetic: iframe defaults to inline,
   which reserves baseline/descender space below it inside its container —
   a few phantom pixels taller than the iframe itself, enough to tip a
   height-constrained ancestor (like the wrapper in :fullscreen below) into
   overflow and a scrollbar. */
.modal-backdrop iframe{scrollbar-width:none;-ms-overflow-style:none;display:block}
.modal-backdrop iframe::-webkit-scrollbar{display:none;width:0;height:0}

/* The dialog itself (max-height:88vh;overflow:auto, set inline) is the one
   remaining overflow:auto element in the chain — a sub-pixel content/viewport
   mismatch there (font metrics can differ slightly by OS/browser) can draw an
   empty scrollbar track even with nothing functionally to scroll. Hide the
   track the same way as the iframes; overflow:auto itself is left in place so
   genuinely long content (case-study copy, etc.) still scrolls via wheel/touch/
   keyboard, just without a visible scrollbar. */
.modal-backdrop [role="dialog"]{scrollbar-width:none;-ms-overflow-style:none}
.modal-backdrop [role="dialog"]::-webkit-scrollbar{display:none;width:0;height:0}

/* Wraps the embed + both buttons so requestFullscreen() (called on this wrapper,
   not the bare iframe) puts all three in the browser's fullscreen top layer —
   otherwise sibling buttons are excluded from fullscreen rendering entirely.
   width/height:100% keeps the iframe's own height:100% resolving correctly
   through this extra layer in normal (non-fullscreen) view. overflow:hidden
   throughout is a defensive backstop so no scrollbar can appear on the
   wrapper chain itself even from a sub-pixel rounding mismatch. */
.modal-fs-wrapper{position:relative;width:100%;height:100%;overflow:hidden}
.modal-fs-wrapper:fullscreen{width:100vw;height:100vh;height:100dvh;background:#000}
.modal-fs-wrapper:fullscreen #wm-embed-wrap{height:100%;overflow:hidden}
.modal-fs-wrapper:fullscreen #wm-embed-wrap>div{aspect-ratio:auto !important;height:100% !important;overflow:hidden}

/* CSS-only fullscreen fallback for iOS, where the real Fullscreen API isn't
   available on iframes. The embed covers the viewport directly; the close
   and fullscreen buttons switch to fixed positioning (same offsets) so they
   stay reachable on top of it instead of being covered by the maximized iframe. */
.modal-embed-maximized{position:fixed !important;inset:0 !important;width:100vw !important;height:100vh !important;height:100dvh !important;z-index:200;background:#000}
.modal-control-maximized{position:fixed !important;z-index:201}

@media (max-width:480px){
  .cc-wrap{padding:0 clamp(16px,5vw,24px) !important}
  .cc-nav{padding:clamp(16px,5vw,20px) clamp(16px,5vw,24px) !important;position:relative}
  .cc-burger{display:flex}
  .cc-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-bg);flex-direction:column;gap:0;padding:8px 0;box-shadow:var(--shadow-md);z-index:50}
  .cc-links.cc-links-open{display:flex}
  .cc-links a{padding:14px clamp(16px,5vw,24px)}
  .cc-brand{line-height:1}
  .tap-link{padding:11px 0}
  .cs-back{padding:12px 0}
  .social-link{width:44px;height:44px;align-items:center;justify-content:center}
  .btn-ghost{min-height:44px}
  .img-text-grid{grid-template-columns:1fr !important;gap:24px !important}
  .contact-grid{grid-template-columns:1fr !important;gap:24px !important}
  .contact-grid .contact-img{order:-1}
  .card-grid{grid-template-columns:1fr !important;gap:clamp(16px,4vw,20px) !important}
  .cta-grid{grid-template-columns:1fr !important;gap:clamp(12px,4vw,20px) !important}
  .cta-bar{width:100% !important;height:4px !important;min-height:4px !important}
  .bio-grid{grid-template-columns:1fr !important;gap:clamp(20px,5vw,28px) !important}
  .cs-grid{grid-template-columns:1fr !important;gap:clamp(28px,6vw,40px) !important}
  .cs-entry{grid-template-columns:1fr !important;gap:20px !important}
}