/* ==========================================================================
   Roots & Rise Ltd — Operations Page
   Design System V1.1 — tokens locked; do not introduce new values.
   Photo-free by design direction: typography, whitespace, icon accents,
   dividers and background alternation carry the visual interest.
   ========================================================================== */

:root{
  /* Tier 1 — Foundation Palette */
  --ink:#1A1A1A;
  --charcoal:#2C2C2C;
  --steel:#4A4A4A;
  --slate:#888888;
  --bone:#D0CDC8;
  --linen:#F0EDE8;
  --cream:#F8F7F4;
  --white:#FFFFFF;

  /* Tier 2 — Operational Green */
  --operative:#2A7A5A;
  --deep-ops:#1F5C42;
  --ops-tint:#E8F4EF;

  /* Tier 3 — Brand Gold */
  --gold:#8B6914;
  --deep-gold:#7A5C11;
  --mid-gold:#A07820;
  --light-gold:#C9A23A;
  --gold-tint:#F5ECD0;

  /* Logo mark tokens (canonical Option 2) */
  --logo-bar-1:#EDEDED;
  --logo-bar-2:#BFBFBF;
  --logo-bar-3:#8A8A8A;
  --logo-bar-4:#3A3A3A;

  /* Spacing tokens */
  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:40px;
  --space-xl:64px;
  --space-2xl:96px;
  --space-3xl:128px;

  --pad-desktop:80px;
  --pad-tablet:40px;
  --pad-mobile:20px;

  --section-pad-desktop:96px;
  --section-pad-tablet:56px;
  --section-pad-mobile:40px;
}

/* ==========================================================================
   Base / reset
   ========================================================================== */

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
body{ margin:0; }
img{ display:block; max-width:100%; height:auto; }
a{ text-decoration:none; color:inherit; }
ul, ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; background:none; border:none; cursor:pointer; }

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--operative);
  outline-offset:2px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--white); color:var(--ink);
  padding:12px 20px; z-index:999; font-weight:600; font-size:14px;
}
.skip-link:focus{ left:12px; top:12px; }

.section-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--pad-desktop);
}
@media (max-width:1199px){ .section-inner{ padding:0 var(--pad-tablet); } }
@media (max-width:767px){ .section-inner{ padding:0 var(--pad-mobile); } }

.section{ padding:var(--section-pad-desktop) 0; }
@media (max-width:1199px){ .section{ padding:var(--section-pad-tablet) 0; } }
@media (max-width:767px){ .section{ padding:var(--section-pad-mobile) 0; } }

/* Typography scale */
h1{ font-size:40px; font-weight:700; line-height:1.15; letter-spacing:-0.02em; }
h2{ font-size:28px; font-weight:600; line-height:1.25; letter-spacing:-0.01em; }
h3{ font-size:20px; font-weight:600; line-height:1.3; }
h4{ font-size:16px; font-weight:600; line-height:1.3; }
p{ font-size:16px; color:var(--steel); }
@media (max-width:767px){
  h1{ font-size:34px; }
  h2{ font-size:22px; }
  h3{ font-size:18px; }
  p{ font-size:15px; }
}

