/* ============================================================
   index.html — page-specific styles (top page only)
   Shared design system lives in assets/css/common.css
   ============================================================ */
/* ============================================================
   FV
   ============================================================ */
.fv{
  position:relative;
  min-height:clamp(560px,82vh,920px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#8a8578;
}
.fv-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;
}
.fv-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,18,10,.15) 0%, rgba(20,18,10,.35) 55%, rgba(20,18,10,.72) 100%);
}
.fv-inner{
  position:relative;z-index:1;
  color:var(--white);
  padding:clamp(24px,4vw,64px) clamp(20px,5vw,64px) clamp(32px,5vw,64px);
  width:100%;
}
.fv-inner .label{color:var(--white);opacity:.9;margin-bottom:.9em;}
.fv-inner h1{
  font-size:var(--fs-h1);
  font-weight:700;
  line-height:1.3;
  margin-bottom:1em;
}
.fv-lead{font-size:var(--fs-body);margin-bottom:1.6em;max-width:32em;opacity:.95;}
.fv-ctas{display:flex;gap:14px;flex-wrap:wrap;}


/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(260px,38%);
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
.about-body p{font-size:var(--fs-body);max-width:36em;margin-top:1em;}
.about-body p:first-of-type{margin-top:0;}
.about-media{position:relative;}
.about-media .frame-offset{
  position:absolute;right:-14px;bottom:-14px;top:26px;left:26px;
  background:var(--yellow);z-index:0;
}
.about-media img{position:relative;z-index:1;width:100%;aspect-ratio:4/3;object-fit:cover;}


/* ============================================================
   WHY CRIT LAB
   ============================================================ */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.why-item{
  padding:0 clamp(16px,2.4vw,40px);
  border-left:1px solid rgba(0,5,1,.15);
}
.why-item:first-child{padding-left:0;border-left:none;}
.why-num{font-family:"Poppins",sans-serif;font-weight:700;font-size:var(--fs-num);color:var(--blue-text);margin-bottom:.3em;}
.why-item .label{display:block;margin-bottom:.9em;}
.why-item h3{font-size:1.35rem;font-weight:700;margin-bottom:.7em;}
.why-item p{font-size:.95rem;}


/* ============================================================
   PRICE
   ============================================================ */
.price-head{text-align:center;margin-bottom:clamp(28px,4vw,56px);}
.price-head .label{display:block;margin-bottom:.6em;}
.price-head h2{font-size:var(--fs-h2);font-weight:700;}
.price-cards{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,2vw,28px);
  flex-wrap:wrap;
}
.price-card{
  background:var(--white);
  width:min(320px,100%);
  overflow:hidden;
  border-radius:16px;
}
.price-card-head{padding:16px;text-align:center;font-weight:700;color:var(--text);}
.plan-weekday .price-card-head{background:var(--yellow);}
.plan-weekend .price-card-head{background:var(--blue);color:var(--white);}
.plan-option .price-card-head{background:var(--yellow);}
.price-card-body{padding:clamp(20px,3vw,32px) 20px;text-align:center;}
.price-row{padding:10px 0;}
.price-row + .price-row{border-top:1px dashed rgba(0,5,1,.25);}
.price-amount{font-family:"Poppins",sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.1rem);}
.price-unit{font-size:.85rem;font-weight:500;margin-left:.2em;}
.price-plus{font-size:1.6rem;font-weight:700;color:var(--text);}
.price-card-body .price-note{font-size:.82rem;margin-top:1em;opacity:.8;}
.price-caption{text-align:center;font-size:.85rem;line-height:1.9;margin-top:clamp(24px,3vw,40px);opacity:.85;}
.price-cta{display:flex;justify-content:center;margin-top:32px;}


/* ============================================================
   USE CASE
   ============================================================ */
