/* ==========================================================================
   ALUA CREATIVE — SHARED STYLESHEET
   This one file controls the look of every page. Edit colors/fonts here
   and it updates the whole site. See EDITING-GUIDE.md for plain-English help.
   ========================================================================== */

:root{
  --navy:#0e3354;
  --navy-2:#0e3354;
  --rust:#833e41;         /* dark terracotta — use for text/accents on LIGHT backgrounds */
  --rust-2:#833e41;
  /* PLACEHOLDER — swap this for your site's exact light pink hex once you send it to me.
     Used for text/accents on DARK (navy) backgrounds, e.g. the hero headline highlight. */
  --pink:#cca7a2;
  --tan:#D9CBB8;
  --stone:#8C8579;
  --cream:#F6F2EC;
  --white:#FFFFFF;
  --ink:#22282E;
  --line:#E1DACD;

  --font: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --max: 1240px;
  --pad: clamp(24px, 6vw, 64px);   /* consistent left/right margin everywhere */
  --hero-h: calc(100vh + 72px);    /* homepage hero height — freeze/reveal effect */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--ink);
  line-height:1.65;
  font-size:16px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:var(--font); cursor:pointer; border:none; background:none; }
:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }

.container{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.section{ padding:104px 0; }
@media (max-width:760px){ .section{ padding:64px 0; } }

.eyebrow{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rust); font-weight:600; margin-bottom:20px;
}
.on-navy .eyebrow, .page-hero .eyebrow, .hero .eyebrow{ color:var(--pink); }

h1,h2,h3,h4{ font-weight:300; letter-spacing:-.01em; color:var(--navy); }
h1{ font-size:clamp(2.4rem, 5.5vw, 4rem); line-height:1.08; }
h2{ font-size:clamp(1.8rem, 3.5vw, 2.6rem); line-height:1.2; }
h3{ font-size:1.3rem; font-weight:400; }
h4{ font-weight:600; }
p{ color:#4B5259; font-weight:400; }
.lede{ font-size:clamp(1rem,1.6vw,1.15rem); color:#4B5259; max-width:48ch; margin-top:22px; }
h1 + .lede, h2 + .lede{ margin-top:26px; }

.img-placeholder{
  background:repeating-linear-gradient(135deg, #E7E0D2, #E7E0D2 10px, #EEE8DC 10px, #EEE8DC 20px);
  border:1px dashed var(--stone);
  display:flex; align-items:center; justify-content:center;
  color:var(--stone); font-size:12px; text-align:center; padding:16px;
  min-height:180px;
}
.img-placeholder span{ max-width:22ch; }

.bleed{
  width:100vw; position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
}

/* clip + zoom: .thumb is the exact bounding box of the image. The image
   itself scales on hover; overflow:hidden on .thumb clips it right at the
   image's edges so text/captions below are never affected or overlapped. */
.thumb{ overflow:hidden; }
.thumb img, .thumb .img-placeholder, .thumb .pattern-swatch{
  width:100%; height:100%; min-height:0;
  object-fit:cover;
  transition:transform .5s ease;
}
.card:hover .thumb img, .card:hover .thumb .img-placeholder, .card:hover .thumb .pattern-swatch{ transform:scale(1.08); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:600; padding:14px 26px;
  border-radius:2px; border:1px solid transparent; background:transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{ border-color:var(--rust); color:var(--rust); }
.btn-primary:hover{ background:var(--rust); color:var(--white); }
.btn-dark{ border-color:var(--navy); color:var(--navy); }
.btn-dark:hover{ background:var(--navy); color:var(--white); }
.btn-outline{ border-color:var(--navy); color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:var(--white); }
.btn-on-dark{ border-color:var(--white); color:var(--white); }
.btn-on-dark:hover{ background:var(--white); color:var(--ink); }

.btn-link{ font-size:14px; font-weight:600; color:var(--rust); display:inline-flex; gap:8px; align-items:center; }
.btn-link:hover{ color:var(--navy); }
.btn-link.on-dark{ color:var(--pink); }
.btn-link.on-dark:hover{ color:var(--white); }
.btn .arrow, .btn-link .arrow{ transition:transform .15s ease; }
.btn:hover .arrow, .btn-link:hover .arrow{ transform:translateX(3px); }

header.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  position:relative;
  display:flex; align-items:center; justify-content:flex-end;
  height:100px;
}
.logo-mark{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:80px; height:80px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
}
.logo-mark img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity .3s ease, transform .3s ease;
}
.logo-mark .mark-hover{ opacity:0; transform:scale(.7); }
.logo-mark:hover .mark-default{ opacity:0; transform:scale(.7); }
.logo-mark:hover .mark-hover{ opacity:1; transform:scale(1); }

.nav-links{ display:flex; gap:44px; }
.nav-links a{ font-size:13px; font-weight:500; letter-spacing:.03em; color:var(--navy); }
.nav-links a:hover{ color:var(--rust); }
.nav-links a.active{ color:var(--rust); }
.nav-toggle{ display:none; }

@media (max-width:760px){
  .nav-links{
    position:fixed; top:80px; left:0; right:0; bottom:0;
    background:var(--cream);
    flex-direction:column; gap:0;
    padding:10px var(--pad) 40px;
    transform:translateY(-10px);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav-links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-links a{ display:block; padding:16px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; width:26px;
  }
  .nav-toggle span{ height:2px; background:var(--navy); width:100%; }
}

.site-header.on-dark{ background:transparent; border-bottom:1px solid rgba(255,255,255,.15); position:absolute; top:0; left:0; right:0; }
.site-header.on-dark .logo-mark{ border-color:var(--white); color:var(--white); }
.site-header.on-dark .nav-links a{ color:var(--white); }
.site-header.on-dark .nav-toggle span{ background:var(--white); }

.site-header.solid-navy{ background:var(--navy); border-bottom:1px solid rgba(255,255,255,.15); }
.site-header.solid-navy .logo-mark{ border-color:var(--white); color:var(--white); }
.site-header.solid-navy .nav-links a{ color:rgba(255,255,255,.85); }
.site-header.solid-navy .nav-links a:hover, .site-header.solid-navy .nav-links a.active{ color:var(--pink); }
.site-header.solid-navy .nav-toggle span{ background:var(--white); }
@media (max-width:760px){ .site-header.solid-navy .nav-links{ background:var(--navy); } }

/* HERO — "freeze and reveal": the hero is pinned (position:fixed) behind
   everything else. .page-body (an opaque wrapper around all the content
   below the hero) has a solid background, so as the page scrolls, it
   visually covers the frozen hero, like a curtain. .hero-spacer reserves
   the scroll space the fixed hero would otherwise not take up. */
.hero{
  position:fixed; top:0; left:0; right:0;
  height:var(--hero-h);
  display:flex; align-items:center;
  background:var(--navy);
  color:var(--white);
  overflow:hidden;
  z-index:-1;
}
.hero-spacer{ height:var(--hero-h); }
/* everything from here to the footer sits in an opaque wrapper so the
   pinned hero (above) never shows through gaps in later sections */
.page-body{ position:relative; z-index:1; background:var(--cream); }

/* hero-bg can be the placeholder OR a real <img class="hero-bg" src="...">.
   Either way it fills the box exactly the same way. */
.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  background:repeating-linear-gradient(135deg, #1B3B5C, #1B3B5C 12px, #163150 12px, #163150 24px);
  z-index:0;
}
/* darkening scrim — always present, sits above whatever fills hero-bg and
   below the text, so text stays legible whether it's a placeholder or photo */
.hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,50,84,.25), rgba(14,50,84,.7));
  z-index:1;
  pointer-events:none;
}
.hero-content{ position:relative; z-index:2; max-width:640px; padding:72px 0; transition:opacity .1s linear; }
.hero h1{ color:var(--white); }
.hero h1 em{ font-style:normal; color:var(--pink); }
.hero .lede{ color:rgba(255,255,255,.82); margin-top:22px; max-width:44ch; }
.hero-cta{ display:flex; gap:28px; align-items:center; margin-top:40px; flex-wrap:wrap; }
.hero .btn-link{ color:var(--pink); }
.hero .btn-link:hover{ color:var(--white); }

