/* Kamo Kitchens stylesheet v1. Manrope 400/700/800 only. */
:root{
  --navy:#26326d;
  --navy-deep:#1b2350;
  --ink:#252a3f;
  --muted:#5a6079;
  --sky:#8cc5eb;
  --sky-soft:#eaf4fb;
  --stone:#f5f6f8;
  --paper:#ffffff;
  --ply-a:#e6cda6;
  --ply-b:#c19a67;
  --ply-line:#8a6a41;
  --radius:14px;
  --shadow:0 10px 30px rgba(38,50,109,.10);
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
}
b,strong{font-weight:700}
input,button,select,textarea,option{font:inherit}
img{max-width:100%;display:block}
a{color:var(--navy)}
h1,h2,h3,h4{font-weight:800;line-height:1.15;color:var(--navy);margin:0 0 .6em;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
/* Anchor targets sit below the sticky header rather than under it. Without this, a tap
   on Services or Gallery lands with the heading hidden behind the bar. */
section[id]{scroll-margin-top:80px}
@media (max-width:920px){section[id]{scroll-margin-top:70px}}
.section{padding:88px 0}
.section.alt{background:var(--stone)}
.section.navy{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff}
.section.navy h2{color:#fff}

/* signature: plywood edge rule (stacked laminations) */
.ply-rule{
  height:11px;width:76px;border-radius:2px;margin:2px 0 26px;
  background:repeating-linear-gradient(180deg,
    var(--ply-a) 0 2px, var(--ply-line) 2px 3px,
    var(--ply-b) 3px 5px, var(--ply-line) 5px 6px);
}
.ply-rule.center{margin-left:auto;margin-right:auto}

.eyebrow{
  display:block;font-size:.8rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);opacity:.75;margin-bottom:10px;
}
.section.navy .eyebrow{color:var(--sky);opacity:1}
.lede{font-size:1.1rem;color:var(--muted);max-width:640px}
.section.navy .lede{color:#d7e6f4}

/* buttons */
.btn{
  display:inline-block;padding:14px 26px;border-radius:10px;border:2px solid var(--navy);
  font-weight:700;text-decoration:none;cursor:pointer;transition:background .15s,color .15s;
  background:var(--navy);color:#fff;
}
.btn:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost:hover{background:var(--sky-soft)}
.btn.sky{background:var(--sky);border-color:var(--sky);color:var(--navy)}
.btn.sky:hover{background:#a3d1f0;border-color:#a3d1f0}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

/* header */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);border-bottom:1px solid #e6e8ef;
}
.header-inner{display:flex;align-items:center;gap:28px;min-height:76px}
.brand img{height:44px;width:auto}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.main-nav a:not(.btn){font-weight:700;text-decoration:none;color:var(--ink);font-size:.95rem}
.main-nav a:not(.btn):hover{color:var(--navy)}
.main-nav .btn{padding:10px 17px;font-size:.92rem}
.main-nav .btn.ghost{display:inline-flex;align-items:center;gap:8px}
.main-nav .btn.ghost svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:10px;
}
.nav-toggle span{display:block;width:26px;height:3px;background:var(--navy);margin:5px 0;border-radius:2px}
@media (max-width:920px){
  .nav-toggle{display:block}
  .main-nav{
    display:none;position:absolute;top:76px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;padding:18px 24px 24px;gap:14px;
    border-bottom:1px solid #e6e8ef;box-shadow:var(--shadow);
  }
  .main-nav.open{display:flex}
  .main-nav .btn{text-align:center;justify-content:center}
}

