@import url('./fonts/fonts.css');

/* ==========================================================================
   Facumious Intl Ltd
   Single stylesheet for all pages. Edit colors and spacing here only.
   ========================================================================== */

:root{
  /* palette */
  --teal-deep:#0B2E31;
  --teal:#10454A;
  --paper:#F5F2EC;
  --white:#FFFFFF;
  --ink:#12292B;
  --ink-mute:#55686B;
  --copper:#A45A39;        /* text/link/button: WCAG AA on paper and white */
  --copper-lift:#C4744A;
  --ochre:#8F6819;         /* small uppercase labels on paper: WCAG AA */
  --ochre-lift:#D9A93F;
  --line:rgba(11,46,49,.14);
  --line-soft:rgba(11,46,49,.08);
  --line-dark:rgba(240,235,225,.18);
  --paper-dim:rgba(240,235,225,.62);

  /* type */
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,
         'Helvetica Neue',Arial,sans-serif;

  /* measure */
  --shell:1080px;
  --measure:66ch;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%;}
a{color:var(--copper);text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--ink);}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--ochre);
  outline-offset:2px;
}

.shell{max-width:var(--shell);margin:0 auto;padding:0 32px;}
@media(max-width:640px){.shell{padding:0 20px;}}

/* skip link ---------------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ochre-lift);color:var(--teal-deep);
  padding:10px 16px;font-weight:600;z-index:20;
}
.skip:focus{left:0;}

/* ==========================================================================
   Header
   ========================================================================== */
.site-head{background:var(--teal-deep);color:var(--paper);}
.site-head .shell{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:82px;flex-wrap:wrap;
}

.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:inherit;padding:12px 0;}
.brand svg{width:44px;height:auto;display:block;flex:none;}
.brand .word{
  font-size:19px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;line-height:1;
}

.site-nav{display:flex;gap:28px;flex-wrap:wrap;padding:6px 0 14px;}
@media(min-width:721px){.site-nav{padding:0;}}
.site-nav a{
  color:var(--paper-dim);text-decoration:none;
  font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding-bottom:3px;border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--paper);}
.site-nav a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--copper-lift);}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{background:var(--teal-deep);color:var(--paper);padding:76px 0 84px;}
.hero-inner{max-width:none;}
.hero h1{
  font-size:clamp(34px,5.6vw,54px);
  font-weight:600;line-height:1.06;letter-spacing:-.025em;
  margin:0;max-width:17ch;text-wrap:balance;
}
.hero .rule{width:56px;height:3px;background:var(--copper-lift);margin:26px 0 24px;}
.hero p{
  margin:0;max-width:46ch;color:var(--paper-dim);
  font-size:clamp(17px,2.1vw,19.5px);line-height:1.6;
}
@media(max-width:640px){.hero{padding:52px 0 58px;}.hero h1{max-width:none;}}

/* page banner for interior pages ------------------------------------------- */
.banner{background:var(--teal-deep);color:var(--paper);padding:52px 0 56px;}
.banner h1{
  font-size:clamp(30px,4.6vw,42px);font-weight:600;
  line-height:1.1;letter-spacing:-.02em;margin:0;text-wrap:balance;
}
.banner p{margin:18px 0 0;max-width:var(--measure);color:var(--paper-dim);}

.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ochre-lift);margin:0 0 20px;
}
.eyebrow.on-paper{color:var(--ochre);}

/* ==========================================================================
   Sections
   ========================================================================== */
main{display:block;}
.band{padding:70px 0;}
.band.tint{background:var(--white);border-top:1px solid var(--line-soft);
           border-bottom:1px solid var(--line-soft);padding:70px 0;}
@media(max-width:640px){.band,.band.tint{padding:46px 0;}}

.prose{max-width:var(--measure);}
.prose p{margin:0 0 22px;}
.prose p:last-child{margin-bottom:0;}
.lead{font-size:19px;line-height:1.6;}

