/* ---------------------------------------------------------------------------
   Moss Capital.

   One committed palette rather than a light and a dark. A lender's website
   should look the same to every visitor, so nothing here follows the viewer's
   operating system; every colour is painted explicitly.

   The neutrals are biased green because the name is Moss, and the single
   accent is brass -- the colour of the plate beside a Georgian door, which is
   about the right register for the business.
--------------------------------------------------------------------------- */

:root {
  --ink:        #0F1E19;   /* deep moss-black: hero grounds, headings */
  --ink-soft:   #1B2E27;   /* raised panels on the dark ground */
  --paper:      #F7F5F0;   /* warm stone: the page itself */
  --paper-deep: #EDEAE2;   /* alternating band */
  --slate:      #4A5B54;   /* secondary text on paper */
  --brass:      #A9873F;   /* the one accent */
  --brass-lift: #C6A45C;   /* brass on dark ground, where it needs to lift */
  --rule:       #D8D3C8;   /* hairlines on paper */
  --rule-dark:  #2F4137;   /* hairlines on ink */

  --display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Photographs are held back a little so they sit with the palette rather than
     shouting over it -- but only a little. Desaturating alone goes lifeless, so
     a touch of contrast puts the depth back. Applied to every photograph on the
     site from here, so the treatment stays consistent. */
  --photo-filter: saturate(0.94) contrast(1.06);

  --measure: 34rem;        /* ~65 characters of running text */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --shell: 74rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* --- shared furniture ---------------------------------------------------- */

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

.label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.25rem;
}

.band .label { color: var(--brass); }
.ink .label { color: var(--brass-lift); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  text-wrap: balance;
  letter-spacing: -0.015em;
  margin: 0;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.15;
}

h3 {
  font-size: 1.3125rem;
  line-height: 1.3;
}

p { margin: 0 0 1.15rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  line-height: 1.55;
  color: var(--slate);
}

section { padding-block: clamp(3.25rem, 6.5vw, 5.25rem); }

/* --- masthead ------------------------------------------------------------ */

.masthead {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 3;
  padding-block: 1.75rem;
}

.masthead .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* The monogram is set as live text rather than placed as an image: the same
   Georgia letterforms as the wordmark beside it, so the two cannot drift, and
   crisp at any size without a second request or a 2x asset. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.brand-mark {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.01em;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--brass-lift);
  color: var(--paper);
}

.brand-mark em { font-style: normal; color: var(--brass-lift); }

.wordmark {
  font-family: var(--display);
  font-size: 1.3125rem;
  letter-spacing: 0.02em;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark span { color: var(--brass-lift); }

.masthead nav {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.masthead a.contact {
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 245, 240, 0.35);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: border-color 0.2s ease;
}

.masthead a.contact:hover { border-color: var(--brass-lift); }

/* --- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(9rem, 20vw, 13rem) clamp(4.5rem, 10vw, 7rem);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Relative to this stylesheet, which lives in assets/. */
  background-image: url("img/hero-welding.jpg");
  background-size: cover;
  background-position: center 40%;
  /* At 0.32 the photograph was unreadable -- a dark smudge that could have been
     anything. The work only earns its place if you can see what it is. */
  opacity: 0.65;
}

/* Weighted hard to the left, so the headline sits on near-solid ink whilst the
   mask, the torch and the sparks stay legible on the right. Four stops rather
   than three: a straight ramp either buries the sparks or lets the jacket come
   up behind the first line of the heading. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(15, 30, 25, 0.95) 0%,
    rgba(15, 30, 25, 0.88) 30%,
    rgba(15, 30, 25, 0.52) 64%,
    rgba(15, 30, 25, 0.22) 100%);
}

.hero .shell { position: relative; z-index: 2; }

.hero h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.25rem);
  line-height: 1.06;
  max-width: 17ch;
  margin-bottom: 1.75rem;
}

.hero .lede {
  color: rgba(247, 245, 240, 0.82);
  max-width: 38rem;
}

.hero-rule {
  width: 3.5rem;
  height: 2px;
  background: var(--brass-lift);
  margin-bottom: 2.25rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.5rem;
}

.btn {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary { background: var(--brass); color: #1A1206; border-color: var(--brass); }
.btn-primary:hover { background: var(--brass-lift); border-color: var(--brass-lift); }

.btn-ghost { color: var(--paper); border-color: rgba(247, 245, 240, 0.4); }
.btn-ghost:hover { border-color: var(--paper); background: rgba(247, 245, 240, 0.08); }

/* --- the argument -------------------------------------------------------- */

