/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ==========================================================================
   Aniuta homepage design system
   Ported from the approved static POC. Scope: content/component styles only.
   Header and footer are styled separately via Astra's own builder settings.
   ========================================================================== */

:root{
  --ink:#232620;
  --bg:#FFFFFF;
  --bg-alt:#EEEEEA;
  --text-secondary:#5C5F51;
  --border:rgba(35,38,32,0.14);
  --accent:#5B6653;
  --accent-ink:#FFFFFF;
}

body, .entry-content{
  font-family:'Assistant', sans-serif;
  color:var(--ink);
}

.btn{
  font-family:'Assistant', sans-serif;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:0.01em;
  padding:1rem 1.75rem;
  border-radius:6px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  border:1px solid var(--ink);
}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.btn.primary svg{width:17px;height:17px;flex-shrink:0;}
.btn.ghost{background:transparent;color:var(--ink);}
.photo, .about-photo{background-size:cover;background-position:center;border-radius:2px;filter:saturate(0.9) contrast(1.04) brightness(1.01);}
.hero-photo{aspect-ratio:4/5;}

/* About / hero */
.about{
  position:relative;
  background:var(--bg-alt);
  padding:5.5rem 2rem 3.5rem;
  margin-top:2rem;
  margin-bottom:7rem;
}
.about-grid{
  display:grid;
  grid-template-columns:minmax(240px,1fr) 560px minmax(240px,1fr);
  gap:2rem;
  align-items:start;
  max-width:1600px;
  margin:0 auto;
}
.about-grid > div:not(.about-photo-wrap){padding-top:0.5rem;}
.about-photo-wrap{
  position:absolute;
  top:-6rem;
  bottom:-6rem;
  left:50%;
  transform:translateX(-50%);
  width:380px;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(32,24,15,0.16);
}
.about-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 15%;
  display:block;
  transition:transform 0.6s ease;
}
.about-photo-wrap:hover .about-photo{transform:scale(1.08);}

.hero-name, .core-services-heading, .service-item h3,
section.split h2, section.process .heading h2, section.testimonial h2,
section.manifesto h2, section.before-after h2{
  font-weight:700;
  letter-spacing:0.06em;
  color:var(--ink);
  margin:0;
  font-size:31px;
  line-height:1.3;
}
.service-item h3{font-size:18px;}
.hero-name{font-size:42px;letter-spacing:0.09em;}
.hero-tagline{font-size:18px;font-weight:700;letter-spacing:0.06em;color:var(--ink);margin:0.5rem 0 2rem;}
.about .lede{font-size:15.5px;line-height:1.75;color:var(--text-secondary);margin:0 0 1.5rem;max-width:58ch;}

section.core-services{padding:1rem 2rem 4rem;text-align:center;border-top:1px solid var(--border);max-width:1180px;margin:0 auto;}
.about-grid .core-services{grid-column:3;}
.core-services-heading{
  font-size:42px;
  font-weight:700;
  letter-spacing:0.09em;
  margin:0 0 0.5rem;
}
.services-grid{display:flex;flex-direction:column;gap:1.5rem;}
.service-item h3{font-size:18px;margin:0 0 0.7rem;}
.service-item p{font-size:15px;line-height:1.7;color:var(--text-secondary);margin:0;}

/* Split (advantage) sections */
section.split{
  display:grid;
  grid-template-columns:3fr 2fr;
  align-items:center;
  border-top:1px solid var(--border);
}
section.split.reverse{grid-template-columns:2fr 3fr;}
section.split.reverse .split-photo-frame{order:2;}
.split-photo-frame{
  position:relative;
  background:var(--bg);
  padding:1.25rem;
}
.split-photo{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  filter:saturate(0.9) contrast(1.04) brightness(1.01);
}
.photo-caption{
  position:absolute;
  bottom:0;
  inset-inline-start:4rem;
  transform:translateY(45%);
  background:var(--bg);
  padding:1.4rem 2.25rem;
  font-weight:700;
  letter-spacing:0.04em;
  font-size:16px;
  color:var(--ink);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:0.75rem;
  white-space:nowrap;
  box-shadow:0 1px 0 var(--border);
}
.photo-caption .sep{color:var(--text-secondary);font-weight:400;letter-spacing:normal;}
.photo-caption.caption-left{inset-inline-start:auto;left:4rem;}
.photo-caption:hover{color:var(--accent);}
.split-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:3rem 2.5rem;
}
.eyebrow{font-size:17px;letter-spacing:0.06em;color:var(--text-secondary);margin:0 0 0.6rem;font-weight:600;}
section.split h2{margin:0 0 0.9rem;text-wrap:balance;}
section.split p:not(.eyebrow){font-size:16px;line-height:1.75;color:var(--text-secondary);margin:0 0 0.75rem;}

/* Process timeline */
section.process{border-top:1px solid var(--border);}
.process-inner{padding:3.25rem 2rem 5rem;max-width:1180px;margin:0 auto;}
section.process .heading{text-align:center;max-width:600px;margin:0 auto 2.25rem;}
section.process .heading h2{margin:0 0 0.6rem;}
section.process .heading p:not(.eyebrow){font-size:16px;color:var(--text-secondary);line-height:1.7;margin:0;}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem 1.5rem;background:var(--bg-alt);padding:2.5rem;}
.step{border-top:2px solid var(--border);padding-top:0.9rem;}
.step .num{font-size:13px;color:var(--accent);font-weight:700;letter-spacing:0.06em;margin:0 0 0.4rem;}
.step .label{font-size:15.5px;font-weight:500;line-height:1.5;}

/* SEO intro line */
.section-intro{border-top:1px solid var(--border);padding:2.5rem 2rem 0.6rem;text-align:center;}
.section-intro h2{
  max-width:560px;margin:0 auto;text-wrap:balance;
  font-size:17px;font-weight:600;letter-spacing:0.06em;
  color:var(--text-secondary);line-height:1.6;
}

/* Manifesto (method statement) */
section.manifesto{max-width:720px;margin:0 auto;padding:2.5rem 2rem 4.5rem;text-align:center;}
section.manifesto .eyebrow{text-align:center;}
section.manifesto h2{margin:0 0 1.5rem;font-size:32px;text-wrap:balance;}
section.manifesto p:not(.eyebrow){font-size:17px;line-height:1.85;color:var(--text-secondary);margin:0 0 1.15rem;}
.manifesto-body{text-align:right;}
.manifesto-body .more{display:none;}
.manifesto-body.expanded .more{display:block;}
.manifesto-body.expanded .toggle{display:none;}
.manifesto-body .toggle{background:none;border:none;font-family:'Assistant',sans-serif;font-size:15px;font-weight:600;color:var(--accent);cursor:pointer;padding:0;}

