:root{
  --ink:#132331;
  --ink-soft:#52616b;
  --paper:#faf7f0;
  --paper-2:#fffdf8;
  --gold:#c99a4d;
  --gold-soft:#ead7ad;
  --line:#e1dbcf;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,p{margin-top:0}

.container{
  width:min(1180px,calc(100% - 44px));
  margin-inline:auto;
}

.eyebrow{
  display:flex;
  gap:.55rem;
  align-items:center;
  font-size:.52rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  font-weight:700;
  color:#53616b;
}

.eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:var(--gold);
}

/* HEADER */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(250,247,240,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(19,35,49,.07);
}

.nav-shell{
  min-height:64px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1.4rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  min-width:max-content;
}

.brand-logo{
  display:block;
  width:42px;
  height:42px;
  object-fit:contain;
  flex:0 0 auto;
}

.brand-copy{display:block}

.brand-name{
  display:block;
  font-family:var(--serif);
  font-size:1.65rem;
  line-height:.9;
  letter-spacing:.01em;
}

.brand-sub{
  display:block;
  margin-top:.25rem;
  font-size:.43rem;
  letter-spacing:.29em;
  text-transform:uppercase;
  font-weight:700;
  color:#65717a;
}

.nav-links{
  display:flex;
  justify-content:center;
  gap:2rem;
  font-size: .76rem;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:.85rem;
  font-size:.62rem;
}

.languages{
  display:flex;
  align-items:center;
  gap:.4rem;
  letter-spacing:.08em;
  white-space:nowrap;
}

.languages a{opacity:.65}
.languages a:hover{opacity:1}

.menu-toggle{
  display:none;
  background:none;
  border:0;
  font-size:1.5rem;
  color:var(--ink);
  cursor:pointer;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  border-radius:999px;
  padding:.68rem 1.05rem;
  border:1px solid transparent;
  background:linear-gradient(135deg,#d2a55e,#e8c889);
  color:#1d2a31;
  font-weight:650;
  font-size:.72rem;
  box-shadow:0 8px 24px rgba(201,154,77,.14);
}

.btn-arrow::after{
  content:"→";
}

/* HERO */

.hero{
  position:relative;
  overflow:hidden;
  height:300px;
  background:
    linear-gradient(
      90deg,
      rgba(250,248,242,.98) 0%,
      rgba(250,248,242,.94) 20%,
      rgba(250,248,242,.72) 37%,
      rgba(250,248,242,.2) 56%,
      rgba(250,248,242,0) 72%
    ),
    url('/assets/img/hero.webp') center right/cover no-repeat;
}

.hero-grid{
  height:300px;
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 150px;
  gap:1.6rem;
  padding:18px 0 16px;
}

.hero-side{
  border-right:1px solid rgba(19,35,49,.12);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:3px 18px 2px 0;
}

.vertical-jp{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  letter-spacing:.17em;
  font-family:var(--serif);
  color:#59666e;
  font-size:.73rem;
  align-self:center;
  opacity:.8;
}

.side-stack{
  font-size:.46rem;
  line-height:1.7;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#65717a;
}

.hero-copy{
  padding-top:8px;
  max-width:560px;
}

.hero-kicker{
  font-size:.57rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:.55rem;
}

h1{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.035em;
  font-size:clamp(2.65rem,4.45vw,4.55rem);
  line-height:.9;
  max-width:600px;
  margin-bottom:.75rem;
}

.gold-text{
  color:var(--gold);
}

.hero-copy p{
  max-width:470px;
  font-family:var(--serif);
  font-size:.95rem;
  line-height:1.25;
  margin-bottom:.9rem;
}

.hero-note{
  align-self:start;
  margin-top:12px;
  padding:14px 4px 0 14px;
  font-family:var(--serif);
  letter-spacing:.21em;
  text-transform:uppercase;
  font-size:.61rem;
  line-height:1.65;
  border-left:1px solid rgba(19,35,49,.12);
}

.hero-note::after{
  content:"";
  display:block;
  width:32px;
  height:1px;
  margin-top:1rem;
  background:var(--gold);
}

/* STORY */

.story{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--paper-2);
}

.story-grid{
  display:grid;
  grid-template-columns:1fr 1.28fr .96fr;
  gap:2rem;
  align-items:start;
  padding:30px 0;
}

.story h2,
.services h2,
.approach h2,
.insights h2,
.contact-band h2{
  font-family:var(--serif);
  font-size:clamp(1.75rem,2.6vw,2.75rem);
  line-height:.98;
  font-weight:500;
  letter-spacing:-.025em;
  margin:.55rem 0 0;
}

.story-copy{
  font-family:var(--serif);
  font-size:.84rem;
  color:#43525d;
  padding-top:1.4rem;
  line-height:1.4;
}

.story-copy p{
  margin-bottom:.55rem;
}

.concepts{
  display:grid;
  gap:.7rem;
  padding-top:1.25rem;
}

.concept{
  border-left:1px solid var(--line);
  padding-left:.9rem;
}

.concept b{
  display:block;
  font-size:.47rem;
  letter-spacing:.21em;
  text-transform:uppercase;
  color:#7b6d56;
  margin-bottom:.15rem;
}

.concept span{
  display:block;
  font-family:var(--serif);
  color:#5b646b;
  font-size:.67rem;
}

/* SERVICES */

.services{
  background:#faf7f0;
  padding:32px 0;
  border-bottom:1px solid var(--line);
}

.services-grid{
  display:grid;
  grid-template-columns:.75fr 2.25fr;
  gap:2.3rem;
  align-items:start;
}

.section-intro p{
  font-family:var(--serif);
  color:#5a666e;
  font-size:.75rem;
  line-height:1.4;
  max-width:285px;
  margin-top:.7rem;
}

.services-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem;
}

.service-card{
  min-height:205px;
  padding:17px;
  background:#fffdf9;
  border:1px solid #e9e2d7;
  box-shadow:0 5px 20px rgba(30,35,40,.035);
  position:relative;
  overflow:hidden;
}

.service-image{
  position:absolute;
  top:13px;
  right:13px;
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:50%;
}

.service-index{
  font-size:.53rem;
  letter-spacing:.18em;
  margin-bottom:.65rem;
}

.service-card h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.24rem;
  line-height:.95;
  max-width:150px;
  margin-bottom:.7rem;
}

.service-card p{
  color:#59636a;
  max-width:185px;
  font-family:var(--serif);
  font-size:.68rem;
  line-height:1.3;
}

/* APPROACH */

.approach{
  background:var(--paper-2);
  padding:28px 0;
  border-bottom:1px solid var(--line);
}

.approach-grid{
  display:grid;
  grid-template-columns:.75fr 2.25fr;
  gap:2.3rem;
  align-items:start;
}

.approach-copy>p{
  margin-top:.8rem;
  font-family:var(--serif);
  color:#55616a;
  font-size:.74rem;
  max-width:290px;
}

.approach-copy .principle{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:.52rem;
  font-weight:700;
  color:#8a6a37;
  margin-top:1.15rem;
}

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.15rem;
  align-items:start;
  position:relative;
  padding-top:0;
}

.steps::before{
  content:"";
  position:absolute;
  top:44px;
  left:10%;
  right:10%;
  height:1px;
  background:linear-gradient(
    90deg,
    var(--gold-soft),
    var(--gold),
    var(--gold-soft)
  );
}

.step{
  position:relative;
  z-index:1;
}

.step-disc{
  width:66px;
  height:66px;
  border-radius:50%;
  margin-bottom:.8rem;
  border:1px solid var(--gold-soft);
  background:#f4eee3;
  box-shadow:0 0 0 8px var(--paper-2);
  overflow:hidden;
}

.step-disc img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

.step-index{
  font-size:.51rem;
  letter-spacing:.18em;
  margin-bottom:.25rem;
}

.step h3{
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:500;
  margin-bottom:.28rem;
}

.step p{
  color:#5e686f;
  font-family:var(--serif);
  font-size:.66rem;
  line-height:1.28;
  max-width:180px;
}

/* INSIGHTS */

.insights{
  background:#faf7f0;
  padding:26px 0 30px;
}

.insights-grid{
  display:grid;
  grid-template-columns:.75fr 2.25fr;
  gap:2.3rem;
}

.articles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
}

.article{
  border-top:1px solid #d7cfbf;
  padding-top:.75rem;
  display:grid;
  grid-template-columns:130px 1fr;
  column-gap:.9rem;
  align-items:start;
}

.article-art{
  width:130px;
  height:78px;
  object-fit:cover;
  grid-row:1/5;
}

.article-kicker{
  font-size:.46rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#7b6d56;
  margin-bottom:.2rem;
}

.article h3{
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.05;
  font-weight:500;
  margin-bottom:.28rem;
}

.article p{
  color:#677178;
  font-family:var(--serif);
  font-size:.64rem;
  line-height:1.3;
  margin-bottom:0;
}

/* CONTACT */

.contact-band{
  background:#102534;
  color:#f7f3eb;
  padding:34px 0;
}

.contact-band .eyebrow{
  color:#d2dadd;
}

.contact-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:3rem;
  align-items:center;
}

.contact-copy{
  font-family:var(--serif);
  color:#d6dde0;
  font-size:.85rem;
  max-width:520px;
}

.contact-copy p{
  margin-bottom:1rem;
}

/* FOOTER */

.site-footer{
  background:#faf7f0;
  color:var(--ink);
  padding:15px 0 10px;
  border-top:1px solid var(--line);
}

.footer-top{
  display:grid;
  grid-template-columns:1.1fr 1.4fr auto;
  gap:1.3rem;
  align-items:center;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}

.footer-nav{
  display:flex;
  gap:1.45rem;
  font-size:.58rem;
}

.footer-note{
  font-family:var(--serif);
  color:#65717a;
  font-size:.64rem;
  text-align:right;
  line-height:1.2;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  padding-top:8px;
  color:#8c9498;
  font-size:.52rem;
}

/* RESPONSIVE */

