@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/Jost.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root{
  --navy:#0b2438;
  --navy-deep:#071722;
  --teal:#123c4d;
  --brass:#b08d57;
  --brass-light:#d8bd8c;
  --cream:#f7f4ee;
  --ink:#1b1f22;
  --ink-soft:#4b5560;
  --line:rgba(11,36,56,0.12);
  --radius:2px;
  --maxw:1180px;
  --ease:cubic-bezier(.4,0,.2,1);
  --eyebrow-color: #ffb644;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  font-weight:500;
  margin:0;
  color:var(--navy);
  letter-spacing:-0.01em;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-family:'Jost',sans-serif;
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color: #a56f1b;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
/*.eyebrow::before{
  content:"";
  width:26px;height:1px;
  background:var(--brass);
  display:inline-block;
}*/

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

/* ---------- HEADER ---------- */
header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:rgba(11,36,56,0.0);
  backdrop-filter:blur(0px);
  transition:background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), box-shadow .4s var(--ease);
}
header.scrolled{
  background:rgba(7,23,34,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(216,189,140,0.15);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 32px;
  max-width:var(--maxw);
  margin:0 auto;
}
.brand{
  font-family:'Fraunces',serif;
  font-size:1.28rem;
  color:#fff;
  letter-spacing:0.01em;
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.brand span{
  font-family:'Jost',sans-serif;
  font-size:0.62rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--brass-light);
  font-weight:500;
  margin-top:3px;
}
nav ul{
  list-style:none;
  display:flex;
  gap:38px;
  margin:0;padding:0;
}
nav a{
  color:#f2ede2;
  font-size:0.92rem;
  letter-spacing:0.02em;
  position:relative;
  padding-bottom:4px;
}
nav a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:var(--brass-light);
  transition:width .3s var(--ease);
}
nav a:hover::after,nav a:focus-visible::after{width:100%;}

.nav-toggle{
  display:none;
  background:none;border:none;
  width:32px;height:24px;
  position:relative;
  cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";
  position:absolute;left:0;right:0;
  height:1px;background:#f2ede2;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span{top:50%;transform:translateY(-50%);}
.nav-toggle span::before{top:-8px;}
.nav-toggle span::after{top:8px;}
.nav-toggle.open span{background:transparent;}
.nav-toggle.open span::before{transform:translateY(8px) rotate(45deg);}
.nav-toggle.open span::after{transform:translateY(-8px) rotate(-45deg);}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(216,189,140,0.10), transparent 55%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 62%, var(--teal) 100%);
  overflow:hidden;
  padding-top:110px;
}
.hero-lines{
  position:absolute;
  inset:0;
  opacity:0.5;
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:2;
  max-width:var(--maxw);
  margin:0 auto;
  padding:60px 32px 100px;
  width:100%;
}
.hero h1{
  color:#fdfbf6;
  font-size:clamp(2.6rem, 5.4vw, 4.6rem);
  line-height:1.06;
  max-width:820px;
  margin-top:22px;
  font-weight:500;
}
.hero h1 em{
  font-style:italic;
  color:var(--brass-light);
  font-weight:400;
}
.hero p.lede{
  color:#cdd8dd;
  max-width:560px;
  font-size:1.08rem;
  margin-top:26px;
}
.hero-cta{
  margin-top:44px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  font-size:0.88rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border:1px solid var(--brass);
  border-radius:var(--radius);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-solid{
  background:var(--brass);
  color:var(--navy-deep);
  font-weight:500;
}
.btn-solid:hover{background:var(--brass-light);border-color:var(--brass-light);}
.btn-ghost{
  color:#f2ede2;
  border-color:rgba(242,237,226,0.35);
}
.btn-ghost:hover{border-color:var(--brass-light);color:var(--brass-light);}

.hero-meta{
  position:absolute;
  right:32px;
  bottom:48px;
  z-index:2;
  display:flex;
  flex-wrap: wrap;
  gap:44px;
  color:#9fb0b8;
  font-size:0.78rem;
  letter-spacing:0.04em;
  padding: 10px;
  justify-content: flex-end;
}
.hero-meta a {
  text-decoration: underline;
}
.hero-meta strong{
  display:block;
  color:#fdfbf6;
  font-family:'Fraunces',serif;
  font-size:1.5rem;
  font-weight:500;
}

.hero-meta > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 190px;
  height: 90px;
  gap: 5px;
  text-align: center;
}

/* ---------- SECTION SHELL ---------- */
section{padding:120px 0;}
.section-head{
  max-width:640px;
  margin-bottom:64px;
}
.section-head h2{
  font-size:clamp(1.9rem,3.2vw,2.7rem);
  margin-top:18px;
}
.section-head p{
  color:var(--ink-soft);
  margin-top:18px;
  font-size:1.02rem;
}

