/* ==========================================================================
   Koorta Boodjar
   Palette, typography and artwork per Koorta Boodjar Brand Guidelines 2026.
   Layout language per Craig's Capability Statement 2026: cream arcs over
   duotone photography, circular icons, numbered process, the Bidi ribbon.
   Bidi means "path". The artwork is structure, never texture.
   ========================================================================== */

:root{
  /* Official palette, Brand Guidelines p5 */
  --oxford:#0E212F;
  --charcoal:#1D1D1D;
  --gunmetal:#444547;
  --saddle:#754225;
  --peru:#AA6431;
  --scarlet:#DC1B20;      /* logo only */
  --peru-lt:#C98A4B;      /* Peru lightened for small text on Oxford Blue (AA) */
  --white:#FDFDFD;

  /* Present in the Bidi artwork, kept to the artwork.
     Resampled 2 Sep 2026 from the designer's delivered files. */
  --bidi-dark:#744124;
  --bidi-teal:#136295;
  --bidi-olive:#4C603B;

  /* Grounds */
  --bone:#EEE4D7;
  --bone-lt:#F6EFE6;
  --oxford-lt:#16303F;

  /* Spacing scale. Nothing outside this scale. */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:128px;
  --r:14px;             /* panels and cards */
  --r-sm:8px;           /* buttons, small elements */

  --line:rgba(14,33,47,.13);
  --line-warm:rgba(117,66,37,.20);
  --sh-sm:0 2px 10px rgba(14,33,47,.06);
  --sh-md:0 18px 42px -24px rgba(14,33,47,.42);
  --sh-lg:0 34px 70px -30px rgba(14,33,47,.5);
  --nav-h:104px;
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{
  margin:0;background:var(--white);color:var(--charcoal);
  font-family:Tinos,"Times New Roman",Times,serif;
  font-size:19px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:700;line-height:1.14;letter-spacing:-.015em;color:var(--oxford)}
h1,h2{text-wrap:balance}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
a{color:var(--saddle);text-decoration:none}
:focus-visible{outline:3px solid var(--peru);outline-offset:3px;border-radius:3px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:30px;padding-right:30px}
.skip{position:absolute;left:-9999px;background:var(--oxford);color:#fff;padding:12px 20px;z-index:300}
.skip:focus{left:14px;top:14px}

/* UI type: sans, matching the mockup in the guidelines */
.ui{font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.eyebrow{
  font-family:Archivo,sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--saddle);margin:0 0 14px;
}
.eyebrow.centred{text-align:center}
.eyebrow.light{color:var(--peru-lt)}
.sec-oxford .eyebrow{color:var(--peru-lt)}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:sticky;top:0;z-index:200;background:rgba(253,253,253,.97);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line-warm);
  transition:box-shadow .3s ease}
.nav.scrolled{box-shadow:0 6px 26px -16px rgba(14,33,47,.4)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--nav-h);transition:height .3s ease}
.nav.scrolled .nav-in{height:80px}
.nav-logo img{height:76px;width:auto;transition:height .3s ease}
.nav.scrolled .nav-logo img{height:58px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{position:relative;font-family:Archivo,sans-serif;font-size:14.5px;font-weight:600;
  color:#2A3944;padding:9px 0;transition:color .22s ease}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--saddle)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;
  background:var(--peru);transition:width .32s cubic-bezier(.2,.7,.3,1)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.nav-right{display:flex;align-items:center;gap:14px;flex:none}
.nav-tel{font-family:Archivo,sans-serif;font-size:14px;font-weight:600;color:var(--oxford);white-space:nowrap}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  width:46px;height:46px;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle i{display:block;width:20px;height:2px;background:var(--oxford);position:relative}
.nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--oxford)}
.nav-toggle i::before{top:-6px}.nav-toggle i::after{top:6px}

.nav-drop{position:relative}
.nav-drop>a{display:inline-flex;align-items:center;gap:7px}
.nav-drop .cv{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.62;transition:transform .22s ease}
.nav-drop:hover .cv,.nav-drop:focus-within .cv{transform:rotate(180deg)}
.nav-sub{position:absolute;left:-18px;top:100%;margin:0;padding:10px 0;list-style:none;
  min-width:280px;background:#fff;border:1px solid var(--line-warm);border-radius:5px;
  box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:60}
.nav-drop:hover .nav-sub,.nav-drop:focus-within .nav-sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav-sub li{margin:0}
.nav-sub a{display:block;padding:10px 22px;font-family:Archivo,sans-serif;font-size:14.5px;
  font-weight:600;color:var(--oxford);white-space:nowrap}
