/*
Theme Name:   Gul Business Development Child
Theme URI:    https://gulbusinessdevelopment.com
Description:  Child theme for Gul Business Development — "Formulation" concept. Built on GeneratePress.
Author:       Gul Business Development
Template:     generatepress
Version:      2.6.0
Text Domain:  gul-child
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* ----------------------------------------------------------------
     BRAND PALETTE — sampled directly from the Gul logo.
     Logo navy = #043C86, logo red = #BB2727, logo background = #FFFFFF.

     The variable NAMES are kept from v1 (--gul, --rice, --ubtan …) so that
     nothing in the 19 template files breaks. Only the VALUES changed.
     What each one now means:
       --rice     white paper base        (was warm cream)
       --gul      logo red, the ONE action colour — buttons, links, accents
       --ubtan    logo navy, small doses  — focus rings, icon strokes, badges
       --charcoal deep navy-black         — body text and dark sections
       --coffee   slate                   — muted/secondary text
       --line     cool hairline grey
       --mist     light blue-grey panel background (NEW — needed because the
                  old boxes used translucent white, which is invisible on a
                  white base)
     ---------------------------------------------------------------- */
  --rice:     #FFFFFF;   /* paper base */
  --gul:      #BB2727;   /* logo red — the single action colour */
  --ubtan:    #043C86;   /* logo navy — highlights, focus, small accents */
  --charcoal: #0A1F3C;   /* deep navy-black: body text + dark sections */
  --coffee:   #52657E;   /* slate, for muted text */
  --line:     #D8E1EC;   /* cool hairlines and borders */
  --mist:     #F1F5FA;   /* light panel background */
  --rice-rgb: 255,255,255;

  /* friendlier aliases — use these in any new CSS you write */
  --navy:     #043C86;
  --red:      #BB2727;
  --ink:      #0A1F3C;
  --max: 1240px;
  --gutter: 24px;
  --radius: 3px; /* deliberately small — this brand is not a rounded-SaaS-card brand */

  /* fluid type scale */
  --fs-1: clamp(2.5rem, 1.7rem + 3.4vw, 4rem);     /* 40 -> 64 */
  --fs-2: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);     /* 32 -> 44 */
  --fs-3: clamp(1.625rem, 1.35rem + 1.2vw, 2rem);   /* 26 -> 32 */
  --fs-4: clamp(1.3125rem, 1.15rem + 0.7vw, 1.5rem);/* 21 -> 24 */
  --fs-5: clamp(1.125rem, 1.03rem + 0.4vw, 1.25rem);/* 18 -> 20 */
  --fs-6: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);/* 17 -> 18 */
  --fs-7: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem); /* 14 -> 15 */
}

@font-face{
  font-family:"Bricolage Grotesque";
  src:url("assets/fonts/bricolage-grotesque-variable.woff2") format("woff2-variations");
  font-weight:200 800;
  font-display:swap;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("assets/fonts/source-serif-4-variable.woff2") format("woff2-variations");
  font-weight:300 700;
  font-display:swap;
}
/* NOTE — see README "Fonts" section: download the two variable font files from
   Google Fonts and drop them into assets/fonts/ before launch, then remove the
   Google Fonts <link> fallback in functions.php. Self-hosting is required to
   hit the LCP/PageSpeed targets in the brief. */

*{box-sizing:border-box;}
html{scroll-behavior:auto;} /* Lenis handles smoothing; native smooth-scroll off */
body{
  background:var(--rice);
  color:var(--charcoal);
  font-family:"Source Serif 4", Georgia, serif;
  font-size:var(--fs-6);
  line-height:1.65;
  margin:0;
}
h1,h2,h3,h4,.display{
  font-family:"Bricolage Grotesque", system-ui, sans-serif;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.01em;
  text-transform:none; /* sentence case always — never uppercase headings */
  margin:0 0 0.5em;
}
h1{font-size:var(--fs-1);}
h2{font-size:var(--fs-2);}
h3{font-size:var(--fs-3);}
p{max-width:70ch;}
a{color:var(--gul);}
img{max-width:100%;height:auto;display:block;}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}
.section{padding:96px 0;}
.section--tight{padding:56px 0;}
.section--dark{background:var(--charcoal);color:var(--rice);}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--rice);}
.hairline{border-top:1px solid var(--line);}
.grid{display:grid;gap:var(--gutter);}
@media(min-width:900px){
  .grid-12{grid-template-columns:repeat(12,1fr);}
  .grid-7-5{grid-template-columns:7fr 5fr;}
  .grid-8-4{grid-template-columns:8fr 4fr;}
  .grid-6-6{grid-template-columns:6fr 6fr;}
}

/* buttons — deliberate, not the generic pill-with-arrow */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:600;font-size:var(--fs-7);
  border-radius:var(--radius);
  text-decoration:none;
  border:1px solid transparent;
  position:relative;overflow:hidden;
  cursor:pointer;
}
.btn-primary{background:var(--gul);color:var(--rice);}
.btn-primary span{position:relative;z-index:1;}
.btn-primary::before{
  content:"";position:absolute;inset:0;
  background:#8E1D1D; /* darker red for the button wipe */
  transform:translateX(-101%);
  transition:transform 160ms ease-out;
}
.btn-primary:hover::before{transform:translateX(0);}
.btn-ghost{background:transparent;color:var(--charcoal);border-color:var(--charcoal);}
.section--dark .btn-ghost{color:var(--rice);border-color:var(--rice);}
.btn-ghost:hover{border-color:var(--gul);color:var(--gul);}

.dot::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gul);margin-right:10px;}

/* ==========================================================================
   2. HEADER
   ========================================================================== */