.page-hero{
  background:var(--navy); color:var(--white);
  min-height:500px; display:flex; align-items:center;
}
.page-hero .container{ padding:0 var(--pad); }
.page-hero h1{ color:var(--white); }
.page-hero .lede{ color:rgba(255,255,255,.82); }

.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:1fr 1fr; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:900px){ .grid-3,.grid-5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-2,.grid-3,.grid-5{ grid-template-columns:1fr; } }

.card{ display:block; }
.card .thumb{ aspect-ratio:4/5; margin-bottom:16px; }
.card h3{ font-size:1.05rem; margin-bottom:4px; font-weight:500; }
.card .tags{ font-size:12px; color:var(--stone); }

.feature{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  padding:64px 0; border-top:1px solid var(--line);
}
.feature .img-placeholder{ aspect-ratio:4/3; }
@media (max-width:760px){ .feature{ grid-template-columns:1fr; } }
.feature.reverse .feature-text{ order:2; }
@media (max-width:760px){ .feature.reverse .feature-text{ order:0; } }

.carousel-wrap{ position:relative; }
.carousel{
  overflow:hidden;
  cursor:grab;
}
.carousel:active{ cursor:grabbing; }
.carousel-track{
  display:flex; gap:20px;
  will-change:transform;
}
.carousel-track .card{ flex:0 0 clamp(280px, 40vw, 460px); }
.carousel-track .card .thumb{ aspect-ratio:4/3; }
.carousel-track .card a, .carousel-track .card img{ -webkit-user-drag:none; user-select:none; }
.carousel-btn{
  position:absolute; top:40%; width:40px; height:40px; border-radius:50%;
  background:var(--white); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  z-index:2;
}
.carousel-btn.prev{ left:6px; } .carousel-btn.next{ right:6px; }
@media (max-width:640px){ .carousel-btn{ display:none; } }