@media (max-width:1050px){

  .nav-links{
    display:none;
    position:absolute;
    top:64px;
    left:16px;
    right:16px;
    flex-direction:column;
    gap:0;
    padding:12px;
    background:#faf7f0;
    border:1px solid var(--line);
    box-shadow:0 16px 36px rgba(20,28,34,.08);
  }

  .nav-links.is-open{display:flex}

  .nav-links a{
    padding:.75rem .65rem;
  }

  .menu-toggle{display:block}

  .nav-actions .languages,
  .nav-actions .btn{
    display:none;
  }

  .hero{
    height:auto;
    min-height:340px;
  }

  .hero-grid{
    height:auto;
    min-height:340px;
    grid-template-columns:72px 1fr;
  }

  .hero-note{
    display:none;
  }

  .story-grid,
  .services-grid,
  .approach-grid,
  .insights-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .services-cards{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:760px){

  .container{
    width:min(100% - 28px,680px);
  }

  .site-header .container{
    width:calc(100% - 24px);
  }

  .brand-logo{
    width:38px;
    height:38px;
  }

  .brand-name{
    font-size:1.45rem;
  }

  .brand-sub{
    font-size:.4rem;
  }

  .hero{
    min-height:470px;
    background:
      linear-gradient(
        180deg,
        rgba(250,248,242,.98) 0%,
        rgba(250,248,242,.91) 40%,
        rgba(250,248,242,.18) 70%,
        rgba(250,248,242,.02) 100%
      ),
      url('/assets/img/hero.webp') 65% center/cover no-repeat;
  }

  .hero-grid{
    display:block;
    min-height:470px;
    padding:30px 0;
  }

  .hero-side{
    display:none;
  }

  .hero-copy{
    padding-top:12px;
  }

  h1{
    font-size:clamp(2.8rem,13vw,4.4rem);
  }

  .hero-copy p{
    max-width:92%;
    font-size:1rem;
  }

  .story-grid{
    padding:32px 0;
    gap:1.6rem;
  }

  .story-copy,
  .concepts{
    padding-top:0;
  }

  .services,
  .approach,
  .insights{
    padding:34px 0;
  }

  .services-cards{
    grid-template-columns:1fr;
  }

  .service-card{
    min-height:190px;
  }

  .steps{
    grid-template-columns:1fr;
    gap:2rem;
    padding-left:8px;
  }

  .steps::before{
    display:none;
  }

  .step{
    display:grid;
    grid-template-columns:78px 1fr;
    column-gap:1rem;
  }

  .step-disc{
    grid-row:1/4;
    margin:0;
    width:66px;
    height:66px;
  }

  .step-index{
    align-self:end;
  }

  .articles{
    grid-template-columns:1fr;
  }

  .article{
    grid-template-columns:115px 1fr;
  }

  .article-art{
    width:115px;
    height:78px;
  }

  .contact-grid{
    gap:1.2rem;
  }

  .footer-top{
    grid-template-columns:1fr;
    align-items:start;
  }

  .footer-nav{
    flex-wrap:wrap;
  }

  .footer-note{
    text-align:left;
  }

  .footer-bottom{
    flex-direction:column;
    gap:.5rem;
  }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-hero{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  padding:54px 0;
}

.about-hero-grid{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:4rem;
  align-items:start;
}

.about-copy h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(3rem,5.6vw,5.9rem);
  line-height:.92;
  letter-spacing:-.045em;
  max-width:820px;
  margin:.7rem 0 1.6rem;
}

.about-copy p{
  max-width:720px;
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.55;
  color:#4f5e67;
}

.about-copy .about-lead{
  font-size:1.35rem;
  line-height:1.35;
  color:var(--ink);
  max-width:680px;
}

.founder-card{
  position:sticky;
  top:95px;
}

.founder-photo-placeholder{
  aspect-ratio:4/5;
  min-height:440px;
  background:
    radial-gradient(circle at 65% 25%,rgba(201,154,77,.18),transparent 28%),
    linear-gradient(145deg,#e7e0d4,#c7d0cf);
  display:grid;
  place-items:center;
  border:1px solid var(--line);
}

.founder-photo-placeholder span{
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#69747a;
}

.founder-meta{
  padding-top:1rem;
  border-top:1px solid var(--line);
  margin-top:1rem;
}

.founder-meta strong{
  display:block;
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:500;
}

.founder-meta span{
  display:block;
  margin-top:.2rem;
  color:#6a747a;
  font-size:.7rem;
  letter-spacing:.04em;
}

.about-kata{
  background:#faf7f0;
  border-bottom:1px solid var(--line);
  padding:44px 0;
}

.about-kata-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:3.5rem;
}

.about-kata h2,
.about-section-heading h2,
.about-technology h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2rem,3.6vw,3.6rem);
  line-height:.98;
  letter-spacing:-.035em;
  margin:.6rem 0 0;
}

.about-kata-copy,
.about-technology-copy{
  font-family:var(--serif);
  color:#53616a;
  font-size:.96rem;
  line-height:1.55;
}

.about-kata-copy p,
.about-technology-copy p{
  margin-bottom:.8rem;
}

.about-journey{
  background:var(--paper-2);
  padding:46px 0;
  border-bottom:1px solid var(--line);
}

.about-section-heading{
  max-width:700px;
  margin-bottom:2rem;
}

.influence-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

.influence-card{
  background:#faf7f0;
  border:1px solid var(--line);
  padding:1.6rem;
  min-height:180px;
}

.influence-flag{
  font-size:2.4rem;
  margin-bottom:1rem;
}

.influence-card h3{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:500;
  margin-bottom:.5rem;
}

.influence-card p{
  font-family:var(--serif);
  color:#667077;
  font-size:.85rem;
  margin-bottom:0;
}

.about-technology{
  background:#faf7f0;
  padding:48px 0;
  border-bottom:1px solid var(--line);
}

.about-technology-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:3.5rem;
}

.about-technology blockquote{
  margin:1.5rem 0 0;
  padding:1.15rem 0 1.15rem 1.25rem;
  border-left:2px solid var(--gold);
  font-family:var(--serif);
  font-size:1.55rem;
  color:var(--ink);
}

.about-name{
  background:var(--paper-2);
  padding:48px 0;
  border-bottom:1px solid var(--line);
}

.name-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
}

.name-card{
  border:1px solid var(--line);
  background:#faf7f0;
  padding:1.7rem;
}

.name-word{
  font-family:var(--serif);
  font-size:2.6rem;
  line-height:1;
  color:var(--gold);
  margin-bottom:1rem;
}

.name-card p{
  font-family:var(--serif);
  font-size:1rem;
  margin-bottom:.65rem;
}

.name-card span{
  display:block;
  color:#68737a;
  font-family:var(--serif);
  font-size:.83rem;
  line-height:1.45;
}

.name-summary{
  max-width:770px;
  margin-top:1.5rem;
}

.name-summary p{
  font-family:var(--serif);
  font-size:1.2rem;
  line-height:1.45;
  color:#46555e;
}

.about-method{
  background:#faf7f0;
  padding:48px 0 55px;
}

.method-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

.method-card{
  border-top:1px solid var(--gold);
  padding-top:1.1rem;
}

.method-number{
  font-size:.55rem;
  letter-spacing:.2em;
  margin-bottom:.8rem;
  color:#7b6d56;
}

.method-card h3{
  font-family:var(--serif);
  font-size:1.6rem;
  font-weight:500;
  margin-bottom:.45rem;
}

.method-card p{
  max-width:270px;
  font-family:var(--serif);
  color:#657078;
  font-size:.84rem;
  line-height:1.45;
}

.about-closing{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}

.about-closing p{
  font-family:var(--serif);
  color:#677178;
  margin-bottom:.25rem;
}

.about-closing strong{
  display:block;
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:500;
}

@media (max-width:900px){

  .about-hero-grid,
  .about-kata-grid,
  .about-technology-grid{
    grid-template-columns:1fr;
  }

  .founder-card{
    position:relative;
    top:auto;
    max-width:440px;
  }

  .influence-grid,
  .method-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){

  .about-hero,
  .about-kata,
  .about-journey,
  .about-technology,
  .about-name,
  .about-method{
    padding:34px 0;
  }

  .about-copy h1{
    font-size:clamp(2.7rem,13vw,4.6rem);
  }

  .about-copy .about-lead{
    font-size:1.15rem;
  }

  .founder-photo-placeholder{
    min-height:360px;
  }

  .name-grid{
    grid-template-columns:1fr;
  }
}

/* Founder image */
.founder-photo{
  aspect-ratio:4/5;
  overflow:hidden;
  background:#e7e0d4;
  border:1px solid var(--line);
}

.founder-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

.founder-signature{
  width:min(180px,70%);
  height:auto;
  margin-top:1rem;
  opacity:.88;
}

/* Old placeholder no longer used */
.founder-photo-placeholder{
  display:none;
}

/* =========================================================
   SERVICE LINKS — HOME
   ========================================================= */

.service-card{
  display:block;
  color:var(--ink);
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.service-card:hover{
  transform:translateY(-3px);
  border-color:var(--gold-soft);
  box-shadow:0 14px 35px rgba(30,35,40,.07);
}

.service-card-link{
  position:absolute;
  left:17px;
  bottom:15px;
  font-size:.54rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#8b6c3a;
}


/* =========================================================
   SERVICES LANDING
   ========================================================= */

.services-page-hero{
  padding:58px 0 52px;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}

.services-page-hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:4rem;
  align-items:end;
}

.services-page-hero h1{
  margin-top:.75rem;
}

.services-page-intro{
  max-width:520px;
  font-family:var(--serif);
  color:#53616a;
  font-size:1rem;
  line-height:1.5;
}

.services-page-intro p:last-child{
  margin-bottom:0;
}

.services-page-list{
  background:#faf7f0;
  padding:12px 0;
}

.services-page-row{
  display:grid;
  grid-template-columns:70px .9fr 1.3fr 40px;
  gap:2rem;
  align-items:center;
  min-height:150px;
  padding:1.5rem 0;
  border-bottom:1px solid var(--line);
}

.services-page-row:last-child{
  border-bottom:0;
}

.services-page-number{
  font-size:.56rem;
  letter-spacing:.2em;
  color:#7b6d56;
}

.services-page-row h2{
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.5vw,2.5rem);
  line-height:1;
  font-weight:500;
  letter-spacing:-.025em;
  margin:0;
}

.services-page-row p{
  font-family:var(--serif);
  color:#637078;
  font-size:.82rem;
  line-height:1.45;
  margin:0;
  max-width:430px;
}

.services-page-arrow{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--gold-soft);
  border-radius:50%;
  color:#997642;
  transition:.2s ease;
}

.services-page-row:hover .services-page-arrow{
  background:var(--gold);
  color:white;
  border-color:var(--gold);
}


/* =========================================================
   SERVICE DETAIL
   ========================================================= */

.service-detail-hero{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  padding:60px 0;
}

