*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#eee9df;color:#17373a;font-family:Arial,sans-serif;line-height:1.65}header{height:112px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;background:rgba(8,39,42,.94);backdrop-filter:blur(10px)}header img{width:104px;height:104px;object-fit:contain}header nav{display:flex;gap:24px}header nav a{color:#f4f0e7;text-decoration:none;font-size:14px}header button{display:none;background:none;border:0;color:white;font-size:28px}.hero{min-height:80vh;background:url("assets/hero.jpg") center/cover no-repeat;display:flex;align-items:center;padding:70px 7vw}.hero-card{width:min(760px,92vw);padding:38px 42px;background:rgba(8,39,42,.78);backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 50px #0005}.hero h1,h2{font-family:Georgia,serif;font-weight:500;line-height:1.05}.hero h1{font-size:clamp(48px,6vw,80px);color:white;margin:8px 0 22px}.hero-card>p:not(.ey){color:#e8f0ee;font-size:18px}.ey{text-transform:uppercase;letter-spacing:.17em;font-size:12px;font-weight:800;color:#9a7634}.light{color:#f0d69c}.buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-block;text-decoration:none;font-weight:700;padding:12px 19px;border-radius:3px}.gold{background:#d0a64e;color:#173237}.outline{border:1px solid #fffb;color:white}.focus{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#d3c5a5;padding:1px 6vw}.focus div{background:#e6e0d5;padding:24px;font-family:Georgia,serif;font-size:18px}.section,.origin,.partners{padding:92px 7vw}.split{display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center}.section{background:#ebe6dc}.section:nth-of-type(even){background:#e5e0d6}h2{font-size:clamp(38px,5vw,59px);margin:6px 0 28px}.split img{width:100%;min-height:420px;height:100%;object-fit:cover;box-shadow:0 16px 40px #0e313424}.origin,.partners{background:linear-gradient(125deg,#0c3539,#19585a);color:white}.origin p,.partners p{color:#e0e9e7}.head{text-align:center;max-width:800px;margin:0 auto 42px}.twocards,.services{display:grid;grid-template-columns:1fr 1fr;gap:20px}.twocards article,.services article{background:#f4f1ea;padding:34px;border-top:3px solid #d0a64e}.twocards h3,.services h3{font-family:Georgia,serif;font-size:27px;margin:8px 0}.values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}.values article{background:#eae5dc;border:1px solid #d4ccba;padding:24px}.values h4{font-family:Georgia,serif;font-size:21px;margin:0 0 8px}.what{background:#e8e3d9}.contact{display:grid;grid-template-columns:1fr .8fr;gap:65px;align-items:center}.contact-card{background:#f4f1ea;border:1px solid #d2cbbc;padding:34px;display:flex;flex-direction:column;gap:10px}.contact-card strong{font-family:Georgia,serif;font-size:27px}.contact-card .btn{width:max-content}footer{background:#08282b;color:#dce8e5;text-align:center;padding:48px 20px}footer img{width:105px;height:105px;object-fit:contain}@media(max-width:880px){header{height:100px}header img{width:92px;height:92px}header button{display:block}header nav{display:none;position:absolute;top:100px;left:0;right:0;background:#092c2f;padding:24px;flex-direction:column}header nav.open{display:flex}.focus{grid-template-columns:1fr 1fr}.split,.twocards,.services,.contact{grid-template-columns:1fr}.values{grid-template-columns:1fr 1fr}.hero{padding:30px 20px}.hero-card{padding:30px 27px}.origin img{order:2}}@media(max-width:540px){.hero h1{font-size:46px}.focus,.values{grid-template-columns:1fr}}
.founders{background:#e4ded3}.founder-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.founder-grid article{background:#f4f1ea;padding:32px;border-top:3px solid #d0a64e;box-shadow:0 10px 26px #0e313410}.founder-grid h3{font-family:Georgia,serif;font-size:30px;margin:0 0 8px}.founder-meta{font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:#8c6b31;font-weight:700}.founder-grid p:last-child{margin-bottom:0}@media(max-width:880px){.founder-grid{grid-template-columns:1fr}}

/* V7 refined navigation + hero composition */
header{
  height:112px;
  padding:0 clamp(20px,5.5vw,78px);
  background:linear-gradient(90deg,#082b2f 0%,#0d383b 55%,#123f41 100%);
  border-bottom:1px solid rgba(208,166,78,.38);
  box-shadow:0 7px 24px rgba(5,27,29,.18);
}
header>a:first-child{
  display:flex;align-items:center;height:100%;
}
header>a:first-child img{
  width:104px;height:104px;object-fit:contain;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.22));
}
header nav{
  align-items:center;
  gap:8px;
  padding:6px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.045);
}
header nav a{
  padding:9px 14px;
  border-radius:999px;
  font-size:13px;
  letter-spacing:.025em;
  transition:.2s ease;
}
header nav a:hover{
  color:#f4d995;
  background:rgba(255,255,255,.07);
}
.hero{
  min-height:78vh;
  align-items:center;
  justify-content:flex-start;
  background-position:center center;
  padding-left:clamp(20px,5vw,72px);
  padding-right:clamp(20px,5vw,72px);
}
.hero-card{
  width:min(590px,47vw);
  padding:30px 34px;
  background:linear-gradient(135deg,rgba(5,35,38,.67),rgba(9,48,51,.55));
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  border:1px solid rgba(231,208,158,.24);
  border-left:3px solid rgba(208,166,78,.82);
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}
.hero h1{
  font-size:clamp(43px,5vw,68px);
  line-height:1.01;
  margin:8px 0 18px;
}
.hero-card>p:not(.ey){
  font-size:16.5px;
  line-height:1.6;
  max-width:540px;
}
.hero .buttons{margin-top:22px}
.hero .btn{padding:11px 16px}
@media(max-width:880px){
  header{height:100px}
  header>a:first-child img{width:92px;height:92px}
  header nav{
    top:100px;
    border-radius:0;
    padding:20px;
    gap:5px;
    background:#092f32;
  }
  header nav a{padding:10px 12px}
  .hero{
    min-height:76vh;
    align-items:flex-end;
    padding:30px 18px 34px;
    background-position:58% center;
  }
  .hero-card{
    width:min(560px,92vw);
    padding:24px 24px;
    background:linear-gradient(135deg,rgba(5,35,38,.69),rgba(9,48,51,.56));
  }
  .hero h1{font-size:clamp(39px,10vw,52px)}
}
/* V8 preview: more open hero, preserve waterfall */
.hero{min-height:82vh;align-items:flex-end;padding:0 clamp(18px,4vw,58px) 42px;background-position:center 42%;}
.hero-card{width:min(510px,42vw);padding:24px 28px;background:linear-gradient(135deg,rgba(5,35,38,.56),rgba(9,48,51,.43));backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(231,208,158,.20);border-left:2px solid rgba(208,166,78,.76);box-shadow:0 14px 34px rgba(0,0,0,.14)}
.hero h1{font-size:clamp(40px,4.3vw,59px);line-height:1.01;margin:7px 0 15px}.hero-card>p:not(.ey){font-size:15.5px;line-height:1.52}.hero .buttons{margin-top:18px}.hero .btn{padding:10px 14px;font-size:14px}
header>a:first-child img{filter:drop-shadow(0 5px 12px rgba(0,0,0,.22))}
@media(max-width:880px){.hero{min-height:78vh;align-items:flex-end;padding:0 16px 24px;background-position:54% 36%}.hero-card{width:min(470px,86vw);padding:20px 21px;background:linear-gradient(135deg,rgba(5,35,38,.58),rgba(9,48,51,.43))}.hero h1{font-size:clamp(35px,8.8vw,46px)}.hero-card>p:not(.ey){font-size:15px}.hero .ey{font-size:10.5px}}

