/* ==========================================================================
   The Mental Immune System
   Brand: navy #133E5E · teal #9ABFBF · amber #E5A13B · Italiana + Mulish
   TYPE — five roles only. Never introduce a sixth.
     .display  Italiana, fluid          hero + section heads
     .label    Mulish 600, 11px, .24em  eyebrows, buttons, nav
     .lead     Mulish 200, 20px         opening paragraph of a section
     body      Mulish 300, 17px         everything else
     .fine     Mulish 300, 13.5px       notes, captions, footer
   ========================================================================== */
:root{
  --navy:#133E5E; --teal:#9ABFBF; --amber:#E5A13B;
  --abyss:#061523; --deep:#0B2233; --mid:#12304A;
  --ink:#fff; --muted:rgba(255,255,255,.62); --faint:rgba(255,255,255,.38);
  --rule:rgba(255,255,255,.13);
  --f:'Mulish',-apple-system,BlinkMacSystemFont,sans-serif;
  --d:'Italiana',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--abyss);color:var(--ink);font-family:var(--f);font-weight:300;
     font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(24px,5vw,56px)}

/* ---- the five type roles ---- */
.display{font-family:var(--d);font-weight:400;line-height:1.06;letter-spacing:.03em;
         font-size:clamp(2.4rem,6vw,4.6rem)}
h2.display{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:.4em}
.label{font-family:var(--f);font-size:11px;font-weight:600;letter-spacing:.24em;
       text-transform:uppercase;color:var(--teal);display:block;margin-bottom:20px}
