/*
 * Wallpress — architectural gallery design system.
 * Ported from the Lovable build (src/styles.css) without Tailwind.
 *
 * Component rules are nested under the `.wallpress` body class so they win
 * over Elementor's single-class defaults (.e-con, .elementor-button, ...).
 * The same class names are used by the PHP templates and as "CSS Classes"
 * on Elementor containers/widgets in the bundled Elementor templates.
 */

:root {
  --background: #fcfcfa;
  --foreground: #181a32;
  --primary: #181a32;
  --primary-foreground: #fcfcfa;
  --gold: #e3ae3b;
  --ink: #080a22;
  --on-dark: #fcfcfa;
  --subtle: #abaeb6;
  --muted: #f4f3f1;
  --muted-foreground: #63666f;
  --border: #d9dbdf;
  --input: #cfd1d5;
  --accent: #efebe0;
  --font-sans: 'Epilogue', system-ui, sans-serif;
  --font-display: 'Urbanist', system-ui, sans-serif;
  --hero-shade: linear-gradient(90deg, rgb(3 4 19 / 0.79), rgb(3 4 19 / 0.26) 62%, rgb(3 4 19 / 0.06));
  --arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
}

/* ---------- Base (mirrors Tailwind preflight used by the Lovable build) ---------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--border); }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 13px; line-height: 1.8; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
h1, h2, h3, h4, .logo { font-family: var(--font-display); font-weight: 500; line-height: 1.1; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed !important; z-index: 100; top: 8px; left: 8px; width: auto; height: auto; clip: auto; background: var(--gold); color: var(--ink); padding: 10px 16px; }
.text-gold { color: var(--gold); }

.wallpress {
  .wp-wrap { width: min(1280px, calc(100% - 112px)); max-width: none; margin-inline: auto; }

  /* ---------- Buttons ---------- */
  .wp-btn, .wp-btn-gold .elementor-button, .wp-btn-editorial .elementor-button, .wp-btn-ghost .elementor-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; cursor: pointer; transition: color .2s, background-color .2s; text-decoration: none; letter-spacing: 0; box-shadow: none; fill: currentColor;
  }
  .wp-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
  :is(a, button).wp-btn-gold, .wp-btn-gold .elementor-button { background: var(--gold); color: var(--ink); border-radius: 0; height: 46px; padding: 0 24px; font-size: 11px; font-weight: 500; line-height: 1; font-family: var(--font-sans); }
  :is(a, button).wp-btn-gold:hover, .wp-btn-gold .elementor-button:hover { background: color-mix(in oklch, var(--gold) 85%, var(--on-dark)); color: var(--ink); }
  :is(a, button).wp-btn-editorial, .wp-btn-editorial .elementor-button { border-bottom: 1px solid var(--border); border-radius: 0; padding: 0 0 9px; background: transparent; height: auto; font-size: 11px; font-weight: 500; gap: 32px; color: inherit; line-height: 1.4; font-family: var(--font-sans); }
  :is(a, button).wp-btn-editorial:hover, .wp-btn-editorial .elementor-button:hover { color: var(--gold); background: transparent; }
  /* Arrow-up-right glyph (lucide) drawn in CSS so theme and Elementor buttons match. */
  :is(a, button).wp-btn-gold::after, :is(a, button).wp-btn-editorial::after,
  .wp-btn-gold .elementor-button-content-wrapper::after, .wp-btn-editorial .elementor-button-content-wrapper::after {
    content: ''; width: 16px; height: 16px; flex-shrink: 0; background: currentColor; -webkit-mask: var(--arrow-up-right) center / contain no-repeat; mask: var(--arrow-up-right) center / contain no-repeat;
  }
  .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: inherit; }
  .wp-btn-gold .elementor-button-content-wrapper { gap: 8px; }
  .wp-btn-editorial .elementor-button-content-wrapper { gap: 32px; }
  .wp-btn-ghost .elementor-button, :is(a, button).wp-btn-ghost { background: transparent; color: var(--foreground); border-radius: 4px; height: 36px; padding: 0 16px; font-size: 13px; font-weight: 500; line-height: 1; }
  :is(a, button).wp-btn-ghost:hover, .wp-btn-ghost .elementor-button:hover { background: var(--accent); color: var(--foreground); }

  /* ---------- Header ---------- */
  .wp-header { height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; }
  .logo { font-size: 32px; font-weight: 500; display: inline-flex; align-items: center; gap: 3px; }
  .logo-symbol { width: 14px; height: 21px; border: 1px solid var(--gold); display: inline-block; margin-top: -13px; position: relative; }
  .logo-symbol::after { content: ''; position: absolute; width: 10px; height: 17px; border: 1px solid var(--gold); top: 4px; left: 4px; }
  .custom-logo { max-height: 48px; width: auto; }
  .wp-nav ul { list-style: none; margin: 0; padding: 0; display: contents; }
  .wp-nav { display: flex; gap: 32px; align-items: center; }
  .wp-nav a { font-size: 11px; color: var(--muted-foreground); position: relative; }
  .wp-nav a:hover { color: var(--foreground); }
  .wp-nav :is(a.active, .current-menu-item > a, .current_page_item > a) { color: var(--foreground); }
  .wp-nav :is(a.active, .current-menu-item > a, .current_page_item > a)::after { content: ''; height: 2px; width: 16px; background: var(--gold); position: absolute; bottom: -9px; left: 0; }
  .wp-menu { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 4px; }
  .wp-menu:hover { background: var(--accent); }
  .wp-menu svg { width: 20px; height: 20px; }
  .wp-menu .icon-close, .wp-menu[aria-expanded="true"] .icon-open { display: none; }
  .wp-menu[aria-expanded="true"] .icon-close { display: block; }

  /* ---------- Hero ---------- */
  .wp-hero { height: min(680px, calc(100svh - 155px)); min-height: 530px; position: relative; color: var(--on-dark); overflow: hidden; background-size: cover; background-position: center 60%; display: block; padding: 0; }
  .wp-hero { isolation: isolate; }
  .wp-hero > img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
  .wp-hero.wp-hero::before { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; background: var(--hero-shade); opacity: 1; z-index: 0; }
  .wp-hero-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 0 30px; }
  .eyebrow, .eyebrow .elementor-heading-title { font-family: var(--font-sans); font-size: 9px; line-height: 1.8; text-transform: uppercase; letter-spacing: 0; font-weight: 500; display: flex; align-items: center; gap: 12px; }
  .eyebrow .elementor-heading-title::before, p.eyebrow::before, div.eyebrow:not(.elementor-widget)::before { content: ''; width: 24px; height: 1px; background: var(--gold); flex-shrink: 0; }
  .wp-hero .eyebrow { color: var(--gold); }
  .wp-hero h1 { font-size: 76px; max-width: 720px; margin: 26px 0 22px; font-weight: 400; color: var(--on-dark); line-height: 1.1; }
  .wp-hero h1 em { color: var(--gold); font-style: normal; }
  .wp-hero p { max-width: 360px; color: var(--on-dark); opacity: .8; font-size: 12px; line-height: 1.9; margin-bottom: 29px; }
  .wp-hero-bottom { position: absolute; z-index: 2; bottom: 30px; left: 0; right: 0; display: flex; flex-direction: row; justify-content: space-between; font-size: 9px; align-items: center; padding: 0; }
  .wp-hero-bottom p, .wp-hero-bottom > span { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 9px; opacity: 1; max-width: none; }
  .wp-hero-bottom svg { width: 13px; height: 13px; }
  .wp-hero-bottom .photo-caption { opacity: .65; }

  /* ---------- Intro / sections ---------- */
  .wp-intro { display: grid; grid-template-columns: 1fr 1.45fr; gap: 70px; padding-block: 80px; padding-inline: 0; border-bottom: 1px solid var(--border); }
  .wp-intro h2 { font-size: 38px; margin-top: 21px; max-width: 390px; }
  .wp-intro-copy { max-width: 570px; color: var(--muted-foreground); display: block; padding: 0; }
  .wp-intro-copy p { margin: 0 0 22px; }
  .wp-intro-copy h3 { color: var(--foreground); font-size: 24px; margin-bottom: 8px; }
  .wp-section { padding-block: 80px; }
  .section-heading { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 35px; padding: 0; }
  .section-heading h2 { font-size: 44px; margin-top: 16px; }

  /* ---------- Project gallery ---------- */
  .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 24px; padding: 0; }
  .project { display: block; padding: 0; }
  .project.is-hidden { display: none; }
  .project-img { display: block; overflow: hidden; width: 100%; background: var(--muted); padding: 0; border-radius: 0; }
  .project .project-img img { width: 100%; height: auto; aspect-ratio: 1 / 1.12; object-fit: cover; transition: transform .7s; }
  .project:hover .project-img img { transform: scale(1.035); }
  .project-meta { padding-top: 19px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
  .project-meta h3 { font-size: 21px; margin-bottom: 5px; }
  .project-meta p { font-size: 9px; color: var(--muted-foreground); margin: 0; }
  .project-open { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; flex-shrink: 0; }
  .project-open:hover { background: var(--accent); }
  .project-open svg { width: 18px; height: 18px; }
  .wp-note { color: var(--muted-foreground); font-size: 9px; margin-top: 22px; }
  .filter-row { display: flex; flex-direction: row; gap: 12px; margin-bottom: 35px; flex-wrap: wrap; padding: 0; }
  .filter-row :is(.wp-btn-ghost.selected, .selected .elementor-button) { background: var(--primary); color: var(--primary-foreground); }

  /* ---------- Services ---------- */
  .wp-services { background: var(--primary); color: var(--on-dark); }
  .wp-services .eyebrow { color: var(--gold); }
  .wp-services h2, .wp-services h3 { color: var(--on-dark); }
  .wp-services .section-heading p, .wp-services .section-heading .elementor-widget-text-editor { color: var(--subtle); max-width: 335px; font-size: 12px; }
  .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 50px; padding: 0; gap: 0; }
  .service-item { display: block; border-top: 1px solid color-mix(in oklch, var(--on-dark) 20%, transparent); padding: 26px 35px 30px 0; margin-right: 35px; }
  .service-item .service-number { font-size: 11px; color: var(--gold); font-family: var(--font-sans); }
  .service-item h3 { font-size: 23px; margin: 21px 0 15px; }
  .service-item p { font-size: 11px; color: var(--subtle); max-width: 280px; }

  /* ---------- Stats ---------- */
  .wp-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 45px; padding-inline: 0; border-bottom: 1px solid var(--border); }
  .wp-stat { display: flex; flex-direction: row; align-items: center; gap: 18px; justify-content: center; border-right: 1px solid var(--border); }
  .wp-stat:last-child { border: 0; }
  .wp-stat .elementor-widget-container, .wp-stat .elementor-text-editor { display: contents; }
  .wp-stat strong { font-family: var(--font-display); font-size: 45px; font-weight: 400; line-height: 1.1; }
  .wp-stat > span, .wp-stat .stat-label { font-size: 10px; color: var(--muted-foreground); max-width: 100px; line-height: 1.7; }

  /* ---------- Process ---------- */
  .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 55px; margin-top: 45px; padding: 0; }
  .process-step { display: block; border-top: 1px solid var(--border); padding: 24px 0 0; }
  .process-step .process-number { color: var(--gold); font-size: 32px; font-family: var(--font-display); line-height: 1.1; }
  .process-step h3 { font-size: 24px; margin: 18px 0; }
  .process-step p { font-size: 12px; color: var(--muted-foreground); }

  /* ---------- Client feedback ---------- */
  .feedback-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 0 12px; }
  .feedback-card { scroll-snap-align: start; background: var(--muted); padding: 14px; display: block; border-radius: 0; }
  .feedback-card img { width: 100%; height: 340px; object-fit: contain; object-position: center; }
  .feedback-card:hover img { opacity: .92; }

  /* ---------- Founder ---------- */
  .wp-founder { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 70px; align-items: center; padding-block: 80px; padding-inline: 0; border-bottom: 1px solid var(--border); }
  .wp-founder img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
  .wp-founder h2 { font-size: 38px; margin: 21px 0 18px; }
  .wp-founder p { color: var(--muted-foreground); margin-bottom: 18px; max-width: 520px; }

  /* ---------- CTA ---------- */
  .wp-cta { background: var(--muted); text-align: center; padding: 75px 24px; display: flex; flex-direction: column; align-items: center; }
  .wp-cta .eyebrow, .wp-cta .eyebrow .elementor-heading-title { justify-content: center; }
  .wp-cta h2 { font-size: 48px; margin: 22px 0 17px; }
  .wp-cta p { color: var(--muted-foreground); margin-bottom: 26px; }

  /* ---------- Footer ---------- */
  .wp-footer { background: var(--ink); color: var(--on-dark); padding-top: 55px; }
  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.3fr 1.2fr; gap: 40px; padding-bottom: 48px; }
  .footer-grid p, .footer-grid a:not(.logo, .wp-social a) { display: block; font-size: 10px; color: var(--subtle); margin: 8px 0; }
  .footer-grid a:not(.logo, .wp-social a):hover { color: var(--gold); }
  .footer-grid li { list-style: none; }
  .footer-grid h4 { font-family: var(--font-sans); font-size: 10px; font-weight: 500; margin: 10px 0 22px; }
  .footer-grid svg { display: inline; width: 12px; height: 12px; vertical-align: -1px; }
  .footer-bottom { border-top: 1px solid color-mix(in oklch, var(--on-dark) 15%, transparent); display: flex; justify-content: space-between; padding-block: 20px; font-size: 9px; color: var(--subtle); }

  /* ---------- Inner pages ---------- */
  .page-heading { padding-block: 70px 50px; padding-inline: 0; display: block; }
  .page-heading h1 { font-size: 64px; margin: 24px 0; max-width: 900px; }
  .page-heading p { color: var(--muted-foreground); max-width: 580px; }
  .studio-image img, img.studio-image { width: 100%; height: 480px; object-fit: cover; }
  .wp-portfolio { padding-bottom: 80px; }
  .wp-page-content { padding-block: 60px 80px; }
  .wp-page-content > * + * { margin-top: 1.2em; }
  .wp-page-content h2 { font-size: 32px; }
  .wp-page-content a { text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- Contact ---------- */
  .contact-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 70px; padding: 0 0 85px; }
  .contact-details h3 { font-size: 24px; margin: 26px 0 12px; }
  .contact-details h3:first-child { margin-top: 0; }
  .contact-details :is(p, a:not(.wp-btn, .elementor-button, .wp-social a)) { display: block; color: var(--muted-foreground); margin: 6px 0; }
  .contact-details .wp-btn-editorial { margin-top: 20px; }
  .inquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .inquiry-form label { display: flex; flex-direction: column; gap: 8px; font-size: 11px; }
  .inquiry-form :is(input, select, textarea) { width: 100%; border: 1px solid var(--input); padding: 13px 15px; background: var(--background); border-radius: 0; color: var(--foreground); font: inherit; }
  .inquiry-form textarea { min-height: 130px; resize: vertical; }
  .inquiry-form .full { grid-column: 1 / -1; }
  .inquiry-form .form-status { color: var(--muted-foreground); font-size: 11px; margin-top: 12px; }

  /* ---------- Extra buttons ---------- */
  .wp-btn-row { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; }
  .wp-hero .wp-btn-row { gap: 14px; }
  :is(a, button).wp-btn-light { background: transparent; color: var(--on-dark); border: 1px solid rgb(252 252 250 / .7); height: 46px; padding: 0 24px; font-size: 11px; font-weight: 500; line-height: 1; }
  :is(a, button).wp-btn-light:hover { background: var(--on-dark); color: var(--ink); }
  :is(a, button).wp-btn-navy { background: var(--primary); color: var(--primary-foreground); height: 46px; padding: 0 24px; font-size: 11px; font-weight: 500; line-height: 1; }
  :is(a, button).wp-btn-navy:hover { background: var(--gold); color: var(--ink); }
  :is(a, button).wp-btn-light::after, :is(a, button).wp-btn-navy::after { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--arrow-up-right) center / contain no-repeat; mask: var(--arrow-up-right) center / contain no-repeat; }

  /* ---------- Social links ---------- */
  .wp-social { list-style: none; margin: 16px 0 0; padding: 0; display: flex; gap: 8px; }
  .wp-social a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-dark); transition: background-color .2s, color .2s; margin: 0 !important; }
  .wp-social a:hover { background: var(--gold); color: var(--ink); }
  .wp-social svg { width: 15px; height: 15px; }
  .wp-social-light a { background: rgb(252 252 250 / .12); color: var(--on-dark) !important; }
  .wp-hero-bottom .wp-social { margin: 0; }
  .wp-hero-bottom .wp-social a { width: 30px; height: 30px; }

  /* ---------- Smart home ---------- */
  .wp-smart { background: var(--muted); padding-block: 80px; }
  .wp-smart-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
  .wp-smart h2 { font-size: 40px; margin: 18px 0 20px; }
  .wp-smart p { color: var(--muted-foreground); margin-bottom: 16px; }
  .wp-smart .wp-btn { margin-top: 12px; }
  .wp-smart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .wp-smart-grid img { width: 100%; height: 230px; object-fit: cover; }

  /* ---------- Testimonials captions ---------- */
  .feedback-item { margin: 0; scroll-snap-align: start; }
  .feedback-item figcaption { font-family: var(--font-display); font-size: 15px; text-align: center; margin-top: 12px; }
  .feedback-card { width: 100%; }
  .wp-founder .text-gold { color: var(--gold); margin-bottom: 14px; }

  /* ---------- Referral band ---------- */
  .wp-referral { background: var(--primary); color: var(--on-dark); text-align: center; padding: 72px 24px; display: flex; flex-direction: column; align-items: center; }
  .wp-referral .eyebrow { color: var(--gold); justify-content: center; }
  .wp-referral h2 { font-size: 40px; margin: 18px 0 16px; }
  .wp-referral p { color: var(--subtle); max-width: 640px; margin-bottom: 28px; }

  /* ---------- Floating WhatsApp + back to top ---------- */
  .wp-float { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .wp-float a { display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 8px 24px rgb(8 10 34 / .25); }
  .wp-wa { width: 52px; height: 52px; background: #25d366; color: #fff; }
  .wp-wa svg { width: 28px; height: 28px; }
  .wp-top { width: 40px; height: 40px; background: var(--primary); color: var(--on-dark); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .wp-top.is-visible { opacity: 1; pointer-events: auto; }
  .wp-top svg { width: 18px; height: 18px; }

  /* ---------- Lightbox (theme templates; Elementor pages use Elementor's lightbox) ---------- */
  .wp-lightbox { border: 0; padding: 24px; max-width: min(1000px, calc(100% - 32px)); width: 100%; background: var(--background); color: var(--foreground); }
  .wp-lightbox::backdrop { background: rgb(8 10 34 / .8); }
  .wp-lightbox h2 { font-size: 22px; margin-bottom: 6px; padding-right: 40px; }
  .wp-lightbox p { color: var(--muted-foreground); font-size: 12px; margin-bottom: 16px; }
  .wp-lightbox img { width: 100%; max-height: 68vh; object-fit: contain; }
  .wp-lightbox-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
  .wp-lightbox-close svg { width: 18px; height: 18px; }

  /* ---------- Elementor bridge ---------- */
  /* Neutralise Elementor container defaults inside Wallpress sections; layout comes from the classes above. */
  .wp-el, .wp-el .e-con { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --flex-wrap: nowrap; }
  .wp-el .elementor-widget:not(:last-child) { margin-block-end: 0; margin-bottom: 0; }
  .wp-el .elementor-widget-heading .elementor-heading-title { font-family: var(--font-display); color: inherit; line-height: 1.1; }
  .wp-el .elementor-widget-heading.eyebrow .elementor-heading-title { font-family: var(--font-sans); line-height: 1.8; }
  .wp-el .elementor-widget-text-editor { color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; }
  .wp-el .elementor-widget-image img { border-radius: 0; box-shadow: none; }
  .wp-hero .elementor-widget-text-editor p { margin-bottom: 0; }
  .wp-hero .elementor-widget-text-editor { max-width: 360px; color: var(--on-dark); opacity: .8; font-size: 12px; line-height: 1.9; margin-bottom: 29px; }
  .wp-hero-bottom .elementor-widget-text-editor { font-size: 9px; }
  .wp-cta .elementor-widget-text-editor { color: var(--muted-foreground); margin-bottom: 26px; }
  .page-heading .elementor-widget-text-editor { color: var(--muted-foreground); max-width: 580px; }
  .section-heading .elementor-widget-button .elementor-button { margin-bottom: 4px; }
}

@media (min-width: 1600px) { .wallpress .wp-hero { height: 740px; } }

@media (max-width: 1000px) {
  .wallpress {
    .wp-wrap { width: calc(100% - 64px); }
    .wp-nav { gap: 20px; }
    .wp-header > .wp-btn-gold { padding-inline: 16px; }
    .wp-hero h1 { font-size: 64px; }
    .footer-grid { grid-template-columns: 1.5fr 1fr; }
    .contact-layout { gap: 40px; }
    .project-grid { grid-template-columns: repeat(2, 1fr); }
    .wp-founder { gap: 40px; }
    .wp-smart-inner { grid-template-columns: 1fr; gap: 40px; }
    .wp-smart-grid img { height: 260px; }
    .contact-layout { grid-template-columns: 1fr; }
  }
}

@media (max-width: 760px) {
  .wallpress {
    .wp-wrap { width: calc(100% - 40px); }
    .wp-header { height: 76px; }
    .logo { font-size: 29px; }
    .wp-header > .wp-btn-gold { display: none; }
    .wp-menu { display: inline-flex; }
    .wp-nav { display: none; }
    .wp-nav.open { display: flex; position: absolute; z-index: 20; top: 76px; left: -20px; right: -20px; background: var(--background); padding: 25px; flex-direction: column; align-items: flex-start; gap: 22px; border-bottom: 1px solid var(--border); }
    .wp-hero { height: 610px; min-height: 0; max-height: calc(100svh - 115px); }
    .wp-hero h1 { font-size: 48px; margin-top: 24px; }
    .wp-hero p, .wp-hero .elementor-widget-text-editor { max-width: 295px; font-size: 11px; }
    .wp-hero-inner { padding-bottom: 25px; }
    .wp-hero-bottom { bottom: 22px; }
    .photo-caption { max-width: 140px; text-align: right; font-size: 8px; }
    .wp-intro, .wp-founder { grid-template-columns: 1fr; gap: 24px; padding-block: 48px; }
    .wp-intro h2, .wp-founder h2 { font-size: 34px; }
    .wp-section { padding-block: 50px; }
    .section-heading h2 { font-size: 34px; }
    .section-heading { flex-direction: column; align-items: flex-start; }
    .section-heading .wp-btn-editorial, .section-heading .wp-btn-editorial .elementor-button { gap: 10px; margin-top: 20px; }
    .project-grid { grid-template-columns: 1fr; gap: 35px; }
    .project .project-img img { aspect-ratio: 1.15; }
    .service-grid { grid-template-columns: 1fr; margin-top: 25px; }
    .service-item { margin: 0; padding-right: 0; }
    .service-item p { max-width: none; }
    .wp-services .section-heading { gap: 10px; }
    .wp-stat-row { padding-block: 28px; }
    .wp-stat { flex-direction: column; gap: 5px; text-align: center; }
    .wp-stat strong { font-size: 34px; }
    .wp-stat > span, .wp-stat .stat-label { font-size: 9px; }
    .process-grid { grid-template-columns: 1fr; gap: 25px; }
    .feedback-row { grid-auto-columns: 78%; }
    .wp-cta h2 { font-size: 35px; }
    .wp-cta { padding-block: 50px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px; }
    .footer-grid > div:first-child { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; gap: 8px; }
    .page-heading { padding-block: 45px 30px; }
    .page-heading h1 { font-size: 43px; }
    .contact-layout { grid-template-columns: 1fr; gap: 35px; }
    .wp-contact-flip .inquiry-form { order: -1; }
    .wp-smart { padding-block: 48px; }
    .wp-smart-inner { grid-template-columns: 1fr; gap: 32px; }
    .wp-smart h2, .wp-referral h2 { font-size: 30px; }
    .wp-smart-grid { gap: 10px; }
    .wp-smart-grid img { height: 150px; }
    .wp-hero .wp-btn-row { flex-direction: column; align-items: stretch; }
    .wp-referral { padding-block: 48px; }
    .inquiry-form { grid-template-columns: 1fr; gap: 18px; }
    .studio-image img, img.studio-image { height: 300px; }
  }
}

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