/* ============ Squarespace service page ============
   Concept: "Editorial Web" — Squarespace as magazine craft.
   Palette inverts the dark site: paper-cream, deep ink, terracotta accent.
   Type: Fraunces display, hand-set magazine grids.
============================================================== */

:root {
  --sq-paper:    #f1ebde;   /* aged paper */
  --sq-paper-2:  #e8dfca;   /* deeper sand */
  --sq-paper-3:  #d8cdb3;   /* tan */
  --sq-ink:      #181410;   /* near-black ink */
  --sq-ink-2:    #3a322a;   /* warm graphite */
  --sq-ink-3:    #6b6055;   /* dust */
  --sq-rule:     rgba(24,20,16,.18);
  --sq-rule-2:   rgba(24,20,16,.08);
  --sq-accent:   #c14b1f;   /* terracotta — single accent */
  --sq-accent-2: #efd9c1;   /* peach wash */
  --sq-gold:     #b08746;   /* secondary */
}

.sq-page {
  background: var(--sq-paper);
  color: var(--sq-ink);
}
.sq-page::before {
  /* subtle paper grain */
  content: "";
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(24,20,16,.04) 1px, transparent 1px),
    radial-gradient(rgba(24,20,16,.025) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  opacity: .8;
}

.sq-page > section,
.sq-page > footer,
.sq-page > .sq-crumb { position: relative; z-index: 3; }
.sq-page > header.nav { z-index: 40; mix-blend-mode: difference; }

/* Override global dark cursor + bones over light pages */
.sq-page .cursor { background: var(--sq-ink); }
.sq-page .cursor-ring { border-color: var(--sq-ink); }

/* Footer overrides — keep dark footer for continuity */
.sq-page .mfooter { background: #0a0a0a; color: #f5f2ec; z-index: 5; }

/* ====================== Crumb ======================= */
.sq-crumb {
  position: fixed; top: 84px; left: var(--gutter);
  z-index: 30;
  display: flex; gap: 10px; align-items: center;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sq-ink-3);
}
.sq-crumb a { color: var(--sq-ink-3); text-decoration: none; }
.sq-crumb a:hover { color: var(--sq-accent); }
.sq-crumb .cur { color: var(--sq-ink); }
.sq-crumb .sep { opacity: .5; }

/* ====================== HERO ======================= */
/* Magazine cover layout: masthead + issue strip + giant cover headline + cover image block */

.sq-hero {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--sec-y) + 30px) var(--gutter) 60px;
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--sq-rule);
}

.sq-masthead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--sq-rule);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sq-ink-3);
}
.sq-masthead .vol {
  display: flex; gap: 14px; align-items: center;
}
.sq-masthead .vol .roman {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0;
  color: var(--sq-ink);
  text-transform: none;
}
.sq-masthead .center {
  text-align: center;
  letter-spacing: .35em;
}
.sq-masthead .right { text-align: right; }
.sq-masthead .right strong { color: var(--sq-accent); font-weight: 500; }

.sq-hero__grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  padding-top: 56px;
  align-items: stretch;
}

.sq-hero__main { display: flex; flex-direction: column; gap: 36px; }

.sq-hero__eyebrow {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sq-ink-3);
  display: flex; gap: 14px; align-items: center;
}
.sq-hero__eyebrow .square {
  display: inline-block;
  width: 12px; height: 12px;
  background: var(--sq-ink);
  position: relative;
}
.sq-hero__eyebrow .square::after {
  content: "";
  position: absolute; inset: 3px;
  background: var(--sq-paper);
}

