/* Ish Travel – contact page styles.
 * Generated from phase 2/design/contact.html (approved designs, 24 Oct 2026).
 * Edit here from now on; the design HTML is no longer the source. */

.hero h1{font-size:clamp(46px, 7.4vw, 88px); max-width:13ch; line-height:1.02}

.hero__intro{font-size:19px; max-width:46ch; text-shadow:0 1px 14px rgba(0,0,0,.55)}

.hero h1,.hero__eyebrow{text-shadow:0 2px 24px rgba(0,0,0,.3)}

.dest__visual{position:relative; max-width:500px; width:100%; justify-self:center; display:grid; gap:22px}

.dest__visual svg{width:100%; height:auto; display:block; overflow:visible}

.dest__photo{transition:opacity .5s}

.dest__name{font:300 clamp(30px,3.4vw,40px)/1 var(--serif); fill:#fff; font-style:italic}

.dest__sub{font:600 11px var(--sans); letter-spacing:.16em; text-transform:uppercase; fill:#FFD9A8}

.months{display:grid; gap:10px}

.months__head{display:flex; justify-content:space-between; font-size:13px; color:var(--muted)}

.months__head b{color:var(--fg); font-weight:600}

.months ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(12,1fr); gap:4px}

.months li{text-align:center; font:600 11px/1 var(--sans); padding:9px 0; border-radius:999px; background:var(--fill); color:var(--muted); transition:background .35s, color .35s}

.months li.on{background:var(--red); color:#fff}

.dest__list a{display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 18px; padding:18px 4px; text-decoration:none; transition:padding .3s}

.dest__list b{font:300 clamp(26px,3vw,32px)/1.1 var(--serif); transition:color .3s}

.home-tag{font:600 10px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--red); border:1px solid currentColor; border-radius:999px; padding:4px 8px; margin-left:10px; vertical-align:middle; font-style:normal}

@media (max-width:820px){
  .topbar__l a:not(:first-child){display:none}
  .qs{grid-template-columns:1fr 1fr; border-radius:26px}
  .qs__f{border-right:0; border-bottom:1px solid rgba(18,17,15,.12)}
  .qs__f:first-child{grid-column:1 / -1}
  .qs__f:nth-child(3){border-bottom:1px solid rgba(18,17,15,.12)}
  .qs__f:focus-within{border-radius:18px}
  .qs .btn{grid-column:1 / -1; justify-content:center; margin-top:8px}
  .ways,.dest,.cta,.news{grid-template-columns:1fr}
  .way{min-height:440px}
  .way__body{padding:26px}
  .dest__visual{max-width:400px}
  .cta::after{display:none}
}

@media (max-width:560px){
  .topbar__r a:not(.heart){display:none}
  .wa span{display:none}
  .wa{padding:16px}
  .months li{font-size:9px}
  .hdr__bar{height:66px}
  .logo small{display:none}
  .hero .wrap{padding-block:120px 28px}
  .hero__intro{font-size:17px}
  .exp{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr}
  .why div,.why div + div{padding-left:0; border-left:0; border-bottom:1px solid var(--line); padding-bottom:24px}
  .dep{grid-template-columns:1fr auto; grid-template-areas:"d p" "t t" "s b"; gap:12px}
  .ftr__top{grid-template-columns:1fr}
  .news form{flex-direction:column; border-radius:24px}
  .news input{padding:14px 16px}
  .news .btn{justify-content:center}
  .head{margin-bottom:30px}
}

.crumbs{font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:center}

.crumbs a{text-decoration:none}

.c-head{padding-block:28px 40px}

.c-head h1{font-size:clamp(48px,7vw,88px); margin-top:16px; max-width:12ch}

.c-head h1 em{color:var(--red)}

.c-head p{font-size:19px; color:var(--muted); max-width:52ch; margin-top:16px}

.chan{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:18px}

.ch{border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:26px; display:grid; gap:12px; align-content:start}

.ch--wa{background:var(--fg); color:var(--bg); border-color:var(--fg)}

.ch__icon{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--bg-alt); color:var(--red)}

.ch--wa .ch__icon{background:var(--red); color:#fff}

.ch small{font:600 11px/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

.ch--wa small{color:color-mix(in srgb, var(--bg) 65%, transparent)}

.ch b{font:400 28px/1.15 var(--serif); user-select:all; overflow-wrap:anywhere}

.ch p{font-size:14px; color:var(--muted)}

.ch--wa p{color:color-mix(in srgb, var(--bg) 75%, transparent)}

.ch__acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}

.ch__acts .btn{padding:11px 16px; font-size:14px}

.ch--wa .btn--ghost{border-color:color-mix(in srgb, var(--bg) 35%, transparent); color:var(--bg)}

.online{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#7FBF8A}

.online::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb, currentColor 25%, transparent)}

.online.off{color:color-mix(in srgb, var(--bg) 60%, transparent)}

.c-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(28px,5vw,70px); align-items:start}

.cform{border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:clamp(22px,3.4vw,36px); display:grid; gap:18px}

.cform h2{font-size:clamp(30px,3.4vw,40px)}