.nav-sub a::after{display:none}
.nav-sub a:hover{background:var(--bone-lt);color:var(--saddle)}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:Archivo,sans-serif;font-size:14.5px;font-weight:700;line-height:1;
  padding:17px 30px;border-radius:var(--r-sm);border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .26s cubic-bezier(.2,.7,.3,1),background .2s ease,color .2s ease,
             border-color .2s ease,box-shadow .26s ease}
.btn-primary{background:var(--peru);color:#fff;box-shadow:0 10px 24px -14px rgba(170,100,49,.9)}
.btn-primary:hover{background:#96562A;transform:translateY(-2px);
  box-shadow:0 16px 30px -14px rgba(170,100,49,.95),0 0 0 4px rgba(170,100,49,.22)}
.btn-oxford{background:var(--oxford);color:#fff}
.btn-oxford:hover{background:#08161F;transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-ghost{background:#fff;color:var(--oxford);border-color:rgba(14,33,47,.22)}
.btn-ghost:hover{border-color:var(--peru);color:var(--saddle);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-onDark{background:transparent;color:#fff;border-color:rgba(253,253,253,.45)}
.btn-onDark:hover{background:rgba(253,253,253,.12);border-color:#fff;transform:translateY(-2px)}
.btn-sm{padding:13px 24px;font-size:13.5px}
.btn .arw{transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.btn:hover .arw{transform:translateX(4px)}

.tlink{display:inline-flex;align-items:center;gap:9px;font-family:Archivo,sans-serif;
  font-weight:700;font-size:14.5px;color:var(--saddle);position:relative;padding-bottom:4px}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--peru-lt);
  transition:width .32s cubic-bezier(.2,.7,.3,1)}
.tlink:hover::after{width:100%}
.tlink .arw{transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.tlink:hover .arw{transform:translateX(4px)}
.tlink.light{color:var(--peru-lt)}
.sec-oxford .tlink,.darkblock .tlink,.hero-band .tlink{color:var(--peru-lt)}
.sec-oxford .tlink::after,.darkblock .tlink::after,.hero-band .tlink::after{background:var(--peru-lt)}
.sec-oxford .tlink:hover,.darkblock .tlink:hover{color:#fff}

/* ==========================================================================
   BIDI RIBBON
   The ribbon always overhangs both edges; the yarning circle is always whole.
   ========================================================================== */
.bidi{position:relative;width:100%;line-height:0;pointer-events:none;overflow:hidden}
.bidi img{width:100%;height:auto;display:block}

/* ==========================================================================
   HERO — Country First (approved composition: do not change without asking)
   Layered background: the client's photo sits on top of the placeholder,
   so the page never looks broken before images/ is populated.
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--oxford);min-height:min(88vh,820px)}
.hero-media{position:absolute;inset:0;overflow:hidden;background:var(--oxford)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(97deg,rgba(14,33,47,.94) 0%,rgba(14,33,47,.84) 30%,
              rgba(14,33,47,.40) 62%,rgba(14,33,47,.06) 100%)}
.hero-scrim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,33,47,.34) 0%,rgba(14,33,47,0) 34%)}

/* the whole yarning circle rides the ribbon; the Bidi (z6) flows over its
   lower petals. Craig 3 Sep: circles bigger, with variation - .yarn-clear lifts
   the circle fully above the lines, and the home hero carries a second circle
   overlapped more deeply by the ribbon. */
.hero-yarn{position:absolute;right:7%;top:auto;bottom:calc(20vw - 44px);
  width:min(300px,19vw);height:auto;z-index:5;opacity:.95;pointer-events:none}
.hero-yarn2{position:absolute;left:15%;top:auto;bottom:calc(14vw - 60px);
  width:min(190px,12vw);height:auto;z-index:5;opacity:.9;pointer-events:none}
.hero.yarn-big .hero-yarn{width:min(400px,25vw)}
.hero.yarn-clear .hero-yarn{bottom:calc(25vw + 40px);width:min(250px,16vw)}

.hero-in{position:relative;z-index:4;padding-top:158px;
  padding-bottom:max(150px, calc(23vw + 30px))}
.hero-in>*{max-width:840px}
.hero h1{color:#fff;font-size:clamp(35px,4.8vw,58px);line-height:1.08;
  letter-spacing:-.02em}
.hero .lede{color:rgba(253,253,253,.88);font-size:clamp(18px,2vw,21px);line-height:1.62;
  max-width:46ch;margin:26px 0 0}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero-bidi{position:absolute;left:0;right:0;bottom:-1px;z-index:6}
.hero-bidi img{width:100%;height:auto;display:block}
.hero-ack{margin-top:34px;font-family:Archivo,sans-serif;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(253,253,253,.64)}

@media (max-width:900px){
  .hero{min-height:min(80vh,660px)}
  .hero-media img{object-position:center 40%}
  .hero-scrim{background:linear-gradient(180deg,rgba(14,33,47,.52) 0%,rgba(14,33,47,.64) 44%,
              rgba(14,33,47,.84) 100%)}
  .hero-yarn,.hero-yarn2{display:none}
  .hero h1{font-size:clamp(33px,8.4vw,44px);max-width:none}
  .hero .lede{font-size:17.5px;margin-top:18px}
  .hero-btns{margin-top:26px}
  .hero-in{padding-top:110px;padding-bottom:max(150px, calc(26vw + 30px))}
}

/* ==========================================================================
   HERO BAND — the five sector pages and the 404, awaiting photography.
   Composed like the capability statement's dark pages: quiet navy field,
   soft lift of light, the whole yarning circle riding above the ribbon.
   ========================================================================== */
.hero-band{min-height:0;background-color:var(--oxford);
  background-image:radial-gradient(1100px 560px at 76% 8%,var(--oxford-lt) 0%,var(--oxford) 64%)}
.hero-band .hero-media img{object-position:center 38%}
.band-scrim{background:linear-gradient(99deg,rgba(14,33,47,.92) 0%,rgba(14,33,47,.8) 42%,
  rgba(14,33,47,.5) 76%,rgba(14,33,47,.24) 100%)}
.band-scrim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,33,47,.3) 0%,rgba(14,33,47,0) 38%)}
.hero-band .hero-in{padding-top:132px;padding-bottom:max(160px, calc(23vw + 34px))}
.hero-band .hero-in>*{max-width:860px}
.hero-band .lede{max-width:52ch}
.hero-band .hero-yarn{top:auto;right:7%;bottom:calc(16vw - 10px);width:min(280px,17.5vw);
  opacity:.95;z-index:5}
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:22px;
  font-family:Archivo,sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(238,228,215,.6)}
.crumb a{color:var(--peru-lt)}
.crumb a:hover{color:#fff}

/* ==========================================================================
   SECTION SHELLS + RHYTHM
   Rhythm comes from the scale and from varied shapes, not one 96px slab.
   ========================================================================== */
.sec{position:relative;padding:var(--s6) 0}
.sec-tight{padding:var(--s5) 0}
.sec-bone{background:var(--bone)}
.sec-bone-lt{background:var(--bone-lt)}
.sec-oxford{background:var(--oxford);color:rgba(238,228,215,.86)}
.sec-oxford h2,.sec-oxford h3,.sec-oxford h4{color:#fff}
.sec-in{position:relative;z-index:3}

.sechead{margin-bottom:var(--s4)}
.sechead.centred{max-width:56ch;margin-left:auto;margin-right:auto;text-align:center}
.sechead h2{font-size:clamp(27px,3.6vw,42px);line-height:1.12}
.sechead p{margin:18px 0 0;color:var(--gunmetal);font-size:19px}
.sec-oxford .sechead p{color:rgba(238,228,215,.8)}
.sechead .num{font-family:Archivo,sans-serif;font-weight:700;font-size:44px;line-height:1;
  color:var(--peru);margin:0 0 12px}
.sec-oxford .sechead .num{color:var(--peru-lt)}
.sechead .mark-img{margin-top:34px;width:min(340px,88%);height:auto}

/* head on the left, body on the right: the workhorse two-column section.
   .rev mirrors it (head right, body left) so consecutive sections alternate. */
.split{display:grid;grid-template-columns:minmax(0,5.5fr) minmax(0,6.5fr);
  gap:var(--s4) var(--s5);align-items:start}
.split>.sechead{margin-bottom:0}
.split-head{margin-bottom:var(--s4)}
@media (min-width:981px){
  .split-head>.copy{padding-top:46px}
  .split-sticky>.sechead{position:sticky;top:calc(var(--nav-h) + 24px)}
  .split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .split.rev>.sechead{order:2;grid-column:2;grid-row:1}
  .split.rev>:not(.sechead){order:1;grid-column:1;grid-row:1}
}

/* copy */
.copy p{margin:0 0 20px;color:var(--gunmetal);font-size:19px;line-height:1.68}
.copy p:last-child{margin-bottom:0}
.copy.narrow{max-width:68ch}
.split .copy p{max-width:58ch}
.sec-oxford .copy p,.darkblock .copy p{color:rgba(238,228,215,.86)}
.sec-oxford .copy strong,.darkblock .copy strong{color:#fff}

/* intro: a page's opening statement after the hero. Lead line, then columns. */
.intro-lead{font-size:clamp(22px,2.2vw,28px);line-height:1.46;color:var(--oxford);
  max-width:44ch;margin:0;letter-spacing:-.008em}
.intro-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s5);
  margin-top:var(--s4)}
.intro-cols p{margin:0;max-width:52ch;color:var(--gunmetal);font-size:19px;line-height:1.68}
.intro-cols.one{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}

/* bridge: a single connective line between sections, set deliberately */
.bridge{max-width:56ch;margin:0 auto;text-align:center}
.bridge p{margin:0 0 14px;font-size:21px;line-height:1.6;color:var(--oxford)}
.bridge p:last-child{margin-bottom:0}

/* centred closing statement (Safety's commitment) */
.copy.centred{max-width:56ch;margin:0 auto;text-align:center}
.copy.centred p{max-width:none;font-size:21px;color:var(--charcoal)}

/* ==========================================================================
   ROW LIST — trade, scope and verification lists as full-width thin rows:
   numbered, ruled, serif, with the brand dot closing each row. Usually set
   beside a tall duotone photograph (.listsplit); .rev mirrors the layout.
   ========================================================================== */
.rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-warm)}
.rows li{display:flex;align-items:center;gap:28px;padding:15px 6px;
  border-bottom:1px solid var(--line-warm);
  transition:background .22s ease,padding-left .22s ease}
.rows li:hover{background:rgba(246,239,230,.65);padding-left:14px}
.sec-bone-lt .rows li:hover,.sec-bone .rows li:hover{background:#fff}
.rows .rn{font-family:Archivo,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;color:var(--saddle);flex:none;min-width:30px}
.rows .rl{font-family:Archivo,sans-serif;font-weight:600;font-size:17.5px;
  line-height:1.35;color:var(--oxford)}
.rows li::after{content:"";width:9px;height:9px;border-radius:50%;margin-left:auto;
  flex:none;background:var(--peru)}
.rows li:nth-child(5n+2)::after{background:var(--bidi-teal)}
.rows li:nth-child(5n+3)::after{background:var(--bidi-olive)}
.rows li:nth-child(5n+4)::after{background:var(--bidi-dark)}
.rows li:nth-child(5n+5)::after{background:var(--saddle)}
.spec-note{margin:22px 0 0;font-size:17.5px;color:var(--gunmetal)}

.listsplit{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);
  gap:var(--s4) var(--s5);align-items:start}
.listsplit>.lhead{min-width:0}
.listsplit>.lhead .sechead{margin-bottom:0}
.listfig{margin:34px 0 0;position:relative}
.listfig .duo{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-lg)}
.listfig .duo img{width:100%;height:100%;aspect-ratio:4/4.4;object-fit:cover;display:block}
@media (min-width:981px){
  .listsplit>.lhead{position:sticky;top:calc(var(--nav-h) + 24px)}
  .listsplit>:not(.lhead){padding-top:var(--s5)}
  .listsplit.rev>.lhead{order:2}
  .listsplit.rev>:not(.lhead){order:1}
  .listsplit.rev{grid-template-columns:minmax(0,7.5fr) minmax(0,4.5fr)}
}

/* ==========================================================================
   ENQUIRY FORM — Netlify-handled, no backend.
   ========================================================================== */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px 20px}
