
:root{
  --white:#ffffff;
  --cyan:#00A2D9;
  --teal:#00779F;
  --marine:#00394B;
  --orange:#F26D33;
  --dorange:#DD571C;
  --mist:#F2F8FB;
  --ink-soft:#42606D;
  --fh:'Barlow',sans-serif;
  --ft:'Inter',sans-serif;
  --r-card:22px;
  --r-panel:38px;

  --page-margin-x:80px;
  --page-margin-y:75px;

  --logo-slogan-size:55px;

  --logo-slogan-gap:40px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--ft);background:var(--white);color:var(--marine);overflow:hidden;cursor:none}
img{max-width:100%}

#cursor{position:fixed;width:9px;height:9px;background:var(--cyan);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s;box-shadow:0 0 0 1px rgba(255,255,255,.45)}
#cursor-ring{position:fixed;width:38px;height:38px;border:1.5px solid rgba(0,162,217,.65);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s}
body:has(a:hover,button:hover,input:hover,textarea:hover,select:hover,label:hover) #cursor{width:18px;height:18px}
body:has(a:hover,button:hover,input:hover,textarea:hover,select:hover,label:hover) #cursor-ring{width:54px;height:54px;border-color:var(--cyan)}
@media (hover:none){#cursor,#cursor-ring{display:none}body{cursor:auto}}

.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 34px;border-radius:999px;font-family:var(--ft);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:none;cursor:none;overflow:hidden;transition:color .3s,border-color .25s,background .25s}
.btn>*{position:relative;z-index:1}
.btn-icon{display:inline-block;transition:transform .3s}@media (hover:hover){
.btn:hover .btn-icon{transform:rotate(-45deg)}}
.btn:active .btn-icon{transform:rotate(-45deg)}
.btn-accent{background:var(--marine);color:var(--white)}
.btn-accent::before{content:'';position:absolute;inset:0;background:var(--cyan);transform:translateX(-101%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:0}@media (hover:hover){
.btn-accent:hover::before{transform:translateX(0)}}
.btn-accent:active::before{transform:translateX(0)}

.landing{height:100svh;height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--page-margin-y) var(--page-margin-x)}
.landing-grid{width:100%;height:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(16px,1.5vw,24px)}
.panel{position:relative;overflow:hidden;border-radius:var(--r-panel);height:100%;display:flex;flex-direction:column}

.panel--form{background:var(--mist);border:1px solid rgba(0,162,217,.14)}
.bigfill{position:absolute;width:120vh;height:120vh;border-radius:50%;pointer-events:none;transition:transform 1.1s cubic-bezier(.22,.61,.36,1);will-change:transform;z-index:0}
.bigfill--cyan{background:var(--cyan);opacity:.08;left:-52vh;bottom:-52vh}@media (hover:hover){
.panel--form:hover .bigfill--cyan{transform:translate(46px,-40px)}}

.panel--grad{background:linear-gradient(140deg,var(--marine) 0%,var(--teal) 145%)}
.grad-deco{position:absolute;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none;z-index:0;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.grad-deco.g1{width:460px;height:460px;top:-160px;right:-150px}
.grad-deco.g2{width:340px;height:340px;bottom:-150px;left:-120px;background:rgba(0,162,217,.14)}@media (hover:hover){
.panel--grad:hover .grad-deco.g1{transform:translate(-34px,26px) scale(1.12)}}@media (hover:hover){
.panel--grad:hover .grad-deco.g2{transform:translate(30px,-24px) scale(1.16)}}
.pg-grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px}

.form-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3vw,52px);min-height:0}
.form-eyebrow{font-family:var(--ft);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.form-title{font-family:var(--fh);font-size:clamp(28px,3vw,80px);font-weight:900;text-transform:uppercase;color:var(--marine);line-height:1;margin-bottom:10px}
.form-title em{font-style:normal;color:var(--teal)}
.form-lead{font-family:var(--ft);font-size:clamp(15px,16.67px - 0.139vw,16px);color:var(--ink-soft);line-height:1.7;max-width:720px;margin-bottom:30px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--ft);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--marine);margin-bottom:8px}
.field label .req{color:var(--orange)}
.field input,.field select,.field textarea{-webkit-appearance:none;appearance:none;width:100%;font-family:var(--ft);font-size:16px;color:var(--marine);background:var(--white);border:1.5px solid rgba(0,57,75,.12);border-radius:14px;padding:14px 16px;transition:border-color .2s,box-shadow .2s;cursor:none}
.field textarea{min-height:130px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:rgba(0,57,75,.38)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,162,217,.12)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300394B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.form-recaptcha{margin-bottom:22px}
.form-submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form-submit .btn{white-space:nowrap}
.form-note{font-family:var(--ft);font-size:12px;color:rgba(0,57,75,.5);line-height:1.5;flex:1;min-width:200px}

.form-success{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:clamp(20px,4vw,40px);opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none;transition:opacity .55s ease,transform .55s ease,visibility 0s .55s}
.form-success.show{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .55s ease,transform .55s ease}
.fs-head{display:flex;align-items:center;justify-content:center;gap:16px}
.fs-badge{width:54px;height:54px;border-radius:50%;background:linear-gradient(150deg,var(--teal),var(--cyan));display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px rgba(0,162,217,.28);flex-shrink:0}
.fs-badge svg{width:26px;height:26px;stroke:#fff;stroke-width:3;fill:none}
.form-success h3{font-family:var(--fh);font-size:30px;font-weight:900;text-transform:uppercase;color:var(--marine);line-height:1}
.form-success p{font-family:var(--ft);font-size:15px;color:var(--ink-soft);line-height:1.7;max-width:440px;margin:0 auto}

.form-inner.show-success #contact-form,
.form-inner.show-success .form-eyebrow,
.form-inner.show-success .form-title,
.form-inner.show-success .form-lead{visibility:hidden}

.media-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

.media-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--marine);mix-blend-mode:hue;}
.media-overlay-2{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,57,75,.6);mix-blend-mode:hard-light;}

.media-overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,57,75,.28),rgba(0,57,75,.10) 45%,rgba(0,57,75,.32))}
.media-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:clamp(30px,3.2vw,54px);text-align:center}
.media-slogan{font-family:var(--fh);font-size:clamp(30px,3.4vw,45px);font-weight:900;text-transform:uppercase;letter-spacing:.01em;color:#fff;line-height:.98;max-width:18ch;text-shadow:0 2px 30px rgba(0,57,75,.35)}

.media-logo-slogan{height:clamp(33px,6vw,var(--logo-slogan-size));width:auto;max-width:100%;margin-top:var(--logo-slogan-gap);object-fit:contain;filter:drop-shadow(0 2px 30px rgba(0,57,75,.35))}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

@media (max-width:960px){
  body{overflow:auto}
  .landing{height:auto;min-height:100svh;padding:24px}
  .landing-grid{grid-template-columns:1fr;height:auto;max-width:760px;gap:20px}
  .panel{height:auto}
  .form-inner{overflow:visible}
  .field textarea{min-height:110px;resize:vertical}
  .panel--media{min-height:clamp(280px,58vw,420px)}
}

@media (max-width:720px){
  .landing{padding:20px}
  .landing-grid{max-width:none}
}
@media (max-width:520px){
  :root{--r-panel:28px}
  .field-row{grid-template-columns:1fr;gap:0}
  .form-inner{padding:28px 22px}
  .media-inner{padding:28px 22px}
}

@media (max-width:320px){
  .form-inner{padding-left:20px;padding-right:20px}
  .media-inner{padding-left:20px;padding-right:20px}
}
