:root {
  --deep: #015656;
  --teal: #008080;
  --mint: #c1dfce;
  --cream: #f6f3e9;
  --white: #ffffff;
  --ink: #173d3b;
  --muted: #536c68;
  --line: #b8ccc5;
  --shadow: 0 22px 60px rgba(1, 86, 86, .11);
  --serif: "Iowan Old Style", Baskerville, "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Aptos, "Segoe UI", Arial, sans-serif;
  --max: 1180px;
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-section: clamp(56px, 6vw, 84px);
  --space-break: clamp(72px, 8vw, 108px);
  --type-display: clamp(2.65rem, 3.7vw, 3.55rem);
  --type-heading: clamp(1.85rem, 2.55vw, 2.55rem);
  --type-subheading: clamp(1.25rem, 1.5vw, 1.55rem);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.58; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-160%); background: var(--white); padding: 10px 15px; border: 2px solid var(--deep); }
.skip-link:focus { transform: none; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.narrow { width: min(calc(100% - 40px), 780px); margin-inline: auto; }
.eyebrow { margin: 0 0 10px; color: var(--teal); font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, h3 { margin: 0 0 .52em; font-family: var(--serif); font-weight: 500; line-height: 1.12; color: var(--deep); }
h1 { font-size: var(--type-display); letter-spacing: -.026em; line-height: 1.04; }
h2 { font-size: var(--type-heading); letter-spacing: -.018em; line-height: 1.1; }
h3 { font-size: var(--type-subheading); line-height: 1.15; }
p { margin: 0 0 1em; }
.lede { max-width: 700px; font-size: clamp(1.02rem, 1.25vw, 1.16rem); line-height: 1.55; }
.display-line { max-width: 720px; padding-left: 18px; border-left: 3px solid var(--mint); font-family: var(--serif); font-size: clamp(1.35rem, 1.8vw, 1.75rem); line-height: 1.25; color: var(--deep); }
.site-header { position: sticky; z-index: 100; top: 0; background: rgba(246,243,233,.94); border-bottom: 1px solid rgba(1,86,86,.13); backdrop-filter: blur(14px); }
.nav-shell { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand img { width: 142px; height: auto; }
.nav-toggle { display: none; padding: 11px 13px; border: 1px solid var(--deep); background: transparent; }
.primary-nav { display: flex; align-items: center; gap: 25px; font-size: .84rem; font-weight: 750; letter-spacing: .025em; }
.primary-nav a, .nav-drop > button { text-decoration: none; background: none; border: 0; padding: 12px 0; }
.primary-nav a[aria-current="page"] { box-shadow: inset 0 -3px var(--teal); }
.nav-drop { position: relative; }
.nav-drop > button::after { content: " ▾"; }
.nav-menu { display: none; position: absolute; top: 100%; left: -24px; min-width: 250px; padding: 14px; background: var(--white); box-shadow: var(--shadow); border: 1px solid var(--line); }
.nav-menu a { display: block; padding: 9px 12px; }
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu, .nav-drop[data-open="true"] .nav-menu { display: block; }
.nav-cta { padding: 9px 14px !important; background: var(--deep) !important; color: var(--white); }
.hero { display: grid; align-items: center; padding: var(--space-section) 0; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr); gap: clamp(38px, 4.5vw, 62px); align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { max-width: 650px; }
.hero-copy .lede { max-width: 610px; }
.hero-copy h1 em { color: var(--teal); font-weight: inherit; }
.hero-art { position: relative; min-height: 500px; }
.photo-placeholder { container-type: inline-size; aspect-ratio: var(--image-ratio, 4 / 3); min-height: 0; display: grid; place-content: center; gap: 8px; padding: clamp(14px, 2.5vw, 28px); border: 1px dashed rgba(1,86,86,.55); background: repeating-linear-gradient(135deg, rgba(193,223,206,.82) 0, rgba(193,223,206,.82) 18px, rgba(255,255,255,.78) 18px, rgba(255,255,255,.78) 36px); color: var(--deep); text-align: center; overflow: hidden; }
.photo-placeholder .placeholder-key { overflow-wrap: anywhere; font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.photo-placeholder strong { font-family: var(--serif); font-size: clamp(1rem, 1.8vw, 1.45rem); line-height: 1.12; }
.photo-placeholder > span:not(.placeholder-key) { font-size: .82rem; font-weight: 750; line-height: 1.28; }
.photo-placeholder small { display: grid; gap: 4px; font-size: .68rem; line-height: 1.3; color: var(--muted); }
.photo-placeholder .placeholder-orientation { font-weight: 900; text-transform: uppercase; }
.hero-art .photo-placeholder:nth-child(1) { position: absolute; inset: 0 15% 18% 0; padding-right: 32%; }
.hero-art .photo-placeholder:nth-child(2) { position: absolute; width: 45%; min-height: 230px; right: 0; bottom: 0; background: var(--white); box-shadow: var(--shadow); }
.hero-art::before { content: ""; position: absolute; width: 65%; height: 68%; right: -8%; top: -8%; border: 2px solid var(--teal); }

/* Homepage calibration: keep this isolated until the visual system is approved. */
.home-page {
  --home-serif: "Sitka Display", Sitka, Rockwell, "Book Antiqua", Georgia, serif;
  --home-sans: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --space-section: clamp(56px, 5.5vw, 80px);
  font-family: var(--home-sans);
}
.home-page h1,
.home-page h2,
.home-page h3,
.home-page .display-line,
.home-page .process-button strong,
.home-page .situation-grid a,
.home-page .service-panel h3,
.home-page .quote blockquote,
.home-page .full-bleed blockquote { font-family: var(--home-serif); }
.home-page .nav-shell { min-height: 90px; }
.home-page .hero { padding: 26px 0 32px; }
.home-page .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr); gap: clamp(34px, 3.7vw, 52px); }
.home-page .hero-copy h1 { max-width: 680px; font-size: clamp(2.15rem, 2.5vw, 2.7rem); font-weight: 560; line-height: 1.1; letter-spacing: -.015em; }
.home-page .hero-copy h1 em { font-style: normal; font-weight: 560; background: linear-gradient(transparent 78%, rgba(193,223,206,.95) 78%); }
.home-page .hero-copy .eyebrow { margin-bottom: 10px; letter-spacing: .075em; }
.home-page .hero-copy .lede { max-width: 620px; margin-top: 16px; font-size: clamp(1.0625rem, 1.18vw, 1.16rem); line-height: 1.5; }
.home-page .hero-copy .button-row { margin-top: 16px; }
.home-page .hero-copy .button { min-height: 42px; padding: 8px 15px; }
.home-page .hero-art { min-height: 340px; }
.home-page .hero-art .photo-placeholder:nth-child(1) { inset: 0 9% 8% 0; padding-right: 24%; }
.home-page .hero-art .photo-placeholder:nth-child(2) { width: 39%; min-height: 168px; border: 8px solid var(--white); border-radius: 10px; box-shadow: var(--shadow); transform: rotate(3deg); }
.home-page .hero-art::before { width: 61%; height: 64%; right: -4%; top: -5%; }
.home-page main h2 { font-size: clamp(1.8rem, 2.25vw, 2.3rem); line-height: 1.1; letter-spacing: -.012em; }
.home-page .full-bleed { min-height: 390px; }
.home-page .full-bleed blockquote { max-width: 820px; font-size: clamp(1.9rem, 2.8vw, 2.85rem); }

/* Homepage visual system: mint badge, photo-frame treatment, service thumbnails, testimonial chrome, button shape */
.home-page .badge-pill { display: inline-flex; align-items: center; background: var(--mint); color: var(--deep); padding: 7px 16px; border-radius: 999px; margin-bottom: 12px; }
.home-page .photo-placeholder { border-radius: 16px; box-shadow: 0 18px 44px rgba(1,86,86,.16); }
.home-page .full-bleed .photo-placeholder { border-radius: 0; box-shadow: none; }
.home-page .proof-grid .photo-placeholder:nth-child(2) { border: 8px solid var(--white); border-radius: 10px; box-shadow: var(--shadow); transform: rotate(-2deg); }
.home-page .button { border-radius: var(--r-btn, 10px); }
.home-page .service-thumb { margin-bottom: 16px; }
.home-page .service-panel--wide .service-thumb .photo-placeholder { width: 100%; }
.home-page .service-panel--narrow .service-thumb .photo-placeholder { width: 82%; }
.home-page .service-panel--narrow:nth-child(2) .service-thumb .photo-placeholder { margin-left: auto; }
.home-page .service-panel--narrow:nth-child(3) .service-thumb .photo-placeholder { margin-right: auto; }
@media (min-width: 901px) {
  .home-page .editorial-services .service-panel:nth-child(2),
  .home-page .editorial-services .service-panel:nth-child(3) { transform: translateY(38px); }
}
.home-page .usage-strip { margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line); }
.home-page .usage-strip-label { margin: 0 0 12px; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.home-page .usage-strip .usage-list li { padding: 7px 13px; border: 0; background: var(--cream); border-radius: 999px; font-size: .78rem; }
.home-page .testimonial-visual { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 320px; justify-self: center; margin-inline: auto; }
.home-page .testimonial-visual .photo-placeholder { width: 100%; border: 6px solid var(--mint); }
.home-page .testimonial-controls { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.home-page .testimonial-arrow { width: 32px; height: 32px; border-radius: 999px; background: var(--white); border: 2px solid var(--deep); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; color: var(--deep); cursor: not-allowed; opacity: .5; }
.home-page .testimonial-dots { display: flex; gap: 6px; align-items: center; }
.home-page .testimonial-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--teal); display: inline-block; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: 9px 16px; border: 2px solid var(--deep); background: var(--deep); color: var(--white); text-decoration: none; font-size: .82rem; font-weight: 800; letter-spacing: .025em; cursor: pointer; }
.button:hover { background: var(--teal); border-color: var(--teal); }
.button.secondary { background: transparent; color: var(--deep); }
.button.secondary:hover { background: var(--mint); }
.button:disabled { opacity: .55; cursor: wait; }
section { padding: var(--space-section) 0; }
.white { background: var(--white); }
.deep { background: var(--deep); color: var(--white); }
.deep h2, .deep h3, .deep .display-line, .deep .eyebrow { color: var(--white); }
.mint { background: var(--mint); }
/* Section intro: eyebrow, headline and supporting paragraph stack on the left, paragraph directly under the headline. */
.section-head { display: block; margin-bottom: var(--space-lg); }
.section-head > p { max-width: 42rem; margin: 0; }
.section-head > p + p { margin-top: 1em; }
.mint-mark { display: inline; background: linear-gradient(transparent 56%, var(--mint) 56%); }
.proof-grid { display: grid; grid-template-columns: 1.25fr .72fr .88fr; grid-template-rows: auto auto; gap: 16px; }
.proof-grid .photo-placeholder { min-height: 0; }
.proof-grid .photo-placeholder:first-child { grid-row: 1 / 3; }
.proof-grid .photo-placeholder:last-child { grid-column: 2 / 4; }
.mini-mosaic { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: 1fr 1fr; gap: 13px; }
.mini-mosaic .photo-placeholder:first-child { grid-row: 1 / 3; }
.mosaic-five { display: grid; grid-template-columns: 1.15fr .8fr 1fr; grid-template-rows: 230px 210px; gap: 14px; }
.mosaic-five .photo-placeholder { aspect-ratio: auto; min-height: 0; }
.mosaic-five .photo-placeholder:first-child { grid-row: 1 / 3; }
.mosaic-five .photo-placeholder:nth-child(4) { grid-column: 2 / 4; }
.mosaic-dominant { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 175px 175px; gap: 14px; }
.mosaic-dominant .photo-placeholder { aspect-ratio: auto; min-height: 0; }
.mosaic-dominant .photo-placeholder:first-child { grid-column: 1; grid-row: 1 / 3; }
.comparison-pair { display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px; align-items: end; }
.frame-sequence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.frame-sequence .photo-placeholder { padding: 12px; }
.service-image-cards .photo-placeholder { margin: -24px -24px 22px; width: calc(100% + 48px); }
@media (min-width: 901px) {
  .cards.service-image-cards { grid-template-columns: repeat(12, 1fr); gap: 22px; }
  .service-image-cards .card:nth-child(1) { grid-column: span 7; }
  .service-image-cards .card:nth-child(2) { grid-column: span 5; }
  .service-image-cards .card:nth-child(3) { grid-column: span 5; }
  .service-image-cards .card:nth-child(4) { grid-column: span 7; }
}
.testimonial-layout > .photo-placeholder { width: 100%; max-width: 380px; justify-self: center; }

@container (max-width: 250px) {
  .photo-placeholder { gap: 5px; padding: 10px; }
  .photo-placeholder .placeholder-key { font-size: .58rem; letter-spacing: .08em; }
  .photo-placeholder strong { font-size: .9rem; }
  .photo-placeholder .placeholder-subject { font-size: .67rem; }
  .photo-placeholder small { font-size: .57rem; }
  .photo-placeholder .placeholder-composition { display: none; }
}
.situation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.situation-grid a, .situation-grid div { min-height: 122px; padding: 22px; background: var(--white); text-decoration: none; font-family: var(--serif); font-size: 1.16rem; line-height: 1.3; }
.situation-grid a:hover { background: var(--mint); }
.editorial-services { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.service-panel { padding: clamp(24px, 3vw, 36px); background: var(--white); box-shadow: 0 14px 38px rgba(1,86,86,.09); }
.service-panel:nth-child(1), .service-panel:nth-child(4) { grid-column: span 7; }
.service-panel:nth-child(2), .service-panel:nth-child(3) { grid-column: span 5; transform: translateY(28px); }
.service-panel a { color: var(--teal); font-weight: 800; }
.process { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-xl); align-items: start; }
.process-tabs { border-top: 1px solid var(--line); }
.process-button { width: 100%; padding: 18px 4px; display: grid; grid-template-columns: 38px 1fr; gap: 14px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; }
.process-button strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; }
.process-button[aria-selected="true"] { color: var(--teal); background: linear-gradient(90deg, rgba(193,223,206,.6), transparent); }
.process-visual { position: sticky; top: 120px; }
.full-bleed { position: relative; min-height: 430px; display: grid; align-items: end; background: var(--deep); overflow: hidden; }
.full-bleed .photo-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; opacity: .34; border: 0; }
.full-bleed blockquote { position: relative; z-index: 1; width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0; color: var(--white); font-family: var(--serif); font-size: clamp(2rem, 3.2vw, 3.25rem); line-height: 1.12; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.sticky-label { writing-mode: vertical-rl; position: absolute; right: 18px; top: 40px; color: var(--teal); font-size: .72rem; font-weight: 800; letter-spacing: .15em; }
.usage-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; }
.usage-list li { padding: 11px 15px; border: 1px solid var(--line); background: var(--white); }
.page-hero { padding: var(--space-section) 0 var(--space-xl); }
.page-hero .container { display: grid; grid-template-columns: 1.08fr .92fr; gap: var(--space-xl); align-items: center; }
.page-hero h1 { max-width: 900px; }
.page-hero .photo-placeholder { min-height: 0; width: 72%; margin-left: auto; transform: translateY(12px); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { padding: 24px; background: var(--white); border: 1px solid var(--line); }
.card .number { display: block; margin-bottom: 24px; color: var(--teal); font-weight: 900; }
.quote { padding: clamp(26px, 4vw, 46px); background: var(--white); box-shadow: 0 14px 38px rgba(1,86,86,.09); }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.3; }
.quote cite { display: block; margin-top: 25px; font-style: normal; font-size: .85rem; font-weight: 800; }
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-button { width: 100%; padding: 22px 2px; display: flex; justify-content: space-between; gap: 20px; text-align: left; border: 0; background: transparent; color: var(--deep); font-weight: 800; cursor: pointer; }
.faq-button::after { content: "+"; flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--white); }
.faq-button[aria-expanded="true"]::after { content: "−"; }
.faq-panel { padding: 0 50px 22px 0; }
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.price { padding: 28px; background: var(--white); border-top: 6px solid var(--teal); }
.price strong { display: block; margin: 14px 0; font-family: var(--serif); font-size: 2rem; color: var(--deep); }
.form-shell { padding: clamp(24px, 4vw, 46px); background: var(--white); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label, fieldset legend { font-weight: 800; color: var(--deep); }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #78948f; border-radius: 0; padding: 13px 14px; background: var(--white); color: var(--ink); }
.field textarea { min-height: 140px; resize: vertical; }
.field [aria-invalid="true"] { border: 3px solid #a32626; }
.error { margin: 0; color: #8d1c1c; font-size: .88rem; font-weight: 750; }
.form-status { min-height: 28px; margin: 18px 0 0; font-weight: 750; }
.form-status[data-state="error"] { color: #8d1c1c; }
.form-status[data-state="success"] { color: var(--deep); }
.h-captcha { margin: 24px 0; min-height: 78px; }
.hidden-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 15px; border: 1px solid var(--line); background: var(--cream); cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--teal); }
.branch { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.branch[hidden] { display: none; }
.page-hero h1 .hero-line { display: block; text-wrap: balance; }
@media (min-width: 901px) { .page-hero h1 .hero-headline { font-size: .92em; } }
.page-hero h1 .hero-subline { display: block; margin-top: 16px; margin-bottom: 26px; font-size: clamp(1.2rem, 2vw, 1.5rem); font-style: normal; }
.wizard-progress { margin-bottom: 22px; }
.wizard-progress-text { margin: 0 0 8px; color: var(--muted); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.wizard-progress-track { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.wizard-progress-fill { height: 100%; width: 0; background: var(--teal); border-radius: 2px; transition: width .25s ease; }
.success-panel { padding: 45px; background: var(--mint); }
.success-panel[hidden] { display: none; }
.placeholder-note { padding: 18px 22px; border-left: 5px solid var(--teal); background: rgba(193,223,206,.45); font-size: .95rem; }
.final-cta { text-align: center; }
.final-cta .button-row { justify-content: center; }
.site-footer { padding: 52px 0 26px; background: var(--deep); color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 50px; }
.site-footer h2, .site-footer h3 { color: var(--white); }
.footer-links { display: grid; gap: 8px; }
.footer-links a { text-decoration: none; }
.footer-bottom { margin-top: 50px; padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.28); font-size: .82rem; }

@media (min-width: 901px) {
  .nav-shell, .home-page .nav-shell { min-height: 60px; }
  .brand img { width: 104px; height: auto; }
  .primary-nav .nav-cta { padding: 6px 13px !important; }
}

@media (max-width: 900px) {
  :root { --type-display: clamp(2.5rem, 5.6vw, 3.15rem); --type-heading: clamp(1.8rem, 4vw, 2.35rem); --space-section: clamp(50px, 7vw, 66px); }
  .nav-toggle { display: block; }
  .primary-nav { display: none; position: fixed; top: 86px; left: 0; right: 0; z-index: 100; height: calc(100vh - 86px); height: calc(100dvh - 86px); overflow: auto; padding: 35px 28px 60px; background: var(--cream); align-items: stretch; flex-direction: column; font-family: var(--serif); font-size: 1.55rem; }
  .primary-nav[data-open="true"] { display: flex; }
  .nav-drop > button { font-family: inherit; font-size: inherit; }
  .nav-menu { position: static; margin: 0; box-shadow: none; border: 0; background: transparent; font-family: var(--sans); font-size: 1rem; }
  .hero-grid, .page-hero .container, .section-head, .process, .split { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-block: var(--space-section); }
  .hero-copy h1 { max-width: 780px; }
  .hero-art { min-height: 500px; }
  .page-hero .photo-placeholder { transform: none; width: 100%; margin-left: 0; }
  .process-visual { position: static; }
  .situation-grid, .cards { grid-template-columns: 1fr 1fr; }
  .editorial-services .service-panel { grid-column: span 6; transform: none; }
  .proof-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .proof-grid .photo-placeholder:first-child { grid-column: auto; grid-row: auto; }
  .proof-grid .photo-placeholder:last-child { grid-column: auto; }
  .mosaic-five { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 210px 220px; }
  .mosaic-five .photo-placeholder:first-child { grid-column: 1 / 3; grid-row: auto; }
  .mosaic-five .photo-placeholder:nth-child(4) { grid-column: auto; }
  .mosaic-dominant { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 170px 170px; }
  .mosaic-dominant .photo-placeholder:first-child { grid-column: 1 / 3; grid-row: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .home-page .hero-grid { grid-template-columns: 1fr; }
  .home-page .hero { padding-block: 48px; }
  .home-page .hero-copy h1 { max-width: 720px; font-size: clamp(2.65rem, 6.2vw, 3.2rem); }
  .home-page .hero-art { min-height: 430px; }
}

@media (max-width: 620px) {
  :root { --type-display: clamp(2.25rem, 9.5vw, 2.55rem); --type-heading: clamp(1.7rem, 7vw, 2rem); --type-subheading: clamp(1.22rem, 5.4vw, 1.5rem); --space-section: 48px; }
  body { font-size: 16px; }
  .container, .narrow { width: min(calc(100% - 28px), var(--max)); }
  .nav-shell { min-height: 78px; }
  .brand img { width: 122px; }
  .primary-nav { top: 74px; height: calc(100vh - 74px); height: calc(100dvh - 74px); }
  .hero, section { padding-block: var(--space-section); }
  .hero h1 { line-height: 1.04; letter-spacing: -.032em; }
  .hero-art { min-height: 390px; }
  .hero-art .photo-placeholder:nth-child(1) { inset: 0 7% 20% 0; padding-right: 28%; }
  .hero-art .photo-placeholder:nth-child(2) { width: 50%; min-height: 170px; }
  .button-row, .button { width: 100%; }
  .situation-grid, .cards, .price-grid, .form-grid, .choice-grid, .footer-grid { grid-template-columns: 1fr; }
  .editorial-services { display: block; }
  .service-panel + .service-panel { margin-top: 18px; }
  .proof-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); }
  .proof-grid .photo-placeholder:first-child, .proof-grid .photo-placeholder:last-child { grid-column: auto; }
  .mini-mosaic, .mosaic-five, .mosaic-dominant, .comparison-pair { grid-template-columns: 1fr; grid-template-rows: auto; }
  .mini-mosaic .photo-placeholder:first-child, .mosaic-five .photo-placeholder:first-child, .mosaic-five .photo-placeholder:last-child, .mosaic-dominant .photo-placeholder:first-child { grid-column: auto; grid-row: auto; }
  .frame-sequence { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .full-bleed { min-height: 480px; }
  .sticky-label { display: none; }
  .footer-bottom { flex-direction: column; }
  .home-page .nav-shell { min-height: 76px; }
  .home-page .hero { padding-block: 42px 46px; }
  .home-page .hero-copy h1 { font-size: clamp(2.25rem, 10vw, 2.5rem); line-height: 1.02; }
  .home-page .hero-copy .lede { margin-top: 22px; font-size: 1.02rem; }
  .home-page .hero-art { min-height: 350px; }
  .home-page .hero-art .photo-placeholder:nth-child(1) { inset: 0 7% 15% 0; padding-right: 26%; }
  .home-page .hero-art .photo-placeholder:nth-child(2) { width: 46%; min-height: 150px; }
}

/* ===== Real photography =====
   Geometry and focal point are set per photograph (data-image-key) so each crop
   respects its subject. Placeholders elsewhere on the site are unaffected. */
.photo-real { position: relative; margin: 0; overflow: hidden; background: var(--cream); aspect-ratio: var(--ratio, 4 / 3); }
.photo-real picture { display: block; width: 100%; height: 100%; }
.photo-real img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.home-page .photo-real { border-radius: 16px; box-shadow: 0 18px 44px rgba(1,86,86,.16); }

/* Hero: tall portrait with an overlapping detail frame */
.home-page .hero-art { min-height: 0; aspect-ratio: 1 / 1.03; }
.home-page .hero-art .photo-real { position: absolute; }
.home-page .hero-art .photo-real[data-image-key="HOME_HERO_01"] { --ratio: 4 / 5; --pos: 50% 55%; left: 0; top: 0; width: 78%; }
.home-page .hero-art .photo-real[data-image-key="HOME_HERO_02"] { --ratio: 4 / 5; --pos: 50% 55%; right: 0; bottom: 0; width: 40%; border: 8px solid var(--white); border-radius: 10px; box-shadow: var(--shadow); transform: rotate(3deg); }

.home-page .hero-art::before { top: 4%; right: -3%; width: 64%; height: 62%; }

/* Visual proof: two portraits flank a stack of two landscapes */
.home-page .proof-grid { grid-template-columns: 1.18fr 1.12fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.home-page .proof-grid .photo-real { min-height: 0; }
.home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_01"] { --ratio: auto; --pos: 50% 35%; grid-column: 1; grid-row: 1 / 3; }
.home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_02"] { --ratio: 3 / 2; --pos: 50% 50%; grid-column: 2; grid-row: 1; border: 8px solid var(--white); border-radius: 10px; box-shadow: var(--shadow); transform: rotate(-1.5deg); }
.home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_03"] { --ratio: auto; --pos: 50% 30%; grid-column: 3; grid-row: 1 / 3; transform: translateY(30px); }
.home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_04"] { --ratio: 3 / 2; --pos: 40% 50%; grid-column: 2; grid-row: 2; }
.home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_01"] picture,
.home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_03"] picture { position: absolute; inset: 0; }

/* Services: native landscape for the wide cards, upright for the narrow ones */
.home-page .service-thumb .photo-real { width: 100%; }
.home-page .service-panel--narrow .service-thumb .photo-real { width: 82%; }
.home-page .service-panel--narrow:nth-child(2) .service-thumb .photo-real { margin-left: auto; }
.home-page .service-panel--narrow:nth-child(3) .service-thumb .photo-real { margin-right: auto; }
.photo-real[data-image-key="HOME_SERVICE_HEADSHOTS_01"] { --ratio: 3 / 2; --pos: 40% 40%; }
.photo-real[data-image-key="HOME_SERVICE_PRODUCT_01"] { --ratio: 3 / 2; --pos: 50% 55%; }
.photo-real[data-image-key="HOME_SERVICE_BRANDING_01"] { --ratio: 3 / 4; --pos: 50% 15%; }
.photo-real[data-image-key="HOME_SERVICE_TEAM_01"] { --ratio: 4 / 5; --pos: 50% 50%; }

/* Process, About preview, Testimonial */
.photo-real[data-image-key="HOME_ABOUT_01"] { --ratio: 4 / 3; --pos: 42% 35%; }
.home-page .testimonial-visual { max-width: 380px; }
.home-page .testimonial-visual .photo-real { width: 100%; border: 6px solid var(--mint); }
.photo-real[data-image-key="HOME_TESTIMONIAL_01"] { --ratio: 4 / 5; --pos: 50% 50%; }

/* Large visual break: photograph at full brightness, quote on a deep-teal card */
.home-page .full-bleed { display: block; min-height: 0; background: var(--deep); }
.home-page .full-bleed .photo-real { width: 100%; border-radius: 0; box-shadow: none; --ratio: 12 / 5; --pos: 50% 58%; }
.home-page .full-bleed blockquote { position: absolute; z-index: 1; right: max(20px, calc((100% - 1180px) / 2)); bottom: 36px; width: min(520px, calc(100% - 40px)); margin: 0; padding: 34px 38px; background: var(--deep); border-radius: 12px; box-shadow: 0 18px 44px rgba(1,86,86,.28); font-size: clamp(1.45rem, 2vw, 1.95rem); line-height: 1.18; }

@media (max-width: 1000px) {
  .home-page .full-bleed .photo-real { --ratio: 4 / 3; --pos: 18% 50%; }
  .home-page .full-bleed blockquote { position: relative; right: auto; bottom: auto; width: 100%; max-width: none; padding: 34px max(20px, calc((100% - 820px) / 2)); border-radius: 0; box-shadow: none; font-size: clamp(1.55rem, 4.6vw, 2.1rem); }
}

@media (max-width: 900px) {
  .home-page .hero-art { width: 100%; max-width: 540px; margin-inline: auto; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .home-page .proof-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 18px; align-items: start; }
  .home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_01"] { --ratio: 4 / 5; --pos: 50% 35%; grid-column: 1; grid-row: 1; }
  .home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_03"] { --ratio: 4 / 5; --pos: 50% 25%; grid-column: 2; grid-row: 1; margin-top: 28px; transform: none; }
  .home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_02"] { grid-column: 1; grid-row: 2; }
  .home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_04"] { grid-column: 2; grid-row: 2; margin-top: 28px; }
  .home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_01"] picture,
  .home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_03"] picture { position: static; }
}

@media (max-width: 760px) {
  .home-page .proof-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 18px; }
  .home-page .proof-grid .photo-real[data-image-key] { grid-column: 1; grid-row: auto; transform: none; }
  .home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_01"] { --ratio: 5 / 6; --pos: 50% 30%; width: 100%; }
  .home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_02"] { width: 92%; transform: rotate(-1deg); }
  .home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_03"] { --ratio: 4 / 5; --pos: 50% 25%; width: 86%; margin-left: auto; }
  .home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_04"] { width: 100%; }
  .home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_01"] picture,
  .home-page .proof-grid .photo-real[data-image-key="HOME_PROOF_03"] picture { position: static; }
}

@media (max-width: 620px) {
  .home-page .hero-art .photo-real[data-image-key="HOME_HERO_01"] { width: 76%; }
  .home-page .hero-art .photo-real[data-image-key="HOME_HERO_02"] { width: 47%; }
  .home-page .editorial-services .service-panel--narrow .service-thumb .photo-real { width: 100%; margin-left: 0; margin-right: 0; }
  .home-page .testimonial-visual { max-width: 320px; }
}

/* ===== Real photography: shared page-hero treatment + About page ===== */
.photo-real { border-radius: 16px; box-shadow: 0 18px 44px rgba(1,86,86,.16); }
.page-hero .photo-real { width: 72%; margin-left: auto; transform: translateY(12px); }
.photo-real[data-image-key="ABOUT_HERO_01"] { --ratio: 4 / 5; }
.photo-real[data-image-key="ABOUT_HERO_01"] img { transform: scale(1.22); transform-origin: 50% 56%; }

/* Planning / thinking portrait beside "Knowing what we need is only half of it" */
.split > .photo-real[data-image-key="ABOUT_EXPERTISE_01"] { --ratio: 4 / 5; --pos: 50% 65%; width: 82%; margin-left: auto; }

/* Personality collage: one dominant portrait, four supporting pieces of life */
.about-collage { display: flex; gap: 14px; align-items: flex-start; }
.about-collage__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.about-collage__col--lead { flex: 0 0 59%; margin-top: 56px; }
.about-collage__col--side { flex: 1 1 0; }
.about-collage .photo-real { width: 100%; }
.about-collage .photo-real[data-image-key="ABOUT_PERSONAL_01"] { --ratio: 4 / 5; --pos: 50% 40%; }
.about-collage .photo-real[data-image-key="ABOUT_PERSONAL_03"] { --ratio: 3 / 2; --pos: 50% 40%; }
.about-collage .photo-real[data-image-key="ABOUT_PERSONAL_05"] { --ratio: 2 / 3; --pos: 50% 50%; }
.about-collage .photo-real[data-image-key="ABOUT_PERSONAL_02"] { --ratio: 1 / 1; --pos: 40% 30%; border: 6px solid var(--white); border-radius: 10px; box-shadow: var(--shadow); transform: rotate(-1.5deg); }
.about-collage .photo-real[data-image-key="ABOUT_PERSONAL_04"] { --ratio: 4 / 3; --pos: 50% 85%; }

/* Testimonial portrait (square source) */
.testimonial-layout > .photo-real { width: 100%; max-width: 380px; justify-self: center; --ratio: 1 / 1; --pos: 50% 40%; }

@media (max-width: 1100px) {
  .split:has(> .about-collage) { grid-template-columns: 1fr; }
  .about-collage { max-width: 640px; margin-inline: auto; width: 100%; }
}

@media (max-width: 900px) {
  .page-hero .photo-real { width: min(100%, 460px); margin-inline: auto; transform: none; }
  .split > .photo-real[data-image-key="ABOUT_EXPERTISE_01"] { width: min(100%, 460px); margin-inline: auto; }
}

@media (max-width: 620px) {
  .about-collage { flex-direction: column; align-items: stretch; gap: 16px; }
  .about-collage__col { display: contents; }
  .about-collage .photo-real[data-image-key="ABOUT_PERSONAL_01"] { order: 1; width: 100%; }
  .about-collage .photo-real[data-image-key="ABOUT_PERSONAL_02"] { order: 2; width: 80%; margin-right: auto; }
  .about-collage .photo-real[data-image-key="ABOUT_PERSONAL_05"] { order: 3; width: 68%; margin-left: auto; }
  .about-collage .photo-real[data-image-key="ABOUT_PERSONAL_03"] { order: 4; width: 100%; }
  .about-collage .photo-real[data-image-key="ABOUT_PERSONAL_04"] { order: 5; width: 86%; margin-right: auto; }
}

/* ===== Real photography: Services Overview ===== */
/* Landscape hero: use the full column and a landscape frame instead of the 72% portrait treatment */
.page-hero .photo-real[data-image-key="SERVICES_HERO_01"] { --ratio: 4 / 3; --pos: 50% 40%; width: 100%; }

/* Service cards: image fills the top of the card edge to edge */
.service-image-cards .photo-real { margin: -24px -24px 22px; width: calc(100% + 48px); border-radius: 0; box-shadow: none; --ratio: 4 / 3; }
.service-image-cards .photo-real[data-image-key="SERVICES_HEADSHOTS_01"] { --pos: 50% 22%; }
.service-image-cards .photo-real[data-image-key="SERVICES_BRANDING_01"] { --pos: 78% 50%; }
.service-image-cards .photo-real[data-image-key="SERVICES_TEAM_01"] { --pos: 42% 50%; }
.service-image-cards .photo-real[data-image-key="SERVICES_PRODUCT_01"] { --pos: 50% 50%; }
@media (min-width: 901px) {
  /* Each row pairs a wide and a narrow card, so ratios are chosen to keep both images about the same height */
  .service-image-cards .photo-real[data-image-key="SERVICES_HEADSHOTS_01"],
  .service-image-cards .photo-real[data-image-key="SERVICES_PRODUCT_01"] { --ratio: 13 / 9; }
  .service-image-cards .photo-real[data-image-key="SERVICES_BRANDING_01"],
  .service-image-cards .photo-real[data-image-key="SERVICES_TEAM_01"] { --ratio: 1 / 1; }
}

/* Process: portrait source shown as a square so the camera, plate and spice jar all stay in frame */
.split > .photo-real[data-image-key="SERVICES_PROCESS_01"] { --ratio: 1 / 1; --pos: 50% 60%; width: 86%; margin-left: auto; }
@media (max-width: 900px) {
  .page-hero .photo-real[data-image-key="SERVICES_HERO_01"] { width: min(100%, 560px); }
  .split > .photo-real[data-image-key="SERVICES_PROCESS_01"] { width: min(100%, 460px); margin-inline: auto; }
}

/* ===== Real photography: Product Photography ===== */
.page-hero .photo-real[data-image-key="PRODUCT_HERO_01"] { --ratio: 4 / 3; --pos: 45% 55%; width: 100%; }

/* Visual break: wide crop, necklace ring kept clear of the quote panel (same panel treatment as the Home break) */
.full-bleed:has(> .photo-real[data-image-key="PRODUCT_BREAK_01"]) { display: block; min-height: 0; background: var(--deep); }
.full-bleed > .photo-real[data-image-key="PRODUCT_BREAK_01"] { width: 100%; border-radius: 0; box-shadow: none; --ratio: 12 / 5; --pos: 36% 62%; }
.full-bleed:has(> .photo-real[data-image-key="PRODUCT_BREAK_01"]) blockquote { position: absolute; z-index: 1; right: max(20px, calc((100% - 1180px) / 2)); bottom: 36px; width: min(520px, calc(100% - 40px)); margin: 0; padding: 34px 38px; background: var(--deep); border-radius: 12px; box-shadow: 0 18px 44px rgba(1,86,86,.28); font-size: clamp(1.45rem, 2vw, 1.95rem); line-height: 1.18; }

/* Buying-question mosaic: tall palm beside packaging and a second detail */
.mini-mosaic .photo-real { min-height: 0; }
.mini-mosaic:has(> .photo-real[data-image-key="PRODUCT_DETAIL_01"]) { grid-template-columns: .92fr 1.08fr; grid-template-rows: auto auto; }
.mini-mosaic .photo-real[data-image-key="PRODUCT_DETAIL_01"] { --ratio: auto; --pos: 50% 38%; grid-row: 1 / 3; }
.mini-mosaic .photo-real[data-image-key="PRODUCT_DETAIL_01"] picture { position: absolute; inset: 0; }
.mini-mosaic .photo-real[data-image-key="PRODUCT_DETAIL_02"] { --ratio: 3 / 2; --pos: 50% 50%; }
.mini-mosaic .photo-real[data-image-key="PRODUCT_DETAIL_03"] { --ratio: 3 / 2; --pos: 30% 50%; }

/* Motion preview + testimonial */
.split > .photo-real[data-image-key="PRODUCT_MOTION_01"] { --ratio: 3 / 2; --pos: 55% 50%; }
.testimonial-layout > .photo-real[data-image-key="PRODUCT_TESTIMONIAL_01"] { --ratio: 4 / 5; --pos: 50% 50%; }

@media (max-width: 1000px) {
  .full-bleed > .photo-real[data-image-key="PRODUCT_BREAK_01"] { --ratio: 4 / 3; --pos: 50% 50%; }
  .full-bleed:has(> .photo-real[data-image-key="PRODUCT_BREAK_01"]) blockquote { position: relative; right: auto; bottom: auto; width: 100%; max-width: none; padding: 34px max(20px, calc((100% - 820px) / 2)); border-radius: 0; box-shadow: none; font-size: clamp(1.55rem, 4.6vw, 2.1rem); }
}
@media (max-width: 900px) {
  .page-hero .photo-real[data-image-key="PRODUCT_HERO_01"] { width: min(100%, 560px); }
  /* keep the tall-left composition on tablet and phone instead of stacking */
  .mini-mosaic:has(> .photo-real[data-image-key="PRODUCT_DETAIL_01"]) { grid-template-columns: .92fr 1.08fr; grid-template-rows: auto auto; }
}

/* ===== Product Photography: "How it can look" ===== */
/* Intro above, then three rows of two types. Each type is an image beside its explanation; the relationship alternates
   (row 1: image|copy image|copy, row 2: copy|image image|copy, row 3: image|copy image|copy). No overlap, no stagger. */
.how { display: grid; row-gap: 0; }
.how-intro { max-width: 620px; margin-bottom: 52px; }
.how-intro h2 { font-size: clamp(1.6rem, 2.1vw, 2.1rem); margin-bottom: .45em; }
.how-intro p:last-child { margin-bottom: 0; }
.how-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; align-items: center; padding-block: 40px; border-top: 1px solid var(--line); }
.how-row:last-child { padding-bottom: 0; }
.how-item { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 26px; align-items: center; min-width: 0; }
.how-row:nth-child(3) > .how-item:first-child { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.how-row:nth-child(3) > .how-item:first-child .how-copy { order: -1; }
.how-item .photo-real { width: 100%; }
.how-copy { max-width: 36ch; }
.how-copy h3 { margin: 0 0 8px; font-family: var(--sans); font-size: .78rem; font-weight: 800; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; color: var(--teal); }
.how-copy p { margin: 0; font-size: .96rem; line-height: 1.58; color: var(--ink); }
.how-item .photo-real { --ratio: 4 / 3; --pos: 50% 50%; }
.how-item[data-range="styled"] .photo-real, .how-item[data-range="lifestyle"] .photo-real { --ratio: 3 / 2; }
/* In Use: the bottle and hand sit at the right edge, so the crop is anchored right. Worn: ear + whole earring chain stay primary, the profile is context. */
.how-item[data-range="use"] .photo-real { --pos: 88% 50%; }
.how-item[data-range="worn"] .photo-real { --pos: 34% 50%; }
.how-item[data-range="white"] .photo-real { --pos: 50% 50%; }

@media (max-width: 900px) {
  .how-intro { margin-bottom: 36px; }
  .how-row, .how-row:last-child { grid-template-columns: 1fr; row-gap: 40px; padding-block: 0; border-top: 0; }
  .how-row + .how-row { margin-top: 40px; }
  .how-item, .how-row:nth-child(3) > .how-item:first-child { display: block; }
  .how-row:nth-child(3) > .how-item:first-child .how-copy { order: 0; }
  .how-copy { margin-top: 18px; max-width: none; }
  .how-item[data-range="clean"] .photo-real, .how-item[data-range="white"] .photo-real { --ratio: 4 / 3; }
  .how-item[data-range="worn"] .photo-real { --ratio: 5 / 4; --pos: 34% 50%; }
  .how-item[data-range="styled"] .photo-real, .how-item[data-range="lifestyle"] .photo-real, .how-item[data-range="use"] .photo-real { --ratio: 3 / 2; }
}

/* ===== Real photography: Visual Consulting ===== */
/* Both sources match their slot proportions (4:5 hero, 4:3 recap), so each is shown whole: both women, the laptop, notebook and camera stay in frame. */
.page-hero .photo-real[data-image-key="CONSULT_HERO_01"] { --ratio: 4 / 3; --pos: 50% 50%; width: 100%; }
@media (max-width: 900px) { .page-hero .photo-real[data-image-key="CONSULT_HERO_01"] { width: min(100%, 560px); } }
.split > .photo-real[data-image-key="CONSULT_RECAP_01"] { --ratio: 4 / 3; --pos: 50% 50%; }

/* ===== Product Photography: Products + Place ===== */
/* Layered collage: the shop interior is the anchor (upper right); the bracelet detail overlaps its lower-left and hangs
   below it; the storefront overlaps its lower-right, ending higher so the bottom edge is uneven. All geometry is a
   fraction of the collage width so the composition scales as one piece. */
.place { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.place-copy p:last-child { margin-bottom: 0; }
.place-visual { position: relative; aspect-ratio: 1 / .92; }
.place-visual > [data-image-key] { position: absolute; margin: 0; }
.place-visual > [data-image-key="PRODUCT_PLACE_SPACE_01"] { --ratio: 3 / 2; --pos: 50% 50%; left: 14%; top: 0; width: 86%; z-index: 0; }
.place-visual > [data-image-key="PRODUCT_PLACE_DETAIL_01"] { --ratio: 4 / 5; --pos: 50% 50%; left: 0; top: 40%; width: 42%; z-index: 2; border: 6px solid var(--white); border-radius: 10px; box-shadow: 0 18px 44px rgba(1,86,86,.22); }
.place-visual > [data-image-key="PRODUCT_PLACE_STOREFRONT_01"] { --ratio: 4 / 3; --pos: 50% 50%; right: 4%; top: 50%; width: 40%; z-index: 1; border: 5px solid var(--white); border-radius: 10px; box-shadow: 0 14px 36px rgba(1,86,86,.2); }

@media (max-width: 900px) {
  .place { grid-template-columns: 1fr; gap: 28px; }
  .place-visual { width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1 / .93; }
  .place-visual > [data-image-key="PRODUCT_PLACE_SPACE_01"] { left: 12%; width: 88%; }
  .place-visual > [data-image-key="PRODUCT_PLACE_DETAIL_01"] { left: 0; top: 35.5%; width: 46%; border-width: 5px; }
  .place-visual > [data-image-key="PRODUCT_PLACE_STOREFRONT_01"] { right: 0; top: 50.5%; width: 44%; border-width: 4px; }
}

/* ===== Real photography: Personal Branding + Headshots ===== */
/* Slots keep their approved proportions; every photo gets its own focus point so faces, hands, products and context stay in frame. */
.page-hero .photo-real[data-image-key="BRANDING_HERO_01"] { --ratio: 4 / 5; --pos: 52% 50%; }
.page-hero .photo-real[data-image-key="HEADSHOTS_HERO_01"] { --ratio: 4 / 5; --pos: 70% 50%; }

/* Branding library mosaic (fixed-height cells, as approved) */
.mosaic-dominant .photo-real { aspect-ratio: auto; min-height: 0; }
.mosaic-dominant .photo-real picture { position: absolute; inset: 0; }
.mosaic-dominant > .photo-real:first-child { grid-column: 1; grid-row: 1 / 3; }
.photo-real[data-image-key="BRANDING_MOSAIC_01"] { --pos: 55% 40%; }
.photo-real[data-image-key="BRANDING_MOSAIC_02"] { --pos: 50% 30%; }
.photo-real[data-image-key="BRANDING_MOSAIC_03"] { --pos: 50% 85%; }
.photo-real[data-image-key="BRANDING_MOSAIC_04"] { --pos: 50% 32%; }
.photo-real[data-image-key="BRANDING_MOSAIC_05"] { --pos: 50% 57%; }

/* Headshots comfort mosaic: tall portrait beside two smaller images (same construction as the Product detail mosaic) */
.mini-mosaic:has(> .photo-real[data-image-key="HEADSHOTS_COMFORT_01"]) { grid-template-rows: auto auto; }
.mini-mosaic .photo-real[data-image-key="HEADSHOTS_COMFORT_01"] { --ratio: auto; --pos: 30% 60%; grid-row: 1 / 3; }
.mini-mosaic .photo-real[data-image-key="HEADSHOTS_COMFORT_01"] picture { position: absolute; inset: 0; }
.mini-mosaic .photo-real[data-image-key="HEADSHOTS_COMFORT_03"] { --ratio: 4 / 3; --pos: 50% 40%; }

/* Headshots vs Branding comparison pair */
.comparison-pair .photo-real[data-image-key="HEADSHOTS_COMPARE_01"] { --ratio: 4 / 5; --pos: 50% 22%; }
.comparison-pair .photo-real[data-image-key="HEADSHOTS_COMPARE_02"] { --ratio: 4 / 3; --pos: 38% 50%; }
.testimonial-layout > .photo-real[data-image-key="HEADSHOTS_TESTIMONIAL_01"] { --ratio: 1 / 1; --pos: 50% 40%; }

@media (max-width: 900px) {
  .mosaic-dominant:has(> .photo-real) { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 12px; }
  .mosaic-dominant:has(> .photo-real) > .photo-real { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; }
  .mosaic-dominant:has(> .photo-real) > .photo-real:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .mosaic-dominant:has(> .photo-real) > .photo-real:nth-child(4), .mosaic-dominant:has(> .photo-real) > .photo-real:nth-child(5) { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .photo-real[data-image-key="BRANDING_MOSAIC_01"] { --pos: 50% 40%; }
  .photo-real[data-image-key="BRANDING_MOSAIC_02"] { --pos: 82% 30%; }
  .photo-real[data-image-key="BRANDING_MOSAIC_03"] { --pos: 28% 85%; }
  .photo-real[data-image-key="BRANDING_MOSAIC_05"] { --pos: 50% 52%; aspect-ratio: 4 / 3; }
  .mini-mosaic:has(> .photo-real[data-image-key="HEADSHOTS_COMFORT_01"]) { grid-template-columns: 1.1fr .9fr; grid-template-rows: auto auto; }
  .comparison-pair:has(> .photo-real) { grid-template-columns: .8fr 1.2fr; }
  .mini-mosaic .placeholder-key { font-size: .56rem; letter-spacing: .03em; overflow-wrap: normal; }
}

/* ===== Real photography: Team + Workplace ===== */
/* Hero is a landscape photograph, so it runs at 4:3 across the column (as on Services and Product); focus slid to the barista and espresso machine. */
.page-hero .photo-real[data-image-key="TEAM_HERO_01"] { --ratio: 4 / 3; --pos: 56% 50%; width: 100%; }
.split .photo-real[data-image-key="TEAM_PROCESS_01"] { --ratio: 3 / 2; --pos: 50% 55%; }
.split > .photo-real[data-image-key="TEAM_MOMENT_01"] { --ratio: 3 / 2; --pos: 62% 50%; }
.testimonial-layout > .photo-real[data-image-key="TEAM_TESTIMONIAL_01"] { --ratio: 1 / 1; --pos: 88% 50%; }

/* One-session mosaic: wide team portrait + leadership portrait on top (same height), then three landscape images. */
.mosaic-five:has(> .photo-real) { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; gap: 14px; }
.mosaic-five > .photo-real { min-height: 0; aspect-ratio: auto; }
.mosaic-five > .photo-real picture { position: absolute; inset: 0; }
.mosaic-five > [data-image-key="TEAM_MOSAIC_01"] { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 7 / 4; --pos: 50% 40%; }
.mosaic-five > [data-image-key="TEAM_MOSAIC_02"] { grid-column: 9 / 13; grid-row: 1; --pos: 50% 30%; }
.mosaic-five > [data-image-key="TEAM_MOSAIC_03"] { grid-column: 1 / 5; grid-row: 2; aspect-ratio: 4 / 3; --pos: 60% 50%; }
.mosaic-five > [data-image-key="TEAM_MOSAIC_04"] { grid-column: 5 / 9; grid-row: 2; aspect-ratio: 4 / 3; --pos: 42% 50%; }
.mosaic-five > [data-image-key="TEAM_MOSAIC_05"] { grid-column: 9 / 13; grid-row: 2; aspect-ratio: 4 / 3; --pos: 50% 45%; }

/* Visual break: portrait source in a wide band, so the band is tall (16:9) and anchored on the man and the tractor; quote panel as on the Home and Product breaks. */
.full-bleed:has(> .photo-real[data-image-key="TEAM_BREAK_01"]) { display: block; min-height: 0; background: var(--deep); }
.full-bleed > .photo-real[data-image-key="TEAM_BREAK_01"] { width: 100%; border-radius: 0; box-shadow: none; --ratio: 16 / 9; --pos: 50% 30%; }
.full-bleed:has(> .photo-real[data-image-key="TEAM_BREAK_01"]) blockquote { position: absolute; z-index: 1; right: max(20px, calc((100% - 1180px) / 2)); bottom: 36px; width: min(520px, calc(100% - 40px)); margin: 0; padding: 34px 38px; background: var(--deep); border-radius: 12px; box-shadow: 0 18px 44px rgba(1,86,86,.28); font-size: clamp(1.45rem, 2vw, 1.95rem); line-height: 1.18; }

@media (max-width: 1000px) {
  .full-bleed > .photo-real[data-image-key="TEAM_BREAK_01"] { --ratio: 1 / 1; --pos: 50% 42%; }
  .full-bleed:has(> .photo-real[data-image-key="TEAM_BREAK_01"]) blockquote { position: relative; right: auto; bottom: auto; width: 100%; max-width: none; padding: 34px max(20px, calc((100% - 820px) / 2)); border-radius: 0; box-shadow: none; font-size: clamp(1.55rem, 4.6vw, 2.1rem); }
}
@media (max-width: 900px) {
  .page-hero .photo-real[data-image-key="TEAM_HERO_01"] { width: min(100%, 560px); }
  .mosaic-five:has(> .photo-real) { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 12px; }
  .mosaic-five > [data-image-key="TEAM_MOSAIC_01"] { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .mosaic-five > [data-image-key="TEAM_MOSAIC_02"] { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 4; order: 2; }
  .mosaic-five > [data-image-key="TEAM_MOSAIC_05"] { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 4; order: 3; --pos: 50% 45%; }
  .mosaic-five > [data-image-key="TEAM_MOSAIC_03"] { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; order: 4; }
  .mosaic-five > [data-image-key="TEAM_MOSAIC_04"] { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; order: 5; }
}
@media (max-width: 620px) {
  .full-bleed > .photo-real[data-image-key="TEAM_BREAK_01"] { --ratio: 4 / 5; --pos: 50% 30%; }
}

/* Headshots comfort mosaic square portrait; Personal Branding plan photo (landscape source shown whole: laptop, catalogs and brochures all in frame) */
.mini-mosaic .photo-real[data-image-key="HEADSHOTS_COMFORT_02"] { --ratio: 1 / 1; --pos: 50% 28%; }
.split > .photo-real[data-image-key="BRANDING_PLAN_01"] { --ratio: 3 / 2; --pos: 50% 50%; }

/* ===== Real photography: Stop-Motion still cross-sell ===== */
/* One horizontal (4:3) and one vertical (4:5) photograph, bottom-aligned so the pair has an intentional uneven top. */
.comparison-pair:has(> [data-image-key="MOTION_STILL_01"]) { grid-template-columns: 1.15fr .85fr; align-items: end; }
.comparison-pair > .photo-real[data-image-key="MOTION_STILL_01"] { --ratio: 4 / 3; --pos: 25% 50%; }
.comparison-pair > .photo-real[data-image-key="MOTION_STILL_02"] { --ratio: 4 / 5; --pos: 50% 100%; }
@media (max-width: 900px) {
  .comparison-pair:has(> [data-image-key="MOTION_STILL_01"]) { grid-template-columns: 1fr; row-gap: 14px; }
  .comparison-pair > .photo-real[data-image-key="MOTION_STILL_02"] { width: min(72%, 340px); justify-self: end; }
}

/* Stop-Motion hero (4:5 source, shown whole) and the three-frame sequence (square sources, shown whole) */
.page-hero .photo-real[data-image-key="MOTION_HERO_01"] { --ratio: 4 / 5; --pos: 50% 50%; }
.frame-sequence .photo-real { --ratio: 1 / 1; --pos: 50% 50%; width: 100%; }

/* ===== Real photography: Contact + Help Me Figure It Out heroes (2:3 sources shown in the 4:5 slot, focus on the subject) ===== */
.page-hero .photo-real[data-image-key="CONTACT_HERO_01"] { --ratio: 4 / 5; --pos: 50% 32%; }
.page-hero .photo-real[data-image-key="GUIDE_HERO_01"] { --ratio: 4 / 5; --pos: 50% 22%; }

/* ===== Real photography: Contact detail + Privacy hero ===== */
.split > .photo-real[data-image-key="CONTACT_DETAIL_01"] { --ratio: 4 / 3; --pos: 50% 50%; }
.page-hero .photo-real[data-image-key="PRIVACY_HERO_01"] { --ratio: 4 / 5; --pos: 50% 50%; }

/* ===== Homepage: How I work ===== */
/* Two columns, no photograph: the four steps on the left; on the right a deep-teal editorial panel whose selected step is the focal point
   (large number, conversational headline, explanation). All four steps share one grid cell, so the panel is always as tall as the longest. */
.home-page .process { grid-template-columns: .8fr 1.2fr; align-items: stretch; gap: clamp(32px, 5vw, 72px); }
.home-page .process-button { position: relative; transition: background-color .3s ease, color .3s ease, padding .3s ease, box-shadow .3s ease; }
.home-page .process-button span { color: var(--teal); font-weight: 800; }
.home-page .process-button strong { transition: font-size .3s ease; }
.home-page .process-button[aria-selected="true"] { color: var(--deep); padding-left: 18px; background: linear-gradient(90deg, rgba(193,223,206,.9), rgba(193,223,206,.1)); box-shadow: inset 5px 0 0 var(--teal); }
.home-page .process-button[aria-selected="true"] strong { font-size: 1.55rem; }
.home-page .process-button[aria-selected="true"]::after { content: "\2192"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--teal); font-size: 1.6rem; }
.home-page .process-button:focus-visible, .home-page .process-panel:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.home-page .process-panel { position: relative; overflow: hidden; padding: 38px 44px 42px; border-radius: 18px; background: var(--deep); color: var(--white); box-shadow: 0 18px 44px rgba(1,86,86,.22); }
.home-page .process-items { display: grid; position: relative; }
.home-page .process-item { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; }
.home-page .process-item[data-active] { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .1s, transform .5s ease .1s, visibility 0s; }
.home-page .process-watermark { position: absolute; right: -10px; bottom: -44px; font-family: var(--home-serif); font-size: clamp(9rem, 15vw, 14rem); line-height: 1; color: rgba(193,223,206,.09); pointer-events: none; }
.home-page .process-kicker { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; font-family: var(--home-serif); line-height: 1; }
.home-page .process-num { color: var(--mint); font-size: 2.2rem; font-weight: 500; }
.home-page .process-sep { color: rgba(193,223,206,.55); font-size: 1.6rem; }
.home-page .process-name { color: var(--mint); font-size: .95rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-family: var(--sans); }
.home-page .process-headline { margin: 0 0 14px; max-width: 18ch; color: var(--white); font-family: var(--home-serif); font-size: clamp(2.3rem, 3.8vw, 3.5rem); font-weight: 500; line-height: 1.06; }
.home-page .process-text { position: relative; max-width: min(30em, 80%); margin: 0; color: rgba(255,255,255,.92); font-family: var(--home-serif); font-size: clamp(1.3rem, 1.85vw, 1.65rem); line-height: 1.4; }
.home-page .process-progress { position: absolute; top: 40px; right: 44px; display: flex; gap: 6px; }
.home-page .process-progress i { width: 28px; height: 4px; border-radius: 2px; background: rgba(193,223,206,.28); transition: background-color .35s ease; }
.home-page .process-progress i[data-on] { background: var(--mint); }

@media (max-width: 900px) {
  .home-page .process { grid-template-columns: 1fr; gap: 24px; }
  .home-page .process-tabs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .home-page .process-button { padding: 13px 4px; gap: 10px; grid-template-columns: 28px 1fr; }
  .home-page .process-button strong, .home-page .process-button[aria-selected="true"] strong { font-size: 1.12rem; }
  .home-page .process-button[aria-selected="true"] { padding-left: 12px; }
  .home-page .process-button[aria-selected="true"]::after { content: none; }
  .home-page .process-panel { padding: 26px 22px 30px; border-radius: 16px; }
  .home-page .process-progress { top: 28px; right: 22px; }
  .home-page .process-progress i { width: 20px; }
  .home-page .process-num { font-size: 1.9rem; }
  .home-page .process-watermark { font-size: 8rem; bottom: -22px; right: -4px; }
  .home-page .process-headline { font-size: clamp(1.8rem, 7.4vw, 2.3rem); max-width: none; }
  .home-page .process-text { font-size: clamp(1.15rem, 4.6vw, 1.35rem); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .process-item, .home-page .process-item[data-active], .home-page .process-button, .home-page .process-button strong, .home-page .process-progress i { transition: none; transform: none; }
}

/* ===== Homepage: why professional photography (phone or professional) ===== */
.why-pro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 40px; }
.why-pro > div { padding-top: 16px; border-top: 2px solid var(--teal); }
.why-pro h3 { margin: 0 0 8px; font-size: 1.3rem; line-height: 1.2; }
.why-pro p { margin: 0; font-size: 1rem; line-height: 1.55; }
@media (max-width: 900px) { .why-pro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; } }
@media (max-width: 620px) { .why-pro { grid-template-columns: 1fr; gap: 16px; } .why-pro > div { padding-top: 12px; } .why-pro h3 { font-size: 1.18rem; margin-bottom: 4px; } .why-pro p { font-size: .97rem; line-height: 1.5; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}