/* Before / after (custom HTML block) */
section.before-after{
  display:grid;
  grid-template-columns:1fr minmax(320px,540px) 1fr;
  align-items:stretch;
  border-top:1px solid var(--border);
}
.ba-photo{position:relative;margin:0;min-height:560px;overflow:hidden;}
.ba-photo img{position:absolute;top:-12%;left:0;width:100%;height:124%;object-fit:cover;display:block;filter:saturate(0.9) contrast(1.04) brightness(1.01);will-change:transform;}
.ba-photo figcaption{position:absolute;top:1.5rem;inset-inline-start:1.5rem;background:var(--bg);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:0.1em;padding:0.4rem 0.9rem;z-index:1;}
.ba-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 2.5rem;background:var(--bg);}
section.before-after .eyebrow{text-align:center;}
section.before-after h2{margin:0 0 1.25rem;text-wrap:balance;}
.ba-content p:not(.eyebrow){font-size:15.5px;line-height:1.75;color:var(--text-secondary);margin:0 0 1rem;}
.ba-content .btn{margin-top:0.75rem;}
@media (max-width:900px){
  section.before-after{grid-template-columns:1fr;}
  .ba-photo{min-height:340px;}
}

/* Testimonial marquee (custom HTML block) */
section.testimonial{border-top:1px solid var(--border);padding:3.25rem 0 4rem;overflow:hidden;}
.t-head{max-width:1180px;margin:0 auto;padding:0 2rem;}
section.testimonial .t-head h2{margin:0 auto 6rem;}
.t-track{
  direction:ltr;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to left, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(to left, transparent, #000 6%, #000 94%, transparent);
}
.t-track-inner{
  display:flex;
  direction:ltr;
  width:max-content;
  animation:t-scroll 90s linear infinite;
  will-change:transform;
}
.t-track:hover .t-track-inner{animation-play-state:paused;}
@keyframes t-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-2240px);}
}
@media (prefers-reduced-motion: reduce){
  .t-track-inner{animation:none;}
}
.quote-card{width:320px;flex-shrink:0;padding:0 2rem;border-inline-end:1px solid var(--border);direction:rtl;}
.quote-source{display:flex;align-items:center;gap:0.4rem;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:0.85rem;}
.quote-source svg{width:16px;height:16px;flex-shrink:0;}
.quote{font-size:15px;line-height:1.7;color:var(--ink);margin:0 0 1rem;}
.attribution{font-size:13px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;gap:0.5rem;}
.t-date{font-size:12px;font-weight:400;color:var(--text-secondary);}

/* Mobile */
@media (max-width: 760px){
  .about{margin-top:0;padding-top:3rem;}
  .about-grid{grid-template-columns:1fr;}
  .about-grid .core-services{grid-column:auto;}
  .about-photo-wrap{position:static;top:auto;bottom:auto;left:auto;transform:none;width:100%;aspect-ratio:4/5;margin-bottom:1.5rem;}
  .about-photo{height:auto;}
  .services-grid{grid-template-columns:1fr;gap:2rem;}
  .timeline{grid-template-columns:repeat(2,1fr);padding:1.5rem;}
  section.split, section.split.reverse{grid-template-columns:1fr;min-height:auto;}
  section.split.reverse .split-photo-frame{order:0;}
  .split-photo{min-height:280px;}
}

/* ============ Footer (Step 3 - sage green centered footer) ============ */
.site-footer{
  background:var(--accent);
  color:#fff;
}
.site-footer .ast-builder-grid-row-container-inner{
  max-width:1300px;
  margin:0 auto;
}
.site-footer .ast-builder-footer-grid-columns{
  align-items:center;
  padding-bottom:1.75rem;
  margin-bottom:1.25rem;
  border-bottom:1px solid rgba(255,255,255,0.2);
}
.site-footer .site-footer-primary-section-2{
  text-align:center;
}
.site-footer .ast-footer-html-1 p{
  margin:0 0 0.4rem;
}
.site-footer .ast-footer-html-1 a{
  color:#fff !important;
}
.site-footer .ast-footer-html-1 a:hover{
  text-decoration:underline;
}
.site-footer .ast-email.footer-social-item,
.site-footer .ast-phone.footer-social-item{
  display:none;
}
.site-footer .footer-social-inner-wrap{
  display:flex;
  gap:1.1rem;
  justify-content:right;
}
.site-footer .ast-builder-social-element,
.site-footer .ast-builder-social-element svg{
  color:#fff !important;
  fill:#fff !important;
}
.site-footer .ast-builder-social-element{
  opacity:0.85;
  transition:opacity 0.2s ease;
}
.site-footer .ast-builder-social-element:hover{
  opacity:1;
}
.site-footer .ast-builder-social-element svg{
  width:26px;
  height:26px;
}
.site-footer .footer-bar-navigation ul{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  justify-content:left;
  margin:0;
  padding:0;
  list-style:none;
}
.site-footer .footer-bar-navigation .menu-link{
  font-size:12.5px;
  color:rgba(255,255,255,0.7) !important;
  text-decoration:none;
}
.site-footer .footer-bar-navigation .menu-link:hover{
  color:#fff !important;
  text-decoration:underline;
}
.site-footer .ast-footer-copyright p{
  font-size:12.5px !important;
  color:rgba(255,255,255,0.6) !important;
  text-align:center !important;
  margin:0.75rem 0 0 !important;
}
@media (max-width:760px){
  .site-footer .ast-builder-footer-grid-columns{
    text-align:center;
  }
  .site-footer .footer-social-inner-wrap{
    justify-content:center;
  }
  .site-footer .footer-bar-navigation ul{
    justify-content:center;
  }
}

/* ============ Manifesto read-more (native core/details) ============ */
.manifesto-more{
  margin-top:0;
}
.manifesto-more summary{
  cursor:pointer;
  font-family:'Assistant', sans-serif;
  font-size:15px;
  font-weight:600;
  color:var(--accent);
}
.manifesto-more[open] summary{
  margin-bottom:1.15rem;
}

/* ============ Gutenberg Button block fix: target the actual <a>, not just the wrapper div ============ */
.wp-block-button.btn .wp-block-button__link{
  font-family:'Assistant', sans-serif;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:0.01em;
  padding:1rem 1.75rem;
  border-radius:6px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  border:1px solid var(--ink);
}
.wp-block-button.btn.primary .wp-block-button__link{
  background:var(--accent) !important;
  color:var(--accent-ink) !important;
  border-color:var(--accent);
}
.wp-block-button.btn.ghost .wp-block-button__link{
  background:transparent !important;
  color:var(--ink) !important;
}

/* ============ WordPress integration fixes for the About/Hero section ============ */
/* Fix 1: force RTL column order (name/text on the right, services on the left) */
.about-grid{
  direction:rtl;
}
/* Fix 2: give enough top clearance so the floating photo card doesn't collide with the fixed site header */
.about{
  margin-top:8rem;
}
@media (max-width:760px){
  .about{
    margin-top:0;
  }
}

