/* moSushi CI, screen. Tokens and the shared components both proposals
   answer to. Values taken from corporate_identity.json ->
   digital_design_system and from the Infrastructure Dashboard, which is
   the proven implementation. Nothing below references a raw colour
   outside :root. */

@font-face{font-family:"Jost";font-style:normal;font-weight:400 800;
  font-display:swap;src:url("jost.woff2") format("woff2")}
@font-face{font-family:"Source Sans";font-style:normal;font-weight:400;
  font-display:swap;src:url("ss3-400.woff2") format("woff2")}
@font-face{font-family:"Source Sans";font-style:normal;font-weight:600 800;
  font-display:swap;src:url("ss3-600.woff2") format("woff2")}
/* Handwriting for polaroid annotations only. Candidate face, SIL OFL,
   self-hosted. Never the logo script. */
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;
  font-display:swap;src:url("caveat.ttf") format("truetype")}

:root{
  --teal:#1cabab; --teal-bright:#2fdada; --teal-deep:#20b6b6;
  --green:#85d826; --coral:#d65050;
  --ink:#231f20; --grey:#808080; --grey-l:#b2b2b2; --mo-grey:#b2b2b2;
  --paper:#ffffff; --surf:#ffffff; --surf-sunk:#fafafa;
  --hair:rgba(35,31,32,.10);
  --sh:0 1px 2px rgba(35,31,32,.05), 0 4px 12px rgba(35,31,32,.09);
  --sh-lift:0 2px 5px rgba(35,31,32,.07), 0 12px 26px rgba(35,31,32,.13);
  --logo-sh:0 3px 5px rgba(0,0,0,.13);
  --mast:var(--teal-bright); --deck:var(--teal-bright); --deck-ink:#04211f;

  /* --vw is pinned to the floor by the freeze script below the floor width,
     so every clamp() keeps its proportion inside a scaled layout. */
  --vw:1vw;
  --logo-h:clamp(66px,calc(9.35 * var(--vw)),101px);
  --logo-over:calc(var(--logo-h) * .40);
  --mh-pad:14px;
  --r:clamp(6px,calc(.68 * var(--vw)),12px);
  --pm:clamp(3px,calc(.35 * var(--vw)),5px);   /* photo print margin */
  --pr:clamp(1.5px,calc(.2 * var(--vw)),3px);  /* photo print corner */
  --pad:clamp(16px,calc(3 * var(--vw)),34px);
  --wrap:1160px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--surf);color:var(--ink);
  font-family:"Source Sans","Helvetica Neue",Arial,"Liberation Sans",sans-serif;
  font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--teal-deep)}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
p{margin:0 0 1em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* Masthead and the cut. Logo hangs 40% of its height below the teal. */
.masthead{background:var(--mast);position:relative}
.mh-inner{width:100%;max-width:var(--wrap);margin:0 auto;
  padding:var(--mh-pad) var(--pad);display:flex;align-items:flex-end;gap:14px 30px}
.logo{height:var(--logo-h);width:auto;display:block;
  margin-bottom:calc((var(--logo-over) + var(--mh-pad)) * -1);
  position:relative;z-index:3;filter:drop-shadow(var(--logo-sh))}
.mh-title-row{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  height:var(--logo-over);display:flex;align-items:center;gap:18px}
/* the claim: Source Sans, slimmer than display, mo-grey, gap to the logo halved */
.mh-title{margin-left:calc(var(--logo-h) * 3.7 + 11px);
  font-size:clamp(13px,calc(1.35 * var(--vw)),19px);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mo-grey);white-space:nowrap}

/* Small-caps tag: the workhorse secondary type under every section title. */
.tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
/* Section heading with the ink rule. */
.sec{display:flex;align-items:center;gap:14px;font-size:clamp(22px,calc(2.4 * var(--vw)),30px);
  font-weight:800;line-height:1.15;margin:0 0 6px}
.sec::after{content:"";flex:1;height:3px;background:var(--ink);min-width:24px}
.sec + .tag{display:block;margin-bottom:22px}

