/* Bagwells Ltd: shared styles (Tailwind Play CDN handles utilities) */
:root { --forest:#003300; --deep:#002400; --gold:#D5D16E; --olive:#CCCC66; --cream:#F8F6EA; --ink:#142014; }
html { scroll-padding-top: 88px; }
body { overflow-x: hidden; }
.grecaptcha-badge { visibility: hidden; }

/* Type scale */
.h-hero { font-size: clamp(2.9rem, 1.6rem + 5.4vw, 6rem); line-height: .98; letter-spacing: -0.025em; font-weight: 700; }
.h-display { font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem); line-height: 1.02; letter-spacing: -0.022em; font-weight: 700; }
.h-section { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.018em; font-weight: 700; }
.stat-num { font-size: clamp(2.6rem, 1.8rem + 2.6vw, 3.8rem); line-height: 1; letter-spacing: -0.02em; font-weight: 700; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

/* Header */
.site-header { background: rgba(0, 51, 0, .97); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid rgba(213, 209, 110, .18); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.nav-link { color: rgba(248, 246, 234, .82); position: relative; padding: .4rem 0; transition: color .2s; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--gold); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* Textures */
.hero-texture {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(213, 209, 110, .14), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(0, 0, 0, .35), transparent 60%),
    repeating-linear-gradient(135deg, rgba(213, 209, 110, .045) 0 1px, transparent 1px 26px);
}
.footer-lines { background: repeating-linear-gradient(135deg, rgba(213, 209, 110, .03) 0 1px, transparent 1px 26px); }

/* Buttons */
.btn-primary, .btn-ghost, .btn-dark, .btn-outline-dark { white-space: nowrap; display: inline-flex; align-items: center; gap: .6rem; border-radius: 999px; font-weight: 700; padding: 1rem 1.6rem; min-height: 52px; transition: transform .2s ease, box-shadow .2s ease, background-color .2s, color .2s; }
.btn-primary { background: var(--gold); color: var(--forest); box-shadow: 0 10px 24px -10px rgba(213, 209, 110, .7); }
.btn-primary:hover { transform: translateY(-2px); background: #e2de86; box-shadow: 0 16px 30px -12px rgba(213, 209, 110, .8); }
.btn-primary:disabled { opacity: .6; cursor: progress; transform: none; }
.btn-ghost { color: var(--cream); border: 1.5px solid rgba(248, 246, 234, .35); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn-dark { background: var(--forest); color: var(--cream); }
.btn-dark:hover { background: var(--deep); transform: translateY(-2px); }
.btn-outline-dark { border: 1.5px solid var(--forest); color: var(--forest); }
.btn-outline-dark:hover { background: var(--forest); color: var(--gold); transform: translateY(-2px); }
.btn-lift { transition: transform .2s; } .btn-lift:hover { transform: translateY(-2px); }
.link-underline { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 2px no-repeat; transition: background-size .3s; }
.link-underline:hover { background-size: 100% 100%; }

/* Hero collage (their real photos, sized for their resolution) */
.collage { position: absolute; margin: 0; background: #fff; padding: 8px; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); transition: transform .5s ease; }
.collage img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }
.collage-a { width: 64%; right: 0; top: 0; transform: rotate(2.5deg); z-index: 10; }
.collage-b { width: 52%; left: 0; top: 22%; transform: rotate(-3deg); z-index: 20; }
.collage-c { width: 46%; right: 6%; bottom: 4%; transform: rotate(1.5deg); z-index: 15; }
.collage:hover { transform: rotate(0) scale(1.03); z-index: 40; }

.photo-frame { background: #fff; padding: 8px; border-radius: 14px; box-shadow: 0 28px 50px -24px rgba(0, 0, 0, .45); }
.photo-frame img { border-radius: 8px; display: block; }
.img-zoom { overflow: hidden; } .img-zoom img { transition: transform .8s ease; } .img-zoom:hover img { transform: scale(1.04); }

/* Cards */
.svc-card { display: block; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid rgba(0, 51, 0, .08); box-shadow: 0 20px 40px -30px rgba(0, 51, 0, .5); transition: transform .35s ease, box-shadow .35s ease; }
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -30px rgba(0, 51, 0, .55); }
.svc-arrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; background: var(--forest); color: var(--gold); transition: transform .3s; }
.svc-card:hover .svc-arrow { transform: rotate(-45deg); }
.tick { position: relative; padding-left: 1.5rem; }
.tick::before { content: ""; position: absolute; left: 0; top: .55em; width: .65rem; height: .65rem; border-radius: 2px; background: var(--gold); box-shadow: inset 0 0 0 2px var(--forest); }
.client-pill { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.25rem; border-radius: 14px; background: rgba(248, 246, 234, .06); border: 1px solid rgba(213, 209, 110, .22); color: var(--cream); font-weight: 600; transition: background .25s, border-color .25s, transform .25s; }
.client-pill svg { color: var(--gold); flex-shrink: 0; }
.client-pill:hover { background: rgba(213, 209, 110, .12); border-color: var(--gold); transform: translateX(4px); }
.work-tile { position: relative; display: block; overflow: hidden; border-radius: 18px; min-height: 240px; }
.work-tile img { transition: transform .8s ease; }
.work-tile:hover img { transform: scale(1.06); }
.work-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.25rem 1.1rem; color: var(--cream); font-family: "Zilla Slab", serif; font-size: 1.35rem; font-weight: 600; background: linear-gradient(transparent, rgba(0, 36, 0, .88)); }
.step-num { font-family: "Zilla Slab", serif; font-weight: 700; font-size: 1rem; color: var(--forest); background: var(--gold); border-radius: 999px; width: 44px; height: 44px; display: grid; place-items: center; }
.accred-card { background: #fff; border-radius: 16px; padding: 1.5rem 1rem; text-align: center; border: 1px solid rgba(0, 51, 0, .08); transition: transform .3s, box-shadow .3s; }
.accred-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(0, 51, 0, .45); }
.ic-badge { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--forest); color: var(--gold); }
.ic-badge-dark { background: var(--gold); color: var(--forest); }
.dark-card { border-radius: 18px; padding: 1.75rem; background: rgba(248, 246, 234, .05); border: 1px solid rgba(213, 209, 110, .2); transition: border-color .25s, transform .25s; }
.dark-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.light-card { border-radius: 18px; padding: 2rem; background: var(--cream); border: 1px solid rgba(0, 51, 0, .08); transition: transform .3s, box-shadow .3s; }
.light-card:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -28px rgba(0, 51, 0, .5); }
.dir-card { display: flex; align-items: center; gap: 1.25rem; background: #fff; border-radius: 18px; padding: 1.5rem; border: 1px solid rgba(0, 51, 0, .08); }
.dir-mono { width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; background: var(--forest); color: var(--gold); font-size: 1.4rem; font-weight: 700; flex-shrink: 0; }
.contact-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(213, 209, 110, .14); color: var(--gold); flex-shrink: 0; }
.proj-card { cursor: zoom-in; }
.proj-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: 12px; }