.overline{
  display:block;
  font-weight:600; font-size:11px; line-height:1;
  letter-spacing:0.08em; text-transform:uppercase;
  margin-bottom:16px;
}
.overline-green{ color:var(--operative); }
.overline-gold{ color:var(--gold); }
.overline-green-ondark{ color:#7FC4A8; }
.overline-gold-ondark{ color:var(--light-gold); }

.gold-divider{
  display:block; width:48px; height:2px;
  background:var(--light-gold); margin:0 auto var(--space-md);
}

.icon-accent{ color:var(--operative); font-size:24px; margin-bottom:14px; display:block; }
.icon-accent-light{ color:#7FC4A8; font-size:24px; margin-bottom:14px; display:block; }

/* Fade-in on scroll */
.fade-in{ opacity:0; transform:translateY(12px); transition:opacity 300ms ease-out, transform 300ms ease-out; }
.fade-in.visible{ opacity:1; transform:translateY(0); }
.no-js .fade-in{ opacity:1; transform:none; }

/* Buttons */
.btn{
  display:inline-block;
  padding:14px 32px;
  font-size:14px; font-weight:500; letter-spacing:0.02em;
  border-radius:3px;
  transition:background 150ms ease, border-color 150ms ease;
}
.btn:active{ transform:scale(0.98); }
.btn-primary{ background:var(--gold); color:var(--white); }
.btn-primary:hover{ background:var(--deep-gold); }
.btn-secondary{ background:var(--white); color:var(--ink); border:1.5px solid var(--ink); }
.btn-secondary:hover{ background:var(--linen); }
.btn-sm{ padding:10px 20px; font-size:13px; }
@media (max-width:479px){ .btn{ width:100%; text-align:center; } }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.site-header{ background:var(--ink); position:sticky; top:0; z-index:50; }
.nav-inner{
  max-width:1200px; margin:0 auto; padding:0 var(--pad-desktop);
  height:76px;
  display:flex; align-items:center; justify-content:space-between;
  transition:height 200ms ease;
}
@media (max-width:1199px){ .nav-inner{ padding:0 var(--pad-tablet); } }
@media (max-width:767px){ .nav-inner{ padding:0 var(--pad-mobile); } }

.nav-logo{ display:flex; align-items:center; gap:14px; transition:gap 200ms ease; }

/* Canonical logo mark (Option 2 — SVG/CSS-variable, About-page structural base) */
.logo-icon{ width:26px; height:21px; flex-shrink:0; transition:width 150ms ease, height 150ms ease; }
.logo-icon .bar{ transition:none; }
.logo-icon .bar-1{ fill:var(--logo-bar-1); }
.logo-icon .bar-2{ fill:var(--logo-bar-2); }
.logo-icon .bar-3{ fill:var(--logo-bar-3); }
.logo-icon .bar-4{ fill:var(--logo-bar-4); }

.logo-divider{
  width:1px; height:28px; background:rgba(255,255,255,0.25);
  flex-shrink:0; transition:height 200ms ease;
}

.logo-word{ display:flex; flex-direction:column; line-height:1.15; }
.logo-word-main{
  font-weight:700; font-size:17px; letter-spacing:0.01em; color:var(--white);
  transition:font-size 200ms ease;
}
.logo-word-sub{
  font-weight:400; font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--slate); margin-top:2px; transition:font-size 200ms ease;
}
.footer-icon{ width:28px; height:22px; }

/* Scrolled state — canonical sitewide 76px -> 58px, same identity proportionally reduced */
.site-header.scrolled .nav-inner{ height:58px; }
.site-header.scrolled .logo-icon{ width:20px; height:16px; }
.site-header.scrolled .logo-divider{ height:20px; }
.site-header.scrolled .logo-word-main{ font-size:14px; }
.site-header.scrolled .logo-word-sub{ font-size:8px; }
.site-header.scrolled .brand-name{ font-size:13px; }

@media (max-width:767px){
  .brand-mark{ width:20px; }
  .brand-bar{ height:4px; }
  .brand-divider{ height:24px; }
  .brand-name{ font-size:13px; }
  .brand-sub{ font-size:8px; }
}

.nav-desktop{ display:flex; gap:36px; }
.nav-desktop a{
  font-size:14px; color:var(--slate); position:relative; padding-bottom:4px;
  transition:color 150ms ease;
}
.nav-desktop a:hover, .nav-desktop a.active{ color:var(--white); }
.nav-desktop a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--operative);
}
.nav-toggle{ display:none; color:var(--white); font-size:24px; }
@media (max-width:767px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:block; }
}

.mobile-drawer{
  position:fixed; top:0; right:-280px; width:280px; height:100%;
  background:var(--ink); z-index:100;
  padding:24px; transition:right 250ms ease;
  display:flex; flex-direction:column;
}
.mobile-drawer.open{ right:0; }
.mobile-drawer .drawer-close{ align-self:flex-end; color:var(--white); font-size:24px; margin-bottom:24px; }
.mobile-drawer nav{ display:flex; flex-direction:column; }
.mobile-drawer nav a{
  color:var(--white); font-size:18px; font-weight:400;
  height:56px; display:flex; align-items:center;
  border-bottom:1px solid #333;
}
.mobile-drawer nav a.active{ color:var(--light-gold); }

.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.5);
  opacity:0; pointer-events:none; transition:opacity 250ms ease; z-index:90;
}
.drawer-overlay.open{ opacity:1; pointer-events:auto; }

/* ==========================================================================
   SECTION 1 — HERO
   ========================================================================== */

