/*
Theme Name: House of Duafe
Theme URI: https://tempatech.co.uk
Author: Tempa Tech
Author URI: https://tempatech.co.uk
Description: Custom theme for House of Duafe, a mobile afro hair styling studio. Built by Tempa Tech.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: house-of-duafe

This comment block above is REQUIRED by WordPress — it's how WP
recognises this folder as a theme and shows it under Appearance > Themes.
Everything below this point is the site's actual CSS, unchanged from
the static build, just living here because WordPress expects a theme's
main stylesheet to be called style.css.
*/

:root{
    --cream:#f6efe4;
    --ivory:#fbf7f0;
    --espresso:#2a1f16;
    --espresso-soft:#4a3a2a;
    --gold-1:#b8863b;
    --gold-2:#e8c77c;
    --gold-deep:#8c6423;
    --line: rgba(140,100,35,0.28);
    --max: 1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color: transparent;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--cream);
    color:var(--espresso);
    font-family:'Cormorant Garamond', serif;
    font-size:19px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
    color:var(--espresso);
  }
  .eyebrow{
    font-family:'Jost', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.28em;
    font-size:12.5px;
    color:var(--gold-deep);
    font-weight:500;
  }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Jost', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.15em;
    font-size:13px;
    font-weight:500;
    padding:16px 34px;
    border-radius:999px;
    cursor:pointer;
    border:1px solid var(--espresso);
    transition: all .35s ease;
  }
  .btn-primary{
    background: linear-gradient(135deg, var(--gold-2), var(--gold-1) 60%, var(--gold-deep));
    color:#2a1f16;
    border-color: transparent;
    box-shadow: 0 8px 24px -10px rgba(140,100,35,0.55);
  }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(140,100,35,0.6);}
  .btn-primary:active{ transform: translateY(0) scale(0.97); box-shadow: 0 6px 16px -8px rgba(140,100,35,0.5); }
  .btn-ghost{ background:transparent; color:var(--espresso); }
  .btn-ghost:hover{ background:var(--espresso); color:var(--cream); }
  .btn-ghost:active{ background:var(--espresso); color:var(--cream); transform:scale(0.97); }

  /* ---------- Braid divider (signature motif) ---------- */
  .braid{ width:100%; height:34px; overflow:hidden; opacity:0.8; }
  .braid svg{ width:100%; height:100%; display:block; }

  /* ---------- Nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(246,239,228,0.86);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px;
    max-width:var(--max); margin:0 auto;
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand img{ height:40px; width:auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.08)); }
  .brand-name{ font-family:'Fraunces', serif; font-size:20px; letter-spacing:0.02em; }
  .brand-name b{ display:block; font-size:23px; font-weight:600; margin-top:-2px;}
  .nav-links{ display:flex; align-items:center; gap:38px; }
  .nav-links a{
    font-family:'Jost', sans-serif; font-size:13px;
    text-transform:uppercase; letter-spacing:0.15em;
    color:var(--espresso-soft);
    position:relative; padding-bottom:4px;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:var(--gold-1); transition:width .3s ease;
  }
  .nav-links a:hover::after{ width:100%; }
  .nav-cta{ display:flex; align-items:center; gap:22px; }
  .burger{
    display:none; flex-direction:column; gap:5px; cursor:pointer;
    min-width:44px; min-height:44px; align-items:center; justify-content:center; padding:0;
  }
  .burger span{ width:24px; height:1.5px; background:var(--espresso); transition:transform .3s ease, opacity .3s ease; }
  .burger.active span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .burger.active span:nth-child(2){ opacity:0; }
  .burger.active span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .nav-links.open a{ font-size:16px; padding:12px 0; width:100%; }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    padding: 110px 32px 90px;
    text-align:center;
    overflow:hidden;
  }
  .hero::before{
    content:'';
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 90% 75% at 50% -8%, rgba(184,134,59,0.5), rgba(184,134,59,0.22) 42%, rgba(184,134,59,0.06) 70%, transparent 92%),
      linear-gradient(180deg, rgba(42,31,22,0.05), transparent 65%);
    pointer-events:none;
  }
  .hero-emblem{
    width:92px; margin:0 auto 28px;
    animation: floatIn 1.1s ease both;
  }
  .hero h1{
    font-size:clamp(34px, 5vw, 58px);
    line-height:1.15;
    max-width:960px;
    margin:0 auto;
    animation: floatIn 1.1s .1s ease both;
  }
  .hero h1.hero-oneline{
    font-size:clamp(30px, 4.6vw, 48px);
    line-height:1.2;
    max-width:800px;
    margin:0 auto;
    white-space:normal;
  }
  /* Only force a genuine single line once the viewport is wide enough
     to fit the full sentence at a comfortable, readable size. Below
     this width it wraps naturally like the rule above, which reads
     far better on phones and tablets than a shrunk-to-fit line. */
  @media (min-width:1280px){
    .hero h1.hero-oneline{
      white-space:nowrap;
      max-width:none;
      width:100%;
      font-size:2.5vw;
    }
  }
  .hero h1 em{
    font-style:italic;
    font-weight:400;
    background: linear-gradient(100deg, var(--gold-deep), var(--gold-1) 40%, var(--gold-2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero p.lede{
    max-width:520px; margin:26px auto 0;
    font-size:20px; color:var(--espresso-soft);
    animation: floatIn 1.1s .2s ease both;
  }
  .hero-ctas{
    display:flex; gap:18px; justify-content:center; margin-top:40px; flex-wrap:wrap;
    animation: floatIn 1.1s .3s ease both;
  }
  .hero-tagline{
    margin-top:64px;
    font-family:'Jost', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.3em;
    font-size:12px;
    color:var(--gold-deep);
    display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
    animation: floatIn 1.1s .4s ease both;
  }
  .hero-tagline span:not(:last-child)::after{ content:'•'; margin-left:14px; color:var(--line); }

  @keyframes floatIn{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-emblem,.hero h1,.hero p.lede,.hero-ctas,.hero-tagline{ animation:none; }
  }

  /* ---------- About page ---------- */
  .about-hero{
    padding:120px 32px 40px;
    text-align:center;
    background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(184,134,59,0.28), transparent 80%);
  }
  .about-hero h1{ font-size:clamp(36px,5vw,56px); margin-top:10px; }
  .about-layout{
    display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:center;
  }
  .about-photo{
    aspect-ratio:4/5;
    border-radius:16px;
    background: linear-gradient(150deg, var(--gold-2), var(--gold-1) 60%, var(--gold-deep));
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.85);
    font-family:'Jost',sans-serif; letter-spacing:.15em; text-transform:uppercase; font-size:13px;
    box-shadow: 0 20px 40px -18px rgba(42,31,22,0.35);
  }
  .about-copy p{ color:var(--espresso-soft); font-size:19px; margin-bottom:20px; }
  .about-copy p:last-child{ margin-bottom:0; }
  @media (max-width:860px){
    .about-layout{ grid-template-columns:1fr; gap:36px; }
    .about-photo{ aspect-ratio:16/9; }
  }

  /* ---------- Section shells ---------- */
  section{ padding:100px 32px; }
  .alt{ background:var(--ivory); }
  #services{ background: linear-gradient(180deg, var(--ivory), #f2ebdf); }
  .section-head{ text-align:center; max-width:640px; margin:0 auto 64px; }
  .section-head h2{ font-size:clamp(30px,4vw,46px); margin-top:14px; }
  .section-head p{ margin-top:16px; color:var(--espresso-soft); font-size:19px; }

  /* ---------- Philosophy (three symbols) ---------- */
  .pillars{
    max-width:var(--max); margin:0 auto;
    display:grid; grid-template-columns:repeat(3,1fr); gap:44px;
  }
  .pillar{ text-align:center; padding:0 12px; }
  .pillar .mark{
    width:88px; height:88px; margin:0 auto 22px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: radial-gradient(circle at 35% 30%, var(--gold-2), var(--gold-1) 70%);
    box-shadow: 0 10px 24px -10px rgba(140,100,35,0.5);
    padding:14px;
  }
  .pillar .mark img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15)); }
  .pillar h3{ font-size:23px; font-weight:600; }
  .pillar .tag{ font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin:8px 0 14px; }
  .pillar p{ color:var(--espresso-soft); font-size:17.5px; }

  /* ---------- Services (styled after the RJ card pattern) ---------- */
  .services-grid{
    max-width:var(--max); margin:0 auto;
    display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:32px;
  }
  .service-card{
    background:#ffffff;
    padding:40px 32px;
    border-radius:16px;
    text-align:center;
    box-shadow: 0 10px 26px -14px rgba(42,31,22,0.18);
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .service-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 18px 34px -14px rgba(42,31,22,0.28);
  }
  .service-card:active{
    transform: translateY(-2px) scale(0.98);
    box-shadow: 0 10px 20px -12px rgba(42,31,22,0.25);
  }
  .service-icon{ font-size:40px; margin-bottom:16px; line-height:1; }
  .service-top{ display:flex; flex-direction:column; align-items:center; gap:4px; }
  .service-card h3{ font-size:21px; font-weight:600; }
  .service-price{ font-family:'Fraunces',serif; font-size:22px; color:var(--gold-deep); font-weight:600; display:inline-block; margin-top:6px; }
  .service-card p{ margin-top:10px; color:#7a7369; font-size:16.5px; }
  .service-note{
    text-align:center; margin-top:34px; font-family:'Jost',sans-serif;
    font-size:13px; letter-spacing:.05em; color:var(--espresso-soft);
  }

  /* ---------- Gallery ---------- */
  .gallery-grid{
    max-width:var(--max); margin:0 auto;
    display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:14px;
  }
  .gallery-grid .g1{ grid-column:span 2; grid-row:span 2; }
  .gallery-grid .g5{ grid-column:span 2; }
  .g-item{
    border-radius:6px;
    position:relative; overflow:hidden;
    display:flex; align-items:flex-end; padding:18px;
    color:#fff;
  }
  .g-item::before{
    content:''; position:absolute; inset:0;
    background: linear-gradient(160deg, var(--gold-deep), var(--espresso) 120%);
    opacity:0.92;
  }
  .g-item:nth-child(2)::before{ background: linear-gradient(160deg, #9c7a4a, #2a1f16 120%); }
  .g-item:nth-child(3)::before{ background: linear-gradient(160deg, var(--gold-1), #3a2c1c 120%); }
  .g-item:nth-child(4)::before{ background: linear-gradient(160deg, #7c5a2e, #241a12 120%); }
  .g-item:nth-child(5)::before{ background: linear-gradient(160deg, var(--gold-2), #4a3a2a 130%); }
  .g-item span{ position:relative; font-family:'Jost',sans-serif; font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; }
  .gallery-note{ text-align:center; margin-top:28px; color:var(--espresso-soft); font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.05em; }

  /* ---------- Testimonials ---------- */
  .testi-wrap{ max-width:900px; margin:0 auto; text-align:center; }
  .testi{ display:none; }
  .testi.active{ display:block; animation:floatIn .6s ease both; }
  .testi p{ font-family:'Fraunces',serif; font-style:italic; font-size:clamp(22px,3vw,30px); font-weight:400; line-height:1.5; color:var(--espresso); }
  .testi .who{ margin-top:24px; font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-deep); }
  .testi-dots{ display:flex; gap:6px; justify-content:center; margin-top:40px; }
  .testi-dots button{
    width:44px; height:44px; /* real touch target, per mobile accessibility guidelines */
    border-radius:50%; border:none; background:transparent; cursor:pointer; padding:0;
    position:relative;
  }
  .testi-dots button::after{
    content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:8px; height:8px; border-radius:50%; background:var(--line); transition:background .3s ease, transform .3s ease;
  }
  .testi-dots button.active::after{ background:var(--gold-1); transform:translate(-50%,-50%) scale(1.3); }

  /* ---------- Booking ---------- */
  .book-panel{
    max-width:960px; margin:0 auto;
    background:var(--espresso);
    color:var(--cream);
    border-radius:18px;
    padding:64px;
    display:grid; grid-template-columns:1fr 1fr; gap:56px;
  }
  .book-panel h2{ color:var(--cream); font-size:34px; }
  .book-panel .eyebrow{ color:var(--gold-2); }
  .book-info p{ color:rgba(246,239,228,0.75); margin-top:16px; font-size:18px;}
  .book-info .row{ margin-top:28px; }
  .book-info .row b{ display:block; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2); margin-bottom:6px; font-weight:500;}
  form{ display:flex; flex-direction:column; gap:16px; }
  form input, form select, form textarea{
    background:rgba(246,239,228,0.06);
    border:1px solid rgba(246,239,228,0.25);
    color:var(--cream);
    padding:14px 16px;
    border-radius:8px;
    font-family:'Cormorant Garamond',serif;
    font-size:17px;
  }
  form select option{ color:var(--espresso); }
  form textarea{ resize:vertical; font-family:'Cormorant Garamond',serif; }
  form input::placeholder, form textarea::placeholder{ color:rgba(246,239,228,0.5); }
  form .btn-primary{ margin-top:6px; text-align:center; justify-content:center; border:none; }

  /* ---------- Booking step-2 details reveal ---------- */
  .booking-details{
    display:flex; flex-direction:column; gap:16px;
    max-height:0; overflow:hidden; opacity:0;
    transition: max-height .5s ease, opacity .4s ease .05s, margin .5s ease;
    margin-top:-16px;
  }
  .booking-details.open{
    max-height:600px; opacity:1; margin-top:0;
  }
  .booking-details-label{
    font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--gold-2); padding-top:6px; border-top:1px solid rgba(246,239,228,0.18);
  }

  /* ---------- Footer ---------- */
  footer{ padding:70px 32px 40px; text-align:center; }
  .footer-emblem{ width:54px; margin:0 auto 18px; opacity:0.9; }
  footer .brand-name{ font-size:26px; justify-content:center; }
  .footer-tagline{ margin-top:10px; color:var(--espresso-soft); font-size:16.5px; }
  .footer-links{ display:flex; gap:30px; justify-content:center; margin-top:30px; font-family:'Jost',sans-serif; font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--espresso-soft); flex-wrap:wrap;}
  .footer-links a:hover{ color:var(--gold-deep); }
  .copyright{ margin-top:36px; font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:.1em; color:rgba(42,31,22,0.45); }

  /* ---------- Reveal on scroll ---------- */
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------- Responsive ---------- */
  @media (max-width: 1024px){
    .wrap{ padding:0 26px; }
    nav{ padding:16px 26px; }
    .book-panel{ padding:52px; gap:40px; }
  }
  @media (max-width: 900px){
    .pillars{ grid-template-columns:1fr; gap:52px; max-width:420px; }
    .services-grid{ grid-template-columns:1fr; }
    .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
    .gallery-grid .g1{ grid-column:span 2; grid-row:span 1; }
    .gallery-grid .g5{ grid-column:span 1; }
    .book-panel{ grid-template-columns:1fr; padding:40px 28px; gap:36px; }
  }
  @media (max-width: 720px){
    .nav-links{ display:none; }
    .burger{ display:flex; }
    section{ padding:70px 20px; }
    .hero{ padding:90px 20px 56px; }
    .section-head{ margin-bottom:48px; }
  }
  @media (max-width: 600px){
    body{ font-size:17.5px; }
    .wrap{ padding:0 20px; }
    nav{ padding:14px 20px; }
    .brand img{ height:34px; }
    .brand-name{ font-size:17px; }
    .brand-name b{ font-size:19px; }
    .nav-cta{ gap:14px; }
    .nav-cta .btn-primary{ padding:10px 18px; font-size:11px; }
    .hero{ padding:76px 18px 48px; }
    .hero-emblem{ width:70px; margin-bottom:20px; }
    .hero h1.hero-oneline{ font-size:clamp(28px, 8vw, 38px); }
    .hero p.lede{ font-size:18px; padding:0 6px; }
    .hero-ctas{ flex-direction:column; align-items:stretch; gap:14px; }
    .hero-ctas .btn{ justify-content:center; }
    .hero-tagline{ gap:8px 10px; font-size:10.5px; margin-top:44px; }
    .hero-tagline span:not(:last-child)::after{ margin-left:8px; }
    section{ padding:56px 18px; }
    .section-head p{ font-size:17px; }
    .pillar h3{ font-size:21px; }
    .pillar p{ font-size:16.5px; }
    .service-card{ padding:30px 24px; }
    .gallery-grid{ grid-template-columns:1fr; grid-auto-rows:190px; gap:12px; }
    .gallery-grid .g1,.gallery-grid .g5{ grid-column:span 1; }
    .testi p{ font-size:20px; padding:0 4px; }
    .book-panel{ padding:32px 22px; border-radius:14px; }
    .book-panel h2{ font-size:28px; }
    .book-info p{ font-size:17px; }
    form input, form select, form textarea{ font-size:16px; padding:12px 14px; }
    footer{ padding:56px 20px 32px; }
    .footer-links{ gap:16px 22px; }
  }
  @media (max-width: 380px){
    .hero h1.hero-oneline{ font-size:8.2vw; }
    .nav-cta .btn-primary{ padding:9px 14px !important; font-size:10px !important; }
  }