.argument .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}

@media (min-width: 60rem) {
  .argument .shell { grid-template-columns: 1fr 1fr; align-items: start; }
}

.argument .pull {
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.4;
  color: var(--ink);
  border-left: 2px solid var(--brass);
  padding-left: 1.5rem;
  max-width: none;
}

/* --- facilities ---------------------------------------------------------- */

.band { background: var(--paper-deep); }

.facilities {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 3rem;
}

@media (min-width: 48rem) {
  .facilities { grid-template-columns: 1fr 1fr; }
}

/* Three across where the content is a three-part sequence rather than a pair. */
@media (min-width: 56rem) {
  .facilities.three { grid-template-columns: repeat(3, 1fr); }
}

.facility {
  background: var(--paper);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}

.facility h3 { margin-bottom: 0.875rem; }
.facility p { color: var(--slate); }

.facility ul {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.facility li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--slate);
  display: flex;
  gap: 0.75rem;
}

.facility li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.6rem;
  background: var(--brass);
}

/* --- how we assess ------------------------------------------------------- */

.ink {
  background: var(--ink);
  color: var(--paper);
}

/* A dark band with a photograph behind it, rather than a field of flat colour.
   Held well back -- this is depth and texture, not a picture to be looked at,
   and the five Cs still have to be readable across it. */
.ink.textured {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ink.textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--img);
  background-size: cover;
  background-position: center 55%;
  opacity: 0.28;
  filter: var(--photo-filter);
}

.ink.textured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg,
    rgba(15, 30, 25, 0.86) 0%,
    rgba(15, 30, 25, 0.72) 45%,
    rgba(15, 30, 25, 0.88) 100%);
}

.ink h2 { color: var(--paper); }
.ink .lede { color: rgba(247, 245, 240, 0.72); }

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 3.25rem;
  border-top: 1px solid var(--rule-dark);
}

/* Five, not four, and not a sequence -- the C's are criteria weighed together,
   so they get equal columns and no numbering. auto-fit rather than repeat(5)
   keeps them from being crushed on a medium screen: five columns on a wide
   display, three then one as it narrows. */
@media (min-width: 52rem) {
  .steps {
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    column-gap: 1.75rem;
    border-top: none;
  }
}

.step {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule-dark);
}

@media (min-width: 52rem) {
  .step {
    padding: 1.5rem 0 0;
    border-bottom: none;
    border-top: 2px solid var(--brass-lift);
  }
}

.step h3 { color: var(--paper); margin-bottom: 0.6rem; font-size: 1.1875rem; }
.step p { color: rgba(247, 245, 240, 0.7); font-size: 0.9375rem; max-width: none; }

/* --- sectors ------------------------------------------------------------- */

.sectors {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin-top: 3rem;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

@media (min-width: 46rem) {
  .sectors { grid-template-columns: repeat(3, 1fr); }
}

/* Every column carries the same gutter, so the three photographs are genuine
   equal thirds of the page. Insetting the outer two to the shell's edge, which
   is what this did before, squeezed them whilst the middle one kept its full
   third -- narrow, wide, narrow, and the text beneath ragged to match. */
.sector { padding-inline: var(--gutter); }

.sector figure { margin: 0 calc(-1 * var(--gutter)); }

.sector img {
  width: 100%;
  /* Taller, and edge to edge: at 13rem in a padded column these read as
     thumbnails rather than photographs. */
  height: 17rem;
  object-fit: cover;
  filter: var(--photo-filter);
}

.sector h3 {
  font-size: 1.125rem;
  margin: 1.125rem 0 0.4rem;
}

.sector p {
  font-size: 0.9375rem;
  color: var(--slate);
  max-width: none;
}

/* --- contact ------------------------------------------------------------- */

.contact-block .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  /* Stretch rather than centre, so the photograph fills the band instead of
     sitting as a short letterbox in the middle of it. */
  align-items: stretch;
}

