/* ============================================================
   Keely + Co. — Production Stylesheet
   Combines foundations (colors, type, fonts) + site UI kit
   ============================================================ */

:root {
  --kc-espresso:    #2E1C13;
  --kc-khaki:       #674933;
  --kc-sand:        #977F64;
  --kc-ivory:       #FDF5E7;
  --kc-sage:        #ADB697;
  --kc-mauve:       #A36361;
  --kc-gold:        #B5934E;

  --kc-ivory-deep:  #F3E8D4;
  --kc-line:        rgba(46,28,19,.16);
  --kc-line-dark:   rgba(253,245,231,.18);
  --kc-text:        rgba(46,28,19,.78);
  --kc-muted:       rgba(46,28,19,.55);
  --kc-khaki-hover: #2E1C13;

  --kc-bg:          var(--kc-ivory);
  --kc-bg-deep:     var(--kc-ivory-deep);
  --kc-bg-dark:     var(--kc-espresso);
  --kc-fg:          var(--kc-espresso);
  --kc-fg-soft:     var(--kc-text);
  --kc-fg-muted:    var(--kc-muted);
  --kc-fg-on-dark:  var(--kc-ivory);

  --kc-primary:     var(--kc-khaki);
  --kc-accent:      var(--kc-gold);
  --kc-alert:       var(--kc-mauve);
  --kc-success:     var(--kc-sage);

  --kc-display:        "Prata", "Cardo", Georgia, "Times New Roman", serif;
  --kc-display-italic: "Cardo", Georgia, "Times New Roman", serif;
  --kc-body:           "Jost", system-ui, -apple-system, sans-serif;

  --kc-hero-size:    clamp(3rem, 9vw, 7rem);
  --kc-h1-size:      clamp(3rem, 9vw, 7rem);
  --kc-h2-size:      clamp(2rem, 4.5vw, 3.4rem);
  --kc-h3-size:      1.4rem;
  --kc-subhead-size: 1.6rem;
  --kc-lead-size:    1.05rem;
  --kc-body-size:    1rem;
  --kc-caption-size: 0.76rem;
  --kc-eyebrow-size: 0.72rem;

  --kc-track-hero:    .16em;
  --kc-track-h2:      .20em;
  --kc-track-h3:      .16em;
  --kc-track-eyebrow: .30em;
  --kc-track-button:  .22em;
  --kc-track-tagline: .30em;

  --kc-space-1:  .25rem;
  --kc-space-2:  .5rem;
  --kc-space-3:  .75rem;
  --kc-space-4:  1rem;
  --kc-space-5:  1.5rem;
  --kc-space-6:  2rem;
  --kc-space-7:  3rem;
  --kc-space-8:  4rem;
  --kc-space-9:  6rem;
  --kc-space-10: 9rem;

  --kc-content-max: 1140px;
  --kc-gutter:      7vw;
  --kc-section-y:   clamp(5rem, 11vh, 9rem);

  --kc-radius-0:   0;
  --kc-radius-sm:  2px;
  --kc-radius-md:  3px;
  --kc-radius-lg:  4px;

  --kc-border:       1px solid var(--kc-line);
  --kc-border-dark:  1px solid var(--kc-line-dark);
  --kc-border-sand:  1px solid var(--kc-sand);
  --kc-border-gold:  1px solid var(--kc-gold);

  --kc-shadow-soft: 0 1px 2px rgba(46,28,19,.04), 0 8px 24px rgba(46,28,19,.05);
  --kc-shadow-card: 0 1px 0 rgba(46,28,19,.03), 0 18px 40px -28px rgba(46,28,19,.18);

  --kc-ease:        cubic-bezier(.2, .6, .2, 1);
  --kc-duration:    .35s;
  --kc-duration-lg: 1s;
}

/* ---------- Element defaults ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--kc-bg); overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }

body {
  color: var(--kc-fg-soft);
  font-family: var(--kc-body);
  font-weight: 300;
  font-size: var(--kc-body-size);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--kc-display);
  color: var(--kc-fg);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--kc-track-h2);
  line-height: 1.1;
  margin: 0;
}
h1 { font-weight: 300; font-size: var(--kc-h1-size); letter-spacing: var(--kc-track-hero); }
h2 { font-size: var(--kc-h2-size); }
h3 { font-size: var(--kc-h3-size); letter-spacing: var(--kc-track-h3); }
h4 { font-size: 1rem; letter-spacing: var(--kc-track-h3); }

h1 em, h2 em, h3 em {
  font-family: var(--kc-display-italic);
  font-style: italic;
  text-transform: none;
  color: var(--kc-khaki);
  letter-spacing: 0;
}

p { margin: 0 0 1.2em; max-width: 70ch; }

a { color: var(--kc-khaki); text-decoration: none; }
a:hover { border-bottom: 1px solid var(--kc-gold); }

hr { border: none; border-top: 1px solid var(--kc-line); margin: var(--kc-space-7) 0; }

::selection { background: var(--kc-khaki); color: var(--kc-ivory); }

/* ---------- Layout primitives ---------- */
.kc-section { padding: clamp(5rem, 11vh, 9rem) 0; }
.kc-section--dark  { background: var(--kc-espresso); color: var(--kc-ivory); }
.kc-section--deep  { background: var(--kc-ivory-deep); }
.kc-wrap { padding: 0 var(--kc-gutter); }

