@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--orange:#ef8b48;--ink:#101812;--paper:#f1f1e9;--muted:#a8b29f}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);font-family:'DM Sans',sans-serif;color:var(--paper)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}a,button,input,textarea{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:5px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Manrope',sans-serif}em{font-style:normal;color:var(--orange)}
header{position:absolute;top:0;left:0;width:100%;padding:28px 4.5%;z-index:10;display:flex;align-items:center;justify-content:space-between}.brand{font-family:'Manrope',sans-serif;font-size:29px;letter-spacing:-1.4px;font-weight:800;display:inline-flex;align-items:center;gap:10px}.brand img{object-fit:contain;flex:none}.wordmark-period{color:var(--orange)}nav{font-size:14px}nav a{display:flex;align-items:center;gap:25px;padding:12px 0;border-bottom:1px solid #ffffff35}nav a:hover{border-color:var(--orange)}
.story{height:340svh;position:relative}.viewport{height:100svh;position:sticky;top:0;overflow:hidden;background:#0c130f}.room{position:absolute;width:100vw;height:66.6667vw;left:50%;top:50%;margin-left:-50vw;margin-top:-33.3333vw;transform-origin:50.2279% 42.4316%;will-change:transform;transform:scale(8)}.room>img{width:100%;height:100%;display:block}.display{position:absolute;left:39.2578%;top:33.2031%;width:21.9401%;height:18.457%;overflow:hidden;background:#0b1410;border-radius:1px}canvas{width:100%;height:100%;display:block}
.opening{position:absolute;left:7%;top:21%;z-index:3;will-change:opacity,transform;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:600;line-height:1.6}h1{font-size:clamp(42px,5.1vw,79px);line-height:1.04;letter-spacing:-.055em;font-weight:500;margin:23px 0}.intro{font-size:16px;line-height:1.65;color:#c4c8bd;margin:24px 0 0}.mid-copy,.ending{position:absolute;z-index:3;opacity:0;pointer-events:none;left:7%;bottom:19%}.mid-copy h2,.ending h2{font-size:clamp(35px,4.4vw,70px);font-weight:500;line-height:1.1;letter-spacing:-.05em;margin:20px 0}.mid-copy{top:18%;bottom:auto}.ending em{color:#efcfaa}.vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,#0b100e35,transparent 25%,transparent 60%,#07100dee)}.story-controls{position:absolute;bottom:32px;left:4.5%;right:4.5%;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px}.story-position{display:flex;align-items:center;gap:22px;font-size:12px;color:#c4c8bd}.track{display:block;width:90px;height:1px;background:#ffffff30;position:relative}.track i{height:1px;background:var(--orange);position:absolute;left:0;top:0;width:0}.scroll-hint{font-size:12px;color:#c4c8bd}.scroll-hint span{margin-left:16px}
.possibilities,.clients{position:relative;background:var(--paper);color:var(--ink);padding:68px 7% 70px}.section-top{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #19301c40;padding-top:18px}.section-top>span{font-size:14px;color:#657064}.section-top .eyebrow{margin:0}.section-heading{display:flex;gap:10%;justify-content:space-between;align-items:end;margin:65px 0}.section-heading h2{font-size:clamp(34px,4vw,62px);line-height:1.1;letter-spacing:-.055em;font-weight:500;margin:0}.section-heading h2 span{color:#768071}.section-heading>p{max-width:340px;font-size:16px;line-height:1.65;color:#5d695b;margin:0}.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px}.services article{border-top:1px solid #19301c40;padding:23px 0 10px}.number{font-size:13px;color:#697763}.services h3{font-size:23px;font-weight:500;letter-spacing:-.8px;margin:32px 0 14px}.services p{font-size:16px;line-height:1.6;color:#65705f;max-width:340px}.tag{display:inline-block;font-size:12px;border:1px solid #19301c35;border-radius:20px;padding:7px 12px;margin-top:15px}
.system-section{background:#0d1510;position:relative;padding:85px 0 0;overflow:hidden}.system-heading{padding:0 7%;position:relative;z-index:1}.system-heading h2{font-size:clamp(38px,5.2vw,80px);font-weight:500;letter-spacing:-.06em;line-height:1.08;margin:28px 0}.system-heading>p:last-child{font-size:17px;line-height:1.65;color:var(--muted)}.system-art{position:relative;margin-top:-50px;height:620px;height:clamp(340px,48vw,720px)}.system-art>img{width:100%;height:100%;object-fit:cover;object-position:center 54%;display:block;mask-image:linear-gradient(transparent,black 17%,black 85%,transparent)}.art-caption{position:absolute;bottom:12%;left:10%;right:10%;display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px;color:#d2d7c8}.workflow-strip{margin:0 7%;padding:35px 0 55px;border-top:1px solid #acb99b40}.workflow-caption{font-size:12px;letter-spacing:1.8px;color:var(--orange)}.workflow-strip ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:28px 0 0;gap:25px}.workflow-strip li{font-size:16px;line-height:1.5;position:relative;padding-top:20px;border-top:1px solid #acb99b40}.workflow-strip li>span{display:block;font-size:12px;color:#91a186;margin-bottom:12px}.workflow-strip li:before{content:'';width:7px;height:7px;background:var(--orange);border-radius:50%;position:absolute;left:0;top:-4px}.workflow-strip.arrived li:before{animation:signal 2.8s ease-in-out 2}.workflow-strip li:nth-child(2):before{animation-delay:.4s}.workflow-strip li:nth-child(3):before{animation-delay:.8s}.workflow-strip li:nth-child(4):before{animation-delay:1.2s}@keyframes signal{50%{box-shadow:0 0 0 7px #ef8b4820,0 0 15px #ef8b4870}}
.handover{background:var(--orange);color:var(--ink);padding:85px 7% 40px;display:grid;grid-template-columns:1fr 1fr;column-gap:9%;position:relative}.handover-intro h2{font-size:clamp(55px,7.4vw,112px);font-weight:500;line-height:1.03;letter-spacing:-.065em;margin:32px 0}.handover-intro h2 span{border-bottom:3px solid currentColor}.handover-intro>p:last-child{font-size:17px;line-height:1.65}.handover-stages{padding-top:12px}.handover-stages article{display:flex;align-items:start;gap:25px;border-top:1px solid #10201460;padding:27px 0}.stage-number{font-size:14px;padding-top:5px;opacity:.65}.handover-stages h3{font-size:24px;letter-spacing:-.8px;font-weight:600;margin:0 0 12px}.handover-stages p{font-size:16px;line-height:1.6;margin:0;color:#283c2c}.ownership-bar{grid-column:1/-1;display:flex;justify-content:space-between;gap:18px;border-top:1px solid #10201460;padding-top:24px;margin-top:38px;font-size:14px}.ownership-bar>span:first-child{font-size:12px;letter-spacing:1.5px;font-weight:700}.handover-stages article.arrived{animation:arrive .7s ease both}@keyframes arrive{from{transform:translateY(16px)}to{transform:translateY(0)}}
.clients{padding-top:80px;padding-bottom:85px}.featured-clients{display:grid;grid-template-columns:1fr 1fr;gap:22px}.client-feature{min-height:305px;padding:28px 30px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.eas{background:#20382c;color:#eff0e7}.balfour{background:#d5ddcd;color:#22392a}.client-top,.client-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}.client-top{font-size:12px;letter-spacing:1px}.case-status{font-size:12px;letter-spacing:0;opacity:.75}.client-feature h3{font-size:clamp(35px,4vw,62px);letter-spacing:-2px;font-weight:600;margin:35px 0}.eas h3>span{display:block;font-size:24px;letter-spacing:3px;font-weight:400}.balfour h3>span{font-weight:400;opacity:.6}.client-bottom{font-size:14px;border-top:1px solid #a1b09b65;padding-top:18px}.client-index{font-size:12px;opacity:.65}.client-grid{list-style:none;margin:25px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-left:1px solid #19301c30;border-top:1px solid #19301c30}.client-grid li{border-bottom:1px solid #19301c30;border-right:1px solid #19301c30;min-height:110px;padding:18px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Manrope',sans-serif;font-weight:600;font-size:17px;letter-spacing:-.5px}
.contact-section{padding:88px 7% 0;display:grid;grid-template-columns:1fr 1fr;gap:60px 10%;background:#101c15}.contact-copy h2{font-size:clamp(45px,5.5vw,83px);font-weight:500;letter-spacing:-.055em;line-height:1.05;margin:30px 0}.contact-copy>p:last-child{font-size:17px;color:var(--muted);line-height:1.65}.contact-form{padding-top:38px;min-width:0}.form-field{border-top:1px solid #aebca24d;padding:23px 0 26px}.form-field label{display:block;font-size:14px;margin-bottom:20px;color:#dce3d5}.form-field input,.form-field textarea{display:block;width:100%;background:none;border:0;color:var(--paper);font-size:18px;line-height:1.6;padding:6px 0;border-radius:0}.form-field textarea{resize:vertical;min-height:132px}.form-field input::placeholder,.form-field textarea::placeholder{color:#91a189;opacity:1}.send-button{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:var(--orange);color:var(--ink);padding:21px 24px;font-size:16px;border-radius:3px}.send-button:hover{background:#ffa464}.send-button>span{font-size:23px}footer{grid-column:1/-1;padding:25px 0 30px;border-top:1px solid #aebca24d;display:flex;justify-content:space-between;align-items:center;gap:20px}footer .brand{font-size:23px}footer>span,footer>a:last-child{font-size:13px;color:#acbaa3}
@media(min-width:701px) and (max-height:720px){.opening{top:20%}h1{font-size:clamp(40px,4.5vw,62px)}.intro{margin-top:18px}.opening .eyebrow{margin-bottom:8px}}
@media(max-width:900px){.section-heading{gap:5%}.services{gap:22px}.services h3{font-size:21px}.client-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.client-top{align-items:start;flex-direction:column}.handover{column-gap:5%}.contact-section{gap:45px 7%}}
@media(max-width:700px){
header{padding:20px 6%}.brand{font-size:23px;gap:7px}.brand img{width:34px;height:34px}nav{font-size:12px}nav a{gap:10px}.opening{top:9%;left:7%;right:7%}h1{font-size:clamp(27px,7.2vw,30px);letter-spacing:-.048em;margin:10px 0 0}
/* HEADLINE AND SUBHEAD SIDE BY SIDE.
   A real iPhone gives about 635px of height once Safari's chrome is showing,
   not the 844 a desktop emulator hands you. Stacked, the subhead landed on top
   of the first row of workflow cards. Set as two columns the block is roughly
   half the height, which gives the diagram underneath its room back. */
/* 1.6fr gives the headline enough room to keep "Your team builds" on one
   line at this size; any wider and the subhead column stops being readable. */
.opening{display:grid;grid-template-columns:1.6fr 1fr;column-gap:15px;align-items:start}
.opening .eyebrow{grid-column:1/-1}
.opening h1{grid-column:1;align-self:start}
.opening .intro{grid-column:2;align-self:end;font-size:12.5px;line-height:1.5;
  max-width:none;margin:0;color:#b9c0b1}.eyebrow{font-size:12px;letter-spacing:1px}.intro{font-size:16px;max-width:330px;margin-top:20px}.desktop-break{display:none}.room{width:150svh;height:100svh;margin-left:-75svh;margin-top:-50svh}.story-controls{bottom:24px;left:6%;right:6%;gap:10px}.story-position{gap:10px}.track{width:28px}.scroll-hint,.story-position{font-size:12px}.scroll-hint span{margin-left:4px}.mid-copy,.ending{bottom:22%;left:7%}.mid-copy{top:19%;bottom:auto}.mid-copy h2,.ending h2{font-size:35px}.section-top>span{display:none}.possibilities,.clients{padding:45px 7%}.section-heading{display:block;margin:38px 0}.section-heading>p{margin-top:25px}.services{grid-template-columns:1fr;gap:0}.services article{padding-bottom:28px}.services h3{margin-top:22px;font-size:23px}.tag{margin-top:3px}.system-section{padding-top:50px}.system-heading h2{font-size:40px}.system-heading>p:last-child{font-size:16px}.system-heading br{display:none}.system-art{height:360px;margin-top:0}.system-art>img{object-position:center}.art-caption{left:7%;right:7%;font-size:10px;letter-spacing:0;gap:12px;bottom:9%}.workflow-strip{padding:24px 0 35px}.workflow-strip ol{grid-template-columns:1fr 1fr;gap:30px 20px}.workflow-strip li{font-size:15px}.handover{padding:50px 7% 30px;grid-template-columns:1fr;gap:28px}.handover-intro h2{font-size:70px;margin:22px 0}.handover-stages article{gap:20px}.ownership-bar{flex-wrap:wrap;justify-content:start;gap:17px 25px;margin:0;font-size:13px}.ownership-bar>span:first-child{width:100%}.featured-clients{grid-template-columns:1fr}.client-feature{min-height:280px;padding:24px}.client-top{flex-direction:row}.client-feature h3{font-size:48px}.client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.client-grid li{font-size:15px;min-height:88px;padding:12px}.contact-section{padding:50px 7% 0;grid-template-columns:1fr;gap:20px}.contact-copy h2{font-size:60px}.contact-form{padding:8px 0 20px}footer{flex-wrap:wrap;margin-top:10px}footer>span{display:none}footer .brand{font-size:20px}}
@media(max-width:370px){nav a{font-size:12px;gap:5px}.brand{font-size:21px}.story-position .track{display:none}.client-top{flex-direction:column}.contact-copy h2{font-size:51px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before{animation:none!important}}
/* A single viewport-sized surface avoids transformed image/canvas tile flicker. */
#scene{position:absolute;inset:0;width:100%;height:100%;background:#0b1510}.viewport{isolation:isolate}
/* Keep the sculpture and the concrete example together on a desktop screen. */
.system-section{padding:38px 0 24px}.system-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:0 8%;align-items:end}.system-heading .eyebrow{grid-column:1/-1;margin-bottom:14px}.system-heading h2{font-size:clamp(32px,3.7vw,58px);margin:0;line-height:1.08}.system-heading>p:last-child{font-size:16px;margin:0;line-height:1.55}.system-art{height:clamp(185px,34svh,340px);margin:8px 7% 0}.system-art>img{object-fit:contain;mask-image:linear-gradient(transparent,black 10%,black 86%,transparent)}.art-caption{left:12%;right:12%;bottom:4%;font-size:12px}.workflow-strip{padding:20px 0 0}.workflow-strip ol{margin-top:18px}.workflow-strip li{padding-top:12px}.workflow-strip li>span{margin-bottom:5px}
.tech-section{background:#e8ede3;color:#14281c;padding:60px 7% 32px;overflow:hidden}.tech-heading{display:flex;justify-content:space-between;align-items:end;gap:9%}.tech-heading h2{font-size:clamp(40px,4.8vw,74px);font-weight:500;line-height:1.08;letter-spacing:-.055em;margin:22px 0 0}.tech-heading h2 span{color:#6d8067}.tech-heading>p{max-width:360px;font-size:16px;line-height:1.65;margin:0 0 4px}.tech-arena{position:relative;height:clamp(380px,50svh,570px);margin-top:25px}.tech-arena canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity .45s ease}.anchor-labels{position:absolute;left:0;right:0;top:calc(50% + 68px);display:grid;grid-template-columns:repeat(3,1fr);pointer-events:none;text-align:center;font-size:14px;font-weight:600}.tech-caption{border-top:1px solid #19301c30;padding-top:18px;display:flex;justify-content:space-between;gap:18px;align-items:center;font-size:12px;letter-spacing:1.3px}.tech-caption button{border:1px solid #19301c40;border-radius:20px;background:none;padding:8px 14px;color:#23402c;font-size:12px;letter-spacing:0}.tech-platform-list{font-size:12px;line-height:1.8;color:#53684d;margin:18px 0 0}
@media(max-width:700px){.system-section{padding:32px 0 24px}.system-heading{display:block}.system-heading h2{font-size:34px;margin-bottom:14px}.system-heading>p:last-child{font-size:14px}.system-art{height:180px;margin-top:5px}.art-caption{left:0;right:0;font-size:10px;bottom:0}.workflow-strip{padding-top:15px}.workflow-strip ol{gap:18px 16px;margin-top:14px}.workflow-strip li{font-size:13px;line-height:1.4}.tech-section{padding:40px 7% 28px}.tech-heading{display:block}.tech-heading h2{font-size:42px}.tech-heading>p{margin-top:20px}.tech-arena{height:490px;margin-left:-4%;margin-right:-4%}.anchor-labels{top:calc(50% + 47px);font-size:11px}.tech-caption{font-size:10px;letter-spacing:.6px}.tech-platform-list{font-size:12px}}

.balfour h3>span{display:block;font-size:24px;letter-spacing:1px}
/* Full-section photography, with clear text at the top and workflow at the foot. */
.system-section{min-height:clamp(680px,92svh,940px);padding:48px 7% 38px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,rgba(7,17,11,.7),rgba(7,17,11,0) 35%,rgba(7,17,11,.06) 62%,rgba(7,17,11,.95)),url('connected-system.jpg') center center/cover no-repeat}
.system-heading{display:block;padding:0}.system-heading h2{font-size:clamp(38px,4.3vw,66px);margin-top:18px}.system-section .workflow-strip{margin:0;padding:22px 0 0;border-color:#b6c6a65c}.system-section .workflow-strip li{color:#eff3e8}.tech-section{min-height:clamp(680px,92svh,940px);display:flex;flex-direction:column}.tech-arena{flex:1;min-height:400px}
@media(max-width:700px){.system-section{min-height:760px;min-height:max(700px,92svh);padding:34px 7% 28px;background-position:55% center}.system-heading h2{font-size:38px}.system-section .workflow-strip li{font-size:14px}.tech-section{min-height:760px;min-height:max(700px,92svh)}.tech-arena{min-height:450px}}
.system-heading{align-self:flex-end;width:max-content;max-width:62%;text-align:left}.system-heading h2{font-size:clamp(38px,4.1vw,63px)}
.anchor-labels{top:calc(50% + var(--anchor-offset,78px));font-size:14px;line-height:1.35}.anchor-labels span{padding:0 5px}
@media(max-width:700px){.system-heading{max-width:100%;width:100%;text-align:right}.system-heading h2{font-size:clamp(30px,7.8vw,38px);text-shadow:0 2px 18px #07110b}.system-heading .eyebrow{text-shadow:0 2px 12px #07110b}.anchor-labels{font-size:12px}.system-section{background-image:linear-gradient(180deg,rgba(7,17,11,.85),rgba(7,17,11,.08) 38%,rgba(7,17,11,.06) 62%,rgba(7,17,11,.95)),url('connected-system.jpg')}}
@media(max-height:500px){.opening{top:18%}h1{font-size:clamp(26px,7svh,38px);margin:10px 0}.opening .eyebrow{margin-bottom:8px}.intro{margin-top:10px;font-size:14px}.story-controls{bottom:15px}.ending h2{font-size:32px}}
/* Keep the heading entirely to the right of the sculpture's metal gate. */
@media(min-width:701px){.system-heading{width:40%;max-width:none;margin-left:auto}.system-heading h2{font-size:clamp(26px,3.05vw,48px);line-height:1.14}}

/* ---- action row: send | OR | book -----------------------------------------
   The old button was one full-width bar with a long label. Split into thirds:
   the form's own submit, a shaded divider carrying the word OR, and a link out
   to Calendly. The arrow is an inline SVG, not the "↗" character -- iOS
   substitutes its emoji font for that codepoint, so on a phone it arrived as a
   blue emoji arrow instead of matching the desktop glyph. */
.action-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  gap:0;border-radius:3px;overflow:hidden}
.send-button,.book-button{display:flex;align-items:center;justify-content:space-between;
  gap:9px;width:100%;border:0;padding:21px 18px;font-size:16px;font-family:inherit;
  font-weight:500;text-decoration:none;border-radius:0;cursor:pointer;
  line-height:1.2;text-align:left;white-space:nowrap}
.send-button{background:var(--orange);color:var(--ink)}
.send-button:hover{background:#ffa464}
.book-button{background:#1b2c22;color:var(--paper);box-shadow:inset 0 0 0 1px #ffffff1f}
.book-button:hover{background:#24382b}
.action-or{display:flex;align-items:center;justify-content:center;padding:0 18px;
  background:#16241c;color:#9fb094;font-size:12px;letter-spacing:1.6px;font-weight:600}
.arr{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){
  /* the labels have to hold one line inside a third of a phone screen */
  .send-button,.book-button{padding:17px 11px;font-size:13px;gap:6px}
  .action-or{padding:0 10px;font-size:10px;letter-spacing:1.2px}
  .arr{width:12px;height:12px}
}
@media(max-width:370px){
  /* below this the three cells cannot hold their labels on one line */
  .action-row{grid-template-columns:1fr;gap:1px}
  .action-or{padding:9px 0}
}

/* ---- "message sent" confirmation ------------------------------------------
   A <dialog>, not a hand-rolled overlay: the browser gives Escape-to-close,
   focus trapping and an inert background for free, and a hand-rolled one
   usually gets those wrong on a phone. */
.sent-dialog{border:0;padding:20px;background:none;max-width:100vw;max-height:100dvh;
  width:100%;height:100%;overflow:auto;color:var(--paper)}
.sent-dialog::backdrop{background:#06100be0;backdrop-filter:blur(3px)}
.sent-dialog[open]{display:grid;place-items:center}
.sent-card{position:relative;width:min(420px,calc(100vw - 40px));background:#16241c;
  border-radius:6px;box-shadow:0 24px 70px #0009,inset 0 0 0 1px #ffffff1a;
  padding:34px 26px 26px}
.sent-mark{margin:0;width:38px;height:38px;border-radius:50%;background:var(--orange);
  display:grid;place-items:center}
.sent-mark svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.sent-dialog h3{margin:16px 0 0;font-size:23px;font-weight:600;letter-spacing:-.02em}
.sent-body{margin:10px 0 0;font-size:15px;line-height:1.6;color:#b9c6b1}
.sent-ok{margin:22px 0 0;padding:13px 24px;border:0;border-radius:3px;
  background:var(--orange);color:var(--ink);font:inherit;font-size:15px;
  font-weight:500;cursor:pointer}
.sent-ok:hover{background:#ffa464}
.sent-close{position:absolute;top:6px;right:8px;width:44px;height:44px;border:0;
  background:none;color:#9fb094;font-size:27px;line-height:1;cursor:pointer;border-radius:50%}
.sent-close:hover{color:var(--paper)}
@media(max-width:700px){
  /* 44px targets, and the button goes full width so it is easy to hit */
  .sent-card{padding:30px 22px 22px}
  .sent-dialog h3{font-size:20px}
  .sent-body{font-size:14px}
  .sent-ok{width:100%;padding:15px 24px;margin-top:20px}
}
@media(prefers-reduced-motion:no-preference){
  .sent-dialog[open] .sent-card{animation:sentIn .22s ease-out}
  @keyframes sentIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}