/*
Theme Name: Steamy Storm Offerings
Theme URI: https://steamystormofferings.example
Author: Steamy Storm Offerings LLP
Author URI: https://steamystormofferings.example
Description: A one-page corporate food & beverage / cafe theme for Steamy Storm Offerings LLP, converted from a custom HTML design. Includes an editable primary menu and Customizer fields for phone, WhatsApp and email.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: steamy-storm
*/

:root{
    --bg: #16130f;
    --bg-panel: #1e1811;
    --bg-panel-2: #241d15;
    --storm: #4d6472;
    --storm-soft: #6d8695;
    --copper: #c5793f;
    --copper-soft: #dda06a;
    --ivory: #f4ecdf;
    --ivory-dim: #cdc2b0;
    --muted: #93887a;
    --hairline: #3a3226;
    --hairline-soft: rgba(244,236,223,0.08);
    --wa: #3fae64;
    --ease: cubic-bezier(.16,.84,.44,1);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  }

  body{
    background:var(--bg);
    color:var(--ivory);
    font-family:'Inter', sans-serif;
    font-weight:400;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  ::selection{ background:var(--copper); color:#16130f; }

  a{ color:inherit; text-decoration:none; }

  img,svg{ display:block; max-width:100%; }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 clamp(24px,5vw,64px);
  }

  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
  }

  .eyebrow{
    font-family:'Inter', sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--copper-soft);
    display:inline-flex;
    align-items:center;
    gap:12px;
  }
  .eyebrow::before{
    content:'';
    width:26px;
    height:1px;
    background:var(--copper-soft);
    display:inline-block;
  }

  .nav-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    z-index:104;
    opacity:0;
    transition:opacity .4s var(--ease);
  }
  .nav-overlay.open{ display:block; opacity:1; }
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--copper-soft);
    outline-offset:4px;
    border-radius:4px;
  }

  /* ---------- Header ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:200;
    padding:22px 0;
    transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(22,19,15,0.88);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    padding:14px 0;
    border-bottom:1px solid var(--hairline-soft);
  }
  header .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }
  .wordmark{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    font-size:22px;
    letter-spacing:0.01em;
    color:var(--ivory);
    white-space:nowrap;
  }
  .wordmark span{ color:var(--copper-soft); font-style:normal; }

  nav.primary-nav{
    display:flex;
    gap:clamp(14px,2.4vw,30px);
  }
  nav.primary-nav a{
    font-size:13px;
    font-weight:500;
    letter-spacing:0.03em;
    color:var(--ivory-dim);
    position:relative;
    padding:4px 0;
    white-space:nowrap;
    transition:color .3s;
  }
  nav.primary-nav a::after{
    content:'';
    position:absolute;
    left:0; bottom:-2px;
    width:0%; height:1px;
    background:var(--copper-soft);
    transition:width .35s var(--ease);
  }
  nav.primary-nav a:hover{ color:var(--ivory); }
  nav.primary-nav a:hover::after{ width:100%; }

  .header-actions{ display:flex; align-items:center; gap:18px; }

  .menu-toggle{
    display:none;
    background:none;
    border:1px solid var(--hairline);
    border-radius:50%;
    width:40px; height:40px;
    color:var(--ivory);
    cursor:pointer;
    position:relative;
    flex-shrink:0;
    z-index:110;
  }
  .menu-toggle svg{
    width:18px; height:18px;
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
  }
  .menu-toggle .icon-close{ display:none; }
  .menu-toggle.open .icon-menu{ display:none; }
  .menu-toggle.open .icon-close{ display:block; }

  /* ---------- WhatsApp button ---------- */
  .contact-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--hairline);
    color:var(--ivory-dim);
    font-size:13px;
    font-weight:500;
    letter-spacing:0.03em;
    padding:11px 22px;
    border-radius:999px;
    white-space:nowrap;
    transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
  }
  .contact-icon{ width:16px; height:16px; flex-shrink:0; display:none; }
  .contact-btn:hover{
    border-color:var(--copper-soft);
    color:var(--ivory);
    background:rgba(197,121,63,0.08);
  }

  .wa-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--wa);
    color:#0f1a12;
    font-weight:600;
    font-size:13.5px;
    letter-spacing:0.01em;
    padding:12px 22px;
    border-radius:999px;
    box-shadow:0 6px 20px -6px rgba(63,174,100,0.55);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
    white-space:nowrap;
  }
  .wa-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 26px -6px rgba(63,174,100,0.7);
    background:#46bd6f;
  }
  .wa-btn svg{ width:18px; height:18px; flex-shrink:0; }
  .wa-btn.ghost{
    background:transparent;
    border:1px solid var(--wa);
    color:var(--wa);
    box-shadow:none;
  }
  .wa-btn.ghost:hover{ background:rgba(63,174,100,0.12); }
  .wa-btn.large{
    padding:17px 34px;
    font-size:15px;
  }

  .wa-float{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:90;
    width:56px; height:56px;
    border-radius:50%;
    background:var(--wa);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 24px -6px rgba(63,174,100,0.6);
    animation:float-pulse 3.6s ease-in-out infinite;
  }
  .wa-float svg{ width:26px; height:26px; color:#0f1a12; }
  @keyframes float-pulse{
    0%,100%{ box-shadow:0 8px 24px -6px rgba(63,174,100,0.6); }
    50%{ box-shadow:0 8px 30px -2px rgba(63,174,100,0.85); }
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:140px 24px 100px;
    overflow:hidden;
    background:
      radial-gradient(ellipse 900px 500px at 50% 15%, rgba(197,121,63,0.16), transparent 60%),
      radial-gradient(ellipse 700px 500px at 80% 90%, rgba(77,100,114,0.18), transparent 60%),
      var(--bg);
  }

  .steam-field{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0.9;
  }
  .steam-wisp{
    position:absolute;
    bottom:-10%;
    width:2px;
    opacity:0;
    filter:blur(0.4px);
    stroke:var(--copper-soft);
    animation:rise 9s ease-in infinite;
  }
  .steam-wisp path{
    stroke:var(--copper-soft);
    stroke-width:2;
    fill:none;
    stroke-linecap:round;
  }
  .steam-wisp.blue path{ stroke:var(--storm-soft); }
  .w1{ left:12%; animation-delay:0s; }
  .w2{ left:24%; animation-delay:2.2s; }
  .w3{ left:70%; animation-delay:1.1s; }
  .w4{ left:84%; animation-delay:3.4s; }
  .w5{ left:48%; animation-delay:4.8s; }

  @keyframes rise{
    0%{ transform:translateY(0) scaleX(1); opacity:0; }
    12%{ opacity:0.55; }
    55%{ opacity:0.35; }
    100%{ transform:translateY(-70vh) scaleX(1.4); opacity:0; }
  }

  .hero-inner{ position:relative; z-index:2; max-width:840px; }

  .hero h1{
    font-size:clamp(38px, 6vw, 68px);
    line-height:1.08;
    color:var(--ivory);
    margin-bottom:26px;
    opacity:0;
    transform:translateY(18px);
    animation:reveal 1s var(--ease) 0.15s forwards;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--copper-soft);
    font-weight:400;
  }

  .hero .sub{
    font-size:clamp(16px,2vw,19px);
    color:var(--ivory-dim);
    max-width:600px;
    margin:0 auto 44px;
    font-weight:300;
    opacity:0;
    transform:translateY(14px);
    animation:reveal 1s var(--ease) 0.4s forwards;
  }

  .hero .cta-row{
    opacity:0;
    transform:translateY(14px);
    animation:reveal 1s var(--ease) 0.65s forwards;
    display:flex;
    justify-content:center;
  }

  @keyframes reveal{
    to{ opacity:1; transform:translateY(0); }
  }

  .scroll-cue{
    position:absolute;
    bottom:36px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:11px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    opacity:0;
    animation:reveal 1s var(--ease) 1.1s forwards;
  }
  .scroll-cue .line{
    width:1px; height:34px;
    background:linear-gradient(var(--copper-soft), transparent);
    animation:cue-move 2.2s ease-in-out infinite;
  }
  @keyframes cue-move{
    0%,100%{ transform:scaleY(1); opacity:.7; }
    50%{ transform:scaleY(0.6); opacity:1; }
  }

  /* ---------- Section shell ---------- */
  section{ position:relative; padding:clamp(80px,10vw,132px) 0; }
  .divider{ height:1px; background:var(--hairline); }
  .section-head{ margin-bottom:56px; max-width:640px; }
  .section-head h2{
    font-size:clamp(28px,3.6vw,42px);
    color:var(--ivory);
    margin-top:18px;
    line-height:1.18;
  }

  /* ---------- About ---------- */
  .about{ background:var(--bg); }
  .about .grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:clamp(32px,6vw,90px);
    align-items:start;
  }
  .about-mark{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:clamp(46px,7vw,84px);
    color:transparent;
    -webkit-text-stroke:1px var(--hairline);
    line-height:1;
    user-select:none;
  }
  .about p{
    color:var(--ivory-dim);
    font-size:17px;
    font-weight:300;
    margin-bottom:20px;
    max-width:560px;
  }
  .about p:last-child{ margin-bottom:0; }

  /* ---------- Services ---------- */
  .services{ background:var(--bg-panel); }
  .service-row{
    display:grid;
    grid-template-columns:56px 1fr auto;
    gap:28px;
    align-items:center;
    padding:32px 0;
    border-top:1px solid var(--hairline);
    transition:padding-left .4s var(--ease), background .4s;
  }
  .service-row:last-child{ border-bottom:1px solid var(--hairline); }
  .service-row:hover{
    padding-left:14px;
    background:rgba(244,236,223,0.02);
  }
  .service-icon{
    width:52px; height:52px;
    border:1px solid var(--hairline);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--copper-soft);
    flex-shrink:0;
    transition:border-color .4s, transform .4s var(--ease);
  }
  .service-row:hover .service-icon{
    border-color:var(--copper-soft);
    transform:rotate(-8deg) scale(1.05);
  }
  .service-icon svg{ width:24px; height:24px; }
  .service-text h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-style:italic;
    font-size:clamp(20px,2.4vw,25px);
    color:var(--ivory);
    margin-bottom:6px;
  }
  .service-text p{
    color:var(--ivory-dim);
    font-size:15px;
    font-weight:300;
    max-width:520px;
  }
  .service-num{
    font-family:'Fraunces', serif;
    font-size:14px;
    color:var(--muted);
    letter-spacing:0.05em;
  }

  /* ---------- Why choose us ---------- */
  .why{ background:var(--bg); }
  .why-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0;
    border-top:1px solid var(--hairline);
    border-left:1px solid var(--hairline);
  }
  .why-item{
    padding:30px 32px;
    border-right:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    display:flex;
    align-items:flex-start;
    gap:16px;
    transition:background .4s;
  }
  .why-item:hover{ background:rgba(197,121,63,0.05); }
  .why-item .mark{
    color:var(--copper-soft);
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:20px;
    flex-shrink:0;
    margin-top:1px;
  }
  .why-item p{
    color:var(--ivory);
    font-size:15.5px;
    font-weight:400;
    letter-spacing:0.01em;
  }

  /* ---------- Industries ---------- */
  .industries{ background:var(--bg-panel-2); }
  .industry-tags{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
  }
  .industry-tag{
    border:1px solid var(--hairline);
    border-radius:999px;
    padding:13px 24px;
    font-size:14.5px;
    color:var(--ivory-dim);
    transition:all .35s var(--ease);
  }
  .industry-tag:hover{
    border-color:var(--storm-soft);
    color:var(--ivory);
    background:rgba(77,100,114,0.14);
    transform:translateY(-2px);
  }

  /* ---------- Process ---------- */
  .process{ background:var(--bg); }
  .process-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    position:relative;
  }
  .process-list::before{
    content:'';
    position:absolute;
    top:26px; left:0; right:0;
    height:1px;
    background:var(--hairline);
  }
  .process-step{
    padding:0 24px 0 0;
    position:relative;
  }
  .process-step .num{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:15px;
    color:var(--bg);
    background:var(--copper-soft);
    width:52px; height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
    margin-bottom:26px;
  }
  .process-step h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:19px;
    color:var(--ivory);
    margin-bottom:10px;
    line-height:1.3;
  }
  .process-step p{
    color:var(--ivory-dim);
    font-size:14.5px;
    font-weight:300;
    max-width:230px;
  }

  /* ---------- Commitment ---------- */
  .commitment{
    background:linear-gradient(160deg, var(--bg-panel) 0%, #1b2529 100%);
    text-align:center;
    position:relative;
  }
  .commitment .wrap{ max-width:760px; }
  .commitment blockquote{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:400;
    font-size:clamp(24px,3.6vw,36px);
    line-height:1.4;
    color:var(--ivory);
  }
  .commitment .eyebrow{ justify-content:center; margin-bottom:30px; }
  .commitment .eyebrow::before{ display:none; }
  .commitment footer-note{ display:none; }

  /* ---------- CTA ---------- */
  .cta-band{
    background:var(--bg);
    text-align:center;
    padding-bottom:clamp(90px,11vw,140px);
  }
  .cta-band .wrap{ max-width:660px; }
  .cta-band h2{
    font-size:clamp(30px,4.2vw,48px);
    color:var(--ivory);
    margin-bottom:20px;
    line-height:1.16;
  }
  .cta-band p{
    color:var(--ivory-dim);
    font-weight:300;
    font-size:16px;
    margin-bottom:38px;
  }

  /* ---------- Footer ---------- */
  footer.site-footer{
    border-top:1px solid var(--hairline);
    padding:44px 0;
    background:var(--bg);
  }
  footer.site-footer .wrap{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:20px;
  }
  .footer-brand{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:17px;
    color:var(--ivory-dim);
  }
  .footer-about-heading{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    font-size:19px;
    color:var(--copper-soft);
    margin-bottom:14px;
  }
  .footer-about{
    width:100%;
    max-width:760px;
    color:var(--ivory);
    font-size:15px;
    font-weight:600;
    letter-spacing:0.005em;
    line-height:1.8;
    margin-bottom:34px;
    padding-bottom:34px;
    border-bottom:1px solid var(--hairline);
    text-align:justify;
    text-justify:inter-word;
  }
  .footer-about p{ margin-bottom:12px; }
  .footer-about p:last-child{ margin-bottom:0; }

  .footer-columns{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin-bottom:34px;
    padding-bottom:34px;
    border-bottom:1px solid var(--hairline);
  }
  .footer-col{ display:flex; flex-direction:column; gap:10px; text-align:justify; }
  .footer-col .label{
    font-size:11.5px;
    font-weight:600;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--copper-soft);
  }
  .footer-col .value{
    font-size:15px;
    color:var(--ivory-dim);
    transition:color .3s;
    overflow-wrap:break-word;
    word-break:break-word;
  }
  .footer-col a.value:hover{ color:var(--ivory); }
  .footer-col .value.wa-line{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--ivory-dim);
  }
  .footer-col .value.wa-line svg{ width:20px; height:20px; color:var(--wa); flex-shrink:0; }
  .footer-col .value.wa-line:hover{ color:var(--ivory); }
  .footer-contact{
    display:flex;
    gap:26px;
    flex-wrap:wrap;
    font-size:13.5px;
    color:var(--muted);
  }
  .footer-contact a{ transition:color .3s; }
  .footer-contact a:hover{ color:var(--copper-soft); }
  .footer-copy{
    width:100%;
    text-align:center;
    margin-top:30px;
    font-size:12px;
    color:var(--muted);
    letter-spacing:0.02em;
  }

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

  /* ---------- Responsive ---------- */
  @media (max-width:900px){
    .about .grid{ grid-template-columns:1fr; }
    .about-mark{ font-size:54px; }
    .why-grid{ grid-template-columns:1fr; }
    .process-list{ grid-template-columns:1fr 1fr; row-gap:44px; }
    .process-list::before{ display:none; }
  }

  @media (max-width:880px){
    .footer-columns{ grid-template-columns:1fr; gap:22px; }
    nav.primary-nav{
      position:fixed;
      top:0; right:0;
      height:100vh;
      width:min(78vw,320px);
      background:#1a1510;
      flex-direction:column;
      padding:110px 32px 40px;
      gap:26px;
      transform:translateX(100%);
      transition:transform .5s var(--ease);
      border-left:1px solid var(--hairline);
      overflow-y:auto;
      z-index:105;
    }
    nav.primary-nav.open{ transform:translateX(0); }
    nav.primary-nav a{ font-size:16px; }
    .menu-toggle{ display:flex; align-items:center; justify-content:center; }
    .header-actions .contact-btn{ padding:10px 16px; font-size:11.5px; }
    .wordmark{ font-size:19px; }
    .service-row{ grid-template-columns:44px 1fr; }
    .service-num{ display:none; }
    .process-list{ grid-template-columns:1fr; }
  }

  @media (max-width:480px){
    .wordmark{ font-size:16px; }
    .header-actions{ gap:10px; }
    .contact-btn{
      width:40px; height:40px;
      padding:0;
      justify-content:center;
      border-radius:50%;
      flex-shrink:0;
    }
    .contact-icon{ display:block; }
    .contact-label{ display:none; }
  }

  @media (max-width:520px){
    .industry-tag{ padding:10px 18px; font-size:13.5px; }
    .wa-btn{ white-space:normal; text-align:left; }
    .wa-btn.large{
      padding:15px 22px;
      font-size:14px;
      max-width:100%;
    }
    .hero .cta-row{ padding:0 8px; }
    .hero .cta-row .wa-btn.large{ justify-content:center; text-align:center; }
    .cta-band .wa-btn.large{ justify-content:center; text-align:center; }
    .footer-about{ text-align:left; }
    .footer-col{ text-align:left; }
  }
/* ---------- WordPress menu compatibility ---------- */
/* Keeps a WP-generated <ul><li> primary menu visually identical to the
   original flat-anchor design if an admin assigns a custom menu. */
.primary-nav ul{ display:contents; }
.primary-nav li{ list-style:none; margin:0; padding:0; display:inline-flex; }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{ color:var(--ivory); }
.primary-nav .current-menu-item > a::after,
.primary-nav .current_page_item > a::after{ width:100%; }

/* Sub-menus are hidden by default in this single-page design */
.primary-nav .sub-menu{ display:none; }

/* Screen-reader text (WordPress convention) */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute;
  width:1px; word-wrap:normal !important;
}