/* ===================================================================
   Resource Mate
   One family (Archivo variable) — the width axis carries the display
   voice. Palette taken from the logo: deep navy ground, brand navy,
   brand blue. Left-aligned throughout.
   =================================================================== */

:root{
  --deep:#01143A;        /* darkest navy — hero ground, footer */
  --navy:#012D74;        /* brand navy — headings, dark bands */
  --blue:#0581DD;        /* brand blue — accent, CTA */
  --blue-lo:#D6E8FA;     /* pale blue tint */
  --paper:#F7F9FC;       /* cool page ground */
  --white:#FFFFFF;
  --slate:#4A5A74;       /* secondary text */
  --rule:#D8E0EC;        /* hairlines */
  --warn:#B3261E;

  --shell:1200px;
  --gut:clamp(1.25rem, 4vw, 3rem);

  /* type scale — 1.25 (major third), tightened at the top */
  --t-xs:0.8125rem;
  --t-sm:0.9375rem;
  --t-base:1.0625rem;
  --t-md:1.25rem;
  --t-lg:clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem);
  --t-xl:clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  --t-2xl:clamp(2.4rem, 1.3rem + 4.6vw, 4.6rem);
}

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

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:6.9rem}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:"Archivo","Archivo Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--t-base);
  line-height:1.6;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}

h1,h2,h3{
  margin:0;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.022em;
  font-variation-settings:"wdth" 112;   /* the display voice: expanded */
  text-wrap:balance;
}
p{margin:0}

a{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
  border-radius:2px;
}

.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut)}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:#fff; padding:.75rem 1.25rem;
  text-decoration:none; font-weight:600;
}
.skip:focus{left:0}

/* ── buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-block;
  white-space:nowrap;
  font:inherit; font-weight:600;
  font-variation-settings:"wdth" 104;
  letter-spacing:-0.005em;
  padding:.85rem 1.5rem;
  border:2px solid transparent;
  border-radius:4px;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-solid{background:var(--blue); border-color:var(--blue); color:#fff}
.btn-solid:hover{background:#046BBA; border-color:#046BBA}
.btn-ghost{background:transparent; border-color:rgba(255,255,255,.55); color:#fff}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.btn-sm{padding:.6rem 1.1rem; font-size:var(--t-sm)}
.btn-lg{padding:1rem 2rem; font-size:var(--t-md)}
.btn[disabled]{opacity:.55; cursor:progress}

/* ── masthead ────────────────────────────────────────────────────── */
.masthead{
  position:sticky; top:0; z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--rule);
}
.masthead-in{
  display:flex; align-items:center;
  gap:clamp(.9rem,2vw,1.6rem); min-height:5.9rem;
}
.brand{order:1; margin-right:auto}
.nav{order:2}
.brand img{width:auto; height:3.9rem}

.nav-list{
  display:flex; align-items:center; gap:clamp(.85rem,1.5vw,1.4rem);
  list-style:none; margin:0; padding:0;
}
.nav-list a:not(.btn){
  color:var(--navy); text-decoration:none;
  font-size:var(--t-sm); font-weight:600;
  white-space:nowrap;
  padding-block:.35rem;
  border-bottom:2px solid transparent;
}
.nav-list a:not(.btn):hover{border-bottom-color:var(--blue)}

/* ── social / messaging links ────────────────────────────────────── */
.social{
  display:flex; align-items:center; gap:.55rem;
  list-style:none; margin:0; padding:0 0 0 1.1rem;
  position:relative; order:3;
}
.social::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:1.5rem; background:var(--rule);
}
.social a{
  display:block; line-height:0;
  border-radius:5px;
  transition:transform .15s ease, opacity .15s ease;
}
.social a:hover{transform:translateY(-1px); opacity:.82}
.social svg,
.social img{display:block; height:1.6rem; width:auto}

.nav-toggle{
  display:none; align-items:center; gap:.55rem;
  font:inherit; font-size:var(--t-sm); font-weight:600;
  color:var(--navy); background:none; border:1px solid var(--rule);
  border-radius:4px; padding:.5rem .85rem; cursor:pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  display:block; width:17px; height:2px; background:var(--navy); content:"";
}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before{position:absolute; top:-5px}
.nav-toggle-bars::after{position:absolute; top:5px}

