/*
Theme Name: Passibloom
Theme URI: https://passibloom.com
Author: Passibloom
Author URI: https://passibloom.com
Description: A custom one-page WordPress theme for Passibloom, a destination wedding, floral design and event styling studio based in Zanzibar. Built as an editorial, image-led landing page with anchored sections for Home, About, Services, The Experience, Zanzibar, Portfolio and Contact.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: passibloom
*/

  :root{
    --ivory:#F7F2E8;
    --sand:#E7D9C0;
    --olive:#6C6F4B;
    --olive-deep:#4F5238;
    --clay:#B76A44;
    --clay-deep:#9A5636;
    --brown:#3A2C20;
    --brown-soft:#5C4A3A;
    --near-black:#221A14;
    --line:rgba(58,44,32,0.14);
    --ivory-rgb:247,242,232;
    --transition-slow: 900ms cubic-bezier(.16,.8,.24,1);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ivory);
    color:var(--brown);
    font-family:'Inter', sans-serif;
    font-weight:400;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;margin:0;padding:0;}

  h1,h2,h3,h4{
    font-family:'Fraunces', serif;
    font-weight:400;
    margin:0;
    color:var(--brown);
    letter-spacing:-0.01em;
  }

  .eyebrow{
    text-transform:uppercase;
    letter-spacing:0.22em;
    font-size:0.72rem;
    font-weight:500;
    color:var(--clay-deep);
  }

  .wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 6vw;
  }

  @media(min-width:1400px){ .wrap{padding:0 80px;} }

  /* ---------- Wave signature ---------- */
  .tideline{
    width:100%;
    height:34px;
    display:block;
  }
  .tideline path{
    fill:none;
    stroke:var(--clay);
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-dasharray:600;
    stroke-dashoffset:600;
    transition:stroke-dashoffset 1.6s cubic-bezier(.16,.8,.24,1);
  }
  .tideline.in-view path{stroke-dashoffset:0;}
  .tideline.dark path{stroke:rgba(247,242,232,0.55);}

  /* ---------- Nav ---------- */
  header.site-nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    padding:26px 6vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:padding .5s ease, border-color .5s ease;
    border-bottom:1px solid transparent;
    background-image:linear-gradient(180deg, rgba(34,26,20,0.58) 0%, rgba(34,26,20,0.06) 100%), url('assets/images/header-bg.jpg');
    background-size:cover;
    background-position:center 70%;
    background-repeat:no-repeat;
  }
  header.site-nav.solid{
    background-image:linear-gradient(180deg, rgba(247,242,232,0.94) 0%, rgba(247,242,232,0.9) 100%), url('assets/images/header-bg.jpg');
    background-size:cover;
    background-position:center 70%;
    backdrop-filter:blur(10px);
    padding:16px 6vw;
    border-bottom:1px solid var(--line);
  }
  .logo{
    font-family:'Fraunces', serif;
    font-size:1.35rem;
    letter-spacing:0.02em;
    font-style:italic;
    color:var(--brown);
  }
  header.site-nav.solid .logo, header.site-nav.solid .nav-links a, .burger span{color:var(--brown);}
  .nav-links{
    display:flex;
    gap:34px;
    align-items:center;
  }
  .nav-links a{
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ivory);
    position:relative;
    transition:color .3s;
    text-shadow:0 1px 3px rgba(0,0,0,0.25);
  }
  header.site-nav.solid .nav-links a{text-shadow:none;}
  .nav-links a::after{
    content:'';
    position:absolute;left:0;bottom:-6px;
    width:0;height:1px;background:var(--clay);
    transition:width .3s;
  }
  .nav-links a:hover::after{width:100%;}
  .btn{
    display:inline-block;
    padding:13px 28px;
    border:1px solid currentColor;
    border-radius:100px;
    font-size:0.76rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    transition:all .35s;
    white-space:nowrap;
  }
  .btn-clay{
    background:var(--clay);
    border-color:var(--clay);
    color:var(--ivory);
  }
  .btn-clay:hover{background:var(--clay-deep);border-color:var(--clay-deep);}
  .btn-outline-light{color:var(--ivory);}
  .btn-outline-light:hover{background:rgba(247,242,232,0.12);}
  .btn-outline-dark{color:var(--brown);}
  .btn-outline-dark:hover{background:var(--brown);color:var(--ivory);}

  .burger{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    z-index:200;
  }
  .burger span{
    width:26px;height:1px;background:var(--ivory);
    transition:.3s;
  }
  header.site-nav.solid .burger span{background:var(--brown);}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    height:100svh;
    min-height:640px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
  }
  .hero-media{
    position:absolute;inset:0;
    background:url('assets/images/zanzibar-ceremony-chairs.jpg') center 30%/cover no-repeat;
    transform:scale(1.08);
    animation:heroZoom 16s ease-out forwards;
  }
  @keyframes heroZoom{ to{ transform:scale(1);} }
  .hero-media::after{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(34,26,20,0.28) 0%, rgba(34,26,20,0.15) 40%, rgba(34,26,20,0.72) 100%);
  }
  .hero-content{
    position:relative;
    z-index:2;
    padding:0 6vw 9vh;
    color:var(--ivory);
    max-width:900px;
  }
  .hero-content .eyebrow{color:var(--sand);}
  .hero h1{
    font-size:clamp(2.6rem, 6.4vw, 5.4rem);
    font-weight:300;
    line-height:1.04;
    color:var(--ivory);
    margin:14px 0 22px;
  }
  .hero h1 em{font-style:italic;font-weight:400;color:var(--sand);}
  .hero p{
    font-size:1.08rem;
    max-width:520px;
    color:rgba(247,242,232,0.88);
    margin-bottom:34px;
    font-weight:300;
  }
  .scroll-cue{
    position:absolute;
    right:6vw; bottom:36px;
    z-index:2;
    color:var(--ivory);
    writing-mode:vertical-rl;
    font-size:0.7rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    display:flex;align-items:center;gap:14px;
    opacity:0.75;
  }
  .scroll-cue::after{
    content:'';
    width:1px;height:60px;
    background:var(--ivory);
    display:block;
  }

  /* ---------- Reveal ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 1.1s cubic-bezier(.16,.8,.24,1), transform 1.1s cubic-bezier(.16,.8,.24,1);
  }
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .reveal.d1{transition-delay:.1s;}
  .reveal.d2{transition-delay:.22s;}
  .reveal.d3{transition-delay:.34s;}

  section{position:relative;}

  /* ---------- Intro / Story ---------- */
  .intro{
    padding:150px 0 120px;
  }
  .intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
  }
  .intro-media{
    position:relative;
  }
  .intro-media img{
    border-radius:2px;
  }
  .intro-media .accent-frame{
    position:absolute;
    top:-24px; left:-24px;
    width:60%; height:60%;
    border:1px solid var(--clay);
    z-index:-1;
  }
  .intro h2{
    font-size:clamp(2rem, 3.6vw, 3rem);
    font-weight:300;
    line-height:1.14;
    margin:16px 0 26px;
  }
  .intro h2 em{font-style:italic;color:var(--clay-deep);}
  .intro p{color:var(--brown-soft);font-size:1.02rem;margin-bottom:18px;max-width:480px;}

  /* ---------- Services ---------- */
  .services{
    background:var(--brown);
    color:var(--ivory);
    padding:130px 0 120px;
  }
  .services .eyebrow{color:var(--sand);}
  .services-head{
    max-width:640px;
    margin-bottom:70px;
  }
  .services-head h2{
    color:var(--ivory);
    font-size:clamp(2rem, 3.6vw, 3rem);
    font-weight:300;
    line-height:1.16;
    margin-top:16px;
  }
  .services-head h2 em{font-style:italic;color:var(--sand);}
  .service-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:rgba(247,242,232,0.14);
    border-top:1px solid rgba(247,242,232,0.14);
  }
  .service-card{
    background:var(--brown);
    padding:44px 28px 40px;
    transition:background .4s;
  }
  .service-card:nth-child(2){background:#3F2F22;}
  .service-card:nth-child(3){background:var(--brown);}
  .service-card:nth-child(4){background:#3F2F22;}
  .service-card:hover{background:var(--olive-deep);}
  .service-num{
    font-family:'Fraunces',serif;
    font-style:italic;
    color:var(--clay);
    font-size:0.95rem;
    margin-bottom:34px;
    display:block;
  }
  .service-card h3{
    color:var(--ivory);
    font-size:1.32rem;
    font-weight:400;
    margin-bottom:14px;
  }
  .service-card p{
    color:rgba(247,242,232,0.68);
    font-size:0.92rem;
    margin-bottom:22px;
  }
  .service-card .link{
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--sand);
    border-bottom:1px solid rgba(231,217,192,0.4);
    padding-bottom:3px;
  }

  /* full service detail sections */
  .service-detail{
    padding:110px 0;
    border-bottom:1px solid var(--line);
  }
  .service-detail:last-of-type{border-bottom:none;}
  .sd-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:70px;
    align-items:start;
  }
  .service-detail.flip .sd-grid{grid-template-columns:1.15fr 0.85fr;}
  .service-detail.flip .sd-media{order:2;}
  .sd-media img{border-radius:2px;}
  .sd-copy .eyebrow{margin-bottom:16px;display:block;}
  .sd-copy h3{
    font-size:clamp(1.7rem,3vw,2.4rem);
    font-weight:300;
    line-height:1.18;
    margin-bottom:20px;
  }
  .sd-copy p{color:var(--brown-soft);margin-bottom:24px;max-width:560px;}
  .sd-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 28px;
    margin-top:8px;
  }
  .sd-list li{
    font-size:0.92rem;
    color:var(--brown-soft);
    padding-left:18px;
    position:relative;
  }
  .sd-list li::before{
    content:'';
    position:absolute;left:0;top:0.65em;
    width:8px;height:1px;
    background:var(--clay);
  }

  /* ---------- Zanzibar section ---------- */
  .zanzibar{
    padding:0;
    position:relative;
    min-height:88vh;
    display:flex;
    align-items:center;
    color:var(--ivory);
  }
  .zanzibar-media{
    position:absolute;inset:0;
    background:url('assets/images/couple-dog-arch.jpg') center 22%/cover;
  }
  .zanzibar-media::after{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(90deg, rgba(34,26,20,0.82) 0%, rgba(34,26,20,0.5) 48%, rgba(34,26,20,0.15) 100%);
  }
  .zanzibar-content{
    position:relative;z-index:2;
    max-width:560px;
    padding:110px 0;
  }
  .zanzibar h2{
    color:var(--ivory);
    font-size:clamp(2.1rem,4vw,3.2rem);
    font-weight:300;
    line-height:1.14;
    margin:16px 0 24px;
  }
  .zanzibar h2 em{font-style:italic;color:var(--sand);}
  .zanzibar p{color:rgba(247,242,232,0.86);margin-bottom:16px;font-weight:300;}
  .zanzibar .eyebrow{color:var(--sand);}
  .zanzibar-tags{
    display:flex;flex-wrap:wrap;gap:12px;
    margin:30px 0 36px;
  }
  .zanzibar-tags span{
    font-size:0.74rem;letter-spacing:0.1em;text-transform:uppercase;
    border:1px solid rgba(247,242,232,0.4);
    padding:9px 16px;border-radius:100px;
    color:rgba(247,242,232,0.92);
  }

  /* ---------- Experience journey ---------- */
  .experience{padding:130px 0 100px;}
  .exp-head{max-width:620px;margin-bottom:80px;}
  .exp-head h2{font-size:clamp(2rem,3.6vw,3rem);font-weight:300;line-height:1.16;margin-top:16px;}
  .exp-head h2 em{font-style:italic;color:var(--clay-deep);}
  .journey{
    display:flex;
    flex-direction:column;
  }
  .journey-step{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:36px;
    padding:36px 0;
    border-top:1px solid var(--line);
    align-items:baseline;
  }
  .journey-step:last-child{border-bottom:1px solid var(--line);}
  .journey-num{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:1.5rem;
    color:var(--clay);
  }
  .journey-body h3{
    font-size:1.36rem;font-weight:400;margin-bottom:10px;
  }
  .journey-body p{color:var(--brown-soft);max-width:640px;margin:0;font-size:0.98rem;}

  /* ---------- Portfolio ---------- */
  .portfolio{
    background:var(--sand);
    padding:130px 0 120px;
  }
  .portfolio-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin-bottom:60px;flex-wrap:wrap;gap:24px;
  }
  .portfolio-head h2{font-size:clamp(2rem,3.6vw,3rem);font-weight:300;line-height:1.16;margin-top:16px;}
  .portfolio-head h2 em{font-style:italic;color:var(--clay-deep);}
  .masonry{
    columns:3 260px;
    column-gap:20px;
  }
  .masonry figure{
    margin:0 0 20px;
    break-inside:avoid;
    position:relative;
    overflow:hidden;
    border-radius:2px;
  }
  .masonry img{
    width:100%;
    display:block;
    transition:transform 1.1s cubic-bezier(.16,.8,.24,1);
  }
  .masonry figure:hover img{transform:scale(1.05);}
  .masonry figcaption{
    position:absolute;left:0;right:0;bottom:0;
    padding:22px 18px 16px;
    background:linear-gradient(180deg, rgba(34,26,20,0) 0%, rgba(34,26,20,0.62) 100%);
    color:var(--ivory);
    font-size:0.76rem;
    letter-spacing:0.06em;
    opacity:0;
    transition:opacity .4s;
  }
  .masonry figure:hover figcaption{opacity:1;}

  /* ---------- Final CTA ---------- */
  .final-cta{
    position:relative;
    min-height:70vh;
    display:flex;align-items:center;justify-content:center;
    text-align:center;
    color:var(--ivory);
    overflow:hidden;
  }
  .final-media{
    position:absolute;inset:0;
    background:url('assets/images/couple-tablescape-forest.jpg') center 30%/cover;
  }
  .final-media::after{
    content:'';position:absolute;inset:0;
    background:rgba(34,26,20,0.62);
  }
  .final-content{position:relative;z-index:2;max-width:640px;padding:0 6vw;}
  .final-content .eyebrow{color:var(--sand);display:block;margin-bottom:18px;}
  .final-content h2{
    color:var(--ivory);
    font-size:clamp(2.2rem,4.6vw,3.8rem);
    font-weight:300;line-height:1.14;margin-bottom:22px;
  }
  .final-content h2 em{font-style:italic;color:var(--sand);}
  .final-content p{color:rgba(247,242,232,0.86);margin-bottom:36px;font-weight:300;}

  /* ---------- Contact ---------- */
  .contact{padding:130px 0 100px;}
  .contact-grid{
    display:grid;grid-template-columns:0.9fr 1.1fr;gap:80px;
  }
  .contact-info h2{
    font-size:clamp(2rem,3.6vw,2.8rem);font-weight:300;line-height:1.16;margin:16px 0 26px;
  }
  .contact-info h2 em{font-style:italic;color:var(--clay-deep);}
  .contact-info p{color:var(--brown-soft);margin-bottom:34px;max-width:420px;}
  .contact-methods{margin-top:44px;}
  .contact-methods li{
    padding:18px 0;
    border-top:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;
    font-size:0.94rem;
  }
  .contact-methods li:last-child{border-bottom:1px solid var(--line);}
  .contact-methods .label{
    text-transform:uppercase;letter-spacing:0.12em;font-size:0.7rem;color:var(--clay-deep);
  }
  .contact-methods a{border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .3s;}
  .contact-methods a:hover{border-color:var(--clay);}

  form.enquiry{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px 24px;
  }
  form.enquiry .full{grid-column:1 / -1;}
  .field label{
    display:block;
    font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--clay-deep);
    margin-bottom:9px;
  }
  .field input, .field select, .field textarea{
    width:100%;
    border:none;
    border-bottom:1px solid var(--line);
    background:transparent;
    padding:10px 2px;
    font-family:'Inter',sans-serif;
    font-size:0.98rem;
    color:var(--brown);
    outline:none;
    transition:border-color .3s;
  }
  .field textarea{resize:vertical;min-height:110px;font-family:'Inter',sans-serif;}
  .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--clay);}
  .field select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--clay) 50%), linear-gradient(135deg, var(--clay) 50%, transparent 50%);background-position:calc(100% - 6px) center, calc(100% - 1px) center;background-size:6px 6px;background-repeat:no-repeat;}
  form.enquiry button{
    margin-top:10px;
    justify-self:start;
    cursor:pointer;
    font-family:'Inter',sans-serif;
  }
  .form-note{grid-column:1/-1;font-size:0.8rem;color:var(--brown-soft);opacity:0.75;margin-top:-6px;}

  /* ---------- Footer ---------- */
  footer{
    background:var(--near-black);
    color:rgba(247,242,232,0.75);
    padding:80px 0 30px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 0.8fr 0.8fr 1fr;
    gap:50px;
    padding-bottom:60px;
    border-bottom:1px solid rgba(247,242,232,0.12);
  }
  footer .logo{color:var(--ivory);margin-bottom:16px;display:block;}
  footer .foot-tag{font-size:0.86rem;color:rgba(247,242,232,0.55);max-width:280px;line-height:1.6;}
  footer h4{
    color:var(--ivory);font-family:'Inter',sans-serif;font-weight:500;
    text-transform:uppercase;letter-spacing:0.12em;font-size:0.72rem;margin-bottom:20px;
  }
  footer ul li{margin-bottom:12px;font-size:0.9rem;}
  footer ul li a{color:rgba(247,242,232,0.72);transition:color .3s;}
  footer ul li a:hover{color:var(--sand);}
  .foot-bottom{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:30px;font-size:0.78rem;color:rgba(247,242,232,0.45);
    flex-wrap:wrap;gap:14px;
  }
  .foot-social{
    display:flex;gap:16px;
  }
  .foot-social a{color:rgba(247,242,232,0.75);}

  /* ---------- Sticky mobile enquire ---------- */
  .sticky-enquire{
    display:none;
    position:fixed;bottom:0;left:0;right:0;
    z-index:90;
    background:var(--brown);
    padding:14px 6vw;
    text-align:center;
  }
  .sticky-enquire a{
    display:block;width:100%;
    color:var(--ivory);
    font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;
  }

  /* ---------- Responsive ---------- */
  @media(max-width:980px){
    .intro-grid, .sd-grid, .contact-grid{grid-template-columns:1fr;gap:44px;}
    .service-detail.flip .sd-media{order:0;}
    .service-list{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .masonry{columns:2 220px;}
  }
  @media(max-width:760px){
    .nav-links{
      position:fixed;top:0;right:0;
      height:100vh;width:78vw;max-width:340px;
      background:var(--brown);
      flex-direction:column;
      align-items:flex-start;
      justify-content:center;
      gap:26px;
      padding:0 44px;
      transform:translateX(100%);
      transition:transform .5s cubic-bezier(.16,.8,.24,1);
    }
    .nav-links.open{transform:translateX(0);}
    .nav-links a{color:var(--ivory);text-shadow:none;font-size:0.95rem;}
    .nav-links .btn{margin-top:10px;}
    .burger{display:flex;}
    .service-list{grid-template-columns:1fr;}
    form.enquiry{grid-template-columns:1fr;}
    .masonry{columns:1;}
    .journey-step{grid-template-columns:1fr;gap:10px;}
    .sticky-enquire{display:block;}
    .contact{padding-bottom:160px;}
    .footer-grid{grid-template-columns:1fr;gap:36px;}
  }