.form .full{grid-column:1/-1}
.field label{display:block;font-family:Archivo,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gunmetal);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;
  border:1px solid rgba(117,66,37,.32);border-radius:var(--r-sm);background:#fff;
  font-family:Tinos,"Times New Roman",serif;font-size:17.5px;color:var(--charcoal);
  transition:border-color .2s ease,box-shadow .2s ease}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--peru);box-shadow:0 0 0 3px rgba(170,100,49,.18)}
.field textarea{min-height:150px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--saddle) 50%),
  linear-gradient(135deg,var(--saddle) 50%,transparent 50%);
  background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;
  background-size:6px 6px;background-repeat:no-repeat;cursor:pointer}
.form .btn{justify-self:start}
.hp{position:absolute;left:-9999px}

/* ==========================================================================
   MEDIA SPLIT — intro copy beside framed duotone photography.
   Service pages, Careers and Safety, under the hero.
   ========================================================================== */
.msplit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--s5);align-items:center}
.mfig{margin:0;position:relative}
.mfig .duo{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-lg)}
.mfig .duo img{width:100%;height:100%;aspect-ratio:4/3.1;object-fit:cover;display:block}
.msplit p{color:var(--gunmetal);font-size:19px;line-height:1.68;margin:22px 0 0;max-width:56ch}
.msplit p.intro-lead{font-size:clamp(22px,2.2vw,28px);line-height:1.46;letter-spacing:-.008em;
  color:var(--oxford);margin:0;max-width:none}