.sq-hero__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
  font-size: clamp(64px, 11vw, 196px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--sq-ink);
  margin: 0;
}
.sq-hero__title .l { display: block; overflow: hidden; }
.sq-hero__title .l > span { display: inline-block; }
.sq-hero__title em { font-style: italic; color: var(--sq-accent); font-weight: 300; }
.sq-hero__title .swash {
  font-family: var(--f-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.sq-hero__title .indent { padding-left: 0.5em; }
.sq-hero__title .ampersand {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--sq-accent);
  font-size: 1.2em;
  line-height: 0;
  vertical-align: -0.05em;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

.sq-hero__rule {
  height: 1px;
  background: var(--sq-rule);
  margin: 4px 0 0;
}

.sq-hero__lede-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 28px;
  align-items: start;
}
.sq-hero__dropcap {
  font-family: var(--f-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-weight: 300;
  font-size: 96px;
  line-height: 0.85;
  color: var(--sq-accent);
}
.sq-hero__lede {
  margin: 4px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.45;
  color: var(--sq-ink-2);
  max-width: 56ch;
  font-variation-settings: "opsz" 36;
}
.sq-hero__lede em { color: var(--sq-accent); font-style: italic; }

.sq-hero__actions {
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-end;
}
.sq-btn {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 24px;
  border-radius: 0;
  border: 1px solid var(--sq-ink);
  color: var(--sq-ink);
  background: transparent;
  text-decoration: none;
  transition: background .35s var(--ease-out), color .35s var(--ease-out), transform .35s var(--ease-out);
}
.sq-btn .arrow { display: inline-block; transition: transform .35s var(--ease-out); }
.sq-btn:hover { background: var(--sq-ink); color: var(--sq-paper); }
.sq-btn:hover .arrow { transform: translateX(4px); }
.sq-btn--filled {
  background: var(--sq-ink);
  color: var(--sq-paper);
}
.sq-btn--filled:hover { background: var(--sq-accent); border-color: var(--sq-accent); }

/* ----- Hero Cover (right column = magazine cover image area) ----- */
.sq-hero__cover {
  position: relative;
  background: var(--sq-paper-2);
  border: 1px solid var(--sq-rule);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 540px;
}
.sq-hero__cover-tag {
  position: absolute; top: 18px; left: 18px;
  z-index: 4;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sq-paper);
  background: var(--sq-ink);
  padding: 6px 10px;
}
.sq-hero__cover-issue {
  position: absolute; top: 18px; right: 18px;
  z-index: 4;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 26px;
  color: var(--sq-ink);
}
.sq-hero__cover-art {
  flex: 1;
  position: relative;
  background:
    radial-gradient(ellipse at 30% 35%, rgba(193,75,31,.35), transparent 60%),
    radial-gradient(ellipse at 70% 65%, rgba(176,135,70,.35), transparent 65%),
    linear-gradient(180deg, #d8cdb3 0%, #b9a886 50%, #8a7458 100%);
}
/* Photo-style placeholder: figure silhouette + sun + horizon */
.sq-hero__cover-art::before,
.sq-hero__cover-art::after {
  content: "";
  position: absolute; left: 0; right: 0;
}
.sq-hero__cover-art::before {
  bottom: 0; height: 38%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(58,50,42,.55) 60%, rgba(24,20,16,.85) 100%);
}
.sq-hero__cover-art::after {
  top: 18%; left: 50%;
  transform: translateX(-50%);
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,228,180,.95) 0%, rgba(255,200,140,.5) 35%, transparent 70%);
  border-radius: 50%;
  filter: blur(2px);
}
.sq-hero__cover-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
}
.sq-hero__cover-meta {
  background: var(--sq-paper);
  border-top: 1px solid var(--sq-rule);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
}
.sq-hero__cover-meta h4 {
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.05;
}
.sq-hero__cover-meta .by {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sq-ink-3);
}
.sq-hero__cover-meta .pg {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 38px;
  line-height: 1;
  color: var(--sq-accent);
}

.sq-hero__bar {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--sq-rule);
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sq-ink-3);
}
.sq-hero__bar .it strong {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sq-ink);
  margin-bottom: 4px;
}
.sq-hero__bar .it strong em { color: var(--sq-accent); }