#site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(var(--rice-rgb),0.92);
  backdrop-filter:blur(6px);
  transition:height 220ms ease, border-color 220ms ease;
  border-bottom:1px solid transparent;
  height:96px;
}
#site-header.is-scrolled{height:68px;border-bottom-color:var(--line);}
.header-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--charcoal);font-family:"Bricolage Grotesque";font-weight:700;font-size:1.1rem;}
.wordmark svg{width:28px;height:28px;flex:none;}

.primary-nav{display:none;}
@media(min-width:1024px){
  .primary-nav{display:flex;align-items:center;gap:32px;}
  .primary-nav > ul{display:flex;gap:32px;list-style:none;margin:0;padding:0;}
  .primary-nav a{color:var(--charcoal);text-decoration:none;font-weight:600;font-size:var(--fs-7);position:relative;}
  .primary-nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:var(--gul);transform:scaleX(0);transform-origin:left;transition:transform 180ms ease;}
  .primary-nav a:hover::after{transform:scaleX(1);}
}
.header-right{display:flex;align-items:center;gap:18px;}
.header-meta{display:none;font-size:0.78rem;color:var(--coffee);line-height:1.3;text-align:right;}
@media(min-width:1200px){.header-meta{display:block;}}
.whatsapp-link{display:none;font-size:var(--fs-7);color:var(--charcoal);text-decoration:none;}
@media(min-width:1024px){.whatsapp-link{display:inline;}}

/* mega menu */
.has-mega{position:static;}
.mega-panel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--rice);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:none;padding:40px 0;
}
.has-mega:hover .mega-panel,.has-mega:focus-within .mega-panel{display:block;}
.mega-grid{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.mega-grid h4{font-size:var(--fs-7);color:var(--coffee);margin-bottom:10px;}
.mega-grid a{display:block;color:var(--charcoal);text-decoration:none;padding:6px 0;font-size:0.92rem;}
.mega-grid a:hover{color:var(--gul);}

/* mobile nav */
.menu-toggle{display:inline-flex;background:none;border:0;cursor:pointer;padding:8px;}
@media(min-width:1024px){.menu-toggle{display:none;}}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{content:"";display:block;width:22px;height:2px;background:var(--charcoal);position:relative;transition:transform 200ms ease;}
.menu-toggle span::before{position:absolute;top:-7px;}
.menu-toggle span::after{position:absolute;top:7px;}

.mobile-overlay{
  position:fixed;inset:0;background:var(--rice);z-index:200;
  display:flex;flex-direction:column;
  transform:translateY(-100%);transition:transform 260ms ease;
}
.mobile-overlay.is-open{transform:translateY(0);}
.mobile-overlay-header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--gutter);height:72px;border-bottom:1px solid var(--line);}
.mobile-links{list-style:none;margin:0;padding:24px var(--gutter);flex:1;overflow-y:auto;}
.mobile-links li{border-bottom:1px solid var(--line);}
.mobile-links a{display:block;padding:18px 0;min-height:48px;font-family:"Bricolage Grotesque";font-size:1.4rem;color:var(--charcoal);text-decoration:none;
  opacity:0;transform:translateY(8px);transition:opacity 300ms ease,transform 300ms ease;}
.mobile-overlay.is-open .mobile-links a{opacity:1;transform:translateY(0);}
.mobile-cta-bar{display:flex;gap:12px;padding:16px var(--gutter) 24px;border-top:1px solid var(--line);}
.mobile-cta-bar .btn{flex:1;justify-content:center;min-height:48px;}

/* floating whatsapp */
.float-whatsapp{
  position:fixed;right:20px;bottom:20px;z-index:150;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.2);
  opacity:0;pointer-events:none;transform:scale(.8);
  transition:opacity 220ms ease,transform 220ms ease;
}
.float-whatsapp.is-visible{opacity:1;pointer-events:auto;transform:scale(1);}

/* ==========================================================================
   3. HERO
   ========================================================================== */
.hero{padding:64px 0 80px;}
.hero-grid{display:grid;gap:40px;align-items:center;}
@media(min-width:960px){.hero-grid{grid-template-columns:6fr 6fr;}}
.hero-copy{text-align:left;}
.hero h1{max-width:14ch;}
.hero .sub{font-size:var(--fs-5);color:var(--coffee);max-width:44ch;margin-bottom:28px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px;}
.hero-whatsapp{font-size:0.9rem;color:var(--coffee);}
.hero-whatsapp a{color:var(--charcoal);font-weight:600;}

/* mask reveal for headline words */
.reveal-word{overflow:hidden;display:inline-block;vertical-align:top;}
.reveal-word span{display:inline-block;transform:translateY(110%);}
.js-hero-ready .reveal-word span{transition:transform 900ms cubic-bezier(.16,1,.3,1);}

.hero-art{position:relative;}
.hero-art svg{width:100%;height:auto;}
.hero-actions .btn-primary{transform:scale(.9);opacity:0;transition:transform 260ms cubic-bezier(.16,1,.3,1),opacity 260ms ease;}
.js-hero-ready .hero-actions .btn-primary{transform:scale(1);opacity:1;}

/* ==========================================================================
   4. TRUST MARQUEE
   ========================================================================== */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;}