/* ==========================================================================
   ARC FEATURE — the capability statement signature.
   A great cream circle sweeps over duotone Country photography.
   ========================================================================== */
.arcsplit{position:relative;overflow:hidden;background:var(--oxford)}
.arcsplit .sec-bidi-top{margin-bottom:0;z-index:2}
.arc-media{position:absolute;inset:0;background:var(--oxford)}
.arc-media img{width:100%;height:100%;object-fit:cover;object-position:70% 42%}
.arc-circle{position:absolute;top:50%;left:calc(58% - 1900px);transform:translateY(-50%);
  width:1900px;height:1900px;border-radius:50%;background:var(--bone-lt);
  box-shadow:0 0 0 14px rgba(246,239,230,.14),0 0 90px rgba(3,14,22,.5)}
.arc-in{position:relative;z-index:3;padding-top:var(--s7);padding-bottom:var(--s7)}
.arcsplit.rev .arc-circle{left:auto;right:calc(58% - 1900px)}
.arcsplit.rev .arc-copy{margin-left:auto}
.arc-copy{max-width:47%}
.arc-copy .copy p{max-width:52ch}
.arc-copy .tlink{margin-top:10px}
@media (max-width:1240px){.arc-copy{max-width:54%}}
@media (max-width:900px){
  .arcsplit{background:var(--bone-lt)}
  .arc-circle{display:none}
  .arc-media{position:relative;inset:auto;height:280px;order:2}
  .arc-media img{opacity:.92}
  .arcsplit{display:flex;flex-direction:column}
  .arc-in{padding-top:var(--s5);padding-bottom:var(--s5)}
  .arc-copy{max-width:none}
}

