:root {
    --cream: #f6f2ec;
    --sand: #e7ddcf;
    --clay: #b08b6a;       /* decorative, and text on charcoal only (4.8:1) */
    --clay-dark: #7d5a3c;  /* clay for text/buttons on cream or sand (4.6:1+) */
    --charcoal: #2b2622;
    --taupe: #6b6058;
    --white: #ffffff;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px; /* keep anchor targets and focused items clear of the sticky header */
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 200;
    padding: 12px 20px;
    background: var(--charcoal);
    color: var(--white);
    font-size: 0.85rem;
  }

  .skip-link:focus { top: 16px; }

  :focus-visible {
    outline: 2px solid var(--clay-dark);
    outline-offset: 3px;
  }

  .contact :focus-visible,
  footer :focus-visible { outline-color: var(--clay); }

  body {
    font-family: 'Jost', sans-serif;
    color: var(--charcoal);
    background: var(--cream);
    font-weight: 300;
    line-height: 1.6;
  }

  h1, h2, h3, .logo {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  a { color: inherit; text-decoration: none; }

  button { font-family: inherit; }

  img {
    max-width: 100%;
    display: block;
    -webkit-touch-callout: none; /* no long-press "Save image" on iPhone/iPad (deterrent only, see script.js) */
    -webkit-user-select: none;
    user-select: none;
  }

  .container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* Header */
  header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(246, 242, 236, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--sand);
  }

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
  }

  .logo {
    font-size: 1.45rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .logo span { font-weight: 400; color: var(--clay-dark); }

  /* Real Estate mini-site: small label after the wordmark */
  .logo .logo-tag {
    font-family: 'Jost', sans-serif;
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    border-left: 1px solid var(--sand);
    padding-left: 10px;
  }

  .nav-menu {
    display: flex;
    align-items: center;
    gap: 36px;
  }

  .nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .nav-links a {
    position: relative;
    white-space: nowrap;
    padding-bottom: 4px;
    transition: color 0.2s;
  }

  .nav-links a:hover { color: var(--clay-dark); }

  .nav-cta {
    border: 1px solid var(--charcoal);
    padding: 10px 22px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.25s, color 0.25s;
    white-space: nowrap;
  }

  .nav-cta:hover { background: var(--charcoal); color: var(--white); }

  /* Real Estate: the new venture, filled so it stands apart from Get in Touch */
  .nav-cta-alt {
    background: var(--charcoal);
    color: var(--white);
  }

  .nav-cta-alt:hover { background: var(--clay-dark); border-color: var(--clay-dark); }

  .nav-toggle {
    display: none;
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: relative;
    margin-right: -9px; /* lines sit 9px inside the button; align them with the page margin */
  }

  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    content: "";
    position: absolute;
    left: 9px;
    width: 22px;
    height: 1.5px;
    background: var(--charcoal);
    transition: transform 0.25s, background 0.25s;
  }

  .nav-toggle span { top: 19px; }
  .nav-toggle span::before { left: 0; top: -7px; }
  .nav-toggle span::after { left: 0; top: 7px; }

  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

  /* Hero */
  .hero {
    position: relative;
    height: 88vh;
    min-height: 560px;
    display: flex;
    align-items: flex-end;
    /* the dark scrim behind the text keeps white text at 4.5:1+; keep it when the photo goes in */
    background: linear-gradient(180deg, rgba(43,38,34,0.1) 0%, rgba(43,38,34,0.35) 35%, rgba(43,38,34,0.8) 100%),
      url('https://media.lulophotostudio.ca/home/hero-toronto-portrait-photographer-1920.jpg');
    background-size: cover;
    background-position: center 30%;
    color: var(--white);
  }

  /* Real Estate mini-site hero: real-estate/hero-1920.jpg on the media bucket.
     Keep the dark overlay layers, they are what makes the white text readable. */
  .hero-real-estate {
    --re-hero-photo: url('https://media.lulophotostudio.ca/real-estate/hero-1920.jpg');
    /* two overlays: a strong shade on the left, behind the text, fading out so the photo shows
       on the right; and a light one that only deepens toward the bottom edge */
    background-image: linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.72) 30%, rgba(0,0,0,0.25) 58%, rgba(0,0,0,0) 78%),
      linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.55) 100%),
      var(--re-hero-photo);
    background-color: var(--charcoal);
    background-position: center;
  }

  .hero-inner {
    padding: 0 32px 72px;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
  }

  .hero-eyebrow {
    display: block;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.78rem;
    margin-bottom: 18px;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-weight: 500;
    max-width: 780px;
    line-height: 1.1;
  }

  .hero p {
    margin-top: 20px;
    max-width: 480px;
    font-size: 1.05rem;
  }

  .btn {
    display: inline-block;
    margin-top: 34px;
    padding: 14px 34px;
    background: var(--white);
    color: var(--charcoal);
    border: 0; /* for <button class="btn">, which otherwise keeps the browser's default border */
    cursor: pointer;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background 0.25s, color 0.25s;
  }

  .btn:hover { background: var(--clay-dark); color: var(--white); }

  .btn-outline {
    background: transparent;
    border: 1px solid var(--charcoal);
    color: var(--charcoal);
  }

  /* Matches the nav's Real Estate button (.nav-cta-alt): filled charcoal, clay-dark on hover */
  .btn-secondary {
    background: var(--charcoal);
    color: var(--white);
  }

  .btn-secondary:hover { background: var(--clay-dark); }

  .btn-outline:hover { background: var(--charcoal); color: var(--white); }

  /* Second button on a dark hero: white outline beside the solid white .btn */
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    margin-top: 34px;
  }

  .hero-actions .btn { margin-top: 0; }

  .btn-ghost {
    background: transparent;
    color: var(--white);
    box-shadow: inset 0 0 0 1px var(--white);
  }

  .btn-ghost:hover { background: var(--white); color: var(--charcoal); }

  /* Section shell */
  section { padding: 110px 0; }

  .section-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 64px;
  }

  .section-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.75rem;
    color: var(--clay-dark);
    margin-bottom: 14px;
  }

  .contact .section-eyebrow { color: var(--clay); }

  .section-head h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
  }

  .section-head p {
    margin-top: 18px;
    color: var(--taupe);
  }

  /* Collections grid */
  .collections {
    display: grid;
    /* minmax(0, 1fr), not bare 1fr: Safari won't shrink a grid track below its
       content's natural size otherwise (here, each photo's 800px width) */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .collection {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Safari keeps a flex/grid item's content (the 800px-wide photo) as its
                     minimum size otherwise, so rows won't shrink below that — Chrome/Firefox
                     are more lenient about this by default, Safari follows the spec strictly */
  }

  .collection-card {
    aspect-ratio: 3 / 4; /* vertical photos */
    overflow: hidden;
    min-width: 0;
    background: linear-gradient(160deg, var(--sand), var(--clay));
  }

  /* Add alongside .collection-card for a horizontal photo: <div class="collection-card landscape"> */
  .collection-card.landscape {
    aspect-ratio: 4 / 3;
  }

  /* When photos are ready: <img> inside .collection-card with object-fit: cover */
  .collection-card img { width: 100%; height: 100%; object-fit: cover; }

  .collection-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 22px;
  }

  .collection-body h3 {
    font-size: 1.45rem;
    font-weight: 500;
  }

  .collection-body p {
    margin-top: 10px;
    font-size: 0.92rem;
    color: var(--taupe);
  }

  .collection-body .collection-sub {
    margin-top: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clay-dark);
  }

  .collection-link {
    margin-top: auto;
    padding-top: 16px;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.2s;
  }

  .collection-link:hover { color: var(--clay-dark); }

  /* About */
  .about {
    background: var(--sand);
  }

  .about-grid {
    display: grid;
    grid-template-columns: 0.54fr 1.46fr; /* image column is 60% of its original width (0.9fr) */
    gap: 64px;
    align-items: center;
  }

  .about-image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: linear-gradient(150deg, var(--charcoal), var(--clay));
  }

  .about-image img { width: 100%; height: 100%; object-fit: cover; }

  .about-copy .section-eyebrow { text-align: left; }

  .about-copy h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    margin-bottom: 22px;
  }

  .about-copy p {
    color: var(--taupe);
    margin-bottom: 16px;
    max-width: 520px;
  }

  /* Real Estate */
  .real-estate {
    position: relative;
    background: var(--white);
    overflow: hidden; /* clips the oversized, rotated wave layer below to the section */
  }

  /* Diagonal wave background: a seamless horizontal wave tile, rotated as a whole
     oversized layer so the waves read as diagonal with no visible seams. */
  .real-estate::before {
    content: "";
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2790%27%20height%3D%2790%27%3E%3Cpath%20d%3D%27M0%2C45%20Q11.25%2C32%2022.5%2C45%20T45%2C45%20T67.5%2C45%20T90%2C45%27%20fill%3D%27none%27%20stroke%3D%27rgba%28176%2C139%2C106%2C0.12%29%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
    background-repeat: repeat;
    background-size: 90px 90px;
    transform: rotate(-35deg);
    pointer-events: none;
  }

  .re-grid {
    position: relative; /* stacks above the ::before wave layer */
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
  }

  .re-copy .section-eyebrow { text-align: left; }

  .re-copy h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    margin-bottom: 22px;
  }

  .re-copy p {
    color: var(--taupe);
    max-width: 520px;
  }

  .re-list {
    list-style: none;
    margin: 24px 0 8px;
    max-width: 520px;
  }

  .re-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--sand);
    font-size: 0.95rem;
  }

  .re-list li:first-child { border-top: 1px solid var(--sand); }

  .re-list li.re-feature { padding: 22px 0; }

  .re-feature strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--charcoal);
  }

  .re-feature > span {
    display: block;
    margin-top: 4px;
    color: var(--taupe);
    font-size: 0.92rem;
  }

  /* Text link under a featured item (reuses .collection-link's look; that class's
     margin/padding were written for a flex-column card, so reset them here) */
  .re-sample-link {
    display: inline-block;
    margin-top: 12px;
    padding-top: 0;
    color: var(--clay-dark);
  }

  .re-sample-link:hover { color: var(--charcoal); }

  /* Real Estate mini-site: short band between the tour and the gallery that
     promotes the property website and links to the sample */
  .sample-band {
    background: var(--sand);
    padding: 72px 0;
  }

  .sample-band .section-head { margin-bottom: 0; }
  .sample-band .section-head h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }

  /* When a photo is ready: <img> inside .re-image with object-fit: cover */
  .re-image {
    aspect-ratio: 4 / 5;
    background: linear-gradient(200deg, var(--sand), var(--taupe));
  }

  .re-image img { width: 100%; height: 100%; object-fit: cover; }

  /* Virtual tour: shares .re-image's grid slot and 4:5 aspect-ratio;
     these rules layer the click-to-load tour on top of it. */
  .tour-embed {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--taupe);
    background: var(--charcoal) url('https://media.lulophotostudio.ca/home/real-estate-360-tour-1000.jpg') center / cover no-repeat;
  }

  .tour-embed :focus-visible { outline-color: var(--clay); }

  /* Real Estate mini-site: the tour as a wide, centred showcase rather than a grid slot */
  .tour-embed-feature {
    aspect-ratio: 16 / 9;
    max-width: 900px;
    margin: 0 auto;
    /* its own poster photo; the homepage teaser keeps the one set on .tour-embed */
    background-image: url('https://files.lulophotostudio.ca/david-lima/5-233-innisfil-st/LRW05301-HDR.jpg');
  }

  .tour-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  .tour-launch {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    cursor: pointer;
    color: var(--white);
    background: rgba(43, 38, 34, 0.55);
    transition: background 0.25s;
  }

  .tour-launch:hover,
  .tour-launch:focus-visible {
    background: rgba(43, 38, 34, 0.4);
  }

  .tour-launch-icon {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  .tour-launch-label {
    padding: 10px 22px;
    border: 1px solid var(--white);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    transition: background 0.25s, color 0.25s;
  }

  .tour-launch:hover .tour-launch-label,
  .tour-launch:focus-visible .tour-launch-label {
    background: var(--white);
    color: var(--charcoal);
  }

  /* Testimonials */
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

  .testimonial {
    text-align: center;
  }

  .testimonial .quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-style: italic;
    color: var(--charcoal);
  }

  .testimonial .name {
    margin-top: 20px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    color: var(--taupe);
  }

  /* Contact */
  .contact {
    background: var(--charcoal);
    color: var(--cream);
  }

  .contact .section-head p { color: rgba(246,242,236,0.65); }

  .contact-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
  }

  .contact-info h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
  }

  .contact-info .item {
    margin-bottom: 18px;
    font-size: 0.95rem;
    color: rgba(246,242,236,0.75);
  }

  .contact-info .item a { text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
  .contact-info .item a:hover { color: var(--clay); }

  /* "Email copied" note that script.js shows after an email link is clicked */
  .copied-note {
    margin-left: 10px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clay-dark); /* on light backgrounds */
  }

  .contact .copied-note { color: var(--clay); }
  .copied-note:empty { display: none; }

  .contact-info .item strong {
    display: block;
    color: var(--cream);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  form .full { grid-column: 1 / -1; }

  label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: rgba(246,242,236,0.6);
  }

  input, select, textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(246,242,236,0.55); /* 3:1+ against the dark background */
    padding: 10px 2px;
    color: var(--cream);
    font-family: inherit;
    font-size: 0.95rem;
    color-scheme: dark; /* keeps the date picker icon visible */
  }

  input:focus, select:focus, textarea:focus { border-color: var(--clay); }

  textarea { resize: vertical; min-height: 90px; }

  .form-note {
    font-size: 0.78rem;
    color: rgba(246,242,236,0.7);
  }

  .form-status {
    font-size: 0.88rem;
    display: none;
  }

  .form-status.visible { display: block; }
  .form-status.success { color: var(--clay); }
  .form-status.error { color: #d99a85; }

  form .btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }

  form .btn {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 8px;
    background: var(--clay);
    color: var(--charcoal);
  }

  form .btn:hover { background: var(--cream); color: var(--charcoal); }

  /* Footer */
  footer {
    background: var(--charcoal);
    color: rgba(246,242,236,0.6);
    border-top: 1px solid rgba(246,242,236,0.12);
    padding: 36px 0;
  }

  .footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    flex-wrap: wrap;
    gap: 12px;
  }

  .footer-social {
    display: flex;
    gap: 18px;
    list-style: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
  }

  .footer-social a:hover { color: var(--clay); }

  /* Gallery page */
  .page-intro {
    padding-top: 72px;
    padding-bottom: 0;
  }

  .page-cta {
    padding: 55px 0;
    text-align: center;
  }

  .page-cta .section-head { text-align: center; margin: 0 auto 48px; }

  .page-cta form {
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
  }

  /* Overlay tiles: a 1x4 index of the 4 collections, photo + name only,
     the whole tile is one link through to that collection's full gallery. */
  .gallery-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .gallery-tile {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    min-width: 0;
    background: linear-gradient(160deg, var(--sand), var(--clay));
  }

  .gallery-tile:focus-visible { outline-color: var(--clay); }

  .gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .gallery-tile:hover img,
  .gallery-tile:focus-visible img {
    transform: scale(1.05);
  }

  .gallery-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(43,38,34,0) 45%, rgba(43,38,34,0.78) 100%);
  }

  .gallery-tile-caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    color: var(--white);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  /* Per-collection full gallery pages */
  .back-link {
    display: inline-block;
    margin-bottom: 24px;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--taupe);
    transition: color 0.2s;
  }

  .back-link:hover { color: var(--clay-dark); }

  /* Uniform grid: every tile is the same size/shape (3:4), photos cropped to
     fit via object-fit: cover regardless of their original orientation. Grid
     auto-wraps, so this handles any number of photos, not just a fixed count. */
  .full-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  /* Portrait galleries: masonry. Photos keep their own proportions (no cropping) and stack
     down balanced columns, so vertical and horizontal photos sit together with even gaps. */
  .full-gallery-grid.masonry {
    display: block;
    column-count: 4;
    column-gap: 16px;
  }

  .full-gallery-grid.masonry .collection-card {
    aspect-ratio: auto;
    margin-bottom: 16px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }

  .full-gallery-grid.masonry .collection-card img { height: auto; }

  /* Photo viewer (built by script.js for galleries with class="zoomable") */
  .full-gallery-grid.zoomable .collection-card { cursor: zoom-in; }

  body.viewer-open { overflow: hidden; }

  .viewer {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 72px;
    background: rgba(43, 38, 34, 0.96);
  }

  .viewer[hidden] { display: none; }

  .viewer-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .viewer-btn {
    position: absolute;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(246, 242, 236, 0.5);
    background: rgba(43, 38, 34, 0.6);
    color: var(--cream);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }

  .viewer-btn:hover { background: var(--cream); color: var(--charcoal); }
  .viewer :focus-visible { outline-color: var(--clay); }

  .viewer-close { top: 16px; right: 16px; font-size: 1.8rem; }
  .viewer-prev { left: 16px; top: 50%; transform: translateY(-50%); }
  .viewer-next { right: 16px; top: 50%; transform: translateY(-50%); }

  .viewer-count {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: rgba(246, 242, 236, 0.75);
  }

  /* Real Estate mini-site: pricing, process, FAQ */
  .pricing { background: var(--sand); }
  .faq { background: var(--sand); }

  .pricing .section-head { margin-bottom: 0; }

  .process-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax, not bare 1fr: Safari */
    gap: 32px;
    list-style: none;
  }

  .process-step { text-align: center; }

  .process-step .process-step-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.4rem;
    line-height: 1.2;
    color: var(--clay-dark);
    margin-bottom: 8px;
  }

  .process-step h3 { font-size: 1.2rem; margin-bottom: 8px; }
  .process-step p { color: var(--taupe); font-size: 0.92rem; }

  .faq-list { max-width: 720px; margin: 0 auto; }

  /* low-alpha charcoal, not --sand: the section background is already sand */
  .faq-item {
    padding: 22px 0;
    border-bottom: 1px solid rgba(43,38,34,0.12);
  }

  .faq-item:first-child { border-top: 1px solid rgba(43,38,34,0.12); }

  .faq-item h3 { font-size: 1.2rem; margin-bottom: 8px; }
  .faq-item p { color: var(--taupe); }

  /* Text block under a collection gallery (for visitors and search engines) */
  .collection-about { background: var(--sand); padding: 72px 0; }
  .collection-about .container { max-width: 800px; }
  .collection-about h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 18px; text-align: center; }
  .collection-about p { color: var(--taupe); margin-bottom: 14px; }

  /* Pricing page (pricing.html; its tables are built by pricing.js from pricing-data.js) */
  .price-hero { padding-bottom: 24px; }
  .price-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); line-height: 1.15; }

  .price-section { padding: 72px 0; }
  .price-section .section-head { margin-bottom: 40px; }
  .price-section .section-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
  .price-band { background: var(--sand); }

  .price-note {
    margin-top: 16px;
    font-size: 0.88rem;
    color: var(--taupe);
    text-align: center;
  }

  .price-note strong { color: var(--charcoal); font-weight: 500; }

  .price-table a,
  .price-note a {
    color: var(--clay-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .price-table a:hover,
  .price-note a:hover { color: var(--charcoal); }

  .section-head .offer-banner {
    margin-top: 28px;
    padding: 16px 22px;
    background: var(--charcoal);
  }

  .section-head .offer-banner p { margin: 0; color: var(--cream); }
  .offer-banner strong { font-weight: 500; color: var(--white); }

  .price-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border: 1px solid rgba(43,38,34,0.12);
  }

  .price-table th,
  .price-table td {
    padding: 15px 16px;
    border-bottom: 1px solid rgba(43,38,34,0.12);
    text-align: center;
    vertical-align: middle;
  }

  .price-table tbody tr:last-child th,
  .price-table tbody tr:last-child td { border-bottom: 0; }

  .price-table thead th {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--cream);
  }

  .price-table th:first-child { text-align: left; }
  .price-table tbody th { font-weight: 400; }
  .price-table td { font-size: 1.05rem; font-weight: 400; }

  .price-na { font-size: 0.85rem; color: var(--taupe); }

  .price-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 8px;
    background: var(--clay-dark);
    color: var(--white);
    font-family: 'Jost', sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
  }

  .price-table-narrow { max-width: 760px; margin: 32px auto 0; }
  .price-section .section-head + .price-table-narrow { margin-top: 0; }

  .price-subhead {
    margin: 48px 0 8px;
    font-size: 1.35rem;
    text-align: center;
  }

  .price-includes {
    list-style: none;
    max-width: 760px;
    margin: 0 auto;
  }

  .price-includes li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(43,38,34,0.12);
    color: var(--taupe);
  }

  .price-includes strong { color: var(--charcoal); font-weight: 500; }

  /* Responsive. Keep this block LAST in the file: these overrides only win over the
     base rules above because they come after them. */
  @media (max-width: 1080px) {
    .nav-menu { gap: 24px; }
    .nav-links { gap: 22px; }
  }

  /* The Real Estate mini-site's header carries more (logo tag, longer labels), so it uses
     the tighter spacing at every width and switches to the hamburger earlier. Same rules
     as the 920px block below, scoped to <header class="nav-wide">. */
  .nav-wide .nav-menu { gap: 24px; }
  .nav-wide .nav-links { gap: 22px; }

  @media (max-width: 1100px) {
    .full-gallery-grid.masonry { column-count: 3; }
    .nav-wide .nav { position: relative; }
    .nav-wide .nav-toggle { display: block; }

    .nav-wide .nav-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 24px;
      padding: 28px 32px 32px;
      background: var(--cream);
      border-bottom: 1px solid var(--sand);
    }

    .nav-wide .nav-menu.open { display: flex; }
    .nav-wide .nav-links { flex-direction: column; gap: 18px; font-size: 0.9rem; }
    .nav-wide .nav-actions { flex-direction: column; align-items: stretch; }
    .nav-wide .nav-cta { text-align: center; }
  }

  @media (max-width: 920px) {
    .nav { position: relative; }
    .nav-toggle { display: block; }

    .nav-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 24px;
      padding: 28px 32px 32px;
      background: var(--cream);
      border-bottom: 1px solid var(--sand);
    }

    .nav-menu.open { display: flex; }

    .nav-links { flex-direction: column; gap: 18px; font-size: 0.9rem; }

    .nav-actions { flex-direction: column; align-items: stretch; }
    .nav-cta { text-align: center; }

    .collections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-grid, .re-grid, .contact-grid { grid-template-columns: 1fr; }
    .about-image { width: 60%; min-width: 160px; }
    /* narrow screens: the text spans the full width, so shade evenly instead of left-only */
    .hero-real-estate {
      background-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.72) 38%, rgba(0,0,0,0.82) 100%),
        var(--re-hero-photo);
    }
    .testimonials-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
    form { grid-template-columns: 1fr; }
    .gallery-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .full-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .full-gallery-grid.masonry { column-count: 2; }
    .process-steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  }

  /* Pricing tables on phones: no sideways scrolling. Each row becomes a card, with the
     column name shown beside each price (taken from the cell's data-label). */
  @media (max-width: 760px) {
    .price-table,
    .price-table tbody,
    .price-table tr,
    .price-table th,
    .price-table td { display: block; }

    .price-table { background: none; border: 0; }

    .price-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
    }

    .price-table tbody tr {
      margin-bottom: 16px;
      padding: 16px 18px 8px;
      background: var(--white);
      border: 1px solid rgba(43,38,34,0.12);
    }

    .price-table tbody th {
      padding: 0 0 10px;
      border-bottom: 0;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.25rem;
      font-weight: 500;
      text-align: left;
    }

    .price-table td {
      display: flex;
      justify-content: flex-end;
      align-items: baseline;
      gap: 16px;
      padding: 10px 0;
      border-bottom: 0;
      border-top: 1px solid rgba(43,38,34,0.12);
      text-align: right;
    }

    .price-table td::before {
      content: attr(data-label);
      margin-right: auto; /* label on the left, price (and any note) on the right */
      font-size: 0.85rem;
      color: var(--taupe);
      text-align: left;
    }

    .price-section { padding: 56px 0; }
  }

  @media (max-width: 560px) {
    .collections { grid-template-columns: minmax(0, 1fr); }
    section { padding: 76px 0; }
    .page-intro { padding-top: 56px; }
    .page-cta { padding: 38px 0; }
    .gallery-tiles { grid-template-columns: minmax(0, 1fr); }
    .full-gallery-grid { grid-template-columns: minmax(0, 1fr); }
    .full-gallery-grid.masonry { column-count: 1; }
    .viewer { padding: 72px 12px; }
    .viewer-prev, .viewer-next { top: auto; bottom: 12px; transform: none; }
    .viewer-prev { left: 12px; }
    .viewer-next { right: 12px; }
    .logo-tag { display: none; }
    .sample-band { padding: 56px 0; }
    .tour-embed-feature { aspect-ratio: 4 / 3; }
  }