.cform h2 em{color:var(--red)}

.cform > p{color:var(--muted); margin-top:-8px}

.row{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 16px}

.f{display:grid; gap:6px; min-width:0}

.f label{font-size:13px; font-weight:600}

.f label small{font-weight:400; color:var(--muted)}

.f input,.f select,.f textarea{width:100%; border:1px solid var(--line); background:var(--bg); border-radius:12px; padding:13px 14px; font-size:15px}

.f select{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:34px}

.f textarea{min-height:150px; resize:vertical}

.f input:focus,.f select:focus,.f textarea:focus{outline:none; border-color:var(--fg); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 10%, transparent)}

.f .err{display:none; font-size:13px; color:var(--red-deep); font-weight:600}

.f.bad input,.f.bad select,.f.bad textarea{border-color:var(--red-deep)}

.f.bad .err{display:block}

.hint{font-size:12.5px; color:var(--muted)}

.count{justify-self:end}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.send{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}

.send p{font-size:13px; color:var(--muted); max-width:36ch}

.send p a{color:var(--fg); font-weight:600}

.sent{display:grid; gap:14px; justify-items:start}

.sent h2{font-size:clamp(30px,3.4vw,40px)}

.sent h2 em{color:var(--red)}

.sent p{color:var(--muted)}

.tick{width:52px; height:52px; border-radius:50%; background:var(--st-tea); color:#fff; display:grid; place-items:center; font-size:22px}

.office{display:grid; gap:18px}

.map{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--bg-alt)}

.map svg{display:block; width:100%; height:auto}

.map .sea{fill:color-mix(in srgb, var(--st-ocean) 22%, var(--bg-alt))}

.map .park{fill:color-mix(in srgb, var(--st-tea) 18%, var(--bg-alt))}

.map .road{stroke:var(--card); fill:none; stroke-linecap:round}

.map .road--main{stroke:color-mix(in srgb, var(--red) 25%, var(--card))}

.map text{font:600 11px var(--sans); fill:var(--muted); letter-spacing:.04em}

.map text.big{font:400 italic 16px var(--serif); fill:color-mix(in srgb, var(--st-ocean) 70%, var(--fg))}

.map .pin{fill:var(--red)}

.map .pinring{fill:var(--red); opacity:.2; transform-box:fill-box; transform-origin:center; animation:pulse 2.4s ease-out infinite}

@keyframes pulse{0%{transform:scale(.6); opacity:.35} 100%{transform:scale(2.4); opacity:0}}

.map__open{position:absolute; right:14px; bottom:14px; padding:10px 14px; font-size:13px}

.addr{display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; border:1px solid var(--line); border-radius:22px; padding:20px; background:var(--card)}

.addr svg{color:var(--red); margin-top:4px}

.addr b{font:400 22px/1.2 var(--serif); display:block}

.addr span{display:block; color:var(--muted); font-size:14px; user-select:all}

.addr small{display:block; font-size:13px; color:var(--muted); margin-top:8px}

.hours{border:1px solid var(--line); border-radius:22px; padding:20px; background:var(--card); display:grid; gap:10px}

.hours__top{display:flex; justify-content:space-between; align-items:center; gap:10px}

.hours__top b{font:400 22px/1.2 var(--serif)}

.status-now{font-size:13px; font-weight:600; display:inline-flex; gap:8px; align-items:center; padding:6px 12px; border-radius:999px; border:1px solid currentColor}

.status-now.open{color:var(--st-tea)}

.status-now.closed{color:var(--muted)}

.hours dl{margin:0; display:grid; grid-template-columns:1fr auto; gap:8px 16px; font-size:14px}

.hours dt{color:var(--muted)}

.hours dd{margin:0; font-weight:600; font-variant-numeric:tabular-nums}

.hours dt.today,.hours dd.today{color:var(--fg); font-weight:700}

.hours p{font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:10px}

.quick{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px}

.quick a{border:1px solid var(--line); border-radius:20px; padding:18px; background:var(--card); text-decoration:none; display:grid; gap:6px; transition:border-color .2s, transform .2s}

.quick a:hover{border-color:var(--red); transform:translateY(-3px)}

.quick b{font:400 20px/1.2 var(--serif); display:flex; justify-content:space-between; gap:8px}

.quick b svg{color:var(--red)}

.quick span{font-size:13px; color:var(--muted)}

.toast{position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom,0px)); transform:translate(-50%, 20px); opacity:0; pointer-events:none; z-index:95; background:var(--fg); color:var(--bg); border-radius:999px; padding:13px 20px; font-size:14px; font-weight:600; transition:.35s}

.toast.on{opacity:1; transform:translate(-50%, 0)}

@media (max-width:1000px){ .chan{grid-template-columns:1fr 1fr} .ch--wa{grid-column:1 / -1} .quick{grid-template-columns:repeat(3, minmax(0,1fr))} }

@media (max-width:820px){ .c-grid{grid-template-columns:1fr} }

@media (max-width:620px){ .chan,.row{grid-template-columns:1fr} .quick{grid-template-columns:1fr 1fr} .wa span{display:none} .wa{padding:16px} }