@media (max-width: 920px) {
  .sq-hero__grid { grid-template-columns: 1fr; }
  .sq-hero__cover { min-height: 380px; }
  .sq-hero__bar { grid-template-columns: repeat(2, 1fr); }
  .sq-masthead { grid-template-columns: 1fr; gap: 8px; }
  .sq-masthead .center, .sq-masthead .right { text-align: left; }
}

/* ====================== TICKER ======================= */
.sq-ticker {
  border-bottom: 1px solid var(--sq-rule);
  padding: 22px 0;
  overflow: hidden;
  background: var(--sq-paper-2);
}
.sq-ticker__track {
  display: inline-flex; white-space: nowrap; gap: 40px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1;
  color: var(--sq-ink);
  animation: sqScroll 38s linear infinite;
  padding-left: 40px;
}
.sq-ticker__track .dot {
  display: inline-flex; align-items: center;
  font-family: var(--f-display); font-style: normal;
  color: var(--sq-accent);
  font-size: .8em;
}
.sq-ticker__track em { color: var(--sq-accent); }
@keyframes sqScroll { to { transform: translateX(-50%); } }

/* ====================== EDITORIAL CAPABILITIES ======================= */
/* Each capability = a magazine spread. Alternates left/right. */

.sq-cap {
  padding: var(--sec-y) 0 0;
}
.sq-cap__head {
  padding: 0 var(--gutter) 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  border-bottom: 1px solid var(--sq-rule);
}
.sq-cap__head .eyebrow-sq {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sq-ink-3);
  display: flex; gap: 12px; align-items: center;
}
.sq-cap__head .eyebrow-sq .num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sq-accent);
}
.sq-cap__head h2 {
  margin: 18px 0 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(48px, 7vw, 124px);
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.sq-cap__head h2 em { font-style: italic; color: var(--sq-accent); }
.sq-cap__head .lede {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.5;
  color: var(--sq-ink-2);
  max-width: 48ch;
}

.sq-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--sq-rule);
  position: relative;
}
.sq-spread::before {
  /* center binding rule */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: var(--sq-rule);
}
.sq-spread__col {
  padding: 72px var(--gutter) 72px;
  display: flex; flex-direction: column; gap: 32px;
  min-height: 540px;
}
.sq-spread__col--art {
  background: var(--sq-paper-2);
  position: relative;
  overflow: hidden;
  align-items: stretch;
  justify-content: center;
}
.sq-spread__num {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 110px;
  line-height: 0.9;
  color: var(--sq-accent);
  letter-spacing: -0.02em;
}
.sq-spread__num small {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sq-ink-3);
  display: block;
  margin-top: 6px;
}
.sq-spread h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(38px, 4.4vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.sq-spread h3 em { font-style: italic; color: var(--sq-accent); }
.sq-spread p {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.55;
  color: var(--sq-ink-2);
  max-width: 42ch;
}
.sq-spread p em { color: var(--sq-accent); font-style: italic; }
.sq-spread__feat {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--sq-rule);
}
.sq-spread__feat li {
  border-bottom: 1px solid var(--sq-rule-2);
  padding: 14px 0;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sq-ink-2);
  display: flex; gap: 10px; align-items: baseline;
}
.sq-spread__feat li:nth-child(odd) { padding-right: 16px; }
.sq-spread__feat li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--sq-rule-2); }
.sq-spread__feat li::before {
  content: "§";
  font-family: var(--f-display);
  font-style: italic;
  color: var(--sq-accent);
  font-size: 16px;
}

.sq-spread.is-flipped .sq-spread__col--art { order: -1; }

/* Spread art compositions — pure CSS magazine illustrations */
.sq-art {
  position: absolute; inset: 32px;
  display: block;
}
.sq-art svg { width: 100%; height: 100%; display: block; }

@media (max-width: 920px) {
  .sq-spread { grid-template-columns: 1fr; }
  .sq-spread::before { display: none; }
  .sq-spread.is-flipped .sq-spread__col--art { order: 0; }
  .sq-cap__head { grid-template-columns: 1fr; }
}