/* hero */
.hero{padding:64px 0 80px;background:linear-gradient(180deg,#fff 0%,var(--sky-soft) 100%)}
@media (max-width:760px){.hero{padding:32px 0 56px}}
.hero-grid{display:grid;grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr);gap:52px;align-items:center}
.hero .chips{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 26px;padding:0;list-style:none}
.hero .chips li{
  background:#fff;border:1px solid #d5e6f3;border-radius:4px;
  padding:7px 14px;font-size:.85rem;font-weight:700;color:var(--navy);
}
.hero-note{font-size:.9rem;color:var(--muted);margin-top:16px}
.hero-media{position:relative}
.hero-media::before{
  content:'';position:absolute;top:18px;bottom:18px;left:-14px;width:12px;border-radius:2px;
  background:repeating-linear-gradient(90deg,
    var(--ply-a) 0 2px, var(--ply-line) 2px 3px,
    var(--ply-b) 3px 5px, var(--ply-line) 5px 6px);
}

/* hero slider */
.hero-media .frame{
  position:relative;aspect-ratio:5/4;border-radius:var(--radius);
  overflow:hidden;box-shadow:0 18px 44px rgba(38,50,109,.18);background:#fff;
}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.hero-slide.on{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;border-radius:0}
.hero-veil{
  position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;
  z-index:1;transition:opacity .4s ease;
}
.hero-veil.up{opacity:1}
.hero-slide .tag{
  position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.94);
  color:var(--navy);font-size:.8rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:7px 13px;border-radius:4px;
}
.hero-dots{
  position:absolute;right:10px;bottom:10px;display:flex;gap:2px;z-index:2;
}
.hero-dots button{
  width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.hero-dots button::before{
  content:'';display:block;width:11px;height:11px;border-radius:2px;
  background:rgba(255,255,255,.55);transition:background .2s,width .2s,transform .2s;
}
.hero-dots button:hover::before{transform:scale(1.15)}
.hero-dots button[aria-current="true"]::before{background:#fff;width:22px}
.hero-dots button:focus-visible{outline:3px solid var(--sky);outline-offset:-2px;border-radius:4px}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-media::before{display:none}
  .hero-media .frame{aspect-ratio:4/3}
}

/* services */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
@media (max-width:1000px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.card-grid{grid-template-columns:1fr}}
.card{
  background:#fff;border:1px solid #e6e8ef;border-radius:var(--radius);
  padding:28px 24px;box-shadow:0 4px 14px rgba(38,50,109,.05);
}
.card .icon{
  width:56px;height:56px;border-radius:12px;background:var(--sky-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.card .icon svg{width:30px;height:30px;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card p{margin:0;color:var(--muted);font-size:.95rem}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:38px}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border-radius:var(--radius);padding:30px 26px;border:1px solid #e6e8ef}
.step .num{font-size:2.6rem;font-weight:800;color:var(--sky);line-height:1;margin-bottom:12px}
.step p{color:var(--muted);margin:0;font-size:.95rem}

/* testimonials */
.quotes{columns:3;column-gap:22px;margin-top:38px}
@media (max-width:1000px){.quotes{columns:2}}
@media (max-width:640px){.quotes{columns:1}}
.quote{
  break-inside:avoid;background:#fff;border:1px solid #e6e8ef;border-radius:var(--radius);
  padding:24px 22px;margin:0 0 22px;
}
.quote p{margin:0 0 14px;font-size:.95rem}
.quote footer{font-weight:700;color:var(--navy);font-size:.9rem}
.quote::before{content:'\201C';display:block;font-size:2.4rem;font-weight:800;color:var(--sky);line-height:.6;margin-bottom:10px}

/* gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
@media (max-width:820px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gallery-grid{grid-template-columns:1fr}}
.gallery-grid button{
  padding:0;border:0;background:none;cursor:pointer;border-radius:10px;overflow:hidden;display:block;
}
.gallery-grid img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .25s}
.gallery-grid button:hover img{transform:scale(1.03)}
.lightbox{
  position:fixed;inset:0;background:rgba(20,25,55,.92);z-index:100;
  display:none;align-items:center;justify-content:center;padding:4vh 4vw;
}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:92vh;border-radius:8px}
.lightbox .close{
  position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;
  font-size:2.2rem;cursor:pointer;line-height:1;font-weight:400;
}

/* guide band */
.guide-grid{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:center}
@media (max-width:760px){.guide-grid{grid-template-columns:1fr}.guide-grid .cover{max-width:220px}}
.guide-grid .cover img{border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.inline-form{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.inline-form input[type=email]{
  flex:1 1 260px;padding:13px 16px;border-radius:10px;border:2px solid transparent;min-width:0;
}
.fineprint{font-size:.8rem;color:#b9cde0;margin-top:14px}
.fineprint a{color:#fff}

/* forms */
.form-panel{
  background:var(--stone);border:1px solid #dfe3ec;border-radius:var(--radius);
  padding:32px;box-shadow:0 2px 10px rgba(38,50,109,.04);
}
.section.alt .form-panel{background:#fff}
@media (max-width:560px){.form-panel{padding:22px 18px}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;margin-top:8px}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-weight:700;font-size:.9rem;color:var(--navy)}
.field input,.field select,.field textarea{
  padding:12px 14px;border:1px solid #cdd3e1;border-radius:6px;background:#fff;width:100%;
}
.field textarea{min-height:130px;resize:vertical}
fieldset{border:0;padding:0;margin:0}
fieldset legend{font-weight:700;font-size:.9rem;color:var(--navy);margin-bottom:8px;padding:0}
.choice-row{display:flex;gap:10px;flex-wrap:wrap}
.choice-row label{
  display:inline-flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid #cdd3e1;border-radius:4px;padding:10px 18px;cursor:pointer;
  font-size:.9rem;font-weight:700;color:var(--ink);line-height:1.2;
  -webkit-user-select:none;user-select:none;
}
.choice-row input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;
}
.choice-row label:focus-within{outline:3px solid var(--sky);outline-offset:2px}
.hp{position:absolute;left:-9999px;top:-9999px}
.field.reveal[hidden]{display:none}
.field.reveal{animation:revealIn .22s cubic-bezier(.2,.7,.3,1)}
@keyframes revealIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.field.reveal{animation:none}}

/* contact layout */
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;margin-top:38px;align-items:start}
@media (max-width:900px){
  /* Form first on a phone. Anyone tapping "Book a free consult" lands on #contact, and
     a full screen of address and opening hours before the first field reads as a dead
     end. Details still follow, just under the thing they came to do. */
  .contact-grid{grid-template-columns:1fr;gap:30px}
  .contact-grid .contact-details{order:2}
  .contact-grid .contact-form{order:1}
}
.contact-details p{margin:0 0 16px}
.contact-details .label{display:block;font-weight:700;color:var(--navy);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}
.contact-details a{text-decoration:none;font-weight:700}
.contact-details a:hover{text-decoration:underline}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:72px}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}}
.about-grid img{border-radius:var(--radius);box-shadow:var(--shadow)}
.about-grid.flip .media{order:2}
@media (max-width:860px){.about-grid.flip .media{order:0}}

/* legal pages */
.legal{max-width:780px}
.legal h1{margin-bottom:8px}
.legal h2{font-size:1.4rem;margin-top:2em}
.legal h3{margin-top:1.6em}

/* footer */
.site-footer{background:var(--navy-deep);color:#c9d3ea;padding:64px 0 34px;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr}}
.site-footer .foot-h{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px}
.site-footer a{color:#c9d3ea;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-brand img{height:64px;width:auto;margin-bottom:20px}
.footer-list{list-style:none;margin:0;padding:0}
.footer-list li{margin-bottom:9px}
.partner-row{display:flex;gap:20px;align-items:center;margin-top:26px;flex-wrap:wrap}
.partner-row a{
  display:inline-flex;border-radius:50%;line-height:0;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),filter .2s;
}
.partner-row a:hover,.partner-row a:focus-visible{
  transform:translateY(-4px) scale(1.05);
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));
}
/* Both source images are now cropped to their ink, so an equal height renders as an
   equal visible size. Before this the Trees logo carried 24% of empty canvas and looked
   smaller at the same height. */
