/* ==========================================================================
   DHOW Energy & Exploration — site stylesheet
   Tokens sourced from the actual brochure (cyan #00A5BB, ivory #F2F2F2)
   ========================================================================== */

:root{
  /* base */
  --ink:        #13202B;   /* dark navy — nav / footer only */
  --panel:      #18262F;
  --paper:      #F2F2F1;   /* ivory — the site's light background, everywhere */
  --line:       rgba(244,245,241,0.16);
  --line-dark:  rgba(19,32,43,0.12);

  --text-on-dark:        #F4F5F1;
  --text-on-dark-muted:  #A9B9BE;
  --text-on-light:       #24292D;
  --text-on-light-muted: #5B6469;
  --heading-on-light:    #13202B;

  /* brand */
  --cyan:        #00A5BB;  /* primary brand colour — hero / CTA panels */
  --cyan-deep:   #027E90;
  --brand:       #58798C;  /* slate blue — links, general accents on light bg */
  --brand-deep:  #3E5C6C;

  /* domain accents — matched to the brochure's own icon set */
  --oilgas:    #5F6E47;   /* DHOW Oil & Gas for Development — olive */
  --renewables:#00A5BB;   /* DHOW Renewables & Subsurface — cyan */
  --minerals:  #855A47;   /* DHOW Minerals & Metals — brown */
  --space:     #737C86;   /* DHOW Space Exploration — grey */

  --max: min(90vw, 88rem);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; font-size:clamp(16px, 0.5vw + 9px, 24px); }
body{
  margin:0;
  background:var(--paper);
  color:var(--text-on-light);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 1.1em; max-width:62ch; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.12;
  margin:0 0 0.5em;
  letter-spacing:-0.01em;
  color:var(--heading-on-light);
}
.container{ max-width:var(--max); margin:0 auto; padding:0 2.5rem; }
@media (max-width:720px){ .container{ padding:0 22px; } }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   Nav
   ========================================================================== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1rem 0;
  background:#13202B;
}
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; }
.nav-mark{ display:flex; align-items:center; }
.nav-mark img{ height:2.2rem; width:auto; display:block; }
.nav-links{ display:flex; gap:34px; align-items:center; }
.nav-links > *:not(:last-child){ margin-right:34px; }
@media (max-width:900px){ .nav-links > *{ margin-right:0 !important; } }
.nav-links a{
  color:var(--text-on-dark-muted); font-size:0.92rem; letter-spacing:0.01em;
  position:relative; padding:4px 0;
}
.nav-links a:hover, .nav-links a.is-active{ color:var(--text-on-dark); }
.nav-links .has-drop{ position:relative; }
.nav-drop{
  position:absolute; top:100%; left:-16px; padding-top:14px;
  display:none; min-width:260px;
}
.nav-links .has-drop:hover .nav-drop,
.nav-links .has-drop:focus-within .nav-drop{ display:block; }
.nav-drop-inner{
  background:var(--panel); border:1px solid var(--line);
  padding:10px 0;
}
.nav-drop-inner a{
  display:flex; align-items:center; gap:10px;
  padding:10px 20px; font-size:0.88rem; color:var(--text-on-dark-muted);
  border-left:2px solid transparent;
}
.nav-drop-inner a img{ height:16px; width:auto; flex:none; }
.nav-drop-inner a:hover{ color:var(--text-on-dark); border-left-color:var(--cyan); background:rgba(255,255,255,0.03); }
.nav-cta{ font-size:0.85rem; color:var(--text-on-dark); white-space:nowrap; }
.nav-cta:hover{ color:#fff; }
.nav-lang{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.04em;
  color:var(--text-on-dark-muted); border:1px solid var(--line);
  padding:5px 10px; margin-left:8px;
}
.nav-lang:hover{ color:var(--text-on-dark); border-color:var(--text-on-dark-muted); }
.nav-toggle{ display:none; }

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:0 0 0 28%; background:var(--ink);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px; padding:40px; transform:translateX(100%); transition:transform .3s ease;
    border-left:1px solid var(--line);
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-drop{ position:static; padding-top:10px; display:block !important; }
  .nav-drop-inner{ border:none; background:none; padding:0 0 0 4px; }
  .nav-toggle{
    display:block; z-index:110; background:none; border:0; color:var(--text-on-dark);
    font-family:var(--sans); font-size:0.85rem; letter-spacing:.04em; cursor:pointer;
  }
}