/* ============ Homepage only: break the content out of Astra's boxed container ============ */
/* so the POC's edge-to-edge section backgrounds actually reach the edges of the page. */
body.page-id-19 .ast-container{
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ============ Homepage only: release each top-level section from WordPress's default content-width cap ============ */
body.page-id-19 .entry-content > .about,
body.page-id-19 .entry-content > section.split,
body.page-id-19 .entry-content > .section-intro,
body.page-id-19 .entry-content > section.manifesto,
body.page-id-19 .entry-content > section.process,
body.page-id-19 .entry-content > section.before-after,
body.page-id-19 .entry-content > section.testimonial{
  max-width:100% !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* ============ Homepage only: neutralize Astra's automatic default block padding on top-level Group blocks ============ */
/* Astra injects `.entry-content > .wp-block-group{padding-top/bottom: ...}` (a Customizer default) which was */
/* stacking on top of our own section padding and creating the oversized gaps between sections. */
body.page-id-19 .entry-content > .wp-block-group,
body.page-id-19 .entry-content > .wp-block-cover,
body.page-id-19 .entry-content > .wp-block-columns{
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* ============ Homepage batch fixes ============ */

/* Fix A: the whole site is missing dir="rtl" on <html>, which broke CSS Grid auto-placement */
/* order (about-grid columns, process timeline numbers) and caused bidi punctuation glitches. */
/* Scope the fix to just the homepage content so no other page is touched. */
body.page-id-19 .entry-content{
  direction:rtl;
}

/* Fix B: WordPress's default block-gap adds an unwanted margin-top to every non-first child */
/* inside a flow group block. Our own CSS already controls all spacing explicitly, so remove it. */
body.page-id-19 .wp-block-group.is-layout-flow > *{
  margin-top:0 !important;
}

/* Fix C: the Image block puts our className on the <figure>, not the <img>, so object-fit never */
/* reached the actual image (default object-fit:fill was stretching it and leaving empty space). */
figure.about-photo{
  height:100%;
  margin:0;
}
figure.about-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 15%;
  display:block;
  transition:transform 0.6s ease;
}
figure.split-photo{
  margin:0;
}
figure.split-photo img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  filter:saturate(0.9) contrast(1.04) brightness(1.01);
}

/* Fix D: the Gutenberg Button block's outer wrapper div also carries our "btn" class, so it was */
/* picking up the same border/padding/radius as the inner link, producing a double frame. */
div.wp-block-button.btn{
  border:none !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  display:block !important;
}

/* ============ Fix regression: my own earlier "neutralize Astra default padding" rule ============ */
/* also wiped out OUR intended top/bottom padding on these same top-level sections. Restore it. */
body.page-id-19 .entry-content > .about{
  padding:6.5rem 2rem 4.5rem !important;
}
body.page-id-19 .entry-content > .section-intro{
  padding:3.25rem 2rem 0.6rem !important;
}
body.page-id-19 .entry-content > section.manifesto{
  padding:2.5rem 2rem 4.5rem !important;
}

/* Center the "עוד אודותי" button under the bio text */
.about .wp-block-buttons{
  justify-content:center;
}

/* Split-section photos: a bit smaller, with a visible tinted mat behind them for contrast */
.split-photo-frame{
  background:var(--bg-alt);
  padding:2.75rem;
}

/* ============ "Frame flow" redesign: remove separator lines, frame the before/after photos too ============ */
section.split,
section.process,
section.before-after{
  border-top:none !important;
}

.ba-photo{
  background:var(--bg-alt);
  padding:2.75rem;
  box-sizing:border-box;
  margin:0;
}
.ba-photo-inner{
  position:relative;
  height:100%;
  overflow:hidden;
}
.ba-photo-inner img{
  position:absolute;
  top:-12%;
  left:0;
  width:100%;
  height:124%;
  object-fit:cover;
  display:block;
  filter:saturate(0.9) contrast(1.04) brightness(1.01);
  will-change:transform;
}
.ba-photo-inner figcaption{
  position:absolute;
  top:1.5rem;
  inset-inline-start:1.5rem;
  background:var(--bg);
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.1em;
  padding:0.4rem 0.9rem;
  z-index:1;
}

/* ============ Header CTA button ("דברו איתי") ============ */
.header-cta{
  flex-shrink:0;
  padding:0.6rem 1.4rem;
  font-size:14px;
  border-radius:20px;
}
.btn.primary.header-cta{
  background:var(--accent);
  color:var(--accent-ink);
  border:1.5px solid var(--accent);
}
.btn.primary.header-cta:hover{
  background:var(--bg);
  color:var(--accent);
}
@media (max-width:600px){
  .header-cta{
    padding:0.6rem;
  }
}

/* ============ Regression fix: the full-width content override was also stretching the HEADER's ============ */
/* container edge-to-edge, spreading the logo/menu/button apart. Restore the header's own container. */
body.page-id-19 .site-header .ast-container{
  max-width:1240px !important;
  padding-left:20px !important;
  padding-right:20px !important;
}

/* ============ "לכל הפרויקטים" CTA under core services, balancing "עוד אודותי" ============ */
.core-services .projects-cta{
  justify-content:center;
  margin-top:1.75rem;
}

/* ============ Match the hero-name -> tagline gap to the services-heading -> first-item gap ============ */
.about-grid .hero-name{
  margin:0 0 0.5rem !important;
}

/* ============ Vertically center the footer nav links with the social icons ============ */
.site-footer .site-footer-primary-section-3{
  display:flex;
  align-items:center;
}

/* ============ Header CTA: smaller radius to match the logo's more restrained language ============ */
.header-cta{
  border-radius:6px;
}
.site-footer .site-footer-primary-section-3{ align-items: center !important; }
.site-footer .ast-builder-footer-grid-columns{ align-items: center !important; }

/* ============ Match the gap before the "לכל הפרויקטים" button to the one before "עוד אודותי" ============ */
.core-services .projects-cta{
  margin-top:1.5rem !important;
}

/* ============ Footer copyright: force RTL so the © symbol doesn't get bidi-reordered to the end ============ */
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright p{
  direction:rtl;
  text-align:center !important;
}
body.page-id-19 .about .core-services .projects-cta{ margin-top: 1.5rem !important; }

/* ============ Hover zoom on the split-section photos, matching the about-photo effect ============ */
.split-photo-frame{
  overflow:hidden;
}
figure.split-photo img{
  transition:transform 0.6s ease;
}
.split-photo-frame:hover figure.split-photo img{
  transform:scale(1.08);
}
.split-photo-frame{ overflow: visible !important; } figure.split-photo{ overflow: hidden; }
.site-footer .site-below-footer-wrap{ background: transparent !important; }

/* ==========================================================================
   Aniuta About page design system
   Ported from the approved static POC. Scope: content/component styles only.
   Header and footer are styled separately via Astra's own builder settings.
   ========================================================================== */

@font-face{font-family:'TelAviv Brutalist';font-style:normal;font-weight:300;font-display:swap;src:url('/wp-content/themes/astra-child/fonts/telaviv-brutalistlight.woff2') format('woff2');}
@font-face{font-family:'TelAviv Brutalist';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/themes/astra-child/fonts/telaviv-brutalistregular.woff2') format('woff2');}
@font-face{font-family:'TelAviv Brutalist';font-style:normal;font-weight:700;font-display:swap;src:url('/wp-content/themes/astra-child/fonts/telaviv-brutalistbold.woff2') format('woff2');}

h1, h2, h3{font-family:'TelAviv Brutalist','Assistant',sans-serif !important;font-weight:300 !important;letter-spacing:0;}

.btn-line{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.9rem 0;
  font-family:'Assistant', sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.05em;
  color:var(--ink);
  text-decoration:none;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.btn-line svg{width:13px;height:13px;flex-shrink:0;}

/* ============ About hero ============ */
.about-hero{display:grid;grid-template-columns:420px 1fr;align-items:center;gap:4rem;max-width:1300px;margin:0 auto;padding:5rem 2rem 3.5rem;}
.about-hero-text{order:2;}
.about-hero-photo-wrap{order:1;}
.about-hero-photo{background:var(--bg-alt);aspect-ratio:4/5;position:relative;overflow:hidden;}
.about-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;filter:saturate(0.95) contrast(1.04) brightness(1.02);}
.about-hero-text .eyebrow{text-align:right;}
.about-hero-text h1{font-size:52px;font-weight:400;letter-spacing:0;margin:0 0 1.5rem;text-wrap:balance;}
@media (max-width:600px){.about-hero-text h1{font-size:34px;}}
.about-hero-text p{font-size:17px;line-height:1.75;color:var(--text-secondary);margin:0 0 0.65rem;}
.about-hero-text .lead-line{font-size:19px;line-height:1.6;font-weight:700;color:var(--ink);margin:1.75rem 0 1.85rem;}
.about-hero-text p:last-of-type{margin-bottom:2rem;}

/* ============ Credentials / details ============ */
section.details{position:relative;border-top:1px solid var(--border);isolation:isolate;overflow:hidden;}
section.details::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url('/wp-content/uploads/2026/08/details-bg-colorful-living.jpg');
  background-size:cover;
  background-position:center 35%;
  background-attachment:fixed;
  filter:saturate(1.15) contrast(1.06) brightness(0.98);
}
section.details::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg-alt);opacity:0.04;}
@media (max-width:900px){ section.details::before{background-attachment:scroll;} }
.details-inner{position:relative;max-width:900px;margin:0 auto;padding:4.5rem 2rem;}
.credentials{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);}
.credentials-head{background:var(--bg);padding:1.85rem 2.15rem 1.65rem;}
.credentials-head h2{font-size:32px;margin-bottom:0.65rem;}
.credentials-head p{font-size:17px;line-height:1.7;color:var(--text-secondary);margin:0;}
.credentials-list{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:var(--border);}
.credential-item{background:var(--bg);padding:1.85rem;display:flex;flex-direction:column;justify-content:flex-start;}
.credential-item .tag{display:block;font-size:12.5px;font-weight:700;letter-spacing:0.08em;color:var(--accent);margin-bottom:0.75rem;}
.credential-item h3{font-family:'TelAviv Brutalist','Assistant',sans-serif !important;font-weight:700;letter-spacing:0.02em;font-size:17.5px;margin:0 0 0.5rem;text-wrap:balance;}
.credential-item p{font-size:16px;line-height:1.7;color:var(--text-secondary);margin:0;}
@media (max-width:560px){.credentials-list{grid-template-columns:1fr;grid-template-rows:auto;}}