/* ====================== TEMPLATE GALLERY ======================= */
.sq-gallery {
  padding: var(--sec-y) var(--gutter);
  border-top: 1px solid var(--sq-rule);
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, var(--sq-rule-2) 30px 31px),
    var(--sq-paper);
}
.sq-gallery__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--sq-rule);
}
.sq-gallery__head h2 {
  margin: 18px 0 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(44px, 6vw, 100px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.sq-gallery__head h2 em { font-style: italic; color: var(--sq-accent); }
.sq-gallery__head .meta {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sq-ink-3);
  text-align: right;
  display: flex; flex-direction: column; gap: 4px;
}
.sq-gallery__head .meta strong {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sq-ink);
}

.sq-tpl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--sq-rule);
  border-left: 1px solid var(--sq-rule);
}
.sq-tpl {
  border-right: 1px solid var(--sq-rule);
  border-bottom: 1px solid var(--sq-rule);
  padding: 28px;
  display: flex; flex-direction: column; gap: 18px;
  background: var(--sq-paper);
  cursor: pointer;
  transition: background .35s var(--ease-out);
}
.sq-tpl:hover { background: var(--sq-paper-2); }
.sq-tpl__shot {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: var(--sq-paper-3);
  border: 1px solid var(--sq-rule);
}
.sq-tpl__shot svg { width: 100%; height: 100%; display: block; }
.sq-tpl__head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--sq-rule);
  padding-bottom: 10px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sq-ink-3);
}
.sq-tpl__head .num { color: var(--sq-accent); }
.sq-tpl__title {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(28px, 2.6vw, 44px);
  line-height: 1;
  margin: 0;
  color: var(--sq-ink);
}
.sq-tpl__sub {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sq-ink-3);
}
.sq-tpl__meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sq-ink-3);
  border-top: 1px solid var(--sq-rule-2);
  padding-top: 12px;
}
.sq-tpl__meta strong {
  display: block;
  color: var(--sq-ink);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2px;
}

@media (max-width: 1100px) { .sq-tpl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .sq-tpl-grid { grid-template-columns: 1fr; } }

/* ====================== VS TABLE (editorial) ======================= */
.sq-vs {
  padding: var(--sec-y) var(--gutter);
  border-top: 1px solid var(--sq-rule);
}
.sq-vs__head { padding-bottom: 56px; border-bottom: 1px solid var(--sq-rule); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
.sq-vs__head h2 {
  margin: 18px 0 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(44px, 6vw, 100px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.sq-vs__head h2 em { font-style: italic; color: var(--sq-accent); }
.sq-vs__head .lede {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.5;
  color: var(--sq-ink-2);
  max-width: 46ch;
  margin: 0;
}
.sq-vs__table {
  margin-top: 64px;
  border-top: 1px solid var(--sq-ink);
}
.sq-vs__row {
  display: grid;
  grid-template-columns: 1.4fr 2fr 2fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--sq-rule);
  align-items: baseline;
}
.sq-vs__row--head {
  border-bottom: 1px solid var(--sq-ink);
  padding: 14px 0;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sq-ink-3);
}
.sq-vs__row--head .ours {
  color: var(--sq-accent);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
}
.sq-vs__row .label {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--sq-ink);
}
.sq-vs__row .typ {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  font-size: 16px;
  color: var(--sq-ink-3);
  font-style: italic;
}
.sq-vs__row .typ::before {
  content: "✕  ";
  font-family: var(--f-mono);
  font-style: normal;
  color: var(--sq-ink-3);
  margin-right: 2px;
}
.sq-vs__row .ours {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  font-size: 17px;
  color: var(--sq-ink);
}
.sq-vs__row .ours::before {
  content: "✓  ";
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--sq-accent);
}

@media (max-width: 800px) {
  .sq-vs__row { grid-template-columns: 1fr; gap: 8px; }
  .sq-vs__head { grid-template-columns: 1fr; }
}

