@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --forest:#024B43;
  --forest-dark:#01312B;
  --forest-light:#0B5F55;
  --gold:#A6823C;
  --gold-light:#C9A768;
  --gold-dark:#8A6A2E;
  --ivory:#F8F6F1;
  --ink:#10231F;
}

html{scroll-behavior:smooth; font-size:106.25%;} /* ~17px base: a touch larger than default across the whole site */

body{
  font-family:"Open Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--ivory);
  line-height:1.65;
}

.font-display{font-family:"Open Sans",sans-serif; font-weight:700;}
h1, h2, h3, h4{font-weight:700;}

/* ---------- selection & focus ---------- */
::selection{background:var(--gold); color:#fff;}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- header ---------- */
#site-header{
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .45s ease, border-color .45s ease, box-shadow .45s ease;
}
#site-header .nav-word{color:#F8F6F1;}
#site-header .nav-link{color:rgba(248,246,241,.88);}

#site-header.header-solid{
  background:#FFFFFF;
  border-color:rgba(2,75,67,.08);
  box-shadow:0 12px 30px -18px rgba(2,75,67,.25);
}
#site-header.header-solid .nav-word{color:var(--forest);}
#site-header.header-solid .nav-link{color:rgba(16,35,31,.7);}

/* shrink the bar itself once scrolled, for a lively "settling" motion */
.nav-inner{transition:height .4s cubic-bezier(.65,0,.35,1);}
.nav-logo{
  border-radius:50%;
  border:1px solid #FFFFFF;
  box-shadow:0 4px 14px -6px rgba(0,0,0,0.35), 0 0 0 0 rgba(255,255,255,.55);
  transition:height .4s cubic-bezier(.65,0,.35,1), width .4s cubic-bezier(.65,0,.35,1), border-color .4s ease;
  animation:logoRingPulse 2.8s ease-out infinite;
}

@keyframes logoRingPulse{
  0%   { box-shadow:0 4px 14px -6px rgba(0,0,0,0.35), 0 0 0 0 rgba(255,255,255,.55); }
  70%  { box-shadow:0 4px 14px -6px rgba(0,0,0,0.35), 0 0 0 9px rgba(255,255,255,0); }
  100% { box-shadow:0 4px 14px -6px rgba(0,0,0,0.35), 0 0 0 0 rgba(255,255,255,0); }
}
#site-header.header-solid .nav-inner{height:4.25rem;}
#site-header.header-solid .nav-logo{height:3.25rem; width:3.25rem;}

.nav-link{position:relative; padding-bottom:6px;}
.nav-link::after{
  content:"";
  position:absolute; left:50%; right:50%; bottom:0; height:1px;
  background:var(--gold);
  transition:left .35s ease, right .35s ease;
}
.nav-link:hover::after, .nav-link.is-active::after{left:0; right:0;}
.nav-link:hover, .nav-link.is-active{color:var(--gold-light);}
#site-header.header-solid .nav-link:hover, #site-header.header-solid .nav-link.is-active{color:var(--forest);}

/* call icon button (desktop + mobile) — light on the transparent bar, dark once inverted */
.call-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem;
  border:1px solid rgba(248,246,241,.5);
  color:#F8F6F1;
  border-radius:50%;
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}
#site-header.header-solid .call-icon-btn{
  border-color:rgba(2,75,67,.2);
  color:var(--forest);
}
.call-icon-btn:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
  transform:scale(1.08) rotate(8deg);
}

/* mobile menu */
#mobileMenu{
  position:fixed; top:0; right:0; height:100vh; width:min(86vw,380px);
  background:var(--forest);
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.65,0,.35,1);
  z-index:60;
}
#mobileMenu.is-open{transform:translateX(0);}
#menuOverlay{
  position:fixed; inset:0; background:rgba(1,20,17,.55);
  opacity:0; pointer-events:none; transition:opacity .4s ease; z-index:55;
}
#menuOverlay.is-open{opacity:1; pointer-events:auto;}