/* ---------- Header ---------- */
header.kc-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem var(--kc-gutter);
  background: transparent;
  transition: background .4s var(--kc-ease), border-color .4s var(--kc-ease), backdrop-filter .4s var(--kc-ease);
  border-bottom: 1px solid transparent;
}
header.kc-header--split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding-top: 1.7rem;
  padding-bottom: 1.7rem;
}
.kc-header__logo-slot {
  min-width: 140px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
}
.kc-header__logo-slot:hover { border-bottom: none; }
.kc-header__logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 100%;
  transition: filter .4s var(--kc-ease);
}
/* Wordmark is dark by default; invert it to white over the dark hero */
.kc-header--over-hero .kc-header__logo { filter: brightness(0) invert(1); }
.kc-header--solid     .kc-header__logo { filter: none; }
.kc-header__nav--left  { justify-self: start; }
.kc-header__nav--right { justify-self: end; }
.kc-header--solid {
  background: rgba(253, 245, 231, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--kc-line);
}
.kc-header__nav { display: flex; gap: 2.2rem; }
.kc-header__nav a {
  font-family: var(--kc-body);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color .3s var(--kc-ease), color .3s var(--kc-ease);
}
.kc-header__nav a:hover { border-bottom-color: var(--kc-gold); }
.kc-header--over-hero { color: var(--kc-ivory); }
.kc-header--solid { color: var(--kc-fg); }

/* ---------- Gold rule + diamond ---------- */
.kc-rule-diamond {
  position: relative;
  height: 1px; background: var(--kc-gold); opacity: .9;
  width: 220px; margin: 0 auto;
}
.kc-rule-diamond::after {
  content: ""; position: absolute; left: 50%; top: -3px;
  width: 7px; height: 7px; background: var(--kc-gold);
  transform: translateX(-50%) rotate(45deg);
}

/* ---------- Eyebrow ---------- */
.kc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--kc-body);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--kc-sand);
}
.kc-eyebrow::before,
.kc-eyebrow::after {
  content: "";
  display: block;
  width: 28px; height: 1px;
  background: var(--kc-sand); opacity: .7;
}
.kc-section--dark .kc-eyebrow,
.kc-hero__eyebrow.kc-eyebrow { color: rgba(253,245,231,.78); }
.kc-section--dark .kc-eyebrow::before,
.kc-section--dark .kc-eyebrow::after { background: var(--kc-gold); opacity: .8; }
/* Hide the two flanking gold dashes from the hero eyebrow only — they
   were reading as stray gold bars above the headline. */
.kc-hero__eyebrow.kc-eyebrow::before,
.kc-hero__eyebrow.kc-eyebrow::after { display: none; }

/* ---------- Tagline ---------- */
.kc-tagline {
  font-family: var(--kc-display-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: .30em;
  color: var(--kc-gold);
  font-size: 1.05rem;
}

/* ---------- Wordmark ---------- */
.kc-wordmark {
  font-family: var(--kc-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 1.05rem;
  white-space: nowrap;
  transition: color .4s var(--kc-ease);
}
.kc-wordmark .plus { color: var(--kc-gold); font-weight: 400; margin: 0 .15em; }

/* ---------- Buttons ---------- */
.kc-btn {
  display: inline-block;
  font-family: var(--kc-body);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--kc-ivory);
  background: var(--kc-khaki);
  padding: 1.1rem 2.6rem;
  border-radius: var(--kc-radius-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .35s var(--kc-ease), color .35s var(--kc-ease), opacity .15s ease;
}
.kc-btn:hover { background: var(--kc-khaki-hover); }
.kc-btn:active { opacity: .92; }
.kc-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Section title pattern ---------- */
.kc-sec-head { margin-bottom: 3.5rem; }
.kc-sec-head .kc-eyebrow { margin-bottom: 1.4rem; }
.kc-sec-head h2 {
  font-family: var(--kc-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: .20em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--kc-fg);
  margin: 0;
  max-width: 22ch;
}
.kc-section--dark .kc-sec-head h2 { color: var(--kc-ivory); }
.kc-sec-head em {
  font-family: var(--kc-display-italic);
  font-style: italic;
  text-transform: none;
  color: var(--kc-khaki);
  letter-spacing: 0;
}
.kc-section--dark .kc-sec-head em { color: var(--kc-gold); }

/* ---------- Hero ---------- */
.kc-hero {
  min-height: 100vh;
  /* 100svh accounts for the mobile browser's collapsing toolbar so the
     hero doesn't bleed under it. Falls back to 100vh on older browsers. */
  min-height: 100svh;
  position: relative;
  background: var(--kc-espresso);
  color: var(--kc-ivory);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 8rem var(--kc-gutter) 6rem;
}
.kc-hero__img {
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--kc-espresso);
  background-size: cover;
  /* Anchor to the top of the photo so Keely's head isn't clipped
     when the viewport is wider than the source's natural aspect. */
  background-position: center top;
  opacity: .9;
}
.kc-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(46,28,19,.6) 0%, rgba(46,28,19,.45) 45%, rgba(46,28,19,.75) 100%);
}
.kc-hero__inner { position: relative; z-index: 2; max-width: 880px; }
.kc-hero__rule { margin-bottom: 2rem; }
.kc-hero h1 {
  color: var(--kc-ivory);
  font-size: clamp(3rem, 9vw, 6.4rem);
  letter-spacing: .16em;
  font-weight: 300;
  line-height: 1;
  margin: 0;
}
.kc-hero h1 .plus { color: var(--kc-gold); font-weight: 400; margin: 0 .12em; }
.kc-hero__tag { margin: 1.6rem 0 .8rem; }
.kc-hero__support {
  font-family: var(--kc-body); font-weight: 300; font-size: 1.05rem;
  color: rgba(253,245,231,.85); max-width: 42ch; margin: 1.5rem auto 2.4rem;
  letter-spacing: .04em; line-height: 1.7;
}

/* ---------- Hero: eyebrow + scroll cue ---------- */
.kc-hero__eyebrow {
  display: block;
  margin-bottom: 1.6rem;
  color: rgba(253,245,231,.85);
}
.kc-hero__scroll-cue {
  position: absolute; bottom: 2.2rem; left: 50%;
  transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: .8rem;
  color: rgba(253,245,231,.55);
  font-family: var(--kc-body); font-weight: 400;
  font-size: .65rem; letter-spacing: .3em;
  text-transform: uppercase;
}
.kc-hero__scroll-cue::after {
  content: ""; width: 1px; height: 48px;
  background: linear-gradient(180deg, rgba(253,245,231,.55), rgba(253,245,231,0));
  animation: kc-cue 2.6s var(--kc-ease) infinite;
}

/* ---------- Positioning strip ---------- */
.kc-positioning {
  background: var(--kc-ivory-deep);
  padding: clamp(6rem, 12vh, 10rem) var(--kc-gutter);
  text-align: center;
}
.kc-positioning__line {
  font-family: var(--kc-display-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--kc-khaki);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.45;
  letter-spacing: .01em;
  max-width: 28ch;
  margin: 0 auto;
}
.kc-positioning__diamond {
  width: 8px; height: 8px;
  background: var(--kc-gold);
  transform: rotate(45deg);
  margin: 0 auto 2.6rem;
}

/* ---------- About ---------- */
.kc-about { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start; }
.kc-about__body p {
  font-family: var(--kc-body); font-weight: 300; font-size: 1.05rem;
  line-height: 1.75; color: var(--kc-text);
  /* No narrow ch-cap here: paragraphs should fill the copy column so
     their right edge lines up with the heading on the line above. */
  max-width: none;
  margin-bottom: 1.3rem;
}
.kc-about__more {
  display: inline-block; margin-top: 1.4rem;
  font-family: var(--kc-body); font-weight: 500;
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--kc-khaki); text-decoration: none;
  border-bottom: 1px solid var(--kc-line);
  padding-bottom: 3px;
  transition: border-color .3s var(--kc-ease);
}
.kc-about__more:hover { border-bottom-color: var(--kc-gold); }

/* Editorial 3-photo composition. Photos render at their natural aspect
   (no cropping) so a 2fr/1fr column split keeps the lead jacket photo
   dominant and the stack of two smaller portraits roughly the same
   total height as the lead, balancing the copy column beside it. */
.kc-about__portraits {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.9rem;
  align-items: start;
}
.kc-about__portrait {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--kc-radius-md);
}
.kc-about__portraits-stack {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* ---------- Services ---------- */
.kc-services-wrap { padding: 0 var(--kc-gutter); }
/* Four service cards in a 2×2 grid on desktop and tablet, so the cards
   have enough horizontal room for the title (which wraps to two lines
   on the longer names) and the includes-list without feeling crowded.
   The 860px mobile rule drops it to a single column. */
.kc-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 1100px; margin: 0 auto; }
.kc-service {
  background: var(--kc-ivory);
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius-md);
  padding: 3rem 2.4rem 2.6rem;
  transition: border-color .35s var(--kc-ease), box-shadow .35s var(--kc-ease), transform .35s var(--kc-ease);
  display: flex; flex-direction: column;
}
.kc-service:hover {
  border-color: rgba(151,127,100,.5);
  box-shadow: var(--kc-shadow-card);
  transform: translateY(-2px);
}
.kc-service__num {
  font-family: var(--kc-display-italic); font-style: italic; font-weight: 400;
  font-size: .9rem; color: var(--kc-gold); letter-spacing: .2em;
  margin-bottom: 1.4rem; display: block;
}
.kc-service__name {
  font-family: var(--kc-display); font-weight: 400;
  font-size: 1.35rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--kc-fg); line-height: 1.25;
  /* Reserve two lines so the hair-rule + copy align across cards
     when one title wraps to a second line. */
  min-height: calc(1.35rem * 1.25 * 2);
}
.kc-service__hair { border: none; border-top: 1px solid var(--kc-sand); opacity: .35; margin: 1.5rem 0; }
.kc-service__copy {
  font-family: var(--kc-body); font-weight: 300;
  font-size: .98rem; line-height: 1.75; color: var(--kc-text);
  margin: 0;
}
.kc-service__includes {
  list-style: none; padding: 0; margin: 1.4rem 0 1.8rem;
  font-family: var(--kc-body); font-weight: 300;
  font-size: .9rem; color: var(--kc-text); line-height: 1.85;
  flex: 1;
}
.kc-service__includes li { padding-left: 1.2rem; position: relative; }
.kc-service__includes li::before {
  content: ""; position: absolute; left: 0; top: .85em;
  width: 5px; height: 1px; background: var(--kc-sand); opacity: .8;
}
.kc-service__inquire {
  display: inline-block;
  font-family: var(--kc-body); font-weight: 500;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--kc-khaki); background: none; border: none;
  padding: 0; cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--kc-ease);
  margin-top: auto;
}
.kc-service__inquire:hover { border-bottom-color: var(--kc-gold); }