/* V8 visual refinements */
:root{
  --banner:#071d20;
  --about-bg:#d9d2c5;
  --purpose-bg:#ddd7cc;
  --contact-bg:#ddd7cc;
}

/* Header + footer use exactly the same background */
header{
  height:112px;
  overflow:visible;
  background:var(--banner) !important;
  border-bottom:1px solid rgba(208,166,78,.42);
  box-shadow:0 8px 26px rgba(0,0,0,.22);
}
footer{
  background:var(--banner) !important;
}

/* Make the brand unmistakable: logo about 2x and intentionally overlapping banner */
header>a:first-child{
  position:relative;
  height:112px;
  width:190px;
  display:flex;
  align-items:center;
  overflow:visible;
  z-index:40;
}
header>a:first-child img{
  position:absolute;
  width:188px !important;
  height:188px !important;
  max-width:none;
  object-fit:contain;
  top:50%;
  left:0;
  transform:translateY(-50%);
  filter:drop-shadow(0 7px 15px rgba(0,0,0,.28));
}

/* Desktop menu: larger text + elegant gold vertical separators */
header nav{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:0 !important;
  gap:0 !important;
}
header nav a{
  position:relative;
  font-size:15px !important;
  letter-spacing:.035em;
  padding:8px 17px !important;
  border-radius:0 !important;
}
header nav a + a::before{
  content:"";
  position:absolute;
  left:0;
  top:24%;
  width:1px;
  height:52%;
  background:rgba(208,166,78,.62);
}
header nav a:hover{
  background:transparent !important;
  color:#efd596 !important;
}

