/* Rural Premise Co. website
   Brand: navy #13233F, bone #F3EEE5, white #FFFFFF, sun-gold #F2A916 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#13233F; --navy-2:#0d1830; --cream:#F3EEE5; --off:#FFFFFF;
  --bronze:#A86A00; --gold:#F2A916; --ink:#13233F; --muted:#5b6675;
  --muted-light:#C7D0DD;
  --maxw:1240px; --pad:clamp(20px,5vw,64px); --radius:18px;
  --shadow:0 18px 50px rgba(19,32,57,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* keyboard focus: visible ring on every interactive element.
   :focus-visible only fires for keyboard/AT users, so mouse clicks stay clean. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,label.menu-btn:focus-visible{
  outline:3px solid var(--bronze);outline-offset:3px;border-radius:4px}

/* skip link: hidden until focused, then pinned top-left */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:600}
.skip-link:focus{left:0}

/* respect the OS "reduce motion" setting */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .card:hover,.case:hover,.btn-primary:hover{transform:none}
  .case:hover .ph img{transform:none}
}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);background:var(--off);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:800;line-height:1.05;letter-spacing:-.01em;color:var(--navy)}
h1{font-size:clamp(2.4rem,6vw,4.6rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:1.3rem;font-weight:700}
p{font-weight:400}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted);max-width:60ch}
section{padding:clamp(56px,8vw,120px) 0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:1rem;
  padding:.85em 1.6em;border-radius:999px;transition:.2s;cursor:pointer;border:2px solid transparent}
.btn-primary{background:var(--gold);color:var(--navy)}
.btn-primary:hover{background:#dd9712;transform:translateY(-2px)}
.btn-ghost{border-color:var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:var(--off)}
.btn-light{border-color:rgba(255,255,255,.6);color:#fff}
.btn-light:hover{background:#fff;color:var(--navy)}
.arrow{font-size:1.1em;line-height:0}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--off);
  border-bottom:1px solid rgba(19,32,57,.1)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--navy);font-size:1.18rem;letter-spacing:-.01em}
.brand img{height:40px;width:auto}
.brand small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-weight:500;font-size:.97rem;color:var(--navy);position:relative;padding:4px 0}
.nav-links a:hover{color:var(--bronze)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--bronze)}
.nav-cta{margin-left:10px;padding:1.05em 2.5em;font-size:1rem;line-height:1.1}
.menu-btn{display:none;background:none;border:0;font-size:1.7rem;color:var(--navy);cursor:pointer}
#nav-toggle{display:none}