/* ---------- Event types band ---------- */
/* Grid layout with cropped, uniformly-sized tiles. Desktop renders three
   portrait tiles across the top (Weddings, Dinners, Celebrations), then
   three landscape tiles below: Showers, Travel, and Corporate & Social.
   Travel sits in the middle of the bottom landscape row so the new
   coastal-home photo reads as part of the lineup rather than as a
   right-corner afterthought. */
.kc-event-tiles-wrap { padding: 0 var(--kc-gutter); }
.kc-event-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "wed din cel"
    "sho tra cor";
  gap: 8px;
}
.kc-event-tile.et1 { grid-area: wed; }
.kc-event-tile.et2 { grid-area: sho; }
.kc-event-tile.et3 { grid-area: din; }
.kc-event-tile.et4 { grid-area: cel; }
.kc-event-tile.et5 { grid-area: cor; }
.kc-event-tile.et6 { grid-area: tra; }
.kc-event-tile {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--kc-ivory-deep);
  border-radius: var(--kc-radius-md);
}
/* Top row tiles share the wedding photo's portrait aspect so they crop
   to identical heights across the row. */
.kc-event-tile.et1,
.kc-event-tile.et3,
.kc-event-tile.et4 { aspect-ratio: 3 / 4; }
/* Bottom row tiles share a landscape aspect, sized to match each other. */
.kc-event-tile.et2,
.kc-event-tile.et5,
.kc-event-tile.et6 { aspect-ratio: 3 / 2; }
.kc-event-tile picture { display: contents; }
.kc-event-tile__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--kc-ease);
}
.kc-event-tile:hover .kc-event-tile__photo { transform: scale(1.04); }
.kc-event-tile__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46,28,19,.10) 30%, rgba(46,28,19,.70) 100%);
  transition: background .35s var(--kc-ease);
  pointer-events: none;
}
.kc-event-tile:hover .kc-event-tile__scrim {
  background: linear-gradient(180deg, rgba(46,28,19,.20) 30%, rgba(46,28,19,.80) 100%);
}
.kc-event-tile__label {
  position: absolute; left: 1.1rem; bottom: 1.3rem; right: 1.1rem;
  z-index: 2;
  font-family: var(--kc-display); font-weight: 400;
  color: var(--kc-ivory);
  font-size: clamp(.95rem, 1.3vw, 1.2rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.25;
}

/* ---------- Gallery ---------- */
/* Desktop: CSS columns masonry — photos render at natural aspect,
   no cropping, columns auto-balance their heights. The mobile
   breakpoint switches to a 2-col CSS Grid so the two charcuterie
   shots land side-by-side in the final row (flush, no orphan). */
.kc-gallery--editorial {
  column-count: 3;
  column-gap: 1rem;
}
.kc-gallery__tile {
  display: block;
  width: 100%;
  height: auto;
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--kc-radius-md);
  background: var(--kc-ivory-deep);
  transition: opacity .3s var(--kc-ease);
}
.kc-gallery__tile:hover { opacity: .92; }
.kc-gallery__instagram { text-align: center; margin-top: 3rem; }
.kc-instagram-link {
  font-family: var(--kc-body); font-weight: 500;
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--kc-khaki);
  border-bottom: 1px solid var(--kc-line); padding-bottom: 3px;
  transition: border-color .3s var(--kc-ease);
}
.kc-instagram-link:hover { border-bottom-color: var(--kc-gold); }

/* ---------- Process ---------- */
ol.kc-process { padding: 0; margin: 0; list-style: none; }
.kc-process {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem; position: relative;
}
.kc-process::before {
  content: "";
  position: absolute; left: 4%; right: 4%; top: 18px;
  height: 1px; background: var(--kc-line); z-index: 0;
}
.kc-step { position: relative; z-index: 1; }
.kc-step__diamond {
  width: 9px; height: 9px;
  background: var(--kc-gold);
  transform: rotate(45deg);
  margin-bottom: 1.6rem;
  position: relative;
}
.kc-step__diamond::after {
  content: ""; position: absolute; inset: -8px;
  background: var(--kc-bg); z-index: -1;
}
.kc-step__num {
  font-family: var(--kc-display-italic); font-style: italic;
  color: var(--kc-gold); font-size: .9rem; letter-spacing: .2em;
  margin-bottom: .8rem; display: block;
}
.kc-step__name {
  font-family: var(--kc-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .18em;
  font-size: 1.05rem; color: var(--kc-fg);
  margin-bottom: 1rem; line-height: 1.3;
}
.kc-step__copy {
  font-family: var(--kc-body); font-weight: 300;
  font-size: .92rem; line-height: 1.7;
  color: var(--kc-text); margin: 0; max-width: 24ch;
}
.kc-process__accent {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-radius: var(--kc-radius-md);
  overflow: hidden;
  background: var(--kc-ivory-deep);
  max-width: 960px;
  margin-left: auto; margin-right: auto;
}
.kc-process__accent img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Testimonials ---------- */
.kc-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
.kc-testimonial {
  background: var(--kc-ivory);
  padding: 2.8rem 2rem 2.4rem;
  border-radius: var(--kc-radius-md);
  border: 1px solid var(--kc-line);
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
}
.kc-testimonial::before {
  content: "\201C";
  display: block;
  font-family: var(--kc-display-italic);
  font-style: italic;
  font-size: 3.6rem; line-height: 0.8;
  color: var(--kc-gold); opacity: .5;
  margin-bottom: 1rem;
}
.kc-testimonial__quote {
  font-family: var(--kc-display-italic);
  font-style: italic; font-weight: 400;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.6; color: var(--kc-fg);
  letter-spacing: .005em;
  margin: 0 0 1.8rem;
  max-width: none;
  flex: 1;
}
.kc-testimonial__attr {
  font-family: var(--kc-body); font-weight: 500;
  font-size: .68rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--kc-sand);
}
.kc-testimonial__meta {
  display: block; margin-top: .6rem;
  font-family: var(--kc-display-italic); font-style: italic;
  color: var(--kc-khaki); font-size: .9rem; letter-spacing: .04em;
  text-transform: none;
}

