/* Monarch Labs — content pages (Studio, Capabilities, Contact). Sits on the same glass frame, hairline columns, bar and edge labels as the hero
   (styles.css); only the content scrolls, inside the frame under the bar. Everything is laid on the hero's
   six columns: the edges are the same left and right lines as the word, button and scroll circle. */

.mark{color:var(--fg);text-decoration:none}
.mark:focus-visible{outline:1.5px solid var(--fg);outline-offset:6px;border-radius:6px}

/* the scroller: the frame's inside, below the bar; content fades out under the bar's edge */
.studio{position:fixed;z-index:1;inset:calc(var(--frame) + var(--bar)) var(--frame) var(--frame);overflow-y:auto;overscroll-behavior:contain;outline:0;
  border-radius:0 0 var(--radius) var(--radius);scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 48px);mask-image:linear-gradient(to bottom,transparent 0,#000 48px)}
.studio::-webkit-scrollbar{display:none}
.studio>section{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:0 calc(var(--edge) + 1px)}
.studio>section>*{grid-column:1/-1}

/* shared type */
.st-label{display:flex;align-items:baseline;gap:14px;margin:0 0 clamp(36px,5vw,72px);padding-top:22px;border-top:1px solid var(--rule);font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.st-label small{font-size:11px;letter-spacing:.1em;color:var(--fg)}
.st-big{margin:0;font:600 clamp(34px,3.6vw,60px)/1.06 var(--display);letter-spacing:-.04em;text-wrap:balance}  /* every section heading on both pages; only the intro title is larger */
.st-text{margin:0;font:400 18px/1.55 var(--sans);color:#3d3d3d;text-wrap:pretty}
.studio h3{margin:0;font:600 clamp(22px,1.9vw,30px)/1.1 var(--display);letter-spacing:-.025em}
.studio li p{margin:12px 0 0;font:400 16px/1.55 var(--sans);color:#3d3d3d;max-width:24em}
.studio li>small{display:flex;justify-content:space-between;gap:12px;margin-bottom:22px;font:500 11px/1 var(--sans);letter-spacing:.1em;color:var(--fg)}
.studio li>small span{color:var(--muted);letter-spacing:.06em}
.studio ol{display:grid}
.st-sec{padding-top:clamp(96px,14vh,160px)!important}

/* intro: one screen of the scroller. The statement takes five columns; the lede sits in the right half,
   the home base on the left, bottoms aligned (as the hero's button and description) */
.st-intro{min-height:calc(100svh - 2 * var(--frame) - var(--bar));align-content:center;padding-top:24px!important;padding-bottom:clamp(40px,7vh,88px)!important}
.st-eye{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 clamp(24px,3.4vh,40px);font:500 11px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.st-eye span{color:rgba(17,17,17,.3)}
.st-eye .dot{margin-right:4px}
.st-title{grid-column:1/6!important;margin:0 0 0 -.04em;font:600 clamp(48px,min(7.4vw,12vh),132px)/.98 var(--display);letter-spacing:-.05em;text-wrap:balance}
.st-under{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;margin-top:clamp(48px,9vh,110px)}
.st-home{grid-column:1/4;display:grid;grid-template-columns:repeat(2,max-content);gap:18px clamp(28px,3vw,56px);padding-right:24px}  /* Manila | Singapore side by side, the shared clock under both */
.st-home .st-time{grid-column:1/-1}
.st-home p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.st-home b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-weight:500;letter-spacing:.06em;color:var(--lime);background:linear-gradient(180deg,#363636,#0b0b0b);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.st-home span{flex-basis:100%;padding-left:42px;letter-spacing:.1em;color:var(--fg)}
.st-home .st-time{padding-left:42px}
.st-home time{color:var(--fg);font-variant-numeric:tabular-nums}
.st-lede{grid-column:4/7;margin:0;font:400 18px/1.55 var(--sans);color:#3d3d3d;text-wrap:pretty}

/* icons: a hairline drawing for each principle and each move, on a small glass tile; the one green point is the
   idea's focus (the core, the region, the launch, the subject, the find, the overlap, the first gain). The lines
   draw themselves in as the block rises (pathLength 1). */
.ic{display:grid;place-items:center;width:64px;height:64px;margin-bottom:30px;border:1px solid rgba(255,255,255,.85);border-radius:18px;background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #fff,0 12px 26px -16px rgba(0,0,0,.35)}
.ic svg{width:34px;height:34px;overflow:visible;fill:none;stroke:var(--fg);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.ic [pathLength]{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.25,1) calc(var(--d,0s) + .2s)}
.ic .a{fill:var(--lime);stroke:rgba(0,0,0,.35);stroke-width:.75;transition:scale .6s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + 1.1s);transform-box:fill-box;transform-origin:center}
.js .rv:not(.in) .ic [pathLength]{stroke-dashoffset:1}
.js .rv:not(.in) .ic .a{scale:0}
.st-steps .ic{width:56px;height:56px;border-radius:16px}
.st-steps .ic svg{width:30px;height:30px}

/* principles: three, two columns each */
.st-principles{grid-template-columns:repeat(3,minmax(0,1fr))}
.st-principles>li{padding-right:clamp(24px,3vw,56px)}
.st-principles>li+li{padding-left:clamp(20px,1.6vw,28px);border-left:1px solid var(--rule)}
.st-now{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;justify-self:start;margin:clamp(56px,8vh,96px) 0 0;padding:12px 20px 12px 16px;border:1px solid rgba(255,255,255,.85);border-radius:999px;background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #fff,0 10px 24px -16px rgba(0,0,0,.35);font:400 14px/1.3 var(--sans);color:#3d3d3d}
.st-now b{font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--fg)}

/* point of view: the statement over five columns, its answer quieter, then three figures two columns each */
.st-quote{grid-column:1/6!important;margin:0;font:600 clamp(34px,3.6vw,60px)/1.06 var(--display);letter-spacing:-.04em;text-wrap:balance}
.st-quote-2{grid-column:1/5!important;margin:clamp(20px,2.4vw,36px) 0 0;font:500 clamp(22px,2.2vw,36px)/1.25 var(--display);letter-spacing:-.025em;color:var(--muted);text-wrap:balance}
.st-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(72px,10vh,120px) 0 0}
.st-stats>div{padding:26px clamp(24px,3vw,56px) 0 0;border-top:1px solid var(--rule)}
.st-stats>div+div{padding-left:clamp(20px,1.6vw,28px);margin-left:0}
.st-stats dt{font:600 clamp(56px,6.4vw,112px)/1 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.st-stats dt small{font-size:.36em;letter-spacing:-.02em;color:var(--muted)}
.st-stats dd{margin:18px 0 0;font:400 15px/1.5 var(--sans);color:var(--muted)}
.st-stats dd b{display:block;font-weight:500;font-size:16px;color:var(--fg)}

/* working method: heading in the first two columns, the four moves one column each in the last four */
.st-method{align-items:start}
.st-method .st-label{grid-column:1/-1}
.st-method-head{grid-column:1/3!important;padding-right:clamp(24px,3vw,56px)}
.st-method-head .st-text{margin-top:22px}
.st-steps{grid-column:3/7!important;grid-template-columns:repeat(4,minmax(0,1fr))}
.st-steps li{padding:0 clamp(16px,1.6vw,28px);border-left:1px solid var(--rule)}
.st-steps li p{font-size:15px}

/* built to transfer */
.st-sec>.st-big{grid-column:1/6}
.st-tags{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(36px,5vh,56px) 0 0}
.st-tags span{display:inline-flex;align-items:center;height:40px;padding:0 18px;border:1px solid var(--rule);border-radius:999px;font:500 14px/1 var(--sans);color:var(--fg)}

/* start a conversation: the question at the section heading size, the email as the glass pill */
.st-cta-q{margin:0;font:600 clamp(34px,3.6vw,60px)/1.06 var(--display);letter-spacing:-.04em;text-wrap:balance}  /* section heading size, as .st-big */
.st-cta-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;margin-top:clamp(40px,6vh,72px)}
.st-cta-row .st-text{grid-column:1/4;padding-right:24px}
.st-cta-row .st-text span{display:block;margin-top:14px;font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.st-cta-row .see{grid-column:5/7;justify-self:end;height:52px;padding:0 7px 0 22px;font-size:16px;color:var(--fg);text-decoration:none}
.st-cta-row .see i{width:38px;height:38px}
.st-foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(96px,14vh,160px);padding:22px 0 clamp(28px,4vh,44px);border-top:1px solid var(--rule);font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* capabilities: the intro's three disciplines as a quiet list; each discipline card adds its tags and outcome;
   the six services sit two per row in the last four columns (two hairline columns each), beside the heading;
   the proof figures name their case under the label */
.cp-list{grid-column:1/3;display:flex;flex-direction:column;gap:12px;margin:0;font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--fg)}
.cp-list span{display:flex;align-items:center;gap:12px}
.cp-list span::before{content:"";width:18px;height:1px;background:var(--rule)}
.cp-disc>li{display:flex;flex-direction:column}
.cp-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.cp-tags li{display:inline-flex;align-items:center;height:32px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;font:500 13px/1 var(--sans);color:var(--fg)}
.studio .cp-out{margin:auto 0 0;padding-top:30px;font:500 15px/1.45 var(--sans);color:var(--fg)}
.cp-out b{display:block;margin-bottom:8px;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cp-svc{grid-column:3/7!important;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(48px,7vh,72px)}
.cp-svc li{padding:0 clamp(24px,3vw,56px) 0 clamp(16px,1.6vw,28px);border-left:1px solid var(--rule)}
.cp-proof dd span{display:block;margin-top:14px;font:500 11px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* contact: the email pill under the title; the brief (below) beside its card; the
   two studios and channels as three cards */
.ct-mail{grid-column:1/3;margin:0}
.ct-mail .see{height:52px;padding:0 7px 0 22px;font-size:16px;text-decoration:none}
.ct-mail .see i{width:38px;height:38px}
.ct-write{align-items:center}   /* the reply line sits on the email pill's centre line */

/* the brief, one question at a time (after the Greed reservation console): the question
   large in the first four columns with an underlined field or option cards, Back / Next with an Enter hint;
   the brief card fills in beside it as you answer, in the last two columns */
.bf{align-items:start}
.st-intro.bf{align-content:center}   /* on the contact page the brief is the opening screen */
.st-intro.bf .bf-q legend{margin-left:-.04em;font:600 clamp(48px,min(7.4vw,12vh),132px)/.98 var(--display);letter-spacing:-.05em}   /* the questions at the intro title size of the other pages (.st-title) */
.st-intro.bf .bf-q legend small{margin-left:.04em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bf-form{grid-column:1/5!important;padding-right:clamp(24px,3vw,56px);min-width:0}
.bf-q{display:none;min-width:0;margin:0;padding:0;border:0}
.bf-q.on{display:block;animation:bf-in .55s cubic-bezier(.2,.7,.2,1)}
@keyframes bf-in{from{opacity:0;translate:0 18px;filter:blur(6px)}}
.bf-q legend{padding:0;margin-bottom:clamp(24px,3.4vh,36px);font:600 clamp(34px,3.6vw,60px)/1.06 var(--display);letter-spacing:-.04em;text-wrap:balance}
.bf-q legend small{display:flex;gap:10px;margin-bottom:16px;font:500 11px/1 var(--sans);letter-spacing:.2em;color:var(--muted)}
.bf-q legend em{font-style:normal;letter-spacing:.14em;text-transform:uppercase}
.bf-in{display:block;width:100%;padding:10px 0 16px;border:0;border-bottom:1px solid rgba(17,17,17,.22);border-radius:0;background:none;font:400 clamp(20px,2vw,28px)/1.35 var(--sans);color:var(--fg);caret-color:var(--fg);outline:0;resize:none;
  transition:border-color .3s ease,box-shadow .3s ease}
textarea.bf-in{min-height:2.7em;field-sizing:content;max-height:8em}
.bf-in::placeholder{color:#8a8a8a}
.bf-in:focus{border-bottom-color:var(--fg);box-shadow:0 12px 18px -18px rgba(0,0,0,.6)}
.bf-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.bf-opt{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:16px 18px;border:1px solid rgba(255,255,255,.85);border-radius:16px;background:rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #fff;text-align:left;color:var(--fg);cursor:pointer;font:inherit;
  transition:border-color .2s ease,background-color .2s ease,transform .16s ease,box-shadow .2s ease}
.bf-ic{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--rule)}
.bf-ic svg{width:24px;height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bf-ic .a{fill:var(--lime);stroke:rgba(0,0,0,.35);stroke-width:.75}
.bf-opt b{font:600 17px/1.2 var(--display);letter-spacing:-.01em}
.bf-opt>span:last-child{font:400 13px/1.35 var(--sans);color:var(--muted)}
.bf-opt:hover{border-color:rgba(17,17,17,.3)}
.bf-opt:active{transform:scale(.98)}
.bf-opt[aria-pressed="true"]{border-color:#111;background:#111;color:#fff;box-shadow:0 14px 26px -16px rgba(0,0,0,.55)}
.bf-opt[aria-pressed="true"]>span:last-child{color:rgba(255,255,255,.7)}
.bf-opt[aria-pressed="true"] .bf-ic{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.bf-opt:focus-visible{outline:1.5px solid var(--fg);outline-offset:2px}
/* attachment: a glass drop zone; the whole zone opens the file picker; dragging over lights it, a chosen file
   turns it to ink with the name and a Remove */
.bf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bf-drop{position:relative;display:flex;align-items:center;gap:18px;min-height:112px;padding:22px 24px;border:1.5px dashed rgba(17,17,17,.22);border-radius:18px;background:rgba(255,255,255,.34);
  cursor:pointer;transition:border-color .25s ease,background-color .25s ease,color .25s ease}
.bf-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.bf-drop:hover,.bf-drop.over{border-color:var(--fg);background:rgba(255,255,255,.6)}
.bf-drop:focus-within{border-color:var(--fg);box-shadow:0 0 0 3px rgba(17,17,17,.08)}
.bf-drop-ic{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px var(--rule)}
.bf-drop-ic svg{width:30px;height:30px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bf-drop-ic .a{fill:var(--lime);stroke:rgba(0,0,0,.35);stroke-width:.75}
.bf-drop-t{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.bf-drop-t b{font:500 18px/1.3 var(--sans);overflow-wrap:anywhere}
.bf-drop-t span{font:400 13px/1.4 var(--sans);color:var(--muted)}
.bf-drop.has{border-style:solid;border-color:#111;background:#111;color:#fff}
.bf-drop.has .bf-drop-t span{color:rgba(255,255,255,.65)}
.bf-drop.has .bf-drop-ic{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.bf-drop-x{position:relative;z-index:1;flex:none;height:40px;padding:0 16px;color:#fff;border-color:rgba(255,255,255,.3)}
.bf-drop-x:hover{border-color:#fff}
.bf-form.busy .bf-nav .btn{opacity:.7;cursor:progress}
.bf-nav button:disabled{cursor:progress}
.bf-err{min-height:1.5em;margin:16px 0 0;font:400 14px/1.5 var(--sans);color:#b3261e}
.bf-nav{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:20px}
.bf-nav .btn,.bf-row .btn{height:52px;padding:0 24px 0 26px;font-size:15px;border:0;cursor:pointer;text-decoration:none}
.bf-ghost{height:52px;padding:0 22px;border:1px solid var(--rule);border-radius:999px;background:none;font:500 15px/1 var(--sans);color:var(--fg);cursor:pointer;transition:border-color .25s ease}
.bf-ghost:hover{border-color:rgba(17,17,17,.4)}
.bf-nav .btn:focus-visible,.bf-row .btn:focus-visible,.bf-ghost:focus-visible{outline:1.5px solid var(--fg);outline-offset:3px}
.bf-hint{font:400 13px/1 var(--sans);color:var(--muted)}
.bf-form[data-at="0"] [data-bf-back]{display:none}
.bf-form[data-at="6"] .bf-nav,.bf-form[data-at="6"] .bf-err{display:none}
.bf-done .st-text{max-width:30em}
.bf-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* the brief card: glass, rows fill as you answer, a sheen when it is ready */
.bf-card{grid-column:5/7!important;position:relative;overflow:hidden;padding:24px 24px 20px;border:1px solid rgba(255,255,255,.85);border-radius:calc(var(--radius) - 8px);background:rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);box-shadow:inset 0 1px 0 #fff,0 30px 70px -40px rgba(0,0,0,.35)}
.bf-card::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;pointer-events:none}
.bf-card.sealed::after{animation:bf-sheen 1.2s cubic-bezier(.65,0,.35,1)}
@keyframes bf-sheen{to{background-position:-50% 0}}
.bf-card-top{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.bf-card-top b{flex:1;font:600 17px/1 var(--display)}
.bf-state{height:28px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--rule);border-radius:999px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:background-color .4s ease,color .4s ease,border-color .4s ease}
.bf-card.sealed .bf-state{background:#111;border-color:#111;color:var(--lime)}
.ct-ava{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,#363636,#0b0b0b);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.ct-ava svg{width:18px;height:15px;fill:#fff}
.bf-card dl{margin:0}
.bf-card dl>div{padding:14px 0;border-bottom:1px solid var(--rule)}
.bf-card dt{margin-bottom:6px;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bf-card dd{margin:0;font:400 15px/1.45 var(--sans);color:var(--fg);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.bf-card dd.blank{color:#9a9a9a}
.bf-card dd.flash{animation:bf-flash .7s ease}
@keyframes bf-flash{from{background:rgba(197,255,95,.5)}}
.bf-card-foot{display:flex;justify-content:space-between;gap:12px;margin:16px 0 0;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.bf-q.on,.bf-card.sealed::after,.bf-card dd.flash{animation:none}}
.studio .ct-time{margin-top:18px;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ct-time time{margin-left:8px;font-size:13px;letter-spacing:.06em;color:var(--fg);font-variant-numeric:tabular-nums}
.ct-places a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--rule);transition:text-decoration-color .25s ease}
.ct-places a:hover{text-decoration-color:var(--fg)}
.ct-links{display:flex;gap:20px}

/* reveal: each block rises in as it enters the scroller (studio.js adds .in); without the script all stays visible */
.js .rv{opacity:0;translate:0 28px;transition:opacity .9s ease var(--d,0s),translate 1.1s var(--ease) var(--d,0s)}
.js .rv.in{opacity:1;translate:0 0}

@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;translate:none}}

@media (max-width:900px){
  .studio{inset:calc(var(--frame) + var(--bar)) var(--frame) var(--frame)}
  .st-title,.st-quote,.st-quote-2,.st-sec>.st-big,.st-method-head,.st-steps,.cp-svc,.bf-form,.bf-card{grid-column:1/-1!important}
  .bf-form{padding-right:0}
  .bf-card{margin-top:40px}
    .st-under,.st-cta-row{grid-template-columns:1fr;gap:28px}
  .st-home,.cp-list,.ct-mail,.st-lede,.st-cta-row .st-text,.st-cta-row .see{grid-column:1/-1}
  .st-cta-row .see{justify-self:start}
  .st-principles,.st-stats{grid-template-columns:1fr;gap:40px}
  .st-principles>li+li,.st-stats>div+div{padding-left:0;border-left:0}
  .st-principles>li+li{padding-top:28px;border-top:1px solid var(--rule)}
  .st-steps{grid-template-columns:1fr 1fr;row-gap:40px;margin-top:48px}
  .cp-svc{margin-top:48px}
  .st-steps li{padding-left:16px}
}
@media (max-width:480px){
  .bar .btn{height:44px;padding:0 16px 0 18px;font-size:14px}
  .st-steps,.cp-svc{grid-template-columns:1fr}
  .st-home{grid-template-columns:1fr}
}