/* Surfaces: hairline plus two-layer soft shadow, TL/BR corners only. */
.panel{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r) 0 var(--r) 0;
  box-shadow:var(--sh)}
.panel.lift:hover{box-shadow:var(--sh-lift)}
.accent-green{border-left:4px solid var(--green)}
.accent-teal{border-left:4px solid var(--teal)}

/* Buttons are string badges: CI corners, Source Sans. Ink on teal, never
   white on teal (2.9:1). Coral carries the ONE primary action per view. */
.btn{display:inline-block;font-family:inherit;font-weight:700;font-size:15px;letter-spacing:.03em;
  padding:11px 20px;border-radius:var(--r) 0 var(--r) 0;text-decoration:none;cursor:pointer;
  border:1px solid transparent;line-height:1.2;box-shadow:var(--sh);transition:box-shadow .12s}
.btn:hover{box-shadow:var(--sh-lift)}
.btn.primary{background:var(--coral);color:#fff}
.btn.teal{background:var(--teal-bright);color:var(--ink)}
.btn.ghost{background:var(--paper);color:var(--ink);border-color:var(--hair)}

/* The photo print: white margin, soft shadow, a hand's tilt, straightens
   when reached for. Captions sit OUTSIDE the print. */
.print{background:#fff;padding:var(--pm);border-radius:var(--pr);box-shadow:var(--sh);
  transform:rotate(var(--tilt,0deg));transition:transform .18s ease,box-shadow .18s ease;
  display:inline-block;max-width:100%}
.print img{border-radius:calc(var(--pr) * .6);width:100%;height:100%;object-fit:cover}
.print:hover,.print:focus-within{transform:rotate(0deg) translateY(-3px);box-shadow:var(--sh-lift);z-index:5;position:relative}
.print.t1{--tilt:-2.7deg}.print.t2{--tilt:1.6deg}.print.t3{--tilt:-1.1deg}.print.t4{--tilt:2.3deg}
.print.t5{--tilt:-2.0deg}.print.t6{--tilt:.9deg}.print.t7{--tilt:-1.5deg}
.cap{font-size:13.5px;color:var(--grey);margin-top:10px;line-height:1.35}
/* Polaroid: the lower margin grows to about a fifth of the print's width
   and carries a hand-written annotation, centred. The caption is on the
   white margin, never on the image. */
.print.polaroid{padding-bottom:calc(var(--pm) + 9%);}
.print.polaroid .pcap{display:block;text-align:center;font-family:"Caveat","Segoe Script","Bradley Hand",cursive;
  font-size:clamp(15px,calc(1.5 * var(--vw)),21px);line-height:1.15;color:#4d4d4d;
  padding:6px 8px 0;transform:rotate(-.6deg)}

/* Forms: dumb forms toward info@. Fields keep the CI corner. */
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea{font:inherit;font-weight:400;font-size:16px;padding:10px 12px;
  border:1px solid rgba(35,31,32,.25);border-radius:var(--r) 0 var(--r) 0;background:#fff;color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.field.check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:14px;color:var(--grey)}
.field.check input{width:18px;height:18px;margin-top:2px}
.req{color:var(--coral)}

/* Footer: page ground above the crest, the wave art's own bottom band below. */
.foot{margin-top:auto;background:var(--paper)}
.foot-main{width:100%;max-width:var(--wrap);margin:0 auto;padding:40px var(--pad) 34px;
  display:grid;gap:28px;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair)}
.foot-col h2{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:0 0 12px;font-family:inherit}
.foot-col address{font-style:normal;line-height:1.7;font-size:15px}
.foot-col a{color:var(--ink);text-decoration:none}
.foot-col a:hover{color:var(--teal-deep);text-decoration:underline}
.foot-links{list-style:none;margin:0;padding:0;line-height:2;font-size:15px}
.foot .wv{display:block;width:100%;height:clamp(34px,calc(4.6 * var(--vw)),62px);
  background:url("waves.svg") repeat-x left bottom;background-size:clamp(380px,calc(46 * var(--vw)),660px) 100%}
.foot .deck{background:var(--deck);color:var(--deck-ink);margin-top:-1px}
.foot .fin{width:100%;max-width:var(--wrap);margin:0 auto;padding:15px var(--pad) 19px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13px;font-weight:600}
.foot .fin a{color:inherit;text-decoration:none;opacity:.85;margin-left:16px}
.foot .fin a:hover{opacity:1;text-decoration:underline}

/* Polaroid in real proportions. The outer element is the query container
   and carries the tilt; the inner .pol is the print and scales as one
   object: margins, corner, shadow and caption are all in cqw. */
.pol-wrap{container-type:inline-size;display:block;width:var(--w,100%);
  transform:rotate(var(--tilt,0deg));transition:transform .18s ease}
.pol-wrap:hover{transform:rotate(0deg) translateY(-3px);z-index:6;position:relative}
.pol{background:#fff;padding:6.5cqw 5cqw 22cqw;border-radius:1cqw;position:relative;
  box-shadow:0 .4cqw .8cqw rgba(35,31,32,.07),0 2.2cqw 5cqw rgba(35,31,32,.15)}
.pol-wrap:hover .pol{box-shadow:0 .8cqw 1.6cqw rgba(35,31,32,.09),0 4cqw 9cqw rgba(35,31,32,.2)}
.pol img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:.4cqw}
.pol .pcap{position:absolute;left:5cqw;right:5cqw;bottom:0;height:22cqw;display:flex;align-items:center;justify-content:center;
  font-family:"Caveat","Segoe Script","Bradley Hand",cursive;font-size:6.6cqw;line-height:1;color:#4d4d4d;
  white-space:nowrap;overflow:hidden;transform:rotate(-.8deg)}