/* ---------- CTA band ---------- */
.kc-cta-band {
  position: relative;
  text-align: center;
  padding: clamp(2rem, 6vw, 5rem) var(--kc-gutter);
  background: var(--kc-espresso); color: var(--kc-ivory);
  overflow: hidden;
}
.kc-cta-band__img {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../assets/images/keely-floor-mood-board.jpg');
  background-size: cover; background-position: center 30%;
  opacity: .35;
}
.kc-cta-band__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(46,28,19,.78) 0%, rgba(46,28,19,.92) 100%);
}
.kc-cta-band__inner {
  position: relative; z-index: 2;
  max-width: 720px; margin: 0 auto;
}
.kc-cta-band__eyebrow {
  color: rgba(253,245,231,.78);
  margin-bottom: 2rem;
}
.kc-cta-band__eyebrow::before,
.kc-cta-band__eyebrow::after { background: var(--kc-gold); opacity: .8; }
.kc-cta-band__heading {
  font-family: var(--kc-display);
  color: var(--kc-ivory);
  font-size: clamp(2.6rem, 7vw, 5rem);
  letter-spacing: .14em;
  line-height: 1.05;
  margin: 0;
}
.kc-cta-band__heading em {
  font-family: var(--kc-display-italic); font-style: italic;
  color: var(--kc-gold); text-transform: none; letter-spacing: 0;
}
.kc-cta-band__phrase {
  display: block;
  font-family: var(--kc-display-italic); font-style: italic;
  color: var(--kc-gold);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: .04em;
  margin: 1.6rem 0 0;
}
.kc-cta-band__rule { margin: 2.6rem auto 2.6rem; }
.kc-cta-band__signature {
  display: block;
  height: clamp(60px, 8vw, 96px);
  width: auto;
  margin: 2.6rem auto 0;
  opacity: .85;
}

/* ---------- Inquiry form ---------- */
.kc-form { max-width: 720px; margin: 0 auto; }
.kc-form__step-meta {
  display: flex; align-items: center; gap: 1.4rem;
  margin-bottom: 2.4rem;
}
.kc-form__step-label {
  font-family: var(--kc-body); font-weight: 500;
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--kc-khaki); white-space: nowrap;
}
.kc-form__step-bar {
  flex: 1; height: 1px; background: var(--kc-line); position: relative;
}
.kc-form__step-bar::after {
  content: ""; position: absolute; left: 0; top: 0; height: 1px;
  background: var(--kc-khaki); transition: width .4s var(--kc-ease);
}
.kc-form__step-bar[data-progress="1"]::after { width: 50%; }
.kc-form__step-bar[data-progress="2"]::after { width: 100%; }
.kc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; }
.kc-field-group { display: flex; flex-direction: column; }
.kc-field-group--full { grid-column: span 2; }
.kc-label {
  display: block;
  font-family: var(--kc-body); font-weight: 500;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--kc-sand); margin-bottom: .6rem;
}
.kc-field {
  width: 100%;
  background: var(--kc-ivory);
  border: 1px solid var(--kc-sand);
  border-radius: var(--kc-radius-sm);
  padding: .9rem 1rem;
  font-family: var(--kc-body); font-weight: 300;
  font-size: 1rem; color: var(--kc-espresso);
  transition: border-color .25s var(--kc-ease);
  appearance: none;
  -webkit-appearance: none;
}
.kc-field:focus { outline: none; border-color: var(--kc-khaki); }
select.kc-field {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(46,28,19,.4)' d='M0 0h12L6 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.kc-field--textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.kc-error {
  color: var(--kc-mauve); font-size: .76rem;
  margin-top: .4rem; font-family: var(--kc-body);
}
.kc-not-sure-label {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .55rem;
  font-family: var(--kc-body); font-size: .82rem;
  color: var(--kc-muted); letter-spacing: .02em;
  cursor: pointer;
}
.kc-not-sure-label input { accent-color: var(--kc-khaki); }
.kc-form__actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 2.4rem; gap: 1rem; flex-wrap: wrap;
}
.kc-form__back {
  background: transparent; border: none;
  font-family: var(--kc-body); font-weight: 500; font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--kc-sand);
  cursor: pointer; padding: .5rem 0;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--kc-ease), border-color .3s var(--kc-ease);
}
.kc-form__back:hover { color: var(--kc-fg); border-bottom-color: var(--kc-gold); }
.kc-form__notice {
  background: var(--kc-sage); color: var(--kc-espresso);
  padding: 1.6rem 2rem; border-radius: var(--kc-radius-sm);
  font-family: var(--kc-body); font-size: .95rem; letter-spacing: .04em;
  line-height: 1.6; text-align: center;
}
.kc-form__notice em {
  font-family: var(--kc-display-italic); font-style: italic;
  color: var(--kc-fg); letter-spacing: .04em;
}