.filters{ display:flex; flex-wrap:wrap; gap:10px; margin:36px 0; }
.filter-btn{
  border:1px solid var(--line); padding:9px 20px; border-radius:999px;
  font-size:13px; font-weight:500; color:var(--navy); background:var(--cream);
}
.filter-btn.active{ background:var(--navy); color:var(--white); border-color:var(--navy); }

.list-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding-top:32px; margin-top:16px; }
@media (max-width:900px){ .list-row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:500px){ .list-row{ grid-template-columns:1fr; } }
.list-row h4{ font-size:14px; color:var(--navy); margin-bottom:8px; }
.list-row p{ font-size:13px; }

.process-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:12px; }
@media (max-width:900px){ .process-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:500px){ .process-steps{ grid-template-columns:1fr; } }
.process-steps .num{ font-family:var(--font); color:var(--rust); font-weight:700; font-size:14px; margin-bottom:8px; display:block; }

.cta-banner{ color:var(--white); }
.cta-banner.rust{ background:var(--rust); }
.cta-banner.navy{ background:var(--navy); }
.cta-banner-inner{
  max-width:var(--max); margin:0 auto; padding:36px var(--pad);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.cta-banner h3{ color:var(--white); font-size:1.2rem; font-weight:400; }
.cta-banner a{ font-weight:700; display:inline-flex; gap:10px; align-items:center; color:var(--white); }

.cta-full{ position:relative; min-height:520px; display:flex; align-items:center; color:var(--white); overflow:hidden; }
.cta-full-bg{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(139,64,56,.15), rgba(139,64,56,.55)), repeating-linear-gradient(135deg, #9C4C42, #9C4C42 12px, #8B4038 12px, #8B4038 24px); }
.cta-full .container{ position:relative; padding-top:80px; padding-bottom:80px; }
.cta-full h2{ color:var(--white); }

.pattern-swatch{ aspect-ratio:1/1; border:1px solid var(--line); position:relative; }
.p1{ background: repeating-linear-gradient(45deg, #8B4038 0 8px, #D9CBB8 8px 16px); }
.p2{ background: radial-gradient(circle at 30% 30%, #0E3254 0 10px, transparent 11px) , radial-gradient(circle at 70% 70%, #8B4038 0 10px, transparent 11px), #F6F2EC; background-size:40px 40px; }
.p3{ background: repeating-linear-gradient(0deg, #0E3254 0 4px, transparent 4px 20px), repeating-linear-gradient(90deg, #8B4038 0 4px, transparent 4px 20px), #EEE8DC; }
.p4{ background: linear-gradient(135deg, #D9CBB8 25%, transparent 25%) -10px 0, linear-gradient(225deg, #D9CBB8 25%, transparent 25%) -10px 0, linear-gradient(315deg, #D9CBB8 25%, transparent 25%), linear-gradient(45deg, #D9CBB8 25%, transparent 25%); background-size:20px 20px; background-color:#F6F2EC; }


.about-block{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
@media (max-width:760px){ .about-block{ grid-template-columns:1fr; } }
.about-block .img-placeholder{ aspect-ratio:3/4; }

.field{ margin-bottom:20px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); background:var(--white);
  font-family:var(--font); font-size:14px; color:var(--ink); border-radius:2px;
}
.field textarea{ resize:vertical; min-height:130px; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }

footer.site-footer{ background:var(--navy); color:rgba(255,255,255,.8); padding:48px 0 32px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.15); }
.footer-top .logo-mark{ border-color:var(--white); color:var(--white); }
.footer-links{ display:flex; gap:20px; font-size:13px; }
.footer-links a:hover{ color:var(--white); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:20px; font-size:12px; }

.prevnext{ display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:24px; margin-top:56px; font-size:13px; font-weight:600; color:var(--navy); }

.meta-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:36px 0; }
@media (max-width:640px){ .meta-row{ grid-template-columns:1fr; gap:14px; } }
.meta-row h4{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--stone); margin-bottom:6px; font-weight:600; }
.meta-row p{ color:var(--navy); font-size:14px; margin:0; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width:640px){ .two-col{ grid-template-columns:1fr; } }
.three-col{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:760px){ .three-col{ grid-template-columns:1fr; } }

.text-col p{ margin-bottom:16px; }
.text-col-wrap{ padding:8px 0 16px; }

.imgrow{ display:grid; gap:20px; margin-top:20px; }
.imgrow-1{ grid-template-columns:1fr; }
.imgrow-2{ grid-template-columns:1fr 1fr; }
.imgrow-3{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:640px){ .imgrow-2, .imgrow-3{ grid-template-columns:1fr; } }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .thumb img, .thumb .img-placeholder, .thumb .pattern-swatch{ transition:none; }
}