.marquee-track{display:flex;gap:64px;width:max-content;animation:marquee 38s linear infinite;}
.marquee-track span{font-family:"Bricolage Grotesque";font-weight:700;font-size:1.1rem;color:var(--coffee);filter:grayscale(1);opacity:.6;white-space:nowrap;transition:opacity 200ms ease,filter 200ms ease;}
.marquee-track span:hover{opacity:1;filter:grayscale(0);color:var(--gul);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ==========================================================================
   5. SERVICES OVERVIEW (asymmetric panels)
   ========================================================================== */
.services-grid{display:grid;gap:32px;}
@media(min-width:900px){
  .services-grid{grid-template-columns:repeat(12,1fr);}
  .services-grid .panel:nth-child(1){grid-column:span 7;}
  .services-grid .panel:nth-child(2){grid-column:span 5;}
  .services-grid .panel:nth-child(3){grid-column:span 5;}
  .services-grid .panel:nth-child(4){grid-column:span 7;}
  .services-grid .panel:nth-child(5){grid-column:span 6;}
  .services-grid .panel:nth-child(6){grid-column:span 6;}
}
.panel{border-top:1px solid var(--line);padding-top:24px;transition:border-color 200ms ease,transform 200ms ease;}
.panel:hover{border-color:var(--gul);transform:translateY(-4px);}
.panel svg{width:32px;height:32px;color:var(--gul);margin-bottom:16px;}
.panel ul{list-style:none;margin:12px 0 16px;padding:0;}
.panel li{padding:4px 0;font-size:0.92rem;color:var(--coffee);}
.panel a.more{font-weight:600;font-size:0.9rem;}

/* ==========================================================================
   6. COURSE TEASER (dark band)
   ========================================================================== */
.lesson-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:1px;background:rgba(246,242,233,.15);}
.lesson-list li{background:var(--charcoal);padding:16px 0;display:flex;justify-content:space-between;gap:16px;}
.lesson-list span:first-child{color:var(--rice);}
.lesson-list span:last-child{color:var(--ubtan);font-size:0.85rem;}

/* ==========================================================================
   7. PRODUCTS PROOF STRIP
   ========================================================================== */
.soap-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0;}
.soap-photos .ph{aspect-ratio:1/1;background:linear-gradient(135deg,#EDF2F8,#DCE6F1);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-size:0.75rem;color:var(--coffee);text-align:center;padding:12px;
  clip-path:inset(0 100% 0 0);transition:clip-path 500ms cubic-bezier(.16,1,.3,1);}
.js-inview .soap-photos .ph{clip-path:inset(0 0 0 0);}

/* ==========================================================================
   8. HOW WE WORK — scroll-scrubbed steps
   ========================================================================== */
.process{position:relative;padding-top:16px;}
.process-line{position:absolute;top:38px;left:0;right:0;height:2px;background:var(--line);}
.process-line-fill{position:absolute;top:0;left:0;height:100%;width:0;background:var(--gul);}
.process-steps{display:grid;gap:32px;position:relative;}
@media(min-width:900px){.process-steps{grid-template-columns:repeat(4,1fr);}}
.step-num{width:14px;height:14px;border-radius:50%;background:var(--rice);border:2px solid var(--line);margin-bottom:16px;position:relative;z-index:1;}
.step-num.is-done{background:var(--gul);border-color:var(--gul);}

/* ==========================================================================
   9. INTERNATIONAL SECTION
   ========================================================================== */
.intl-grid{display:grid;gap:24px;}
@media(min-width:900px){.intl-grid{grid-template-columns:repeat(3,1fr);}}
.intl-card{border:1px solid var(--line);padding:24px;background:var(--mist);}
.intl-card h4{font-size:var(--fs-7);color:var(--coffee);margin-bottom:8px;text-transform:none;}
.country-strip{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;}
.country-strip span{border:1px solid var(--line);padding:6px 14px;font-size:0.85rem;border-radius:999px;}

/* ==========================================================================
   10. RESULTS STRIP
   ========================================================================== */
.results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;text-align:left;}
@media(min-width:900px){.results-grid{grid-template-columns:repeat(4,1fr);}}
.result-num{font-family:"Bricolage Grotesque";font-weight:800;font-size:var(--fs-2);color:var(--gul);}
.result-label{color:var(--coffee);font-size:0.9rem;}

/* ==========================================================================
   11. BLOG PREVIEW
   ========================================================================== */
.blog-grid{display:grid;gap:32px;}
@media(min-width:900px){.blog-grid{grid-template-columns:repeat(3,1fr);}}
.blog-card{border-top:1px solid var(--line);padding-top:16px;}
.blog-meta{font-size:0.8rem;color:var(--coffee);margin-bottom:8px;}
.blog-card h3{font-size:var(--fs-4);}

/* ==========================================================================
   12. FAQ ACCORDION
   ========================================================================== */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:20px 0;display:flex;justify-content:space-between;align-items:center;font-family:"Bricolage Grotesque";font-weight:600;font-size:var(--fs-5);cursor:pointer;color:var(--charcoal);}
.faq-icon{transition:transform 240ms ease;flex:none;margin-left:16px;}
.faq-item.is-open .faq-icon{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;opacity:0;transition:max-height 240ms ease,opacity 240ms ease;}
.faq-item.is-open .faq-a{opacity:1;padding-bottom:20px;}

/* ==========================================================================
   13. FINAL CTA
   ========================================================================== */
.cta-form{display:grid;gap:14px;max-width:520px;}
.cta-form input,.cta-form textarea{
  width:100%;padding:14px;border:1px solid var(--line);background:var(--rice);
  font-family:"Source Serif 4";font-size:1rem;border-radius:var(--radius);
}
.cta-form label{font-size:0.85rem;color:var(--coffee);margin-bottom:4px;display:block;}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
#site-footer{background:var(--charcoal);color:var(--rice);padding:80px 0 0;}
.footer-grid{display:grid;gap:40px;}
@media(min-width:900px){.footer-grid{grid-template-columns:repeat(4,1fr);}}
#site-footer h4{font-size:var(--fs-7);color:var(--ubtan);margin-bottom:16px;text-transform:none;}
#site-footer ul{list-style:none;margin:0;padding:0;}
#site-footer li{margin-bottom:10px;}
#site-footer a{color:var(--rice);text-decoration:none;opacity:.85;}
#site-footer a:hover{opacity:1;color:var(--ubtan);}
.footer-social{display:flex;gap:14px;margin-top:16px;}
.footer-social a{width:34px;height:34px;border:1px solid rgba(246,242,233,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.newsletter{display:flex;gap:8px;margin-top:8px;}
.newsletter input{flex:1;padding:10px;border:1px solid rgba(246,242,233,.3);background:transparent;color:var(--rice);border-radius:var(--radius);}
.footer-bottom{border-top:1px solid rgba(246,242,233,.15);margin-top:56px;padding:24px 0;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:0.85rem;}
.footer-bottom a{color:var(--rice);opacity:.7;text-decoration:none;}
.footer-bottom a:hover{opacity:1;}

/* ==========================================================================
   15. ACCESSIBILITY / MOTION SAFETY
   ========================================================================== */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--gul);color:var(--rice);padding:12px 20px;z-index:999;}
