/* ==========================================================================
   Footer 09 — "Coastal watercolour" (client comp 1672 x 941, 2026-09-28)
   1900 x 900 box. The watercolour is one plate (every word, icon and logo was
   painted out; the beach below the horizon was seam-carved so the comp fits
   900px with 150px of top padding). All copy, icons and logos are live HTML.

   Units
     --s   comp px -> screen px for the CONTENT (1 at 1900+, scales below)
     --u   plate px (1900 x 900 canvas) -> screen px for the ARTWORK
     --L   rail: content spans --L .. (100% - --L), exactly like the hero
   Horizontal content positions are % of the rail-to-rail box, mapped from the
   comp's content span (x 157 .. 1523), so both edges sit on the hero rails.
   ========================================================================== */

@font-face{font-family:"FCS Serif";src:url("../fonts/hero/newsreader-var.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"FCS Serif";src:url("../fonts/hero/newsreader-italic-var.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"FCS Sans";src:url("../fonts/hero/ibm-plex-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}

.fcs{
  --paper:#FAF6EF;
  --navy:#0B2E57;          /* headings, tagline, labels */
  --link:#123F68;          /* links + info text */
  --icon:#0B2A57;
  --rule:rgba(92,134,163,.42);
  --frame:min(100cqw,1900px);
  --rail:170px;
  --L:calc((100cqw - var(--frame)) / 2 + var(--rail));
  --s:calc(var(--frame) / 1900);
  --u:calc(100cqw / 1900);

  position:relative;
  container-type:inline-size;
  background:var(--paper);
  color:var(--navy);
  overflow:hidden;
}
@media (max-width:1450px){ .fcs{--rail:clamp(80px,8.947vw,170px)} }

.fcs *{box-sizing:border-box}
.fcs a{color:inherit;text-decoration:none}
.fcs a:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.fcs a:focus-visible{outline:2px solid #0b6f86;outline-offset:4px;border-radius:2px}
.fcs ul{list-style:none;margin:0;padding:0}
.fcs h3,.fcs p{margin:0}

/* ---------- artwork ---------- */
.fcs__plate{display:block;width:100%;height:auto}
.fcs__scene{display:none}
@media (min-width:1901px){
  .fcs{height:900px}
  .fcs__plate{position:absolute;inset:0;height:100%;object-fit:cover;object-position:center bottom}
}

/* ---------- top content: rail to rail, 150px below the footer top ---------- */
.fcs__inner{
  position:absolute;left:var(--L);right:var(--L);
  top:calc(150 * var(--s));
  height:calc(380 * var(--s));
}
/* comp x -> % of the rail box (content span x 157 .. 1523 = 1366) */
.fcs__inner > *{position:absolute;top:0}

/* logo + tagline + shell ornament (left rail = the tagline's 2nd line) */
.fcs__brand{left:0;width:calc(432 * var(--s));height:calc(376 * var(--s))}
.fcs__logo{
  position:absolute;left:calc(91 * var(--s));top:0;               /* ~12% smaller than the comp's 286x268, same centre */
  width:calc(252 * var(--s));height:calc(236 * var(--s));
  display:grid;place-items:center;overflow:hidden;
  background:#01806E;border-radius:calc(22 * var(--s));
  box-shadow:0 calc(6 * var(--s)) calc(18 * var(--s)) rgba(1,64,56,.16);
}
.fcs__logo img{display:block;height:100%;width:auto}
.fcs__tag{
  position:absolute;left:0;right:0;top:calc(var(--tag-top,247) * var(--s));
  font:italic 400 calc(var(--tag-fs,24.6) * var(--s))/calc(var(--tag-lh,30) * var(--s)) "FCS Serif",Georgia,serif;
  color:var(--navy);text-align:center;white-space:normal;text-wrap:balance;   /* longer client copy: 3 balanced lines */
}
.fcs__orn{
  position:absolute;left:calc(94 * var(--s));top:calc(var(--orn-top,344) * var(--s));
  width:calc(245 * var(--s));height:calc(24 * var(--s));
  display:flex;align-items:center;justify-content:center;color:#025769;
}
.fcs__orn::before,.fcs__orn::after{content:"";height:1px;flex:1;background:currentColor;opacity:.7}
.fcs__orn svg{width:calc(28 * var(--s));height:calc(24 * var(--s));margin:0 calc(12 * var(--s)) 0 calc(13 * var(--s))}

/* columns */
.fcs__col--links{left:calc((706 - 157) / 1366 * 100%)}
.fcs__col--info{left:calc((985 - 157) / 1366 * 100%)}
.fcs__col--social{right:0;width:calc(186 * var(--s))}
.fcs__col--links::before,.fcs__col--info::before,.fcs__col--social::before{
  content:"";position:absolute;top:calc(27 * var(--s));height:calc(320 * var(--s));width:1px;background:var(--rule);
}
/* dividers at comp x 672 / 937 / 1300 (same % map) */
.fcs__col--links::before{left:calc((672 - 706) / 1366 * (100cqw - 2 * var(--L)))}
.fcs__col--info::before{left:calc((937 - 985) / 1366 * (100cqw - 2 * var(--L)))}
.fcs__col--social::before{left:calc(((1300 - 157) / 1366 * (100cqw - 2 * var(--L))) - (100cqw - 2 * var(--L) - 186 * var(--s)))}

.fcs .fcs__h{
  font:600 calc(var(--h-fs,31.5) * var(--s))/1 "FCS Serif",Georgia,serif;
  letter-spacing:-.005em;color:var(--navy);white-space:nowrap;
  margin-top:calc(var(--h-top,29) * var(--s));
}
.fcs .fcs__col--links .fcs__h{margin-left:calc(-1 * var(--s))}

.fcs .fcs__links{
  margin-top:calc(var(--l-gap,13) * var(--s));
  font:400 calc(var(--l-fs,21) * var(--s))/calc(35.4 * var(--s)) "FCS Sans",system-ui,sans-serif;
  color:var(--link);white-space:nowrap;
}
.fcs__links li{padding-left:calc(1 * var(--s))}

.fcs .fcs__info{
  position:relative;margin-top:calc(var(--i-gap,18) * var(--s));
  font:400 calc(var(--i-fs,19.5) * var(--s))/calc(25.5 * var(--s)) "FCS Sans",system-ui,sans-serif;
  color:var(--link);white-space:nowrap;
}
.fcs__info li{position:absolute;left:calc(57 * var(--s));top:calc(var(--t) * var(--s))}
.fcs__info li:nth-child(1){--t:0}
.fcs__info li:nth-child(2){--t:69}
.fcs__info li:nth-child(3){--t:114}
.fcs__info li:nth-child(4){--t:158}
.fcs__info li:nth-child(5){--t:223}
.fcs__ico{
  position:absolute;left:calc(-57 * var(--s));top:calc(var(--it,-2) * var(--s));
  width:calc(var(--iw,21) * 1.12 * var(--s));height:calc(var(--ih,30) * 1.12 * var(--s));
  fill:none;stroke:var(--icon);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible;
}
.fcs__info li:nth-child(2) .fcs__ico{--iw:26;--ih:27;--it:-6;left:calc(-56 * var(--s))}
.fcs__info li:nth-child(3) .fcs__ico{--iw:27;--ih:21;--it:-3;left:calc(-57 * var(--s))}
.fcs__info li:nth-child(4) .fcs__ico{--iw:27;--ih:26;--it:-3;left:calc(-57 * var(--s))}
.fcs__info li:nth-child(1) .fcs__ico,.fcs__info li:nth-child(5) .fcs__ico{left:calc(-54 * var(--s))}

.fcs__social{display:flex;gap:calc(18 * var(--s));margin-top:calc(var(--s-gap,19) * var(--s))}
.fcs__social a{
  width:calc(50 * var(--s));height:calc(50 * var(--s));border-radius:50%;
  display:grid;place-items:center;color:#fff;
  transition:transform .2s ease,filter .2s ease;
}
.fcs__social a:hover{transform:translateY(-2px);filter:brightness(1.12);text-decoration:none}
.fcs__social svg{width:52%;height:52%}
.fcs__fb{background:#1D5C82}
.fcs__ig{background:#0A7F8F}
.fcs__yt{background:#0B3F63}
.fcs__ig svg{width:50%;height:50%}

/* ---------- partner strip: centred in the white band of the plate ---------- */
.fcs__strip{
  position:absolute;left:var(--L);right:var(--L);
  top:calc(100% - (900 - var(--strip-y,739)) * var(--u));
  height:calc(96 * var(--s));
}
.fcs__strip > *{position:absolute;top:0}
.fcs__label{
  display:block;font:500 calc(14.6 * var(--s))/1 "FCS Serif",Georgia,serif;
  letter-spacing:.34em;text-transform:uppercase;color:var(--navy);white-space:nowrap;
  margin-right:-.34em;          /* trailing tracking */
}
.fcs__grp{display:flex;flex-direction:column;align-items:center}
.fcs__grp--powered{left:0}
.fcs__grp--powered img{display:block;height:calc(46 * var(--s));width:auto;margin-top:calc(19 * var(--s))}
.fcs__grp--proud{left:calc((750 - 157) / 1366 * 100%)}
.fcs__grp--proud .fcs__label{letter-spacing:.38em;margin-right:-.38em}
.fcs__grp--proud img{display:block;height:calc(72 * var(--s));width:auto;margin-top:calc(9 * var(--s))}
.fcs__vr{position:absolute;display:block;width:1px;top:calc(14 * var(--s));height:calc(66 * var(--s));background:var(--rule)}
.fcs__vr--a{left:calc((624 - 157) / 1366 * 100%)}
.fcs__vr--b{left:calc((1046 - 157) / 1366 * 100%)}
.fcs__grp--accept{right:0}
.fcs__accept-h{font:400 calc(21 * var(--s))/1 "FCS Serif",Georgia,serif;color:var(--navy);white-space:nowrap}
.fcs__cards{display:flex;gap:calc(16 * var(--s));margin-top:calc(11 * var(--s))}
.fcs__card{
  display:grid;place-items:center;
  width:calc(62 * var(--s));height:calc(42 * var(--s));
  background:#fff;border:1px solid rgba(20,40,60,.22);border-radius:calc(5 * var(--s));
  box-shadow:0 1px 2px rgba(20,40,60,.12);
}
.fcs__card svg{width:78%;height:auto}
.fcs__card--amex{background:#2E77BC;border-color:#2E77BC}
.fcs__card--disc svg{width:84%}
.fcs__card--apay{width:calc(70 * var(--s))}
.fcs__card--apay svg{width:72%}

/* ---------- legal bar (blue wash at the bottom of the plate) ---------- */
.fcs__legal{
  position:absolute;left:var(--L);right:var(--L);
  top:calc(100% - (900 - var(--legal-y,860)) * var(--u));
  display:flex;align-items:center;white-space:nowrap;
  font:400 calc(19.4 * var(--s))/1 "FCS Serif",Georgia,serif;color:#F2F7FA;
  text-shadow:0 1px 2px rgba(10,50,80,.25);
}
.fcs__legal ul{display:flex;align-items:center;margin-left:calc(91 * var(--s))}
.fcs__legal li{display:flex;align-items:center}
.fcs__legal li::before{content:"";width:1px;height:calc(28 * var(--s));background:rgba(242,247,250,.75);margin-right:calc(89 * var(--s))}
.fcs__legal li+li::before{margin-left:calc(57 * var(--s));margin-right:calc(57 * var(--s))}

/* ==========================================================================
   Stacked (tablet + phone)
   ========================================================================== */
@media (max-width:1200px){
  .fcs{padding-top:150px;--rail:clamp(80px,8.947vw,170px);display:flex;flex-direction:column}
  .fcs__inner{order:1}.fcs__scene{order:2}.fcs__strip{order:3}.fcs__legal{order:4}
  .fcs__plate{display:none}
  .fcs__inner,.fcs__inner > *,.fcs__strip,.fcs__strip > *,.fcs__legal,.fcs__info li,.fcs__ico,.fcs__logo,.fcs__tag,.fcs__orn{position:static;transform:none}
  .fcs__inner{height:auto;padding:0 var(--rail);display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:44px 48px}
  .fcs__col::before{display:none}
  .fcs__brand{grid-column:1/-1;width:auto;height:auto;display:flex;flex-direction:column;align-items:center;gap:20px}
  .fcs__logo{width:155px;height:145px;border-radius:14px}
  .fcs__tag{font-size:22px;line-height:1.35;white-space:normal}
  .fcs__orn{width:220px;height:22px}
  .fcs__orn svg{width:26px;height:22px}
  .fcs__col--social{width:auto}
  .fcs .fcs__h{font-size:26px;margin:0 0 14px}
  .fcs .fcs__col--links .fcs__h{margin-left:0}
  .fcs .fcs__links{margin:0;font-size:18px;line-height:1.95}
  .fcs .fcs__info{margin:0;font-size:18px;line-height:1.4;display:grid;gap:14px}
  .fcs__info li{display:grid;grid-template-columns:26px 1fr;column-gap:14px;align-items:start}
  .fcs__ico{width:24px;height:24px}
  .fcs__social{margin:0;gap:14px}
  .fcs__social a{width:48px;height:48px}

  .fcs__scene{display:block;width:100%;height:auto;margin-top:28px}
  .fcs__strip{height:auto;margin-top:-1px;padding:18px var(--rail) 26px;
    background:linear-gradient(180deg,var(--band-top,#F1F8FA),var(--band-bot,#DEEEF3));
    display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:24px 56px}
  .fcs__vr{display:none}
  .fcs__label{font-size:12.5px}
  .fcs__grp--powered img{height:40px;margin-top:12px}
  .fcs__grp--proud img{height:62px;margin-top:8px}
  .fcs__accept-h{font-size:18px}
  .fcs__cards{margin-top:10px;gap:10px;flex-wrap:wrap;justify-content:center}
  .fcs__card{width:58px;height:39px;border-radius:5px}
  .fcs__card--apay{width:64px}
  .fcs__legal{background:#3F7FA3 url("../img/footer-coast/bar.webp") center/cover no-repeat;
    padding:24px var(--rail) 28px;flex-wrap:wrap;justify-content:center;gap:10px 0;
    font-size:15.5px;white-space:normal;text-align:center}
  .fcs__legal p{width:100%}
  .fcs__legal ul{margin:0;flex-wrap:wrap;justify-content:center}
  .fcs__legal li::before{height:16px;margin:0 18px}
  .fcs__legal li:first-child::before{display:none}
}
@media (max-width:900px){
  .fcs{--rail:24px}
  .fcs__inner{grid-template-columns:1fr 1fr;justify-content:stretch;gap:36px 28px}
  .fcs__col--info{grid-column:1/-1;order:3}
}
@media (max-width:560px){
  .fcs{padding-top:96px}
  .fcs__inner{grid-template-columns:1fr}
  .fcs__col--info{grid-column:auto}
  .fcs__strip{flex-direction:column;align-items:center;gap:22px}
}

/* Seat the footer on the section above (2026-09-28): section 07 (.gsb) ends with 150px of empty padding under art that
   already carries its own ~30px of fade, so the page showed ~195px of bare cream before the footer sky. With the
   padding dropped, the two watercolour washes meet over ~45px of cream and the footer keeps its own 150px top pad. */
main:has(+ footer.fcs) > .gsb:last-child{padding-bottom:0}

/* Top padding = 150px at every width (client 2026-09-28). The box used to scale as a whole below 1900px, so the gap
   above the logo shrank with it (114px at 1440). Content now starts 150px down at every desktop width; the artwork
   moves down by the same amount so the tagline keeps its place over the fence-post sandpiper, and the extra space
   is plain page cream (the plate's top edge is already cream). Stacked layouts get the same 150px. */
@media (min-width:1201px){
  .fcs .fcs__inner{top:150px}
}

/* 900px tall at every desktop width (client 2026-09-28). plate-tall-*.webp = the same artwork with 524px of extra sky on
   top (1900 x 1424); it is width-scaled and pinned to the bottom, so beach, partner band and legal bar keep their
   positions (they are placed from the bottom in --u) and narrower screens simply show more sky. The top edge fades into
   the page cream here (it used to be baked into the 900px plate). */
@media (min-width:1201px){
  .fcs{height:900px}
  /* plate-wide-*.webp: 2700 wide (the 1900 artwork + 400px outpainted each side). The artwork scales with the page up to
     1900px, stays at its 1900 size from 1900 to 2700 (the extra sides show), and only grows again beyond 2700. */
  .fcs{--u:max(calc(min(100cqw,1900px) / 1900), calc(100cqw / 2700))}
  .fcs .fcs__plate{position:absolute;top:auto;right:auto;left:50%;bottom:0;width:calc(2700 * var(--u));max-width:none;height:auto;margin:0;object-fit:fill;translate:-50% 0;z-index:0}
  .fcs::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:90px;pointer-events:none;
    background:linear-gradient(to bottom,#FAF6EF 0%,rgba(250,246,239,.97) 15%,rgba(250,246,239,.84) 32%,rgba(250,246,239,.6) 50%,rgba(250,246,239,.33) 68%,rgba(250,246,239,.11) 85%,rgba(250,246,239,0) 100%)}
  .fcs .fcs__inner,.fcs .fcs__strip,.fcs .fcs__legal{z-index:2}
  /* dark blue rule along the top edge of the partner band (plate row 726) */
  .fcs::after{content:"";position:absolute;z-index:2;left:0;right:0;height:2px;background:#0B2E57;
    top:calc(100% - (900 - 726) * var(--u) - 1px);pointer-events:none}
}
@media (max-width:1200px){ .fcs .fcs__strip{border-top:2px solid #0B2E57} }
@media (max-width:1200px){ .fcs{padding-top:150px} }