/* Forms */
.form-shell { background: rgba(0, 20, 0, .35); border: 1px solid rgba(213, 209, 110, .25); border-radius: 22px; padding: clamp(1.25rem, 3vw, 2.5rem); backdrop-filter: blur(6px); }
.form-shell-light { background: var(--cream); border: 1px solid rgba(0, 51, 0, .1); border-radius: 22px; padding: clamp(1.25rem, 3vw, 2.5rem); }
.form-label, .form-label-dark { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .45rem; }
.form-label { color: var(--forest); } .form-label-dark { color: rgba(248, 246, 234, .85); }
.field, .field-dark { width: 100%; border-radius: 12px; padding: .9rem 1rem; font-size: 1rem; min-height: 52px; transition: border-color .2s, box-shadow .2s; }
.field { background: #fff; border: 1.5px solid rgba(0, 51, 0, .18); color: var(--ink); }
.field-dark { background: rgba(248, 246, 234, .96); border: 1.5px solid transparent; color: var(--ink); }
.field:focus, .field-dark:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(213, 209, 110, .35); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { border-radius: 12px; padding: .75rem 1rem; }
.form-status.is-ok { background: var(--gold); color: var(--forest); }
.form-status.is-err { background: #fde8e6; color: #8a1c12; }

/* FAQ accordion */
.faq { border-bottom: 1px solid rgba(0, 51, 0, .15); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1.5px solid var(--forest); color: var(--forest); flex-shrink: 0; transition: transform .3s, background .3s; }
.faq[open] .faq-ic { transform: rotate(45deg); background: var(--forest); color: var(--gold); }

/* Lightbox */
.lightbox { background: transparent; border: 0; padding: 1rem; max-width: min(1000px, 96vw); width: 100%; }
.lightbox::backdrop { background: rgba(0, 20, 0, .9); backdrop-filter: blur(4px); }
.lightbox img { width: 100%; height: auto; }

/* Mobile sticky CTA */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; height: 60px; box-shadow: 0 -8px 24px -10px rgba(0, 0, 0, .4); }
@media (max-width: 1023px) { body { padding-bottom: 60px; } }

/* Motion */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
.hero-in { animation: heroIn .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s); }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (max-width: 639px) {
  .collage-a { width: 74%; }
  .collage-b { width: 62%; top: 30%; }
  .collage-c { display: none; }
}

/* Home: equal-height service cards */
.svc-card { display: flex; flex-direction: column; height: 100%; }
.svc-media { flex-shrink: 0; }

/* Home: recent work cards, photo matted so it shows near native size (max ~480px) */
.work-card { display: block; background: #fff; border-radius: 20px; padding: 12px; border: 1px solid rgba(0, 51, 0, .08); box-shadow: 0 20px 40px -30px rgba(0, 51, 0, .5); transition: transform .35s ease, box-shadow .35s ease; max-width: 480px; width: 100%; justify-self: center; }
.work-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -30px rgba(0, 51, 0, .55); }
.work-mat { display: block; overflow: hidden; border-radius: 12px; }
.work-mat img { transition: transform .8s ease; }
.work-card:hover .work-mat img { transform: scale(1.04); }
.work-card:hover .svc-arrow { transform: rotate(-45deg); }