/* ==========================================================================
   SECTOR CARDS — five capabilities, circular icons, capability statement p6.
   ========================================================================== */
.cards{display:grid;gap:20px}
.cards-5{grid-template-columns:repeat(5,1fr)}
.card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line-warm);
  border-radius:var(--r);padding:30px 24px 26px;display:flex;flex-direction:column;
  transition:transform .34s cubic-bezier(.2,.7,.3,1),box-shadow .34s ease,border-color .28s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:rgba(117,66,37,.42)}
.sec-bone .card,.sec-bone-lt .card{background:#fff}
.card .ic{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;flex:none;background:var(--oxford);color:var(--peru-lt)}
.card .ic svg{width:30px;height:30px}
.card h3{font-size:21px;line-height:1.22;margin-bottom:10px}
.card p{font-size:15.5px;line-height:1.6;color:var(--gunmetal);margin:0 0 20px}
.card .tlink{margin-top:auto;font-size:13.5px}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--bidi-dark),var(--peru),var(--bidi-teal),var(--saddle),var(--bidi-olive));
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.card:hover::after{transform:scaleX(1)}
@media (max-width:1120px){.cards-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.cards-5{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cards-5{grid-template-columns:1fr}}

/* ==========================================================================
   CHIPS — the long trade and scope lists, full width of the grid.
   ========================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:11px;
  padding:13px 20px 13px 17px;border:1px solid var(--line-warm);border-radius:999px;
  background:var(--bone-lt);font-size:17px;color:var(--charcoal);
  transition:border-color .24s ease,transform .24s ease,box-shadow .24s ease}
.sec-bone .chips li,.sec-bone-lt .chips li{background:#fff}
.chips li::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--peru)}
.chips li:nth-child(5n+2)::before{background:var(--bidi-teal)}
.chips li:nth-child(5n+3)::before{background:var(--bidi-olive)}
.chips li:nth-child(5n+4)::before{background:var(--bidi-dark)}
.chips li:nth-child(5n+5)::before{background:var(--saddle)}
.chips li:hover{border-color:rgba(117,66,37,.45);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.sec-oxford .chips li{background:var(--oxford-lt);border-color:rgba(238,228,215,.16);
  color:rgba(238,228,215,.9)}

/* ==========================================================================
   VALUES — big Peru numerals, ruled columns, per the capability statement.
   ========================================================================== */
.values{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s3)}
.value{padding:6px 34px 10px;border-left:1px solid var(--line-warm)}
.value:first-child{border-left:0;padding-left:0}
.value .n{font-family:Archivo,sans-serif;font-weight:700;font-size:38px;line-height:1;
  color:var(--peru);margin:0 0 18px}