.partner-row img{height:120px;width:auto}
@media (max-width:860px){.partner-row img{height:106px}}
@media (max-width:400px){.partner-row img{height:92px}}
.footer-legal{
  border-top:1px solid rgba(255,255,255,.15);margin-top:48px;padding-top:22px;
  display:flex;gap:8px 22px;flex-wrap:wrap;align-items:center;font-size:.82rem;
}
.footer-legal .spacer{flex:1}

/* ==================================================== motion and interaction */

/* scroll reveal */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
[data-reveal].shown{opacity:1;transform:none}
.stagger > *{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.stagger.shown > *{opacity:1;transform:none}
.stagger.shown > *:nth-child(1){transition-delay:.00s}
.stagger.shown > *:nth-child(2){transition-delay:.08s}
.stagger.shown > *:nth-child(3){transition-delay:.16s}
.stagger.shown > *:nth-child(4){transition-delay:.24s}
.stagger.shown > *:nth-child(5){transition-delay:.32s}
.stagger.shown > *:nth-child(6){transition-delay:.40s}
.stagger.shown > *:nth-child(7){transition-delay:.48s}
.stagger.shown > *:nth-child(8){transition-delay:.56s}
.stagger.shown > *:nth-child(9){transition-delay:.64s}

/* the plywood rule draws itself in */
.ply-rule{width:0;transition:width .8s cubic-bezier(.2,.7,.3,1) .15s}
.shown .ply-rule,.ply-rule.shown{width:76px}

/* hero entrance */
.hero-in{opacity:0;transform:translateY(16px);animation:heroRise .8s cubic-bezier(.2,.7,.3,1) forwards}
.hero-in.d1{animation-delay:.05s}
.hero-in.d2{animation-delay:.15s}
.hero-in.d3{animation-delay:.25s}
.hero-in.d4{animation-delay:.35s}
.hero-in.d5{animation-delay:.45s}
@keyframes heroRise{to{opacity:1;transform:none}}
.hero-media{overflow:visible}
/* every slide runs the same zoom on the same clock, so two slides are always at an
   identical scale at the moment they cross. Animating only the active slide made it
   snap back to 1x on every change. */
.hero-media .hero-slide img{animation:kenburns 16s ease-in-out infinite alternate;transform-origin:58% 45%}
.hero-media .frame.js-kb .hero-slide img{animation:none}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-media::before{height:0;top:18px;animation:spineDraw 1s cubic-bezier(.2,.7,.3,1) .5s forwards}
@keyframes spineDraw{to{height:calc(100% - 36px)}}

/* header state on scroll */
.site-header{transition:box-shadow .25s,background .25s}
.site-header.scrolled{box-shadow:0 6px 22px rgba(38,50,109,.10)}
.site-header.scrolled .header-inner{min-height:64px}
.header-inner{transition:min-height .25s}
.brand img{transition:height .25s}
.site-header.scrolled .brand img{height:38px}

/* buttons */
.btn{position:relative;overflow:hidden;transform:translateY(0);transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(38,50,109,.22)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn[data-busy="1"]{pointer-events:none;opacity:.75}
.main-nav a:not(.btn){position:relative}
.main-nav a:not(.btn)::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:var(--sky);transform:scaleX(0);transform-origin:left;transition:transform .22s;
}
.main-nav a:not(.btn):hover::after{transform:scaleX(1)}

/* service cards become links with a plywood sweep */
a.card{text-decoration:none;color:inherit;display:block;position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s}
a.card:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(38,50,109,.14);border-color:#cfe0ef}
a.card::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:6px;transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
  background:repeating-linear-gradient(90deg,
    var(--ply-a) 0 2px, var(--ply-line) 2px 3px,
    var(--ply-b) 3px 5px, var(--ply-line) 5px 6px);
}
a.card:hover::after,a.card:focus-visible::after{transform:scaleX(1)}
a.card .icon{transition:background .22s,transform .22s}
a.card:hover .icon{background:#dbecf8;transform:translateY(-2px) rotate(-3deg)}
a.card .go{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:700;
  font-size:.9rem;color:var(--navy);opacity:0;transform:translateX(-6px);transition:opacity .22s,transform .22s;
}
a.card:hover .go,a.card:focus-visible .go{opacity:1;transform:none}
@media (hover:none){a.card .go{opacity:1;transform:none}}

/* steps: a plywood line joins them as they arrive */
.steps{position:relative}
.steps::before{
  content:'';position:absolute;top:52px;left:12%;right:12%;height:5px;border-radius:3px;z-index:0;
  transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.3,1) .2s;
  background:repeating-linear-gradient(90deg,
    var(--ply-a) 0 2px, var(--ply-line) 2px 3px,
    var(--ply-b) 3px 5px, var(--ply-line) 5px 6px);
}
.steps.shown::before{transform:scaleX(1)}
@media (max-width:900px){.steps::before{display:none}}
.step{position:relative;z-index:1;transition:transform .22s,box-shadow .22s}
.step:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(38,50,109,.10)}
.step .num{transition:color .22s}
.step:hover .num{color:var(--navy)}