/* Desktop hero: smaller, lighter panel, lower-left */
.hero{
  align-items:flex-end !important;
  justify-content:flex-start !important;
  padding:42px clamp(20px,5vw,72px) 34px !important;
}
.hero-card{
  width:min(520px,42vw) !important;
  padding:23px 27px !important;
  background:linear-gradient(135deg,rgba(5,31,34,.53),rgba(8,45,48,.42)) !important;
  backdrop-filter:blur(3px) !important;
  -webkit-backdrop-filter:blur(3px) !important;
  border:1px solid rgba(231,208,158,.20) !important;
  border-left:2px solid rgba(208,166,78,.78) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.14) !important;
}
.hero h1{
  font-size:clamp(38px,4.2vw,57px) !important;
  line-height:1.01 !important;
  margin:6px 0 14px !important;
}
.hero-card>p:not(.ey){
  font-size:15px !important;
  line-height:1.5 !important;
}
.hero .buttons{
  margin-top:17px !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:9px !important;
}
.hero .btn{
  padding:9px 12px !important;
  font-size:13px !important;
  white-space:nowrap;
}

/* Softer/darker neutral sections */
#about{
  background:var(--about-bg) !important;
}
#purpose{
  background:var(--purpose-bg) !important;
}
#contact{
  background:var(--contact-bg) !important;
}

/* Keep inner cards slightly lighter for readable hierarchy */
#purpose .twocards article,
#purpose .values article,
#contact .contact-card{
  background:#e9e4da !important;
}

/* Mobile */
@media(max-width:880px){
  header{
    height:100px !important;
    background:var(--banner) !important;
  }
  header>a:first-child{
    height:100px;
    width:142px;
  }
  header>a:first-child img{
    width:150px !important;
    height:150px !important;
    left:-7px;
  }
  header button{
    position:relative;
    z-index:45;
    color:#efd596 !important;
    font-size:30px !important;
  }
  header nav{
    top:100px !important;
    background:var(--banner) !important;
    padding:18px 22px !important;
    border-top:1px solid rgba(208,166,78,.32) !important;
  }
  header nav a{
    font-size:16px !important;
    padding:11px 6px !important;
    border-bottom:1px solid rgba(208,166,78,.20);
  }
  header nav a + a::before{display:none}

  .hero{
    min-height:76vh !important;
    align-items:flex-end !important;
    padding:26px 14px 24px !important;
    background-position:58% center !important;
  }
  .hero-card{
    width:min(520px,94vw) !important;
    padding:20px 20px !important;
    background:linear-gradient(135deg,rgba(5,31,34,.54),rgba(8,45,48,.43)) !important;
  }
  .hero h1{
    font-size:clamp(34px,9vw,45px) !important;
    margin-bottom:11px !important;
  }
  .hero-card>p:not(.ey){
    font-size:14px !important;
    line-height:1.45 !important;
  }
  .hero .buttons{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:7px !important;
    margin-top:14px !important;
  }
  .hero .btn{
    flex:1 1 0;
    text-align:center;
    padding:9px 5px !important;
    font-size:11.5px !important;
    white-space:nowrap;
  }
}