.lead{font-size:clamp(18px,2vw,20px);font-weight:200;line-height:1.7;color:rgba(255,255,255,.88)}
p{margin-bottom:1.15em;color:var(--muted)}
p:last-child{margin-bottom:0}
.fine{font-size:13px;color:var(--faint);line-height:1.7}
strong{font-weight:500;color:#fff}
em{font-style:italic;color:rgba(255,255,255,.86)}
.rule{width:44px;height:1px;background:var(--amber);margin:24px 0 26px}
.rule.ctr{margin-inline:auto}

/* ---- buttons ---- */
.btn{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.24em;
     text-transform:uppercase;text-decoration:none;padding:17px 34px;border-radius:2px;
     transition:background .25s,color .25s,border-color .25s;border:1px solid transparent}
.solid{background:var(--amber);color:#08202f}
.solid:hover{background:#fff;color:#08202f}
.ghost{border-color:rgba(255,255,255,.35);color:#fff}
.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btns.ctr{justify-content:center}

/* ---- nav ---- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;display:flex;
    align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,44px);
    background:linear-gradient(180deg,rgba(6,21,35,.80),rgba(6,21,35,.25) 70%,transparent);
    backdrop-filter:saturate(160%) blur(10px);transition:background .3s}
nav.solid-bar{background:rgba(6,21,35,.95);border-bottom:1px solid var(--rule)}
nav .logo img{height:34px;width:auto}
.navlinks{display:flex;align-items:center;gap:30px;list-style:none}
.navlinks a{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
            text-decoration:none;color:rgba(255,255,255,.78);transition:color .25s}
.navlinks a:hover{color:var(--teal)}
.navlinks a.btn{color:#08202f;padding:11px 22px}
.navlinks a.btn:hover{color:#08202f}
.burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;
        justify-content:center;background:none;border:0;cursor:pointer}
.burger span{display:block;height:1.5px;background:#fff;transition:transform .3s,opacity .2s}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile{position:fixed;inset:64px 0 0;z-index:99;background:rgba(6,21,35,.98);
        backdrop-filter:blur(12px);padding:30px clamp(20px,6vw,40px);
        opacity:0;transform:translateY(-10px);pointer-events:none;transition:.28s}
.mobile.open{opacity:1;transform:none;pointer-events:auto}
.mobile ul{list-style:none}
.mobile li{border-bottom:1px solid var(--rule)}
.mobile a{display:block;padding:20px 2px;text-decoration:none;font-size:11px;font-weight:600;
          letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.mobile .btn{margin-top:28px;text-align:center;border-bottom:0}
@media(min-width:861px){.mobile{display:none}}

/* ---- hero ---- */
.hero{min-height:100svh;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:-3;
  background:url('/assets/hero-william.jpg') center 44%/cover no-repeat}
.hero .scrim{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(95deg,rgba(6,21,35,.92) 0%,rgba(6,21,35,.66) 30%,rgba(6,21,35,.12) 58%,rgba(6,21,35,0) 78%),
  linear-gradient(180deg,rgba(6,21,35,.62) 0%,transparent 30%,transparent 58%,rgba(6,21,35,.88) 100%)}
.heroinner{width:100%;max-width:1180px;margin:0 auto;
           padding:0 clamp(24px,5vw,56px) clamp(72px,12vh,130px)}
.herotext{max-width:600px}
.herotext .lead{max-width:38ch}
@media(max-width:820px){
  .hero .bg{background-position:center 38%}
  .hero .scrim{background:linear-gradient(180deg,rgba(6,21,35,.55) 0%,transparent 26%,rgba(6,21,35,.90) 66%,rgba(6,21,35,.97) 100%)}
}

/* ---- stats band ---- */
.byline{text-align:center;font-size:11px;font-weight:600;letter-spacing:.24em;
        text-transform:uppercase;color:var(--faint);margin:0;padding:30px 20px 0}
.byline a{text-decoration:none;border-bottom:1px solid rgba(154,191,191,.4);transition:border-color .25s,color .25s}
.byline a:hover{border-bottom-color:var(--teal)}
.byline strong{color:var(--teal);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);
       border-bottom:1px solid var(--rule);margin-top:26px}
.stat{padding:44px 26px;text-align:center;border-right:1px solid var(--rule);transition:background .35s}
.stat:hover{background:#0e2a3f}
.stat:last-child{border-right:0}
.stat .n{display:block;font-family:var(--f);font-weight:200;font-size:clamp(2.2rem,4.5vw,3.2rem);
         line-height:1;color:#fff;letter-spacing:.02em}
.stat .n u{text-decoration:none;font-size:.42em;letter-spacing:.08em;margin-left:2px}
.stat .l{display:block;margin-top:12px;font-size:11px;font-weight:600;letter-spacing:.22em;
         text-transform:uppercase;color:var(--faint)}
@media(max-width:700px){.stats{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid var(--rule);padding:30px 20px}.stat:last-child{border-bottom:0}}

/* ---- sections ---- */
section{padding:clamp(64px,8vh,96px) 0}
.deep{background:var(--deep)}
.mid{background:linear-gradient(180deg,var(--deep),var(--abyss))}
.center{text-align:center}
.center .lead{max-width:60ch;margin-inline:auto}
.sechead{max-width:60ch}
.center .sechead{margin-inline:auto}

/* ---- split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
.split.even{align-items:stretch}
/* the photo must not contribute its own height, or it drives the row taller than
   the copy. Taking it out of flow makes the text column set the height and the
   image shrink to fit it exactly. */
.split.even .media{position:relative;min-height:280px}
.split.even .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split.rev .media{order:2}
.media img{border-radius:2px}
/* the plate shot is a modest original — hold it near the text size rather than
   letting the column stretch it soft */
.media.plate{margin:0;max-width:400px;justify-self:center}
.credit{margin-top:12px;font-size:13px;color:var(--faint);letter-spacing:.02em}
.credit a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22);transition:color .25s,border-color .25s}
.credit a:hover{color:var(--teal);border-bottom-color:var(--teal)}

/* ---- problem cards ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:44px;
       background:var(--rule);border:1px solid var(--rule)}
.card{background:var(--abyss);padding:0 0 38px;transition:background .35s}
.card:hover{background:#0e2a3f}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:26px;opacity:.94}
.card .no,.card h3,.card p{padding:0 30px}
.card .no{font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--amber);display:block;margin-bottom:12px}

.card h3{font-family:var(--f);font-size:19px;font-weight:600;letter-spacing:.01em;
         margin-bottom:14px;line-height:1.15}
.deep .card{background:var(--deep)}
.deep .card:hover{background:#0e2a3f}

/* ---- video ---- */
.videoblock{max-width:940px;margin:0 auto}
.video{position:relative;aspect-ratio:16/9;background:#000;border-radius:2px;overflow:hidden;
       border:1px solid var(--rule)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- included ---- */
.incl{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:48px;
      background:var(--rule);border:1px solid var(--rule);overflow:hidden}
.incl .item{background:var(--deep);padding:34px 26px 110px;transition:background .35s}
.incl .item:hover{background:#0e2a3f}
.incl h3{font-size:15px;font-weight:600;letter-spacing:.04em;color:#fff;margin:18px 0 10px}
.incl p{font-size:15px;margin:0}
.incl-mock{position:relative;z-index:3;margin-top:-96px;pointer-events:none;
           display:flex;justify-content:center;align-items:flex-end;
           padding:0;font-size:0;line-height:0}
.incl-mock img{width:min(560px,72%);height:auto;display:block;margin:0;vertical-align:bottom;
               filter:drop-shadow(0 -18px 44px rgba(0,0,0,.55))}
@media(max-width:700px){.incl-mock{margin-top:-24px}.incl-mock img{width:88%}}
.motif{width:46px;height:46px;display:block}
.motif *{stroke:var(--amber);fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.motif .spin{transform-origin:23px 23px;animation:turn 14s linear infinite}
.motif .pulse{animation:pulse 3.4s ease-in-out infinite}
.motif .pulse2{animation:pulse 3.4s ease-in-out .6s infinite}
.motif .pulse3{animation:pulse 3.4s ease-in-out 1.2s infinite}
.motif .draw{stroke-dasharray:70;stroke-dashoffset:70;animation:draw 3.6s ease-in-out infinite}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes draw{0%{stroke-dashoffset:70}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@media(prefers-reduced-motion:reduce){.motif *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}
@media(max-width:900px){.incl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.incl{grid-template-columns:1fr}}

/* ---- quotes ---- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px);margin-top:60px}
.quote{border-left:1px solid var(--rule);padding-left:28px;display:flex;flex-direction:column}
.quote p{font-size:15px;line-height:1.75;color:rgba(255,255,255,.78);font-style:italic}
.quote .who{margin-top:auto;padding-top:20px}
.quote .who b{display:block;font-weight:600;font-size:13px;letter-spacing:.06em;color:#fff;font-style:normal}
.quote .who span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.quote .who a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18);transition:color .25s,border-color .25s}
.quote .who a:hover{color:var(--teal);border-bottom-color:var(--teal)}

/* ---- offer ---- */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center;
       border:1px solid var(--rule);padding:clamp(32px,5vw,64px);background:rgba(255,255,255,.02)}
.price{font-family:var(--f);font-weight:200;font-size:clamp(3.4rem,7vw,5rem);line-height:1;color:#fff}
.price sub{font-family:var(--f);font-size:15px;font-weight:300;letter-spacing:.06em;
           vertical-align:baseline;color:var(--muted);margin-left:8px}
.pnum{position:relative;display:inline-block;isolation:isolate;padding:0 .30em}
.pnum::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;
  transform:translate(-50%,-50%);width:4.1em;height:4.1em;
  background:url("/assets/mark-gold.svg") no-repeat center/contain;opacity:.42}
.offer ul{list-style:none;margin:26px 0 0}
.offer li{padding:13px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--muted)}
.offer li:last-child{border-bottom:0}
.offer li{position:relative;padding-left:40px}
.offer li::before{content:"";position:absolute;left:0;top:13px;width:24px;height:24px;
  background:url("/assets/mark-gold.svg") no-repeat center/contain}

/* ---- footer ---- */
footer{background:var(--abyss);border-top:1px solid var(--rule);padding:64px 0 34px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding-bottom:46px}
.fgrid img{height:40px;margin-bottom:20px}
.fgrid h4{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
          color:var(--teal);margin-bottom:18px}
.fgrid ul{list-style:none;display:grid;gap:12px}
.fgrid a{font-size:15px;color:var(--muted);text-decoration:none;transition:color .25s}
.fgrid a:hover{color:#fff}
.fbot{border-top:1px solid var(--rule);padding-top:26px;display:flex;flex-wrap:wrap;
      gap:14px;justify-content:space-between;align-items:center}
.socials{display:flex;gap:12px}
.soc{width:42px;height:42px;border:1px solid var(--rule);border-radius:2px;
     display:flex;align-items:center;justify-content:center;
     transition:border-color .25s,background .25s}
.soc:hover{border-color:var(--teal);background:rgba(154,191,191,.10)}
.soc svg{width:19px;height:19px}
.soc svg *{fill:none;stroke:rgba(255,255,255,.72);stroke-width:1.5;
           stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s,fill .25s}
.soc svg .dot,.soc svg .fill,.soc svg path:not(.fill){}
.soc svg path{fill:rgba(255,255,255,.72);stroke:none}
.soc svg .fill{fill:rgba(255,255,255,.72);stroke:none}
.soc svg .dot{fill:rgba(255,255,255,.72);stroke:none}
.soc:hover svg *{stroke:var(--teal)}
.soc:hover svg path,.soc:hover svg .fill,.soc:hover svg .dot{fill:var(--teal)}

@media(max-width:860px){
  .navlinks{display:none}.burger{display:flex}
  .split,.cards,.incl,.quotes,.offer,.fgrid{grid-template-columns:1fr}
  .split.rev .media{order:-1}
  .cards{gap:1px}
}

/* ---- section with a photographic backdrop ---- */
.imgband{position:relative;overflow:hidden}
.imgband .bg{position:absolute;inset:0;z-index:-3;background-size:cover;background-position:center}
.imgband .scrim{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(180deg,rgba(6,21,35,.74) 0%,rgba(6,21,35,.46) 42%,rgba(6,21,35,.80) 100%)}

/* ---- interior page header ---- */
.pagehead{position:relative;padding:clamp(150px,22vh,220px) 0 clamp(56px,8vh,84px);overflow:hidden}
.pagehead .bg{position:absolute;inset:0;z-index:-3;background-size:cover;background-position:center}
.pagehead .scrim{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(180deg,rgba(6,21,35,.86) 0%,rgba(6,21,35,.62) 45%,rgba(6,21,35,.94) 100%)}
.pagehead .display{font-size:clamp(2.2rem,5.5vw,4rem)}
.pagehead .lead{max-width:52ch}

/* ---- figure block ---- */
.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
      border:1px solid var(--rule);margin-top:44px}
.fig{background:var(--deep);padding:38px 32px;transition:background .35s;
     display:grid;grid-template-columns:1fr auto;column-gap:26px;align-items:center}
.fig .n{grid-column:1;grid-row:1}
.fig p{grid-column:1;grid-row:2}
.fig cite{grid-column:1;grid-row:3}
.fig .sym{grid-column:2;grid-row:1/4;align-self:center;margin:0}
img.sym{width:clamp(74px,9vw,104px);height:auto}
.fig svg.sym{height:clamp(48px,6vw,64px)}
.fig:hover{background:#0e2a3f}
.sym{display:block;height:52px;width:auto;margin:0 0 18px;overflow:visible}
.sym path,.sym circle{fill:none;stroke:var(--amber);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.sym.usa path{fill:rgba(229,161,59,.20)}
.sym .wedge{fill:rgba(229,161,59,.40);stroke:none}
.sym .ring{stroke-width:1.6}
.fig .n{display:block;font-weight:200;font-size:clamp(2.2rem,4.5vw,3.2rem);line-height:1;color:#fff}
.fig .n u{text-decoration:none;font-size:.42em;letter-spacing:.06em;margin-left:3px}
.fig p{margin:14px 0 0;font-size:15px}
.fig cite{display:block;margin-top:14px;font-style:normal;font-size:11px;letter-spacing:.14em;
          text-transform:uppercase;color:var(--faint)}
.fig cite a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2)}
.fig cite a:hover{color:var(--teal);border-bottom-color:var(--teal)}
@media(max-width:700px){.figs{grid-template-columns:1fr}}

/* ---- steps, each with a gold line motif ---- */
.steps{margin-top:44px;border-top:1px solid var(--rule)}
.step{display:grid;grid-template-columns:96px 1fr;gap:clamp(18px,3vw,36px);
      padding:32px 0;border-bottom:1px solid var(--rule);transition:background .35s}
.step:hover{background:rgba(255,255,255,.025)}
.step h3{font-size:17px;font-weight:600;color:#fff;margin-bottom:6px}
.step p{margin:0;font-size:15px}
.gmotif{width:58px;height:58px;display:block;overflow:visible;justify-self:center}
.gmotif *{fill:none;stroke:var(--amber);stroke-width:1.7;
          stroke-linecap:round;stroke-linejoin:round;
          opacity:.8;transition:opacity .35s}
.gmotif .dot,.gmotif .mark,.gmotif .solidfill{fill:var(--amber);stroke:none}
.gmotif .rimfill{fill:rgba(229,161,59,.20);stroke:var(--amber);stroke-width:1.25;opacity:1}
.gmotif.logo{width:52px;height:52px}
.gmotif.wide{width:87px;height:58px}
.step:hover .gmotif *{opacity:1}
@media(max-width:560px){.step{grid-template-columns:72px 1fr;gap:14px}
  .gmotif{width:44px;height:44px}.gmotif.logo{width:40px;height:40px}.gmotif.wide{width:66px;height:44px}}

/* ---------- Writing + Contact (added) ---------- */
.ctr{text-align:center}
.narrow{max-width:760px}
.pagehead.short{padding:clamp(140px,20vh,190px) 0 clamp(48px,7vh,70px)}

/* long-form prose */
.prose{max-width:68ch;margin:0 auto}
.prose p{font-size:17px;line-height:1.8;margin:0 0 24px;color:rgba(255,255,255,.80)}
.prose p:first-of-type{font-size:19px;font-weight:200;color:rgba(255,255,255,.92)}
.prose em{font-style:italic;color:#fff}
.prose blockquote{margin:0 0 34px;padding:0 0 0 26px;border-left:1px solid var(--amber)}
.prose blockquote{font-family:var(--f);font-weight:200;font-style:italic;
                  font-size:clamp(1.15rem,2.1vw,1.4rem);line-height:1.65;color:#fff}
.prose blockquote cite{display:block;margin-top:16px;font-family:var(--f);font-style:normal;
                       font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
                       color:var(--amber)}
.artby{margin:38px 0 0;padding-top:26px;border-top:1px solid var(--rule);
       font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
.back{margin:14px 0 0;font-size:13px}
.back a{color:var(--muted);text-decoration:none}
.back a:hover{color:var(--amber)}

/* writing index */
.artlist{display:grid;gap:1px;background:var(--rule);
         border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.artcard{display:block;background:var(--deep);padding:clamp(30px,4vw,44px) clamp(24px,3vw,40px);
         text-decoration:none;transition:background .35s}
.artcard:hover{background:#0e2a3f}
.artcard h3{font-family:var(--d);font-weight:400;color:#fff;margin:10px 0 14px;
            font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.15;letter-spacing:.02em}
.artcard p{margin:0 0 18px;font-size:15px;max-width:70ch}
.artcard .more{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}

/* contact panel */
.panel{background:var(--deep);border:1px solid var(--rule);padding:clamp(28px,4vw,40px)}
.panel h3{font-family:var(--f);font-size:15px;font-weight:600;letter-spacing:.06em;color:#fff;margin:0 0 20px}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:13px 0 13px 40px;border-bottom:1px solid var(--rule);
          font-size:15px;color:var(--muted)}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:"";position:absolute;left:0;top:13px;width:24px;height:24px;
                  background:url("/assets/mark-gold.svg") no-repeat center/contain}

/* form */
.field{margin-bottom:22px}
.field label{display:block;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
             color:var(--teal);margin-bottom:10px}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.04);
  border:1px solid var(--rule);color:#fff;font-family:var(--f);font-size:16px;font-weight:300;
  padding:14px 16px;border-radius:2px;-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--teal) 50%),
                               linear-gradient(135deg,var(--teal) 50%,transparent 50%);
  background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select option{background:var(--deep);color:#fff}
.field textarea{min-height:160px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.30)}
#enquiry button[type=submit]{border:0;cursor:pointer;font-family:var(--f)}
#enquiry button[disabled]{opacity:.55;cursor:default}
.formnote{margin-top:20px;font-size:14px;min-height:1.2em}
.formnote.ok{color:var(--teal)}
.formnote.err{color:#E58B3B}