/* The team orders page.
   Same vocabulary as the homepage -- cream field, ink type, orange only where
   something is live, hairline rules, Khand for display and Manrope for text --
   with the offset-shadow card the opening promotion already uses, so the form
   reads as a Lyverne object rather than a generic web form. */

/* ------------------------------------------------------------------ hero */
.team-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:5vw;align-items:center;padding:calc(95px + 4vw) 3.15vw 5vw;position:relative}
.team-hero-copy h1{font-size:clamp(52px,7vw,116px);line-height:.92;letter-spacing:-.03em;margin:14px 0 22px}
.team-lede{font-size:clamp(15px,1.25vw,19px);line-height:1.6;color:var(--muted);max-width:46ch;margin-bottom:30px}
.team-hero-facts{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:34px}
.team-hero-facts div{display:grid;gap:3px;position:relative;padding-left:16px}
.team-hero-facts div:before{content:'';position:absolute;left:0;top:6px;bottom:4px;width:2px;background:var(--orange)}
.team-hero-facts strong{font-family:Khand,'Arial Narrow',sans-serif;font-size:34px;line-height:1}
.team-hero-facts span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.team-hero-art{position:relative}
.team-hero-art .editorial-frame{margin:0;background:#ddd6c8;padding:8%;transform:rotate(-2.5deg);box-shadow:14px 14px 0 var(--orange)}
.team-hero-art img{width:100%;height:auto;display:block}
.team-seal{position:absolute;top:-16px;right:-6px;width:124px;height:124px;border-radius:50%;background:var(--orange);border:2px solid var(--ink);display:grid;place-items:center;text-align:center;font-family:Khand,'Arial Narrow',sans-serif;font-size:19px;line-height:1.05;transform:rotate(11deg);animation:seal-breathe 6s ease-in-out infinite}
@keyframes seal-breathe{0%,100%{transform:rotate(11deg) scale(1)}50%{transform:rotate(9deg) scale(1.04)}}

/* ------------------------------------------------------------ how it works */
.team-section-head{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:end;margin-bottom:46px}
.team-section-head h2{font-size:clamp(34px,4.2vw,68px);line-height:1;letter-spacing:-.025em;margin-top:12px}
.team-section-head p{color:var(--muted);line-height:1.6;max-width:44ch}
.team-how{padding:6vw 3.15vw}
.team-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.team-steps li{border:1px solid var(--line);padding:30px 26px 34px;display:grid;gap:10px;align-content:start;background:var(--cream);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.team-steps li:hover{transform:translateY(-5px);border-color:var(--ink);box-shadow:8px 8px 0 var(--orange)}
.team-step-index{font-family:Khand,'Arial Narrow',sans-serif;font-size:42px;line-height:1;color:var(--orange)}
.team-steps h3{font-size:22px;letter-spacing:-.01em}
.team-steps p{font-size:15px;line-height:1.6;color:var(--muted)}

/* ----------------------------------------------------------------- form */
.team-order{padding:2vw 3.15vw 6vw}
/* The offset shadow is the promotion popup's signature, reused so the form
   feels like part of the same family. */
.team-form-shell{display:grid;grid-template-columns:236px 1fr;gap:4vw;align-items:start;border:2px solid var(--ink);padding:44px;background:var(--cream);box-shadow:12px 12px 0 var(--orange);position:relative}

/* ------------------------------------------------------------- step rail */
.step-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:0;position:sticky;top:110px}
.step-rail li{position:relative}
/* One continuous line behind the markers, so the rail reads as a journey. */
.step-rail li:not(:last-child):after{content:'';position:absolute;left:15px;top:32px;bottom:-6px;width:2px;background:var(--line)}
.step-rail li.is-done:not(:last-child):after{background:var(--orange)}
.step-dot{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;padding:6px 0 14px;font-size:14px;color:var(--muted);position:relative;z-index:1}
.step-dot i{width:32px;height:32px;flex:none;border-radius:50%;border:2px solid var(--line);background:var(--cream);display:grid;place-items:center;font-family:Khand,'Arial Narrow',sans-serif;font-size:15px;font-style:normal;color:var(--muted);transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.step-dot[aria-current]{color:var(--ink);font-weight:600}
.step-dot[aria-current] i{border-color:var(--ink);background:var(--orange);color:var(--ink);transform:scale(1.12)}
.step-dot.is-done{color:var(--ink)}
.step-dot.is-done i{border-color:var(--orange);background:var(--orange);color:var(--ink)}
.step-dot.is-done i:before{content:'✓'}
.step-dot.is-done i span{display:none}
.step-dot:disabled{opacity:.5;cursor:default}
.step-dot:not(:disabled):hover i{border-color:var(--ink)}

/* -------------------------------------------------------------- progress */
.step-progress{margin-bottom:30px;max-width:760px}
.step-progress-bar{height:4px;background:var(--line);overflow:hidden}
.step-progress-bar i{display:block;height:100%;width:var(--progress,20%);background:var(--orange);transition:width .55s var(--ease)}
.step-progress p{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:11px}
.step-progress b{color:var(--ink);font-weight:600}

/* ----------------------------------------------------------- the steps */
.step-window{min-height:340px;max-width:760px}
.step-loading{color:var(--muted);font-size:15px;padding:40px 0}
.team-step{border:0;margin:0;padding:0;display:grid;gap:24px}
/* Each field rises in turn rather than the panel sliding as one block: the eye
   is led down the step instead of being handed a finished screen. --i is set
   per field in custom.js. */
.team-step>*{animation:field-rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes field-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.team-field{display:grid;gap:9px;font-size:14px;font-weight:600;min-width:0}
/* A grid item's min-width is auto, so it refuses to shrink below its content's
   intrinsic width. iOS gives input[type=date] a wide intrinsic size of its own,
   which pushed the field straight out through the card's right edge on a real
   iPhone while Chrome sized it to the column. min-width:0 lets it shrink. */
.team-pair,.team-pair>*{min-width:0}
.team-field>span{letter-spacing:.01em}
.team-field small{font-size:13px;font-weight:400;color:var(--muted);line-height:1.5}
.team-field input,.team-field select,.team-field textarea{background:var(--cream);border:1px solid #aaa69b;border-radius:0;padding:14px 16px;width:100%;min-width:0;max-width:100%;box-sizing:border-box;font-size:16px;color:var(--ink);font-weight:400;font-family:Manrope,Arial,sans-serif;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.team-field input:hover,.team-field select:hover,.team-field textarea:hover{border-color:var(--ink)}
.team-field input:focus,.team-field select:focus,.team-field textarea:focus{outline:0;border-color:var(--ink);box-shadow:4px 4px 0 var(--orange)}
.team-field textarea{resize:vertical;line-height:1.6}
/* iOS also centres the date value and applies its own control chrome; this
   makes it sit like every other field. */
.team-field input[type=date]{-webkit-appearance:none;appearance:none;text-align:left;min-height:51px}
.team-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.size-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.size-cell{display:grid;gap:6px;font-size:12px;letter-spacing:.06em;text-align:center;font-weight:600}
.size-cell input{text-align:center;padding:12px 6px}
[data-size-total]{transition:color .25s var(--ease)}
[data-size-total].is-off{color:#8c3a27;font-weight:600}

/* ------------------------------------------------------------ route cards */
.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.route-card{border:1px solid var(--line);padding:20px;display:grid;gap:8px;cursor:pointer;font-weight:400;position:relative;overflow:hidden;background:var(--cream);transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
/* An orange wash sweeps up on selection rather than a flat colour swap. */
.route-card:before{content:'';position:absolute;inset:0;background:var(--orange);opacity:.1;transform:translateY(101%);transition:transform .4s var(--ease)}
.route-card>*{position:relative;z-index:1}
.route-card strong{font-size:15px;line-height:1.35}
.route-card small{font-size:13px;color:var(--muted);line-height:1.5}
.route-card input{position:absolute;opacity:0;pointer-events:none}
.route-card:hover{border-color:var(--ink);transform:translateY(-3px)}
.route-card.is-on{border-color:var(--ink);box-shadow:5px 5px 0 var(--orange)}
.route-card.is-on:before{transform:translateY(0)}
.route-card:has(input:focus-visible){outline:3px solid var(--orange);outline-offset:3px}

/* A notepad, because people write more when it looks like somewhere to write. */
.notepad textarea{background:repeating-linear-gradient(var(--cream),var(--cream) 30px,#d5cfc3 30px,#d5cfc3 31px);line-height:31px;padding-top:6px;border-color:var(--ink)}

/* ---------------------------------------------------------------- review */
.team-review dl{display:grid;gap:0;margin:20px 0 24px}
.team-review dl>div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.team-review dl>div:first-child{border-top:1px solid var(--line)}
.team-review dt{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.team-review dd{margin:0;line-height:1.55;overflow-wrap:anywhere}

/* --------------------------------------------------------------- buttons
   style.css only sets font-variant-emoji on .btn -- the real button styling
   lives in workspace.css, which this page does not load, so these were
   rendering as unstyled native buttons. They are defined here instead. */
.team-form-shell .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:2px solid var(--ink);background:var(--ink);color:var(--cream);padding:16px 26px;font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;position:relative;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.team-form-shell .btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--orange)}
.team-form-shell .btn:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--orange)}
.team-form-shell .btn span{transition:transform .25s var(--ease)}
.team-form-shell .btn:hover span{transform:translate(3px,-3px)}
.team-form-shell .btn.orange{background:var(--orange);color:var(--ink)}
.team-form-shell .btn.ghost{background:transparent;color:var(--ink)}
.team-form-shell .btn:disabled{opacity:.55;cursor:wait;transform:none;box-shadow:none}
/* Every author display rule beats the UA's [hidden]{display:none}, so each one
   has to opt back in. Back and Send are hidden on the steps where they do not
   belong, and without this all three buttons showed at once on step one. */
.team-form-shell .btn[hidden]{display:none}
.step-actions{display:flex;gap:16px;align-items:center;margin-top:34px;flex-wrap:wrap;max-width:760px}
.step-actions .btn{min-width:170px}
#team-form .error{margin-top:20px;color:#8c3a27;font-size:14px;min-height:1.2em;font-weight:600}

/* ------------------------------------------------------------ the finish */
/* [hidden] is a UA rule of display:none, and any author display wins over it.
   Without this the success panel rendered permanently, under the empty form,
   announcing a reference nobody had been given yet. */
.team-done[hidden]{display:none}
.team-done{grid-column:1/-1;text-align:center;display:grid;gap:14px;justify-items:center;padding:40px 0}
.team-done>*{animation:field-rise .55s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms)}
.team-done-seal{width:86px;height:86px;border-radius:50%;background:var(--orange);border:2px solid var(--ink);display:grid;place-items:center;font-size:40px;line-height:1;animation:seal-land .6s var(--ease) both}
@keyframes seal-land{from{opacity:0;transform:scale(.4) rotate(-25deg)}to{opacity:1;transform:none}}
.team-done h2{font-size:clamp(38px,5vw,64px);line-height:1}
.team-done p{max-width:48ch;line-height:1.6}
.team-done .team-reference{font-family:Khand,'Arial Narrow',sans-serif;font-size:26px;letter-spacing:.06em;border:2px dashed var(--ink);padding:10px 22px;background:#f26b2412}
.team-done .actions{display:flex;gap:20px;align-items:center;margin-top:14px;flex-wrap:wrap;justify-content:center}
/* .text-btn also lives only in workspace.css, so it rendered as a default grey
   browser button here. */
.team-form-shell .text-btn{background:none;border:0;padding:8px 2px;font-size:14px;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;transition:color .25s var(--ease)}
.team-form-shell .text-btn:hover{color:var(--orange)}

/* --------------------------------------------------------------- closing */
.team-assure{position:relative;background:var(--ink);color:var(--cream);padding:calc(8vw + 60px) 3.15vw 7vw;margin-top:4vw}
.team-assure .scallop-edge{position:absolute;top:0;left:0;right:0;line-height:0}
.team-assure .scallop-edge svg{width:100%;height:clamp(40px,6vw,90px);display:block;fill:var(--cream);transform:rotate(180deg)}
.team-assure-inner{max-width:900px;margin:auto}
.team-assure h2{font-size:clamp(34px,4.6vw,72px);line-height:1;margin:12px 0 36px}
.team-faq{display:grid;gap:0;margin:0}
.team-faq>div{padding:24px 0;border-top:1px solid #ffffff26}
.team-faq dt{font-family:Khand,'Arial Narrow',sans-serif;font-size:23px;margin-bottom:6px}
.team-faq dd{margin:0;color:#cfc8b8;line-height:1.6;max-width:62ch}

/* ---------------------------------------------------------------- mobile */
@media(max-width:1000px){
 .team-hero{grid-template-columns:1fr;gap:8vw;padding-top:calc(90px + 7vw)}
 .team-section-head{grid-template-columns:1fr;gap:18px;align-items:start}
 .team-steps{grid-template-columns:1fr}
 .team-form-shell{grid-template-columns:1fr;gap:28px;padding:26px;box-shadow:8px 8px 0 var(--orange)}
 .step-rail ol{position:static;grid-auto-flow:column;grid-auto-columns:1fr;gap:0}
 .step-rail li:not(:last-child):after{left:auto;right:-50%;top:15px;bottom:auto;width:100%;height:2px}
 .step-dot{flex-direction:column;gap:7px;text-align:center;font-size:11px;padding:0 4px}
 .route-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
 .team-order,.team-how,.team-hero{padding-left:16px;padding-right:16px}
 .team-form-shell{padding:20px 16px;box-shadow:6px 6px 0 var(--orange)}
 .team-seal{width:88px;height:88px;font-size:14px;top:-10px;right:-2px}
 .team-hero-art .editorial-frame{box-shadow:8px 8px 0 var(--orange)}
 .size-grid{grid-template-columns:repeat(3,1fr)}
 .team-pair{grid-template-columns:1fr}
 .team-review dl>div{grid-template-columns:1fr;gap:5px}
 .step-dot i{width:28px;height:28px;font-size:13px}
 .step-rail li:not(:last-child):after{top:13px}
 /* The actions follow the thumb rather than sitting below a long step. A
    descendant's background paints over its ancestor's border, so a bar inset
    from the card's edges left the bottom border showing only at the margins
    and reading as broken. Pulled out to the card's full width with a hairline
    of its own, it covers that edge deliberately instead. */
 .step-actions{position:sticky;bottom:0;background:var(--cream);padding:14px 16px calc(14px + env(safe-area-inset-bottom));margin:24px -16px 0;flex-direction:column-reverse;align-items:stretch;border-top:1px solid var(--line);box-shadow:0 -10px 14px -8px #20201c1f;z-index:2}
 .step-actions .btn{width:100%}
 /* 16px keeps iOS from zooming the page when a field takes focus. */
 .team-field input,.team-field select,.team-field textarea{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 .team-step>*,.team-done>*,.team-done-seal{animation:none}
 .step-progress-bar i,.route-card:before,.team-steps li,.route-card,.team-form-shell .btn,.team-form-shell .btn span{transition:none}
 .team-seal{animation:none}
}