/* ── hero ────────────────────────────────────────────────────────── */
.hero{position:relative; background:var(--deep); color:#fff; overflow:hidden;
      padding-bottom:clamp(4.5rem,11vw,8.5rem)}
.hero-img{position:absolute; inset:0}
.hero-img img{width:100%; height:100%; object-fit:cover; object-position:50% 38%}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(104deg, rgba(1,20,58,.96) 0%, rgba(1,20,58,.88) 38%, rgba(1,20,58,.52) 70%, rgba(1,20,58,.42) 100%),
    linear-gradient(0deg, rgba(1,20,58,.92) 0%, rgba(1,20,58,0) 45%);
}
.hero-in{position:relative; z-index:1}
.hero-in{padding-block:clamp(4rem,11vw,8.5rem) 0; max-width:min(var(--shell),100%)}

.hero-title{
  font-size:clamp(1.6rem, 0.95rem + 2.4vw, 2.6rem);
  font-weight:800;
  font-variation-settings:"wdth" 118;
  line-height:1.0;
  letter-spacing:-0.026em;
  max-width:24ch;
}
.hero-sub{
  margin-top:1.5rem; max-width:58ch;
  font-size:var(--t-md); line-height:1.55;
  color:rgba(255,255,255,.84);
}
.hero-acts{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.25rem}

