/* Design 03 pattern-page styles — rebuilt 2026-07-18 for the canonical page
   skeletons (templates/README.md "Page skeletons"). Two layers:
   1. the arp- flowing framework shared by the four skeleton pages
      (location / services / single-service / occasion) + its mobile rules.
      These pages FLOW (no fixed .cv canvas) — the old canvas-cut pattern
      pages were replaced by full skeleton builds; each page also links its
      own css/<page>.css for its centerpiece.
   2. the form-section mobile layer (same rules as css/form.css, kept here so
      pattern pages need only patterns.css; index links css/form.css instead).
   index.html NEVER links this file. */

/* ===========================================================================
   1. FLOWING PATTERN-PAGE FRAMEWORK (arp-)
   =========================================================================== */

.arp-sec{padding:96px 0;}
.arp-wrap{width:1200px;margin:0 auto;position:relative;}
.arp-head{max-width:720px;}
.arp-center{margin-left:auto;margin-right:auto;text-align:center;}

.arp-kicker{display:block;font-family:var(--f-label);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(30,29,26,.62);margin-bottom:18px;}
.arp-h1{font-family:var(--f-title);font-weight:400;font-size:72px;line-height:1.08;color:var(--ink);}
.arp-h2{font-family:var(--f-title);font-weight:400;font-size:46px;line-height:1.12;color:var(--ink);}
.arp-h3{font-family:var(--f-title);font-weight:400;font-size:23px;line-height:1.3;color:var(--ink);}
.arp-lede{font-size:16px;line-height:1.8;letter-spacing:.04em;color:rgba(30,29,26,.82);}
.arp-sub{font-size:15px;line-height:1.75;letter-spacing:.04em;color:rgba(30,29,26,.72);}
.arp-muted{font-size:13.5px;line-height:1.7;letter-spacing:.04em;color:rgba(30,29,26,.55);}

.arp-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.arp-ghost{font-family:var(--f-label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding-bottom:6px;border-bottom:1px solid var(--line);transition:border-color .4s;white-space:nowrap;}
.arp-ghost:hover{border-color:var(--ink);}
.arp-orn{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--ink);font-size:14px;}
.arp-orn::before,.arp-orn::after{content:"";width:64px;height:1px;background:var(--line);}

/* garden arch photo frame */
.arp-arch{overflow:hidden;border-radius:400px 400px 0 0;background:var(--taupe);}
.arp-arch img,
.arp-arch video {width:100%;height:100%;object-fit:cover;}

/* review cards (every page's proof slot) */
.arp-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.arp-review{margin:0;background:var(--white);border:1px solid var(--line);padding:40px 34px 34px;}
.arp-stars{display:block;font-size:12px;letter-spacing:.34em;color:var(--ink);}
.arp-review blockquote{margin:22px 0 26px;font-family:var(--f-title);font-size:21px;line-height:1.5;color:var(--ink);}
.arp-review figcaption{font-family:var(--f-label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);}
.arp-review figcaption span{display:block;margin-top:7px;font-size:10px;color:rgba(30,29,26,.5);}

/* --- reviews: every page embeds the home cinematic testimonials (cin-),
   CSS in style.css, wiring in script.js --- */

