/* Arise Software — site styles
   Palette and typography carried over from the previous theme so the rebuild
   reads as the same brand. Change a value here and it changes everywhere. */

@font-face{font-family:DMSans;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/DMSans-Regular.woff2) format('woff2')}
@font-face{font-family:DMSans;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/DMSans-Medium.woff2) format('woff2')}
@font-face{font-family:DMSans;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/DMSans-SemiBold.woff2) format('woff2')}
@font-face{font-family:DMSans;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/DMSans-Bold.woff2) format('woff2')}
@font-face{font-family:DMSans;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/DMSans-ExtraBold.woff2) format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Roboto-Regular.woff2) format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/Roboto-Medium.woff2) format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Roboto-Bold.woff2) format('woff2')}

:root{
  --navy:#0C1B5D;
  --navy-deep:#081244;
  --green:#7DC91D;
  --green-hover:#66B403;
  /* Green as TEXT on a light background. #66B403 is 2.6:1 on white and 2.5:1 on
     --light — below the 4.5:1 AA minimum, and below even the 3:1 large-text
     threshold, so the section labels, the card tags, the headline prices and the
     you-are-here nav marker were all effectively lost to a low-vision reader.
     #477D02 is 5.0:1 on white and 4.7:1 on --light and reads as the same green.
     --green and --green-hover stay as they are for buttons, and for text on the
     navy sections where they already pass comfortably. */
  --green-text:#477D02;
  --ink:#191919;
  --body:#3F4C7C;
  --muted:#6B7280;
  --line:#E3E7EF;
  --light:#F7F9FC;
  --white:#fff;
  --dark:#161A22;
  --wrap:1180px;
  --radius:10px;
  --pad:clamp(48px,7vw,104px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--body);
     font:400 17px/1.75 Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
     -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--green-text)}

h1,h2,h3,h4,h5,h6{font-family:DMSans,system-ui,sans-serif;color:var(--ink);
  line-height:1.18;margin:0 0 .6em;font-weight:700;letter-spacing:-.015em}
h1{font-size:clamp(34px,5.2vw,56px)}
h2{font-size:clamp(27px,3.8vw,40px)}
h3{font-size:clamp(22px,2.6vw,28px)}
h4,h5{font-size:clamp(18px,2vw,21px)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:8px;top:8px}
/* Present to assistive technology, absent on screen. Clip rather than
   display:none, which would take it out of the accessibility tree too. */
.sr-only{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}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.masthead-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
/* flex:0 0 auto is load-bearing. .brand is a flex item, so when the menu grew
   past the width of the masthead the logo was what gave: it shrank to 24px wide
   and 4px tall — still "present", just illegible — instead of the row visibly
   overflowing. The logo is never the thing that absorbs a too-wide menu. */
.brand{flex:0 0 auto}
.brand img{width:150px;height:auto}
.nav ul{list-style:none;display:flex;gap:0;margin:0;padding:0;align-items:center}
.nav a{display:block;padding:10px 9px;border-radius:8px;color:var(--navy);
  font:500 15px/1 DMSans,sans-serif;text-decoration:none;white-space:nowrap}
.nav a:hover{background:var(--light);color:var(--green-text)}
.nav a[aria-current=page]{color:var(--green-text);background:var(--light)}
.nav .has-children{position:relative}
.navtop{display:block;padding:10px 9px;border:0;background:none;border-radius:8px;
  color:var(--navy);font:500 15px/1 DMSans,sans-serif;white-space:nowrap;cursor:pointer}