.hero-operations{
  background:var(--ink);
  background-image:
    linear-gradient(180deg, rgba(26,26,26,0.88) 0%, rgba(26,26,26,0.93) 100%),
    url("../images/operations-hero.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:112px 0 96px;
  color:var(--white);
}
@media (max-width:767px){ .hero-operations{ padding:72px 0 56px; } }
.hero-inner{ max-width:760px; text-align:center; margin:0 auto; }
.hero-headline{ color:var(--white); margin-bottom:20px; }
.hero-subline{ color:#BFBFBF; font-size:18px; max-width:640px; margin:0 auto; }
@media (max-width:767px){ .hero-subline{ font-size:15px; } }

/* ==========================================================================
   SECTION 2 — PHILOSOPHY
   ========================================================================== */

.philosophy{ background:var(--white); text-align:center; }
.prose-center{ max-width:660px; margin:0 auto; }
.prose-center p{ font-size:18px; margin-bottom:20px; }
.prose-center p:last-child{ margin-bottom:0; }
@media (max-width:767px){ .prose-center p{ font-size:15px; } }

/* ==========================================================================
   SECTION 3 — OPERATIONAL FRAMEWORK
   ========================================================================== */

.framework{ background:var(--linen); }
.framework-head{ text-align:center; max-width:640px; margin:0 auto var(--space-2xl); }
.framework-head h2{ margin-top:4px; }

.phase-flow{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  position:relative; counter-reset:none;
}
.phase-flow::before{
  content:""; position:absolute; top:14px; left:8%; right:8%; height:1px; background:var(--bone);
}
.phase{ flex:1; text-align:center; position:relative; }
.phase-node{
  width:28px; height:28px; border-radius:50%; background:var(--operative);
  margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:11px; font-weight:700; border:4px solid var(--linen);
}
.phase-node.gold{ background:var(--gold); }
.phase-label{
  display:block; font-size:11px; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink); margin-bottom:8px;
}
.phase-desc{ font-size:13px; line-height:1.5; }
.qualification-note{
  margin-top:var(--space-xl); text-align:center; font-style:italic;
  font-size:14px; color:var(--slate); max-width:640px; margin-left:auto; margin-right:auto;
}
@media (max-width:900px){
  .phase-flow{
    display:flex; flex-direction:column; gap:16px; align-items:stretch; text-align:left;
    position:relative;
  }
  .phase-flow::before{
    display:block; content:""; position:absolute; top:24px; bottom:24px; left:14px;
    width:2px; height:auto; right:auto; background:var(--bone); z-index:0;
  }
  .phase{
    display:flex; gap:20px; align-items:flex-start; text-align:left;
    position:relative;
  }
  .phase-node{ margin:0; flex-shrink:0; position:relative; z-index:1; }
  .phase-body{
    flex:1; background:var(--white); border:1px solid var(--bone); border-radius:8px;
    padding:16px 18px;
  }
  .phase-label{ margin-bottom:6px; }
  .phase-desc{ margin:0; }
}

/* ==========================================================================
   SECTION 4 — PRE-MOBILIZATION & PREPARATION
   ========================================================================== */

.pre-mob{ background:var(--white); }
.split-header{
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--space-xl);
  margin-bottom:var(--space-2xl);
}
.split-header-label h2{ max-width:360px; }
.split-header-copy p{ margin-bottom:16px; }
.split-header-copy p:last-child{ margin-bottom:0; }
@media (max-width:900px){
  .split-header{ grid-template-columns:1fr; gap:var(--space-md); }
}

.icon-row{ display:grid; gap:var(--space-xl); }
.icon-row.three-col{ grid-template-columns:repeat(3, 1fr); }
.icon-row.four-col{ grid-template-columns:repeat(4, 1fr); }
.icon-row-item{ padding-right:var(--space-md); }
.icon-row-item h4{ margin-bottom:8px; }
.icon-row-item p{ font-size:14px; margin:0; }
@media (max-width:900px){
  .icon-row.three-col{ grid-template-columns:1fr; gap:var(--space-lg); }
  .icon-row.four-col{ grid-template-columns:1fr 1fr; gap:var(--space-lg); }
}
@media (max-width:480px){
  .icon-row.four-col{ grid-template-columns:1fr; }
}

/* ==========================================================================
   SECTION 5 — WORKFORCE SELECTION & FIELD LEADERSHIP
   ========================================================================== */