.hamburger-line{transition:transform .35s ease, opacity .35s ease, background-color .45s ease; background-color:#F8F6F1;}
#site-header.header-solid .hamburger-line{background-color:var(--forest);}
#menuToggle[aria-expanded="true"] .line-1{transform:translateY(6px) rotate(45deg);}
#menuToggle[aria-expanded="true"] .line-2{opacity:0;}
#menuToggle[aria-expanded="true"] .line-3{transform:translateY(-6px) rotate(-45deg);}

/* ---------- buttons ---------- */
.btn-gold{
  position:relative;
  display:inline-flex; align-items:center; gap:.65rem;
  padding:.9rem 2.3rem;
  background:var(--gold);
  color:#fff;
  font-family:"Open Sans",sans-serif;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  border:1px solid var(--gold);
  overflow:hidden;
  z-index:0;
  clip-path:polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%);
  transition:color .45s ease, border-color .45s ease, transform .35s ease;
}
.btn-gold::before{
  content:"";
  position:absolute; inset:0;
  background:var(--forest);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
  z-index:-1;
}
.btn-gold::after{
  content:"";
  order:-1;
  width:14px; height:14px; flex-shrink:0;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition:transform .4s ease;
}
.btn-gold:hover::before{transform:scaleX(1); transform-origin:left;}
.btn-gold:hover::after{transform:translateX(-4px);}
.btn-gold[href^="#"]::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
}
.btn-gold[href^="#"]:hover::after{transform:translateY(3px);}
.btn-gold:hover{border-color:var(--forest); transform:translateY(-2px);}
.btn-gold.nav-cta{padding:.65rem 1.6rem; font-size:.72rem; gap:.5rem;}
.btn-gold.nav-cta::after{width:11px; height:11px;}

.btn-outline{
  position:relative;
  display:inline-flex; align-items:center; gap:.65rem;
  padding:.9rem 2.1rem;
  background:transparent;
  border:1px solid currentColor;
  font-family:"Open Sans",sans-serif;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  overflow:hidden;
  z-index:0;
  transition:color .45s ease, transform .35s ease;
}
.btn-outline::before{
  content:"";
  position:absolute; inset:0;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
  z-index:-1;
}
.btn-outline::after{
  content:"";
  width:13px; height:13px; flex-shrink:0;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition:transform .4s ease;
}
/* anchor-links to an in-page section point down instead of forward */
.btn-outline[href^="#"]::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
}
.btn-outline:hover::before{transform:scaleX(1); transform-origin:left;}
.btn-outline:hover::after{transform:translateX(4px);}
.btn-outline[href^="#"]:hover::after{transform:translateY(3px);}
.btn-outline:hover{transform:translateY(-2px);}
.btn-outline.on-dark{color:var(--ivory);}
.btn-outline.on-dark::before{background:rgba(248,246,241,.12);}
.btn-outline.on-light{color:var(--forest);}
.btn-outline.on-light::before{background:rgba(2,75,67,.07);}