/* ============ Media feature ============ */
.media-feature{background:var(--bg);padding:2rem 2.5rem 2.5rem;display:flex;flex-direction:column;justify-content:flex-start;text-align:right;}
.media-feature .eyebrow{text-align:right;font-size:12.5px;font-weight:700;letter-spacing:0.06em;color:var(--accent);margin-bottom:0.85rem;}
.media-feature h2{font-family:'TelAviv Brutalist','Assistant',sans-serif !important;font-size:17.5px;font-weight:700;letter-spacing:0.03em;margin:0 0 0.6rem;text-wrap:balance;}
.media-feature p{font-size:16px;line-height:1.7;color:var(--text-secondary);margin:0 0 1.5rem;}

/* ============ FAQ ============ */
section.faq{border-top:1px solid var(--border);background:var(--bg);}
.faq-inner{max-width:820px;margin:0 auto;padding:4.5rem 2rem;}
.faq-head{text-align:right;margin-bottom:2.75rem;}
.faq-head .eyebrow{text-align:right;}
.faq-head h2{font-size:34px;}
.faq-item{border-top:1px solid var(--border);}
.faq-item:last-child{border-bottom:1px solid var(--border);}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.5rem 0;
  font-size:18.5px;
  font-weight:600;
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"";
  flex-shrink:0;
  width:11px;
  height:11px;
  border-inline-end:1.5px solid var(--ink);
  border-block-end:1.5px solid var(--ink);
  transform:rotate(45deg);
  margin-top:-6px;
  transition:transform 0.2s ease;
}
.faq-item[open] summary::after{transform:rotate(225deg);margin-top:4px;}
.faq-item p{font-size:17px;line-height:1.75;color:var(--text-secondary);margin:0 0 1.75rem;}

/* ============ Statement (continues the same fixed background as .details) ============ */
section.statement{position:relative;isolation:isolate;overflow:hidden;color:var(--ink);padding:5rem 2rem 5.5rem;text-align:center;}
section.statement::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url('/wp-content/uploads/2026/08/details-bg-colorful-living.jpg');
  background-size:cover;
  background-position:center 35%;
  background-attachment:fixed;
  filter:saturate(1.15) contrast(1.06) brightness(0.98);
}
section.statement::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg-alt);opacity:0.04;}
@media (max-width:900px){ section.statement::before{background-attachment:scroll;} }
.statement-inner{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);}
.statement-line{background:var(--bg);padding:1.65rem 2.5rem;margin:0;font-size:21px;line-height:1.5;font-weight:700;letter-spacing:0;white-space:nowrap;}
@media (max-width:700px){.statement-line{white-space:normal;font-size:18px;}}

@media (max-width:900px){
  .about-hero{grid-template-columns:1fr;gap:2rem;padding:2.5rem 1.5rem;}
  .about-hero-photo-wrap{width:100%;max-width:340px;margin:0 auto;}
  .about-hero-text{order:2;}
}

/* ============ Scroll reveal ============ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-group.in-view > *{opacity:1;transform:translateY(0);}
.reveal-group > *{opacity:0;transform:translateY(14px);transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal-group.in-view > *:nth-child(1){transition-delay:0.02s;}
.reveal-group.in-view > *:nth-child(2){transition-delay:0.09s;}
.reveal-group.in-view > *:nth-child(3){transition-delay:0.16s;}
.reveal-group.in-view > *:nth-child(4){transition-delay:0.23s;}
.reveal-group.in-view > *:nth-child(5){transition-delay:0.30s;}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-group > *{opacity:1;transform:none;transition:none;}
}

/* ============ About page (id 15) batch fixes, mirroring the homepage's known gotchas ============ */

/* Fix A: the whole site is missing dir="rtl" on <html>, which breaks CSS Grid auto-placement */
/* order (hero photo/text columns) and left-aligns paragraphs instead of right-aligning them. */
/* Scope the fix to just this page's content so no other page is touched. */
body.page-id-15 .entry-content{
  direction:rtl;
}