/* ---------- Footer ---------- */
.kc-footer {
  background: var(--kc-espresso); color: var(--kc-ivory);
  padding: 5rem var(--kc-gutter) 2.5rem;
  border-top: 1px solid var(--kc-gold);
  position: relative;
}
.kc-footer::before {
  content: ""; position: absolute; top: -4px; left: 50%;
  width: 8px; height: 8px;
  background: var(--kc-gold); transform: translateX(-50%) rotate(45deg);
}
.kc-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.kc-footer__brand {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}
.kc-footer__wordmark-img {
  display: block;
  /* The footer uses wordmark-footer.svg, which adds 24px of transparent
     padding on every side of the source PNG. That extra canvas means we
     need ~26% more rendered height to keep the actual ink reading at the
     same size as before, with the new padding giving the K's stroke
     terminations room to breathe instead of grazing the edges. */
  height: clamp(90px, 10vw, 138px);
  width: auto;
  max-width: 100%;
  margin: 0;
  filter: brightness(0) invert(1);
}
.kc-footer__brand .kc-footer__tag { margin: 0; }
.kc-footer__info { text-align: center; }
.kc-footer__portrait {
  border-radius: var(--kc-radius-md);
  overflow: hidden;
  background: var(--kc-ivory-deep);
  max-width: 200px;
  margin-left: auto;
}
.kc-footer__portrait img {
  display: block;
  width: 100%;
  height: auto;
}
.kc-footer__wordmark {
  font-family: var(--kc-display); font-weight: 300; font-size: 1.4rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--kc-ivory);
}
.kc-footer__wordmark .plus { color: var(--kc-gold); font-weight: 400; margin: 0 .15em; }
.kc-footer__tag { margin-top: 1.2rem; }
.kc-footer__links {
  display: flex; gap: 2.4rem; justify-content: center;
  margin-top: 2.4rem; flex-wrap: wrap;
}
.kc-footer__links a {
  font-family: var(--kc-body); font-weight: 300; font-size: .85rem;
  color: rgba(253,245,231,.78); letter-spacing: .06em;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color .3s var(--kc-ease), color .3s var(--kc-ease);
}
.kc-footer__links a:hover { border-bottom-color: var(--kc-gold); color: var(--kc-ivory); }
.kc-footer__meta {
  font-family: var(--kc-body); font-weight: 300;
  font-size: .82rem; letter-spacing: .06em;
  color: rgba(253,245,231,.6); margin-top: 1.6rem;
}
/* SEO line — single italic sentence in the brand column, directly
   under the "bringing visions to life" tagline. Sized to match the
   .kc-footer__meta line (Youngstown, OH · available to travel) so the
   two read as a matched pair, just italicized. */
.kc-footer__seo {
  margin-top: 1.8rem;
  font-family: var(--kc-body);
  font-weight: 300;
  font-size: .82rem;
  letter-spacing: .06em;
  line-height: 1.7;
  color: rgba(253,245,231,.45);
  font-style: italic;
  text-align: left;
  max-width: 32ch;
}

.kc-footer__copy {
  margin-top: 3.5rem; font-family: var(--kc-body); font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(253,245,231,.45);
}
/* Desktop keeps copy nested at the bottom of the info column; the mobile
   copy element is collapsed at this breakpoint. */
.kc-footer__copy--mobile { display: none; }

/* Builder credit — a small line under the copyright in the center
   info column. Same plain-text styling as before: no underline (initial
   or hover), no link color, no hover differentiation, even though it's
   a real <a> linking to cabiles.co. Per request: shows ONLY in the
   desktop center column, nowhere else on the site (collapsed on mobile
   by the responsive block below). */
.kc-footer__credit {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--kc-body);
  font-weight: 300;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(253,245,231,.28);
  text-decoration: none;
  border-bottom: none;
}
.kc-footer__credit:hover,
.kc-footer__credit:focus {
  color: rgba(253,245,231,.28);
  border-bottom: none;
  text-decoration: none;
}

/* ---------- Mobile menu ---------- */
.kc-burger {
  display: none;
  background: none; border: none;
  width: 32px; height: 28px;
  padding: 0; cursor: pointer;
  position: relative; color: inherit;
}
.kc-burger span {
  position: absolute; left: 4px; right: 4px;
  height: 1px; background: currentColor;
  transition: transform .35s var(--kc-ease), top .35s var(--kc-ease), opacity .25s;
}
.kc-burger span:nth-child(1) { top: 9px; }
.kc-burger span:nth-child(2) { top: 18px; }
.kc-mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--kc-ivory);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2.4rem;
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--kc-ease);
}
.kc-mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.kc-mobile-menu a {
  font-family: var(--kc-display); font-weight: 400;
  font-size: 1.4rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--kc-fg); text-decoration: none; border-bottom: none;
}
.kc-mobile-menu a:hover { color: var(--kc-khaki); border-bottom: none; }
.kc-mobile-menu__close {
  position: absolute; top: 1.6rem; right: 1.6rem;
  background: none; border: none; cursor: pointer;
  font-family: var(--kc-body); font-size: .72rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--kc-fg);
}

