/* Contact page: builds on the shared layout in about-apple.css and home-apple.css, switched to a light theme.
   An editorial contact sheet: plain rows, real details, one action each. */
.home-apple.contact-light {
  --ap-bg: #fff;
  --ap-card: #f5f5f7;
  --ap-card-raised: #fff;
  --ap-text: #1d1d1f;
  --ap-grey: #6e6e73;
  --ap-grey-light: #6e6e73;
  --ap-link: #0066cc;
  --ct-line: rgba(0, 0, 0, .1);
}

.ct-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(130px, 14vw, 190px) var(--ap-gutter) 0;
  text-align: center;
}

.ct-hero h1 {
  color: var(--ap-text);
  font-size: clamp(56px, 9vw, 112px);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1.02;
}

.ct-hero .ap-lead {
  max-width: 720px;
  margin-top: 22px;
}

.ct-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* Contact sheet */
.ct-sheet {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ct-line);
}

.ct-sheet__row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--ct-line);
}

.ct-sheet__label {
  color: var(--ap-grey);
  font-size: 15px;
}

.ct-sheet__value {
  color: var(--ap-text);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.1;
  text-decoration: none;
}

a.ct-sheet__value:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.ct-sheet__action {
  padding: 12px 22px;
  color: var(--ap-text);
  font: 600 15px/1 var(--ap-font);
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}

.ct-sheet__action:hover {
  background: #f5f5f7;
}

.ct-sheet__action--solid {
  color: #fff;
  background: var(--ap-text);
  box-shadow: none;
}

.ct-sheet__action--solid:hover {
  background: #000;
}

.ct-sheet a:focus-visible,
.ct-sheet button:focus-visible {
  outline: 3px solid var(--ap-link);
  outline-offset: 3px;
}

/* What happens next: three plain columns */
.ct-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-flow li {
  padding-top: 22px;
  border-top: 1px solid var(--ap-text);
}

.ct-flow span {
  color: var(--ap-grey);
  font-size: 14px;
  font-weight: 500;
}

.ct-flow h3 {
  margin: 14px 0 10px;
  color: var(--ap-text);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
}

.ct-flow p {
  color: var(--ap-grey);
  font-size: 17px;
  line-height: 1.47;
}

/* Where we are: one statement line */
.ct-where {
  text-align: left;
}

.ct-where__line {
  max-width: 820px;
  margin: 0 !important;
  color: var(--ap-grey);
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.15;
}

@media (max-width: 834px) {
  .ct-flow {
    grid-template-columns: 1fr;
  }

  .ct-sheet__row {
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
  }

  .ct-sheet__label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .ct-hero {
    padding-top: 130px;
  }

  .ct-sheet__action {
    padding: 10px 16px;
    font-size: 14px;
  }
}

/* Live Sri Lanka clock under the hero */
.ct-clock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0 !important;
  padding: 9px 16px 9px 12px;
  color: var(--ap-grey);
  font-size: 15px;
  border-radius: 999px;
  background: #f5f5f7;
}

.ct-clock b {
  color: var(--ap-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A small sun by day, a crescent moon by night. */
.ct-clock i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a59, #ff3d8b);
  box-shadow: 0 0 0 3px rgba(255, 122, 89, .18);
}

.ct-clock.is-night i {
  background: transparent;
  box-shadow: inset 4px -3px 0 0 #a259ff;
}

/* What are you working on? */
.ct-needs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ct-need {
  position: relative;
  padding: 16px 24px;
  color: var(--ap-text);
  font: 600 clamp(17px, 1.6vw, 20px)/1 var(--ap-font);
  letter-spacing: -.02em;
  border: 0;
  border-radius: 999px;
  background: #f5f5f7;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), color .3s ease, background .3s ease;
}

.ct-need:hover {
  background: #ebebef;
}

.ct-need[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(120deg, #ff7a59, #ff3d8b 35%, #a259ff 65%, #2997ff);
  transform: translateY(-2px);
}

.ct-need:focus-visible,
.ct-go__button:focus-visible {
  outline: 3px solid var(--ap-link);
  outline-offset: 3px;
}

.ct-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 32px;
}

.ct-go__button {
  padding: 16px 28px;
  color: #fff;
  font: 600 16px/1 var(--ap-font);
  border: 0;
  border-radius: 999px;
  background: var(--ap-text);
  cursor: pointer;
  transition: background .3s ease;
}

.ct-go__button:hover {
  background: #000;
}

.ct-go__summary {
  margin: 0 !important;
  color: var(--ap-grey);
  font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .ct-need {
    transition: none;
  }
}

/* Sections below the opening title start on the left edge of the column. */
.contact-page .ap-head {
  margin-inline: 0;
  text-align: left;
}

.contact-page .ap-head .ap-sub,
.contact-page .ap-banner .ap-sub {
  margin-inline: 0 !important;
}

/* Titles alternate: the picker and the closing line sit in the centre; the steps start on the left. */
.contact-page .ct-start .ap-head {
  margin-inline: auto;
  text-align: center;
}

.contact-page .ct-start .ap-head .ap-sub {
  margin-inline: auto !important;
}

.contact-page .ct-needs,
.contact-page .ct-go {
  justify-content: center;
}

.contact-page .ct-where {
  text-align: center;
}

.contact-page .ct-where__line {
  margin-inline: auto !important;
}