/* Fix B: break the content out of Astra's boxed container so the full-bleed section */
/* backgrounds (details/faq/statement/testimonial) actually reach the edges of the page. */
body.page-id-15 .site-content .ast-container{
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
body.page-id-15 .entry-content > section.details,
body.page-id-15 .entry-content > section.faq,
body.page-id-15 .entry-content > section.statement,
body.page-id-15 .entry-content > section.testimonial{
  max-width:100% !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Fix C: .media-feature is a flex column with no explicit align-items, so its default */
/* (stretch) was forcing the inline "read the full interview" link to fill the card's full width. */
.media-feature .btn-line{
  align-self:flex-start;
}

/* ============ Homepage batch update: not-bold headings, sharp photo corners, ============ */
/* line-style buttons (matching the About page), and a parallax background on the process steps. */

.hero-name, .core-services-heading{font-weight:400;}

.photo, .about-photo{border-radius:0;}
.about-photo-wrap{border-radius:0;}

/* Line-style buttons, matching the About page's .btn-line, applied to Gutenberg Button blocks too. */
div.wp-block-button.btn-line{
  border:none !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  display:block !important;
}
a.btn-line, a.wp-block-button__link.btn-line{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.9rem 0;
  font-family:'Assistant', sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.05em;
  color:var(--ink);
  text-decoration:none;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:transparent;
}
a.btn-line svg{width:13px;height:13px;flex-shrink:0;}

/* ============ Process steps: fixed parallax background instead of a flat solid block ============ */
.timeline{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  padding:0;
}
.timeline::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url('/wp-content/uploads/2026/08/timeline-bg-nordic.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  filter:saturate(1.1) contrast(1.03);
}
.timeline::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg-alt);opacity:0.18;}
@media (max-width:900px){ .timeline::before{background-attachment:scroll;} }
.step{background:var(--bg);border-top:none;padding:1.75rem 1.5rem;}

/* ============ Fix: timeline gap was 1px, hiding the parallax image almost entirely. ============ */
/* Give the grid real breathing room + outer padding so the image reads as a frame around the cards. */
.timeline{
  gap:1.25rem;
  background:transparent;
  border:none;
  padding:2.5rem;
}
.step{border:1px solid var(--border);}

/* ============ Fix: WordPress/Astra's core button styles were beating our line-button reset ============ */
/* (pill shape, background, border-radius still showing through). Force every visual property explicitly. */
a.wp-block-button__link.btn-line,
a.btn-line{
  background:transparent !important;
  background-color:transparent !important;
  border:none !important;
  border-top:1px solid var(--ink) !important;
  border-bottom:1px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0.9rem 0 !important;
  display:inline-flex !important;
  align-items:center;
  gap:0.5rem;
  font-family:'Assistant', sans-serif;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:0.05em;
  color:var(--ink) !important;
  text-decoration:none !important;
  width:auto !important;
}
a.wp-block-button__link.btn-line:hover,
a.btn-line:hover{
  background:transparent !important;
  color:var(--ink) !important;
}

/* ============ Before/after: remove the tinted-mat frame, restyle the caption ============ */
/* to a minimal bottom-aligned text label (no box), matching the site's other line-style labels. */
.ba-photo{
  background:transparent;
  padding:0;
}
.ba-photo-inner figcaption,
.ba-photo figcaption{
  top:auto;
  bottom:1.5rem;
  inset-inline-start:auto;
  inset-inline-end:1.5rem;
  background:transparent;
  color:var(--ink);
  padding:0;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.1em;
}
.ba-content .btn-line{margin-top:0.75rem;}

/* ============ Manifesto section: pin to the right instead of centering ============ */
section.manifesto{
  margin-inline-start:0;
  margin-inline-end:auto;
  text-align:right;
}
section.manifesto .eyebrow{text-align:right;}

section.manifesto h2{line-height:1.1;}

.about .wp-block-buttons{justify-content:flex-start;}
.core-services .projects-cta{justify-content:flex-start !important;}

.split-photo-link{display:block;text-decoration:none;color:inherit;}

/* ============ Section-intro: pin right and narrow to match the before/after content measure ============ */
.section-intro{
  text-align:right;
  max-width:540px;
  margin-inline-start:auto;
  margin-inline-end:2rem;
}

/* ============ Before/after: remove the separator line above the testimonials section ============ */
section.testimonial{border-top:none;}

/* ============ Before/after captions: sit flush against the image edge, bolder for visibility ============ */
.ba-photo-inner figcaption,
.ba-photo figcaption{
  bottom:0;
  inset-inline-end:0;
  padding:1.25rem 1.5rem;
  font-weight:700;
  font-size:14px;
}

/* ============ Before/after captions: guarantee legibility on any photo with a soft gradient + white text ============ */
.ba-photo-inner{position:relative;}
.ba-photo-inner::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:35%;
  background:linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  pointer-events:none;
}
.ba-photo-inner figcaption,
.ba-photo figcaption{
  color:#fff;
  z-index:1;
}

section.manifesto{max-width:600px;}

/* ============ Split-section photos: match the before/after treatment (no mat, no padding) ============ */
.split-photo-frame{
  background:transparent;
  padding:0;
}

/* ============ Fix: section-intro width override needed !important to beat the earlier full-bleed rule ============ */
body.page-id-19 .entry-content > .section-intro{
  max-width:540px !important;
  margin-inline-start:auto !important;
  margin-inline-end:2rem !important;
  width:auto !important;
}

/* ============ Fix: .split-text is a flex column, stretching the btn-line to full width ============ */
.split-text .btn-line{align-self:flex-start;}

/* ============ Fix: split sections had no gap between them once the mat padding was removed ============ */
section.split{margin-bottom:3rem;}
section.split:last-of-type{margin-bottom:0;}

.section-intro{border-top:none;}

/* ============ Fix: margin-inline-start:auto pins to the LEFT in RTL, not the right. Use margin-inline-end:auto instead. ============ */
body.page-id-19 .entry-content > .section-intro{
  margin-inline-start:0 !important;
  margin-inline-end:auto !important;
}
section.manifesto{
  margin-inline-start:0 !important;
  margin-inline-end:auto !important;
  max-width:440px;
}

body.page-id-19 .entry-content > section.manifesto{
  max-width:440px !important;
  width:auto !important;
  margin-inline-start:0 !important;
  margin-inline-end:auto !important;
}

/* ==========================================================================
   Homepage hero restructure: simplified two-column hero + a lead-in
   heading that flows directly into the existing split sections below.
   Replaces the old three-column .about-grid / .core-services layout.
   ========================================================================== */

