/* MARSIV LTD - colour layer. Loaded after marsiv.css. */

:root{
  --ms-yellow:#3DCFB3; /* brand mint (was yellow) */
}

/* accents on the existing three sections */
.ms-label--accent{ color:var(--ms-accent); }
.ms-hl{ color:var(--ms-accent); }
.ms-hero .ms-hero__rule{ height:4px; }
.ms-statement__grid{ border-top:4px solid var(--ms-accent); }
.ms-sec-head{ border-top:4px solid var(--ms-accent); }
.ms-dark .ms-sec-head,.ms-blue .ms-sec-head{ border-top-color:var(--ms-yellow); }
.ms-card:hover{ border-color:var(--ms-accent); }
.ms-card__body{ border-left:4px solid transparent; transition:border-color .3s var(--ms-ease); }
.ms-card:hover .ms-card__body{ border-left-color:var(--ms-yellow); }

/* buttons */
.ms-btn--dark{ background:var(--ms-ink); color:#fff; border-color:var(--ms-ink); }
.ms-btn--dark:hover,.ms-btn--dark:focus-visible{ background:var(--ms-accent); border-color:var(--ms-accent); color:#fff; }
.ms-btn--onDark{ background:var(--ms-yellow); color:var(--ms-ink); border-color:var(--ms-yellow); }
.ms-btn--onDark:hover,.ms-btn--onDark:focus-visible{ background:#fff; border-color:#fff; color:var(--ms-ink); }

/* work gallery */
.ms-work{ padding-block:var(--ms-section); background:var(--ms-white); }
.ms-work__grid{ display:grid; grid-template-columns:1fr; gap:var(--ms-gap); }
@media (min-width:760px){ .ms-work__grid{ grid-template-columns:repeat(3,1fr); } }
.ms-work__item{ display:flex; flex-direction:column; gap:14px; }
.ms-work__media{ overflow:hidden; height:clamp(230px,26vw,340px); background:var(--ms-rule); }
.ms-work__media img{ width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ms-ease); }
.ms-work__item:hover .ms-work__media img{ transform:scale(1.045); }
.ms-work__cap{ display:flex; align-items:center; gap:10px; }
.ms-work__dot{ width:10px; height:10px; background:var(--ms-accent); flex:none; }

/* dark band */
.ms-dark{ background:var(--ms-ink); color:#fff; padding-block:var(--ms-section); }
.ms-dark .ms-body{ color:rgba(255,255,255,.72); }
.ms-dark .ms-label{ color:var(--ms-yellow); }
.ms-dark__grid{ display:grid; grid-template-columns:1fr; gap:clamp(26px,3.5vw,56px); border-top:4px solid var(--ms-yellow); padding-top:clamp(28px,3.2vw,48px); }
@media (min-width:900px){ .ms-dark__grid{ grid-template-columns:7fr 4fr; gap:clamp(48px,6vw,110px); align-items:start; } }

/* blue process band */
.ms-blue{ background:var(--ms-accent-dark); color:#fff; padding-block:var(--ms-section); }
.ms-blue .ms-body{ color:rgba(255,255,255,.85); }
.ms-blue .ms-label{ color:var(--ms-yellow); }
.ms-blue .ms-h2{ color:#fff; }
.ms-steps{ display:grid; grid-template-columns:1fr; gap:clamp(28px,3vw,44px); }
@media (min-width:760px){ .ms-steps{ grid-template-columns:repeat(3,1fr); } }
.ms-step{ border-top:2px solid rgba(255,255,255,.35); padding-top:20px; display:flex; flex-direction:column; gap:10px; }
.ms-step__n{ font-size:clamp(2.1rem,3.3vw,2.9rem); line-height:1; font-weight:700; letter-spacing:-.03em; color:var(--ms-yellow); }
.ms-step__t{ font-size:clamp(1.05rem,1.4vw,1.25rem); font-weight:600; letter-spacing:-.02em; color:#fff; }
.ms-step__d{ font-size:1rem; line-height:1.58; color:rgba(255,255,255,.85); }

/* areas */
.ms-areas{ background:var(--ms-paper); padding-block:var(--ms-section); }
.ms-areas__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--ms-gap); list-style:none; margin:0; padding:0; }
@media (min-width:760px){ .ms-areas__list{ grid-template-columns:repeat(4,1fr); } }
.ms-areas__list li{ border-top:1px solid var(--ms-rule); padding:15px 0; font-size:1.0625rem; font-weight:500; display:flex; align-items:center; gap:12px; }
.ms-areas__list li::before{ content:""; width:8px; height:8px; background:var(--ms-yellow); flex:none; }

/* yellow cta */
.ms-cta{ background:var(--ms-yellow); color:var(--ms-ink); padding-block:var(--ms-section); }
.ms-cta .ms-body{ color:rgba(17,17,19,.78); }
.ms-cta .ms-h2{ color:var(--ms-ink); }
.ms-cta__grid{ display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,64px); border-top:4px solid var(--ms-ink); padding-top:clamp(28px,3.2vw,48px); }
@media (min-width:900px){ .ms-cta__grid{ grid-template-columns:7fr 5fr; align-items:start; } }
.ms-cta__contact{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.ms-cta__link{ font-size:clamp(1.05rem,1.4vw,1.25rem); font-weight:600; letter-spacing:-.01em; color:var(--ms-ink); border-bottom:2px solid rgba(17,17,19,.25); padding-bottom:2px; width:fit-content; transition:border-color .25s var(--ms-ease),color .25s var(--ms-ease); }
.ms-cta__link:hover{ color:var(--ms-accent); border-color:var(--ms-accent); }

/* footer */
.ms-footer{ background:var(--ms-ink); color:rgba(255,255,255,.62); padding-block:clamp(44px,5vw,72px); font-size:.9375rem; }
.ms-footer__grid{ display:grid; grid-template-columns:1fr; gap:30px; }
@media (min-width:760px){ .ms-footer__grid{ grid-template-columns:2fr 1fr 1fr; gap:48px; } }
.ms-footer__brand{ font-size:1.25rem; font-weight:700; letter-spacing:-.02em; color:#fff; margin-bottom:10px; }
.ms-footer__h{ font-size:.6875rem; text-transform:uppercase; letter-spacing:.11em; font-weight:600; color:var(--ms-yellow); margin-bottom:14px; }
.ms-footer ul{ list-style:none; margin:0; padding:0; }
.ms-footer li{ margin-bottom:8px; }
.ms-footer a{ color:rgba(255,255,255,.72); transition:color .25s var(--ms-ease); }
.ms-footer a:hover{ color:var(--ms-yellow); }
.ms-footer__legal{ margin-top:clamp(30px,3.4vw,46px); padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-size:.8125rem; line-height:1.65; color:rgba(255,255,255,.5); max-width:80ch; }


/* ---------------------------------------------------------- fixes --- */
/* .ms a{color:inherit} is (0,0,1,1) and was beating the button colour
   modifiers at (0,0,1,0), so button labels inherited the band colour
   (black text on a black button). Raise specificity with a.<modifier>. */
.ms a.ms-btn--solid,.ms a.ms-btn--solid:visited{ color:#fff; }
.ms a.ms-btn--solid:hover,.ms a.ms-btn--solid:focus-visible{ color:#fff; }
.ms a.ms-btn--line,.ms a.ms-btn--line:visited{ color:var(--ms-ink); }
.ms a.ms-btn--line:hover,.ms a.ms-btn--line:focus-visible{ color:#fff; }
.ms a.ms-btn--dark,.ms a.ms-btn--dark:visited{ color:#fff; }
.ms a.ms-btn--dark:hover,.ms a.ms-btn--dark:focus-visible{ color:#fff; }
.ms a.ms-btn--onDark,.ms a.ms-btn--onDark:visited{ color:var(--ms-ink); }
.ms a.ms-cta__link,.ms a.ms-cta__link:visited{ color:var(--ms-ink); }
.ms a.ms-cta__link:hover{ color:var(--ms-accent); }

/* theme italicises figcaption */
.ms figure,.ms figcaption{ margin:0; font-style:normal; }
.ms-work__cap,.ms-work__cap *{ font-style:normal; }

/* ------------------------------------------------ global footer (all pages) --- */
.ms-footer--global{ margin:0; }
.ms-footer__logo{ display:block; width:190px; max-width:100%; height:auto; margin-bottom:18px; }
@media (min-width:760px){ .ms-footer__grid{ grid-template-columns:1.6fr 1fr 1.2fr 1.4fr; gap:40px; } }
.ms-footer p{ margin:0; }
.ms-footer__list li{ line-height:1.5; }
.ms-footer__addr{ font-style:normal; line-height:1.6; color:rgba(255,255,255,.72); }
.ms-footer a.ms-footer__strong{ color:#fff; font-weight:600; }
.ms-footer a.ms-footer__strong:hover{ color:var(--ms-yellow); }

/* --------------------------------------------------------- contact page --- */
.ms-page-hero{ background:var(--ms-paper); padding-block:clamp(64px,8vw,112px) clamp(48px,6vw,80px); border-bottom:1px solid var(--ms-rule); }
.ms-page-hero .ms-container{ display:flex; flex-direction:column; gap:clamp(16px,2vw,22px); }
.ms-page-hero .ms-display{ max-width:18ch; }
.ms-contact{ padding-block:var(--ms-section); background:var(--ms-white); }
.ms-contact__grid{ display:grid; grid-template-columns:1fr; gap:clamp(36px,4.5vw,72px); border-top:4px solid var(--ms-accent); padding-top:clamp(28px,3.2vw,48px); }
@media (min-width:900px){ .ms-contact__grid{ grid-template-columns:5fr 7fr; align-items:start; } }
.ms-contact__list{ display:flex; flex-direction:column; }
.ms-contact__item{ display:flex; flex-direction:column; gap:8px; padding-block:20px; border-bottom:1px solid var(--ms-rule); }
.ms-contact__item:first-child{ padding-top:0; }
.ms-contact__value{ font-size:clamp(1.15rem,1.6vw,1.4rem); font-weight:600; letter-spacing:-.015em; color:var(--ms-ink); line-height:1.35; font-style:normal; }
.ms a.ms-contact__value{ color:var(--ms-ink); transition:color .25s var(--ms-ease); }
.ms a.ms-contact__value:hover{ color:var(--ms-accent); }
.ms-contact__note{ font-size:.875rem; color:var(--ms-ink-45); }
.ms-contact .ms-actions{ margin-top:28px; }
.ms-contact__map{ position:relative; height:clamp(320px,38vw,480px); background:var(--ms-rule); border:1px solid var(--ms-rule); }
.ms-contact__map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.ms-footer--global .ms-footer__legal{ max-width:none; }
.ms-footer--global .ms-footer__logo{ width:160px; }