/* plaque cards (what-we-offer, booths-that-fit) */
.arp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.arp-cards.arp-two{grid-template-columns:repeat(2,1fr);gap:44px;}
.arp-card{display:block;text-decoration:none;color:inherit;}
.arp-card-img,
.arp-card-video {height:320px;overflow:hidden;background:var(--taupe);}
.arp-card-img img,
.arp-card-video video {width:100%;height:100%;object-fit:cover;transition:transform 1.5s ease;}
.arp-card:hover .arp-card-img img,
.arp-card:hover .arp-card-video video {transform:scale(1.035);}
.arp-card-body{border-top:1px solid var(--line);margin-top:20px;padding-top:16px;}
.arp-no{display:block;font-family:var(--f-label);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(30,29,26,.55);margin-bottom:8px;}
.arp-card-body p{margin:10px 0 0;font-size:14px;line-height:1.7;letter-spacing:.03em;color:rgba(30,29,26,.72);}
.arp-card-link{display:inline-block;margin-top:16px;font-family:var(--f-label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding-bottom:6px;border-bottom:1px solid var(--line);transition:border-color .4s;}
.arp-card-link:hover,.arp-card:hover .arp-card-link{border-color:var(--ink);}

/* numeral trio rows (travel zones, package foundations) */
.arp-numrow{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.arp-digits{display:block;font-family:var(--f-title);font-size:58px;line-height:1;color:#d2d1ce;margin-bottom:16px;}
.arp-numitem h3{font-family:var(--f-title);font-weight:400;font-size:22px;line-height:1.25;color:var(--ink);}
.arp-numitem p{margin:10px 0 0;font-size:14.5px;line-height:1.75;letter-spacing:.03em;color:rgba(30,29,26,.72);}

/* area chips */
.arp-chips{display:flex;flex-wrap:wrap;gap:12px;}
.arp-chips span,.arp-chips a{font-family:var(--f-label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);padding:11px 20px;color:var(--ink);text-decoration:none;background:var(--white);}

/* slim marquee band (echoes the home hero wordmark marquee) */
.arp-ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;background:var(--white);}
.arp-track{display:flex;width:max-content;animation:arp-slide 40s linear infinite;}
.arp-track span{font-family:var(--f-label);font-size:11px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;color:rgba(30,29,26,.7);padding-right:64px;}
@keyframes arp-slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* faq slot (accordion itself is .faq-item in style.css, wired by script.js) */
.arp-faq-grid{display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:start;}
.arp-faq-grid .arp-lede{margin-top:16px;}

/* count-up stat cells; script.js [data-countup] animates .stb-num spans */
.arp-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.arp-stats-3{grid-template-columns:repeat(3,1fr);}
.arp-stat{position:relative;padding:30px 10px 26px;text-align:center;}
.arp-stat + .arp-stat::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:1px;background:var(--line);}
.arp-stat b{display:block;font-weight:400;font-family:var(--f-title);font-size:54px;line-height:1;color:var(--ink);margin-bottom:10px;}
.arp-stat-lab{display:block;font-family:var(--f-label);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(30,29,26,.6);line-height:1.5;}

/* --- arp mobile layer ------------------------------------------------------ */
/* --- qa: centered single-column FAQ accordion, small type (services + occasion) -------------- */
.arp-qa-head{max-width:560px;margin:0 auto clamp(36px,4vw,52px);text-align:center;}
.sec .arp-qa-head p{margin-top:18px;font-size:15px;line-height:1.75;letter-spacing:.03em;color:rgba(30,29,26,.75);}
.arp-qa-list{max-width:760px;margin:0 auto;width:100%;}
.arp-qa-item{border-bottom:1px solid var(--line);}
.arp-qa-item:first-child{border-top:1px solid var(--line);}
.arp-qa-q{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;background:none;border:0;padding:21px 2px;cursor:pointer;text-align:left;font-family:var(--f-body);font-size:15px;line-height:1.5;letter-spacing:.03em;color:var(--ink);}
.arp-qa-x{font-size:22px;font-weight:300;line-height:1;color:var(--ink);transition:transform .3s;}
.arp-qa-item.open .arp-qa-x{transform:rotate(45deg);}
.arp-qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease;}
.arp-qa-item.open .arp-qa-a{grid-template-rows:1fr;}
.sec .arp-qa-a p{overflow:hidden;min-height:0;font-size:15px;line-height:1.8;letter-spacing:.03em;color:rgba(30,29,26,.72);padding:0 40px 0 0;}
.arp-qa-item.open .arp-qa-a p{padding-bottom:19px;}

@media (max-width:900px){
  .arp-sec{padding:56px 0;}
  .arp-wrap{width:auto;padding-left:20px;padding-right:20px;}
  .arp-h1{font-size:clamp(34px,9.6vw,46px);}
  .arp-h2{font-size:clamp(27px,7.6vw,34px);}
  .arp-reviews,.arp-cards,.arp-cards.arp-two,.arp-numrow{grid-template-columns:1fr;gap:30px;}
  .arp-faq-grid{grid-template-columns:1fr;gap:34px;}
  .arp-stats{grid-template-columns:repeat(2,1fr);}
  .arp-stats-3{grid-template-columns:1fr;}
  .arp-stat + .arp-stat::before{display:none;}
  .arp-stat b{font-size:40px;}
  .arp-card-img,
  .arp-card-video {height:auto;aspect-ratio:4/5;}
  .arp-actions{gap:18px;}
}

/* ===========================================================================
   2. FORM-SECTION MOBILE LAYER (from the old contact css; same as form.css)
   =========================================================================== */