.hero2{display:grid;grid-template-columns:1fr 460px;align-items:center;gap:4.5rem;max-width:1280px;margin:0 auto;padding:5rem 2rem 4.5rem;}
.hero2-text{text-align:right;}
.hero2-name{font-size:17px;letter-spacing:0.09em;color:var(--text-secondary);margin:0 0 0.75rem;font-weight:600;}
.hero2-text h1{font-size:38px;margin:0 0 1.5rem;text-wrap:balance;font-weight:700;}
.hero2-text p{font-size:17px;line-height:1.75;color:var(--text-secondary);margin:0 0 1.1rem;max-width:52ch;margin-inline-start:auto;}
.hero2-text .btn-line{margin-top:1.25rem;}
.hero2-photo{aspect-ratio:4/5;overflow:hidden;background:var(--bg-alt);}
.hero2-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
@media (max-width:860px){
  .hero2{grid-template-columns:1fr;gap:2rem;padding:3rem 1.5rem;}
  .hero2-photo{max-width:380px;margin:0 auto;order:-1;}
  .hero2-text p{margin-inline-start:0;max-width:none;}
}

section.services-lead{border-top:1px solid var(--border);padding:4rem 2rem 0;text-align:right;}
.services-lead-inner{max-width:820px;margin:0 auto;}
.services-lead-inner .eyebrow{text-align:right;}
.services-lead-inner h2{font-size:32px;text-wrap:balance;font-weight:700;margin:0;}

/* ============ Fix: margin-inline-start:auto was pushing paragraphs AWAY from the right edge in RTL ============ */
.hero2-text p{margin-inline-start:0 !important;margin-inline-end:auto !important;}

/* ============ Taller photo crop so both shoes/feet show (source is ~2:3, 4:5 was cropping the bottom) ============ */
.hero2-photo{aspect-ratio:2/3;}

/* ============ Services-lead heading text update ============ */

/* ============ Fix: services-lead-inner had a narrower max-width than the hero, ============ */
/* so its centered box didn't line up with the hero's right edge even though text inside was right-aligned. */
.services-lead-inner{max-width:1280px;}

.services-lead-inner h2{font-weight:400;}

/* ============ Hero: same fixed-background parallax technique as the About page, ============ */
/* kept calm and muted (a quiet neutral kitchen, strong scrim) so it frames the portrait without competing with it. */
.hero2{position:relative;isolation:isolate;overflow:hidden;}
.hero2::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url('/wp-content/uploads/2026/08/hero-bg-kitchen.jpg');
  background-size:cover;
  background-position:center 30%;
  background-attachment:fixed;
  filter:saturate(0.7) brightness(1.05);
}
.hero2::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg-alt);opacity:0.78;}
@media (max-width:900px){ .hero2::before{background-attachment:scroll;} }

/* ==========================================================================
   Hero v3: full-bleed composite photo (Anna, cut out, sitting in the sage
   living room) with minimal overlaid text. Replaces the two-column hero.
   ========================================================================== */
body.page-id-19 .ast-container{max-width:100% !important;padding-left:0 !important;padding-right:0 !important;}
body.page-id-19 .entry-content > section.hero3{max-width:100% !important;width:100% !important;margin-left:0 !important;margin-right:0 !important;}

section.hero3{position:relative;width:100%;aspect-ratio:1920/1000;overflow:hidden;background:var(--bg-alt);}
.hero3-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;}
.hero3-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;text-align:right;padding:2rem 6vw;}
.hero3-text .eyebrow{color:var(--ink);font-size:16px;letter-spacing:0.08em;font-weight:600;margin:0 0 0.75rem;}
.hero3-text h1{color:var(--ink);font-size:44px;font-weight:700;margin:0;text-wrap:balance;max-width:14ch;}
@media (max-width:900px){
  section.hero3{aspect-ratio:4/5;}
  .hero3-bg{object-position:top center;}
  .hero3-text{padding:2rem 1.5rem;align-items:flex-end;justify-content:flex-end;padding-bottom:3rem;}
  .hero3-text h1{font-size:30px;}
}

/* ============ Hero v3: split into a parallax background layer + a stable foreground figure ============ */
/* The room scrolls with a fixed-background parallax; Anna's cutout stays put with the text, matching the */
/* exact framing/floor position that already worked in the flattened composite. */
section.hero3::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url('/wp-content/uploads/2026/08/hero-bg-livingroom.webp?v=4');
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}
.hero3-bg{display:none;}
.hero3-figure{
  position:absolute;
  top:9%;
  left:16%;
  height:90%;
  width:auto;
  z-index:1;
  display:block;
}
@media (max-width:900px){
  section.hero3::before{background-attachment:scroll;}
  .hero3-figure{left:8%;height:88%;top:auto;bottom:0;}
}

section.hero3{isolation:isolate;}

/* ============ Hero v3: fixed-background parallax using the original portrait, ============ */
/* text (with a read-more toggle) scrolls normally on top. Replaces the room+cutout composite. */
section.hero3::before{
  background-image:url('/wp-content/uploads/2026/05/anna_leiba_interior_designer.jpeg');
  background-position:center 15%;
}
.hero3-figure{display:none;}

.hero3-more{margin-top:1.5rem;}
.hero3-more summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.05em;
  color:var(--ink);
  padding:0.9rem 0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.hero3-more summary::-webkit-details-marker{display:none;}
.hero3-more summary::after{
  content:"";
  width:11px;
  height:11px;
  border-inline-end:1.5px solid var(--ink);
  border-block-end:1.5px solid var(--ink);
  transform:rotate(45deg);
  margin-top:-4px;
  transition:transform 0.2s ease;
}
.hero3-more[open] summary::after{transform:rotate(225deg);margin-top:4px;}
.hero3-more p{margin:1rem 0 0;font-size:15.5px;line-height:1.75;color:var(--ink);max-width:34ch;margin-inline-start:auto;}

section.hero3::before{background-position:center 38%;}

/* ============ Fix: the hero band was too wide/short relative to the portrait source, ============ */
/* forcing a severe crop (only ~35% of the photo's height was ever visible). Make the band taller ============ */
/* so most of the room actually shows. */
section.hero3{aspect-ratio:3/2;}
section.hero3::before{background-position:center 30%;}

/* ============ Switch back to the dedicated wide room photo (matches the reference framing closely, ============ */
/* almost no crop needed since its own aspect ratio is already ~3:2), with Anna's cutout stable on top. */
section.hero3::before{
  background-image:url('/wp-content/uploads/2026/08/hero-bg-livingroom.webp?v=4');
  background-position:center center;
}
.hero3-figure{
  display:block;
  position:absolute;
  bottom:2%;
  left:16%;
  top:auto;
  height:85%;
  width:auto;
  z-index:1;
}
@media (max-width:900px){
  .hero3-figure{left:8%;height:75%;bottom:0;}
}

/* ============ Hero v4: single flat photo (room + Anna shot together), no separate cutout layer. ============ */
/* Text moves to the top-left empty area over the curtains, matching her reference layout, instead of */
/* vertically centered over the whole frame. */
section.hero3{aspect-ratio:1140/505;}
section.hero3::before{
  background-image:url('/wp-content/uploads/2026/08/hero-new-composite.jpg');
  background-position:center center;
}
.hero3-figure{display:none;}
.hero3-text{justify-content:flex-start;padding-top:5vw;}
@media (max-width:900px){
  section.hero3{aspect-ratio:4/5;}
  section.hero3::before{background-position:top center;}
  .hero3-text{justify-content:flex-start;padding-top:2rem;}
}