.service-detail-hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:4.5rem;
  align-items:end;
}

.service-detail-number{
  margin-top:1.5rem;
  font-size:.58rem;
  letter-spacing:.2em;
  color:#88704c;
}

.service-detail-hero h1{
  margin-top:.6rem;
  max-width:760px;
}

.service-detail-intro{
  max-width:520px;
}

.service-detail-label{
  font-family:var(--serif);
  font-size:1.45rem;
  color:var(--gold);
  margin-bottom:1rem;
}

.service-detail-intro p{
  font-family:var(--serif);
  color:#53616a;
  font-size:1rem;
  line-height:1.55;
  margin-bottom:1.35rem;
}

.service-problem{
  background:#faf7f0;
  border-bottom:1px solid var(--line);
  padding:48px 0;
}

.service-problem-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:4rem;
}

.service-problem h2,
.service-section-heading h2,
.service-outcomes h2,
.service-next h2{
  font-family:var(--serif);
  font-size:clamp(2rem,3.5vw,3.5rem);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:.98;
  margin:.65rem 0 0;
}

.service-problem-copy{
  font-family:var(--serif);
  color:#55636c;
  font-size:.96rem;
  line-height:1.55;
}

.service-problem-copy p{
  margin-bottom:.85rem;
}

.service-offers{
  padding:50px 0;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}

.service-section-heading{
  max-width:700px;
  margin-bottom:2rem;
}

.service-offer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

.service-offer-card{
  min-height:220px;
  padding:1.5rem;
  border:1px solid var(--line);
  background:#faf7f0;
}

.service-offer-number{
  font-size:.52rem;
  letter-spacing:.18em;
  color:#8b724d;
  margin-bottom:1.3rem;
}

.service-offer-card h3{
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:500;
  line-height:1.05;
  margin-bottom:.7rem;
}

.service-offer-card p{
  font-family:var(--serif);
  color:#657078;
  font-size:.78rem;
  line-height:1.45;
  margin:0;
}

.service-outcomes{
  background:#faf7f0;
  padding:50px 0;
  border-bottom:1px solid var(--line);
}

.service-outcomes-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:4rem;
}

.outcome-list{
  border-top:1px solid var(--line);
}

.outcome-item{
  display:grid;
  grid-template-columns:55px 1fr;
  gap:1rem;
  align-items:center;
  padding:1rem 0;
  border-bottom:1px solid var(--line);
}

.outcome-item span{
  font-size:.5rem;
  letter-spacing:.18em;
  color:#8a724d;
}

.outcome-item p{
  margin:0;
  font-family:var(--serif);
  font-size:.9rem;
  color:#53616a;
}

.service-philosophy{
  background:#102534;
  color:#f7f3eb;
  padding:50px 0;
}

.service-philosophy .eyebrow{
  color:#cbd4d8;
}

.service-philosophy-inner{
  max-width:850px;
}

.service-philosophy blockquote{
  margin:1.5rem 0;
  font-family:var(--serif);
  font-size:clamp(1.6rem,3vw,2.8rem);
  line-height:1.15;
  font-weight:400;
}

.service-philosophy-principle{
  font-size:.55rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#d7b777;
}

.service-next{
  padding:45px 0;
  background:var(--paper-2);
}

.service-next-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}

.service-next-grid>div:last-child{
  font-family:var(--serif);
  color:#59666f;
  max-width:500px;
}

.service-next-grid p{
  margin-bottom:1rem;
}


/* =========================================================
   SERVICES RESPONSIVE
   ========================================================= */

@media (max-width:900px){

  .services-page-hero-grid,
  .service-detail-hero-grid,
  .service-problem-grid,
  .service-outcomes-grid,
  .service-next-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .service-offer-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .services-page-row{
    grid-template-columns:55px 1fr 40px;
  }

  .services-page-row p{
    grid-column:2/4;
  }
}

@media (max-width:760px){

  .services-page-hero,
  .service-detail-hero,
  .service-problem,
  .service-offers,
  .service-outcomes,
  .service-philosophy,
  .service-next{
    padding:34px 0;
  }

  .service-offer-grid{
    grid-template-columns:1fr;
  }

  .services-page-row{
    grid-template-columns:40px 1fr 34px;
    gap:1rem;
    padding:1.4rem 0;
  }

  .services-page-row p{
    grid-column:2/4;
  }

  .service-offer-card{
    min-height:auto;
  }
}

/* =========================================================
   SERVICES ACCORDION
   ========================================================= */

.services-accordion{
  display:grid;
  gap:.8rem;
}

.service-accordion-item{
  background:#fffdf9;
  border:1px solid #e8e1d6;
  overflow:hidden;
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.service-accordion-item.is-open{
  border-color:var(--gold-soft);
  box-shadow:0 10px 30px rgba(30,35,40,.05);
}

.service-accordion-trigger{
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  padding:0;
  cursor:pointer;
}

.service-accordion-head{
  min-height:110px;
  display:grid;
  grid-template-columns:44px 76px 1fr 38px;
  gap:1.1rem;
  align-items:center;
  padding:1rem 1.15rem;
}

.service-accordion-head .service-index{
  margin:0;
  font-size:.52rem;
  letter-spacing:.18em;
  align-self:start;
  padding-top:.3rem;
}

.service-accordion-head .service-image{
  position:static;
  width:76px;
  height:76px;
  border-radius:50%;
  object-fit:cover;
}

.service-title-group h3{
  font-family:var(--serif);
  font-size:1.32rem;
  line-height:1;
  font-weight:500;
  margin-bottom:.4rem;
}

.service-title-group p{
  font-family:var(--serif);
  color:#657078;
  font-size:.72rem;
  line-height:1.35;
  max-width:520px;
  margin:0;
}

.service-toggle-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid var(--gold-soft);
  border-radius:50%;
  font-size:1rem;
  color:#997642;
  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease;
}

.service-accordion-item.is-open .service-toggle-icon{
  transform:rotate(45deg);
  background:var(--gold);
  border-color:var(--gold);
  color:white;
}

.service-accordion-panel{
  border-top:1px solid var(--line);
}

.service-panel-inner{
  padding:1.5rem 1.4rem 1.6rem;
  background:
    linear-gradient(180deg,#fffdf9,#faf7f0);
}

.service-panel-lead{
  display:grid;
  grid-template-columns:130px 1fr;
  column-gap:2rem;
  margin-bottom:1.6rem;
}

.panel-kicker{
  font-size:.5rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8a7046;
  padding-top:.35rem;
}

.service-panel-lead h4{
  grid-column:2;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.45rem,2.4vw,2.2rem);
  line-height:1.05;
  margin:0 0 .65rem;
}

.service-panel-lead p{
  grid-column:2;
  max-width:680px;
  font-family:var(--serif);
  color:#59666f;
  font-size:.82rem;
  line-height:1.5;
  margin:0;
}

