
/* Palette: ink, paper, signal red. Modeled on the approved concept design. */
:root{--paper:#f5f3ee;--sheet:#ffffff;--ink:#0c1424;--carbon:#c4202d;--stamp:#c4202d;--rule:#d9d4c9;--mute:#5b6577;--slate:#0c1424;--dk:#0c1424;--dk2:#16223b;--onink:#e8ecf4;--onmute:#b8c2d4;--dkline:#243252;
--display:"Libre Franklin","Franklin Gothic Medium",Arial,sans-serif;--body:"Source Sans 3",system-ui,sans-serif;--mono:"Libre Franklin",Arial,sans-serif}
@media (prefers-color-scheme:dark){:root{--paper:#0f1726;--sheet:#16223b;--ink:#e8ecf4;--carbon:#ff6b76;--stamp:#ff6b76;--rule:#2b3a52;--mute:#a3b0c4}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--body)}
a{color:var(--carbon)}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0}
/* top bar */
header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:58px}
.brand{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.brand i{font-style:normal;color:var(--carbon)}
nav a{font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink);margin-left:20px}
nav a:hover,nav a:focus-visible{color:var(--stamp)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--carbon);outline-offset:2px}
/* hero */
.hero{padding:64px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
h1{font-size:clamp(40px,6.4vw,76px);font-weight:800;letter-spacing:-.035em}
h1 em{font-style:normal;color:var(--carbon)}
.hero p.sub{font-size:19px;color:var(--mute);max-width:520px;margin:20px 0 28px}
.btn{display:inline-block;font:600 15px var(--body);background:var(--carbon);color:var(--sheet);padding:14px 24px;border-radius:4px;text-decoration:none;border:0;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none;margin-left:10px}
/* the waybill (signature) */
.way{position:relative;background:var(--sheet);border:1.5px solid var(--ink);border-radius:6px;padding:20px 22px 22px;transform:rotate(1.2deg);box-shadow:8px 10px 0 color-mix(in srgb,var(--carbon) 22%,transparent)}
.way::before,.way::after{content:"";position:absolute;left:-1.5px;right:-1.5px;height:10px;background:radial-gradient(circle at 6px 0,var(--paper) 4px,transparent 4.5px) 0 0/12px 10px repeat-x}
.way::before{top:-10px;transform:scaleY(-1)}.way::after{bottom:-10px}
.way h3{font-size:22px;margin:2px 0 12px}
.way .row{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:8px 0;border-top:1px dashed var(--rule);min-height:42px}
.way .row b{font:400 14px var(--mono);color:var(--carbon);min-height:1.4em}
.way .cur::after{content:"▌";animation:blink 1s steps(2) infinite;color:var(--carbon)}
.stamp{position:absolute;right:16px;top:14px;border:3px solid var(--stamp);color:var(--stamp);font:800 20px var(--display);letter-spacing:.1em;padding:4px 12px;border-radius:4px;transform:rotate(-11deg) scale(2.2);opacity:0;pointer-events:none}
.stamp.on{opacity:.9;transform:rotate(-11deg) scale(1);transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.note{font:12px var(--mono);color:var(--mute);margin-top:10px}
@keyframes blink{50%{opacity:0}}

/* photography */
.band{position:relative;height:clamp(220px,34vw,420px);background:#0c121b url("https://images.unsplash.com/photo-1766785368863-f2188a8c8b32?auto=format&fit=crop&w=1800&q=70") center/cover;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,18,27,.82),rgba(12,18,27,.1) 70%)}
.band .wrap{position:relative;z-index:1;height:100%;display:flex;align-items:center}
.band p{color:#fff;font:800 clamp(24px,4vw,44px)/1.1 var(--display);letter-spacing:-.02em;max-width:560px;margin:0}
.band p small{display:block;font:500 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#cfe0f5;margin-top:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.pc{background:var(--sheet);border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.pc:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--carbon)}
.pc img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--rule)}
.pc div{padding:14px 16px 18px}.pc h3{font-size:20px;margin-bottom:4px}.pc p{margin:0;color:var(--mute);font-size:15px}
.mark{vertical-align:-5px;margin-right:8px}
.faq details{border-top:1px solid var(--rule);padding:16px 0}.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;font:700 19px var(--display);list-style:none}.faq summary::after{content:"+";float:right;font-family:var(--mono)}
.faq details[open] summary::after{content:"\2212"}.faq p{margin:10px 0 0;color:var(--mute);max-width:720px}
.who{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.who span{border:1.5px solid var(--ink);border-radius:999px;padding:6px 16px;font:500 13px var(--mono);text-transform:uppercase;letter-spacing:.06em;background:var(--sheet)}
/* sections */
section{padding:72px 0;border-top:1px solid var(--rule)}
.eyebrow{margin-bottom:10px}
h2{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.025em;max-width:760px}
.lead{color:var(--mute);max-width:640px;margin:14px 0 36px;font-size:18px}
/* services as manifest */
.man{border:1.5px solid var(--ink);border-radius:6px;background:var(--sheet);overflow:hidden}
.man .li{display:grid;grid-template-columns:64px 1fr 1.3fr;gap:16px;padding:18px 20px;border-top:1px solid var(--rule);align-items:baseline;transition:background .15s}
.man .li:first-child{border-top:0}
.man .li:hover{background:color-mix(in srgb,var(--carbon) 9%,var(--sheet))}
.man .li h3{font-size:21px}.man .li p{margin:0;color:var(--mute);font-size:15.5px}
/* follow a job */
.job{display:grid;grid-template-columns:260px 1fr;gap:28px}
.steps{display:flex;flex-direction:column;gap:8px}
.steps button{all:unset;cursor:pointer;display:flex;gap:12px;align-items:center;padding:14px 16px;border:1.5px solid var(--rule);border-radius:6px;background:var(--sheet);font:600 16px var(--body)}
.steps button span{font:500 12px var(--mono);color:var(--mute)}
.steps button[aria-selected=true]{border-color:var(--ink);box-shadow:4px 4px 0 var(--carbon)}
.steps button:focus-visible{outline:3px solid var(--carbon);outline-offset:2px}
.pane{background:var(--sheet);border:1.5px solid var(--ink);border-radius:6px;padding:26px;min-height:250px}
.pane h3{font-size:28px;margin-bottom:10px}.pane p{margin:0 0 12px;color:var(--mute)}
.pane ul{margin:0;padding-left:20px}.pane li{margin:6px 0}
/* company record */
.rec{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;border:1.5px solid var(--ink);border-radius:6px;background:var(--sheet)}
.rec div{padding:14px 18px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.rec b{display:block;font:500 17px var(--mono);margin-top:4px;word-break:break-word}
/* contact */
.form{display:grid;gap:14px;max-width:640px}
.form label{font:500 12.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);display:grid;gap:6px}
.form input,.form textarea,.form select{font:16px var(--body);padding:12px;border:1.5px solid var(--ink);border-radius:4px;background:var(--sheet);color:var(--ink);width:100%}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#msg{font:14px var(--mono);color:var(--mute);min-height:1.4em}
footer{background:var(--slate);color:#dfe7f0;padding:32px 0;font-size:14px}
footer .mono{color:#9fb0c4}
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}.js .rv.in{opacity:1;transform:none}
@media(max-width:860px){.hero .wrap,.job{grid-template-columns:1fr}.way{transform:none}.man .li{grid-template-columns:1fr;gap:4px}.form .two{grid-template-columns:1fr}nav a:not(:last-child){display:none}}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}.stamp{opacity:.9;transform:rotate(-11deg)}}

/* subpages */
.page{padding:56px 0 24px}.page h1{font-size:clamp(34px,5vw,56px)}
.crumb{margin-bottom:14px}.crumb a{color:var(--mute)}
.svc{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;padding:44px 0;border-top:1px solid var(--rule);align-items:start}
.svc:nth-child(even) .ph{order:2}
.svc img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1.5px solid var(--ink);border-radius:6px;background:var(--rule)}
.svc h2{font-size:32px;margin-bottom:8px}.svc p{color:var(--mute);margin:0 0 12px}
.svc h4{font:500 12.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--carbon);margin:16px 0 6px}
.svc ul{margin:0;padding-left:20px}.svc li{margin:4px 0}
.sheet{background:var(--sheet);border:1.5px solid var(--ink);border-radius:6px;padding:34px 38px;max-width:860px;margin:0 auto}
.sheet h2{font-size:24px;margin:22px 0 8px}.sheet h2:first-child{margin-top:0}
.sheet table{width:100%;border-collapse:collapse;font-size:15px}.sheet td{padding:7px 8px;border-top:1px solid var(--rule);vertical-align:top}.sheet td:first-child{font:500 13px var(--mono);color:var(--mute);width:34%}
.sheet ul{padding-left:20px;margin:6px 0}
.cta{background:var(--slate);color:#fff;border-radius:8px;padding:34px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:30px 0}
.cta h3{font-size:26px;color:#fff}.cta .btn{background:#fff;color:var(--slate);box-shadow:4px 4px 0 var(--carbon)}
.legal{max-width:760px}.legal h2{font-size:24px;margin:28px 0 6px}.legal p,.legal li{color:var(--mute)}
@media(max-width:860px){.svc{grid-template-columns:1fr}.svc:nth-child(even) .ph{order:0}.sheet{padding:22px}}
@media print{header,footer,.noprint,.cta{display:none!important}body{background:#fff;color:#000;font-size:12px}.sheet{border:0;padding:0;max-width:none}.page{padding:0}}

/* v3 polish */
.skip{position:absolute;left:-999px;top:8px;background:var(--carbon);color:#fff;padding:10px 16px;border-radius:4px;z-index:20}.skip:focus{left:8px}
nav a.navcta{background:var(--carbon);color:var(--sheet);padding:8px 14px;border-radius:4px;margin-left:20px}
nav a.navcta:hover{background:var(--stamp);color:#fff}
.menu{all:unset;display:none;cursor:pointer;font:500 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--ink);padding:7px 12px;border-radius:4px}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--sheet)}
.trust div{padding:22px 24px;border-right:1px solid var(--rule)}.trust div:last-child{border-right:0}
.trust b{display:block;font:800 19px var(--display);margin:6px 0 4px}.trust p{margin:0;color:var(--mute);font-size:15px}
.trust svg{color:var(--carbon)}
.endcta{background:var(--slate);color:#fff;padding:64px 0;text-align:center;border-top:0}
.endcta h2{color:#fff;margin:0 auto 12px}.endcta p{color:#cfe0f5;margin:0 auto 26px;max-width:560px}
.endcta .btn{background:#fff;color:var(--slate);box-shadow:4px 4px 0 var(--carbon)}
.more{display:inline-block;margin-top:18px;font:600 15px var(--body)}
@media(max-width:860px){.menu{display:inline-block}nav{display:none;position:absolute;left:0;right:0;top:58px;background:var(--paper);border-bottom:1px solid var(--rule);padding:12px 20px;flex-direction:column}
nav.open{display:flex}nav a,nav a:not(:last-child){display:block!important;margin:0!important;padding:12px 0;border-top:1px solid var(--rule)}nav a.navcta{margin-top:10px!important;text-align:center}.trust div{border-right:0;border-bottom:1px solid var(--rule)}}
/* v4 phone fixes */
@media(max-width:560px){
 .brand{font-size:14px;white-space:nowrap}.brand .mark{width:22px;height:22px;margin-right:6px}
 header .wrap{height:54px}nav{top:54px}
 .stamp{font-size:15px;right:10px;top:-14px;padding:2px 9px}
 .btn.ghost{margin-left:0;margin-top:10px}.hero{padding:40px 0 48px}
 .way{padding:18px 16px}.way .row{grid-template-columns:78px 1fr}
 .cta{padding:24px}.band p{font-size:26px}
}

.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.qi{border-top:3px solid var(--carbon);padding-top:12px}.qi b{font:800 19px var(--display);display:block;margin-bottom:6px}.qi p{margin:0;color:var(--mute);font-size:15.5px}

/* v6: concept redesign look */
header{background:var(--dk);border-bottom:1px solid var(--dkline);backdrop-filter:none;color:var(--onink)}
.brand{color:#fff}.brand i{color:var(--onmute)}
.brand .mark{color:#fff}
nav a{color:#c3cbda;font-family:var(--body);font-size:15px;text-transform:none;letter-spacing:0;font-weight:500}
nav a:hover,nav a:focus-visible{color:#fff}
nav a.navcta{background:#c4202d;color:#fff;border-radius:4px}
nav a.navcta:hover{background:#a81a26;color:#fff}
.menu{border-color:#3a4866;color:var(--onink)}
@media(max-width:860px){nav{background:var(--dk);border-bottom:1px solid var(--dkline)}nav a,nav a:not(:last-child){border-top:1px solid var(--dkline)}}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:#e05a64}
.hero{background:var(--dk);color:var(--onink);padding:72px 0 88px}
.hero .eyebrow,.hero .note{color:#8d99b0}
h1{font-size:clamp(38px,5.6vw,64px);font-weight:700;letter-spacing:-.025em;line-height:1.06}
h1 em{color:#ff6b76}
.hero h1{color:#fff}
.hero p.sub{color:var(--onmute)}
.btn{background:#c4202d;color:#fff;box-shadow:none;border-radius:4px}
.btn:hover{background:#a81a26;transform:none;box-shadow:none}
.btn.ghost{background:none;color:var(--onink);border:1px solid #3a4866}
.btn.ghost:hover{background:#16223b}
.way{background:#fff;color:#0c1424;border:0;border-radius:8px;transform:none;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.way::before,.way::after{display:none}
.way .mono{color:#5b6577}.way .row{border-top:1px solid #e3dfd6}.way .row b{color:#c4202d}
.trust{background:var(--dk2);border:0;border-top:1px solid var(--dkline);color:var(--onink)}
.trust div{border-right:1px solid var(--dkline)}
.trust b{color:#fff;font-weight:700}.trust p{color:#9fb0c8}.trust svg{color:#ff6b76}
section{border-top:0}
h2{font-weight:700}
.eyebrow{color:var(--carbon)}
.hero .eyebrow{color:#8d99b0}
.pc{border:1px solid var(--rule);border-radius:6px}
.pc:hover{transform:none;box-shadow:0 10px 24px rgba(12,20,36,.14);border-color:var(--carbon)}
.who span{border:1px solid var(--rule)}
.man{border:0;border-top:2px solid var(--ink);border-radius:0;background:transparent}
.man .li{border-top:1px solid var(--rule);padding:20px 4px}
.man .li:hover{background:color-mix(in srgb,var(--carbon) 6%,transparent)}
.man .li .mono{color:var(--carbon)}
#how,#record{background:var(--dk);color:var(--onink)}
#how .lead,#record .lead{color:var(--onmute)}#how h2,#record h2{color:#fff}
#how .eyebrow,#record .eyebrow{color:#ff8d95}
.steps button{background:none;color:var(--onmute);border:1px solid #3a4866}
.steps button span{color:#8d99b0}
.steps button[aria-selected=true]{background:#c4202d;border-color:#c4202d;color:#fff;box-shadow:none}
.steps button[aria-selected=true] span{color:#ffd9dc}
.pane{background:transparent;border:0;border-left:3px solid #c4202d;border-radius:0;color:var(--onink)}
.pane p{color:var(--onmute)}.pane .mono{color:#8d99b0}
.rec{background:transparent;border:0;border-top:2px solid #fff;border-radius:0}
.rec div{border-right:0;border-bottom:1px solid var(--dkline);padding:16px 12px 16px 0}
.rec .mono{color:#8d99b0}.rec b{color:#fff;font-weight:500}
.qi{border-top:3px solid var(--carbon)}
.form input,.form textarea,.form select{border:1px solid var(--rule);border-radius:4px}
.endcta{background:#c4202d}
.endcta h2,.endcta p{color:#fff}
.endcta .btn{background:#fff;color:#0c1424;box-shadow:none}
.endcta .btn:hover{background:#f0ede6}
.cta{background:var(--dk)}.cta .btn{background:#fff;color:#0c1424;box-shadow:none}
footer{background:var(--dk)}
.svc img,.sheet{border:1px solid var(--rule)}

.hero .btn{margin:0 10px 10px 0}
@media(max-width:560px){.btn.ghost{margin-top:0}}

h1{font-size:clamp(34px,4.9vw,56px);letter-spacing:-.02em;line-height:1.1}h2{letter-spacing:-.015em}.mono{font-weight:600;font-size:12px;letter-spacing:.1em}.way .row b{font:500 15px var(--body)}.rec b{font:600 17px var(--body)}
.hero{overflow-x:clip}

/* v10 motion */
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .eyebrow{animation:up .7s .05s both}
.hero h1{animation:up .8s .15s both}
.hero p.sub{animation:up .8s .3s both}
.hero .btn{animation:up .7s .45s both}.hero .btn.ghost{animation-delay:.55s}
.hero .way{animation:up .9s .4s both}.hero .note{animation:up .7s 1s both}
.hero h1 em{background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;animation:ul 1s 1s forwards}
@keyframes ul{to{background-size:100% 3px}}
.trust div{animation:up .7s both}.trust div:nth-child(1){animation-delay:.7s}.trust div:nth-child(2){animation-delay:.8s}.trust div:nth-child(3){animation-delay:.9s}.trust div:nth-child(4){animation-delay:1s}
.js .st{opacity:0;transform:translateY(20px);transition:opacity .6s var(--d,0s),transform .6s var(--d,0s)}
.js .in .st{opacity:1;transform:none}
.pane>*{animation:up .45s both}.pane>:nth-child(2){animation-delay:.05s}.pane>:nth-child(3){animation-delay:.1s}.pane>:nth-child(4){animation-delay:.15s}
.steps button{transition:background .2s,border-color .2s,transform .2s}.steps button:hover{transform:translateX(4px)}
.btn{transition:background .2s,transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(196,32,45,.35)}
.endcta .btn:hover{box-shadow:0 8px 18px rgba(0,0,0,.25)}
.pc{transition:transform .25s,box-shadow .25s,border-color .25s}.pc:hover{transform:translateY(-4px)}
.pc img{transition:transform .5s}.pc:hover img{transform:scale(1.05)}.pc{overflow:hidden}
.qi{transition:transform .25s}.qi:hover{transform:translateY(-3px)}
.man .li{transition:background .2s,padding-left .25s}.man .li:hover{padding-left:14px}
.rec div{transition:padding-left .25s}.rec div:hover{padding-left:10px}
.who span{transition:background .2s,color .2s,border-color .2s}.who span:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
header{transition:box-shadow .3s}header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.35)}
#prog{position:fixed;left:0;top:0;height:3px;width:100%;background:#c4202d;transform-origin:0 50%;transform:scaleX(0);z-index:50;pointer-events:none}
.band{background-position:center var(--py,50%)}
.faq details{transition:background .2s}.faq details[open]{background:color-mix(in srgb,var(--carbon) 5%,transparent)}

/* accessibility */
html{scroll-padding-top:84px}
.skip{background:#c4202d}
.way .wt{font:800 22px var(--display);margin:2px 0 12px;line-height:1.1}
main p a,.more,footer a,.legal a{text-decoration:underline;text-underline-offset:3px}
.pane:focus-visible{outline:3px solid #e05a64;outline-offset:4px}
.form input[aria-invalid=true],.form textarea[aria-invalid=true]{border:2px solid #b3261e}
#msg{color:var(--ink)}
