/* ========================================================================== NomadCare Medicals site stylesheet Bearing C identity v5.0. Navy leads. Amber points the way. Bearing = 28°. Load order: this file, then js/site.js at the end of . ========================================================================== */ :root{ --navy:#244289; --navy-deep:#1B3268; --amber:#E8962E; --amber-deep:#C77E1F; --sand:#F9EFDF; --cloud:#EDF3FA; --ink:#22314F; --slate:#5C6B80; --white:#fff; --rule:#DDE6F0; --rule-strong:#B9CBE2; --display:'Quicksand',Arial,sans-serif; --body:'Inter',Arial,sans-serif; --pad:clamp(20px,5vw,64px); --maxw:1280px; --bearing:28deg; --r:8px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased} img,svg{max-width:100%} img{display:block} a{color:inherit} h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.1;margin:0;letter-spacing:-.015em} h1{font-size:clamp(2.1rem,4.6vw,3.5rem)} h2{font-size:clamp(1.75rem,3.2vw,2.6rem)} h3{font-size:clamp(1.1rem,1.7vw,1.35rem)} h4{font-size:1.02rem} p{margin:0} :focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:3px} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .wrap--narrow{max-width:900px} .lede{font-size:clamp(1.03rem,1.3vw,1.17rem);line-height:1.62;color:var(--slate);max-width:64ch} .muted{color:var(--slate)} .center{text-align:center} .mt0{margin-top:0}.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem} /* data lines, brand-specified: Inter SemiBold, tracked, uppercase */ .data{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)} .data--amber{color:var(--amber-deep)} .data--light{color:rgba(255,255,255,.66)} /* -------------------------------------------------- buttons */ .btn{display:inline-flex;align-items:center;gap:.6rem;justify-content:center; font-family:var(--body);font-weight:600;font-size:.97rem;padding:.95rem 1.6rem; border-radius:6px;border:1.5px solid transparent;text-decoration:none;cursor:pointer; transition:background .18s,color .18s,border-color .18s,transform .18s} .btn:active{transform:translateY(1px)} .btn--primary{background:var(--navy);color:#fff;border-color:var(--navy)} .btn--primary:hover{background:var(--navy-deep);border-color:var(--navy-deep)} .btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)} .btn--ghost:hover{background:var(--cloud)} .btn--onnavy{background:#fff;color:var(--navy);border-color:#fff} .btn--onnavy:hover{background:var(--cloud);border-color:var(--cloud)} .btn--outnavy{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} .btn--outnavy:hover{border-color:#fff;background:rgba(255,255,255,.08)} .btn--sm{padding:.7rem 1.15rem;font-size:.88rem} .btn--block{width:100%} .btn svg{width:18px;height:18px;flex:none} .actions{display:flex;gap:.8rem;flex-wrap:wrap} /* -------------------------------------------------- image placeholders Drop the real file at the src path and it replaces this automatically. Missing file -> the removes itself and the spec panel shows. */ .ph{position:relative;overflow:hidden;background:var(--cloud);margin:0;border-radius:var(--r)} .ph::after{content:attr(data-spec);position:absolute;inset:0;z-index:0;display:flex; align-items:center;justify-content:center;text-align:center;padding:1.2rem; font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:#8FA3BE;line-height:1.9;border:1px dashed var(--rule-strong); background-image:repeating-linear-gradient(var(--bearing),transparent 0 12px,rgba(36,66,137,.05) 12px 13px)} .ph img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover} .ph--wide{aspect-ratio:16/9} .ph--photo{aspect-ratio:4/3} .ph--portrait{aspect-ratio:3/4} .ph--square{aspect-ratio:1/1} /* -------------------------------------------------- header */ .topbar{background:var(--navy-deep);color:#fff} .topbar .wrap{display:flex;gap:1.2rem;justify-content:space-between;align-items:center; min-height:40px;font-size:.8rem;flex-wrap:wrap} .topbar a{text-decoration:none;color:rgba(255,255,255,.85)} .topbar a:hover{color:#fff} .pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber); margin-right:.5rem;vertical-align:middle} @media(prefers-reduced-motion:no-preference){ .pulse{animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}} } .site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95); backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)} .site-head .wrap{display:flex;align-items:center;gap:1.5rem;min-height:76px} .brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;flex:none} .brand svg{width:42px;height:42px;flex:none} .brand b{font-family:var(--display);font-weight:700;font-size:1.04rem;color:var(--navy); line-height:1.05;letter-spacing:-.01em;display:block} .brand span span{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase; color:var(--slate);font-weight:600;display:block} .nav{display:flex;gap:1.6rem;margin-left:auto;align-items:center} .nav a{text-decoration:none;font-size:.94rem;font-weight:500;color:var(--ink); padding:.4rem 0;border-bottom:2px solid transparent} .nav a:hover{border-bottom-color:var(--amber)} .nav a[aria-current="page"]{color:var(--navy);font-weight:600;border-bottom-color:var(--navy)} .head-cta{display:flex;gap:.6rem;align-items:center} .burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--rule); border-radius:6px;padding:.55rem .7rem;cursor:pointer} .burger span{display:block;width:20px;height:2px;background:var(--navy);margin:4px 0} @media(max-width:1080px){ .site-head .wrap{flex-wrap:wrap} .nav,.head-cta{display:none;width:100%} .burger{display:block} .site-head.open .nav{display:flex;flex-direction:column;gap:0;align-items:stretch; margin-left:0;border-top:1px solid var(--rule);padding-top:.3rem} .site-head.open .nav a{padding:.9rem 0;border-bottom:1px solid var(--rule)} .site-head.open .head-cta{display:flex;gap:.6rem;padding:1rem 0 1.3rem} .site-head.open .head-cta .btn{flex:1} } /* -------------------------------------------------- sections */ .sec{padding-block:clamp(3.2rem,6vw,5.6rem)} .sec--tight{padding-block:clamp(2.4rem,4vw,3.6rem)} .sec--cloud{background:var(--cloud)} .sec--sand{background:var(--sand)} .sec--navy{background:var(--navy);color:#fff} .sec--navy h2,.sec--navy h3{color:#fff} .sec--navy .lede{color:rgba(255,255,255,.72)} .sec-head{max-width:66ch;margin-bottom:clamp(1.8rem,3.2vw,2.8rem)} .sec-head h2{color:var(--navy)} .sec--navy .sec-head h2{color:#fff} .sec-head p{margin-top:1rem} /* -------------------------------------------------- page header (inner pages) */ .pagehead{background:var(--cloud);border-bottom:1px solid var(--rule)} .pagehead .wrap{padding-block:clamp(2.2rem,4.5vw,3.6rem)} .pagehead h1{color:var(--navy);max-width:20ch;text-wrap:balance} .pagehead .lede{margin-top:1.1rem} .pagehead .actions{margin-top:1.9rem} .crumb{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1.1rem; font-size:.82rem;color:var(--slate)} .crumb a{text-decoration:none} .crumb a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px} .crumb i{width:14px;height:1px;background:var(--rule-strong);display:block} /* -------------------------------------------------- hero (home only) */ .hero{position:relative;background:#fff;overflow:hidden} .hero::before{content:"";position:absolute;top:-30%;right:-14%;width:62vw;height:150%; background:var(--cloud);transform:rotate(var(--bearing));z-index:0} .hero .wrap{position:relative;z-index:1;display:grid;gap:clamp(2rem,4vw,4.2rem); grid-template-columns:1.06fr .94fr;align-items:center;padding-block:clamp(3rem,6vw,5.2rem)} .hero h1{color:var(--navy);max-width:15ch;text-wrap:balance;font-size:clamp(2.4rem,5.2vw,4rem)} .hero .lede{margin-top:1.5rem} .hero .actions{margin-top:2.1rem} .hero-alt{margin-top:1.15rem;font-size:.93rem;color:var(--slate)} .hero-alt a{color:var(--navy);font-weight:600;text-underline-offset:3px} .credentials{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;margin:2.4rem 0 0;padding:1.4rem 0 0; border-top:1px solid var(--rule);list-style:none} .hero-visual{position:relative} .hero-visual .ph{aspect-ratio:4/5} @media(max-width:980px){ .hero .wrap{grid-template-columns:1fr} .hero::before{display:none} .hero-visual .ph{aspect-ratio:4/3} } .instrument{position:absolute;left:-34px;bottom:34px;width:min(310px,86%);background:var(--navy); color:#fff;border-radius:10px;padding:1.25rem 1.35rem 1.15rem; box-shadow:0 26px 50px -22px rgba(27,50,104,.65)} @media(max-width:980px){.instrument{position:static;width:100%;margin-top:1rem}} .instrument h4{color:#fff;margin-bottom:.15rem} .inst-head{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem} .inst-rose{width:46px;height:46px;flex:none} .inst-rows{display:grid;gap:.6rem;margin:0} .inst-rows div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline; padding-bottom:.55rem;border-bottom:1px solid rgba(255,255,255,.15);font-size:.83rem} .inst-rows div:last-child{border-bottom:0;padding-bottom:0} .inst-rows dt{color:rgba(255,255,255,.62)} .inst-rows dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums} .inst-rows .ok{color:var(--amber)} /* -------------------------------------------------- stat band */ .statband{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.16)} .statband > div{background:var(--navy);padding:1.3rem 1.4rem} .statband strong{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.8rem); display:block;line-height:1;letter-spacing:-.02em} .statband p{font-size:.85rem;color:rgba(255,255,255,.7);margin-top:.55rem;line-height:1.45} .statfoot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.4rem} @media(max-width:760px){.statband{grid-template-columns:repeat(2,1fr)}} /* -------------------------------------------------- cards & grids */ .grid{display:grid;gap:clamp(1rem,2vw,1.6rem)} .grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} @media(max-width:980px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}} @media(max-width:720px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}} .card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule); border-radius:var(--r);padding:1.6rem;text-decoration:none;transition:border-color .2s} a.card:hover{border-color:var(--navy)} .card .ico{width:34px;height:34px;color:var(--navy);margin-bottom:1.1rem} .card h3{color:var(--navy);margin-bottom:.55rem} .card p{font-size:.95rem;color:var(--slate)} .card .more{margin-top:auto;padding-top:1.2rem;font-weight:600;color:var(--navy);font-size:.93rem; display:inline-flex;align-items:center;gap:.55rem} .card .more i{width:20px;height:1.5px;background:var(--amber);display:block;transition:width .2s} a.card:hover .more i{width:34px} .door{position:relative;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden; text-decoration:none;border:1px solid var(--rule);background:#fff;transition:border-color .2s} .door:hover{border-color:var(--navy)} .door .ph{border-radius:0;aspect-ratio:16/9} .door-body{padding:1.6rem 1.7rem 1.8rem} .door-body h3{color:var(--navy);margin-bottom:.6rem} .door-body p{color:var(--slate);font-size:.96rem} .door-link{margin-top:1.2rem;font-weight:600;color:var(--navy);font-size:.94rem; display:inline-flex;align-items:center;gap:.5rem} .door-link i{width:22px;height:1.5px;background:var(--amber);display:block;transition:width .2s} .door:hover .door-link i{width:36px} /* -------------------------------------------------- services ledger */ .ledger{border-top:1px solid var(--rule)} .svc{border-bottom:1px solid var(--rule)} .svc summary{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:1.2rem; padding:1.3rem 0;cursor:pointer;list-style:none} .svc summary::-webkit-details-marker{display:none} .svc summary:hover h3{color:var(--navy)} .svc-no{font-variant-numeric:tabular-nums;font-size:.78rem;font-weight:600;color:var(--slate);letter-spacing:.08em} .svc summary h3{font-size:clamp(1.1rem,1.9vw,1.5rem);transition:color .18s} .plus{width:26px;height:26px;position:relative;flex:none} .plus::before,.plus::after{content:"";position:absolute;background:var(--navy);transition:transform .22s,background .22s} .plus::before{left:0;right:0;top:12px;height:2px} .plus::after{top:0;bottom:0;left:12px;width:2px} details[open] > summary .plus::after{transform:rotate(90deg)} details[open] > summary .plus::before,details[open] > summary .plus::after{background:var(--amber)} .svc-detail{display:grid;grid-template-columns:2.4rem 1.1fr .9fr;gap:1.2rem;padding:0 0 1.8rem;align-items:start} .svc-detail > :first-child{grid-column:2} .svc-detail p{color:var(--slate);font-size:.97rem;max-width:56ch} .tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem;padding:0;list-style:none} .tag{font-size:.73rem;font-weight:600;padding:.32rem .7rem;border-radius:99px; background:var(--cloud);color:var(--navy)} .svc-meta{border-left:2px solid var(--amber);padding-left:1.1rem} .svc-meta dl{margin:0;display:grid;gap:.7rem} .svc-meta dt{font-size:.71rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)} .svc-meta dd{margin:.15rem 0 0;font-weight:600;font-size:.94rem} @media(max-width:820px){ .svc summary{grid-template-columns:2rem 1fr auto;gap:.8rem} .svc-detail{grid-template-columns:1fr} .svc-detail > :first-child{grid-column:1} } /* -------------------------------------------------- tabs */ .tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.8rem} .tab{font-family:var(--body);font-weight:600;font-size:.93rem;padding:.75rem 1.25rem;border-radius:6px; border:1px solid var(--rule);background:#fff;color:var(--ink);cursor:pointer;transition:.18s} .tab:hover{border-color:var(--navy)} .tab[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)} .panel{display:none;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,3rem);align-items:center} .panel[data-active="true"]{display:grid} .panel .ph{aspect-ratio:5/4} .panel h3{font-size:clamp(1.4rem,2.4vw,2rem);color:var(--navy);margin-bottom:.9rem} .panel p{color:var(--slate)} @media(max-width:860px){.panel[data-active="true"]{grid-template-columns:1fr}} /* -------------------------------------------------- bearing list */ .blist{margin:1.3rem 0 0;padding:0;list-style:none;display:grid;gap:.6rem} .blist li{padding-left:1.5rem;position:relative;font-size:.96rem} .blist li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px; background:var(--amber);transform:rotate(var(--bearing))} /* -------------------------------------------------- steps (a real sequence) */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;padding-top:1.9rem} .step{padding:2rem 1.5rem 0 0;border-top:2px solid var(--rule);position:relative} .step:first-child{border-top-color:var(--amber)} .step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-.1rem;left:0; transform:translateY(-100%);font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--slate)} .step h3{font-size:1.1rem;margin-bottom:.5rem;color:var(--navy)} .step p{font-size:.92rem;color:var(--slate);max-width:34ch} .step .data{margin-top:.9rem;display:block} @media(max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:2.2rem 0}} @media(max-width:560px){.steps{grid-template-columns:1fr}} /* -------------------------------------------------- coverage map */ .split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,3vw,3.4rem);align-items:center} .split--rev{grid-template-columns:.9fr 1.1fr} @media(max-width:900px){.split,.split--rev{grid-template-columns:1fr}} .mapwrap{position:relative} .ugmap{width:100%;height:auto;display:block;background:var(--cloud);border-radius:6px;cursor:crosshair} .ugmap-grid line{stroke:var(--rule);stroke-width:1.5} .ugmap-land{fill:var(--navy);transition:fill .3s} .ugmap:hover .ugmap-land{fill:var(--navy-deep)} .ugmap-lake{fill:var(--cloud)} .ugmap-coast{fill:none;stroke:var(--navy-deep);stroke-width:2.5} .ugmap-home .dot{fill:var(--amber)} .ugmap-home .ring{fill:none;stroke:var(--amber);stroke-width:3;opacity:0;transform-origin:center;animation:ugpulse 2.6s ease-out infinite} .ugmap-home .ring--2{animation-delay:1.3s} @keyframes ugpulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.6);opacity:0}} .ugmap-route{stroke:var(--amber);stroke-width:3;stroke-dasharray:8 7;stroke-linecap:round;opacity:0} .ugmap-route.is-drawn{opacity:1;animation:ugdash 12s linear infinite} @keyframes ugdash{to{stroke-dashoffset:-300}} .ugmap-pin .dot{fill:#fff;stroke:var(--amber);stroke-width:4} .ugmap-pin .halo{fill:var(--amber);opacity:.25} .ugmap-hit{cursor:crosshair} .ugmap-card{position:absolute;left:1rem;bottom:1rem;background:#fff;border:1px solid var(--rule);border-left:3px solid var(--amber); padding:.9rem 1rem;border-radius:6px;box-shadow:0 10px 30px rgba(27,50,104,.12);display:flex;flex-direction:column;gap:.35rem;max-width:16rem} .ugmap-card b{font-family:var(--display);font-size:1.4rem;color:var(--navy);line-height:1} .ugmap-card span{font-size:.8rem;color:var(--slate)} .ugmap-card .btn{margin-top:.5rem} .ugmap-hint{position:absolute;top:1rem;left:1rem;background:rgba(255,255,255,.9);padding:.35rem .6rem;border-radius:4px;color:var(--navy)} @media(prefers-reduced-motion:reduce){.ugmap-home .ring,.ugmap-route.is-drawn{animation:none}.ugmap-home .ring{opacity:.5;transform:scale(1.4)}} /* ---- motion: card lift, amber reveal rule, hero drift ---- */ .card{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .2s} a.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(27,50,104,.12)} .sec-head h2{position:relative;padding-bottom:.6rem} .sec-head h2::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--amber);transition:width .7s cubic-bezier(.2,.7,.2,1) .15s} .rise[data-in="true"] h2::after,.sec-head.rise[data-in="true"] h2::after{width:3.2rem} .hero::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%; background:radial-gradient(closest-side,rgba(232,150,46,.12),transparent 70%);animation:herodrift 18s ease-in-out infinite alternate;pointer-events:none} @keyframes herodrift{from{transform:translate(0,0)}to{transform:translate(-8%,10%)}} .brand svg{transition:transform .5s cubic-bezier(.2,.7,.2,1)} .brand:hover svg{transform:rotate(-12deg)} @media(prefers-reduced-motion:reduce){.hero::before{animation:none}.card,a.card:hover{transform:none}} /* ---- forms: honeypot ---- */ .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .cf-turnstile{margin:1rem 0} /* -------------------------------------------------- key/value list */ .kv{margin:1.5rem 0 0;padding:0;list-style:none;display:grid;gap:.85rem} .kv li{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.85rem; border-bottom:1px solid var(--rule);font-size:.95rem} .kv b{font-weight:600} .kv span{color:var(--slate);font-variant-numeric:tabular-nums;text-align:right} /* -------------------------------------------------- quote + badges */ .quote{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.3vw,1.8rem); line-height:1.3;color:var(--navy);letter-spacing:-.01em} .quote-by{margin-top:1.3rem;font-size:.93rem;color:var(--slate)} .quote-by b{color:var(--ink);display:block;font-weight:600} .badges{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule); margin-top:2.2rem;border:1px solid var(--rule)} .badges div{background:#fff;padding:1.1rem;text-align:center;font-size:.77rem;font-weight:600; color:var(--slate);line-height:1.4} @media(max-width:700px){.badges{grid-template-columns:1fr 1fr}} /* -------------------------------------------------- prose */ .prose{max-width:70ch} .prose h2{color:var(--navy);margin-top:2.6rem} .prose h3{color:var(--navy);margin-top:2rem} .prose p{margin-top:1rem;color:var(--ink)} .prose ul,.prose ol{margin-top:1rem;padding-left:1.2rem;color:var(--ink)} .prose li{margin-top:.5rem} .prose > :first-child{margin-top:0} .callout{background:var(--cloud);border-left:3px solid var(--amber);border-radius:0 var(--r) var(--r) 0; padding:1.2rem 1.4rem;margin-top:1.8rem;font-size:.96rem} .callout b{display:block;font-family:var(--display);margin-bottom:.3rem;color:var(--navy)} /* -------------------------------------------------- tables */ .table{width:100%;border-collapse:collapse;margin-top:1.6rem;font-size:.94rem} .table th{background:var(--navy);color:#fff;text-align:left;padding:.85rem 1rem; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600} .table td{padding:.85rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top} .table tr:nth-child(even) td{background:#FAFCFE} .table-scroll{overflow-x:auto} /* -------------------------------------------------- forms */ .form{display:grid;gap:1.1rem;max-width:640px} .form--wide{max-width:none} .field{display:grid;gap:.4rem} .field label{font-size:.83rem;font-weight:600;color:var(--ink)} .field .hint{font-size:.8rem;color:var(--slate)} .field input,.field select,.field textarea{ padding:.85rem 1rem;border:1px solid var(--rule);border-radius:6px;font-family:var(--body); font-size:1rem;background:#fff;color:var(--ink);width:100%} .field input:hover,.field select:hover,.field textarea:hover{border-color:var(--rule-strong)} .field textarea{min-height:130px;resize:vertical} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} @media(max-width:640px){.field-row{grid-template-columns:1fr}} .checks{display:grid;gap:.6rem;margin-top:.2rem} .check{display:flex;gap:.65rem;align-items:flex-start;font-size:.94rem} .check input{width:auto;margin-top:.25rem;accent-color:var(--navy)} .required{color:var(--amber-deep)} .form-note{font-size:.83rem;color:var(--slate)} .formdone{display:none;background:var(--cloud);border-left:3px solid var(--amber); padding:1.2rem 1.4rem;border-radius:0 var(--r) var(--r) 0;max-width:640px} .formdone[data-shown="true"]{display:block} .formdone b{display:block;font-family:var(--display);font-size:1.08rem;color:var(--navy);margin-bottom:.35rem} /* -------------------------------------------------- verify */ .verify-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18); border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);max-width:760px} .verify-form{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end} .verify-form .field{flex:1 1 280px;max-width:none} .verify-form label{color:rgba(255,255,255,.66)} .verify-form input{border-color:rgba(255,255,255,.3);background:rgba(0,0,0,.2);color:#fff;letter-spacing:.06em} .verify-form input::placeholder{color:rgba(255,255,255,.4)} .verify-hint{margin-top:.9rem;font-size:.83rem;color:rgba(255,255,255,.55)} .verify-out{margin-top:1.4rem;display:none} .verify-out[data-state]{display:block} .vcard{background:#fff;color:var(--ink);border-radius:var(--r);padding:1.3rem 1.4rem} .vcard-top{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem; padding-bottom:1rem;border-bottom:1px solid var(--rule)} .vcard-top b{font-family:var(--display);font-size:1.08rem} .vdot{width:11px;height:11px;border-radius:50%;background:var(--amber);flex:none} .vcard dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.4rem} .vcard dt{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)} .vcard dd{margin:.2rem 0 0;font-weight:600;font-size:.94rem} .vfail{background:rgba(232,150,46,.14);border:1px solid rgba(232,150,46,.5);border-radius:var(--r); padding:1.15rem 1.3rem;font-size:.94rem;color:#fff} .vfail b{display:block;margin-bottom:.3rem;font-family:var(--display);font-size:1.05rem} /* -------------------------------------------------- people */ .person{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:#fff} .person .ph{border-radius:0;aspect-ratio:3/4} .person-body{padding:1.3rem 1.4rem 1.5rem} .person h3{color:var(--navy);font-size:1.1rem} .person .role{font-size:.85rem;color:var(--amber-deep);font-weight:600;margin-top:.25rem} .person p{font-size:.92rem;color:var(--slate);margin-top:.8rem} .person .reg{font-size:.76rem;color:var(--slate);margin-top:.9rem;letter-spacing:.05em} /* -------------------------------------------------- downloads */ .docs{display:grid;gap:.8rem;margin-top:1.6rem;padding:0;list-style:none} .doc{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;border:1px solid var(--rule); border-radius:var(--r);text-decoration:none;background:#fff;transition:border-color .2s} .doc:hover{border-color:var(--navy)} .doc svg{width:22px;height:22px;color:var(--navy);flex:none} .doc b{display:block;font-weight:600;font-size:.97rem} .doc span{font-size:.82rem;color:var(--slate)} .doc .meta{margin-left:auto;text-align:right;flex:none} /* -------------------------------------------------- faq */ .faq{max-width:840px} .faq details{border-bottom:1px solid var(--rule)} .faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.2rem; padding:1.25rem 0;cursor:pointer;list-style:none;font-weight:600;font-size:1.04rem} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--navy)} .faq p{padding:0 0 1.5rem;color:var(--slate);max-width:70ch;font-size:.97rem} /* -------------------------------------------------- closing cta */ .close-cta{background:var(--navy);color:#fff;position:relative;overflow:hidden} .close-cta::before{content:"";position:absolute;right:-8%;top:-60%;width:44vw;height:220%; background:var(--navy-deep);transform:rotate(var(--bearing))} .close-cta .wrap{position:relative;z-index:1} .close-cta h2{color:#fff;max-width:18ch} .close-cta p{color:rgba(255,255,255,.75);margin-top:1.1rem;max-width:58ch} .close-cta .actions{margin-top:2.1rem} .close-line{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2); display:flex;gap:2rem;flex-wrap:wrap;font-size:.91rem;color:rgba(255,255,255,.8)} .close-line b{color:#fff} /* -------------------------------------------------- footer */ .foot{background:#fff;border-top:1px solid var(--rule);padding-block:clamp(2.6rem,4vw,3.6rem)} .foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:2rem} @media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr;gap:2.2rem}} @media(max-width:560px){.foot-grid{grid-template-columns:1fr}} .foot h4{font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;color:var(--slate); font-family:var(--body);font-weight:600;margin-bottom:1rem} .foot ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem} .foot a{text-decoration:none;font-size:.92rem;color:var(--ink)} .foot a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px} .foot-addr{font-size:.92rem;color:var(--slate);line-height:1.7;margin-top:1.1rem;max-width:34ch} .foot-base{margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--rule);display:flex; justify-content:space-between;gap:1.2rem;flex-wrap:wrap;font-size:.82rem;color:var(--slate)} .foot-base a{font-size:.82rem;color:var(--slate)} /* -------------------------------------------------- sticky bar */ .stickybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--navy);color:#fff; transform:translateY(110%);transition:transform .3s ease;box-shadow:0 -10px 30px -14px rgba(0,0,0,.5)} .stickybar[data-show="true"]{transform:translateY(0)} .stickybar .wrap{display:flex;align-items:center;gap:1rem;justify-content:space-between; padding-block:.85rem;flex-wrap:wrap} .stickybar p{font-size:.91rem} .stickybar .close{background:none;border:0;color:rgba(255,255,255,.6);cursor:pointer; font-size:1.3rem;line-height:1;padding:.2rem .4rem} @media(max-width:640px){.stickybar p{display:none}} /* -------------------------------------------------- ui kit only */ .swatch{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden} .swatch .chip{height:110px} .swatch .info{padding:.9rem 1rem;font-size:.83rem} .swatch .info b{display:block;font-family:var(--display);font-size:.98rem;color:var(--ink)} .swatch .info span{color:var(--slate);font-variant-numeric:tabular-nums} .kit-row{border-top:1px solid var(--rule);padding-top:1.6rem;margin-top:2.4rem} .icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1px; background:var(--rule);border:1px solid var(--rule);margin-top:1.4rem} .icon-grid figure{background:#fff;margin:0;padding:1.3rem .6rem;text-align:center} .icon-grid img{width:30px;height:30px;margin:0 auto .7rem} .icon-grid figcaption{font-size:.72rem;color:var(--slate);word-break:break-word} /* -------------------------------------------------- reveal */ @media(prefers-reduced-motion:no-preference){ .rise{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease} .rise[data-in="true"]{opacity:1;transform:none} } .skip{position:absolute;left:-9999px} .skip:focus{left:var(--pad);top:.5rem;z-index:100;background:#fff;padding:.7rem 1rem; border-radius:6px;border:2px solid var(--navy)} /* -------------------------------------------------- production override Photography not yet supplied renders as a plain brand-tinted panel instead of the dashed specification placeholder. Delete this block once every image in images/ is present. */ .ph::after{content:"";border:0;background-image:none; background:linear-gradient(160deg,var(--cloud) 0%,#E3ECF7 100%)}