.skip-link:focus{left:12px;top:12px;}
:focus-visible{outline:2px solid var(--ubtan);outline-offset:2px;}

@media(prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:150ms !important;scroll-behavior:auto !important;}
  .reveal-word span{transform:none !important;}
  .marquee-track{animation:none !important;}
}

@media(max-width:640px){
  .section{padding:56px 0;}
  .hero{padding:40px 0 56px;}
}

/* ==========================================================================
   16. SERVICE PAGES (hub + the 6 child pages)
   ========================================================================== */
.breadcrumb{font-size:0.82rem;color:var(--coffee);padding-top:24px;}
.breadcrumb a{color:var(--coffee);text-decoration:none;}
.breadcrumb a:hover{color:var(--gul);}

.service-hero{padding:32px 0 48px;}
.service-hero h1{max-width:20ch;}
.direct-answer{font-size:var(--fs-5);color:var(--coffee);max-width:62ch;border-left:2px solid var(--gul);padding-left:20px;margin:20px 0 0;}

.family-block{padding:48px 0;border-top:1px solid var(--line);}
.family-grid{display:grid;gap:40px;}
@media(min-width:900px){.family-grid{grid-template-columns:7fr 5fr;}}
.family-grid.reverse{direction:rtl;}
.family-grid.reverse > *{direction:ltr;}
.sub-list{list-style:none;margin:16px 0;padding:0;columns:2;column-gap:24px;}
.sub-list li{padding:5px 0;font-size:0.92rem;break-inside:avoid;}

.who-price-box{border:1px solid var(--line);padding:24px;background:var(--mist);height:fit-content;}
.who-price-box h4{font-size:var(--fs-7);color:var(--coffee);margin-bottom:8px;text-transform:none;}
.who-price-box .price{font-family:"Bricolage Grotesque";font-weight:800;font-size:var(--fs-3);color:var(--gul);margin:4px 0 16px;}
.who-price-box .price small{font-family:"Source Serif 4";font-weight:400;font-size:0.85rem;color:var(--coffee);}

.pricing-table{width:100%;border-collapse:collapse;margin-top:28px;font-size:0.92rem;}
.pricing-table th,.pricing-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;}
.pricing-table th{font-family:"Bricolage Grotesque";font-weight:700;}
.pricing-table td:first-child,.pricing-table th:first-child{color:var(--coffee);width:26%;}
.pricing-table .highlight{background:rgba(158,59,80,0.05);}
.pricing-table .price-cell{font-family:"Bricolage Grotesque";font-weight:800;color:var(--gul);}
@media(max-width:700px){.pricing-table{display:block;overflow-x:auto;white-space:nowrap;}}

.compliance-note{background:rgba(216,160,42,0.1);border-left:2px solid var(--ubtan);padding:16px 20px;font-size:0.88rem;margin:24px 0;}

/* ==========================================================================
   16. PRODUCTS PAGE — Gul Beauty Soap
   ========================================================================== */
.soap-hero-figure figcaption{font-size:.88rem;color:var(--coffee);margin-top:10px;}
.ph{background:linear-gradient(135deg,#EDF2F8,#DCE6F1);border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:.78rem;color:var(--coffee);padding:16px;font-family:"Bricolage Grotesque",sans-serif;}
.ph-wide{aspect-ratio:16/9;}
.ph-square{aspect-ratio:1/1;}
.ph-video{aspect-ratio:16/9;}
.ph-alt{font-size:.72rem;color:var(--coffee);opacity:.75;margin-top:8px;}

.soap-row .family-grid{align-items:start;}
@media(min-width:900px){
  .soap-row .family-grid{grid-template-columns:5fr 7fr;}
  .soap-row .family-grid.reverse{grid-template-columns:7fr 5fr;}
}
.benefit-head{font-size:var(--fs-7);color:var(--coffee);margin:24px 0 8px;}
.benefit-list{list-style:none;margin:0 0 16px;padding:0;}
.benefit-list li{padding:6px 0;font-size:.95rem;}
.ing-line{font-size:.9rem;color:var(--coffee);border-top:1px solid var(--line);padding-top:14px;margin:16px 0 20px;}
.buy-steps{margin:8px 0 16px;padding-left:20px;font-size:.92rem;}
.buy-steps li{margin-bottom:8px;}

/* ==========================================================================
   17. FREE COURSE PAGE
   ========================================================================== */
.need-box{border:1px solid var(--line);background:var(--mist);padding:24px;height:fit-content;}
.need-box h4{font-size:var(--fs-7);color:var(--coffee);margin-bottom:12px;}

.module-item .faq-q{gap:12px;}
.module-count{font-family:"Source Serif 4",serif;font-weight:400;font-size:.82rem;
  color:var(--coffee);margin-left:auto;white-space:nowrap;}
.lesson-index{list-style:none;counter-reset:lesson;margin:16px 0 4px;padding:0;}
.lesson-index li{counter-increment:lesson;display:flex;gap:14px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--line);font-size:.95rem;}
.lesson-index li::before{content:counter(lesson);font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;color:var(--gul);font-size:.8rem;min-width:18px;}
.lesson-index a{text-decoration:none;border-bottom:1px solid transparent;}
.lesson-index a:hover{border-bottom-color:var(--gul);}
.lesson-soon{color:var(--coffee);opacity:.7;}
.lesson-time{margin-left:auto;font-size:.78rem;color:var(--coffee);white-space:nowrap;}

/* video facade — static thumbnail until clicked */
.video-facade{position:relative;cursor:pointer;border:1px solid var(--line);}
.video-facade iframe{width:100%;aspect-ratio:16/9;border:0;display:block;}
.video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:2rem;color:var(--rice);}
.video-play::before{content:"";position:absolute;width:66px;height:66px;border-radius:50%;
  background:var(--gul);transition:transform 200ms ease-out;}
