/**
 * Gaia Photography | MetaLumina Spectrum
 * BootstrapMade Strada foundation, tailored to Gaia's documentary field identity.
 * Pine, stone, sage, bronze. Single-page, booking-first layout.
 */

/* 01 | Foundation */
:root {
  --default-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-font: "Fraunces", Georgia, serif;
  --nav-font: "DM Sans", system-ui, sans-serif;
  --background-color: #f2f0e9;
  --default-color: #4d5c53;
  --heading-color: #1b3228;
  --accent-color: #59755d;
  --surface-color: #fffefa;
  --contrast-color: #ffffff;
  --gaia-forest: #182a23;
  --gaia-forest-deep: #101e19;
  --gaia-evergreen: #243a2f;
  --gaia-moss: #afc3a1;
  --gaia-copper: #c7a879;
  --gaia-sand: #f2f0e9;
  --gaia-paper: #fbfaf6;
  --gaia-line: rgba(35, 61, 44, .15);
  --gaia-shadow: 0 22px 56px rgba(20, 35, 27, .08);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px; margin: 0; background: var(--gaia-sand);
  color: var(--default-color); font: 400 15px/1.7 var(--default-font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.mobile-nav-active { overflow: hidden; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
a { color: var(--accent-color); text-decoration: none; transition: color .2s, background-color .2s, border-color .2s; }
a:hover { color: #32553d; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #9bb58f; outline-offset: 3px;
}
h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-family: var(--heading-font); text-wrap: balance; }
::selection { background: #c7d9b7; color: #183024; }
section, .section { position: relative; padding: 90px 0; color: var(--default-color); background: var(--background-color); overflow: clip; scroll-margin-top: 82px; }
.eyebrow { display: inline-block; color: #60785c; font: 700 11px/1.5 var(--default-font); letter-spacing: .2em; text-transform: uppercase; }
.section-title { text-align: center; padding-bottom: 41px; }
.section-title h2 { margin: 0 0 18px; font: 500 clamp(2.7rem, 5vw, 4.25rem)/1.09 var(--heading-font); letter-spacing: -.04em; }
.section-title p { max-width: 650px; margin: 0 auto; color: #607064; font-size: 15px; line-height: 1.8; }

/* 02 | Header: ONE steady translucent treatment, no scroll-state flashes */
.index-page #header {
  position: fixed; inset: 0 0 auto; z-index: 997; min-height: 78px; padding: 10px 0;
  color: #f5f5eb;
  background: linear-gradient(180deg, rgba(14, 29, 23, .80), rgba(18, 35, 27, .70));
  border-bottom: 1px solid rgba(204, 220, 180, .17);
  box-shadow: 0 8px 26px rgba(7, 20, 13, .12);
  -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px);
}
/* JS still manages .scrolled for the active nav and scroll-to-top, not header colors. */
.header .logo { position: relative; z-index: 2; line-height: 1; flex-shrink: 0; }
.index-page #header .logo img {
  width: 56px; height: 56px; object-fit: contain; padding: 7px; border-radius: 50%;
  background: #f3f1e7; border: 1px solid rgba(194, 211, 179, .74);
  box-shadow: 0 0 0 3px rgba(239, 243, 226, .06), 0 5px 16px rgba(9, 20, 14, .20);
}
.index-page #header .brand-wordmark {
  color: #f7f3e8; font: 600 1.09rem/1.15 var(--nav-font);
  letter-spacing: -.025em; white-space: nowrap;
}
.index-page #header .brand-subtle { color: #f7f3e8; font-weight: 500; }
.header .cta-btn {
  display: inline-flex; justify-content: center; align-items: center;
  min-height: 40px; padding: 9px 23px; white-space: nowrap;
  color: #17271e; background: #becda9; border: 1px solid #becda9;
  border-radius: 2px; font: 700 12px/1.3 var(--nav-font); letter-spacing: .05em;
}
.header .cta-btn:hover, .header .cta-btn:focus-visible { background: #e1e9cc; border-color: #e1e9cc; color: #17271e; }
.header .cta-btn i { font-size: 15px; line-height: 1; }
@media (min-width: 1200px) {
  .navmenu { margin-left: auto; padding-right: 24px; }
  .navmenu > ul { display: flex; align-items: center; gap: 3px; margin: 0; padding: 0; list-style: none; }
  .navmenu > ul > li { padding: 12px 8px; }
  .navmenu a { position: relative; display: inline-flex; padding: 7px 4px; color: #e0e4d6; font: 500 13px/1.4 var(--nav-font); letter-spacing: .02em; }
  .navmenu a::after { content: ""; position: absolute; bottom: 0; left: 4px; right: 4px; height: 1px; background: #c7d8b3; transform: scaleX(0); transform-origin: left; transition: transform .2s; }
  .navmenu a:hover, .navmenu a.active { color: #fffef3; }
  .navmenu a:hover::after, .navmenu a.active::after { transform: scaleX(1); }
  .mobile-nav-toggle { display: none; }
}
@media (max-width: 1199.98px) {
  .index-page #header { min-height: 70px; padding: 7px 0; }
  .index-page #header .logo img { width: 52px; height: 52px; }
  .header .cta-btn { margin-left: auto; margin-right: 15px; padding-inline: 15px; }
  .mobile-nav-toggle { position: relative; z-index: 9999; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; background: transparent; color: #fffaf0; font-size: 29px; cursor: pointer; }
  .navmenu > ul { display: none; position: fixed; inset: 79px 18px auto; max-height: calc(100dvh - 100px); overflow-y: auto; margin: 0; padding: 12px 0; list-style: none; background: #20382a; border: 1px solid rgba(204, 220, 180, .23); box-shadow: 0 25px 60px rgba(0, 0, 0, .38); z-index: 9998; }
  .navmenu a { display: block; padding: 14px 24px; color: #f0f1e6; font-size: 16px; font-weight: 500; }
  .navmenu a:hover, .navmenu a.active { color: #e4e9c4; background: rgba(255, 255, 255, .04); }
  .mobile-nav-active .navmenu { position: fixed; z-index: 9997; inset: 0; background: rgba(8, 20, 13, .86); }
  .mobile-nav-active .navmenu > ul { display: block; }
  .mobile-nav-active .mobile-nav-toggle { position: fixed; top: 15px; right: 16px; }
  .mobile-nav-active .header .cta-btn { visibility: hidden; }
}
@media (max-width: 575.98px) {
  .index-page #header .logo img { width: 46px; height: 46px; }
  .index-page #header .brand-wordmark { font-size: .98rem; }
  .mobile-nav-active .navmenu > ul { inset: 74px 12px auto; }
  .mobile-nav-active .mobile-nav-toggle { top: 13px; right: 11px; }
}

/* 03 | Hero: a living landscape, not a rotating portfolio */
.index-page .hero { padding: 0; background: var(--gaia-forest-deep); overflow: hidden; }
.index-page .hero .cinema-frame { position: relative; width: 100%; height: min(96svh, 930px); min-height: 665px; overflow: hidden; background: #13251c; }
.index-page .hero .cinema-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 53%; filter: saturate(.88) contrast(1.05); }
.index-page .hero .frame-overlay { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(94deg, rgba(9, 29, 19, .96) 0%, rgba(10, 32, 22, .85) 36%, rgba(19, 42, 25, .46) 64%, rgba(17, 36, 24, .08) 100%); }
.index-page .hero .frame-content { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; padding: 100px 0 110px; }
.index-page .hero .content-inner { max-width: 790px; }
.index-page .hero .accent-line { width: 57px; height: 2px; margin-bottom: 26px; background: #c7a879; }
.index-page .hero .tag-label { display: block; margin-bottom: 23px; color: #d0dab8; font: 700 11px/1.5 var(--default-font); letter-spacing: .18em; text-transform: uppercase; }
.index-page .hero .hero-heading { max-width: 840px; margin: 0 0 26px; color: #fffdf3; font: 500 clamp(3.9rem, 6.8vw, 7.15rem)/1.04 var(--heading-font); letter-spacing: -.05em; }
.index-page .hero .hero-heading em { color: #d4dcb6; font-style: italic; font-weight: 400; }
.index-page .hero .content-inner p { max-width: 565px; margin: 0 0 32px; color: rgba(246, 248, 229, .89); font-size: 17px; font-weight: 400; line-height: 1.76; }
.index-page .hero .refined-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 54px; padding: 16px 30px; color: #17291e; background: #c4d2af; border: 1px solid #c4d2af; border-radius: 2px; font: 700 12px/1.35 var(--default-font); letter-spacing: .085em; text-transform: uppercase; transition: background-color .2s, border-color .2s, transform .2s; }
.index-page .hero .refined-btn:hover { color: #14251a; background: #e5edce; border-color: #e5edce; transform: translateY(-2px); }
.index-page .hero .refined-btn i { font-size: 16px; }
.index-page .hero .hero-meta { position: absolute; z-index: 2; bottom: 30px; left: 0; right: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 27px; color: #e9edda; font: 500 11px/1.5 var(--default-font); letter-spacing: .1em; text-transform: uppercase; }
.index-page .hero .hero-meta span { display: inline-flex; align-items: center; gap: 9px; }
.index-page .hero .hero-meta i { color: #d1c091; font-size: 14px; }

/* 04 | Approach: warm stone, editorial but grounded */
.index-page .about { padding: 115px 0 110px; background: #f5f3eb; }
.index-page .about .content-block { padding-right: 10px; }
.index-page .about .content-heading { margin: 0 0 28px; color: #1e3227; font: 500 clamp(2.9rem, 4vw, 4.35rem)/1.07 var(--heading-font); letter-spacing: -.045em; }
.index-page .about .content-lead { max-width: 450px; margin: 0 0 20px; color: #526255; font-size: 15px; line-height: 1.9; }
.index-page .about .content-lead:last-child { margin-bottom: 0; }
.index-page .about .gaia-emphasis { color: #376446; font-weight: 700; background: linear-gradient(transparent 75%, rgba(174, 199, 150, .4) 75%); padding-inline: .02em; }
.index-page .about .image-block { width: 100%; overflow: hidden; background: #dce3d5; border: 1px solid #d5dccd; }
.index-page .about .image-block img { width: 100%; height: 478px; max-height: none; object-fit: cover; object-position: center; }
.index-page .about .features-block { padding-left: 26px; border-left: 1px solid var(--gaia-line); }
.index-page .about .feature-entry { margin: 0 0 30px; }
.index-page .about .feature-entry:last-child { margin-bottom: 0; }
.index-page .about .feature-entry i { display: block; margin-bottom: 10px; color: #628363; font-size: 23px; }
.index-page .about .feature-entry h3 { margin: 0 0 8px; color: #253f30; font: 700 15px/1.45 var(--default-font); }
.index-page .about .feature-entry p { margin: 0; color: #647467; font-size: 14px; line-height: 1.76; }

/* 05 | Services: contrasting pine with pale field cards */
.index-page .services { padding: 100px 0 109px; background: radial-gradient(ellipse 75% 110% at 95% 95%, rgba(122, 149, 96, .14) 0%, transparent 65%), linear-gradient(140deg, #1e3629 0%, #152a22 100%); border-top: 1px solid #6d805c; border-bottom: 1px solid #718261; }
.index-page .services .intro-block { width: 100%; padding-bottom: 0; }
.index-page .services .eyebrow { color: #c3cfa7; }
.index-page .services .intro-block h2 { max-width: 860px; margin: 0 auto 20px; color: #f6f6eb; font: 500 clamp(2.8rem, 4.8vw, 4.45rem)/1.1 var(--heading-font); letter-spacing: -.045em; }
.index-page .services .intro-block p { max-width: 650px; margin: 0 auto; color: #c7d5c3; font-size: 15px; line-height: 1.85; }
.index-page .services .services-grid > div { display: flex; }
.index-page .services .item-card { display: flex; flex-direction: column; width: 100%; min-height: 316px; padding: 34px 31px 31px; color: #3e4f43; background: #f9f8f1; border: 1px solid #d6dfc7; border-top: 3px solid #b1c494; box-shadow: 0 13px 40px rgba(6, 22, 13, .13); transition: transform .2s, border-color .2s, box-shadow .2s; }
.index-page .services .item-card:hover { transform: translateY(-3px); border-color: #aec39b; box-shadow: 0 22px 45px rgba(5, 19, 10, .2); }
/* Matched icon frames balance two-line headings and align card descriptions. */
.index-page .services .item-card h3 {
  display: flex;
  align-items: center;
  gap: 19px;
  min-height: 78px;
  margin: 0 0 18px;
  color: #183b29;
  font: 500 clamp(1.36rem, 2vw, 1.85rem)/1.23 var(--heading-font);
  letter-spacing: -.02em;
}
.index-page .services .icon-wrap {
  display: inline-flex;
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  align-items: center;
  justify-content: center;
  border: 1px solid #c4d1b7;
  border-radius: 50%;
  background: #edf1e7;
  line-height: 1;
}
.index-page .services .icon-wrap i { color: #587954; font-size: 32px; line-height: 1; }
.index-page .services .item-card p { margin: 0 0 17px; color: #596b5e; font-size: 13.5px; line-height: 1.85; }
.index-page .services .service-points { margin: auto 0 0; padding: 15px 0 0; list-style: none; border-top: 1px solid rgba(70, 108, 67, .19); }
.index-page .services .service-points li { position: relative; margin: 0 0 8px; padding-left: 17px; color: #526757; font-size: 13px; line-height: 1.65; }
.index-page .services .service-points li:last-child { margin-bottom: 0; }
.index-page .services .service-points li::before { content: ""; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: #78956c; }

/* 06 | Process: one featured image and useful detail */
.index-page #experience { padding: 109px 0 110px; background: #eeeee6; }
.index-page #experience .moment-photo { width: 100%; height: 490px; overflow: hidden; background: #cad1c0; border: 1px solid #d0d5c5; }
.index-page #experience .moment-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .45s; }
.index-page #experience .moment-photo:hover img { transform: scale(1.025); }
.index-page #experience .experience-content { padding-left: 5px; }
.index-page #experience h2 { max-width: 750px; margin: 0 0 18px; color: #183327; font: 500 clamp(2.85rem, 4.55vw, 4.3rem)/1.09 var(--heading-font); letter-spacing: -.045em; }
.index-page #experience .experience-content > p:not(.experience-note) { max-width: 580px; margin: 0; color: #607165; font-size: 15px; line-height: 1.84; }
.index-page #experience .process-grid { margin-top: 25px; }
.index-page #experience .process-grid > div { padding-top: 14px; }
.index-page #experience .process-grid h3 { position: relative; margin: 0 0 9px; color: #2e4c37; font: 700 14px/1.4 var(--default-font); }
.index-page #experience .process-grid h3::before { content: ""; position: absolute; top: -13px; left: 0; width: 29px; height: 1px; background: #8ea276; }
.index-page #experience .process-grid p { margin: 0; color: #6b7a6e; font-size: 13px; line-height: 1.75; }
.index-page #experience .experience-note { display: flex; align-items: flex-start; gap: 9px; max-width: 560px; margin: 26px 0 0; color: #69796d; font-size: 11px; line-height: 1.6; }
.index-page #experience .experience-note i { flex: 0 0 auto; color: #799172; font-size: 15px; }

/* 07 | Inquiry: warm paper form and full-height photograph */
.index-page .contact { padding: 108px 0 114px; background: #f5f4ec; }
.index-page .contact .section-title h2 { color: #223e2d; }
.index-page .contact .section-title p { color: #69766a; }
.index-page .contact .form-wrapper { width: 100%; height: 100%; padding: 38px 40px 32px; background: #fffefa; border: 1px solid #d9dfd2; box-shadow: var(--gaia-shadow); }
.index-page .contact .form-wrapper h3 { margin: 0 0 10px; color: #243e30; font: 500 2.15rem/1.15 var(--heading-font); letter-spacing: -.035em; }
.index-page .contact .form-wrapper > p { max-width: 510px; margin: 0 0 26px; color: #657367; font-size: 14px; line-height: 1.75; }
.index-page .contact .php-email-form .form-group { margin-bottom: 18px; }
.index-page .contact .php-email-form label { display: block; margin: 0 0 7px; color: #4b6250; font: 700 11px/1.45 var(--default-font); letter-spacing: .07em; text-transform: uppercase; }
.index-page .contact .optional { color: #7b8d7c; font-weight: 400; letter-spacing: normal; text-transform: none; }
.index-page .contact .php-email-form .form-control { width: 100%; min-height: 44px; height: auto; padding: 10px 0 12px; color: #253d2d; background-color: transparent; border: 0; border-bottom: 1px solid #bdc9b9; border-radius: 0; box-shadow: none; font-size: 14px; font-weight: 400; line-height: 1.45; transition: border-color .18s, box-shadow .18s; }
.index-page .contact .php-email-form .form-control::placeholder { color: #869689; opacity: 1; }
.index-page .contact .php-email-form .form-control:hover { border-bottom-color: #6f8c70; }
.index-page .contact .php-email-form .form-control:focus { background-color: transparent; border-bottom: 2px solid #557a5e; outline: 0; box-shadow: 0 3px 0 -1px rgba(80, 116, 75, .10); }
.index-page .contact .php-email-form .form-control:focus-visible { outline: 2px solid #90aa88; outline-offset: 2px; }
.index-page .contact .php-email-form select.form-control { min-height: 46px; padding-right: 25px; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 6 4.5 4 4.5-4' fill='none' stroke='%23556e52' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 3px center; background-size: 16px 16px; }
.index-page .contact .php-email-form textarea.form-control { min-height: 115px; padding-top: 12px; resize: vertical; }
.index-page .contact .honeypot { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.index-page .contact .php-email-form { position: relative; }
.index-page .contact .form-response { display: none; margin: 16px 0; padding: 12px 15px; border: 1px solid transparent; font-size: 13px; line-height: 1.6; }
.index-page .contact .form-response.is-visible { display: block; }
.index-page .contact .form-response.is-success { border-color: #b2cbb0; background: #eff7ed; color: #2e6338; }
.index-page .contact .form-response.is-error { border-color: #d5a5a0; background: #fff0ed; color: #8e302b; }
.index-page .contact .php-email-form .form-footer { display: flex; margin-top: 22px; }
.index-page .contact .php-email-form button[type="submit"] { display: inline-flex; justify-content: center; align-items: center; gap: 13px; min-height: 49px; padding: 13px 28px; border: 1px solid #3d654b; border-radius: 2px; background: #3d654b; color: #fffefa; font: 700 12px/1.3 var(--default-font); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s; }
.index-page .contact .php-email-form button[type="submit"]:hover { background: #294932; border-color: #294932; transform: translateY(-1px); }
.index-page .contact .php-email-form button[type="submit"]:disabled { opacity: .6; transform: none; cursor: wait; }
.index-page .contact .form-footnote { margin: 17px 0 0; color: #7d8a7d; font-size: 12px; line-height: 1.6; }
.index-page .contact .form-footnote a { color: #466a4c; font-weight: 700; }
.index-page .contact .form-footnote a:hover { color: #2f4d36; text-decoration: underline; }
.index-page .contact .photo-panel { position: relative; width: 100%; height: 100%; min-height: 690px; overflow: hidden; background: #203d2d; border: 1px solid #d7dbd0; }
.index-page .contact .photo-panel > img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.index-page .contact .photo-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 31, 20, .94) 0%, rgba(14, 37, 25, .45) 34%, transparent 68%); pointer-events: none; }
.index-page .contact .panel-copy { position: absolute; z-index: 1; right: 30px; bottom: 36px; left: 30px; }
.index-page .contact .panel-copy strong { display: block; color: #fffdf3; font: 500 clamp(2rem, 3vw, 2.8rem)/1.16 var(--heading-font); letter-spacing: -.035em; }
.index-page .contact .panel-copy small { display: block; margin-top: 13px; color: #d9e3c7; font-size: 11px; line-height: 1.6; letter-spacing: .04em; }

/* 08 | Compact MetaLumina footer; circle matches navbar */
.index-page .footer { padding: 18px 0; color: #c8d5c6; background: #172b21; border-top: 1px solid rgba(216, 230, 191, .12); font-size: 12px; }
.index-page .footer .footer-main { margin: 0; }
.index-page .footer .brand-section { min-width: 0; }
.index-page .footer .logo { flex-shrink: 0; }
.index-page .footer .logo img { display: block; width: 45px; height: 45px; padding: 6px; border-radius: 50%; object-fit: contain; background: #f3f1e7; border: 1px solid rgba(194, 211, 179, .70); }
.index-page .footer small, .index-page .footer .footer-main span { font-size: 12px; line-height: 1.5; }
.index-page .footer .spectrum-link, .index-page .footer a[href*="farodigitalstudio.com"] { color: #dce7be; font-weight: 600; }
.index-page .footer .spectrum-link:hover, .index-page .footer a[href*="farodigitalstudio.com"]:hover { color: #fffdf0; }
.index-page .footer .social-links a { display: inline-flex; justify-content: center; align-items: center; width: 29px; height: 29px; color: #b9cbb7; transition: transform .18s, color .18s; }
.index-page .footer .social-links a:hover { color: #f3f3d9; transform: translateY(-2px); }

/* 09 | Native scroll top, stable JS states */
.scroll-top { position: fixed; right: 20px; bottom: 20px; z-index: 996; width: 43px; height: 43px; opacity: 0; visibility: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 2px; background: #557557; box-shadow: 0 5px 22px rgba(0, 0, 0, .14); transition: opacity .2s, visibility .2s, background-color .2s; }
.scroll-top i { color: #fff; font-size: 22px; line-height: 0; }
.scroll-top:hover { background: #395841; }
.scroll-top.active { opacity: 1; visibility: visible; }

/* 10 | Responsive adjustments */
@media (max-width: 1199.98px) {
  .index-page .about .features-block { padding-left: 18px; }
  .index-page .contact .photo-panel { min-height: 650px; }
}
@media (max-width: 991.98px) {
  section, .section { padding: 76px 0; }
  .index-page .hero .cinema-frame { min-height: 640px; }
  .index-page .hero .hero-heading { font-size: clamp(3.9rem, 7vw, 5.6rem); }
  .index-page .hero .frame-overlay { background: linear-gradient(96deg, rgba(9, 29, 19, .92) 0%, rgba(10, 32, 22, .75) 53%, rgba(19, 42, 25, .21) 100%); }
  .index-page .about { padding: 80px 0; }
  .index-page .about .image-block img { height: 420px; }
  .index-page .about .features-block { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border-left: none; border-top: 1px solid var(--gaia-line); padding: 27px 0 0; }
  .index-page .about .feature-entry { margin: 0; }
  .index-page .services { padding: 85px 0 91px; }
  .index-page .services .item-card { min-height: 300px; }
  .index-page #experience { padding: 84px 0; }
  .index-page #experience .moment-photo { height: 400px; }
  .index-page .contact { padding: 85px 0 90px; }
  .index-page .contact .photo-panel { min-height: 430px; max-height: 530px; }
}
@media (max-width: 767.98px) {
  section, .section { scroll-margin-top: 70px; }
  .index-page .hero .cinema-frame { height: 100svh; min-height: 640px; }
  .index-page .hero .cinema-frame > img { object-position: 62% center; }
  .index-page .hero .frame-overlay { background: linear-gradient(180deg, rgba(7, 28, 18, .24) 0%, rgba(9, 29, 19, .45) 30%, rgba(8, 26, 17, .86) 70%, rgba(7, 23, 15, .97) 100%); }
  .index-page .hero .frame-content { align-items: flex-end; padding: 95px 0 118px; }
  .index-page .hero .accent-line { margin-bottom: 18px; }
  .index-page .hero .tag-label { font-size: 10px; letter-spacing: .14em; margin-bottom: 16px; }
  .index-page .hero .hero-heading { max-width: 610px; font-size: clamp(3.1rem, 9.4vw, 4.8rem); line-height: 1.06; margin-bottom: 21px; }
  .index-page .hero .content-inner p { max-width: 510px; margin-bottom: 24px; font-size: 15px; line-height: 1.65; }
  .index-page .hero .refined-btn { padding: 14px 24px; min-height: 50px; font-size: 11px; }
  .index-page .hero .hero-meta { bottom: 24px; gap: 7px 17px; font-size: 10px; letter-spacing: .06em; }
  .index-page .about { padding: 76px 0; }
  .index-page .about .image-block img { height: 400px; }
  .index-page .about .features-block { grid-template-columns: 1fr; gap: 24px; }
  .index-page .services { padding: 77px 0 82px; }
  .index-page .services .item-card { min-height: 0; padding: 30px 28px; }
  .index-page .services .item-card h3 { min-height: 0; gap: 16px; font-size: 1.6rem; }
  .index-page .services .icon-wrap { flex-basis: 56px; width: 56px; height: 56px; }
  .index-page .services .icon-wrap i { font-size: 29px; }
  .index-page #experience { padding: 78px 0; }
  .index-page #experience .moment-photo { height: 370px; }
  .index-page .contact { padding: 79px 0 84px; }
  .index-page .contact .form-wrapper { padding: 32px 29px; }
  .index-page .contact .photo-panel { min-height: 440px; max-height: 540px; }
  .index-page .contact .panel-copy { bottom: 30px; left: 27px; right: 27px; }
  .index-page .footer { padding: 18px 0; }
  .index-page .footer .footer-main > .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand social" "spectrum faro"; align-items: center; column-gap: 12px; row-gap: 10px; margin: 0; }
  .index-page .footer .footer-main > .row > div { width: auto; padding: 0; text-align: left !important; }
  .index-page .footer .footer-main > .row > div:nth-child(1) { grid-area: brand; }
  .index-page .footer .footer-main > .row > div:nth-child(2) { grid-area: spectrum; }
  .index-page .footer .footer-main > .row > div:nth-child(3) { grid-area: social; }
  .index-page .footer .footer-main > .row > div:nth-child(4) { grid-area: faro; text-align: right !important; }
  .index-page .footer .social-links { gap: 8px !important; justify-content: flex-end; }
  .index-page .footer .social-links a { width: 28px; height: 29px; }
}
@media (max-width: 575.98px) {
  .index-page .hero .cinema-frame { min-height: 650px; }
  .index-page .hero .hero-heading { font-size: clamp(3rem, 11vw, 3.8rem); }
  .index-page .hero .tag-label { max-width: 260px; }
  .index-page .hero .hero-meta { font-size: 9px; }
  .index-page .about .content-heading { font-size: clamp(2.7rem, 10vw, 3.65rem); }
  .index-page .about .image-block img { height: 370px; }
  .index-page .services .intro-block h2 { font-size: clamp(2.6rem, 9.4vw, 3.5rem); }
  .index-page #experience h2 { font-size: clamp(2.6rem, 9.6vw, 3.55rem); }
  .index-page #experience .moment-photo { height: 340px; }
  .index-page .contact .form-wrapper { padding: 28px 23px; }
  .index-page .contact .form-wrapper h3 { font-size: 1.95rem; }
  .index-page .contact .php-email-form button[type="submit"] { width: 100%; }
  .index-page .contact .photo-panel { min-height: 420px; }
  .index-page .footer small, .index-page .footer .footer-main span { font-size: 11px; }
  .index-page .footer .brand-section { gap: 9px !important; }
  .index-page .footer .logo img { width: 41px; height: 41px; }
  .scroll-top { right: 14px; bottom: 14px; width: 39px; height: 39px; }
}
@media (max-width: 375px) {
  .index-page .hero .hero-heading { font-size: 2.83rem; }
  .index-page .contact .form-wrapper { padding: 24px 19px; }
  .index-page .footer .footer-main > .row { grid-template-areas: "brand faro" "spectrum social"; column-gap: 7px; }
  .index-page .footer .social-links { gap: 5px !important; }
  .index-page .footer .social-links a { width: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .index-page .services .item-card:hover, .index-page #experience .moment-photo:hover img, .index-page .hero .refined-btn:hover { transform: none; }
}