.service-panel-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.service-panel-grid>div{
  min-height:125px;
  padding:1rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.service-panel-grid strong{
  display:block;
  font-family:var(--serif);
  font-size:.92rem;
  font-weight:500;
  margin-bottom:.4rem;
}

.service-panel-grid span{
  display:block;
  color:#68747b;
  font-family:var(--serif);
  font-size:.67rem;
  line-height:1.4;
}

.service-panel-note{
  margin-top:1.2rem;
  padding-left:1rem;
  border-left:2px solid var(--gold);
  font-family:var(--serif);
  color:#53616a;
  font-size:.78rem;
  line-height:1.45;
  max-width:760px;
}

/* remove old card layout */
.services-cards{
  display:none;
}

@media (max-width:800px){

  .service-accordion-head{
    grid-template-columns:36px 60px 1fr 32px;
    gap:.8rem;
    padding:.9rem;
  }

  .service-accordion-head .service-image{
    width:60px;
    height:60px;
  }

  .service-title-group h3{
    font-size:1.1rem;
  }

  .service-title-group p{
    font-size:.65rem;
  }

  .service-panel-lead{
    grid-template-columns:1fr;
    gap:.5rem;
  }

  .panel-kicker,
  .service-panel-lead h4,
  .service-panel-lead p{
    grid-column:1;
  }

  .service-panel-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:560px){

  .service-accordion-head{
    grid-template-columns:32px 1fr 30px;
  }

  .service-accordion-head .service-image{
    display:none;
  }

  .service-title-group h3{
    font-size:1rem;
  }

  .service-panel-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   KATALUME APPROACH ACCORDION
   ========================================================= */

.approach{
  padding:38px 0;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}

.approach-layout{
  display:grid;
  grid-template-columns:.72fr 2.28fr;
  gap:3rem;
  align-items:start;
}

.approach-intro{
  position:sticky;
  top:95px;
}

.approach-intro h2{
  font-family:var(--serif);
  font-size:clamp(2.2rem,3.8vw,3.8rem);
  line-height:.9;
  font-weight:500;
  letter-spacing:-.04em;
  margin:.75rem 0 1rem;
}

.approach-intro>p{
  max-width:280px;
  font-family:var(--serif);
  color:#5e6a72;
  font-size:.78rem;
  line-height:1.45;
}

.approach-principle{
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}

.approach-principle span{
  display:block;
  font-size:.48rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#8a724b;
  margin-bottom:.35rem;
}

.approach-principle strong{
  display:block;
  font-family:var(--serif);
  font-size:1rem;
  font-weight:500;
  line-height:1.25;
}

.approach-accordion{
  display:grid;
  gap:.65rem;
}

.approach-item{
  border:1px solid var(--line);
  background:#faf7f0;
  overflow:hidden;
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.approach-item.is-open{
  border-color:var(--gold-soft);
  box-shadow:0 10px 28px rgba(20,30,35,.045);
}

.approach-trigger{
  width:100%;
  border:0;
  background:transparent;
  padding:0;
  color:inherit;
  cursor:pointer;
  text-align:left;
}

.approach-trigger{
  min-height:92px;
  display:grid;
  grid-template-columns:38px 64px 1fr 34px;
  gap:1rem;
  align-items:center;
  padding:.8rem 1rem;
}

.approach-number{
  font-size:.5rem;
  letter-spacing:.18em;
  color:#89724e;
  align-self:start;
  padding-top:.35rem;
}

.approach-image{
  width:64px;
  height:64px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--gold-soft);
}

.approach-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.approach-heading strong{
  display:block;
  font-family:var(--serif);
  font-weight:500;
  font-size:1.28rem;
  line-height:1;
  margin-bottom:.25rem;
}

.approach-heading small{
  display:block;
  font-family:var(--serif);
  color:#67737a;
  font-size:.7rem;
}

.approach-toggle{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:1px solid var(--gold-soft);
  border-radius:50%;
  color:#997541;
  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease;
}

.approach-item.is-open .approach-toggle{
  transform:rotate(45deg);
  background:var(--gold);
  color:white;
  border-color:var(--gold);
}

.approach-panel{
  border-top:1px solid var(--line);
}

.approach-panel-inner{
  padding:1.3rem 1.2rem 1.4rem 118px;
}

.approach-panel-lead{
  max-width:660px;
  font-family:var(--serif);
  color:#53616a;
  font-size:.82rem;
  line-height:1.5;
  margin-bottom:1.2rem;
}

.approach-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.approach-detail-grid>div{
  padding:.9rem;
  min-height:105px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fffdf9;
}

.approach-detail-grid strong{
  display:block;
  font-family:var(--serif);
  font-size:.85rem;
  font-weight:500;
  margin-bottom:.35rem;
}

.approach-detail-grid span{
  display:block;
  font-family:var(--serif);
  color:#69747a;
  font-size:.64rem;
  line-height:1.4;
}

@media (max-width:900px){

  .approach-layout{
    grid-template-columns:1fr;
    gap:1.6rem;
  }

  .approach-intro{
    position:relative;
    top:auto;
  }

  .approach-intro h2 br{
    display:none;
  }
}

@media (max-width:620px){

  .approach-trigger{
    grid-template-columns:30px 52px 1fr 30px;
    gap:.7rem;
    padding:.75rem;
  }

  .approach-image{
    width:52px;
    height:52px;
  }

  .approach-heading strong{
    font-size:1.05rem;
  }

  .approach-panel-inner{
    padding:1rem;
  }

  .approach-detail-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   TEXT LINKS
   ========================================================= */

.section-text-link{
  display:inline-block;
  margin-top:.8rem;
  font-size:.55rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:#8d6b37;
}


/* =========================================================
   SERVICES PAGE ACCORDION
   ========================================================= */

.services-page-accordion{
  padding:18px 0 28px;
  background:#faf7f0;
}

.services-page-accordion .service-accordion-item{
  margin-bottom:.75rem;
}

.services-page-accordion .service-title-group h2{
  font-family:var(--serif);
  font-size:1.45rem;
  line-height:1;
  font-weight:500;
  margin:0 0 .4rem;
}


/* =========================================================
   QUOTATION BRIDGE
   ========================================================= */

.services-quotation{
  background:#102534;
  color:#f7f3eb;
  padding:48px 0;
}

.services-quotation .eyebrow{
  color:#d4dcdf;
}

.services-quotation-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:4rem;
  align-items:center;
}

.services-quotation h2{
  font-family:var(--serif);
  font-size:clamp(2rem,3.5vw,3.5rem);
  line-height:.98;
  font-weight:500;
  letter-spacing:-.035em;
  margin:.65rem 0 0;
}

.services-quotation-grid>div:last-child{
  max-width:560px;
  font-family:var(--serif);
  color:#d5dddf;
}

.services-quotation p{
  margin-bottom:1.2rem;
}


/* =========================================================
   APPROACH PAGE
   ========================================================= */

.approach-page-hero{
  padding:58px 0 52px;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}

.approach-page-hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:4rem;
  align-items:end;
}

.approach-page-intro{
  max-width:520px;
  font-family:var(--serif);
  color:#53616a;
  line-height:1.5;
}

.approach-page-intro strong{
  display:block;
  margin-top:1.2rem;
  color:#8d6a35;
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.55rem;
}

.approach-page-accordion{
  padding:24px 0 40px;
  background:#faf7f0;
}

.approach-page-accordion .approach-item{
  margin-bottom:.75rem;
}


@media (max-width:900px){

  .services-quotation-grid,
  .approach-page-hero-grid{
    grid-template-columns:1fr;
    gap:1.8rem;
  }
}

/* =========================================================
   HOMEPAGE SERVICES — restore summary cards
   Accordions now live on /services/
   ========================================================= */

.services .services-cards{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem;
}

.services .service-card{
  display:block;
  min-height:205px;
  position:relative;
  padding:17px;
  padding-bottom:42px;
  background:#fffdf9;
  color:var(--ink);
  border:1px solid #e9e2d7;
  box-shadow:0 5px 20px rgba(30,35,40,.035);
  overflow:hidden;
}

.services .service-card .service-image{
  display:block;
  position:absolute;
  top:13px;
  right:13px;
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:50%;
}

.services .service-card h3{
  max-width:150px;
}

.services .service-card-link{
  display:block;
  position:absolute;
  left:17px;
  bottom:15px;
}

@media (max-width:760px){
  .services .services-cards{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   SECTION ACTION LINKS
   Shared button treatment across Services / Approach / Insights
   ========================================================= */

.section-action-link,
.section-text-link{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin-top:1.05rem;
  padding:.72rem 1rem;
  border:1px solid var(--gold-soft);
  border-radius:999px;
  color:#8c6a36;
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.section-action-link span,
.section-text-link span{
  font-size:.8rem;
  line-height:1;
}

.section-action-link:hover,
.section-text-link:hover{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
  transform:translateY(-1px);
}

/* Services homepage CTA gets the same treatment */
.services .section-text-link{
  margin-top:1.05rem;
}

/* Keep buttons compact on small screens */
@media (max-width:760px){
  .section-action-link,
  .section-text-link{
    font-size:.52rem;
    padding:.68rem .95rem;
  }
}

/* =========================================================
   HOMEPAGE APPROACH — EXPLORE LINKS
   ========================================================= */

.step{
  padding-bottom:2.2rem;
}

.step-explore{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:.8rem;
  font-size:.52rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#8d6b37;
  transition:
    color .2s ease,
    transform .2s ease;
}

.step-explore span{
  font-size:.75rem;
  line-height:1;
}

.step-explore:hover{
  color:var(--gold);
  transform:translateX(2px);
}

/* =========================================================
   HOMEPAGE INSIGHT EXPLORE LINKS
   ========================================================= */

.article{
  position:relative;
  padding-bottom:2rem;
}

.insight-explore{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:.65rem;
  font-size:.52rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#8d6b37;
  transition:
    color .2s ease,
    transform .2s ease;
}

.insight-explore span{
  font-size:.75rem;
  line-height:1;
}

.insight-explore:hover{
  color:var(--gold);
  transform:translateX(2px);
}


/* =========================================================
   INSIGHTS PAGE ACCORDION
   ========================================================= */

.insights-page-accordion{
  padding:22px 0 40px;
  background:#faf7f0;
}

.insight-item{
  border:1px solid var(--line);
  background:#fffdf9;
  margin-bottom:.75rem;
  overflow:hidden;
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.insight-item.is-open{
  border-color:var(--gold-soft);
  box-shadow:0 10px 28px rgba(20,30,35,.045);
}

.insight-trigger{
  width:100%;
  min-height:110px;
  display:grid;
  grid-template-columns:42px 120px 1fr 34px;
  gap:1rem;
  align-items:center;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  padding:1rem 1.1rem;
  cursor:pointer;
}

.insight-number{
  font-size:.5rem;
  letter-spacing:.18em;
  color:#8b724d;
  align-self:start;
  padding-top:.25rem;
}

.insight-thumb{
  width:120px;
  height:80px;
  object-fit:cover;
}

.insight-heading small{
  display:block;
  margin-bottom:.35rem;
  font-size:.5rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#8b724d;
}

.insight-heading strong{
  display:block;
  font-family:var(--serif);
  font-size:1.35rem;
  line-height:1.05;
  font-weight:500;
}

.insight-toggle{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:1px solid var(--gold-soft);
  border-radius:50%;
  color:#997541;
  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease;
}

.insight-item.is-open .insight-toggle{
  transform:rotate(45deg);
  background:var(--gold);
  color:white;
  border-color:var(--gold);
}

.insight-panel{
  border-top:1px solid var(--line);
}

.insight-panel-inner{
  padding:1.4rem 1.3rem 1.5rem 184px;
}

.insight-lead{
  max-width:720px;
  font-family:var(--serif);
  color:#53616a;
  font-size:.84rem;
  line-height:1.5;
  margin-bottom:1.2rem;
}

.insight-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.insight-detail-grid>div{
  min-height:110px;
  padding:1rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#faf7f0;
}

.insight-detail-grid strong{
  display:block;
  font-family:var(--serif);
  font-size:.9rem;
  font-weight:500;
  margin-bottom:.35rem;
}

.insight-detail-grid span{
  display:block;
  font-family:var(--serif);
  color:#69747a;
  font-size:.65rem;
  line-height:1.4;
}

.insight-note{
  margin-top:1.2rem;
  padding-left:1rem;
  border-left:2px solid var(--gold);
  font-family:var(--serif);
  color:#53616a;
  font-size:.78rem;
}

@media (max-width:760px){

  .insight-trigger{
    grid-template-columns:34px 82px 1fr 30px;
    gap:.7rem;
    padding:.8rem;
  }

  .insight-thumb{
    width:82px;
    height:62px;
  }

  .insight-heading strong{
    font-size:1.05rem;
  }

  .insight-panel-inner{
    padding:1rem;
  }

  .insight-detail-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   HOMEPAGE WORK
   ========================================================= */

.work{
  padding:34px 0;
  background:#fffdf9;
  border-bottom:1px solid var(--line);
}

.work-grid{
  display:grid;
  grid-template-columns:.75fr 2.25fr;
  gap:2.3rem;
  align-items:start;
}

.work-intro h2{
  font-family:var(--serif);
  font-size:clamp(1.75rem,2.6vw,2.75rem);
  line-height:.98;
  font-weight:500;
  letter-spacing:-.025em;
  margin:.55rem 0 0;
}

.work-intro>p{
  max-width:290px;
  font-family:var(--serif);
  color:#5d6971;
  font-size:.75rem;
  line-height:1.45;
  margin-top:.8rem;
}

.work-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem;
}

.work-card{
  min-height:225px;
  padding:1.15rem;
  border:1px solid var(--line);
  background:#faf7f0;
  position:relative;
}

.work-number{
  font-size:.5rem;
  letter-spacing:.18em;
  color:#88704b;
  margin-bottom:1.2rem;
}

.work-type{
  font-size:.48rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#9a7842;
  margin-bottom:.45rem;
}

.work-card h3{
  font-family:var(--serif);
  font-size:1.3rem;
  font-weight:500;
  line-height:1.05;
  margin-bottom:.65rem;
}

.work-card p{
  font-family:var(--serif);
  color:#647078;
  font-size:.68rem;
  line-height:1.4;
  max-width:240px;
}

.work-explore{
  position:absolute;
  left:1.15rem;
  bottom:1rem;
  display:inline-flex;
  gap:.45rem;
  align-items:center;
  font-size:.52rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#8d6b37;
}


/* =========================================================
   WORK PAGE
   ========================================================= */

.work-page-accordion{
  padding:24px 0 40px;
  background:#faf7f0;
}

.work-item{
  border:1px solid var(--line);
  background:#fffdf9;
  margin-bottom:.75rem;
  overflow:hidden;
}

.work-item.is-open{
  border-color:var(--gold-soft);
  box-shadow:0 10px 28px rgba(20,30,35,.045);
}

.work-trigger{
  width:100%;
  min-height:115px;
  display:grid;
  grid-template-columns:45px .8fr 1.2fr 34px;
  gap:1.2rem;
  align-items:center;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  padding:1rem 1.2rem;
  cursor:pointer;
}

.work-heading small{
  display:block;
  font-size:.48rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#8e7145;
  margin-bottom:.35rem;
}

.work-heading strong{
  display:block;
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:500;
  line-height:1.05;
}

.work-summary{
  font-family:var(--serif);
  color:#657078;
  font-size:.76rem;
  line-height:1.4;
  max-width:480px;
}

.work-toggle{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:1px solid var(--gold-soft);
  border-radius:50%;
  color:#997541;
  transition:.2s ease;
}

.work-item.is-open .work-toggle{
  transform:rotate(45deg);
  background:var(--gold);
  color:white;
  border-color:var(--gold);
}

.work-panel{
  border-top:1px solid var(--line);
}

.work-panel-inner{
  padding:1.4rem 1.3rem 1.5rem 190px;
}

.work-lead{
  max-width:720px;
  font-family:var(--serif);
  color:#53616a;
  font-size:.84rem;
  line-height:1.5;
  margin-bottom:1.2rem;
}

.work-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
}

.work-detail-grid>div{
  min-height:115px;
  padding:1rem;
  background:#faf7f0;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.work-detail-grid strong{
  display:block;
  font-family:var(--serif);
  font-size:.88rem;
  font-weight:500;
  margin-bottom:.35rem;
}

.work-detail-grid span{
  display:block;
  font-family:var(--serif);
  color:#69747a;
  font-size:.65rem;
  line-height:1.4;
}

@media (max-width:900px){

  .work-grid{
    grid-template-columns:1fr;
  }

  .work-cards{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:760px){

  .work-cards{
    grid-template-columns:1fr;
  }

  .work-trigger{
    grid-template-columns:34px 1fr 30px;
  }

  .work-summary{
    grid-column:2/4;
  }

  .work-panel-inner{
    padding:1rem;
  }

  .work-detail-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   KATALUME WORK CAROUSEL
   ========================================================= */

.work-carousel-section{
  padding:40px 0 36px;
  overflow:hidden;
  background:#fffdf9;
  border-bottom:1px solid var(--line);
}

.work-carousel-heading{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;
  align-items:end;
  margin-bottom:1.5rem;
}

.work-carousel-heading .work-intro{
  max-width:520px;
}

.work-carousel-heading .work-intro h2{
  font-family:var(--serif);
  font-size:clamp(2rem,3.5vw,3.6rem);
  line-height:.96;
  font-weight:500;
  letter-spacing:-.035em;
  margin:.6rem 0 .8rem;
}

.work-carousel-heading .work-intro p{
  max-width:440px;
  font-family:var(--serif);
  color:#5d6971;
  font-size:.82rem;
  line-height:1.5;
  margin:0;
}

.work-carousel-controls{
  display:flex;
  gap:.55rem;
}

.work-carousel-button{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--gold-soft);
  background:transparent;
  color:#8e6c38;
  font-size:1rem;
  cursor:pointer;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.work-carousel-button:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
}

.work-carousel-shell{
  width:100%;
  overflow:hidden;
}

.work-carousel-track{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding:
    0
    max(22px,calc((100vw - 1180px) / 2))
    1rem;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.work-carousel-track::-webkit-scrollbar{
  display:none;
}

.portfolio-slide{
  flex:0 0 clamp(280px,30vw,390px);
  scroll-snap-align:start;
  border:1px solid var(--line);
  background:#faf7f0;
}

.portfolio-slide-link{
  display:flex;
  flex-direction:column;
  height:100%;
  color:inherit;
}

.portfolio-slide-image{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#e8e3da;
  border-bottom:1px solid var(--line);
}

.portfolio-slide-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}

.portfolio-slide:hover .portfolio-slide-image img{
  transform:scale(1.025);
}

.portfolio-flag{
  position:absolute;
  top:.8rem;
  right:.8rem;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,253,249,.92);
  backdrop-filter:blur(8px);
  box-shadow:0 5px 18px rgba(20,30,35,.10);
  font-size:1rem;
}

.portfolio-slide-content{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:1.15rem;
}

.portfolio-slide-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.8rem;
  font-size:.48rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#917346;
}

.portfolio-slide h3{
  font-family:var(--serif);
  font-size:1.45rem;
  line-height:1.02;
  font-weight:500;
  margin-bottom:.65rem;
}

.portfolio-slide p{
  font-family:var(--serif);
  color:#647078;
  font-size:.72rem;
  line-height:1.45;
  margin-bottom:1.2rem;
}

.portfolio-visit{
  display:inline-flex;
  margin-top:auto;
  font-size:.5rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#8d6b37;
}

.work-carousel-footer{
  display:flex;
  align-items:center;
  gap:1.5rem;
  margin-top:.5rem;
  color:#7a858b;
  font-family:var(--serif);
  font-size:.7rem;
}

.work-carousel-progress{
  position:relative;
  flex:1;
  max-width:360px;
  height:1px;
  background:var(--line);
  overflow:hidden;
}

.work-carousel-progress span{
  display:block;
  width:15%;
  height:100%;
  background:var(--gold);
  transform-origin:left center;
}

@media (max-width:760px){

  .work-carousel-section{
    padding:34px 0;
  }

  .work-carousel-heading{
    grid-template-columns:1fr;
  }

  .work-carousel-controls{
    justify-content:flex-start;
  }

  .portfolio-slide{
    flex-basis:82vw;
  }

  .work-carousel-track{
    padding-left:14px;
    padding-right:14px;
  }
}

/* =========================================================
   WORK CAROUSEL V2
   Matches homepage Services card language
   ========================================================= */

.work-projects{
  padding:34px 0 28px;
  background:#faf7f0;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.work-projects-grid{
  display:grid;
  grid-template-columns:.75fr 2.25fr;
  gap:2.3rem;
  align-items:start;
}

.work-projects-intro h2{
  font-family:var(--serif);
  font-size:clamp(1.75rem,2.6vw,2.75rem);
  line-height:.98;
  font-weight:500;
  letter-spacing:-.025em;
  margin:.55rem 0 0;
}

.work-projects-intro>p{
  max-width:300px;
  margin-top:.8rem;
  font-family:var(--serif);
  color:#5d6971;
  font-size:.75rem;
  line-height:1.45;
}

.work-projects-actions{
  margin-top:1rem;
}

.work-projects-controls{
  display:flex;
  gap:.45rem;
  margin-top:.85rem;
}

.work-projects-controls button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--gold-soft);
  background:transparent;
  color:#8d6b37;
  cursor:pointer;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.work-projects-controls button:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
}


/* viewport */

.work-projects-viewport{
  min-width:0;
  overflow:hidden;
}

.work-projects-track{
  display:flex;
  gap:.8rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}

.work-projects-track::-webkit-scrollbar{
  display:none;
}


/* exactly 3 service-sized cards on desktop */

.work-project-card{
  position:relative;
  flex:
    0
    0
    calc((100% - 1.6rem) / 3);

  min-width:0;
  min-height:205px;
  padding:17px 17px 44px;

  background:#fffdf9;
  border:1px solid #e9e2d7;
  box-shadow:0 5px 20px rgba(30,35,40,.035);

  scroll-snap-align:start;
}

.work-project-number{
  margin-bottom:.65rem;
  font-size:.53rem;
  letter-spacing:.18em;
  color:var(--ink);
}

.work-project-image{
  position:absolute;
  top:13px;
  right:13px;

  width:72px;
  height:72px;

  overflow:hidden;
  border-radius:50%;

  background:#eee7dc;
}

.work-project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.work-project-image-placeholder{
  display:grid;
  place-items:center;

  font-family:var(--serif);
  font-size:1.5rem;
  color:#8c7652;

  border:1px solid var(--gold-soft);
}

.work-project-type{
  max-width:150px;
  margin-bottom:.45rem;

  font-size:.46rem;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;

  color:#967443;
}

.work-project-card h3{
  max-width:170px;
  margin-bottom:.7rem;

  font-family:var(--serif);
  font-size:1.24rem;
  line-height:.95;
  font-weight:500;
}

.work-project-card p{
  max-width:190px;
  margin:0;

  font-family:var(--serif);
  color:#59636a;

  font-size:.68rem;
  line-height:1.3;
}

.work-project-explore{
  position:absolute;
  left:17px;
  bottom:15px;

  display:inline-flex;
  align-items:center;
  gap:.45rem;

  font-size:.52rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;

  color:#8d6b37;
}

.work-project-explore:hover{
  color:var(--gold);
}


/* page indicator */

.work-projects-status{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:1rem;

  margin-top:.8rem;
}

.work-projects-page{
  display:flex;
  gap:.35rem;
  align-items:center;

  font-size:.48rem;
  letter-spacing:.14em;

  color:#8b806f;
}

.work-projects-page strong{
  color:#8d6b37;
}

.work-projects-progress{
  width:140px;
  height:1px;
  overflow:hidden;
  background:var(--line);
}

.work-projects-progress span{
  display:block;
  width:0;
  height:100%;
  background:var(--gold);
  transition:width .25s ease;
}


/* tablet = 2 per group */

@media (max-width:950px){

  .work-projects-grid{
    grid-template-columns:1fr;
    gap:1.5rem;
  }

  .work-project-card{
    flex-basis:calc((100% - .8rem) / 2);
  }

  .work-projects-actions{
    display:flex;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
  }

  .work-projects-controls{
    margin-top:1rem;
  }
}


/* mobile = 1 per group */

@media (max-width:600px){

  .work-project-card{
    flex-basis:100%;
    min-height:205px;
  }

  .work-projects-status{
    justify-content:flex-start;
  }
}

/* =========================================================
   WORK CAROUSEL V3
   Showcase project images prominently
   ========================================================= */

.work-project-card{
  display:flex;
  flex-direction:column;
  min-height:360px;
  padding:0;
  overflow:hidden;
}

.work-project-number{
  position:absolute;
  top:14px;
  left:17px;
  z-index:3;
  margin:0;
  padding:.3rem .45rem;

  background:rgba(255,253,249,.92);
  backdrop-filter:blur(6px);

  font-size:.53rem;
  letter-spacing:.18em;
  color:var(--ink);
}

/* full-width project image */
.work-project-image{
  position:relative;
  top:auto;
  right:auto;

  width:100%;
  height:165px;

  border-radius:0;
  overflow:hidden;
  background:#eee7dc;
  border-bottom:1px solid var(--line);
}

.work-project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  transition:transform .35s ease;
}

