/* Summit Direct Marketing — rebuilt to match the original Squarespace site.
 * Measurements come from the live site at 1440px wide: a 24-column grid with 11px gaps
 * and ~4vw side margins. Values are exact at 1440 and scale smoothly on other screens. */

/* Self-hosted fonts (SIL Open Font License) */
@font-face { font-family: "Libre Baskerville"; src: url("/fonts/libre-baskerville-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/fonts/libre-baskerville-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/fonts/libre-baskerville-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Almarai"; src: url("/fonts/almarai-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Almarai"; src: url("/fonts/almarai-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Almarai"; src: url("/fonts/almarai-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Almarai"; src: url("/fonts/almarai-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --ink: #000;
  --light: #eaeaee;     /* "light" sections */
  --bright: #8eb6dc;    /* "bright" (blue) sections + hero button */
  --white: #fff;
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "Almarai", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: max(20px, 4vw);
  --gap: 11px;
  --header-h: 87px;
  /* type scale (exact at 1440px) */
  /* Text sizes are fixed on desktop like the original, and only shrink on smaller screens. */
  --t-h1: clamp(38px, 4.761vw, 67.84px);
  --t-h2: clamp(30px, 3.306vw, 47.104px);
  --t-mega: clamp(50px, 9.586vw, 136.6px);
  --t-mega2: clamp(46px, 8.575vw, 122.2px);
  --t-lead: clamp(19px, 1.608vw, 22.912px);
  /* Layout heights scale with the grid, like Squarespace (exact at 1425px wide) */
  --u: calc(100vw / 1425);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--light);
  color: var(--ink);
  font: 400 16px/24px var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 16px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.02em; }

.grid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: var(--gap); padding-left: var(--gutter); padding-right: var(--gutter); }
.sec-light { background: var(--light); }
.sec-bright { background: var(--bright); }
.sec-white { background: var(--white); }

.t-h1 { font-size: var(--t-h1); line-height: 1.056; }
.t-h2 { font-size: var(--t-h2); line-height: 1.114; }
.t-mega { font-size: var(--t-mega); line-height: 1; }

/* ---------- Header (sits on top of the first section, like the original) ---------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
}
.site-header.overlay { color: #fff; }
.brand { font-family: var(--serif); font-size: 24.64px; line-height: 1.2; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.nav { display: flex; gap: 29px; }
.nav a { text-decoration: none; font-size: 16px; line-height: 24px; }
.nav a:hover { opacity: .7; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.menu-btn { display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 6px; }
.menu-btn span { display: block; width: 26px; height: 1.5px; background: currentColor; margin: 6px 0; transition: transform .25s, opacity .25s; }

/* ---------- Buttons (pill) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 68px; padding: 0 32px;
  border: 0; border-radius: 300px;
  font: 400 16px/1 var(--sans);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: opacity .2s;
}
.btn:hover { opacity: .8; }
.btn-blue { background: var(--bright); color: #000; }
.hero-cta .btn, .culture-cta .btn { min-width: max(180px, calc(209 * var(--u))); }  /* 4 grid columns, as on the original */
.btn-black { background: #000; color: #fff; }
.btn-form { height: 55px; background: #000; color: #fff; }

/* ---------- Home: hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff; background: #000;
  height: clamp(560px, calc(100svh - 14px), 1100px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--header-h);
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .45); }
.hero-inner { position: relative; z-index: 2; text-align: center; }
.hero-title { grid-column: 1 / -1; }
.hero-sub { grid-column: 8 / 18; margin: 10px 0 0; }
.hero-cta { grid-column: 1 / -1; margin-top: 71px; }

/* ---------- Home: Who We Represent ---------- */
.represent { min-height: max(280px, calc(502 * var(--u))); padding: 45px var(--gutter) 40px; }
.represent .logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 5vw, 72px); padding-top: clamp(28px, 4vw, 60px); }
.represent .logos:empty { display: none; }
.represent .logos img { max-height: 72px; max-width: 200px; width: auto; object-fit: contain; }

/* ---------- Home: How it works ---------- */
.how { padding-top: 48px; padding-bottom: 47px; grid-template-rows: auto 1fr; }
.how-title { grid-column: 1 / 16; grid-row: 1; }
.how-text { grid-column: 9 / 16; grid-row: 2; margin: 66px 0 0; }
.how-img { grid-column: 17 / 25; grid-row: 1 / 3; width: 100%; height: calc(226 * var(--u)); object-fit: cover; }

/* ---------- Home: Culture & Career Opportunities (scrolling headline) ---------- */
.culture { padding-bottom: 79px; }
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; will-change: transform; animation: marquee var(--marquee-dur, 60s) linear infinite; }
.marquee-item { font-size: clamp(50px, 9.611vw, 136.96px); line-height: 1.4; padding-right: .35em; flex: none; }
@keyframes marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.culture-cta { display: flex; justify-content: center; margin-top: 11px; }
.gallery { margin-top: 50px; }
.gallery > img { grid-column: span 6; width: 100%; height: calc(305 * var(--u)); object-fit: cover; }

/* ---------- Home: About Us ---------- */
.about { padding: 87px 0 160px; }
.about-title { text-align: center; margin: 0 var(--gutter); }
.founder { margin: 66px 0 0; }
.founder + .founder { margin-top: 51px; }
.founder-photo { grid-column: 9 / 17; width: 100%; height: max(360px, calc(502 * var(--u))); object-fit: contain; }
.founder figcaption { grid-column: 7 / 19; text-align: center; margin-top: 11px; }
.founder .bio { grid-column: 7 / 19; margin-top: 32px; }
.founder .bio p { margin: 0 0 16px; }
.founder.first .bio p:first-child { text-align: center; margin-top: 24px; }

/* ---------- Home: Ready to Collaborate ---------- */
.contact { padding-top: 39px; padding-bottom: 79px; }
.contact-title { grid-column: 1 / -1; font-size: var(--t-mega2); line-height: 1; }
.contact-lead { grid-column: 1 / 10; font-size: var(--t-lead); line-height: 1.5; margin: 36px 0 0; }
.contact .form { grid-column: 13 / 25; margin-top: 36px; }

/* ---------- Partner With Us / Careers ---------- */
.split { padding-top: 127px; }
.split-partner { padding-bottom: 197px; }
.split-careers { padding-bottom: 80px; }
.split-title { margin-top: 1px; }
.split-intro { margin-top: 14px; }
.split-partner .split-text { grid-column: 1 / 13; }
.split-partner .split-intro { max-width: calc(9 / 12 * 100% - 2px); }
.split-partner .split-img { grid-column: 13 / 25; height: calc(783 * var(--u)); }
.split-careers .split-text { grid-column: 1 / 12; }
.split-careers .split-text > :not(.split-title) { max-width: calc(10 / 11 * 100% - 1px); }
.split-careers .split-img { grid-column: 14 / 25; height: calc(840 * var(--u)); }
.split-img { width: 100%; object-fit: cover; align-self: start; }
.split ul { margin: 0; padding-left: 40px; }
.split li { margin: 0 0 8px; }
.split .form { margin-top: 58px; }

.cta-split { padding-top: 118px; padding-bottom: 79px; }
.cta-split .cta-title { grid-column: 1 / 10; }
.cta-split .form { grid-column: 14 / 25; margin-top: 41px; }

/* ---------- Forms (Squarespace field styles) ---------- */
.form { display: flex; flex-direction: column; gap: 20px; }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend { font-size: 16px; line-height: 28px; padding: 0; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form .sub { display: block; font-size: 12px; line-height: 27px; }
.form .lbl { display: block; font-size: 16px; line-height: 24px; margin-bottom: 4px; }
.form .req { opacity: .7; margin-left: 2px; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea, .form select {
  display: block; width: 100%;
  height: 42px; padding: 8px 15px;
  background: transparent; color: var(--ink);
  border: 1px solid #000; border-radius: 23.84px;
  font: 400 16px/24px var(--sans);
}
.form textarea { height: 100px; resize: vertical; }
.form select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid #000; outline-offset: 1px; }
.form .check { display: flex; align-items: center; gap: 8px; font-size: 14.27px; line-height: 21px; margin: -14px 0 7px; cursor: pointer; }
.form .check input { width: 20px; height: 20px; margin: 0; accent-color: #000; }
.form .btn-form { align-self: flex-start; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 15px; min-height: 1.2em; margin: -6px 0 0; }
.form-status:empty { display: none; }
.form-status.ok { color: #0b5a2a; }
.form-status.err { color: #8b1414; }
.file-field[hidden] { display: none; }
.form input[type=file] { width: 100%; font: inherit; font-size: 15px; border: 1px dashed #000; border-radius: 23.84px; padding: 10px 14px; background: transparent; cursor: pointer; }
.form input[type=file]::file-selector-button { font: 400 14px var(--sans); background: #000; color: #fff; border: 0; border-radius: 300px; padding: 8px 16px; margin-right: 12px; cursor: pointer; }
.turnstile-slot:empty { display: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--light); padding-top: 79px; padding-bottom: 123px; }
.footer-left { grid-column: 1 / 12; }
.footer-right { grid-column: 12 / 25; text-align: right; }
.site-footer .name { font-family: var(--serif); font-size: var(--t-h2); line-height: 1.114; letter-spacing: -0.02em; margin: 0; }
.site-footer .made { margin: 11px 0 0; }
.site-footer .made a { color: inherit; }
.site-footer .email { font-family: var(--serif); font-size: var(--t-h2); line-height: 1.114; letter-spacing: -0.02em; text-decoration: none; overflow-wrap: anywhere; }
.social { display: flex; gap: 14px; justify-content: flex-end; margin-top: 11px; }
.social a { display: inline-flex; }
.social svg { width: 24px; height: 24px; fill: currentColor; }
.social a[href="#"], .social a[href=""] { display: none; }

/* ---------- Accessibility ---------- */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: #000; color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.hero :focus-visible, .site-header.overlay :focus-visible { outline-color: #fff; }

/* ---------- Announcement bar (admin → Settings; hidden unless turned on) ---------- */
.announce { background: #000; color: #fff; text-align: center; font-size: 14px; line-height: 1.4; padding: 11px var(--gutter); position: relative; z-index: 30; }
.announce a { color: #fff; text-decoration: none; }
.announce a:hover { text-decoration: underline; text-underline-offset: 3px; }
.has-announce .site-header { top: var(--announce-h, 42px); }

/* ---------- Open positions (Careers; only shown when jobs are posted) ---------- */
.openings { margin: 40px 0 0; }
.openings[hidden] { display: none; }
.openings h2 { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.2; margin-bottom: 14px; }
.job { border-top: 1px solid rgba(0,0,0,.25); }
.job:last-child { border-bottom: 1px solid rgba(0,0,0,.25); }
.job summary { list-style: none; cursor: pointer; padding: 16px 36px 16px 0; position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.job summary::-webkit-details-marker { display: none; }
.job-title { font-family: var(--serif); font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.job-meta { font-size: 14px; opacity: .7; }
.job-toggle { position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px; }
.job-toggle::before, .job-toggle::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1.5px; background: currentColor; transition: transform .2s; }
.job-toggle::after { transform: rotate(90deg); }
.job[open] .job-toggle::after { transform: rotate(0); }
.job-body { padding: 0 0 20px; }
.job-apply { height: 48px; font-size: 15px; padding: 0 24px; background: #000; color: #fff; }

/* ---------- Privacy / legal ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: calc(var(--header-h) + 40px) var(--gutter) 100px; }
.legal h1 { margin-bottom: 10px; }
.legal .updated { opacity: .7; margin: 0 0 36px; }

/* ---------- 404 ---------- */
.notfound { padding: calc(var(--header-h) + clamp(40px, 7vw, 100px)) var(--gutter) clamp(60px, 9vw, 130px); }
.notfound .eyebrow { font-size: 14px; letter-spacing: .14em; opacity: .7; margin: 0 0 10px; }
.notfound h1 { margin-bottom: 20px; }
.notfound-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.btn-outline { background: transparent; color: #000; box-shadow: inset 0 0 0 1px #000; }

/* ---------- Scroll fade-in ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Tablet & phone: stack the grid ---------- */
@media (max-width: 767px) {
  :root { --gutter: 6vw; --header-h: 72px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .brand { font-size: 20px; }
  .menu-btn { display: block; position: relative; z-index: 2; }
  .nav {
    position: fixed; inset: 0; background: var(--light); color: #000;
    flex-direction: column; align-items: center; justify-content: center; gap: 28px;
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .nav a { font-family: var(--serif); font-size: 34px; line-height: 1.2; }
  body.menu-open .nav { opacity: 1; pointer-events: auto; }
  body.menu-open .menu-btn { color: #000; }
  body.menu-open .menu-btn span:first-child { transform: translateY(3.75px) rotate(45deg); }
  body.menu-open .menu-btn span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

  .hero-sub { margin-top: 14px; }
  .hero-cta { margin-top: 40px; }
  .represent { min-height: 0; padding-bottom: 60px; }
  .how { padding-top: 40px; padding-bottom: 40px; }
  .how-text { margin-top: 16px; }
  .how-img { margin-top: 24px; height: 52vw; }
  .gallery { row-gap: var(--gap); margin-top: 36px; }
  .gallery > img { height: 70vw; }
  .about { padding: 60px 0 80px; }
  .founder-photo { height: auto; max-height: 520px; }
  .contact { padding-top: 48px; padding-bottom: 60px; }
  .contact-lead { margin-top: 20px; }
  .contact .form { margin-top: 28px; }
  .split { padding-top: calc(var(--header-h) + 24px); }
  .split-partner, .split-careers { padding-bottom: 60px; }
  .split-img { height: 110vw !important; margin-top: 36px; order: 2; }
  .split-partner .split-intro, .split-careers .split-text > :not(.split-title) { max-width: none; }
  .cta-split { padding-top: 56px; padding-bottom: 60px; }
  .cta-split .form { margin-top: 28px; }
  .form .row { grid-template-columns: 1fr; }
  .site-footer { padding-top: 56px; padding-bottom: 64px; }
  .footer-right { text-align: left; margin-top: 28px; }
  .site-footer .email { font-size: clamp(18px, 6.2vw, 30px); overflow-wrap: normal; white-space: nowrap; }
  .social { justify-content: flex-start; }
}

@media print {
  .site-header, .site-footer, .announce, .form, .menu-btn { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none; }
}