/* ============================================================
   FONTS  (all self hosted, no external requests)
   ============================================================ */
@font-face{font-family:'Perandory';src:url('fonts/Perandory-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Perandory Semi';src:url('fonts/Perandory-Semi-Condensed.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Perandory Cond';src:url('fonts/Perandory-Condensed.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url('fonts/jakarta-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url('fonts/jakarta-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url('fonts/jakarta-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url('fonts/jakarta-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ============================================================
   TOKENS
   Taken directly from the original Quanturra stylesheet.
   --navy  was --bg-1        #223e4a
   --slate was --bg-1-2      #48626c
   --gold  was --bg-2        #d8a876
   --peach was --heading-light #ffd6ac
   --cream was the light type colour, not a background
   ============================================================ */
:root{
  --navy:#223e4a;
  --navy-deep:#1a2c33;
  --slate:#48626c;
  --gold:#d8a876;
  --peach:#ffd6ac;
  --cream:#fff9e9;
  --on-navy:#c4d5db;     /* 7.5:1 on navy  */
  --on-slate:#e8eef0;    /* 5.5:1 on slate */

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --maxw:1180px;
  --sect-y:clamp(3.5rem,6.5vw,5.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* The nav is sticky, so anchor jumps would otherwise land the heading under it. */
:target,[id]{scroll-margin-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--navy);color:var(--on-navy);
  font-family:'Jakarta',system-ui,sans-serif;
  font-size:clamp(1rem,0.97rem + 0.15vw,1.0625rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

/* ------------------------------------------------------------
   DISPLAY TYPE
   All caps. Caps have no ascenders or descenders to separate
   the lines, so they need positive tracking and loose leading.
   Condensed is reserved for the hero. Sections use Regular.
   ------------------------------------------------------------ */
.display{
  font-family:'Perandory','Perandory Semi',serif;
  text-transform:uppercase;font-weight:400;
  line-height:1.08;letter-spacing:0.035em;margin:0;color:var(--cream);
}
.display--hero{
  font-family:'Perandory Cond','Perandory',serif;
  line-height:1.02;letter-spacing:0.045em;
}
.display em{font-style:normal;color:var(--gold)}
.sect--slate .display em{color:var(--peach)}

/* ---- Signature: the tall rounded slot inside the Quanturra Q ---- */
.slot{
  display:inline-block;width:5px;height:1.15em;border-radius:99px;
  background:var(--gold);vertical-align:-0.2em;margin-right:0.7rem;flex:none;
}
.eyebrow{
  display:flex;align-items:center;
  font-size:0.9375rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--peach);margin:0 0 1.1rem;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:50;background:var(--navy);
  border-bottom:1px solid rgba(255,249,233,.12)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:0.5rem}
.nav__logo{height:54px;width:auto}
.nav__links{display:flex;gap:clamp(0.85rem,2.2vw,1.85rem);align-items:center}
.nav__links a{
  color:var(--cream);text-decoration:none;font-size:0.8125rem;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;padding-block:0.4rem;
  border-bottom:2px solid transparent;transition:border-color .2s,color .2s;
}
.nav__links a:hover,.nav__links a:focus-visible{color:#fff;border-bottom-color:var(--gold)}
@media (max-width:760px){.nav__links a:not(.nav__cta){display:none}}
.nav__cta{color:var(--gold) !important}

/* ============================================================
   HERO
   Swirl one. Navy dominant with the tan sweeping in lower right,
   so the overlay is heaviest on the left where the type sits.
   ============================================================ */
.hero{
  position:relative;overflow:hidden;color:var(--cream);
  background:
    linear-gradient(100deg, rgba(34,62,74,.95) 0%, rgba(34,62,74,.86) 42%, rgba(34,62,74,.42) 100%),
    url('images/swirl-1-1600.webp') center/cover no-repeat,
    var(--navy);
  padding-block:clamp(3.5rem,7.5vw,6.25rem) clamp(3.25rem,7vw,5.5rem);
}
@media (max-width:900px){
  .hero{background:
    linear-gradient(170deg, rgba(34,62,74,.93) 0%, rgba(34,62,74,.78) 100%),
    url('images/swirl-1-800.webp') center/cover no-repeat,
    var(--navy);}
}
.hero__mark{
  position:absolute;pointer-events:none;user-select:none;
  right:clamp(1rem,4vw,4.5rem);top:50%;transform:translateY(-50%);
  width:min(400px,30vw);opacity:1;
}
@media (max-width:1080px){.hero__mark{display:none}}
.hero__in{position:relative;z-index:1;max-width:52rem}
.hero h1{font-size:clamp(2.5rem,8vw,6.25rem);color:var(--cream);margin:0 0 1.4rem}
.hero__lede{
  font-size:clamp(1.0625rem,1rem + 0.35vw,1.25rem);
  line-height:1.6;color:var(--on-navy);max-width:40rem;margin:0 0 1.75rem;
}
.btn{
  display:inline-flex;align-items:center;gap:0.7rem;
  background:var(--gold);color:#17242a;font-weight:700;
  font-size:0.9375rem;letter-spacing:0.02em;padding:0.9rem 1.6rem;border-radius:2px;
  text-decoration:none;border:none;cursor:pointer;
  transition:background .2s,transform .2s,opacity .2s;
}
.btn:hover,.btn:focus-visible{background:var(--peach);transform:translateY(-1px)}
.btn[disabled]{opacity:.55;cursor:default;transform:none}

/* ============================================================
   SECTIONS
   Rhythm comes from navy against slate, two swirl backed
   sections, and different card treatments, not from light
   against dark.
   ============================================================ */
.sect{padding-block:var(--sect-y);background:var(--navy)}
.sect--slate{background:var(--slate);color:var(--on-slate)}
.sect__head{max-width:48rem;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.sect__head h2{font-size:clamp(1.875rem,4.2vw,3rem);margin:0 0 1rem}
.sect__head p{margin:0;font-size:1.0625rem;font-weight:500;line-height:1.6;color:var(--on-navy)}
.sect--slate .sect__head p{color:var(--on-slate)}

/* ---- The practice: the one non grid section ---- */
.about{padding-block:clamp(3.75rem,7vw,6rem);background:var(--navy)}
.about__in{max-width:62rem}
.about__lead{
  font-family:'Perandory','Perandory Semi',serif;text-transform:uppercase;
  font-size:clamp(1.625rem,3.6vw,2.625rem);line-height:1.1;letter-spacing:0.035em;
  color:var(--cream);margin:0 0 clamp(1.75rem,3vw,2.5rem);max-width:26ch;
}
.about__lead em{font-style:normal;color:var(--gold)}
.about__body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);max-width:56rem}
@media (max-width:760px){.about__body{grid-template-columns:1fr;gap:1.25rem}}
.about__body p{margin:0;color:var(--on-navy);font-size:1.0625rem;line-height:1.7}

/* ---- Capability cards: on slate, so panels sit darker ---- */
.svc{display:grid;gap:1.25rem;grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){.svc{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.svc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.svc{grid-template-columns:1fr}}
.svc__item{
  background:rgba(26,44,51,.46);
  border:1px solid rgba(255,249,233,.12);
  border-top:4px solid var(--gold);
  padding:clamp(1.25rem,2vw,1.6rem);
  transition:transform .2s,background .2s,border-top-color .2s;
}
.svc__item:hover{transform:translateY(-3px);background:rgba(26,44,51,.62);border-top-color:var(--peach)}
.svc__item h3{
  font-family:'Jakarta',sans-serif;font-size:1rem;font-weight:700;
  letter-spacing:-0.01em;color:var(--cream);margin:0 0 0.55rem;line-height:1.3;
}
.svc__item p{margin:0;font-size:0.9063rem;line-height:1.6;color:var(--on-slate)}

/* ---- Situations: on navy, deliberately unboxed so it reads
        differently from the two card grids around it ---- */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem clamp(2rem,5vw,3.5rem)}
@media (max-width:820px){.cases{grid-template-columns:1fr;gap:1.5rem}}
.case{border-top:2px solid var(--gold);padding-top:1.1rem}
@media (min-width:821px){.case:last-child{grid-column:1 / -1;max-width:calc(50% - clamp(1rem,2.5vw,1.75rem))}}
.case__n{
  font-family:'Jakarta',sans-serif;font-weight:700;font-size:0.875rem;
  letter-spacing:0.12em;color:var(--gold);display:block;margin-bottom:0.5rem;
}
.case h3{
  font-family:'Jakarta',sans-serif;font-size:1.0625rem;font-weight:700;
  letter-spacing:0.01em;text-transform:uppercase;line-height:1.3;
  color:var(--cream);margin:0 0 0.6rem;
}
.case p{margin:0;font-size:0.9375rem;line-height:1.6;color:var(--on-navy)}
.cases__close{
  margin:clamp(2.25rem,4.5vw,3rem) 0 0;
  padding-top:1.5rem;border-top:1px solid rgba(255,249,233,.16);
  font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.6;
  color:var(--cream);font-weight:600;max-width:52rem;
}

/* ---- Approach steps: on slate ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{
  background:rgba(26,44,51,.46);border:1px solid rgba(255,249,233,.12);
  border-top:4px solid var(--gold);padding:clamp(1.4rem,2.4vw,1.75rem);
}
.step__n{
  font-family:'Jakarta',sans-serif;font-weight:700;font-size:1.75rem;
  letter-spacing:0.04em;color:var(--gold);line-height:1;display:block;margin-bottom:0.75rem;
}
.step h3{
  font-family:'Jakarta',sans-serif;font-size:0.9375rem;font-weight:700;
  letter-spacing:0.09em;text-transform:uppercase;color:var(--cream);margin:0 0 0.6rem;
}
.step p{margin:0;font-size:0.9375rem;line-height:1.55;color:var(--on-slate)}

/* ============================================================
   RESULTS
   Swirl two. Tan dominant, so it takes a much heavier navy
   overlay than the hero. The numbers are the primary element.
   ============================================================ */
.band{
  padding-block:clamp(3.5rem,6vw,5rem);color:var(--cream);
  background:
    linear-gradient(165deg, rgba(34,62,74,.90) 0%, rgba(34,62,74,.84) 55%, rgba(34,62,74,.89) 100%),
    url('images/swirl-2-1600.webp') center/cover no-repeat,
    var(--navy);
  border-block:1px solid rgba(255,249,233,.14);
}
@media (max-width:900px){
  .band{background:
    linear-gradient(165deg, rgba(34,62,74,.91), rgba(34,62,74,.86)),
    url('images/swirl-2-800.webp') center/cover no-repeat,
    var(--navy);}
}
.band__head{
  font-family:'Perandory','Perandory Semi',serif;text-transform:uppercase;
  font-size:clamp(1.375rem,2.8vw,2.125rem);line-height:1.15;letter-spacing:0.05em;
  color:var(--cream);margin:0 0 clamp(2rem,4vw,2.75rem);
}
.band__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.75rem,4vw,3rem)}
@media (max-width:820px){.band__grid{grid-template-columns:1fr;gap:1.75rem}}
.band__item{border-top:3px solid var(--gold);padding-top:1.1rem}
.band__n{
  font-family:'Perandory Cond','Perandory',serif;
  font-size:clamp(3.75rem,8vw,6rem);line-height:0.9;letter-spacing:0.01em;
  color:var(--gold);display:block;margin-bottom:0.4rem;
}
.band__l{margin:0;font-size:1.0625rem;line-height:1.45;color:var(--cream);font-weight:600}
.band__note{
  margin:clamp(2rem,4vw,2.75rem) 0 0;padding-top:1.1rem;
  border-top:1px solid rgba(255,249,233,.18);
  font-size:0.8125rem;color:var(--on-navy);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--navy);color:var(--cream);padding-block:var(--sect-y)}
.contact__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:940px){.contact__grid{grid-template-columns:1fr;gap:2.5rem}}
.contact h2{font-size:clamp(1.875rem,4.2vw,3rem);margin:0 0 1.1rem}
.contact__copy p{color:var(--on-navy);margin:0 0 1.5rem}
.contact__mail{
  font-family:'Jakarta',sans-serif;font-weight:600;letter-spacing:-0.015em;
  font-size:clamp(1.125rem,2.5vw,1.5rem);color:var(--gold);text-decoration:none;
  border-bottom:2px solid rgba(216,168,118,.4);padding-bottom:.15em;
  transition:border-color .2s,color .2s;
}
.contact__mail:hover,.contact__mail:focus-visible{border-bottom-color:var(--gold);color:var(--peach)}

.form{background:rgba(26,44,51,.55);border:1px solid rgba(255,249,233,.14);padding:clamp(1.4rem,3vw,2rem)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.form__row{grid-template-columns:1fr}}
.field{display:block;margin-bottom:1rem}
.field span{display:block;font-size:0.8125rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--peach);margin-bottom:0.4rem}
.field input,.field textarea{
  width:100%;background:#16272f;border:1px solid rgba(255,249,233,.2);
  color:var(--cream);font-family:inherit;font-size:0.9375rem;
  padding:0.7rem 0.85rem;border-radius:2px;
}
.field textarea{resize:vertical;min-height:7rem}
.field input:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__status{margin:1rem 0 0;font-size:0.9375rem;line-height:1.5;display:none}
.form__status.is-shown{display:block}
.form__status--ok{color:#a9e0c0;border-left:3px solid #6cc796;padding-left:0.85rem}
.form__status--err{color:#f3c0b4;border-left:3px solid #e08a72;padding-left:0.85rem}
.form__status a{color:inherit}
.form.is-sent .form__body{display:none}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--navy);border-top:1px solid rgba(255,249,233,.14);padding-block:1.75rem}
.foot__in{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;justify-content:space-between}
.foot__logo{height:46px;width:auto}
.foot__links{display:flex;gap:1.5rem;flex-wrap:wrap}
.foot__links a{color:var(--on-navy);font-size:0.8125rem;text-decoration:none}
.foot__links a:hover,.foot__links a:focus-visible{color:var(--gold);text-decoration:underline}
.foot__copy{color:#8ba3ac;font-size:0.8125rem;margin:0}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal{padding-block:clamp(2.75rem,5vw,4rem);background:var(--navy)}
.legal__in{max-width:44rem}
.legal h1{font-size:clamp(1.875rem,4.5vw,3rem);color:var(--cream);margin:0 0 0.7rem}
.legal__updated{color:var(--on-navy);font-size:0.875rem;margin:0 0 2rem}
.legal h2{font-family:'Jakarta',sans-serif;font-weight:700;font-size:1.125rem;
  color:var(--peach);margin:2.25rem 0 0.5rem;letter-spacing:-0.01em}
.legal h2:first-of-type{margin-top:0}
.legal p{margin:0 0 1rem;color:var(--on-navy)}
.legal a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.legal__back{display:inline-flex;align-items:center;gap:0.5rem;margin-top:2.25rem;
  padding-top:1.5rem;border-top:1px solid rgba(255,249,233,.16);
  font-size:0.9375rem;font-weight:700;color:var(--cream);text-decoration:none}
.legal__back:hover,.legal__back:focus-visible{color:var(--gold)}

/* ============================================================
   A11Y + MOTION
   ============================================================ */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--gold);color:#17242a;
  padding:.7rem 1.1rem;z-index:100;text-decoration:none;font-weight:700}
.skip:focus{left:1rem;top:1rem}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.svc__item:hover{transform:none}
}