.usecase-scroll-hint{display:none;font-size:.78rem;opacity:.6;margin-bottom:16px;}
.usecase-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
}
.usecase-card{
  position:relative;
  aspect-ratio:2.68 / 1;
  overflow:hidden;
  color:var(--white);
}
.usecase-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);
  transition:filter .5s cubic-bezier(.22,1,.36,1);
}
.usecase-card:hover img,
.usecase-card:focus-visible img{filter:grayscale(0);}
.usecase-card .scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,18,10,.08) 0%, rgba(20,18,10,.2) 45%, rgba(20,18,10,.72) 100%);
}
.usecase-body{
  position:relative;z-index:1;
  height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:20px;
}
.usecase-body h3{font-size:clamp(1.1rem,1.6vw,1.5rem);font-weight:700;margin-bottom:.6em;}
.usecase-body p{font-size:.85rem;opacity:.95;}
.usecase-body .soon{display:block;font-size:.72rem;margin-top:.6em;opacity:.75;font-style:italic;}
.usecase-card{cursor:pointer;transition:opacity var(--motion-smooth);text-decoration:none !important;}
.usecase-card:hover,.usecase-card:focus-visible,.usecase-card:visited{text-decoration:none !important;}
.usecase-card .usecase-body,.usecase-card .usecase-body *{text-decoration:none !important;}
.usecase-card:hover,.usecase-card:focus-visible{color:var(--white);}
.usecase-card:hover .usecase-body h3,.usecase-card:hover .usecase-body p,.usecase-card:focus-visible .usecase-body h3,.usecase-card:focus-visible .usecase-body p{text-decoration:none !important;}


/* ============================================================
   FACILITY (gallery + spec list)
   ============================================================ */
.facility-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,20px);
  width:100%;
  margin:0 0 clamp(40px,5vw,64px);
}
.g-item{position:relative;overflow:hidden;aspect-ratio:1 / 1;border-radius:18px;}
@media(max-width:767px){.facility-gallery .g-item{border-radius:14px;}}
.g-item img{width:100%;height:100%;object-fit:cover;}

.facility-specs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 clamp(24px,4vw,56px);
}
.spec-item{padding:16px 0;border-top:1px dashed rgba(0,5,1,.25);}
.spec-item:nth-child(1),.spec-item:nth-child(2){border-top:none;padding-top:0;}
.spec-item h3{font-weight:700;font-size:1.02rem;margin-bottom:.5em;}
.spec-item p{font-size:.9rem;}
.tag-check{
  display:inline-block;font-size:.68rem;border:1px dashed var(--blue);color:var(--blue-text);
  padding:1px 8px;margin-left:8px;border-radius:3px;vertical-align:middle;
}
.facility-cta{display:flex;justify-content:flex-start;margin-top:32px;}

/* ============================================================

   ACCESS
   ============================================================ */
.access-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.access-block + .access-block{margin-top:1.6em;}
.access-addr{font-size:var(--fs-body);line-height:1.9;margin-bottom:1.6em;}
.access-row{
  display:flex;justify-content:space-between;gap:12px;
  padding:14px 0;border-top:1px solid rgba(0,5,1,.12);
  font-size:.95rem;
}
.access-row:first-of-type{border-top:1px solid rgba(0,5,1,.12);}
.access-row .time{opacity:.7;flex-shrink:0;}
.access-tel a{color:var(--blue-text);font-weight:700;font-size:1.2rem;font-family:"Poppins",sans-serif;}
.access-tel{margin-top:18px;}
.access-map-img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid rgba(0,5,1,.08);}
.access-map-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:16px;
  font-size:.92rem;font-weight:700;color:var(--blue-text);
  transition:opacity var(--motion-smooth);
}
.access-map-link:hover{opacity:.75;color:var(--blue-text);}


/* ============================================================
   BLOG
   ============================================================ */
