/* ======================================================================
   ARCHER PRASANTA — SERVICES / STUDIO PREMIUM
   Page-only stylesheet. Header/footer remain in their style.css sections.
   01 Tokens & layout | 02 Hero | 03 Services | 04 Gallery
   05 Process | 06 FAQ | 07 Invitation | 08 Motion | 09 Responsive
   ====================================================================== */

/* 01 / TOKENS & SHARED LAYOUT */
.aps-main {
  --aps-paper:#F7F5EF; --aps-stone:#EAE7DF; --aps-white:#FFFDF8;
  --aps-ink:#242B2B; --aps-muted:#626A65; --aps-line:#252D2926;
  --aps-navy:#111A3D; --aps-cyan:#6FEFFF; --aps-copper:#8D5D42;
  background:var(--aps-paper); color:var(--aps-ink); font-family:Inter,Arial,Helvetica,sans-serif;
  isolation:isolate; overflow:clip;
}
.aps-main *, .aps-main *::before, .aps-main *::after { box-sizing:border-box; }
.aps-main [hidden] { display:none!important; }
.aps-main :is(h1,h2,h3,p,figure,ul,ol) { margin:0; }
.aps-main :is(h1,h2,h3) { color:inherit; font-weight:500; text-transform:none; }
.aps-main h2 { font-size:clamp(38px,4.25vw,72px); letter-spacing:-.057em; line-height:1.06; }
.aps-main h2 em { font-style:normal; color:var(--aps-copper); }
.aps-main p { color:var(--aps-muted); font-size:15px; line-height:1.8; }
.aps-main a { color:inherit; text-decoration:none; }
.aps-main img { display:block; max-width:100%; height:auto; }
.aps-main :is(a,button,summary):focus-visible { outline:3px solid #148596; outline-offset:5px; border-radius:2px; }
.aps-main :is(button,summary) { cursor:pointer; }
.aps-main :is(section,[id]) { scroll-margin-top:112px; }
.aps-wrap { width:min(1700px,calc(100% - 112px)); margin-inline:auto; }
.aps-section { padding-block:105px; }
.aps-main .aps-label { font:600 10px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.15em; color:var(--aps-copper); margin-bottom:23px; }
.aps-dot { display:inline-block; width:6px; height:6px; background:var(--aps-copper); margin:0 9px 1px 0; border-radius:50%; }
.aps-actions { display:flex; align-items:center; flex-wrap:wrap; gap:26px; }
.aps-main .aps-button { display:inline-flex; justify-content:space-between; align-items:center; gap:28px; min-height:58px; padding:15px 22px; border:1px solid #B4F7FF; border-radius:4px; color:var(--aps-navy); background:var(--aps-cyan); font-size:12px; font-weight:700; box-shadow:0 3px 0 #3295A1,0 10px 22px #111A3D12,inset 0 1px 0 #FFFFFF80; transition:transform .25s,box-shadow .25s; }
.aps-button>span { font-size:23px; line-height:1; font-weight:400; }
.aps-main .aps-link { min-height:44px; display:inline-flex; gap:26px; align-items:center; font-size:12px; font-weight:650; }
.aps-link>span { font-size:22px; color:var(--aps-copper); font-weight:400; }
.aps-heading { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:48px; }
.aps-heading>p { max-width:345px; padding-bottom:4px; }

/* 02 / HERO — PAPER, PHOTOGRAPHY & BRUSHED METAL */
.aps-hero { padding-top:26px; background:radial-gradient(ellipse at 78% 58%,#DEE0D8 0,transparent 45%),var(--aps-paper); }
.aps-breadcrumb { display:flex; gap:13px; color:#6C716C; font-size:11px; align-items:center; min-height:30px; }
.aps-breadcrumb a { padding-block:7px; }
.aps-breadcrumb [aria-current] { color:var(--aps-ink); }
.aps-hero-grid { display:grid; grid-template-columns:1fr 1.08fr; gap:60px; align-items:center; padding:58px 0 78px; }
.aps-hero-copy { position:relative; z-index:1; }
.aps-main h1 { font-size:clamp(52px,5.4vw,98px); line-height:1.04; letter-spacing:-.065em; font-weight:550; }
.aps-main h1 em { color:var(--aps-copper); font-style:normal; }
.aps-main .aps-hero-intro { max-width:450px; margin-top:27px; font-size:16px; }
.aps-hero .aps-actions { margin-top:31px; }
.aps-hero-note { display:flex; align-items:center; gap:17px; margin-top:47px; }
.aps-note-mark { display:grid; place-items:center; width:46px; height:46px; border:1px solid #ADAFA341; border-radius:50%; font-size:31px; color:var(--aps-copper); }
.aps-main .aps-hero-note p { font-size:11px; line-height:1.8; }
.aps-hero-note strong { font-weight:500; color:var(--aps-ink); }
.aps-hero-stage { position:relative; padding:0 0 27px 10px; min-width:0; }
.aps-hero-frame { position:relative; border:8px solid #FFFEF8; outline:1px solid #C9CAC2; border-radius:5px; transform:perspective(1500px) rotateY(-4deg) rotateZ(1deg); box-shadow:10px 13px 0 #CECEC4,0 32px 50px #1C292322; background:#151E22; overflow:hidden; }
.aps-hero-frame img { width:100%; height:clamp(390px,33vw,590px); object-fit:cover; object-position:59% center; }
.aps-hero-frame figcaption { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:30px 26px 22px; color:#F5F4EF; background:linear-gradient(transparent,#0B141EDF); font:9px/1.5 ui-monospace,monospace; letter-spacing:.11em; }
.aps-hero-frame figcaption>span:last-child { font-size:25px; color:var(--aps-cyan); }
.aps-metal-tag { position:absolute; left:-22px; bottom:6px; width:235px; padding:24px 24px 17px; background:linear-gradient(130deg,#F5F4EC,#C8CFC8 48%,#F1F1E8); border:1px solid #FFFFFF; border-radius:4px; box-shadow:5px 6px 0 #969F9680,0 20px 32px #08150E30,inset 0 0 0 4px #FFFFFF30; transform:rotate(-4deg); }
.aps-metal-tag .aps-label { font-size:8px; margin-bottom:12px; color:#45554B; }
.aps-metal-tag strong { font-size:27px; font-weight:500; line-height:1.04; letter-spacing:-.04em; display:block; }
.aps-tag-bottom { margin-top:20px; padding-top:13px; border-top:1px solid #57615340; display:flex; justify-content:space-between; align-items:center; font:8px/1.5 ui-monospace,monospace; letter-spacing:.09em; }
.aps-tag-bottom b { font-size:19px; font-weight:400; }
.aps-tag-bolt { position:absolute; top:10px; right:10px; width:5px; height:5px; border:1px solid #727D72; border-radius:50%; background:linear-gradient(45deg,#A8B0A5,#F4F8EC); }
.aps-stage-index { position:absolute; right:7px; bottom:-8px; font:8px/1.5 ui-monospace,monospace; color:#667166; letter-spacing:.09em; }
.aps-hero-strip { padding-block:27px; border-top:1px solid var(--aps-line); display:flex; gap:25px; justify-content:space-between; align-items:center; font-size:11px; }
.aps-hero-strip>span { display:flex; gap:13px; align-items:center; }
.aps-hero-strip i { font:10px/1.5 ui-monospace,monospace; color:var(--aps-copper); }
.aps-hero-strip>a { display:flex; align-items:center; gap:24px; min-height:32px; }
.aps-hero-strip b { font-size:20px; font-weight:400; }

/* 03 / SERVICE DIRECTORY — SIX RAISED CARDS */
.aps-directory { background:var(--aps-stone); border-block:1px solid #2A302A0C; }
.aps-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.aps-card { min-width:0; background:var(--aps-white); border:1px solid #FFF; border-radius:5px; box-shadow:0 3px 0 #D1D1C7,0 16px 30px #2633290A; transform:perspective(1300px) rotateX(var(--aps-rx,0deg)) rotateY(var(--aps-ry,0deg)); transition:transform .3s,box-shadow .3s; }
.aps-card>a { display:flex; flex-direction:column; height:100%; padding:8px 8px 0; border-radius:4px; }
.aps-card-photo { position:relative; aspect-ratio:1.65; overflow:hidden; border-radius:3px; background:#CDD1C9; }
.aps-card-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(#08172245,transparent 55%); pointer-events:none; }
.aps-card-photo img { width:100%; height:100%; object-fit:cover; transition:transform .65s; }
.aps-card-number { position:absolute; left:17px; top:17px; z-index:1; color:#FFFFFF; font:9px/1.5 ui-monospace,monospace; letter-spacing:.13em; }
.aps-card-arrow { position:absolute; right:14px; bottom:14px; z-index:1; display:grid; place-items:center; width:40px; height:40px; border:1px solid #FFFFFF70; border-radius:50%; background:#F8F8F0F0; color:var(--aps-navy); font-size:21px; box-shadow:0 4px 10px #0003; }
.aps-card-copy { display:flex; flex:1; flex-direction:column; padding:25px 22px 0; }
.aps-card-copy .aps-label { margin-bottom:10px; font-size:9px; }
.aps-main .aps-card h3 { font-size:clamp(25px,2.3vw,38px); line-height:1.1; letter-spacing:-.045em; margin-bottom:16px; }
.aps-card-copy>p:not(.aps-label) { font-size:14px; line-height:1.75; margin-bottom:25px; }
.aps-card-foot { margin-top:auto; min-height:59px; padding-block:16px; border-top:1px solid var(--aps-line); display:flex; gap:15px; align-items:center; justify-content:space-between; color:#646D66; font-size:10px; }
.aps-card-foot b { color:var(--aps-copper); font-size:19px; font-weight:400; }
.aps-directory-note { display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:20px; padding-top:35px; }
.aps-directory-note p { font-size:13px; }

/* 04 / TRANSFORMATION — PROGRESSIVE BEFORE/AFTER PHOTO VIEWER */
.aps-case-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; align-items:center; }
.aps-case-copy>p:not(.aps-label) { margin-top:26px; max-width:425px; }
.aps-case-list { padding:27px 0 20px; list-style:none; }
.aps-case-list li { display:flex; gap:22px; align-items:center; border-top:1px solid var(--aps-line); padding-block:16px; font-size:13px; }
.aps-case-list li>span { font:10px/1 ui-monospace,monospace; color:var(--aps-copper); }
.aps-comparison { border:1px solid #FFFFFF; border-radius:6px; padding:12px; background:#E6E9E1; box-shadow:0 4px 0 #CCD1C6,0 23px 45px #22302915; min-width:0; }
.aps-photo-pair { display:grid; gap:12px; }
.aps-photo-pair figure { position:relative; aspect-ratio:4/3; min-width:0; background:#D4DBD1; border-radius:3px; overflow:hidden; }
.aps-photo-pair img { width:100%; height:100%; object-fit:contain; }
.aps-photo-pair figcaption { position:absolute; left:19px; bottom:19px; color:#F4F8F6; background:#111A3DEB; border:1px solid #FFFFFF50; padding:10px 13px; font:9px/1.5 ui-monospace,monospace; letter-spacing:.12em; border-radius:3px; }
.aps-photo-controls { display:flex; gap:7px; padding-top:11px; }
.aps-photo-controls button { display:flex; justify-content:space-between; align-items:center; width:50%; min-height:48px; border:1px solid #111A3D1A; background:#F4F5EF; color:#46544B; border-radius:3px; padding:13px 19px; font:600 11px/1.5 Inter,Arial,sans-serif; }
.aps-photo-controls button[aria-pressed="true"] { color:var(--aps-cyan); background:var(--aps-navy); box-shadow:0 3px 8px #111A3D22; }
.aps-main .aps-photo-caption { font-size:11px; line-height:1.6; text-align:center; padding:13px 8px 1px; color:#626C63; }

/* 05 / PROCESS & ACCOUNT — EXISTING CUSTOMER JOURNEY */
.aps-process { background:#E3E7DF; border-block:1px solid #C9D0C4; }
.aps-process h2 em { color:#637262; }
.aps-steps { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:55px!important; gap:35px; }
.aps-steps li { padding-top:25px; border-top:1px solid #8090786B; position:relative; }
.aps-steps li::before { content:""; position:absolute; width:6px; height:6px; left:0; top:-4px; background:#53684D; border-radius:50%; }
.aps-step-number { font:11px/1.5 ui-monospace,monospace; color:#5C6B55; display:block; margin-bottom:29px; }
.aps-main .aps-steps h3 { font-size:23px; letter-spacing:-.035em; line-height:1.16; margin-bottom:15px; }
.aps-steps p { font-size:13px; line-height:1.8; }
.aps-account { margin-top:52px; padding:26px 30px; display:flex; gap:23px; align-items:center; background:#F5F6EF; border:1px solid #FFFFFF; border-radius:4px; box-shadow:0 3px 0 #CAD1C4; }
.aps-account-symbol { flex-shrink:0; display:grid; place-items:center; width:45px; height:45px; border:1px solid #C4CFBE; border-radius:50%; color:var(--aps-navy); font-size:25px; }
.aps-main .aps-account h3 { font-size:19px; letter-spacing:-.025em; margin-bottom:4px; }
.aps-account p { font-size:12px; }
.aps-account .aps-link { margin-left:auto; flex-shrink:0; }

/* 06 / QUESTIONS — NATIVE, KEYBOARD-ACCESSIBLE DISCLOSURES */
.aps-faq-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; }
.aps-faq header>p:last-child { margin-top:25px; }
.aps-faq-list { border-top:1px solid var(--aps-line); }
.aps-faq details { border-bottom:1px solid var(--aps-line); }
.aps-faq summary { display:flex; align-items:center; justify-content:space-between; gap:25px; padding-block:26px; list-style:none; font-size:16px; line-height:1.55; font-weight:500; }
.aps-faq summary::-webkit-details-marker { display:none; }
.aps-faq summary>span { flex-shrink:0; width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--aps-line); border-radius:50%; font-size:19px; color:var(--aps-copper); transition:transform .25s; }
.aps-faq details[open] summary>span { transform:rotate(45deg); }
.aps-faq details>p { padding:0 45px 26px 0; font-size:14px; }

/* 07 / INVITATION — NAVY BRAND SURFACE */
.aps-cta { position:relative; color:#F6F5F0; background:radial-gradient(ellipse at 20% 80%,#273955 0,transparent 65%),var(--aps-navy); padding-block:86px; }
.aps-cta-inner { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:90px; }
.aps-cta .aps-label { color:#B2C4D5; }
.aps-cta h2 { font-size:clamp(45px,5.3vw,90px); }
.aps-cta h2 em { color:var(--aps-cyan); }
.aps-cta-copy { max-width:420px; justify-self:end; }
.aps-cta-copy>p { color:#C3CCD9; margin-bottom:25px; }
.aps-cta-foot { display:block; padding-top:25px; font:9px/1.5 ui-monospace,monospace; letter-spacing:.13em; color:#A5B4C7; }
.aps-cta :is(a,button):focus-visible { outline-color:var(--aps-cyan); }

/* 08 / MOTION — CONTENT IS VISIBLE WITHOUT JAVASCRIPT */
.aps-main [data-aps-reveal].is-in-view { animation:aps-arrive .65s ease both; }
@keyframes aps-arrive { from { opacity:.4; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .aps-main .aps-button:hover { transform:translateY(-2px); box-shadow:0 5px 0 #3295A1,0 13px 24px #111A3D22; }
  .aps-card:hover { box-shadow:0 5px 0 #CBCFC3,0 25px 42px #26332925; }
  .aps-card:hover .aps-card-photo img { transform:scale(1.045); }
  .aps-card:hover .aps-card-arrow { background:var(--aps-cyan); }
  .aps-main .aps-link:hover { text-decoration:underline; text-underline-offset:5px; }
}

/* 09 / RESPONSIVE — 1700PX MAXIMUM, FLUID SIDE GUTTERS */
@media(min-width:1800px) { .aps-hero-grid { padding-block:72px 96px; } }
@media(max-width:1200px) {
  .aps-wrap { width:calc(100% - 64px); }
  .aps-hero-grid { gap:38px; }
  .aps-main h1 { font-size:clamp(48px,5.4vw,70px); }
  .aps-hero-frame img { height:420px; }
  .aps-metal-tag { width:200px; padding:21px 20px 16px; left:-10px; }
  .aps-metal-tag strong { font-size:24px; }
  .aps-card-grid { gap:22px; }
  .aps-card-copy { padding:23px 16px 0; }
  .aps-case-grid,.aps-faq-grid { gap:48px; }
  .aps-steps { gap:25px; }
  .aps-cta-inner { gap:50px; }
}
@media(max-width:960px) {
  .aps-section { padding-block:78px; }
  .aps-hero-grid { grid-template-columns:1fr; padding:40px 0 60px; gap:48px; }
  .aps-main h1 { font-size:clamp(60px,8.7vw,80px); }
  .aps-main .aps-hero-intro { max-width:560px; }
  .aps-hero-note { margin-top:28px; }
  .aps-hero-stage { padding:0 6px 26px 16px; }
  .aps-hero-frame img { height:auto; aspect-ratio:1.7; }
  .aps-metal-tag { left:0; width:215px; }
  .aps-hero-strip { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .aps-heading { align-items:start; flex-direction:column; gap:23px; margin-bottom:35px; }
  .aps-heading>p { max-width:500px; }
  .aps-main h2 { font-size:clamp(40px,6vw,59px); }
  .aps-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .aps-main .aps-card h3 { font-size:30px; }
  .aps-case-grid,.aps-faq-grid { grid-template-columns:1fr; gap:40px; }
  .aps-case-copy>p:not(.aps-label) { max-width:540px; }
  .aps-case-list { max-width:540px; }
  .aps-photo-pair figure { aspect-ratio:3/2; }
  .aps-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
  .aps-account { flex-wrap:wrap; }
  .aps-account>div:nth-child(2) { flex:1; }
  .aps-account .aps-link { margin-left:68px; }
  .aps-cta-inner { grid-template-columns:1fr; gap:35px; }
  .aps-cta-copy { max-width:560px; justify-self:start; }
}
@media(max-width:560px) {
  .aps-wrap { width:calc(100% - 36px); }
  .aps-section { padding-block:63px; }
  .aps-hero { padding-top:17px; }
  .aps-hero-grid { padding-top:32px; gap:40px; padding-bottom:44px; }
  .aps-main .aps-label { font-size:9px; letter-spacing:.105em; margin-bottom:18px; }
  .aps-main h1 { font-size:clamp(41px,11.5vw,64px); }
  .aps-main .aps-hero-intro { font-size:14px; margin-top:22px; }
  .aps-hero .aps-actions { gap:18px; margin-top:24px; }
  .aps-main .aps-button { width:100%; min-height:55px; }
  .aps-main .aps-link { font-size:12px; }
  .aps-hero-note { margin-top:22px; }
  .aps-hero-frame { border-width:5px; }
  .aps-hero-frame img { aspect-ratio:1.22; }
  .aps-hero-stage { padding-bottom:43px; }
  .aps-hero-frame figcaption { padding:20px 13px 13px; font-size:7px; bottom:59px; }
  .aps-metal-tag { width:178px; padding:20px 17px 13px; }
  .aps-metal-tag .aps-label { font-size:7px; margin-bottom:8px; }
  .aps-metal-tag strong { font-size:23px; }
  .aps-tag-bottom { margin-top:13px; padding-top:9px; font-size:7px; }
  .aps-stage-index { font-size:6px; max-width:90px; text-align:right; bottom:1px; }
  .aps-hero-strip { font-size:10px; gap:19px 10px; padding-block:22px; }
  .aps-hero-strip>span { align-items:start; gap:8px; }
  .aps-hero-strip>a { gap:20px; }
  .aps-main h2 { font-size:clamp(33px,8.9vw,46px); }
  .aps-heading { gap:22px; }
  .aps-heading>p { font-size:14px; }
  .aps-card-grid { grid-template-columns:1fr; gap:26px; }
  .aps-card-photo { aspect-ratio:1.55; }
  .aps-card-copy { padding:25px 18px 0; }
  .aps-card-copy .aps-label { margin-bottom:12px; }
  .aps-main .aps-card h3 { font-size:31px; }
  .aps-card-copy>p:not(.aps-label) { margin-bottom:22px; }
  .aps-card-foot { font-size:10px; }
  .aps-directory-note { justify-content:start; align-items:start; gap:2px; padding-top:26px; }
  .aps-case-copy>p:not(.aps-label) { font-size:14px; }
  .aps-comparison { padding:8px; }
  .aps-photo-pair figure { aspect-ratio:4/3; }
  .aps-photo-pair figcaption { left:10px; bottom:10px; font-size:8px; padding:8px 10px; }
  .aps-photo-controls button { padding:12px; font-size:11px; }
  .aps-main .aps-photo-caption { font-size:10px; padding-inline:4px; }
  .aps-steps { grid-template-columns:1fr; gap:29px; margin-top:37px!important; }
  .aps-steps li { display:grid; grid-template-columns:31px 1fr; column-gap:17px; padding-top:22px; }
  .aps-step-number { grid-row:span 2; margin-top:4px; margin-bottom:0; }
  .aps-main .aps-steps h3 { font-size:23px; }
  .aps-steps p { grid-column:2; }
  .aps-account { padding:24px 19px; gap:17px; margin-top:36px; }
  .aps-account-symbol { width:36px; height:36px; font-size:21px; }
  .aps-account>div:nth-child(2) { flex-basis:calc(100% - 53px); }
  .aps-account .aps-link { margin-left:0; }
  .aps-account p { margin-top:9px; }
  .aps-faq-grid { gap:30px; }
  .aps-faq header>p:last-child { font-size:14px; margin-top:19px; }
  .aps-faq summary { padding-block:22px; gap:15px; font-size:15px; }
  .aps-faq details>p { padding-right:15px; font-size:13px; }
  .aps-cta { padding-block:63px; }
  .aps-cta h2 { font-size:clamp(40px,11vw,59px); }
  .aps-cta .aps-label { max-width:260px; }
  .aps-cta-copy>p { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
  .aps-main *, .aps-main *::before, .aps-main *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .aps-main [data-aps-depth] { transform:none!important; }
}