/* V9 DESKTOP-ONLY FIXES — mobile remains exactly as v8 */
@media (min-width: 881px){

  /* Header + footer */
  header{
    height:112px !important;
    background:#071d20 !important;
    border-bottom:1px solid rgba(208,166,78,.52) !important;
    box-shadow:0 8px 28px rgba(0,0,0,.22) !important;
    overflow:visible !important;
    padding:0 54px !important;
  }
  footer{
    background:#071d20 !important;
  }

  /* Large logo, intentionally overlapping banner */
  header > a:first-child{
    position:relative !important;
    width:220px !important;
    height:112px !important;
    flex:0 0 220px !important;
    overflow:visible !important;
    z-index:50 !important;
  }
  header > a:first-child img{
    position:absolute !important;
    width:215px !important;
    height:215px !important;
    max-width:none !important;
    max-height:none !important;
    left:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    object-fit:contain !important;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.30)) !important;
  }

  /* Desktop menu: larger type + vertical gold separators */
  header nav{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
    margin-left:auto !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
  }
  header nav a{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    color:#f7f2e8 !important;
    font-size:16px !important;
    font-weight:500 !important;
    letter-spacing:.035em !important;
    padding:10px 18px !important;
    background:transparent !important;
    border-radius:0 !important;
  }
  header nav a + a::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:0 !important;
    top:24% !important;
    width:1px !important;
    height:52% !important;
    background:#b98e3e !important;
    opacity:.85 !important;
  }
  header nav a:hover{
    color:#efd596 !important;
    background:transparent !important;
  }

  /* Desktop hero: much smaller, lighter card placed lower-left */
  .hero{
    min-height:80vh !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
    padding:34px 54px 30px !important;
    background-position:center center !important;
  }
  .hero-card{
    width:470px !important;
    max-width:470px !important;
    padding:18px 22px !important;
    background:linear-gradient(135deg,rgba(5,31,34,.40),rgba(8,45,48,.30)) !important;
    backdrop-filter:blur(2px) !important;
    -webkit-backdrop-filter:blur(2px) !important;
    border:1px solid rgba(231,208,158,.16) !important;
    border-left:2px solid rgba(208,166,78,.72) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.12) !important;
  }
  .hero h1{
    font-size:44px !important;
    line-height:1.02 !important;
    margin:5px 0 11px !important;
  }
  .hero-card > p:not(.ey){
    font-size:14.5px !important;
    line-height:1.45 !important;
    margin-bottom:0 !important;
  }
  .hero .ey{
    font-size:10.5px !important;
    margin-bottom:6px !important;
  }
  .hero .buttons{
    margin-top:13px !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
  }
  .hero .btn{
    padding:8px 11px !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }
}