/* ---------- Motion ---------- */
@keyframes kc-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kc-anim-in {
  opacity: 0; transform: translateY(12px);
  animation: kc-fade-up 1s var(--kc-ease) forwards;
}
.kc-anim-in[data-delay="1"] { animation-delay: .15s; }
.kc-anim-in[data-delay="2"] { animation-delay: .35s; }
.kc-anim-in[data-delay="3"] { animation-delay: .55s; }
.kc-anim-in[data-delay="4"] { animation-delay: .75s; }
.kc-anim-in[data-delay="5"] { animation-delay: .95s; }

@keyframes kc-cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Accessibility: focus ring ---------- */
:focus-visible {
  outline: 2px solid var(--kc-khaki);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Scroll-padding so anchors clear the sticky header (matches HEADER_OFFSET in main.js) */
[id] { scroll-margin-top: 112px; }
@media (max-width: 860px) {
  [id] { scroll-margin-top: 88px; }
}

/* ---------- Scroll reveals (IntersectionObserver) ---------- */
.kc-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--kc-ease), transform .8s var(--kc-ease);
}
.kc-reveal.kc-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .kc-anim-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .kc-reveal,
  .kc-reveal.kc-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .kc-hero__scroll-cue::after { animation: none; }
  .kc-event-tile,
  .kc-service,
  .kc-gallery__tile,
  .kc-footer__links a,
  .kc-header,
  .kc-btn,
  .kc-field { transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  /* Gallery thins to 2 columns at tablet widths; event tiles keep their
     editorial 3-up / 3-up grid layout. */
  .kc-gallery--editorial { column-count: 2; }

  /* Services already 2×2 at desktop — no override needed at 1024px. */

  .kc-process { grid-template-columns: repeat(2, 1fr); gap: 3rem 1.5rem; }
  .kc-process::before { display: none; }
  .kc-testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin: 0 auto;
    gap: 1.2rem;
  }
}

