/* Moree — a bright photo scrapbook. Shared colors remain editable in the CMS. */
body { background: var(--paper); }
body::after { display: none; }
::selection { background: var(--sand); color: var(--ink); }
h2 { font-family: var(--sans); font-weight: 700; line-height: 1.45; letter-spacing: -.055em; }
em { color: var(--accent); }
.english-title { font-family: Arial, Helvetica, sans-serif; font-weight: 800; letter-spacing: -.065em; line-height: 1.05; }
.english-title em { font-family: Georgia, serif; font-weight: 400; }
.eyebrow { font-weight: 650; font-size: .8125rem; letter-spacing: .11em; }
.lead { font-weight: 600; }
.text-link { font-weight: 600; border-bottom-width: 2px; padding-bottom: 10px; }
.button { border: 1.5px solid var(--ink); border-radius: 100px; color: var(--ink); background: var(--sand); box-shadow: 3px 4px 0 var(--ink); font-weight: 650; padding-inline: 28px; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { background: var(--lemon); color: var(--ink); border-color: var(--ink); box-shadow: 1px 2px 0 var(--ink); transform: translate(2px,2px); }
.cms-edit-entry { background: var(--ink); border-color: var(--line); color: var(--white); }

/* Shared navigation */
.top-bar { background: var(--sand); color: var(--ink); }
.top-bar > span:first-child { font-weight: 600; }
.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.wordmark { letter-spacing: -.075em; font-weight: 900; color: var(--blue); }
.wordmark > span { color: var(--accent); }
.header-links { gap: 10px; }
.header-links a { display: flex; align-items: center; min-height: 36px; padding: 5px 16px; border-radius: 100px; font-weight: 550; }
.header-links a[aria-current="page"] { border: none; color: var(--ink); background: var(--sky); }
.header-links a:hover { color: var(--ink); background: var(--cream); }
.site-menu { background: var(--sky); }
.menu-links a { font-family: Arial, Helvetica, sans-serif; font-weight: 800; border-color: var(--ink); }
.menu-links a[aria-current="page"] { color: var(--ink); }
.menu-links a:hover { color: var(--accent); }
.menu-links a span { border-radius: 50%; background: var(--sand); padding: 10px 13px; }
.menu-note { color: var(--ink); }

/* Opening spread: live text, three independently editable photo prints. */
.home-hero { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.2fr); align-items: center; gap: 3vw; padding: 58px var(--gutter) 112px; min-height: 730px; max-height: none; background-color: var(--sky); background-image: linear-gradient(#ffffff32 1px,transparent 1px),linear-gradient(90deg,#ffffff32 1px,transparent 1px); background-size: 44px 44px; color: var(--ink); overflow: hidden; }
.hero-copy { position: relative; inset: auto; width: auto; min-width: 0; z-index: 3; padding-bottom: 12px; }
.hero-copy .eyebrow { width: fit-content; padding: 7px 13px; border: 1px solid var(--ink); background: var(--white); transform: rotate(-2deg); font-size: .75rem; }
.hero-brand { display: block; position: static; width: fit-content; font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif; font-weight: 900; font-size: clamp(5.5rem,11.8vw,12rem); line-height: 1.03; letter-spacing: -.085em; margin: 24px 0 25px -.065em; color: var(--white); -webkit-text-stroke: 2px var(--blue); paint-order: stroke fill; text-shadow: 5px 6px 0 var(--blue); transform: rotate(-4deg); }
.hero-copy h1 { font: 750 clamp(1.9rem,3.2vw,3.2rem)/1.4 var(--sans); letter-spacing: -.065em; margin: 0 0 20px; color: var(--accent); }
.hero-copy > p:last-child { font-size: 1rem; line-height: 1.95; color: var(--ink); }
.hero-collage { position: relative; height: clamp(465px,43vw,620px); min-width: 0; margin-left: -1vw; }
.hero-snapshot { position: absolute; background: var(--white); padding: 10px; box-shadow: 5px 7px 0 #183f3914; }
.hero-snapshot .cms-image-frame { width: 100%; height: 100%; position: relative; inset: auto; }
.hero-snapshot-main { left: 3%; top: 8%; width: 66%; height: 84%; padding: 12px 12px 0; transform: rotate(-6deg); z-index: 2; }
.hero-snapshot-main .hero-image { height: calc(100% - 47px); }
.hero-snapshot-main figcaption { min-height: 47px; display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 600; letter-spacing: .025em; }
.hero-snapshot-soft { right: 0; top: 0; width: 36%; height: 36%; background: var(--lemon); transform: rotate(9deg); z-index: 3; }
.hero-snapshot-natural { right: -1%; bottom: 3%; width: 39%; height: 35%; background: var(--sand); transform: rotate(7deg); z-index: 3; }
.hero-snapshot-natural .cms-image-frame > img { object-position: 42% 50%; }
.photo-note { position: absolute; z-index: 4; top: 47%; right: -2%; padding: 9px 19px 11px; border: 3px solid var(--white); outline: 1px solid var(--blue); border-radius: 100%; background: var(--sand); color: var(--accent); font: italic 600 clamp(1rem,1.75vw,1.55rem)/1.4 Georgia,serif; transform: rotate(-9deg); white-space: nowrap; }
.hero-bottom { bottom: 26px; padding-top: 16px; border-top: 1px solid #183f3935; }
.hero-bottom > a { background: var(--white); border: 1px solid var(--ink); border-radius: 100px; padding: 8px 19px; font-weight: 600; }
.hero-bottom > a:hover { background: var(--lemon); }
.hero-bottom > span { font-weight: 600; }

/* White notebook spread */
.story-section { align-items: center; background: var(--paper); gap: clamp(48px,8vw,140px); }
.story-visual { padding: 16px 20px 10px 8px; }
.story-photo { border: 0; background: var(--sky); padding: 12px 12px 0; transform: rotate(-3deg); box-shadow: 10px 12px 0 var(--cream); }
.story-photo .cms-image-frame { aspect-ratio: .96; }
.story-photo figcaption { color: var(--ink); font-size: .8125rem; font-weight: 550; }
.story-side-label { top: 10px; right: -10px; color: var(--accent); font-weight: 600; }
.story-copy { padding-top: 0; }
.story-copy > .eyebrow, .method-copy > .eyebrow, .reviews-heading > .eyebrow { display: inline-block; width: fit-content; padding: 6px 12px; color: var(--ink); background: var(--sand); transform: rotate(-2deg); }
.story-copy h2 { margin: 27px 0 30px; font-size: clamp(3.8rem,6.5vw,6.8rem); color: var(--blue); }
.story-copy h2 em { color: var(--accent); }
.story-footnote { position: relative; padding: 25px; margin-top: 35px; border: 1px solid var(--line); background: repeating-linear-gradient(transparent 0 27px,#93b4cd25 27px 28px),var(--white); transform: rotate(1deg); }
.story-footnote > span { font: 650 1.25rem/1.5 var(--sans); }
.story-footnote > p { margin-top: 8px; }
.brand-statement { background: var(--sand); position: relative; padding-block: clamp(65px,8vw,110px); }
.brand-statement .eyebrow { color: var(--ink); }
.brand-statement h2 { font-size: clamp(2.1rem,4.4vw,4.4rem); line-height: 1.55; }
.brand-statement h2 em { color: var(--accent); background: var(--white); padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.brand-statement > p:not(.eyebrow) { color: var(--ink); }

/* Notes from the shoot */
.reviews { background: var(--white); grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); align-items: center; gap: 4vw; }
.reviews-heading > .eyebrow { background: var(--sky); }
.review-quotes { gap: 24px; padding: 8px 0; }
.review-quotes figure { position: relative; border: 1px solid var(--line); padding: 34px 25px 28px; background: var(--sky); box-shadow: 4px 6px 0 #188bcb12; transform: rotate(-2deg); }
.review-quotes figure:nth-child(2) { background: var(--lemon); transform: rotate(2deg); }
.review-quotes blockquote { font: 600 1.2rem/1.8 var(--sans); color: var(--ink); }
.review-quotes figure > p { font-size: .9375rem; }
.review-quotes figcaption { font-weight: 650; }
.review-quotes figcaption > span { display: block; margin-left: 0; margin-top: 4px; font-weight: 400; }
.page-finale { background: var(--sky); background-image: linear-gradient(#ffffff40 1px,transparent 1px),linear-gradient(90deg,#ffffff40 1px,transparent 1px); background-size: 44px 44px; }
.page-finale .eyebrow { color: var(--ink); }
.page-finale h2 { font-size: clamp(3.5rem,7.5vw,7.5rem); color: var(--accent); }
.page-finale h2 em { color: var(--accent); }
.page-finale > p:not(.eyebrow) { color: var(--ink); }

/* About: the same scrapbook, with room for the story. */
.about-intro { background: var(--white); gap: 7vw; }
.about-left > .eyebrow { display: inline-block; background: var(--sand); padding: 6px 12px; transform: rotate(-2deg); color: var(--ink); }
.about-left h1 { font-size: clamp(2.9rem,4.3vw,4.75rem); color: var(--blue); }
.about-info { border-color: var(--line); }
.about-info h2 { font-weight: 700; }
.about-info dl > div { grid-template-columns: 102px minmax(0,1fr); }
.about-info dt { color: var(--accent); font-weight: 700; font-size: .8125rem; }
.about-display { font: 700 clamp(1.9rem,3.1vw,3.2rem)/1.55 var(--sans); margin-top: 18px; }
.about-right figure { position: relative; padding: 12px 12px 0; background: var(--sand); border: 1px solid var(--white); box-shadow: 9px 10px 0 var(--sky); transform: rotate(2deg); }
.about-right figcaption { padding: 17px 5px; color: var(--ink); }
.about-definition { background: var(--sky); }
.definition-type { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px; margin: 30px 0 36px; font: 800 clamp(2rem,4.5vw,4.4rem)/1.15 Arial,sans-serif; letter-spacing: -.06em; }
.definition-type > i { display: inline-block; padding: 15px 23px; border: 1.5px solid var(--ink); background: var(--white); border-radius: 4px; transform: rotate(-3deg); font-style: normal; }
.definition-type > i:last-child { background: var(--sand); transform: rotate(3deg); }
.definition-type > span { font: inherit; color: var(--ink); margin: 0; }
.about-definition > p:last-child { color: var(--ink); }
.about-method { background: var(--white); align-items: center; }
.method-photo { background: var(--lemon); border: 0; padding: 12px 12px 0; transform: rotate(-3deg); box-shadow: 9px 10px 0 var(--cream); }
.method-photo figcaption { color: var(--ink); }
.method-copy h2 { font-family: var(--sans); font-size: clamp(2.2rem,3.8vw,4rem); }
.method-list li { align-items: start; border-color: var(--line); }
.method-list li > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--sky); padding: 0; font: 650 1rem var(--sans); color: var(--ink); }
.method-list li:nth-child(2) > span { background: var(--sand); }
.method-list li:nth-child(3) > span { background: var(--lemon); }
.method-list h3 { font-weight: 700; }
.about-manifesto { background: var(--sand); }
.about-manifesto blockquote { font: 700 clamp(2.1rem,4.5vw,4.6rem)/1.65 var(--sans); }
.about-manifesto > p:last-child { color: var(--ink); }

/* Contact and application form */
.contact-hero { background: var(--sky); padding: 45px var(--gutter) 55px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6vw; min-height: 670px; align-items: center; overflow: hidden; }
.contact-hero-copy { padding: 25px 0; }
.contact-hero-copy > .eyebrow { color: var(--ink); background: var(--white); border: 1px solid var(--ink); width: fit-content; padding: 7px 12px; transform: rotate(-2deg); }
.contact-hero h1 { font-size: clamp(3.7rem,6.3vw,6.7rem); color: var(--accent); }
.contact-hero-copy > p:not(.eyebrow) { color: var(--ink); }
.contact-hero figure { height: clamp(450px,40vw,590px); min-height: 0; background: var(--white); padding: 12px 12px 0; transform: rotate(3deg); box-shadow: 8px 9px 0 #183f3917; }
.contact-hero .cms-image-frame { position: relative; inset: auto; height: calc(100% - 57px); }
.contact-hero figcaption { position: static; color: var(--ink); background: none; padding: 14px 7px; min-height: 57px; font-weight: 550; }
.section-heading .eyebrow { color: var(--accent); }
.process-list { gap: 22px; }
.process-list li { background: var(--cream); border: 1px solid var(--line); padding: 26px; }
.process-list li:nth-child(2) { background: var(--sky); }
.process-list li:nth-child(3) { background: var(--lemon); }
.process-list li > span { font: 750 1.5rem/1.2 var(--sans); color: var(--ink); }
.process-list h3 { font-weight: 700; }
.process-list p { color: var(--ink); }
.inquiry-section { background: var(--cream); background-image: linear-gradient(#9bbdac26 1px,transparent 1px),linear-gradient(90deg,#9bbdac26 1px,transparent 1px); background-size: 36px 36px; }
.inquiry-intro .eyebrow { display: inline-block; padding: 6px 12px; background: var(--sand); color: var(--ink); transform: rotate(-2deg); }
.inquiry-intro h2 { font-size: clamp(2rem,3.3vw,3.5rem); }
.form-intro-note { border-color: var(--line); }
.request-form { border: 1px solid var(--line); background: var(--white); box-shadow: 8px 9px 0 #badada65; border-radius: 3px; }
.request-form-heading .eyebrow { color: var(--ink); }
.submission-notice { background: #f0f9fe; border-left-color: var(--blue); }
.submission-notice.is-success { background: #f0fadb; border-left-color: var(--accent); }
.submission-notice.is-error { background: #fff0ee; border-left-color: #ab4739; }
.form-field > label { font-weight: 650; }
.form-field > input, .form-field > select, .form-field > textarea { background-color: var(--white); border-color: #bbd3d0; border-radius: 6px; }
.form-field > input::placeholder, .form-field > textarea::placeholder { color: #657e79; }
.selected-photo { border-color: #b7d9e6; background: #eef9fe; border-radius: 6px; }
.selected-photo > span, .selected-photo > p { color: var(--muted); }
.selected-photo > strong { font-weight: 650; }
.request-submit { border-radius: 7px; }
.request-submit:disabled, .request-submit:disabled:hover { color: var(--muted); background: #e7efed; border-color: var(--line); box-shadow: none; }

/* Closing spread */
.site-footer { background: var(--white); border-top: 1px solid var(--line); }
.footer-info .eyebrow { color: var(--accent); }
.footer-info .text-link { width: min(100%,14rem); }
.back-top { background: var(--sand); color: var(--ink); border: 1px solid var(--ink); border-radius: 50%; }
.footer-mark { font-family: Arial,Helvetica,sans-serif; font-weight: 900; font-size: clamp(7rem,26vw,29rem); letter-spacing: -.085em; color: var(--blue); margin-block: 70px 50px; }
.footer-mark > span { color: var(--accent); }
.footer-bottom { border-color: var(--line); }

/* Crayon stickers and small strips of washi tape, kept clear of faces and copy. */
.scrapbook-sticker { position: absolute; display: block; height: auto; aspect-ratio: 1; object-fit: contain; pointer-events: none; user-select: none; z-index: 5; }
.hero-doodles { width: 29%; top: -9%; left: -7%; transform: rotate(-12deg); }
.hero-camera { width: 27%; bottom: -5%; left: -8%; transform: rotate(10deg); }
.hero-snapshot-main::before, .hero-snapshot-natural::before, .story-photo::before, .about-right figure::before, .story-footnote::before, .review-quotes figure::before, .method-photo::before { content: ""; position: absolute; z-index: 4; top: -13px; left: 31%; width: 34%; max-width: 120px; height: 28px; background: var(--sand); opacity: .9; transform: rotate(-7deg); pointer-events: none; }
.hero-snapshot-main::before { left: 51%; width: 28%; background: var(--lemon); transform: rotate(8deg); }
.hero-snapshot-natural::before { left: 26%; width: 48%; height: 21px; background: var(--sky); }
.story-photo::before { background: var(--lemon); left: 38%; }
.story-visual { position: relative; }
.story-sticker { right: -3%; bottom: 75px; width: 25%; transform: rotate(8deg); }
.story-footnote::before { left: auto; right: 22px; width: 83px; height: 23px; background: var(--lemon); transform: rotate(8deg); }
.brand-statement, .about-definition, .page-finale { position: relative; isolation: isolate; overflow: hidden; }
.statement-sticker { width: clamp(110px,16vw,225px); top: 18px; left: 2%; transform: rotate(-15deg); z-index: -1; }
.brand-statement > :not(.scrapbook-sticker), .about-definition > :not(.scrapbook-sticker), .page-finale > :not(.scrapbook-sticker) { position: relative; z-index: 1; }
.review-quotes figure::before { background: var(--sand); width: 80px; left: 30%; height: 24px; }
.review-quotes figure:nth-child(2)::before { background: var(--sky); left: 40%; transform: rotate(7deg); }
.reviews-heading h2 { color: var(--accent); }
.page-finale { padding-block: clamp(85px,10vw,145px); }
.finale-sticker { width: clamp(90px,16vw,215px); bottom: 24px; right: 3%; transform: rotate(12deg); z-index: 0; }
.about-right { position: relative; }
.about-sticker { width: 25%; left: -7%; bottom: 100px; transform: rotate(-14deg); }
.about-right figure::before { background: var(--lemon); left: 62%; width: 25%; }
.definition-sticker { width: clamp(105px,16vw,210px); bottom: 15px; right: 2%; z-index: 0; transform: rotate(8deg); }
.about-manifesto blockquote em { background: var(--white); padding: .05em .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.method-photo { position: relative; }
.method-photo::before { background: var(--sky); }
.contact-hero figure { position: relative; }
.contact-sticker { width: 27%; bottom: 65px; right: -7%; transform: rotate(13deg); }
.process-list li { border: 0; border-radius: 2px; box-shadow: 5px 5px 0 var(--line); }
.process-list li:first-child { background: var(--sand); }
.process-list li > span { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--white); border-radius: 50%; }
.inquiry-section { background-color: #f0fcff; background-image: linear-gradient(#8ed7ee26 1px,transparent 1px),linear-gradient(90deg,#8ed7ee26 1px,transparent 1px); }

@media (min-width: 1800px) { .home-hero { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); } }
@media (max-width: 1050px) {
  .site-header { grid-template-columns: 44px minmax(100px,1fr) auto; gap: 12px; }
  .site-header .wordmark { justify-self: start; }
  .header-links { gap: 2px; }
  .header-links a { padding-inline: 11px; }
  .home-hero { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 12px; min-height: 660px; padding-top: 42px; }
  .hero-collage { height: 465px; }
  .hero-brand { font-size: 11.5vw; }
  .hero-copy h1 { font-size: clamp(1.8rem,3.3vw,2.8rem); }
  .hero-copy > p:last-child { font-size: .9375rem; }
  .hero-snapshot { padding: 8px; }
  .hero-snapshot-main { padding-bottom: 0; width: 72%; }
  .hero-snapshot-main .hero-image { height: calc(100% - 42px); }
  .hero-snapshot-main figcaption { min-height: 42px; }
  .photo-note { right: -2%; padding-inline: 12px; }
  .reviews { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .contact-hero { gap: 35px; min-height: 600px; }
  .contact-hero h1 { font-size: 5.7vw; }
  .contact-hero figure { height: 470px; }
  .about-info dl > div { grid-template-columns: 92px minmax(0,1fr); gap: 12px; }
}
@media (max-width: 680px) {
  :root { --gutter: 22px; }
  .site-header { grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .site-header .wordmark { justify-self: center; }
  .eyebrow { font-size: .75rem; }
  .home-hero { display: flex; flex-direction: column; align-items: stretch; gap: 20px; min-height: 0; padding: 32px var(--gutter) 103px; }
  .hero-copy { width: 100%; padding: 0; }
  .hero-copy .eyebrow { font-size: .6875rem; }
  .hero-brand { font-size: clamp(5.5rem,24vw,9rem); margin: 22px 0 16px -.055em; }
  .hero-copy h1 { font-size: clamp(1.7rem,7.3vw,2.6rem); line-height: 1.45; margin-bottom: 13px; }
  .hero-copy > p:last-child { font-size: .9375rem; }
  .hero-collage { width: 100%; max-width: 470px; height: auto; aspect-ratio: 1.05; margin: 0 auto 0; }
  .hero-snapshot-main { top: 7%; left: 6%; width: 63%; height: 85%; }
  .hero-snapshot-main .hero-image { height: calc(100% - 34px); }
  .hero-snapshot-main figcaption { min-height: 34px; font-size: .75rem; }
  .hero-snapshot-soft { top: 2%; right: 1%; width: 34%; height: 36%; }
  .hero-snapshot-natural { bottom: 1%; right: 1%; width: 36%; height: 35%; }
  .photo-note { top: 44%; right: 0; font-size: clamp(.875rem,3.8vw,1.2rem); padding: 8px 12px; }
  .hero-doodles { width: 29%; top: -5%; left: -4%; }
  .hero-camera { width: 26%; bottom: -6%; left: -4%; }
  .hero-snapshot-main::before { height: 19px; top: -9px; }
  .hero-snapshot-natural::before { height: 16px; top: -8px; }
  .story-sticker { right: -2%; bottom: 64px; width: 26%; }
  .statement-sticker { width: 90px; top: 4px; left: -6px; }
  .brand-statement { padding-top: 82px; }
  .finale-sticker { width: 88px; bottom: 12px; right: 3px; }
  .about-sticker { width: 26%; left: -3%; bottom: 75px; }
  .definition-sticker { width: 82px; bottom: 5px; right: -4px; }
  .about-definition { padding-bottom: 85px; }
  .hero-bottom { bottom: 20px; align-items: center; }
  .hero-bottom > span { font-size: .625rem; letter-spacing: .055em; }
  .hero-bottom > a { font-size: .8125rem; gap: 18px; }
  .story-section { gap: 42px; }
  .story-visual { padding: 7px 12px 8px 7px; }
  .story-photo .cms-image-frame { aspect-ratio: 1.02; }
  .story-copy h2 { font-size: clamp(3.5rem,13vw,5rem); }
  .story-footnote { padding: 18px 22px; }
  .brand-statement h2 { font-size: clamp(1.7rem,6.8vw,2.7rem); }
  .review-quotes { gap: 25px; padding-inline: 4px; }
  .review-quotes figure { padding: 26px 23px; }
  .review-quotes blockquote { font-size: 1.125rem; }
  .page-finale h2 { font-size: clamp(3.1rem,12.5vw,4.7rem); }
  .about-intro { gap: 42px; }
  .about-left h1 { font-size: clamp(2.65rem,10.5vw,4rem); }
  .about-right { padding: 0 9px 9px 2px; }
  .about-display { font-size: 1.9rem; }
  .about-right figcaption { font-size: .8125rem; padding: 15px 4px; }
  .definition-type { gap: 10px; font-size: clamp(1.35rem,5.5vw,2.2rem); }
  .definition-type > i { padding: 12px; }
  .method-photo { width: 90%; margin-top: 6px; }
  .method-list li { grid-template-columns: 38px minmax(0,1fr); gap: 15px; }
  .method-list li > span { width: 35px; height: 35px; font-size: .875rem; }
  .method-copy h2 { font-size: clamp(2.1rem,8vw,3rem); }
  .about-manifesto blockquote { font-size: clamp(1.9rem,7vw,3rem); }
  .contact-hero { grid-template-columns: minmax(0,1fr); padding: 36px var(--gutter) 50px; gap: 30px; }
  .contact-hero-copy { padding: 0; }
  .contact-hero h1 { font-size: clamp(3.5rem,13.5vw,5.5rem); margin-block: 28px 24px; }
  .contact-hero figure { height: 420px; width: calc(100% - 12px); margin-left: 2px; }
  .contact-hero .cms-image-frame { height: calc(100% - 56px); }
  .contact-hero figcaption { font-size: .8125rem; padding: 12px 4px; }
  .process-list { gap: 15px; }
  .process-list li { padding: 24px; }
  .request-form { box-shadow: 5px 6px 0 #badada65; }
  .inquiry-intro h2 { font-size: 2rem; }
  .footer-mark { font-size: 26vw; margin-block: 48px 35px; }
  .footer-bottom nav { flex-wrap: wrap; gap: 8px 22px; }
}
@media (max-width: 360px) {
  :root { --gutter: 18px; }
  .hero-copy h1 { font-size: 1.55rem; }
  .hero-copy > p:last-child { font-size: .875rem; }
  .photo-note { padding: 6px 9px; font-size: .8rem; }
  .hero-bottom > span { max-width: 50%; }
  .contact-hero figure { height: 360px; }
}