h2{
  font-size:clamp(23px,3vw,28px);font-weight:600;
  letter-spacing:-.015em;line-height:1.2;margin:0 0 20px;text-wrap:balance;
}
h3{
  font-size:19px;font-weight:600;letter-spacing:-.005em;
  line-height:1.3;margin:0 0 8px;
}

.section-rule{
  border:0;border-top:1px solid var(--line);
  margin:56px 0 44px;
}

/* capability grid ---------------------------------------------------------- */
.caps{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:38px 56px;margin-top:8px;
}
.caps div{display:flex;flex-direction:column;gap:6px;}
.caps h3{margin:0;padding-top:14px;border-top:2px solid var(--copper);}
.caps p{margin:0;color:var(--ink-mute);font-size:15.5px;line-height:1.55;}
@media(max-width:620px){.caps{grid-template-columns:1fr;gap:30px;}}

/* service blocks ----------------------------------------------------------- */
.service{max-width:var(--measure);margin:0 0 48px;}
.service:last-of-type{margin-bottom:0;}
.service h2{margin-bottom:14px;}
.service p{margin:0 0 18px;}
.service p:last-child{margin-bottom:0;}

/* governance / detail panel ------------------------------------------------ */
.panel{
  background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--ochre);
  padding:28px 30px;max-width:var(--measure);
}
.panel h2,.panel h3{margin-top:0;}
.panel p{margin:0 0 16px;}
.panel p:last-child{margin-bottom:0;}

/* identifier rows ---------------------------------------------------------- */
.ident{font-variant-numeric:tabular-nums;letter-spacing:.02em;}
dl.details{
  margin:0;display:grid;grid-template-columns:auto 1fr;
  gap:10px 28px;align-items:baseline;
}
dl.details dt{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute);white-space:nowrap;
}
dl.details dd{margin:0;font-size:16.5px;}
@media(max-width:520px){
  dl.details{grid-template-columns:1fr;gap:2px 0;}
  dl.details dd{margin-bottom:14px;}
}

/* contact blocks ----------------------------------------------------------- */
.contact-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:32px 44px;max-width:var(--measure);
}
.contact-grid h3{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 4px;
}
.contact-grid a{font-size:18px;font-weight:500;}

/* call to action ----------------------------------------------------------- */
.cta{
  display:inline-block;margin-top:30px;
  background:var(--copper);color:var(--paper);
  text-decoration:none;font-weight:600;font-size:15px;
  letter-spacing:.04em;padding:13px 26px;
}
.cta:hover{background:var(--teal-deep);color:var(--paper);}
.hero .cta{margin-top:34px;}

.note{
  font-size:14.5px;line-height:1.6;color:var(--ink-mute);
  max-width:var(--measure);
}
.note h3{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 10px;
}
.note p{margin:0 0 12px;}
.note p:last-child{margin-bottom:0;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot{
  background:var(--teal-deep);color:var(--paper-dim);
  padding:46px 0 42px;font-size:14px;line-height:1.6;
}
.site-foot .shell{display:flex;flex-wrap:wrap;gap:28px 56px;justify-content:space-between;}
.site-foot a{color:var(--paper-dim);}
.site-foot a:hover{color:var(--paper);}
.site-foot .legal{max-width:46ch;}
.site-foot .legal strong{color:var(--paper);font-weight:600;display:block;margin-bottom:6px;}
.site-foot .reg{margin:8px 0 0;}
.site-foot .copy{margin:16px 0 0;color:rgba(240,235,225,.45);font-size:13px;}
.foot-nav{display:flex;flex-direction:column;gap:8px;}
.foot-nav a{
  text-decoration:none;font-size:13px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
}

/* ==========================================================================
   404
   ========================================================================== */
.notfound{padding:90px 0 40px;}
.notfound h1{font-size:clamp(28px,4vw,38px);font-weight:600;letter-spacing:-.02em;margin:0 0 16px;}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}

@media print{
  .site-head,.site-nav,.cta,.foot-nav{display:none;}
  body{background:#fff;color:#000;font-size:11pt;}
  .hero,.banner,.site-foot{background:#fff;color:#000;}
}