/* ============ Hero v5: rebuilt from the two clean source layers (room-only + cutout) at native ============ */
/* resolution (1672x941) instead of her flattened low-res export, to fix the upscale blur. */
section.hero3{aspect-ratio:1672/941;}
section.hero3::before{
  background-image:url('/wp-content/uploads/2026/08/hero-composite-hires.jpg');
  background-position:center center;
}
.hero3-text{padding-top:6vw;}
@media (max-width:900px){
  section.hero3{aspect-ratio:4/5;}
  section.hero3::before{background-position:top center;}
  .hero3-text{padding-top:2rem;}
}

@media (max-width:900px){
  section.hero3::before{background-position:78% center;}
}

/* ============ Hero v6: grounded figure (stool touches floor), smaller/proportional scale, ============ */
/* shorter frame (cropped from the top), text shifted right-of-left toward the middle and right-aligned. */
section.hero3{aspect-ratio:1672/828;}
section.hero3::before{
  background-image:url('/wp-content/uploads/2026/08/hero-composite-v2.jpg');
  background-position:center bottom;
}
.hero3-text{align-items:flex-start;padding-right:44vw;padding-left:2vw;}
.hero3-text h1{font-weight:400;white-space:nowrap;max-width:none;}
@media (max-width:900px){
  section.hero3{aspect-ratio:4/5;}
  section.hero3::before{background-position:75% bottom;}
  .hero3-text{align-items:flex-start;padding-right:1.5rem;padding-left:1.5rem;}
  .hero3-text h1{white-space:normal;max-width:14ch;}
}

@media (max-width:900px){
  .hero3-text{align-items:flex-end;padding-right:1.5rem;padding-left:1.5rem;}
}

section.hero3::before{
  background-image:url('/wp-content/uploads/2026/08/hero-composite-v3.jpg');
}
.hero3-text{padding-right:60vw;}

section.hero3::before{
  background-image:url('/wp-content/uploads/2026/08/hero-composite-v4.jpg');
}
.hero3-text h1{font-size:52px;}
@media (max-width:900px){
  .hero3-text h1{font-size:34px;}
}

section.hero3::before{
  background-image:url('/wp-content/uploads/2026/08/hero-composite-v5.jpg');
}
.hero3-text .hero3-bio{margin:1.25rem 0 0;font-size:15.5px;line-height:1.75;color:var(--ink);max-width:34ch;}
.hero3-text .btn-line{margin-top:1.5rem;}
@media (max-width:900px){
  .hero3-text .hero3-bio{font-size:14.5px;max-width:30ch;}
}

@media (max-width:900px){
  section.hero3{aspect-ratio:3/5;}
}

section.hero3::before{
  background-image:url('/wp-content/uploads/2026/08/hero-bg-livingroom.webp?v=4');
}
.hero3-text .hero3-bio{font-size:17.5px;}
@media (max-width:900px){
  .hero3-text .hero3-bio{font-size:16px;}
}

@media (max-width:900px){
  section.hero3{aspect-ratio:3/6;}
}

img.wp-image-4184{aspect-ratio:1/1 !important;object-fit:cover;}

/* ============ The new "after" photo is a much wider shot (1.74:1) than the old one, so the fixed ============ */
/* 560px box was cropping ~43% of its width away. Shorter box brings both photos to a reasonable crop. */
.ba-photo{min-height:480px;}
@media (max-width:900px){
  .ba-photo{min-height:300px;}
}

body.page-id-19 .entry-content h2{font-weight:400;}

/* ============ Dropped the scroll-parallax on the before/after photos; they no longer need the ============ */
/* 124%/-12% oversize buffer that was reserved for that motion, so this shows more of each photo. */
.ba-photo-inner img{top:0;height:100%;}

/* ============ Astra's default active-menu-item style bumps the font size; swap that for a ============ */
/* same-size label with an underline instead, matching the site's line-based emphasis elsewhere. */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link{
  font-size:16px !important;
  border-bottom:2px solid var(--ink);
  padding-bottom:4px;
}

/* ============ Fix: border-bottom+padding shifted the text upward (asymmetric box height inside the ============ */
/* flex-centered nav item), and Astra's own ::before indicator was adding a second faint line lower down. */
/* box-shadow paints the underline without touching layout/centering, and the ::before is killed outright. */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link{
  font-size:16px !important;
  border-bottom:none !important;
  padding-bottom:0 !important;
  box-shadow:0 2px 0 0 var(--ink);
}
.main-header-menu .current-menu-item > .menu-link::before,
.main-header-menu .current_page_item > .menu-link::before{
  display:none !important;
}

/* ============ Astra already ships an underline effect (ast-menu-hover-style-underline) but it only ============ */
/* triggers on :hover via a ::before pseudo-element. Reuse that exact element for the current-page state */
/* instead of a separate custom line, so hovering the active tab doesn't stack a second line on top. */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link{
  font-size:16px !important;
  border-bottom:none !important;
  padding-bottom:0 !important;
  box-shadow:none !important;
}
.ast-desktop .main-header-menu .current-menu-item > .menu-link::before,
.ast-desktop .main-header-menu .current_page_item > .menu-link::before{
  display:block !important;
  width:calc(100% - 1.2em);
  background-color:currentColor;
  transform:scale(1,1) translate(50%,0);
}

/* ============ The header's right zone (nav + CTA button) was packed flush to one edge, leaving a big ============ */
/* empty gap next to the logo. Centering it balances the gap on both sides instead. */
.site-header-primary-section-right{justify-content:center;}

/* ============ Unify all 4 split-section photos to the proportions of the new "projects" photo ============ */
/* (1664x1120, ~1.486:1) instead of the old mixed 16:9 / 1.45 / 1:1 ratios. */
figure.split-photo img{aspect-ratio:1664/1120 !important;}
img.wp-image-4184{aspect-ratio:1664/1120 !important;object-fit:cover;}

/* ============ Swapped the active-tab underline for a color change instead: it kept sitting away from ============ */
/* the text on the About page's header (different builder instance there), so a color match to the logo's */
/* sage green sidesteps the positioning problem entirely. */
.ast-desktop .main-header-menu .current-menu-item > .menu-link::before,
.ast-desktop .main-header-menu .current_page_item > .menu-link::before{
  display:none !important;
}
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link{
  font-size:16px !important;
  border-bottom:none !important;
  padding-bottom:0 !important;
  box-shadow:none !important;
  color:var(--accent) !important;
}