@media (max-width: 860px) {
  .kc-header__nav { display: none; }
  .kc-burger { display: block; }

  /* Header — tighter padding so the bigger logo doesn't leave a giant bar */
  .kc-header--split { padding-top: 1.1rem; padding-bottom: 1.1rem; }

  /* Hero — trim the desktop-only top padding and reserve room at the
     bottom for the absolutely-positioned scroll cue. The cue (text +
     animated line) extends ~7rem up from the hero's bottom edge, so
     9rem of padding gives the inquire button a comfortable buffer
     above the "Scroll" caption on short iPhone viewports where Safari
     leaves only ~650–700px of useful height. */
  .kc-hero { padding: 5.5rem var(--kc-gutter) 9rem; }
  .kc-hero h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); letter-spacing: .12em; }
  .kc-hero__support { font-size: 1rem; margin: 1.2rem auto 2rem; }
  .kc-hero__rule .kc-rule-diamond { width: 200px !important; }

  /* Positioning strip — smaller body text so the italic line breathes */
  .kc-positioning__line { font-size: clamp(1.3rem, 4.5vw, 1.8rem); }

  /* Section headings — already use clamp(), keep but tighten letter-spacing */
  .kc-sec-head h2 { letter-spacing: .16em; }

  /* About — collapse text on top, then jacket-over-shoulder full
     width, then the two smaller portraits side-by-side underneath. */
  .kc-about { grid-template-columns: 1fr; gap: 3rem; align-items: start; }
  .kc-about__portraits { grid-template-columns: 1fr; gap: .75rem; height: auto; }
  .kc-about__portraits-stack {
    display: flex;
    flex-direction: row;
    gap: .75rem;
    align-items: flex-start;
  }
  /* Pin both small portraits to a fixed aspect ratio matching the
     wider (sitting-laughing) photo so the row's flex-stretch can't
     distort either image. The taller photo (directors-chair) gets
     bottom-trimmed via object-fit cover + object-position top, which
     keeps the subject (the head/torso) in frame. */
  .kc-about__portraits-stack .kc-about__portrait {
    flex: 1;
    min-width: 0;
    aspect-ratio: 1179 / 1387;
    object-fit: cover;
    object-position: center top;
    height: auto;
  }
  .kc-about__portrait { height: auto; }

  /* Services — single column with tighter card padding so the cards
     don't push their content into the right edge of the viewport. */
  .kc-services { grid-template-columns: 1fr; gap: 1.2rem; }
  .kc-service {
    padding: 2.4rem 1.6rem 2rem;
    max-width: 100%;
    text-align: center;
    align-items: center;
  }
  /* Hair-rule + bullets need explicit handling once the card centers */
  .kc-service__hair { width: 60%; margin-left: auto; margin-right: auto; }
  .kc-service__includes { padding-left: 0; }
  .kc-service__includes li { padding-left: 0; }
  .kc-service__includes li::before { display: none; }

  /* Center all text in the major content sections — about, process
     steps, and form fields all become center-aligned on phones. */
  .kc-about { text-align: center; }
  .kc-step { text-align: center; }
  .kc-step__diamond { margin: 0 auto 1.6rem; }
  .kc-step__copy { margin: 0 auto; }
  .kc-field-group { text-align: center; }

  /* Event tiles — 2-up grid for the W/D/S/C portrait set, then the
     landscape Travel and Corporate tiles fill the full width below as a
     pair of stacked landscape strips. Travel comes first so the
     placeholder isn't sitting at the very bottom of the section. */
  .kc-event-tiles {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "wed din"
      "sho cel"
      "tra tra"
      "cor cor";
    gap: 6px;
  }
  .kc-event-tile.et1,
  .kc-event-tile.et2,
  .kc-event-tile.et3,
  .kc-event-tile.et4 { aspect-ratio: 3 / 4; }
  /* Travel and Corporate both render as full-width landscape strips on
     mobile; this overrides Travel's desktop-only 3/4 portrait. */
  .kc-event-tile.et5,
  .kc-event-tile.et6 { aspect-ratio: 2 / 1; }

  /* Selected Work — switch from masonry columns to a 2-col grid so the
     two charcuterie shots sit side-by-side in the final row (flush, no
     orphan image hanging below one column). */
  .kc-gallery--editorial {
    column-count: initial;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    gap: .75rem;
    align-items: start;
  }
  .kc-gallery__tile {
    margin-bottom: 0;
    width: 100%;
    height: auto;
  }

  /* Process — 1-col stack with consistent spacing */
  .kc-process { grid-template-columns: 1fr; gap: 2.4rem; }
  .kc-process__accent { margin-top: 2.5rem; }

  /* Inquiry form */
  .kc-grid-2 { grid-template-columns: 1fr; }
  .kc-field-group--full { grid-column: span 1; }
  .kc-form__actions { gap: 1rem; justify-content: center; }

  /* CTA band — smaller heading, tighter padding */
  .kc-cta-band__heading { font-size: clamp(2rem, 9vw, 2.8rem); letter-spacing: .1em; }
  .kc-cta-band__phrase { font-size: 1rem; }
  .kc-cta-band__rule { margin: 1.8rem auto; }
  .kc-cta-band__rule .kc-rule-diamond,
  .kc-cta-band__rule.kc-rule-diamond { width: 200px !important; }
  .kc-cta-band__signature { height: 56px; margin-top: 1.8rem; }

  /* Footer — single column with the copy line moved below the portrait
     (brand → info → portrait → copy). The desktop copy variant is
     hidden so we don't render it twice on mobile. */
  .kc-footer__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .kc-footer__brand { text-align: center; align-items: center; }
  .kc-footer__brand .kc-footer__wordmark-img { margin: 0 auto; }
  .kc-footer__seo { text-align: center; max-width: none; }
  .kc-footer__info { display: flex; flex-direction: column; gap: 1rem; }
  .kc-footer__links { gap: .8rem; flex-direction: column; align-items: center; }
  .kc-footer__links a { padding: .4rem .6rem; }
  .kc-footer__portrait { margin: 0 auto; max-width: 200px; }
  .kc-footer__copy--desktop { display: none; }
  .kc-footer__copy--mobile  { display: block; margin-top: 0; text-align: center; }
  /* Builder credit is desktop-center-column-only per request. */
  .kc-footer__credit { display: none; }

  /* Header — wordmark centered, burger pinned right */
  .kc-header--split { grid-template-columns: 1fr auto 1fr; }
  .kc-header__logo-slot { grid-column: 2; justify-self: center; min-width: 0; }
  .kc-header__logo { height: 42px; }
  .kc-burger { grid-column: 3; justify-self: end; }

  /* Mobile menu — bigger tap targets for the nav links and close button */
  .kc-mobile-menu { gap: 1.6rem; }
  .kc-mobile-menu a { padding: .5rem 1.2rem; font-size: 1.25rem; }
  .kc-mobile-menu__close { padding: .7rem 1rem; font-size: .8rem; top: 1rem; right: 1rem; }
}

/* Small phones — extra tightening so headings + body don't overflow at
   sub-480px viewports. */
@media (max-width: 480px) {
  :root { --kc-gutter: 5vw; }

  .kc-hero h1 { font-size: clamp(2.2rem, 13vw, 2.8rem); letter-spacing: .1em; }
  .kc-hero__support { font-size: .95rem; max-width: 32ch; }
  .kc-hero__eyebrow { font-size: .65rem; letter-spacing: .25em; }

  .kc-sec-head h2 { font-size: clamp(1.7rem, 7.5vw, 2.2rem); letter-spacing: .14em; }

  .kc-cta-band__heading { font-size: clamp(1.8rem, 8.5vw, 2.4rem); }
  .kc-cta-band__rule .kc-rule-diamond,
  .kc-cta-band__rule.kc-rule-diamond { width: 160px !important; }

  /* About portraits already collapse to lead-on-top / strip-below at
     the 860 breakpoint above; just tighten the gap on small phones. */
  .kc-about__portraits { gap: .6rem; }
  .kc-about__portraits-stack { gap: .6rem; }

  /* Event tile labels — keep them readable in narrow tiles */
  .kc-event-tile__label { font-size: .8rem; letter-spacing: .12em; }

  /* Service cards — even tighter inner padding on phones */
  .kc-service { padding: 2.2rem 1.4rem 1.8rem; }

  /* Footer wordmark — keep it from dominating the column. Slightly
     taller than the 72px we used before wordmark-footer.svg because
     that file's added padding makes the ink occupy less of the canvas. */
  .kc-footer__wordmark-img { height: 90px; }
}