/* Ket Marketing — shared styles */
:root {
  --paper:   #FFFFFF;
  --panel:   #F3F6F4;
  --ink:     #0C0F0E;
  --ink-2:   #383D39;
  --mute:    #626864;
  --line:    #E4E8E5;
  --line-dk: #232B27;
  --green:      #00DD94;
  --green-mid:  #00B37A;
  --green-deep: #007E58;

  --head: "Archivo", -apple-system, system-ui, sans-serif;
  --body: "Manrope", -apple-system, system-ui, sans-serif;

  --maxw: 1200px;
  --pad: clamp(22px, 5.5vw, 84px);
  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); color: var(--ink); background: var(--paper); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--green); color: var(--ink); }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

h1, h2, h3 { font-family: var(--head); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; color: var(--ink); }

.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--body); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); }
.eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--green); }
.dark .eyebrow { color: var(--green); }

/* signature squiggle */
.stroke { position: relative; white-space: nowrap; color: var(--green-mid); }
.stroke > svg { position: absolute; left: -2%; bottom: -0.26em; width: 104%; height: 0.4em; overflow: visible; }
.stroke > svg path { fill: none; stroke: var(--green); stroke-width: 8; stroke-linecap: round; }
.dark .stroke { color: var(--green); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--body); font-weight: 700; font-size: 0.98rem; padding: 15px 28px; border-radius: 8px; text-decoration: none; border: none; cursor: pointer; transition: transform .18s var(--ease), background .18s var(--ease); }
.btn-green { background: var(--green); color: var(--ink); box-shadow: 0 12px 26px -14px rgba(0,221,148,0.7); }
.btn-green:hover { transform: translateY(-2px); background: #00c886; }
.btn-line { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-line:hover { border-color: var(--ink); transform: translateY(-2px); }
.dark .btn-line { color: #fff; border-color: #35403A; }
.dark .btn-line:hover { border-color: #fff; }

/* nav */
nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--line); transition: background .35s, border-color .35s; }
nav.nav--overlay:not(.scrolled) { background: transparent; border-bottom-color: transparent; }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logo img { height: 24px; width: auto; display: block; }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-links { display: flex; gap: 36px; }
.nav-links a { font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--ink); opacity: 0.66; transition: opacity .16s; }
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.menu-only { display: none; }
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; width: 22px; background: var(--ink); border-radius: 2px; transition: transform .22s var(--ease), opacity .18s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 921px) { nav.nav--overlay:not(.scrolled) .nav-links a { color: #fff; } }
nav.nav--overlay:not(.scrolled) .nav-toggle span { background: #fff; }
@media (max-width: 920px) {
  .nav-toggle { display: flex; }
  .nav-cta-btn { display: none; }
  .menu-only { display: block; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 6px 0 12px; box-shadow: 0 20px 40px -24px rgba(12,15,14,0.2); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { opacity: 1; font-size: 1.05rem; font-weight: 600; padding: 15px var(--pad); }
  .nav-links a.menu-only { color: var(--green-deep); }
}

/* section base */
.sec { padding: clamp(66px, 9vw, 128px) 0; }
.sec.panel { background: var(--panel); }
.sec.dark { background: var(--ink); color: #D6DAD7; }
.sec-head { max-width: 720px; margin-bottom: clamp(44px, 6vw, 72px); }
.sec-head .eyebrow { margin-bottom: 22px; }
.sec-head h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.dark .sec-head h2 { color: #fff; }
.sec-head p { margin-top: 20px; font-size: 1.1rem; color: var(--ink-2); max-width: 60ch; }
.dark .sec-head p { color: #AEB4AF; }

/* hero — full-bleed crossfade background */
.hero { position: relative; margin-top: -76px; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--ink); color: #fff; }
.hero .wrap { padding-top: calc(76px + clamp(30px, 5vw, 60px)); }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.hero-bg img.active { opacity: 1; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,9,0.66) 0%, rgba(8,10,9,0.78) 100%); }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-top: clamp(40px, 7vw, 84px); padding-bottom: clamp(40px, 7vw, 84px); text-align: center; }
.hero .eyebrow { margin-bottom: 26px; color: var(--green); justify-content: center; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); max-width: 18ch; letter-spacing: -0.035em; color: #fff; margin-left: auto; margin-right: auto; }
.hero .stroke { color: var(--green); }
.hero .sub { font-size: clamp(1.1rem, 1.55vw, 1.32rem); color: #D6DAD7; max-width: 56ch; margin: clamp(30px, 3.6vw, 46px) auto 0; font-weight: 500; line-height: 1.62; }
.hero-cta { margin-top: clamp(38px, 4.6vw, 54px); display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.trust { margin-top: clamp(40px, 6vw, 66px); border-top: 1px solid rgba(255,255,255,0.16); padding-top: 24px; display: flex; gap: clamp(24px, 5vw, 64px); flex-wrap: wrap; justify-content: center; }
.trust div { font-size: 0.95rem; color: #AEB4AF; font-weight: 500; }
.trust b { display: block; font-family: var(--head); font-weight: 800; font-size: 1.35rem; color: #fff; letter-spacing: -0.02em; margin-bottom: 3px; }

/* about — alternating text + image rows, with dividers */
.about-stack { display: grid; }
.about-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(38px, 5vw, 64px) 0; border-top: 1px solid var(--line); }
.about-row:first-child { border-top: none; padding-top: 0; }
.about-row:nth-child(even) .about-text { order: 2; }
.about-text h3 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -0.03em; color: var(--green-deep); margin-bottom: 14px; }
.about-text p { color: var(--ink-2); font-size: 1.06rem; max-width: 54ch; }
.about-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 26px 52px -34px rgba(12,15,14,0.36); }
@media (max-width: 820px) { .about-row { grid-template-columns: 1fr; gap: 20px; } .about-row:nth-child(even) .about-text { order: 0; } }

/* founders / leadership */
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 52px); }
.founder-av { width: 62px; height: 62px; border-radius: 50%; background: var(--green); color: var(--ink); font-family: var(--head); font-weight: 800; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.founder h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; }
.founder-role { display: block; color: var(--green-deep); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; margin: 6px 0 14px; }
.founder p { color: var(--ink-2); font-size: 1.02rem; max-width: 52ch; }
@media (max-width: 760px) { .founders { grid-template-columns: 1fr; gap: 40px; } }

/* blog social links */
.blog-social { display: flex; gap: 10px; flex-wrap: wrap; }
.blog-social a { font-weight: 700; font-size: 0.8rem; color: var(--green-deep); text-decoration: none; border: 1px solid var(--line); padding: 7px 15px; border-radius: 100px; transition: background .16s, color .16s, border-color .16s; }
.blog-social a:hover { background: var(--green); color: var(--ink); border-color: var(--green); }

/* why ket */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 52px); }
.why-item .n { font-family: var(--head); font-weight: 800; font-size: 1rem; color: var(--green-deep); }
.why-item h3 { font-size: 1.4rem; margin: 14px 0 10px; letter-spacing: -0.02em; }
.why-item p { color: var(--ink-2); font-size: 1rem; }
.dark .why-item h3 { color: #fff; }
.dark .why-item p { color: #AEB4AF; }
@media (max-width: 820px) { .why { grid-template-columns: 1fr; gap: 34px; } }

/* our family carousel (logo assets) */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.m-track { display: flex; align-items: center; width: max-content; animation: scroll 42s linear infinite; }
.marquee:hover .m-track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.brand-logo { flex: 0 0 auto; height: 46px; display: flex; align-items: center; padding: 0 clamp(22px, 3vw, 46px); font-family: var(--head); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; color: #9AA19B; white-space: nowrap; filter: grayscale(1); opacity: 0.8; transition: opacity .2s, color .2s; }
.brand-logo:hover { opacity: 1; color: var(--ink); }
.brand-logo img { height: 100%; width: auto; object-fit: contain; }
.dark .brand-logo { color: #7E877F; }
.dark .brand-logo:hover { color: #fff; }
.family-cta { margin-top: clamp(40px, 5vw, 60px); display: flex; }
@media (prefers-reduced-motion: reduce) { .m-track { animation: none; flex-wrap: wrap; } }

/* case study */
.case-wrap { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.case-media { border-radius: 20px; border: 1px solid var(--line-dk); background: linear-gradient(158deg, #143A2C 0%, #0F1A15 70%); position: relative; overflow: hidden; min-height: 340px; display: flex; align-items: center; justify-content: center; }
.case-media .ghost { width: 58%; opacity: 0.1; filter: brightness(0) invert(1); }
.case-media .m-label { position: absolute; left: 20px; bottom: 18px; color: var(--green); font-weight: 700; font-size: 0.82rem; }
.case-media .m-tick { position: absolute; left: 20px; top: 18px; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: var(--ink); font-weight: 800; font-size: 0.78rem; display: flex; align-items: center; justify-content: center; }
.case-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.case-head h2 { font-size: clamp(2.2rem, 5.5vw, 4rem); color: #fff; }
.case-head .where { font-weight: 700; font-size: 0.9rem; color: var(--green); text-transform: uppercase; letter-spacing: 0.06em; }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 52px); margin: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--line-dk); border-bottom: 1px solid var(--line-dk); padding: clamp(26px, 4vw, 40px) 0; }
.case-stats b { font-family: var(--head); font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.2rem); color: var(--green); display: block; line-height: 1; letter-spacing: -0.02em; }
.case-stats span { font-weight: 600; font-size: 0.9rem; color: #929A94; margin-top: 12px; display: block; }
.case-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: start; }
.case-cols .quote { font-family: var(--head); font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 2rem); color: #EBEDEA; line-height: 1.25; letter-spacing: -0.02em; }
.fill { border: 1px dashed var(--line-dk); border-radius: 10px; padding: 20px; color: #8B938D; font-size: 0.95rem; }
@media (max-width: 820px) { .case-wrap { grid-template-columns: 1fr; } .case-media { min-height: 220px; } }
@media (max-width: 680px) { .case-stats { grid-template-columns: 1fr; gap: 26px; } .case-cols { grid-template-columns: 1fr; } }

/* services */
.svc { border-top: 1px solid var(--line); }
.svc-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); padding: clamp(20px, 2.6vw, 28px) 0; text-decoration: none; color: var(--ink); position: relative; transition: padding-left .25s var(--ease); }
.svc-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--green); border-radius: 3px; transition: width .25s var(--ease); }
.svc-row:hover { padding-left: 24px; }
.svc-row:hover::before { width: 4px; }
.svc-name { font-family: var(--head); font-weight: 700; font-size: clamp(1.45rem, 3vw, 2.3rem); letter-spacing: -0.03em; }
.svc-desc { font-weight: 500; font-size: 1rem; color: var(--mute); text-align: right; max-width: 34ch; }
@media (max-width: 760px) { .svc-row { grid-template-columns: 1fr; } .svc-desc { text-align: left; margin-top: 6px; } }

/* contact */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact-grid h2 { font-size: clamp(2.3rem, 5.5vw, 4rem); color: #fff; }
.contact-lede { color: #AEB4AF; margin-top: 20px; max-width: 34ch; font-weight: 500; }
.contact-email { margin-top: 24px; font-weight: 700; font-size: 1.05rem; color: var(--green); }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
label { font-weight: 700; font-size: 0.8rem; color: #C4C9C5; }
input, textarea { background: #131A16; border: 1px solid var(--line-dk); border-radius: 10px; padding: 13px 15px; color: #fff; font-family: var(--body); font-size: 1rem; font-weight: 500; resize: vertical; transition: border-color .16s; }
input:focus, textarea:focus { outline: none; border-color: var(--green); }
input::placeholder, textarea::placeholder { color: #5A635C; }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.form-foot .note { font-size: 0.82rem; color: #7A837C; font-weight: 500; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } form { grid-template-columns: 1fr; } }

/* page header (interior pages) */
.page-header { padding: clamp(52px, 8vw, 104px) 0 clamp(20px, 4vw, 40px); }
.page-header .eyebrow { margin-bottom: 22px; }
.page-header h1 { font-size: clamp(2.6rem, 6vw, 5rem); max-width: 16ch; letter-spacing: -0.035em; }
.page-header p { margin-top: 22px; font-size: 1.12rem; color: var(--ink-2); max-width: 54ch; font-weight: 500; }
.page-header + .sec { padding-top: clamp(20px, 3vw, 40px); }

/* footer */
footer { background: var(--ink); border-top: 1px solid var(--line-dk); padding: clamp(48px, 6vw, 70px) 0 38px; color: #8B938D; }
.foot-top { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.foot-brand { max-width: 32ch; }
.foot-brand img { height: 26px; margin-bottom: 16px; }
.foot-brand p { font-size: 0.95rem; color: #838C86; font-weight: 500; }
.foot-links { display: flex; gap: clamp(36px, 6vw, 70px); flex-wrap: wrap; }
.foot-col h5 { font-weight: 700; font-size: 0.82rem; color: #949C96; margin-bottom: 14px; }
.foot-col a { display: block; font-size: 0.95rem; color: #B7BDB8; text-decoration: none; margin-bottom: 10px; font-weight: 500; transition: color .16s; }
.foot-col a:hover { color: var(--green); }
.foot-bottom { margin-top: clamp(38px, 5vw, 56px); padding-top: 22px; border-top: 1px solid var(--line-dk); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.85rem; color: #7A837C; font-weight: 500; }

/* reveal */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
}
.mock-flag { position: fixed; bottom: 16px; right: 16px; z-index: 200; background: var(--ink); color: var(--green); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; padding: 7px 13px; border-radius: 6px; }
:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }

/* family stories head (with button) */
.stories-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.stories-head .eyebrow { margin-bottom: 16px; }
.stories-head h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); color: #fff; }

/* carousel */
.carousel-wrap { position: relative; }
.carousel { border-radius: 22px; overflow: hidden; }
.slides { display: flex; transition: transform .6s var(--ease); }
.slide { flex: 0 0 100%; position: relative; min-height: clamp(380px, 52vw, 560px); display: flex; align-items: flex-end; }
.slide .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,15,14,0.15) 20%, rgba(12,15,14,0.88) 100%); }
.slide-in { position: relative; z-index: 2; padding: clamp(28px, 4vw, 56px); max-width: 44ch; }
.slide .q { font-family: var(--head); font-weight: 800; font-size: clamp(1.5rem, 3.2vw, 2.6rem); color: #fff; letter-spacing: -0.025em; line-height: 1.16; }
.slide .meta { margin-top: 16px; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); }
.dots { display: flex; gap: 11px; justify-content: center; margin-top: 26px; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: #3A423D; border: none; cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.dot.active { background: var(--green); transform: scale(1.25); }
.dot:hover { background: #5A635C; }
.dot.active:hover { background: var(--green); }

/* blogs page */
.blogs { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 32px); }
.blog-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--paper); display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -30px rgba(12,15,14,0.28); }
.blog-img { aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: #0F1A15; }
.blog-body { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 15px; flex: 1; }
.blog-quote { font-family: var(--head); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: -0.025em; line-height: 1.2; }
.blog-service { align-self: flex-start; font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green-deep); background: rgba(0,221,148,0.13); padding: 6px 13px; border-radius: 100px; }
.blog-text { color: var(--ink-2); font-size: 1rem; }
.blog-disclaimer { margin-top: auto; padding-top: 6px; color: #9AA19B; font-size: 0.76rem; line-height: 1.45; }
.blog-card.reserved { border-style: dashed; align-items: center; justify-content: center; text-align: center; min-height: 260px; color: var(--mute); }
@media (max-width: 760px) { .blogs { grid-template-columns: 1fr; } }