.pol-wrap.t1{--tilt:-2.7deg}.pol-wrap.t2{--tilt:1.6deg}.pol-wrap.t3{--tilt:-1.1deg}.pol-wrap.t4{--tilt:2.3deg}
.pol-wrap.t5{--tilt:-2.0deg}.pol-wrap.t6{--tilt:.9deg}.pol-wrap.t7{--tilt:-1.5deg}

/* Review aid, not part of the design: values still to be confirmed by
   moWerk are dotted-underlined. Remove before any deploy. */
.tbc{text-decoration:underline dotted var(--coral);text-underline-offset:3px;cursor:help}
.note{background:#fff8e6;border-bottom:1px solid #f0d890;color:#6b5300;font-size:13px;padding:6px var(--pad);text-align:center}

/* Jost role block. Declared LAST so nothing below resets it: display and
   large sizes name things, Source Sans reports them. */
h1,h2,h3,.sec,.tab,.fig b,.fig .u,.display{font-family:"Jost","Helvetica Neue",Arial,sans-serif}

/* Fit variant of the polaroid: the height is fixed by --ih and the image
   keeps its own aspect, so nothing is cropped (a TV overlay, a wide
   stand). Margins, corner and caption scale from a 4:3 width reference. */
.pol-wrap.fit{container-type:normal;width:auto;display:inline-block;--wref:calc(var(--ih,220px) * 1.333)}
.pol-wrap.fit .pol{padding:calc(var(--wref) * .065) calc(var(--wref) * .05) calc(var(--wref) * .22);border-radius:calc(var(--wref) * .01);
  box-shadow:0 calc(var(--wref) * .004) calc(var(--wref) * .008) rgba(35,31,32,.07),0 calc(var(--wref) * .022) calc(var(--wref) * .05) rgba(35,31,32,.15)}
.pol-wrap.fit .pol img{width:auto;height:var(--ih,220px);aspect-ratio:auto;border-radius:calc(var(--wref) * .004)}
.pol-wrap.fit .pol .pcap{left:calc(var(--wref) * .05);right:calc(var(--wref) * .05);height:calc(var(--wref) * .22);font-size:calc(var(--wref) * .066)}