.video-facade:hover .video-play::before{transform:scale(1.06);}
.video-play{z-index:1;}
.video-facade:focus-visible{outline:2px solid var(--ubtan);outline-offset:2px;}

/* ==========================================================================
   18. CONTACT PAGE
   ========================================================================== */
.contact-grid{display:grid;gap:48px;}
@media(min-width:960px){.contact-grid{grid-template-columns:7fr 5fr;}}
.contact-form{max-width:none;}
.field-row{display:grid;gap:14px;}
@media(min-width:640px){.field-row{grid-template-columns:1fr 1fr;}}
.cta-form select{width:100%;padding:14px;border:1px solid var(--line);background:var(--rice);
  font-family:"Source Serif 4",serif;font-size:1rem;border-radius:var(--radius);color:var(--charcoal);}

.check-group{border:1px solid var(--line);padding:18px 20px;margin:4px 0;background:var(--mist);}
.check-group legend{font-size:.85rem;color:var(--coffee);padding:0 6px;}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;padding:5px 0;cursor:pointer;}
.check input{margin-top:5px;accent-color:var(--gul);flex:none;}
.consent{font-size:.88rem;color:var(--coffee);margin:4px 0;}
.form-note{font-size:.82rem;color:var(--coffee);margin:4px 0 0;}

.contact-list{list-style:none;margin:0;padding:0;}
.contact-list li{padding:10px 0;border-top:1px solid var(--line);font-size:.95rem;}
.contact-list li:first-child{border-top:0;padding-top:0;}
.contact-label{display:block;font-size:.75rem;color:var(--coffee);
  font-family:"Bricolage Grotesque",sans-serif;margin-bottom:2px;}
.audit-box{border-left:2px solid var(--gul);}

/* ==========================================================================
   19. SMALL-SCREEN FIXES FOR THE NEW PAGES
   ========================================================================== */
@media(max-width:640px){
  .soap-photos{grid-template-columns:repeat(2,1fr);}
  .lesson-index li{flex-wrap:wrap;}
  .lesson-time{margin-left:28px;}
  .module-count{display:none;}
  .section{padding:56px 0;}
}

/* ==========================================================================
   20. LOGO — real uploaded logo in the header, and navy/red brand touches
   ========================================================================== */
.wordmark .site-logo{height:44px;width:auto;display:block;}
.site-header.is-shrunk .wordmark .site-logo{height:34px;transition:height 200ms ease-out;}
@media(max-width:640px){.wordmark .site-logo{height:36px;}}

/* When the real logo is uploaded, it already says the business name, so the
   text label is not printed at all (see header.php). This keeps the fallback
   text sized correctly when no logo is set yet. */
.wordmark-text{white-space:nowrap;}

/* Dark sections: the logo is navy-on-white, so on a navy background the mark
   needs a white knockout version. Upload that separately if you want one in
   the footer; until then the footer uses the text wordmark. */
.site-footer .wordmark{color:var(--rice);}

/* Links: red underline on hover reads as the logo's accent, not as a generic
   blue web link. */
a{color:var(--gul);}
a:hover{color:#8E1D1D;}
.section--dark a{color:#FFFFFF;}
.section--dark a:hover{border-bottom-color:#FFFFFF;}

/* Navy is the structural colour: headings stay ink, but section eyebrows and
   the process/step markers pick up the logo navy. */
.step-num{border-color:var(--ubtan);}
.step-num.is-done{background:var(--gul);border-color:var(--gul);}

/* ==========================================================================
   21. HERO BANNER VIDEO
   The hero grid is now single-column (the SVG art was removed), so the copy
   gets the full width and the banner sits below it, edge to edge.
   ========================================================================== */
.hero-grid{grid-template-columns:1fr;}
.hero-copy{max-width:34ch;}
.hero-copy .sub{max-width:60ch;}

.hero-banner-wrap{padding-top:8px;padding-bottom:8px;}
.hero-banner{position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--mist);}
.hero-banner-video,
.hero-banner img{width:100%;height:auto;aspect-ratio:16/9;display:block;
  object-fit:cover;background:var(--mist);}

/* The poster is the LCP candidate on mobile, so it must not fade in. */
.hero-banner-video{opacity:1;}

/* On narrow screens the banner's baked-in text becomes unreadable, so crop to
   the right-hand imagery instead of shrinking everything to nothing. */
@media(max-width:640px){
  .hero-banner{aspect-ratio:4/3;}
  .hero-banner-video,
  .hero-banner img{aspect-ratio:auto;height:100%;object-fit:cover;object-position:78% center;}
}

@media(prefers-reduced-motion:reduce){
  .hero-banner-video{animation:none;}
}

/* ==========================================================================
   22. SERVICE PAGE HERO IMAGE
   Sits directly under the h1 + direct answer. Fixed width/height attributes
   on the <img> mean the space is reserved before the file arrives, so there
   is no layout shift (CLS stays at 0).
   ========================================================================== */
.service-hero-figure{margin:0 auto 8px;padding-top:4px;}
.service-hero-figure picture,
.service-hero-figure img{display:block;width:100%;height:auto;}
.service-hero-figure img{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--mist);}
.service-hero-figure figcaption{font-size:.85rem;color:var(--coffee);margin-top:10px;}

/* The images carry their own headline text baked in, which becomes unreadable
   below ~640px. Crop to the working area instead of shrinking it to nothing. */
@media(max-width:640px){
  .service-hero-figure img{aspect-ratio:4/3;object-fit:cover;object-position:62% center;}
}

/* ==========================================================================
   23. PRODUCT PHOTOGRAPHY
   The soap photos are shot on white, which would disappear against a white
   page. A --mist panel behind each one gives the bar an edge to sit on.
   ========================================================================== */
.soap-hero-figure picture,
.soap-hero-figure img{display:block;width:100%;height:auto;}
.soap-hero-figure img{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--mist);}