.work-project-card:hover .work-project-image img{
  transform:scale(1.02);
}

.work-project-image-placeholder{
  display:grid;
  place-items:center;
  width:100%;
  height:165px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  font-family:var(--serif);
  font-size:2.5rem;
  color:#8c7652;
}

/* card content */
.work-project-type,
.work-project-card h3,
.work-project-card p,
.work-project-explore{
  margin-left:17px;
  margin-right:17px;
}

.work-project-type{
  max-width:none;
  margin-top:1rem;
  margin-bottom:.45rem;
}

.work-project-card h3{
  max-width:none;
  margin-bottom:.55rem;
  font-size:1.3rem;
}

.work-project-card p{
  max-width:none;
  margin-bottom:3rem;
}

.work-project-explore{
  left:17px;
  bottom:15px;
}

/* keep all cards same height */
.work-project-card{
  height:100%;
}

.work-projects-track{
  align-items:stretch;
}

@media (max-width:950px){
  .work-project-image,
  .work-project-image-placeholder{
    height:180px;
  }
}

@media (max-width:600px){
  .work-project-image,
  .work-project-image-placeholder{
    height:190px;
  }
}

/* =========================================================
   WORK CARD META
   Number + type on same line
   ========================================================= */

.work-project-number{
  position:static;
  top:auto;
  left:auto;
  z-index:auto;

  margin:0;
  padding:0;

  background:transparent;
  backdrop-filter:none;

  font-size:.5rem;
  letter-spacing:.18em;
  color:#7f735f;
}