.workforce{ background:var(--charcoal); color:var(--white); }
.workforce .prose-center{ margin-bottom:var(--space-2xl); }
.workforce h2.ondark{ color:var(--white); margin-bottom:16px; }
.workforce .ondark-body{ color:#C9C9C9; margin-bottom:16px; }
.workforce .ondark-body:last-of-type{ margin-bottom:0; }
.ondark-row{ max-width:1040px; margin:0 auto; text-align:center; }
.ondark-row .icon-row-item{ padding:0 var(--space-sm); }
.ondark-row .icon-row-item p{ color:#D8D8D8; font-size:14px; }
.ondark-row .icon-accent-light{ margin-left:auto; margin-right:auto; }
@media (max-width:900px){
  .ondark-row.icon-row.four-col{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .ondark-row.icon-row.four-col{ grid-template-columns:1fr; }
}

/* ==========================================================================
   SECTION 6 — FIELD EXECUTION & SITE COORDINATION
   ========================================================================== */

.field-coord{ background:var(--linen); }
.field-coord-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-xl); }
.field-coord-divider{ width:1px; background:var(--bone); }
.field-coord-col h3{ margin-bottom:16px; }
.field-coord-col p{ margin-bottom:14px; }
.field-coord-col p:last-child{ margin-bottom:0; }
.col-heading{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.col-heading .overline{ margin-bottom:0; }
.col-heading i{ font-size:20px; color:var(--operative); }
@media (max-width:900px){
  .field-coord-grid{ grid-template-columns:1fr; gap:var(--space-lg); }
  .field-coord-divider{ display:none; }
}

/* ==========================================================================
   SECTION 7 — LOGISTICS & RESOURCE COORDINATION
   ========================================================================== */

.logistics{ background:var(--white); text-align:center; }
.logistics p{ margin-bottom:16px; }
.logistics p:last-child{ margin-bottom:0; }

/* ==========================================================================
   SECTION 8 — REPORTING & COMMUNICATION
   ========================================================================== */

.reporting{ background:var(--linen); }
.strip-3col{ display:grid; grid-template-columns:1fr 1fr 1fr; }
.strip-col{ padding:0 var(--space-lg); border-left:1px solid var(--bone); }
.strip-col:first-child{ border-left:none; padding-left:0; }
.strip-col h4{ margin-bottom:12px; }
.strip-col p{ font-size:14px; margin:0; }
@media (max-width:900px){
  .strip-3col{ grid-template-columns:1fr; gap:var(--space-lg); }
  .strip-col{ border-left:none; padding-left:0; }
}

/* ==========================================================================
   SECTION 9 — SAFETY & WORKFORCE ADMINISTRATION
   ========================================================================== */

.safety-admin{ background:var(--white); }
.safety-admin-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-xl); }
.safety-admin-divider{ width:1px; background:var(--bone); }
.safety-admin-col p{ margin-bottom:var(--space-md); }
.safety-admin-col .col-heading{ margin-bottom:16px; }
.safety-admin-col .col-heading i{ font-size:22px; }
.safety-admin-col .col-heading h3{ margin:0; }

.marker-list li{
  position:relative; padding-left:20px; margin-bottom:12px;
  font-size:15px; color:var(--steel); line-height:1.5;
}
.marker-list li:last-child{ margin-bottom:0; }
.marker-list li::before{
  content:""; position:absolute; left:0; top:8px; width:10px; height:2px; background:var(--operative);
}
@media (max-width:900px){
  .safety-admin-grid{ grid-template-columns:1fr; gap:var(--space-lg); }
  .safety-admin-divider{ display:none; }
}

/* ==========================================================================
   SECTION 10 — CTA BAND
   ========================================================================== */

.cta-band{ background:var(--cream); text-align:center; }
.cta-band .prose-center{ max-width:500px; }
.cta-band h2{ margin-bottom:16px; }
.cta-band p{ margin-bottom:28px; }
.cta-group{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.response-copy{ font-size:13px; color:var(--slate); margin-top:20px; margin-bottom:0; }
@media (max-width:480px){ .cta-group{ flex-direction:column; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer{ background:var(--ink); color:var(--white); padding:64px 0 24px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px;
  padding-bottom:48px; border-bottom:1px solid #333;
}
.footer-brand-name{ font-weight:700; font-size:14px; margin-bottom:6px; }
.footer-tagline{ font-style:italic; color:var(--slate); font-size:11px; margin-bottom:14px; }
.footer-gold-divider{ margin:0 0 16px; }
.footer-desc{ font-size:13px; color:#B8B8B8; line-height:1.6; margin-bottom:16px; }
.footer-social{ display:flex; gap:16px; }
.footer-social a{ color:var(--slate); font-size:18px; transition:color 150ms ease; }
.footer-social a:hover{ color:var(--white); }

.footer-col h4{
  font-size:12px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--slate); margin-bottom:16px; font-weight:600;
}
.footer-col a{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:#C9C9C9; margin-bottom:10px;
}
.footer-col a:hover{ color:var(--white); }
.footer-col a:last-of-type{ margin-bottom:0; }
.footer-whatsapp{ display:flex; align-items:center; gap:8px; font-size:13px; color:#C9C9C9; margin-bottom:12px; }
.footer-col .btn{ margin-top:4px; }

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:20px; font-size:12px; color:var(--slate); flex-wrap:wrap; gap:8px;
}
.footer-bottom p{ margin:0; font-size:12px; color:var(--slate); }
.footer-legal{ display:flex; gap:20px; }
.footer-legal a{ color:var(--slate); }
.footer-legal a:hover{ color:var(--white); }

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:767px){
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:12px; }
}


.footer-logo-mark{ display:inline-block; margin-bottom:14px; }