.blog-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,32px);
}
.blog-card{display:block;}
.blog-thumb{
  aspect-ratio:16/10;
  background:repeating-linear-gradient(45deg, rgba(0,5,1,.06) 0 10px, transparent 10px 20px);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;color:#9a9a8f;text-align:center;
  margin-bottom:16px;
}
.blog-meta{display:flex;gap:10px;align-items:center;margin-bottom:.6em;font-size:.78rem;}
.blog-meta .date{opacity:.6;}
.blog-meta .cat{border:1px solid rgba(0,5,1,.25);border-radius:var(--radius-pill);padding:2px 12px;}
.blog-title{font-weight:700;font-size:.98rem;line-height:1.6;}
.blog-cta{display:flex;justify-content:flex-start;margin-top:32px;}


@media (max-width:1024px){
  .fv{min-height:auto;}
  .fv-img{aspect-ratio:2/3;position:static;object-position:center;}
  .fv-scrim{position:absolute;}
  .fv{display:block;}
  .fv-inner{padding:28px 20px 40px;}
  .fv-ctas{flex-direction:column;}
  .fv-ctas .btn{width:100%;}

  .about-grid{grid-template-columns:1fr;}
  .about-media{order:2;margin-top:8px;}
  .about-body{order:1;}

  .why-grid{grid-template-columns:1fr;}
  .why-item{border-left:none;border-top:1px solid rgba(0,5,1,.15);padding:32px 0 0;}
  .why-item:first-child{border-top:none;padding-top:0;}
  .why-item + .why-item{margin-top:32px;}

  .price-cards{flex-direction:column;}
  .price-card{width:100%;}
  .price-plus-wrap{display:flex;justify-content:center;}

  .usecase-scroll-hint{display:none;}
  .usecase-grid{
    grid-template-columns:1fr;
    gap:0;
    margin:0 calc(var(--section-x) * -1);
  }
  .usecase-card{aspect-ratio:2.45 / 1;}
  .usecase-card img{filter:none;object-position:center center;}

  .facility-gallery{grid-template-columns:1fr;}
  .facility-specs{grid-template-columns:1fr;}
  .spec-item{border-top:1px dashed rgba(0,5,1,.25) !important;padding-top:16px !important;}
  .spec-item:first-child{border-top:none !important;padding-top:0 !important;}

  .access-grid{grid-template-columns:1fr;}

  .blog-list{grid-template-columns:1fr;}
}


.blog-thumb-image{padding:0;overflow:hidden;}
.blog-thumb-image img{width:100%;height:100%;object-fit:cover;}


/* ============================================================
   v0.4.9 — top page additions from approved Claude Design
   ============================================================ */