.soap-figure picture,
.soap-figure img{display:block;width:100%;height:auto;}
.soap-figure img{background:var(--mist);border:1px solid var(--line);
  border-radius:var(--radius);padding:8px;}

/* Square product shots keep their 1:1 frame so the grid stays even whatever
   the source file is. The signature block is a wide shot, so it opts out. */
.soap-row .soap-figure img{aspect-ratio:1/1;object-fit:contain;}
.soap-row#gul-beauty-soap-signature .soap-figure img{aspect-ratio:16/9;object-fit:cover;}

@media(max-width:640px){
  .soap-figure img{padding:4px;}
}

/* ==========================================================================
   24. QUOTE ON REQUEST — replaces the old price boxes
   ========================================================================== */
.quote-line{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;
  display:flex;flex-direction:column;gap:6px;}
.quote-line strong{font-family:"Bricolage Grotesque",sans-serif;font-size:.98rem;
  color:var(--charcoal);}
.quote-line span{font-size:.86rem;color:var(--coffee);line-height:1.5;}
.quote-line a{font-size:.88rem;font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--gul);align-self:flex-start;}

.quote-cell{font-family:"Bricolage Grotesque",sans-serif;font-size:.92rem;
  font-weight:600;color:var(--charcoal);}

.quote-box{border:1px solid var(--line);border-left:3px solid var(--gul);
  background:var(--mist);padding:32px;margin-top:32px;}
.quote-box h3{font-size:var(--fs-4);margin-bottom:12px;}
.quote-box p{font-size:.96rem;max-width:68ch;}
.quote-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}
.quote-note{font-size:.86rem;color:var(--coffee);margin-top:20px;
  border-top:1px solid var(--line);padding-top:14px;}
@media(max-width:640px){
  .quote-box{padding:22px;}
  .quote-actions .btn{width:100%;justify-content:center;}
}

/* ==========================================================================
   25. FOOTER LOGO + SOCIAL LISTS
   ========================================================================== */
.footer-logo{display:inline-block;margin-bottom:16px;}
.footer-logo picture,
.footer-logo img{display:block;}
.footer-logo img{width:auto;height:56px;}
@media(max-width:640px){.footer-logo img{height:48px;}}

.footer-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.footer-social a{width:36px;height:36px;display:flex;align-items:center;
  justify-content:center;border:1px solid rgba(255,255,255,.25);
  border-radius:50%;transition:background 180ms ease-out,border-color 180ms ease-out;}
.footer-social a:hover{background:var(--gul);border-color:var(--gul);}
.footer-social a:focus-visible{outline:2px solid var(--ubtan);outline-offset:2px;}

.social-list{list-style:none;margin:12px 0 0;padding:0;}
.social-list li{padding:9px 0;border-top:1px solid var(--line);font-size:.92rem;}
.social-list li:first-child{border-top:0;padding-top:0;}
.social-list a{word-break:break-all;}

/* ==========================================================================
   26. BLOG — archive cards
   ========================================================================== */
.cat-filter{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px;}
.cat-filter a{font-family:"Bricolage Grotesque",sans-serif;font-size:.85rem;
  text-decoration:none;color:var(--coffee);border:1px solid var(--line);
  padding:7px 14px;border-radius:100px;transition:all 180ms ease-out;}
.cat-filter a:hover{border-color:var(--gul);color:var(--gul);}
.cat-filter a.is-active{background:var(--charcoal);border-color:var(--charcoal);color:var(--rice);}

.blog-grid{display:grid;gap:32px;grid-template-columns:1fr;}
@media(min-width:640px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.blog-grid{grid-template-columns:repeat(3,1fr);}}

.post-card{display:flex;flex-direction:column;border:1px solid var(--line);
  background:var(--rice);transition:border-color 200ms ease-out,transform 200ms ease-out;}
