/* SITE_RESPONSIVE_V1 */
/* Hussein Laser — full site responsive layer */

/* Global layout safety */
*, *::before, *::after {
  box-sizing:border-box;
}

html {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body {
  min-width:0;
}

main, section, header, footer {
  min-width:0;
}

.wrap, .header .inner {
  max-width:1370px;
}

.hero > *,
.groom-layout > *,
.journey-layout > *,
.hussein-grid > *,
.results-gallery > *,
.feel-grid > *,
.faq-layout > *,
.contact-inner > * {
  min-width:0;
}

img, video, picture, svg {
  max-width:100%;
}

h1,h2,h3,p {
  overflow-wrap:break-word;
}

button, a {
  -webkit-tap-highlight-color:transparent;
}

section[id] {
  scroll-margin-top:24px;
}

/* Correct contrast in questions section */
.feeling h2,
.feeling h2 * {
  color:#fff7f2 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-shadow:none;
}

.feeling > .wrap > .eyebrow {
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:9px 14px;
  background:#f4dce2;
  color:#542637 !important;
  border-radius:3px;
  font-size:12px;
  line-height:1.5;
}

.feeling > .wrap > .eyebrow i {
  background:#934b63;
}

.feel-buttons button {
  min-width:0;
}

/* Large laptops / small desktops */
@media(max-width:1200px) {
  .wrap,
  .header .inner {
    width:calc(100% - 72px);
  }

  .header .inner {gap:20px}
  .nav {gap:18px}
  .hero-copy {padding-inline:38px}
  .hero h1 {font-size:clamp(48px,5.2vw,74px)}

  .groom-layout,
  .journey-layout,
  .hussein-grid {
    gap:36px;
  }

  .faq-layout {gap:48px}
  .feel-grid {gap:32px}
}

/* Tablet and compact laptop */
@media(max-width:1024px) {
  .wrap,
  .header .inner {
    width:calc(100% - 56px);
  }

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

  .hero-copy {
    padding:58px 32px 42px;
  }

  .hero h1 {
    font-size:clamp(43px,5.2vw,62px);
  }

  .hero-visual {
    min-height:620px;
  }

  .hero-actions {
    gap:10px;
  }

  .hero-actions .btn {
    padding-inline:17px;
    gap:14px;
  }

  .sec-top {
    gap:25px;
  }

  .results-gallery {
    gap:15px;
  }

  .result-space {
    height:400px;
  }

  .groom-layout,
  .journey-layout,
  .hussein-grid {
    gap:28px;
  }

  .groom-detail {
    padding:30px;
  }

  .hussein-visual {
    min-height:570px;
  }

  .hussein-visual-bottom strong {
    font-size:clamp(51px,5.8vw,76px);
  }

  .contact-inner {
    gap:25px;
  }
}

/* Portrait tablet */
@media(max-width:900px) {
  .hero {
    grid-template-columns:minmax(0,1fr);
    min-height:0;
  }

  .hero-visual {
    order:1;
    height:460px;
    min-height:0;
  }

  .hero-copy {
    order:2;
    padding:65px 42px 48px;
  }

  .hero h1 {
    font-size:clamp(48px,7vw,76px);
  }

  .hero-bottom {
    margin-top:38px;
  }

  .results-gallery,
  .feel-grid,
  .faq-layout,
  .groom-heading,
  .groom-layout,
  .journey-heading,
  .journey-layout,
  .hussein-grid {
    grid-template-columns:minmax(0,1fr);
  }

  .sec-top {
    flex-direction:column;
    align-items:flex-start;
  }

  .results-gallery {
    gap:18px;
  }

  .result-space,
  .result-card:nth-child(2) .result-space {
    height:340px;
  }

  .feel-grid {
    gap:24px;
  }

  .feel-answer {
    min-height:290px;
  }

  .groom-heading,
  .journey-heading {
    gap:22px;
  }

  .groom-layout,
  .journey-layout,
  .hussein-grid {
    gap:30px;
  }

  .groom-detail {
    min-height:390px;
  }

  .journey-art {
    min-height:350px;
  }

  .hussein-visual {
    min-height:550px;
  }

  .hussein-visual-bottom strong {
    font-size:68px;
  }

  .faq-layout {
    gap:25px;
  }
}

/* Phones */
@media(max-width:760px) {
  .wrap,
  .header .inner {
    width:calc(100% - 36px);
  }

  .topline {
    min-height:30px;
    height:auto;
    padding:6px 12px;
    text-align:center;
    line-height:1.5;
    font-size:9px;
  }

  .header {
    height:76px;
  }

  .header .inner {
    gap:10px;
  }

  .brand {
    min-width:0;
    gap:8px;
  }

  .brand strong {
    font-size:14px;
    white-space:nowrap;
  }

  .brand span {
    font-size:8px;
  }

  .brand-mark {
    flex-shrink:0;
    width:35px;
    height:35px;
  }

  .nav {
    display:none;
    position:absolute;
    inset:76px 0 auto;
    padding:12px 20px;
    gap:0;
    background:#faf7f3;
    box-shadow:0 16px 30px #0000001c;
    flex-direction:column;
    z-index:30;
  }

  .nav.open {
    display:flex;
  }

  .nav a {
    display:flex;
    align-items:center;
    min-height:46px;
    padding:11px 6px;
    border-bottom:1px solid #e2d5d3;
  }

  .hamburger {
    display:block;
    min-width:44px;
    min-height:44px;
  }

  .head-cta {
    display:none;
  }

  .hero {
    grid-template-columns:minmax(0,1fr);
  }

  .hero-visual {
    order:1;
    min-height:0;
    height:clamp(340px,105vw,490px);
  }

  .hero-copy {
    order:2;
    padding:49px 24px 44px;
  }

  .hero h1 {
    font-size:clamp(43px,9vw,69px);
    line-height:1.32;
    margin:24px 0 18px;
  }

  .hero p {
    font-size:14px;
    line-height:2;
  }

  .hero-photo-caption {
    right:32px;
    bottom:30px;
  }

  .hero-photo-caption strong {
    font-size:16px;
  }

  .hero-bottom {
    flex-wrap:wrap;
    margin-top:40px;
    row-gap:9px;
  }

  .hero-actions {
    display:flex;
    flex-wrap:wrap;
    width:100%;
  }

  .hero-actions .btn {
    min-height:50px;
  }

  .ticker-inner {
    overflow-x:auto;
    min-height:62px;
    justify-content:flex-start;
    gap:24px;
    white-space:nowrap;
    scrollbar-width:none;
  }

  .ticker-inner::-webkit-scrollbar {
    display:none;
  }

  .section {
    padding:76px 0;
  }

  .sec-top {
    display:flex;
    gap:15px;
    margin-bottom:28px;
  }

  .section h2 {
    font-size:clamp(36px,8vw,55px);
  }

  .lead {
    margin-top:5px;
  }

  .result-space,
  .result-card:nth-child(2) .result-space {
    height:300px;
  }

  .result-footer {
    gap:12px;
    flex-wrap:wrap;
    padding:20px;
  }

  .result-footer span {
    font-size:9px;
  }

  .feeling h2 {
    font-size:clamp(35px,8.4vw,58px);
    line-height:1.4;
  }

  .feel-grid {
    grid-template-columns:1fr;
    gap:20px;
    margin-top:30px;
  }

  .feel-buttons {
    grid-template-columns:1fr;
    gap:8px;
  }

  .feel-buttons button {
    min-height:58px;
    padding:13px 16px;
    font-size:13px;
  }

  .feel-answer {
    padding:25px;
    min-height:285px;
  }

  /* Service choices become swipeable on mobile */
  .groom-menu {
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:2px 0 13px;
    border:0;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
  }

  .groom-tab,
  .groom-tab:hover,
  .groom-tab[aria-pressed="true"] {
    flex:0 0 auto;
    width:auto;
    min-height:49px;
    display:inline-flex;
    gap:9px;
    align-items:center;
    padding:10px 14px;
    border:1px solid #d5c9c7;
    border-radius:3px;
    scroll-snap-align:start;
  }

  .groom-tab[aria-pressed="true"] {
    border-color:#762d3f;
  }

  .groom-name {
    font-size:14px;
    white-space:nowrap;
  }

  .groom-num {
    font-size:10px;
  }

  .groom-arrow {
    display:none;
  }

  .groom-detail {
    min-height:365px;
    padding:26px;
  }

  .groom-detail-content {
    padding-top:54px;
  }

  .groom-detail h3 {
    font-size:clamp(30px,7vw,42px);
  }

  .groom-watermark {
    font-size:145px;
  }

  .journey-art {
    min-height:315px;
    padding:28px;
  }

  .journey-art-center strong {
    font-size:clamp(32px,7vw,48px);
  }

  .journey-steps li {
    padding:19px 0;
  }

  .hussein-profile {
    padding:75px 0;
  }

  .hussein-copy h2 {
    font-size:clamp(48px,10vw,72px);
  }

  .hussein-visual {
    min-height:500px;
    padding:27px;
  }

  .hussein-portrait-ring {
    width:min(320px,79%);
  }

  .hussein-visual-bottom strong {
    font-size:clamp(49px,9vw,72px);
  }

  .faq-layout {
    grid-template-columns:1fr;
  }

  .accordion summary {
    min-height:48px;
    font-size:15px;
  }

  .contact {
    padding:78px 0 112px;
  }

  .contact-inner {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:24px;
  }

  .contact h2 {
    font-size:clamp(40px,8vw,62px);
  }

  footer .inner {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }

  footer {
    padding-bottom:96px;
  }

  .preview-tools {
    display:none !important;
  }

  .mobile-fixed {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:9px 16px calc(9px + env(safe-area-inset-bottom));
  }

  .mobile-fixed .btn {
    flex-shrink:0;
    min-height:44px;
  }
}

/* Small phones */
@media(max-width:480px) {
  .wrap,
  .header .inner {
    width:calc(100% - 30px);
  }

  .hero-visual {
    height:340px;
  }

  .hero-copy {
    padding:43px 20px 37px;
  }

  .hero h1 {
    font-size:clamp(39px,10vw,52px);
    line-height:1.37;
  }

  .hero p {
    font-size:13px;
  }

  .hero-actions {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .hero-actions .btn {
    width:100%;
  }

  .section {
    padding:65px 0;
  }

  .section h2,
  .feeling h2 {
    font-size:clamp(33px,8.5vw,44px);
  }

  .result-space,
  .result-card:nth-child(2) .result-space {
    height:280px;
  }

  .result-placeholder {
    padding:18px;
  }

  .feel-answer {
    min-height:270px;
    padding:21px;
  }

  .groom-heading h2,
  .journey-heading h2 {
    font-size:clamp(36px,9vw,49px);
  }

  .groom-detail {
    padding:21px;
    min-height:345px;
  }

  .groom-detail::before {
    inset:10px;
  }

  .groom-detail-top {
    font-size:8px;
  }

  .journey-art {
    min-height:285px;
  }

  .hussein-visual {
    min-height:450px;
    padding:22px;
  }

  .hussein-portrait-ring {
    width:min(260px,78%);
  }

  .hussein-visual-bottom strong {
    font-size:clamp(45px,11vw,60px);
  }

  .hussein-visual-top {
    font-size:8px;
  }

  .contact h2 {
    font-size:39px;
  }

  .mobile-fixed > span {
    font-size:10px;
  }
}

/* Very narrow screens */
@media(max-width:360px) {
  .hero h1 {
    font-size:37px;
  }

  .brand strong {
    font-size:12px;
  }

  .brand span {
    font-size:7px;
  }

  .groom-detail h3 {
    font-size:29px;
  }

  .hussein-visual-bottom strong {
    font-size:43px;
  }

  .mobile-fixed {
    padding-inline:10px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
  }
}

/* SITE_RESPONSIVE_V1_END */