:root {
  --paper: #f7f4eb;
  --white: #fffdf7;
  --ink: #172e39;
  --deep: #193b49;
  --muted: #465c60;
  --accent: #a13f26;
  --line: #dcd8c9;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); }
[hidden] { display: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible, select:focus-visible { outline: 2px solid #ac512c; outline-offset: 4px; }
img { display: block; max-width: 100%; }
.shell { width: min(100% - 88px, 1232px); margin-inline: auto; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: .98; }
h2 { font-size: clamp(45px, 5vw, 72px); }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 13px; }
.button, .top-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 30px; font-size: 14px; font-weight: 700; }
.button { min-height: 46px; padding: 10px 17px; }
.primary, .top-cta { background: var(--deep); color: #fff; }
.primary:hover, .top-cta:hover { background: #28596a; }
.text-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.text-link:hover { color: var(--accent); }

.site-header { min-height: 78px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.site-brand { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 18px; font-weight: 700; }
.site-brand strong { color: #286379; }
.site-brand-mark { border-radius: 50%; background: white; object-fit: contain; width: 42px; height: 42px; }
.site-header nav { display: flex; gap: clamp(15px, 3vw, 38px); align-items: center; font-size: 14px; font-weight: 600; }
.site-header nav a:hover { color: var(--accent); }
.top-cta { min-height: 38px; padding: 7px 14px; }
.hero { display: grid; grid-template-columns: .89fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(36px, 6vw, 84px); }
.hero h1 { font-size: clamp(43px, 6.2vw, 94px); letter-spacing: -.027em; line-height: 1; }
.hero .intro { max-width: 350px; color: var(--muted); margin: 22px 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.hero-photo { position: relative; overflow: hidden; border-radius: 110px 6px 6px 6px; background: #d6c4a8; }
.hero-photo img { width: 100%; aspect-ratio: 1.12; object-fit: cover; }
.hero-photo figcaption { position: absolute; right: 10px; bottom: 10px; background: var(--white); padding: 2px 7px; border-radius: 3px; font-size: 10px; }

.collection { padding-block: 24px 76px; border-top: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 22px; margin-bottom: 25px; }
.section-head > p { max-width: 330px; color: var(--muted); }
.product-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 15px; }
.product-card { grid-column: span 2; overflow: hidden; border: 1px solid var(--line); background: var(--white); border-radius: 7px; }
.product-card:nth-child(-n+2) { grid-column: span 3; }
.product-photo { overflow: hidden; background: #e4e9e2; }
.product-photo img { width: 100%; height: clamp(125px, 15vw, 220px); object-fit: cover; object-position: 87% center; }
.product-card:nth-child(-n+2) img { height: clamp(150px, 20vw, 285px); }
.product-info { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px; }
.product-info h3 { font-size: clamp(30px, 3.1vw, 49px); }
.product-info p { font-size: 14px; color: var(--muted); margin-top: 7px; }
.product-info a { display: grid; place-items: center; flex: 0 0 43px; height: 43px; border: 1px solid #b8c3bf; border-radius: 50%; font-size: 19px; }
.product-info a:hover { background: var(--deep); color: #fff; }

.finder { color: #fff8e9; background: var(--deep); padding-block: clamp(36px, 7vw, 95px); }
.finder-inner { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(25px, 7vw, 100px); align-items: center; }
.finder-copy .eyebrow { color: #f0ba94; }
.finder-copy > p:last-child { margin-top: 15px; max-width: 350px; color: #dce7e7; }
.match-form { padding: clamp(17px, 3vw, 36px); background: var(--white); border-radius: 8px; color: var(--ink); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fields label { display: block; min-width: 0; font-size: 14px; font-weight: 700; }
.fields select { display: block; width: 100%; margin-top: 5px; padding: 10px 7px; border: 1px solid #a2b2ad; border-radius: 5px; background: white; color: var(--ink); font: inherit; }
.match-result { margin: 15px 0; padding: 9px 12px; background: #e9eee6; border-left: 3px solid #56776d; }
#match-title { font-weight: 700; }
#match-detail, .match-note { color: var(--muted); font-size: 13px; }
.match-button { background: var(--deep); color: #fff; }
.match-note { margin-top: 7px; }

.catalog { padding-block: clamp(40px, 7vw, 80px); }
.catalog-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; align-items: start; }
.catalog-group { border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.catalog-group summary { cursor: pointer; font-weight: 700; padding: 12px 14px; }
.catalog-group summary span { color: var(--muted); font-weight: 500; }
.catalog-group ul { list-style: none; padding: 0 14px; margin: 0; }
.catalog-group li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding: 10px 0; font-size: 13px; }
.catalog-group li a:hover, .catalog-source a:hover { text-decoration: underline; }
.catalog-group li a > span { text-align: right; }
.catalog-source { margin-top: 14px; font-size: 14px; }

.service-band { background: #e3eae6; border-radius: 7px; overflow: hidden; }
.service-inner { background: linear-gradient(90deg,#e3eae6 14%,#e3eae6cc 45%,transparent 75%), url(care-service.webp) right center / cover; }
.care-copy { max-width: 560px; padding: clamp(24px, 5vw, 62px); }
.care-copy h2 { font-size: clamp(42px, 4.5vw, 63px); }
.care-copy p:not(.eyebrow) { margin: 13px 0; max-width: 360px; }
.care-link { font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }

.recruitment { margin-block: clamp(35px, 7vw, 85px); background: #e5edf0; border-radius: 7px; overflow: hidden; }
.recruitment-heading { padding: clamp(24px, 4vw, 44px); border-bottom: 1px solid #bfced3; }
.recruitment-heading p { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 9px; }
.recruitment-heading em { color: #1e617e; }
.recruitment-body { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; }
.recruitment-body img { width: 100%; height: auto; }
.recruitment-details { padding: clamp(20px, 4vw, 48px); }
.recruitment-details ul { margin: 13px 0 0; list-style: none; padding: 0; }
.recruitment-details li { border-top: 1px solid #bfced3; padding: 8px 0; }
.recruitment-details li span { display: block; color: var(--muted); font-size: 14px; }
.recruitment-contact { padding: 15px clamp(20px, 4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; color: #fff; background: var(--deep); font-size: 14px; font-weight: 700; }
.recruitment-contact .button { background: #fff9ec; color: var(--ink); }
.recruitment-contact .button:hover { background: #eaf1eb; }

footer { background: #e6e5d9; border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; padding-block: 27px 75px; }
.footer-inner p { color: var(--muted); font-size: 13px; margin-top: 8px; }
.footer-inner > a { font-weight: 700; font-size: 14px; }
.whatsapp-float { position: fixed; z-index: 2; right: max(15px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; border: 1px solid #ffffffaf; border-radius: 30px; padding: 9px 13px; background: #224c40; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 3px 15px #172e3938; }
.whatsapp-float:hover { background: #183d33; }

@media (max-width: 850px) {
  .shell { width: calc(100% - 48px); }
  .hero { gap: 25px; }
  .hero h1 { font-size: clamp(40px, 6.5vw, 65px); }
  .hero-photo { border-top-left-radius: 70px; }
}
@media (max-width: 640px) {
  .shell { width: calc(100% - 32px); }
  .site-header { flex-wrap: wrap; padding-block: 9px; gap: 7px 12px; }
  .site-header nav { width: 100%; order: 3; justify-content: space-between; gap: 8px; font-size: 13px; }
  .site-brand-mark { width: 35px; height: 35px; }
  .top-cta { min-height: 34px; font-size: 13px; }
  .hero, .finder-inner, .recruitment-body, .catalog-groups { grid-template-columns: 1fr; }
  .hero { padding-block: 27px 35px; }
  .hero h1 { font-size: clamp(38px, 9vw, 58px); }
  .hero .intro { margin: 15px 0; }
  .hero-photo img { aspect-ratio: 1.32; }
  .section-head { flex-direction: column; align-items: start; gap: 9px; margin-bottom: 17px; }
  .collection { padding-bottom: 38px; }
  .product-grid { grid-template-columns: 1fr; gap: 12px; }
  .product-card, .product-card:nth-child(-n+2) { grid-column: auto; }
  .product-photo img, .product-card:nth-child(-n+2) img { height: clamp(125px, 39vw, 210px); }
  .fields { grid-template-columns: 1fr; }
  .service-inner { background-image: linear-gradient(90deg,#e3eae6 5%,#e3eae6e8 46%,#e3eae680), url(care-service.webp); }
  .care-copy { max-width: 310px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }