/* Officium — homepage styles (shared by /index.html and /is/index.html) */
:root{
  --ivory:#FAF8F4;
  --ivory-deep:#F1ECE3;
  --navy:#16274A;
  --navy-soft:#2E3F63;
  --ink-soft:#5B6472;
  --orange:#F5901D;
  --orange-soft:#F7A94C;
  --gray:#8892A0;
  --line: rgba(22,39,74,0.13);
  --radius: 22px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ivory);
  color:var(--navy);
  font-family:'Nunito Sans', sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:450;
  letter-spacing:-0.01em;
  color:var(--navy);
}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1140px; margin:0 auto; padding:0 32px;}
section{position:relative;}
.eyebrow{
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--orange);
  margin-bottom:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--orange);
  display:inline-block;
}

.reveal{opacity:0; transform:translateY(18px); transition:opacity 0.8s ease, transform 0.8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(250,248,244,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav{
  max-width:1140px; margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo-mark{display:flex; align-items:center; gap:12px;}
.logo-mark img{height:38px; width:auto;}
.logo-text{font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem; color:var(--navy); line-height:1.1;}
.logo-text span{display:block; font-family:'Nunito Sans', sans-serif; font-weight:700; font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--orange); margin-top:2px;}
.nav-links{display:flex; gap:26px; font-size:0.88rem; font-weight:700; align-items:center;}
.nav-links a{opacity:0.75; transition:opacity 0.2s;}
.nav-links a:hover{opacity:1;}
.nav-cta{
  background:var(--navy);
  color:var(--ivory);
  padding:10px 22px;
  border-radius:100px;
  font-size:0.88rem;
  font-weight:800;
  transition:transform 0.25s ease, background 0.25s ease;
}
.nav-cta:hover{background:var(--orange); transform:translateY(-1px);}

/* ---------- HERO ---------- */
.hero{
  padding:168px 0 120px;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:60px;
  align-items:center;
}
.hero h1{
  font-size:clamp(2.5rem, 4.4vw, 3.9rem);
  line-height:1.08;
  margin-bottom:26px;
}
.hero h1 em{
  font-style:italic;
  color:var(--orange);
}
.hero p.lead{
  font-size:1.14rem;
  color:var(--ink-soft);
  max-width:480px;
  margin-bottom:36px;
}
.pillars{display:flex; gap:10px; margin-bottom:34px; flex-wrap:wrap;}
.pillar{
  font-size:0.78rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  padding:8px 16px; border-radius:100px; background:var(--ivory-deep); color:var(--navy-soft);
  border:1px solid var(--line);
}
.btn-row{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.btn-primary{
  background:var(--orange);
  color:var(--navy);
  padding:15px 30px;
  border-radius:100px;
  font-weight:800;
  font-size:0.95rem;
  display:inline-block;
  transition:transform 0.25s ease, background 0.25s ease, box-shadow .25s ease;
  box-shadow:0 10px 24px -12px rgba(245,144,29,0.45);
}
.btn-primary:hover{background:var(--orange-soft); transform:translateY(-2px);}
.btn-secondary{
  font-weight:800;
  font-size:0.95rem;
  display:inline-flex; align-items:center; gap:8px;
  color:var(--navy);
  border-bottom:1.5px solid var(--navy);
  padding-bottom:2px;
}

.hero-art{
  aspect-ratio:1/1.05;
  border-radius:32px;
  background:linear-gradient(155deg, var(--ivory-deep) 0%, #EDE7DA 60%);
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:14%;
}
.hero-art img{width:100%; height:auto;}

.seam{width:100%; height:64px; margin-top:-1px;}
.seam path{fill:none; stroke:var(--gray); stroke-width:2; stroke-dasharray:9 10; stroke-linecap:round; opacity:0.5;}

/* ---------- SECTION GENERIC ---------- */
.section{padding:100px 0;}
.section-head{max-width:640px; margin-bottom:64px;}
.section-head h2{font-size:clamp(2rem, 3.2vw, 2.6rem); margin-bottom:18px;}
.section-head p{color:var(--ink-soft); font-size:1.05rem;}

/* ---------- ABOUT ---------- */
.about{display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:center;}
.about-visual{aspect-ratio:0.95/1; border-radius:28px; background:var(--ivory-deep); position:relative;}
.about-visual .ring{position:absolute; inset:14%; border-radius:50%; border:1.5px dashed var(--orange); opacity:0.55;}
.about-visual .core{
  position:absolute; inset:30%; border-radius:50%; background:var(--ivory);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 40px -20px rgba(22,39,74,0.25);
}
.about-visual .core span{
  font-family:'Fraunces', serif; font-style:italic; font-size:1.08rem; color:var(--navy-soft); text-align:center; padding:0 20px;
}
.about-copy p{color:var(--ink-soft); margin-bottom:18px; font-size:1.03rem;}
.about-copy p:first-child{
  font-family:'Fraunces', serif; font-size:1.35rem; color:var(--navy); font-weight:450; line-height:1.45;
}
.stat-row{display:flex; gap:44px; margin-top:36px;}
.stat b{display:block; font-family:'Fraunces', serif; font-size:2rem; color:var(--orange);}
.stat span{font-size:0.85rem; color:var(--ink-soft);}

/* ---------- SERVICES ---------- */
.service-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:26px;}
.service-card{
  background:var(--ivory-deep); border:1px solid var(--line); border-radius:var(--radius);
  padding:38px; transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; position:relative; overflow:hidden;
}
.service-card:hover{transform:translateY(-5px); box-shadow:0 24px 48px -28px rgba(22,39,74,0.3); border-color:transparent;}
.service-card .mark{width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:22px;}
.service-card h3{font-size:1.22rem; margin-bottom:12px;}
.service-card p{color:var(--ink-soft); font-size:0.97rem;}
.c1 .mark{background:#FCE4C0;}
.c2 .mark{background:#DCE2EC;}
.c3 .mark{background:#E6E8EC;}
.c4 .mark{background:#F7D9AF;}

/* ---------- EAP SERVICES ---------- */
.eap-intro{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:start; margin-bottom:52px;}
.eap-intro .section-head{margin-bottom:0; max-width:none;}
.eap-note{
  background:var(--ivory-deep); border:1px solid var(--line); border-radius:var(--radius); padding:30px 32px;
}
.eap-note .tag{
  display:inline-block; font-size:0.7rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--navy-soft); background:var(--ivory); border:1px solid var(--line);
  padding:6px 14px; border-radius:100px; margin-bottom:16px;
}
.eap-note p{font-family:'Fraunces', serif; font-size:1.06rem; line-height:1.5; color:var(--navy);}
.eap-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;}
.eap-card{
  background:var(--ivory-deep); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.eap-card:hover{transform:translateY(-5px); box-shadow:0 24px 48px -28px rgba(22,39,74,0.3); border-color:transparent;}
.eap-card .mark{width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.eap-card h3{font-size:1.06rem; margin-bottom:10px;}
.eap-card p{color:var(--ink-soft); font-size:0.94rem;}
.e1 .mark{background:#FCE4C0;}
.e2 .mark{background:#DCE2EC;}
.e3 .mark{background:#E6E8EC;}
.e4 .mark{background:#F7D9AF;}
.eap-cta{
  margin-top:40px; background:var(--navy); border-radius:var(--radius); color:var(--ivory);
  padding:40px 48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.eap-cta h3{color:var(--ivory); font-size:1.45rem; margin-bottom:10px;}
.eap-cta p{color:rgba(250,248,244,0.72); font-size:0.98rem; max-width:520px;}
.eap-cta .btn-primary{flex-shrink:0;}

/* ---------- PROCESS ---------- */
.process{background:var(--ivory-deep); border-radius:36px;}
.process-inner{padding:96px 56px;}
.steps{display:grid; grid-template-columns:repeat(4, 1fr); gap:0; position:relative; margin-top:54px;}
.steps::before{
  content:""; position:absolute; top:19px; left:6%; right:6%; height:1.5px;
  background-image:repeating-linear-gradient(90deg, var(--orange) 0 8px, transparent 8px 16px); opacity:0.5;
}
.step{position:relative; padding-right:20px;}
.step .num{
  width:38px; height:38px; border-radius:50%; background:var(--ivory);
  border:1.5px solid var(--orange); display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-style:italic; color:var(--navy); margin-bottom:22px; position:relative; z-index:2;
}
.step h3{font-size:1.06rem; margin-bottom:10px;}
.step p{font-size:0.92rem; color:var(--ink-soft);}

/* ---------- TESTIMONIALS ---------- */
.quote-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.quote-card{background:var(--ivory-deep); border-radius:var(--radius); padding:34px; border:1px solid var(--line);}
.quote-card p.q{font-family:'Fraunces', serif; font-size:1.06rem; font-style:italic; line-height:1.5; margin-bottom:22px; color:var(--navy);}
.who{display:flex; align-items:center; gap:12px;}
.avatar{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.82rem; color:var(--ivory);}
.who .name{font-weight:800; font-size:0.9rem;}
.who .role{font-size:0.8rem; color:var(--ink-soft);}

/* ---------- CONTACT ---------- */
.contact{
  background:var(--navy); border-radius:36px; color:var(--ivory); padding:88px 64px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
}
.contact h2{color:var(--ivory); font-size:clamp(1.85rem,3vw,2.4rem); margin-bottom:20px;}
.contact p{color:rgba(250,248,244,0.72); max-width:400px; margin-bottom:30px;}
.contact-detail{margin-bottom:18px; font-size:0.95rem;}
.contact-detail b{display:block; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--orange-soft); margin-bottom:4px; font-weight:800;}
.contact-detail a{display:inline-block; color:var(--ivory); transition:color 0.2s ease, transform 0.2s ease;}
.contact-detail a:hover{color:var(--orange-soft); transform:translateX(3px);}

form{display:flex; flex-direction:column; gap:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:0.8rem; color:rgba(250,248,244,0.6);}
.field input, .field textarea{
  background:rgba(250,248,244,0.08); border:1px solid rgba(250,248,244,0.22); border-radius:14px;
  padding:13px 16px; color:var(--ivory); font-family:'Nunito Sans', sans-serif; font-size:0.95rem; outline:none;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.field input:focus, .field textarea:focus{border-color:var(--orange-soft); background:rgba(250,248,244,0.12);}
.field textarea{resize:vertical; min-height:90px;}
.submit-btn{
  background:var(--orange); color:var(--navy); border:none; padding:15px 24px; border-radius:100px;
  font-weight:800; font-size:0.95rem; cursor:pointer; margin-top:6px; transition:transform 0.2s ease, background 0.2s ease;
}
.submit-btn:hover{transform:translateY(-2px); background:var(--orange-soft);}
.submit-btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--orange); outline-offset:3px;
}
.form-msg{font-size:0.85rem; color:var(--orange-soft); min-height:18px;}

/* ---------- FOOTER ---------- */
footer{padding:50px 0 60px;}
.footer-row{
  display:flex; justify-content:space-between; align-items:center; padding-top:30px; border-top:1px solid var(--line);
  font-size:0.85rem; color:var(--ink-soft); flex-wrap:wrap; gap:14px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1040px){
  .nav-links{gap:17px; font-size:0.82rem;}
  .eap-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:880px){
  .nav-links{display:none;}
  .hero{grid-template-columns:1fr; padding:140px 0 70px; text-align:left;}
  .hero-art{order:-1; max-width:340px;}
  .about, .contact{grid-template-columns:1fr;}
  .about-visual{max-width:320px;}
  .service-grid, .quote-grid{grid-template-columns:1fr;}
  .eap-intro{grid-template-columns:1fr; gap:32px; margin-bottom:38px;}
  .eap-grid{grid-template-columns:1fr;}
  .eap-note{padding:26px 24px;}
  .eap-cta{padding:34px 26px; gap:24px;}
  .eap-cta .btn-primary{width:100%; text-align:center;}
  .steps{grid-template-columns:1fr; gap:34px;}
  .steps::before{display:none;}
  .process-inner{padding:64px 28px;}
  .contact{padding:56px 28px;}
  .wrap{padding:0 22px;}
}