.post-card:hover{border-color:var(--gul);transform:translateY(-4px);}
.post-card-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--mist);}
.post-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
.post-card-img .ph-card{display:flex;width:100%;height:100%;align-items:center;
  justify-content:center;font-size:.75rem;color:var(--coffee);
  background:linear-gradient(135deg,#EDF2F8,#DCE6F1);
  font-family:"Bricolage Grotesque",sans-serif;}
.post-card-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.post-cat-sm{font-family:"Bricolage Grotesque",sans-serif;font-size:.72rem;
  color:var(--gul);letter-spacing:.02em;}
.post-card h3{font-size:1.1rem;line-height:1.3;margin:0;}
.post-card h3 a{color:var(--charcoal);text-decoration:none;}
.post-card h3 a:hover{color:var(--gul);}
.post-card-body p{font-size:.9rem;color:var(--coffee);margin:0;flex:1;}
.post-card-meta{display:flex;gap:14px;font-size:.75rem;color:var(--coffee);
  border-top:1px solid var(--line);padding-top:12px;margin-top:4px;
  font-family:"Bricolage Grotesque",sans-serif;}

.pagination{margin-top:48px;}
.pagination .page-numbers{display:inline-block;padding:9px 14px;margin-right:6px;
  border:1px solid var(--line);text-decoration:none;font-size:.9rem;
  font-family:"Bricolage Grotesque",sans-serif;}
.pagination .page-numbers.current{background:var(--charcoal);color:var(--rice);
  border-color:var(--charcoal);}
.pagination .page-numbers:hover{border-color:var(--gul);}

.empty-state{border:1px dashed var(--line);padding:56px 32px;text-align:center;
  background:var(--mist);}
.empty-state h2{font-size:var(--fs-4);}
.empty-state p{max-width:46ch;margin:10px auto 20px;color:var(--coffee);}

/* ==========================================================================
   27. BLOG — single article
   ========================================================================== */
.post-head{padding-top:8px;max-width:820px;}
.post-cat{display:inline-block;font-family:"Bricolage Grotesque",sans-serif;
  font-size:.78rem;color:var(--gul);text-decoration:none;
  border-bottom:1px solid var(--gul);margin-bottom:18px;}
.post-head h1{font-size:var(--fs-2);max-width:24ch;}
.post-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--line);font-family:"Bricolage Grotesque",sans-serif;
  font-size:.82rem;color:var(--coffee);}

.post-featured{margin:28px auto 0;max-width:1000px;}
.post-featured img{width:100%;height:auto;display:block;border:1px solid var(--line);
  background:var(--mist);}
.post-featured figcaption{font-size:.85rem;color:var(--coffee);margin-top:10px;}
.post-featured--empty .ph{max-width:1000px;}

.post-body-grid{display:grid;gap:48px;padding-top:40px;padding-bottom:8px;}
@media(min-width:1000px){.post-body-grid{grid-template-columns:minmax(0,1fr) 300px;}}

/* Article typography — this is the part that makes long guides readable. */
.post-body{max-width:72ch;font-size:1.0625rem;}
.post-body > * + *{margin-top:1.15em;}
.post-body h2{font-size:var(--fs-3);margin-top:2.2em;scroll-margin-top:110px;}
.post-body h3{font-size:var(--fs-4);margin-top:1.8em;}
.post-body h4{font-size:var(--fs-5);margin-top:1.5em;}
.post-body ul,.post-body ol{padding-left:22px;}
.post-body li{margin-bottom:.5em;}
.post-body strong{color:var(--charcoal);}
.post-body a{border-bottom:1px solid var(--gul);text-decoration:none;}
.post-body blockquote{border-left:3px solid var(--gul);padding:4px 0 4px 20px;
  margin-left:0;color:var(--coffee);font-size:1.1rem;}
.post-body table{width:100%;border-collapse:collapse;font-size:.94rem;margin:1.5em 0;}
.post-body th,.post-body td{border:1px solid var(--line);padding:11px 13px;text-align:left;}
.post-body th{background:var(--mist);font-family:"Bricolage Grotesque",sans-serif;font-size:.88rem;}
.post-body code{background:var(--mist);padding:2px 6px;font-size:.9em;border-radius:2px;}

/* Images inside an article — upload with the normal Image block, this handles
   the rest. Captions sit under the frame, never inside it. */
.post-body figure,.post-body .wp-block-image{margin:2em 0;}
.post-body img{max-width:100%;height:auto;display:block;border:1px solid var(--line);
  background:var(--mist);}
.post-body figcaption,.post-body .wp-element-caption{font-size:.85rem;
  color:var(--coffee);margin-top:9px;line-height:1.5;}

/* First paragraph doubles as the direct answer for search snippets. */
.post-body > p:first-child{font-size:1.15rem;line-height:1.6;color:var(--charcoal);
  border-left:2px solid var(--ubtan);padding-left:18px;}

.post-aside{align-self:start;}
@media(min-width:1000px){.post-aside{position:sticky;top:104px;}}
.toc{border:1px solid var(--line);padding:20px;margin-bottom:24px;background:var(--mist);}
.toc h4{font-size:.8rem;color:var(--coffee);margin-bottom:10px;
  font-family:"Bricolage Grotesque",sans-serif;}
.toc ol{margin:0;padding-left:18px;font-size:.88rem;}
.toc li{margin-bottom:7px;}
.toc a{text-decoration:none;border-bottom:1px solid transparent;color:var(--charcoal);}
.toc a:hover{border-bottom-color:var(--gul);color:var(--gul);}
.aside-cta .btn{margin-top:6px;}
.whatsapp-aside{display:block;text-align:center;font-size:.85rem;margin-top:12px;}

.post-foot{padding-top:16px;padding-bottom:8px;}
.author-box{display:grid;gap:20px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:32px 0;margin-bottom:56px;}
@media(min-width:640px){.author-box{grid-template-columns:88px 1fr;}}
.author-mark{width:88px;height:88px;border:1px solid var(--line);background:var(--mist);
  display:flex;align-items:center;justify-content:center;padding:12px;}
.author-mark img{width:100%;height:auto;}
.author-box h4{font-size:var(--fs-5);margin-bottom:6px;}
.author-box p{font-size:.94rem;color:var(--coffee);max-width:64ch;}
.author-links{display:flex;gap:18px;margin-top:12px;font-size:.9rem;}
.related-head{font-size:var(--fs-3);margin-bottom:28px;}
.search-form{max-width:520px;}

@media(max-width:640px){
  .post-head h1{max-width:none;}
  .post-body{font-size:1.02rem;}
  .author-mark{width:72px;height:72px;}
}

