/* Contact page (2026-10-02). Structure and copy from the reference Contact page, in the V3 look: the homepage
   gradient and clouds run behind the hero and the form, the call card sits on the forest photo with grain, the inbox
   and the form are white glass. The form is a preview: it checks what's entered and thanks you, but sends nothing.
   Loaded after v3.css and only by this page. */

/* film grain, the same monochrome noise the homepage photo tiles carry; sits on top of a .ct-grain block */
.ct-grain{position:relative;isolation:isolate}
.ct-grain::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:var(--gr,.55);mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px}
h1 .tone{display:block;color:#3F5C3B}

/* ---- 1. hero ---- */
.ct-hero{min-height:0;padding-top:calc(64px + clamp(2.5rem,8vh,5rem));padding-bottom:clamp(1.8rem,5vh,3rem)}
.ct-hero>.wrap{width:100%}
.ct-htext{display:grid;gap:1.2rem;justify-items:start;max-width:780px}
.ct-htext .crumb{margin:0;color:var(--ink2)}
.ct-htext h1{font-size:clamp(2.4rem,5vw,4.1rem);line-height:1.02;letter-spacing:-.05em}
.ct-htext .lede{color:var(--ink2);max-width:58ch;line-height:1.65}
.ct-htext .lede a{color:#1F4A31;font-weight:600;text-underline-offset:3px}
.js .ct-htext>*{animation:rise 1s var(--ease) both}
.js .ct-htext>*:nth-child(2){animation-delay:.08s}.js .ct-htext>*:nth-child(3){animation-delay:.16s}

/* ---- 2. the two ways to reach us, and the form ---- */
section.ct-sec{background:transparent;padding-top:clamp(.5rem,2vh,1.25rem);padding-bottom:clamp(3.5rem,9vh,6rem)}
/* the home page's "Send us an enquiry" links to #enquire: stop below the sticky menu, not under it */
#enquire{scroll-margin-top:88px}
.ct-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.1rem;align-items:start}
.ct-side{display:grid;gap:1rem;position:sticky;top:calc(64px + 1.5rem)}
.ct-side .ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-bottom:.4rem}
.ct-side .ico .ic{width:20px;height:20px}
.ct-side h2{font-size:clamp(1.45rem,2.1vw,1.8rem);line-height:1.1;letter-spacing:-.035em}
.ct-side p{font-size:.95rem;line-height:1.6}
/* the call: forest peak photo under a deep green scrim, white type, the footer's pale lime button */
.ct-call{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;padding:1.8rem 1.8rem 1.9rem;border-radius:24px;overflow:hidden;min-height:300px;color:#fff;background:#173D29;--gr:.65;box-shadow:0 24px 54px rgba(14,58,31,.24)}
.ct-call .pl{position:absolute;inset:-3%;z-index:-2;background:url(img/pl-build.jpg) 50% 72%/cover no-repeat;filter:saturate(.85)}
.ct-call::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,26,17,.5) 0%,rgba(8,26,17,.66) 50%,rgba(8,26,17,.84) 100%)}
.ct-call>*{position:relative;z-index:1}
.ct-call .ico{background:rgba(255,255,255,.14);color:#C6E57C;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ct-call h2{color:#fff}
.ct-call p{color:rgba(255,255,255,.86);max-width:30ch}
.ct-call .btn{margin-top:auto}
.btn.ct-lime{background:#E3F08C;color:#0E3A1F}
.btn.ct-lime:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(227,240,140,.35);background:#EAF4A4}
/* the inbox: white glass */
.ct-mail{display:flex;flex-direction:column;gap:.55rem;padding:1.7rem 1.8rem 1.8rem;border-radius:24px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 18px 44px rgba(34,53,42,.09),inset 0 1px 0 #fff}
.ct-mail .ico{background:#DDEFF0;color:#1E6577}
.ct-mail h2 a{text-decoration:none;color:var(--ink)}
.ct-mail h2 a:hover{color:#1F4A31;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.ct-mail p{color:var(--muted)}

/* the form card: white glass on the gradient */
.ct-card{border-radius:28px;padding:clamp(1.6rem,3vw,2.6rem);
  background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.94);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:0 24px 60px rgba(34,53,42,.11),inset 0 1px 0 #fff}
.ct-form>h2{font-size:clamp(1.7rem,2.5vw,2.2rem);margin-bottom:clamp(1.2rem,3vh,1.6rem)}
.ct-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.05rem 1rem}
.ct-f{display:grid;gap:.45rem;align-content:start;min-width:0}
.ct-f.full{grid-column:1/-1}
.ct-f label,.ct-l{font-size:.88rem;font-weight:600;color:var(--ink2)}
.ct-f label i{font-style:normal;color:#3F5C3B}
.ct-f input,.ct-f select,.ct-f textarea{width:100%;font:400 1rem/1.4 var(--sans);color:var(--ink);background:rgba(255,255,255,.9);border:1px solid rgba(34,53,42,.16);border-radius:14px;
  padding:.8rem 1rem;min-height:50px;transition:border-color .2s,box-shadow .25s var(--ease),background .2s;-webkit-appearance:none;appearance:none}
.ct-f textarea{min-height:140px;resize:vertical;line-height:1.55}
.ct-f input::placeholder,.ct-f textarea::placeholder{color:#9AA095}
.ct-f input:hover,.ct-f select:hover,.ct-f textarea:hover{border-color:rgba(34,53,42,.28)}
.ct-f input:focus,.ct-f select:focus,.ct-f textarea:focus{outline:none;border-color:#1F4A31;background:#fff;box-shadow:0 0 0 4px rgba(168,210,109,.35)}
.ct-sel{position:relative}
.ct-sel select{padding-right:2.6rem;cursor:pointer}
.ct-sel select:invalid{color:#7A8175}
.ct-sel svg{position:absolute;right:1rem;top:50%;width:16px;height:16px;margin-top:-8px;fill:none;stroke:#3F5C3B;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
/* preferred contact: a glass segmented switch, the chosen one dark forest */
.ct-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;min-height:50px;border-radius:14px;background:rgba(34,53,42,.06);border:1px solid rgba(34,53,42,.08)}
.ct-seg label{position:relative;display:flex}
.ct-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ct-seg span{flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;border-radius:10px;font-size:.92rem;font-weight:600;color:var(--ink2);transition:background .25s,color .25s,box-shadow .25s}
.ct-seg span .ic{width:16px;height:16px}
.ct-seg label:hover span{background:rgba(255,255,255,.6)}
.ct-seg input:checked+span{background:#1F4A31;color:#fff;box-shadow:0 6px 16px rgba(31,74,49,.22)}
.ct-seg input:checked+span .ic{color:#C6E57C}
.ct-seg input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
/* errors only show once a send has been tried */
.ct-err{display:none;font-size:.8rem;font-weight:500;color:#A33A2A}
.ct-f.bad .ct-err{display:block}
.ct-f.bad input,.ct-f.bad select,.ct-f.bad textarea{border-color:#C0563F;box-shadow:0 0 0 4px rgba(192,86,63,.12)}
.ct-note{display:flex;align-items:center;gap:.5rem;margin:1.1rem 0 1.3rem;font-size:.85rem;color:var(--muted)}
.ct-note .ic{width:16px;height:16px;color:#3F5C3B}
.ct-send{padding:.95rem 1.8rem;font-size:.95rem}
.ct-send .ic{width:17px;height:17px;transition:transform .35s var(--ease)}
.ct-send:hover .ic{transform:translateX(3px)}
/* thank-you state */
.ct-done{display:grid;justify-items:center;text-align:center;gap:.8rem;padding:clamp(2.5rem,8vh,4.5rem) 1rem;outline:none}
.ct-done[hidden]{display:none}
.ct-done h2{font-size:clamp(1.8rem,2.8vw,2.4rem)}
.ct-done p{color:var(--ink2);max-width:42ch}
.ct-done .ct-pv{font-size:.85rem;color:var(--muted);max-width:46ch}
.ct-done .btn{margin-top:.6rem}
.ct-tick{width:72px;height:72px;margin-bottom:.4rem}
.ct-tick circle{fill:#C6E57C;stroke:none}
.ct-tick path{fill:none;stroke:#0E3A1F;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.js .ct-done:not([hidden]) .ct-tick circle{animation:ctpop .6s cubic-bezier(.3,1.5,.5,1) both;transform-origin:center;transform-box:fill-box}
.js .ct-done:not([hidden]) .ct-tick path{animation:ctdraw .6s var(--ease) .35s both}
.js .ct-done:not([hidden])>:not(svg){animation:rise .8s var(--ease) .2s both}
@keyframes ctpop{from{transform:scale(.3);opacity:0}}
@keyframes ctdraw{from{stroke-dashoffset:1}}

/* ---- phones ---- */
@media (max-width:860px){
  .ct-grid{grid-template-columns:1fr}
  .ct-side{position:static;grid-template-columns:1fr}
  .ct-call{min-height:0}
  .ct-call .btn{margin-top:.5rem}
  .ct-card{order:-1}
}
@media (max-width:620px){
  .ct-fields{grid-template-columns:1fr}
  .ct-card{padding:1.4rem 1.15rem 1.6rem;border-radius:22px}
  .ct-send{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .js .ct-htext>*,.js .ct-done:not([hidden]) .ct-tick circle,.js .ct-done:not([hidden]) .ct-tick path,.js .ct-done:not([hidden])>:not(svg){animation:none!important}
}