.value h3{font-size:24px;margin:0 0 10px}
.value p{font-size:16.5px;line-height:1.62;color:var(--gunmetal);margin:0}

/* ==========================================================================
   DARKBLOCK — a full-bleed Oxford statement, head left, copy right,
   the whole yarning circle set under the heading as a mark.
   ========================================================================== */
.sec.darkblock{padding-top:0}  /* .sec.darkblock outranks the mobile .sec
   padding shorthand, which was re-adding top padding and floating the journey
   line off the section top on phones */
.darkblock .sec-in,.darkblock .wrap{position:relative;z-index:3}
/* the top strip guards the subpixel seam against the section above; below the
   ribbon stays transparent so the journey line itself is always the divider */
.sec-bidi-top{position:relative;line-height:0;margin-top:-1px;margin-bottom:var(--s5);
  background:linear-gradient(var(--bone-lt),var(--bone-lt)) top/100% 3px no-repeat}
.sec-bidi-top.w{background:linear-gradient(var(--white),var(--white)) top/100% 3px no-repeat}
/* the footer seam gets the same guard: overlap the section above by 1px and
   paint only a 3px strip in the ribbon's own baked above-colour - below stays
   transparent so the journey line remains the divider. Without this, fractional
   display scaling (125%/150% Windows) shows the navy footer through the crack. */
footer .bidi-top{position:relative;line-height:0;margin-top:-1px;
  background:linear-gradient(#EEE4D7,#EEE4D7) top/100% 3px no-repeat}
footer .bidi-top.w{background:linear-gradient(#FDFDFD,#FDFDFD) top/100% 3px no-repeat}
footer .bidi-top img{display:block}
.sec-bidi-top img{width:100%;height:auto;display:block}
.darkblock .mark{width:150px;height:auto;margin-top:36px;opacity:.95}

/* ==========================================================================
   NOTE BAND — a page's closing line, set as the capability statement sets
   its tagline: an Oxford band, serif italic, the whole circle at the end.
   ========================================================================== */
.noteband{background:var(--oxford);padding:var(--s4) 0}
.noteband-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.noteband p{margin:0 0 12px;font-size:21px;line-height:1.58;
  color:rgba(238,228,215,.92);max-width:72ch}
.noteband p:last-child{margin-bottom:0}
.noteband .mark{width:74px;height:auto;flex:none;opacity:.95}

/* ==========================================================================
   FAQ — head left, questions right. Written for AI extraction as much
   as for readers.
   ========================================================================== */
.faqgrid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s4) var(--s5)}
.faqgrid>.sechead{margin-bottom:0}
@media (min-width:981px){.faqgrid>.sechead{position:sticky;top:calc(var(--nav-h) + 24px)}}
.qalist{max-width:none}
.qa{border-top:1px solid var(--line-warm)}
.qa:last-child{border-bottom:1px solid var(--line-warm)}
.qa summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:19px;line-height:1.4;margin:0;transition:color .2s ease}
.qa summary:hover h3{color:var(--saddle)}
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;
  margin-top:-8px;border-right:2px solid var(--peru);border-bottom:2px solid var(--peru);
  transform:rotate(45deg);transition:transform .26s ease}
