/* Desktop layout for oncenottwice.co.uk (Iris, 8 Oct 2026; desktop-v2 same day). Loaded from <body>, after site.css.
   Layout changes are inside min-width media queries. Below 900px the only changes are the bigger logo (block just below)
   and the hide rule for the desktop-only stock photo, which only targets that new element. */
.desk-photo { display: none; }

/* v2: bigger logo on phones and small tablets. Same mark, cropped to its frame (img/logo-mark-128.png = 2x for 64px). */
@media (max-width: 899px) {
  .topbar img { width: 64px; height: 64px; border-radius: 0; content: url("img/logo-mark-128.png"); }
}
@media (max-width: 760px) {
  .topbar img { width: 58px; height: 58px; }
}

@media (min-width: 900px) {
  :root { --max: 1160px; }

  /* Header (v2): big logo for brand awareness, nav scaled to match.
     img/logo-mark-280.png is the same mark cropped to its frame, 2x for 132px. */
  .topbar { max-width: var(--max); padding: 1.2rem 1.5rem 0.4rem; }
  .topbar img { width: 132px; height: 132px; border-radius: 0; content: url("img/logo-mark-280.png"); }
  .topbar nav { gap: 2.8rem; }
  .topbar nav a { font-size: 1.32rem; padding: 0.45rem 0; letter-spacing: 0.005em; }
  .topbar nav a[aria-current] { border-bottom-width: 3px; }

  /* Hero: copy left, Garry right, full width */
  .hero { max-width: var(--max); grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 4rem; padding: 1.6rem 1.5rem 2.6rem; }
  .hero h1 { font-size: clamp(3rem, 4.2vw, 3.9rem); max-width: 14ch; margin-bottom: 1rem; }
  .hero .lede { font-size: 1.4rem; line-height: 1.45; max-width: 34rem; }
  .hero .cta { font-size: 1.2rem; padding: 1.05rem 1.2rem; margin-top: 1.5rem; }
  .hero .photo-real { max-width: 340px; }

  /* Content column: wide, not sprawling */
  .wrap { max-width: var(--max); padding-left: 1.5rem; padding-right: 1.5rem; }
  .card { padding: 1.6rem 1.8rem 1.4rem; margin-top: 1.5rem; }
  h2 { font-size: 1.6rem; margin-bottom: 0.7rem; }

  /* Home: six cards as 3 x 2 */
  .pains { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
  .pains li { padding: 0.9rem 1rem 1rem; }
  .pains .pain { font-size: 1.1rem; }
  .pains .change { font-size: 1rem; margin-top: 0.5rem; }
  .nudge-lead { font-size: 1.2rem; margin-bottom: 1rem; }

  /* Home: demo card with the stock photo on the left (v2: real photo + caption replaces the v1 illustration) */
  .card:has(> .desk-photo) { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 2.2rem; align-items: center; }
  .card:has(> .desk-photo) > .desk-photo { display: block; grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .desk-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
  .desk-photo figcaption { font-size: 0.85rem; color: var(--ink); opacity: 0.75; margin-top: 0.45rem; }
  .card:has(> .desk-photo) > :not(.desk-photo) { grid-column: 2; }
  .card:has(> .desk-photo) > h2 { align-self: end; }
  .card:has(> .desk-photo) > .small { align-self: start; }

  /* Home: "What I do" and the price card side by side; the rest full width */
  main.wrap:has(.pains) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  main.wrap:has(.pains) > * { grid-column: 1 / -1; }
  main.wrap:has(.pains) > .card:has(.steps4), main.wrap:has(.pains) > .card.price { grid-column: auto; }
  .card.price .price-locked { font-size: 1.7rem; text-align: left; }
  .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; padding-left: 1.1rem; }
  .close { margin-top: 3rem; }
  .close h2 { font-size: 2.4rem; }

  /* How it works: steps in a row, questions as a 2-column grid */
  main.page:has(.steps4) .steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
  main.page:has(.steps4) .steps4 li { border-top: 0; padding: 2.6rem 0 0; }
  main.page:has(.steps4) .steps4 li:before { top: 0; width: 2.1rem; height: 2.1rem; line-height: 2.15rem; }
  #questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.4rem; }
  #questions h2 { grid-column: 1 / -1; }
  #questions .q { border-top: 1px solid rgba(30,58,95,0.14); padding: 0.9rem 0; }
  #questions .q:nth-of-type(-n+2) { border-top: 0; }
  #questions .q:last-of-type { grid-column: 1 / -1; }
  main.page h1 { font-size: 3rem; margin-top: 1.4rem; }
  main.page > .cta, main.page > .under { margin-left: auto; margin-right: auto; }
  main.page > .cta { margin-top: 2.2rem; }

  /* About and contact: Garry left, words and contact right */
  main.page:has(#contact) { display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 3.5rem; row-gap: 0; align-items: start; }
  main.page:has(#contact) > h1 { grid-column: 1 / -1; }
  main.page:has(#contact) > picture { grid-column: 1; grid-row: 2 / span 2; }
  main.page:has(#contact) .photo-real { max-width: 340px; margin: 0.6rem 0 0; }
  main.page:has(#contact) > .intro { grid-column: 2; font-size: 1.35rem; color: var(--navy); margin-top: 0.6rem; }
  main.page:has(#contact) > #contact { grid-column: 2; }
  #contact .cta, #contact .under { margin-left: 0; }

  /* Footer */
  .legal { max-width: var(--max); margin-top: 2.5rem; }
}

@media (min-width: 1400px) {
  .hero h1 { font-size: 4.1rem; }
  .hero .photo-real { max-width: 360px; }
}