/* ---------- ABOUT ---------- */
.about{background:var(--cream);}
.about-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:80px;
  align-items:start;
  place-items: center;
}
.about-portrait{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  /*background:linear-gradient(160deg,var(--teal),var(--navy));*/
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
}
.about-portrait::after{
  content:"";
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 34px);
}
.about-portrait .frame-label{
  /*position:absolute;
  left:22px;bottom:22px;*/
  padding: 10px;
  /*color:var(--navy);*/
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  width: 100%;
}
.about-text p{margin:0 0 18px;color:var(--ink-soft);}
.about-text p:first-of-type{color:var(--ink);font-size:1.12rem;}
.stat-row{
  display:flex;
  gap:48px;
  margin-top:38px;
  flex-wrap:wrap;
  justify-content: flex-end;
}
.stat{
  border-top:1px solid var(--line);
  padding-top:14px;
  min-width:120px;
}
.stat strong{
  display:block;
  font-family:'Fraunces',serif;
  font-size:2rem;
  color:var(--navy);
  text-align: center;
}
.stat span{
  font-size:0.8rem;
  color:var(--ink-soft);
  letter-spacing:0.03em;
}

/* ---------- SERVICES / ACCORDION ---------- */
.services{background:var(--navy-deep);position:relative;}
.approach .eyebrow, .services .section-head h2, .services .eyebrow, .why .eyebrow, .hero-inner .eyebrow {color:var(--eyebrow-color);}
.services .section-head h2{color:#fdfbf6;}
.services .section-head p{color:#aab7bd;}

.accordion{
  border-top:1px solid rgba(242,237,226,0.14);
}
.acc-item{
  border-bottom:1px solid rgba(242,237,226,0.14);
}
.acc-trigger{
  width:100%;
  background:none;
  border:none;
  color:#f2ede2;
  display:flex;
  align-items:center;
  gap:26px;
  padding:30px 4px;
  cursor:pointer;
  text-align:left;
  font-family:'Jost',sans-serif;
}
.acc-icon{
  flex:none;
  width:44px;height:44px;
  border:1px solid rgba(216,189,140,0.5);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brass-light);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.acc-item.open .acc-icon{background:var(--brass);border-color:var(--brass);color:var(--navy-deep);}
.acc-icon svg{width:20px;height:20px;}

.acc-title{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.acc-title .index{
  font-size:0.7rem;
  letter-spacing:0.14em;
  color:var(--brass-light);
  text-transform:uppercase;
}
.acc-title h3{
  color:#fdfbf6;
  font-size:1.4rem;
  font-weight:500;
}
.acc-plus{
  flex:none;
  width:22px;height:22px;
  position:relative;
}
.acc-plus::before,.acc-plus::after{
  content:"";
  position:absolute;
  background:var(--brass-light);
  transition:transform .35s var(--ease);
}
.acc-plus::before{left:0;top:50%;width:100%;height:1px;transform:translateY(-50%);}
.acc-plus::after{top:0;left:50%;width:1px;height:100%;transform:translateX(-50%);}
.acc-item.open .acc-plus::after{transform:translateX(-50%) rotate(90deg);opacity:0;}

.acc-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s var(--ease);
}
.acc-panel-inner{
  padding:0 4px 40px 90px;
}
.acc-panel-inner ul{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 40px;
  list-style:none;
  margin:0;padding:0;
}
.acc-panel-inner li{
  color:#c7d1d5;
  font-size:0.95rem;
  padding-left:18px;
  position:relative;
  line-height:1.5;
}
.acc-panel-inner li::before{
  content:"";
  position:absolute;
  left:0;top:0.65em;
  width:6px;height:1px;
  background:var(--brass-light);
}

/* ---------- CLIENTS ---------- */
.clients{background:var(--cream);}
.clients-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 72px;
}
.client-col + .client-col{
  border-left:1px solid var(--line);
  padding-left:72px;
}
.client-col-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--navy);
  margin-bottom:2px;
}
.client-col-head h3{
  font-size:1.28rem;
  font-weight:500;
}
.client-col-head span{
  font-family:'Jost',sans-serif;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--brass);
  flex:none;
}
.client-list{
  list-style:none;
  margin:0;
  padding:0;
}
.client-list li{
  display:flex;
  align-items:baseline;
  gap:18px;
  padding:19px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-size:1.02rem;
  transition:padding-left .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.client-list li:last-child{border-bottom:none;}
.client-list li:hover{
  padding-left:12px;
  color:var(--navy);
  border-color:var(--brass);
}
.client-list li .num{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:0.92rem;
  color:var(--brass);
  flex:none;
  width:22px;
}

/* ---------- APPROACH STRIP ---------- */
.approach{
  background:var(--teal);
  color:#eef2f2;
}
.approach .container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}
.approach h2{color:#fdfbf6;}
.approach-list{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-direction:column;
}
.approach-list li{
  padding:26px 0;
  border-top:1px solid rgba(242,237,226,0.18);
  display:flex;
  gap:22px;
}
.approach-list li:last-child{border-bottom:1px solid rgba(242,237,226,0.18);}
.approach-list .mark{
  font-family:'Fraunces',serif;
  color:var(--brass-light);
  font-size:1rem;
  flex:none;
  width:28px;
}
.approach-list h4{color:#fdfbf6;font-size:1.05rem;margin-bottom:6px;}
.approach-list p{color:#c3d0d1;margin:0;font-size:0.94rem;}

/* ---------- CONTACT ---------- */
.contact{
  background:var(--navy-deep);
  color:#f2ede2;
  text-align:center;
}
.contact .eyebrow{justify-content:center;color:var(--eyebrow-color);}
.contact .eyebrow::before{display:none;}
.contact h2{
  color:#fdfbf6;
  font-size:clamp(2rem,4vw,3.2rem);
  max-width:760px;
  margin:22px auto 0;
}
.contact p{
  color:#aab7bd;
  max-width:520px;
  margin:22px auto 0;
}
.contact-mail{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:44px;
  font-family:'Fraunces',serif;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  color:var(--brass-light);
  border-bottom:1px solid rgba(216,189,140,0.4);
  padding-bottom:10px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.contact-mail:hover{color:#fff;border-color:#fff;}
.contact-info{
  margin-top:60px;
  display:flex;
  justify-content:center;
  gap:60px;
  flex-wrap:wrap;
  font-size:0.85rem;
  color:#8fa0a8;
  letter-spacing:0.02em;
}
.contact-info strong{display:block;color:#e3ddce;font-family:'Fraunces',serif;font-size:1rem;margin-bottom:4px;font-weight:500;}

.contact-info a {
  text-decoration: underline;
}

footer{
  background:var(--navy-deep);
  border-top:1px solid rgba(242,237,226,0.1);
  padding:26px 0;
  color:#7c8a90;
  font-size:0.78rem;
}
footer .container{
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px;
}

footer .container > :nth-child(2) {
  margin-left: auto;
}

footer a {
  text-decoration: underline;
}

section.privacy,
section.cookies {
  padding: 120px !important;
}

section.cookies {
  min-height: 95dvh;
}

.why{background:var(--teal);color:#eef2f2;}
.why-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}
.why h2{
  color:#fdfbf6;
  margin-top:18px;
  font-size:clamp(1.8rem,3vw,2.4rem);
}
.why-list{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-direction:column;
}
.why-list li{
  padding:26px 0;
  border-top:1px solid rgba(242,237,226,0.18);
  display:flex;
  gap:22px;
}
.why-list li:last-child{border-bottom:1px solid rgba(242,237,226,0.18);}
.why-list .mark{
  font-family:'Fraunces',serif;
  color:var(--brass-light);
  font-size:1rem;
  flex:none;
  width:28px;
}
.why-list h4{color:#fdfbf6;font-size:1.05rem;margin-bottom:6px;}
.why-list p{color:#c3d0d1;margin:0;font-size:0.94rem;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:920px){
  .about-grid{grid-template-columns:1fr;gap:48px;}
  .about-portrait{max-width:340px;}
  .approach .container{grid-template-columns:1fr;}
  .acc-panel-inner{padding-left:70px;}

  section.privacy, section.cookies {
    padding: 20px !important;
    margin-top: 50px;
  }

  .hero-meta {
    justify-content: center;
  }
  
  .why-grid{grid-template-columns:1fr;gap:40px;}
}

@media (max-width:760px){
  section,.hero {
    flex-direction: column;
  }
  
  nav{
    position:fixed;
    top:0;right:0;
    height:100vh;
    width:min(320px,80vw);
    background:var(--navy-deep);
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    padding:110px 36px 40px;
    box-shadow:-8px 0 30px rgba(0,0,0,0.3);
  }
  nav.open{transform:translateX(0);}
  nav ul{flex-direction:column;gap:26px;}
  .nav-toggle{display:block;}
  .hero-meta{position:static;margin-top:60px;padding:0 32px;}
  .hero-inner{padding-bottom:40px;}
  section{padding:80px 0;}
  .acc-panel-inner{padding-left:0;padding-top:6px;}
  .acc-panel-inner ul{grid-template-columns:1fr;}
  .acc-trigger{gap:16px;}
  .acc-title h3{font-size:1.15rem;}
  .contact-info{gap:30px;}
  .clients-columns{grid-template-columns:1fr;gap:48px 0;}
  .client-col + .client-col{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:48px;}
}

@media (max-width:480px){
  .container{padding:0 22px;}
  .nav-inner{padding:18px 22px;}
  .hero-inner{padding-left:22px;padding-right:22px;}
}