.work-project-meta{
  display:flex;
  align-items:center;
  gap:.7rem;

  margin:1rem 17px .45rem;
}

.work-project-meta .work-project-type{
  margin:0;
  max-width:none;

  font-size:.46rem;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;

  color:#967443;
}

/* =========================================================
   KATALUME TYPOGRAPHY NORMALISATION
   Supporting copy should be genuinely readable.
   Keep numbers / eyebrow labels / metadata intentionally small.
   ========================================================= */

:root{
  --body-copy-size:.84rem;
  --body-copy-line:1.48;
}


/* ---------------------------------------------------------
   STORY
   --------------------------------------------------------- */

.story-copy{
  font-size:var(--body-copy-size);
  line-height:var(--body-copy-line);
}

.concept span{
  font-size:var(--body-copy-size);
  line-height:var(--body-copy-line);
}


/* ---------------------------------------------------------
   HOMEPAGE SERVICES
   --------------------------------------------------------- */

.section-intro p,
.services .service-card p{
  font-size:var(--body-copy-size);
  line-height:var(--body-copy-line);
}


/* ---------------------------------------------------------
   SERVICES PAGE / ACCORDIONS
   --------------------------------------------------------- */

.service-title-group p,
.service-panel-lead p,
.service-panel-grid span,
.service-panel-note,
.services-page-intro,
.service-problem-copy,
.service-offer-card p,
.outcome-item p,
.service-next-grid>div:last-child{
  font-size:var(--body-copy-size);
  line-height:var(--body-copy-line);
}


/* ---------------------------------------------------------
   HOMEPAGE APPROACH
   --------------------------------------------------------- */

.approach-copy>p,
.step p{
  font-size:var(--body-copy-size);
  line-height:var(--body-copy-line);
}


/* ---------------------------------------------------------
   APPROACH PAGE / ACCORDIONS
   --------------------------------------------------------- */

.approach-heading small,
.approach-panel-lead,
.approach-detail-grid span,
.approach-page-intro{
  font-size:var(--body-copy-size);
  line-height:var(--body-copy-line);
}


/* ---------------------------------------------------------
   WORK
   --------------------------------------------------------- */

.work-projects-intro>p,
.work-project-card p,
.work-intro>p,
.work-card p,
.work-summary,
.work-lead,
.work-detail-grid span{
  font-size:var(--body-copy-size);
  line-height:var(--body-copy-line);
}


/* ---------------------------------------------------------
   INSIGHTS
   --------------------------------------------------------- */

.article p,
.insight-lead,
.insight-detail-grid span,
.insight-note{
  font-size:var(--body-copy-size);
  line-height:var(--body-copy-line);
}


/* ---------------------------------------------------------
   ABOUT
   --------------------------------------------------------- */

.about-copy p,
.about-kata-copy,
.about-technology-copy,
.influence-card p,
.name-card span,
.method-card p{
  font-size:var(--body-copy-size);
  line-height:var(--body-copy-line);
}


/* ---------------------------------------------------------
   CONTACT
   --------------------------------------------------------- */

.contact-copy{
  font-size:var(--body-copy-size);
  line-height:var(--body-copy-line);
}


/* ---------------------------------------------------------
   MOBILE
   Don't shrink readable copy again.
   --------------------------------------------------------- */

@media (max-width:760px){

  :root{
    --body-copy-size:.88rem;
    --body-copy-line:1.5;
  }

}

/* LET'S TALK — PHONE ICON */
a[href*="wa.me/23055392488"]{
    display:inline-flex;
    align-items:center;
    gap:.7rem;
}

.lets-talk-phone{
    width:1rem;
    height:1rem;
    flex:0 0 auto;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}



/* =========================================================
   MOBILE / PWA BOTTOM NAVIGATION
   ========================================================= */

.mobile-bottom-nav{
    display:none;
}

