/*
Theme Name: RSOG Corporate
Theme URI: https://rsogroup.com
Author: RSOG
Author URI: https://rsogroup.com
Description: Custom one-page corporate theme for Red Sea Operations Group (RSOG). Fully responsive with mobile hamburger navigation.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rsog-corporate
*/


  :root{
    --navy:#14213D;
    --navy-deep:#0B1526;
    --red:#A02334;
    --panel:#F3F4F6;
    --ink:#1B1F27;
    --ink-dim:#5B6572;
    --line:#E2E4E8;
    --gold:#B08D57;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{ background:#FFFFFF; color:var(--ink); font-family:'Inter', sans-serif; overflow-x:hidden; }
  .serif{font-family:'Playfair Display', serif;}
  @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

  /* ---------- NAV ---------- */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 5vw;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .brandmark{ display:flex; align-items:center; gap:12px; }
  .brandmark img{ height:42px; }
  .brand-name{font-size:13px; letter-spacing:0.1em; color:var(--ink-dim); text-transform:uppercase;}
  .brand-name b{color:var(--navy); font-weight:700;}
  .nav-links{display:flex; gap:32px; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; align-items:center;}
  .nav-links a{color:var(--ink-dim); text-decoration:none; transition:color 0.2s; font-weight:600;}
  .nav-links a:hover, .nav-links a:focus-visible{color:var(--red); outline:none;}
  .nav-cta{
    background:var(--navy); color:#fff !important; padding:10px 20px; border-radius:2px;
  }

  /* ---------- MOBILE NAV TOGGLE ---------- */
  .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0; z-index:200; }
  .nav-toggle span{ width:26px; height:2px; background:var(--navy); display:block; transition:transform 0.3s ease, opacity 0.3s ease; }
  .nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2){ opacity:0; }
  .nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-overlay{ position:fixed; inset:0; background:rgba(11,21,38,0.5); opacity:0; visibility:hidden; transition:opacity 0.3s ease; z-index:150; }
  .nav-overlay.open{ opacity:1; visibility:visible; }

  @media (max-width:900px){
    .nav-toggle{ display:flex; }
    .nav-links{
      display:flex; position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
      background:#fff; flex-direction:column; align-items:flex-start; justify-content:flex-start;
      padding:100px 34px 40px; gap:26px; box-shadow:-10px 0 40px rgba(0,0,0,0.12);
      transform:translateX(100%); transition:transform 0.35s ease; z-index:180; text-align:left;
    }
    .nav-links.open{ transform:translateX(0); }
    .nav-links a{ font-size:15px; width:100%; }
    .nav-links .nav-cta{ text-align:center; }
  }
  body.nav-locked{ overflow:hidden; }

  /* ---------- HERO ---------- */
  .hero{
    min-height:100svh; position:relative; display:flex; align-items:center;
    padding:120px 5vw 80px; background:var(--navy-deep); color:#fff; overflow:hidden;
  }
  .hero-waves{ position:absolute; inset:0; opacity:0.5; }
  .hero-waves svg{ width:100%; height:100%; }
  .hero-content{ position:relative; z-index:2; max-width:760px; }
  .eyebrow{ font-size:13px; color:var(--gold); text-transform:uppercase; letter-spacing:0.2em; margin-bottom:22px; display:flex; align-items:center; gap:10px; font-weight:600; }
  .eyebrow::before{content:''; width:30px; height:2px; background:var(--gold); display:inline-block;}
  .hero h1{ font-size:clamp(40px, 6vw, 74px); line-height:1.08; font-weight:800; }
  .hero h1 span{color:var(--gold);}
  .hero-sub{ margin-top:26px; max-width:600px; font-size:18px; color:#C7CCD8; line-height:1.65; }
  .hero-tagline{
    margin-top:20px; font-family:'Playfair Display', serif; font-style:italic; font-size:20px; color:#fff;
  }
  .cta-row{ display:flex; gap:16px; margin-top:42px; flex-wrap:wrap; }
  .cta{
    display:inline-block; padding:15px 30px; font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    text-decoration:none; border-radius:2px; transition:transform 0.15s ease, background 0.2s ease;
  }
  .cta-primary{ background:var(--red); color:#fff; }
  .cta-primary:hover{ background:#B72E40; transform:translateY(-2px); }
  .cta-secondary{ border:1px solid rgba(255,255,255,0.3); color:#fff; }
  .cta-secondary:hover{ border-color:#fff; }

  /* ---------- SECTION SHELL ---------- */
  section{ padding:100px 5vw; border-bottom:1px solid var(--line); }
  .section-head{ margin-bottom:52px; max-width:720px; }
  .section-tag{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.16em; color:var(--red); font-weight:700; }
  .section-title{ font-size:clamp(28px, 3.6vw, 46px); margin-top:12px; color:var(--navy); font-weight:700; }
  .section-sub{ margin-top:16px; font-size:16px; color:var(--ink-dim); line-height:1.7; }

  /* ---------- ABOUT ---------- */
  .about-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:start; }
  @media (max-width:900px){ .about-grid{grid-template-columns:1fr;} }
  .about-copy p{ color:var(--ink-dim); font-size:16px; line-height:1.8; margin-bottom:20px; }
  .about-copy strong{color:var(--navy);}
  .vm-card{ background:var(--panel); border-left:3px solid var(--red); padding:26px 28px; margin-bottom:18px; border-radius:2px;}
  .vm-card h4{ font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:var(--red); margin-bottom:10px; font-weight:700;}
  .vm-card p{ font-size:15px; color:var(--ink); line-height:1.6; }

  /* ---------- VALUES ---------- */
  .values-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:34px; }
  .value-card h3{ font-family:'Playfair Display', serif; font-weight:700; font-size:22px; color:var(--navy); margin-bottom:10px; }
  .value-card p{ font-size:15px; color:var(--ink-dim); line-height:1.6; }
  .value-num{ font-size:13px; color:var(--red); font-weight:700; letter-spacing:0.08em; margin-bottom:10px; display:block;}

  /* ---------- SERVICES ---------- */
  .services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
  .service-card{ background:#fff; padding:32px 28px; transition:background 0.25s ease; }
  .service-card:hover{ background:var(--panel); }
  .service-card h3{ font-family:'Playfair Display', serif; font-weight:700; font-size:20px; color:var(--navy); margin-bottom:10px; }
  .service-card ul{ list-style:none; margin-top:10px;}
  .service-card li{ font-size:13.5px; color:var(--ink-dim); line-height:1.9; padding-left:14px; position:relative;}
  .service-card li::before{ content:'—'; position:absolute; left:0; color:var(--red); }

  /* ---------- INDUSTRIES ---------- */
  .chips{ display:flex; flex-wrap:wrap; gap:12px; }
  .chip{ font-size:13.5px; padding:10px 18px; border:1px solid var(--line); border-radius:22px; color:var(--navy); font-weight:600; background:var(--panel); }

  /* ---------- WHY RSOG ---------- */
  .why-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:36px; }
  .why-card{ padding-left:20px; border-left:2px solid var(--gold); }
  .why-card h3{ font-size:18px; color:var(--navy); margin-bottom:8px; font-weight:700; }
  .why-card p{ font-size:14.5px; color:var(--ink-dim); line-height:1.6; }

  /* ---------- GOVERNANCE ---------- */
  .gov-section{ background:var(--navy-deep); color:#fff; }
  .gov-section .section-title{ color:#fff; }
  .gov-section .section-sub{ color:#B7BCC6; }
  .gov-section .chip{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.15); color:#fff; }

  /* ---------- PHILOSOPHY ---------- */
  .philosophy{ display:flex; gap:40px; align-items:center; flex-wrap:wrap; }
  .philosophy-mark{ font-family:'Playfair Display', serif; font-size:120px; line-height:1; color:var(--red); opacity:0.15; font-weight:800; flex-shrink:0; }
  .philosophy-copy{ flex:1; min-width:280px; }
  .philosophy-copy p{ font-size:17px; color:var(--ink-dim); line-height:1.8; margin-bottom:16px; }
  .philosophy-copy p:first-child{ font-family:'Playfair Display', serif; font-style:italic; font-size:22px; color:var(--navy); }

  /* ---------- QUALITY / CSR ---------- */
  .pillar-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:36px; }
  .pillar-card h3{ font-family:'Playfair Display', serif; font-weight:700; font-size:20px; color:var(--navy); margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--line); }
  .pillar-card p{ font-size:14.5px; color:var(--ink-dim); line-height:1.75; margin-bottom:14px; }
  .pillar-card ul{ list-style:none; }
  .pillar-card li{ font-size:13.5px; color:var(--ink-dim); line-height:1.9; padding-left:14px; position:relative; }
  .pillar-card li::before{ content:'—'; position:absolute; left:0; color:var(--red); }

  /* ---------- FUTURE CAPABILITY ---------- */
  .future-section{ background:var(--panel); }
  .future-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:24px; }
  .future-item{ background:#fff; border:1px solid var(--line); padding:26px 24px; border-radius:2px; }
  .future-item span{ font-size:12px; color:var(--gold); text-transform:uppercase; letter-spacing:0.1em; font-weight:700; }
  .future-item h4{ font-family:'Playfair Display', serif; font-size:17px; color:var(--navy); margin-top:8px; font-weight:700; }

  /* ---------- COMMITMENT ---------- */
  .commitment-section{ background:var(--navy-deep); color:#fff; text-align:center; }
  .commitment-section .section-head{ margin:0 auto 30px; max-width:820px; text-align:center; }
  .commitment-section p{ max-width:820px; margin:0 auto 16px; font-size:17px; line-height:1.8; color:#C7CCD8; }
  .commitment-section .section-tag{ color:var(--gold); }
  .commitment-section .section-title{ color:#fff; }

  /* ---------- FOOTER / CONTACT ---------- */
  footer{ padding:80px 5vw 40px; background:var(--panel); }
  .footer-grid{ display:grid; grid-template-columns:1.2fr 0.8fr 0.8fr; gap:50px; margin-bottom:60px; }
  @media (max-width:800px){ .footer-grid{grid-template-columns:1fr; gap:36px;} }
  .footer-brand img{ height:56px; margin-bottom:18px; }
  .footer-brand p{ color:var(--ink-dim); font-size:14px; line-height:1.7; max-width:340px; }
  .footer-col h5{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--red); margin-bottom:18px; font-weight:700; }
  .footer-col p, .footer-col a{ font-size:14.5px; color:var(--ink-dim); line-height:1.9; text-decoration:none; display:block; }
  .footer-col a:hover{ color:var(--red); }
  .footer-bottom{
    display:flex; justify-content:space-between; padding-top:26px; border-top:1px solid var(--line);
    font-size:12.5px; color:var(--ink-dim); flex-wrap:wrap; gap:14px;
  }
  .footer-tagline{ font-family:'Playfair Display', serif; font-style:italic; color:var(--navy); text-align:center; font-size:18px; margin-bottom:40px; }

  .reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease; }
  .reveal.in{ opacity:1; transform:none; }