/* testimonials: clamp long reviews, expand in place */
.quote{transition:transform .22s,box-shadow .22s}
.quote:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(38,50,109,.10)}
.quote .body{overflow:hidden}
.quote .body.clamped{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical}
.quote .more{
  background:none;border:0;padding:0;margin:0 0 14px;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:700;color:var(--navy);text-decoration:underline;
}
.quote .more:hover{color:var(--sky)}

/* gallery */
.gallery-grid button{position:relative}
.gallery-grid button::after{
  content:'View';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(38,50,109,.55);color:#fff;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  font-size:.78rem;opacity:0;transition:opacity .22s;
}
.gallery-grid button:hover::after,.gallery-grid button:focus-visible::after{opacity:1}
.lightbox{opacity:0;transition:opacity .2s}
.lightbox.open{opacity:1}
.lightbox figure{margin:0;max-width:100%;text-align:center}
.lightbox figcaption{color:#c9d9ea;font-size:.9rem;margin-top:12px}
.lightbox img{animation:lbIn .28s cubic-bezier(.2,.7,.3,1)}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lightbox .nav{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);
  border:0;color:#fff;font-size:1.8rem;line-height:1;width:52px;height:52px;border-radius:50%;
  cursor:pointer;transition:background .18s;
}
.lightbox .nav:hover{background:rgba(255,255,255,.28)}
.lightbox .prev{left:16px}
.lightbox .next{right:16px}
.lightbox .count{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#c9d9ea;font-size:.85rem}
@media (max-width:600px){.lightbox .nav{width:44px;height:44px;font-size:1.4rem}}

/* sticky action bar, mobile */
.action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px 14px;
  background:rgba(255,255,255,.97);border-top:1px solid #e0e4ee;
  box-shadow:0 -6px 20px rgba(38,50,109,.10);
  transform:translateY(110%);transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.action-bar.up{transform:none}
/* Hidden while reading down the page, back on the moment they scroll up, which is when
   somebody is looking for a way to act. Also hidden outright over the contact form, where
   it would cover the fields it is asking them to fill in. */
.action-bar.away{transform:translateY(110%)}
.action-bar .btn{flex:1;text-align:center;padding:13px 10px}
@media (max-width:760px){.action-bar{display:flex}body{padding-bottom:74px}}

/* forms */
.field input,.field select,.field textarea{transition:border-color .18s,box-shadow .18s}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(140,197,235,.4);outline:none;
}
.choice-row label{transition:background .18s,border-color .18s,color .18s,transform .12s,box-shadow .18s}
.choice-row label:hover{border-color:var(--navy);background:var(--sky-soft)}
.choice-row label:active{transform:scale(.98)}
.choice-row label.on{background:var(--navy);border-color:var(--navy);color:#fff}
.choice-row label.on:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.choice-row label.flash{animation:chipFlash .9s ease}
@keyframes chipFlash{0%,100%{box-shadow:0 0 0 0 rgba(140,197,235,0)}30%{box-shadow:0 0 0 6px rgba(140,197,235,.55)}}
.inline-form input[type=email]{transition:box-shadow .18s}
.inline-form input[type=email]:focus{box-shadow:0 0 0 3px rgba(140,197,235,.55);outline:none}

/* space above any call to action that follows a block of content */
.quotes + .btn-row,.gallery-grid + .btn-row,.card-grid + .btn-row,.steps + .btn-row{margin-top:34px}
@media (max-width:640px){.quotes + .btn-row{margin-top:14px}}

/* reduced motion wins over everything above */
@media (prefers-reduced-motion:reduce){
  [data-reveal],.stagger > *{opacity:1!important;transform:none!important;transition:none!important}
  .ply-rule{width:76px!important;transition:none!important}
  .hero-in{opacity:1;transform:none;animation:none}
  .hero-media .hero-slide img{animation:none}
  .hero-slide{transition:none}
  .hero-veil{display:none}
  .hero-media::before{animation:none;height:calc(100% - 36px)}
  .steps::before{transform:scaleX(1)!important;transition:none!important}
  .btn:hover,a.card:hover,.step:hover,.quote:hover{transform:none!important}
  .action-bar{transition:none}
}