@media (max-width:760px){

    /*
     * Mobile behaves like an app shell.
     * The traditional website footer is replaced by bottom nav.
     */
    .site-footer{
        display:none;
    }

    body{
        padding-bottom:
            calc(
                72px +
                env(safe-area-inset-bottom, 0px)
            );
    }

    .mobile-bottom-nav{
        position:fixed;
        z-index:90;

        left:0;
        right:0;
        bottom:0;

        display:grid;
        grid-template-columns:repeat(5,1fr);
        align-items:end;

        min-height:
            calc(
                68px +
                env(safe-area-inset-bottom, 0px)
            );

        padding:
            7px
            7px
            calc(
                6px +
                env(safe-area-inset-bottom, 0px)
            );

        background:rgba(250,247,240,.97);
        border-top:1px solid rgba(19,35,49,.12);

        box-shadow:
            0 -8px 28px rgba(19,35,49,.08);

        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
    }

    .mobile-bottom-nav-item{
        position:relative;

        min-width:0;
        min-height:52px;

        display:flex !important;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:4px;

        padding:4px 2px;

        color:#65717a;

        font-size:.59rem;
        font-weight:650;
        line-height:1;
        letter-spacing:.01em;

        text-align:center;

        -webkit-tap-highlight-color:transparent;
    }

    .mobile-bottom-nav-item > svg{
        width:20px;
        height:20px;

        fill:none;
        stroke:currentColor;

        stroke-width:1.6;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    .mobile-bottom-nav-item span{
        white-space:nowrap;
    }

    .mobile-bottom-nav-item.is-active{
        color:var(--ink);
    }

    .mobile-bottom-nav-item.is-active::after{
        content:"";

        position:absolute;
        left:50%;
        bottom:0;

        width:16px;
        height:2px;

        transform:translateX(-50%);

        border-radius:999px;
        background:var(--gold);
    }

    /*
     * Clarity is the primary app action.
     */
    .mobile-bottom-nav-primary{
        color:#8a6a37;
    }

    .mobile-bottom-nav-primary-icon{
        width:42px;
        height:42px;

        margin-top:-24px;
        margin-bottom:1px;

        display:grid;
        place-items:center;

        border-radius:50%;

        background:var(--ink);
        color:#faf7f0;

        border:3px solid var(--paper);

        box-shadow:
            0 6px 18px rgba(19,35,49,.22);
    }

    .mobile-bottom-nav-primary-icon svg{
        width:19px;
        height:19px;

        fill:none;
        stroke:currentColor;

        stroke-width:1.5;
        stroke-linecap:round;
    }

    .mobile-bottom-nav-primary.is-active{
        color:#8a6a37;
    }

    /*
     * Prevent anchor jumps from disappearing under the
     * sticky header or fixed bottom navigation.
     */
    :target{
        scroll-margin-top:85px;
        scroll-margin-bottom:90px;
    }
}



/* =========================================================
   FOOTER — REAL KATALUME LOGO
   ========================================================= */

.footer-brand{
    display:inline-flex;
    align-items:center;
    width:max-content;
}

.footer-brand-logo{
    display:block;
    width:170px;
    height:auto;
    object-fit:contain;
}

@media (max-width:760px){

    .footer-brand-logo{
        width:160px;
    }
}



/* =========================================================
   FOOTER LEGAL LINKS
   ========================================================= */

.footer-legal-links{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
}

.footer-legal-links button{
    appearance:none;
    border:0;
    padding:0;
    background:transparent;
    color:inherit;
    font:inherit;
    cursor:pointer;
}

.footer-legal-links button:hover,
.footer-legal-links button:focus-visible{
    color:var(--ink);
    text-decoration:underline;
    text-underline-offset:3px;
}


/* =========================================================
   LEGAL MODAL
   ========================================================= */

.legal-modal{
    position:fixed;
    inset:0;
    z-index:200;

    display:none;
    place-items:center;

    padding:24px;
}

.legal-modal.is-open{
    display:grid;
}

.legal-modal-backdrop{
    position:absolute;
    inset:0;

    background:rgba(19,35,49,.62);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.legal-modal-panel{
    position:relative;
    z-index:1;

    width:min(760px,100%);
    max-height:min(82vh,760px);
    overflow:auto;

    padding:38px 42px 40px;

    background:var(--paper-2);
    color:var(--ink);

    border:1px solid var(--line);

    box-shadow:
        0 24px 70px rgba(19,35,49,.22);
}

.legal-modal-close{
    position:absolute;
    top:14px;
    right:16px;

    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border:0;
    background:transparent;

    color:var(--ink);

    font-size:1.65rem;
    line-height:1;

    cursor:pointer;
}

.legal-modal-eyebrow{
    margin-bottom:.8rem;

    color:#8a6a37;

    font-size:.58rem;
    font-weight:700;

    letter-spacing:.22em;
    text-transform:uppercase;
}

.legal-modal h2{
    margin:0 0 1.5rem;

    font-family:var(--serif);
    font-size:clamp(2rem,4vw,3.2rem);
    font-weight:500;
    line-height:1;
}

.legal-modal-content{
    color:#52616b;

    font-family:var(--serif);
    font-size:.95rem;
    line-height:1.6;
}

.legal-modal-content h3{
    margin:1.6rem 0 .45rem;

    color:var(--ink);

    font-family:var(--serif);
    font-size:1.18rem;
    font-weight:500;
}

.legal-modal-content p{
    margin:0 0 .9rem;
}

.legal-modal-content ul{
    margin:.6rem 0 1rem;
    padding-left:1.25rem;
}

.legal-modal-content a{
    color:#8a6a37;
    text-decoration:underline;
    text-underline-offset:3px;
}

body.legal-modal-open{
    overflow:hidden;
}


/* =========================================================
   MOBILE LEGAL ACCESS
   Footer is hidden on mobile, so legal links remain available.
   ========================================================= */

.mobile-legal-links{
    display:none;
}

@media (max-width:760px){

    .legal-modal{
        padding:14px;
    }

    .legal-modal-panel{
        max-height:86vh;
        padding:32px 24px 30px;
    }

    .mobile-legal-links{
        position:fixed;
        z-index:89;

        right:12px;
        bottom:
            calc(
                72px +
                env(safe-area-inset-bottom, 0px)
            );

        display:flex;
        gap:.55rem;

        padding:.38rem .55rem;

        background:rgba(250,247,240,.94);
        border:1px solid rgba(19,35,49,.08);
        border-radius:999px;

        backdrop-filter:blur(10px);
    }

    .mobile-legal-links button{
        border:0;
        padding:0;

        background:transparent;
        color:#7b858a;

        font-size:.5rem;

        cursor:pointer;
    }
}



/* =========================================================
   HEADER NAV — HOVER / ACTIVE GOLD LINE
   ========================================================= */

.nav-links a{
    position:relative;
    padding:.35rem 0;
}

.nav-links a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-4px;

    width:0;
    height:2px;

    background:var(--gold);

    transform:translateX(-50%);

    transition:
        width .18s ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after{
    width:20px;
}

.nav-links a.is-active::after{
    width:20px;
}

.nav-links a.is-active{
    color:var(--ink);
}



/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-page-hero{
    padding:58px 0 52px;
    background:var(--paper-2);
    border-bottom:1px solid var(--line);
}

.contact-page-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:4rem;
    align-items:end;
}

.contact-page-hero h1{
    margin:.7rem 0 1.2rem;
}

.contact-page-lead{
    max-width:620px;
    margin:0;

    font-family:var(--serif);
    font-size:1.05rem;
    line-height:1.55;
    color:#53616a;
}

.contact-direct{
    display:grid;
    gap:1rem;
}

.contact-direct > div{
    padding:1rem 0;
    border-top:1px solid var(--line);
}

.contact-direct span{
    display:block;
    margin-bottom:.25rem;

    font-size:.53rem;
    font-weight:700;
    letter-spacing:.17em;
    text-transform:uppercase;

    color:#8a724d;
}

.contact-direct a{
    font-family:var(--serif);
    font-size:1.05rem;
}

.contact-page-form-section{
    padding:52px 0 60px;
    background:#faf7f0;
}

.contact-form-layout{
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    gap:4rem;
    align-items:start;
}

.contact-form-layout h2{
    margin:.7rem 0 1rem;

    font-family:var(--serif);
    font-size:clamp(2rem,3.5vw,3.5rem);
    font-weight:500;
    line-height:.98;
}

.contact-form-layout > div:first-child > p{
    max-width:370px;

    font-family:var(--serif);
    color:#5c6870;
}

.contact-form{
    position:relative;
}

.contact-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}

.contact-form label{
    display:block;
}

.contact-form label > span{
    display:block;
    margin-bottom:.4rem;

    font-size:.56rem;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;

    color:#6f6758;
}

.contact-form input,
.contact-form textarea{
    width:100%;

    padding:.9rem 1rem;

    border:1px solid var(--line);
    border-radius:0;

    background:var(--paper-2);
    color:var(--ink);

    font:inherit;

    outline:none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:var(--gold);

    box-shadow:
        0 0 0 3px rgba(201,154,77,.11);
}

.contact-message-field{
    margin-top:1rem;
}

.contact-form textarea{
    resize:vertical;
    min-height:180px;
}

.contact-form-submit{
    display:flex;
    align-items:center;
    gap:1.3rem;

    margin-top:1.2rem;
}

.contact-form-submit p{
    max-width:460px;
    margin:0;

    color:#7a8388;
    font-size:.68rem;
    line-height:1.45;
}

.contact-errors{
    margin-bottom:1.2rem;
    padding:1rem 1.1rem;

    border-left:3px solid var(--gold);
    background:#fffdf8;

    font-size:.8rem;
}

.contact-errors ul{
    margin:.5rem 0 0;
    padding-left:1.2rem;
}

.contact-honeypot{
    position:absolute !important;
    left:-10000px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}


/* Contact success modal */

.contact-success-modal{
    position:fixed;
    inset:0;
    z-index:220;

    display:none;
    place-items:center;

    padding:20px;
}

.contact-success-modal.is-open{
    display:grid;
}

.contact-success-backdrop{
    position:absolute;
    inset:0;

    background:rgba(19,35,49,.62);

    backdrop-filter:blur(7px);
}

.contact-success-panel{
    position:relative;
    z-index:1;

    width:min(620px,100%);

    padding:38px 42px;

    background:var(--paper-2);
    border:1px solid var(--line);

    box-shadow:
        0 24px 70px rgba(19,35,49,.22);
}

.contact-success-panel h2{
    margin:.6rem 0 1rem;

    font-family:var(--serif);
    font-size:clamp(2rem,4vw,3.4rem);
    font-weight:500;
}

.contact-success-panel p{
    margin:0 0 1.5rem;

    font-family:var(--serif);
    color:#59666f;
    font-size:1rem;
    line-height:1.55;
}


@media (max-width:900px){

    .contact-page-grid,
    .contact-form-layout{
        grid-template-columns:1fr;
        gap:2rem;
    }
}


@media (max-width:620px){

    .contact-page-hero,
    .contact-page-form-section{
        padding:34px 0;
    }

    .contact-form-grid{
        grid-template-columns:1fr;
    }

    .contact-form-submit{
        align-items:flex-start;
        flex-direction:column;
    }
}


/* =========================================================
   CONTACT FORM — WORD COUNTER / FEEDBACK MODAL
   ========================================================= */

.contact-word-requirement{
    margin-left:.45rem;

    color:#9a8055;

    font-size:.48rem;
    font-weight:500;
    letter-spacing:.05em;
    text-transform:none;
}

.contact-word-counter{
    display:flex;
    justify-content:flex-end;

    margin-top:.4rem;

    color:#9b6d55;

    font-size:.62rem;
    line-height:1.3;

    transition:color .18s ease;
}

.contact-word-counter.is-valid{
    color:#657a62;
}


/* Feedback modal */

.contact-feedback-modal{
    position:fixed;
    inset:0;
    z-index:240;

    display:none;
    place-items:center;

    padding:20px;
}

.contact-feedback-modal.is-open{
    display:grid;
}

.contact-feedback-backdrop{
    position:absolute;
    inset:0;

    background:rgba(19,35,49,.62);

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.contact-feedback-panel{
    position:relative;
    z-index:1;

    width:min(620px,100%);
    max-height:84vh;
    overflow:auto;

    padding:38px 42px;

    background:var(--paper-2);
    color:var(--ink);

    border:1px solid var(--line);

    box-shadow:
        0 24px 70px rgba(19,35,49,.22);
}

.contact-feedback-close{
    position:absolute;

    top:14px;
    right:16px;

    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border:0;
    background:transparent;

    color:var(--ink);

    font-size:1.65rem;
    line-height:1;

    cursor:pointer;
}

.contact-feedback-panel h2{
    margin:.65rem 0 1rem;

    font-family:var(--serif);
    font-size:clamp(2rem,4vw,3.2rem);
    font-weight:500;
    line-height:1;
}

.contact-feedback-copy{
    margin-bottom:1.5rem;

    color:#59666f;

    font-family:var(--serif);
    font-size:.95rem;
    line-height:1.55;
}

.contact-feedback-copy p{
    margin:0;
}

.contact-feedback-copy ul{
    margin:0;
    padding-left:1.3rem;
}

.contact-feedback-copy li{
    margin-bottom:.55rem;
}

body.contact-feedback-open{
    overflow:hidden;
}

.contact-form button[disabled]{
    opacity:.65;
    cursor:wait;
}


@media (max-width:620px){

    .contact-feedback-panel{
        padding:34px 24px 28px;
    }

    .contact-word-requirement{
        display:block;
        margin:.25rem 0 0;
    }
}


/* =========================================================
   WORK PORTFOLIO
   ========================================================= */

.work-portfolio{
    padding:58px 0 64px;
    background:var(--paper);
    border-top:1px solid var(--line);
}

.work-portfolio-heading{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:4rem;
    align-items:end;

    margin-bottom:2rem;
}

.work-portfolio-heading h2{
    margin:.55rem 0 0;

    font-family:var(--serif);
    font-size:clamp(2rem,3.6vw,3.6rem);
    font-weight:500;
    line-height:.98;
    letter-spacing:-.025em;
}

.work-portfolio-heading > p{
    max-width:620px;
    margin:0;

    color:#59666e;

    font-family:var(--serif);
    font-size:1rem;
    line-height:1.5;
}

.work-portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.3rem;
}