/* ====================== INTEGRATIONS / PAIRS ======================= */
.sq-pairs {
  padding: var(--sec-y) var(--gutter);
  border-top: 1px solid var(--sq-rule);
  background: var(--sq-paper-2);
}
.sq-pairs__head { padding-bottom: 48px; border-bottom: 1px solid var(--sq-rule); }
.sq-pairs__head h2 {
  margin: 18px 0 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(44px, 6vw, 100px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.sq-pairs__head h2 em { font-style: italic; color: var(--sq-accent); }

.sq-pairs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--sq-rule);
  border-left: 1px solid var(--sq-rule);
}
.sq-pair {
  border-right: 1px solid var(--sq-rule);
  border-bottom: 1px solid var(--sq-rule);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 200px;
  position: relative;
  background: var(--sq-paper-2);
  transition: background .3s var(--ease-out);
}
.sq-pair:hover { background: var(--sq-paper); }
.sq-pair__num {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sq-ink-3);
}
.sq-pair__name {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1;
  margin: 0;
  color: var(--sq-ink);
}
.sq-pair__cat {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sq-accent);
}
.sq-pair__desc {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 36;
  font-size: 14px;
  line-height: 1.4;
  color: var(--sq-ink-2);
  margin: 0;
}

@media (max-width: 1000px) { .sq-pairs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .sq-pairs__grid { grid-template-columns: 1fr; } }

/* ====================== PROCESS ======================= */
.sq-process {
  padding: var(--sec-y) var(--gutter);
  border-top: 1px solid var(--sq-rule);
}
.sq-process__head h2 {
  margin: 18px 0 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(44px, 6vw, 100px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.sq-process__head h2 em { font-style: italic; color: var(--sq-accent); }

.sq-process__steps {
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--sq-ink);
  border-left: 1px solid var(--sq-rule);
}
.sq-process__steps li {
  border-right: 1px solid var(--sq-rule);
  border-bottom: 1px solid var(--sq-rule);
  padding: 28px 22px 36px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 280px;
  background: var(--sq-paper);
}
.sq-process__steps li:nth-child(even) { background: var(--sq-paper-2); }
.sq-process__steps .week {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sq-ink-3);
  display: flex; justify-content: space-between;
}
.sq-process__steps .week strong { color: var(--sq-accent); font-family: var(--f-display); font-style: italic; font-size: 18px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.sq-process__steps h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: 32px;
  line-height: 1;
  color: var(--sq-ink);
}
.sq-process__steps p {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: "opsz" 36;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sq-ink-2);
}

@media (max-width: 1100px) { .sq-process__steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .sq-process__steps { grid-template-columns: 1fr; } }

/* ====================== CTA OUTRO ======================= */
.sq-cta {
  position: relative;
  padding: var(--sec-y) var(--gutter);
  border-top: 1px solid var(--sq-rule);
  background: var(--sq-ink);
  color: var(--sq-paper);
  overflow: hidden;
}
.sq-cta::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(193,75,31,.4), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(176,135,70,.3), transparent 55%);
  pointer-events: none;
}
.sq-cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
}
.sq-cta__inner h2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(56px, 9vw, 180px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--sq-paper);
}
.sq-cta__inner h2 em {
  font-style: italic;
  color: #f1bd9a;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.sq-cta__inner h2 .swash {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--sq-accent);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.sq-cta__btn {
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 16px;
  padding: 22px 32px;
  border: 1px solid var(--sq-paper);
  color: var(--sq-paper);
  text-decoration: none;
  white-space: nowrap;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.sq-cta__btn:hover { background: var(--sq-paper); color: var(--sq-ink); }

.sq-cta__lines {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid rgba(241,235,222,.18);
  display: flex; flex-wrap: wrap; gap: 28px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(241,235,222,.6);
  position: relative;
}
.sq-cta__lines em {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sq-accent-2);
}

@media (max-width: 800px) {
  .sq-cta__inner { grid-template-columns: 1fr; }
}