/*
Theme Name: MCC – Morgantown Custom Creations
Description: Hello Elementor child theme carrying the full MCC design system (charcoal, green, gold, cream) plus self-hosted brand fonts. Built by Mockup LLC for use with Elementor Free.
Author: Mockup LLC
Author URI: https://mockup.gg
Template: hello-elementor
Version: 1.2.0
Text Domain: mcc
*/

/* ============================================================
   SELF-HOSTED FONTS
   Served from this theme's /fonts/ folder — no Google request,
   no third-party round trip, no FOUT on repeat visits.
   font-display:swap keeps text visible while the file loads;
   the critical faces are preloaded in functions.php so the
   swap happens before first paint in almost all cases.
   ============================================================ */
@font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/playfair-display-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/playfair-display-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/playfair-display-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Playfair Display'; font-style:italic; font-weight:500; font-display:swap;
  src:url('fonts/playfair-display-latin-500-italic.woff2') format('woff2'); }
@font-face{ font-family:'Playfair Display'; font-style:italic; font-weight:600; font-display:swap;
  src:url('fonts/playfair-display-latin-600-italic.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Great Vibes'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/great-vibes-latin-400-normal.woff2') format('woff2'); }

/* Fallback metric matching: keeps the pre-swap layout close to the real fonts
   so the flicker is a color/shape change, not a reflow that shifts the page. */
@font-face{ font-family:'PlayfairFallback'; src:local('Georgia'), local('Times New Roman'), local('serif');
  size-adjust:105%; ascent-override:95%; descent-override:22%; line-gap-override:0%; }
@font-face{ font-family:'InterFallback'; src:local('Helvetica Neue'), local('Arial'), local('sans-serif');
  size-adjust:100%; ascent-override:96%; descent-override:24%; line-gap-override:0%; }


  :root{
    --char:#1d1915; --char-deep:#12100d;
    --green:#2f4a33; --green-deep:#24402c; --olive:#57694c;
    --gold:#c9a05a; --cream:#f3eee2; --cream-alt:#faf7ef;
    --line:#d9d2c0; --ink:#29251d; --muted:#8a8274;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{ font-family:'Inter', 'InterFallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  h1,h2,h3{ font-family:'Playfair Display', 'PlayfairFallback', Georgia, 'Times New Roman', serif; font-weight:600; }
  a{ color:inherit; text-decoration:none; }
  /* Explicit hover/focus/visited colors. Elementor's global kit CSS loads after the
     theme and sets its own a:hover color; these selectors are specific enough to win. */
  a:hover, a:focus, a:active, a:visited{ color:inherit; text-decoration:none; }
  .nav .navlinks a, .nav .navlinks a:visited, .nav .logo, .nav .logo:visited{ color:var(--cream); }
  .nav .navlinks a:hover, .nav .navlinks a:focus{ color:var(--gold); }
  .nav .logo:hover, .nav .logo:focus{ color:var(--cream); }
  .nav .submenu a:hover, .nav .submenu a:focus, .nav .submenu a.active{ color:var(--gold); }
  .nav .btn-gold, .nav .btn-gold:visited, .navlinks a.menu-cta, .navlinks a.menu-cta:visited{ color:var(--char); }
  .nav .btn-gold:hover, .nav .btn-gold:focus, .navlinks a.menu-cta:hover, .navlinks a.menu-cta:focus{ color:var(--char); }
  .footgrid .footcol a, .footgrid .footcol a:visited, .mcc-footcol p a, .mcc-footcol p a:visited{ color:#b0aa97; }
  .footgrid .footcol a:hover, .footgrid .footcol a:focus, .mcc-footcol p a:hover, .mcc-footcol p a:focus{ color:var(--gold); }
  .socials a:hover svg, .socials a:focus svg{ stroke:var(--char-deep); }
  .btn-outline-light:hover, .btn-outline-light:focus{ color:var(--gold); }
  .btn-outline-dark:hover, .btn-outline-dark:focus{ color:var(--cream); }
  .btn-gold:hover, .btn-gold:focus{ color:var(--char); }
  .cap a:hover, .tile a:hover{ color:inherit; }
  .svccard .go:hover, .svccard .go:focus{ color:var(--gold); }
  .infoblock a:hover, .infoblock a:focus{ color:var(--green); }
  .qnavrow a:hover, .qnavrow a:focus{ color:var(--ink); }
  .filters a:hover, .filters a:focus{ color:var(--green); }
  .crumbs a:hover, .crumbs a:focus{ color:var(--gold); }
  img{ max-width:100%; display:block; }
  .script{ font-family:'Great Vibes', cursive; font-weight:400; }
  .eyebrow{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); font-weight:600; }
  .wrap{ max-width:1240px; margin:0 auto; padding:0 40px; }
  section:not([class*="elementor"]){ padding:88px 0; }
  .btn{ display:inline-block; padding:15px 30px; font-size:12px; letter-spacing:.13em; text-transform:uppercase; transition:.2s; }
  .btn-gold{ background:var(--gold); color:var(--char); font-weight:600; }
  .btn-gold:hover{ background:#d8b06a; }
  .btn-outline-light{ border:1px solid rgba(243,238,226,.55); color:var(--cream); }
  .btn-outline-light:hover{ border-color:var(--gold); color:var(--gold); }
  .btn-outline-dark{ border:1px solid var(--ink); color:var(--ink); }
  .btn-outline-dark:hover{ background:var(--ink); color:var(--cream); }
  .sec-head{ text-align:center; margin-bottom:46px; }
  .sec-head .eyebrow{ display:block; margin-bottom:12px; }
  .sec-head h2{ font-size:32px; font-weight:500; }
  .sec-head p{ color:var(--muted); font-size:14px; margin-top:10px; max-width:560px; margin-left:auto; margin-right:auto; line-height:1.7; }
  .cap{ text-align:center; padding:16px 10px 8px; }
  .cap h3{ font-size:11.5px; font-family:'Inter'; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
  .cap p{ font-size:12px; color:var(--muted); margin-top:5px; }
  .cap p .arw{ margin-left:8px; color:var(--gold); }
  .fill{ position:absolute; inset:0; transition:.35s; }

  /* HEADER */
  header, .nav{ color:var(--cream); }
  header{ background:var(--char); }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 40px; max-width:1240px; margin:0 auto; }
  .logo{ display:flex; align-items:center; gap:12px; }
  .logo-mark{ width:42px; height:42px; border:1.5px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display', serif; font-size:12px; }
  .logo-text{ line-height:1.15; }
  .logo-text .top{ font-family:'Playfair Display', serif; font-size:17px; letter-spacing:.05em; border-bottom:1px solid var(--gold); padding-bottom:3px; }
  .logo-text .bottom{ font-size:9px; letter-spacing:.3em; color:var(--gold); padding-top:3px; }
  /* ---- 3-column Elementor header: logo | centered nav | CTA ---- */
  .nav--center{ display:flex; align-items:center; justify-content:center; padding:0; gap:26px; width:100%; max-width:none; }
  .mcc-logo-col{ display:flex; align-items:center; justify-content:flex-start; }
  .mcc-logo-col .elementor-widget-image{ text-align:left; }
  .mcc-nav-col{ display:flex; align-items:center; justify-content:center; }
  .mcc-cta-col{ display:flex; align-items:center; justify-content:flex-end; }
  .mcc-cta-col .nav-cta{ margin-left:0; }
  .mcc-header .elementor-container, .mcc-header .elementor-column, .mcc-header .elementor-widget-wrap{ align-items:center; }

  /* Empty logo slots — drop an <img> in, or use the Elementor Image widget
     in the header/footer templates. Dashed outline only shows while empty. */
  .logo-slot{ display:flex; align-items:center; width:210px; height:52px; flex-shrink:0; }
  .logo-slot:empty, .logo-slot:not(:has(img)){ border:1px dashed rgba(201,160,90,.45); }
  .logo-slot img{ max-height:52px; width:auto; object-fit:contain; }
  .footer-logo-slot{ width:190px; height:48px; margin-bottom:16px; }
  .footer-logo-slot img{ max-height:48px; }
  /* Elementor header/footer templates: logo column holds an Image widget */
  .mcc-logo-col{ display:flex; align-items:center; }
  .mcc-logo-col .elementor-widget-image img{ max-height:52px; width:auto; object-fit:contain; }
  .mcc-footer-logo-col .elementor-widget-image img{ max-height:48px; width:auto; object-fit:contain; margin-bottom:8px; }
  .mcc-nav-col{ display:flex; align-items:center; justify-content:flex-end; }
  .nav--menuonly{ justify-content:flex-end; padding:0; gap:26px; max-width:none; }
  /* Footer columns when built as real Elementor columns */
  .mcc-footcol h4{ color:var(--cream); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; font-weight:600; }
  .mcc-footcol p, .mcc-footcol a{ font-size:12.5px; line-height:2.1; color:#b0aa97; }
  .mcc-footcol a:hover, .mcc-footcol a:focus{ color:var(--gold); }

  .navlinks{ display:flex; gap:32px; align-items:center; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
  /* Top-level items share identical box geometry so the dropdown item
     (wrapped in a div) sits on exactly the same line as the plain links. */
  .navlinks > a, .navlinks > .has-sub > a{
    display:inline-flex; align-items:center; line-height:1; height:20px;
    padding:0 0 6px; border-bottom:1px solid transparent; opacity:.88;
  }
  .navlinks > a.active, .navlinks > .has-sub > a.active{ opacity:1; border-bottom:1px solid var(--gold); }
  .navlinks a:hover{ opacity:1; }
  .navlinks .menu-cta{ display:none; }
  /* Breathing room between the last nav link and the quote button */
  .nav-cta{ margin-left:30px; }
  .nav--menuonly{ gap:34px; }
  /* The CTA must keep button padding — the generic .navlinks > a rule would
     otherwise flatten it into a tiny gold sliver. */
  .navlinks > a.menu-cta, .navlinks > a.btn{
    height:auto; padding:14px 26px; margin-left:10px; border-bottom:none; opacity:1;
    background:var(--gold); color:var(--char); font-weight:600;
  }
  .navlinks > a.menu-cta:hover, .navlinks > a.btn:hover{ background:#D8B06A; color:var(--char); }
  /* Services dropdown */
  .navitem.has-sub{ position:relative; display:inline-flex; align-items:center; }
  .has-sub > a .caret{ font-size:9px; line-height:1; margin-left:6px; color:var(--gold); display:inline-block; position:relative; top:1px; }
  .has-sub::after{ content:''; position:absolute; top:100%; left:0; right:0; height:16px; }
  .submenu{ display:none; position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%); background:var(--char); border:1px solid rgba(201,160,90,.3); min-width:200px; padding:10px 0; z-index:60; box-shadow:0 14px 30px rgba(0,0,0,.35); }
  .has-sub:hover .submenu, .has-sub:focus-within .submenu{ display:block; }
  .submenu a{ display:block; height:auto; line-height:1.4; padding:10px 22px; border-bottom:none; white-space:nowrap; opacity:.88; }
  .submenu a:hover, .submenu a.active{ color:var(--gold); border-bottom:none; }
  /* Hamburger */
  .menu-toggle{ display:none; background:none; border:1px solid rgba(243,238,226,.4); width:42px; height:38px; cursor:pointer; padding:0; align-items:center; justify-content:center; }
  /* Elementor's global button styling colors bare <button> elements (that's the
     pink/red on hover). Pin every state explicitly. */
  .menu-toggle, .menu-toggle:hover, .menu-toggle:focus, .menu-toggle:active, .menu-toggle:visited{
    background:transparent !important; background-color:transparent !important; background-image:none !important;
    color:var(--cream) !important; box-shadow:none !important; outline:none !important; border-radius:0 !important;
  }
  .menu-toggle:hover, .menu-toggle:focus{ border-color:var(--gold) !important; }
  .menu-toggle:hover .bars span, .menu-toggle:focus .bars span{ background:var(--gold); }
  .menu-toggle .bars{ display:flex; flex-direction:column; gap:4px; }
  .menu-toggle .bars span{ width:18px; height:2px; background:var(--cream); transition:.25s; display:block; }
  .menu-toggle[aria-expanded="true"] .bars span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .bars span:nth-child(2){ opacity:0; }
  .menu-toggle[aria-expanded="true"] .bars span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  /* HOME HERO: one large image across, copy overlaid */
  .hero{
    position:relative; min-height:660px; display:flex; align-items:center; padding:0;
    /* Elementor: single full-width background image goes here */
    background:
      radial-gradient(circle at 70% 35%, rgba(201,160,90,.28), transparent 55%),
      repeating-linear-gradient(100deg,#6f4e2d 0 3px,#5c4023 3px 8px,#4a3218 8px 10px),
      linear-gradient(160deg,#6f4e2d,#241a0d);
    background-size:cover; background-position:center;
  }
  .hero::before{
    /* left-to-right dark overlay keeps text readable on any photo */
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(18,16,13,.94) 0%, rgba(18,16,13,.82) 34%, rgba(18,16,13,.25) 62%, rgba(18,16,13,0) 85%);
  }
  .hero-inner{ position:relative; max-width:1240px; margin:0 auto; padding:80px 40px; width:100%; color:var(--cream); }
  .hero-copy{ max-width:470px; }
  .hero-copy .scriptline{ font-size:29px; color:var(--gold); margin-bottom:10px; }
  .hero-copy h1{ font-size:54px; line-height:1.1; font-weight:600; }
  .hero-copy h1 .accent{ font-family:'Great Vibes', cursive; font-weight:400; color:var(--gold); font-size:1.15em; }
  .hero-copy > p{ margin:20px 0 30px; color:#ddd7c8; font-size:15.5px; line-height:1.75; }
  .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
  .chips{ display:flex; gap:26px; margin-top:42px; }
  .chip{ text-align:center; }
  .chip .c{ width:60px; height:60px; border-radius:50%; border:1.5px solid var(--gold); margin:0 auto 10px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .chip:nth-child(1) .c{ background:repeating-linear-gradient(100deg,#8a6540 0 2px,#6b4a2f 2px 6px); }
  .chip:nth-child(2) .c{ background:linear-gradient(150deg,#4b463f,#211d18); }
  .chip:nth-child(3) .c{ background:linear-gradient(150deg,#b8bdb2,#6f766b); }
  .chip:nth-child(4) .c{ background:linear-gradient(150deg,#7a5233,#3f2a15); }
  .chip:nth-child(5) .c{ background:linear-gradient(150deg,#2c2620,#191510); }
  .chip:nth-child(5) .c span{ color:var(--gold); font-size:20px; }
  .chip .lbl{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#ddd7c8; }
  .hero-badge{
    position:absolute; bottom:44px; right:60px; width:150px; height:150px; border-radius:50%;
    background:var(--cream); color:var(--char); display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.4); transform:rotate(-8deg); padding:16px;
  }
  .hero-badge .s1{ font-size:9px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; }
  .hero-badge .s2{ font-size:27px; color:#6f4e2d; line-height:1.1; margin:4px 0 2px; }

  /* SUB-HERO (interior pages) */
  .subhero{ background:var(--char); color:var(--cream); padding:64px 40px 68px; text-align:center; position:relative; overflow:hidden; }
  .subhero::before{ content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse at 78% 60%, rgba(160,110,60,.2), transparent 60%); }
  .subhero .eyebrow{ display:block; margin-bottom:14px; color:var(--gold); position:relative; }
  .subhero h1{ font-size:42px; font-weight:500; position:relative; }
  .subhero h1 em{ font-style:italic; color:var(--gold); }
  .subhero p{ max-width:600px; margin:16px auto 0; color:#ddd7c8; font-size:15px; line-height:1.75; position:relative; }
  .subhero .rule{ width:56px; height:1px; background:var(--gold); margin:26px auto 0; position:relative; }
  .crumbs{ position:relative; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#b0aa97; margin-top:20px; }
  .crumbs a:hover{ color:var(--gold); }

  /* GREEN ACCENT BLOCK */
  .vetstrip{ background:var(--olive); color:var(--cream); }
  .vetrow{ display:flex; align-items:center; justify-content:center; gap:10px; padding:13px 20px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; text-align:center; }
  .vetrow svg{ width:16px; height:16px; flex-shrink:0; stroke:var(--gold); }
  .marquee{ background:var(--green-deep); color:var(--gold); overflow:hidden; }
  .marquee-track{ display:flex; width:max-content; animation:scroll 40s linear infinite; }
  .marquee-track span{ font-family:'Playfair Display', serif; font-style:italic; font-size:17px; padding:16px 0; white-space:nowrap; flex-shrink:0; }
  .marquee-track span::after{ content:'\2726'; margin:0 26px; font-size:11px; color:rgba(201,160,90,.55); font-style:normal; }
  @keyframes scroll{ to{ transform:translateX(calc(-100% / 3)); } }
  @media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; } }

  /* TILE GRIDS */
  .prodgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:1000px; margin:0 auto; }
  .galgrid5{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
  .tile .ph{ aspect-ratio:1/1.05; position:relative; overflow:hidden; }
  .tile:hover .fill{ transform:scale(1.05); }
  .t-wood{ background:repeating-linear-gradient(100deg,#8a6540 0 3px,#7a5233 3px 8px,#6b4a2f 8px 10px), linear-gradient(160deg,#8a6540,#5a3d24); }
  .t-dark{ background:radial-gradient(circle at 40% 30%, #3a352e, #16130f); }
  .t-metal{ background:linear-gradient(150deg,#c8c4ba,#8b877d); }
  .t-walnut{ background:linear-gradient(150deg,#5f4630,#33230f); }
  .t-slate{ background:linear-gradient(150deg,#35302a,#100e0b); }
  .t-green{ background:linear-gradient(150deg,#43604a,#243b29); }
  .allbtn{ text-align:center; margin-top:42px; }

  /* HOW IT WORKS */
  .how{ background:var(--cream-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .steps{ display:flex; align-items:center; justify-content:center; gap:30px; flex-wrap:wrap; }
  .step{ display:flex; align-items:center; gap:14px; }
  .step .n{ width:38px; height:38px; border-radius:50%; background:var(--green); color:var(--cream); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; flex-shrink:0; }
  .step .ic svg{ width:40px; height:40px; stroke:var(--ink); }
  .step .tx h3{ font-size:12px; font-family:'Inter'; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; }
  .step .tx p{ font-size:12.5px; color:var(--muted); line-height:1.55; max-width:170px; }
  .steparrow{ color:var(--gold); font-size:14px; }

  /* WHY STRIP */
  .whyrow{ display:grid; grid-template-columns:repeat(4,1fr); }
  .whyitem{ display:flex; align-items:flex-start; gap:16px; padding:6px 30px; border-right:1px solid var(--line); }
  .whyitem:last-child{ border-right:none; }
  .whyitem svg{ width:34px; height:34px; stroke:var(--green); flex-shrink:0; margin-top:2px; }
  .whyitem h3{ font-size:12px; font-family:'Inter'; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:5px; }
  .whyitem p{ font-size:12.5px; color:var(--muted); line-height:1.6; }

  /* QUOTE CTA BAND */
  .quoteband{ background:var(--green); color:var(--cream); position:relative; overflow:hidden; }
  .quoteband::before{ content:''; position:absolute; inset:0; opacity:.07; pointer-events:none;
    background:repeating-radial-gradient(circle at 88% 30%, transparent 0 40px, var(--cream) 40px 41px); }
  .qgrid{ display:grid; grid-template-columns:1.1fr 1.6fr; gap:56px; align-items:center; position:relative; }
  .qleft .scriptline{ font-size:33px; color:var(--gold); line-height:1.25; margin-bottom:14px; }
  .qleft p{ font-size:13.5px; color:#d6d0c1; line-height:1.75; margin-bottom:24px; max-width:340px; }
  .qleft .fineprint{ font-size:11px; color:#b0aa97; margin-top:14px; }
  .qcols{ display:grid; grid-template-columns:repeat(3,1fr); }
  .qcol{ text-align:center; padding:0 22px; border-left:1px solid rgba(201,160,90,.3); }
  .qcol svg{ width:30px; height:30px; stroke:var(--cream); margin-bottom:12px; }
  .qcol h3{ font-size:11px; font-family:'Inter'; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
  .qcol p{ font-size:12px; color:#c4beab; line-height:1.7; }

  /* REVIEWS */
  .revgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .revcard{ background:#fff; border:1px solid var(--line); padding:30px 28px; }
  .stars{ color:var(--gold); font-size:13px; letter-spacing:3px; margin-bottom:14px; }
  .revcard p{ font-size:13px; line-height:1.8; color:#4a4336; }
  .revcard .who{ margin-top:16px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .revcard .who b{ color:var(--ink); font-weight:600; display:block; letter-spacing:.02em; text-transform:none; font-size:13px; }

  /* FAQ */
  .faq-inner{ max-width:800px; margin:0 auto; padding:0 40px; }
  .qitem{ border-bottom:1px solid var(--line); }
  .qitem summary{ list-style:none; cursor:pointer; padding:19px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:14.5px; font-weight:600; }
  .qitem summary::-webkit-details-marker{ display:none; }
  .qitem .plus{ width:22px; height:22px; border:1px solid var(--green); border-radius:50%; flex-shrink:0; position:relative; }
  .qitem .plus::before, .qitem .plus::after{ content:''; position:absolute; background:var(--green); top:50%; left:50%; transform:translate(-50%,-50%); }
  .qitem .plus::before{ width:10px; height:1.4px; }
  .qitem .plus::after{ width:1.4px; height:10px; transition:.2s; }
  .qitem[open] .plus::after{ height:0; }
  .qitem .a{ padding:0 4px 20px; font-size:13px; color:#544c42; line-height:1.85; max-width:660px; }
  .qitem .a p + p{ margin-top:10px; }
  .sectitle{ display:flex; align-items:baseline; gap:14px; margin:44px 0 14px; }
  .sectitle .num{ font-family:'Playfair Display', serif; font-style:italic; color:var(--gold); font-size:19px; }
  .sectitle h2{ font-size:22px; }
  .qnav{ background:var(--cream-alt); border-bottom:1px solid var(--line); }
  .qnavrow{ display:flex; justify-content:center; overflow-x:auto; max-width:1240px; margin:0 auto; padding:0 40px; }
  .qnavrow a{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:20px; border-bottom:2px solid transparent; white-space:nowrap; }
  .qnavrow a:hover{ color:var(--ink); border-bottom:2px solid var(--gold); }

  /* SERVICE PAGES */
  .svc-intro{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
  .svc-intro .photo{ aspect-ratio:4/3; position:relative; overflow:hidden; }
  .svc-intro h2{ font-size:30px; margin-bottom:18px; }
  .svc-intro h2 em{ font-style:italic; color:var(--green); }
  .svc-intro p{ font-size:14.5px; line-height:1.85; color:#4a4336; margin-bottom:14px; }
  .makegrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .makecard{ background:#fff; border:1px solid var(--line); padding:26px 24px; display:flex; gap:14px; align-items:flex-start; }
  .makecard svg{ width:26px; height:26px; stroke:var(--green); flex-shrink:0; margin-top:2px; }
  .makecard h3{ font-size:13.5px; font-family:'Inter'; font-weight:600; margin-bottom:5px; }
  .makecard p{ font-size:12.5px; color:var(--muted); line-height:1.65; }
  .matstrip{ background:var(--cream-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:40px 0; }
  .matrow{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
  .mat{ border:1px solid var(--green); color:var(--green); padding:9px 20px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; border-radius:30px; }
  .svcgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .svccard{ background:#fff; border:1px solid var(--line); transition:.2s; }
  .svccard:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(41,37,29,.12); }
  .svccard .ph{ aspect-ratio:4/3; position:relative; overflow:hidden; }
  .svccard .meta{ padding:24px 26px 28px; }
  .svccard .meta .eyebrow{ color:var(--gold); font-size:10.5px; }
  .svccard h3{ font-size:20px; margin:8px 0 10px; }
  .svccard p{ font-size:13px; color:var(--muted); line-height:1.7; }
  .svccard .go{ display:inline-block; margin-top:16px; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--green); border-bottom:1px solid var(--gold); padding-bottom:3px; }

  /* GALLERY PAGE */
  .filters{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:40px; }
  .filters a{ border:1px solid var(--line); color:var(--muted); padding:9px 20px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; border-radius:30px; }
  .filters a.on, .filters a:hover{ border-color:var(--green); color:var(--green); }
  .galpage{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
  .galpage .tile .ph{ aspect-ratio:1/1; }

  /* ABOUT PAGE */
  .story-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:center; }
  .story-photo{ aspect-ratio:4/5; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
  .story-photo svg{ width:32%; opacity:.85; position:relative; }
  .story-photo .tag{ position:absolute; bottom:0; left:0; right:0; padding:16px 20px;
    background:linear-gradient(0deg, rgba(18,16,13,.85), transparent); color:var(--cream);
    font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
  .story-copy h2{ font-size:30px; line-height:1.25; margin-bottom:18px; }
  .story-copy h2 em{ font-style:italic; color:var(--green); }
  .story-copy p{ font-size:14.5px; line-height:1.85; color:#4a4336; margin-bottom:14px; }
  .signature{ font-family:'Playfair Display', serif; font-style:italic; font-size:20px; margin-top:20px; }
  .signature span{ display:block; font-family:'Inter'; font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
  .valuegrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; }
  .valuecard{ text-align:center; }
  .valuecard .icon{ width:56px; height:56px; border:1px solid var(--green); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; background:#fff; }
  .valuecard .icon svg{ width:24px; height:24px; stroke:var(--green); }
  .valuecard h3{ font-size:14.5px; font-family:'Inter'; font-weight:600; margin-bottom:8px; }
  .valuecard p{ font-size:12.5px; color:var(--muted); line-height:1.7; }
  .trow{ display:grid; grid-template-columns:110px 1fr; gap:28px; padding:26px 0; border-top:1px solid var(--line); }
  .trow:last-of-type{ border-bottom:1px solid var(--line); }
  .trow .yr{ font-family:'Playfair Display', serif; font-size:21px; font-style:italic; color:var(--green); }
  .trow h3{ font-size:16px; font-family:'Inter'; font-weight:600; margin-bottom:6px; }
  .trow p{ font-size:13px; color:var(--muted); line-height:1.7; max-width:560px; }
  .aboutquote{ background:var(--char); color:var(--cream); text-align:center; }
  .aboutquote blockquote{ font-family:'Playfair Display', serif; font-style:italic; font-size:22px; max-width:660px; margin:0 auto; line-height:1.55; font-weight:500; }
  .aboutquote cite{ display:block; margin-top:18px; font-style:normal; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#b0aa97; }

  /* CONTACT PAGE */
  .cgrid{ display:grid; grid-template-columns:1fr 1.15fr; gap:60px; align-items:start; }
  .infoblock{ display:flex; gap:16px; align-items:flex-start; }
  .infoblock + .infoblock{ margin-top:30px; }
  .infoblock .icon{ width:44px; height:44px; border:1px solid var(--green); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#fff; }
  .infoblock .icon svg{ width:19px; height:19px; stroke:var(--green); }
  .infoblock h3{ font-size:13px; font-family:'Inter'; font-weight:600; letter-spacing:.06em; margin-bottom:4px; text-transform:uppercase; }
  .infoblock p, .infoblock a{ font-size:13.5px; color:#4a4336; line-height:1.7; display:block; }
  .infoblock a:hover{ color:var(--green); }
  .hoursbox{ margin-top:36px; border:1px solid var(--line); padding:24px 26px; background:#fff; }
  .hoursbox h3{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; color:var(--green); font-family:'Inter'; font-weight:600; }
  .hourrow{ display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-bottom:1px solid var(--line); }
  .hourrow:last-child{ border-bottom:none; }
  .hourrow span:last-child{ color:var(--muted); }
  .formcard{ background:#fff; border:1px solid var(--line); padding:40px; }
  .formcard h2{ font-size:23px; margin-bottom:8px; }
  .formcard > p{ font-size:13px; color:var(--muted); margin-bottom:26px; }
  .frow{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .field{ margin-bottom:18px; }
  .field label{ display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
  .field input, .field select, .field textarea{ width:100%; font-family:'Inter'; font-size:14px; padding:12px 14px; border:1px solid var(--line); background:var(--cream); color:var(--ink); }
  .field textarea{ resize:vertical; min-height:120px; }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--green); background:#fff; }
  .submitbtn{ width:100%; background:var(--green); color:var(--cream); border:none; cursor:pointer; padding:16px; font-size:12px; letter-spacing:.13em; text-transform:uppercase; transition:.2s; }
  .submitbtn:hover{ background:var(--gold); color:var(--char); }
  .formnote{ text-align:center; font-size:11.5px; color:var(--muted); margin-top:14px; }
  /* ---- WPForms / CF7 global overrides ----
     WPForms loads its own stylesheet after the theme and colors the submit
     button via its CSS variables, so we set those variables AND provide
     high-specificity fallbacks. !important is used deliberately here: the
     plugin's own rules are more specific than normal theme selectors. */
  .wpforms-container, .wpforms-container-full, div[id^="wpforms-"]{
    --wpforms-button-background-color:#2f4a33;
    --wpforms-button-background-color-alt:#c9a05a;
    --wpforms-button-text-color:#f3eee2;
    --wpforms-button-text-color-alt:#1d1915;
    --wpforms-button-border-radius:0px;
    --wpforms-button-border-color:#2f4a33;
    --wpforms-field-background-color:#f3eee2;
    --wpforms-field-border-color:#d9d2c0;
    --wpforms-field-text-color:#29251d;
    --wpforms-field-border-radius:0px;
    --wpforms-field-border-size:1px;
    --wpforms-label-color:#8a8274;
    --wpforms-label-sublabel-color:#8a8274;
    --wpforms-label-error-color:#a4402f;
  }
  div.wpforms-container .wpforms-form button[type=submit],
  div.wpforms-container-full .wpforms-form button[type=submit],
  div[id^="wpforms-"] .wpforms-form button[type=submit],
  .wpforms-form input[type=submit],
  .wpcf7 input[type=submit], .wpcf7 button[type=submit]{
    background-color:#2f4a33 !important; background-image:none !important; color:#f3eee2 !important;
    border:none !important; border-radius:0 !important; width:100% !important;
    font-family:'Inter', sans-serif !important; font-size:12px !important; font-weight:600 !important;
    letter-spacing:.13em !important; text-transform:uppercase !important; padding:16px !important;
    transition:.2s !important; box-shadow:none !important;
  }
  div.wpforms-container .wpforms-form button[type=submit]:hover,
  div.wpforms-container-full .wpforms-form button[type=submit]:hover,
  div[id^="wpforms-"] .wpforms-form button[type=submit]:hover,
  .wpforms-form input[type=submit]:hover,
  .wpcf7 input[type=submit]:hover, .wpcf7 button[type=submit]:hover{
    background-color:#c9a05a !important; color:#1d1915 !important;
  }
  div.wpforms-container .wpforms-form input[type=text],
  div.wpforms-container .wpforms-form input[type=email],
  div.wpforms-container .wpforms-form input[type=tel],
  div.wpforms-container .wpforms-form select,
  div.wpforms-container .wpforms-form textarea,
  div[id^="wpforms-"] .wpforms-form input[type=text],
  div[id^="wpforms-"] .wpforms-form input[type=email],
  div[id^="wpforms-"] .wpforms-form input[type=tel],
  div[id^="wpforms-"] .wpforms-form select,
  div[id^="wpforms-"] .wpforms-form textarea{
    background-color:#f3eee2 !important; border:1px solid #d9d2c0 !important; border-radius:0 !important;
    color:#29251d !important; font-family:'Inter', sans-serif !important; font-size:14px !important;
    padding:12px 14px !important; box-shadow:none !important;
  }
  div.wpforms-container .wpforms-form input:focus,
  div.wpforms-container .wpforms-form select:focus,
  div.wpforms-container .wpforms-form textarea:focus,
  div[id^="wpforms-"] .wpforms-form input:focus,
  div[id^="wpforms-"] .wpforms-form textarea:focus{
    border-color:#2f4a33 !important; background-color:#fff !important; outline:none !important;
  }
  div.wpforms-container .wpforms-field-label, div[id^="wpforms-"] .wpforms-field-label{
    font-family:'Inter', sans-serif !important; font-size:10.5px !important; font-weight:600 !important;
    letter-spacing:.1em !important; text-transform:uppercase !important; color:#8a8274 !important;
  }

  /* WPForms Lite / Contact Form 7 inside .formcard — inherit MCC styling */
  .formcard .wpforms-container, .formcard .wpforms-form{ margin:0; }
  .formcard .wpforms-field{ padding:0 0 18px; }
  .formcard .wpforms-field-label, .formcard .wpf-label, .formcard label.wpforms-field-label{
    display:block; font-family:'Inter', sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.1em;
    text-transform:uppercase; color:var(--muted); margin-bottom:7px;
  }
  .formcard .wpforms-required-label{ color:var(--gold); }
  .formcard input[type=text], .formcard input[type=email], .formcard input[type=tel],
  .formcard input[type=url], .formcard select, .formcard textarea,
  .formcard .wpforms-field input, .formcard .wpforms-field select, .formcard .wpforms-field textarea{
    width:100%; max-width:100%; font-family:'Inter', sans-serif; font-size:14px; padding:12px 14px;
    border:1px solid var(--line); border-radius:0; background:var(--cream); color:var(--ink); box-shadow:none;
  }
  .formcard textarea, .formcard .wpforms-field textarea{ min-height:120px; resize:vertical; }
  .formcard input:focus, .formcard select:focus, .formcard textarea:focus{
    outline:none; border-color:var(--green); background:#fff; box-shadow:none;
  }
  .formcard .wpforms-field-description, .formcard .wpforms-field-sublabel{
    font-size:11.5px; color:var(--muted); margin-top:6px;
  }
  .formcard .wpforms-submit-container{ padding:0; }
  .formcard button[type=submit], .formcard .wpforms-submit, .formcard input[type=submit],
  .formcard .wpcf7-submit{
    width:100%; background:var(--green); color:var(--cream); border:none; border-radius:0; cursor:pointer;
    padding:16px; font-family:'Inter', sans-serif; font-size:12px; font-weight:600; letter-spacing:.13em;
    text-transform:uppercase; transition:.2s;
  }
  .formcard button[type=submit]:hover, .formcard .wpforms-submit:hover,
  .formcard input[type=submit]:hover, .formcard .wpcf7-submit:hover{ background:var(--gold); color:var(--char); }
  .formcard .wpforms-error, .formcard label.wpforms-error{ color:#a4402f; font-size:11.5px; }
  .formcard .wpforms-confirmation-container-full, .formcard .wpforms-confirmation-container{
    background:var(--cream); border:1px solid var(--green); color:var(--ink); padding:20px 22px; font-size:13.5px;
  }
  .formcard .formhead{ margin-bottom:22px; }
  .formcard .formhead h2{ font-size:23px; margin-bottom:8px; }
  .formcard .formhead p{ font-size:13px; color:var(--muted); }

  .mapstrip{ height:280px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:
      radial-gradient(circle at 30% 40%, rgba(47,74,51,.18), transparent 45%),
      repeating-linear-gradient(0deg, #ece5d3 0 1px, transparent 1px 40px),
      repeating-linear-gradient(90deg, #ece5d3 0 1px, transparent 1px 40px),
      var(--cream-alt);
    display:flex; align-items:center; justify-content:center; }
  .pin{ text-align:center; }
  .pin .dot{ width:46px; height:46px; border-radius:50% 50% 50% 0; background:var(--green); transform:rotate(-45deg); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
  .pin .dot svg{ width:20px; height:20px; transform:rotate(45deg); stroke:var(--cream); }
  .pin .label{ font-family:'Playfair Display', serif; font-style:italic; font-size:17px; }
  .pin .sub{ font-size:11px; color:var(--muted); letter-spacing:.06em; margin-top:4px; }

  /* FOOTER */
  footer{ background:var(--char-deep); color:#b0aa97; padding:54px 40px 24px; }
  .footgrid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr 1fr; max-width:1240px; margin:0 auto; padding-bottom:32px; border-bottom:1px solid rgba(201,160,90,.2); }
  .footcol{ padding:0 30px; border-left:1px solid rgba(201,160,90,.16); }
  .footcol:first-child{ border-left:none; padding-left:0; }
  .footgrid h4{ color:var(--cream); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; font-weight:600; }
  .footgrid p, .footgrid a{ font-size:12.5px; line-height:2.1; color:#b0aa97; }
  .footgrid a:hover{ color:var(--gold); }
  .contactline{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
  .contactline svg{ width:14px; height:14px; stroke:var(--gold); flex-shrink:0; }
  .socials{ display:flex; gap:12px; margin-top:16px; }
  .socials a{ width:34px; height:34px; border:1px solid rgba(201,160,90,.4); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s; }
  .socials a:hover{ background:var(--gold); }
  .socials a:hover svg{ stroke:var(--char-deep); }
  .socials svg{ width:15px; height:15px; stroke:var(--cream); }
  .footbottom{ max-width:1240px; margin:20px auto 0; text-align:center; font-size:11px; color:#8d876f; }

  /* RESPONSIVE: tablet (matches Elementor's default tablet breakpoint) */
  @media(max-width:1024px){
    section:not([class*="elementor"]){ padding:60px 0; }
    .navlinks{ display:none; }
    .navlinks.open{ display:flex; flex-direction:column; align-items:flex-start; position:absolute; top:100%; left:0; right:0; background:var(--char); padding:20px 40px 26px; gap:18px; z-index:50; border-top:1px solid rgba(201,160,90,.25); }
    .nav{ position:relative; }
    .menu-toggle{ display:flex; }
    .nav > .nav-cta{ display:none; }
    .navlinks.open .menu-cta{ display:inline-block; margin-top:4px; }
    .navlinks.open .has-sub{ position:static; display:flex; flex-direction:column; align-items:flex-start; }
    .navlinks.open .has-sub::after{ display:none; }
    .navlinks.open .submenu{ display:block; position:static; transform:none; background:transparent; border:none; box-shadow:none; padding:10px 0 0 16px; min-width:0; }
    .navlinks.open .submenu a{ padding:6px 0; height:auto; }
    .navlinks.open > a, .navlinks.open > .has-sub > a{ height:auto; padding-bottom:2px; }
    .navlinks.open > a.menu-cta, .navlinks.open > a.btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:14px 28px; margin:6px 0 0; width:auto; background:var(--gold); color:var(--char);
    }
    /* 3-column header on small screens: CTA column hides (button is in the menu),
       logo + hamburger stay on one row, hamburger sits at the right edge. */
    .mcc-cta-col{ display:none; }
    .nav--center, .mcc-nav-col{ justify-content:flex-end; }
    .mcc-header .elementor-container{ flex-wrap:nowrap; }
    /* Let the open menu panel span the full header width instead of the nav column */
    .mcc-header .elementor-column.mcc-nav-col, .mcc-header .mcc-nav-col > .elementor-widget-wrap,
    .mcc-header .mcc-nav-col .elementor-widget, .mcc-header .mcc-nav-col .elementor-element-populated,
    .mcc-header .mcc-nav-col .nav--center{ position:static; }
    .mcc-header.elementor-section, .elementor-section.mcc-header{ position:relative; }
    .hero{ min-height:540px; }
    .hero-copy h1{ font-size:42px; }
    .hero-badge{ width:120px; height:120px; right:28px; bottom:28px; }
    .hero-badge .s2{ font-size:21px; }
    .chips{ flex-wrap:wrap; gap:18px; }
    .prodgrid{ grid-template-columns:1fr 1fr; }
    .galgrid5, .galpage{ grid-template-columns:1fr 1fr; }
    .whyrow{ grid-template-columns:1fr 1fr; }
    .whyitem{ border-right:none; padding:14px 10px; }
    .qgrid, .svc-intro, .story-grid, .cgrid{ grid-template-columns:1fr; }
    .qcols{ grid-template-columns:1fr; gap:24px; }
    .qcol{ border-left:none; border-top:1px solid rgba(201,160,90,.3); padding:20px 10px 0; }
    .revgrid, .svcgrid{ grid-template-columns:1fr; }
    .makegrid{ grid-template-columns:1fr 1fr; }
    .valuegrid{ grid-template-columns:1fr 1fr; }
    .footgrid{ grid-template-columns:1fr 1fr; gap:30px; }
    .footcol{ border-left:none; padding:0; }
    .wrap{ padding:0 24px; }
    .subhero h1{ font-size:34px; }
  }
  /* RESPONSIVE: mobile (matches Elementor's default mobile breakpoint of 767px) */
  @media(max-width:767px){
    .prodgrid, .galgrid5, .galpage, .valuegrid, .footgrid, .makegrid{ grid-template-columns:1fr; }
    .steps{ flex-direction:column; align-items:flex-start; }
    .steparrow{ display:none; }
    .frow{ grid-template-columns:1fr; }
    .hero-copy h1{ font-size:36px; }
    .hero-copy .scriptline{ font-size:24px; }
    .hero-inner{ padding:56px 24px 170px; }
    .hero-badge{ width:100px; height:100px; right:20px; bottom:20px; padding:10px; }
    .hero-badge .s1{ font-size:8px; }
    .hero-badge .s2{ font-size:17px; }
    .nav{ padding:14px 20px; }
    .qnavrow{ justify-content:flex-start; }
    .subhero{ padding:46px 24px 50px; }
    .subhero h1{ font-size:30px; }
    .subhero p{ font-size:14px; }
    .trow{ grid-template-columns:1fr; gap:6px; }
    .formcard{ padding:26px 20px; }
    .footgrid{ gap:26px; }
  }
  /* RESPONSIVE: small phones */
  @media(max-width:420px){
    .hero-copy h1{ font-size:32px; }
    .chips{ gap:14px; }
    .chip .c{ width:52px; height:52px; }
  }