/* ==========================================================================
   Solid-colour hero (no photography) — cyan by default, domain colour on
   activity pages. Photography lives further down the page instead.
   ========================================================================== */
.hero{
  background:var(--hero-bg, var(--cyan));
  color:#fff;
  padding:150px 0 76px;
}
.hero.is-compact{ padding:130px 0 60px; }
.eyebrow-rule{
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.08em; color:rgba(255,255,255,0.82);
}
.eyebrow-rule::before{ content:""; width:34px; height:1px; background:rgba(255,255,255,0.6); }
.hero h1{
  font-size:clamp(2.1rem, 4.6vw, 3.6rem); max-width:18ch; color:#fff;
}
.hero.is-compact h1{ max-width:none; }
.hero .lede{ font-size:1.12rem; max-width:52ch; color:rgba(255,255,255,0.88); margin-top:16px; }
.hero-foot{ margin-top:34px; display:flex; gap:16px; flex-wrap:wrap; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px; font-size:0.92rem; border:1px solid rgba(255,255,255,0.55);
  color:#fff;
}
.btn:hover{ background:rgba(255,255,255,0.12); }
.btn.solid{ background:#fff; color:var(--cyan-deep); border-color:#fff; }
.btn.solid:hover{ background:#EAF7F9; }
.btn.on-light{ color:var(--text-on-light); border-color:var(--line-dark); }
.btn.on-light:hover{ background:rgba(21,28,31,0.05); }

/* ==========================================================================
   About "chapter" intro — mirrors the brochure's Who We Are / Mission / Vision
   spread: ivory left, solid cyan right. This is what gives About its own
   identity instead of repeating the Home hero.
   ========================================================================== */
.chapter-intro{ display:grid; grid-template-columns:1fr 1fr; padding:0; }
@media (max-width:860px){ .chapter-intro{ grid-template-columns:1fr; } }
.chapter-intro .side{ padding:9rem 3.5rem 4rem; }
.chapter-intro .side.light{ background:var(--paper); }
.chapter-intro .side.cyan{ background:var(--cyan); color:#fff; }
.chapter-intro .side.cyan h3{ color:#fff; font-size:1.3rem; margin-bottom:10px; }
.chapter-intro .side.cyan p{ color:rgba(255,255,255,0.9); }
.chapter-intro .side.cyan .tagline{
  border-top:1px solid rgba(255,255,255,0.35); margin-top:26px; padding-top:20px;
  font-style:italic; font-size:0.92rem; color:rgba(255,255,255,0.85);
}
.chapter-intro .kicker{ font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em; color:var(--cyan-deep); display:block; margin-bottom:14px; }
.chapter-intro .side.cyan .kicker{ color:rgba(255,255,255,0.85); }
.chapter-intro h1{ font-size:clamp(2rem,3.6vw,2.8rem); margin-bottom:20px; }
.chapter-intro figure{ margin:28px 0 0; }
.chapter-intro figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

/* ==========================================================================
   Sections
   ========================================================================== */
section{ padding:64px 0; }
@media (max-width:720px){ section{ padding:44px 0; } }

.section-head{ max-width:none; margin-bottom:3rem; }
.section-head p{ max-width:none; }
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.4rem); }
.section-head .kicker{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em;
  color:var(--cyan-deep); display:block; margin-bottom:14px;
}

.cyan-section{ background:var(--cyan); color:#fff; }
.cyan-section p{ color:rgba(255,255,255,0.88); }
.cyan-section h2, .cyan-section h3, .cyan-section h4{ color:#fff; }
.cyan-section .section-head .kicker{ color:rgba(255,255,255,0.85); }

/* two-column intro */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; gap:36px; } }

/* activities grid — real gaps, colour-forward cards on ivory */
.activity-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:28px;
}
@media (max-width:720px){ .activity-grid{ grid-template-columns:1fr; } }
.activity-card{
  background:#fff; padding:36px 34px; position:relative;
  border-top:4px solid var(--card-accent, var(--brand));
  box-shadow:0 0 0 1px var(--line-dark);
}
.activity-card .card-icon{ height:30px; width:auto; margin-bottom:16px; }
.activity-card h3{ font-size:1.22rem; margin-bottom:12px; color:var(--card-accent, var(--heading-on-light)); }
.activity-card a.card-link{
  display:inline-block; margin-top:10px; font-size:0.88rem;
  color:var(--card-accent, var(--brand)); border-bottom:1px solid currentColor;
}

/* why dhow / values list */
.trait-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }
@media (max-width:900px){ .trait-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .trait-list{ grid-template-columns:1fr; } }
.trait{ border-top:1px solid var(--line-dark); padding-top:20px; }
.cyan-section .trait{ border-top-color:rgba(255,255,255,0.35); }
.trait h4{ font-size:1.02rem; font-family:var(--sans); font-weight:600; margin-bottom:8px; }
.trait p{ font-size:0.95rem; margin:0; }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; margin-top:2.75rem; }
@media (max-width:640px){ .stats{ grid-template-columns:1fr; gap:1.75rem; } }
.stat b{ display:block; font-family:var(--mono); font-size:2.6rem; font-weight:500; color:#fff; }
.stat span{ font-size:0.95rem; color:rgba(255,255,255,0.85); }

/* photo panel with caption */
.photo-panel{ position:relative; }
.photo-panel img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.photo-panel figcaption{ font-size:0.82rem; color:var(--text-on-light-muted); margin-top:10px; }
.photo-single{ max-width:720px; margin:0 auto; }
.photo-single img{ aspect-ratio:16/9; }
.photo-duo{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:640px){ .photo-duo{ grid-template-columns:1fr; } }

/* what-we-do list on activity pages */
.wwd{ display:grid; grid-template-columns:1fr; gap:0; margin-top:8px; }
.wwd li{
  padding:16px 0 16px 26px; border-top:1px solid var(--line-dark);
  position:relative; font-size:0.98rem;
}
.wwd li::before{ content:""; position:absolute; left:0; top:24px; width:10px; height:1px; background:var(--accent, var(--brand)); }

/* closing cta band */
.cta-band{ background:var(--cyan); color:#fff; padding:86px 0; text-align:left; }
.cta-band h2{ color:#fff; font-size:clamp(1.8rem,3.4vw,2.6rem); }
.cta-band p{ color:rgba(255,255,255,0.88); }

/* activity domain tag */
.domain-tag{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:0.85rem; letter-spacing:0.06em; color:rgba(255,255,255,0.85);
}
.domain-tag img{ height:3.25rem; width:auto; margin-right:6px; }

/* note / quote block */
.note-block{ border-left:2px solid var(--line-dark); padding-left:22px; margin-top:26px; font-size:0.92rem; color:var(--text-on-light-muted); }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:0.82rem; color:var(--text-on-dark-muted); margin-bottom:8px; font-family:var(--mono); letter-spacing:0.03em; }
.field input, .field textarea{
  width:100%; background:transparent; border:1px solid var(--line);
  color:var(--text-on-dark); padding:13px 14px; font-family:var(--sans); font-size:0.98rem;
}
.field textarea{ resize:vertical; }
.contact-detail{ margin-bottom:26px; }
.contact-detail .k{ font-family:var(--mono); font-size:0.78rem; color:var(--text-on-dark-muted); letter-spacing:.05em; display:block; margin-bottom:6px; }
.contact-detail .v{ font-size:1.05rem; }
.contact-detail a:hover{ color:#fff; }
.contact-dark{ background:var(--ink); color:var(--text-on-dark); }
.contact-dark p{ color:var(--text-on-dark-muted); }
.contact-light{ background:var(--paper); color:var(--text-on-light); }
.contact-light .k{ color:var(--text-on-light-muted); }
.contact-light .v{ color:var(--text-on-light); }
.contact-light .v a:hover{ color:var(--cyan-deep); }
.contact-light .field label{ color:var(--text-on-light-muted); }
.contact-light .field input, .contact-light .field textarea{
  color:var(--text-on-light); border-color:var(--line-dark); background:#fff;
}

/* footer */
.site-footer{
  background:var(--ink); color:var(--text-on-dark-muted); padding:44px 0;
  border-top:1px solid var(--line); font-size:0.85rem;
}
.site-footer .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.site-footer img{ height:3rem; width:auto; opacity:0.9; }
.site-footer a:hover{ color:var(--text-on-dark); }

.text-accent{ color:var(--accent, var(--brand)); }

/* ==========================================================================
   Our Domains — photo + colour-panel cards (matches the approved reference)
   ========================================================================== */
.section-head .subtitle{ font-style:italic; color:var(--text-on-light-muted); margin-top:8px; font-size:1.02rem; }
.domains-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:760px){ .domains-grid{ grid-template-columns:1fr; } }
.domain-card{ display:flex; min-height:246px; }
@media (max-width:560px){ .domain-card{ flex-direction:column; min-height:0; } }
.domain-photo{ flex:0 0 34%; overflow:hidden; }
@media (max-width:560px){ .domain-photo{ flex:none; height:180px; } }
.domain-photo img{ width:100%; height:100%; object-fit:cover; }
.domain-panel{
  flex:1; position:relative; padding:30px 32px; color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(155deg, color-mix(in srgb, var(--dc) 58%, white), color-mix(in srgb, var(--dc) 78%, black));
}
.domain-watermark{ position:absolute; top:18px; right:22px; width:34px; height:auto; opacity:0.32; }
.domain-panel h3{ font-family:var(--sans); font-weight:700; font-size:1.15rem; line-height:1.35; margin-bottom:14px; color:#fff; }
.domain-panel h3 .brand-line{ display:block; }
.domain-panel p{ font-size:0.92rem; color:rgba(255,255,255,0.92); max-width:36ch; margin:0; }

/* ==========================================================================
   Home hero — photo + solid cyan panel, side by side
   ========================================================================== */
.hero-split{ display:grid; grid-template-columns:1.15fr 1fr; min-height:82vh; padding:0; }
@media (max-width:860px){ .hero-split{ grid-template-columns:1fr; min-height:0; } }
.hero-split .photo{ position:relative; overflow:hidden; min-height:320px; }
.hero-split .photo img{ width:100%; height:100%; object-fit:cover; }
.hero-split .panel{
  background:var(--cyan); color:#fff; display:flex; flex-direction:column;
  justify-content:center; padding:9rem 3.5rem 3.75rem;
}
@media (max-width:860px){ .hero-split .panel{ padding:56px; } }
.hero-split .lede{ font-size:1.05rem; max-width:52ch; color:rgba(255,255,255,0.88); margin-top:16px; }
.hero-split h1{ font-size:clamp(2rem,4vw,3rem); max-width:16ch; color:#fff; }

/* ==========================================================================
   Strategic drivers — numbered context cards (Home)
   ========================================================================== */
.drivers-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); margin-top:12px; }
@media (max-width:900px){ .drivers-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .drivers-grid{ grid-template-columns:1fr; } }
.driver-card{ background:var(--paper); padding:28px 26px; border-top:3px solid var(--cyan); }
.driver-card .num{ font-family:var(--mono); font-size:1.3rem; color:var(--cyan-deep); opacity:0.55; display:block; margin-bottom:14px; }
.driver-card h4{ font-family:var(--sans); font-weight:600; font-size:1rem; margin-bottom:10px; }
.driver-card p{ font-size:0.9rem; margin:0; color:var(--text-on-light-muted); }

/* ==========================================================================
   Photo collage — playful overlapping compilation (activity pages)
   ========================================================================== */
.photo-collage{ position:relative; height:460px; margin:0 auto; max-width:640px; }
@media (max-width:640px){ .photo-collage{ height:360px; } }
.collage-item{
  position:absolute; padding:6px; background:#fff;
  box-shadow:0 14px 30px -10px rgba(19,32,43,0.35);
}
.collage-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.collage-item:nth-child(1){ top:0%;   left:0%;  width:52%; height:52%; transform:rotate(-5deg); z-index:2; }
.collage-item:nth-child(2){ top:4%;   left:46%; width:46%; height:44%; transform:rotate(4deg);  z-index:3; }
.collage-item:nth-child(3){ top:52%;  left:4%;  width:44%; height:46%; transform:rotate(3deg);  z-index:1; }
.collage-item:nth-child(4){ top:46%;  left:52%; width:44%; height:50%; transform:rotate(-3deg); z-index:4; }

/* ==========================================================================
   Round 3 layout updates
   ========================================================================== */
/* Home: wide photo under Who We Are */
.wide-photo{ margin:2.5rem 0 0; }
.wide-photo img{ width:100%; aspect-ratio:21/9; object-fit:cover; }
@media (max-width:640px){ .wide-photo img{ aspect-ratio:4/3; } }

/* About intro: photo left, all text right (mirrors the Home hero) */
.about-split{ display:grid; grid-template-columns:1fr 1fr; padding:0; }
@media (max-width:860px){ .about-split{ grid-template-columns:1fr; } }
.about-split .photo{ position:relative; overflow:hidden; min-height:340px; }
.about-split .photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:860px){ .about-split .photo{ min-height:300px; } }
.about-split .panel{ background:var(--cyan); color:#fff; padding:9rem 3.5rem 4rem; }
@media (max-width:860px){ .about-split .panel{ padding:3.5rem 1.5rem; } }
.about-split .panel .kicker{ font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em; color:rgba(255,255,255,0.85); display:block; margin-bottom:14px; }
.about-split .panel h1{ color:#fff; font-size:clamp(2rem,3.6vw,2.8rem); margin-bottom:20px; }
.about-split .panel p{ color:rgba(255,255,255,0.92); }
.about-split .panel h3{ color:#fff; font-size:1.3rem; margin:2.5rem 0 0.6rem; }
.about-split .panel h3 + p{ margin-bottom:0; }
.about-split .panel .vm{ margin-top:0.5rem; }
.about-split .panel .vm h3:first-child{ margin-top:2.25rem; }
.key-message{
  margin:2.75rem 0 0; padding:1.5rem 1.6rem; background:rgba(255,255,255,0.12);
  border-left:3px solid #fff; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.2rem,1.7vw,1.5rem); line-height:1.35; color:#fff; max-width:34em;
}
.key-message .lbl{ display:block; font-family:var(--mono); font-size:0.75rem; letter-spacing:0.08em; font-weight:400; margin-bottom:0.6rem; opacity:0.85; }

/* Activity pages: two uncropped photos, still playful */
.photo-pair{ display:flex; justify-content:center; align-items:center; gap:0; padding:1rem 0; }
.photo-pair .pp{ background:#fff; padding:7px; box-shadow:0 14px 30px -10px rgba(19,32,43,0.35); flex:0 1 auto; }
.photo-pair .pp img{ display:block; width:100%; height:auto; }
.photo-pair .pp.portrait{ width:min(34%, 22rem); }
.photo-pair .pp.landscape{ width:min(46%, 30rem); }
.photo-pair .pp:nth-child(1){ transform:rotate(-3deg); z-index:1; margin-right:-2.5%; }
.photo-pair .pp:nth-child(2){ transform:rotate(3deg) translateY(1.5rem); z-index:2; }
@media (max-width:640px){
  .photo-pair{ flex-direction:column; gap:1.5rem; }
  .photo-pair .pp.portrait, .photo-pair .pp.landscape{ width:86%; margin:0 !important; }
  .photo-pair .pp:nth-child(2){ transform:rotate(2deg); }
}

/* Contact form status */
.form-status{ margin-top:1.25rem; padding:1rem 1.2rem; background:#E6F6F8; border-left:3px solid var(--cyan); color:var(--text-on-light); display:none; }
.form-status.is-error{ background:#FBECEA; border-left-color:#B5483A; }
.form-status.is-visible{ display:block; }
.hidden-field{ position:absolute; left:-9999px; }

/* Language switch: flag instead of FR / EN */
.nav-lang{ display:inline-flex; align-items:center; padding:0; border:0; margin-left:8px; }
.nav-lang .flag{ display:block; height:1.15rem; width:auto; box-shadow:0 0 0 1px rgba(255,255,255,0.35); transition:transform .15s ease; }
.nav-lang:hover .flag{ transform:scale(1.08); }
.nav-lang:hover{ border:0; }