/* hero */
.hero{position:relative;min-height:clamp(560px,82vh,820px);display:flex;align-items:flex-end;
  color:#fff;overflow:hidden}
.media-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(19,32,57,.25) 0%,rgba(19,32,57,.55) 55%,rgba(19,32,57,.9) 100%)}
.hero-inner,.banner-inner,.cta>.wrap{position:relative;z-index:2}
.hero-inner{padding-bottom:clamp(48px,7vw,90px);padding-top:120px;max-width:var(--maxw);width:100%}
.hero-inner>*{max-width:900px}
.hero h1{color:#fff}
.hero .eyebrow{color:var(--gold)}
.hero p{color:rgba(255,255,255,.9);font-size:clamp(1.05rem,1.7vw,1.35rem);margin:18px 0 30px;max-width:54ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
/* page banner (smaller hero) */
.banner{position:relative;color:#fff;min-height:clamp(360px,52vh,520px);display:flex;align-items:flex-end;overflow:hidden}
.banner::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(19,32,57,.3),rgba(19,32,57,.82))}
.banner-inner{padding:120px 0 clamp(40px,5vw,64px);width:100%;text-align:left}
.banner h1{color:#fff;max-width:18ch}
.banner .eyebrow{color:var(--gold)}
.banner p{color:rgba(255,255,255,.9);max-width:52ch;margin-top:14px;font-size:1.1rem}

/* generic layout helpers */
.grid{display:grid;gap:clamp(20px,3vw,36px)}
.two{grid-template-columns:1fr 1fr;align-items:center}
.three{grid-template-columns:repeat(3,1fr)}
.split-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.center{text-align:center;margin-inline:auto}
.mt{margin-top:24px}.mt2{margin-top:40px}
.bg-navy{background:var(--navy);color:var(--off)}
.bg-navy h2,.bg-navy h3{color:#fff}
.bg-navy .lead,.bg-navy p{color:var(--muted-light)}
.bg-cream{background:var(--cream)}

/* service / value cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);
  border:1px solid rgba(19,32,57,.06);transition:.2s}
.card:hover{transform:translateY(-4px)}
.card .ico{width:64px;height:64px;border-radius:14px;background:var(--cream);display:grid;place-items:center;margin-bottom:18px}
.card .ico img{height:42px}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:.98rem}
.card .more{display:inline-block;margin-top:14px;font-weight:600;color:var(--bronze);font-size:.92rem}

/* feature row (image + text) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.feature.flip .feature-text{order:2}
.feature-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.feature-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4}
.feature-text .eyebrow{margin-bottom:10px;display:block}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .n{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:800;color:var(--gold);line-height:1}
.stat .l{color:var(--muted-light);font-size:.95rem;margin-top:6px}

/* case study grid */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.case{border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow);transition:.2s}
.case:hover{transform:translateY(-4px)}
.case .ph{aspect-ratio:4/3;overflow:hidden}
.case .ph img{width:100%;height:100%;object-fit:cover;transition:.4s}
.case:hover .ph img{transform:scale(1.05)}
.case .body{padding:22px 24px 26px}
.case .tag{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
.case h3{margin:8px 0 6px;font-size:1.18rem}
.case p{color:var(--muted);font-size:.94rem}
.case.feature-case{grid-column:1/-1;display:grid;grid-template-columns:1.1fr .9fr}
.case.feature-case .ph{aspect-ratio:auto;height:100%}
.case.feature-case .body{align-self:center;padding:clamp(28px,4vw,56px)}
.case.feature-case h3{font-size:clamp(1.6rem,3vw,2.3rem)}
a.case{display:block;color:inherit}

/* case study detail */
.casemeta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  border-top:1px solid rgba(19,32,57,.12);border-bottom:1px solid rgba(19,32,57,.12);
  padding:26px 0;margin:0 0 36px}
.casemeta .k{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze)}
.casemeta .v{font-weight:600;color:var(--navy);margin-top:5px;font-size:1.05rem}
.backlink{display:inline-block;margin-bottom:18px;font-weight:600;color:var(--bronze);font-size:.92rem}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);aspect-ratio:4/3}
@media(max-width:700px){.casemeta{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:1fr}}

/* CTA band */
.cta{position:relative;color:#fff;text-align:center;overflow:hidden}
.cta::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(19,32,57,.78)}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.9);margin:14px auto 28px;max-width:46ch}

/* quote */
.quote{max-width:60ch;margin-inline:auto;text-align:center}
.quote blockquote{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:600;color:var(--navy);line-height:1.3}
.quote cite{display:block;margin-top:18px;font-style:normal;color:var(--muted);font-size:.95rem}

/* directors / people */
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px)}
.person{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  border:1px solid rgba(19,32,57,.06);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column}
.person-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:18px}
.person-head img{width:120px;height:150px;border-radius:14px;object-fit:cover;object-position:center 25%;flex:none}
.person-head h3{font-size:1.35rem;line-height:1.1}
.person-head .role{color:var(--bronze);font-weight:600;font-size:.9rem;margin-top:3px}
.person-head .li{display:inline-block;margin-top:6px;font-size:.85rem;font-weight:600;color:var(--navy)}
.person-head .li:hover{color:var(--bronze)}
.person p{color:var(--muted);font-size:.97rem;margin-bottom:12px}
.person .leads{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:18px;
  border-top:1px solid rgba(19,32,57,.1);font-size:.92rem}