/* V11 — refined brand banner */
:root{--brand-green:#0b3034}

/* Banner and footer: same greener petroleum tone */
header{
  height:92px !important;
  min-height:92px !important;
  background:var(--brand-green) !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
footer{background:var(--brand-green) !important}

/* Gold light-reflection line under banner */
header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:3px;
  background:linear-gradient(90deg,
    rgba(181,137,54,0) 0%,
    rgba(190,145,58,.28) 14%,
    rgba(235,200,118,.72) 38%,
    rgba(255,231,164,1) 52%,
    rgba(223,181,94,.72) 68%,
    rgba(183,137,51,.24) 88%,
    rgba(181,137,54,0) 100%);
  box-shadow:0 0 7px rgba(231,190,104,.42);
}

/* Logo remains large and intentionally overlaps thinner banner */
header>a:first-child{
  height:92px !important;
  width:205px !important;
  flex:0 0 205px !important;
}
header>a:first-child img{
  width:190px !important;
  height:190px !important;
}

/* More refined desktop menu typography */
@media(min-width:881px){
  header nav a{
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:16px !important;
    font-weight:400 !important;
    letter-spacing:.055em !important;
    padding:9px 18px !important;
  }

  /* Vertical separators: bright center, fading ends */
  header nav a + a::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:0 !important;
    top:14% !important;
    width:2px !important;
    height:72% !important;
    background:linear-gradient(to bottom,
      rgba(208,166,78,0) 0%,
      rgba(223,184,96,.30) 18%,
      rgba(255,226,150,.95) 50%,
      rgba(223,184,96,.30) 82%,
      rgba(208,166,78,0) 100%) !important;
    box-shadow:0 0 5px rgba(239,202,118,.25);
  }
}

/* Mobile banner gets the same green and thinner proportion */
@media(max-width:880px){
  header{
    height:88px !important;
    min-height:88px !important;
    background:var(--brand-green) !important;
  }
  header>a:first-child{
    height:88px !important;
    width:140px !important;
  }
  header>a:first-child img{
    width:145px !important;
    height:145px !important;
  }
  header nav{
    top:88px !important;
    background:var(--brand-green) !important;
  }
}

/* V12 final requested refinements */

/* Desktop only: larger logo/menu and waterfall framing */
@media(min-width:881px){
  /* +20% over current banner logo */
  header > a:first-child{
    width:246px !important;
    flex-basis:246px !important;
  }
  header > a:first-child img{
    width:228px !important;
    height:228px !important;
    max-width:none !important;
    max-height:none !important;
  }

  /* Slightly larger menu typography */
  header nav a{
    font-size:17.5px !important;
  }

  /* Show the upper portion and keep the main fall to the right of copy */
  .hero{
    background-position:72% 18% !important;
  }
}

/* Footer logo: same visual size as desktop banner logo */
footer img{
  width:228px !important;
  height:228px !important;
  max-width:none !important;
  object-fit:contain !important;
  filter:drop-shadow(0 7px 15px rgba(0,0,0,.24));
}

/* Mobile: keep approved hero crop/layout, but make footer brand equally prominent */
@media(max-width:880px){
  footer img{
    width:145px !important;
    height:145px !important;
  }
}

/* V13 mobile menu: illuminated gold horizontal separators */
@media(max-width:880px){
  header nav a{
    border-bottom:0 !important;
    position:relative !important;
  }
  header nav a:not(:last-child)::after{
    content:"" !important;
    position:absolute !important;
    left:4% !important;
    right:4% !important;
    bottom:0 !important;
    height:2px !important;
    background:linear-gradient(90deg,
      rgba(208,166,78,0) 0%,
      rgba(223,184,96,.28) 18%,
      rgba(255,226,150,.96) 50%,
      rgba(223,184,96,.28) 82%,
      rgba(208,166,78,0) 100%) !important;
    box-shadow:0 0 5px rgba(239,202,118,.28) !important;
  }
}

/* V14 mobile navigation typography matches desktop */
@media(max-width:880px){
  header nav a{
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:16px !important;
    font-weight:400 !important;
    letter-spacing:.055em !important;
  }
}

/* V15 mobile logo: +20%, aligned so STORE sits near the banner baseline */
@media(max-width:880px){
  header > a:first-child{
    width:168px !important;
    flex-basis:168px !important;
    height:88px !important;
    overflow:visible !important;
  }
  header > a:first-child img{
    width:174px !important;
    height:174px !important;
    max-width:none !important;
    max-height:none !important;
    left:-8px !important;
    top:48% !important;
    transform:translateY(-50%) !important;
  }
}