/* auto-looping attention motion — no hover needed */
@keyframes btnPulseRing{
  0%{box-shadow:0 0 0 0 currentColor;}
  70%{box-shadow:0 0 0 9px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}
@keyframes btnBreathe{
  0%, 100%{transform:scale(1);}
  50%{transform:scale(1.045);}
}
/* .btn-gold has a clip-path, which would clip a box-shadow ring — use a scale breathe instead */
.btn-gold.btn-pulse{animation:btnBreathe 2.6s ease-in-out infinite;}
.btn-gold.btn-pulse:hover{animation-play-state:paused; transform:translateY(-2px);}
/* .btn-outline is a plain rectangle, so the box-shadow ring renders cleanly */
.btn-outline.btn-pulse{animation:btnPulseRing 2.6s cubic-bezier(.4,0,.6,1) infinite;}
.btn-outline.btn-pulse:hover{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){
  .btn-pulse{animation:none;}
}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ---------- hero blueprint drawing ---------- */
.blueprint path{
  fill:none;
  stroke:var(--gold-light);
  stroke-width:1.4;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  transition:stroke-dashoffset 2.6s cubic-bezier(.22,.61,.36,1);
}
.blueprint.is-drawn path{stroke-dashoffset:0;}
.blueprint rect.window{
  fill:none; stroke:rgba(248,246,241,.35); stroke-width:1;
  opacity:0; transition:opacity 1s ease;
}
.blueprint.is-drawn rect.window{opacity:1; transition-delay:1.6s;}

/* light-background variant: dark strokes instead of pale ones */
.blueprint-light path{stroke:var(--gold-dark);}
.blueprint-light rect.window{stroke:rgba(2,75,67,.4);}

/* underline draw for hero headline */
.title-underline{
  display:block; height:2px; width:0; background:var(--gold);
  transition:width 1.1s cubic-bezier(.22,.61,.36,1);
}
.title-underline.is-drawn{width:100%;}

/* ---------- marquee ---------- */
.marquee-wrap{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex; width:max-content; animation:marquee 38s linear infinite;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}

/* ---------- misc hovers ---------- */
.icon-card{transition:transform .4s ease, border-color .4s ease;}
.icon-card:hover{transform:translateY(-6px);}
.icon-card:hover .icon-badge{border-color:var(--gold); color:var(--gold);}
.icon-badge{transition:border-color .4s ease, color .4s ease;}

.panel{transition:box-shadow .4s ease, transform .4s ease;}
.panel:hover{transform:translateY(-4px); box-shadow:0 24px 60px -30px rgba(2,75,67,.35);}

.link-arrow svg{transition:transform .3s ease;}
.link-arrow:hover svg{transform:translateX(5px);}

/* count-up numbers just need to exist for JS to target */
[data-counter]{font-variant-numeric:tabular-nums;}

/* ---------- auto-rotating image gallery ---------- */
.gallery-slide{
  position:absolute; inset:0;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.4s ease, transform 8s linear;
}
.gallery-slide.is-active{
  opacity:1;
  transform:scale(1);
  z-index:1;
}
.gallery-dot{
  width:9px; height:9px; border-radius:50%;
  background:rgba(2,75,67,.22);
  transition:background-color .35s ease, transform .35s ease;
}
.gallery-dot.is-active{background:var(--gold); transform:scale(1.25);}

@media (prefers-reduced-motion: reduce){
  .gallery-slide{transition:opacity .3s ease; transform:none;}
}

/* ---------- project filter ---------- */
.filter-btn{
  padding:.6rem 1.3rem;
  border:1px solid rgba(2,75,67,.25);
  color:var(--forest);
  font-family:"Open Sans",sans-serif;
  font-size:.85rem;
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
.filter-btn.is-active, .filter-btn:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
}
.project-card{transition:opacity .35s ease, transform .4s ease;}
.project-card .project-img{overflow:hidden;}
.project-card .project-img img{transition:transform .6s ease;}
.project-card:hover .project-img img{transform:scale(1.06);}

/* ---------- partner / client logo grid ---------- */
.partner-card{
  background:#fff;
  border:1px solid rgba(2,75,67,0.10);
  padding:1.75rem 1.25rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.partner-card:hover{
  transform:translateY(-4px);
  border-color:rgba(166,130,60,0.4);
  box-shadow:0 16px 32px -20px rgba(2,20,17,0.25);
}
.partner-logo{
  width:100%;
  max-width:120px;
  height:auto;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:.75;
  transition:filter .4s ease, opacity .4s ease;
}
.partner-card:hover .partner-logo{
  filter:grayscale(0%);
  opacity:1;
}
.partner-name{
  font-size:.8rem;
  letter-spacing:.02em;
  color:var(--ink);
  opacity:.65;
  text-align:center;
}

/* ---------- contact page ---------- */
.contact-card{transition:transform .4s ease, border-color .4s ease;}
.contact-card:hover{transform:translateY(-5px); border-color:var(--gold);}

.connect-row{transition:background-color .3s ease, padding-left .3s ease;}
.connect-row:hover{background-color:rgba(2,75,67,.04); padding-left:.5rem;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .marquee-track{animation:none;}
  .blueprint path, .blueprint rect.window, .title-underline{transition:none;}
  .blueprint path{stroke-dashoffset:0;}
  .blueprint rect.window{opacity:1;}
  .title-underline{width:100%;}
  .parallax-el{transform:none !important;}
  .nav-logo{animation:none; box-shadow:0 4px 14px -6px rgba(0,0,0,0.35);}
}

/* ---------- film grain texture (adds tactile depth to dark sections) ---------- */
.grain{position:relative; isolation:isolate;}
.grain::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.grain > *{position:relative; z-index:2;}
.grain > .ghost-text{z-index:0;}

/* ---------- hero text readability: a soft dark scrim scoped to the text block only, not the whole photo ---------- */
.hero-scrim{
  background:linear-gradient(105deg, rgba(1,20,17,.72) 0%, rgba(1,20,17,.55) 45%, rgba(1,20,17,.15) 80%, rgba(1,20,17,0) 100%);
}
.hero-copy{text-shadow:0 2px 14px rgba(0,0,0,.45);}

/* ---------- ghost watermark text (large faint type behind hero content) ---------- */
.ghost-text{
  position:absolute;
  font-family:"Open Sans",sans-serif;
  font-weight:700;
  color:transparent;
  -webkit-text-stroke:1px rgba(2,75,67,.08);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  z-index:0;
  line-height:1;
}

/* ---------- gold shine text (for dramatic large numerals) ---------- */
.text-gold-shine{
  background:linear-gradient(115deg, var(--gold-dark) 0%, var(--gold-light) 35%, var(--gold) 60%, var(--gold-light) 85%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- numbered approach rows ---------- */
.approach-row{
  position:relative;
  border-top:1px solid rgba(2,75,67,.12);
  transition:padding-left .45s ease, background-color .45s ease;
}
.approach-row:last-child{border-bottom:1px solid rgba(2,75,67,.12);}
.approach-row:hover{padding-left:1rem; background-color:rgba(2,75,67,.025);}
.approach-num{
  font-family:"Open Sans",sans-serif;
  font-weight:700;
  color:rgba(2,75,67,.18);
  transition:color .45s ease;
}
.approach-row:hover .approach-num{color:var(--gold);}
.approach-row .approach-icon{
  transition:transform .45s ease, color .45s ease;
  color:rgba(2,75,67,.55);
}
.approach-row:hover .approach-icon{transform:translateX(4px); color:var(--gold);}

/* ---------- large pull-quote mark ---------- */
.quote-mark{
  font-family:"Open Sans",Georgia,sans-serif;
  line-height:.6;
  color:var(--gold);
  opacity:.35;
}

/* ---------- image reveal frame (solutions panels, signature visual) ---------- */
.img-frame{position:relative; overflow:hidden;}
.img-frame img{
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.img-frame:hover img{transform:scale(1.05);}

/* ---------- stagger delays (applied by JS to sibling .reveal elements) ---------- */
.reveal{transition-delay:var(--reveal-delay, 0ms);}

.parallax-el{transition:transform .3s ease-out; will-change:transform;}

/* ---------- corner brackets (architectural framing accent) ---------- */
.corner-frame{position:relative;}
.corner-frame::before, .corner-frame::after{
  content:"";
  position:absolute;
  width:26px; height:26px;
  border-color:var(--gold-light);
  opacity:.7;
}
.corner-frame::before{top:-10px; left:-10px; border-top:1.5px solid; border-left:1.5px solid;}
.corner-frame::after{bottom:-10px; right:-10px; border-bottom:1.5px solid; border-right:1.5px solid;}