/* FV bottom strip — two ways to use Crit Lab */
.fv-ways{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(0,5,1,.14);}
.fv-way{display:flex;align-items:center;gap:16px;padding:22px clamp(20px,3vw,40px);background:var(--bg);text-decoration:none!important;color:var(--text);transition:background-color .2s;}
.fv-way:hover,.fv-way:focus-visible{background:#fffdf3;text-decoration:none!important;}
.fv-way-ic{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--yellow);}
.fv-way-ic svg{width:26px;height:26px;}
.fv-way.is-service .fv-way-ic{background:var(--blue);}
.fv-way-tx{min-width:0;}
.fv-way-tx .en{display:block;font-family:"Poppins",sans-serif;font-size:.68rem;letter-spacing:.18em;font-weight:600;color:var(--blue-text);}
.fv-way.is-service .fv-way-tx .en{color:#8a6f00;}
.fv-way-tx .ttl{display:block;margin-top:4px;font-size:1.08rem;font-weight:700;line-height:1.5;}
.fv-way-tx .sub{display:block;margin-top:3px;font-size:.83rem;color:#55554e;line-height:1.6;}
.fv-way-ar{flex:0 0 auto;margin-left:auto;font-size:.62rem;color:var(--blue-text);}

/* RENTAL STUDIO */
.rental{max-width:none;padding:clamp(50px,6vw,96px) 0;}
.rental-in{max-width:var(--content-max);margin:0 auto;padding:0 var(--section-x);}
.rental-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(22px,3.4vw,64px);align-items:end;}
.rental-head .label{display:block;}
.rental-head h2{font-size:var(--fs-h2);font-weight:700;margin:.45em 0 0;}
.rental-sub{display:inline-block;margin-top:14px;padding:5px 14px;border-radius:var(--radius-pill);background:var(--yellow);font-size:.84rem;font-weight:700;}
.rental-lead{font-size:var(--fs-body);line-height:2;}
/* Rental studio: 3-photo rounded gallery (v0.5.48) */
.rental-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,24px);margin:clamp(30px,3.6vw,52px) 0 0;}
.rental-photo-item{margin:0;min-width:0;border-radius:clamp(14px,1.5vw,22px);overflow:hidden;background:#e7e4d8;}
.rental-photo-item img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;}
@media(max-width:760px){.rental-photo-grid{grid-template-columns:1fr;gap:14px;}.rental-photo-item{border-radius:18px;}.rental-photo-item img{aspect-ratio:16/10;}}
.rental-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);margin-top:clamp(36px,4.2vw,60px);}
.rental-feat{padding-top:22px;border-top:3px solid var(--yellow);}
.rental-feat-no{font-family:"Poppins",sans-serif;font-weight:700;font-size:clamp(2.2rem,3.4vw,3rem);line-height:1;color:var(--blue-text);}
.rental-feat h3{margin:12px 0 8px;font-size:1.14rem;font-weight:700;line-height:1.5;}
.rental-feat p{font-size:.9rem;line-height:1.85;color:#4e4e46;}
.rental-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,56px);align-items:end;margin-top:clamp(38px,4.4vw,64px);padding-top:clamp(26px,3vw,40px);border-top:1px solid rgba(0,5,1,.16);}
.rental-uses-ttl{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:700;margin:0 0 24px;}
.rental-uses-ttl::before{content:"";width:8px;height:19px;border-radius:2px;background:var(--yellow);}
.rental-chips{display:flex;flex-wrap:wrap;gap:9px;}
.rental-chips span{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--white);border:1px solid #ddd8c2;border-radius:var(--radius-pill);font-size:.88rem;font-weight:500;}
.rental-chips span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow);}
.rental-uses-note{margin-top:12px;font-size:.84rem;color:#5d5a51;line-height:1.85;}
.rental-ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:16px 26px;}
.rental-ctas .txtlink{font-size:.95rem;font-weight:700;color:var(--blue-text);display:inline-flex;align-items:center;gap:7px;text-decoration:none!important;}
.rental-ctas .txtlink:hover{opacity:.75;text-decoration:none!important;}

/* PHOTO SERVICE */
.service{background:#4E5252;color:var(--white);max-width:none;padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(56px,7vw,110px);}
.service-inner{max-width:var(--content-max);margin:0 auto;padding:0 var(--section-x);}
.service-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(24px,3.4vw,64px);align-items:end;padding-bottom:clamp(28px,3.2vw,44px);border-bottom:1px solid rgba(255,255,255,.22);}
.service-head .label{color:var(--yellow);}
.service-head h2{font-size:var(--fs-h2);font-weight:700;margin:.45em 0 0;}
.service-sub{display:inline-block;margin-top:14px;padding:5px 14px;border-radius:var(--radius-pill);background:var(--blue);color:var(--white);font-size:.84rem;font-weight:700;}
.service-head p{font-size:var(--fs-body);line-height:2;color:rgba(255,255,255,.86);}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(32px,3.8vw,52px);}
.service-card{display:block;text-decoration:none!important;color:var(--white);}
.service-card:visited{color:var(--white);}
.service-card-media{position:relative;overflow:hidden;border-radius:14px;background:#3e4242;}
.service-card-media img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s ease;}
.service-card:hover .service-card-media img,.service-card:focus-visible .service-card-media img{transform:scale(1.04);}
.service-no{position:absolute;left:0;top:0;display:grid;place-items:center;width:50px;height:50px;background:var(--yellow);color:var(--text);font-family:"Poppins",sans-serif;font-weight:700;font-size:1.05rem;}
.service-card h3{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0;font-size:1.12rem;font-weight:700;line-height:1.55;}
.service-card h3 .arrow{flex:0 0 auto;font-size:.62rem;color:var(--yellow);}
.service-card:hover h3{text-decoration:underline;text-underline-offset:5px;}
.service-card p{margin-top:9px;font-size:.9rem;line-height:1.85;color:rgba(255,255,255,.74);}
.service-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:clamp(34px,4vw,56px);padding-top:clamp(26px,3vw,40px);border-top:1px solid rgba(255,255,255,.22);}
.service-foot p{font-size:.92rem;line-height:1.9;color:rgba(255,255,255,.78);max-width:34em;}
.service-foot .btn{margin-left:auto;}