.navtop:hover{background:var(--light);color:var(--green-text)}
.navtop[aria-expanded=true]{background:var(--light);color:var(--green-text)}
.caret{display:inline-block;width:0;height:0;margin-left:4px;vertical-align:middle;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.submenu{position:absolute;top:100%;left:0;min-width:236px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:8px;flex-direction:column;
  gap:2px;box-shadow:0 14px 34px rgba(12,27,93,.12);display:none}
.navtop[aria-expanded=true]+.submenu{display:flex}
/* A real <button> now, so it needs the button chrome reset. Hidden above 960px,
   where the full menu is shown instead. */
.burger{display:none;border:0;background:none;padding:0;cursor:pointer;color:inherit}
.burger:focus-visible{outline:3px solid var(--green-text);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:14px 28px;border-radius:8px;font:600 15px/1 DMSans,sans-serif;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--green);color:#0d2000;border-color:var(--green)}
.btn-primary:hover{background:var(--green-hover);border-color:var(--green-hover);color:#0d2000}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn-on-dark:hover{background:#fff;color:var(--navy);border-color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- sections ---------- */
section{padding-block:var(--pad)}
.section-light{background:var(--light)}
.section-navy{background:var(--navy);color:#D7DEF3}
.section-navy h1,.section-navy h2,.section-navy h3,.section-navy h4,.section-navy h5{color:#fff}
.eyebrow{font:600 13px/1 DMSans,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-text);margin:0 0 14px}
.section-navy .eyebrow{color:var(--green)}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.65}
.center{text-align:center}
.measure{max-width:760px}
.center.measure{margin-inline:auto}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(460px,64vh,660px);display:grid;align-items:center;
  color:#fff;padding-block:var(--pad);isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(8,18,68,.93) 0%,rgba(8,18,68,.72) 48%,rgba(8,18,68,.42) 100%)}
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hero h1,.hero h2{color:#fff;max-width:17ch}
.hero .eyebrow{color:var(--green)}
.hero p{color:#DCE3F5;max-width:62ch}
.hero .btns{margin-top:30px}
.hero-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:9px}
.hero-points li{padding-left:30px;position:relative;color:#EAF0FF;font-size:16px}
.hero-points li::before{content:"";position:absolute;left:0;top:.42em;width:17px;height:9px;
  border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}

/* Inner-page heroes sit shallower than the home page's. */
.hero-short{min-height:clamp(320px,38vh,420px)}

/* Photographer credit for the Waikaremoana hero image. Absolutely positioned so
   it tucks into the bottom corner without shifting the vertically-centred hero
   content. Padding matches .wrap so it lines up with the text above it. */
.hero .hero-credit{position:absolute;left:0;right:0;bottom:10px;z-index:1;
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:clamp(18px,4vw,32px);text-align:right;
  font-size:12px;font-style:italic;color:rgba(255,255,255,.62)}

/* ---------- generic page banner ---------- */
.pagehead{background:var(--navy);color:#fff;padding-block:clamp(52px,7vw,84px)}
.pagehead h1{color:#fff;margin-bottom:.35em}
.pagehead p{color:#C6D0EC;max-width:66ch;margin:0}

/* ---------- grids and cards ---------- */
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px}
.card h3,.card h4,.card h5{margin-bottom:.45em}
.card-media{overflow:hidden;border-radius:14px;border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column}
/* The whānau photographs are portrait originals (500x750). Cropping them to a
   landscape band is what made them look shrunk, so keep them tall. */
.card-media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.card-media .card-body{padding:24px 26px 28px}
.card-tag{font:600 12px/1 DMSans,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-text);margin:0 0 10px}

.split{display:grid;gap:clamp(30px,5vw,64px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
/* Portrait originals again — cap the height so a 500x750 photo doesn't tower
   over the column of text beside it. */
.split img{border-radius:16px;width:100%;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 30%;max-height:560px}

.stat{text-align:center}
.stat img{width:100%;max-width:300px;margin:0 auto 22px;border-radius:12px}
.stat b{display:block;font:800 clamp(46px,7vw,76px)/1 DMSans,sans-serif;color:var(--green)}
.stat span{font:500 15px/1.4 DMSans,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#C6D0EC}

/* Small-icon cards, as under the introduction on the original home page. */
.iconcard{display:flex;gap:18px;align-items:flex-start}
.iconcard img{width:46px;height:46px;flex:none;border-radius:8px}

.ticks{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.ticks li{padding-left:36px;position:relative}
.ticks strong{display:block;font-family:DMSans,sans-serif;color:var(--ink);font-size:18px;margin-bottom:3px}
.ticks li::before{content:"";position:absolute;left:0;top:.3em;width:20px;height:10px;
  border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg)}

/* ---------- pricing cards ---------- */
/* The old pricing page earned its impact from big 800-weight prices, caps
   eyebrows and one visually louder "recommended" card. Same idea, house palette. */
.price-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:0;overflow:hidden;box-shadow:0 10px 30px rgba(12,27,93,.07);display:flex;flex-direction:column}
.price-head{background:var(--navy);color:#fff;padding:22px 28px 20px}
.price-head .card-tag{color:var(--green);margin-bottom:6px}
.price-head h2,.price-head h3{color:#fff;margin:0;font-size:clamp(21px,2.4vw,25px)}
.price-body{padding:24px 28px 30px;display:flex;flex-direction:column;flex:1}
.price-big{font:800 clamp(36px,4.5vw,46px)/1 DMSans,sans-serif;color:var(--green-text);margin:0 0 4px}
.price-big small{font:400 15px/1 Roboto,sans-serif;color:var(--muted)}
.price-sub{color:var(--muted);font-size:15px;margin:0 0 18px}
.price-card .kicker{font:700 12px/1 DMSans,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);margin:18px 0 10px}
.price-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.price-card ul li{padding-left:26px;position:relative}
.price-card ul li::before{content:"";position:absolute;left:2px;top:.44em;width:13px;height:7px;
  border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}
.price-note{margin:18px 0 0;font-size:13.5px;color:var(--muted);font-style:italic}
.price-card.popular{border:2px solid var(--green);box-shadow:0 14px 38px rgba(102,180,3,.18)}
.badge-popular{position:absolute;top:14px;right:14px;background:var(--green);color:#0d2000;
  font:700 11px/1 DMSans,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px}

/* Light green tint for the "good" half of a comparison. */
.card-good{background:#F4FAEA;border-color:var(--green);border-width:2px}

/* ---------- client case studies ---------- */
/* Long-form quotes with the client's own mark inside, as on the original page.
   Full width and stacked — these run to several paragraphs, so columns would
   make them unreadable. */
.studies{margin:44px auto 0;max-width:860px;display:grid;gap:28px}
.study{margin:0;background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:12px;padding:clamp(24px,4vw,38px)}
.study blockquote{margin:0}
.study p{margin:0 0 1.1em;font-size:16px;line-height:1.75}
.study p:last-child{margin-bottom:0}
.study-mark{height:auto;max-width:100%;margin:0 0 20px}
.study-mark + p{margin-top:0}
.study p + .study-mark{margin-top:28px}
.study figcaption{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-family:DMSans,sans-serif;font-size:15px;color:var(--muted)}
.study figcaption strong{color:var(--ink);font-weight:600}

/* ---------- testimonials ---------- */
.quotes{columns:3 300px;column-gap:24px}
.quote{break-inside:avoid;background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:12px;padding:26px 28px;margin:0 0 24px;text-align:center}
.quote blockquote{margin:0 0 16px;font-size:16px;line-height:1.7;color:var(--body)}
.quote cite{display:block;font-style:normal;font-family:DMSans,sans-serif;font-weight:600;color:var(--ink)}
.quote .who{display:block;font-size:14px;color:var(--muted);margin-top:3px}

/* ---------- FAQ ---------- */
/* Built on <details>, so every answer is in the page source whether or not it
   is open. A JS accordion would hide the text from anything that does not run
   scripts — which is the opposite of the point of having an FAQ. */
.faqs{max-width:860px;margin-top:20px}
.faq{background:#fff;border:1px solid var(--line);border-radius:12px;margin:0 0 12px}
.faq[open]{border-color:#C8D3E8;box-shadow:0 6px 20px rgba(12,27,93,.06)}
.faq summary{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  padding:18px 22px;cursor:pointer;list-style:none;
  font:600 17px/1.45 DMSans,sans-serif;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green-text)}
/* The "/ ''" is alternative text for the generated glyph: it marks it decorative
   so screen readers stop appending "plus" or "en dash" to every question, which
   <details>/<summary> already announces properly as expanded/collapsed. The
   first declaration is the fallback for browsers without that syntax. */
.faq summary::after{content:"+";flex:none;font-weight:400;font-size:24px;line-height:1;
  color:var(--green-text);transition:transform .18s}
.faq summary::after{content:"+" / ""}
.faq[open] summary::after{content:"–";transform:rotate(180deg)}
.faq[open] summary::after{content:"–" / ""}
.faq-a{padding:0 22px 20px;border-top:1px solid var(--line);margin-top:-1px}
.faq-a p{margin:16px 0 0;color:var(--body)}

/* ---------- prose (policy pages) ---------- */
.prose{max-width:820px}
.prose h2{margin-top:1.9em}
.prose h3{margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.prose th{background:var(--light);font-family:DMSans,sans-serif;color:var(--ink)}

/* ---------- forms ---------- */
.form{display:grid;gap:18px;max-width:620px}
.field label{display:block;font:500 14px/1 DMSans,sans-serif;color:var(--ink);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;padding:13px 15px;border:1px solid #CBD3E3;
  border-radius:8px;font:400 16px/1.5 Roboto,sans-serif;color:var(--ink);background:#fff}
.field textarea{min-height:170px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--green);outline:none;
  box-shadow:0 0 0 3px rgba(125,201,29,.22)}
.field .hint{font-size:13px;color:var(--muted);margin-top:5px}
.hp{position:absolute;left:-9999px}
.alert{padding:15px 18px;border-radius:8px;font-size:15px;margin:0 0 6px}
.alert-ok{background:#EAF7DC;border:1px solid #A9D96B;color:#33580B}
.alert-bad{background:#FDECEC;border:1px solid #F0B3B3;color:#8C2020}

/* ---------- footer ---------- */
.sitefoot{background:var(--dark);color:#A9B2C6;padding-block:clamp(46px,6vw,72px) 0;margin-top:0}
.foot-top{display:grid;gap:40px;grid-template-columns:minmax(240px,1.2fr) 3fr}
.foot-brand img{width:170px;margin-bottom:18px;filter:brightness(0) invert(1)}
.foot-tag{font-size:15px;line-height:1.65;max-width:34ch;margin:0}
.foot-cols{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.foot-col h2{font:600 13px/1 DMSans,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin:0 0 16px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-col a{color:#A9B2C6;text-decoration:none;font-size:15px}
.foot-col a:hover{color:var(--green)}
.foot-base{margin-top:44px;border-top:1px solid rgba(255,255,255,.1);padding-block:22px;
  font-size:14px;color:#7C869C}
.foot-base p{margin:0}
/* Image licence credit — sits above the copyright line on every page. */
/* #6E788D was 3.9:1 on --dark, under the 4.5:1 AA minimum at 13px — and italic
   small text on top of that. #8A94AA is 5.7:1 and still clearly secondary. */
.foot-credit{font-size:13px;font-style:italic;color:#8A94AA;margin-bottom:10px!important}

/* ---------- responsive ---------- */
/* Adding Pricing and FAQ took the menu to nine items, and At Last to ten. The
   labels are nowrap and the row does not wrap, so between the mobile breakpoint
   and the full width it would push out past the masthead. Tighten the spacing
   through that band rather than drop items out of the menu.

   Ten items no longer fit at the original spacing at ANY width — --wrap caps the
   masthead at 1180px, so a 1920px screen has no more room than a 1280px one.
   That is why the item padding and row gap above came down as well; this band
   goes further still. Measured with all ten items in a browser, not estimated:
   21px spare at 961px, 22px at 1201px, both with the logo at full height. */
@media (min-width:961px) and (max-width:1200px){
  .masthead-inner{gap:12px}
  .brand img{width:110px}
  .nav a,.navtop{padding:10px 5px;font-size:13px}
  .submenu a{padding:10px 12px;font-size:14.5px}
}
@media (max-width:960px){
  .foot-top{grid-template-columns:1fr}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
    cursor:pointer;padding:10px;border-radius:8px}
  /* :not(.sr-only) so the button's visually-hidden "Menu" label is not styled as
     a fourth bar. .burger span would otherwise out-specify .sr-only on height,
     background and display. */
  .burger span:not(.sr-only){display:block;height:2.5px;background:var(--navy);border-radius:2px;transition:.2s}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:0 18px 34px rgba(12,27,93,.1);padding:12px 0 18px}
  /* Toggled by assets/js/nav.js, which also keeps aria-expanded on the button
     in step. This used to be .navtoggle:checked~.nav — a checkbox that could
     not be focused, so the menu had no keyboard path at all. */
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding-inline:clamp(18px,4vw,32px)}
  .nav a,.navtop{padding:13px 6px;font-size:16px;border-bottom:1px solid var(--line)}
  .navtop{width:100%;text-align:left;border-radius:0}
  .submenu{position:static;border:0;box-shadow:none;padding:0 0 0 16px;min-width:0;
    background:var(--light);border-radius:0}
  .quotes{columns:1}
  /* The photo credit comes out of the corner and back into the flow below the
     hero content. Absolutely positioned at bottom:10px it was landing across the
     bottom 18px of the "Contact us" button at 375px — measured, not guessed —
     which put low-contrast italic text over the home page's primary call to
     action and left the credit itself unreadable. In the flow it cannot collide
     with anything, and the attribution stays visible, which is the point of it. */
  .hero .hero-credit{position:static;text-align:left;margin:18px 0 0;
    max-width:var(--wrap);padding-inline:clamp(18px,4vw,32px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}