:root {
  --ink: #1e2235;
  --blue: #1e2235;
  --blue2: #f3eedf;
  --paper: #fff7e9;
  --muted: #686b79;
  --line: #e9dfd0;
  --orange: #f0673a;
}

html { scroll-padding-top: 18px; }
section[id], main[id] { scroll-margin-top: 18px; }

.masthead { border: 0; background: var(--paper); }
.masthead-row { min-height: 96px; }
.wordmark { gap: 15px; }
.wordmark .brand-logo { display:block; width:166px; height:auto; max-height:58px; object-fit:contain; }
.wordmark .mark { display:none; }
.wordmark small { color: var(--muted); font-size: 8px; letter-spacing: .16em; }
.masthead nav { gap: 12px; color: var(--ink); font-size: 10px; }
.masthead nav a { padding: 8px 10px; transition: background .18s, transform .18s; }
.masthead nav a:hover { background: #eee9ff; transform: translateY(-2px); }
.masthead nav a:last-child { border-radius: 3px 12px 4px 10px; background: var(--blue); color: #fff; padding: 10px 13px; }
.masthead nav a:last-child:hover { background: var(--ink); }
.nav-contact span { padding-left: 8px; color: #f8dc63; }
.website-identity { display:flex; align-items:center; gap:14px; }
.product-divider { width:1px; height:38px; background:#d4cadb; }
.product-name { display:grid; gap:4px; color:var(--ink); font:700 14px/1 'IBM Plex Mono',monospace; letter-spacing:.08em; }
.product-name small { color:var(--muted); font:500 7px/1.3 'IBM Plex Mono',monospace; letter-spacing:.04em; }
.masthead nav a.back-company { border:1px solid #d8cedc; border-radius:2px; color:var(--ink); }
.masthead nav a.back-company:hover { background:#eee9ff; }

/* Center the service introduction over a full-width photograph. */
.opening { padding: 0; background: #302746; color: var(--paper); }
.opening-grid.shell { position: relative; width: 100%; max-width: none; min-height: 680px; margin: 0; display: grid; grid-template-columns: 1fr; place-items: center; gap: 0; padding: 52px 24px; overflow: hidden; }
.opening-grid:before, .opening-grid:after { content:none; }
.opening-copy { position: relative; z-index: 3; width: min(100%, 660px); margin: auto; padding: 38px 45px 32px; border: 1px solid #fff; border-radius: 3px 14px 4px 10px; background: #fffaf1f2; color: var(--ink); box-shadow: 12px 14px 0 #20193366; text-align: center; transform: rotate(-1deg); }
.opening-copy .overline { color: #756b88; }
.opening-copy .overline-rule { background: var(--blue); }
.opening h1 { margin: 19px 0 17px; color: var(--ink); font: 700 clamp(48px, 6vw, 68px)/.98 'Fraunces', 'Karla', sans-serif; letter-spacing: -.075em; }
.opening h1 em { color: var(--blue); }
.opening-copy>p.intro { max-width: 490px; margin: 0 auto 19px; color: #645e70; font-size: 14px; line-height: 1.8; }
.opening-copy .button-blue { background: var(--blue); color: #fff; }
.opening-copy .button-blue:hover { background: var(--ink); }
.opening-copy .intro-note { display: table; margin: 20px auto 0; padding: 8px 11px 0; border-top: 1px solid #ddd4e6; border-left: 0; color: var(--muted); font-size: 8px; }
.opening-photo { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; background: #352d4a; }
.opening-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.opening-photo:after { inset: 0; background: linear-gradient(120deg, #30274666, #30274633 52%, #30274670); }
.opening-photo figcaption { left: 24px; right: 24px; bottom: 18px; color: #fff; font-size: 8px; }
.photo-tab { right: max(24px, calc((100% - 1160px) / 2)); top: 22px; background: #f8dc63; color: var(--ink); box-shadow: 3px 4px 0 #28233b44; transform: rotate(2deg); }

.manifesto { background: #fa806b; color: var(--ink); }
.manifesto .overline { color: #5f3c60; }
.manifesto h2 { font: 600 clamp(30px, 4.2vw, 47px)/1.14 'Fraunces', 'Karla', sans-serif; }
.manifesto h2 em { color: #fff6da; }
.manifesto-list>div { border-color: #28233b30; }
.manifesto-list>div>span, .manifesto-list svg { color: #6e4ee6; stroke: #6e4ee6; }
.manifesto-list b { color: var(--ink); }
.manifesto-list small { color: #514755; }

.work { background: #eee9ff; }
.section-heading h2, .offer h2, .start h2 { font-family: 'Fraunces', 'Karla', sans-serif; }
.work-card { border-radius: 3px 16px 4px 12px; box-shadow: 5px 6px 0 #28233b18; }
.work-card:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 9px 11px 0 #28233b22; }
.work-card:after { inset: 38% 0 0; background: linear-gradient(transparent, #201933dd); }
.work-card small b { color: #f8dc63; }

.offer { background: #b8e5c7; }
.offer-grid { gap: 64px; }
.offer h2 { font-size: clamp(44px, 5vw, 60px); }
.offer-copy>p:not(.overline) { color: #505c52; }
.offer-price { color: #6e4ee6; }
.offer-details { border-color: #8fac96; }
.included>div { border-color: #9cb7a3; color: #3d4c41; }
.included svg { stroke: #6e4ee6; }
.maintenance-price { font-family: 'Fraunces', sans-serif; }
.maintenance>p:last-child { color: #505c52; }
.text-link { border-color: #6e4ee6; color: #5037bd; }

.start { background: #302746; color: var(--paper); }
.start-copy>p:not(.overline) { color: #d2c9e0; }
.start .overline { color: #d2c9e0; }
.start h2 { font-size: clamp(44px, 5vw, 58px); }
.checkout-note { border-color: #ffffff3d; color: #e3ddec; }
.checkout-note svg { stroke: #f8dc63; }
.form-small { color: #bbb1ca !important; }
.project-form { border: 1px solid #fff; border-radius: 3px 13px 4px 10px; background: #fffaf1; box-shadow: 9px 10px 0 #20193366; }
.form-title { color: #6d647e; }
.project-form input:not([type=checkbox]), .project-form textarea { border-color: #d8d0e1; background: #fff; color: var(--ink); border-radius: 3px; }
.project-form input:focus, .project-form textarea:focus { border-color: #6e4ee6; box-shadow: 0 0 0 3px #6e4ee622; }
.check-row, .terms-row { border-color: #e4ddeb; }
.check-row input, .terms-row input { accent-color: #6e4ee6; }
.check-row small, .terms-row span { color: #625b6c; }
.form-submit { background: #6e4ee6; border-radius: 2px; color: #fff; transition: background .2s, transform .2s; }
.form-submit:hover { background: var(--ink); transform: translateY(-2px); }
.form-submit b { color: #f8dc63; }
.form-message { background: #eee9ff; color: var(--ink); }
.form-footnote { color: var(--muted); }
.form-footnote a { color: #5037bd; }
.footer { border-color: #51465f; background: #302746; color: #ded8e8; }
.footer-row { min-height: 95px; }
.footer .wordmark { color: #fff; }
.footer .wordmark small { color: #c2b8cf; }
.footer .mark { border-radius: 42% 58% 51% 49%; background: #f8dc63; color: var(--ink); transform: rotate(-8deg); }
.footer-row>span { color: #c2b8cf; }
.image-credit a { color: #fff; }

:focus-visible { outline: 3px solid #fa806b; outline-offset: 4px; }
.skip-link { position: absolute; z-index: 1000; top: 12px; left: 12px; padding: 10px 14px; background: var(--ink); color: #fff; text-decoration: none; transform: translateY(calc(-100% - 18px)); }
.skip-link:focus { transform: translateY(0); }
.inline-arrow { display: inline-block; width: 14px; height: 14px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 760px) {
  .masthead-row { position:relative; min-height:112px; align-items:flex-start; padding-top:12px; padding-bottom:48px; }
  .masthead nav { gap: 4px; font-size: 9px; }
  .masthead nav a { padding: 7px 6px; }
  .website-identity { gap:8px; }
  .website-identity .brand-logo { width:124px; }
  .product-divider { height:30px; }
  .product-name { font-size:11px; }
  .product-name small { max-width:100px; font-size:6px; }
  .masthead nav { position:absolute; left:0; right:0; bottom:4px; justify-content:flex-end; }
  .masthead nav a.back-company { margin-right:auto; padding:6px 8px; font-size:8px; }
  .opening-grid.shell { min-height: 650px; padding: 35px 18px; }
  .opening-copy { width: min(100%, 560px); padding: 30px 21px 25px; }
  .opening h1 { font-size: clamp(46px, 12vw, 60px); }
  .opening-photo img { opacity: .7; }
  .opening-photo figcaption { left: 13px; right: 13px; bottom: 11px; font-size: 7px; }
  .photo-tab { right: 14px; top: 14px; }
  .manifesto { padding: 54px 0; }
  .manifesto-list { grid-template-columns: 1fr; }
  .manifesto-list>div { grid-template-columns: 20px 22px 1fr; }
  .offer-grid { gap: 35px; }
  .offer-details { padding: 23px 0 0; border-top: 1px solid #8fac96; border-left: 0; }
  .start-grid { gap: 29px; }
  .start h2 { font-size: clamp(43px, 10vw, 53px); }
  .project-form { padding: 20px; }
  .footer { padding: 0 18px; }
}

@media (max-width: 420px) {
  .masthead nav { font-size:8px; }
  .masthead nav a { padding:6px 4px; }
  .masthead nav a.back-company { font-size:7px; }
  .masthead-row { gap: 9px; }
  .wordmark { gap: 8px; font-size: 9px; }
  .wordmark .mark { width: 38px; height: 38px; }
  .wordmark small { font-size: 6px; letter-spacing: .1em; }
  .masthead nav { gap: 2px; font-size: 8px; }
  .masthead nav a { padding: 6px 4px; }
  .masthead nav .nav-contact { padding: 8px 7px; }
  .opening-copy { padding: 26px 17px 22px; }
  .opening h1 { font-size: 46px; }
  .opening-photo figcaption span:last-child { display: none; }
  .form-two { grid-template-columns: 1fr; }
  .form-title { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.photo-tab { background: var(--orange); color: #fff; }
.manifesto { background: #f0673a; }
.manifesto h2 em { color: #fff7e9; }
.manifesto-list>div>span, .manifesto-list svg { color: #1e2235; stroke: #1e2235; }
.offer-price, .included svg { color: #f0673a; stroke: #f0673a; }
.text-link { border-color: #f0673a; color: #1e2235; }
.nav-contact span { color: #f3eedf; }
.form-submit { background: #1e2235; }
.form-submit:hover { background: #f0673a; }
.wordmark .brand-logo { width:166px; }
@media (max-width: 420px) { .wordmark .brand-logo { width:126px; } }

/* The service opening uses the same split editorial rhythm as the homepage. */
.opening{padding:50px 0 70px;background:var(--paper);color:var(--ink)}
.opening-grid.shell{width:min(1160px,calc(100% - 48px));max-width:1160px;min-height:0;margin:auto;grid-template-columns:.98fr 1.02fr;gap:62px;padding:0;overflow:visible}
.opening-copy{width:100%;max-width:540px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink);box-shadow:none;text-align:left;transform:none}
.opening h1{font-size:clamp(54px,6.6vw,78px);line-height:.97;letter-spacing:-.065em}
.opening h1 em{color:var(--orange)}
.opening-copy .overline{color:#686b79}
.opening-copy .intro{margin:0 0 19px;text-align:left}
.opening-copy .button-blue{background:var(--orange);color:#fff}
.opening-copy .button-blue:hover{background:var(--ink)}
.opening-copy .intro-note{display:block;margin:25px 0 0;padding:11px 0 0;border-top:1px solid var(--line);border-left:0;text-align:left}
.opening-photo{position:relative;inset:auto;width:100%;height:500px;overflow:hidden;background:#302746}
.opening-photo img{opacity:1}
.opening-photo:after{inset:58% 0 0;background:linear-gradient(transparent,#101923b8)}
.photo-tab{top:20px;right:-13px;background:var(--orange);color:#fff;box-shadow:4px 5px 0 #1e223533;transform:rotate(2deg)}
.manifesto{background:#1e2235;color:var(--paper)}
.manifesto .overline{color:#f3eedf}
.manifesto h2 em{color:#f0673a}
.manifesto-list>div{border-color:#ffffff38}
.manifesto-list>div>span,.manifesto-list svg{color:#f0673a;stroke:#f0673a}
.manifesto-list small{color:#dedce4}
.offer-price,.included svg{color:#f0673a;stroke:#f0673a}
.text-link{border-color:#f0673a;color:#1e2235}
.start{background:#1e2235}
.form-submit{background:#1e2235}
.form-submit:hover{background:#f0673a}
.footer{background:var(--paper);color:var(--ink);border-color:var(--line)}
.footer-row>span{color:var(--muted)}
.footer .wordmark .mark{display:none}
.image-credit a{color:var(--ink)}
@media(max-width:760px){.opening{padding:40px 0 50px}.opening-grid.shell{width:calc(100% - 36px);grid-template-columns:1fr;gap:28px;padding:0}.opening-copy{max-width:620px}.opening-photo{height:380px}.opening-copy .intro-note{margin:22px 0 0}.photo-tab{right:12px}.opening h1{font-size:clamp(48px,10vw,66px)}}
@media(max-width:420px){.opening-grid.shell{width:calc(100% - 36px)}.opening-photo{height:300px}.opening h1{font-size:46px}.photo-tab{right:10px;top:14px;font-size:7px}}