/* ==========================================================================
   28. GAPS FOUND IN THE FINAL AUDIT
   Classes that were used in the templates but had no styles. Without these
   the FAQ accordions had no spacing and screen-reader labels were visible.
   ========================================================================== */
.faq-list{border-top:1px solid var(--line);max-width:820px;}
.post-single{display:block;}
.contact-side{align-self:start;}

/* Visually hidden but still read aloud by screen readers. WordPress core and
   the footer newsletter label both rely on this class existing. */
.screen-reader-text{position:absolute !important;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.screen-reader-text:focus{position:static !important;width:auto;height:auto;
  margin:0;clip:auto;white-space:normal;padding:10px 14px;background:var(--rice);
  color:var(--charcoal);z-index:100;}

.soap-bars-figure{margin:0 0 48px;}
.soap-bars-figure picture,.soap-bars-figure img{display:block;width:100%;height:auto;}
.soap-bars-figure img{border:1px solid var(--line);border-radius:var(--radius);background:var(--mist);}
.soap-bars-figure figcaption{font-size:.85rem;color:var(--coffee);margin-top:10px;}

/* ==========================================================================
   29. IMAGE SLOTS INSIDE ARTICLES
   Each article ships with labelled slots saying exactly what image belongs
   there, at what size, and the alt text to use. Replace the slot with a
   normal Image block in the editor — the frame below matches the final
   aspect ratio, so the layout does not move when you swap it.
   ========================================================================== */
.post-body .img-slot{aspect-ratio:16/9;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:24px;margin:2em 0;
  border:1px dashed var(--gul);background:linear-gradient(135deg,#EDF2F8,#DCE6F1);
  font-family:"Bricolage Grotesque",sans-serif;font-size:.82rem;
  color:var(--coffee);line-height:1.6;}
@media(max-width:640px){
  .post-body .img-slot{aspect-ratio:4/3;font-size:.75rem;padding:16px;}
}

.contact-address{font-style:normal;line-height:1.6;margin:0 0 6px;}
.results-strip{display:grid;gap:28px;grid-template-columns:repeat(2,1fr);}
@media(min-width:768px){.results-strip{grid-template-columns:repeat(4,1fr);}}

/* ==========================================================================
   30. SERVICE IMAGES ON THE SERVICES HUB
   The "Who this is for" text blocks were replaced with the service images —
   the page was carrying too much text, and each image says the same thing
   faster. The quote line stays underneath.
   ========================================================================== */
.service-media-box{border:1px solid var(--line);padding:16px;background:var(--mist);
  height:fit-content;}
.service-media-box .quote-line{margin-top:14px;padding-top:14px;}

.service-figure{margin:0;}
.service-figure picture,
.service-figure img{display:block;width:100%;height:auto;}
.service-figure img{border:1px solid var(--line);background:var(--rice);}
.service-figure figcaption{font-size:.84rem;color:var(--coffee);line-height:1.55;
  margin-top:10px;}

/* On a phone the banner text baked into these images gets too small to read,
   so crop to the working area instead of shrinking the whole thing. */
@media(max-width:640px){
  .service-figure img{aspect-ratio:4/3;object-fit:cover;object-position:58% center;}
  .service-media-box{padding:12px;}
}

/* ==========================================================================
   31. HERO IMAGE (right column)
   The hero went back to two columns: copy left, artwork right. Below 900px
   it stacks, image under the buttons, where it reads as support rather than
   pushing the headline off the screen.
   ========================================================================== */
.hero-grid{grid-template-columns:1fr;}
@media(min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,0.95fr);
    align-items:center;gap:56px;}
  .hero-copy{max-width:none;}
}
.hero-visual{margin:0;}
.hero-visual picture,
.hero-visual img{display:block;width:100%;height:auto;}
.hero-visual img{border-radius:var(--radius);}
.hero-visual figcaption{font-size:.84rem;color:var(--coffee);margin-top:12px;
  line-height:1.55;max-width:46ch;}

@media(max-width:899px){
  .hero-visual{margin-top:36px;}
  .hero-visual figcaption{max-width:none;}
}

/* Service panel headings are the links now that the "See this service" line
   is gone — so they need to look clickable. */
.panel h3 a{color:var(--charcoal);text-decoration:none;
  border-bottom:1px solid transparent;transition:color 160ms ease-out,border-color 160ms ease-out;}
.panel h3 a:hover{color:var(--gul);border-bottom-color:var(--gul);}

/* ==========================================================================
   32. HOMEPAGE SOAP PHOTOS
   Three real product shots in the "we built one ourselves" section. They are
   on a white studio background, so each sits on a --mist panel to stop the
   bar floating against the page.
   ========================================================================== */
.soap-photo{margin:0;}
.soap-photo a{display:block;}
.soap-photo picture,
.soap-photo img{display:block;width:100%;height:auto;}
.soap-photo img{aspect-ratio:1/1;object-fit:contain;background:var(--mist);
  border:1px solid var(--line);border-radius:var(--radius);padding:8px;
  transition:border-color 200ms ease-out,transform 200ms ease-out;}
.soap-photo a:hover img{border-color:var(--gul);transform:translateY(-3px);}
.soap-photo a:focus-visible img{outline:2px solid var(--ubtan);outline-offset:2px;}
.soap-photo figcaption{font-size:.8rem;color:var(--coffee);margin-top:9px;
  line-height:1.5;}

/* This section sits on the dark band, so captions need the light text. */
.section--dark .soap-photo figcaption{color:rgba(255,255,255,.75);}
.section--dark .soap-photo img{background:#FFFFFF;border-color:rgba(255,255,255,.2);}

@media(max-width:640px){
  .soap-photo figcaption{font-size:.74rem;}
  .soap-photo img{padding:5px;}
}