.qa[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.qa-a{padding:0 44px 26px 0}
.qa-a p{margin:0;font-size:18px;line-height:1.68;color:var(--gunmetal)}
.sec-oxford .qa{border-color:rgba(238,228,215,.18)}
.sec-oxford .qa-a p{color:rgba(238,228,215,.84)}

/* ==========================================================================
   CTA — an Oxford panel on bone, the whole yarning circle beside the ask.
   ========================================================================== */
.ctaband{background:var(--bone);padding:var(--s6) 0}
.cta-panel{position:relative;background:var(--oxford);border-radius:var(--r);
  padding:var(--s5) 72px;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:var(--s5);box-shadow:var(--sh-lg)}
.cta-panel h2{color:#fff;font-size:clamp(25px,3vw,36px)}
.cta-panel .cta-text{margin:16px 0 0;color:rgba(238,228,215,.84);font-size:19px;max-width:52ch}
.cta-panel .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.cta-panel .btn-oxford{background:transparent;border-color:rgba(253,253,253,.45);color:#fff}
.cta-panel .btn-oxford:hover{background:rgba(253,253,253,.12);border-color:#fff}
.cta-mark{width:200px;height:auto;flex:none;opacity:.96}

/* ==========================================================================
   CONTACT — details on the left, the two paths (clients, workers) as cards.
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:var(--s5);align-items:start}
.contact-info{grid-column:1;grid-row:1}
.contact-list{list-style:none;margin:8px 0 0;padding:0}
.contact-list li{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:baseline;
  padding:17px 0;border-top:1px solid var(--line-warm);font-size:18px}
.contact-list li:last-child{border-bottom:1px solid var(--line-warm)}
.contact-list li>span:first-child{font-family:Archivo,sans-serif;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gunmetal)}
.map{grid-column:2;grid-row:1;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-lg);
  background:var(--bone-lt);min-height:440px}
.map iframe{width:100%;height:100%;min-height:440px;border:0;display:block}

/* ==========================================================================
   PORTRAIT SPLIT — Ken's page. The portrait sits beside the story,
   framed with the offset Peru rule from the capability statement.
   ========================================================================== */
.psplit{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s5);align-items:start}
.pfig{margin:0}
.pfig img{width:100%;height:auto;display:block;
  border-radius:var(--r-sm);box-shadow:var(--sh-lg)}
.pfig figcaption{margin-top:18px;font-family:Archivo,sans-serif;font-size:12.5px;line-height:1.6;
  color:var(--gunmetal)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--oxford);color:rgba(238,228,215,.74);font-size:17px;position:relative;overflow:hidden}
footer .bidi-top{position:relative;line-height:0;margin-bottom:-1px;overflow:hidden}
footer .bidi-top img{width:100%;height:auto;display:block}
.f-in{padding-top:26px;padding-bottom:34px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:46px;
  padding-bottom:44px;border-bottom:1px solid rgba(170,100,49,.28)}
footer .flogo{height:96px;width:auto;margin-bottom:22px}
footer h4{font-family:Archivo,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--peru-lt);margin-bottom:18px;font-weight:700}
footer ul li{margin-bottom:11px}
footer a{color:rgba(238,228,215,.74);transition:color .2s ease}
footer a:hover{color:var(--peru-lt)}
footer .tagline{font-size:20px;color:#fff;margin:34px 0 0;letter-spacing:.01em}
.ack{margin-top:28px;font-size:16px;line-height:1.68;color:rgba(238,228,215,.62);max-width:80ch}
.legal{margin-top:26px;padding-top:22px;border-top:1px solid rgba(170,100,49,.2);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-family:Archivo,sans-serif;font-size:13px;color:rgba(238,228,215,.54)}
.site-credit{margin:12px 0 0;font-family:Archivo,sans-serif;font-size:12.5px}
.site-credit a{color:rgba(238,228,215,.56);transition:color .2s ease}
.site-credit a:hover{color:var(--peru-lt)}
.todo{display:inline;background:rgba(220,27,32,.1);border:1px dashed rgba(220,27,32,.5);
  color:#B3181D;padding:1px 7px;border-radius:3px;font-size:.9em;font-weight:700;
  font-family:Archivo,sans-serif;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sec-oxford .todo,footer .todo{background:rgba(220,27,32,.22);color:#FFB4B7;border-color:rgba(255,150,153,.5)}

/* ==========================================================================
   MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1120px){
  .nav-links{gap:20px}.nav-links a{font-size:13.6px}.nav-tel{display:none}
}
@media (max-width:980px){
  :root{--nav-h:84px}
  .nav-logo img{height:54px}
  .nav.scrolled .nav-in{height:72px}
  .nav.scrolled .nav-logo img{height:48px}
  .nav-links,.nav-right .btn{display:none}
  .nav-toggle{display:flex}
  .nav.open .nav-links{display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;left:0;right:0;top:100%;background:var(--white);
    border-bottom:1px solid var(--line-warm);padding:14px 30px 24px;box-shadow:var(--sh-md)}
  .nav.open .nav-links a{width:100%;padding:14px 0;font-size:16.5px;border-bottom:1px solid var(--line)}
  .nav.open .nav-links a::after{display:none}
  .nav-drop{width:100%}
  .nav-drop .cv{display:none}
  .nav.open .nav-drop>a{width:100%;padding:14px 0;font-size:16.5px;
    border-bottom:1px solid var(--line);display:block}
  .nav.open .nav-sub{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;background:transparent;border:0;box-shadow:none;padding:6px 0 10px}
  .nav.open .nav-sub a{padding:9px 0 9px 18px;font-size:15px;color:var(--gunmetal);
    border-bottom:0;width:auto}
  .nav.open .nav-sub a:hover{background:transparent}
  .nav-sub{display:none}
  .nav.open .nav-sub{display:block}

  .sec{padding:var(--s5) 0}
  .split,.faqgrid{grid-template-columns:1fr;gap:var(--s4)}
  .msplit{grid-template-columns:1fr;gap:var(--s4)}
  .mfig{max-width:520px}
  .mfig .duo img{aspect-ratio:16/9}
  .listsplit{grid-template-columns:1fr;gap:var(--s4)}
  .listfig{max-width:440px;margin:26px 18px 4px 0}
  .listfig .duo img{aspect-ratio:16/10}
  .contact-grid{grid-template-columns:1fr;gap:var(--s4)}
  .contact-info{grid-column:auto;grid-row:auto}
  .map{grid-column:auto;grid-row:auto}
  .intro-cols,.intro-cols.one{grid-template-columns:1fr;margin-top:var(--s3)}
  .values{grid-template-columns:1fr 1fr;gap:var(--s4) 0;margin-top:var(--s4)}
  .value{padding:0 28px}
  .value:nth-child(odd){border-left:0;padding-left:0}
  .hero-band .hero-in{padding-top:104px}
  .psplit{grid-template-columns:1fr;gap:34px}
  .pfig{max-width:440px}
  .fgrid{grid-template-columns:1fr 1fr;gap:34px}
  .cta-panel{grid-template-columns:1fr;padding:var(--s4) 40px}
  .cta-mark{display:none}
  .noteband-in{gap:var(--s3)}
  .noteband .mark{width:44px}
}
@media (max-width:640px){
  body{font-size:18px}
  .wrap{padding-left:24px;padding-right:24px}
  .hero{min-height:0}
  .hero-bidi{bottom:-1px}
  .hero-btns .btn{width:100%}
  .hero-ack{font-size:10px;letter-spacing:.1em}
  .hero-bidi img,footer .bidi-top img,.sec-bidi-top img{width:215%;max-width:none;margin-left:-58%}
  .hero-in{padding-bottom:max(200px, calc(52vw + 24px))}
  .hero-band .hero-in{padding-top:88px;padding-bottom:max(200px, calc(52vw + 24px))}
  .hero-band .hero-yarn{display:none}
  /* home hero: keep the sunrise side in frame on narrow screens */
  .hero.yarn-big .hero-media img{object-position:72% 50%}
  .sec{padding:var(--s5) 0}
  .sec-tight{padding:var(--s4) 0}
  .sec-bidi-top{margin-bottom:var(--s4)}
  .arc-in{padding-top:var(--s5);padding-bottom:var(--s5)}
  .values{grid-template-columns:1fr}
  .value{padding:0;border-left:0}
  .value .n{font-size:38px;margin-bottom:10px}
  .fgrid{grid-template-columns:1fr;gap:30px}
  .card{padding:26px 22px 22px}
  .chips li{font-size:16px;padding:11px 17px 11px 15px}
  .rows li{gap:16px;padding:13px 2px}
  .rows .rl{font-size:18.5px}
  .rows li:hover{padding-left:2px}
  .form{grid-template-columns:1fr}
  .contact-list li{grid-template-columns:1fr;gap:4px}
  .map,.map iframe{min-height:320px}
  .cta-panel{padding:var(--s4) 26px}
  .noteband .mark{display:none}
  .qa summary h3{font-size:19px}.qa-a p{font-size:17px}
  .intro-lead{font-size:22px}
  .legal{flex-direction:column;gap:8px}
}

/* ==========================================================================
   EYEBROW CONSISTENCY (Craig, 2 Sep 2026)
   The generic .copy p / .sechead p rules were clobbering the eyebrow's margin
   and colour in some wrappers and not others, so the gap between the small
   caps and the heading varied section to section. These sit last so the
   eyebrow's rhythm and colour win everywhere, whatever wraps it.
   ========================================================================== */
p.eyebrow{margin:0 0 20px;color:var(--saddle)}
p.eyebrow.light,.sec-oxford p.eyebrow,.darkblock p.eyebrow{color:var(--peru-lt)}

/* inline form result (10 Sep 2026: no thanks page - message shows in place) */
.form-msg{margin:6px 0 0;padding:14px 18px;border-radius:10px;font-size:16.5px;line-height:1.5}
.form-msg.ok{background:rgba(76,96,59,.14);color:#3C4F2E;border:1px solid rgba(76,96,59,.35)}
.form-msg.err{background:rgba(139,58,44,.12);color:#7A3325;border:1px solid rgba(139,58,44,.32)}