/* The text column then has to centre itself, which the grid was doing before. */
.contact-block .shell > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 56rem) {
  .contact-block .shell { grid-template-columns: 1.1fr 0.9fr; }
}

.contact-block img {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
  filter: var(--photo-filter);
}

.address-line {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  margin: 1.5rem 0 0;
}

.address-line a { color: var(--ink); text-decoration-color: var(--brass); text-underline-offset: 4px; }

/* --- the closing call to action ------------------------------------------ */

/* A full-width band at the foot of every page: the argument on the left, the
   form on the right, a photograph behind the whole thing. */
.cta { position: relative; overflow: hidden; isolation: isolate; }

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--img);
  background-size: cover;
  background-position: center 40%;
  opacity: 0.42;
  filter: var(--photo-filter);
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg,
    rgba(15, 30, 25, 0.95) 0%,
    rgba(15, 30, 25, 0.88) 42%,
    rgba(15, 30, 25, 0.80) 100%);
}

.cta .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

@media (min-width: 58rem) {
  .cta .shell { grid-template-columns: 0.9fr 1.1fr; }
}

.cta h2 { color: var(--paper); margin-bottom: 1rem; }
.cta p { color: rgba(247, 245, 240, 0.78); }

.cta .address-line { margin-top: 1.75rem; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); }
.cta .address-line a { color: var(--paper); text-decoration-color: var(--brass-lift); }

/* --- enquiry form -------------------------------------------------------- */

.enquiry { display: grid; gap: 1.5rem; }

.enquiry .row { display: grid; gap: 1.5rem; }

@media (min-width: 34rem) {
  .enquiry .row { grid-template-columns: 1fr 1fr; }
}

.enquiry label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-lift);
  margin-bottom: 0.5rem;
}

/* Ruled rather than boxed. A row of outlined boxes on a dark ground reads as a
   tax return; a hairline under each field belongs with the rest of the page. */
.enquiry input,
.enquiry textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--paper);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(247, 245, 240, 0.28);
  border-radius: 0;
  padding: 0.5rem 0 0.6rem;
  transition: border-color 0.2s ease;
}

.enquiry input:hover,
.enquiry textarea:hover { border-bottom-color: rgba(247, 245, 240, 0.5); }

.enquiry input:focus,
.enquiry textarea:focus {
  border-bottom-color: var(--brass-lift);
  outline: none;
}

.enquiry textarea { min-height: 5.5rem; resize: vertical; }

.enquiry button[disabled] { opacity: 0.55; cursor: default; }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields but fill everything they can reach. */
.enquiry .trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry .actions { margin-top: 0.5rem; }

.enquiry-note {
  margin: 0;
  font-size: 0.9375rem;
  min-height: 1.4rem;
  max-width: none;
}

.enquiry-note.ok { color: var(--brass-lift); }
.enquiry-note.bad { color: #E8A08F; }

/* --- footer -------------------------------------------------------------- */

footer {
  background: var(--ink);
  color: rgba(247, 245, 240, 0.62);
  font-size: 0.8125rem;
  line-height: 1.7;
  padding-block: 3.5rem 3rem;
}

footer .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 46rem) {
  footer .shell { grid-template-columns: 1.3fr 1fr; }
}

footer .wordmark { font-size: 1.1875rem; }

footer p { max-width: 32rem; margin-bottom: 0.9rem; }