@media (max-width: 900px){

  /* --- inquiry form first, then the studio card --------------------------------- */
  .sec-contact-form .cv{padding:52px 20px; gap:14px;}
  .sec-contact-form .cv > form{order:1; margin-bottom:38px;}
  .sec-contact-form .cv > img,
  .sec-contact-form .cv > video {order:2; aspect-ratio:326/366; object-fit:cover;}
  .sec-contact-form .cv > :nth-child(2){order:3;}
  .sec-contact-form .cv > :nth-child(3){order:4;}
  .sec-contact-form .cv > .ico{display:none;}
  .contact-form{display:flex; flex-direction:column; gap:22px;}
  /* 16px floor: below it iOS Safari zooms the page on focus */
  .contact-form .field{font-size:16px;}
  .contact-form > *{
    position:static !important; left:auto !important; top:auto !important;
    width:100% !important;
  }
  .contact-form .btn{max-width:340px; align-self:center; height:54px !important; margin-top:6px;}
  /* keep the _hp honeypot and the status note out of the flattened flex flow:
     the > * blanket above would otherwise turn the off-screen honeypot into a
     real (tabbable, gap-consuming) flex item on mobile */
  /* selector names no form-wrapper class: an absolute+left rule on one reads
     as a canvas pin to the form editor's stylesheet check (same element,
     same protection, still outranks the > * blanket) */
  form > input[name="_hp"]{position:absolute !important; left:-9999px !important; width:0 !important; height:0 !important;}
  .contact-form > .form-note{width:100%;}
}

/* --- 7 · contact form: the letter ------------------------------------------
   Full-bleed drifting photo behind an ink veil; the wired form sits on a
   centered laid-paper letter card (paper-tex recipe from style.css). */