/* ── model ───────────────────────────────────────────────────────── */
.model-in{padding-block:clamp(5.5rem,10vw,8rem) clamp(3.5rem,7vw,6rem)}
.model-h{
  font-size:var(--t-xl); max-width:19ch; color:var(--navy);
  margin-bottom:1.1rem;
}
.model-lede{
  max-width:62ch; color:var(--slate); font-size:var(--t-md); line-height:1.55;
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
}
.model-points{
  display:grid; gap:clamp(1.75rem,3.5vw,2.75rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.point{border-top:3px solid var(--blue); padding-top:1.1rem}
.point h3{font-size:var(--t-md); font-variation-settings:"wdth" 104; margin-bottom:.5rem}
.point p{color:var(--slate); font-size:var(--t-sm); line-height:1.6}

/* ── section heads ───────────────────────────────────────────────── */
.sec-head{max-width:60ch; margin-bottom:clamp(2.25rem,4.5vw,3.25rem)}
.sec-head h2{font-size:var(--t-xl); margin-bottom:.9rem}
.sec-head p{color:var(--slate); font-size:var(--t-md); line-height:1.55}

/* ── staffing mosaic ─────────────────────────────────────────────── */
.staffing{padding-block:clamp(3.5rem,7vw,5.5rem) clamp(4.5rem,9vw,7rem); background:var(--white); border-block:1px solid var(--rule)}
.mosaic{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.7rem,1.4vw,1.1rem);
}
.tile{
  position:relative; overflow:hidden; border-radius:6px;
  background:var(--navy); min-height:14rem;
  display:flex; align-items:flex-end;
  isolation:isolate;
}
.tile-2{grid-column:span 2}
.tile-3{grid-column:span 3}
.tile-6{grid-column:1 / -1}
.tile-wide{min-height:17rem}
.tile-feature{min-height:20rem}
.tile-feature .tile-txt{max-width:62ch}
.tile-feature h3{font-size:var(--t-lg)}
.tile img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
}
.tile::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg,
    rgba(1,20,58,.97) 0%, rgba(1,20,58,.90) 30%, rgba(1,20,58,.62) 55%, rgba(1,20,58,.22) 80%, rgba(1,20,58,.1) 100%);
}
.tile-txt{padding:clamp(1.1rem,2vw,1.6rem); color:#fff}
.tile-txt h3{font-size:var(--t-md); font-variation-settings:"wdth" 106; margin-bottom:.4rem}
.tile-txt p{font-size:var(--t-sm); line-height:1.5; color:rgba(255,255,255,.78); max-width:44ch}

/* fallback for a capability with no photograph yet */
.tile-plain{
  min-height:11rem;
  background:
    linear-gradient(135deg, var(--navy) 0%, #023A91 100%);
}
.tile-plain::before{
  background:radial-gradient(120% 140% at 100% 0%, rgba(5,129,221,.42) 0%, rgba(5,129,221,0) 60%);
}

/* ── specialised products & sourcing ─────────────────────────────── */
.sourcing{background:var(--paper); border-top:1px solid var(--rule)}
.sourcing-in{
  padding-block:clamp(4.5rem,9vw,7rem);
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:start;
}
.sourcing-lede h2{font-size:var(--t-xl); margin-bottom:1.1rem}
.sourcing-lede p{color:var(--slate); font-size:var(--t-md); line-height:1.55; max-width:46ch}
.sourcing-lede p + p{margin-top:1rem; font-size:var(--t-base)}

.sourcing-steps{
  counter-reset:src; list-style:none; margin:0; padding:0;
  display:grid; gap:0;
}
.sourcing-steps li{
  counter-increment:src; position:relative;
  padding:1.3rem 0 1.3rem 3.4rem;
  border-top:1px solid var(--rule);
}
.sourcing-steps li:last-child{border-bottom:1px solid var(--rule)}
.sourcing-steps li::before{
  content:counter(src,decimal-leading-zero);
  position:absolute; left:0; top:1.45rem;
  font-size:var(--t-sm); font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--blue);
}
.sourcing-steps h3{font-size:var(--t-md); font-variation-settings:"wdth" 104; margin-bottom:.35rem}
.sourcing-steps p{color:var(--slate); font-size:var(--t-sm); line-height:1.6; max-width:52ch}

/* ── about: who we are, vision, mission, values ───────────────────── */
.about{background:var(--paper)}
.about-in{padding-block:clamp(4.5rem,9vw,7rem)}

.about-head{max-width:68ch; margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.about-head h2{font-size:var(--t-xl); margin-bottom:1.1rem}
.about-lede{color:var(--slate); font-size:var(--t-md); line-height:1.55}

/* vision + mission: statements, so give them room and a brand rule */
.creed{
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(22rem,1fr));
  margin-bottom:clamp(3rem,6vw,4.5rem);
}
.creed-item{border-left:3px solid var(--blue); padding-left:clamp(1.1rem,2vw,1.75rem)}
.creed-item h3{
  font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  font-weight:700; line-height:1.05;
  letter-spacing:-0.028em;
  font-variation-settings:"wdth" 110;
  color:var(--navy); margin-bottom:.85rem;
}
.creed-item p{
  font-size:var(--t-sm); line-height:1.6;
  letter-spacing:0; color:var(--slate);
  font-variation-settings:"wdth" 100;
  max-width:44ch;
}

/* values sit in the one pale-blue field on the page, so the six read as a set */
.values-h{
  font-size:var(--t-sm); font-variation-settings:"wdth" 104; color:var(--slate);
  margin-bottom:1.25rem;
}
.values{
  margin:0; padding:clamp(1.5rem,3vw,2.5rem);
  background:var(--blue-lo); border-radius:8px;
  display:grid; gap:clamp(1.4rem,3vw,2.25rem);
  grid-template-columns:repeat(3,1fr);
}
.values dt{
  font-weight:700; font-size:0.875rem;
  font-variation-settings:"wdth" 104;
  letter-spacing:-0.012em; color:var(--navy); margin-bottom:.25rem;
}
.values dd{margin:0; color:#33507D; font-size:0.78125rem; line-height:1.5}

/* ── confidentiality & security ──────────────────────────────────── */
.trust{background:var(--white); border-top:1px solid var(--rule)}
.trust-in{padding-block:clamp(4rem,8vw,6rem)}
.trust-h{font-size:var(--t-lg); margin-bottom:1.75rem; max-width:24ch}
.trust-cols{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
}
.trust-cols p{color:var(--slate); font-size:var(--t-base); line-height:1.65; max-width:56ch}

/* ── process ─────────────────────────────────────────────────────── */
.process{padding-block:clamp(4.5rem,9vw,7rem)}
.steps{
  list-style:none; counter-reset:step; margin:0; padding:0;
  display:grid; gap:clamp(1.75rem,3vw,2.5rem);
  grid-template-columns:repeat(4,1fr);
}
.step{counter-increment:step; position:relative; padding-top:3.4rem}
.step::before{
  content:counter(step);
  position:absolute; top:0; left:0;
  width:2.4rem; height:2.4rem;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--navy); color:#fff;
  font-size:var(--t-sm); font-weight:700; font-variant-numeric:tabular-nums;
}
.step::after{
  content:""; position:absolute; top:1.2rem; left:3rem; right:-1.5rem;
  height:1px; background:var(--rule);
}
.step:last-child::after{display:none}
.step h3{font-size:var(--t-md); font-variation-settings:"wdth" 104; margin-bottom:.55rem}
.step p{color:var(--slate); font-size:var(--t-sm); line-height:1.6}

/* ── why ─────────────────────────────────────────────────────────── */
.why{background:var(--navy); color:#fff}
.why-in{
  padding-block:clamp(4.5rem,9vw,7rem);
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:stretch;
}
.why-lede{display:flex; flex-direction:column}
.why-lede h2{font-size:var(--t-xl); margin-bottom:1.1rem; color:#fff}
.why-lede p{color:rgba(255,255,255,.76); max-width:40ch; font-size:var(--t-base)}
.why-img{
  width:100%; margin-top:clamp(1.75rem,3.5vw,2.75rem);
  flex:1 1 auto; min-height:20rem;
  object-fit:cover; object-position:50% 38%;
  border-radius:8px;
  border:1px solid rgba(214,232,250,.22);
}
.why-list{margin:0; display:grid; gap:0}
.why-list > div{
  padding-block:1.4rem;
  border-top:1px solid rgba(214,232,250,.22);
}
.why-list > div:last-child{border-bottom:1px solid rgba(214,232,250,.22)}
.why-list dt{
  font-weight:700; font-size:var(--t-md);
  font-variation-settings:"wdth" 106;
  letter-spacing:-0.015em; margin-bottom:.4rem;
}
.why-list dd{margin:0; color:rgba(255,255,255,.72); font-size:var(--t-sm); line-height:1.6; max-width:54ch}

/* ── contact ─────────────────────────────────────────────────────── */
.contact{background:var(--white); border-top:1px solid var(--rule)}
.contact > .shell:first-child{padding-top:clamp(4.5rem,9vw,7rem)}
.contact-in{padding-block:0 clamp(4.5rem,9vw,7rem)}

.form{display:grid; gap:1.35rem; max-width:44rem}
.field{display:grid}

/* A class selector with `display` outranks the browser's own
   [hidden]{display:none}, so anything we toggle in JS needs this. */
[hidden]{display:none !important}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.35rem}

label{
  font-size:var(--t-sm); font-weight:600;
  margin-bottom:.4rem; color:var(--navy);
}
.opt{font-weight:400; color:var(--slate)}

input,select,textarea{
  font:inherit; font-size:var(--t-base);
  color:var(--navy); background:var(--paper);
  border:1px solid var(--rule); border-radius:4px;
  padding:.75rem .9rem; width:100%;
  transition:border-color .15s ease, background-color .15s ease;
}
textarea{resize:vertical; min-height:7rem; line-height:1.55}
select{
  appearance:none; cursor:pointer; padding-right:2.5rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A5A74' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center;
}
input:hover,select:hover,textarea:hover{border-color:#B9C6D8}
input:focus,select:focus,textarea:focus{background:var(--white); border-color:var(--blue)}

.hint{font-size:var(--t-xs); color:var(--slate); margin-top:.4rem}

.err{font-size:var(--t-xs); color:var(--warn); font-weight:600; margin-top:.4rem; display:none}
.field.is-bad .err{display:block}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{
  border-color:var(--warn); background:#FDF5F4;
}

.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.form-status{display:none; padding:1rem 1.15rem; border-radius:4px; font-size:var(--t-sm); font-weight:600}
.form-status.is-ok{display:block; background:var(--blue-lo); color:var(--navy); border-left:4px solid var(--blue)}
.form-status.is-bad{display:block; background:#FDF5F4; color:var(--warn); border-left:4px solid var(--warn)}

.form-foot{font-size:var(--t-xs); color:var(--slate)}

/* the result of a submission should be impossible to miss */
.sent{
  max-width:44rem;
  background:var(--blue-lo);
  border:1px solid #AFD2F2;
  border-left:5px solid var(--blue);
  border-radius:8px;
  padding:clamp(1.75rem,3.5vw,2.75rem);
  text-align:left;
}
.sent:focus{outline:none}
.sent-tick{width:3rem; height:3rem; color:var(--blue); display:block; margin-bottom:1.1rem}
.sent h3{
  font-size:var(--t-lg); color:var(--navy);
  font-variation-settings:"wdth" 106; margin-bottom:.6rem;
}
.sent p{color:var(--slate); font-size:var(--t-base); line-height:1.6; max-width:48ch}
.sent strong{color:var(--navy); overflow-wrap:anywhere}
.sent .btn{margin-top:1.75rem}
.btn-ghost-navy{background:transparent; border-color:var(--navy); color:var(--navy)}
.btn-ghost-navy:hover{background:var(--navy); color:#fff}

/* and the failure case should read as a failure */
.form-status{font-size:var(--t-base); display:flex; gap:.6rem; align-items:flex-start}

/* contact details in the footer */
.foot-vcard{font-style:normal; display:grid; gap:.85rem}
.fv-name{color:#fff; font-weight:600}
.fv-line{
  display:grid; grid-template-columns:1.25rem 1fr; gap:.7rem;
  align-items:start; line-height:1.5;
}
.fv-ico{
  width:1.25rem; height:1.25rem;
  fill:none; stroke:var(--blue-lo); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  margin-top:.1em;
}
.foot-vcard a{overflow-wrap:anywhere}

/* available to assistive tech, not shown */
.vh{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── footer ──────────────────────────────────────────────────────── */
.foot{background:var(--deep); color:rgba(255,255,255,.72); font-size:var(--t-sm)}
.foot-in{
  padding-block:clamp(3rem,6vw,4.5rem) 2.5rem;
  display:grid; gap:2.5rem;
  grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));
}
.foot-brand img{width:auto; height:4.2rem; filter:brightness(0) invert(1)}
.foot-brand p{margin-top:1.1rem; max-width:34ch; color:rgba(255,255,255,.6)}
.foot h2{font-size:var(--t-sm); color:#fff; font-variation-settings:"wdth" 100; margin-bottom:.9rem}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.foot a{color:rgba(255,255,255,.72); text-decoration:none}
.foot a:hover{color:#fff; text-decoration:underline}
.foot-base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem;
  padding-block:1.5rem 2.5rem;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:var(--t-xs); color:rgba(255,255,255,.5);
}

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2n)::after{display:none}
  .mosaic{grid-template-columns:repeat(4,1fr)}
  .tile-2,.tile-3{grid-column:span 2}
  .why-in,.contact-in,.sourcing-in{grid-template-columns:1fr}
  .why-img{flex:0 0 auto; aspect-ratio:16 / 9; min-height:0}
  .values{grid-template-columns:repeat(2,1fr)}
  .sourcing-lede p{max-width:60ch}
  .why-lede p{max-width:60ch}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}

@media (max-width:1180px){
  .nav-toggle{display:flex}
  .nav-list{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--white); border-bottom:1px solid var(--rule);
    padding:.5rem var(--gut) 1.25rem;
    box-shadow:0 14px 24px -18px rgba(1,20,58,.5);
  }
  .nav-list.is-open{display:flex}
  .nav-list li{border-top:1px solid var(--rule)}
  .nav-list li:last-child{border-top:0; padding-top:1rem}
  .nav-list a:not(.btn){display:block; padding:.9rem 0; font-size:var(--t-base)}
  .nav-list a:not(.btn):hover{border-bottom-color:transparent; color:var(--blue)}
  .nav-list .btn{display:block; text-align:center}
  .masthead{position:relative}
  html{scroll-padding-top:1rem}
  .nav{order:3}
  .social{order:2; padding-left:0}
  .social::before{display:none}
}

@media (max-width:420px){
  .brand img{height:3rem}
  .social{gap:.4rem}
  .social svg,
  .social img{height:1.45rem}
  .nav-toggle-text{display:none}
  .nav-toggle{padding:.5rem .6rem}
}

@media (max-width:620px){
  .hero-sub{font-size:var(--t-base)}
  .values{grid-template-columns:1fr}
  .creed-item p{font-size:var(--t-sm)}
  .steps{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr}
  .tile-2,.tile-3,.tile-6{grid-column:span 1}
  .tile-feature{min-height:16rem}
  .tile,.tile-wide{min-height:13rem}
  .field-row{grid-template-columns:1fr}
  .hero-acts .btn{flex:1 1 auto; text-align:center}
  .step{padding-top:3rem}
  .step::after{display:none}
  .foot-in{grid-template-columns:1fr}
}