footer a { color: rgba(247, 245, 240, 0.85); }

.notice {
  border-top: 1px solid var(--rule-dark);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}

.needs-detail {
  border-bottom: 1px dashed var(--brass-lift);
  color: var(--brass-lift);
}

/* --- services page ------------------------------------------------------- */

/* A shorter hero than the home page: this is the second thing somebody reads,
   not the first, so it states the subject and gets out of the way. */
.hero-short { padding-block: clamp(8rem, 16vw, 10rem) clamp(3.5rem, 7vw, 5rem); }
/* Same reasoning as the home hero: at 0.28 the assembly line was a smudge.
   The four-stop gradient is inherited from .hero, so only the veil changes. */
.hero-short::before { background-image: url("img/services-hero.jpg"); opacity: 0.62; }
.hero-short h1 { font-size: clamp(2.1rem, 5vw, 3.25rem); max-width: 20ch; }

/* Heading and call to action on one line where there is room, stacked where
   there is not. The button aligns to the baseline of the last line rather than
   floating in the middle of a two-line heading. */
.hero-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}

.hero-head h1 { margin-bottom: 0; }
.hero-head .btn { flex: none; }

/* Image-led cards: the photograph is the card, the name and one sentence sit
   over it. Two large ones for the two kinds of capital, then a row of three
   smaller ones for how the work actually goes. */
/* Full-bleed, breaking out of the shell, with a hairline gap rather than a
   margin. Tiles floating in a field of flat colour are what made the page feel
   empty; edge to edge, the photographs become the page rather than decoration
   sitting on it. */
.offers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin-top: 3rem;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

@media (min-width: 52rem) {
  .offers.pair { grid-template-columns: 1fr 1fr; }
  .offers.trio { grid-template-columns: repeat(3, 1fr); }
}

/* The text inside a full-bleed card still wants to line up with the prose
   above it, so the outer cards are padded to meet the shell. */
@media (min-width: 52rem) {
  .offers > .offer:first-child { padding-left: max(var(--gutter), calc(50vw - var(--shell) / 2 + var(--gutter))); }
  .offers > .offer:last-child { padding-right: max(var(--gutter), calc(50vw - var(--shell) / 2 + var(--gutter))); }
}

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 20rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  overflow: hidden;
  color: var(--paper);
  isolation: isolate;
}

.offers.trio .offer { min-height: 15rem; }
.offers.tall .offer { min-height: 30rem; }

/* The list inside an image card. Hairlines rather than bullets: a dot on a
   photograph reads as dirt on the lens. */
.offer-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(198, 164, 92, 0.35);
}

.offer-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(247, 245, 240, 0.14);
  font-size: 0.875rem;
  color: rgba(247, 245, 240, 0.86);
}

.offer-list li:last-child { border-bottom: none; }

.offer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Each card sets --img inline; keeping it a custom property means the
     photograph travels with the markup rather than needing a class per card. */
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  filter: var(--photo-filter);
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Weighted to the foot, where the words are: legible over the picture without
   flattening the whole image into a grey rectangle. */
.offer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Heavier than it first was. These cards carry a heading, a paragraph and in
     one case a five-item list, all sitting directly on a photograph -- the
     picture has to give way to the words rather than compete with them. */
  background: linear-gradient(to top,
    rgba(15, 30, 25, 0.95) 0%,
    rgba(15, 30, 25, 0.90) 45%,
    rgba(15, 30, 25, 0.72) 78%,
    rgba(15, 30, 25, 0.55) 100%);
}

.offer:hover::before { transform: scale(1.03); }

.offer h3 {
  color: var(--paper);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  margin-bottom: 0.6rem;
}

.offers.trio .offer h3 { font-size: 1.25rem; }

.offer p {
  margin: 0;
  max-width: 32ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.86);
}

.offer .tag {
  position: absolute;
  top: clamp(1.75rem, 3vw, 2.5rem);
  left: clamp(1.75rem, 3vw, 2.5rem);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-lift);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}