/* HUCE identity: quiet typography, architectural contrast, one family of solutions. */
:root {
  color-scheme: light;
  --background: #fafaf8;
  --foreground: #172125;
  --card: #fff;
  --card-strong: #fff;
  --primary: #172125;
  --primary-foreground: #fff;
  --secondary: #f0f2ef;
  --secondary-foreground: #263438;
  --muted-foreground: #606b6d;
  --accent: #256f69;
  --border: #dde2de;
  --ring: #21867d;
  --radius: .4rem;
  --radius-sm: .2rem;
  --radius-lg: .6rem;
  --shadow-soft: none;
  --font-display: "Hanken Grotesk", sans-serif;
  --font-site: "Hanken Grotesk", sans-serif;
  --font-mono: "Hanken Grotesk", sans-serif;
}
body { background: var(--background); font-weight: 400; -webkit-font-smoothing: antialiased; }
.container, .site-nav { width: min(1240px, calc(100% - 6rem)); max-width: 1240px; }
section[id] { scroll-margin-top: 6rem; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 5px; box-shadow: none; }
.skip-link { position: fixed; top: -6rem; left: 1rem; z-index: 100; padding: 1rem; background: #fff; color: #172125; }
.skip-link:focus { top: 1rem; }
.site-header { background: rgba(250,250,248,.96); border-bottom: 1px solid #e6e8e3; backdrop-filter: blur(16px); }
.site-nav { min-height: 5.5rem; gap: 1.8rem; }
.brand-mark { width: 128px; height: auto; overflow: visible; flex-shrink: 0; }
.site-brand:hover .brand-mark { transform: none; }
.site-links { gap: 1rem; font-size: .88rem; font-weight: 400; color: #384448; }
.site-links a { padding: .65rem .2rem; border-radius: 0; }
.site-links a:hover { color: #087970; }
.lang-switch { margin: 0; border: 0; background: transparent; border-radius: 0; padding: .5rem; min-width: auto; font-weight: 500; color: #53605f; }
.nav-action { font-size: .84rem; font-weight: 400; padding: .8rem 1rem; gap: 1.8rem; border-radius: 2px; }
.nav-action:hover { color: white; background: #334442; }
.btn-huce-primary, .btn-huce-secondary { font-weight: 500; font-size: .9rem; padding: .95rem 1.25rem; gap: 1.8rem; border-radius: 2px; }
.btn-huce-primary:hover { color: white; background: #334442; border-color: #334442; }
.btn-huce-secondary:hover { color: #172125; background: #e3e8e4; border-color: #acb6ae; }
.identity-hero { color: #fff; background: #111719 url('/images/huce-quiet-color.jpg') center center / cover no-repeat; position: relative; isolation: isolate; }
.identity-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,17,23,.25), rgba(7,17,23,.05) 56%, transparent), linear-gradient(0deg, rgba(7,17,23,.55), transparent 35%); }
.identity-hero-inner { min-height: 740px; padding-top: 5rem; padding-bottom: 1.8rem; display: flex; flex-direction: column; }
.hero-signature .brand-mark { width: min(470px, 75%); }
.hero-signature > p { margin: 1.5rem 0 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .31em; word-spacing: .65rem; color: #e0e6e6; }
.identity-hero-copy { margin-top: 3.6rem; max-width: 540px; }
.identity-hero-copy h1 { font-size: clamp(2.6rem, 4.2vw, 3.8rem); font-weight: 300; line-height: 1.1; letter-spacing: -.045em; margin: 0; }
.identity-hero-copy h1 span { color: #d0d8d8; }
.identity-hero-copy > p { margin: 1.4rem 0 0; color: #e1e5e5; font-size: 1.03rem; line-height: 1.7; max-width: 450px; }
.identity-hero .hero-actions { margin-top: 1.8rem; gap: 1.8rem; align-items: center; }
.identity-hero .btn-huce-primary, .booking-copy .btn-huce-primary { background: #f5f6f2; color: #172125; border-color: #f5f6f2; }
.identity-hero .btn-huce-primary:hover, .booking-copy .btn-huce-primary:hover { background: #dce7df; border-color: #dce7df; }
.hero-text-link { display: inline-flex; align-items: center; gap: 1.25rem; color: #fff; font-size: .9rem; text-decoration: none; }
.hero-text-link:hover { color: #dce7df; }
.hero-baseline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 3.6rem; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: #d4dcde; }
.hero-baseline a { font-size: 1.4rem; text-decoration: none; }
.hero-baseline > span:last-child { font-size: .6rem; }
.section { padding: 6rem 0; }
.section-kicker, .eyebrow { font-size: .66rem; color: #5f6d6d; font-weight: 500; letter-spacing: .2em; margin-bottom: 1.25rem; }
.section h2 { color: var(--foreground); font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.045em; font-weight: 400; line-height: 1.13; }
.section-heading { display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 5rem; margin-bottom: 3.5rem; }
.section-heading .section-lede { margin: 0; font-size: 1rem; line-height: 1.75; max-width: 430px; }
.family-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); }
.family-card { padding: 2rem 1.6rem 1.3rem; display: flex; flex-direction: column; text-decoration: none; background: #fff; transition: background 180ms ease; }
.family-card + .family-card { border-left: 1px solid var(--border); }
.family-card:hover { background: #f0f4f1; color: #172125; }
.solution-icon { height: 42px; width: 42px; display: block; flex-shrink: 0; color: var(--solution-color); }
.consulting { --solution-color: #1886ba; }
.booking { --solution-color: #328e85; }
.apps { --solution-color: #8052d0; }
.family-card h3 { margin: 1.8rem 0 .9rem; font-size: 1.28rem; letter-spacing: -.02em; font-weight: 500; }
.family-card h3 > span { display: block; font-size: .64rem; letter-spacing: .3em; margin-bottom: .5rem; font-weight: 500; }
.family-card p { font-size: .88rem; color: #606b6d; line-height: 1.6; margin-bottom: 2rem; }
.family-card-link { margin-top: auto; padding-top: 1rem; border-top: 1px solid #e9ece7; display: flex; align-items: center; justify-content: space-between; font-size: .7rem; color: #64716b; gap: .3rem; }
.family-card-link > span { color: #263438; font-size: 1rem; }
.booking-section { padding: 0; }
.booking-feature { display: grid; grid-template-columns: 1fr 1fr; background: #172b2c; color: #f4f8f5; overflow: hidden; }
.booking-copy { padding: 3.5rem; }
.booking-copy .section-kicker { color: #b4cdca; display: flex; align-items: center; font-size: .6rem; letter-spacing: .13em; }
.status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #86b4a5; margin: 0 .6rem 0 1.2rem; flex-shrink: 0; }
.product-name { display: flex; align-items: center; gap: .7rem; font-size: 1rem; margin: 2.5rem 0 1.2rem; }
.product-name .solution-icon { color: #a7cfc0; width: 28px; height: 28px; }
.booking-copy h2 { color: #f4f8f5; font-size: clamp(2rem, 3vw, 2.6rem); }
.preserve-lines { white-space: pre-line; }
.booking-copy > p:not(.section-kicker) { font-size: .95rem; line-height: 1.8; color: #b9cbca; margin: 1.5rem 0 2rem; }
.booking-copy .btn { font-size: .82rem; }
.booking-visual { display: flex; flex-direction: column; justify-content: center; padding: 3rem; background: radial-gradient(ellipse at 100% 0%, #ebeeea, transparent 70%), #dce4dc; }
.calendar-preview { background: #fcfdfa; color: #263f3c; border: 1px solid #fff; border-radius: 7px; padding: 1.25rem 1.4rem .8rem; box-shadow: 0 25px 50px -20px #56736866; transform: rotate(-3deg); }
.calendar-brand { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid #e6ebe3; font-size: .7rem; letter-spacing: .18em; }
.calendar-brand strong { letter-spacing: 0; font-weight: 400; border-left: 1px solid #c5d0c8; padding-left: .6rem; margin-left: .35rem; }
.calendar-avatar { background: #e8ece3; padding: .5rem; border-radius: 50%; font-size: .55rem; letter-spacing: 0; }
.calendar-heading { padding: 1.5rem 0 1rem; }
.calendar-heading h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.04em; margin-bottom: .45rem; }
.calendar-heading p { font-size: .65rem; color: #778780; margin: 0; }
.calendar-days { display: grid; grid-template-columns: repeat(5, 1fr); margin-left: 2.5rem; gap: .5rem; }
.calendar-days > div { text-align: center; padding: .5rem 0; border-radius: 4px; }
.calendar-days span { display: block; font-size: .56rem; color: #71847a; margin-bottom: .2rem; }
.calendar-days strong { font-size: .8rem; font-weight: 500; }
.calendar-days .selected { background: #244f47; color: white; }
.calendar-days .selected span { color: #c9dbcd; }
.calendar-schedule { position: relative; height: 185px; margin-top: 1rem; background: repeating-linear-gradient(0deg, transparent 0, transparent 60px, #e7ece6 60px, #e7ece6 61px); }
.calendar-time { position: absolute; left: 0; font-size: .5rem; color: #83928a; }
.time-9 { top: 3px; }.time-10 { top: 65px; }.time-11 { top: 127px; }
.calendar-event { position: absolute; padding: .65rem .6rem; border-radius: 3px; border-left: 2px solid #6c9b88; min-height: 47px; }
.calendar-event strong, .calendar-event span { display: block; font-size: .55rem; font-weight: 500; }
.calendar-event span { font-size: .48rem; margin-top: .22rem; font-weight: 400; }
.event-one { top: 0; left: 15%; width: 53%; background: #dfece4; }
.event-two { top: 62px; left: 36%; width: 57%; background: #e8eee2; border-color: #a2b589; }
.event-three { top: 124px; left: 15%; width: 60%; background: #ece8f2; border-color: #aaa0c2; }
.calendar-foot { border-top: 1px solid #e6ebe3; padding: .65rem 0 0; font-size: .56rem; display: flex; align-items: center; color: #657a6d; }
.calendar-foot .status-dot { margin-left: 0; }
.concept-caption { text-align: center; margin: 1.7rem 0 0; font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; color: #5d7066; }
.arrow-link { display: inline-flex; gap: 2rem; margin-top: 1.5rem; font-size: .9rem; color: #254e46; font-weight: 500; }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.service-grid { gap: 2rem; }
.service-card { padding: 1.5rem 0 0; border: 0; border-top: 1px solid #cdd5ce; min-height: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.service-index { display: block; margin-bottom: 2rem; color: #6c7974; font-weight: 400; font-size: .7rem; }
.service-card h3 { font-weight: 500; font-size: 1.1rem; letter-spacing: -.02em; }
.service-card p { font-size: .9rem; line-height: 1.7; }
.apps-section { background: #edf0ea; }
.apps-section .preview-grid { align-items: center; }
.mini-product-card { background: #fafbf8; border: 1px solid #d9e1d8; box-shadow: none; border-radius: 2px; padding: 2.5rem; transition: border-color 180ms ease; }
.mini-product-card:hover { border-color: #658e71; }
.mini-product-card::after { display: none; }
.mini-product-card > span:first-child { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.mini-product-card strong { font-weight: 400; font-size: 2rem; margin: 1.5rem 0 .8rem; }
.mini-product-card small { font-size: .95rem; max-width: 330px; padding-right: 1rem; }
.mini-product-card .product-arrow { position: absolute; bottom: 2rem; right: 2rem; font-size: 1.4rem; color: #314d3a; }
.about-grid { display: grid; grid-template-columns: .7fr 1fr; align-items: center; gap: 6rem; max-width: 1040px; }
.about-portrait { aspect-ratio: 4/4.5; background: #e3e6df; overflow: hidden; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: grayscale(1); }
.about-copy .section-lede { font-size: 1rem; line-height: 1.8; }
.founder-signature { display: flex; flex-direction: column; gap: .3rem; margin-top: 2rem; }
.founder-signature strong { font-size: 1.1rem; font-weight: 500; }
.founder-signature span, .founder-experience { color: #68746f; font-size: .8rem; }
.founder-experience { margin: 1.4rem 0 0; padding-top: 1.4rem; border-top: 1px solid #dce2d9; }
.brand-contact { background: #e7ece5; text-align: center; }
.brand-contact h2 { margin: 0 auto; font-size: clamp(2.2rem, 4.4vw, 4rem); }
.brand-contact p:not(.section-kicker) { margin: 1.5rem auto 2rem; color: #627266; }
.brand-contact a { font-size: clamp(1.2rem, 2.8vw, 2rem); font-weight: 300; text-decoration: none; border-bottom: 1px solid #9caba0; padding-bottom: .4rem; }
.brand-contact a span { margin-left: 1.2rem; }
.site-footer { background: #142024; color: #aebcbb; border: 0; }
.footer-brand-row { padding: 3.5rem 0; display: flex; align-items: center; gap: 3rem; }
.footer-brand { color: #fff; }
.footer-brand .brand-mark { width: 175px; }
.footer-brand-row p { margin: 0; padding-left: 3rem; border-left: 1px solid #70817f; font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; line-height: 1.8; color: #e3e8e6; }
.footer-brand-row > span { margin-left: auto; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; }
.footer-inner { border-top: 1px solid #ffffff20; min-height: 4rem; font-size: .72rem; }
.site-footer a:hover { color: white; }
/* Existing product and legal pages use the same identity tokens. */
.subpage-hero h1 { font-size: clamp(2.5rem, 5.5vw, 5rem); font-weight: 400; line-height: 1.04; letter-spacing: -.045em; }
.subpage-hero::before { display: none; }
.subpage-lede { color: #63716a; font-size: 1.1rem; }
.product-card, .ui-card, .policy-summary-card, .contact-band { background: #fff; box-shadow: none; backdrop-filter: none; border-color: var(--border); }
.product-card-copy h2, .policy-card h2, .policy-copy-card h2, .policy-promises h2 { font-weight: 400; letter-spacing: -.035em; }
.policy-summary-card p, .check-list li, .metric-list li, .chip-cloud span { color: #58665e; }
.ui-badge { background: #e8efea; color: #355c46; border-color: #d8e5da; font-weight: 500; }
.ui-badge.muted { color: #606d66; background: #f0f2ee; }
.phone-frame { box-shadow: 0 12px 40px #233b3520; }
.product-tagline { color: #326247; font-weight: 400; }
.products-hero + .booking-section { padding-bottom: 5rem; }
@media (min-width: 1600px) { .identity-hero-inner { min-height: 800px; padding-top: 6rem; } }
@media (max-width: 1100px) {
  .container, .site-nav { width: calc(100% - 4rem); }
  .site-nav { gap: 1rem; }.site-links { gap: .7rem; }
  .family-card { padding: 1.5rem 1rem 1rem; }
  .family-card h3 { font-size: 1.15rem; }
  .booking-copy { padding: 2.5rem; }.booking-visual { padding: 2rem; }
  .section-heading { gap: 3rem; }.about-grid { gap: 3rem; }
  .footer-brand-row { gap: 2rem; }.footer-brand-row p { padding-left: 2rem; }
}
@media (max-width: 800px) {
  .container, .site-nav { width: calc(100% - 3rem); }
  .site-nav { min-height: 4.5rem; }.site-links { gap: .6rem; font-size: .8rem; }.nav-action { display: none; }
  .site-brand .brand-mark { width: 108px; }.lang-switch { font-size: .7rem; }
  .identity-hero-inner { min-height: 720px; padding-top: 4rem; }
  .identity-hero { background-position: 60% center; }
  .identity-hero::before { background: linear-gradient(90deg, rgba(7,17,23,.45), rgba(7,17,23,.15)), linear-gradient(0deg, #111719, transparent 45%); }
  .section { padding: 4.5rem 0; }.booking-section { padding: 0; }
  .section-heading { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
  .section-heading .section-lede { max-width: 570px; }
  .family-card p { min-height: 2.8rem; }
  .booking-feature { grid-template-columns: 1fr; }.booking-copy { padding: 3rem; }.booking-visual { padding: 3rem 4rem 2rem; }
  .calendar-preview { max-width: 430px; width: 100%; align-self: center; }
  .hero-actions, .btn-huce-primary, .btn-huce-secondary { width: auto; }
  .service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.service-card { min-height: auto; }
  .about-grid { grid-template-columns: .7fr 1fr; gap: 2rem; }.about-portrait { aspect-ratio: 3/4; }
  .footer-brand-row { flex-wrap: wrap; }.footer-brand-row > span { display: none; }
  .footer-inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 1.5rem 0; }
}
@media (max-width: 540px) {
  .container, .site-nav { width: calc(100% - 2.5rem); }
  .site-nav { flex-wrap: wrap; gap: .4rem 1rem; padding: 1rem 0 .7rem; }
  .site-brand { margin-right: auto; }.site-links { order: 3; width: 100%; justify-content: space-between; margin: 0; }.site-links a { padding: .5rem 0 .2rem; }.site-links a:first-child { display: inline-block; }
  .identity-hero-inner { min-height: 710px; padding-top: 3.5rem; padding-bottom: 1.4rem; }
  .hero-signature .brand-mark { width: 100%; max-width: 330px; }
  .hero-signature > p { font-size: .48rem; letter-spacing: .2em; word-spacing: .15rem; margin-top: 1rem; }
  .identity-hero-copy { margin-top: 3.4rem; }
  .identity-hero-copy h1 { font-size: 2.8rem; }
  .identity-hero-copy > p { font-size: .95rem; }
  .identity-hero .hero-actions { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
  .hero-baseline { padding-top: 2.5rem; font-size: .5rem; }.hero-baseline > span:last-child { display: none; }
  .family-grid { grid-template-columns: 1fr; }
  .family-card { padding: 1.5rem; }
  .family-card + .family-card { border-left: 0; border-top: 1px solid var(--border); }
  .family-card p { min-height: 0; margin-bottom: 1.5rem; }
  .family-card h3 { font-size: 1.25rem; }.family-card p { font-size: .82rem; }
  .booking-copy { padding: 2rem 1.5rem; }.booking-copy .section-kicker { font-size: .5rem; }
  .booking-copy h2 { font-size: 2rem; }.booking-copy .btn { font-size: .75rem; gap: .75rem; padding: .9rem; }
  .booking-visual { padding: 2rem 1.25rem 1.5rem; }.calendar-preview { padding: 1rem; transform: rotate(-2deg); }
  .calendar-heading h3 { font-size: 1.1rem; }.concept-caption { font-size: .48rem; }
  .service-grid { grid-template-columns: 1fr; gap: 2rem; }.service-index { margin-bottom: 1.2rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }.about-portrait { max-width: 320px; aspect-ratio: 4/4.5; }
  .mini-product-card { padding: 1.75rem; }.mini-product-card strong { font-size: 1.7rem; }
  .brand-contact a span { margin-left: .6rem; }.brand-contact p:not(.section-kicker) { font-size: .9rem; }
  .footer-brand-row { padding: 2.5rem 0; gap: 1.5rem; }.footer-brand .brand-mark { width: 110px; }.footer-brand-row p { font-size: .53rem; padding-left: 1.5rem; letter-spacing: .12em; }
  .footer-inner { gap: 1rem 1.4rem; justify-content: flex-start; font-size: .65rem; }.footer-inner > span { flex-basis: 100%; }
  section[id] { scroll-margin-top: 8rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* App Store assets are shown at their original aspect ratio, without a mock phone. */
.app-icon { display: block; width: 96px; height: 96px; border-radius: 22px; margin: 0 0 1.5rem; box-shadow: 0 8px 24px #17212512; }
.store-summary { white-space: pre-line; }
.app-store-link { margin-top: 1.75rem; }
.app-hero-screenshot { margin: 0; justify-self: center; width: min(100%, 280px); }
.app-hero-screenshot img, .app-screenshot-gallery img { display: block; width: 100%; height: auto; border: 1px solid #d9dfdb; border-radius: 24px; box-shadow: 0 18px 45px #17212514; }
.app-hero-screenshot figcaption { text-align: center; margin-top: 1rem; font-size: .72rem; color: var(--muted-foreground); }
.product-detail-hero .product-detail-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; }
.app-listing-section { background: #edf0ea; }
.app-listing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.app-feature-list li { padding-top: 1.1rem; padding-bottom: 1.1rem; font-size: 1.05rem; }
.app-feature-list li::before { top: 1.65rem; }
.app-screenshot-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 5vw, 4rem); max-width: 960px; margin: 3rem auto 0; }
.app-screenshot-gallery figure { margin: 0; min-width: 0; }
.app-screenshot-gallery a { display: block; border-radius: 24px; }
.app-screenshot-gallery figcaption { margin-top: 1.2rem; color: var(--muted-foreground); font-size: .9rem; text-align: center; }
.product-card-icon { width: min(100%, 190px); height: auto; justify-self: center; border-radius: 22%; }
@media (max-width: 800px) {
  .product-detail-hero .product-detail-grid, .app-listing-grid { grid-template-columns: 1fr; }
  .app-listing-grid { gap: 2rem; }
  .app-screenshot-gallery { gap: 1rem; }
  .app-screenshot-gallery img, .app-screenshot-gallery a { border-radius: 14px; }
}
@media (max-width: 540px) {
  .app-screenshot-gallery { grid-template-columns: 1fr; max-width: 300px; gap: 2.5rem; }
  .app-icon { width: 80px; height: 80px; border-radius: 18px; }
  .app-hero-screenshot { width: min(100%, 280px); }
}