/* Homepage only: retain shared functional styles without changing other pages. */
@import url('/home-base.css?v=20260923-carousel');

:root { --page:#f5f8f5; --ink:#113e33; --muted:#60766c; --green:#0e5d46; --hero:#0b493d; --line:#d4dfd7; }
html { scroll-padding-top:32px; }
.wrap { width:min(1280px,87.8%); }
:focus-visible { outline-color:#a9852e; }
.site-header { position:relative; color:var(--page); background:var(--hero); border:0; backdrop-filter:none; }
.navigation { height:100px; justify-content:space-between; gap:32px; }
.brand { gap:15px; }
.brand img { width:52px; height:52px; }
.brand b { font-size:34px; font-weight:750; letter-spacing:.01em; line-height:1.25; }
.nav-links { flex:0; gap:clamp(20px,2.4vw,38px); }
.nav-links a { position:relative; font-size:14px; padding-block:12px; }
.nav-links a:hover { color:inherit; }
.nav-links a::after { content:""; position:absolute; inset:auto 0 7px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.nav-links a:hover::after,.nav-links a:focus-visible::after { transform:scaleX(1); }
.nav-toggle { width:44px; height:44px; }
.nav-toggle span { height:2px; width:25px; margin:7px auto; transition:transform .2s; }
.nav-toggle[aria-expanded="true"] span:first-child { transform:translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform:translateY(-4.5px) rotate(-45deg); }

.hero { display:block; min-height:0; padding:0; color:var(--page); background:var(--hero); }
.hero-layout { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:6%; padding-block:0 20px; }
.hero-copy { padding-block:60px 35px; animation:hero-enter .65s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 { font-size:clamp(82px,11vw,148px); line-height:1.16; font-weight:800; letter-spacing:-.02em; }
.hero-lead { font-size:clamp(20px,2.7vw,34px); color:#d8e6df; line-height:1.7; margin-top:20px; letter-spacing:.025em; white-space:nowrap; }
.hero-actions { gap:36px; margin-top:56px; }
.button { min-height:52px; padding:13px 24px; font-size:15px; border-radius:6px; gap:30px; transition:background .2s,transform .2s; }
.button-primary:hover { box-shadow:none; transform:none; }
.button-light { background:var(--page); color:var(--ink); min-width:206px; min-height:62px; font-size:23px; letter-spacing:.08em; }
.button-light:hover { background:#e2ece5; transform:translateY(-2px); }
.hero-consult { display:inline-flex; align-items:center; gap:12px; font-size:23px; padding-block:12px; white-space:nowrap; }
.hero-consult span { opacity:0; transform:translate(-5px,5px); transition:opacity .2s,transform .2s; }
.hero-consult:hover span,.hero-consult:focus-visible span { opacity:1; transform:none; }
.product-example { justify-self:center; animation:hero-enter .8s .1s cubic-bezier(.2,.7,.2,1) both; }
.product-frame { display:block; width:fit-content; padding:5px; border:1px solid #b9cec5; border-radius:16px; background:#133c34; cursor:zoom-in; }
.product-frame img { height:clamp(550px,53vw,710px); width:auto; border-radius:10px; }
.product-frame:hover { border-color:white; }
.product-example figcaption { text-align:center; color:#d8e6df; font-size:15px; padding-top:8px; letter-spacing:.04em; }
/* Same product frame across slides; only its contents transition. */
.product-carousel { --screen-height:clamp(550px,53vw,710px); width:calc(var(--screen-height) * .46205357 + 12px); max-width:100%; }
.product-carousel .product-frame { width:100%; touch-action:pan-y pinch-zoom; }
.product-carousel .product-frame:disabled { cursor:default; }
.product-screen { display:block; position:relative; height:var(--screen-height); overflow:hidden; border-radius:10px; background:#fff; }
.product-carousel .product-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; border-radius:0; opacity:0; transform:translateX(10px); transition:opacity .45s ease,transform .45s ease; pointer-events:none; }
.product-carousel .product-frame img.is-current { opacity:1; transform:none; }
.product-fallback { position:absolute; inset:0; display:grid; place-content:center; padding:24px; color:var(--ink); font-size:14px; line-height:1.8; text-align:center; }
.product-carousel figcaption { font-size:12px; letter-spacing:.01em; white-space:nowrap; }
.carousel-toolbar { min-height:48px; }
.carousel-controls { display:flex; justify-content:center; align-items:center; gap:2px; margin-top:4px; }
.carousel-control,.carousel-dot { display:grid; place-items:center; width:38px; height:44px; padding:0; background:transparent; color:var(--page); border:0; border-radius:5px; }
.carousel-control:hover { background:#ffffff14; }
.carousel-control svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.6; fill:none; }
.carousel-dots { display:flex; align-items:center; }
.carousel-dot { width:28px; }
.carousel-dot::before { content:""; width:5px; height:5px; border-radius:50%; background:#b9cec5; transition:width .25s,background .25s; }
.carousel-dot[aria-pressed="true"]::before { width:18px; border-radius:3px; background:var(--page); }
.carousel-dot:disabled { opacity:.3; cursor:default; }
.carousel-play { width:44px; margin-left:4px; font-size:11px; }
.product-carousel :focus-visible { outline-color:#d8b054; outline-offset:1px; }
@keyframes hero-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

.selected-work { padding-top:32px; }
.case-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:16px; }
h2 { font-size:clamp(30px,3.3vw,44px); font-weight:700; line-height:1.35; letter-spacing:-.035em; }
.underlined-link { display:inline-block; border-bottom:1px solid #9fb3a7; padding:5px 0; font-size:15px; line-height:1.6; }
.underlined-link:hover,.source-link:hover { border-color:var(--ink); color:#087453; }
.reference-cases { display:grid; grid-template-columns:1.88fr 1fr; gap:26px; }
.project { display:block; min-width:0; }
.project-image { position:relative; height:clamp(300px,32.4vw,475px); overflow:hidden; background:#e2e8df; }
.project-image img { width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.project:nth-child(2) .project-image img { object-position:53% 50%; }
.project-open { position:absolute; right:18px; bottom:18px; padding:9px 16px; border-radius:4px; background:var(--page); color:var(--ink); font-size:13px; transform:translateY(8px); opacity:0; transition:opacity .2s,transform .2s; }
.project-caption { position:relative; padding:12px 32px 0 0; }
.project h3 { font-size:clamp(18px,2vw,25px); font-weight:700; line-height:1.4; letter-spacing:.015em; }
.project-caption p { color:var(--muted); font-size:16px; margin-top:1px; }
.project-arrow { position:absolute; right:0; top:10px; font-size:22px; opacity:0; transform:translate(-4px,4px); transition:opacity .2s,transform .2s; }
.project:focus-visible .project-open,.project:focus-visible .project-arrow { opacity:1; transform:none; }
@media (hover:hover) { .project:hover .project-image img { transform:scale(1.025); } .project:hover .project-open,.project:hover .project-arrow { opacity:1; transform:none; } }
.brand-proof { display:block; border:0; text-align:center; font-size:clamp(26px,3.3vw,43px); font-weight:700; line-height:1.45; padding-block:28px 38px; letter-spacing:-.025em; }
.brand-proof span { display:inline; white-space:nowrap; font:inherit; color:inherit; margin:0; }

/* The rest of the page follows the same quiet, photographic layout. */
.section { padding-block:88px; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:24px; max-width:none; margin-bottom:40px; }
.section-description { font-size:15px; margin:0; }
.services-section,.delivery-section,.contact-section { background:transparent; border-top:1px solid var(--line); }
.services-layout { grid-template-columns:.75fr 1.25fr; gap:60px; }
.service-intro>p { margin-top:15px; font-size:15px; }
.service-intro>.underlined-link { margin-top:28px; }
.service-detail summary { font-size:25px; font-weight:600; padding-block:22px; }
.service-content>p { font-size:15px; max-width:560px; text-wrap:pretty; }
.service-tags { gap:0; flex-wrap:wrap; }
.service-tags span { background:none; border:0; border-radius:0; padding:0; margin-right:14px; font-size:12px; }
.reviews-section,.about-section,.pricing-section { border-top:1px solid var(--line); }
.reviews-layout { grid-template-columns:1.6fr 1fr; gap:50px; }
.review-main { background:transparent; border-radius:0; border-right:1px solid var(--line); padding:0 42px 0 0; display:flex; flex-direction:column; justify-content:space-between; }
.quote-symbol { font-size:60px; height:38px; }
.review-main blockquote { font-size:clamp(23px,2.5vw,34px); font-weight:500; line-height:1.75; letter-spacing:-.025em; margin-bottom:24px; }
.review-bottom { margin-top:14px; }
.review-compact { padding-block:0 26px; }
.review-compact+.review-compact { padding-block:26px 0; }
.review-compact blockquote { font-size:21px; }
.about-intro { display:flex; align-items:baseline; justify-content:space-between; gap:24px; max-width:none; margin-bottom:40px; }
.about-intro>p:not(.eyebrow) { margin:0; }
.about-gallery { grid-template-columns:1.35fr 1fr; gap:28px; }
.about-gallery img { border-radius:0; height:auto; aspect-ratio:4/3; }
.about-secondary { padding-top:60px; }
.about-wide img { aspect-ratio:2.7; object-position:center 58%; }
.delivery-steps { gap:24px; margin-top:0; }
.delivery-steps li { padding:22px 0 0; }
.delivery-marker { display:none; }
.delivery-steps h3 { font-size:21px; }
.delivery-steps p { font-size:13px; }
.pricing-grid { gap:18px; }
.price-card { border-radius:6px; background:transparent; padding:26px 22px 22px; }
.price-card.featured { background:#eaf0e9; }
.price-card h3 { font-size:21px; }
.price-card .subtitle { font-size:12px; }
.price-value { font-size:38px; font-variant-numeric:tabular-nums; }
.price-card li { font-size:13px; }
.price-card li:before { content:none; }
.price-card button { border-radius:4px; font-size:13px; }
.pricing-note { font-size:12px; }
.contact-copy h2 { font-size:clamp(44px,5vw,70px); line-height:1.2; }
.contact-person { width:230px; }
.contact-qr { border-radius:0; box-shadow:none; }
.footer { border-top:1px solid var(--line); }
.footer .brand { gap:10px; }
.footer .brand img { width:40px; height:40px; }
.footer .brand b { font-size:23px; }
.footer .brand small { font-size:10px; letter-spacing:.03em; }
.back-top { border-radius:4px; width:44px; height:44px; }

dialog { border-radius:10px; }
dialog::backdrop { background:#092a27d9; backdrop-filter:none; }
.dialog-close { width:40px; height:40px; border-radius:5px; }
.media-modal .dialog-shell { padding-top:14px; }
.media-modal h2 { margin-top:-29px; margin-bottom:25px; padding-right:50px; }
.case-modal { width:970px; }
.case-modal-head { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; background:var(--page); padding:14px 22px; border-bottom:1px solid var(--line); z-index:1; font-size:13px; }
.case-modal-head .dialog-close { position:static; }
.case-modal-layout { display:grid; grid-template-columns:1.2fr 1fr; }
.case-modal-visual { background:#e3eae2; display:grid; place-items:center; min-height:360px; }
.case-modal-visual img { width:100%; max-height:600px; object-fit:contain; }
.case-modal-image-status { font-size:14px; padding:30px; text-align:center; }
.case-modal-info { padding:32px; }
.case-modal-info h2 { font-size:28px; margin-block:6px 18px; }
#caseModalIndustry,#caseModalSummary,#caseModalQrStatus { font-size:14px; color:var(--muted); }
.case-modal-access { margin-block:24px; min-height:80px; }
.case-modal-access img { width:155px; height:155px; object-fit:contain; margin-bottom:8px; background:white; }
.case-modal-note { font-size:11px; color:var(--muted); margin-top:15px; }

@media(min-width:1500px) { .hero-layout { padding-block:24px 30px; } }
@media(max-width:1050px) {
  .navigation { gap:24px; height:88px; }
  .brand b { font-size:27px; } .brand img { width:46px; height:46px; }
  .nav-links { gap:18px; } .nav-links a { font-size:12px; }
  .hero h1 { font-size:10.5vw; } .hero-lead { font-size:2.5vw; }
  .hero-actions { gap:24px; margin-top:44px; }
  .hero-actions .button-light { min-width:170px; font-size:20px; min-height:56px; padding:13px 24px; }
  .hero-consult { font-size:20px; }
  .product-frame img { height:53vw; }
  .product-carousel { --screen-height:53vw; }
  .section { padding-block:68px; }
  .services-layout { gap:40px; }
  .reviews-layout { gap:30px; } .review-main { padding-right:28px; }
  .review-bottom { flex-direction:column; align-items:start; }
  .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact-layout { grid-template-columns:1fr 240px; gap:40px; }
}
@media(max-width:800px) {
  .navigation { height:80px; }
  .nav-toggle { display:block; margin-left:auto; }
  .nav-links { display:none; position:absolute; left:0; right:0; top:80px; padding:16px 6.1% 24px; background:var(--hero); border-block:1px solid #ffffff26; box-shadow:0 12px 18px #0b493d20; }
  .nav-links.open { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
  .nav-links a { font-size:16px; padding:13px 0; }
  .hero-layout { gap:4%; }
  .hero-copy { padding-bottom:20px; }
  .hero-actions { gap:20px; }
  .hero-actions .button-light { min-width:136px; min-height:50px; font-size:17px; padding:13px 18px; }
  .hero-consult { font-size:17px; gap:0; } .hero-consult span { display:none; }
  .product-example figcaption { font-size:12px; }
  .reference-cases { gap:20px; } .project-image { height:30vw; }
  .project-caption p { font-size:13px; } .project-caption { padding-right:0; } .project h3 { font-size:18px; } .project-arrow { display:none; }
  .section-heading,.about-intro { display:block; }
  .section-description,.about-intro>p:not(.eyebrow) { margin-top:12px; }
  .services-layout { grid-template-columns:1fr 1.25fr; gap:30px; }
  .service-detail summary { font-size:22px; }
  .reviews-layout { grid-template-columns:1fr; }
  .review-main { border-right:0; padding:0; }
  .review-bottom { flex-direction:row; align-items:end; }
  .reviews-side { grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:30px; }
  .review-compact,.review-compact+.review-compact { padding-block:25px 0; border-top:1px solid var(--line); }
  .review-compact blockquote { font-size:19px; }
  .delivery-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; margin:0; }
  .delivery-steps li { border-left:0; border-top:1px solid var(--line); padding:22px 0 0; }
  .footer-top { flex-wrap:wrap; gap:24px; } .footer-links { order:3; flex-basis:100%; margin:0; justify-content:space-between; } .back-top { margin-left:auto; }
}
@media(max-width:600px) {
  .wrap { width:calc(100% - 40px); }
  .navigation { height:78px; } .brand { gap:10px; } .brand b { font-size:25px; } .brand img { width:42px; height:42px; }
  .nav-links { top:78px; padding-inline:20px; }
  .hero-layout { grid-template-columns:1fr; padding-block:24px 25px; gap:38px; }
  .hero-copy { padding:0; }
  .hero h1 { font-size:clamp(64px,18vw,104px); line-height:1.15; letter-spacing:-.045em; }
  .hero-lead { font-size:clamp(18px,4.7vw,24px); margin-top:22px; letter-spacing:0; }
  .hero-actions { margin-top:30px; gap:30px; }
  .hero-actions .button-light { min-width:154px; min-height:52px; font-size:18px; padding:13px 18px; }
  .hero-consult { font-size:18px; }
  .product-frame img { height:auto; width:min(67vw,300px); }
  .product-carousel { --screen-height:calc(min(67vw,300px) * 2.16425121); }
  .product-example figcaption { padding-top:10px; }
  .selected-work { padding-top:28px; }
  .case-heading { margin-bottom:20px; gap:20px; } h2 { font-size:30px; } .case-heading>a { font-size:13px; }
  .reference-cases { grid-template-columns:1fr; gap:28px; }
  .project-image { height:auto; aspect-ratio:1.5; }
  .project:nth-child(2) .project-image { aspect-ratio:1.2; }
  .project:nth-child(2) .project-image img { object-position:center 65%; }
  .project h3 { font-size:22px; } .project-caption p { font-size:14px; } .project-caption { padding-top:12px; }
  .project-arrow { display:block; opacity:1; transform:none; } .project-open { display:none; }
  .brand-proof { font-size:26px; padding-block:35px; text-align:left; }
  .brand-proof span { display:block; font:inherit; margin:0; }
  .section { padding-block:52px; }
  .section-heading { margin-bottom:28px; } .section-description { font-size:14px; }
  .services-layout { grid-template-columns:1fr; gap:30px; }
  .service-intro>p { margin-top:12px; font-size:14px; } .service-intro>.underlined-link { margin-top:16px; font-size:14px; }
  .service-detail summary { padding-block:19px; } .service-content>p { font-size:14px; }
  .review-main blockquote { font-size:23px; }
  .review-bottom { gap:15px; flex-wrap:wrap; margin-top:26px; }
  .reviews-side { grid-template-columns:1fr; gap:24px; } .review-compact blockquote { font-size:21px; }
  .about-gallery { grid-template-columns:1fr; gap:24px; } .about-secondary { padding-top:0; } .about-wide { grid-column:auto; } .about-wide img { aspect-ratio:1.5; }
  .delivery-steps { gap:28px 20px; } .delivery-steps h3 { font-size:19px; } .delivery-steps p { font-size:12px; }
  .pricing-grid { gap:14px; } .price-card { padding:22px 16px 16px; } .price-card h3 { font-size:19px; } .price-card .subtitle { font-size:11px; } .price-value { font-size:30px; margin-top:17px; } .price-card li { font-size:12px; }
  .contact-layout { grid-template-columns:1fr; gap:36px; } .contact-copy h2 { font-size:46px; } .contact-copy>p:not(.eyebrow) { font-size:15px; margin-top:20px; } .contact-person { justify-self:start; width:210px; }
  .footer-bottom { flex-direction:column; gap:6px; } .footer-links { gap:18px; font-size:12px; }
  .media-modal .dialog-shell { padding:14px 16px 22px; } .media-modal h2 { font-size:13px; }
  .case-modal-layout { grid-template-columns:1fr; } .case-modal-visual { min-height:180px; } .case-modal-visual img { max-height:270px; } .case-modal-info { padding:24px; } .case-modal-info h2 { font-size:25px; } .case-modal-head { padding:10px 16px; }
}
@media(max-width:360px) {
  .wrap { width:calc(100% - 32px); } .hero h1 { font-size:64px; } .hero-actions { gap:24px; } .hero-actions .button-light { min-width:136px; }
  .pricing-grid { grid-template-columns:1fr; } .price-card { padding:24px; } .brand-proof { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}