@media (max-width:1200px){
  .rental-feats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:1024px){
  .fv-ways{grid-template-columns:1fr;}
  .rental-head{grid-template-columns:1fr;align-items:start;}
  .rental-foot{grid-template-columns:1fr;align-items:start;}
  .rental-ctas{justify-content:flex-start;}
  .service-head{grid-template-columns:1fr;align-items:start;}
  .service-foot .btn{margin-left:0;}
}
@media (max-width:640px){
  .rental-feats{grid-template-columns:1fr;gap:0;}
  .rental-feat{margin-top:18px;}
  .rental-ctas .btn{width:100%;}
  .service-grid{grid-template-columns:1fr;}
  .service-card-media{border-radius:10px;}
  .service-foot .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){.service-card-media img{transition:none;}}

/* v0.5.13 — PHOTO SERVICE background image only (top page) */
body.critlab-template-home #photo-service.service{
  background-color:#383c3c;
  background-image:linear-gradient(rgba(18,23,25,.18),rgba(18,23,25,.18)),url("../top/photo-service/photo-service-bg-v0513.webp");
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
}
@media (max-width:1024px){
  body.critlab-template-home #photo-service.service{
    background-position:center 14%;
  }
}
@media (max-width:640px){
  body.critlab-template-home #photo-service.service{
    background-position:center 10%;
  }
}

/* v0.5.43 — rental footer: aligned taxonomy and single CTA */
body.critlab-template-home .rental-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,4vw,60px);align-items:center;}
body.critlab-template-home .rental-foot-content{min-width:0;}
body.critlab-template-home .rental-uses-ttl{margin-top:0;}
body.critlab-template-home .rental-chips{gap:10px;max-width:100%;}
body.critlab-template-home .rental-uses-note{margin-top:18px;max-width:60ch;}
body.critlab-template-home .rental-ctas{align-self:center;justify-content:flex-end;flex:0 0 auto;}
body.critlab-template-home .rental-ctas .btn{white-space:nowrap;min-height:56px;display:inline-flex;align-items:center;justify-content:center;}
body.critlab-template-home .critlab-tax-guidance{font-size:.9rem;line-height:1.7;color:#544f42;margin:0 0 16px;}
@media(max-width:1100px){body.critlab-template-home .rental-foot{grid-template-columns:1fr;row-gap:24px;}body.critlab-template-home .rental-ctas{justify-content:flex-start;}}
@media(max-width:640px){body.critlab-template-home .rental-ctas .btn{width:100%;}}
/* v0.5.43 — six use case chips, regular 3 × 2 grid */
body.critlab-template-home .rental-chips{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  max-width:710px;
}
body.critlab-template-home .rental-chips span{justify-content:center;min-height:46px;white-space:nowrap;}
@media(max-width:720px){
  body.critlab-template-home .rental-chips{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;}
  body.critlab-template-home .rental-chips span{padding-inline:9px;}
}
@media(max-width:360px){
  body.critlab-template-home .rental-chips span{font-size:.78rem;}
}