.ltr-sec{overflow:hidden;display:flex;align-items:center;justify-content:center;padding:60px 20px;background:var(--ink);}
.ltr-bg{
  position:absolute;inset:0;
  background-image:url('../images/hv-couple-shirahuy.jpg');
  background-size:cover;background-position:center;
  background-attachment:fixed;
}
.ltr-veil{position:absolute;inset:0;background:linear-gradient(rgba(30,29,26,.42), rgba(30,29,26,.55));}
.ltr-card{
  position:relative;width:640px;max-width:100%;padding:52px 58px 46px;
  background:
    radial-gradient(90% 70% at 18% 30%, rgba(30,29,26,.018), transparent 70%),
    radial-gradient(75% 60% at 72% 62%, rgba(30,29,26,.022), transparent 72%),
    repeating-linear-gradient(90deg, rgba(30,29,26,.03) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(30,29,26,.028), rgba(30,29,26,.028)),
    var(--cream);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.ltr-kicker{display:block;text-align:center;font-family:var(--f-label);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(30,29,26,.55);}
.ltr-h2{margin-top:10px;text-align:center;font-family:var(--f-title);font-weight:400;font-size:42px;line-height:1.15;}
.ltr-sub{margin-top:10px;text-align:center;font-size:14px;line-height:1.7;color:rgba(30,29,26,.65);}
.ltr-rule{width:54px;height:1px;background:var(--ink);opacity:.4;margin:22px auto 26px;}
.ltr-fields{display:flex;flex-direction:column;gap:16px;}
.ltr-in{width:100%;height:42px;border:0;border-bottom:1px solid var(--line);background:transparent;font-family:var(--f-body);font-size:15px;letter-spacing:.03em;color:var(--ink);padding:0 2px;transition:border-color .4s;}
.ltr-in:focus{outline:none;border-color:var(--ink);}
.ltr-in::placeholder{color:rgba(30,29,26,.42);font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
textarea.ltr-in{height:86px;resize:none;padding-top:10px;line-height:1.5;}
.ltr-row2{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.ltr-btn{margin-top:26px;width:100%;height:56px;border:0;cursor:pointer;background:var(--ink);color:var(--cream);font-family:var(--f-label);font-size:11px;letter-spacing:.24em;text-transform:uppercase;transition:.4s;}
.ltr-btn:hover{background:var(--taupe);color:var(--ink);}
.ltr-btn:disabled{opacity:.5;cursor:default;}
.ltr-ps{margin-top:18px;text-align:center;font-size:12.5px;color:rgba(30,29,26,.55);}
.ltr-card .form-note{display:none;margin-top:14px;text-align:center;font-size:13px;color:var(--ink);}

@media (max-width:900px){
  .ltr-sec{padding:48px 16px;clip-path:inset(0);} /* clips the pinned .ltr-bg to this section */
  .ltr-card{padding:40px 24px 36px;}
  .ltr-row2{grid-template-columns:1fr;gap:16px;}
  .ltr-h2{font-size:30px;}
  /* iOS ignores background-attachment:fixed, so pin the layer itself; the
     section's overflow:hidden clips it back to the section box. */
  .ltr-bg{position:fixed;background-attachment:scroll;}
}

/* Small phones (SE / mini / 360-wide Androids). This client's two longest
   questions render as 301px and 305px of uppercase, .12em-tracked placeholder,
   which is wider than the 276px an input gets inside the card at 360-375 and so
   was cut off mid-word. Buy the width back from the card's side padding and the
   placeholder's own tracking; type size, copy and every width above 400px are
   untouched. */
@media (max-width:400px){
  .ltr-card{padding:36px 18px 32px;}
  .ltr-in::placeholder{letter-spacing:.06em;}
}

/* --- service-faq: the reading room -----------------------------------------
   Question index left, one staged answer right on a framed cream panel;
   the section fills the window and centers its spread. Swap wiring lives in
   script.js (.rdm-tab / .rdm-view / .rdm-dot). */
.rdm-sec{min-height:100vh;display:flex;align-items:center;background:var(--white);padding:80px 0;}
.rdm-wrap{width:1200px;margin:0 auto;display:grid;grid-template-columns:430px 1fr;gap:80px;align-items:center;}
.rdm-wrap .rdm-lede{font-size:15px;line-height:1.8;letter-spacing:.04em;color:rgba(30,29,26,.82);margin:16px 0 42px;}

.rdm-list{border-top:1px solid var(--line);}
.rdm-tab{
  position:relative;width:100%;display:flex;align-items:baseline;gap:18px;
  background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;text-align:left;
  padding:17px 4px 17px 0;color:rgba(30,29,26,.55);transition:color .35s,padding-left .35s;
}
.rdm-tab .n{font-family:var(--f-label);font-size:10px;letter-spacing:.26em;flex:0 0 30px;}
.rdm-tab .q{font-family:var(--f-body);font-size:16px;letter-spacing:.02em;line-height:1.45;}
.rdm-tab::before{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--ink);transition:width .5s cubic-bezier(.2,.7,.2,1);}
.rdm-tab:hover{color:var(--ink);padding-left:8px;}
.rdm-tab.on{color:var(--ink);}
.rdm-tab.on::before{width:100%;}

.rdm-stage{position:relative;background:var(--cream);min-height:560px;padding:64px 68px 150px;}
.rdm-stage::after{content:'';position:absolute;inset:14px;border:1px solid var(--line);pointer-events:none;}
.rdm-view{position:absolute;inset:64px 68px 150px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease,visibility 0s .45s;}
.rdm-view.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease .12s,transform .55s ease .12s,visibility 0s;}
.rdm-big-n{font-family:var(--f-label);font-size:12px;letter-spacing:.34em;color:rgba(30,29,26,.5);display:block;margin-bottom:22px;}
.rdm-view .rdm-qt{font-family:var(--f-title);font-weight:400;font-size:37px;line-height:1.15;margin:0 0 26px;}
.rdm-rule{width:64px;height:1px;background:var(--ink);margin-bottom:26px;}
.rdm-view p{margin:0;font-size:16.5px;line-height:1.85;letter-spacing:.02em;color:rgba(30,29,26,.85);max-width:560px;}
.rdm-view a{text-decoration:underline;text-underline-offset:3px;}

.rdm-meta{position:absolute;left:68px;right:68px;bottom:56px;display:flex;align-items:center;justify-content:space-between;z-index:2;}
.rdm-count{font-family:var(--f-label);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(30,29,26,.55);}
.rdm-dots{display:flex;gap:10px;}
.rdm-dot{width:7px;height:7px;border-radius:50%;border:1px solid rgba(30,29,26,.5);background:transparent;padding:0;cursor:pointer;transition:background .3s,transform .3s;}
.rdm-dot.on{background:var(--ink);border-color:var(--ink);transform:scale(1.25);}

@media (max-width:900px){
  .rdm-sec{min-height:0;padding:56px 0;}
  .rdm-wrap{width:auto;grid-template-columns:1fr;gap:44px;padding:0 20px;}
  .rdm-lede{margin-bottom:32px;}
  .rdm-stage{min-height:640px;padding:0;}
  .rdm-view{inset:36px 26px 110px;}
  .rdm-qt{font-size:27px;}
  .rdm-view p{font-size:15px;line-height:1.8;}
  .rdm-meta{left:26px;right:26px;bottom:32px;}
  .arp-qa-list{max-width:none;}
}

@media (prefers-reduced-motion: reduce){
  .rdm-tab,.rdm-tab::before,.rdm-view,.rdm-dot{transition:none;}
  .arp-qa-x,.arp-qa-a{transition:none;}
}
.rdm-wrap .arp-muted{margin-top:26px;max-width:400px;}

/* A field left alone on a shared .ltr-row2 spans the full line (owner rule:
   no blank half-cells on a customer form, ever — the portal form editor can
   remove one half of a pair). Growth needs nothing here: .sec already sizes
   by min-height:var(--h), so the card section grows with the form natively. */
.ltr-row2 > :only-child { grid-column: 1 / -1; }