.work-portfolio-card{
    position:relative;

    display:flex;
    flex-direction:column;

    min-width:0;

    background:var(--paper-2);

    border:1px solid var(--line);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.work-portfolio-card::before{
    content:"";

    position:absolute;
    left:0;
    right:0;
    top:-1px;

    height:2px;

    background:var(--gold);

    transform:scaleX(0);
    transform-origin:left center;

    transition:transform .2s ease;
}

.work-portfolio-card:hover{
    transform:translateY(-3px);
    border-color:var(--gold-soft);

    box-shadow:
        0 14px 34px rgba(19,35,49,.06);
}

.work-portfolio-card:hover::before{
    transform:scaleX(1);
}

.work-portfolio-image-link{
    display:block;

    padding:1rem 1rem 0;

    overflow:hidden;
}

.work-portfolio-image-link img{
    width:100%;
    aspect-ratio:16/10;

    object-fit:cover;
    object-position:top center;

    background:#fff;

    border:1px solid rgba(19,35,49,.06);

    transition:transform .3s ease;
}

.work-portfolio-card:hover
.work-portfolio-image-link img{
    transform:scale(1.012);
}

.work-portfolio-body{
    display:flex;
    flex-direction:column;
    flex:1;

    padding:1.15rem 1.15rem 1.25rem;
}

.work-portfolio-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.35rem;

    margin-bottom:.55rem;

    color:#947343;

    font-size:.49rem;
    font-weight:700;

    letter-spacing:.14em;
    text-transform:uppercase;
}

.work-portfolio-card h3{
    margin:0 0 .55rem;

    font-family:var(--serif);
    font-size:1.45rem;
    font-weight:500;
    line-height:1.05;
}

.work-portfolio-card p{
    margin:0 0 1rem;

    color:#59666e;

    font-family:var(--serif);
    font-size:.85rem;
    line-height:1.48;
}

.work-portfolio-link{
    display:inline-flex;
    align-items:center;
    gap:.4rem;

    width:max-content;

    margin-top:auto;

    color:#8d6b37;

    font-size:.52rem;
    font-weight:700;

    letter-spacing:.14em;
    text-transform:uppercase;
}

.work-portfolio-link span{
    font-size:.8rem;

    transition:transform .18s ease;
}

.work-portfolio-link:hover span{
    transform:translateX(3px);
}


/* Featured first row gets slightly stronger treatment */

.work-portfolio-card.is-featured{
    background:#fffdf8;
}


@media (max-width:1040px){

    .work-portfolio-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


@media (max-width:760px){

    .work-portfolio{
        padding:38px 0 42px;
    }

    .work-portfolio-heading{
        grid-template-columns:1fr;
        gap:1rem;

        margin-bottom:1.4rem;
    }

    .work-portfolio-grid{
        grid-template-columns:1fr;
        gap:1rem;
    }

    .work-portfolio-card h3{
        font-size:1.3rem;
    }
}


/* =========================================================
   WORK CAROUSEL — PAUSE / PLAY
   ========================================================= */

.work-projects-toggle svg{
    width:14px;
    height:14px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.work-projects-toggle
.work-projects-play-icon{
    fill:currentColor;
    stroke:none;
}

.work-projects-toggle[aria-pressed="true"]{
    background:var(--gold);
    border-color:var(--gold);
    color:#fff;
}

.work-projects-toggle svg[hidden]{
    display:none;
}


/* =========================================================
   KATALUMÉ — LIVE FOOTER WORDMARK
   Technical asset names remain unaccented.
   ========================================================= */

.footer-brand{
    display:inline-flex;
    align-items:center;
    gap:.8rem;
    text-decoration:none;
}

.footer-brand-mark{
    width:58px;
    height:58px;
    object-fit:contain;
    flex:0 0 auto;
}

.footer-brand-copy{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.footer-brand-name{
    font-family:var(--serif);
    font-size:2rem;
    font-weight:500;
    letter-spacing:-.025em;
    color:var(--ink);
}

.footer-brand-sub{
    margin-top:.45rem;
    font-size:.52rem;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:#71808a;
}

@media(max-width:640px){

    .footer-brand-mark{
        width:48px;
        height:48px;
    }

    .footer-brand-name{
        font-size:1.7rem;
    }
}


/* =========================================================
   READABILITY POLISH
   Slightly larger header / footer / legal text
   ========================================================= */

/* Header menu items */
.site-header nav a,
.site-header .site-nav a,
.site-header .nav-links a,
.site-header .nav-menu a{
    font-size:1.04rem;
    line-height:1.35;
}

/* Language switcher */
.site-header .languages,
.site-header .languages a,
.site-header .languages span{
    font-size:.92rem;
    line-height:1.35;
}

/* Footer navigation items */
.site-footer nav a,
.site-footer .footer-nav a,
.site-footer .footer-links a,
.site-footer .footer-menu a,
footer nav a{
    font-size:.95rem;
    line-height:1.45;
}

/* Footer side copy / small support text */
.site-footer .footer-copy,
.site-footer .footer-tagline,
.site-footer .footer-note,
.site-footer .footer-right,
.site-footer .footer-left{
    font-size:.92rem;
    line-height:1.5;
}

/* Copyright + privacy / terms / cookies */
.site-footer .footer-meta,
.site-footer .footer-meta a,
.site-footer .footer-legal,
.site-footer .footer-legal a,
.site-footer .policy-links a,
.site-footer .legal-links a,
.site-footer small,
footer small{
    font-size:.82rem;
    line-height:1.5;
}

/* Slightly improve footer spacing so the larger type breathes */
.site-footer .footer-bottom,
.site-footer .footer-meta,
.site-footer .footer-legal{
    gap:.75rem;
}

/* Mobile: keep it readable but not oversized */
@media (max-width: 768px){

    .site-header nav a,
    .site-header .site-nav a,
    .site-header .nav-links a,
    .site-header .nav-menu a{
        font-size:1rem;
    }

    .site-footer nav a,
    .site-footer .footer-nav a,
    .site-footer .footer-links a,
    .site-footer .footer-menu a,
    footer nav a{
        font-size:.92rem;
    }

    .site-footer .footer-copy,
    .site-footer .footer-tagline,
    .site-footer .footer-note,
    .site-footer .footer-right,
    .site-footer .footer-left{
        font-size:.88rem;
    }

    .site-footer .footer-meta,
    .site-footer .footer-meta a,
    .site-footer .footer-legal,
    .site-footer .footer-legal a,
    .site-footer .policy-links a,
    .site-footer .legal-links a,
    .site-footer small,
    footer small{
        font-size:.8rem;
    }
}


/* =========================================================
   COOKIE CONSENT
   ========================================================= */

body.cookie-consent-open{
    overflow:hidden;
}

.cookie-consent{
    position:fixed;
    inset:0;
    z-index:10050;
    display:none;
    align-items:flex-end;
    justify-content:center;
    padding:24px;
    background:rgba(19,35,49,.42);
    backdrop-filter:blur(5px);
}

.cookie-consent.is-open{
    display:flex;
}

.cookie-consent-card{
    width:min(760px,100%);
    max-height:calc(100vh - 48px);
    overflow:auto;
    padding:2rem;
    border:1px solid var(--line);
    background:var(--paper-2);
    box-shadow:0 28px 90px rgba(19,35,49,.22);
}

.cookie-consent-eyebrow{
    margin:0 0 .7rem;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gold);
}

.cookie-consent h2{
    margin:0 0 1rem;
    font-family:var(--serif);
    font-size:clamp(2rem,4vw,3rem);
    font-weight:400;
    line-height:1;
    color:var(--ink);
}

.cookie-consent-intro{
    max-width:640px;
    margin:0;
    color:var(--ink-soft);
    line-height:1.6;
}

.cookie-consent-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1.5rem;
}

.cookie-consent-button,
.cookie-consent-link{
    appearance:none;
    border:1px solid var(--ink);
    border-radius:999px;
    padding:.8rem 1.15rem;
    background:transparent;
    color:var(--ink);
    cursor:pointer;
    font-size:.82rem;
    font-weight:700;
}

.cookie-consent-button-primary{
    background:var(--ink);
    color:#fff;
}

.cookie-consent-link{
    border-color:transparent;
    text-decoration:underline;
    text-underline-offset:3px;
}

.cookie-consent-option{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1.5rem;
    padding:1.1rem 0;
    border-top:1px solid var(--line);
}

.cookie-consent-option:first-of-type{
    margin-top:1.5rem;
}

.cookie-consent-option strong{
    display:block;
    margin-bottom:.3rem;
    font-family:var(--serif);
    font-size:1.15rem;
    font-weight:500;
}

.cookie-consent-option p{
    margin:0;
    color:var(--ink-soft);
    font-size:.86rem;
    line-height:1.5;
}

.cookie-consent-option input{
    width:22px;
    height:22px;
    flex:0 0 auto;
    accent-color:var(--ink);
}

.cookie-consent-required{
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--ink);
    color:#fff;
    font-size:.75rem;
}

.cookie-settings-link{
    appearance:none;
    border:0;
    padding:0;
    background:none;
    color:inherit;
    cursor:pointer;
    font:inherit;
}

@media(max-width:640px){

    .cookie-consent{
        padding:12px;
    }

    .cookie-consent-card{
        padding:1.4rem;
        max-height:calc(100vh - 24px);
    }

    .cookie-consent-actions{
        flex-direction:column;
    }

    .cookie-consent-button,
    .cookie-consent-link{
        width:100%;
        text-align:center;
    }
}


/* =========================================================
   MOBILE / PWA LANGUAGE SWITCH
   Keep EN | FR visible beside the menu toggle.
   ========================================================= */

@media (max-width:1050px){

    .nav-actions{
        display:flex;
        align-items:center;
        gap:.7rem;
    }

    .nav-actions .languages{
        display:flex;
        align-items:center;
        gap:.38rem;
        font-size:.78rem;
        font-weight:650;
        letter-spacing:.07em;
        white-space:nowrap;
    }

    .nav-actions .languages a{
        opacity:.65;
    }

    .nav-actions .languages a:hover,
    .nav-actions .languages a:focus{
        opacity:1;
    }

    .nav-actions .languages [aria-current="page"]{
        color:var(--ink);
        font-weight:700;
    }

    /* Keep CTA hidden at smaller widths */
    .nav-actions .btn{
        display:none;
    }

    .menu-toggle{
        display:block;
    }
}


@media (max-width:520px){

    .nav-actions{
        gap:.55rem;
    }

    .nav-actions .languages{
        font-size:.74rem;
        gap:.3rem;
    }
}