.bofs-web-development{--wd-blue:#2563eb;--wd-purple:#7c3aed;--wd-navy:#0b1220;--wd-ink:#172036;--wd-muted:#64748b;--wd-line:#e2e8f0;overflow:clip;background:#fff;color:var(--wd-ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.bofs-web-development *,.bofs-web-development *:before,.bofs-web-development *:after{box-sizing:border-box}.bofs-webdev-shell{width:min(92%,1320px);margin-inline:auto}.bofs-webdev-section{padding:clamp(4.5rem,8vw,7.5rem) 0}.bofs-webdev-eyebrow{display:flex;align-items:center;gap:.75rem;margin:0 0 1rem;color:var(--wd-blue);font-size:.72rem;font-weight:850;letter-spacing:.2em;text-transform:uppercase}.bofs-webdev-eyebrow:before{content:"";width:2.5rem;height:2px;background:linear-gradient(90deg,var(--wd-blue),var(--wd-purple))}.bofs-web-development h1,.bofs-web-development h2,.bofs-web-development h3{color:var(--wd-ink);font-weight:800;letter-spacing:-.035em}.bofs-web-development h1{max-width:760px;margin:0;font-size:clamp(2.8rem,5.7vw,5.7rem);line-height:1.01}.bofs-web-development h2{margin:0;font-size:clamp(2rem,4vw,4rem);line-height:1.06}.bofs-web-development h3{margin:0;font-size:1.12rem;line-height:1.25}.bofs-web-development p{line-height:1.7}.bofs-webdev-lead,.bofs-webdev-intro{color:var(--wd-muted);font-size:clamp(1rem,1.3vw,1.18rem)}.bofs-webdev-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}.bofs-webdev-button{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:3.5rem;padding:.85rem 1.55rem;border:1px solid transparent;border-radius:999px;background:linear-gradient(100deg,var(--wd-blue),var(--wd-purple));box-shadow:0 12px 30px rgba(37,99,235,.25);color:#fff;font-weight:800;text-decoration:none}.bofs-webdev-button--ghost{border-color:#cbd5e1;background:#fff;box-shadow:none;color:#1e3a8a}.bofs-webdev-button:hover{transform:translateY(-2px)}.bofs-webdev-button:focus-visible,.bofs-webdev-text-link:focus-visible,.bofs-webdev-faq summary:focus-visible{outline:3px solid #2563eb;outline-offset:4px}.bofs-webdev-heading{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr);align-items:end;gap:3rem;margin-bottom:clamp(2.5rem,5vw,4.5rem)}.bofs-webdev-heading>p{margin:0;color:var(--wd-muted);font-size:1.04rem}.bofs-webdev-heading--center{display:block;max-width:820px;margin-inline:auto;text-align:center}.bofs-webdev-heading--center .bofs-webdev-eyebrow{justify-content:center}.bofs-webdev-heading--center>p{margin:1rem auto 0}.bofs-webdev-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(380px,1.1fr);align-items:center;gap:clamp(3rem,7vw,7rem)}
.bofs-webdev-hero{position:relative;isolation:isolate;padding:clamp(5.5rem,9vw,9rem) 0;background:radial-gradient(circle at 85% 35%,rgba(37,99,235,.16),transparent 34%),linear-gradient(145deg,#f8fbff,#fff 55%,#f5f0ff)}.bofs-webdev-hero:before{position:absolute;z-index:-1;inset:0;content:"";opacity:.35;background-image:linear-gradient(#cbd5e140 1px,transparent 1px),linear-gradient(90deg,#cbd5e140 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent)}.bofs-webdev-hero__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);align-items:center;gap:clamp(3rem,6vw,6rem)}.bofs-webdev-device{position:relative;min-height:520px;display:grid;place-items:center}.bofs-webdev-device__glow{position:absolute;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#4f7cff55,transparent 68%);filter:blur(18px)}.bofs-webdev-browser{position:relative;width:min(100%,660px);overflow:hidden;border:9px solid #12203a;border-bottom-width:18px;border-radius:18px;background:#fff;box-shadow:0 35px 75px #0b12204d;transform:perspective(1200px) rotateY(-5deg)}.bofs-webdev-browser__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 11px;background:#15243f}.bofs-webdev-browser__bar i{width:6px;aspect-ratio:1;border-radius:50%;background:#56708f}.bofs-webdev-browser__bar span{margin-left:auto;color:#9fb2ce;font-size:.55rem}.bofs-webdev-browser__page{min-height:360px;padding:26px;background:linear-gradient(145deg,#eef6ff,#fff)}.bofs-webdev-browser__page nav{display:flex;gap:12px;align-items:center}.bofs-webdev-browser__page nav b{margin-right:auto;color:#21478c;font-size:.7rem}.bofs-webdev-browser__page nav span{width:34px;height:4px;border-radius:4px;background:#c5d2e3}.bofs-webdev-browser__hero{padding:58px 20px 38px}.bofs-webdev-browser__hero small{color:#2563eb;font-weight:800}.bofs-webdev-browser__hero strong{display:block;max-width:400px;margin:10px 0;color:#142039;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.05}.bofs-webdev-browser__hero p{width:60%;height:7px;background:#cbd7e8}.bofs-webdev-browser__hero button,.bofs-webdev-interface button{border:0;border-radius:999px;background:#2563eb;color:#fff;padding:9px 18px;font-size:.65rem}.bofs-webdev-browser__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.bofs-webdev-browser__cards i{height:65px;border:1px solid #dbe6f3;border-radius:9px;background:#fff}.bofs-webdev-phone{position:absolute;right:-3%;bottom:4%;width:155px;padding:8px;border:5px solid #13213a;border-radius:25px;background:#fff;box-shadow:0 24px 45px #0b122052}.bofs-webdev-phone>span{display:block;width:35%;height:4px;margin:0 auto 12px;border-radius:4px;background:#172036}.bofs-webdev-phone div{min-height:250px;padding:22px 13px;border-radius:14px;background:linear-gradient(#e8f1ff,#faf7ff)}.bofs-webdev-phone small{color:#2563eb;font-size:.5rem}.bofs-webdev-phone b{display:block;margin:9px 0 22px;font-size:1rem;line-height:1.1}.bofs-webdev-phone i{display:block;height:38px;margin-top:7px;border-radius:6px;background:#fff}.bofs-webdev-phone button{margin-top:16px}.bofs-webdev-device>p{position:absolute;bottom:-1rem;color:#64748b;font-size:.72rem}
.bofs-webdev-build{background:#f8fafc}.bofs-webdev-photo{position:relative;overflow:hidden;border-radius:1.5rem;background:#dbe4f0;box-shadow:0 25px 55px rgba(15,35,70,.14)}.bofs-webdev-photo img{display:block;width:100%;height:100%;object-fit:cover}.bofs-webdev-photo--build{aspect-ratio:2.35/1;margin-bottom:2rem}.bofs-webdev-photo--build img{object-position:center 42%}.bofs-webdev-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.bofs-webdev-card{min-width:0;padding:1.65rem;border:1px solid var(--wd-line);border-radius:1rem;background:#fff;box-shadow:0 10px 30px rgba(15,35,70,.055)}.bofs-webdev-card>span{display:grid;width:2.4rem;aspect-ratio:1;place-items:center;margin-bottom:1.2rem;border-radius:.7rem;background:#eaf2ff;color:var(--wd-blue);font-size:.72rem}.bofs-webdev-card p{margin:.7rem 0 0;color:var(--wd-muted);font-size:.9rem}
.bofs-webdev-goals{background:#fff}.bofs-webdev-checks,.bofs-webdev-foundation-grid,.bofs-webdev-tags,.bofs-webdev-audience-list,.bofs-webdev-reasons{list-style:none;margin:0;padding:0}.bofs-webdev-checks{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:2rem}.bofs-webdev-checks li,.bofs-webdev-reasons li{display:flex;align-items:center;gap:.65rem;font-weight:700}.bofs-webdev-checks span,.bofs-webdev-reasons span,.bofs-webdev-foundation-grid span{display:grid;flex:0 0 1.7rem;aspect-ratio:1;place-items:center;border-radius:50%;background:#e8f0ff;color:var(--wd-blue)}.bofs-webdev-interface{position:relative;min-height:530px}.bofs-webdev-interface__desktop{position:absolute;inset:3% 4% 8% 0;overflow:hidden;border:8px solid #15243e;border-bottom-width:17px;border-radius:16px;background:#fff;box-shadow:0 28px 65px #12203a33}.bofs-webdev-interface__desktop>header{display:flex;gap:5px;padding:10px;background:#15243e}.bofs-webdev-interface__desktop>header i{width:6px;aspect-ratio:1;border-radius:50%;background:#647995}.bofs-webdev-interface__nav{display:flex;align-items:center;gap:12px;padding:20px 25px}.bofs-webdev-interface__nav b{margin-right:auto;color:#21468a}.bofs-webdev-interface__nav span{width:45px;height:5px;border-radius:4px;background:#d5deea}.bofs-webdev-interface__content{padding:50px 10%;background:linear-gradient(120deg,#f2f7ff,#faf6ff)}.bofs-webdev-interface__content small{color:#2563eb;font-weight:800}.bofs-webdev-interface__content strong{display:block;max-width:350px;margin:10px 0 20px;font-size:2rem}.bofs-webdev-interface__content p{width:70%;height:6px;margin:9px 0;background:#cbd6e5}.bofs-webdev-interface__desktop footer{display:flex;gap:12px;padding:20px}.bofs-webdev-interface__desktop footer i{flex:1;height:70px;border-radius:8px;background:#edf2f8}.bofs-webdev-interface__mobile{position:absolute;right:0;bottom:0;width:175px;min-height:315px;padding:28px 18px;border:6px solid #14223c;border-radius:25px;background:linear-gradient(#eef5ff,#fff);box-shadow:0 24px 45px #0b12204d}.bofs-webdev-interface__mobile>i{position:absolute;top:8px;left:40%;width:20%;height:4px;border-radius:5px;background:#172036}.bofs-webdev-interface__mobile small{color:#2563eb;font-size:.5rem}.bofs-webdev-interface__mobile b{display:block;margin:10px 0 25px;line-height:1.2}.bofs-webdev-interface__mobile span{display:block;height:45px;margin:8px 0;border-radius:6px;background:#edf2f8}.bofs-webdev-interface>p{position:absolute;right:3%;bottom:-2.3rem;color:#64748b;font-size:.7rem}
.bofs-webdev-process{background:#0b1730;color:#cbd5e1}.bofs-webdev-process h2,.bofs-webdev-process h3{color:#fff}.bofs-webdev-process .bofs-webdev-eyebrow{color:#60a5fa}.bofs-webdev-process .bofs-webdev-heading>p{color:#a7b6cd}.bofs-webdev-process__layout{display:grid;grid-template-columns:1fr .85fr;align-items:start;gap:clamp(2rem,5vw,5rem)}.bofs-webdev-timeline{list-style:none;margin:0;padding:0}.bofs-webdev-timeline li{position:relative;display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;padding:0 0 1.65rem}.bofs-webdev-timeline li:not(:last-child):before{position:absolute;top:3.1rem;bottom:.25rem;left:1.55rem;width:1px;content:"";background:#315586}.bofs-webdev-timeline>li>span{display:grid;width:3.1rem;aspect-ratio:1;place-items:center;border:1px solid #3b65a1;border-radius:50%;background:#10264b;color:#7dd3fc;font-weight:800}.bofs-webdev-timeline h3{margin:.2rem 0 .35rem}.bofs-webdev-timeline p{margin:0;color:#9eacc1;font-size:.9rem}.bofs-webdev-photo--process{position:sticky;top:2rem;aspect-ratio:4/5}.bofs-webdev-photo--process p{position:absolute;right:1rem;bottom:1rem;left:1rem;margin:0;padding:.7rem 1rem;border-radius:.7rem;background:#081326cc;color:#dbeafe;font-size:.78rem;backdrop-filter:blur(7px)}
.bofs-webdev-foundations{background:#f8fafc}.bofs-webdev-foundation-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem;max-width:1000px;margin-inline:auto}.bofs-webdev-foundation-grid li{display:flex;align-items:center;gap:.8rem;padding:1.05rem 1.2rem;border:1px solid var(--wd-line);border-radius:.8rem;background:#fff;font-weight:700}.bofs-webdev-connected{background:linear-gradient(145deg,#f7faff,#fbf8ff)}.bofs-webdev-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0}.bofs-webdev-tags li{padding:.45rem .75rem;border:1px solid #cddbf0;border-radius:999px;background:#fff;color:#31415c;font-size:.82rem}.bofs-webdev-text-link{display:inline-flex;gap:.5rem;color:#1d4ed8;font-weight:800;text-decoration:none}.bofs-webdev-workflow{display:grid;grid-template-columns:1fr auto 1fr auto 1.15fr;align-items:center;gap:.7rem;padding:2rem;border:1px solid #bcd0ec;border-radius:1.5rem;background:#0b1730;box-shadow:0 25px 60px #14346b2e;color:#fff}.bofs-webdev-workflow>div{min-width:0;padding:1.1rem .7rem;border:1px solid #31568a;border-radius:.9rem;background:#10264b;text-align:center}.bofs-webdev-workflow>i{color:#60a5fa;font-size:1.4rem;font-style:normal}.bofs-webdev-workflow span{display:grid;width:2.5rem;aspect-ratio:1;place-items:center;margin:0 auto .7rem;border-radius:50%;background:#2563eb}.bofs-webdev-workflow b,.bofs-webdev-workflow small{display:block}.bofs-webdev-workflow small{margin-top:.35rem;color:#94a3b8;font-size:.65rem;text-transform:uppercase}.bofs-webdev-workflow__outcomes ul{list-style:none;margin:.7rem 0 0;padding:0}.bofs-webdev-workflow__outcomes li{margin-top:.35rem;color:#b8cae4;font-size:.72rem}
.bofs-webdev-audiences{background:#fff}.bofs-webdev-photo--wide{aspect-ratio:16/7}.bofs-webdev-audience-list{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:1.3rem}.bofs-webdev-audience-list li{display:flex;align-items:center;gap:.65rem;padding:.9rem;border:1px solid var(--wd-line);border-radius:.75rem;background:#f8fafc;font-size:.88rem;font-weight:700}.bofs-webdev-audience-list span{width:.55rem;aspect-ratio:1;border-radius:50%;background:linear-gradient(var(--wd-blue),var(--wd-purple))}.bofs-webdev-note{margin:1rem 0 0;color:#64748b;font-size:.76rem}.bofs-webdev-why{background:#f8fafc}.bofs-webdev-why__grid{display:grid;grid-template-columns:.78fr 1.22fr;align-items:start;gap:clamp(3rem,7vw,7rem)}.bofs-webdev-reasons{display:grid;gap:.85rem;margin-top:2rem}.bofs-webdev-faq h2{margin-bottom:1.5rem;font-size:clamp(1.75rem,3vw,2.7rem)}.bofs-webdev-faq details{border-top:1px solid #d7e0eb}.bofs-webdev-faq details:last-child{border-bottom:1px solid #d7e0eb}.bofs-webdev-faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 0;color:#172036;font-weight:800;cursor:pointer;list-style:none}.bofs-webdev-faq summary::-webkit-details-marker{display:none}.bofs-webdev-faq summary span{font-size:1.5rem;color:#2563eb;transition:transform .2s}.bofs-webdev-faq details[open] summary span{transform:rotate(45deg)}.bofs-webdev-faq details p{margin:0;padding:0 2rem 1.3rem 0;color:#64748b;font-size:.92rem}.bofs-webdev-enquiry{scroll-margin-top:2rem;background:#0b1220;color:#cbd5e1}.bofs-webdev-enquiry h2{color:#fff}.bofs-webdev-enquiry__grid{display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;gap:clamp(3rem,7vw,7rem)}.bofs-webdev-enquiry__grid>div>p:not(.bofs-webdev-eyebrow){font-size:1.08rem}.bofs-webdev-enquiry__signal{display:flex;gap:1rem;margin-top:2rem;padding:1rem;border:1px solid #283b5b;border-radius:.8rem;background:#121f35}.bofs-webdev-enquiry__signal>span{color:#60a5fa;font-size:1.4rem}.bofs-webdev-enquiry__signal p{margin:0;color:#9fb0c9;font-size:.82rem}.bofs-webdev-enquiry__signal b{color:#fff}.bofs-webdev-enquiry__form{padding:clamp(1.4rem,3vw,2.3rem);border-radius:1.2rem;background:#fff;box-shadow:0 30px 65px #0004}
@media(max-width:1000px){.bofs-webdev-hero__grid,.bofs-webdev-split,.bofs-webdev-process__layout,.bofs-webdev-why__grid,.bofs-webdev-enquiry__grid{grid-template-columns:1fr}.bofs-webdev-hero__copy{max-width:780px}.bofs-webdev-card-grid{grid-template-columns:repeat(2,1fr)}.bofs-webdev-process__layout{gap:2rem}.bofs-webdev-photo--process{position:relative;top:auto;aspect-ratio:16/8}.bofs-webdev-audience-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.bofs-webdev-shell{width:min(90%,560px)}.bofs-webdev-section{padding-block:4.25rem}.bofs-webdev-heading{display:block}.bofs-webdev-heading>p{margin-top:1rem}.bofs-webdev-hero{padding-block:4.5rem}.bofs-webdev-hero__grid{gap:2.5rem}.bofs-webdev-device{min-height:390px}.bofs-webdev-browser__page{min-height:280px;padding:16px}.bofs-webdev-browser__hero{padding:38px 12px 25px}.bofs-webdev-browser__hero strong{font-size:1.7rem}.bofs-webdev-phone{right:-2%;width:120px}.bofs-webdev-phone div{min-height:205px;padding:18px 9px}.bofs-webdev-phone b{font-size:.75rem}.bofs-webdev-phone i{height:28px}.bofs-webdev-photo--build,.bofs-webdev-photo--wide,.bofs-webdev-photo--process{aspect-ratio:4/3}.bofs-webdev-card-grid,.bofs-webdev-foundation-grid{grid-template-columns:1fr}.bofs-webdev-interface{min-height:430px}.bofs-webdev-interface__desktop{right:9%}.bofs-webdev-interface__mobile{width:135px;min-height:255px}.bofs-webdev-workflow{grid-template-columns:1fr}.bofs-webdev-workflow>i{transform:rotate(90deg)}.bofs-webdev-audience-list{grid-template-columns:1fr}.bofs-webdev-enquiry{padding-bottom:calc(6rem + env(safe-area-inset-bottom,0px))}}
@media(max-width:430px){.bofs-web-development h1{font-size:2.55rem}.bofs-webdev-actions{display:grid}.bofs-webdev-button{width:100%}.bofs-webdev-device{min-height:335px}.bofs-webdev-phone{right:-5%;bottom:0;width:105px}.bofs-webdev-browser__page{min-height:235px}.bofs-webdev-browser__hero{padding-top:24px}.bofs-webdev-browser__hero strong{font-size:1.35rem}.bofs-webdev-browser__cards i{height:42px}.bofs-webdev-checks{grid-template-columns:1fr}.bofs-webdev-interface{min-height:365px}.bofs-webdev-interface__desktop{inset:2% 7% 8% 0}.bofs-webdev-interface__content{padding-block:28px}.bofs-webdev-interface__mobile{right:-3%;width:115px;min-height:220px;padding:24px 12px}.bofs-webdev-timeline li{grid-template-columns:2.7rem 1fr}.bofs-webdev-timeline>li>span{width:2.65rem}.bofs-webdev-timeline li:not(:last-child):before{left:1.32rem}}
@media(prefers-reduced-motion:reduce){.bofs-web-development *,.bofs-web-development *:before,.bofs-web-development *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.bofs-webdev-button:hover{transform:none}}

/* Approved dark service hero treatment. */
.bofs-webdev-hero{background:#0b1220}.bofs-webdev-hero:before{opacity:.14;background-image:linear-gradient(#6e87b62e 1px,transparent 1px),linear-gradient(90deg,#6e87b62e 1px,transparent 1px)}.bofs-webdev-hero:after{position:absolute;z-index:-1;top:12%;right:4%;width:min(42vw,650px);aspect-ratio:1;content:"";border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.16),rgba(124,58,237,.06) 38%,transparent 70%);filter:blur(12px)}.bofs-webdev-hero h1{color:#fff}.bofs-webdev-hero .bofs-webdev-eyebrow{color:#93c5fd}.bofs-webdev-hero .bofs-webdev-lead{color:#cbd5e1}.bofs-webdev-hero .bofs-webdev-button--ghost{border-color:#43516a;background:rgba(255,255,255,.035);color:#f8fafc}.bofs-webdev-hero .bofs-webdev-device__glow{background:radial-gradient(circle,#2563eb66,transparent 68%)}.bofs-webdev-hero .bofs-webdev-device>p{color:#94a3b8}

/* Distinct, lightweight What We Build icon system. */
.bofs-webdev-card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.bofs-webdev-card:hover{transform:translateY(-3px);border-color:#b6c9ea;box-shadow:0 16px 36px rgba(37,99,235,.1)}.bofs-webdev-card__icon{display:grid;width:3.15rem;aspect-ratio:1;place-items:center;margin-bottom:1.2rem;border:1px solid #d8e5fa;border-radius:.85rem;background:linear-gradient(145deg,#eef5ff,#f7f2ff);color:var(--wd-blue);box-shadow:inset 0 0 18px rgba(37,99,235,.055);transition:border-color .22s ease,box-shadow .22s ease}.bofs-webdev-card__icon svg{width:2rem;height:2rem;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.bofs-webdev-card:nth-child(even) .bofs-webdev-card__icon{color:var(--wd-purple)}.bofs-webdev-card:hover .bofs-webdev-card__icon{border-color:#a9c1ee;box-shadow:0 0 18px rgba(37,99,235,.12)}.bofs-webdev-card--business:hover .bofs-webdev-card__icon svg,.bofs-webdev-card--corporate:hover .bofs-webdev-card__icon svg{animation:bofs-webdev-icon-rise .55s ease}.bofs-webdev-card--commerce:hover .bofs-webdev-icon-cart{animation:bofs-webdev-icon-cart .55s ease}.bofs-webdev-card--landing:hover .bofs-webdev-icon-cursor{animation:bofs-webdev-icon-cursor .6s ease}.bofs-webdev-icon-signal{fill:rgba(37,99,235,.1);animation:bofs-webdev-icon-pulse 2.8s ease-in-out infinite}.bofs-webdev-icon-refresh{transform-origin:center;animation:bofs-webdev-icon-refresh 7s ease-in-out infinite}@keyframes bofs-webdev-icon-rise{50%{transform:translateY(-2px)}}@keyframes bofs-webdev-icon-cart{50%{transform:translateX(2px)}}@keyframes bofs-webdev-icon-cursor{50%{transform:translate(1px,1px)}}@keyframes bofs-webdev-icon-pulse{50%{opacity:.55;transform:scale(.92)}}@keyframes bofs-webdev-icon-refresh{0%,88%,100%{transform:rotate(0)}94%{transform:rotate(14deg)}}

@media(max-width:720px){.bofs-webdev-hero:after{top:45%;right:-25%;width:90vw}.bofs-webdev-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.bofs-webdev-card:hover{transform:none}.bofs-webdev-icon-signal,.bofs-webdev-icon-refresh,.bofs-webdev-card:hover .bofs-webdev-card__icon svg,.bofs-webdev-card:hover .bofs-webdev-icon-cart,.bofs-webdev-card:hover .bofs-webdev-icon-cursor{animation:none!important}}

/* Fictional Oceanview Boutique Hotel responsive interface demonstrations. */
.bofs-hotel-site{font-family:Georgia,"Times New Roman",serif}.bofs-hotel-home{background:#f6f1e9}.bofs-hotel-home nav,.bofs-hotel-rooms nav{display:flex;align-items:center;gap:1rem;min-height:56px;padding:10px 20px;background:#fff;color:#203335}.bofs-hotel-home nav>b,.bofs-hotel-rooms nav>b{display:grid;margin-right:auto;font-size:.48rem;line-height:1.2;letter-spacing:.15em}.bofs-hotel-home nav>b span,.bofs-hotel-rooms nav>b span{font-size:.76rem;letter-spacing:.11em}.bofs-hotel-home nav>div,.bofs-hotel-rooms nav>div{font-family:Inter,ui-sans-serif,sans-serif;font-size:.52rem}.bofs-hotel-home nav button,.bofs-hotel-rooms nav button,.bofs-hotel-home__hero button,.bofs-hotel-rooms__feature button{border:0;border-radius:0;background:#a9784e;color:#fff;font-family:Inter,ui-sans-serif,sans-serif;font-size:.52rem;padding:9px 12px}.bofs-hotel-home__hero{position:relative;height:280px;overflow:hidden}.bofs-hotel-home__hero:after{position:absolute;inset:0;content:"";background:linear-gradient(90deg,rgba(13,27,29,.76),rgba(13,27,29,.1) 72%)}.bofs-hotel-home__hero>img{position:absolute;width:100%;height:100%;object-fit:cover}.bofs-hotel-home__hero>div{position:relative;z-index:1;display:flex;height:100%;max-width:58%;flex-direction:column;align-items:flex-start;justify-content:center;padding:25px;color:#fff}.bofs-hotel-home__hero small{font-family:Inter,ui-sans-serif,sans-serif;font-size:.48rem;letter-spacing:.2em}.bofs-hotel-home__hero strong{margin:.45rem 0;font-size:1.75rem;font-weight:500;line-height:1.02}.bofs-hotel-home__hero p{margin:0 0 .8rem;font-family:Inter,ui-sans-serif,sans-serif;font-size:.56rem;line-height:1.45}.bofs-hotel-booking{display:grid;grid-template-columns:repeat(3,1fr) 1.15fr;align-items:stretch;margin:-18px 20px 0;position:relative;z-index:2;background:#fff;box-shadow:0 7px 18px #17203626;font-family:Inter,ui-sans-serif,sans-serif}.bofs-hotel-booking span{padding:10px;border-right:1px solid #e8dfd4;color:#293c3d;font-size:.58rem}.bofs-hotel-booking small{display:block;margin-bottom:3px;color:#8c745e;font-size:.4rem;letter-spacing:.12em}.bofs-hotel-booking button{border:0;background:#203f40;color:#fff;font-size:.52rem}.bofs-hotel-mobile.bofs-webdev-phone{padding:7px;background:#f6f1e9}.bofs-hotel-mobile.bofs-webdev-phone>div{min-height:250px;padding:0;overflow:hidden;background:#f6f1e9}.bofs-hotel-mobile nav{display:flex;align-items:center;justify-content:space-between;padding:9px;color:#203335;background:#fff}.bofs-hotel-mobile nav b{margin:0;font-size:.55rem;letter-spacing:.08em}.bofs-hotel-mobile nav span{font-size:.65rem}.bofs-hotel-mobile__hero{position:relative;height:185px;overflow:hidden}.bofs-hotel-mobile__hero:after{position:absolute;inset:0;content:"";background:linear-gradient(rgba(14,28,29,.2),rgba(14,28,29,.75))}.bofs-hotel-mobile__hero>img{position:absolute;width:100%;height:100%;object-fit:cover}.bofs-hotel-mobile__hero>div{position:relative;z-index:1;display:flex;min-height:185px;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:12px;background:none;color:#fff}.bofs-hotel-mobile__hero small{font-size:.34rem;letter-spacing:.12em}.bofs-hotel-mobile__hero strong{margin:.28rem 0 .55rem;font-family:Georgia,"Times New Roman",serif;font-size:.78rem;line-height:1.08}.bofs-hotel-mobile__hero button{margin:0;border-radius:0;background:#a9784e;font-size:.42rem;padding:6px 9px}.bofs-hotel-mobile footer{padding:8px;background:#203f40;color:#fff;font-size:.4rem;letter-spacing:.1em;text-align:center}.bofs-hotel-mobile footer b{color:#d7af85}
.bofs-hotel-rooms.bofs-webdev-interface__desktop{font-family:Georgia,"Times New Roman",serif;background:#f7f2ea}.bofs-hotel-rooms.bofs-webdev-interface__desktop>header{height:23px}.bofs-hotel-rooms__feature{position:relative;height:260px;overflow:hidden}.bofs-hotel-rooms__feature:after{position:absolute;inset:0;content:"";background:linear-gradient(90deg,rgba(24,39,40,.78),transparent 76%)}.bofs-hotel-rooms__feature>img{position:absolute;width:100%;height:100%;object-fit:cover}.bofs-hotel-rooms__feature>div{position:relative;z-index:1;display:flex;height:100%;max-width:55%;flex-direction:column;align-items:flex-start;justify-content:center;padding:25px;color:#fff}.bofs-hotel-rooms__feature small{font-family:Inter,ui-sans-serif,sans-serif;font-size:.45rem;letter-spacing:.18em}.bofs-hotel-rooms__feature strong{margin:.45rem 0;font-size:1.65rem;font-weight:500;line-height:1.05}.bofs-hotel-rooms__feature p{margin:0 0 .7rem;font-family:Inter,ui-sans-serif,sans-serif;font-size:.52rem;line-height:1.45}.bofs-hotel-rooms__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}.bofs-hotel-rooms__cards article{padding:10px;background:#fff}.bofs-hotel-rooms__cards b,.bofs-hotel-rooms__cards small{display:block}.bofs-hotel-rooms__cards b{color:#293c3d;font-size:.7rem}.bofs-hotel-rooms__cards small{margin-top:3px;color:#8b7562;font-family:Inter,ui-sans-serif,sans-serif;font-size:.4rem}.bofs-hotel-rooms-mobile.bofs-webdev-interface__mobile{overflow:hidden;padding:24px 11px 12px;background:#f7f2ea;font-family:Georgia,"Times New Roman",serif}.bofs-hotel-rooms-mobile nav{display:flex;align-items:center;justify-content:space-between;margin:-10px -4px 8px;color:#203335}.bofs-hotel-rooms-mobile nav b{margin:0;font-size:.5rem;letter-spacing:.08em}.bofs-hotel-rooms-mobile nav span{height:auto;margin:0;background:none;font-size:.55rem}.bofs-hotel-rooms-mobile>img{display:block;width:calc(100% + 22px);height:92px;margin:0 -11px 10px;object-fit:cover}.bofs-hotel-rooms-mobile>small{font-size:.37rem;letter-spacing:.1em}.bofs-hotel-rooms-mobile>b{margin:.35rem 0;font-size:.8rem;font-weight:500}.bofs-hotel-rooms-mobile>p{width:auto;height:auto;margin:0 0 .55rem;background:none;color:#6c635a;font-family:Inter,ui-sans-serif,sans-serif;font-size:.42rem;line-height:1.35}.bofs-hotel-rooms-mobile>button{margin:0;border-radius:0;background:#a9784e;font-size:.4rem;padding:6px 8px}
@media(max-width:720px){.bofs-hotel-home__hero{height:220px}.bofs-hotel-home__hero>div{max-width:72%;padding:18px}.bofs-hotel-home__hero strong{font-size:1.25rem}.bofs-hotel-booking{margin-inline:10px}.bofs-hotel-home nav>div,.bofs-hotel-rooms nav>div{display:none}.bofs-hotel-rooms__feature{height:205px}.bofs-hotel-rooms__feature>div{max-width:70%;padding:16px}.bofs-hotel-rooms__feature strong{font-size:1.2rem}.bofs-hotel-rooms__cards{display:none}}
@media(max-width:430px){.bofs-hotel-home nav,.bofs-hotel-rooms nav{min-height:44px;padding:7px 10px}.bofs-hotel-home nav button,.bofs-hotel-rooms nav button{padding:7px;font-size:.42rem}.bofs-hotel-home__hero{height:180px}.bofs-hotel-home__hero strong{font-size:1rem}.bofs-hotel-home__hero p{display:none}.bofs-hotel-booking{grid-template-columns:1fr 1fr;margin-top:-12px}.bofs-hotel-booking span:nth-child(3){display:none}.bofs-hotel-booking button{min-height:36px}.bofs-hotel-mobile.bofs-webdev-phone>div{min-height:205px}.bofs-hotel-mobile__hero,.bofs-hotel-mobile__hero>div{height:142px;min-height:142px}.bofs-hotel-rooms__feature{height:170px}.bofs-hotel-rooms__feature p{display:none}}
.bofs-hotel-mobile nav b,.bofs-hotel-rooms-mobile nav b{display:grid;margin:0;font-size:.32rem;line-height:1.15;letter-spacing:.1em}.bofs-hotel-mobile nav b span,.bofs-hotel-rooms-mobile nav b span{font-size:.55rem}.bofs-hotel-mobile nav>span{font-size:.65rem}

/* Final Oceanview production-detail and device-proportion refinement. */
.bofs-webdev-device{min-height:600px}.bofs-hotel-site{max-height:560px}.bofs-hotel-home__hero{height:255px}.bofs-hotel-home__hero>div>span{display:flex;gap:7px}.bofs-hotel-home__hero .bofs-hotel-button--outline{border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.12)}.bofs-hotel-home__rooms{padding:23px 28px 18px;background:#faf7f2;text-align:center;color:#203335}.bofs-hotel-home__rooms>small{font-family:Inter,ui-sans-serif,sans-serif;font-size:.42rem;letter-spacing:.2em}.bofs-hotel-home__rooms>strong{display:block;margin:4px 0;font-size:1.25rem;font-weight:500}.bofs-hotel-home__rooms>p{margin:0;color:#6d6b66;font-family:Inter,ui-sans-serif,sans-serif;font-size:.48rem}.bofs-hotel-home__rooms>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px;text-align:left}.bofs-hotel-home__rooms article{overflow:hidden;background:#fff}.bofs-hotel-home__rooms article img{display:block;width:100%;height:44px;object-fit:cover}.bofs-hotel-home__rooms article b{display:block;padding:6px 7px;color:#203335;font-size:.54rem;font-weight:500}
.bofs-webdev-phone.bofs-hotel-mobile{right:-2%;bottom:2%;width:190px;aspect-ratio:9/19.5;min-height:0;padding:7px;border-width:5px;border-radius:31px;background:#101419;box-shadow:0 24px 48px #02061780,0 0 0 1px #728099}.bofs-webdev-phone.bofs-hotel-mobile>span{position:absolute;z-index:5;top:7px;left:50%;width:41%;height:16px;margin:0;border-radius:0 0 11px 11px;background:#0b0f14;transform:translateX(-50%)}.bofs-hotel-mobile.bofs-webdev-phone>div{height:100%;min-height:0;border-radius:21px;background:#faf7f2}.bofs-hotel-mobile__status{display:flex!important;min-height:24px!important;height:24px!important;align-items:center;justify-content:space-between;padding:5px 10px!important;background:#fff!important;color:#111!important;font-family:Inter,ui-sans-serif,sans-serif;font-size:.4rem}.bofs-hotel-mobile__status b{font-size:.42rem}.bofs-hotel-mobile__status span{font-size:.3rem}.bofs-hotel-mobile nav{min-height:43px;padding:7px 9px}.bofs-hotel-mobile__hero{height:176px}.bofs-hotel-mobile__hero>div{height:176px;min-height:176px;padding:11px}.bofs-hotel-mobile__hero strong{font-size:.9rem}.bofs-hotel-mobile__hero p{margin:0 0 .55rem;font-family:Inter,ui-sans-serif,sans-serif;font-size:.4rem;line-height:1.35}.bofs-hotel-mobile__booking{position:relative;z-index:2;display:grid;margin:-8px 8px 0;border-radius:9px;background:#fff;box-shadow:0 5px 13px #17203626;font-family:Inter,ui-sans-serif,sans-serif;overflow:hidden}.bofs-hotel-mobile__booking>span{display:flex;align-items:center;justify-content:space-between;min-height:24px;padding:4px 8px;border-bottom:1px solid #eee8df;color:#263636;font-size:.4rem}.bofs-hotel-mobile__booking small{font-size:.32rem;letter-spacing:.08em}.bofs-hotel-mobile__booking button{min-height:27px;margin:4px;border:0;border-radius:4px;background:#0c5a55;color:#fff;font-size:.38rem}.bofs-hotel-mobile__featured{padding:10px 12px;background:#faf7f2;color:#203335}.bofs-hotel-mobile__featured small{font-family:Inter,ui-sans-serif,sans-serif;font-size:.32rem;letter-spacing:.13em}.bofs-hotel-mobile__featured b{display:block;margin:3px 0;font-size:.65rem}.bofs-hotel-mobile__featured p{margin:0;color:#6d6b66;font-family:Inter,ui-sans-serif,sans-serif;font-size:.36rem;line-height:1.35}
.bofs-hotel-rooms-mobile.bofs-webdev-interface__mobile{width:165px;aspect-ratio:9/18.8;min-height:0;border-radius:27px}.bofs-hotel-rooms-mobile>div{margin-top:8px;padding-top:7px;border-top:1px solid #ddd4c8}.bofs-hotel-rooms-mobile>div strong,.bofs-hotel-rooms-mobile>div small{display:block}.bofs-hotel-rooms-mobile>div strong{color:#203335;font-size:.55rem}.bofs-hotel-rooms-mobile>div small{margin-top:3px;color:#786d63;font-family:Inter,ui-sans-serif,sans-serif;font-size:.34rem;line-height:1.3}
@media(max-width:720px){.bofs-webdev-device{min-height:510px}.bofs-hotel-site{max-height:470px}.bofs-hotel-home__rooms{padding:15px 18px}.bofs-hotel-home__rooms>div{margin-top:7px}.bofs-webdev-phone.bofs-hotel-mobile{right:0;bottom:0;width:165px}.bofs-hotel-mobile__hero,.bofs-hotel-mobile__hero>div{height:148px;min-height:148px}.bofs-hotel-mobile__featured{display:none}}
@media(max-width:430px){.bofs-webdev-device{min-height:420px}.bofs-hotel-site{max-height:390px}.bofs-hotel-home__rooms{padding:11px}.bofs-hotel-home__rooms>p{display:none}.bofs-hotel-home__rooms article img{height:34px}.bofs-webdev-phone.bofs-hotel-mobile{right:-4%;width:138px;border-radius:24px}.bofs-webdev-phone.bofs-hotel-mobile>span{height:12px}.bofs-hotel-mobile.bofs-webdev-phone>div{border-radius:16px}.bofs-hotel-mobile__status{height:20px!important;min-height:20px!important}.bofs-hotel-mobile nav{min-height:36px}.bofs-hotel-mobile__hero,.bofs-hotel-mobile__hero>div{height:118px;min-height:118px}.bofs-hotel-mobile__hero p{display:none}.bofs-hotel-mobile__booking>span{min-height:20px}.bofs-hotel-rooms-mobile.bofs-webdev-interface__mobile{width:135px}}
.bofs-hotel-mobile.bofs-webdev-phone .bofs-hotel-mobile__hero{min-height:0;padding:0;border-radius:0;background:transparent}.bofs-hotel-mobile.bofs-webdev-phone .bofs-hotel-mobile__booking{min-height:0;padding:0}.bofs-hotel-mobile.bofs-webdev-phone .bofs-hotel-mobile__featured{min-height:0;border-radius:0}
.bofs-hotel-home__rooms article>span{display:block;height:44px;background:linear-gradient(145deg,#d8e6df,#aac7bd);position:relative;overflow:hidden}.bofs-hotel-home__rooms article>span:before{position:absolute;right:-8%;bottom:-22px;width:74%;height:45px;content:"";border-radius:50% 50% 0 0;background:#f2e7d4;box-shadow:-35px 5px 0 #6d9f97}.bofs-hotel-home__rooms article:nth-child(2)>span{background:linear-gradient(145deg,#eadfce,#c8ae8e)}.bofs-hotel-home__rooms article:nth-child(2)>span:before{background:#f9f4eb;box-shadow:-35px 5px 0 #a9784e}.bofs-hotel-home__rooms article:nth-child(3)>span{background:linear-gradient(145deg,#cbdde1,#88aeb4)}.bofs-hotel-home__rooms article:nth-child(3)>span:before{background:#e9ded0;box-shadow:-35px 5px 0 #326d68}@media(max-width:430px){.bofs-hotel-home__rooms article>span{height:34px}}

/* Keep the hero phone bounded to, and overlapping, the desktop device. */
.bofs-webdev-device{padding:1.25rem 1.5rem 1.25rem 0}.bofs-webdev-device>.bofs-webdev-phone.bofs-hotel-mobile{top:auto;right:1rem;bottom:1.5rem;left:auto;width:clamp(150px,27%,180px);max-width:30%;height:auto;max-height:none;aspect-ratio:9/19.5;overflow:hidden}
@media(max-width:1000px){.bofs-webdev-device>.bofs-webdev-phone.bofs-hotel-mobile{right:1rem;bottom:1.25rem;width:clamp(145px,25%,165px);max-width:29%}}
@media(max-width:720px){.bofs-webdev-device{padding:1rem}.bofs-webdev-device>.bofs-webdev-phone.bofs-hotel-mobile{right:.5rem;bottom:1rem;width:150px;max-width:31%}}
@media(max-width:430px){.bofs-webdev-device{padding:.75rem}.bofs-webdev-device>.bofs-webdev-phone.bofs-hotel-mobile{right:.25rem;bottom:.75rem;width:124px;max-width:31%}}