/* ============ Final approach: Astra's ::before underline sits at the bottom of the link's tall ============ */
/* line-height box (80px), far below the vertically-centered text -- repositioning it precisely proved */
/* fragile across pages/hover states. A background pill sidesteps the problem: it fills the box the text */
/* already sits in, so it's always aligned with the word with no separate line to position. */
.ast-desktop .main-header-menu > .menu-item > .menu-link::before{
  display:none !important;
}
.main-header-menu > .menu-item > .menu-link{
  border-radius:6px;
  transition:background-color 0.2s ease, color 0.2s ease;
}
.main-header-menu > .menu-item:hover > .menu-link{
  background-color:rgba(91,102,83,0.1);
}
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link{
  font-size:16px !important;
  border-bottom:none !important;
  padding-bottom:0 !important;
  box-shadow:none !important;
  background-color:var(--accent) !important;
  color:var(--accent-ink, #fff) !important;
}
.main-header-menu .current-menu-item:hover > .menu-link,
.main-header-menu .current_page_item:hover > .menu-link{
  background-color:var(--accent) !important;
}

/* ============ Switched from a filled pill to a thin text-decoration underline, per reference image. ============ */
/* text-decoration draws relative to the text baseline itself, not the link's 80px line-height box, so it */
/* sits right under the word regardless of the box height quirk that broke border/pseudo-element attempts. */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link{
  font-size:16px !important;
  border-bottom:none !important;
  box-shadow:none !important;
  background-color:transparent !important;
  color:inherit !important;
  border-radius:0;
  text-decoration-line:underline !important;
  text-decoration-color:currentColor !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:4px !important;
}
.main-header-menu .current-menu-item:hover > .menu-link,
.main-header-menu .current_page_item:hover > .menu-link{
  background-color:transparent !important;
}

/* ============ Astra bumps the current-menu-item to font-weight:500 by default; that's what was ============ */
/* nudging the glyph rendering ~1.5px up compared to the regular-weight siblings. */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link{
  font-weight:400 !important;
}

.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link{
  align-self:stretch !important;
}

.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link{
  height:100% !important;
}

/* ============ The real culprit: WordPress's separate "Additional CSS" customizer field has a legacy ============ */
/* rule (.current-menu-item a { margin-bottom:3px !important }) from the original theme setup, unrelated */
/* to anything in this file. That margin shrinks the flex-stretched link by 3px, pushing the text up. */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link{
  margin-bottom:0 !important;
}

/* ============ Footer: merge the copyright line and the email/phone line (previously two stacked <p> ============ */
/* tags from separate widgets) into one row, and tighten the padding so the whole footer is more compact. */
.site-footer .ast-builder-footer-grid-columns{
  padding-bottom:1.1rem;
  margin-bottom:0.75rem;
}
.site-footer .site-footer-primary-section-2{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  justify-content:center;
  flex-wrap:nowrap;
  gap:0.6em;
  white-space:nowrap;
}
.site-footer .ast-footer-copyright p{
  margin:0 !important;
  font-size:12.5px !important;
}
.site-footer .ast-footer-copyright p *{
  background:transparent !important;
  font-size:12.5px !important;
}
.site-footer .ast-footer-html-1{
  border-inline-start:1px solid rgba(255,255,255,0.3);
  padding-inline-start:0.6em;
}
.site-footer .ast-footer-html-1 p{
  margin:0 !important;
  font-size:12.5px !important;
  white-space:nowrap;
}
@media (max-width:760px){
  .site-footer .site-footer-primary-section-2{
    flex-direction:column;
    white-space:normal;
    gap:0.3rem;
  }
  .site-footer .ast-footer-html-1{
    border-inline-start:none;
    padding-inline-start:0;
  }
}

@media (max-width:900px){
  .hero3-text .hero3-bio{max-width:19ch;font-size:14px;}
}

/* ============ An earlier desktop-only rule (padding-right:60vw, meant to shift the heading over the ============ */
/* curtain on wide screens) was never scoped to a media query, so it was also winning on mobile at 225px, ============ */
/* pushing the bio text right into the photo. Force the correct mobile value back. ============ */
@media (max-width:900px){
  .hero3-text{padding-right:1.5rem !important;}
  .hero3-text .hero3-bio{max-width:22ch;font-size:14px;}
}

/* ============ CSS Grid items default to min-width:auto, so they refuse to shrink below their content's ============ */
/* natural size. The split-section images (1664px native) were forcing the grid track wider than the ============ */
/* viewport on mobile, pushing the text column off-screen on both edges. min-width:0 lets them shrink properly. */
section.split > *,
section.split.reverse > *{
  min-width:0;
}

@media (max-width:900px){
  section.hero3::before{background-position:55% bottom;}
}

@media (max-width:900px){
  section.hero3{aspect-ratio:3/4;}
  section.hero3::before{background-position:72% bottom;}
}

@media (max-width:900px){
  .split-text{padding:2rem 1.25rem;}
}

/* ============ The earlier desktop nav-centering fix (justify-content:center on the header's right zone) ============ */
/* had no media-query boundary, so on mobile it also centered the hamburger button instead of pinning it ============ */
/* to the edge where the nav+CTA used to sit. */
@media (max-width:900px){
  .site-header-primary-section-right{justify-content:flex-end;}
}

/* ============ Astra's "Transparent Header" variant (active on mobile per site settings) renders the ============ */
/* custom logo image inside a flex zone that was collapsing to 0 width -- the same min-width:auto flex/grid ============ */
/* issue hit earlier with the split-section images. Force it to keep its natural size, and hide the ============ */
/* separate default Site-Identity logo so only the intended custom image shows. */
.ast-header-html-1{
  flex-shrink:0 !important;
  min-width:-webkit-max-content !important;
  min-width:max-content !important;
}
.ast-header-html-1 img.wp-image-5310{
  width:150px !important;
  height:auto !important;
  max-height:none !important;
}
.site-branding.ast-site-identity{
  display:none !important;
}

/* ============ Astra's own inline CSS force-fits the logo into a 44x44 square (fine for the old circular ============ */
/* badge, wrong for the new wide wordmark). Widen the slot and let height follow proportionally. ============ */
.custom-logo-link img,
.custom-logo{
  width:130px !important;
  max-width:130px !important;
  height:auto !important;
}
@media (max-width:900px){
  .custom-logo-link img,
  .custom-logo{
    width:95px !important;
    max-width:95px !important;
  }
}

/* ============ Reverting the earlier hide: going with the file-replacement fix for the logo instead, ============ */
/* so the default Site-Identity logo needs to stay visible again. */
.site-branding.ast-site-identity{
  display:flex !important;
}

@media (max-width:900px){
  .hero3-text .hero3-bio{max-width:17ch;}
}

@media (max-width:900px){
  section.hero3::before{background-position:8% bottom;}
}

@media (max-width:900px){
  .hero3-text{padding-left:6.5rem;}
}

@media (max-width:900px){
  section.hero3{aspect-ratio:3/4.5;}
  section.hero3::before{background-position:10% bottom;}
  .hero3-text .hero3-bio{max-width:20ch;}
}

/* ============ Switching the mobile hero text's anchor from left to right: eyebrow/h1/bio boxes are ============ */
/* different widths, so left-anchoring made their right-aligned text start at different x positions. ============ */
/* Right-anchoring makes every line's start point match exactly, and also shifts the block further right. */
@media (max-width:900px){
  .hero3-text{align-items:flex-start !important; padding-left:1.5rem !important; padding-right:4rem !important;}
}

@media (max-width:900px){
  .services-lead-heading .lead-sep{display:none;}
  .services-lead-heading .lead-part{display:block;}
}

section.hero3::before{
  background-image:url('/wp-content/uploads/2026/08/hero-bg-livingroom.webp?v=4');
}