.person .leads .lico{width:34px;height:34px;border-radius:9px;background:var(--cream);display:grid;place-items:center;flex:none}
.person .leads .lico img{height:22px}
.person .leads a{font-weight:600;color:var(--navy)}
.person .leads a:hover{color:var(--bronze)}
.duo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;text-align:center}
.duo .plus{font-size:2.4rem;color:var(--gold);font-weight:800}
.duo .half h3{color:#fff;font-size:1.2rem}
.duo .half p{color:var(--muted-light);font-size:.95rem;margin-top:6px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:start}
/* Grid children default to min-width:auto, so the <select> (longest option is
   "Sheds, Workshops, Clinics & Offices") set a min-content floor that pushed the
   whole form wider than a small phone. min-width:0 lets the column actually shrink. */
.contact-grid>*{min-width:0}
.field input,.field textarea,.field select{min-width:0;max-width:100%}
.field{margin-bottom:18px}
.field label{display:block;font-weight:500;font-size:.9rem;margin-bottom:6px;color:var(--navy)}
.field input,.field textarea,.field select{width:100%;padding:14px 16px;border:1.5px solid rgba(19,32,57,.18);
  border-radius:12px;font:inherit;background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--bronze)}
.contact-aside{background:var(--navy);color:var(--off);border-radius:var(--radius);padding:clamp(28px,4vw,44px)}
.contact-aside h3{color:#fff}
.contact-aside a{color:var(--gold)}
.cinfo{margin-top:22px}
.cinfo div{display:flex;flex-wrap:wrap;gap:4px 12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.15);font-size:.97rem;color:var(--muted-light)}
.cinfo .k{color:#fff;font-weight:600;min-width:96px;flex:none}
/* The email address is one unbreakable string; without this it ran off the side
   of small phones (and gets longer once the .co.nz address lands). */
.cinfo div>:not(.k){min-width:0;overflow-wrap:anywhere}
@media(max-width:400px){.cinfo .k{min-width:100%}}

/* footer */
.site-footer{background:var(--navy);color:var(--muted-light);padding:64px 0 32px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.footer-top .brand{color:#fff}.footer-top .brand small{color:var(--muted-light)}
.footer-top img{height:46px}
.fcol h4{color:#fff;font-size:.95rem;margin-bottom:14px;letter-spacing:.02em}
.fcol a{display:block;color:var(--muted-light);padding:5px 0;font-size:.93rem}
.fcol a:hover{color:var(--gold)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15);
  font-size:.84rem;color:rgba(255,255,255,.6)}
.footer-bottom .made{display:flex;align-items:center;gap:8px}
.footer-bottom .made img{height:16px;opacity:.85}

/* responsive */
@media(max-width:900px){
  .nav-links{position:fixed;inset:74px 0 auto 0;background:var(--off);flex-direction:column;
    gap:0;padding:10px var(--pad) 24px;border-bottom:1px solid rgba(19,32,57,.1);
    transform:translateY(-130%);transition:transform .3s,visibility .3s;box-shadow:var(--shadow);
    visibility:hidden;max-height:calc(100vh - 74px);overflow-y:auto}
  .nav-links a{padding:14px 0;width:100%;border-bottom:1px solid rgba(19,32,57,.07)}
  /* the desktop Contact pill keeps its 10px left margin in the dropdown, which
     pushes it out of line with the other items */
  .nav-links a.nav-cta{margin-left:0;justify-content:center;padding:1em 2em;border-bottom:0;margin-top:14px}
  #nav-toggle:checked ~ .nav-links{transform:translateY(0);visibility:visible}
  /* The toggle is a checkbox styled by its label. display:none would drop it out of
     the tab order and make the mobile menu impossible to open by keyboard, so it is
     visually hidden but still focusable, and focus is shown on the label. */
  #nav-toggle{display:block;position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
  #nav-toggle:focus-visible ~ .menu-btn{outline:3px solid var(--bronze);outline-offset:3px;border-radius:4px}
  .menu-btn{display:grid;place-items:center;min-width:44px;min-height:44px}
  .two,.feature,.contact-grid,.people{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr;gap:14px}.duo .plus{transform:rotate(90deg)}
  .feature.flip .feature-text{order:0}
  .three,.cards,.cases{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .case.feature-case{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .three,.cards,.cases,.footer-top{grid-template-columns:1fr}
  .brand small{display:none}
}